@import url('https://fonts.googleapis.com/css2?family=Lobster+Two:ital,wght@0,400;0,700;1,400;1,700&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

/* ====== Global Styles ====== */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Poppins', sans-serif;
    scroll-behavior: smooth;
}

body {
    background: url();
    /* TODO: Add background image if needed */
}

/* ====== Navigation Bar ====== */
.nav {
    /* Main navigation container */
    width: 100%;
    height: 60px;
    display: flex;
    justify-content: space-around;
    align-items: center;
    position: absolute;
    z-index: 1000;
    background-color: #00000013;
}

.logo h1 {
    /* Logo text styling */
    color: white;
    font-size: 25px;
    font-weight: 600;
    font-family: 'Poppins', sans-serif;
    letter-spacing: 1px;
}

.logo h1 span {
    /* Highlighted part of logo */
    color: rgb(255, 208, 0);
}

.nav-ul {
    /* Navigation links container */
    list-style: none;
    display: flex;
    gap: 40px;
    height: 100%;
    justify-content: center;
    align-items: center;
}

.hamburger-nav {
    /* Hamburger menu for mobile */
    display: none;
}

.hamburger-nav:active {
    transform: scale(.9);
}

.nav-links {
    /* Individual nav link styling */
    font-size: 16px;
    font-weight: 400;
    color: #ffffff;
    text-decoration: none;
    text-transform: uppercase;
    position: relative;
}

.nav-links::before {
    /* Underline effect on hover */
    content: '';
    position: absolute;
    width: 0;
    height: 2px;
    background-color: rgb(255, 208, 0);
    transition: width 0.5s ease-in-out;
    bottom: -1px;
    border-radius: 30px;
}

.nav-links:hover::before {
    width: 100%;
}

.mobile-dropdown {
    /* Dropdown for mobile nav */
    display: none;
}

.dropdown-menu-custom {
    /* Custom dropdown menu styling */
    background-color: transparent !important;
    backdrop-filter: blur(8px);
    /* Glass effect */
    border: none;
    border: 5px solid rgba(0, 0, 0, 0.13);
}

.dropdown-menu-custom .dropdown-item {
    color: white;
}

.dropdown-menu-custom .dropdown-item:hover {
    background-color: rgb(255, 208, 0, 0.4);
}

/* ====== Hero Section ====== */
.hero {
    /* Main hero section */
    width: 100%;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    background-size: cover;
    background-position: center;
    transition: all 2s linear;
}


.image-gradient {
    /* Gradient overlay for hero image */
    position: absolute;
    width: 100%;
    height: 100%;
    background: linear-gradient(to top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.877) 100%);
    top: 0;
    left: 0;
}

.hero-text {
    /* Hero text container */
    position: relative;
    color: #ffffffe5;
    text-align: center;
    text-transform: uppercase;
    width: 100%;
    height: 100%;
    margin-top: 500px;
}

.hero-text span {
    color: rgb(255, 208, 0);
}

.hero-text h1 {
    /* Main hero heading */
    font-size: 40px;
    font-weight: 700;
    margin-bottom: 20px;
    animation: textEffect 2s ease-in-out 1;
}


.hero-text h2 {
    /* Subheading in hero */
    font-size: 30px;
    font-weight: 500;
    margin-bottom: 20px;
    animation: textEffect 2s ease-in-out 1;
}

@keyframes textEffect {

    /* Animation for hero text */
    0% {
        opacity: 0;
        letter-spacing: 2px;
    }

    100% {
        opacity: 1;
        letter-spacing: 0px;
    }
}

.arrow-down {
    /* Animated arrow in hero */
    animation: bounce 2s infinite;
    position: absolute;
    top: 80%;
    left: 90%;
    opacity: 0.5;
}

@keyframes bounce {

    /* Arrow bounce animation */
    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(10px);
    }
}

/* ====== Top Places Section ====== */
.top-places {
    width: 100%;
    height: 70vh;
    margin-bottom: 100px;
}

.top-places h1 {
    /* Section heading */
    text-align: center;
    padding: 6px;
    font-size: 40px;
    color: rgb(0, 0, 0);
    font-weight: 500;
    filter: drop-shadow(0px 0px 2px rgb(0, 0, 0));
    background-color: rgb(255, 208, 0);
    width: 100%;
    position: relative;
    text-transform: capitalize;
}

.top-places-cards {
    /* Cards container */
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: space-evenly;
    align-items: center;
}

.top-places-card {
    /* Individual card */
    width: 20%;
    height: 250px;
    background-color: black;
    border-radius: 5px;
    position: relative;
    overflow: hidden;
    box-shadow: 1px 2px 5px rgba(0, 0, 0, 0.38);
}

/* Background images for each card */
.top-places-card1 {
    background-image: url('../MEDIA/PAKISTAN/arang\ kel\ 2.jpg');
    background-size: cover;
    background-position: center;
}

.top-places-card2 {
    background-image: url('../MEDIA/DUBAI/miracle\ garden\ 1.jpg');
    background-size: cover;
    background-position: center;
}

.top-places-card3 {
    background-image: url('../MEDIA/ITALY/venice\ 2.jpg');
    background-size: cover;
    background-position: bottom;
}

.top-places-card4 {
    background-image: url('../MEDIA/TURKEY/cappadocia.jpg');
    background-size: cover;
    background-position: center;
}

.top-places-names {
    /* Overlay with place name and description */
    position: absolute;
    width: 100%;
    height: 40%;
    background-color: rgba(0, 0, 0, 0.336);
    bottom: -40%;
    backdrop-filter: blur(3px);
    transition: all .3s ease-in-out;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

.top-places-names h2 {
    font-size: 15px;
    font-weight: bold;
    color: white;
}

.top-places-names p {
    font-size: 15px;
    font-weight: 500;
    color: rgb(255, 208, 0);
}

.top-places-card:hover .top-places-names {
    /* Show overlay on hover */
    bottom: 0;
}

/* ====== Top Categories Section ====== */
.top-categories {
    width: 100%;
    height: 70vh;
    margin-top: 50px;
}

.top-categories h1 {
    /* Section heading */
    text-align: center;
    padding: 6px;
    font-size: 40px;
    color: rgb(0, 0, 0);
    font-weight: 500;
    filter: drop-shadow(0px 0px 2px rgb(0, 0, 0));
    background-color: rgb(255, 208, 0);
    width: 100%;
    text-transform: capitalize;
}

.categories-cards {
    /* Cards container */
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: space-evenly;
    align-items: center;
}

.cat-card {
    /* Individual category card */
    width: 250px;
    height: 300px;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.781);
    position: relative;
}

/* Background images and animation for each category card */
.card1 {
    background-image: url(../MEDIA/RANDOM\ NATURE/adventure-trips.jpg);
    background-size: cover;
    background-position: bottom;
    animation: move 2s linear 0s infinite alternate;
}

.card2 {
    background-image: url(../MEDIA/RANDOM\ NATURE/family.jpg);
    background-size: cover;
    background-position: center;
    animation: move 2s linear 1s infinite alternate;
}

.card3 {
    background-image: url(../MEDIA/RANDOM\ NATURE/luxury.jpg);
    background-size: cover;
    background-position: center;
    animation: move 2s linear 2s infinite alternate;
}

.card4 {
    background-image: url(../MEDIA/RANDOM\ NATURE/honeymoon.jpg);
    background-size: cover;
    background-position: bottom;
    animation: move 2s linear 3s infinite alternate;
}

.card5 {
    background-image: url(../MEDIA/RANDOM\ NATURE/historical.jpg);
    background-size: cover;
    background-position: center;
    animation: move 2s linear 4s infinite alternate;
}

@keyframes move {

    /* Floating animation for cards */
    from {
        transform: translateY(0px);
    }

    to {
        transform: translateY(10px);
    }
}

.cat-image-gradient {
    /* Gradient overlay for category card */
    position: absolute;
    width: 100%;
    height: 100%;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.76), rgba(0, 0, 0, 0) 100%), rgba(0, 0, 0, 0);
    top: 0;
    left: 0;
}

.cat-card-content {
    /* Text overlay at bottom of card */
    text-align: center;
    position: absolute;
    bottom: 0;
    width: 100%;
    background-color: rgba(0, 0, 0, 0.322);
}

.cat-card-content h2 {
    color: white;
    font-size: 16px;
    filter: drop-shadow(0px 0px 2px rgba(255, 255, 255, 0.367));
    letter-spacing: 1px;
}

/* ====== Why Choose Us Section ====== */
.why-choose {
    width: 100%;
    height: 70vh;
}

.why-choose h1 {
    /* Section heading */
    text-align: center;
    font-size: 40px;
    color: rgb(0, 0, 0);
    font-weight: 500;
    background-color: rgb(255, 208, 0);
    filter: drop-shadow(0px 0px 2px rgb(0, 0, 0));
    text-transform: capitalize;
}

