/*-----------------------------------*\
  #style.css
\*-----------------------------------*/

/**
 * copyright 2022 codewithsadee
 */





/*-----------------------------------*\
  #CUSTOM PROPERTY
\*-----------------------------------*/

:root {

    /**
     * colors
     */
  
     --dark-jungle-green: hsl(188, 63%, 7%);
    --prussian-blue: hsl(200, 69%, 14%);
     --prussian-blue-1: #009dad;
     --raisin-black-1: hsl(227, 29%, 13%);
     --raisin-black-2: hsl(229, 17%, 19%);
     --yellow-green: hsl(89, 72%, 45%);
     --orange-soda: hsl(9, 100%, 62%);
     --orange-soda-1: #f08a1d;
     --cultured-1: hsl(0, 0%, 93%);
     --cultured-2: hsl(192, 24%, 96%);
     --misty-rose: hsl(7, 56%, 91%);
     --alice-blue: hsl(210, 100%, 97%);
     --oxblood: hsl(0, 88%, 13%);
     --cadet: hsl(200, 15%, 43%);
     --white: hsl(0, 0%, 100%);
     --white-1: #f9f9f9;
     --black: hsl(0, 0%, 0%);
     --blue: #007BFF;
     --opal: hsl(180, 20%, 62%);
     --brown: rgba(100, 85, 79, 1);

  
    /**
     * typography
     */
  
    --ff-nunito-sans: "Nunito Sans", sans-serif;
    --ff-poppins: "Poppins", sans-serif;
  
    --fs-1: 1.875rem;
    --fs-2: 1.5rem;
    --fs-3: 1.375rem;
    --fs-4: 1.125rem;
    --fs-5: 0.875rem;
    --fs-6: 0.813rem;
    --fs-7: 0.75rem;
  
    --fw-500: 500;
    --fw-600: 600;
    --fw-700: 700;
  
    /**
     * transition
     */
  
    --transition: 0.25s ease;
  
    /**
     * spacing
     */
  
    --section-padding: 100px;
  
    /**
     * shadow
     */
  
    --shadow-1: 0 5px 20px 0 hsla(219, 56%, 21%, 0.1);
    --shadow-2: -3px -3px 7px #ffffff73, 2px 2px 5px rgba(94,104,121,0.288);
    --shadow-3: inset 2px 2px 5px #babecc, inset -5px -5px 10px #ffffff73;
    --shadow-4: inset 1px 1px 2px #babecc, inset -1px -1px 2px #ffffff73;

  }
  
  
  
  
  /*-----------------------------------*\
    #RESET
  \*-----------------------------------*/
  
  *, *::before, *::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    
  }
  
  li { list-style: none; }
  
  a { 
    text-decoration: none;
    color: var(--orange-soda);
   }
  
  a,
  img,
  span,
  button,
  ion-icon { display: block; }
  button {
    border: none;
    background: none;
    font: inherit;
    text-align: left;
    cursor: pointer;
  }
  
  address { font-style: normal; }
  
  ion-icon { pointer-events: none; }
  
  html {
    font-family: var(--ff-nunito-sans);
    scroll-behavior: smooth;
  }
  
  body {
    background: var(--white-1);
    overflow-x: hidden;
  }
  
  ::-webkit-scrollbar {
    width: 10px;
    height: 8px;
  }
  
  ::-webkit-scrollbar-track { background: var(--white); }
  
  ::-webkit-scrollbar-thumb {
    background: var(--cadet);
    border-left: 2px solid var(--white);
  }
  .review-tag {
    padding: 1.5rem 2rem;
    line-height: 1.8;
    border-left: 3px solid var(--prussian-blue-1);
    font-size: 1.01rem;
    margin-block: 1rem;
  }
  .review-tag a{
    color: var(--blue);
  }
  .review-tag a:hover{
    text-decoration: underline;
  }
  .form-header {
    padding-block: 2rem;
    justify-content: center;
  }
  .form-icon img{
    margin-inline: auto;
    width: 15rem;
  }
  form{
    padding: var(--section-padding);
    max-width: 70%;
    overflow: hidden;
    margin-inline: auto;
  }
  fieldset {
    border: 2px solid var(--blue);
    border-radius: 5px;
    padding: var(--section-padding);
    margin-bottom: 20px;
    background-color: var(--white-1);
  }
  fieldset .sec{
    display: flex;
    gap: 3rem;
    margin-bottom: 4rem;
  }

legend {
    font-size: 1.2em;
    font-weight: bold;
    color: var(--black);
}

label {
    display: block;
    margin-top: 10px;
    font-weight: var(--fw-700);
}

input, select {
    margin-bottom: 10px;
    padding: 8px;
    width: 100%;
    font-size: 1em;
    box-sizing: border-box;
    border: none;
    border-radius: 5px;
    outline: none;
    box-shadow: var(--shadow-3);
}
input, select:focus {
    box-shadow: var(--shadow-4);
}
.shopper-form button, .shopper-login button {
  background-color: var(--blue);
  font-weight: var(--fw-600);
}
.shopper-login {
  padding: var(--section-padding);
}
.shopper-login input {
  padding-block: .7rem;
  font-size: 1.05rem;
}
.shopper-login fieldset{
  padding-top: 2rem;
  padding-bottom: 3.5rem;
  min-width: 50%;
  max-width: 58%;
  padding-inline: 15px;
  margin-inline: auto;
}
.shopper-login .form-header {
  padding-block: 1rem;
  justify-content: center;
}
.shopper-login h3 {
  font-size: 1.3rem;
}
.shopper-login .form-icon img{
  margin-inline: auto;
  width: 15rem;
  margin-bottom: 2rem;
}
#checkbox{
  display: flex;
  width: 100%;
  gap: 7px;
  padding-block: .5rem;

  align-items: center;
}
#checkbox input{
  box-shadow: none;
  width: 4%;
  padding: 0;
}

#checkbox label span {
  font-weight: var(--fw-500);
}
.shopper-login .review-tag-text a{
  font-size: small;
  color: var(--blue);
  padding-inline: 10%;
}
.shopper-login .review-tag-text a:hover{
  text-decoration: underline;
}


  /* LEAVES */
  .dot{
    display: inline-block;
    width: 22px;
    height: 20px;
    margin: 0 8px;
    vertical-align: middle;
    border-radius: 50% 50% 0 50%;
      
  }

  .blue{
    background-color: #0073e6;
    transform: rotate(310deg);

  }
  .green{
    background-color: #00c853;
    transform: rotate(130deg);               
  }

/*-----------------------------------*\
  #TAG-1
\*-----------------------------------*/
.tag-1 {
  padding: 3rem 0;
  text-align: center;
}
.tag-1 h3{
  font-size: 2rem;
}
.tag-1-text{
  font-size: 1.05rem;
  line-height: 1.7;
}

