* { box-sizing: content-box; margin: 0; padding: 0; }
html, body { font-family: "Poppins", sans-serif; font-weight: 400; font-style: normal; font-size: 14px; }
body{
    background-image: linear-gradient(100.62deg, rgb(249 215 175 / .3) 0%, rgb(214 202 245 / .3) 24.03%, rgb(198 241 255 / .3) 45.73%, rgb(248 242 222 / .3) 69.05%, rgb(212 179 253 / .3) 100.44%);
}
.container{ max-width: 1170px; margin: 0 auto;}
.row{ margin: 0 -10px; display: flex;}
.header-top{ background-color: #684DF4; padding: 12px; color: #fff;}
.d-flex{ display: flex;}
.flex-between{ display: flex; justify-content: space-between;}
.flex-center{ display: flex; justify-content: center; align-items: center;}
.flex-between-center{ display: flex; justify-content: space-between; align-items: center;}

.btn-primary{ display: inline-block; border-radius: 2px; text-decoration: none; background-color: #684DF4; color: #fff; padding: 8px 24px;}
.btn-primary:hover{ background-color: #4024ca;}


.img-fluid{ max-width: 100%; height: auto;}

header{ background-color: #E1EAFF;}
.logo-wrapper{ width: 160px;}

.menu-outer{ padding: 15px 0;}

.header-menu{ display: flex; justify-content: space-between; column-gap: 12px; align-items: center;}
.menu-wrapper{ flex: 1; display: flex; justify-content: flex-end;}
.menu-wrapper ul{ list-style: none; margin: 0; padding: 0; text-transform: uppercase;}
.menu-wrapper ul li{ display: inline;}
.menu-wrapper ul li a { color: black; display: inline-block; padding: 8px 24px; text-decoration: none;}
.menu-wrapper ul li:hover a{ background-color: #816BF6; color: #fff;}

main{
    min-height: 600px;
}

.slider-wrapper{ padding: 40px 0;}
.slider-outer{ display: flex; justify-content: space-between; align-items: center;}
.slider-left{ flex: 5;}
.slider-right{ flex: 3;}

.slider-left .h4{ font-size: 20px; color: #4024ca; font-weight: bold; }
.slider-left .hero-title{ font-size: 50px; font-weight: bold; color: #141D38;}
.slider-left .hero-title span{  color: #4024ca;}
.slider-left .hero-intro{ color: #888; margin-bottom: 40px;}
.slider-left .btn-primary{ padding: 12px 40px; font-size: 20px;}


.about-wrapper{ display: flex; justify-content: space-between; column-gap: 20px;}
.about-box{ align-items: center; display: flex; flex-direction: column; row-gap: 12px; border: 2px solid #D9E0F3; border-radius: 4px; padding: 20px; flex: 1;}

.about-box .about-img{ background-color: #fff; border-radius: 100px; width: 100px; height: 100px; display: flex; justify-content: center; align-items: center;}
.about-img img{ width: 60px; height: 60px;}

.footer-top{ background-color: #4024ca; padding: 30px 0; }
.fbox{ display: flex; column-gap: 20px; align-items: center; color: #ddd;}
.icon-box{ width: 60px; height: 60px; background-color: #fff; border-radius: 4px; box-shadow: -8px -8px 0 #080e1c; color: #000; font-size: 30px; transition: all ease-in 0.5s; }
.icon-box:hover{ box-shadow: none;}
.fbox-info{ font-size: 16px; font-weight: bold; color: #fff;}

.footer{
    background-color: #080e1c;
    color: #fff;
    position: relative;
    overflow: hidden;
    padding-top: 50px;
    padding-bottom: 40px;
}

.footer1{ position: absolute; left: 0; top: 0; }
.footer-col{ width: 25%; padding: 0 15px;}
.footer-wrapper{ column-gap: 20px; margin-left: -15px; margin-right: -15px;}
.f-heading{ font-size: 20px; font-weight: bold; margin-bottom: 15px;}

footer ul{ margin: 0; padding-left: 20px;}
footer ul li{ margin-bottom: 12px;}
footer ul li a{ color: #ddd; text-decoration: none;}
footer ul li a:hover{ color: #fff;}

.copyright{
    background-color: #141D38;
    color: #fff;
    font-size: 12px;
    padding: 12px;
}

.copyright a{ display: inline-block; color: #fff; padding: 0 10px; text-decoration: none;}