:root {
           --primary: #1a5f3f;
           --accent: #d4af37;
           --dark: #0f2a1e;
           --light: #f8f9fa;
           --gray: #e9ecef;
         }

         h2, h5, h3 {
           font-family: 'Playfair Display', serif;
         }


         h2, h5 {
           color: #1a5f3f;
           font-weight: 600;
         }

         html {
           scroll-behavior: smooth;
         }




         /* navbar css  */
.navbar {
    position: sticky;
    top: 0;
    z-index: 9999;
    transition: all 0.3s ease;
}

.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: #00bcd4 !important; */
           color: var(--accent) !important;
         }

         /* Dropdown menu styling */
         .dropdown-menu {
           border-radius: 8px;
           padding: 10px 0;
         }

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

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



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

         /* Footer CSS */
         /* MAIN FOOTER */
         .main-footer {
           background: #195e3e;
           padding: 70px 20px 20px;
           color: #000;
           font-family: "Poppins", sans-serif;
         }

         .footer-container {
           display: grid;
           grid-template-columns: repeat(4, 1fr);
           gap: 40px;
           max-width: 1300px;
           margin: auto;
         }

         .footer-col h2 {
          color: #fff;
           font-size: 22px;
           margin-bottom: 20px;
         }

         .footer-col p {
           line-height: 1.7;
           opacity: 0.8;
         }


         /* USEFUL LINKS */
         .footer-col ul {
           padding: 0;
           list-style: none;
         }

         .footer-col ul li {
           margin-bottom: 10px;
         }

         .footer-col ul li i {
           color: var(--accent);
         }

         .footer-col ul li a {
           color: #fff;
           text-decoration: none;
           transition: .3s;
         }

         .footer-col ul li a:hover {
           color: var(--accent);
         }

         .footer-col .foot-icon {
           background: var(--primary);
           color: var(--accent);
           width: 35px;
           height: 35px;
           border-radius: 50%;
           display: flex;
           justify-content: center;
           align-items: center;
         }

         /* FOOTER BOTTOM */
         .footer-bottom {
           text-align: center;
           margin-top: 40px;
           border-top: 1px solid #333;
           padding-top: 20px;
           opacity: .8;
         }

         .footer-bottom a {
           color: #fff;
           font-weight: bold;
         }

         /* RESPONSIVE */
         @media (max-width: 992px) {
           .footer-container {
             grid-template-columns: repeat(2, 1fr);
           }
         }

         @media (max-width: 600px) {
           .footer-container {
             grid-template-columns: 1fr;
           }
         }

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

         /* main button css  */
         .drive-btn {
           position: relative;
           padding: 18px 30px 18px 80px;
           background: var(--primary);
           color: #fff;
           font-size: 15px;
           border: none;
           border-radius: 50px;
           cursor: pointer;
           display: inline-flex;
           align-items: center;
           overflow: hidden;
           transition: 0.3s;
         }

         /* TEXT */
         .drive-btn .btn-text {
           position: relative;
           z-index: 5;
         }

         /* CAR */
         .drive-btn .car {
           position: absolute;
           left: 20px;
           bottom: 10px;
           font-size: 36px;
           z-index: 8;
           transform: scaleX(-1);
           /* ← THIS FLIPS THE CAR */
           transition: transform 1.2s ease;
         }


         /* CAR SHAKE ON MOVE */
         .drive-btn:hover .car {
           animation: carMove 1.2s ease forwards, shake 0.15s infinite linear;
         }


         /* LEFT → RIGHT CAR MOVEMENT */
         @keyframes carMove {
           from {
             transform: translateX(0) scaleX(-1);
           }

           to {
             transform: translateX(140px) scaleX(-1);
           }
         }


         /* SHAKING EFFECT (rough road) */
         @keyframes shake {
           0% {
             transform: translateY(0px) scaleX(-1);
           }

           25% {
             transform: translateY(-2px) scaleX(-1);
           }

           50% {
             transform: translateY(1px) scaleX(-1);
           }

           75% {
             transform: translateY(-1px) scaleX(-1);
           }

           100% {
             transform: translateY(0px) scaleX(-1);
           }
         }

         /* ROAD */
         .road {
           position: absolute;
           bottom: 4px;
           left: 0;
           width: 200%;
           height: 5px;
           background: repeating-linear-gradient(to right,
               #ffffff 0px,
               #ffffff 30px,
               transparent 30px,
               transparent 60px);
           opacity: 0.4;
           z-index: 3;
         }

         /* ROAD MOVES ON HOVER */
         .drive-btn:hover .road {
           animation: roadMove 0.6s linear infinite;
         }

         @keyframes roadMove {
           from {
             transform: translateX(0);
           }

           to {
             transform: translateX(-60px);
           }
         }

         /* EXHAUST SMOKE (real cloud) */
         .exhaust-smoke {
           position: absolute;
           bottom: 30px;
           left: 15px;
           width: 1px;
           height: 1px;
           z-index: 2;
         }

         .exhaust-smoke::before,
         .exhaust-smoke::after {
           content: "";
           position: absolute;
           width: 12px;
           height: 12px;
           background: rgba(255, 255, 255, 0.85);
           border-radius: 50%;
           opacity: 0;
           filter: blur(3px);
           animation: smokeFlow 1.1s linear infinite;
         }

         .exhaust-smoke::after {
           animation-delay: 0.5s;
         }

         /* SMOKE CLOUD EFFECT */
         @keyframes smokeFlow {
           0% {
             opacity: 1;
             transform: translate(0, 0) scale(0.4);
           }

           40% {
             opacity: .7;
             transform: translate(-10px, -4px) scale(1);
           }

           80% {
             opacity: .3;
             transform: translate(-18px, -10px) scale(1.6);
           }

           100% {
             opacity: 0;
             transform: translate(-26px, -16px) scale(2.1);
           }
         }

         .drive-btn:hover {
           background: var(--accent);
         }

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

         /* secont button css   */
         .second-button {
           border: none;
           display: block;
           position: relative;
           padding: 0.5em 0.7em;
           font-size: 18px;
           background: #fff;
           cursor: pointer;
           user-select: none;
           overflow: hidden;
           color: var(--primary);
           z-index: 1;
           font-family: inherit;
           font-weight: 500;
         }

         .second-button span {
           position: absolute;
           left: 0;
           top: 0;
           width: 100%;
           height: 100%;
           background: #fff;
           z-index: -1;
           border: 2px solid var(--accent);
         }

         .second-button span::before {
           content: "";
           display: block;
           position: absolute;
           width: 8%;
           height: 500%;
           background: var(--lightgray);
           top: 50%;
           left: 50%;
           transform: translate(-50%, -50%) rotate(-60deg);
           transition: all 0.3s;
         }

         .second-button:hover span::before {
           transform: translate(-50%, -50%) rotate(-90deg);
           width: 100%;
           background: var(--primary);
         }

         .second-button:hover {
           color: white;
         }

         /* .second-button:active span::before {
           background: #0b89b0;
         } */

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

         /* Social icons for header and footer  */
         .icons {
           width: 30px;
           height: 30px;
           background: var(--accent);
           border-radius: 50%;
           cursor: pointer;
           outline: none;
           border: none;
           /* z-index: -1; */
           text-align: center;
           margin: 3px;
           box-shadow: 2px 2px 3px #6e6d6dce;

         }

         .icon {
           z-index: 1;
           display: inline-block;
           width: 100%;
           height: 100%;
           text-align: center;
           border-radius: 50%;
           position: relative;
           overflow: hidden;
           border: none;
           outline: none;
           transition: color 0.3s ease;
           color: var(--primary);
           display: flex;
           align-items: center;
           justify-content: center;

         }

         .icon:hover {
           color: #fff;
         }

         .icon::before {
           content: "";
           position: absolute;
           bottom: 0;
           left: 0;
           width: 100%;
           height: 0;
           border-radius: 50%;
           transform: rotateX(360deg);
           transition: height 0.3s ease;
           z-index: -1;
         }

         .icon:hover::before {
           height: 100%;
           z-index: 1;
         }

         .icon:hover {
           box-shadow: 5px 5px 10px #767676ce;
         }

         .icon.tube::before {
           z-index: -1;
           background: red;
         }

         .icon.insta::before {
           z-index: -1;
           background: linear-gradient(40deg, #0000ff, #f56040);
         }

         .icon.link::before {
           z-index: -1;
           background: #0274b3;
         }

         .icon.whats::before {
           z-index: -1;
           background: #25d366;
         }

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

         /* About section   */

         .features {
           list-style: none;
           padding: 0;
           margin: 25px 0;
         }

         .features li {
           /* font-size: 20px; */
           font-weight: 600;
           margin-bottom: 15px;
           display: flex;
           align-items: center;
         }

         .features li span {
           background: var(--primary);
           color: white;
           width: 35px;
           height: 35px;
           border-radius: 50%;
           display: flex;
           justify-content: center;
           align-items: center;
           margin-right: 12px;
           font-size: 18px;
         }

         /* RIGHT SIDE IMAGE */
         .right {
           position: relative;
           display: flex;
           justify-content: center;
         }

         .main-img-box {
           position: relative;
           /* background-color: red; */
         }

         /* Circular Image at Bottom */
         .small-img-container {
           position: absolute;
           bottom: -45px;
           left: -60px;
         }

         .small-img-border {
           background: white;
           padding: 10px;
           border-radius: 50%;
           border: 4px solid var(--accent);
           width: 180px;
           height: 180px;
           display: flex;
           align-items: center;
           justify-content: center;
         }

         .small-img {
           width: 160px;
           height: 160px;
           object-fit: cover;
           border-radius: 50%;
         }

         /* RESPONSIVE */
         @media (max-width: 992px) {
           .content {
             flex-direction: column;
             text-align: center;
           }

           .small-img-container {
             left: 0;
             right: 0;
             margin: auto;
             bottom: -55px;
           }
         }

         @media (max-width: 768px) {
           .small-img {
             width: 90px;
             height: 90px;
           }

           .small-img-border {
             width: 110px;
             height: 110px;
           }

         }

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

         /* Hero-slider Css   */
         .slider-img {
           height: 70vh;
           /* Adjust height here */
           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;
           /* pointer-events: none; IMPORTANT FIX */
         }

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

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

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

         .carousel-control-prev,
         .carousel-control-next {
           z-index: 20 !important;
         }

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

         /* Destination Cards CSS start */
         /* MAIN WRAPPER */
         .destinations-section {
           /* padding: 70px 0; */
           font-family: 'Inter', sans-serif;
         }

         /* CARD */
         .dest-card {
           background: #fff;
           border: 2px solid #ededed;
           border-radius: 22px;
           padding: 15px 15px 25px;
           overflow: hidden;
           position: relative;
           transition: .35s ease;
           cursor: pointer;
         }

         .dest-card:hover {
           border-color: var(--primary);
           box-shadow: 0px 12px 30px rgba(0, 0, 0, 0.12);
         }

         /* IMAGE */
         .dest-img {
           height: 260px;
           overflow: hidden;
           border-radius: 18px;
         }

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

         .dest-card:hover .dest-img img {
           transform: scale(1.1) translateY(-6px);
           filter: brightness(0.9);
         }

         /* TEXT */
         .dest-card .title {
           font-size: 22px;
           font-weight: 700;
           margin-top: 15px;
           transition: .3s;
         }

         .dest-card:hover .title {
           color: var(--primary);
         }

         .dest-card .sub {
           color: #777;
           margin-top: 4px;
         }

         /* ARROW BOX */
         .arrow-box {
           width: 40px;
           height: 40px;
           border: 2px solid var(--primary);
           border-radius: 50%;
           display: flex;
           justify-content: center;
           align-items: center;
           font-size: 18px;
           color: var(--primary);
           position: absolute;
           bottom: 20px;
           right: 20px;
           transition: .3s;
         }

         .dest-card:hover .arrow-box {
           background: var(--primary);
           color: #fff;
           transform: rotate(45deg);
         }

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

         /* Hotel Cards CSS  */

         .hotel-card {
           height: 460px;
           position: relative;
           overflow: hidden;
           border-radius: 16px;
           cursor: pointer;
           transition: 0.4s ease;
           background: #000;
         }

         /* IMAGE */
         .hotel-card img {
           width: 100%;
           height: 100%;
           object-fit: cover;
           transition: 0.6s ease;
         }

         .hotel-card:hover img {
           transform: scale(1.15);
           opacity: 0.85;
           filter: brightness(75%) contrast(1.1);
         }

         /* OVERLAY SMOOTH */
         .hotel-overlay {
           position: absolute;
           left: 0;
           bottom: 0;
           width: 100%;
           height: 55%;
           background: rgba(0, 0, 0, 0.45);
           backdrop-filter: blur(6px);
           color: #fff;

           padding: 22px;
           display: flex;
           flex-direction: column;
           justify-content: flex-end;

           transition: 0.6s ease;
           transform: translateY(35%);
         }

         .hotel-card:hover .hotel-overlay {
           transform: translateY(0%);
         }

         /* TOP CONTENT */
         .overlay-top h3 {
           font-size: 22px;
           margin: 0;
           font-weight: 600;
         }

         .price {
           font-size: 18px;
           margin: 5px 0;
           font-weight: 600;
           color: var(--accent);
         }

         .reviews {
           font-size: 14px;
           opacity: 0.95;
         }

         /* BOTTOM CONTENT ON HOVER */
         .overlay-bottom {
           opacity: 0;
           margin-top: 14px;
           transition: 0.5s ease;
         }

         .hotel-card:hover .overlay-bottom {
           opacity: 1;
           margin-top: 4px;
         }

         /* DESCRIPTION */
         .desc {
           font-size: 14px;
           line-height: 1.4;
           opacity: 0.9;
         }

         /* CARD SHADOW + BORDER */
         .hotel-card:hover {
           box-shadow: 0 12px 35px rgba(0, 0, 0, 0.35);
           border: 2px solid rgba(255, 255, 255, 0.7);
           transform: translateY(-4px);
         }

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


         /* Safari Packages Cards CSS */
         /* SECTION HEAD */

         /* CARD */
         .package-card {
           background: #fff;
           border-radius: 20px;
           overflow: hidden;
           border: 2px solid #eee;
           transition: 0.4s;
         }

         .package-card:hover {
           border-color: var(--primary);
           ;
           box-shadow: 0 15px 40px rgba(0, 0, 0, 0.12);
         }

         /* IMAGE */
         .card-img {
           position: relative;
           overflow: hidden;
         }

         .card-img img {
           width: 100%;
           height: 260px;
           object-fit: cover;
           border-bottom: 1px solid #eee;
           transition: transform 0.5s ease;
         }

         /* IMAGE PUSH BACK */
         .package-card:hover .card-img img {
           transform: scale(1.08);
         }


         /* CATEGORY TAG */
         .category-tag {
           position: absolute;
           top: 12px;
           left: 12px;
           background: #fff;
           color: #000;
           padding: 6px 15px;
           border-radius: 20px;
           font-size: 14px;
           font-weight: 600;
         }

         /* CONTENT */
         .card-content {
           padding: 18px 22px;
         }

         .card-meta {
           color: #666;
           font-size: 14px;
           display: flex;
           justify-content: space-between;
         }

         /* TITLE COLOR CHANGE */
         .package-card:hover h5 {
           color: var(--primary);
         }


         /* FOOTER */
         .card-footer {
           display: flex;
           justify-content: space-between;
           align-items: center;
           margin-top: 12px;
         }

         @media (max-width: 600px) {
           .card-img img {
             height: 220px;
           }
         }

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