/* Import Google Fonts */
@import url("https://fonts.googleapis.com/css2?family=Archivo+Narrow:ital,wght@0,400..700;1,400..700&family=Schibsted+Grotesk:wght@400;500;600;700&family=Inter:wght@400;500;600;700&display=swap");

/* Global Reset */
html{
  scroll-behavior: smooth;
}
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {  
   --font-inter: "Inter", sans-serif;
    font-size: var(--font-sm);
    background-color: var(--white);
    color: var(--gray-600);
    font-weight: 400px;
}

/* Root Variables */

:root {

    /* Colors */
    --white: #ffffff;
    --black: #000000;
    --transparent: transparent;

    --primary: #43AB48; 
    --secondary: #0a2032;

    --primary-100: #0B1D0C;
    --primary-200: #173B19;
    --primary-300: #2B6E2E;
    --primary-400: #358839;
    --primary-500: #43AB48;
    --primary-600: #6CC671;
    --primary-700: #BDE5BF;
    --primary-800: #E2F4E3;
    --primary-900: #F0F9F1;
    --primary-1000: #F8FCF8;

    --secondary-100: #051019;
    --secondary-200: #0A2032;
    --secondary-300: #184C77;
    --secondary-400: #1E5F95;
    --secondary-500: #2983CC;
    --secondary-600: #77B3E4;
    --secondary-700: #B2D4F0;
    --secondary-800: #DDECF8;
    --secondary-900: #EEF5FC;
    --secondary-1000: #F6FAFD;

    --gray-white: #FCFBFA;
    --gray-dark: #141514;
    --gray-50: #F6F6F6;
    --gray-100: #E7E7E7;
    --gray-200: #D1D1D1;
    --gray-300: #B0B0B0;
    --gray-400: #888888;
    --gray-500: #6D6D6D;
    --gray-600: #5D5D5D;
    --gray-700: #4F4F4F;
    --gray-800: #454545;
    --gray-900: #3D3D3D;
    --gray-950: #060606;
   
    /* Font Sizes */ 
    --font-heading1: 70px;
    --font-heading2: 60px;
    --font-heading3: 39px;
    --font-heading4: 31px;
    --font-heading5: 25px;
    --font-heading6: 20px;
    --font-lg: 25px;
    --font-md:18px;
    --font-sm: 16px;
    --font-xsm: 14.5px;  

    /* Font Families */
    --font-archivo: "Archivo Narrow", sans-serif;
    --font-schibsted: "Schibsted Grotesk", sans-serif;
    --font-inter: "Inter", sans-serif;
}

/* Paragraph & Heading Resets */

p,h1,h2,h3,h4,h5,h6 {
    margin: 0;
    padding: 0;
}
p {
    font-family: var(--font-archivo);
    font-size: var(--font-md);
    line-height: 160%;
}
h1,h2,h3,h4,h5,h6 {
    font-family: var(--font-archivo);
    font-optical-sizing: auto;
    font-style: normal;
}
h1{
    letter-spacing: -2.4px;
    line-height: 80px;
}


.archivo{
    font-family: var(--font-archivo);
}
.schibsted{
     font-family: var(--font-schibsted);
}
.inter{
       font-family: var(--font-inter);
}
/* Body Styles */

 
/* Typography Utilities */
 .heading1 {
    font-size: var(--font-heading1);
}
.heading2 {
    font-size: var(--font-heading2);
    letter-spacing: -2.4px;
    line-height: 72px;
}
.heading3 {
    font-size: var(--font-heading3);
}
.heading4 {
    font-size: var(--font-heading4);
}
.heading5 {
    font-size: var(--font-heading5);
}
.heading6 {
    font-size: var(--font-heading6);
}
.text-xsm {
    font-size: var(--font-xsm);
}
.text-sm {
    font-size: var(--font-sm);
    letter-spacing: -0.2px;
    line-height: 25.6px;
}
.text-md {
    font-size: var(--font-md);
    letter-spacing: -0.2px;
    line-height: 28.8px;
}
.text-lg {
    font-size: var(--font-lg);
}


.thin {
    font-weight: 100;
}
.extra-light {
    font-weight: 200;
}
.light {
    font-weight: 300;
}
.regular {
    font-weight: 400;
}
.medium {
    font-weight: 500;
}
.semibold {
    font-weight: 600;
}
.bold {
    font-weight: 700;
}
.extra-bold {
    font-weight: 800;
}
.black {
    font-weight: 900;
}
 