.why-choose-ctn {
    /* Container for image and text */
    margin-top: 50px;
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.why-choose-img {
    /* Image container */
    width: 45%;
    height: 95%;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0px 0px 12px black;
}

.why-choose-img img {
    width: 100%;
    height: 100%;
}

.why-choose-text {
    /* Text container */
    width: 45%;
    height: 100%;
}

.why-choose-text ul li {
    font-size: 20px;
    margin-top: 20px;
    list-style: none;
}

/* ====== Testimonials Section ====== */
.testimonials {
    width: 100%;
    background-color: #f9f9f9;
    margin-top: 200px;
    margin-bottom: 50px;
}

.testimonials h1 {
    /* Section heading */
    text-align: center;
    font-size: 40px;
    color: #000000;
    font-weight: 600;
    margin-bottom: 60px;
    filter: drop-shadow(0px 0px 2px rgb(0, 0, 0));
    background-color: rgb(255, 208, 0);
    width: 100%;
    text-transform: capitalize;
}

.testimonials-cards {
    /* Cards container */
    display: flex;
    justify-content: center;
    align-items: flex-start;
    gap: 40px;
    flex-wrap: wrap;
}

.testimonial-card {
    /* Individual testimonial card */
    width: 400px;
    background-color: rgb(255, 255, 255);
    border-radius: 20px;
    box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.5);
    position: relative;
    padding-top: 60px;
    text-align: center;
    transition: transform 0.3s ease;
}

.testimonial-card:hover {
    /* Card hover effect */
    transform: translateY(-5px);
}

.customer-pic {
    /* Customer image styling */
    width: 100px;
    height: 100px;
    border-radius: 50%;
    position: absolute;
    top: -50px;
    left: calc(50% - 50px);
    overflow: hidden;
    border: 5px solid white;
    box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.3);
}

.customer-pic img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.testimonial-content {
    /* Testimonial text container */
    padding: 20px;
}

.testimonial-content p {
    font-size: 15px;
    color: rgb(0, 0, 0);
    margin-bottom: 20px;
    line-height: 1.6;
}

.testimonial-content h2 {
    font-size: 16px;
    color: rgb(0, 0, 0);
    font-weight: 600;
}

/* ====== Footer Section ====== */
.site-footer {
    background-color: #111;
    color: #fff;
    padding: 40px 20px;
    font-size: 14px;
    /* margin-top: 100px; */
}

.footer-container {
    /* Footer layout */
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    max-width: 1200px;
    margin: auto;
}

.footer-about,
.footer-links,
.footer-pages,
.footer-social {
    /* Footer columns */
    flex: 1 1 200px;
    margin: 20px;
}

.footer-about h3 {
    font-size: 22px;
    margin-bottom: 10px;
    color: rgb(255, 208, 0);
}

.footer-links h4,
.footer-pages h4,
.footer-social h4 {
    color: rgb(255, 208, 0);
    margin-bottom: 15px;
    font-size: 16px;
}

.footer-links ul,
.footer-pages ul {
    list-style: none;
    padding: 0;
}

.footer-links li,
.footer-pages li {
    margin-bottom: 10px;
}

.footer-links a,
.footer-pages a {
    text-decoration: none;
    color: #ccc;
    transition: color 0.3s ease;
}

.footer-links a:hover,
.footer-pages a:hover {
    color: white;
}

.social-icons a {
    color: #ccc;
    font-size: 18px;
    margin-right: 10px;
    transition: color 0.3s ease;
}

.social-icons a:hover {
    color: orange;
}

.footer-bottom-text {
    text-align: center;
    margin-top: 20px;
    color: #999;
}

.contact-hero {
    /* Main hero section */
    width: 100%;
    height: 120vh;
    display: flex;
    justify-content: center;
    align-items: center;
    background-image: url('../MEDIA/RANDOM\ NATURE/hero 1.jpg');
    background-size: cover;
    background-position: center;
}

.contact-hero-text {
    /* Hero text container */
    position: relative;
    color: #ffffffe5;
    text-align: center;
    text-transform: uppercase;
    width: 100%;
    height: 100%;
    margin-top: 150px;
    padding: 10px;
}

.contact-hero-text h1 {
    /* Main hero heading */
    font-size: 26px;
    font-weight: 700;
}

.contact-ctn {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    display: flex;
    justify-content: center;
    align-items: center;
}

.contact-form {
    width: 30%;
    height: fit-content;
    background-color: #00000015;
    backdrop-filter: blur(5px);
    border-radius: 20px;
    box-shadow: 0px 0px 25px rgba(0, 0, 0, 0.86);
    margin-top: 50px;
}

input[type="text"]::placeholder,
input[type="email"]::placeholder,
textarea::placeholder {
    color: #ffffff83 !important;
}

textarea {
    max-height: 100px;
}

.about-hero {
    background-image: url('../MEDIA/RANDOM NATURE/random\ nature\ 11.jpg');
    height: 100vh;
    transition: none;
}

.about-intro {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 80px 5%;
    gap: 40px;
}

.about-intro-content {
    flex: 1;
}

.about-intro-content h1 {
    text-align: center;
    font-size: 30px;
    color: #000;
    font-weight: 600;
    background-color: rgb(255, 208, 0);
    padding: 4px;
    width: fit-content;
}

.about-intro-content p {
    font-size: 18px;
    line-height: 1.8;
    color: #333;
    margin-bottom: 20px;
}

.about-intro-image {
    flex: 1;
    text-align: center;
}

.about-intro-image img {
    width: 100%;
    height: 400px;
    object-fit: cover;
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
}

.our-story {
    background-color: #f9f9f9;
    padding: 80px 5%;
}

.our-story h1 {
    text-align: center;
    font-size: 40px;
    color: #000;
    font-weight: 600;
    margin-bottom: 50px;
    background-color: rgb(255, 208, 0);
    padding: 10px;
}

.story-content {
    display: flex;
    align-items: center;
    gap: 50px;
}

.story-text {
    flex: 1;
}

.story-text h2 {
    font-size: 28px;
    color: #000;
    margin-bottom: 25px;
    font-weight: 600;
}

.story-text p {
    font-size: 16px;
    line-height: 1.8;
    color: #555;
    margin-bottom: 20px;
}

.story-image {
    flex: 1;
}

.story-image img {
    width: 100%;
    height: 350px;
    object-fit: cover;
    border-radius: 15px;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}

.our-mission {
    padding: 80px 5%;
}

.our-mission h1 {
    text-align: center;
    font-size: 40px;
    color: #000;
    font-weight: 600;
    margin-bottom: 50px;
    background-color: rgb(255, 208, 0);
    padding: 10px;
}

.mission-cards {
    display: flex;
    justify-content: space-between;
    gap: 30px;
}

.mission-card {
    flex: 1;
    background: white;
    padding: 40px 30px;
    border-radius: 20px;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.5);
    text-align: center;
    transition: transform 0.3s ease;
}

.mission-card:hover {
    transform: translateY(-5px);
}

.mission-icon {
    font-size: 48px;
    color: rgb(255, 208, 0);
    margin-bottom: 20px;
}

.mission-card h3 {
    font-size: 22px;
    color: #000;
    margin-bottom: 15px;
    font-weight: 600;
}

.mission-card p {
    font-size: 16px;
    color: #666;
    line-height: 1.6;
}

.our-team {
    background-color: #f9f9f9;
    padding: 80px 5%;
}

.our-team h1 {
    text-align: center;
    font-size: 40px;
    color: #000;
    font-weight: 600;
    margin-bottom: 50px;
    background-color: rgb(255, 208, 0);
    padding: 10px;
}

.team-cards {
    display: flex;
    justify-content: space-between;
    gap: 30px;
}

.team-card {
    flex: 1;
    background: white;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease;
}

.team-card:hover {
    transform: translateY(-5px);
}

.team-image img {
    width: 100%;
    height: 250px;
    object-fit: cover;
}

.team-info {
    padding: 30px;
    text-align: center;
}

.team-info h3 {
    font-size: 20px;
    color: #000;
    margin-bottom: 5px;
    font-weight: 600;
}

.team-info p:first-of-type {
    color: rgb(255, 208, 0);
    font-weight: 600;
    margin-bottom: 15px;
}

.team-info p:last-of-type {
    color: #666;
    font-size: 14px;
    line-height: 1.6;
}

.achievements {
    padding: 80px 5%;
}

.achievements h1 {
    text-align: center;
    font-size: 40px;
    color: #000;
    font-weight: 600;
    margin-bottom: 50px;
    background-color: rgb(255, 208, 0);
    padding: 10px;
}

.achievements-stats {
    display: flex;
    justify-content: space-between;
    gap: 30px;
}

.stat-card {
    flex: 1;
    text-align: center;
    padding: 40px 20px;
    background: white;
    border-radius: 20px;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
}

.stat-number {
    font-size: 42px;
    font-weight: 700;
    color: rgb(255, 208, 0);
    margin-bottom: 10px;
}