/*-----------------------------------*\
  #MESSAGES
\*-----------------------------------*/
.error-text{
  color: red;
  font-size: 14px;
  font-weight: 100;
  margin-top: -8px;
  margin-bottom: .5rem;
}
.custom-error {
  background-color: #f8d7da;
  color: #721c24;
  border: 1px solid #f5c6cb;
  padding: 10px;
  border-radius: 5px;
  margin-bottom: 10px;
  font-size: 1.1rem;
}

.custom-success {
  background-color: #d4edda;
  color: #155724;
  border: 1px solid #c3e6cb;
  padding: 10px;
  border-radius: 5px;
  margin-bottom: 10px;
  font-size: 1.1rem;
}

.alert {
  position: relative;
  padding-right: 35px; /* Make space for the close button */
}

.alert .close {
  position: absolute;
  top: .35rem;
  right: 10px;
  background: none;
  border: none;
  font-size: 2rem;
  line-height: 1;
  color: inherit;
  opacity: 0.7;
}

.alert .close:hover {
  opacity: 1;
  cursor: pointer;
}
.close {
  position: absolute;
  top: 0;
  right: 10px;
  background: none;
  border: none;
  font-size: 1.2rem;
  line-height: 1;
  color: inherit;
  opacity: 0.7;
}

.close:hover {
  opacity: 1;
  cursor: pointer;
} 

  /*-----------------------------------*\
  #REUSED STYLE
\*-----------------------------------*/

.container { padding-inline: 15px; }

 button, a { transition: var(--transition); }

 .h1,
 .h2,
 .h3 {
   color: var(--dark-jungle-green);
   font-family: var(--ff-poppins);
   line-height: 1.3;
 }
 
 .h1 {
   font-size: var(--fs-1);
   line-height: 1;
 }
 
 .h2 { font-size: var(--fs-2); }
 
 .h3 {
   font-size: var(--fs-4);
   font-weight: var(--font-weight, 700);
 }
 
 .h3 > a { color: inherit; }
 
 .btn {
   position: relative;
   background: var(--orange-soda);
   color: var(--white);
   font-family: var(--ff-poppins);
   font-size: var(--fs-5);
   text-transform: var(--text-transform, capitalize);
   border: 1px solid var(--orange-soda);
   padding: 10px 20px;
   z-index: 1;
 }
 
 .btn:is(:hover, :focus) {
   background: var(--black);
   color: var(--dark-jungle-green);
   border-color: var(--black);
 }
 
 .btn::before {
   content: "";
   position: absolute;
   top: 0;
   left: 0;
   width: 0;
   height: 100%;
   background: var(--white);
   transition: var(--transition);
   z-index: -1;
 }
 
 .btn:is(:hover, :focus)::before { width: 100%; }
 
 .w-100 { width: 100%; }
 .section-subtitle {
    color: var(--orange-soda);
    font-size: var(--fs-5);
    font-weight: var(--fw-600);
    padding: 5px 20px;
    background: hsla(9, 100%, 62%, 0.1);
    width: max-content;
    border-radius: 50px;
    margin-inline: auto;
    margin-bottom: 15px;
    margin-top: 15px;
    
  }
  .section-subtitle-dark {
    color: var(--white);
    font-size: var(--fs-5);
    font-weight: var(--fw-600);
    padding: 5px 20px;
    background: var(--orange-soda);
    width: max-content;
    border-radius: 50px;
    margin-inline: auto;
    margin-bottom: 15px;
    margin-top: 15px;    
  }
  .section-subtitle-dark-1 {
    color: var(--white);
    font-size: var(--fs-5);
    font-weight: var(--fw-600);
    padding: 5px 20px;
    background: var(--orange-soda);
    width: max-content;
    border-radius: 8px;
    margin-inline: 0;
    margin-bottom: 15px;
    margin-top: 15px;    
  }
  .section-title {
    text-align: var(--text-align, center);
    margin-bottom: var(--margin-bottom, 50px);
  }
  .heading {
    text-align: var(--text-align, center);
    margin-bottom: var(--margin-bottom, 50px);
    font-size: 2rem;
  }
.card-badge {
    background: var(--black);
    color: var(--white);
    font-size: var(--fs-7);
    text-transform: uppercase;
    position: absolute;
    top: 15px;
    right: 15px;
    padding: 4px 10px;
  }
  
  .card-badge.green { background: var(--yellow-green); }
  
  .card-badge.orange { background: var(--orange-soda); }
  
  .has-scrollbar {
    display: flex;
    align-items: flex-start;
    gap: 15px;
    overflow-x: auto;
    margin-inline: -15px;
    padding-inline: 15px;
    scroll-padding-left: 15px;
    padding-bottom: 60px;
    scroll-snap-type: inline mandatory;
  }
  
  .has-scrollbar > li {
    min-width: 100%;
    scroll-snap-align: start;
  }
  
  .has-scrollbar::-webkit-scrollbar-track {
    background: var(--cultured-2);
    outline: 2px solid var(--cadet);
    border-radius: 10px;
  }
  
  .has-scrollbar::-webkit-scrollbar-thumb {
    background: var(--cadet);
    border: 1px solid var(--cultured-2);
    border-radius: 10px;
  }
  
  .has-scrollbar::-webkit-scrollbar-button { width: 15%; }

  .partial-border {
    display: inline-block;
    border-bottom: 2px solid #000; /* Set the border color and thickness */
    width: 50%; /* Set the width of the border */
    margin-bottom: -2px; /* Optional: Adjust to align the text better */
}

  
 
/*-----------------------------------*\
  #HEADER
\*-----------------------------------*/

