/**
 * Theme Name: emploi
 * Template:   twentytwenty
 * Author:     N B
 * Tags:       light, dark, two-columns, right-sidebar, responsive-layout, accessibility-ready
 * ...other header fields
 */

* {box-sizing: border-box;}
html{overflow-x: hidden;}
body {font-size: 20px !important; font-weight: 400 !important; color: #252525; line-height: 1.5; overflow-x: hidden;}
h1, h2, h3, h5 {font-family: 'Muli';}
a {text-decoration: none !important; } 
li{ list-style: none;}
h1, h2, h3, h4, h5, h6 { margin-top: 0px; margin-bottom: 0px; } 
ul { margin-bottom: 0px; padding-left: 0;}
.container {max-width: 1320px; margin: auto;} 
/* h2 {color: #000000CC; font-size: 64px !important; font-weight: 700 !important; text-align: center;} */
h2 {color: #000000CC; font-size:64px; text-align: center; font-weight: 700 !important; font-size: 64px;}
@media only screen and (min-width:768px){
  h2 {font-size: 56px !important; font-weight: 700 !important;}
}

/*.container {max-width: 980px;}*/
.mobile-menu {display: none;}

.topbottom{animation: topbottom 5s infinite;}
@-webkit-keyframes topbottom {
  0% {-webkit-transform: translate(0, 0); transform: translate(0, 0);}
  50% {-webkit-transform: translate(0, 20px); transform: translate(0, 20px);}
  100% {-webkit-transform: translate(0, 0); transform: translate(0, 0);} 
}

.topbottom2{animation: topbottom2 5s infinite;}
@-webkit-keyframes topbottom2 {
  0% {-webkit-transform: translate(0, 0); transform: translate(0, 0);}
  50% {-webkit-transform: translate(0, 30px); transform: translate(0, 30px);}
  100% {-webkit-transform: translate(0, 0); transform: translate(0, 0);} 
}

/*Header*/
.header-area h3 {font-size: 50px; color: #000;}
.fixed_header .main-nav .logo{ padding-top: 0;}
.fixed_header .main-nav .logo img { max-width: 60%; }
.header-area .main-nav .nav li.menu-item-has-children:hover li.menu-item-has-children > .sub-menu{ left: 100%; top: 0; }
.header-area .main-nav .nav li.menu-item-has-children li.menu-item-has-children:hover i{ color: #fff; transform: translateY(-50%) rotate(-90deg); }
.sticky_menu .logo_sec { flex: 1 0 auto; text-align: left; }
.sticky_menu.main-nav .nav li { margin: 0 25px; }
.sticky_menu.main-nav .nav li a{ font-size: 17px; color: #333; padding: 10px 0; color: #fff;}
.sticky_menu.main-nav .nav li:last-child{ margin-right: 0; }
.header-area .main-nav .nav li.menu-item-has-children>a:after { content: ''; position: absolute; top: 50%; transform: translateY(-50%); right: -18px; background: url(../images/down_icon.png) no-repeat; width: 14px; height: 9px; background-size: 12px; }
.btm_nav_inner{ position: relative; }
.sticky_menu .logo_sec img{ max-width: 200px;}

.header-sec p{ font-size: 16px; font-weight: 600; color: #073C70; margin-bottom: 0; }
.header-sec p a{ color: #073C70; }
.header-sec p a:hover{ text-decoration: underline !important; }
.header-sec ul li a{ font-size: 18px; color: #073C70; font-weight: 500; font-family: 'Gotham Narrow'; transition: .3s all ease;}

.header-sec ul li:not(:last-child){ margin-right: 30px; }
.header_top{ background: #Ffff; padding: 8px 0; }
.header-area{ position: absolute; top: 0; left: 0; right: 0; margin: auto; width: 100%; z-index: 9999; border-bottom: 1px solid #d7d7d7;}


/*Banner*/
.hero {padding: 100px 0; background-position: center right; background-size: 950px; background-repeat: no-repeat; margin-top: 80px;}
.hero h1,
.hire-sec h1,
.get-hire-sec h1,
.contact h1,
.pricing-sec h1,
.about-sec h1 {font-size: 70px; font-weight: 700; color: #000000CC; line-height: 68px; letter-spacing: 1.5px; font-family: 'Bodoni Moda'; margin-bottom: 20px;}
.hero .myBtn,
.hire-sec .myBtn,
.get-hire-sec .myBtn,
.contact .myBtn,
.pricing-sec .myBtn,
.about-sec .myBtn {font-size: 24px; margin-top: 20px; border-width: 1.88px 1.88px 8.46px 1.88px; border-style: solid; border-color: #000000; padding: 6px 30px; border-radius: 50px;}

/*Banner Box*/
.bnr-box .box-btn {background-color: #ECE3FF; padding: 30px 0px; border-radius: 20px; border: 1px solid #000000CC; box-shadow: 5px 11px 9px #888888;}
.bnr-box .box-btn h5 {padding: 10px;}
.bnr-box .box-btn-slide .btn-slide {border: 1px solid #000000CC; margin: 5px; border-radius: 30px; background-color: #fff;}

/*count*/
.count {text-align: center; padding: 100px 0;}
.count .container {width: 1100px;}
.count .count-body {padding: 30px 0 0;}
.count p {padding: 30px; font-size: 20px; font-weight: 300; font-family: 'Inter';}
.count .count-body .counter h3 {font-size: 80px;}
.count .count-body .counter h3 span {font-size: 80px; font-weight: 700; color: #000;}
.count .count-body .counter p {font-size: 22px; color: #000000CC; margin-bottom: 0;}

/*Our Process*/
.process {padding-top: 100px; padding-bottom: 100px; background-color: #ffc2c242;}
.process .process-sub-head h2 {margin-bottom: 20px;}
.process .process-sub-head p {text-align: center; margin-bottom: 80px;}
.process .job-description {padding: 20px; border-radius: 25px; border: 1px solid #000000CC; margin: 0;}
.process h3 {font-size: 27px; font-weight: 400;}
.process .job-description-icon {text-align: right;}
/* .process i {font-size: 70px;} */
.process .process-btn {border: 1px solid #000000CC; margin: 15px 0; border-radius: 30px; background-color: #fff; padding: 4px 30px;}
.process .process-box .col-md-4:first-child .job-description {background-color: #FFFEAD; box-shadow: 5px 10px 20px #e3e16e inset;}
.process .process-box .col-md-4:nth-child(2) .job-description {background-color: #C5F5FB; box-shadow: 5px 10px 20px #8dc0c7 inset; }
.process .process-box .col-md-4:nth-child(3) .job-description {background-color: #D2FFC2; box-shadow: 5px 10px 20px #90df74 inset;}
.process .process-box .col-md-4:nth-child(4) .job-description {background-color: #C5F5FB; box-shadow: 5px 10px 20px #8dc0c7 inset;}
.process .process-box .col-md-4:nth-child(5) .job-description {background-color: #D2FFC2; box-shadow: 5px 10px 20px #90df74 inset;}
.process .process-box .col-md-4:nth-child(6) .job-description {background-color: #FFFEAD; box-shadow: 5px 10px 20px #e3e16e inset;}


.process .process-box .col-md-4:first-child .job-description:hover {box-shadow: 5px 10px 18px #888888;}
.process .process-box .col-md-4:nth-child(2) .job-description:hover {box-shadow: 5px 10px 18px #888888;}
.process .process-box .col-md-4:nth-child(3) .job-description:hover {box-shadow: 5px 10px 18px #888888;}
.process .process-box .col-md-4 .job-description{ margin-bottom: 25px; min-height: 300px; }

/*Outdated Recruitment Models*/
.models {padding: 100px 0; background-color: #ECE3FF;}
.models h2 {margin-bottom: 50px;}
.models .models-box {background-color: #fff; padding: 20px 30px; border-radius: 13px; border: 1px solid #050505; margin: 8px 8px 30px; min-height: 320px; height: 340px;}
.models .models-box h5 {text-align: center; font-size: 24px; font-weight: 500; margin-bottom: 20px;}
.models .models-box ul li {font-size: 18px; font-weight: 400; line-height: 1.5; margin-bottom: 20px; padding-left: 28px; position: relative;}
.models .models-box ul li img {width: 20px; position: absolute; top: 3px; left: 0;}

/*.models .col-md-4 .models-box:hover {padding: 50px; border-width: 1.88px 6.46px 6.46px 1.88px; border-radius: 15px;}
.models .col-md-4 .models-box:hover ul li {font-size: 19px;}*/

/*.models .col-md-4 .models-box:hover {padding: 40px; border-width: 1.88px 6.46px 6.46px 1.88px; border-radius: 15px; transform: scale(1.1);}
.models .col-md-4 .models-box:hover ul li {font-size: 19px;}*/

.models .col-md-4 .models-box:hover {box-shadow: -5px 4px 0 0 #050505; transform: scale(1.0.2); transition: transform .5s; background-color: #fee3ff5c; }
.models .col-md-4 .models-box:hover ul li {font-size: 18px;}

/*Testimonials*/
#testimonials .swiper-carousel .container {width: 1000px;}
#testimonials .swiper-carousel {position: relative;}
#testimonials .testimonials-body {padding: 30px; border: 1px solid #00000033; border-radius: 25px;}
#testimonials {padding: 100px 180px;}
#testimonials .testimonials-head h2 {margin-bottom: 30px;}
#testimonials .testimonials-body .testimonials-img {text-align: center;}
#testimonials .testimonials-body .testimonials-img img {width: 50%; border-radius: 30px; margin:auto}
#testimonials .testimonials-body .testimonials-img h5 {font-size: 25px; font-weight: 700; margin-top: 20px;}
#testimonials .testimonials-body .testimonials-img p {font-size: 20px;}
#testimonials .testimonials-body .testimonials-review {position: relative;}
#testimonials .testimonials-body .testimonials-review p {text-align: center; padding: 20px 50px; line-height: 1;}
#testimonials .testimonials-body .testimonials-review .coma1 {position: absolute; top: 50px; left: 10px;}
#testimonials .testimonials-body .testimonials-review .coma2 {position: absolute; top: 50px; right: 10px;}

#testimonials .testimonials-body .testimonials-review:first-child img {width: 5%;}
#testimonials .testimonials-body .testimonials-review .coma img {width: 5%; position: absolute; top: 165px; left: 475px; rotate: -179.71°; transform: rotate(180deg);}

.swiper {width: 100%; height: 100%;}
.swiper-slide {text-align: center; font-size: 18px; background: #fff; justify-content: center; align-items: center;}
.swiper-slide img {display: block; width: 100%; height: 100%; object-fit: cover;}
.swiper-button-next {position: absolute; top: 190px; right: 35px;}
.swiper-button-prev {position: absolute; top: 190px; left: 35px;}

/*Long-term alignment with zero capex*/
.zero-capex {background-color: #FFFEADD9; padding: 80px 0;}
.zero-capex .container {width: 800px;}
.zero-capex .zero-capex-cont {background-color: #fff; padding: 30px; border: 1px solid #000; border-radius: 16px; margin-top: 30px; border-width: 1.88px 1.88px 5.46px 1.88px;}
.zero-capex .zero-capex-cont .zero-capex-cont-box {display: flex; margin-bottom: 30px;}
.zero-capex .zero-capex-cont .zero-capex-cont-box h3 {margin-bottom: 15px; font-size: 24px;}
.zero-capex .zero-capex-cont .zero-capex-cont-box .zero-capex-img {width: 25%;}
.zero-capex .zero-capex-cont img {width: 72%; margin: auto; padding: 18px; background: #D2FFC2; border: 1px solid #050505; border-radius: 12px;}
.zero-capex .zero-capex-cont .zero-capex-cont-boxs {border-bottom: 1px solid #00000033;}
.zero-capex .zero-capex-cont .zero-capex-cont-box:nth-child(2) img {background: #D7C5FB;}
.zero-capex .zero-capex-cont .zero-capex-cont-box:nth-child(3) img {background: #FFFE86B2;}

/*FAQs*/
.faq {padding: 80px 0;}
.faq .faq-head {}
.faq .faq-head h2 {text-align: left; margin-bottom: 15px;}
.faq .faq-sec {border: 1px solid #050505; border-radius: 24px; padding: 30px;}
.faq .faq-sec .accordion-button {font-size: 20px; color: #050505;}
.accordion-item {border: var(--bs-accordion-border-width) solid #818181;}





/* Slider Ball Section */
.application-process-container {position: relative;padding-top: 50px;}

    /* Vertical line positioned centrally between the columns */
.line {position: absolute;
      left: -3%;
      top: 0;
      bottom: 0;
      width: 4px;

      background-color: #ccc;
      z-index: 1;
      transform: translateX(-50%);
    }

    /* The moving ball (dot) */
    .slider-ball {
      position: absolute;
      left: calc(-3% - 9px); /* Adjust ball to be exactly in the center */
      width: 20px;
      height: 20px;
      border-radius: 50%;
      background-color: #007bff;
      z-index: 99999;
      transition: top 0.3s ease-in-out;
    }

/*Reach out to us today*/
.reach-out {background-color: #ece3ff; padding: 60px 0;}
.reach-out .container {width: 900px;}
.reach-out .reach-out-head {text-align: center; margin-bottom: 10px;}
.reach-out .reach-out-head p {color: #000000; font-weight: 400; font-size: 20px; margin-top: 20px;}
.reach-out .reach-out-item {text-align: center; justify-content: center; display: flex; font-size: 18px; color: #000000; font-weight: 600;}
.reach-out li i {background: #14ae5c; padding: 5px; border-radius: 50%; font-size: 10px; color: white; margin-right: 8px; vertical-align: middle;}
.reach-out li {margin: 10px;}
.reach-out .reach-out-btn .myBtn {font-size: 24px; margin-top: 20px; background: #fff; border-width: 1.88px 1.88px 8.46px 1.88px; border-style: solid; border-color: #000000; padding: 6px 30px; border-radius: 50px;}

/*Footer*/
.footer {background-color: #050505; padding: 80px 0;}
.footer .footer-left p, a {font-size: 20px;}
.footer .footer-text-color {color: #ece3ff; text-align: left;}
.footer .social-icon ul {padding: 0px; margin: 0px; margin-top: 70px; display: flex; justify-content: start;}
.footer .social-icon ul li {display: flex; list-style: none; background-color: #ece3ff; border-radius: 50%; width: 50px; height: 50px; justify-content: center; align-items: center;}
.footer .social-icon ul li:not(:last-child) {margin-right: 10px;}
.footer .social-icon ul li a {color: black; font-size: 25px;}
.footer .footer-menu ul {text-align: right;}
.footer .footer-menu ul li {padding: 0px 5px; border-left: 2px solid #5d5e61; margin-left: 5px; padding-left: 18px !important;}
.footer .footer-menu ul li a,
.footer .footer-copyright p {color: #8c8e92; font-size: 20px;}
.footer-menu li { display: inline-block; }
.footer .copyright {vertical-align: bottom; position: relative;}
.footer .copyright .footer-copyright p {position: absolute; bottom: 0; right: 0;}


/*-----------------------------------------------------------SUB PAGES-----------------------------------------------------------------------
--------------------------------------------------------------------------------------------------------------------------------------------*/

/*==========About==========*/
/*About Hero*/
.about-sec {padding: 100px 0; background-image: url(../img/about.png); background-position: right; background-size: contain; background-repeat: no-repeat; margin-top: 80px;}

/*Founders*/
.founders {padding: 80px 0;}
.founders .container {width: 1100px;}
.founders .founders-box {border: 1px solid #050505; border-radius: 24px; padding: 35px 35px 15px; position: relative; margin: 20px; box-shadow: 0px 3px 0px 0px ; min-height: 230px;}

.founders .founders-box .founders-img img {width: 23%; position: absolute; bottom: 0; left: 10px;}
.founders .founders-box .founders-cont h5 {font-size: 24px; font-weight: 700; margin-bottom: 10px;}

/*vision*/
.vision {padding: 80px 0; background-color: #ECE3FF;}
.vision .container {width: 1000px;}
.vision .vision-cont {position: relative;}
.vision p { font-size: 40px; font-family: Bodoni Moda; text-align: center; font-weight: 600; line-height: 1.3; }
.vision-img1 { width: 50px; width: 50px; position: relative; left: -20px; top: -5px;}
.vision-img2 { width: 50px; width: 50px; transform: rotate(180deg); position: relative; right: -20px; top: 5px;}


/*==========Hired==========*/

/*Hired Hero*/
.hire-sec {padding: 180px 0;  background-position: right; background-size: contain; background-repeat: no-repeat; margin-top: 80px;}

/*Here's how we build your 
high-performing team:*/
.application-proccess {padding: 80px 0;}
.Professional-title {color: #333225;}
.Professional-Process {background-color: white; border: 1px solid black;}
.professional-icon-img {text-align: center; border: 1px solid black; width: 150px; height: 150px; display: flex; justify-content: center; align-items: center;}
.professional-item:first-child .professional-icon-img {background-color: #d2ffc2;}
.professional-item:nth-child(2) .professional-icon-img {background-color: #d7c5fb;}
.professional-item:nth-child(3) .professional-icon-img {background-color: #fffeaa;}
.professional-icon {width: 100px;}
.professional-item-right p {color: #434447;}
.professional-item-right hr {border: 1px solid #b3b3b3; opacity: 1; margin-left: -35px; margin-right: 134px; margin-top: 30px !important;}
.col-12 .professional-item {margin-bottom: 25px;}
.counts {width: 100px; height: 100px; border-radius: 50%; text-align: center; display: flex; justify-content: center; justify-items: center; border-width: 1.88px 1.88px 4.46px 1.88px; border-style: solid; border-color: #000000;}
.application-proccess-item:first-child .counts {background: #fffe86;}
.application-proccess-item:nth-child(2) .counts {background: #fffe86;}
.application-proccess-item:nth-child(3) .counts {background: #d7c5fb;}
.application-proccess-item:nth-child(4) .counts {background: #ffc2c2;}
.application-proccess-item:nth-child(5) .counts {background: #d2ffc2;}
.application-proccess-item:nth-child(6) .counts {background: #C5F5FB;}
.application-proccess-item:nth-child(7) .counts {background: #FFFE86;}
.application-proccess-item:nth-child(8) .counts {background: #D2FFC2;}
.padding-top-bottom {padding: 70px 0px 100px 0px;}
 span.dotTitle {width: 40px; height: 40px; display: block; position: absolute; z-index: -1; border-radius: 50%; top: -15px; left: -15px;}
.application-proccess-item {padding-right: 50px;}
.application-proccess-item:first-child span.dotTitle {background: #fffeaa;}
.application-proccess-item:nth-child(2) span.dotTitle {background: #fffeaa;}
.application-proccess-item:nth-child(3) span.dotTitle {background: #ece3ff;}
.application-proccess-item:nth-child(4) span.dotTitle {background: #ffd4d4;}
.application-proccess-item:nth-child(5) span.dotTitle {background: #d2ffc2;}
.application-proccess-item:nth-child(6) span.dotTitle {background: #C5F5FB;}
.application-proccess-item:nth-child(7) span.dotTitle {background: #FFFE86;}
.application-proccess-item:nth-child(8) span.dotTitle {background: #D2FFC2;}
p.countNumber {margin-top: 25px; font-weight: 500;}
hr.hrLineVerticale {border: 1px solid black; height: 100%; opacity: 1; position: absolute;z-index: -1;}
span.dotTop {width: 25px; height: 25px; background: black; position: absolute; top: 0px; border-radius: 50%;}
span.dotBottom {width: 25px; height: 25px; background: black; position: absolute; bottom: 0px; border-radius: 50%;}
.margin-50 {margin: 50px 0px;}
.application-proccess-item-right {padding: 50px 80px; border-radius: 50px; border-width: 1px 1px 6px 1px; border-style: solid; border-color: black;}
.application-proccess-item-right:hover{background-color: #ffffd0;}
.application-proccess-item-right img {width: 150px;}
.application-proccess-item-right h5 {font-size: 26px;}
.application-proccess-item-right p {font-size: 20px;}
.fa-solid, .fas {font-weight: 900; font-size: 5px; margin-right: 10px; vertical-align: middle;}

/*Get Hired*/
.get-hire-sec {padding: 110px 0; background-position: right; background-size: contain; background-repeat: no-repeat; margin-top: 80px;}


/*Pricing*/
/*.container-narrow {width: 1600px;}*/
.pricing-sec {padding: 180px 0 200px 0; background-position: right; background-size: contain; background-repeat: no-repeat; margin-top: 80px;}
.pricing .container {width: 1320px;}
.pricing .pricing-item {border: 1px solid black; padding: 30px; border-radius: 30px; height: 100%;}
.pricing .pricing-item .pricing-title {font-size: 24px; font-weight: 600;}
.pricing .pricing-sub-title {color: #666666;}
span.icon i {width: 20px; height: 20px; background: #333333; border-radius: 50%; text-align: center; color: white; padding-top: 5px; font-size: 12px; vertical-align: middle; margin-bottom: 10px;}
.pricing .pricing-item ul li {margin: 10px 0px; display: flex;}
.pricing .pricing-item p {font-size: 18px; margin-left: 10px; font-weight: 600; color: #434447; margin-top: 20px;}
span.pricing-text {font-size: 18px; margin-left: 10px; font-weight: 600; color: #666666;}
.pricing .card-btn .myBtn {font-size: 24px; margin-top: 20px; border-width: 1.88px 1.88px 8.46px 1.88px; border-style: solid; border-color: #000000; padding: 6px 30px; border-radius: 50px;}
.pricing .card-btn {text-align: center; margin-top: 35px;}
.add-ons {background-color: #fff;}
.add-ons-item .icon img {width: 100px;padding: 14px;height: 100px;bor;border-radius: 20%;}
.add-ons [class*="col-"]:first-child .add-ons-item .icon img {background: #fffead;}
.add-ons [class*="col-"]:nth-child(2) .add-ons-item .icon img {background: #c5f5fb;}
.add-ons [class*="col-"]:nth-child(3) .add-ons-item .icon img {background: #ffc2c2;}
.add-ons [class*="col-"]:nth-child(4) .add-ons-item .icon img {background: #d2ffc2;}
.add-ons [class*="col-"]:nth-child(5) .add-ons-item .icon img {background: #4a4c3b2e;}
.add-ons-item {background-color: #f6f4f4; padding: 30px; border-radius: 30px; text-align: center; border-width: 1px 1px 5px 1px; border-style: solid; border-color: black; height: 100%;}

/*=====Contact Us=====*/

/*Get In Touch*/
.contact {padding: 180px 0; background-image: url('http://localhost/my-wp-project/emploi/wp-content/uploads/2024/10/contact.png'); background-position: right; background-size: contain; background-repeat: no-repeat; margin-top: 80px;}
.contact-section {background-color: #fffead; padding: 80px;}
.contact-section .container {max-width: 1320px}
.contact-section-title {color: black;}
.contact-section .contact-info h5 {font-size: 1.4rem; font-weight: 600;}
.contact-section .contact-info .location-icon i {vertical-align: top;}
.contact-section .contact-info .contact-text {font-size: 20px;}

span.location-icon i {font-size: 25px; margin-right: 15px;}
span.contact-text {margin-top: -5px;}
.margin-top {margin-top: 50px;}
.contact-info li {margin: 20px 0px;}
.form-label{font-size: 1.3rem; font-weight: 600;}
form.contactForm label {font-size: 1.3rem; font-weight: 600;}
form.contactForm input,
form.contactForm select,
form.contactForm textarea {background: #f1f1f2; font-size: 1.2rem; font-weight: 100 !important; padding: 6px 20px; border: none; border-radius: 5px;}
.contact-left-side,
.contact-right-side {padding: 50px; background: white; border-radius: 30px; border-width: 1px 5px 5px 1px; border-style: solid; border-color: black;}
.contact-btn .myBtn {font-size: 24px; margin-top: 20px; border-width: 1.88px 1.88px 8.46px 1.88px; border-style: solid; border-color: #000000 !important; padding: 6px 50px; border-radius: 50px; background-color: #fff !important;}
.form-control, .form-select, textarea.form-control{background: #f1f1f2 !important; font-size: 1.2rem !important; font-weight: 100 !important; padding: 6px 20px !important;  border: none; border-radius: 5px !important; }
textarea.form-control{height: 100px;}

.ambition .para_sec p{ padding-bottom: 0; padding-top: 0; }
.ambition h2{ margin-bottom: 30px; }
.hero p{ font-weight: 300; font-family: 'Inter'; }
.models h2{ margin-bottom: 15px; }
.models p{ margin-bottom: 50px; }
.add-ons-text{ font-weight: 600; margin-bottom: 15px; line-height: 1.3; margin-top: 20px; }
.add-ons-item p{ font-size: 15px; }
.ppl_bg{ background-color: #ECE3FF; }
.ppl_bg .container {width: 1100px;}
.bg_yl{ background: rgb(255,254,173); }
.make_section .process-box .col-md-4 .job-description{ min-height: 220px; }

.works_section{ background-image: url('https://cilearningschool.com/emploi/web/wp-content/uploads/2025/01/works_banner.png') }

/* Responsive Start  */
@media only screen and (max-width: 1280px) {
  .container {max-width: 1150px;}
  .hero h1 {font-size: 60px;}
  .hero {padding: 150px 0; background-size: 800px; background-repeat: no-repeat;}
  .count {text-align: center; padding: 100px 0;}
  .count .count-body .counter h3,
  .count .count-body .counter h3 span {font-size: 60px;}
  h2 {font-size: 55px;}

  .swiper-button-next {right: -110px;}
  .swiper-button-prev {left: -30px;}
}

@media only screen and (max-width: 1700px) {
  .container-narrow {margin: 0px 30px;}
}
@media only screen and (max-width: 1250px) {
  span.pricing-text {font-size: 20px;}
}
@media only screen and (max-width: 1368px) {
  .container { max-width: 1240px;}
  .Professional-Process {margin: 25px 25px;}
  .hero-contact {margin: 0px 30px;}
  .contact-section {padding: 80px 30px;}
  .swiper-button-prev {left: -35px;}
  .swiper-button-next {right: -50px;}
  .count {padding: 100px 0;}
  .models {padding: 100px 0;}
  #testimonials {padding: 100px;}
  .hero h1, .hire-sec h1, .get-hire-sec h1, .contact h1, .pricing-sec h1, .about-sec h1 { font-size: 60px; line-height: 1;}
  .hero { padding: 70px 0; background-size: 750px;}
  .job-description p{ font-size: 17px; }
  .process h3 { font-size: 24px;}
}
@media only screen and (max-width: 1140px) {
  .container {max-width: 980px;}
  .professional-item-right hr {margin-left: 0px; margin-right: 0px;}
  .hero {padding: 150px 0; background-size: 685px; background-repeat: no-repeat;}
  .myBtn {font-size: 20px; border-width: 1.88px 1.88px 6.46px 1.88px;}
  #testimonials {padding: 30px;}
  #testimonials .container { max-width: 900px;}
  .swiper-button-next {right: 0;}
  .swiper-button-prev {left: 0;}
  .job-description-icon img {width: 100%;}
  .models {padding: 100px 0;}
}
@media only screen and (max-width: 1024px) {
  .hero-hire h1 {font-size: 70px; line-height: 80px;}
  .footer-menu ul li a {color: #8c8e92; font-size: 20px !important;}
  .footer-copyright p {color: #8c8e92; font-size: 21px !important;}
  form.contactForm label {font-size: 1.2rem; font-weight: 600;}
  form.contactForm input,
  form.contactForm select,
  form.contactForm textarea {font-size: 17px;}
  .process .process-btn {padding: 0px 11px;}
  h1 {font-size: 55px;}
  h2 {font-size: 47px;}
  .count .count-body .counter h3, .count .count-body .counter h3 span {font-size: 50px;}
  .count {padding: 80px 0 10px;}
}
@media only screen and (max-width: 991px) {
    .container {max-width: 980px;}
    .models .models-box {background-color: #fff; padding: 20px 30px; border-radius: 13px; border: 1px solid #050505; margin: 8px 8px 30px; min-height: 320px; height: 420px;}

}
@media only screen and (max-width: 912px) {
    .container {max-width: 100%;}
    .contact {background-image: none;}
}
@media only screen and (max-width: 992px) {
  h2.application-title {margin-bottom: 50px;}
  .application-proccess-item-right {padding: 45px 40px;}
}
@media only screen and (max-width: 768px) {
   #testimonials .container {max-width: 100%;}
   .container {max-width: 100%;}
   .contact {background-image: none;}
   .models .models-box {background-color: #fff; padding: 20px 30px; border-radius: 13px; border: 1px solid #050505; margin: 8px 8px 30px; height: auto;}

}
@media only screen and (max-width: 820px) {
    .models .models-box {padding: 13px;}
    .models .models-box ul li {font-size: 18px; line-height: 30px;}
    .contact {background-image: none;}
}
@media only screen and (max-width: 850px) {
	:root {
    --swiper-navigation-size: 30px;}
    p {font-size: 18px;}
    h2 {font-size: 40px;}
  .header-area h3 {font-size: 40px;}
  .footer h2 {font-size: 40px;}
  .footer .social-icon ul li {width: 45px; height: 45px;}
  .footer .social-icon ul li a {font-size: 20px;}
  .footer-copyright p {font-size: 18px !important;}
  .hero {background-size: 560px;}
  .mobile-menu .menu-icon {display: inline-block;}
  .mobile-menu {text-align: right;}
  .desktop-menu {display: none;}
  a.menu-icon {background: #fffead; color: black; font-size: 25px; border: none; padding: 7px 14px; border-radius: 10px;}
  ul.menuUl li {text-align: left; margin: 10px 0px;}
  ul.menuUl li a {font-size: 26px;}
  .hero-pricing h1 {font-size: 70px;}
  #testimonials {padding: 50px 0;}
  #testimonials .container {max-width: 820px;}
  #testimonials .testimonials-body .testimonials-img h5 {font-size: 20px; font-weight: 600;}
  #testimonials .testimonials-body .testimonials-img span {font-size: 17px;}
  #testimonials .testimonials-body .testimonials-review p {top: 50px; padding: 0 20px;}
  .swiper-button-prev {display: none;}
  .swiper-button-next {display: none;}
  .models .models-box {padding: 18px; margin: 10px 0;}
  .faq {padding: 50px 10px;}
  .zero-capex .zero-capex-cont .zero-capex-cont-box .zero-capex-img {text-align: center;}
  .zero-capex .zero-capex-cont img {width: 55%; padding: 15px;}
  .hero .myBtn, .hire-sec .myBtn, .get-hire-sec .myBtn, .contact .myBtn, .pricing-sec .myBtn, .about-sec .myBtn, .reach-out .reach-out-btn .myBtn {font-size: 20px; border-width: 1.88px 1.88px 5.46px 1.88px;}
  .process h3 {font-size: 22px;}
  .process .job-description {padding: 10px 3px;}
  .process .process-btn {padding: 0px 9px; font-size: 14px;}
  .job-description p {font-size: 17px;}
  .count {padding: 100px 0 50px;}
  .count .container {width: 100%;}
  .hero h1, .hire-sec h1, .get-hire-sec h1, .contact h1, .pricing-sec h1, .about-sec h1 {font-size: 55px; line-height: 50px; letter-spacing: 0;}
  .reach-out .container {width: 100%;}
  .fa-solid, .fas {font-size: 25px; margin-right: 0px;}
  .contact {background-image: none;}
}
@media only screen and (max-width: 767px) {

  .container {max-width: 480px;}
  .count .count-body .counter h3, .count .count-body .counter h3 span {font-size: 40px;}
  .count p {padding: 5px; font-size: 18px;}
  .contact-right-side {margin-top: 30px;}
  .contact-section {padding: 40px 20px;}
  .contact-left-side,
  .contact-right-side {padding: 20px; margin-top: 20px;}
  .footer-copyright p {color: #8c8e92; font-size: 18px !important; position: relative !important; text-align: left !important; margin-top: 20px;}
  .footer-menu ul {text-align: left; padding-left: 0;}
  .footer-menu ul li a {color: #8c8e92; font-size: 18px !important;}
  .padding-top-bottom {padding: 50px 10px;}
  .footer-menu ul li {margin: 10px 0px;}
  .container-narrow {margin: 0px 0px;}
  .hero-pricing {padding: 103px 0; background-image: url(../img/banner/banner.png); background-position: top center; background-size: cover; background-repeat: no-repeat; margin-top: 50px; position: relative; padding-bottom: 20px;}
  .hero-hire h1 {font-size: 60px; line-height: 70px;}
  .hero-hire {padding: 0px 0; background-image: url(../img/banner/hire.png); background-position: top center; background-size: cover; background-repeat: no-repeat; margin-top: 160px; position: relative; padding-bottom: 50px;}
  .Professional-Process {margin: 20px 0px; padding: 20px 12px !important;}
  .professional-item-right h2 {margin-top: 15px;}
  span.dotTop {display: none;}
  .col-md-2.d-flex.justify-content-center.align-items-center.position-relative {margin: 10px 0px;}
  .application-proccess-item-right img {width: 130px; margin-bottom: 40px;}
  span.dotBottom {display: none;}
  .bnr-box .box-btn {margin: 10px;}
  .hero h1, .hire-sec h1, .get-hire-sec h1, .contact h1, .pricing-sec h1, .about-sec h1 {font-size: 45px;}
  .hero {background-size: 450px;}
  .hero p {font-size: 18px;}
  .hero .myBtn, .hire-sec .myBtn, .get-hire-sec .myBtn, .contact .myBtn, .pricing-sec .myBtn, .about-sec .myBtn, .reach-out .reach-out-btn .myBtn {font-size: 18px; border-width: 1.88px 1.88px 5.46px 1.88px; padding: 4px 25px;}
  .job-description-icon img {width: 30%;}
  .process .process-box .col-md-4:first-child .job-description {margin: 25px;}
  .process .process-box .col-md-4:nth-child(2) .job-description {margin: 25px;}
  .process .process-box .col-md-4:nth-child(3) .job-description {margin: 25px;}
  .process .container {max-width: 90%;}
  .process .process-btn {padding: 3px 20px; font-size: 16px;}
  .process .process-sub-head p {margin-bottom: 20px;}
  .job-description .pb-3 {padding-bottom: 0rem !important;}
  .models .col-sm-6:nth-child(3) {margin: auto;}
  #testimonials .container {max-width: 100%;}
  #testimonials .testimonials-body .testimonials-img img {width: 50%; margin: auto;}
  #testimonials .testimonials-body .testimonials-review p {padding: 0 20px; top: 0px; right: 0px; font-size: 16px; text-align: left;}
  #testimonials .testimonials-body .testimonials-img span {font-size: 16px;}
  #testimonials .container {max-width: 90%;}
  .zero-capex .container {width: 90%;}
  .faq .container {max-width: 90%;}
  .count .count-body .col-md-3:first-child {width: 25%;}
  .count .count-body .col-md-3:nth-child(2) {width: 25%;}
  .count .count-body .col-md-3:nth-child(3) {width: 25%;}
  .count .count-body .col-md-3:nth-child(4) {width: 25%;}
  .pricing-sec {background-image: none; text-align: center;}
  .hire-sec {background-image: none; text-align: center;}
  .contact {background-image: none;}
  .about-sec {padding: 20px 10px 190px 10px; background-position: 155px 290px; background-size: 350px; text-align: center;}
  .hero {padding: 20px 10px 190px 10px; background-position: 255px 390px; background-size: 285px; text-align: center;}
}

@media only screen and (max-width: 550px) {

  .process .process-box .col-md-4 .job-description {
    margin-bottom: 10px !important;
}
.choose_main_section .choose_col:first-child {
    border-top-left-radius: 0px !important;
    border-bottom-left-radius: 0px !important;
    border-left: 0px solid #4a4a44 !important;
}
   /*COMMON*/
   p {font-size: 17px !important;}	
  .hero h1,
  .hire-sec h1,
  .get-hire-sec h1,
  .contact h1,
  .pricing-sec h1,
  .about-sec h1 {font-size: 45px; font-weight: 600; color: #000000CC; line-height: 40px; letter-spacing: 1.5px; font-family: Bodoni Moda;}
  .hero p, .hire-sec p, .get-hire-sec p, .contact p, .pricing-sec p, .about-sec p {font-size: 17px; margin-top: 15px;}
  .hero .myBtn,
  .reach-out .reach-out-btn .myBtn,
  .hire-sec .myBtn,
  .get-hire-sec .myBtn,
  .contact-section .myBtn,
  .contact .myBtn,
  .pricing-sec .myBtn,
  .pricing .card-btn .myBtn,
  .about-sec .myBtn {font-size: 17px; color: #000; margin-top: 10px; border-width: 1.88px 1.88px 5.46px 1.88px; border-style: solid; border-color: #000000; padding: 5px 25px; border-radius: 50px;}

  /*HOME*/
  :root {
    --swiper-navigation-size: 25px;}
    :root {
    --swiper-theme-color: #000;}

   .hero {padding: 50px 10px; background-position: 235px 240px; background-size: 175px; background-image: none; text-align: center;}

   .bnr-box {padding-top: 15px;}
   .bnr-box .box-btn {margin: 10px;}

   .count {padding: 50px 0;}
   .count .container {width: 100%;}
   .count .count-body .counter h3 span {font-size: 40px;}
   .count .count-body .counter h3 {font-size: 40px;}
   .count p {padding: 10px; font-size: 17px;}
   .count .count-body {padding: 0;}
   .count .count-body .col-md-3 {width: 100% !important;}

   .process {padding-bottom: 50px;}
   .process .process-sub-head p {margin-bottom: 50px;}
   .process .process-box {text-align: center; margin: auto;}
   .process.job-description-head {width: 50%; margin: auto; margin-bottom: 20px;}
   .process .job-description-icon {text-align: center; width: 100%; margin-top: 20px;}
   .process .job-description-icon img {width: 30%;}
   .process .job-description {margin: 0px 0; padding: 15px;}
   .process .job-description p {margin-top: 10px;}
   .process .process-box .col-md-4:first-child .job-description {margin: 0 0 8px 0;}
   .process .process-box .col-md-4:nth-child(2) .job-description {margin: 0 0 8px 0;}
   .process .process-box .col-md-4:nth-child(3) .job-description {margin: 0 0 8px 0;}
   .process .process-btn {margin: 10px 0;}
   .models {padding: 50px 0;}
   .models h2 {margin-bottom: 35px;}
   .models .models-box {padding: 28px; margin: 15px 0;}
   .models .col-sm-6:first-child .models-box {margin-bottom: 20px;}

   .zero-capex {padding: 50px 0;}
   .zero-capex .container {width: 100%;}
   .zero-capex .zero-capex-cont {text-align: center; margin: 10px;}
   .zero-capex .zero-capex-cont .zero-capex-cont-box {display: inline-block; margin-bottom: 30px;}
   .zero-capex .zero-capex-cont .zero-capex-cont-box .zero-capex-img {margin: auto;}
   .zero-capex .zero-capex-cont img {width: 100%; padding: 10px; margin-bottom: 20px;}

   .reach-out .container {width: 100%;}
   .reach-out .reach-out-item {display: inline;}

   #testimonials {padding: 50px 10px;}
   .container {max-width: 100%;}
   .swiper-button-prev {left: -25px;}
   .swiper-button-next {right: -25px;}

   .faq {padding: 50px 0; margin: 10px;}


  .header-area h3 {font-size: 30px; font-weight: 500;}
  .fa-solid, .fas {font-weight: 900; font-size: 25px; margin-right: 0;}
   h2 {color: #000000CC; font-size: 40px; font-weight: 600; text-align: center;}
  .hero-pricing h1 {font-size: 50px; line-height: 60px;}
  .hero-hire h1 {font-size: 50px; line-height: 60px;}
  .hire-sec {padding: 50px 0; background-position: 188px 283px; background-size: 200px; background-image: none; text-align: center;}

  .contact {padding: 50px 10px; background-image: none; background-position: 127px 250px; background-size: 260px; text-align: center;}
  .contact-section .contact-info .contact-text {font-size: 17px;}
  span.location-icon i {font-size: 20px; margin-right: 12px;}
  .margin-top {margin-top: 20px;}

  .footer-right {margin-top: 20px;}
  .footer .footer-left p, a {font-size: 17px;}
  .footer .footer-menu ul {text-align: left;}
  .footer .footer-menu ul li {padding: 0px 10px; border-left: 1px solid #5d5e61;}
  .footer .social-icon ul {margin-top: 35px;}
  .footer .social-icon ul li {width: 35px; height: 35px;}
  .footer .social-icon ul li a {color: black; font-size: 20px;}



  .application-proccess-item {padding-right: 0px;}
  p.countNumber {margin-top: 18px;}
  .counts {width: 60px; height: 60px;}
  .application-proccess-item-right {padding: 20px; text-align: center;}
  .application-proccess-item-right ul li i {font-size: 6px; margin-right: 10px;}
  .application-proccess-item h5,
  .application-proccess-item-right h5 {font-size: 26px; text-align: left;}
  .application-proccess-item ul li,
  .application-proccess-item-right ul li {text-align: left; font-size: 17px;}
  .margin-50 {margin: 5px 0px;}
  .application-proccess-item-right img {width: 100px; margin-bottom: 30px;}


  .get-hire-sec {padding: 35px 10px; background-position: 240px 170px; background-size: 220px; background-image: none; text-align: center;}

  .pricing-sec {padding: 50px 0; background-position: 119px 242px; background-size: 269px; background-image: none; text-align: center;}
  .pricing .pricing-item {padding: 20px;}
  .pricing .card-btn {margin-top: 0px;}
  .add-ons-item .icon img {width: 80px; height: 80px;}
  .works_section {background-repeat: no-repeat; background-position: center bottom !important;}
  .about-sec {padding: 20px 10px 200px 10px !important; background-position: 140px 225px; background-size: 330px !important; text-align: center;}
  .hero {padding: 20px 10px 190px 10px; background-position: 125px 370px; background-size: 210px; text-align: center;}
  .founders {padding: 50px 0;}
  .founders .founders-box {padding: 20px; text-align: center; margin: 15px;}
  .founders .founders-box .founders-img img {width: 100%; position: relative; left: 0; margin-bottom: 20px;}
  .vision {padding: 50px 30px;}
  .vision p {font-size: 25px !important;}
  .vision-img1 img {left: 0; width: 25px;}
  .vision-img2 img {right: 28px; width: 25px;}
  .faq .container {max-width: 100%;}
  .faq .faq-sec .accordion-button {font-size: 18px;}
  .faq .faq-sec {padding: 14px;}
  .mobile-menu {display: block;}


    .hire-sec {padding: 20px 10px 200px 10px !important;  background-size: 330px !important; text-align: center;}

    .hire-sec {
        background-position: 15px 330px !important;
        background-size: 330px !important;
        margin-bottom: 60px !important;
    }
    .about-sec.our-story {padding: 20px 10px 230px 10px !important;  background-size: 330px !important; text-align: center;}

    .about-sec.our-story {
        background-position: 15px 260px !important;
        background-size: 330px !important;
        margin-bottom: 0px !important;
    }
    .get-hire-sec {padding: 20px 10px 200px 10px !important;  background-size: 330px !important; text-align: center;}
        .get-hire-sec {
          background-position: 15px 330px !important;
        background-size: 330px !important;
        margin-bottom: 60px !important;
        }

        .contact {   padding: 20px 10px 200px 10px !important;  background-size: 330px !important; text-align: center;}
         .contact {
          background-position: 15px 330px !important;
        background-size: 330px !important;
        margin-bottom: 0px !important;
        } 

}
@media only screen and (max-width: 390px) {
.about-sec {padding: 20px 10px 115px 10px; background-position: 10px 330px; background-size: 330px; text-align: center;}
.hero {padding: 20px 10px 165px 10px; background-position: 95px 415px; background-size: 175px; text-align: center;}
  
}

@media only screen and (max-width: 348px) {
  .hero {padding: 20px 10px 180px 10px; background-position: 85px 480px; background-size: 172px; text-align: center;}
  
  #testimonials {padding: 50px 20px;}
  .process .container {max-width: 100%;}
  #testimonials .container {max-width: 100%;}
}