.stat-label {
    font-size: 18px;
    color: #333;
    font-weight: 600;
}

.cta-section {
    background-color: #111;
    color: white;
    padding: 80px 5%;
    text-align: center;
}

.cta-content h2 {
    font-size: 36px;
    margin-bottom: 20px;
    font-weight: 600;
}

.cta-content p {
    font-size: 18px;
    margin-bottom: 30px;
    color: #ccc;
}

.cta-button {
    display: inline-block;
    background-color: rgb(255, 208, 0);
    color: #000;
    padding: 15px 40px;
    border-radius: 30px;
    text-decoration: none;
    font-weight: 600;
    font-size: 18px;
    transition: all 0.3s ease;
}

.cta-button:hover {
    background-color: #e6c200;
    transform: translateY(-2px);
}

@media (max-width: 820px) {
    .about-intro {
        flex-direction: column;
        padding: 60px 5%;
    }

    .story-content {
        flex-direction: column;
    }

    .mission-cards {
        flex-direction: column;
    }

    .team-cards {
        flex-direction: column;
    }

    .achievements-stats {
        flex-direction: column;
    }

    .about-intro-content h1,
    .our-story h1,
    .our-mission h1,
    .our-team h1,
    .achievements h1 {
        font-size: 30px;
    }

    .story-text h2 {
        font-size: 24px;
    }

    .cta-content h2 {
        font-size: 28px;
    }
}

@media (max-width: 480px) {

    .about-intro-content h1,
    .our-story h1,
    .our-mission h1,
    .our-team h1,
    .achievements h1 {
        font-size: 24px;
    }

    .story-text h2 {
        font-size: 20px;
    }

    .cta-content h2 {
        font-size: 24px;
    }

    .about-intro-content p,
    .story-text p {
        font-size: 16px;
    }
}


/* ====== Tips Page Styles ====== */

.tips-hero {
    width: 100%;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    background-image: url('../MEDIA/RANDOM NATURE/random\ nature\ 1.jpg');
    background-size: cover;
    background-position: center;
    position: relative;
}

.tips-hero-text {
    position: relative;
    color: #ffffffe5;
    text-align: center;
    text-transform: uppercase;
    width: 100%;
    z-index: 1;
}

.tips-hero-text h1 {
    font-size: 45px;
    font-weight: 700;
    margin-bottom: 20px;
}

.tips-hero-text h1 span {
    color: rgb(255, 208, 0);
}

.tips-hero-text h2 {
    font-size: 30px;
    font-weight: 500;
    animation: none;
}

/* Essential Tips Section */
.essential-tips {
    width: 100%;
    padding: 80px 0;
    background-color: #f9f9f9;
}

.essential-tips h1 {
    text-align: center;
    padding: 6px;
    font-size: 40px;
    color: rgb(0, 0, 0);
    font-weight: 500;
    filter: drop-shadow(0px 0px 2px rgb(0, 0, 0));
    background-color: rgb(255, 208, 0);
    width: 100%;
    text-transform: capitalize;
    margin-bottom: 60px;
}

.tips-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

.tip-card {
    background: white;
    border-radius: 15px;
    padding: 30px;
    text-align: center;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.tip-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
}

.tip-icon {
    font-size: 40px;
    color: rgb(255, 208, 0);
    margin-bottom: 20px;
}

.tip-card h3 {
    font-size: 22px;
    color: #333;
    margin-bottom: 15px;
    font-weight: 600;
}

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

/* Packing Tips Section */
.packing-tips {
    width: 100%;
    padding: 80px 0;
    background-color: white;
}

.packing-tips h1 {
    text-align: center;
    padding: 6px;
    font-size: 40px;
    color: rgb(0, 0, 0);
    font-weight: 500;
    filter: drop-shadow(0px 0px 2px rgb(0, 0, 0));
    background-color: rgb(255, 208, 0);
    width: 100%;
    text-transform: capitalize;
    margin-bottom: 60px;
}

.packing-content {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
    gap: 50px;
}

.packing-image {
    flex: 1;
    max-width: 45%;
}

.packing-image img {
    width: 100%;
    border-radius: 15px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
}

.packing-text {
    flex: 1;
    max-width: 50%;
}

.packing-item {
    margin-bottom: 30px;
    padding: 20px;
    border-left: 4px solid rgb(255, 208, 0);
    background-color: #f9f9f9;
    border-radius: 8px;
}

.packing-item h3 {
    color: #333;
    margin-bottom: 10px;
    font-size: 18px;
    font-weight: 600;
}

.packing-item h3 i {
    color: rgb(255, 208, 0);
    margin-right: 10px;
}

.packing-item p {
    color: #666;
    line-height: 1.6;
    margin: 0;
}

/* Safety Tips Section */
.safety-tips {
    width: 100%;
    padding: 80px 0;
    background-color: #f9f9f9;
}

.safety-tips h1 {
    text-align: center;
    padding: 6px;
    font-size: 40px;
    color: rgb(0, 0, 0);
    font-weight: 500;
    filter: drop-shadow(0px 0px 2px rgb(0, 0, 0));
    background-color: rgb(255, 208, 0);
    width: 100%;
    text-transform: capitalize;
    margin-bottom: 60px;
}

.safety-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: 30px;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

.safety-card {
    background: white;
    border-radius: 15px;
    padding: 30px;
    text-align: center;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease;
}

.safety-card:hover {
    transform: translateY(-5px);
}

.safety-icon {
    font-size: 40px;
    color: rgb(255, 208, 0);
    margin-bottom: 20px;
}

.safety-card h3 {
    font-size: 22px;
    color: #333;
    margin-bottom: 15px;
    font-weight: 600;
}

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

/* Money Tips Section */
.money-tips {
    width: 100%;
    padding: 80px 0;
    background-color: white;
}

.money-tips h1 {
    text-align: center;
    padding: 6px;
    font-size: 40px;
    color: rgb(0, 0, 0);
    font-weight: 500;
    filter: drop-shadow(0px 0px 2px rgb(0, 0, 0));
    background-color: rgb(255, 208, 0);
    width: 100%;
    text-transform: capitalize;
    margin-bottom: 60px;
}

.money-content {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
    gap: 50px;
}

.money-text {
    flex: 1;
    max-width: 50%;
}

.money-image {
    flex: 1;
    max-width: 45%;
}

.money-image img {
    width: 100%;
    border-radius: 15px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
}

.money-item {
    margin-bottom: 30px;
    padding: 20px;
    border-left: 4px solid rgb(255, 208, 0);
    background-color: #f9f9f9;
    border-radius: 8px;
}

.money-item h3 {
    color: #333;
    margin-bottom: 10px;
    font-size: 18px;
    font-weight: 600;
}

.money-item h3 i {
    color: rgb(255, 208, 0);
    margin-right: 10px;
}

.money-item p {
    color: #666;
    line-height: 1.6;
    margin: 0;
}

/* Health Tips Section */
.health-tips {
    width: 100%;
    padding: 80px 0;
    background-color: #f9f9f9;
}

.health-tips h1 {
    text-align: center;
    padding: 6px;
    font-size: 40px;
    color: rgb(0, 0, 0);
    font-weight: 500;
    filter: drop-shadow(0px 0px 2px rgb(0, 0, 0));
    background-color: rgb(255, 208, 0);
    width: 100%;
    text-transform: capitalize;
    margin-bottom: 60px;
}

.health-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 30px;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

.health-card {
    background: white;
    border-radius: 15px;
    padding: 30px;
    text-align: center;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease;
}

.health-card:hover {
    transform: translateY(-5px);
}

.health-icon {
    font-size: 40px;
    color: rgb(255, 208, 0);
    margin-bottom: 20px;
}

.health-card h3 {
    font-size: 22px;
    color: #333;
    margin-bottom: 15px;
    font-weight: 600;
}

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

/* Technology Tips Section */
.technology-tips {
    width: 100%;
    padding: 80px 0;
    background-color: #fff;
}