.dark-text {
    color: var(--secondary);
}
.light-text {
    color: var(--white);
}
 

.light {
    opacity: 80%;
}



/* Link Styles */

a,
a:hover {
    text-decoration: none;
    transition: all 0.6s;
    color: inherit;
}



.primary-button{
    background-color:var(--white) ;
    font-size: var(--font-xsm);
    font-weight: 700;
    color: var(--secondary);
    display: flex;
    letter-spacing: 1.9px;
    padding: 20px 34px;
    text-transform: uppercase;
        align-items: center;
        
  position: relative;
  overflow: hidden;
  transition: all 0.2s ease-in-out;
}
.primary-button:hover{
    color: var(--secondary);
}
.primary-button svg{
    width: 24px;
    height: 24px;
} 

.primary-button span {
  position: relative;
  z-index: 1;
  transition: color 0.2s ease-in-out;
}
.primary-button svg {
  position: relative;
  z-index: 1;
  transition: color 0.2s ease-in-out;
}

.primary-button::before {
  content: "";
  position: absolute;
  width: 200%;
  height: 200%;
  background: var(--primary); /* ripple color */
  border-radius: 50%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0);
  transition: transform 0.4s ease-out;
  z-index: 0;
}

.primary-button:hover::before {
  transform: translate(-50%, -50%) scale(1);
}

.primary-button:hover span {
  color: var(--white);
}
 
.primary-button:hover svg {
  position: relative;
  z-index: 1;
  transition: color 0.2s ease-in-out;
 color: var(--white);
}












.secondary-button {
  background-color: var(--white);
  font-size: var(--font-xsm);
  font-weight: 700;
  color: var(--secondary);
  display: flex;
  letter-spacing: 1.9px;
  padding: 20px 34px;
  text-transform: uppercase;
  align-items: center;
  border: 1px solid #43AB48;
  position: relative;
  overflow: hidden;
  transition: all 0.2s ease-in-out;
}

.secondary-button span {
  position: relative;
  z-index: 1;
  transition: color 0.2s ease-in-out;
}
.secondary-button svg {
  position: relative;
  z-index: 1;
  transition: color 0.2s ease-in-out;
}

.secondary-button::before {
  content: "";
  position: absolute;
  width: 200%;
  height: 200%;
  background: var(--secondary); /* ripple color */
  border-radius: 50%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0);
  transition: transform 0.4s ease-out;
  z-index: 0;
}

.secondary-button:hover::before {
  transform: translate(-50%, -50%) scale(1);
}

.secondary-button:hover span {
  color: var(--white);
}
.secondary-button:hover{
      border: 1px solid var(--secondary);
}
.secondary-button:hover svg {
  position: relative;
  z-index: 1;
  transition: color 0.2s ease-in-out;
 color: var(--white);
}
.secondary-button svg{
    width: 24px;
    height: 24px;
}


.secondary-button-02{
    background-color:var(--primary) ;
    font-size: var(--font-xsm);
    font-weight: 700;
    color:var(--white);
    display: flex;
    letter-spacing: 1.9px;
    padding: 20px 34px;
    text-transform: uppercase;
        align-items: center;
        border: 1px solid #43AB48;
        
  position: relative;
  overflow: hidden;
  transition: all 0.2s ease-in-out;
}
.secondary-button-02:hover{
    color: var(--white);
}
.secondary-button-02 svg{
    width: 24px;
    height: 24px;
}
 
 
.secondary-button-02 span {
  position: relative;
  z-index: 1;
  transition: color 0.2s ease-in-out;
}
.secondary-button-02 svg {
  position: relative;
  z-index: 1;
  transition: color 0.2s ease-in-out;
}

.secondary-button-02::before {
  content: "";
  position: absolute;
  width: 200%;
  height: 200%;
  background: var(--secondary); /* ripple color */
  border-radius: 50%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0);
  transition: transform 0.4s ease-out;
  z-index: 0;
}

.secondary-button-02:hover::before {
  transform: translate(-50%, -50%) scale(1);
}

.secondary-button-02:hover span {
  color: var(--white);
}
.secondary-button-02:hover{
      border: 1px solid #fff;
}
.secondary-button-02:hover svg {
  position: relative;
  z-index: 1;
  transition: color 0.2s ease-in-out;
 color: var(--white);
}
.secondary-button-02 svg{
    width: 24px;
    height: 24px;
}