.header {
    position: relative;
    z-index: 2;
  }
  
  .header-top {
    background: var(--prussian-blue);
    padding-block: 15px;
  }
  
  .header-top .container,
  .header-top-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
  }
  
  .header-top .container { gap: 8px 20px; }
  
  .header-top-list { gap: 15px; }
  
  .header-top-link {
    color: var(--white);
    font-size: var(--fs-6);
    font-weight: var(--fw-700);
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 5px;
  }
  
  .header-top-link:is(:hover, :focus) { color: var(--orange-soda); }
  
  .header-top-link ion-icon {
    color: var(--orange-soda);
    font-size: 15px;
    --ionicon-stroke-width: 60px;
  }
  
  .header-top .wrapper,
  .header-top-social-list {
    display: flex;
    align-items: center;
  }
  
  .header-top .wrapper { gap: 20px; }
  
  .header-top-social-list { gap: 8px; }
  
  .header-top-social-link {
    color: var(--white);
    font-size: 15px;
  }
  
  .header-top-btn {
    background: var(--orange-soda);
    color: var(--white);
    font-size: var(--fs-6);
    font-weight: var(--fw-700);
    padding: 4px 15px;
  }
  
  .header-top-btn:is(:hover, :focus) { --orange-soda: hsl(7, 72%, 46%); }
  
  .header-bottom {
    background: var(--white);
    padding-block: 25px;
  }
  
  .header-bottom .logo img { margin-inline: auto; }
  
  .navbar {
    background: var(--white);
    position: fixed;
    top: 0;
    left: -310px;
    max-width: 300px;
    width: 100%;
    height: 100%;
    box-shadow: 0 3px 10px hsla(0, 0%, 0%, 0.3);
    z-index: 5;
    padding: 60px 20px;
    visibility: hidden;
    transition: 0.15s ease-in;
  }
  
  .navbar.active {
    visibility: visible;
    transform: translateX(310px);
    transition: 0.25s ease-out;
  }
  
  .navbar-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 40px;
    border-bottom: 1px solid var(--cultured-1);
    margin-bottom: 25px;
  }
  
  .navbar-top .logo img { width: 200px; }
  
  .nav-close-btn ion-icon {
    font-size: 20px;
    --ionicon-stroke-width: 45px;
    padding: 5px;
  }
  
  .navbar-link {
    color: var(--cadet);
    font-size: var(--fs-5);
    font-weight: var(--fw-600);
    text-transform: uppercase;
    padding-block: 15px;
  }
  
  .navbar-link:is(:hover, :focus) { color: var(--orange-soda); }
  
  .overlay {
    position: fixed;
    inset: 0;
    background: hsla(0, 0%, 0%, 0.7);
    opacity: 0;
    pointer-events: none;
    transition: var(--transition);
    z-index: 4;
  }
  
  .overlay.active {
    opacity: 1;
    pointer-events: all;
  }
  
  .header-bottom-actions {
    background: var(--white);
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    display: flex;
    justify-content: space-evenly;
    padding-block: 15px 10px;
    box-shadow: -2px 0 30px hsla(237, 71%, 52%, 0.2);
    z-index: 3;
  }
  
  .header-bottom-actions-btn ion-icon {
    color: hsl(0, 0%, 10%);
    font-size: 20px;
    margin-inline: auto;
    margin-bottom: 5px;
    --ionicon-stroke-width: 40px;
    transition: var(--transition);
  }
  .header .search-field{ 
    display: none;
    position: absolute;
    transition: var(--transition);
    right: 6%;
    bottom: -1rem;
    z-index: 10;
    
  }
  .search-field form { 
    display: flex;
    gap: .5rem;
    padding: 5px;
  }
  .search-field form input { 
    margin: 0;
    background-color: transparent;
    backdrop-filter: blur(10px);
    border: 1px solid var(--white);
  }
  .search-field form button ion-icon{ 
    background-color: transparent;
    backdrop-filter: blur(10px);
    color: hsl(0, 0%, 10%);
    font-size: 20px;
    border: 1px solid var(--white);
    border-radius: 50%;
    --ionicon-stroke-width: 40px;
    transition: var(--transition);
    padding: 10px;
    box-shadow: var(--shadow-2);

  }
  
  .search-field form button:is(:hover, :focus) ion-icon { color: var(--orange-soda);}
  
  .header-bottom-actions-btn:is(:hover, :focus) ion-icon { color: var(--orange-soda); }
  
  .header-bottom-actions-btn span {
    color: var(--cadet);
    font-family: var(--ff-poppins);
    font-size: var(--fs-7);
    font-weight: var(--fw-500);
  }

 /*-----------------------------------*\
  #CTA
\*-----------------------------------*/

.cta {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
}

.cta .left {
  background: orange;
  color: #fff;
  padding: 3rem;
}

.cta .left h4 {
  margin-bottom: 1rem;
}

.cta .features p {
  background: rgba(255, 255, 255, 0.15);
  padding: 0.8rem 1rem;
  border-radius: 8px;
  margin: 0.5rem 0;
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.cta .features i {
  color: #fff;
  font-size: 1.2rem;
}

.cta .right {
  position: relative;
}

.cta .right img {
  width: 100%;
  height: auto;
  display: block;
}

.cta .play-btn {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(45deg);
  background: orange;
  color: #fff;
  font-size: 2rem;
  padding: 1.2rem 1.4rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.cta .play-btn i {
  transform: rotate(-45deg); /* undo the parent rotation */
}

  /*-----------------------------------*\
  #NOTICE
\*-----------------------------------*/
  .notice{
    background-image: url('/images/background shapes/counter-bg_1.png');
    background-size: cover; 
    background-position: center;
    position: relative;
    padding-bottom: 2rem;
    min-height: 45vh !important;
    z-index: 0;
  }
  .notice::before{
    content: '';
    position: absolute;
    width: 40%;
    height: 45vh;
    left: 0;
    background-color: var(--white);
    z-index: 0;
    clip-path: polygon(
      0 0,
      100% 0,
      calc(100% - 60px) 50%,
      100% 100%,
      0 100%
    );
  }
  .notice-flex{
    position: relative;
    z-index: 1;
    padding-top: 4rem;
    padding-inline: 10px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 5rem;
  }
  .notice-content{
    flex-grow: 1;
    flex-basis: 200;
    /* max-width: 40%; */
  }
  #notice-content-left{
    max-width: 25%;
    overflow: hidden;
  }
  #notice-content-right{
    max-width: 50%;
  }
  #notice-content-right .section-subtitle-dark {
    margin-inline: 0;
    margin-top: 0;
  }
  .notice-icon img {
    max-width: 100%;
  }

  .notice-content h2{
    text-align: left;
    font-size: 2.2rem;
    font-weight: var(--fw-700);
    line-height: 2.6rem;
    margin-bottom: 1.4rem;
  }
  .notice-text{
    color: var(--cadet);
    font-size: 1.2rem;
    font-weight: var(--fw-500);
    line-height: 1.7rem;
    margin-bottom: 0;
  }
  

/*-----------------------------------*\
  #HERO
\*-----------------------------------*/

.hero {
  background-color: #000;
  position: relative;
  /* z-index: 2; */

}
.slider {
  position: relative;
  width: 100%;
  max-width: 100%;
  height: 600px;
  overflow: hidden;
  background-image: url('/images/background shapes/hero_overlay_1_1.jpg');
  background-size: cover; 
  background-position: center;
}
.slides {
  display: flex;
  position: relative;
  width: 100%;
  height: 100%;
}

.slide {
  min-width: 100%;
  position: relative;
  transition: transform 0.8s ease;
}

.slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.8s ease;
  opacity: .3;
}

.slide.active img {
  transform: scale(1.05); /* Slightly scale up the image */
}

.caption {
  position: absolute;
  bottom: 20%;
  width: 70%;
  left: 10px;
  color: white;
  padding-inline: 3rem;
}

.caption h2 {
  opacity: 0;
  transform: translateY(50px);
  transition: opacity 0.6s ease, transform 0.6s ease;
  transition-delay: 0.5s;
  color: #f9f9f9;
  font-size: 4rem;
  font-weight: 500; 
  font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif; 
  text-align: left;
  line-height: 1;
  text-transform: uppercase;

}
.caption h2 span {
  display: inline;
  color: var(--orange-soda);
}

.caption p {
  font-size: 1.3rem;
  opacity: 0;
  transform: translateY(50px);
  transition: opacity 0.6s ease, transform 0.6s ease;
  transition-delay: 0.6s;
}

