@import url('https://fonts.googleapis.com/css2?family=Baloo+2:wght@400..800&family=Baloo+Bhaijaan+2:wght@400..800&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');

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
body{
    width: 100%;
    height: 100vh; 
    font-family: "Poppins", serif;
    font-weight: 200;
    font-style: normal;
}
        /* search suggestions and .hero section */
        /* Hero Section */
            .hero {
                /* background-color: #18afd3; */
                background-size: cover;
                background-position: center top;
                background-repeat: no-repeat;
                display: flex;
                flex-direction: column;
                justify-content: center;
                align-items: center;
            }

            .hero .mid {
                display: flex;
                align-items: center;
                gap: .2rem;
            }

            

            /* Icon styling */
            .mid > i {
                background-color: #ffffff;
                padding: .9rem;
                border-radius: .4rem;
                cursor: pointer;
            }

            .mid > i:hover {
                text-decoration: underline;
                background-color: #18afd3;
                color: white;
                text-decoration: none;
            }

            /* Bottom category list */
            .hero .hero-btm {
                margin-top: .6rem;
            }

            .hero-btm > ul {
                display: flex;
                flex-wrap: wrap;
                gap: 2rem;
            }

            .hero-btm li a {
                color: black;
                font-weight: 600;
                transition: all ease-in-out .2s;
            }

            .hero-btm li a:hover {
                text-decoration: underline;
                color: black;
            }


        /* end search suggestion and .hero section */