.technology-tips h1 {
    text-align: center;
    font-size: 40px;
    font-weight: 500;
    background-color: rgb(255, 208, 0);
    color: #000;
    margin-bottom: 60px;
    text-transform: capitalize;
    filter: drop-shadow(0px 0px 2px #000);
    padding: 6px;
}

.tech-content {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
    gap: 50px;
}

.tech-image {
    flex: 1;
    max-width: 45%;
}

.tech-image img {
    width: 100%;
    border-radius: 15px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
}

.tech-text {
    flex: 1;
    max-width: 50%;
}

.tech-item {
    margin-bottom: 30px;
    padding: 20px;
    border-left: 4px solid rgb(255, 208, 0);
    background-color: #f9f9f9;
    border-radius: 8px;
}

.tech-item h3 {
    font-size: 18px;
    font-weight: 600;
    color: #333;
    margin-bottom: 10px;
}

.tech-item h3 i {
    color: rgb(255, 208, 0);
    margin-right: 10px;
}

.tech-item p {
    color: #666;
    line-height: 1.6;
    margin: 0;
}

/* Cultural Tips Section */
.cultural-tips {
    width: 100%;
    padding: 80px 0;
    background-color: #f9f9f9;
}

.cultural-tips h1 {
    text-align: center;
    font-size: 40px;
    font-weight: 500;
    background-color: rgb(255, 208, 0);
    color: #000;
    margin-bottom: 60px;
    text-transform: capitalize;
    filter: drop-shadow(0px 0px 2px #000);
    padding: 6px;
}

.cultural-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

.cultural-card {
    background: white;
    border-radius: 15px;
    padding: 30px;
    text-align: center;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease;
}

.cultural-card:hover {
    transform: translateY(-5px);
}

.cultural-icon {
    font-size: 40px;
    color: rgb(255, 208, 0);
    margin-bottom: 20px;
}

.cultural-card h3 {
    font-size: 22px;
    color: #333;
    margin-bottom: 15px;
    font-weight: 600;
}

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

/* Transportation Tips Section */
.transportation-tips {
    width: 100%;
    padding: 80px 0;
    background-color: #fff;
}

.transportation-tips h1 {
    text-align: center;
    font-size: 40px;
    font-weight: 500;
    background-color: rgb(255, 208, 0);
    color: #000;
    margin-bottom: 60px;
    text-transform: capitalize;
    filter: drop-shadow(0px 0px 2px #000);
    padding: 6px;
}

.transport-content {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
    gap: 50px;
}

.transport-text {
    flex: 1;
    max-width: 50%;
}

.transport-item {
    margin-bottom: 30px;
    padding: 20px;
    border-left: 4px solid rgb(255, 208, 0);
    background-color: #f9f9f9;
    border-radius: 8px;
}

.transport-item h3 {
    font-size: 18px;
    font-weight: 600;
    color: #333;
    margin-bottom: 10px;
}

.transport-item h3 i {
    color: rgb(255, 208, 0);
    margin-right: 10px;
}

.transport-item p {
    color: #666;
    line-height: 1.6;
    margin: 0;
}

.transport-image {
    flex: 1;
    max-width: 45%;
}

.transport-image img {
    width: 100%;
    border-radius: 15px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
}

/* Footer Section */
.site-footer {
    background-color: #222;
    color: #fff;
    padding: 60px 20px 30px;
}

.footer-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 40px;
    max-width: 1200px;
    margin: 0 auto;
}

.footer-about h3 {
    font-size: 24px;
    margin-bottom: 15px;
    color: rgb(255, 208, 0);
}

.footer-about p {
    font-size: 14px;
    line-height: 1.6;
}

.footer-links h4,
.footer-pages h4,
.footer-social h4 {
    font-size: 18px;
    margin-bottom: 15px;
    color: rgb(255, 208, 0);
}

.footer-links ul,
.footer-pages ul {
    list-style: none;
    padding: 0;
}

.footer-links ul li,
.footer-pages ul li {
    margin-bottom: 10px;
}

.footer-links ul li a,
.footer-pages ul li a {
    color: #fff;
    text-decoration: none;
    font-size: 14px;
}

.footer-links ul li a:hover,
.footer-pages ul li a:hover {
    text-decoration: underline;
}

.social-icons a {
    margin-right: 15px;
    font-size: 18px;
    color: #fff;
    transition: color 0.3s ease;
}

.social-icons a:hover {
    color: rgb(255, 208, 0);
}

.footer-bottom-text {
    text-align: center;
    font-size: 14px;
    margin-top: 30px;
    color: #aaa;
}


.gallery-hero {
    width: 100%;
    height: 100vh;
    background-image: url("../MEDIA/RANDOM\ NATURE/hero 4.jpg");
    background-size: cover;
    background-position: top;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
}

.gallery-hero::after {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.4);
}

.gallery-hero-text {
    position: relative;
    color: #fff;
    text-align: center;
    z-index: 1;
    animation: textEffect 2s ease-in-out;
}

.gallery-hero-text h1 {
    font-size: 42px;
    font-weight: 700;
    text-transform: uppercase;
}

.gallery-section {
    padding: 80px 20px;
    background-color: #f9f9f9;
}

.gallery-section h2 {
    text-align: center;
    font-size: 36px;
    font-weight: 500;
    margin-bottom: 50px;
    background-color: rgb(255, 208, 0);
    padding: 10px;
    color: #000;
    text-transform: capitalize;
    filter: drop-shadow(0px 0px 2px #000);
}

.gallery-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 30px;
    max-width: 1200px;
    margin: 0 auto;
}

.gallery-card {
    position: relative;
    overflow: hidden;
    border-radius: 15px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

.gallery-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
}

.gallery-card:hover img {
    transform: scale(1.05);
}

.gallery-caption {
    position: absolute;
    bottom: 0;
    background: rgba(0, 0, 0, 0.6);
    color: #fff;
    width: 100%;
    padding: 10px;
    font-size: 16px;
    text-align: center;
}

/* Landscape and Portrait Variants */
.gallery-card.landscape {
    aspect-ratio: 12 / 9;
}

.gallery-card.portrait {
    aspect-ratio: 3 / 4;
}

/* Responsive Adjustments */
@media (max-width: 576px) {
    .gallery-caption {
        font-size: 14px;
    }
}

@media (max-width: 576px) {
    .gallery-hero-text h1 {
        font-size: 28px;
    }

    .gallery-section h2 {
        font-size: 28px;
    }

    .gallery-caption {
        font-size: 14px;
    }
}

/* rules page started */
.rules-hero {
    /* Main hero section */
    width: 100%;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    background-image: url("../MEDIA/RANDOM\ NATURE/random nature 13.jpg");
    background-size: cover;
    background-position: center;
}

.rules-hero-text {
    /* Hero text container */
    position: relative;
    color: #ffffffe5;
    text-align: center;
    text-transform: uppercase;
    width: 100%;
    height: 100%;
    margin-top: 500px;
}

.rules-hero-text h1 {
    /* Main hero heading */
    font-size: 30px;
    font-weight: 700;
    margin-bottom: 20px;
}

.rules-hero-text h1 span {
    /* Highlighted word in hero heading */
    color: rgb(255, 208, 0);
}

.rules-ctn {
    width: 100%;
    height: fit-content;
    display: flex;
    flex-direction: column;
    pad: 20px;
}

.rules-parts {
    /* border: 2px solid black; */
    border-radius: 30px;
    margin: 20px;
    overflow: hidden;
    cursor: pointer;
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.31);
}

.rules-parts h2 {
    padding: 12px;
    text-align: center;
    background-color: rgb(255, 208, 0);
    font-weight: bold;
    text-transform: uppercase;
}

.rules-parts p {
    text-align: center;
    font-size: 20px;
    font-weight: 500;
    padding: 20px;
}

.rules-parts ul {
    text-align: center;
    list-style-type: none;
    padding: 20px;

}

.rules-parts ul li {
    font-size: 20px;
    font-weight: 500;
}

/* budget travel tips page started  */

.budget-hero {
    /* Main hero section */
    width: 100%;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    background-image: url("../MEDIA/RANDOM\ NATURE/random nature 18.jpg");
    background-size: cover;
    background-position: center;
}

.budget-hero-text {
    /* Hero text container */
    position: relative;
    color: #ffffffe5;
    text-align: center;
    text-transform: uppercase;
    width: 100%;
    height: 100%;
    margin-top: 500px;
    padding: 35px;
    animation: textEffect 2s ease-in-out;
}

.budget-hero-text h1 {
    /* Main hero heading */
    font-size: 30px;
    font-weight: 700;
    margin-bottom: 20px;
}

.budget-hero-text h1 span {
    /* Highlighted word in hero heading */
    color: rgb(255, 208, 0);
}

.smart-budget-tips {
    width: 100%;
    height: fit-content;
}


.smart-budget-tips h2 {
    text-align: center;
    background-color: rgb(255, 208, 0);
    color: black;
    padding: 15px;
}

.smart-budget-tips-ctn {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    padding: 40px;
    flex-wrap: wrap;
    gap: 20px;
}

.sbt-cards {
    width: 300px;
    background-color: #fff;
    height: 250px;
    box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.384);
    border-radius: 20px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 30px;
    cursor: pointer;
    position: relative;
}


.sbt-cards::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 101%;
    height: 100%;
    background-color: rgb(255, 208, 0);
    z-index: -5;
    border-radius: 20px;

}

.sbt-cards i {
    font-size: 40px;
    color: rgb(255, 208, 0);
}

.sbt-cards h1 {
    font-size: 20px;
    font-weight: bold;

    color: black;
    text-transform: uppercase;
}

.sbt-cards p {
    font-size: 16px;
    text-align: center;
    color: black;
}

.cost-breakdown-table {
    width: 100%;
    min-height: 30vh;
    height: fit-content;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    margin-top: 50px;
}