.slide.active .caption h2,
.slide.active .caption p {
  opacity: 1;
  transform: translateY(0);
}

/* Indicator dots */
.indicators {
  position: absolute;
  top: 50%;
  right: 10px;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.indicator {
  width: 10px;
  height: 10px;
  background-color: var(--cadet);
  border-radius: 50%;
  cursor: pointer;
  transition: background-color 0.3s;
}

.indicator.active {
  background-color: #fff;
}

  
/*-----------------------------------*\
  #ABOUT
\*-----------------------------------*/

.about { 
  padding-block: var(--section-padding); 
  background-image: url('/images/background shapes/gray-shape-medium-light.svg');
  background-size: cover; 
  background-position: center;
}


.about-banner {
  position: relative;
  margin-bottom: 40px;
}

.about-banner > img {
  max-width: max-content;
  width: 100%;
}

.about-banner .abs-img {
  position: absolute;
  bottom: 100px;
  left: 15px;
  width: 50%;
  border-radius: 4px;
}

.about .section-subtitle { 
  margin-inline: auto;
  margin-bottom: 15px;
 }

.about .section-title {
  --text-align: left;
  --margin-bottom: 15px;
  font-size: 2.5rem;
}

.about-text {
  color: var(--cadet);
  font-size: var(--fs-5);
  line-height: 1.7;
  margin-bottom: 30px;
  display: inline;
}
.about-banner h2 a {
  display: inline;
}
.about-content a {
  display: inline;
}

.about-list { margin-bottom: 30px; }

.about-item {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 10px;
  margin-bottom: 15px;
}

.about-item-icon {
  background: var(--misty-rose);
  height: 45px;
  min-width: 45px;
  border-radius: 50%;
  display: grid;
  place-items: center;
}

.about-item-icon ion-icon {
  color: var(--orange-soda);
  font-size: 18px;
}

.about-item-text {
  color: var(--cadet);
  font-size: var(--fs-5);
}

.about .callout {
  background: hsla(7, 78%, 53%, 0.05);
  color: var(--cadet);
  font-size: var(--fs-5);
  font-weight: var(--fw-500);
  line-height: 1.8;
  padding: 20px 25px;
  border-left: 4px solid var(--orange-soda);
  margin-bottom: 40px;
}

.about .btn {
  max-width: max-content;
  --text-transform: uppercase;
}


/*-----------------------------------*\
  #SERVICE
\*-----------------------------------*/

.service {
  padding-block: var(--section-padding); 
  background-image: url('/images/background shapes/project_bg_1.png');
  background-size: cover; 
  background-position: center;
}

.service-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 30px;
}
.service-card {
  position: relative;
  background: var(--white);
  text-align: center;
  padding: 40px 30px;
  box-shadow: var(--shadow-2);
}

.service-card .card-icon {
  background: var(--misty-rose);
  height: 5rem;
  width: 5rem;
  border-radius: 50%;
  border: solid 4px var(--orange-soda);
  display: grid;
  place-items: center;
  margin-inline: auto;
  margin-bottom: 1rem;
}


.service-card .card-icon ion-icon {
  color: var(--orange-soda);
  font-size: 3rem;
}
.service-card .card-title { margin-bottom: 15px; }

.service-card .card-title > a:is(:hover, :focus) { color: var(--orange-soda); }

.service-card .card-text {
  color: var(--cadet);
  font-size: var(--fs-5);
  line-height: 1.8;
  margin-bottom: 25px;
}

.service-card .card-link {
  color: var(--opal);
  font-size: var(--fs-5);
  font-weight: var(--fw-600);
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 5px;
}

.service-card:is(:hover, :focus) .card-link { color: var(--orange-soda); }

.service-card::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 4px;
  background: var(--orange-soda);
  transition: var(--transition);
}

.service-card:is(:hover, :focus)::after { width: 100%; }

/*-----------------------------------*\
  #RESEARCH
\*-----------------------------------*/

.research {
  background: var(--cultured-2);
}
.research-box {
  padding-top: 2rem;
  background-color: #000;
  background-image: url('/images/others/tractor-bg.png');
  background-size: cover; 
  background-position: center; 
  border-image: fill 0 linear-gradient(#0001, #000);
  opacity: 1;
  height: 70vh; 
  width: 100%; 
}
.research-box h2{
  color: var(--white);
}
.research-flex{
  padding-inline: 10px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10rem;
}
.research-content{
  flex-grow: 1;
  flex-basis: 200;
  max-width: 40%;
}
.research-content h2{
  color: var(--white);
  text-align: left;
  text-transform: uppercase;
  font-size: 2.2rem;
  line-height: 2rem;
  margin-bottom: 1.4rem;

}
.research-text{
  color: var(--white);
  font-size: 1.3rem;
  font-weight: var(--fw-700);
  line-height: 1.7rem;
}
.research-banner img{
  max-width: 30rem;
}
.research-footer{
  background-image: url('/images/background shapes/project_bg_1.png');
  background-size: cover; 
  background-position: center;
  opacity: 1;
}
.research-footer-flex{
  padding-top: 4rem;
}
.research-footer-flex{
  padding-inline: 10px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 5rem;
}
.research-footer-content{
  flex-grow: 1;
  flex-basis: 200;
  /* max-width: 40%; */
}
#research-footer-content-left{
  max-width: 20%;
}
#research-footer-content-right{
  max-width: 60%;
}
#research-footer-content-right .section-subtitle-dark {
  margin-inline: 0;
  margin-top: 0;
}
.research-icon ion-icon {
  margin-inline: 0;
  font-size: 4.5rem;
  color: var(--orange-soda);
}
.research-footer-content h2{
  color: var(--orange-soda);
  text-align: left;
  font-size: 2.2rem;
  font-weight: var(--fw-700);
  line-height: 2.6rem;
  margin-bottom: 1.4rem;
}
.research-footer-content h3{
  color: var(--black);
  text-align: left;
  font-size: 1.3rem;
  line-height: 3rem;
  margin-bottom: .5rem;
}
.research-footer-text{
  color: var(--cadet);
  font-size: 1.2rem;
  font-weight: var(--fw-500);
  line-height: 1.7rem;
  margin-bottom: 0;
}

/*-----------------------------------*\
  #REMARK
\*-----------------------------------*/

.remark { 
  padding-block: var(--section-padding);
  position: relative;
}

.remark .slider-wrapper {
  position: relative;
  overflow: hidden;
  width: 100%;
  max-width: 100%;
}

.remark-slides {
  display: flex;
  transition: transform 2s ease; /* Slower transition for smoother movement */
}

.remark-slide {
  display: flex;
  justify-content: space-around;
  min-width: 100%; /* Each slide takes full width */
  box-sizing: border-box;
  gap: 1rem; /* Space between cards */
}