/* body section */
.body-section .hero-section{
    height: 100vh;
    width: 100%;
    display: flex;
}
/* left section (content)  */
.left{
    flex: 1;
    padding: 1rem;
}
.left > .content{
    height: 100%;
    width: 80%;
    margin: auto;
    padding: 1rem 1.6rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
.content > .top-text{
    background-color: rgb(238, 236, 236);
    font-weight: 600;
    font-size: small;
    padding: .2rem;
    border-radius: .2rem;
}
.content > .text p{
font-size: 1.5vw;
font-weight: 500;
opacity: 0.6;
}
.content .title > h1{
    font-size:2.6rem;
    line-height: 3.2rem;
}

.content > .button > button{
    margin-top: 1rem;
    padding: 0.8rem 1.5rem;
    background-color: blue;
    border-radius: .2rem;
    color: white;
    font-weight: 600;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    &:hover{
        background-color: rgb(7, 7, 197);
    }
}
/* right section (image) */
.right{
    display: flex;
    align-items: center;
    justify-content: start;
    flex: 1;
}
.right img{
    height: 28vw;
}

/* body section one styling */
.body-sec-one{
    /* margin-top: rem; */
    /* height: 70vh; */
    width: 100%;
    display: flex;
    flex-direction: column;
    /* background-color: rgb(0, 209, 209); */
    justify-content:start;
    align-items: center;
    gap: 0.2rem;
}
/* body section one upper section */
.body-sec-one > .upper{
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    width: 40%;
}
.upper .workflow{
    color: blue;
    background-color:rgba(200, 210, 216, 0.61) ;
    width: 16%;
    font-weight: 400;
    border-radius: 0.2rem;
}
.upper .body-sec-one-h1{
    font-size: medium;
}
/* body section one lower section */
.body-sec-one .lower{
    display: flex;
    width: 100%;
    justify-content: space-evenly;
    align-items: center;
}
/* bg color of second card */
.lower .second-img{
    box-shadow: 1px 1px 20px 1px rgba(156, 155, 155, 0.295);
}
.lower .first-img , .lower .second-img  , .lower .third-img {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 22%;
    border-radius: 0.4rem;
    padding: 1rem;
    transition: all .2s ;
    &:hover{
        box-shadow: 1px 1px 20px 1px rgba(156, 155, 155, 0.295);
    }
}
.lower .first-img .first-img-count , .lower .second-img .second-img-count  , .lower .third-img .third-img-count{
color: blue;
font-size: xx-large;
font-weight: 800;    
}
.lower .first-img img , .lower .second-img img , .lower .third-img img{
    width: 6rem;
    /* border: 1px solid rgb(218, 217, 217); */
    padding: .4rem;
}
.lower .first-img .first-img-title h1 , .lower .second-img .second-img-title h1 , .lower .third-img .third-img-title h1{
    font-size: medium;
    text-align: center;
}
.lower .first-img  .first-img-content , .lower .second-img .second-img-content , .lower .third-img .third-img-content{
    font-size: small;
    text-align: center;
}

/* body-section-two styling */
.body-section .body-section-two{
    width: 100%;
    margin-top: 1rem;
    display: flex;
    align-items: start;
    justify-content: center;
}
.body-section-two .left{
    padding: 0 4rem;
}
.body-section-two .left .left-content > .left-content-title{
    font-weight: 800;
    font-size:x-large;
} 
.body-section-two .right{
display: flex;
align-items: center;
justify-content: center;
/* align-self: self-start; */
}
.body-section-two .right > img{
   object-fit: cover;
}

/* body-section-three styling */
.body-section .body-section-three{
    /* height: 0vh; */
    margin-top: 1rem;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: start;
    /* background-color: lightgreen; */
}
.body-section-three .left{
    padding: 0 4rem;
}
.body-section-three .left .left-content > .left-content-title{
    font-weight: 800;
    font-size: x-large;
} 
.body-section-three .right{
display: flex;
align-items: center;
justify-content: center;
}
.body-section-three .right > img{
    object-fit: cover;
}


/* body-section-four styling */
.body-section .body-section-four{
    /* height: 100vh; */
    margin-top: 1rem;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    /* background-color: lightgreen; */
}
.body-section-four .left{
    padding: 0 4rem;
}
.body-section-four .left .left-content > .left-content-title{
    font-weight: 800;
    font-size: x-large;
} 
.body-section-four .right{
display: flex;
align-items: center;
justify-content: center;
}
.body-section-four .right > img{
    object-fit: cover;
}

/* body-section-five styling */
.body-section .body-section-five{
    /* height: 100h; */
    margin-top: 1rem;

    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    /* background-color: lightgreen; */
}
.body-section-five .left{
    padding: 0 4rem;
}
.body-section-five .left .left-content > .left-content-title{
    font-weight: 800;
    font-size: x-large;
} 
.body-section-five .right{
display: flex;
align-items: center;
justify-content: center;
}
.body-section-five .right > img{
    object-fit: cover;
}

/* body-section-six styling */
.body-section .body-section-six{
    /* height: 100vh; */
    margin-top: 1rem;

    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    /* background-color: lightgreen; */
}
.body-section-six .left{
    padding: 0 4rem;
}
.body-section-five .left .left-content > .left-content-title{
    font-weight: 800;
    font-size: x-large;
} 
.body-section-six .right{
display: flex;
align-items: center;
justify-content: center;
}
.body-section-six .right > img{
    object-fit: cover;
}

/* button section */
.button-section{
    background-color: rgb(212, 235, 250);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    /* padding: 1rem 0; */
    height: 46vh;
}
.button-section .button-title{
    font-weight: 800;
}
.button-getstarted{ 
    display: flex;
    /* flex-direction: column; */
    gap: 0.6rem;
    align-items: center;
    justify-content: center;
    background-color: blue;
    border-radius: 2rem;
    padding: 0.6rem 1.2rem;
    color: white;
    border: none;
    &:hover{
        background-color: rgb(42, 42, 226);
    }
}


/* responsiveness */
@media  only screen  and (max-width: 757px){
    .hero-section{
        flex-direction: column;
    }
    .content > .text p{
    font-size: 2vw;
    }
    .content .title > h1{
        font-size:2rem;
        line-height: 2rem;
    }
    
    .content > .button > button{
        padding: 0.4rem 1rem;
    }
    /* right section (image) */
    .right{
        justify-content: center;
    }
    .right img{
        object-fit: contain;
    }

    /* b.one */
    .body-sec-one{
        margin-top: 1rem;
        /* height: 170vh; */
        justify-content: start;
    }

    .upper .workflow{
        width: 10px;

    }
    .upper .body-sec-one-h1 h1{
    font-size: medium;
}
    .lower .first-img , .lower .second-img  , .lower .third-img {
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 22%;
        border-radius: 0.4rem;
        padding: 1rem;
    }
    .lower .first-img .first-img-count , .lower .second-img .second-img-count  , .lower .third-img .third-img-count{
    color: blue;
    font-size: x-large;
    font-weight: 800;    
    }
    .lower .first-img img , .lower .second-img img , .lower .third-img img{
        width: 6rem;
    }
    .lower .first-img .first-img-title h1 , .lower .second-img .second-img-title h1 , .lower .third-img .third-img-title h1{
        font-size: large;
    }
    .lower .first-img  .first-img-content , .lower .second-img .second-img-content , .lower .third-img .third-img-content{
        font-size: smaller;
        text-align: center;
    }
    /* b.two */
    .body-section .body-section-two{
        flex-direction: column;
        margin-top: 2rem;
        align-items: center;
    }
    .body-section-two .left .left-content {
        text-align: center;
    }
    /* b.three */
    .body-section .body-section-three{
        flex-direction: column-reverse;
        margin-top: 2rem;
    }
    .body-section-three .left .left-content {
        text-align: center;
    }
    /* b.four */
    .body-section .body-section-four{
        flex-direction: column;
        margin-top: 2rem;
    }
    .body-section-four .left .left-content {
        text-align: center;
    }
    /* b.five */
    .body-section .body-section-five{
        flex-direction: column-reverse;
        margin-top: 2rem;
    }
    .body-section-five .left .left-content {
        text-align: center;
    }
    /* b.six */
    .body-section .body-section-six{
        flex-direction: column;
        margin-top: 2rem;
    }
    .body-section-six .left .left-content {
        text-align: center;
    }


    /* button */
    .button-getstar{
        font-size: small;
    }
}