* {
    font-family: "Poppins", sans-serif;
}


.parallax-cloud,
.parallax-mountain,
.parallax-bike,
.parallax-ground,
.parallax-mb-background,
.parallax-mb-foreground {
    will-change: transform;
}


/* Hide scrollbar for Chrome, Safari, and Edge */
::-webkit-scrollbar {
    display: none;
}

/* Hide scrollbar for Firefox */
html {
    scrollbar-width: none;
    /* "auto" or "thin" are defaults */
}

/* Optional: for IE and older Edge */
body {
    -ms-overflow-style: none;
}

@keyframes marquee {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}

.animate-marquee {
  animation: marquee 28s linear infinite;
}

:root {
    --color-1: #FF8A24;
    --color-2: #000000;
    --color-3: #1897E6;
    --color-4: #E2E2E2;
    --color-5: #1897E6;
    --color-7: #FF8A24;
    --color-8: #191919;
}

/*text color*/
.text-color-1 {
    color: var(--color-1);
}

.text-color-4 {
    color: var(--color-4);
}

.text-color-5 {
    color: var(--color-5);
}

.text-color-7 {
    color: var(--color-7);
}

/*boarder*/
.border-color-7 {
    border-color: var(--color-7);
}

/*background color*/
.background-color-2 {
    background-color: var(--color-2);
}

.background-color-7 {
    background-color: var(--color-7);
}

.background-color-8 {
    background-color: var(--color-8);
}


/*font family*/
.font-family-Squada {
    font-family: "Squada One", sans-serif;
}

/*fonts*/
.font-size-20 {
    font-size: 20px;
}

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

.font-size-40 {
    font-size: 40px;
}

.font-size-96 {
    font-size: 96px;
}

.font-size-128 {
    font-size: 128px;
}

.font-size-240 {
    font-size: 240px;
}

/*fonts weight*/
.font-weight-800 {
    font-weight: 800;
}

.font-weight-600 {
    font-weight: 600;
}

.font-weight-500 {
    font-weight: 500;
}

.font-weight-400 {
    font-weight: 400;
}

.font-weight-300 {
    font-weight: 300;
}


/* nav bar*/
.nav-bar {
    top: 10%;
    width: 100%;
    display: flex;
    justify-content: space-around;
}

.nav-bar .logo {
    width: 150px;
    height: auto;
}

.nav-bar .button {
    background-color: transparent;
    border-radius: 50px;
    border: 1px solid;
    color: white;
    padding: 5px 10px;
    cursor: pointer;
    transition: background 0.3s ease;
}

