@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');

:root{
    --heading: 2.2rem;
    --subheading: 1.4rem;
    --font1A: "Roboto",sans-serif;
    --fontweight: bold;
    --primarycolor1: #f0eeee;
    --primarycolor2: #000041;
    --primarycolor3: #006eff;
    --mediaparagraph: 1rem;
    --paragraphs:1rem;
}
*{
    padding: 0%;
    margin: 0%;
    box-sizing: border-box;
}

body{
    width: 100%;
    height: 100vh;
    background-color: var(--primarycolor1);
}

main {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 60px;
}

/* *********************************************************************************************************** */
                                     /* MAIN CONTAINER */
/* *********************************************************************************************************** */

main {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 60px;
}

section{
    border-bottom: 1px solid var(--primarycolor2);
}
section h2{
    font-family: var(--font1A);
    color: var(--primarycolor2);
    text-transform: capitalize;
    margin-bottom: 20px;
}

@media (min-width:620px) and (max-width:920px) {
    section h2{
        font-size: var(--heading);
        margin-bottom: 30px;
    }
}

.hero {
    width: 100%;
    height: 90vh;
    position: relative;
}
.hero .image,img{
    width: 100%;
    height: 100%;
}
.hero .tittle{
    width: 100%;
    height: 100%;
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.hero .tittle h1,p{
    color: var(--primarycolor1);
    font-size: var(--heading);
    font-family: var(--font1A);
    margin: 40px auto;
    text-shadow: 2px 2px 2px var(--primarycolor2);
}
.hero .tittle p{
    color: var(--primarycolor1);
    font-size: var(--paragraphs);
    font-weight: bold;
    text-shadow:  1px 1px 4px var(--primarycolor2);
}

.hero .tittle a{
    padding: 10px 30px;
    font-size: 2rem;
    font-family: var(--font1A);
    color: var(--primarycolor1);
    background-color: var(--primarycolor2);
    text-decoration: none;
    text-transform: capitalize;
    margin-top: 20px;
    box-shadow: 0 0 10px 2px var(--primarycolor1);
}

/* about section*/
section .image,.text{
    width: 50%;
    height: 500px;
    margin: 20px;
}

section .image img{
    width: 100%;
    height: 100%;
}

section .text{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

section .text h2{
    color: var(--primarycolor2);
    font-size: var(--subheading);
    font-family: var(--font1A);
    text-transform: capitalize;
}

section .text p{
    color: var(--primarycolor2);
    font-size: 1.4rem;
    font-family: var(--font1A);
    text-shadow: none;
}

section .about,.vission,.mission{
    display: flex;
}

section .vission{
    flex-direction: row-reverse;
}

section .vission .text .links i{
    font-size: 1.5rem;
    margin: 20px;
}

section .vission .text .links > :nth-child(1){
    color: rgb(0, 132, 255);
}
section .vission .text .links > :nth-child(2){
    color: rgb(255, 37, 37);
}
section .vission .text .links > :nth-child(3){
    color: rgb(0, 132, 255);
}

/* ************************************************************************************ */
                                          /* @ MEDIA QUERY */
/* ************************************************************************************ */

@media screen and (max-width:600px) {

    .hero {
        width: 100%;
        height: 43vh;
        position: relative;
    }
    .hero .tittle h1,p{
        margin: 10px auto;
    }
    .hero .tittle{
        text-align: center;
    }
    .hero .tittle h1{
        font-size: 1.4rem;
    }
    .hero .tittle p{
        font-size: 1rem;
    }
    .hero .tittle a{
        font-size: 1.2rem;
        padding: 10px 20px;
    }
    
    /* about section*/

    section .about .image{
        display: none;
    }

    section .image,.text{
        width: 100vw;
        height: 40vh;
        margin: 0;
    }

    section .text{
        height: auto;
    }
    
    section .text h2{
        font-size: 1.2rem;
        margin: 20px auto;
    }
    section .text p{
        font-size: 1rem;
    }
    
    section .about,.vission,.mission{
        flex-direction: column;
    }
    
    section .vission{
        flex-direction: column;
    }
    
}

/* 620px --- 920px */
@media (min-width:620px) and (max-width:920px) {

    .hero {
        width: 100%;
        height: 50vh;
        position: relative;
    }
    .hero .tittle h1{
        font-size: 2.6rem;
        margin: 10px auto;
    }
    .hero .tittle{
        text-align: center;
        padding: 20px;
    }
    .hero .tittle p{
        font-size: 2rem;
        
    }
    .hero .tittle a{
        font-size: 2rem;
        padding: 10px 30px;
    }
    
    /* about section*/

    section .about .image{
        display: none;
    }

    section .image,.text{
        width: 100vw;
        height: 50vh;
        margin: 0;
    }
    section .text{
        height: auto;
    }

    section .text h2{
        font-size: 2.4rem;
    }
    
    section .text p{
        font-size: 2rem;
    }
    
    section .about,.vission,.mission{
        flex-direction: column;
    }
    
    section .vission{
        flex-direction: column;
    }
    
}
/* ************************************************************************************ */
                                          /* @ MEDIA QUERY */
/* ************************************************************************************ */


/* *********************************************************************************************************** */
                                     /* MAIN CONTAINER */
/* *********************************************************************************************************** */