.remark-card {
  background-color: var(--white);
  flex: 0 0 47%; /* Two cards per slide with some space */
  padding: 25px;
  min-width: 45%;
  box-shadow: var(--shadow-2);
  gap: .5rem; /* Space between cards */  
}

.remark-icon img {
  height: 4rem;
  width: 4rem;
  display: block;
  margin: 0 auto 1rem auto;
  opacity: 1;
}
.remark-text{
  color: var(--cadet);
  font-size: 1rem;
  font-weight: var(--fw-500);
  line-height: 1.4rem;
  margin-bottom: 1.2rem;
}
.remark-footer h3{
  color: var(--cadet);
  margin-bottom: .7rem;
}
.remark-footer-text{
  color: var(--cadet);
  font-size: .8rem;
  font-weight: var(--fw-500);
  margin-bottom: .6rem;
  text-transform: uppercase;
}

.remark-arrow {
  position: absolute;
  top: 50%;
  text-align: center;
  transform: translateY(-50%);
  color: var(--cadet);
  border: none;
  font-size: 4rem;
  cursor: pointer;
  z-index: 1; /* Ensure arrows are above slides */
}

.remark-arrow.left {
  left: 50px;
}

.remark-arrow.right {
  right: 50px;
}

/*-----------------------------------*\
  #CX
\*-----------------------------------*/

.cx {
  background-image: url('/images/background shapes/gray-shape-thick2.svg');
  padding-block: var(--section-padding); 
  z-index: 0; 
  position: relative;

}
.cx-box {
  padding-top: 2rem;
  background-image: url('/images/hero images/employee-engagement-1.jpg');
  background-size: cover; 
  background-position: center; 
  border-image: fill 0 linear-gradient(rgba(34, 34, 34, 0.067), #0000008c);
  opacity: 1;
  height: 65vh !important; 
  width: 100%; 
  position: relative;
  z-index: 1; 

}
.cx-video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;  /* Ensures video covers area like background-image */
  z-index: 0;         /* Push it behind the content */
  pointer-events: none; 
}

.cx-flex{
  padding-top: 4rem;
  padding-inline: 10px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 2rem;
  z-index: 2;
}
.cx-content{
  flex-grow: 1;
  flex-basis: 200;
  /* max-width: 40%; */
  z-index: 2;

}
#cx-content-left{
  max-width: 15%;
}
#cx-content-right{
  max-width: 60%;
}
#cx-content-right .section-subtitle-dark {
  margin-inline: 0;
  margin-top: 0;
}
.cx-icon img{
  width: 10rem;
}
.cx-content h2{
  color: var(--white);
  text-align: left;
  font-size: 2.2rem;
  font-weight: var(--fw-700);
  line-height: 2.6rem;
  margin-bottom: 1.4rem;
}
.cx-content h3{
  color: var(--black);
  text-align: left;
  font-size: 1.3rem;
  line-height: 3rem;
  margin-bottom: .5rem;
}
.cx-text{
  color: var(--white);
  font-size: 1.2rem;
  font-weight: var(--fw-500);
  line-height: 1.7rem;
  margin-bottom: 0;
}
.cx-sub-flex{
  padding-top: 2rem;
  padding-inline: 10px;
  display: flex;
  flex-wrap: wrap;
  justify-content: start;
  gap: 4rem;
}
.cx-sub-flex p { 
  flex-grow: 1;
  flex-basis: 200;
  text-align: center;
  /* max-width: 40%; */
}
.cx-footer-flex{
  padding-top: 4rem;
  padding-inline: 10px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 2rem;
}
.cx-footer-card{
  flex-grow: 1;
  flex-basis: 200;
  max-width: 20%;
  text-align: center;
}
.cx-footer-icon ion-icon {
  margin-inline: auto;
  color: var(--orange-soda);
  font-size: 2.5rem;
  margin-bottom: .8rem;
}
.cx-footer-num {
  font-size: 2rem;
  font-family: var(--ff-poppins);
  font-weight: var(--fw-700); 
}
.cx-footer-card h3{
  font-size: 1.4rem;
  margin-bottom: 2.5rem;
  line-height: 1rem;
}
.cx-footer-text {
  width: 80% !important;
  color: var(--cadet);
  margin-inline: auto;
}

/*-----------------------------------*\
  #ENQUIRE
\*-----------------------------------*/

.enquire {
  background: var(--cultured-2);
  padding-block: var(--section-padding);
  background-image: url('/images/background shapes/world-map-fade.svg');
}

.enquire-list {
  padding-top: 4rem;
  padding-inline: 15px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 2rem;
  width: 100%;
}

.enquire-card {
  position: relative;
  flex-direction: column;
  display: flex;
  justify-content: center;
  flex-grow: 1;
  flex-basis: 200;
  max-width: 25%;
  min-height: 50vh !important;
  background-color: var(--white);
  text-align: center;
  padding: 40px 30px;
  box-shadow: var(--shadow-2);
}

.enquire-card .enquire-card-icon {
  position: absolute;
  left: 10%;
  top: -10%;
  background: var(--white);
  padding: 7px;
  height: 6rem;
  width: 6rem;
  border: solid 8px var(--cultured-1);
  border-radius: 50%;
  display: grid;
  place-items: center;
  margin-inline: auto;
  margin-bottom: 1rem;
}


.enquire-card-icon ion-icon {
  color: var(--orange-soda);
  font-size: 3rem;
}
.enquire-card-title { margin-bottom: 15px; }


.enquire-card-text {
  color: var(--cadet);
  font-size: var(--fs-5);
  line-height: 1.4;
  margin-bottom: 25px;
}
.enquire-card p{
  margin-inline: auto;
}







  /*-----------------------------------*\
  #VERIFY STYLE
\*-----------------------------------*/

.sec{
    /* background-color: #2dace7; */
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 5rem;
}
.card{
    flex-grow: 1;
    flex-basis: 200;
    padding: 4px;
    background-color: var(--white-1);
    max-width: 10rem;
    max-height: 15rem;
    overflow: hidden;
    border-radius: 10px;
    text-align: center;
    box-shadow: var(--shadow-2);
}
svg{ 
    color: var(--orange-soda);
    box-shadow: var(--shadow-2);
}
svg:hover{ 
    /* color: var(--orange-soda); */
    box-shadow: var(--shadow-3);
}
.text{ 
    font-size: var(--fs-5);
    font-weight: var(--fw-500);
    margin-bottom: 4px;
    margin-top: 5px;
}

/*-----------------------------------*\
  #CTA
\*-----------------------------------*/

.cta {
    background: linear-gradient(to bottom, var(--white) 50%, var(--raisin-black-1) 50%);
  }  
  .cta-card {
    background: var(--orange-soda);
    padding: 50px 25px;
    box-shadow: var(--shadow-2);
  }
  
  .cta-card .card-content {
    max-width: max-content;
    margin-inline: auto;
    margin-bottom: 30px;
  }
  
  .cta-card .card-title {
    color: var(--white);
    line-height: 1.3;
    margin-bottom: 15px;
  }
  
  .cta-card .card-text {
    color: var(--white);
    font-size: var(--fs-5);
    line-height: 1.8;
  }
  
  .cta-btn {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--black);
    background: var(--white);
    box-shadow: var(--shadow-2);
    border-color: var(--white);
    margin-inline: auto;
  }
  
  .cta-btn:is(:hover, :focus) {
    background: none;
    color: var(--white);
    border-color: transparent;
  }
  
  .cta-btn::before { background: var(--black); }

