@font-face {
  font-family: 'Inter';
  src: url('../fonts/Inter/Inter_18pt-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Inter';
  src: url('../fonts/Inter/Inter_18pt-SemiBold.ttf') format('truetype');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

*,body{margin: 0;font-family: 'Inter';color: #000;}
img{max-width: 100%;}
:root {
  --primary-color: #4b86f9;
  --secondary-color: #85c3f5;
  --slate-color: #0F172A;
  --neutral-color: #1E293B;
  --light-color: #F8FAFC;
  --white-color: #ffffff;
  --black-color:#000000;
  --transparent-color:#ffffffcf;
  --body-text:#CBD5E1;
  --off-white-color:#fffdfa;
  --comman-paragraph-font:1.1vw;
  --comman-small-heading-font:1.5vw;
  --banner-heading:clamp(1.375rem,.5387rem + 2.6761vw,3.30rem);
  --comman-heading-size:clamp(1.5rem, 0.9278rem + 1.831vw, 4rem);
  --comman-border:#e5e5e5;
}
p{font-size:var(--comman-paragraph-font);}
.primary-color{color: var(--primary-color);}
.secondary-color{ color: var(--secondary-color);}
.slate-color{color: var(--slate-color);}
.neutral-color{color: var(--neutral-color);}
.white-color{color: var(--white-color);}

/* comman h2 css */
.who-we-are-section h2,.focus-section h2,.capabilities-section h2,
.categories-section h2,.partners-section h2, #factory-certifications h2,
.value-section h2, .category-main-title, .trusted-title,
.partner-title-main, .opration-title, .contact-title
{color:var(--secondary-color);font-size:var(--comman-heading-size);font-weight:600;margin:0 0 2vw 0;text-transform:uppercase;letter-spacing:3px;line-height:3rem}
.off-white-color{background:var(--off-white-color);}
section{padding:10rem 0;}

/* header css */
header{transition: all 0.3s;}
header.scrolled{background:var(--transparent-color);}
header.scrolled a.navbar-brand, header.scrolled .navbar-expand-lg .navbar-nav .nav-link{color:var(--primary-color);}
header.scrolled .navbar-expand-lg .navbar-nav .nav-link:hover{color:var(--slate-color);}
.navbar-nav .nav-link:hover, .navbar-nav .nav-link.active, .navbar-nav .nav-link:focus, .navbar-nav .nav-link:hover{color:var(--secondary-color);}
a.nav-link {font-size: 1.1vw;padding: 0.5rem 0.6rem !important;}
.navbar-brand{font-weight: 600 !important;font-size: 1.5rem;}
a.nav-link.contact-btn {border:2px solid var(--black-color);padding:.3rem 2.5rem!important;margin-left:21px;border-radius:10px;}
a.nav-link.contact-btn:hover{background:var(--black-color);color:var(--white-color)!important;}


/* banner css */
.hero-section{background:linear-gradient(rgb(255 236 189 / 40%), rgb(251 231 184 / 48%)),url('../images/banner-img.webp');background-size:cover;background-repeat:no-repeat;background-position:top;padding:8rem 0;}
.hero-section .row{height: 100vh;}
.hero-section h1 {font-size:var(--banner-heading);font-weight:600;}
.hero-section .subheading {font-size:1.8vw;font-weight:500}
.banner-content h5 {font-size:2vw;font-weight:600;letter-spacing:10px;}
.btn{padding:14px 40px;border-radius:6px;text-decoration:none;font-weight:600;}
.primary-btn {color: var(--white-color);background: var(--secondary-color);}
.secondary-btn {color: var(--light-color);background: var(--primary-color);border:1px solid var(--primary-color);}
.outlined-btn{color: var(--white-color);background:var(--primary-color);}
.banner-content .btn {max-width: 200px;display: flex;align-items: center;}
.banner-button .outlined-btn:hover, .banner-button .primary-btn:hover{color:var(--white-color);opacity: 0.8;}
.banner-content {display: flex;flex-direction: column;gap: 45px;}
.scroll-down {transform:rotate(-45deg);margin:0 auto;animation:bounce 2s infinite;opacity:.8;margin:0 auto;width:30px}
.arrow {width:30px;height:30px;border-left:3px solid var(--secondary-color);border-bottom:3px solid var(--secondary-color);transform:rotate(-45deg)}
.navbar a{color: var(--black-color);font-weight: 400;}
section#who-we-are {padding: 0;}

/* who we are css */
.who-we-are-container {padding:2vw 5vw 2vw 3vw}
.who-we-are-section h3 {color:var(--slate-color);font-size:var(--comman-small-heading-font);font-weight:bold}
.who-we-are-section p {font-size:var(--comman-paragraph-font)!important;margin:0 0 2vw 0}
.who-we-are-section .mission-text{color:var(--primary-color);font-size:1.6rem!important}
.who-we-are-img img {width:100%}
.who-we-cont {border-left:1px solid var(--primary-color);padding:1rem 0 1rem 3rem;display:flex;flex-direction:column;justify-content:center}
.who-we-cont p {margin:0}

/* trusted by leading retailers css */
.trusted-bg {background:url(../images/leading-retails-bg.jpg) no-repeat left center;background-size:cover;min-height:100%}
.trusted-section .trusted-cont{min-height:600px}
.trusted-box {display:flex;align-items:center}
.trusted-content {width:55vw;margin:0 auto}
.trusted-line {width:100%;height:1px;background-color:var(--secondary-color);margin:20px 0}
.trusted-section {padding: 0;}

/* focus css */
.focus-section{padding: 10rem 0;border-bottom: 1px solid var(--comman-border);}
.focus-card{margin-top:40px;padding:20px;transition:all .3s ease-in-out;position:relative;min-height:250px;display:flex;flex-direction:column;justify-content:start;align-items:start;}
.focus-card img{width:51px}
.focus-card h3{font-size:var(--comman-small-heading-font);margin:0px 0px 25px;font-weight:bold}
.focus-content-area p {margin:3rem 0 2rem}
.our-values{margin-top:100px}
.focus-section .col-md-4 {padding:0}
@keyframes marquee-left {0%{transform:translateX(0)}100%{transform:translateX(-50%)}}
.focus-card.focus-middle {border-left:1px solid var(--secondary-color);border-right:1px solid var(--secondary-color);}

/* what we offer css */
.what-we-offer-cont {display:flex}
section#capabilities {padding:0 0 120px}
.what-we-offer-cont h2.text-center {width:60%;text-align:left!important;margin:0}
.what-we-offer-cont p {margin:0}
.row.mt-5.offer-main-box {margin:5rem 0 0 0!important}
.offer-box {display:flex;gap:20px;align-items:start;min-height:250px}
.offer-icon {width:50%}
.offer-icon img {filter:brightness(0) invert(0)}
.offer-content h3 {font-size:var(--comman-small-heading-font);font-weight:bold;margin-bottom:15px}
.capabilities-section{border-bottom:1px solid var(--comman-border);padding:10rem 0;}

/* product category section css */
.category-box { text-align:center}
.category-title {font-size:var(--comman-small-heading-font);font-weight:bold;margin-bottom:15px;min-height:80px}
.category-img {width:100%;height:auto;border-radius:2px;max-width:350px}
.key-product-section{padding: 10rem 0 0;}

/* sourcing office partners css */
.partner-container {padding:10rem 0;margin:10rem 0 0}
.partner-box {min-height: 420px;margin: 30px 0 0 0;padding: 15px 30px;}
.partner-title {font-size:var(--comman-small-heading-font);font-weight:bold;margin-bottom:30px}
.partner-list {padding-left:18px}
.partner-list li {margin-bottom:12px}
.divider {border-right:1px solid var(--secondary-color);height:100%}
.flag-icon img {width:100px;margin:0 0 21px;border-radius:150px;height:100px}

/* operate section */
section.operate-section {padding:0}
.operate-inner-container {padding: 10rem 5rem !important;}
.operate-bg {background:url("../images/operate-bg.jpg") no-repeat center center;background-size:cover;min-height:100%}
.section-label {font-size:14px;letter-spacing:4px;text-transform:uppercase;color:var(--secondary-color);font-weight:600;margin-bottom:20px}
.operate-intro {margin-bottom:50px}
.operate-item {display:flex;align-items:flex-start;margin-bottom:35px}
.operate-icon {width:28px;height:28px;border:1px solid var(--secondary-color);border-radius:50%;display:inline-flex;align-items:center;justify-content:center;color:var(--secondary-color);margin-right:40px;flex-shrink:0;font-size:14px}
.operate-item h3 {font-size:var(--comman-small-heading-font);font-weight:bold;margin-bottom:10px}
.cnt-heading h3,.cnt-p, .cnt-heading {font-size:var(--comman-small-heading-font);font-weight:bold;margin-bottom:10px}
small.note-text {font-size:10px;margin-top:10px}
.contact-pattern img {width:100%}
div#contact-us {padding: 10rem 0 0;}
h3.cnt-heading {margin-bottom:30px!important}

/* contact form css */
.contact-section{padding:0;}
form.contact-form {margin:50px 0 0;width:80%;border:1px solid var(--comman-border);padding:30px}
.contact-text ul {padding:0;margin:0}
.contact-text li {list-style:none;padding:10px 0}
.contact-text li a {display:flex;justify-content:start;align-items:center;gap:16px;color:var(--slate-color)!important;text-decoration:none;font-size:20px}
.contact-text li a img {width:25px}
.contact-form button {border-radius:0;border:none;color:var(--black-color);background:var(--primary-color);width:100%;border-radius:999px;padding:12px 40px!important}
.contact-form button:hover{background:var(--neutral-color)}
.form-label {font-weight:600}
.form-control {margin-bottom:10px}
input#company, .txt-box  {height:90px!important}

/* footer css */
.footer {background:var(--slate-color);padding:1% 0}
.footer p {color:var(--white-color);margin:0}
.social-icon ul {display:flex;justify-content:end;list-style:none;margin:0;padding:0;gap:15px}
.social-icon ul li img {filter:invert(100%) sepia(0%) saturate(7488%) hue-rotate(232deg) brightness(102%) contrast(103%);width:29px;}
.navbar-toggler-icon{background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%280, 0, 0, 0.55%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");}
.process-block {display:flex;text-align:left;gap:15px;align-items:center;line-height:20px;}
.footer-email a, .footer-website a {color:var(--black-color) !important;text-decoration:none;}
footer {padding: 6rem 0 1rem !important;}


/* Bouncing arrow animation */
@keyframes bounce {
 0% {
    transform: translateY(-20px);
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    transform: translateY(0);
    opacity: 1;
  }
}

@media screen and (max-width:1152px)
{
    section {padding: 5rem 0 0;}
    a.nav-link {padding: 0.5rem 0.3rem !important;}
}

@media screen and (max-width:1024px)
{
    .offer-box{min-height: 150px;}
    a.nav-link {font-size: 1vw;}
}
@media screen and (max-width:991px) 
{
    .hero-section .row {height: auto;}
    .hero-section .subheading, .banner-content h5{font-size: 3vw;}
    :root { --comman-paragraph-font:18px;--comman-small-heading-font:22px;}
}
@media screen and (max-width:767px) 
{
  header .container-fluid.px-5 {padding: 0px 1rem !important;}
  .multi-carousel-item,
  .clone {flex: 0 0 100%;}
  .process-warpper {flex-wrap: wrap;gap: 20px;}
  .process-warpper .process-block {gap: 15px;display: flex;align-items: center;width: 100%;}
  .primary-btn{padding: 10px 23px;display: flex;align-items: center;}
  .process-warpper hr {display: none;}
  .social-icon ul{margin: 15px 0 0;padding: 0;gap: 15px;justify-content: start;}
  header button.navbar-toggler {border: 1px solid var(--black-color);}
  section {padding:50px 0 0;}
  header.scrolled button.navbar-toggler{border: 1px solid var(--primary-color);}
  header.scrolled .navbar-toggler:focus {box-shadow: none !important;}
  header.scrolled .navbar-toggler-icon  {filter: invert(25%) sepia(100%) saturate(364%) hue-rotate(131deg) brightness(87%) contrast(89%);}
  .navbar-collapse {background: var(--white-color);position: relative;top: 10px;padding: 20px;}
  .navbar-collapse .navbar-nav a{color:var(--black-color);}
  .customer-logo-wrapper .row.text-center {flex-wrap: nowrap;overflow: auto;padding-bottom: 16px;}
  .customer-logo-wrapper .row.text-center .col-md-2.mt-5 {width: 60%;}
  .footer {background: var(--slate-color);padding: 10% 0;}
  a.nav-link {font-size: 14px;}
  .navbar-toggler:focus {box-shadow: unset !important;}   a.nav-link.contact-btn { margin-left: 0px; text-align: center;}
  
  /* comman padding */
  .focus-section, .capabilities-section, .key-product-section{padding: 5rem 0;}
  
  /* banner css */
  .hero-section{padding-bottom: 80px;}
  .hero-section .row {height: auto;padding: 5rem 0 1rem;}
  .hero-section .subheading, .banner-content h5{font-size: 20px;}
  
  /* who we are css */
  section#who-we-are {padding: 0rem 0 5rem;}
  #who-we-are .row.align-items-center {flex-direction: column-reverse;}
  .who-we-cont{margin: 2rem 0 0;padding: 1rem 0 1rem 2rem;}
  
  /* key focus css */
  .focus-card {margin-top:0px;padding: 15px !important;}
  .focus-card.focus-middle{border:none;}
  .focus-card.focus-middle:before, .focus-card.focus-middle:after{display: none;}
    
  /* what we offer */
  .what-we-offer-cont {flex-direction: column;}
  .what-we-offer-cont h2.text-center{width:100%;}
  
  /* trusted by brands */
  .trusted-content{width:100%;}
  
  /* our value levers */
  .value-section .col-lg-11.px-4.px-lg-5.py-5 {padding: 1rem 1.5rem !important;}
  .lever-item {margin: 0 0 2rem 0 !important;}
  
  /* source office partners */
  .partner-box {min-height: inherit;margin: 30px 0 0 0;}
  .partner-container {padding: 5rem 0;margin:0;}
  
  /* how we operate css */
  .operate-inner-container {padding: 5rem 1rem !important;}
  
  /* contact page */
  form.contact-form{width:100%;}
  
  .divider{border:none;}
  .category-title{min-height:inherit;}
}