.cost-breakdown-table h2 {
    text-align: center;
    background-color: rgb(255, 208, 0);
    color: black;
    padding: 15px;
    width: 100%;
}

.cost-breakdown-table table {
    border: 2px solid black;
    padding: 15px;
    margin: 50px;
    width: 90%;
    height: 90%;
    text-align: center;
}

.cost-breakdown-table table thead {
    background-color: rgb(0, 0, 0);
    color: white;
}

.cost-breakdown-table table th,
tr,
td {
    border: 1px solid black;
    padding: 5px;
}

/* faqs page satrted  */
.faq-container {
    max-width: 900px;
    margin: 40px auto;
    padding: 20px;
    background-color: white;
    border-radius: 12px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.05);
}

.faq {
    margin-bottom: 20px;
    border-bottom: 1px solid #ddd;
    padding-bottom: 15px;
}

.faq h3 {
    font-size: 20px;
    margin-bottom: 8px;
    color: #2c3e50;
}

.faq p {
    font-size: 16px;
    color: #555;
}

@media (max-width: 600px) {
    .faq-container {
        margin: 20px;
        padding: 15px;
    }

    .faq h3 {
        font-size: 18px;
    }

    .faq p {
        font-size: 14px;
    }
}

/* subscribe page started */
.subscribe-ctn {
    width: 100%;
    min-height: 70vh;
    height: fit-content;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    flex-direction: column;
}

.subscribe-ctn h1 {
    text-align: center;
    background-color: rgb(255, 208, 0);
    color: black;
    padding: 12px;
    width: 100%;
}

.subscribe-ctn form {
    width: 50%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    align-items: left;
    box-shadow: 0px 0px 18px rgba(0, 0, 0, 0.479);
    padding: 25px;
    border-radius: 20px;
    margin: 50px;
}

.subscribe-ctn form input {
    padding: 10px;
}

.subscribe-ctn form label {
    margin-top: 30px;
}

.subscribe-ctn form select {
    margin-top: 50px;
    padding: 10px;

}

.subscribe-ctn form button {
    margin-top: 50px;
    border: none;
    outline: none;
    width: 40%;
    margin-inline: auto;
    padding: 16px;
    border-radius: 20px;
    background-color: rgb(255, 208, 0);
    font-weight: 500;
    box-shadow: inset 0px 0px 8px rgba(0, 0, 0, 0.499);
    font-size: .8rem;
}

.subscribe-ctn form button:hover {
    box-shadow: inset 0px 0px 8px rgba(0, 0, 0, 0.299);

}

.subscribe-ctn form button:active {
    background-color: rgb(255, 196, 0);
}

/* travel gear page started */

.gear-categories {
    width: 100%;
    height: fit-content;
}


.gear-categories h1 {
    text-align: center;
    background-color: rgb(255, 208, 0);
    color: black;
    padding: 15px;
}

.gear-categories-ctn {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    padding: 40px;
    flex-wrap: wrap;
    gap: 20px;
}

.gear-cat-card {
    width: 330px;
    background-color: #fff;
    height: 250px;
    box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.384);
    border-radius: 20px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 30px;
    cursor: pointer;
    position: relative;
}


.gear-cat-card::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 101%;
    height: 100%;
    background-color: rgb(255, 208, 0);
    z-index: -5;
    border-radius: 20px;

}

.gear-cat-card i {
    font-size: 40px;
    color: rgb(255, 208, 0);
}

.gear-cat-card h2 {
    font-size: 20px;
    font-weight: bold;
    text-align: center;
    color: black;
    text-transform: uppercase;
}

.gear-cat-card p {
    font-size: 16px;
    text-align: center;
    color: black;
}

/* === PAKISTAN TRIP HERO SECTION === */
.pak-trip-hero {
    position: relative;
    width: 100%;
    height: 100vh;
    overflow: hidden;
}

.pak-trip-hero-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.pak-trip-hero-text {
    position: absolute;
    bottom: 60px;
    left: 50%;
    transform: translateX(-50%);
    color: white;
    text-align: center;
    background: rgba(0, 0, 0, 0.5);
    padding: 20px 40px;
    border-radius: 10px;
}

.pak-trip-hero-text h1 {
    font-size: 40px;
    margin-bottom: 10px;
}

.pak-trip-hero-text p {
    font-size: 20px;
}

/* === ITINERARY SECTION === */
.pak-trip-itinerary {
    padding: 60px 20px;
    background-color: #fffbe6;
    text-align: center;
}

.pak-trip-itinerary h2 {
    font-size: 36px;
    margin-bottom: 40px;
    color: #333;
}

.pak-trip-itinerary-box {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 30px;
}

.day-box {
    background: white;
    padding: 20px;
    border-radius: 12px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    max-width: 300px;
}

.day-box h3 {
    font-size: 24px;
    color: rgb(255, 208, 0);
    margin-bottom: 10px;
}

.day-box p {
    font-size: 16px;
    color: #444;
}

/* === HIGHLIGHTS SECTION === */
.pak-trip-highlights {
    background-color: #f9f9f9;
    padding: 60px 20px;
    text-align: center;
}

.pak-trip-highlights h2 {
    font-size: 36px;
    margin-bottom: 40px;
    color: #222;
}

.highlight-cards {
    display: flex;
    justify-content: center;
    gap: 30px;
    flex-wrap: wrap;
}

.highlight-card {
    background: white;
    padding: 20px;
    border-radius: 12px;
    width: 300px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    text-align: center;
}

.highlight-card img {
    width: 100%;
    height: 200px;
    object-fit: cover;
    border-radius: 8px;
    margin-bottom: 15px;
}

.highlight-card h4 {
    color: rgb(255, 208, 0);
    font-size: 20px;
    margin-bottom: 10px;
}

.highlight-card p {
    color: #555;
    font-size: 15px;
}

/* === Responsive Styling === */
@media (max-width: 992px) {
    .pak-trip-hero-text h1 {
        font-size: 32px;
    }

    .pak-trip-hero-text p {
        font-size: 16px;
    }

    .pak-trip-itinerary-box,
    .highlight-cards {
        flex-direction: column;
        align-items: center;
    }

    .day-box,
    .highlight-card {
        width: 90%;
    }
}

@media (max-width: 600px) {
    .pak-trip-hero-text {
        padding: 15px 20px;
        bottom: 40px;
    }

    .pak-trip-hero-text h1 {
        font-size: 24px;
    }

    .pak-trip-hero-text p {
        font-size: 14px;
    }

    .pak-trip-itinerary h2,
    .pak-trip-highlights h2 {
        font-size: 28px;
    }

    .day-box h3 {
        font-size: 20px;
    }

    .highlight-card h4 {
        font-size: 18px;
    }

    .highlight-card p,
    .day-box p {
        font-size: 14px;
    }
}

/* === China Trip Styles === */
.china-trip-hero {
    position: relative;
    width: 100%;
    height: 500px;
    overflow: hidden;
}

.china-trip-hero .hero-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.china-trip-hero-text {
    position: absolute;
    bottom: 60px;
    left: 50%;
    transform: translateX(-50%);
    color: #fff;
    text-align: center;
    background-color: rgba(0, 0, 0, 0.55);
    padding: 20px 30px;
    border-radius: 12px;
}

.china-trip-hero-text h1 {
    font-size: 42px;
    margin-bottom: 10px;
}

.china-trip-hero-text p {
    font-size: 18px;
}

/* Itinerary */
.china-trip-itinerary {
    padding: 80px 20px;
    background: #f9f9f9;
    text-align: center;
}

.china-trip-itinerary h2 {
    font-size: 36px;
    margin-bottom: 40px;
}

.china-trip-itinerary-box {
    display: flex;
    flex-wrap: wrap;
    gap: 25px;
    justify-content: center;
}

.day-box {
    background: #fff;
    padding: 25px;
    border-radius: 10px;
    box-shadow: 0 0 12px rgba(0, 0, 0, 0.08);
    max-width: 350px;
    width: 100%;
    text-align: left;
}

/* Highlights */
.china-trip-highlights {
    padding: 80px 20px;
    text-align: center;
    background-color: #fff;
}

.china-trip-highlights h2 {
    font-size: 36px;
    margin-bottom: 40px;
}

.highlight-cards {
    display: flex;
    flex-wrap: wrap;
    gap: 30px;
    justify-content: center;
}

.highlight-card {
    background: #fafafa;
    border-radius: 10px;
    padding: 20px;
    max-width: 300px;
    width: 100%;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.05);
    text-align: left;
}

.highlight-card img {
    width: 100%;
    border-radius: 10px;
    margin-bottom: 15px;
}

.highlight-card h4 {
    font-size: 20px;
    margin-bottom: 10px;
}

/* === Responsive === */
@media (max-width: 992px) {
    .china-trip-hero-text h1 {
        font-size: 30px;
    }

    .china-trip-itinerary-box,
    .highlight-cards {
        flex-direction: column;
        align-items: center;
    }

    .day-box,
    .highlight-card {
        width: 90%;
    }
}

