:root {
           --primary: #000;
           --accent: #8f6d49;
           --dark: #000;
           --light: #fff;
           --gray: #fbfbfb;
         }

         h2, h5, h3 {
           font-family: "Roboto", sans-serif;
         }


         h2, h5 {
           color: var(--dark);
           font-weight: 600;
         }

         html {
           scroll-behavior: smooth;
         }

         /* main heading dark css  */
         .main-heading {
           line-height: 1.2;
           margin-bottom: 25px;
           color: var(--dark);
         }

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

         /* main heading outline white text  */

         .main-heading-light {
           line-height: 1.2;
           margin-bottom: 25px;
           color: var(--light);
         }

         .main-heading-light h2 {
           color: var(--light);
         }

         .main-heading-light p {
           color: var(--light);
         }

         /* ---------------------------------- */
         /* ---------------------------------- */

         /* short top heading css  */
         .banner-title {
           display: flex;
           align-items: center;
           gap: 12px;
           color: #fff;
           font-family: Arial, sans-serif;
         }

         .banner-title .line {
           width: 80px;
           height: 2px;
           background: var(--light)
         }

         .banner-title .dot {
           width: 12px;
           height: 12px;
           background: var(--light);
           border-radius: 50%;
         }

         /* outline text heading  */
         .bg-text {
           font-size: 50px;
           font-weight: 700;
           white-space: nowrap;
           color: transparent;
           -webkit-text-stroke: 1.5px #000;
           /* opacity: .20; */
         }

         .bg-text-light {
           font-size: 50px;
           font-weight: 700;
           white-space: nowrap;
           /* color: #fff; */
           -webkit-text-stroke: 1.5px #fff;
           /* opacity: .20; */
         }

         @media (max-width: 768px) {
           .bg-text {
             font-size: 40px !important;
             font-weight: 700;
             white-space: nowrap;
             color: transparent;
             -webkit-text-stroke: 1.5px #000;
             /* opacity: .20; */
           }
         }

         /* ---------------------------------------- */
         /* ---------------------------------------- */

         /* navbar css  */
         .top-bar {
           background-color: var(--dark);
         }

         .fix-nav {
           position: absolute;
           width: 100%;
           z-index: 99999;
         }

         .navbar {
           z-index: 9999;
           transition: all 0.3s ease;
           background-color: #fff;
         }

         .navbar.scrolled {
           box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
           padding-top: 5px !important;
           padding-bottom: 5px !important;
         }

         /* Hover dropdown show */
         .nav-item.dropdown:hover .dropdown-menu {
           display: block;
           margin-top: 0;
         }

         /* Smooth fade animation */
         .fade-menu {
           animation: fadeIn 0.25s ease-in-out;
         }

         @keyframes fadeIn {
           from {
             opacity: 0;
             transform: translateY(10px);
           }

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

         /* Menu spacing */
         .nav-link {
           padding: 10px 18px !important;
           color: #000 !important;
         }

         /* Active hover effect */
         /* .nav-link:hover {
           color: var(--accent) !important;
         } */
         /* Dropdown menu styling */
         .dropdown-menu {
           border-radius: 8px;
           padding: 10px 0;
         }

         /* Default dropdown item */
         .dropdown-menu .dropdown-item {
           transition: all 0.3s ease;
           font-weight: 500;
         }

         /* Hover effect */
         .dropdown-menu .dropdown-item:hover {
           background-color: var(--dark);
           color: var(--light);
         }

         /* Active / focus */
         .dropdown-menu .dropdown-item:focus,
         .dropdown-menu .dropdown-item.active {
           background-color: var(--light);
           color: var(--dark);
         }

         /* ============================================ */
         /* ============================================ */

         /* heading section for all  */
         .section-header {
           display: flex;
           justify-content: space-between;
           align-items: center;
           flex-wrap: wrap;
           text-align: left;
         }

         /* =============================================== */
         /* =============================================== */

         /* Footer CSS */
         .footer-box ul li a {
           color: #aaa;
           text-decoration: none;
           transition: .3s;
         }

         .footer-box ul li a:hover {
           color: #fff;
           padding-left: 15px;
         }

         /* BOTTOM */
         .footer-bottom {
           text-align: center;
           color: #777;
         }

         /* ====================================================== */
         /* ====================================================== */

         /* main button css  */
         /* .button1 {
           background-color: transparent;
           border: 2px solid var(--dark);
           border-radius: 0;
           box-sizing: border-box;
           color: #fff;
           cursor: pointer;
           display: inline-block;
           font-weight: 700;
           letter-spacing: 0.05em;
           margin: 0;
           outline: none;
           overflow: visible;
           padding: 1.25em 2em;
           position: relative;
           text-align: center;
           text-decoration: none;
           text-transform: none;
           transition: all 0.3s ease-in-out;
           user-select: none;
           font-size: 13px;
         }

         .button1::before {
           content: " ";
           width: 1.5625rem;
           height: 2px;
           background: var(--dark);
           top: 50%;
           left: 1.5em;
           position: absolute;
           transform: translateY(-50%);
           transform-origin: center;
           transition: background 0.3s linear, width 0.3s linear;
         }

         .button1 .text {
           font-size: 1.125em;
           line-height: 1.33333em;
           padding-left: 2em;
           display: block;
           text-align: left;
           transition: all 0.3s ease-in-out;
           text-transform: uppercase;
           text-decoration: none;
           color: var(--dark);
         }

         .button1 .top-key {
           height: 2px;
           width: 1.5625rem;
           top: -2px;
           left: 0.625rem;
           position: absolute;
           background: #e8e8e8;
           transition: width 0.5s ease-out, left 0.3s ease-out;
         }

         .button1 .bottom-key-1 {
           height: 2px;
           width: 1.5625rem;
           right: 1.875rem;
           bottom: -2px;
           position: absolute;
           background: #e8e8e8;
           transition: width 0.5s ease-out, right 0.3s ease-out;
         }

         .button1 .bottom-key-2 {
           height: 2px;
           width: 0.625rem;
           right: 0.625rem;
           bottom: -2px;
           position: absolute;
           background: #e8e8e8;
           transition: width 0.5s ease-out, right 0.3s ease-out;
         }

         .button1:hover {
           color: white;
           background: black;
         }

         .button1:hover::before {
           width: 0.9375rem;
           background: white;
         }

         .button1:hover .text {
           color: white;
           padding-left: 1.5em;
         }

         .button1:hover .top-key {
           left: -2px;
           width: 0px;
         }

         .button1:hover .bottom-key-1,
         .button1:hover .bottom-key-2 {
           right: 0;
           width: 0;
         } */

         /* From Uiverse.io by mrhyddenn */
         .button1 {
           position: relative;
           background: #fff;
           border: 2px solid #000;
           padding: 10px 22px;
           display: inline-block;
           font-size: 15px;
           font-weight: 600;
           text-transform: uppercase;
           cursor: pointer;
           text-decoration: none;
           color: #000;
           border-radius: 10px;
           /* 👈 curve corners */
           overflow: hidden;
           /* 👈 hover fill control */
           transition: color 0.3s ease;
         }

         .button1 span {
           position: relative;
           z-index: 2;
         }

         /* Hover fill layer */
         .button1::before {
           content: '';
           position: absolute;
           inset: 0;
           background: rgb(20, 20, 20);
           transform: scaleX(0);
           transform-origin: left;
           transition: transform 0.5s ease;
           z-index: 1;
         }

         .button1:hover {
           color: #fff;
         }

         .button1:hover::before {
           transform: scaleX(1);
         }


         /* -=============================== */
         /* ================================ */


         .button2 {
           position: relative;
           background: transparent;
           border: 2px solid #fff;
           padding: 10px 22px;
           display: inline-block;
           font-size: 15px;
           font-weight: 600;
           text-transform: uppercase;
           cursor: pointer;
           text-decoration: none;
           color: #fff;
           border-radius: 10px;
           /* 👈 curve corners */
           overflow: hidden;
           /* 👈 hover fill control */
           transition: color 0.3s ease;
         }

         .button2 span {
           position: relative;
           z-index: 2;
         }

         /* Hover fill layer */
         .button2::before {
           content: '';
           position: absolute;
           inset: 0;
           /* background: rgb(20, 20, 20); */
           background: #fff;
           transform: scaleX(0);
           transform-origin: left;
           transition: transform 0.5s ease;
           z-index: 1;
         }

         .button2:hover {
           color: #000;
         }

         .button2:hover::before {
           transform: scaleX(1);
         }

         /* button 2 css  */
         /* .button2 {
           background-color: transparent;
           border: 2px solid var(--light);
           border-radius: 0;
           box-sizing: border-box;
           color: #fff;
           cursor: pointer;
           display: inline-block;
           font-weight: 700;
           letter-spacing: 0.05em;
           margin: 0;
           outline: none;
           overflow: visible;
           padding: 1.25em 2em;
           position: relative;
           text-align: center;
           text-decoration: none;
           text-transform: none;
           transition: all 0.3s ease-in-out;
           user-select: none;
           font-size: 13px;
         }

         .button2::before {
           content: " ";
           width: 1.5625rem;
           height: 2px;
           background: var(--light);
           top: 50%;
           left: 1.5em;
           position: absolute;
           transform: translateY(-50%);
           transform-origin: center;
           transition: background 0.3s linear, width 0.3s linear;
         }

         .button2 .text {
           font-size: 1.125em;
           line-height: 1.33333em;
           padding-left: 2em;
           display: block;
           text-align: left;
           transition: all 0.3s ease-in-out;
           text-transform: uppercase;
           text-decoration: none;
           color: var(--light);
         }

         .button2 .top-key {
           height: 2px;
           width: 1.5625rem;
           top: -2px;
           left: 0.625rem;
           position: absolute;
           background: var(--dark);
           transition: width 0.5s ease-out, left 0.3s ease-out;
         }

         .button2 .bottom-key-1 {
           height: 2px;
           width: 1.5625rem;
           right: 1.875rem;
           bottom: -2px;
           position: absolute;
           background: var(--dark);
           transition: width 0.5s ease-out, right 0.3s ease-out;
         }

         .button2 .bottom-key-2 {
           height: 2px;
           width: 0.625rem;
           right: 0.625rem;
           bottom: -2px;
           position: absolute;
           background: var(--dark);
           transition: width 0.5s ease-out, right 0.3s ease-out;
         }

         .button2:hover {
           color: var(--dark);
           background: var(--light);
         }

         .button2:hover::before {
           width: 0.9375rem;
           background: var(--dark);
         }

         .button2:hover .text {
           color: var(--dark);
           padding-left: 1.5em;
         }

         .button2:hover .top-key {
           left: -2px;
           width: 0px;
         }

         .button2:hover .bottom-key-1,
         .button2:hover .bottom-key-2 {
           right: 0;
           width: 0;
         } */

         /* ======================================================= */
         /* ======================================================= */

         /* Social icons for header and footer  */
       .icons {
    width: 30px;
    height: 30px;
    background: #fff;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 2px 2px 3px #6e6d6dce;
    position: relative;
    overflow: hidden;
}

.icons::before {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 0%;
    background: var(--dark); /* fill color */
    transition: height 0.4s ease;
    z-index: 0;
}

.icons i {
    color: var(--dark);
    font-size: 14px;
    position: relative;
    z-index: 1;
    transition: color 0.4s ease;
}

/* Hover Effect */
.icons:hover::before {
    height: 100%;
}

.icons:hover i {
    color: #fff;
}


         /* ================================================== */
         /* ================================================== */

         /* About section css  */

         .about-section {
           background: #fbfbfb;
         }

         /* .about-section .call .icon {
           width: 54px;
           height: 54px;
           background: var(--dark);
           color: #fff;
           border-radius: 50%;
           display: flex;
           align-items: center;
           justify-content: center
         } */

         .about-section .call .icon {
    width: 54px;
    height: 54px;
    background: var(--dark);
    color: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    animation: shake 1.5s infinite;
}

/* Phone icon rotation */
.about-section .call .icon i {
    font-size: 22px;
    animation: ring 1.5s infinite;
}

/* Ripple / vibration waves */
.about-section .call .icon::before,
.about-section .call .icon::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: var(--dark);
    opacity: 0.6;
    animation: pulse 1.5s infinite;
    z-index: -1;
}

