/* Default Theme */
 :root {
   --primary-color: #73513a;
   --secondary-color: #ffffff;
   --bg-color: #f9f9f9;
   --text-color: #333;
   --overlay-bg: rgba(0, 0, 0, 0.8);
   --light-bg-color: #73513a2b;
   --card-background: #ffffff;
   --primary-overlay: rgb(145 108 85 / 77%);
 }



 /* Green Theme */
 .theme-green {
   --primary-color: #2e7d32;
   --secondary-color: #ffffff;
   --bg-color: #f0fff4;
   --text-color: #1b1b1b;
   --overlay-bg: rgba(21, 206, 52, 0.8);
   --light-bg-color: #73513a2b;
   --card-background: #ffffff;
   --primary-overlay: rgba(21, 206, 52, 0.7);
 }

 /* Blue Theme */
 .theme-blue {
   --primary-color: hsla(249, 85%, 31%);
   --secondary-color: #ffffff;
   --bg-color: #eaf2ff;
   --text-color: #0a0a0a;
   --overlay-bg: hsla(249, 85%, 31%, 0.8);
   --light-bg-color: #73513a2b;
   --card-background: #ffffff;
   --primary-overlay: hsla(249, 85%, 31%, 0.7);
 }

 /* Red Theme */
 .theme-red {
   --primary-color: #dc3545;
   --secondary-color: #ffffff;
   --bg-color: #fff0f0;
   --text-color: #1b1b1b;
   --overlay-bg: rgba(219, 21, 21, 0.8);
   --light-bg-color: #73513a2b;
   --card-background: #ffffff;
   --primary-overlay: rgba(219, 21, 21, 0.7);
 }




 /* Apply variables */
 body {
   background: var(--bg-color);
   color: var(--text-color);
   transition: background 0.3s, color 0.3s;
   font-family: 'Poppins', sans-serif;
 }

 .btn-primary {
   background-color: var(--primary-color);
   border-color: var(--primary-color);
   color: var(--secondary-color);
 }

 .custom-btn {
   border: 3px solid var(--primary-color);
   border-radius: 30px;
   padding: 14px 55px;
   color: #ffffff;
   background-color: var(--primary-color);
   transition: all 0.3s ease;
   text-decoration: none;
   font-weight: 500;
   font-size: 20px;
   line-height: 26px;
   min-width: 163px;
   text-align: center;
   display: inline-block;
 }

 .custom-btn:hover {
   background-color: var(--secondary-color);
   color: var(--primary-color);
 }

 .btn-close {
    padding: .5rem .5rem;
    margin: -0.5rem -0.5rem -0.5rem auto;
    padding-right: 147px !important;
}

 /* Custom swatches in dropdown */
 
  .theme-switcher {
    position: fixed;
    top: 23px;
    right: 0px;
z-index: 9999;
    text-align: center;
  }

  /* Gear Icon */
  .gear-btn {
    font-size: 32px;
    cursor: pointer;
    position: relative;
    color: #444;
    text-shadow: 0 2px 6px rgba(0,0,0,0.15);
    
  }

  /* Infinite rotation */
  .gear-btn.spin {
    animation: spin 2s linear infinite;
  }

  @keyframes spin {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
  }

  /* Tooltip */
  .gear-btn::after {
    content: "Click Me";
    position: absolute;
   top: 10px;
    right: 67px;
    transform: translateX(50%);
    background: rgba(0,0,0,0.8);
    color: #fff;
    font-size: 12px;
    padding: 5px 10px;
    border-radius: 6px;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease, transform 0.3s ease;
  }

  .gear-btn:hover::after {
    opacity: 1;
    transform: translateX(50%) translateY(-3px);
  }

  /* Options container with glass effect */
  .color-options {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    margin-top: 14px;
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    transform: scaleY(0.9);
    padding: 8px 14px;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(12px);
    box-shadow: 0 8px 24px rgba(0,0,0,0.15);
    transition: all 0.5s ease;
  }

  .color-options.show {
    max-height: 500px;
    opacity: 1;
    transform: scaleY(1);
  }

  /* Swatch Styling */
  .color-swatch {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: 2px solid rgba(255,255,255,0.9);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.25);
    cursor: pointer;
    transform: scale(0.5);
    opacity: 0;
    transition: transform 0.35s ease, opacity 0.35s ease;
  }

  /* Opening animation (top → bottom) */
  .color-options.show .color-swatch:nth-child(1) { transform: scale(1); opacity: 1; transition-delay: 0.1s; }
  .color-options.show .color-swatch:nth-child(2) { transform: scale(1); opacity: 1; transition-delay: 0.2s; }
  .color-options.show .color-swatch:nth-child(3) { transform: scale(1); opacity: 1; transition-delay: 0.3s; }
  .color-options.show .color-swatch:nth-child(4) { transform: scale(1); opacity: 1; transition-delay: 0.4s; }

  /* Closing animation (bottom → top) */
  .color-options:not(.show) .color-swatch:nth-child(1) { transform: scale(0.5); opacity: 0; transition-delay: 0.4s; }
  .color-options:not(.show) .color-swatch:nth-child(2) { transform: scale(0.5); opacity: 0; transition-delay: 0.3s; }
  .color-options:not(.show) .color-swatch:nth-child(3) { transform: scale(0.5); opacity: 0; transition-delay: 0.2s; }
  .color-options:not(.show) .color-swatch:nth-child(4) { transform: scale(0.5); opacity: 0; transition-delay: 0.1s; }
 