@media (max-width: 600px) {
    .china-trip-hero-text {
        padding: 15px 20px;
        bottom: 40px;
    }

    .china-trip-hero-text h1 {
        font-size: 22px;
    }

    .china-trip-hero-text p {
        font-size: 14px;
    }

    .china-trip-itinerary h2,
    .china-trip-highlights h2 {
        font-size: 28px;
    }

    .day-box h3 {
        font-size: 20px;
    }

    .highlight-card h4 {
        font-size: 18px;
    }

    .highlight-card p,
    .day-box p {
        font-size: 14px;
    }
}

/* === China Trip Styles === */
.china-trip-hero {
    position: relative;
    width: 100%;
    height: 500px;
    overflow: hidden;
}

.china-trip-hero .hero-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.china-trip-hero-text {
    position: absolute;
    bottom: 60px;
    left: 50%;
    transform: translateX(-50%);
    color: #fff;
    text-align: center;
    background-color: rgba(0, 0, 0, 0.55);
    padding: 20px 30px;
    border-radius: 12px;
}

.china-trip-hero-text h1 {
    font-size: 42px;
    margin-bottom: 10px;
}

.china-trip-hero-text p {
    font-size: 18px;
}

/* Itinerary */
.china-trip-itinerary {
    padding: 80px 20px;
    background: #f9f9f9;
    text-align: center;
}

.china-trip-itinerary h2 {
    font-size: 36px;
    margin-bottom: 40px;
}

.china-trip-itinerary-box {
    display: flex;
    flex-wrap: wrap;
    gap: 25px;
    justify-content: center;
}

.day-box {
    background: #fff;
    padding: 25px;
    border-radius: 10px;
    box-shadow: 0 0 12px rgba(0, 0, 0, 0.08);
    max-width: 350px;
    width: 100%;
    text-align: left;
}

/* Highlights */
.china-trip-highlights {
    padding: 80px 20px;
    text-align: center;
    background-color: #fff;
}

.china-trip-highlights h2 {
    font-size: 36px;
    margin-bottom: 40px;
}

.highlight-cards {
    display: flex;
    flex-wrap: wrap;
    gap: 30px;
    justify-content: center;
}

.highlight-card {
    background: #fafafa;
    border-radius: 10px;
    padding: 20px;
    max-width: 300px;
    width: 100%;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.05);
    text-align: left;
}

.highlight-card img {
    width: 100%;
    border-radius: 10px;
    margin-bottom: 15px;
}

.highlight-card h4 {
    font-size: 20px;
    margin-bottom: 10px;
}

/* === Responsive === */
@media (max-width: 992px) {
    .china-trip-hero-text h1 {
        font-size: 30px;
    }

    .china-trip-itinerary-box,
    .highlight-cards {
        flex-direction: column;
        align-items: center;
    }

    .day-box,
    .highlight-card {
        width: 90%;
    }
}

@media (max-width: 600px) {
    .china-trip-hero-text {
        padding: 15px 20px;
        bottom: 40px;
    }

    .china-trip-hero-text h1 {
        font-size: 22px;
    }

    .china-trip-hero-text p {
        font-size: 14px;
    }

    .china-trip-itinerary h2,
    .china-trip-highlights h2 {
        font-size: 28px;
    }

    .day-box h3 {
        font-size: 20px;
    }

    .highlight-card h4 {
        font-size: 18px;
    }

    .highlight-card p,
    .day-box p {
        font-size: 14px;
    }
}

/* === Destinations Section === */
.destinations {
    padding: 80px 20px;
    background-color: #fefefe;
    text-align: center;
}

.destinations h2 {
    font-size: 36px;
    margin-bottom: 10px;
}

.destinations-subtitle {
    font-size: 18px;
    margin-bottom: 40px;
    color: #666;
}

.destination-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 30px;
    justify-content: center;
}

.destination-card {
    width: 270px;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.07);
    overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.destination-card img {
    width: 100%;
    height: 180px;
    object-fit: cover;
}

.destination-card h3 {
    padding: 15px;
    font-size: 18px;
    color: #333;
}

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

/* === Responsive === */
@media (max-width: 992px) {
    .destination-card {
        width: 45%;
    }
}

@media (max-width: 600px) {
    .destinations h2 {
        font-size: 28px;
    }

    .destination-card {
        width: 100%;
    }

    .destination-card h3 {
        font-size: 16px;
    }

    .destinations-subtitle {
        font-size: 16px;
    }
}

/* === Hero Section === */
.dubai-trip-hero {
    position: relative;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    text-align: center;
    overflow: hidden;
}

.dubai-trip-hero .hero-bg {
    position: absolute;
    width: 100%;
    height: 100%;
    object-fit: cover;
    top: 0;
    left: 0;
    z-index: 1;
}

.dubai-trip-hero .hero-overlay {
    position: absolute;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.55);
    top: 0;
    left: 0;
    z-index: 2;
}

.dubai-trip-hero-text {
    position: relative;
    z-index: 3;
    max-width: 700px;
    padding: 0 20px;
}

.dubai-trip-hero-text h1 {
    font-size: 48px;
    margin-bottom: 15px;
}

.dubai-trip-hero-text p {
    font-size: 18px;
}

/* === Experiences Section === */
.dubai-trip-experiences {
    padding: 60px 20px;
    text-align: center;
}

.dubai-trip-experiences h2 {
    font-size: 32px;
    margin-bottom: 30px;
}

.experience-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 30px;
}

.experience-card {
    background: #f9f9f9;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

.experience-card img {
    width: 100%;
    height: 200px;
    object-fit: cover;
}

.experience-card h3 {
    margin: 15px 0 5px;
}

.experience-card p {
    padding: 0 15px 20px;
    font-size: 15px;
}

/* === Travel Tips === */
.dubai-trip-tips {
    padding: 60px 20px;
    background-color: #f0f8ff;
    text-align: center;
}

.dubai-trip-tips h2 {
    font-size: 28px;
    margin-bottom: 20px;
}

.dubai-trip-tips ul {
    list-style: none;
    padding: 0;
    font-size: 16px;
}

.dubai-trip-tips ul li {
    margin-bottom: 10px;
}

/* === Responsive === */
@media (max-width: 768px) {
    .dubai-trip-hero {
        height: 70vh;
    }

    .dubai-trip-hero-text h1 {
        font-size: 32px;
    }

    .dubai-trip-hero-text p {
        font-size: 16px;
    }
}

/* === Hero Section === */
.italy-trip-hero {
    position: relative;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    text-align: center;
    overflow: hidden;
}

.italy-trip-hero .hero-bg {
    position: absolute;
    width: 100%;
    height: 100%;
    object-fit: cover;
    top: 0;
    left: 0;
    z-index: 1;
}

.italy-trip-hero .hero-overlay {
    position: absolute;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    top: 0;
    left: 0;
    z-index: 2;
}

.italy-trip-hero-text {
    position: relative;
    z-index: 3;
    max-width: 700px;
    padding: 0 20px;
}

.italy-trip-hero-text h1 {
    font-size: 48px;
    margin-bottom: 15px;
}

.italy-trip-hero-text p {
    font-size: 18px;
}

/* === Attractions === */
.italy-trip-attractions {
    padding: 60px 20px;
    text-align: center;
}

.italy-trip-attractions h2 {
    font-size: 32px;
    margin-bottom: 30px;
}

.attractions-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 30px;
}

.attraction-card {
    background: #fffaf0;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

.attraction-card img {
    width: 100%;
    height: 200px;
    object-fit: cover;
}

.attraction-card h3 {
    margin: 15px 0 5px;
}

.attraction-card p {
    padding: 0 15px 20px;
    font-size: 15px;
}

/* === Tips === */
.italy-trip-tips {
    padding: 60px 20px;
    background-color: #f5f5f5;
    text-align: center;
}

.italy-trip-tips h2 {
    font-size: 28px;
    margin-bottom: 20px;
}

.italy-trip-tips ul {
    list-style: none;
    padding: 0;
    font-size: 16px;
}

.italy-trip-tips ul li {
    margin-bottom: 10px;
}

/* === Responsive === */
@media (max-width: 768px) {
    .italy-trip-hero {
        height: 70vh;
    }

    .italy-trip-hero-text h1 {
        font-size: 32px;
    }

    .italy-trip-hero-text p {
        font-size: 16px;
    }
}

/* === Hero Section === */
.turkey-trip-hero {
    position: relative;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    text-align: center;
    overflow: hidden;
}

.turkey-trip-hero .hero-bg {
    position: absolute;
    width: 100%;
    height: 100%;
    object-fit: cover;
    top: 0;
    left: 0;
    z-index: 1;
}

.turkey-trip-hero .hero-overlay {
    position: absolute;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    top: 0;
    left: 0;
    z-index: 2;
}

.turkey-trip-hero-text {
    position: relative;
    z-index: 3;
    max-width: 700px;
    padding: 0 20px;
}

.turkey-trip-hero-text h1 {
    font-size: 48px;
    margin-bottom: 15px;
}

.turkey-trip-hero-text p {
    font-size: 18px;
}

/* === Destinations === */
.turkey-trip-destinations {
    padding: 60px 20px;
    text-align: center;
}

.turkey-trip-destinations h2 {
    font-size: 32px;
    margin-bottom: 30px;
}

.destinations-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 30px;
}

