@import url('https://fonts.googleapis.com/css2?family=Archivo:ital,wght@0,100..900;1,100..900&family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');

/* Reset CSS */
* {padding:0rem; margin:0rem;}
*:focus {outline: 0;}
html{ font-size: 16px;}
html, body{ -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-smoothing: antialiased; color: #3C4049;}
body{ margin:0; padding:0; font-family: "Inter", sans-serif; font-size: 1rem;}
ol, ul {list-style: none; margin:0; padding:0;}
:focus {outline: 0;}
a, a:link {text-decoration: none; outline:none;}
p { padding:0; margin:0;}
.clear {clear:both;}
a { text-decoration:none;}
a:hover {text-decoration:none;}
a:focus{outline:none !important;}
h1, h2, h3, h4, h5, h6 { margin:0; padding:0; font-weight:700; font-family: "Archivo", sans-serif;}
img {border:0; max-width:100%; height:auto;}
::-webkit-input-placeholder {opacity:1; color: #090C10;}
:-moz-placeholder{opacity:1; color: #090C10;}
::-moz-placeholder{opacity:1; color: #090C10;}
:-ms-input-placeholder{opacity:1; color: #090C10;} 
/* Reset CSS */



h2{ font-size: 3rem; color: #002E25; font-weight: 500;}
.highlight{ display: inline-block; border-radius: 0.375rem; background:#CDFA89; padding: 0 0.5rem;}

.site-link{ display: inline-flex; align-items: center; justify-content: center; padding: 0.5rem 1.25rem; border-radius: 4.375rem; background: #090C10; color: #FFF; gap: 0.5rem; font-weight: 500; font-size: 0.9rem; border: none; transition: all 0.5s ease;}
.site-link.white{ background: #FFF; color: #005242;}
.site-link:hover{ color: #CDFA89; box-shadow: 0 0 20px 0 #8cc734;}

.site-link.green{ color: #FFF; background: #005242;}

.site-link .bi::before, .site-link [class*=" bi-"]::before, .site-link [class^=bi-]::before{ font-weight: 500 !important;}
.site-link i{ font-size: 1.1rem; transition: all 0.5s ease;}
.site-link:hover i{ transform: translateX(5px);}

.hero-banner{ overflow: hidden; position: relative; color: #FFF; position: relative; text-align: center; background: #000;}

.hero-banner::after{ content: ''; position: absolute; width: 100%; height: 100%; left: 0; top: 0; background: radial-gradient(95.97% 26.34% at 74.72% 57.34%, rgba(9, 12, 16, 0.00) 0%, rgba(9, 12, 16, 0.20) 100%), linear-gradient(90deg, rgba(9, 12, 16, 0.00) 76.42%, #090C10 100%), linear-gradient(270deg, rgba(9, 12, 16, 0.00) 0%, #090C10 100%);}

/* .hero-banner::before{ content: ''; position: absolute; width: 100%; height: 100%; left: 0; top: 0; background: linear-gradient(to right,  rgba(0,0,0,1) 13vw,rgba(125,185,232,0) 25vw), linear-gradient(to right,  rgba(125,185,232,0) 75vw,rgba(0,0,0,1) 87vw);} */


/* .hero-img{ width: 100%; height: 100%; object-fit: cover;} */
.hero-banner-txt{ position: absolute; width: 100%; height: 100%; left: 0; top: 0; display: flex; align-items: flex-end; padding: 0 3rem; padding-bottom: 6rem; z-index: 2;}
.hero-banner h1{ font-size: 4.5rem;}
.hero-banner-in{ max-width: 47rem; text-align: left;}
.hero-banner p{ font-size: 1.125rem; line-height: 2rem;}
.hero-img img{ position: relative;}


/*  */
.home .logo img{ filter: none;}
.logo img{ filter: brightness(0) saturate(100%) invert(12%) sepia(37%) saturate(2718%) hue-rotate(142deg) brightness(91%) contrast(102%);}
.home .site-nav > ul > li > a{ color: #FFF;}
.home .site-nav > ul > li{ color: #FFF; }
.home .site-header .site-link.white{ background: #FFF; color: #0E4B40;}
/*  */

/* .hero-banner-txt .container{ max-width: 96.875rem;} */
.hero-banner .site-link{ background: #0E4B40; height: 4.3rem; min-width: 13rem; padding: 0 1.25rem; box-shadow: none !important;}
.site-header .site-link.white{ background: #0E4B40; color: #FFF;}

.site-header{ background: #FFF; height: 6.5rem; padding: 0 3rem; display: flex; align-items: center; justify-content: space-between; position: sticky; top: 0; width: 100%; z-index: 999; transition: all 0.5s ease;}
.home .site-header{ background: none; position: fixed; left: 0; }
.site-header.fixed{ background: rgba(255, 255, 255, 0.9); backdrop-filter: blur(10px); height: 5rem; box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.1);}

.site-header.fixed .site-nav > ul > li > a{ color: #0E4B40;}
.site-header.fixed .site-nav > ul > li{ color: #0E4B40; }
.site-header.fixed .logo img{ filter: brightness(0) saturate(100%) invert(12%) sepia(37%) saturate(2718%) hue-rotate(142deg) brightness(91%) contrast(102%);}
.site-header.fixed .site-link.white{ background: #0E4B40; color: #FFF;}
.site-header.fixed .site-nav > ul > li:hover > a{ color: #FFF;}
.site-header.fixed .site-nav > ul > li:hover{ color: #FFF;}

.header-left{ display: flex; align-items: center; gap: 8.5rem;}
.site-nav > ul{ display: flex; align-items: center; gap: 0.75rem;}
.site-nav > ul > li{ position: relative; color: #090C10; padding: 1.4375rem 0;}
.site-nav > ul > li > a{ display: block; font-size: 0.9rem;  color: #090C10; padding: 0.5rem 1rem;  font-weight: 500; border-radius: 100px; transition: all 0.5s ease;}
.site-nav > ul > li:hover{ color: #FFF;}
.site-nav > ul > li:hover > a{ background: #0E4B40; color: #FFF;}
.site-nav > ul > li i{ font-size: 14px;}
.subDropAlt{ position: absolute; right: 0.7rem; top: 50%; transform: translateY(-50%);}

/* .site-nav > ul > li.has-sub > a{ padding-right: 2rem; } */
.site-nav > ul > li:nth-child(2) > a{ padding-right: 2rem;}

.site-nav > ul > li > a.active{ background: #0E4B40 !important; color: #FFF !important;}
.site-nav > ul > li:has(.active) i{ color: #FFF !important;}

.site-nav > ul > li > ul{ position: absolute; left: 0; top: 100%; width: max-content; background: #FFF; padding: 1rem; border-radius: 1rem; box-shadow: 0 0 10px 0 #0e4b4075; opacity: 0; visibility: hidden; transition: all 0.5s ease; display: flex; flex-direction: column; gap: 5px;}
.site-nav > ul > li > ul > li > a{ font-size: 0.9rem; padding:0.5rem 1rem; border-radius: 50px; display: block; color: #0E4B40; font-weight: 500; transition: all 0.5s ease;}
.site-nav > ul > li > ul > li > a.active{ background: #0E4B40; color: #FFF;}
.site-nav > ul > li > ul > li > a:hover{ background: #0E4B40; color: #FFF;}

.site-nav > ul > li:hover > ul{ opacity: 1; visibility: visible;}

.mobClick { display: none; width: 24px; height: 16px; -webkit-transform: rotate(0deg); transform: rotate(0deg); -webkit-transition: .5s ease-in-out; transition: .5s ease-in-out; cursor: pointer; z-index: 999;}
.mobClick span { position: absolute; opacity: 1; left: 0; width: 24px; height: 3px; background: #CDFA89; display: block; border-radius: 50px; -webkit-transform: rotate(0deg); transform: rotate(0deg); -webkit-transition: .25s ease-in-out; transition: .25s ease-in-out;}
.mobClick span:nth-child(2) { top: 7px;}
.mobClick span:nth-child(3) { top: 14px;}
.mobClick.open span:nth-child(1) { top: 7px; -webkit-transform: rotate(135deg); transform: rotate(135deg);}
.mobClick.open span:nth-child(2) { opacity: 0; left: -20px;}
.mobClick.open span:nth-child(3) { top: 7px; -webkit-transform: rotate(-135deg); transform: rotate(-135deg);}
.mobClick.open{ position: fixed; z-index: 9999999999; right: 15px; top: 15px; margin: 0 !important;}
.mobClick.open span{ background: #CDFA89 !important;}

.site-header.fixed .mobClick span{ background: #002E25}

.feature-sec{ position: relative; z-index: 1; margin-top: -4.375rem;}
.feature-card{ border-radius: 1rem; border: 1px solid #EBECEF; background: #FFF; box-shadow: 0 0 0 4px rgba(24, 24, 27, 0.01); display: flex; padding: 1.5rem 2.5rem 1.75rem 2.5rem; justify-content: space-between; align-items: center; flex-direction: column; gap: 1rem; align-self: stretch; text-align: center; height: 100%;}
.feature-card h6{ font-size: 1.25rem; line-height: 2rem; font-family: "Inter", sans-serif; font-weight: 500; color: #090C10;}
.feature-card p{ padding: 0 2rem; line-height: 1.8rem;}

.approach{ padding: 6rem 0 6rem 0;}
.approach h3{ color: #002E25; font-size: 2rem; line-height: 2.5rem; font-weight: 500;}
.info-block{ color: #002E25;}
.info-block .bi::before, .info-block [class*=" bi-"]::before, .info-block [class^=bi-]::before{ font-weight: 600 !important;}
.approach-block{ margin-top: 6rem;}
.approach-block-info{ max-width: 25.5rem; display: flex; flex-direction: column; gap: 1.5rem;}
.approach-img{ width: 28.375rem; height: 28.5rem; background: linear-gradient(180deg, #E5E2DD 0%, #E5E2DD 100%); border-radius: 1rem; overflow: hidden;}

.approach-img-outer{ display: flex; justify-content: flex-end; position: relative; padding-right: 3.56rem;}
/* .approach-img-outer::after{ content: ''; position: absolute; right: 0; top: -1.8rem; width: 17.125rem; height: 22.75rem; border-radius: 1rem; background: #F6F7F8; transition: all 0.5s ease;} */
.approach-img{ position: relative; z-index: 2; display: flex; align-items: flex-end; justify-content: center;}

.approach-img-outer:hover::after{ width: 70%;}

.after-div{ position: absolute; right: 0; top: -1.8rem; width: 17.125rem; height: 22.75rem; border-radius: 1rem; background: #F6F7F8;}
.after-div.left{ right: inherit; left: 0;}

.approach-block.right .row{ flex-direction: row-reverse;}
.approach-block.right .approach-img-outer{ justify-content: flex-start; padding-left: 3.56rem; padding-right: 0; }
.approach-block.right .approach-img-outer::after{ right: inherit; left: 0;}
.approach-block.right .approach-block-info-outer{ display: flex; justify-content: end;}
.approach-block.right .approach-block-info{ max-width: 35rem;}

.companies{ background: url('../images/bg.jpg') repeat; padding: 10rem 0;}
.companies-block{ display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 2rem;}
.companies-block-left{ max-width: 26rem;}
.companies-block-right{ display: flex; flex-direction: column; gap: 1.5rem;}
.companies-block-right ul{ display: flex; align-items: center; justify-content: space-between; width: 40.25rem; flex-wrap: wrap;}
.companies-block-right ul li{ width: 30%; padding: 2rem 0; text-align: center;}
.companies-block-right ul li.divide{ width: 1px; height: 24px; background: #DAE7E3; padding: 0;}
/* .companies-block-right ul li img{ width: 7.5rem;} */

.company-logo{ max-width: 7.5rem; margin: 0 auto;}

.how{ padding: 7rem 0;}
.number-block{ display: flex; flex-wrap: wrap; align-items: flex-start; gap: 2.3rem;}
.block-number{ width: 4rem; height: 4rem; background: #F3F7F6; border-radius: 100%; display: flex; align-items: center; justify-content: center; position: relative; z-index: 2;}
.block-number span{ color:#E8FDC4; -webkit-text-stroke-width: 1px; -webkit-text-stroke-color: #50741B; font-size: 1.8rem; font-weight: 500; line-height: 2rem; font-family: "Archivo", sans-serif;}
.how ul{ display: flex; flex-wrap: wrap; flex-direction: column; gap: 3.4rem; margin-top: 4rem; position: relative;}
.how ul::after{ content: ''; position: absolute; width: 2px; height: calc(100% - 50px); left: 1.875rem; top: 10px; background: url('../images/line.png') repeat-y;}
.number-block h5{ font-size: 1.5rem; color: #002E25; font-weight: 500;}

.image-block-outer{ position: relative; padding-left: 2.4rem;}
/* .image-block-outer::after{ content: ''; position: absolute; left: 0; top: -1.8rem; width: 17.125rem; height: 22.75rem; border-radius: 1rem; background: #F6F7F8; transition: all 0.5s ease;} */
.image-block{ max-width: 31.5rem; border-radius: 2.5rem; overflow: hidden; position: relative; z-index: 2;}
.image-block img{ width: 100%;}

.image-block-outer:hover::after{ width: 70%;}


.stat{ padding: 7rem 0; background: url('../images/bg.jpg') repeat;}
.stat-left{ max-width: 26rem; height: 100%; display: flex; flex-direction: column; justify-content: space-between; align-items: flex-start;}
.stat-icon{ display: flex; width: 4rem; height: 4rem; justify-content: center; align-items: center; border-radius: 100%; background: #FFF;}
.stat-block h5{ font-size: 1.5rem; color: #002E25; font-weight: 500; padding-top: 1.5rem;}
.stat-block p{ padding-top: 0.8rem;}

.section{ padding: 7rem 0;}
.feed{ max-width: 30rem;}
.feed h6{ font-size: 1.5rem; line-height: 2.2rem; color: #090C10; font-weight: 500; padding-bottom: 1.7rem;}
.feed h5{ font-weight: 400; color: #D2D4DB; font-size: 2.5rem;}

.location{ background: url('../images/bg.jpg') repeat;}
.location-block{max-width: 21rem; margin: 0 auto;}
.location-block h6{ font-size: 1.25rem; font-weight: 500; font-family: "Inter", sans-serif;}

.talent{ display: flex; flex-direction: column; gap: 2rem; margin-top: 5rem;}
.talent-single{ display: flex; align-items: center; justify-content: center; gap: 2rem;}
.talent-img{ width: 17.125rem; height: 11.4375rem; background: #F8FEEC; border-radius: 1rem; display: flex; align-items: flex-end; justify-content: center; position: relative;}
.talent-img img{ position: relative; z-index: 2; max-height: 10.625rem;}
/* .talent-img::after{ content: ''; position: absolute; right: 12px; top: 12px; width: 7.5625rem; height: calc(100% - 24px); background: #E8FDC4; border-radius: 1rem; transition: all 0.5s ease;} */
.talent-info{ width: 35rem; position: relative;}
.talent-info h5{ font-size: 1.25rem; font-weight: 500; font-family: "Inter", sans-serif; color: #090C10;}
.talent-info p{ color: #3C4049;}
.talent-single:nth-child(even) .talent-img::after{ right: inherit; left: 12px;}

.talent-single:hover .talent-img::after{ width: calc(100% - 24px);}

.talent-after{ position: absolute; right: 12px; top: 12px; width: 7.5625rem; height: calc(100% - 24px); background: #E8FDC4; border-radius: 1rem; }
.talent-single:nth-child(even) .talent-after{ right: inherit; left: 12px;}


.faq{ background: url('../images/bg.jpg') repeat;}
.faq-card{ height: 100%; border-radius: 0.5rem; background: #FFF; box-shadow: 0 12px 40px 0 rgba(9, 12, 16, 0.04); padding: 2rem; transition: all 0.5s ease;}
.faq-card h5{ font-size: 1.1rem; font-weight: 500; font-family: "Inter", sans-serif; color: #090C10;}
.faq-card:hover{ box-shadow: 0 0 20px 0 #cdfa8959; border-radius: 1rem;}

.site-footer{ background: #090C10; color: #FFF; color: #9EA2AD; font-size: 0.9rem;}
.site-footer .container{ max-width: 65rem;}
.footer-top{ padding: 7rem 0;}
.footer-bottom{ display: flex; align-items: center; justify-content: space-between; border-top: 1px solid #1B1E23; padding: 1.5rem 0; }
.footer-bottom a{ color: #9EA2AD; }
.footer-bottom-link ul{ display: flex; align-items: center; gap: 1rem;}
.footer-bottom-link ul li a{ transition: all 0.5s ease;}
.footer-bottom-link ul li a:hover{ color: #CDFA89;}

.contact-card{ display: flex; align-items: center; justify-content: center; border-radius: 62.4375rem; border: 1px solid rgba(255, 255, 255, 0.08); background: rgba(255, 255, 255, 0.04); height: 2.5rem; padding: 0 1rem; gap: 0.5rem; color: #9EA2AD; transition: all 0.5s ease;}
.contact-card:hover{ border: 1px solid #CDFA89; color: #CDFA89;}

.footer-link{ display: flex; align-items: flex-start; gap: 3rem;}
.footer-link ul{ display: flex; flex-direction: column; gap: 0.8rem;}
.footer-link ul li a{ color: #9EA2AD; transition: all 0.5s ease;}
.footer-link ul li a:hover{ color: #CDFA89;}

.social-link{ display: flex; justify-content: end; padding-top: 4rem;}
.social-link ul{ display: flex; align-items: center; gap: 0.75rem;}
.social-link ul li a{ display: flex; align-items: center; justify-content: center; border: 1px solid rgba(255, 255, 255, 0.08); background: rgba(255, 255, 255, 0.04); border-radius: 100%; width: 2.5rem; height: 2.5rem; color: #D2D4DB;  transition: all 0.5s ease;}
.social-link ul li a i{ font-size: 1rem; line-height: 1.1rem;}
.social-link ul li a:hover{ border: 1px solid #CDFA89; color: #CDFA89;}



/*  */
.contact-sec{ background: #F3F7F6;}
.contact-wrap{ display: flex; flex-wrap: wrap; justify-content: space-between;}
.contact-left{ width: 30rem; display: flex; flex-direction: column; justify-content: space-between;}
.contact-right{ width: 28rem;}
.contact-block{ border-radius: 1rem; background: #FFF; box-shadow: 0 24px 56px -18.75px rgba(0, 46, 37, 0.06); padding: 2rem;}
.contact-form{ display: flex; flex-direction: column; gap: 1.25rem;}
.input{ width: 100%; border-radius: 62.4375rem; background: #FAFBFC; border: 1px solid #FAFBFC; padding: 0.75rem 1.5rem; transition: all 0.5s ease; font-size: 0.9rem;}
.input:focus{ border: 1px solid #002E25; }
textarea.input{ border-radius: 0.625rem; height: 9rem; padding: 1rem 1.5rem;}
.contact-logo{ border-bottom: 1px solid #EBECEF; padding-bottom: 2rem;}
.contact-logo img{ filter: brightness(0) saturate(100%) invert(12%) sepia(37%) saturate(2718%) hue-rotate(142deg) brightness(91%) contrast(102%);}
.contact-form{ padding-top: 2rem;}
/*  */


/*  */
.price-sec{ position: relative;}
.price-sec::after{content: ''; width: 100%; height: 35rem; position: absolute; left: 0; top: 0; background: url('../images/bg.jpg') repeat;}
.price-card-wrap{ margin-top: 4.2rem;}
.price-info{ max-width: 24rem;}
.price-card{ border-radius: 1rem; border: 1px solid #EBECEF; background: #FFF; overflow: hidden; height: 100%;}
.price-card-img{ height: 17.5rem;}
.price-card-img img{ width: 100%; height: 100%; object-fit: cover;}
.price-txt{ padding: 2rem; display: flex; flex-direction: column; gap: 1rem;}
.price-sec .container{ position: relative; z-index: 2;}
.price-card h5{ color: #090C10;}
/*  */


/*  */
.page-banner{ background: url('../images/bg.jpg') repeat;}
.testimonial-img{ width: 7.5625rem; height: 7.5625rem; border-radius: 100%; overflow: hidden;}
.testimonial-img img{ width: 100%; height: 100%; object-fit: cover;}
.testimonial-left h5{ font-weight: 500; color: #090C10; font-family: "Inter", sans-serif;}
.testimonial-left p{ color: #585D69; font-size: 14px;}
.testimonial-right{ width: 38rem;}
.testimonial-right h5{ font-family: "Inter", sans-serif; font-weight: 500; line-height: 2.2rem; color: #090C10;}
.testimonial-txt{ position: relative; padding: 0 3.125rem;}
.testimonial-txt span{ position: absolute; top: 0; left: 0; font-family: "Archivo", sans-serif; font-size: 4.5rem; color: #EBECEF; display: block; line-height: 2rem;}
.testimonial-txt h5 + span{ left: inherit; right: 0; top: inherit; bottom: 0; transform: rotate(180deg);} 

.section-green{ background: #F3F7F6;}
.approach-img-outer.green .approach-img{ background: #F8FEEC;}
.approach-img-outer.green::after{ background: #EBECEF;}
.approach-block-info.full{ max-width: 100%;}

.pay{ border-radius: 1rem; background: #F8FEEC; padding: 5.5rem 6.375rem; display: flex; align-items: flex-start; justify-content: space-between; position: relative;}
.pay-info{ display: flex; flex-direction: column; gap: 1.5rem; width: 30rem;}
.pay h2{ font-size: 2.5rem;}
.pay-img{ width: 23.4375rem; height: 32.25rem; border-radius: 1rem; background: #E8FDC4; position: absolute; right: 6.375rem; top: 5.5rem; display: flex; align-items: center; justify-content: center;}

.pay-section{ padding-bottom: 8rem;}
.gurantee{ border-radius: 1rem; border: 1px solid #EBECEF; padding: 5.5rem 6.375rem;}
.gurantee h2{ font-size: 2.5rem;}
/*  */

.for-mobile{ display: none;}

.after-div.green{ background: #EBECEF;}
.approach-img.green{ background: #F8FEEC;}


@media (max-width: 1599px) {
  html{ font-size: 15px;}
}

@media (max-width: 1400px) {
  html{ font-size: 14px;}
  .approach-block-info, .approach-block.right .approach-block-info{ max-width: 100%;}
  .feature-card p{ padding: 0;}
}

@media (max-width: 1300px) {
  html{ font-size: 13px;}
}

@media (max-width: 1199px) {
  .hero-banner h1{ font-size: 3.5rem;}
  .hero-banner-in{ max-width: 39rem;}
  .hero-banner{ height: 600px; min-height: unset;}
}

@media (max-width: 991px) {
 body{ font-size: 15px;}
 p{ font-size: 15px !important; line-height: 22px !important;}
 h2{ font-size: 2.7rem;}
.feature-sec{ margin: 0; padding: 6rem 0;}
.approach-img{ height: auto; padding-top: 40px;}
.companies-block-right{ width: 100%;}
.companies-block-right ul{ width: 100%;}
.approach{ padding-top: 0; padding-bottom: 50px;}
.approach-img-outer{ padding-right: 1.8rem;}
.approach-block.right .approach-img-outer{ padding-left: 1.8rem; }
.talent-info{ width: 23rem;}
.site-footer .container{ max-width: 720px;}
.companies{ padding: 7rem 0;}

.site-nav{ position: fixed; width: 100%; height: 100dvh; background: rgba(14, 75, 64, 0.8); backdrop-filter: blur(10px); left: -100%; top: 0; display: flex; align-items: center; justify-content: center; transition: all 0.5s ease;}
.site-nav.act{ left: 0;}
.site-nav > ul{ flex-direction: column;}
.site-nav > ul > li{ padding: 0;}
.site-nav > ul > li{ color: #FFF !important;}
.site-nav > ul > li > a{ font-size: 18px !important; color: #FFF !important; text-align: center;}
.site-nav > ul > li > ul{ opacity: 1 !important; visibility: visible !important; position: static !important; transition: none !important; display: none; margin: 12px 0 0 0;}
.site-nav > ul > li > ul > li > a{ font-size: 16px !important; background: none !important; color: #FFF !important;}
.site-nav > ul > li > ul{ background: #13574b;}
.subDropAlt{ top: 10px; transform: none;}
.subDropAlt{ width: 100%; text-align: right; z-index: 5;}
.mobClick{ display: block;}
.logo{ display: flex; align-items: center; gap: 10px;}
.site-link{ font-size: 14px; padding: 10px 20px;}

.input{ font-size: 15px;}
.site-header.fixed{ backdrop-filter: unset !important;}

/*  */
.contact-left{ width: 100%;}
.contact-right{ width: 100%;}
.contact-sec, .price-sec{ padding: 50px 0;}
/*  */

.pay-img{ position: static;}
.pay{ padding: 40px; gap: 30px;}
.gurantee{ padding: 40px;}
.pay-section{ padding-bottom: 0;}
}

@media (max-width: 767px) {
  h2{ font-size: 30px;}
  .container{ padding-left: 15px; padding-right: 15px; max-width: 100%;}
  .site-header{ padding: 0 15px;}
  .hero-banner-txt{ padding: 15px 0; padding-bottom: 40px;}
  .hero-banner h1{ font-size: 31px;}
  .hero-img{ object-position: right;}
  .approach-block{ margin-top: 50px;}
  .feature-sec, .section, .companies, .how, .stat, .footer-top{ padding: 50px 0;}
  .approach h3{ font-size: 22px;}
  .faq-card h5{ font-size: 17px;}
  .contact-card, .footer-link ul li a, .footer-bottom-link ul li a{ font-size: 15px;}
  .social-link{ justify-content: center;}
  .footer-bottom{ flex-wrap: wrap; justify-content: center;}
  .footer-bottom-link{ padding-top: 10px;}
  .footer-bottom-link ul{ flex-wrap: wrap; justify-content: center; gap: 4px 15px;}
  .footer-link{ justify-content: center;}
  .footer-top-left{ display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center;}
  .footer-link ul{ flex-direction: row;}
  .footer-link{ gap: 0.8rem; flex-wrap: wrap;}

  .pay{ padding: 50px 15px; flex-wrap: wrap; flex-direction: column; margin: 0 -15px; flex-direction: column-reverse;}
  .pay-info{ width: 100%;}
  .pay h2, .gurantee h2{ font-size: 28px;}
  .pay-img{ width: 100%;}
  .pay-section{ padding: 0;}
  .pay-img{ height: auto; padding: 30px 0;}
  .pay-img img{ max-height: 150px;}
  .gurantee{ padding: 25px;}

  .rep-card .approach-img{ width: 100px; padding-top: 15px;}
  .rep-card .approach-img-outer{ justify-content: flex-start;}
  .rep-card .approach-img-outer::after{ opacity: 0;}

  .feed-with-img{ display: flex; align-items: flex-end;}

  .for-mobile{ display: block;}
  .for-desktop{ display: none;}

  .rep-card .after-div{ display: none;}
  .no-break{ display: none;}
  .hero-banner::before{ content: ''; position: absolute; width: 100%; height: 48%; left: 0; bottom: 0; background: #090c11;}
}

@media (max-width: 576px) {
 .approach-block .row, .approach-block.right .row{ flex-direction: column-reverse;}
 .talent-single{ flex-wrap: wrap;}
 .talent-info{ text-align: center;}
 .talent-single{ padding:30px 15px; border-radius: 15px; box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.1);}
 .numBlock{ justify-content: center;}
 .footer-bottom p{ font-size: 14px;}
 .hero-banner{ height: 100dvh;}
 .divide{ display: none;}
 .companies-block-right ul{ flex-wrap: wrap; justify-content: center; padding: 0; gap: 30px 0;}
 .companies-block-right ul li{ width: 50%; text-align: center; padding: 10px 0;}
  .companies-block-right ul li img{ max-width: 100px;}
 .companies-block-right{ gap: 30px;}
 .number-block{ gap: 15px;}

 .hero-img{ height: 300px;}
 .hero-banner img{ width: 100%; height: 300px; object-fit: cover; object-position: right;}
 .hero-banner::before{  height: calc(100dvh - 300px);}
 .hero-banner .site-link{ width: 100%;}
 .approach-block.right{ margin-top: 80px;}

 .hero-banner-txt{ align-items: center; padding-bottom: 0; padding-top: 300px;}

  /* .hero-banner{ background: #0a0f13; height: auto;}
 .hero-banner-txt{ position: static; height: auto;} */

 .rep-card .approach-img{ width: 70px;}
 .feed-with-img p{ font-size: 14px !important; padding-top: 0 !important;}

 .location-block{ padding: 0; display: flex; align-items: center; max-width: 100%; text-align: left !important;}
 .location-img{ width: 80px;}
 .location-info{ width: calc(100% - 80px); padding-left: 20px;}

 .testimonial-left{ width: 100%; text-align: left !important; display: flex; align-items: center; justify-content: center; gap: 15px; order: 2;}
 .testimonial-img{ width: 70px; height: 70px;}
 .testimonial-right{ width: 100%; order: 1;}

 .footer-bottom p, .footer-bottom-link ul li a{ font-size: 13px !important;}

 .hero-banner::after{ opacity: 0;}

 .location h2, .hireSec h2{ font-size: 24px;}


}