@keyframes rotateGear {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
 







 .section-heading {
   text-align: center;

   margin-bottom: 70px;


 }

 .ptb-100 {
   padding-top: 50px;
   padding-bottom: 50px;
 }

 .section-heading h1 {
   text-align: center;
   padding-bottom: 0;
   font-weight: 500;
   color: var(--primary-color);
   font-size: 45px;
 }

 .section-heading p {
   font-size: 18px;
   color: var(--text-color);
   max-width: 50%;
   margin: auto;
 }


 /*** Navbar Start ***/
 .navbar .navbar-nav .nav-link {
   padding: 10px 15px;
   font-size: 16px;
   transition: .5s;
 }

 .navbar {
   height: 100px;
   justify-content: space-between;
   border-bottom: 1px solid rgba(255, 255, 255, .1);
 }

 .navbar-collapse {
   flex-grow: initial;

 }

 .navbar-light .navbar-nav .show>.nav-link,
 .navbar-light .navbar-nav .nav-link.active {
   color: rgba(0, 0, 0, .9);
   font-weight: 600;
 }

 .navbar .navbar-nav .nav-link:hover,
 .navbar .navbar-nav .nav-link.active,
 .fixed-top.bg-white .navbar .navbar-nav .nav-link:hover,
 .fixed-top.bg-white .navbar .navbar-nav .nav-link.active {
   color: var(--primary-color);
 }

 .navbar .dropdown-toggle::after {
   border: none;
   content: "\f107";
   font-family: "Font Awesome 5 Free";
   font-weight: 700;
   vertical-align: middle;
   margin-left: 8px;
 }

 @media (min-width: 1200px) {
   .navbar .nav-item .dropdown-menu {
     display: block;
     visibility: hidden;
     top: 100%;
     transform: rotateX(-75deg);
     transform-origin: 0% 0%;
     border: 0;
     transition: .5s;
     opacity: 0;
   }
 }

 .dropdown .dropdown-menu a:hover {
   background: var(--primary-color);
   color: #ffffff;
 }

 .navbar .nav-item:hover .dropdown-menu {
   transform: rotateX(0deg);
   visibility: visible;
   background: var(--bs-light) !important;
   border-radius: 10px !important;
   transition: .5s;
   opacity: 1;
 }

 #searchModal .modal-content {
   background: rgba(255, 255, 255, .8);
 }

 .sticky-top {
   position: sticky;
   top: 0;
   z-index: 1020;
   background: #ffffff;
 }

 /*** Navbar End ***/

 /******************************************************************************************************
*********************************FOR MOBILE HEADER START**********************************************/

 .mobile_header .side-bar {
   background: #ffffff;
   backdrop-filter: blur(15px);
   width: 350px;

   position: fixed;
   top: 0;
   height: 106vh;
   right: -350px;
   overflow-y: auto;
   transition: 0.6s ease;
   transition-property: right;
   z-index: 999;
 }

 .side-bar img {
   margin: 20px;
   width: 200px;
 }

 .mobile_header .side-bar::-webkit-scrollbar {
   width: 0px;
 }

 .mobile_header .side-bar.active {
   right: 0;
 }

 .mobile_header .side-bar .menu {
   width: 100%;
 }

 .mobile_header .side-bar .menu .list__item {
   position: relative;
   cursor: pointer;
 }

 .mobile_header .side-bar .menu .list__item a {
   color: #000000;
   font-size: 16px;
   text-decoration: none;
   display: block;
   padding: 1px 24px;
   line-height: 60px;
   display: flex;
   justify-content: space-between;
   align-items: center;
   border-bottom: 1px solid #d1d1d1;
   font-weight: 500;
 }

 .mobile_header .side-bar .menu .list__item {
   border-bottom: 1px solid #d1d1d1;
 }

 .mobile_header .side-bar .menu .list__item a:hover {
   background:var(--primary-color);
   transition: 0.3s ease;
   color: #fff;
 }

 .mobile_header .side-bar .menu .list__item a:hover i {
   color: #fff;
 }

 .mobile_header .side-bar .menu .list__item i {
   margin-right: 10px;
   position: absolute;
   font-size: 20px;
   color: var(--primary-color);
   top: 20px;
   right: 25px;
 }

 .mobile_header.side-bar .menu .list__item a .dropdown {
   position: absolute;
   right: 0;
   margin: 20px;
   transition: 0.3s ease;
 }

 .mobile_header .side-bar .menu .list__item .sub-menu {
   background: #ffffff;
   display: none;
 }

 .mobile_header .side-bar .menu .list__item .sub-menu a {
   padding-left: 80px;
 }

 .mobile_header .rotate {
   transform: rotate(90deg);
 }

 .mobile_header .close-btn {
   position: absolute;
   font-size: 23px;
   right: 24px;
   margin: 15px;
   cursor: pointer;
 }

 .mobile_header .menu-btn {
   position: absolute;
   color: var(--primary-color);
   font-size: 35px;
   /* margin: 25px; */
   cursor: pointer;
   right: 20px;
   top: 25px;
 }

 .side-bar header img {
   height: 70px;
   margin: 15px;

   margin-left: 70px;

   width: 165px;
   margin-left: 20px;
   margin-top: 22px;
 }

 .mobile_header {
   background: white;
   height: 100px;
   position: fixed;
   width: 100%;
   z-index: 999;
   top: 0px;
   box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
 }

 .overlay {
   position: fixed;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   background: rgba(0, 0, 0, 0.7);
   z-index: 100;
   visibility: hidden;
   opacity: 0;
   transition: opacity 0.5s, visibility 0.5s;
 }

 .overlay.active {
   visibility: visible;
   opacity: 1;
 }

 .mobile_header {
   display: none;
 }

 .main_logo img {
   width: 200px;

   display: flex;
   align-items: center;
   justify-content: center;
 }

 section.main.main_logo {
   width: 250px;
   position: absolute;
   top: 15px;
 }



 /******************************************************************************************************
*********************************FOR MOBILE HEADER END**********************************************/


 /* Hero Slider */
 .hero-slider {
   width: 100%;
   height: 50vh;
   position: relative;
 }

 .hero-slider .swiper-slide {
   position: relative;
   background-size: cover;
   background-position: center;
 }

 /* Overlay */
 .hero-slider .slide-overlay {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   background: var(--overlay-bg);
   z-index: 1;
 }

 /* Content */
 .hero-slider .slide-content {
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
   text-align: center;
   color: var(--secondary-color);
   z-index: 2;
 }

 .hero-slider .slide-content h1 {
   font-size: 3rem;
   font-weight: bold;
   margin-bottom: 15px;
   color: var(--secondary-color)
 }

 .hero-slider.slide-content p {
   font-size: 1.2rem;
   margin-bottom: 25px;
 }

 .swiper-button-next,
 .swiper-button-prev {
   color: var(--secondary-color)
 }




 /*********ABOUT US SECTION START************************************/
 .about-us-section {
   background: url(../images/about-us-bg.jpg) left center no-repeat;
   position: relative;
   padding: 4rem 0 4rem 0;
   background-color: var(--secondary-color);
 }

 .about-us-section-list {
   padding-left: 73px;
 }

 .about-us-section-list h2 {
   font-size: 40px;
   color: var(--primary-color);
   position: relative;
   margin-bottom: 3rem;
   font-weight: 300;
   padding-right: 90px
 }

 .about-us-section-list h2 strong {
   font-weight: 900;
   color: var(--primary-color)
 }

 .about-us-section-list h2::after {
   content: '';
   position: absolute;
   bottom: -1rem;
   width: 3.7rem;
   height: 2px;
   background-color: var(--text-color);
   display: block
 }

 .about-us-section-list p {
   color: var(--text-color);
   line-height: 29px;
   font-size: 17px;
   font-weight: 300
 }

 .about-us-section-list p strong {
   color: var(--text-color);
 }

 .about-us-section-list p.big {
   font-size: 20px;
   line-height: 32px
 }

 .free_quote {
   color: var(--secondary-color);
   background-color: var(--primary-color);
   border-color: var(--text-color);
   margin: 0;
   padding: 10px 20px;
   font-weight: 400;
   border-radius: 5px;
   margin-top: 20px;
   display: inline-block;
   text-transform: uppercase
 }

 .free_quote:hover {
   background-color: var(--primary-color);
   color: var(--secondary-color);
 }

 /************************************ ABOUTUS SECTION END*****************************************/

 /************************************USP SECTION START*****************************************/
 .usp-section {
   background: var(--light-bg-color);
 }

 .featurs-item {
   height: 100%;
 }

 .featurs .featurs-item .featurs-icon {
   position: relative;
   width: 120px;
   height: 120px;
 }

 .btn-square,
 .btn-sm-square,
 .btn-md-square,
 .btn-lg-square {
   padding: 0;
   display: flex;
   align-items: center;
   justify-content: center;
   font-weight: normal;
 }

 .featurs .featurs-item .featurs-icon::after {
   content: "";
   width: 35px;
   height: 35px;
   background: var(--primary-color);
   position: absolute;
   bottom: -10px;
   transform: translate(-50%);
   transform: rotate(45deg);

 }

 .color {
   color: var(--primary-color);
 }

 .featurs-icon {
   background: var(--primary-color);
 }

 .featurs-icon i {
   color: var(--secondary-color)
 }

 .featurs-content h5 {
   font-family: 'Poppins', sans-serif;
   font-weight: 500;
   line-height: 1.2;
   color: var(--primary-color);
 }

 /************************************USP SECTION END*****************************************/


 /************************************Product Card SECTION Start*****************************************/




 .filter-tabs .filter-btn {
   border: none;
   outline: none;
   background: #eee;
   color: var(--primary-color);
   padding: 8px 20px;
   border-radius: 25px;
   font-weight: 500;
   transition: all 0.3s ease;
 }

 .filter-tabs .filter-btn:hover {
   background: #d9c5b4;
   color: #000;
 }

 .filter-tabs .filter-btn.active {
   background: var(--primary-color);
   color: #fff;
 }

 /* Product items with animation */
 .product-item {
   opacity: 1;
   transform: scale(1);
   transition: all 0.3s ease-in-out;
 }

 .product-item.fade-out {
   opacity: 0;
   transform: scale(0.9);
 }

 .product-item.fade-in {
   opacity: 1;
   transform: scale(1);
 }

 .product-item.hide {
   opacity: 0;
   transform: scale(0.85);
   pointer-events: none;
 }

 /* Product card styling */
 .product-card {
   border: 1px solid var(--secondary-color);
   border-radius: 12px;
   overflow: hidden;
   padding: 15px;
   text-align: center;
   background: #fff;
   transition: box-shadow 0.3s ease, transform 0.3s ease;
 }

 .product-card:hover {
   box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
   transform: translateY(-5px);
 }

 .product-badge {
   background: var(--primary-color);
   color: #fff;
   font-size: 12px;
   padding: 4px 10px;
   border-radius: 15px;
   display: inline-block;
   margin-bottom: 10px;
 }

 .product-card__title {
   font-size: 18px;
   font-weight: 600;
   margin: 10px 0;
 }

 .product-card__price-row {
   display: flex;
   justify-content: space-between;
   align-items: center;
   margin-top: 10px;
 }

 .product-card__btn {
   background: var(--primary-color);
   color: #fff;
   border: none;
   padding: 6px 14px;
   border-radius: 6px;
   transition: background 0.3s ease;
 }

 .product-card__btn:hover {
   background: var(--primary-color);
   color: var(--bg-color);
 }


 /************************************Product Card SECTION End****************************************/


 /************************************PROCESS SECTION START****************************************/
 .process-section {
   position: relative;
   background: url("../img/process-section.jpg") no-repeat center center/cover;
   color: #ffffff;
   padding: 100px 0;
 }

 .process-overlay {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   background: var(--primary-overlay);
   z-index: 1;
 }

 .process-content {
   position: relative;
   z-index: 2;
 }

 .process-content h2 {
   font-weight: 700;
   color: #ffffff;
   position: relative;
   display: inline-block;
 }

 .process-content h2::after {
   content: "";
   display: block;
   width: 80px;
   height: 4px;
   background: var(--primary-color);
   margin: 12px auto 0;
   border-radius: 2px;
 }

 .process-box {
   background: var(--primary-color);
   border-radius: 15px;
   padding: 30px;
   transition: all 0.4s ease;
   backdrop-filter: blur(6px);
   color: #ffffff;
 }

 .process-box:hover {
   background: rgba(115, 81, 58, 0.9);
   transform: translateY(-10px);
 }

 .process-box i {
   font-size: 40px;
   color: var(--secondary-color);
   margin-bottom: 15px;
   transition: color 0.3s ease;
 }

 .process-box:hover i {
   color: #ffffff;
 }

 .process-box h5 {
   font-weight: 600;
   color: #ffffff;
   font-size: 32px;
 }

 /************************************PROCESS SECTION END****************************************/


 .bestseller-card {
   background-color: #ffffff;
 }
 .bestseller-card .fa-star{
   color: var(--primary-color);
 }



 /************************************************************FOOTER START************************************************************/
 ul {
   margin: 0px;
   padding: 0px;
 }

 .footer-section {
   background: #151414;
   position: relative;
 }

 .footer-cta {
   border-bottom: 1px solid #373636;
 }

 .single-cta i {
   color: var(--primary-color);
   font-size: 30px;
   float: left;
   margin-top: 8px;
 }

 .cta-text {
   padding-left: 15px;
   display: inline-block;
 }

 .cta-text h4 {
   color: #fff;
   font-size: 20px;
   font-weight: 600;
   margin-bottom: 2px;
 }

 .cta-text span {
   color: #757575;
   font-size: 15px;
 }

 .footer-content {
   position: relative;
   z-index: 2;
 }

 .footer-pattern img {
   position: absolute;
   top: 0;
   left: 0;
   height: 330px;
   background-size: cover;
   background-position: 100% 100%;
 }

 .footer-logo {
   margin-bottom: 30px;
 }

 .footer-logo img {
   max-width: 200px;
 }

 .footer-text p {
   margin-bottom: 14px;
   font-size: 14px;
   color: #7e7e7e;
   line-height: 28px;
 }

 .footer-social-icon span {
   color: #fff;
   display: block;
   font-size: 20px;
   font-weight: 700;
   font-family: 'Poppins', sans-serif;
   margin-bottom: 20px;
 }

 .footer-social-icon a {
   color: #fff;
   font-size: 16px;
   margin-right: 15px;
 }

 .footer-social-icon i {
   height: 40px;
   width: 40px;
   text-align: center;
   line-height: 38px;
   border-radius: 50%;
 }

 .facebook-bg {
   background: #3B5998;
 }

 .twitter-bg {
   background: #55ACEE;
 }

 .google-bg {
   background: var(--primary-color);
 }

 .footer-widget-heading h3 {
   color: #fff;
   font-size: 20px;
   font-weight: 600;
   margin-bottom: 40px;
   position: relative;
 }

 .footer-widget-heading h3::before {
   content: "";
   position: absolute;
   left: 0;
   bottom: -15px;
   height: 2px;
   width: 50px;
   background: var(--primary-color);
 }

 .footer-widget ul li {
   display: inline-block;
   float: left;
   width: 50%;
   margin-bottom: 12px;
 }

 .footer-widget ul li a:hover {
   color: var(--primary-color);
 }

 .footer-widget ul li a {
   color: #878787;
   text-transform: capitalize;
 }

 .subscribe-form {
   position: relative;
   overflow: hidden;
 }

 .subscribe-form input {
   width: 100%;
   padding: 14px 28px;
   background: #2E2E2E;
   border: 1px solid #2E2E2E;
   color: #fff;
 }

 .subscribe-form button {
   position: absolute;
   right: 0;
   background: var(--primary-color);
   padding: 13px 20px;
   border: 1px solid var(--primary-color);
   top: 0;
 }

 .subscribe-form button i {
   color: #fff;
   font-size: 22px;
   transform: rotate(-6deg);
 }

 .copyright-area {
   background: #202020;
   padding: 25px 0;
 }

 .copyright-text p {
   margin: 0;
   font-size: 14px;
   color: #878787;
 }

 .copyright-text p a {
   color: var(--primary-color);
 }

 .footer-menu li {
   display: inline-block;
   margin-left: 20px;
 }

 .footer-menu li:hover a {
   color: var(--primary-color);
 }

 .footer-menu li a {
   font-size: 14px;
   color: #878787;
 }

 .footer-social-icon {
   margin-bottom: 46px;
 }

 /************************************************************FOOTER START************************************************************/


 /********************************************breadcrumbs Start*********************************************/

 #breadcrumbs {
   background-image: url(../img/innerbg-page.jpg);
   background-position: top center;
   background-size: cover;
   position: relative;
   background-repeat: no-repeat;
   min-height: 250px;
   background-position: center;
 }

 #breadcrumbs::before {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   content: "";
   background: var(--primary-overlay);
   opacity: 0.9;
 }

 #breadcrumbs .container {
   background-color: transparent;
 }

 .breadcrumbs-wrap {
   min-height: 250px;
   z-index: 1;
   position: relative;
   display: flex;
   align-items: center;
   justify-content: space-between;
 }

 .breadcrumbs-wrap .breadcrumb-item.active {
   color: #ffffff;
 }

 #breadcrumbs h3 {
   margin: 0;
 }

 .last-word {
   color: var(--color-primary);
 }

 .pathway span {
   color: var(--color-primary);
 }

 .section.breadcrumbs .breadcrumb {
   background: transparent;
   border-radius: 0;
   margin: 0;
 }

 .section.breadcrumbs .breadcrumb li {
   margin-right: 10px;
   color: #fff;
   padding: 0.5rem 0;
 }

 /********************************************breadcrumbs End*********************************************/



 /* Contactus start */


 .account-wrap {
   max-width: 600px;

   background: #ffffff;
   padding: 20px;
   box-shadow: 0 8px 30px rgba(0, 0, 0, 0.1);
   border-radius: 10px;
   transition: all 0.3s ease-in-out;
 }

 /* Form Title */
 #Contact h3 {
   color: var(--primary-color);
   font-size: 28px;
   font-weight: 600;
   margin-bottom: 10px;
 }

 #Contact h4 {
   color: #777;
   font-size: 14px;
   margin-bottom: 30px;
 }

 /* Form Fields */
 #Contact input[type="text"],
 #Contact input[type="email"],
 #Contact input[type="tel"],
 #Contact input[type="url"],
 #Contact input[type="phone"],
 #Contact textarea {
   width: 100%;
   padding: 14px 16px;
   border: 1px solid #ccc;
   background: #f9f9f9;
   font-size: 15px;
   color: #333;
   border-radius: 5px;
   /*margin-bottom: 20px;*/
   transition: all 0.3s ease;
 }

 #Contact input:focus,
 #Contact textarea:focus {
   outline: none;
   border-color: var(--primary-color);
   background: #fff;
   box-shadow: 0 0 5px rgba(0, 63, 101, 0.2);
 }


 #Contact textarea {
   resize: none;
   min-height: 120px;
 }


 #Contact button[type="submit"] {
   background: var(--primary-color);
   color: #fff;
   border: none;
   padding: 14px;
   width: 100%;
   font-size: 16px;
   border-radius: 5px;
   font-weight: 500;
   cursor: pointer;
   transition: all 0.3s ease;
 }

 #Contact button[type="submit"]:hover {
   background: var(--light-bg-color);
   box-shadow: 0 4px 15px rgba(0, 63, 101, 0.2);
 }

 #Contact button[type="submit"]:active {
   box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.2);
 }


 ::placeholder {
   color: #aaa;
 }


 .account-wrap {
   opacity: 0;
   transform: translateY(30px);
   animation: fadeInUp 0.8s ease forwards;
 }

 @keyframes fadeInUp {
   to {
     opacity: 1;
     transform: translateY(0);
   }
 }


 @media (max-width: 600px) {
   .account-wrap {
     padding: 25px;
     margin-top: 20px;
   }

   #Contact h3 {
     font-size: 24px;
   }
 }


 /* Contactus end */





 /************************************************************Contact us pages start ****************************************/

 .Contact-page-section {
   background: linear-gradient(135deg, #f9fafc 0%, #f1f5f9 100%);
   padding: 80px 0;
   position: relative;
   overflow: hidden;
 }

 /* Decorative Gradient Overlay */
 .Contact-page-section::before {
   content: "";
   position: absolute;
   top: -50px;
   right: -50px;
   width: 220px;
   height: 220px;
   background: var(--primaryColor);
   opacity: 0.08;
   border-radius: 50%;
   z-index: 1;
 }

 .Contact-page-section::after {
   content: "";
   position: absolute;
   bottom: -60px;
   left: -60px;
   width: 300px;
   height: 300px var(--light-bg-color);
   opacity: 0.05;
   border-radius: 50%;
   z-index: 1;
 }

 /* Content container should be above decorations */
 .Contact-page-section .container {
   position: relative;
   z-index: 2;
 }

 /* Section Heading */
 .Contact-page-section .section-heading h1 {
   color: var(--primary-color);
   font-size: 42px;
   font-weight: 700;
   margin-bottom: 15px;
   position: relative;
 }

 .Contact-page-section .section-heading h1::after {
   content: '';
   width: 60px;
   height: 3px;
   background: var(--primary-color);
   display: block;
   margin: 12px auto 0;
   border-radius: 3px;
 }

 .Contact-page-section .section-heading p {
   font-size: 18px;
   max-width: 650px;
   margin: auto;
   color: #555;
   line-height: 1.7;
 }

 /* Icon Box */
 .Contact-page-section .icon-box {
   width: 50px;
   height: 50px;
   background: var(--primary-color);
   display: flex;
   align-items: center;
   justify-content: center;
   color: #fff;
   border-radius: 12px;
   font-size: 20px;
   transition: all 0.4s ease;
   box-shadow: 0 6px 12px rgba(34, 58, 102, 0.2);
 }

 .Contact-page-section .icon-box:hover {
   background: #ff6600;
   transform: rotate(6deg) scale(1.1);
 }

 /* Map */
 .Contact-page-section iframe.map {
   width: 100%;
   min-height: 620px;
   border: 0;
   border-radius: 15px;
   box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
   transition: transform 0.4s ease;
 }

 .Contact-page-section iframe.map:hover {
   transform: scale(1.02);
 }

 /* Card Form */
 .Contact-page-section .card {
   border-radius: 15px;
   background: #fff;
   transition: transform 0.3s ease, box-shadow 0.3s ease;
 }

 .Contact-page-section .card:hover {
   transform: translateY(-5px);
   box-shadow: 0 12px 28px rgba(0, 0, 0, 0.15);
 }

 /* Form Controls */
 .Contact-page-section .form-control {
   height: 52px;
   background: #f3f6fa;
   border: none;
   font-size: 16px;
   transition: all 0.3s ease;
   border-radius: 50px;
   padding-left: 20px;
 }

 .Contact-page-section textarea.form-control {
   height: 160px;
   padding-top: 15px;
   border-radius: 15px;
 }

 .Contact-page-section .form-control:focus {
   background: #fff;
   border: 2px solid var(--primaryColor, #223a66);
   box-shadow: 0px 4px 15px rgba(34, 58, 102, 0.15);
   outline: none;
 }

 /* Button */
 .site-primary-btn {
   display: inline-block;
   background: var(--primaryColor, #223a66);
   color: #fff;
   padding: 14px 24px;
   font-weight: 600;
   letter-spacing: 0.5px;
   border-radius: 50px;
   border: none;
   transition: all 0.3s ease;
   position: relative;
   overflow: hidden;
 }

 .site-primary-btn::after {
   content: "";
   position: absolute;
   left: -50%;
   top: 0;
   width: 200%;
   height: 100%;
   background: rgba(255, 255, 255, 0.2);
   transform: skewX(-20deg);
   transition: left 0.5s ease;
 }

 .site-primary-btn:hover::after {
   left: 100%;
 }

 .site-primary-btn:hover {
   background: #ff6600;
   transform: translateY(-3px);
   box-shadow: 0px 6px 18px rgba(0, 0, 0, 0.2);
 }

 /* Animations */
 .fade-in-up {
   opacity: 0;
   transform: translateY(30px);
   animation: fadeUp 0.8s ease forwards;
 }

 .fade-in-up.delay-1 {
   animation-delay: 0.3s;
 }

 .fade-in-up.delay-2 {
   animation-delay: 0.6s;
 }

 .fade-in-up.delay-3 {
   animation-delay: 0.9s;
 }

 @keyframes fadeUp {
   to {
     opacity: 1;
     transform: translateY(0);
   }
 }




 /* ========== WHY CHOOSE US SECTION ========== */
 .why-choose-us {
   background: #f8faff;
   position: relative;
   overflow: hidden;
 }

 .why-choose-us .section-title h6 {
   font-size: 16px;
   letter-spacing: 2px;
   font-weight: 600;
   color: var(--primary-color);
   animation: fadeInDown 1s ease-in-out;
 }

 .why-choose-us .section-title h1 {
   font-weight: 700;
   color: var(--primary-color);
   line-height: 1.3;
   animation: fadeInDown 1.2s ease-in-out;
 }

 .why-choose-us p {
   color: var(--text-color);
   font-size: 20px;
   line-height: 32px;
 }

 /* Feature Box */
 .why-choose-us .d-flex {
   background: #fff;
   border-radius: 12px;
   padding: 20px;
   margin-bottom: 20px;
   box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
   transition: all 0.4s ease;
   opacity: 0;
   transform: translateX(-30px);
   animation: fadeInLeft 1s forwards;
 }

 .why-choose-us .d-flex:nth-child(3) {
   animation-delay: 0.3s;
 }

 .why-choose-us .d-flex:nth-child(4) {
   animation-delay: 0.6s;
 }

 .why-choose-us .d-flex:nth-child(5) {
   animation-delay: 0.9s;
 }

 .why-choose-us .d-flex:hover {
   transform: translateY(-8px);
   box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
 }

 /* Icon Styling */
 .btn-icon {
   width: 60px;
   height: 60px;
   border-radius: 50%;
   margin-right: 30px;
   display: flex;
   align-items: center;
   justify-content: center;
   flex-shrink: 0;
   box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
   transition: all 0.3s ease-in-out;
 }

 .btn-icon:hover {
   transform: scale(1.1) rotate(5deg);
 }

 .why-choose-us img {
   border-radius: 15px;
   object-fit: cover;
   box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
   transition: all 0.4s ease-in-out;
   animation: fadeInRight 1s ease-in-out;
 }

 .why-choose-us img:hover {
   transform: scale(1.05);
 }

 /* ====== Animations ====== */
 @keyframes fadeUp {
   to {
     opacity: 1;
     transform: translateY(0);
   }
 }

 @keyframes fadeInDown {
   from {
     opacity: 0;
     transform: translateY(-30px);
   }

   to {
     opacity: 1;
     transform: translateY(0);
   }
 }

 @keyframes fadeInLeft {
   to {
     opacity: 1;
     transform: translateX(0);
   }
 }

 @keyframes fadeInRight {
   from {
     opacity: 0;
     transform: translateX(30px);
   }

   to {
     opacity: 1;
     transform: translateX(0);
   }
 }


 /****************************************************************************************************************/

 .our-process-section {
   background: var(--secondary-color)
 }

 .our-process {

   width: 100%;
   height: 70vh;
   display: flex;
   align-items: center;
 }

 .process {
   width: 100%;
   padding: 0 15px;
   text-align: center;
   list-style: none;
 }

 .process__item {
   -webkit-user-select: none;
   -moz-user-select: none;
   -ms-user-select: none;
   user-select: none;
   text-align: center;
   position: relative;
   padding: 15px 35px;
   transition: 0.4s ease-in-out;
 }

 .process__item:hover {
   background: #f2f2f2;
 }

 .process__item:hover .process__number {
   transform: translateY(5px);
   color: var(--primary-color);
 }

 .process__number {
   font-size: 90px;
   -webkit-text-stroke: 1px var(--primary-color);
   display: block;
   color: transparent;

   font-weight: 700;
   transition: 0.4s ease-in-out;
 }

 .process__title {
   display: block;


   letter-spacing: 1.5px;
   font-size: 35px;
   color: var(--primary-color);
   text-transform: uppercase;
   margin-top: 30px;
 }

 .process__subtitle {
   display: block;

   font-size: 20px;
   color: var(--text-color);
   margin-top: 30px;
   line-height: 1.5;
 }

 @media (min-width: 768px) {
   .process {
     display: inline-block;
   }

   .process__item {
     width: 49%;
     display: inline-block;
   }
 }

 @media (min-width: 1200px) {
   .process {
     display: flex;
     flex-direction: row;
     justify-content: space-between;
   }

   .process__item {
     width: 100%;
   }

   .process__item:not(:last-of-type)::after {
     content: "";
     width: 1px;
     height: 95%;
     background: var(--text-color);
     position: absolute;
     right: 0;
     top: 50%;
     opacity: 0.2;
     transform: translateY(-50%);
   }
 }

 /************************************************************************************/
 .terms-section {
   padding: 60px 0;
 }

 .terms-section h1 {
   font-size: 2.2rem;
   font-weight: bold;
   margin-bottom: 30px;
   color: var(--primary-color);
 }

 .terms-section h2 {
   font-size: 1.4rem;
   margin-top: 25px;
   margin-bottom: 15px;
   color: var(--primary-color);
 }

 .terms-section p {
   margin-bottom: 15px;
 }



 /***********************************************************/


 .privacy-content {
   background: #fff;
   padding: 40px;
   margin-top: -30px;
   border-radius: 12px;
   box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
 }

 .privacy-content h2 {
   font-size: 1.5rem;
   color: var(--primary-color);
   margin-top: 30px;
 }

 .privacy-content p {
   line-height: 1.7;
 }

 .privacy-content ul {
   margin-left: 20px;
 }



 .accordion-button:not(.collapsed) {
   color: #ffffff;
   background-color: var(--primary-color);
   box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .125);
 }


 .faq-section {
   padding: 100px 0px;
   background: #e7e2de;
 }



 /**************************************************************PRODUCT LISTING PAGE  START*********************************************/
 .product-grid {
   border-radius: 12px;
   overflow: hidden;
   text-align: center;
   background: #ffffff;
   transition: box-shadow 0.3s ease, transform 0.3s ease;
   border: 1px solid #73513a33;

 }

 .product-grid:hover {
   transform: translateY(-10px) scale(1.02);
   box-shadow: 0 12px 25px rgba(0, 0, 0, 0.15);
 }


 .product-content .title {
   background: #ffffff;
   padding: 10px;
   color: var(--primary-color);
   margin: 0px;
   font-size: 20px;
   font-weight: 500;
   text-transform: capitalize;
   display: block;
   opacity: 1;
   transition: all 0.4s ease;
   border-bottom: 1px solid #dbdbdb;
   margin-bottom: 20px;
 }

 .product-content-details {

   margin: 0px;
   opacity: 1;

   transition: all 0.4s ease 0.2s;
 }

 .read-more {
   margin-top: 10px;
 }

 .product-grid:hover .product-content-details {
   opacity: 1;
   transform: translateY(0);
 }

 .packet-badge {
    border: 1px solid var(--primary-color);
    color: var(--primary-color);
    font-size: 14px;
    border-radius: 10px;
    margin: 8px;
    display: inline-block;
    transition: transform 0.3s ease;
    padding: 5px 13px;
    font-weight: 600;
 }

 .packet-badge:hover {
   transform: scale(1.15) rotate(-3deg);
   color: var(--secondary-color);
   background-color: var(--primary-color) ;
 }

 .read-more a {
   background: var(--primary-color);
   padding: 10px;
   color: var(--secondary-color);
   margin: 0px;
   font-size: 20px;
   font-weight: 500;
   text-transform: capitalize;
   display: block;
   position: relative;
 }

 .read-more a::after {
   content: "";
   position: absolute;
   left: 0;
   bottom: 5px;
   height: 2px;
   width: 0%;
   background: #fff;
   transition: width 0.4s ease;
 }

 .read-more a:hover::after {
   width: 100%;
 }

 .product-grid .product-image {
   overflow: hidden;
   position: relative;
 }

 .product-grid .product-image a.image {
   display: block;
 }

 .product-grid .product-image img {
   width: 100%;
   height: 400px;
   object-fit: cover;
   object-position: center;
 }

 .product-grid .product-image .pic-1 {
   transition: all 0.3s ease 0s;
 }

 .product-grid .product-image:hover .pic-1 {
   transform: translateX(100%);
 }

 .product-grid .product-image .pic-2 {
   width: 100%;
   height: 100%;
   transform: translateX(-101%);
   position: absolute;
   top: 0;
   left: 0;
   transition: all 0.3s ease 0s;
 }

 .product-grid .product-image:hover .pic-2 {
   transform: translateX(0);
 }


 @media screen and (max-width: 990px) {
   .product-grid {
     margin: 0 0 30px;
   }
 }

 /**************************************************************PRODUCT LISTING PAGE  START*********************************************/


 .product-detail-left-section {
   background: var(--card-background);
   padding: 14px;
   border-radius: 10px;
 }

 .product-detail-containt {
   padding: 26px 34px;
 }

 .product-detail-left-section h2 {
   color: var(--primary-color);
   font-size: 1.8rem;
   font-weight: bold;
   margin-bottom: 10px;
 }

 .pack-btn {
   border: 1px solid var(--primary-color);
   border-radius: 50px;
   padding: 6px 16px;
   margin-right: 10px;
   background: transparent;
   font-size: 14px;
   color: #4a2c20;
   transition: all 0.3s ease;
 }

 .pack-btn:hover,
 .pack-btn.active {
   background-color: var(--primary-color);
   color: #fff;
 }

 .product-detail-left-section h3 {
   font-weight: bold;
   margin-top: 25px;
   margin-bottom: 10px;
   font-size: 1.3rem;
 }

 .product-detail-left-section p {
    line-height: 1.6;
    margin: 0px;
    font-weight: 400;
    font-size: 20px;
 }
  .product-detail-left-section h4{
    margin-top: 20px;
  }

 .detail-slider-container {
   display: flex;
   max-height: 600px;
   width: 100%;
   border-radius: 10px;
   overflow: hidden;
   background-color: var(--whiteColor);
   padding: 7px;
 }


 .detail-slider-container .swiper-main {
   flex: 3;
   position: relative;
 }

 .detail-slider-container .swiper-main .swiper-slide img {
   width: 100%;
   height: 100%;
   object-fit: cover;
   border-radius: 10px;
 }

 .detail-slider-container .swiper-thumbs {
   flex: 1;
   max-width: 225px;
   position: relative;
   margin-left: 8px;
   border-radius: 10px;

 }

 .detail-slider-container .swiper-thumbs .swiper-slide {
   margin-bottom: 6px !important;
   cursor: pointer;
 }

 .detail-slider-container .swiper-thumbs .swiper-slide img {
   width: 100%;
   height: 100%;

   border: 0px;
 }

 .detail-slider-container .swiper-button-prev:hover,
 .detail-slider-container .swiper-button-next:hover {
   background-color: var(--primaryColor);
   color: var(--whiteColor);
 }

 .detail-slider-container .swiper-button-prev svg,
 .detail-slider-container .swiper-button-next svg {
   width: 7px;
 }

 .detail-slider-container .swiper-button-prev::after,
 .detail-slider-container .swiper-button-next::after {
   content: '';
 }

 .detail-slider-container .thumbs-navigation {
   padding-bottom: 8px;
 }

 .detail-slider-container .thumbs-navigation .swiper-button-prev,
 .detail-slider-container .thumbs-navigation .swiper-button-next {
   width: 100%;
   max-width: 225px;
   height: 30px;
   border: beige;
   text-align: center;
   color:var(--secondary-color);
   transition: all 0.3s ease-in-out;
   background: var(--primary-color);
   color: #fff;
   position: absolute;
   left: 50%;
   transform: translateX(-50%);
   z-index: 10;
   color: var(--text-color);
   margin: 0px;
 }

 .detail-slider-container .swiper-main .swiper-button-prev,
 .detail-slider-container .swiper-main .swiper-button-next {
   width: 31.34px;
   height: 30px;
   border: beige;
   text-align: center;
   color: var(--secondary-color);
   transition: all 0.3s ease-in-out;
   margin-top: -28px;
   background: var(--primary-color);
   border-radius: 0;
 }

 .detail-slider-container .swiper-main .swiper-button-prev {
   border-top-left-radius: 10px;
   border-bottom-left-radius: 10px;
   left: 26px;

 }

 .detail-slider-container .swiper-main .swiper-button-next {
   border-top-right-radius: 10px;
   border-bottom-right-radius: 10px;
   right: 26px;
 }


 .detail-slider-container .thumbs-navigation .swiper-button-prev {
   top: 0;
   bottom: auto;
   border-top-right-radius: 10px;
 }

 .detail-slider-container .thumbs-navigation .swiper-button-next {
   top: auto;
   bottom: 0;
   border-bottom-right-radius: 10px;
 }

 .detail-slider-container .thumbs-navigation .swiper-button-prev:hover,
 .detail-slider-container .thumbs-navigation .swiper-button-next:hover {
   background-color: var(--primaryColor);
   color: var(--whiteColor);
 }

 .detail-slider-container .thumbs-navigation .swiper-button-prev svg,
 .detail-slider-container .thumbs-navigation .swiper-button-next svg {
   width: 7px;
   transform: rotate(90deg);
 }

 .detail-slider-container .swiper-button-next.swiper-button-disabled,
 .detail-slider-container .swiper-button-prev.swiper-button-disabled {

   cursor: auto;
   pointer-events: none;
 }

 .detail-slider-container .swiper-thumbs .swiper-slide img {
   opacity: .7;
   padding: 0px;

 }

 .detail-slider-container .swiper-thumbs .swiper-slide-thumb-active img {
   border: 0px;
   opacity: 1;

 }

 @media (max-width: 768px) {
   .detail-slider-container {
     flex-direction: column;
     max-height: unset;
   }

   .detail-slider-container .swiper-main {
     width: 100%;
     height: auto;
     aspect-ratio: 16 / 9;
     flex: none;
   }

   .detail-slider-container .swiper-slide img {
     height: auto;
   }

   .detail-slider-container .swiper-thumbs {
     width: 100%;
     max-width: 100%;
     height: auto;
     flex: none;
     order: 1;
     padding: 0px;
     overflow: hidden;
     margin-top: 10px;
     margin-left: 0px;
   }

   .detail-slider-container .swiper-thumbs .swiper-wrapper {
     flex-direction: row !important;
     display: flex;
   }

   .detail-slider-container .swiper-thumbs .swiper-slide {
     width: 100px;
     height: 70px;
     flex-shrink: 0;
   }

   .detail-slider-container .swiper-thumbs .swiper-slide img {
     width: 100%;
     height: 100%;
     object-fit: cover;

   }

   .detail-slider-container .thumbs-navigation .swiper-button-prev,
   .detail-slider-container .thumbs-navigation .swiper-button-next {
     top: 50%;
     transform: translateY(-50%);
     left: 0;
     right: auto;
     width: 30px;
     height: 30px;
   }

   .detail-slider-container .thumbs-navigation .swiper-button-next {
     left: auto;
     right: 0;
   }

   .detail-slider-container .thumbs-navigation .swiper-button-prev svg,
   .detail-slider-container .thumbs-navigation .swiper-button-next svg {
     width: 7px;
     transform: rotate(0);
   }

   .detail-slider-container .swiper-button-next {
     right: 20px;
   }

   .detail-slider-container .swiper-button-prev {
     left: 20px;
   }

   .detail-slider-container {
     width: 100%;
   }

 }
.error-message{
    color: red;
    font-size: 10px;
}
 /**************************************************************PRODUCT DETAIL PAGE  END*********************************************/




     .section-title {
      text-align: center;
      margin-bottom: 40px;
    }
    .section-title span {
      display: inline-block;
      background: #000;
      color: #fff;
      padding: 5px 15px;
      font-size: 14px;
      margin-bottom: 10px;
    }
    .section-title h2 {
      font-size: 28px;
      font-weight: 300;
    }
    .section-title h2 strong {
      font-weight: 700;
    }

    .timeline-carousel .carousel-inner {
      border-radius: 8px;
      overflow: hidden;
      background: #fff;
      box-shadow: 0px 4px 15px rgba(0,0,0,0.1);
    }

    .timeline-carousel .carousel-item img {
      object-fit: cover;
      height: 100%;
      width: 100%;
    }

    .timeline-text {
      padding: 40px;
    }
    .timeline-text h5 {
      background: var(--primary-color);
      color: #fff;
      display: inline-block;
      padding: 5px 10px;
      font-size: 13px;
      margin-bottom: 15px;
    }
    .timeline-text h3 {
      font-weight: 700;
      margin-bottom: 15px;
    }

 
    .timeline-years {
      text-align: center;
      margin-top: 25px;
    }
    .timeline-years span {
      margin: 0 15px;
      font-weight: 500;
      cursor: pointer;
      position: relative;
    }
    .timeline-years span.active {
      color:var(--primary-color);
      font-weight: 700;
    }
	
 

 .timeline-years span.active::after {
      content: '';
      position: absolute;
      bottom: -8px;
      left: 50%;
      transform: translateX(-50%);
      width: 8px;
      height: 8px;
      background: var(--primary-color);
      border-radius: 50%;
    }


.photo-showcase {
  padding: 1.5rem;
}

.photo-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* Max 4 in a row */
  gap: 1rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.photo-item {
  position: relative;
  overflow: hidden;
  border-radius: 10px;
}

.photo-item img {
  width: 100%;
 
  object-fit: cover;
  transition: transform 0.5s ease, filter 0.5s ease;
}

.photo-item:hover img {
  transform: scale(1.1);
  filter: brightness(70%);
}

.photo-label {
  position: absolute;
  font-size: 1.6rem;
  font-weight: bold;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #fff;
  opacity: 0;
  letter-spacing: 2px;
  transition: opacity 0.3s ease;
  text-transform: uppercase;
}

.photo-item:hover .photo-label {
  opacity: 1;
}

/* Responsive adjustments */
@media (max-width: 992px) {
  .photo-grid {
    grid-template-columns: repeat(2, 1fr); /* 2 per row on tablets */
  }
}

@media (max-width: 576px) {
  .photo-grid {
    grid-template-columns: 1fr; /* 1 per row on mobile */
  }
}