@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700&display=swap');



* {
    font-family: 'Montserrat', sans-serif;
    font-size: clamp(0.1rem, 2vw + 0.5rem, 16px);
}



/* header Starts from here */

@keyframes downEffect {
    from {
        padding-top: 70px;
        transform: translateY(-90px);
        opacity: 0;
    }
    
    to {
        padding-top: 0;
        transform: translateY(0);
        opacity: 1;
    }
}

header {
    background-color: #FAFAFA;
    height: 14vh;
    border-radius: 50px;
    animation: downEffect 0.4s ease;
}

.Logo img {
    max-width: 100px;
    height: auto;
}

.headerdiv2 {
    background-color: #FEFEFF;
    height: 60px;
}

/* header Ends here */





/* main Starts from here */

main {
    gap: 5rem;
}

/* hero1 Starts from here */
.hero1 {
    height: 91vh;
    max-height: auto;
    background: #CEE5EC;
    background: linear-gradient(90deg, rgba(206, 229, 236, 1) 0%, rgba(250, 217, 186, 1) 100%);
}

@keyframes swipeRight {
    from {
        transform: translateX(-50px);
        opacity: 0;
    }

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

.hero1 p:first-of-type {
    animation: swipeRight 0.3s ease forwards;
}

h2 {
    font-size: clamp(2rem, 3vw + 1rem, 67px);
    font-weight: 600;
    animation: swipeRight 0.4s ease forwards;
}

.hero1 p {
    animation: swipeRight 0.5s ease forwards;
}

.hero1>div>div {
    animation: swipeRight 0.6s ease forwards;
}

input {
    height: 3.3rem;
}


.hero1div1 {
    padding: 0 3.5rem 0.5rem 3rem;
}


@keyframes effect {

    from {
        transform: translateX(100px);
        opacity: 0;
    }

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

.hero1 img {
    animation: effect 0.5s ease forwards;
}

/* hero1 Ends here */





/* hero2 Starts from here */

h3 {
    font-size: clamp(1.8rem, 2vw + 1rem, 50px);
    font-weight: 600;
}

.hero2 img {
    width: 4rem;
}

/* hero2 Ends here */





/* hero3 Starts from here */

.card-width {
    width: 447px;
    scroll-behavior: smooth;
}

.d-flex::-webkit-scrollbar {
    display: none;
}

.hero3-CardsImgdiv {
    aspect-ratio: 1/.6;
    background: #C1DEE8;
    background: linear-gradient(90deg, rgba(193, 222, 232, 1) 0%, rgba(255, 255, 255, 1) 67%, rgba(251, 217, 185, 1) 100%);
}

.hero3-CardsImgdiv img {
    transform: translateY(-75px);
}



.star {
    width: 18px;
    height: 18px;
    background: #F59914;
    clip-path: polygon(50% 0%,
            61% 35%,
            98% 35%,
            68% 57%,
            79% 91%,
            50% 70%,
            21% 91%,
            32% 57%,
            2% 35%,
            39% 35%);
}

.star-Grey {
    width: 18px;
    height: 18px;
    background: rgb(162, 162, 162);
    clip-path: polygon(50% 0%,
            61% 35%,
            98% 35%,
            68% 57%,
            79% 91%,
            50% 70%,
            21% 91%,
            32% 57%,
            2% 35%,
            39% 35%);
}

/* hero3 Ends here */





/* hero5 Starts from here */

.hero5 {
    height: 69vh;
    max-height: auto;
    background: #CEE5EC;
    background: linear-gradient(90deg, rgba(206, 229, 236, 1) 0%, rgba(250, 217, 186, 1) 100%);
}

.hero5>div>div {
    width: 75%;
}

.hero5 img {
    transform: translateY(-32px) scale(1.13);
}

/* hero5 Ends here */

/* main Ends here */





@media (max-width: 768px) {

    /* header Start from here */
    .headerForOffcanvas {
        background-color: #FAFAFA;
    }

    .headerdiv2 {
        height: auto;
    }

    /* I put this here so other will find this easily cause its for small screen */
    .searchSvgForSmallScreen {
        width: 30px;
    }

    /* header Ends here */





    /* hero1's and hero5's height adjustment for gradient background */
    .hero1, .hero5 {
        height: auto;
    }





    /* hero3 Starts from here */
    .hero3 button {
        transform: scale(0.6);
    }
    /* hero3 Ends here */





    /* hero5 Starts from here */
    .hero5>div>div {
        width: 94%;
    }
    /* hero5 Ends here */
}










@media (max-width: 480px) {

    /* hero1 Start from here */
    .hero1div1 {
        padding: 3rem 1rem 0.5rem 1.5rem;
    }

    /* hero1 Ends here */





    /* hero3 Start from here */
    .card-width {
        width: 75vw;
    }

    /* hero3 Ends here */





    /* hero5 Start from here */
    .hero5 img {
        transform: translateY(0px) scale(1);
    }

    /* hero5 Ends here */
}