/*-----------------------------------*\
  #FOOTER
\*-----------------------------------*/

.footer {
  background: var(--raisin-black-1);
  color: var(--white);                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           
  margin-bottom: 68px;
}

.footer .container { padding-inline: 30px; }

.footer a { color: inherit; display: inline-block;}


.footer-top {
  padding-top: 80px;
  padding-bottom: 40px;
}

.footer-brand { margin-bottom: 70px; }

.footer-brand .logo { margin-bottom: 15px; }

.section-text {
  font-size: var(--fs-5);
  line-height: 1.8;
  margin-bottom: 30px;
  max-width: 45ch;
  transition: .5s ease;
}
.section-text a:hover { border-bottom: solid 2px var(--white); }

.contact-list {
  display: grid;
  gap: 15px;
  margin-bottom: 30px;
}

.contact-link {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

.contact-link ion-icon { font-size: 18px; }

.contact-link :is(address, span) {
  font-size: var(--fs-5);
  transition: var(--transition);
}

.contact-link:is(:hover, :focus) span { color: var(--orange-soda); }

.social-list {
  display: flex;
  align-items: center;
  gap: 20px;
}

.footer-list:not(:last-child) { margin-bottom: 50px; }

.footer-list-title {
  font-family: var(--ff-poppins);
  font-size: var(--fs-3);
  font-weight: var(--fw-700);
  margin-bottom: 15px;
}

.footer-link {
  font-size: var(--fs-5);
  padding: 10px 7px;
}

.footer-link:is(:hover, :focus) { color: var(--orange-soda); border-left: solid 3px var(--orange-soda);}

.footer-bottom {
  background: var(--raisin-black-2);
  padding-block: 25px;
}

.copyright {
  font-size: var(--fs-5);
  text-align: center;
}

.copyright a { display: inline-block; }

.copyright a:is(:hover, :focus) { color: var(--orange-soda); }
  

    /*-----------------------------------*\
    #MEDIA QUERIES
  \*-----------------------------------*/
    /**
   * responsive for lesser than 479px screen
   */

  @media (max-width: 479px)  {
    /**
   * REUSE
   */
   .heading{
    font-size: 1.5rem;
   }
   .btn {
    margin-inline: auto;
   }
   .notice {
    padding-inline: 1rem;
 }
 .notice-flex {
    display: block;
    text-align: center;
    padding-inline: 1rem;
 }
 #notice-content-left,  #notice-content-right {
    max-width: 100%;
    margin-bottom: 2rem;
}
.notice-icon img {
    max-width: 55%;
    margin-inline: auto;
}
.notice-content h2 {
    text-align: center;
    font-size: 1.2rem;
    margin-bottom: 1.2rem;
}
.notice-text {
    font-size: 1rem;
}
.tag {
  padding-inline: 1rem;
  font-size: 1.2rem; 
}
.tag-1 {
  padding-inline: 1rem;
}

.tag-1 h3 {
font-size: 1.5rem;
}
/*-----------------------------------*\
#HEADER
\*-----------------------------------*/
.header-top-link {
  font-size: var(--fs-7);
}
      /**
   * HERO
   */
   .slider {
    position: relative;
    width: 100%;
    max-width: 100%;
    max-height: 400px;
    overflow: hidden;
    padding: 0;
  }
    .caption {
    left: 0;
    top: 3rem;
    width: 100%;
    text-align: center;
  }
    .caption h2{
    font-size: 2rem;
    width: 100%;
    text-align: center;
    margin-bottom: 10px;
  }

          /**
   * ABOUT
   */
   .about {
    padding-inline: 1rem;
   }


      /**
   * RESEARCH
   */
  .research-box{
    height: 720px;
  }
  .research-flex {      
    gap: 5rem;
    }
  .research-box h2{
    margin-bottom: 1rem;
  }
  .research-content {
    max-width: 100%;
  }
.research-content h2 {
  text-align: left;
  font-size: 1.5rem;
  line-height: 1.7rem;
  margin-bottom: 1rem;
}
.research-text {
  color: var(--white);
  font-size: 1.3rem;
  line-height: 1.5rem;
}
.research-banner img {
  max-width: 22rem;
  margin-inline: auto;
}
.research-footer {
  padding-inline: 10px;
}
.research-footer-flex {
  padding-inline: 10px;
  display: block;
}
#research-footer-content-left, #research-footer-content-right {
  max-width: 100%;
}
.research-icon ion-icon {
  font-size: 2.5rem;
}
.research-footer-content h2 {
  font-size: 2rem;
  line-height: 2rem;
  margin-bottom: 1rem;
}
.research-footer-text {
  font-size: 1rem;
  line-height: 1.6rem;
}
.research-footer-content h3 {
  line-height: 1.6rem;
  margin-top: .6rem;
}

  /**
   * NOTICE
   */

   .notice::before{ display: none;}

  /**
   * REMARK
   */

.remark-card{
  min-width: 100%;
  flex: 0 0 100%;
}
.remark-arrow{
  display: none;
}

    /**
   * CX
   */ 
.cx-box {
  min-height: 90vh;

}
.cx-flex {
  z-index: 0;
}
#cx-content-left,  #cx-content-right {
  max-width: 100%;
}
.cx-icon img{
  margin-inline: auto;
  margin-bottom: 1rem;
}
.cx-content h2 {
  font-size: 2rem;
  line-height: 2rem;
  margin-bottom: 1.3rem;
}
.cx-text {
  line-height: 1.4rem;
}
.cx-sub-flex {
  display: block;
}
.cx-sub-flex p {
  min-width: 11rem;
}
.cx-footer-flex {
  display: block;
}
.cx-footer-card {
  max-width: 100%;
  margin-bottom: 3rem;
}
   /**
   * ENQUIRE
   */ 
.enquire-list {
  display: block;
}
.enquire-card {
  max-width: 100%;
}
   /**
   * FORM PAGE
   */ 