.mob-content{
  display: none;
}


/* Container Utility */

.container {
    max-width: 1328px;
    padding-left: 24px;
    padding-right: 24px;
    margin-left: auto;
    margin-right: auto;
}


/* Hero Section */

.hero {
    position: relative;
    background-image: url("../images/home/herovector.png");
    background-position: left -323px top -22px;
    background-size: cover;
    background-repeat: no-repeat;
    background-color: var(--secondary);
    padding-bottom: 80px;
    padding-top: 100px;
    overflow: hidden;
}

.hero-wrapper {
    width: 100%;
    min-height: 100vh;
    display: flex;
    overflow: hidden; 
    align-items: center;
    grid-column-gap: 60px;
    grid-row-gap: 60px;
    grid-template-rows: auto;
    grid-template-columns: 1fr 0.8fr  ;
    grid-auto-columns: 1fr;
    display: grid;
    max-width: 1280px;
    margin: auto;
}
 
.hero-content{
    display: flex;
    gap: 24px;
    flex-direction: column;
    width: 620px;
}
.hero-video-container { 
 position: absolute;
 left: 55%;
  height: 640px;
  overflow: hidden;
}

.hero-video {
  width: 100%;
  height: 640px; /* Set fixed height */
  object-fit: cover; /* Ensures the video covers the area nicely */
  display: block;
}
.hero-btn{
    display: flex;
    margin-top: 24px;
}

 


/* common */
.about-section,.outcomes-section,.services-section,.solution,.our-value,.management,.journey,.testimonials,.contact{
    padding-top: 80px;
    padding-bottom: 80px;
}
 

/* About Us Section */

.head-wrapper {
    display: flex;
    align-items: center;
    gap: 30px;
    position: relative;
    z-index: 2;
}
.head-wrapper h2{
color: var(--primary-500);
font-weight: 500;
}
.head-line {
    height: 1px;
    width: 282px;
    background: linear-gradient( to right, rgba(255, 255, 255, 0), rgba(67, 171, 72, 1));
}
 
 
.vector01, .vector02, .vector03, .vector04 {
  opacity: 0.2;
  transition: opacity 0.5s ease;
}
.vector {
  opacity: 0.2;
  transition: opacity 0.5s ease;
  font-size: 2rem;
  margin: 100px 0;
  text-align: center;
}  
.about-grid{
    display: flex;
    flex-direction: column;
    gap: 34px;
     position: sticky;
    top: 100px;
}
.about-images{
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center; 
   
}
.about-image-one{
    max-width: 948px;
     position: absolute;
    top: 62px;
    left: 0;
    right: 0;
    margin: auto;
}
.about-image-two{
    max-width: 1184px;
   
}
.about-content{
max-width: 948px;
margin: auto;
display: flex;
    flex-direction: column;
    gap: 48px;
    text-align: center;
}
.about-content p{
    color: var(--gray-800);
    letter-spacing: -0.8px;
    line-height: 46.8px;
}
.about-hero-button{
    display: flex;
    align-items: center;
    justify-content: center;
}



/* outcomes section */

.outcomes-grid {
    /* max-width: 1100px; */
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
    gap: 48px;
    justify-content: center;
    padding-top: 50px;
    margin-left: auto;
    margin-right: auto;
    align-items: center;
    max-width: 1092px;
    margin: auto;
} 
 
.outcomes-content h3{
    color: var(--gray-700);
} 
.outcomes-content p{
    color: var(--gray-500);
} 
.outcomes-underline {
    height: 1px;
    width: 48px;
    background: var(--gray-100);
    margin-top: 12px;
    margin-bottom: 12px;
}


/* Services section */

.services-container { 
       margin-top: 24px;
           grid-column-gap: 60px;
    grid-row-gap: 60px;
    grid-template-rows: auto;
    grid-template-columns: 1fr 0.8fr;
    grid-auto-columns: 1fr;
    display: grid;
    align-items: end;
}

.services-container h3 {
    color: var(--secondary);
}

.services-container p {
    color: var(--gray-600);
}

.services-grid {
       grid-column-gap: 20px;
    grid-row-gap: 20px;
    grid-template-rows: auto;
    grid-template-columns: 1fr 1fr 1fr;
    grid-auto-columns: 1fr;
    display: grid; 
    margin-top: 50px;
}