.destination-card {
    background: #fff9f0;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

.destination-card img {
    width: 100%;
    height: 200px;
    object-fit: cover;
}

.destination-card h3 {
    margin: 15px 0 5px;
}

.destination-card p {
    padding: 0 15px 20px;
    font-size: 15px;
}

/* === Guide === */
.turkey-trip-guide {
    padding: 60px 20px;
    background-color: #f3f3f3;
    text-align: center;
}

.turkey-trip-guide h2 {
    font-size: 28px;
    margin-bottom: 20px;
}

.turkey-trip-guide ul {
    list-style: none;
    padding: 0;
    font-size: 16px;
}

.turkey-trip-guide ul li {
    margin-bottom: 10px;
}

/* === Responsive === */
@media (max-width: 768px) {
    .turkey-trip-hero {
        height: 70vh;
    }

    .turkey-trip-hero-text h1 {
        font-size: 32px;
    }

    .turkey-trip-hero-text p {
        font-size: 16px;
    }
}
/* === Hero Section === */
.reviews-hero {
  position: relative;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  text-align: center;
  overflow: hidden;
}

.reviews-hero .hero-bg {
  position: absolute;
  width: 100%;
  height: 100%;
  object-fit: cover;
  top: 0;
  left: 0;
  z-index: 1;
}

.reviews-hero .hero-overlay {
  position: absolute;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  top: 0;
  left: 0;
  z-index: 2;
}

.reviews-hero-text {
  position: relative;
  z-index: 3;
  max-width: 700px;
  padding: 0 20px;
}

.reviews-hero-text h1 {
  font-size: 48px;
  margin-bottom: 15px;
}

.reviews-hero-text p {
  font-size: 18px;
}

/* === Reviews Section === */
.reviews-feedback {
  padding: 60px 20px;
  text-align: center;
}

.reviews-feedback h2 {
  font-size: 32px;
  margin-bottom: 30px;
}

.review-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 30px;
}

.review-card {
  background: #fff;
  padding: 25px;
  border-radius: 10px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.review-card p {
  font-style: italic;
  font-size: 16px;
  margin-bottom: 10px;
}

.review-card h4 {
  font-weight: normal;
}

/* === Submit Review === */
.review-submit {
  padding: 60px 20px;
  background: #f5f5f5;
  text-align: center;
}

.review-submit h2 {
  font-size: 28px;
  margin-bottom: 20px;
}

.review-submit form {
  max-width: 500px;
  margin: auto;
  display: flex;
  flex-direction: column;
}

.review-submit input,
.review-submit textarea {
  padding: 10px 15px;
  margin-bottom: 15px;
  border: 1px solid #ccc;
  border-radius: 5px;
}

.review-submit button {
  padding: 10px;
  background-color: #ff6600;
  border: none;
  color: white;
  font-weight: bold;
  border-radius: 5px;
  cursor: pointer;
}

/* === Responsive === */
@media (max-width: 768px) {
  .reviews-hero {
    height: 70vh;
  }

  .reviews-hero-text h1 {
    font-size: 32px;
  }

  .reviews-hero-text p {
    font-size: 16px;
  }
}
/* TERMS HERO */
.terms-hero {
  position: relative;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  overflow: hidden;
  color: white;
}

.terms-hero .hero-bg {
  position: absolute;
  width: 100%;
  height: 100%;
  object-fit: cover;
  top: 0;
  left: 0;
  z-index: 1;
}

.terms-hero .hero-overlay {
  position: absolute;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.6);
  z-index: 2;
}

.terms-hero-text {
  position: relative;
  z-index: 3;
  max-width: 700px;
  padding: 0 20px;
}

.terms-hero-text h1 {
  font-size: 48px;
  color: #FFD700;
  margin-bottom: 10px;
}

.terms-hero-text p {
  font-size: 18px;
}

/* TERMS CONTENT */
.terms-content {
  padding: 60px 20px;
  max-width: 900px;
  margin: auto;
  background-color: #fff;
}

.terms-content h2 {
  font-size: 28px;
  color: #222;
  margin-top: 30px;
  border-left: 6px solid #FFD700;
  padding-left: 15px;
}

.terms-content ul {
  margin: 15px 0 30px 0;
  padding-left: 20px;
}

.terms-content ul li {
  font-size: 16px;
  color: #444;
  margin-bottom: 10px;
  line-height: 1.6;
}

/* Responsive */
@media (max-width: 768px) {
  .terms-hero {
    height: 70vh;
  }

  .terms-hero-text h1 {
    font-size: 32px;
  }

  .terms-hero-text p {
    font-size: 16px;
  }

  .terms-content h2 {
    font-size: 22px;
  }

  .terms-content ul li {
    font-size: 15px;
  }
}
/* PRIVACY HERO */
.privacy-hero {
  position: relative;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  overflow: hidden;
  color: white;
}

.privacy-hero .hero-bg {
  position: absolute;
  width: 100%;
  height: 100%;
  object-fit: cover;
  top: 0;
  left: 0;
  z-index: 1;
}

.privacy-hero .hero-overlay {
  position: absolute;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.6);
  z-index: 2;
}

.privacy-hero-text {
  position: relative;
  z-index: 3;
  max-width: 700px;
  padding: 0 20px;
}

.privacy-hero-text h1 {
  font-size: 48px;
  color: #FFD700;
  margin-bottom: 10px;
}

.privacy-hero-text p {
  font-size: 18px;
}

/* PRIVACY CONTENT */
.privacy-content {
  padding: 60px 20px;
  max-width: 900px;
  margin: auto;
  background-color: #fff;
}

.privacy-content h2 {
  font-size: 28px;
  color: #222;
  margin-top: 30px;
  border-left: 6px solid #FFD700;
  padding-left: 15px;
}

.privacy-content ul {
  margin: 15px 0 30px 0;
  padding-left: 20px;
}

.privacy-content ul li {
  font-size: 16px;
  color: #444;
  margin-bottom: 10px;
  line-height: 1.6;
}

/* Responsive */
@media (max-width: 768px) {
  .privacy-hero {
    height: 70vh;
  }

  .privacy-hero-text h1 {
    font-size: 32px;
  }

  .privacy-hero-text p {
    font-size: 16px;
  }

  .privacy-content h2 {
    font-size: 22px;
  }

  .privacy-content ul li {
    font-size: 15px;
  }
}
/* VLOGS HERO */
.vlogs-hero {
  position: relative;
  height: 100vh;
  overflow: hidden;
}

.vlogs-hero .hero-bg {
  width: 100%;
  height: 100%;
  object-fit: cover;
  position: absolute;
  z-index: 1;
}

.vlogs-hero .hero-overlay {
  background: rgba(0, 0, 0, 0.6);
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: 2;
}

.vlogs-hero-text {
  position: relative;
  z-index: 3;
  color: white;
  text-align: center;
  padding: 0 20px;
  max-width: 700px;
  margin: auto;
  top: 50%;
  transform: translateY(-50%);
}

.vlogs-hero-text h1 {
  font-size: 48px;
  color: #FFD700;
}

.vlogs-hero-text p {
  font-size: 18px;
  margin-top: 10px;
}

/* VLOG SECTION */
.vlog-section {
  padding: 60px 20px;
  background-color: #fff;
  text-align: center;
}

.vlog-section h2 {
  font-size: 32px;
  color: #222;
  margin-bottom: 40px;
}

.vlog-cards {
  display: flex;
  gap: 30px;
  flex-wrap: wrap;
  justify-content: center;
}

.vlog-card {
  background-color: #f9f9f9;
  padding: 20px;
  width: 300px;
  border-left: 6px solid #FFD700;
  border-radius: 10px;
  text-align: left;
  transition: 0.3s ease;
}

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

.vlog-card img {
  width: 100%;
  border-radius: 8px;
  margin-bottom: 15px;
}

.vlog-card h3 {
  color: #333;
  margin-bottom: 10px;
}

.vlog-card p {
  color: #555;
  font-size: 15px;
}

.vlog-card a {
  display: inline-block;
  margin-top: 10px;
  color: #FFD700;
  text-decoration: none;
  font-weight: bold;
}

/* VLOG CATEGORIES */
.vlog-categories {
  background-color: #fff4cc;
  padding: 40px 20px;
  text-align: center;
}

.vlog-categories h2 {
  font-size: 28px;
  color: #333;
  margin-bottom: 20px;
}

.vlog-categories ul {
  list-style: none;
  padding: 0;
}

.vlog-categories ul li {
  display: inline-block;
  margin: 10px 15px;
}