.review-tag{
  min-width: 100%;
  
}
.shopper-form form {
   padding: 0;
   min-width: 100%;
   padding-top: 1.5rem;
}
.shopper-form fieldset {
   padding: 1rem;   
}
.shopper-login, .shopper-form{
  padding: 1rem;
}
 .shopper-login form {
    padding: 0;
    min-width: 100%;
    padding-top: 2.5rem;
}
.shopper-login fieldset {
    padding-top: 2rem;
    padding-bottom: 3.5rem;
    min-width: 100%;
    margin-inline: auto;
    background-color: var(--white);
    box-shadow: var(--shadow-1);
    border: none;
}





}
   /**
   * responsive for larger than 480px screen and lesser than 767px screen
   */

   @media (min-width: 480px) and (max-width: 767px)  {
    /**
   * REUSE
   */
   .heading{
    font-size: 1.5rem;
   }
   .btn {
    margin-inline: auto;
   }
   .notice {
    padding-inline: 1rem;
 }
 .notice-flex {
    display: block;
    text-align: center;
    padding-inline: 1rem;
 }
 #notice-content-left,  #notice-content-right {
    max-width: 100%;
    margin-bottom: 2rem;
}
.notice-icon img {
    max-width: 55%;
    margin-inline: auto;
}
.notice-content h2 {
    text-align: center;
    font-size: 1.2rem;
    margin-bottom: 1.2rem;
}
.notice-text {
    font-size: 1rem;
}
.tag {
  padding-inline: 1rem;
  font-size: 1.2rem; 
}
.tag-1 {
  padding-inline: 1rem;
}

.tag-1 h3 {
font-size: 1.5rem;
}
/*-----------------------------------*\
#HEADER
\*-----------------------------------*/
.header-top-link {
  font-size: var(--fs-7);
}
      /**
   * HERO
   */
   .slider {
    position: relative;
    width: 100%;
    max-width: 100%;
    max-height: 400px;
    overflow: hidden;
  }
  .caption {
    left: 0;
    top: 5px;
    width: 100%;
    text-align: center;
    background-color: #0073e6;
  }
          /**
   * RESEARCH
   */
   .about {
    padding-inline: 1rem;
   }

      /**
   * RESEARCH
   */
  .research-box{
    height: 720px;
  }
  .research-flex {      
    gap: 5rem;
    }
  .research-box h2{
    margin-bottom: 1rem;
  }
  .research-content {
    max-width: 100%;
  }
.research-content h2 {
  text-align: left;
  font-size: 1.5rem;
  line-height: 1.7rem;
  margin-bottom: 1rem;
}
.research-text {
  color: var(--white);
  font-size: 1.3rem;
  line-height: 1.5rem;
}
.research-banner img {
  max-width: 22rem;
  margin-inline: auto;
}
.research-footer {
  padding-inline: 10px;
}
.research-footer-flex {
  padding-inline: 10px;
  display: block;
}
#research-footer-content-left, #research-footer-content-right {
  max-width: 100%;
}
.research-icon ion-icon {
  font-size: 2.5rem;
}
.research-footer-content h2 {
  font-size: 2rem;
  line-height: 2rem;
  margin-bottom: 1rem;
}
.research-footer-text {
  font-size: 1rem;
  line-height: 1.6rem;
}
.research-footer-content h3 {
  line-height: 1.6rem;
  margin-top: .6rem;
}

  /**
   * REMARK
   */

.remark-card{
  min-width: 100%;
  flex: 0 0 100%;
}
.remark-arrow{
  display: none;
}

    /**
   * CX
   */ 
.cx-box {
  min-height: 90vh;
}
.cx-flex {
  display: block;
}
#cx-content-left,  #cx-content-right {
  max-width: 100%;
}
.cx-icon img{
  margin-inline: auto;
  margin-bottom: 2rem;
}
.cx-content h2 {
  font-size: 1.6rem;
  line-height: 2rem;
  margin-bottom: 1.3rem;
}
.cx-text {
  line-height: 1.4rem;
}
.cx-sub-flex {
  display: block;
}
.cx-sub-flex p {
  min-width: 11rem;
}
.cx-footer-flex {
  display: block;
}
.cx-footer-card {
  max-width: 100%;
  margin-bottom: 3rem;
}
   /**
   * ENQUIRE
   */ 
.enquire-list {
  display: block;
}
.enquire-card {
  max-width: 100%;
}
   /**
   * FORM PAGE
   */ 
form{
  padding: 4px 15px;
  min-width: 100%;
  margin-top: 1rem;
}
fieldset {
  padding: 20px;
}
form h2  {
  font-size: 1.2rem;
  line-height: 2rem;
}

legend {
    font-size: 1.05em;
}
.sec {
  gap: 3rem;
}
.card {
  max-width: 10rem;
  min-height: 10rem;
}
#Div2 {
  padding: 10px 0;
}
.text{
  max-width: 90%;
  margin-inline: auto;
}

/* .shopper-login {
  padding: 2rem 0;
} */
.shopper-login form{
  width: 100%;
}
.shopper-login fieldset{
  min-width: 100%;
}
.shopper-login #checkbox {
  align-items: baseline;
}
.shopper-login .review-tag-text a {
  padding-inline: 0;
}
.review-btn-box {
  width: 100%;
}

}