.service-block {
    display: flex;
    flex-direction: column;
    position: relative;
    overflow: hidden;
}

.service-img-content {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: flex-end;
}

.service-block img {
    width: 100%; 
    object-fit: cover; 
}

.service-block-button {
    position: absolute;
    margin-bottom: 20px;
    margin-right: 20px;
    background-color: var(--secondary);
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.3s ease;
}
 

.service-content{
    display: flex;
    flex-direction: column;
    gap: 16px;
       margin-top: 20px;
}
.service-content h4 { 
    color: var(--secondary);
 
}

 

.service-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 50px;
}

.service-hero-btn {
    border: 0px;
    background-color: var(--primary-color);
}

.service-lest-talk {
    color: var(--tailwind-50);
}


/* solution section */

.solution {
    background-color:var(--secondary) ;
    color: var(--white);
    overflow: hidden;
    position: relative;
}
.solution-wrapper{
    position: relative;
    z-index: 2;
}
.solution-vector01{
    position: absolute;
    width: 950px;
    left: -475px;
    opacity: 10%;
    top: 0;
}
.solution-vector02{
    position: absolute;
    width: 950px;
    right: -475px;
    opacity: 10%;
    bottom: 0;
}
.head-secondary {
    margin-top: 24px;
    max-width: 850px;
        position: relative;
    z-index: 2;
}
 
.solution-grid {
    margin-top: 50px;
      display: grid;
    grid-template-columns: 1fr 1fr 1fr; 
 row-gap: 50px;
}
 

 .soution-block {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 70px;
    padding: 40px; 
}
  .soution-block-image{
    width: 72px;
    height: 72px;
  }
