@import url('https://fonts.googleapis.com/css2?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&family=Work+Sans:ital,wght@0,100..900;1,100..900&display=swap');
*{
    margin: 0;
    padding: 0;
    font-family: "Work Sans", sans-serif;
}
li{
    list-style: none;
}
a{
    text-decoration: none;
    color: #111111;
}
img{
    max-width: 100%;
    height: auto;
}

/* common area styles  */

nav, .banner-top, .banner-bottom, .online, .instant, .anytime, .careers, .types, .footer{
    width: 80%;
    margin: 0 auto;
}
nav, .banner-top, .banner-bottom{
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.banner-top-title, .gradiant{
    background: linear-gradient(to bottom, #F948B2, #8758F1);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
.primary-btn, .secondary-btn{
    color: #ffffff;
    font-size: 20px;
    font-weight: 600;
    padding: 20px 40px;
    border: 0;
    border-radius: 30px;
}







/* header area */
header{
    background-color: #FFFFFF;
}
nav{
    padding: 25px 0;
}
.logo{
    display: flex;
    align-items: center;
    gap: 10px;
}
.nav-title{
    font-size: 45px;
    color: #0B0223;
    font-weight: 700;
}
.color{
    color: #FF42A5;
}
nav > ul{
    display: flex;
    align-items: center;
    gap: 10px;
}
.follow{
    padding: 10px;
    background-color: #E7E6E9;
    border-radius: 5px;
}
nav li a{
    color: #3C354F;
    font-size: 18px;
    font-weight: 500;
}
nav li a i{
    margin-left: 10px;
}

/* banner area styles  */
.banner{
    background-image: url('images/Group\ 14.png');
    background-repeat: no-repeat;
}
.banner-top{
    gap: 20px;
}
.banner-top-subtitle{
    font-size: 48px;
    font-weight: 600;
    color: #0B0223;
}
.banner-top-title{
    font-size: 95px;
    font-weight: 800;
}
.banner-top ul{
    margin: 20px 0;
}
.banner-top li{
    margin-top: 10px;
    font-size: 20px;
    color: #534C64;
    font-weight: 500;
}
.primary-btn{
    background-color: #F948B2;
    margin: 20px 0;
}
.secondary-btn{
    background-color: #4EC5F7;
    margin-left: 20px;
}

.banner-bottom{
    gap: 20px;
    padding: 20px 0;
}
.banner-bottom-content{
    width: 50%;
    text-align: end;
}
.title{
    font-size: 48px;
    font-weight: 700;
}
.description{
    color: #534C64;
    font-size: 18px;
    margin: 20px 0;
}
.banner-bottom-motto{
    font-size: 24px;
    color: #534C64;
}
.banner-bottom-motto-title{
    font-size: 32px;
    font-weight: 700;
    color: #534C64;
}

/* online area styles  */
.online{
    margin-top: 100px;
    margin-bottom: 100px;
}
.online-content{
    text-align: center;
}
.online-images{
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    padding: 10px 0;
}
.online-image{
    width: 390px;
}
.image-description{
    color: #534C64;
    font-size: 20px;
    font-weight: 500;
    padding: 15px;
}

/* instant area styles and anytime area  */
.instant, .anytime{
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.instant-content{
    width: 30%;
    text-align: end;
}
.instant-image, .anytime-image{
    width: 40%;
    position: relative;

}
.anytime-image img, .instant-image img{
    margin-left: 30px;
}
.badge{
    position: absolute;
    left: -20%;
    bottom: -20%;
}
.anytime{
    margin-top: 150px;
    margin-bottom: 150px;
}
.anytime-content{
    width: 40%;
    text-align: start;
}

/* careers area styles  */
.careers-area{
    background-color: #FF42A5;
}
.careers{
    display: flex;
    align-items: center;
    gap: 20px;
}
.careers-content, .careers-image{
    width: 50%;
}
.career-title, .career-description{
    color: #FFFFFF;
}
.placement{
    display: flex;
    justify-content: space-between;
}
.placement li a{
    color: #FFFFFF;
    font-weight: 600;
}
.place{
    text-align: end;
}
.career-btn{
    background-color: #fff;
    color: #FF42A5;
}

/* types area styles  */
.types{
    margin-top: 70px;
    margin-bottom: 70px;
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}
.btn-type{
    display: flex;
    justify-content: space-around;
    align-items: center;
    gap: 20px;
    border: 1px solid red;
    padding: 10px 20px;
    border-radius: 50px;

}
/* footer area styles  */
footer{
    background-color: #0B0223;
}
.footer{
    padding: 100px 0;
    margin: 0 auto;
}
.footer-logo{
    justify-content: center;
}
.footer-title{
    color: #FFFFFF;
}
.footer ul{
    margin: 0 auto;
    gap: 10px;
    flex-wrap: wrap;
}

.footer a{
    color: #FFFFFF;
}
.footer p{
    text-align: center;
    color: #FFFFFF;
}

/* responsive area  */

@media screen and (max-width: 576px) {
    nav, nav > ul{
        flex-direction: column;
        margin-top: 20px;
    }
    .banner{
        background-image: none;
    }
    .banner-top{
        flex-direction: column-reverse;
        gap: 50px;
    }
    .banner-top-content{
        background-image: url('images/Group\ 14.png');
        text-align: center;
        padding: 20px;
    }
    .banner-bottom, .online-images, .instant{
        flex-direction: column;
    }
    .anytime{
        flex-direction: column-reverse;
    }
    .banner-bottom-content, .online, .instant-content, .anytime-content{
        width: 100%;
        text-align: center;
    }
    .instant-image, .anytime-image{
        width: 100%;
    }
    .anytime-image img, .instant-image img{
        margin-left: 30px;
    }
    .badge{
        width: 50%;
    }
    .careers{
        flex-direction: column;
        padding: 20px 0;
    }
    .careers-content, .careers-image{
        width: 100%;
    }

}

@media screen and (min-width: 577px) and (max-width: 992px) {
    nav, nav > ul{
        flex-direction: column;
        margin-top: 20px;
    }
    .banner{
        background-image: none;
    }
    .banner-top{
        flex-direction: column-reverse;
        gap: 50px;
    }
    .banner-top-content{
        background-image: url('images/Group\ 14.png');
        text-align: center;
        padding: 20px;
    }
    .banner-bottom, .online-images, .instant{
        flex-direction: column;
    }
    .anytime{
        flex-direction: column-reverse;
    }
    .banner-bottom-content, .online, .instant-content, .anytime-content{
        width: 100%;
        text-align: center;
    }
    .instant-image, .anytime-image{
        width: 100%;
    }
    .anytime-image img, .instant-image img{
        margin-left: 30px;
    }
    .badge{
        width: 50%;
    }
    .careers{
        flex-direction: column;
        padding: 20px 0;
    }
    .careers-content, .careers-image{
        width: 100%;
    }

}