@media (min-width: 480px) and (max-width: 992px) {

  form{
    padding: 4px 15px;
    min-width: 100%;
    margin-top: 1rem;
  }

}

  /**
   * responsive for larger than 600px screen
   */
  
   @media (min-width: 600px) {
  
    /**
     * CUSTOM PROPERTY
     */
  
    :root {
  
      /**
       * typography
       */
  
      --fs-2: 1.875rem;
  
    }
  
  
  
    /**
     * REUSED STYLE
     */
  
    .container {
      max-width: 550px;
      margin-inline: auto;
    }
  
    .has-scrollbar {
      gap: 25px;
      margin-inline: -25px;
      padding-inline: 25px;
      scroll-padding-left: 25px;
    }
  
    .has-scrollbar > li { min-width: calc(50% - 12.5px); }
  
  
  
    /**
     * SERVICE
     */
  
    .service-list > li { width: calc(50% - 15px); }
  
  
  
    /**
     * PROPERTY
     */
  
    .property .container {
      max-width: unset;
      padding-inline: 25px;
    }
  

  
    /**
     * CTA
     */
  
    .cta-card { --fs-2: 1.5rem; }


  
  
    /**
     * FOOTER
     */
  
    .footer-link-box {
      display: flex;
      justify-content: space-between;
      gap: 20px;
    }

    .section-text {
        max-width: 100%;
    }
  
  }

  /**
   * responsive for larger than 768px screen
   */
  
   @media (min-width: 768px) {
  
    /**
     * CUSTOM PROPERTY
     */
  
    :root {
  
      /**
       * typography
       */
  
      --fs-1: 2.5rem;
      --fs-5: 0.938rem;
      --fs-6: 0.875rem;
  
    }
  
  
  
    /**
     * REUSED STYLE
     */
  
    .container { max-width: 720px; }
  
    .btn {
      --fs-5: 1rem;
      padding: 12px 28px;
    }
  
  
  
    /**
     * HEADER
     */
  
    .header-top { padding-block: 5px; }
  
    .header-top .wrapper { margin-left: auto; }
  
    .header-top-social-list { gap: 12px; }
  
    .header-top-social-link { font-size: 1rem; }
  
    .header-top-btn { padding: 10px 20px; }
  
    .header-bottom-actions {
      all: unset;
      display: flex;
      align-items: center;
      gap: 10px;
    }
  
    .header-bottom .container {
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
  
    .header-bottom-actions-btn ion-icon { margin-bottom: 0; }
  
    .header-bottom-actions-btn span { display: none; }
  
    .header-bottom-actions-btn {
      background: var(--white);
      width: 50px;
      height: 50px;
      box-shadow: var(--shadow-2);
    }
  
  
  
    /**
     * HERO
     */
  
    .hero-content { max-width: 400px; }
  
  
  
    /**
     * ABOUT
     */
  
    .about .section-title { max-width: 30ch; }
  
    .about-text { max-width: 55ch }
  
    .about-list {
      display: grid;
      grid-template-columns: 1fr 1fr;
    }
  
  
  
    /**
     * FEATURES
     */
  
    .features-list > li { width: calc(33.33% - 13.33px); }
  
    .features-card { gap: 20px; }
  
    .features-card .card-icon {
      width: 80px;
      height: 80px;
      font-size: 32px;
    }
  
    .features-card .card-title { --fs-6: 1.125rem; }
  
  
    .shopper-login {
      padding: 2rem 0;
    }
    .shopper-login form{
      width: 100%;
    }
    .shopper-login fieldset{
      min-width: 60%;
    }
    .shopper-login #checkbox {
      align-items: baseline;
    }
    .shopper-login .review-tag-text a {
      padding-inline: 20px;
    }
  
    /**
     * BLOG
     */
  
    .blog-card { --fs-7: 0.875rem; }
  
    .blog-title { font-size: 1.25rem; }
  
    .blog .card-meta-list { gap: 30px; }
  
  
  
    /**
     * CTA
     */
  
    .cta-card { --fs-2: 1.625rem; }
  

  
    /**
     * FOOTER
     */
  
    .footer { margin-bottom: 0; }

    .section-text {
        max-width: 100%;
    }
  
  }  
  
  /**
   * responsive for larger than 992px screen
   */
  
  @media (min-width: 992px) {
  
    /**
     * CUSTOM PROPERTY
     */
  
    :root {
  
      /**
       * typography
       */
  
      --fs-1: 3.125rem;
      --fs-4: 1.375rem;
  
    }
  
  
  
    /**
     * REUSED STYLE
     */
  
    .container { max-width: 970px; }
  
    .btn { padding: 15px 40px; }
  
  
  
    /**
     * HEADER
     */
  
    .header-top-list,
    .header-top .wrapper { gap: 30px; }
  
  
  
    /**
     * HERO
     */
  
    .hero-content {
      max-width: unset;
      margin-bottom: 0;
    }
  
    .hero .container {
      display: grid;
      grid-template-columns: 1fr 1fr;
      align-items: center;
    }
  
  
  
    /**
     * ABOUT
     */
  
    .about .container {
      display: grid;
      grid-template-columns: 1fr 1fr;
      align-items: center;
      gap: 60px;
    }
  
    .about-banner { margin-bottom: 0; }
  
    .about-banner > img { width: 100%; }
  
  
  
    /**
     * SERVICE
     */
  
    .service-list > li { width: calc(33.33% - 20px); }
  
  
  
    /**
     * PROPERTY
     */
  
    .property-card .card-content { padding-inline: 30px; }
  
    .card-footer { padding: 20px 30px 30px; }
  
  
  
    /**
     * FEATURES
     */
  
    .features-list { column-gap: 30px; }
  
    .features-list > li { width: calc(25% - 30px); }
  
  
  
    /**
     * BLOG
     */
  
    .blog-title { font-size: 1.375rem; }
  
    form{
      padding: 4px 15px;
      max-width: 70%;
      margin-top: 1rem;
    }
  
    /**
     * CTA
     */
  
    .cta-card {
      --fs-2: 1.875rem;
      --fs-5: 1rem;
  
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 50px;
    }
  
    .cta-card :is(.card-content, .cta-btn) { margin: 0; }
  
    .shopper-login {
      padding: 2rem 0;
    }
    .shopper-login form{
      width: 100%;
    }
    .shopper-login fieldset{
      min-width: 60%;
    }
    .shopper-login #checkbox {
      align-items: baseline;
    }
    .shopper-login .review-tag-text a {
      padding-inline: 20px;
    }
  
    /**
     * FOOTER
     */
  
    .footer-top .container {
      display: flex;
      justify-content: space-between;
    }
  
    .footer-brand {
      min-width: 50%;
      margin-bottom: 0;
    }
  
    .footer-link-box { flex-basis: 400px; }

    .section-text {
        max-width: 46ch;
    }


  
  } 
  
  
  /**
   * responsive for larger than 1200px screen
   */
  
  @media (min-width: 1200px) {
  
    /**
     * CUSTOM PROPERTY
     */
  
    :root {
  
      /**
       * typography
       */
  
      --fs-2: 2.75rem;
      --fs-4: 1.5rem;
  
    }
  
  
  
    /**
     * REUSED STYLE
     */
  
    .container { max-width: 1200px; }
  
    .has-scrollbar > li { min-width: calc(33.33% - 16.66px); }
  
  
  
    /**
     * HEADER
     */
  
    .header-bottom { padding-block: 30px; }
  
    .header-bottom-actions-btn:last-child,
    .navbar-top,
    .overlay { display: none; }
  
    .navbar,
    .navbar.active { all: unset; }
  
    .navbar-list {
      display: flex;
      align-items: center;
      gap: 30px;
    }
  
    .navbar-link {
      color: var(--dark-jungle-green);
      --fs-5: 1.125rem;
      text-transform: capitalize;
    }
  
    .header { padding-bottom: 114px; }
  
    .header-bottom {
      position: absolute;
      left: 0;
      bottom: 0;
      width: 100%;
    }
  
    .header.active .header-bottom {
      position: fixed;
      bottom: auto;
      top: -94px;
      padding-block: 20px;
      box-shadow: 0 10px 50px hsla(237, 71%, 52%, 0.2);
      animation: slideDown 0.25s ease-out forwards;
    }
  
    @keyframes slideDown {
      0% { transform: translateY(0); }
      100% { transform: translateY(100%); }
    }
  
  
  
    /**
     * HERO
     */
  
    .hero-text {
      padding-left: 30px;
      max-width: 450px;
      margin-bottom: 40px;
    }
  
  
  
    /**
     * FEATURES
     */
  
    .features-card .card-icon {
      width: 100px;
      height: 100px;
      font-size: 45px;
    }
  
    .features-card .card-title { --fs-6: 1.375rem; }
  
  
  
    /**
     * CTA
     */
  
    .cta-card {
      --fs-2: 2.25rem;
      padding-inline: 60px;
    }
  
    form{
      padding: 4px 15px;
      max-width: 70%;
      margin-top: 1rem;
    }
  
    /**
     * FOOTER
     */
  
    .footer { --fs-5: 1rem; }
  
    .footer-link-box { flex-basis: 500px; }

    .footer-brand{ min-width: 60%;}
  
  }