.solution-content {
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.solution-content p{
color: var(--gray-300);
}
.solution-border{
    border-left: 1px solid #4F4F4F;
    border-right: 1px solid #4F4F4F;
}
 

/*  Core Values section */
.our-value{
position: relative;
overflow: hidden;
}
.our-value-vector{
position: absolute;
width: 950px;
left: 0;
top: 0;
}
.our-value-grid{
    margin-top: 50px;
       display: grid;
    grid-template-columns: 1fr 1fr ; 
    position: relative;
    z-index: 2;
}
.our-value-block{
    display: flex;
    gap: 24px;
    padding: 40px;
    border: 1px solid #E7E7E7;
}
.our-value-block.one{
   border: none;
}
.our-value-block.two{
   border: none;
   border-left:  1px solid #E7E7E7;
}
.our-value-block.three{
   border-left: none;
   border-right: none;
}
.our-value-block.four{ 
   border-right: none;
}
.our-value-block.five{
   border: none;
}
.our-value-block.six{
   border: none;
   border-left:  1px solid #E7E7E7;
}
.our-value-image{
    width: 72px;
    height: 72px;
}


/* management section */
.management{
    background-color: var(--secondary);
}
.management-grid{
margin-top: 50px;
}
.management-grid .tab-wrapper{
      display: grid;
    grid-template-columns: 1fr 1fr; 
gap: 50px;
}
.management-right{
    position: relative;
}
.tab-content{
    position: absolute;
    left: 40px;
    top: 40px;
    right: 40px;
}
 .tab-content ul{
    padding-left: 24px;
 }
    .tab-head {
      display: flex;
      flex-direction: column;  
      justify-content: center;
    }

    .tab-btn {
      padding: 20px;
      padding-left: 0;
      text-align: left;  
      position: relative;
      overflow: hidden;
      cursor: default;
      width: 100%;
      transition: all 0.5s ease; /* smooth width and background change */
      flex-shrink: 0;
      color: var(--gray-300);
    }

    .tab-btn.active { 
      color: var(--white);
      width:100%;
    }

    .progress {
      position: absolute;
      bottom: 0;
      left: 0;
      height: 1px;
      width: 100%;
      background: rgba(24,76,119,60%);
    }

    .progress-fill {
      height: 100%;
      width: 0%;
      background: var(--primary);
      transition: width 0.1s linear;
    }
 
    .tab-pane {
      position: absolute;
      opacity: 0;
      transition: opacity 0.5s ease;
      width: 100%;
      padding: 24px;
      background: var(--white); 
      pointer-events: none;
    }
.tab-pane ul{
    display: flex;
    flex-direction: column;
    gap:12px ;
    margin-bottom: 0;
}
    .tab-pane.active {
      opacity: 1;
      pointer-events: auto;
      position: relative;
    }










/*  journey Values  section*/
.journey{
    overflow: hidden;
    position: relative;
}
.journey-grid{
    margin-top: 50px;  
max-width: 1280px;
position: relative;
margin: auto;  
} 

.journey-grid .swiper {
  width: 100%; 
  padding-bottom: 50px; 
  left: 0;
  top: 50px;
      overflow: visible; 
}

 .journey-grid .swiper-slide {
  background: #fff;
  border: 1px solid #E7E7E7;
  padding: 24px;
  max-width: 387px;
}
.journey-slide{
    display: flex;
    flex-direction: column;
    gap:20px ;
}
.journey-slide span{
font-size: var(--font-heading3);
color: var(--secondary);
opacity: 20%;
font-weight: 500;
font-family: var(--font-archivo);

}
.journey-slide ul{
    padding-left: 24px;
    color: var(--gray-800);
    font-weight: 400;
    font-family: var(--font-inter);
       display: flex;
    flex-direction: column;
    gap:8px ;
}







/* testimonials section */
.testimonials{
    overflow: hidden;
    position: relative;
    background-color:#FCFCFC ;
    margin-bottom: 70px;
    padding-bottom: 120px;
    background-image: url('../images/testimonials-grid.svg');
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}
.testimonials .swiper {
    width: 100%; 
}
 .testimonials-grid {
  margin-top: 50px;  
max-width: 1280px;
position: relative;
margin: auto;  
}
.testimonials-grid .swiper {
  width: 100%; 
  padding-bottom: 50px; 
  left: 0;
  top: 50px;
      overflow: visible; 
}
.testimonials .swiper-slide { 
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    
    max-width: 565px;
}
.testimonials-slide{
    padding: 40px; 
    border: 1px solid #E7E7E7; 
    display: flex;
    flex-direction: column;
    gap: 50px;
}
 .testimonial-user{
    display: flex;
    gap: 16px;
    align-items: center;
 }
 .testimonial-user-image{
    width: 60px;
    height: 60px;
    border-radius: 8px;
    overflow: hidden;
 }
 .testimonial-user-content{
   display: flex;
    gap: 2px;
    flex-direction: column;
 }
  .testimonial-user-content h4{
    color: var(--gray-900);
 }


 .cta-wrapper{
    background-color: var(--secondary);
       display: grid;
    grid-template-columns: 1fr 0.9fr; 
gap: 0px;
overflow: hidden;
 }
 .cta-content{
   padding: 62px 62px 62px 62px;
    display: flex;
    gap: 24px;
    flex-direction: column;
 
 }
 .cta-content-text{
    margin-top: 6px;
     display: flex;
    gap:30px;
    flex-direction: column;
 }

 .cta-content-btn{
    display: flex;
    margin-top: 24px;
 }
 .cta-image{
    display: flex;
    align-items: flex-start;
    position: relative;
 }
  .cta-image img{
width: 110%;
right: -1px;
top: 0;
position: absolute;
  }

  .contact{
    background-color:#FCFCFC ; 
    margin-top: 80px;
    margin-bottom: 100px;
    overflow: hidden;
  }
  .contact-wrapper{
    margin-top: 50px;
       display: grid;
    grid-template-columns: 1fr 1fr; 
gap: 0px;
  overflow: hidden;
  }
  .contact-left{
    position: relative;
    background-color: var(--secondary);
    padding:40px ;
    margin-right: 50px;
    display: flex;
    flex-direction: column;
    gap: 150px;
    overflow: hidden;
  }
  .cta-vector{
    position: absolute;
    right: 0;
    bottom: 0;
    max-width: 42%;
  }
    .cta-vector02{
    position: absolute;
    right: -20%;
    top: -30%; 
  }
  .contact-content{
    color: var(--gray-300);
    font-weight: 400;
     display: flex;
    gap:16px;
    flex-direction: column;
    position: relative;
    z-index: 2;
  }
  .contact-info{
    display: flex;
    flex-direction: column;
    gap: 22px;
    max-width: 400px;
    position: relative;
    z-index: 2;
  }
    .contact-info-block{
    display: flex;
    flex-direction: column;
    gap: 8px;
  }
  .contact-info-block h4{
    color: var(--gray-300);
    font-size: var(--font-sm);
  }
  .contact-info-block p{
    color: var(--white);
    font-size: var(--font-md);
  }
  .contact-right{
    background-color: var(--white);
    padding: 40px;
  }
  .contact-right h3{
    color: var(--gray-800);
    font-weight: 500;
  }
  .contact-right form{
    margin-top: 50px;
  display: flex;
    flex-direction: column;
    gap: 20px;
  }
  .contact-right input{
    width: 100%;
    background-color: #FAFAFA;
    border: 1px solid #E7E7E7;
    padding: 12px 24px;
    border-radius: 0;
    outline: none;
    font-weight: 500;
  }
  .contact-right textarea{
    width: 100%;
    background-color: #FAFAFA;
    border: 1px solid #E7E7E7;
    padding: 12px 24px;
    border-radius: 0;
    outline: none;
    font-weight: 500;
    height:120px ;
  }
    .contact-right input::placeholder, .contact-right textarea::placeholder{
        color: var(--gray-600);
    }
  .contact-right .form-row{
 display: grid;
    grid-template-columns: 1fr 1fr; 
gap: 20px;
width: 100%;
margin: auto;
  }
  .form-block{
    width: 100%;
  }
  .form-block.form-button{
    display: flex;
   
  }
    .form-block.form-button button{
        outline: none;
         cursor: pointer;
    }

    footer{
        background-color: var(--secondary);
        padding-top: 80px;
        position: relative;
        overflow: hidden;
    }
    .footer-vector{
        position: absolute;
        right: 0;
        top: 10px;
       height: 100%;
    }
    .footer-wrapper{
        position: relative;
        z-index: 2;
         display: grid;
    grid-template-columns: 1fr 0.6fr; 
gap: 20px;
border-bottom: 1px solid rgba(252,251,250,10%);
    }
     .footer-logo{
        margin-bottom: 50px;
        position: relative;
        z-index: 2;
     }
    .footer-logo img{
        max-width:413px ;
    }
  .footer-left{
  display: flex;
    flex-direction: column;
    gap:30px;
    padding-top: 50px;
    padding-bottom: 50px;
    }
    .footer-left-block{
       display: flex;
    flex-direction: column;
    gap:8px; 
    }

    .footer-left-block p{
        font-size: var(--font-md);
        color: var(--gray-50);
        font-family: var(--font-archivo);
        font-weight: 500;
    }
    .footer-left-links{
        display: flex;
        gap:25px ;
    }
    .footer-left-links a{
        color: var(--gray-100);
         font-family: var(--font-archivo);
         font-size: 16px;
         color: var(--gray-100);
         font-weight: 500;
         text-decoration: underline;
         text-underline-offset:5px;
         text-decoration-thickness: 1px;
         transition: all 0.6s ease-out;
            text-transform: uppercase;
            letter-spacing: -0.2px;
    }
        .footer-left-links a:hover{
            color: var(--primary);
        }
.footer-divider{
    height: 1px;
    width: 100%;
    background-color:rgba(252,251,250,10%) ;
}
.footer-right{
  display: flex;
    flex-direction: column;
    gap:30px;
    padding-top: 50px;
    padding-bottom: 50px;
    padding-left: 80px;
    border-left: 1px solid rgba(252,251,250,10%);
    }
    .footer-right-content{
          display: flex;
    flex-direction: column;
    gap:16px;
    }
    .footer-right-content p,   .footer-right-content p a{
        color: var(--gray-100);
        font-weight: 400;
    }
    .footer-bottom{
  display: flex;
    gap:50px;   
    padding: 24px 0;
    position: relative;
    z-index: 2;
    }
   .footer-bottom p{
font-size: var(--font-md);
font-weight: 500;
color: var(--gray-100);
    }
    .footer-bottom-links{
       display: flex;
    flex-direction: row;
    gap:16px;
    }
      .footer-bottom-links a{
        text-transform: uppercase;
         color: var(--gray-100);
         font-family: var(--font-archivo);
         font-size: 16px;
         color: var(--gray-100);
         font-weight: 500;
          letter-spacing: -0.2px;
      }

.custom-pagination{
    position: absolute;
    top: 100%!important;
}
.custom-pagination02{
    position: absolute;
    top: 100%!important;
}
       .swiper-pagination-progressbar {
    background-color: #EFF0F0!important;
    height: 5px!important; 
    overflow: hidden;
  }
  .swiper-pagination-progressbar-fill {
    background-color: var(--primary)!important;
    height: 100%;
    border-radius: 5px;
    transition: width 0.3s ease-in-out;
  }