/*hero section*/
.hero-section {
    position: relative;
    width: 100%;
    height: 100vh;
    background: linear-gradient(to bottom, rgba(24, 151, 230, 0.30) 0%, rgba(24, 151, 230, 0.8) 0%, #FFFFFF 100%);
    overflow: hidden;
    margin: 0;
    padding: 0;
}

@media (max-width: 768px) {
    .hero-section {
        background: linear-gradient(to bottom, rgba(255, 255, 255, 0.3) 0%, rgba(243, 243, 243, 0.8) 0%, #ececec 100%);
    }
}

/*hero section - images*/
.images-div {
    position: absolute;
    width: 100%;
}

.images-div img {
    width: 100%;
}

.cloud-div {
    z-index: 5;
    top: 5%;
    display: flex;
    justify-content: space-around;
}

.cloud-div .cloud-image {
    width: 600px;
    height: auto;
}

.cloud-div .cloud-image-2 {
    margin-top: -120px;
}

.mountain-div {
    z-index: 2;
    bottom: 0;
}

.bike-div {
    z-index: 6;
    bottom: 0;
}

@media (max-width: 768px) {
    .cloud-div .cloud-image {
        width: 100%;
        height: auto;
        scale: 200%;
    }

    .cloud-div .cloud-image-2 {
        width: 100%;
        height: auto;
        margin-top: 0;
        scale: 200%;
    }

    .mountain-div img,
    .bike-div img,
    .mountain-div {
        width: 100%;
        height: auto;

    }
}

.ground-cloud-div {
    z-index: 10;
    bottom: 0;
}

.hero-text-div {
    z-index: 5;
    position: absolute;
    left: 50%;
    top: 15%;
    transform: translate(-50%, -50%);
    text-align: center;
    color: white;
}

.hero-text-main-div {
    top: 25%;
}

.hero-text-div .hero-text-sub {
    font-size: clamp(14px, 2vw, 20px);
    font-weight: 600;
    letter-spacing: 2px;
    display: block;
    margin-bottom: 10px;
    color: rgba(0, 0, 0, 0.50);
}

.hero-text-div .hero-text-main {
    font-size: clamp(40px, 15vw, 200px);
    font-weight: 600;
}

@media (max-width: 768px) {
    .hero-text-div .hero-text-main {
        font-size: clamp(28px, 12vw, 120px);
        font-weight: 600;
        line-height: 1.2;
    }

    .hero-text-div .hero-text-sub {
        font-size: clamp(12px, 3vw, 16px);
        letter-spacing: 1px;
        margin-bottom: 8px;

    }
}


.hero-button-div {
    z-index: 10;
    top: 50%;
    left: 50%;
    width: 100%;
    position: absolute;
    padding: 10px;
}

.hero-button-div .hero-button {
    background-color: rgba(255, 255, 255, 0.30);
    border-radius: 50px;
    color: white;
    padding: 5px 10px;
    border: none;
    cursor: pointer;
    transition: background 0.3s ease;
}

.hero-button-div .hero-button:hover {
    background-color: rgba(255, 255, 255, 0.65);
}

/* Floating cloud animation */
@keyframes floatClouds {
    0% {
        transform: translateX(-50px);
    }

    50% {
        transform: translateX(50px);
    }

    100% {
        transform: translateX(-50px);
    }
}

.cloud-div .cloud-image {
    animation: floatClouds 20s ease-in-out infinite;
}

.cloud-div .cloud-image-2 {
    animation: floatClouds 25s ease-in-out infinite;
    animation-delay: 5s;
}

/*About us*/
.about-us .text-main {
    color: transparent;
    -webkit-text-stroke: 1px white;
}

.about-us .img {
    width: 100%;
}

.about-us .button {
    background-color: transparent;
    border-radius: 50px;
    border: 1px solid;
    color: white;
    padding: 5px 20px;
    cursor: pointer;
    transition: background 0.3s ease;
}

/*why choose us*/
.why-choose img {
    width: 160px;
    height: auto;
}

.why-choose .description {
    border-radius: 50px;
}

.section-separator-div {
    width: 100%;
}

.section-separator-image {
    width: 100%;
}

/*contact form*/
.contact-form {
    border-radius: 30px;
    border: none;
}

.contact-form input {
    margin-top: 5px;
    background-color: transparent;
    border-radius: 10px;
    border: 1px solid white;
    color: white;
}

.contact-form textarea {
    margin-top: 5px;
    background-color: transparent;
    width: 100%;
    height: 350px;
    border-radius: 10px;
    border: 1px solid white;
    color: white;
}

.contact-form button {
    width: 100%;
    color: white;
    border-radius: 10px;
    padding: 10px 0 10px 0;
    height: 70px;
}

.contact-form img {
    width: 100%;
    height: auto;
}

.contact-form .image-text {
    width: 70%;
    bottom: 10%;
    left: 10%;
    position: absolute;
    background-color: white;
    opacity: 70%;
    border-radius: 20px;
}


/* 1. Hide the default browser arrow */
details summary::-webkit-details-marker {
    display: none;
}

details summary {
    list-style: none;
}

/* 2. The Animation Core: Grid trick */
details .content-wrapper {
    display: grid;
    grid-template-rows: 0fr;
    /* Initial state: collapsed */
    transition: grid-template-rows 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

details[open] .content-wrapper {
    grid-template-rows: 1fr;
    /* Open state: expanded */
}

details .content-inner {
    overflow: hidden;
    /* Clips the text while animating */
}

/* 3. Icon Rotation */
details .fa-chevron-down {
    transition: transform 0.5s ease;
}

details[open] .fa-chevron-down {
    transform: rotate(180deg);
}