body{ 
    background: #2563EB;
    background: linear-gradient(165deg,rgba(37, 99, 235, 1) 0%, rgba(59, 130, 246, 1) 50%, rgba(34, 211, 238, 1) 100%);
    font-family: 'spartanregular';
    height: 100%;
    margin: 0;
    padding: 0;
    position: relative;
 }

 *, ::after, ::before {
	box-sizing:border-box
}

.container{ width: 100%; max-width: 1180px; margin: 0 auto;}

h1{font-family: 'spartanbold'; font-size: 46px; color: #ffffff; font-weight: normal; text-align: center; margin: 0px; padding: 0px;}
h1 span{ display: block; color: #a5f3fc;}

.bubble_1{width: 4rem; height: 4rem; position: absolute; top:5rem; left:2.5rem; background-color:#93c5fd4d; border-radius: 9999px; animation: pulse 2s cubic-bezier(.4, 0, .6, 1) infinite;}
.bubble_2{width: 2rem; height: 2rem; position: absolute; top:10rem; right:5rem; background-color:#67e8f966; border-radius: 9999px; animation: bounce 1s infinite;}
.bubble_3{width: 3rem; height: 3rem; position: absolute; bottom:8rem; left:5rem; background-color:#bfdbfe4d; border-radius: 9999px; animation: pulse 2s cubic-bezier(.4, 0, .6, 1) infinite;}
.bubble_4{width: 5rem; height: 5rem; position: absolute; right:8rem; bottom:5rem; background-color:#a5f3fc33; border-radius: 9999px; animation: bounce 1s infinite;}

header{width: 100%; margin: 0; padding: 1rem 0px;}
header .logo{ width: 100%; text-align: center; margin: 0; padding: 0px;}
header .logo img{ width: 100%; max-width: 160px;}

section{width: 100%; margin: 0; padding: 1rem 0px;}
.blue_school_poster{ width: 100%; text-align: center; margin: 0px 0px 2rem 0px; padding: 0;}
.blue_school_poster img{ width: 100%; max-width: 450px;}
.learn_more_btn{ width: 100%; text-align: center; margin: 2.5rem 0px 2rem 0px; padding: 0px;}
.learn_more_btn a{font-family: 'spartanbold'; font-size: 16px; color: #ffffff; border: 2px solid #ffffff; border-radius: 50px; text-decoration: none; margin: 0px 6px 0px 6px; padding: 16px 26px;}
.learn_more_btn a:hover{ background-color: #ffffff; color: #2563eb;}


@keyframes bounce{
    0%,to
    {
        transform:translateY(-25%);
        animation-timing-function:cubic-bezier(.8,0,1,1)
    }
    50%
    {
        transform:none;animation-timing-function:cubic-bezier(0,0,.2,1)
    }
    }
    .animate-bounce{
        animation:bounce 1s infinite
    }
 @keyframes pulse
    {50%
        {
            opacity:.5
        }
    }


@media (max-width: 1160px) {
    .container{max-width: 960px;}

    h1{ font-size: 42px;}

    header .logo img {max-width: 150px;}
    .blue_school_poster img {max-width: 400px;}

}

@media (max-width: 991px) {    
    body{ height: 100vh;}

    .container{max-width: 720px;}

    h1{ font-size: 38px;}
    .bubble_4{right:6rem;}
}

@media (max-width: 767px) {
    body{ height: 100%;}
    .container{max-width: 540px;}

    h1{ font-size: 34px;}

    header{ padding-bottom: 0;}
    .learn_more_btn a{ display: block; padding: 14px 22px; margin: 10px 0px;}
    .bubble_2{right:3rem;}
    .bubble_3{left:3rem;}
    .bubble_4{ width: 4rem; height: 4rem; right:4rem;}
}

@media (max-width: 599px) {
    h1{ font-size: 30px;}

    header .logo img {max-width: 120px;}
    .blue_school_poster img {max-width: 300px;} 
    .learn_more_btn{ margin: 1.4rem 0px;}   

    .bubble_1 {width: 3rem; height: 3rem; top: 3rem; left: 2rem;}
    .bubble_2{right:2rem;}
    .bubble_3{left:2rem;}
    .bubble_4{ width: 4rem; height: 4rem; right:3rem; bottom: 3rem;}

}

@media (max-width: 479px) {
    .container{max-width: 100%; padding-left: 1rem; padding-right: 1rem;}
    h1{ font-size: 26px;}
    .learn_more_btn a{ font-size: 14px;}
}