@import url('https://fonts.googleapis.com/css2?family=Readex+Pro:wght@160..700&display=swap');
        html, body{
            margin: 0;
            font-family: "Readex Pro";
        }
        .top{
            background: url(bg.svg) bottom center;
            min-height: 800px;
        }

        .container{
            max-width: 1440px;
            margin: 0 auto;
            padding: 40px;
        }

        .logo {
            padding: 80px 0 0 0;
            text-align: center;
        }

        h1{
            color: #2A4F88;
            max-width: 800px;
            text-align: center;
            font-size: 68px;
            font-style: normal;
            font-weight: 100;
            line-height: 120%;
            margin: 0 auto;
            padding: 80px 0 40px 0;
        }

        h2{
            color: #2A4F88;
            text-transform: uppercase;
            font-size: 32px;
            letter-spacing: 8px;
            font-weight: 300;

        }

        h3{
            color: #2A4F88;
            text-transform: uppercase;
            font-size: 14px;
            letter-spacing: 2px;
            font-weight: 400;
        }

        p{
            font-size: 18px;
            color: #555555;
            font-weight: 300;
            line-height: 1.6;
            margin: 0;

        }

        .top p{
            text-align: center;

        }

        .stars{
            text-align: center;
            margin: -160px 0px 160px 0px;
        }

        .stars img{
            max-width: 480px;
        }

        .collab{
            display: flex;
            flex-direction: row;
            justify-content: center;
            align-items: center;
            flex-wrap: wrap;
            gap: 80px;
            color: #2A4F88;
            text-transform: uppercase;
            font-size: 14px;
            letter-spacing: 2px;
        }

        .collab a {
            border: none;
        }

        .transformation{
            text-align: center;
            margin: 120px 0px;
        }

        .pillars {
            display: flex;
            justify-content: center;
            align-items: flex-start;
            gap: 80px;
            color: #2A4F88;
            flex-direction: row;
            font-size: 24px;
            font-weight: 800;
            margin-top: 80px
        }

        .pillars div {
            display: flex;
            justify-content: center;
            align-items:center;
            gap: 16px;
            flex-direction: column;
        }

        .maxw{
            max-width: 800px;
            margin: 0 auto;
        }

        .bottomin {
            background: #2A4F88 url(bg.jpg) no-repeat center center;
            min-height: 1200px;
        }

        .bottom {
            background: #00000080;
            min-height: 1200px;
            color: white;
            font-size: 56px;
            font-weight: 600;
            margin-top: 80px;
            display: flex;
            flex-direction: row;
            flex-wrap: nowrap;
            align-items: center;
            justify-content: center;
        }

        .bottom .container{
            display: flex;
            flex-direction: row;
            flex-wrap: nowrap;
            justify-content: center;
            align-items: center;
        }

        .bottom h3, .bottom strong, .bottom p{
            color: white;
        } 

        .leftt, .rightt{
            padding: 40px;
            flex: 1;
        }

        .belief{
            padding-bottom: 24px;
            line-height: 1.1;
        }

        .rightt{
            font-size: 24px;
            line-height: 2;
        }
        a{ color: white; text-decoration: none; border-bottom: 1px dashed #6BE4AB ;}

        .footer{
            background: #2A4F88;
            padding: 40px;
        }

        .footer .container{
            display: flex;
            flex-direction: row;
            flex-wrap: nowrap;
            justify-content: space-between;
            align-items: center;
        }
        
        .footer p{
            color: #ffffff50;
        }


        @media only screen and (max-width: 700px) {
            
            .container{
                padding: 24px;
            }
            h1{ font-size: 40px;}
            .logo{ padding-top: 40px;}
            .stars img{ max-width: 300px !important;}
            .stars{ margin: -100px 0px 40px 0px;}
            .collab {  gap: 24px; margin-bottom: 80px;}
            .collab img{     height: 40px; }
            h2{ font-size: 22px; letter-spacing: 4px;}
            .pillars {    justify-content: center;    align-items: center;    gap: 40px; flex-direction: column; margin-top: 40px; }
            .transformation {    margin: 00px 0px;        }
            .bottom .container {
                display: flex;
                flex-direction: column;
                flex-wrap: nowrap;
                justify-content: center;
                align-items: center;
            }
            .leftt, .rightt {
                padding: 0px;
                flex: 1;
                text-align: center;
            }
            .bottom{    font-size: 36px;}
            .footer .container {
                display: flex;
                flex-direction: column;
                flex-wrap: nowrap;
                justify-content: center;
                align-items: center;
                text-align: center;
                gap: 24px;
            }
            .footer{ padding: 0}
            .bottom, .bottomin, .top{ min-height: auto; }
            .bottom{padding: 80px 0;}
            .footer img{height: 48px}
            .top{padding-bottom: 80px;}
            .collab div:first-child {  width: 100%; text-align: center; }

        }
        .lang a{ color:#2A4F88; letter-spacing: 4px; margin: 24px; }
        .lang { color:#6BE4AB; text-align: center; padding-top: 40px;}