.about-section .call .icon::after {
    animation-delay: 0.5s;
}

/* 🔔 Keyframes */

@keyframes ring {
    0% { transform: rotate(0); }
    5% { transform: rotate(15deg); }
    10% { transform: rotate(-15deg); }
    15% { transform: rotate(10deg); }
    20% { transform: rotate(-10deg); }
    25% { transform: rotate(0); }
    100% { transform: rotate(0); }
}

@keyframes shake {
    0% { transform: translateX(0); }
    25% { transform: translateX(-1px); }
    50% { transform: translateX(1px); }
    75% { transform: translateX(-1px); }
    100% { transform: translateX(0); }
}

@keyframes pulse {
    0% {
        transform: scale(1);
        opacity: 0.6;
    }
    100% {
        transform: scale(1.8);
        opacity: 0;
    }
}








         .about-section .about-img {
           position: relative;
           height: 520px
         }

         .about-section .about-img img {
           width: 85%;
           height: 100%;
           object-fit: cover;
           position: relative;
           z-index: 2
         }

         .about-section .about-img::before {
           content: "";
           position: absolute;
           right: 6%;
           top: -52px;
           width: 55%;
           height: 110%;
           background: #1e1e1e
         }

         .about-section .testimonial {
           position: absolute;
           bottom: -10%;
           left: -10%;
           width: 65%;
           z-index: 9999;
           background: #1f1f1f;
           color: #fff;
           padding: 30px;
           border-left: 4px solid #9c744a
         }

         .signature img {
           height: 50px;
           width: 50px;
           border-radius: 100%;
           background: var(--light);
         }

         @media(max-width:991px) {
           .about-section .about-img {
             height: 360px
           }

           .about-section .about-img img,
           .testimonial {
             width: 100%
           }

           .about-section .about-img::before {
             display: none
           }
         }


         /* =============================================== */
         /* =============================================== */

         /* Hero-slider Css   */
         .slider-img {
           height: 70vh;
           object-fit: cover;
         }

         .carousel-overlay {
           position: absolute;
           top: 0;
           left: 0;
           width: 100%;
           height: 100%;
           background: rgba(0, 0, 0, 0.25);
           display: flex;
           align-items: center;
           justify-content: center;
           text-align: center;
           z-index: 5;
         }

         .carousel-overlay h1 {
           color: #fff;
           font-size: 40px;
           font-weight: bold;
         }

         .breadcrumb-text {
           color: #fff;
           font-size: 18px;
         }

         .breadcrumb-text a {
           color: #fff;
         }

         /* =============================================== */
         /* =============================================== */

         /* Services Cards CSS start */
         .dest-card {
           border-radius: 22px;
           overflow: hidden;
           position: relative;
           height: 100%;
           transition: .35s ease;
         }

         .dest-card a {
           display: block;
           height: 100%;
           text-decoration: none;
           color: #fff;
         }

         /* IMAGE FULL CARD */
         .dest-img {
           position: absolute;
           inset: 0;
         }

         .dest-img img {
           width: 100%;
           height: 100%;
           object-fit: cover;
           transition: .5s ease;
         }

         /* GRADIENT OVERLAY */
         .dest-img .overlay {
           position: absolute;
           inset: 0;
           background: linear-gradient(to bottom,
               rgba(0, 0, 0, 0.2) 0%,
               rgba(0, 0, 0, 0.85) 80%);
           z-index: 1;
         }

         /* CONTENT ON TOP */
         .card-content {
           position: relative;
           z-index: 2;
           padding: 22px;
           height: 100%;
           display: flex;
           flex-direction: column;
           justify-content: flex-end;
         }

         /* TEXT */
         .card-content .title {
           font-size: 22px;
           font-weight: 700;
           margin-bottom: 6px;
         }

         .card-content .sub {
           font-size: 14px;
           color: #ddd;
           line-height: 22px;
         }

         /* HOVER EFFECT */
         .dest-card:hover img {
           transform: scale(1.08);
           filter: brightness(0.9);
         }

         .dest-card:hover {
           box-shadow: 0px 15px 35px rgba(0, 0, 0, 0.35);
         }

         /* RESPONSIVE IMAGE HEIGHT */
         .dest-card {
           min-height: 360px;
         }

         @media (max-width: 768px) {
           .dest-card {
             min-height: 300px;
           }
         }

         /* =============================================== */
         /* =============================================== */


         /* mission / vision css  */

         /* CTA BOX */
         .cta-box {
           background: #ffffff;
           border-radius: 30px;
           padding: 40px;
           /* margin-top: 50px; */
           display: flex;
           justify-content: space-between;
           align-items: center;
           flex-wrap: wrap;
         }

         /* =============================================== */
         /* =============================================== */

         /* marque css  */

         /* ================================================== */
         /* ================================================== */


         /* testimonial css  */
         /* Section with moving background */
         /* SECTION */
         .testimonial-section {
           position: relative;
           padding: 80px 0;
           background-attachment: fixed;
           overflow: hidden;
         }

         /* Overlay */
         .testimonial-section::before {
           content: "";
           position: absolute;
           inset: 0;
           background: rgba(43, 44, 44, 0.45);
           z-index: 1;
         }

         /* Content above overlay */
         .testimonial-section .container {
           position: relative;
           z-index: 2;
         }

         /* CARD */
         .testimonial-card.style-image {
           display: flex;
           gap: 25px;
           background: var(--gray);
           border-radius: 28px;
           padding: 25px;
           height: 100%;
           align-items: center;
         }

         /* IMAGE */
         .tc-image {
           flex: 0 0 40%;
           height: 230px;
           border-radius: 22px;
           overflow: hidden;
         }

         .tc-image img {
           width: 100%;
           height: 100%;
           object-fit: cover;
         }

         /* CONTENT */
         .tc-content {
           flex: 1;
         }

         .tc-content .quote {
           font-size: 30px;
           color: var(--dark);
           font-weight: 700;
         }

         .tc-content .author {
           font-size: 15px;
           color: var(--dark);
           font-weight: 500;
         }

         /* SWIPER DOTS */
         .swiper-pagination-bullet {
           background: var(--dark) !important;
           opacity: .4;
         }

         .swiper-pagination-bullet-active {
           opacity: 1;
         }

         /* RESPONSIVE */
         @media (max-width: 768px) {
           .testimonial-card.style-image {
             flex-direction: column;
           }

           .tc-image {
             width: 100%;
             height: 200px;
           }

           .tc-content .quote {
             font-size: 55px;
           }

           .bg-text {
             font-size: 60px;
           }
         }


         /* =============================================== */
         /* =============================================== */

         /* popup form css  */
         .popup-form {
           display: none;
           position: fixed;
           top: 0;
           left: 0;
           width: 100%;
           height: 100%;
           background: rgba(0, 0, 0, 0.7);
           z-index: 99999;
         }

         .popup-content {
           background: var(--gray);
           padding: 30px;
           border-radius: 10px;
           width: 90%;
           max-width: 500px;
           position: fixed;
           top: 50%;
           left: 50%;
           transform: translate(-50%, -50%);
           animation: popupZoom 0.3s ease;
           color: #fff;
         }

         .popup-content h2 {
           font-family: 'Playfair Display', serif;
         }

         .popup-content label {
           display: block;
           margin-top: 5px;
           margin-bottom: 5px;
           font-size: 14px;
           font-weight: 500;
           color: var(--dark);
         }

         .popup-content input,
         .popup-content select,
         .popup-content textarea {
           width: 100%;
           padding: 7px;
           border: none;
           border-radius: 5px;
           margin-bottom: 2px;
           font-size: 14px;
         }

         .popup-content textarea {
           resize: none;
         }

         

         


         /* Animation */
         @keyframes popupZoom {
           0% {
             transform: translate(-50%, -50%) scale(0.5);
             opacity: 0;
           }

           100% {
             transform: translate(-50%, -50%) scale(1);
             opacity: 1;
           }
         }

         /* =======================================================/ */
         /* ======================================================= */

         /* blogs css  */
         .blog-card {
           background: #fff;
         }

         .blog-img {
           position: relative;
           overflow: hidden;
         }

         /* Image */
         .blog-img img {
           width: 100%;
           height: 280px;
           object-fit: cover;
           /* IMPORTANT */
           transform: scale(1);
           transition: transform 0.9s cubic-bezier(.34, 1.56, .64, 1);
         }

         /* Hover effect */
         .blog-card:hover .blog-img img {
           transform: scaleX(1.12) scaleY(1.05);
         }

         /* Date badge */
         .date-box {
           position: absolute;
           top: 20px;
           left: 20px;
           background: #000;
           color: #fff;
           padding: 12px 16px;
           text-align: center;
         }

         .date-box h3 {
           font-size: 22px;
           margin: 0;
           font-weight: 700;
         }

         .date-box span {
           font-size: 14px;
         }

         /* Content */
         .blog-content {
           padding-top: 25px;
         }

         .blog-content h4 {
           font-size: 20px;
           font-weight: 600;
           margin-bottom: 12px;
         }

         .blog-content p {
           font-size: 15px;
           color: #666;
           line-height: 1.6;
         }

         /* Footer */
         .blog-footer {
           display: flex;
           align-items: center;
           justify-content: space-between;
           margin-top: 25px;
         }

         .blog-footer .line {
           width: 45%;
           height: 2px;
           background: #000;
         }

         /* Read more */
         .read-more {
           display: flex;
           align-items: center;
           gap: 12px;
           color: #000;
           font-weight: 500;
           text-decoration: none;
         }

         .read-more .arrow {
           width: 45px;
           height: 45px;
           background: #e5e7df;
           display: flex;
           align-items: center;
           justify-content: center;
           font-size: 18px;
           transition: .3s;
         }

         /* ======================================= */
         /* ======================================= */

         /* Why us section css */
         .why-choose-section {
           background: var(--gray);
           font-family: 'Inter', sans-serif;
         }

         /* IMAGE BOX */
         .image-box {
           position: relative;
           margin-top: 35px;
           border-radius: 22px;
           overflow: hidden;
         }

         .image-box img {
           width: 100%;
           height: auto;
           border-radius: 22px;
         }

         /* EXPERIENCE BADGE */
         .experience-badge {
           position: absolute;
           bottom: 20px;
           right: 20px;
           background: var(--dark);
           color: #fff;
           padding: 18px 22px;
           border-radius: 14px;
           text-align: center;
         }

         .experience-badge h3 {
           margin: 0;
           font-size: 34px;
           font-weight: 700;
         }

         .experience-badge span {
           font-size: 14px;
         }

         /* FEATURE CARD */
         .feature-card {
           background: #fff;
           border-radius: 20px;
           padding: 28px;
           height: 100%;
           border: 1px solid #eee;
           transition: .35s ease;
         }

         .feature-card i {
           font-size: 32px;
           color: var(--dark);
           margin-bottom: 15px;
           display: inline-block;
         }

         .feature-card h5 {
           font-size: 18px;
           color: var(--dark);
           font-weight: 600;
           margin-bottom: 10px;
         }

         .feature-card:hover {
           transform: translateY(-6px);
           box-shadow: 0 15px 40px rgba(0, 0, 0, 0.08);
         }

         /* RESPONSIVE */
         @media (max-width: 768px) {
           .experience-badge {
             right: 15px;
             bottom: 15px;
           }
         }


         /* --============================================= */
         /* =============================================== */