@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@100..900&display=swap');
*{
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  font-family: "Outfit", serif;
}
.aboutcontainer{
    gap: 5vh;
    width: 100vw;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    color: white;
    padding: 2vh 0vw;
}
.aboutcontainer h2{
    font-weight: 400;
}
.about{
    background-color: #10207A;
    width: 90vw;
    height: 40px;
    padding: 0px 5vw;
    border-radius: 5px;
    display: flex;
    justify-content: start;
    align-items: center;
}
.about h2{
    font-weight: 400;
}
.abtheader{
    width: 80vw;
    border-radius: 10px;
    filter: brightness(75%);
}
.abtrel{
    position: relative;
}
.abtabs{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
.abtabs h1{
    font-weight: 300;
    transition: 0.5s;
    animation: head 3s ease;
}
@keyframes head{
    0%{
        opacity: 0;
        transform: translateY(-30px);
    }
    25%{
        opacity: 0.5;
        transform: translateY(30px);
    }
    50%{
        opacity: 0.8;
        transform: translateY(-30px);    
    }
    75%{
        opacity: 1;
        transform: translateY(30px);
    }
    100%{
        opacity: 1;
        transform: translateY(-15px);
    }
}
.a{
    padding: 3vh 3vw;
    width: 80vw;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow:0px 0px 5px grey;
    border-radius: 10px;
}
.ab{
    width: 40vw;
    display: flex;
    justify-content: center;
    align-items: center;
}
.b{
    width: 35vw;
    border-radius: 10px;
}
.e{
    width: 40vw;
    color: black;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    gap: 30px;
}
.c,.d{
    width: 37vw;
}
.h{
    text-align: justify;
    font-size: 25px;
    color: #10207A;
}
.po{   
    text-align: justify;
    color: black;
}
.hut{
    color: rgb(12, 165, 253);
}
.onea{
    padding: 20px;
    box-shadow:0px 0px 5px grey;
    border-radius: 10px;
    width: 80vw;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 30px;
}
.oneb{
    width: 40vw;
}
.hx{
    margin-bottom: 2vh;
}
.onec{
    width: 40vw;
    display: flex;
    justify-content: center;
    align-items: center;  
    flex-direction: column;
    gap: 20px;
}
.wi,.oned,.onee{
    width: 35vw;
}
.indcont{
    gap: 3vh;
    color: black;
    padding: 20px;
    box-shadow:0px 0px 5px grey;
    border-radius: 10px;
    gap: 10px;
    width: 80vw;
    display: flex;
    justify-content: center;
    align-items: center;  
    flex-direction: column;
}
.ind{
    width: 70vw;
    text-align: center;
}
.busicont{
    width: 80vw;
    text-align: justify;
}
.pot{
    width: 35vw;
}
.ind h1,.how h1{
    color: #10207A;
}
.busicont{
    gap: 4vw;
    display: flex;
    justify-content: center;
    align-items: center;
}
.how{
    gap: 20px;
    color: black;
    padding: 20px;
    width: 80vw;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
}
.docont{
    display: flex;
    justify-content: space-around;
    align-items: center;
    width: 70vw;
    flex-wrap: wrap;
}
.do{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    gap: 15px;
    box-shadow:0px 0px 5px grey;
    border-radius: 5px;
    padding: 10px 20px;
    width: 30vw;
    height: 200px;
    margin-bottom: 20px;
    text-align: justify;
}
.do h3{
    color: rgb(22, 149, 222);
}
.hor{
    height: 0.1px;
    width: 90vw;
    background-color: #10207A;
}
footer{
    margin-bottom: 10px;
    width: 90vw;
    border-radius: 5px;
    height: 5vh;
    background-color: #10207A;
    display: flex;
    align-items: center;
    justify-content: center;
}
footer p{
    color: white;
    font-size: 10px;
}
body{
    animation: bod 2s;
  }
  @keyframes bod{
    0%{
        transform: translatey(-10px);
    }
    100%{ 
        transform: translatey(10px);
    }
}
@media screen and (max-width:500px){
    .aboutcontainer{
        color: white;
        padding: 2vh 0vw;
        gap: 0px;
        width: 100vw;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
    }
    .about{
        margin-top: -20px;
        background-color: #10207A;
        width: 100vw;
        height: 30px;
        padding: 0px 05vw;
        border-radius: 0px;
        display: flex;
        justify-content: start;
        align-items: center;
    }
    .about h2{
        font-weight: 500;
        font-size: 15px;
    }
    .abtheader{
        width: 100vw;
        border-radius: 0px;
        filter: brightness(75%);
    }
    .abtrel{
        position: relative;
    }
    .abtabs{
        position: absolute;
        top: 13%;
        left: 50%;
        transform: translate(-50%, -50%);
    }
    .abtabs h1{
        width: 100%;
        font-size: 15px;
        font-weight: 300;
        transition: 0.5s;
        animation: none;
    }
    @keyframes head{
        0%{
            opacity: 0;
            transform: translateY(-30px);
        }
        25%{
            opacity: 0.5;
            transform: translateY(30px);
        }
        50%{
            opacity: 0.8;
            transform: translateY(-30px);    
        }
        75%{
            opacity: 1;
            transform: translateY(30px);
        }
        100%{
            opacity: 1;
            transform: translateY(-15px);
        }
    }
    .a{
        margin-top: 2vh;
        padding: 3vh 3vw;
        width: 95vw;
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 20px;
        flex-direction: column;
        box-shadow:0px 0px 5px grey;
        border-radius: 10px;
    }
    .ab{
        width: 70vw;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .b{
        width: 80vw;
        border-radius: 10px;
    }
    .e{
        width: 90vw;
        color: black;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        gap: 10px;
    }
    .c,.d{
        width: 90vw;
    }
    .h{
        text-align: justify;
        font-size: 12px;
        color: #10207A;
    }
    .po{   
        width: 90vw;
        font-size: 10px;
        text-align: justify;
        color: black;
    }
    .hut{
        color: rgb(12, 165, 253);
        font-size: 12px;
    }
    .onea{
        margin-top: 2vh;
        padding: 10px;
        box-shadow:0px 0px 5px grey;
        border-radius: 10px;
        width: 95vw;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        gap: 10px;
    }
    .oneb{
        width: 95vw;
    }
    .hx{
        width: 90vw;
        margin-bottom: 0vh;
    }
    .onec{
        width: 95vw;
        display: flex;
        justify-content: center;
        align-items: center;  
        flex-direction: column;
        gap: 20px;
    }
    .wi,.oned,.onee{
        width: 90vw;
    }
    .indcont{
        margin-top: 2vh;
        gap: 3vh;
        color: black;
        padding: 20px;
        box-shadow:0px 0px 5px grey;
        border-radius: 10px;
        gap: 10px;
        width: 95vw;
        display: flex;
        justify-content: center;
        align-items: center;  
        flex-direction: column;
    }
    .ind{
        width: 90vw;
        text-align: center;
    }
    .ind p{
        font-size: 10px;
    }
    .busicont{
        width: 80vw;
        text-align: justify;
    }
    .pot{
        width: 90vw;
        font-size: 10px;
    }
    .ind h1,.how h1{
        color: #10207A;
        font-size: 15px;
    }
    .b{
        width: 90vw;
        border-radius: 2px;
    }
    .busicont{
        gap: 4vw;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
    }
    .how{
        gap: 10px;
        color: black;
        padding: 20px;
        width: 95vw;
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        align-items: center;
    }
    .docont{
        display: flex;
        justify-content: space-around;
        align-items: center;
        width: 95vw;
        flex-wrap: wrap;
    }
    .how h1{
        font-size: 15px;
    }
    .do{
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        gap: 5px;
        box-shadow:0px 0px 5px grey;
        border-radius: 5px;
        padding: 10px 20px;
        width: 85vw;
        height: auto;
        margin-bottom: 20px;
        text-align: justify;
    }
    .do h3{
        color: rgb(22, 149, 222);
        font-size: 12px;
    }
    .do p{
        font-size: 10px;
    }
    .hor{
        margin-bottom: 10px;
        height: 0.1px;
        width: 95vw;
        background-color: #10207A;
    }
    footer{
        margin-bottom: 10px;
        width: 95vw;
        border-radius: 2px;
        height: 2vh;
        background-color: #10207A;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    footer p{
        color: white;
        font-size: 7px;
    }
    body{
        animation: none;
      }
      @keyframes bod{
        0%{
            transform: translatey(-10px);
        }
        100%{ 
            transform: translatey(10px);
        }
    }
}