.vlog-categories ul li a {
  color: #222;
  font-weight: bold;
  text-decoration: none;
  border-bottom: 2px solid #FFD700;
}

/* CTA */
.vlog-cta {
  background-color: #222;
  color: white;
  padding: 60px 20px;
  text-align: center;
}

.vlog-cta h2 {
  font-size: 32px;
  margin-bottom: 10px;
}

.vlog-cta p {
  font-size: 16px;
  margin-bottom: 20px;
}

.cta-btn {
  display: inline-block;
  background-color: #FFD700;
  color: #000;
  padding: 12px 25px;
  font-weight: bold;
  border-radius: 5px;
  text-decoration: none;
}

/* Responsive */
@media (max-width: 768px) {
  .vlogs-hero {
    height: 70vh;
  }

  .vlogs-hero-text h1 {
    font-size: 32px;
  }

  .vlog-cards {
    flex-direction: column;
    align-items: center;
  }

  .vlog-card {
    width: 90%;
  }
}
































































/* ====== Responsive Styles ====== */

/* Hide card3 on smaller screens */
@media only screen and (max-width:1020px) {
    .card3 {
        display: none;
    }
}

/* ====== Tablet Styles (820px and below) ====== */
@media only screen and (max-width:820px) {
    .nav {
        justify-content: space-between;
        padding-left: 20px;
        padding-right: 1px;
    }

    .hamburger-nav {
        display: block;
        color: white;
        font-size: 20px;
    }

    .mobile-dropdown {
        display: block;
    }

    .dropdown-nav-links {
        font-size: 15px;
    }

    .nav-ul {
        display: none;
    }

    /* Hero Section */
    .hero {
        height: 70vh;
    }

    .hero-text h1 {
        font-size: 35px;
        padding: 0 20px;
    }

    .hero-text h2 {
        font-size: 25px;
        padding: 0 20px;
    }

    .arrow-down {
        display: none;
    }

    /* Top Places */
    .top-places {
        height: auto;
        margin-bottom: 50px;
    }

    .top-places h1 {
        font-size: 30px;
    }

    .top-places-cards {
        flex-direction: column;
        gap: 30px;
        padding: 40px 20px;
    }

    .top-places-card {
        width: 80%;
        height: 200px;
    }

    /* Top Categories */
    .top-categories {
        height: auto;
    }

    .top-categories h1 {
        font-size: 30px;
    }

    .categories-cards {
        flex-direction: column;
        gap: 30px;
        padding: 40px 20px;
    }

    .cat-card {
        width: 80%;
        height: 250px;
    }

    /* Why Choose */
    .why-choose {
        height: auto;
    }

    .why-choose h1 {
        font-size: 30px;
    }

    .why-choose-ctn {
        flex-direction: column;
        gap: 30px;
        padding: 20px;
    }

    .why-choose-img {
        width: 100%;
        height: 300px;
    }

    .why-choose-text {
        width: 100%;
    }

    .why-choose-text ul li {
        font-size: 16px;
        margin-top: 15px;
    }

    /* Testimonials */
    .testimonials h1 {
        font-size: 30px;
    }

    .testimonials-cards {
        flex-direction: column;
        align-items: center;
        gap: 80px;
        padding: 40px 20px;
    }

    .testimonial-card {
        width: 350px;
    }

    .contact-form {
        width: 60%;
    }

    /* Footer */
    .footer-container {
        flex-direction: column;
        text-align: center;
    }

    .footer-about,
    .footer-links,
    .footer-pages,
    .footer-social {
        margin: 15px 0;
    }

    .rules-hero-text {
        padding: 20px;
    }

    .rules-hero-text h1 {
        font-size: 28px;
    }

    .rules-parts h2 {
        font-size: 22px;

    }

    .rules-parts p {
        font-size: 18px;
    }

    .rules-parts ul li {
        font-size: 18px;
    }

    .packing-content,
    .money-content,
    .tech-content,
    .transport-content {
        flex-direction: column;
        align-items: center;
    }

    .packing-image,
    .money-image,
    .tech-image,
    .transport-image,
    .packing-text,
    .money-text,
    .tech-text,
    .transport-text {
        max-width: 100%;
    }

    .tips-hero-text h1 {
        font-size: 36px;
    }

    .tips-hero-text h2 {
        font-size: 24px;
    }

    .nav-ul {
        display: none;
    }

    .mobile-dropdown {
        display: block;
    }

    .footer-container {
        grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
        text-align: center;
    }

    .subscribe-ctn form {
        width: 70%;
    }

    .subscribe-ctn form button {
        width: 50%;
    }
}

/* ====== Mobile Styles (480px and below) ====== */
@media only screen and (max-width: 480px) {

    /* Hero Section */
    .hero-text h1 {
        font-size: 28px;
        padding: 0 15px;
        animation: none;
    }

    .hero-text h2 {
        font-size: 20px;
        padding: 0 15px;
        animation: none;

    }

    /* Top Places */
    .top-places h1 {
        font-size: 24px;
    }

    .top-places-cards {
        padding: 30px 15px;
    }

    .top-places-card {
        width: 90%;
        height: 220px;
    }

    .top-places-names {
        height: 40%;
        bottom: -40%;
    }

    .top-places-names h2 {
        font-size: 14px;
    }

    .top-places-names p {
        font-size: 13px;
    }

    /* Top Categories */
    .top-categories h1 {
        font-size: 24px;
    }

    .categories-cards {
        padding: 30px 15px;
    }

    .cat-card {
        width: 90%;
        height: 220px;
        animation: none;
    }

    .cat-card-content h2 {
        font-size: 14px;
    }

    /* Why Choose */
    .why-choose h1 {
        font-size: 24px;
    }

    .why-choose-ctn {
        padding: 15px;
    }

    .why-choose-img {
        height: 250px;
    }

    .why-choose-text ul li {
        font-size: 14px;
        margin-top: 12px;
    }

    /* Testimonials */
    .testimonials {
        margin-top: 50px;
    }

    .testimonials h1 {
        font-size: 24px;
    }

    .testimonials-cards {
        padding: 30px 15px;
        gap: 60px;
    }

    .testimonial-card {
        width: 300px;
    }

    .testimonial-content p {
        font-size: 14px;
    }

    .testimonial-content h2 {
        font-size: 15px;
    }

    .contact-hero {
        height: 90vh;
    }

    .contact-form {
        width: 80%;
    }

    /* Footer */
    .site-footer {
        padding: 30px 15px;
    }

    .footer-about h3 {
        font-size: 20px;
    }

    .footer-links h4,
    .footer-pages h4,
    .footer-social h4 {
        font-size: 14px;
    }

    .social-icons a {
        font-size: 16px;
        margin-right: 8px;
    }

    .rules-hero-text {
        padding: 10px;
    }

    .rules-hero-text h1 {
        font-size: 28px;
    }

    .rules-parts h2 {
        font-size: 20px;

    }

    .rules-parts p {
        font-size: 18px;
    }

    .rules-parts ul li {
        font-size: 18px;
    }

    .tips-grid,
    .safety-cards,
    .cultural-cards,
    .health-grid {
        grid-template-columns: 1fr;
    }

    .tips-hero-text h1 {
        font-size: 28px;
    }

    .tips-hero-text h2 {
        font-size: 20px;
    }

    .footer-container {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .footer-social .social-icons a {
        margin: 0 10px;
    }

    .dropdown-menu-custom {
        width: 100%;
    }

    .subscribe-ctn form {
        width: 90%;
    }

    .subscribe-ctn form button {
        width: 50%;
    }
}

/* ====== Extra Small Mobile (320px and below) ====== */
@media only screen and (max-width: 320px) {
    .hero-text h1 {
        font-size: 22px;
    }

    .hero-text h2 {
        font-size: 16px;
    }

    .top-places-card {
        width: 250px;
        height: 160px;
    }

    .cat-card {
        width: 220px;
        height: 200px;
    }

    .testimonial-card {
        width: 280px;
    }

    .why-choose-text ul li {
        font-size: 13px;
    }

    .tip-card,
    .safety-card,
    .cultural-card,
    .health-card {
        padding: 20px;
    }

    .tip-card h3,
    .safety-card h3,
    .cultural-card h3,
    .health-card h3 {
        font-size: 20px;
    }

    .tip-card p,
    .safety-card p,
    .cultural-card p,
    .health-card p {
        font-size: 14px;
    }

    .tips-hero-text h1 {
        font-size: 24px;
    }

    .tips-hero-text h2 {
        font-size: 18px;
    }

    .site-footer {
        padding: 40px 15px 20px;
    }

    .footer-bottom-text {
        font-size: 12px;
    }

    .transport-item h3,
    .money-item h3,
    .packing-item h3,
    .tech-item h3 {
        font-size: 16px;
    }

    .transport-item p,
    .money-item p,
    .packing-item p,
    .tech-item p {
        font-size: 14px;
    }

}