* {
    margin: 0;
    padding: 0;
    font-family: 'Montserrat', sans-serif;
  }

body{
    height: 1700px;
    font-family: 'Montserrat';
}
.navbar{
    position: sticky;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-direction: row;
    z-index: 1;
    top: 0;
    display: flex;
    padding-top: 0.6rem;
    background-color: rgb(255, 255, 255);
    padding-bottom:0.6rem;
    
}
.navbar li{
    display: flex;
    text-align: center;
    padding-top: 1.2rem;
    padding-left: 2rem;
    padding-right: 2rem;
}

.navbar ul{
    display: flex;
    margin: auto;

}
.navbar p{
    padding-right: 23rem;
    padding-left: 2rem;
    padding-top: 10px;
    font-weight: 600;
    color: rgb(66, 150, 188);;
}
.navbar h1{
    color: rgb(66, 150, 188);;
    padding-left: 2rem;
    font-size: 2.25rem;
    padding-right: 50px;
}
.navbar a{
    text-decoration: none;
    font-weight: 800;
    color: rgb(66, 150, 188);;
}

.front-img img{
    position: absolute;
    top: 4rem;
    width:100%;
    height: 46rem;
    z-index: -1;
    transform: rotate(180deg);
    object-fit: cover;
    object-position: top right;

}
.img1 h1{
    color:aliceblue;
    padding-left: 10rem;
    padding-top: 10rem;
    padding-bottom: 3.1rem;
    font-size: 3rem;
}
.img1 p{
    color:aliceblue;
    padding-left: 10rem;
    font-weight:500;
}
.img1 button{
    position: absolute;
    margin-top: 2.5rem;
    left: 10rem;
    width: 6rem;
    height: 2.5rem;
    border: solid 3px aliceblue;
    border-radius: 1.25rem;
    background-color: transparent;
    font-weight: 800;
    color: aliceblue;
    transition: transform 0.3s, background-color 0.2s ease-in, color 0.2s;
}
.img1 button:hover{
    background-color: aliceblue;
    color: rgb(66, 150, 188);
    transform: translateY(-8px);
}
.infotab{
    margin-top: 25rem;
    text-align: center;
}
.infotab h1{
    font-size: 3rem;
    padding-bottom: 2.5rem;
}
.infotab p{
    font-weight: 400;
    padding-bottom: 2.5rem;
}
.top{
    height: 2.5rem;
    width: 2.5rem;
    font-size: 1.5rem;
    font-weight: 800;
    border: solid 4px rgb(66, 150, 188);
    border-radius: 1.25rem;
    background-color: transparent;
    color: rgb(66, 150, 188);
    position: absolute;
    right: 0;
    margin-right: 2rem;
}
.top:hover{
    cursor: pointer;
}
.infotab2{
    justify-content: space-evenly;
    gap: 2rem;
    display: flex;
    text-align: center;
    gap: 0rem;
}
.infotab2 h1{
    font-size: 1.25rem;
    margin-bottom: 2rem;
    margin-top: 1rem;
    color: aliceblue;
}
.infotab2 p{
    margin-top: 1rem;
    color: aliceblue;
    padding: 0.2rem;
    font-weight: 500;
}
.infotab2 img{
    height: 5rem;
}
.container1{
    width: 20%;
    background-color: rgb(66, 150, 188);
    margin:1rem;
    height: 18.75rem;
    border-radius: 2rem;
    animation-delay: 10s;
}

.container2{
    width: 20%;
    background-color: rgb(66, 150, 188);
    margin:1rem;
    height: 18.75rem;
    border-radius: 2rem;

}
.container3{
    width: 20%;
    background-color: rgb(66, 150, 188);
    margin:1rem;
    height: 18.75rem;
    border-radius: 2rem;
}
.container4{
    width: 20%;
    background-color: rgb(66, 150, 188);
    margin:1rem;
    height: 18.75rem;
    border-radius: 2rem;
}

/* Animation content*/
@keyframes slidetop{
    from{
        transform: translateY(12.5rem);
        visibility: visible;
        opacity: 0;
    }
    to{
        transform: translateY(0rem);
        visibility: visible;
    }
}
@keyframes slideright{
    from{
        transform: translateX(-18rem);
        opacity: 0;
    }
    to{
        transform: translateX(0rem);
        opacity: 1;
    }
}
@keyframes fade-in {
    from{
        transform: translateY(-3rem);
        opacity: 0;
        visibility: visible;
    }
    to{
        transform: translateY(0rem);
        opacity: 1;
        visibility: visible;
    }
    
}
.fade-in{
    animation: fade-in forwards;
    animation-duration: 2s;
    animation-delay: 2s;
    visibility: hidden;
}
.animate-slideright{
    animation: slideright;
    animation-duration: 2s;
}
.animate-slidetop{
    animation: slidetop forwards;
    animation-duration: 2s;
    visibility: hidden;
}
.delay1{
    animation-delay: 1s;
}
.delay2{
    animation-delay: 2s;
}
.delay3{
    animation-delay: 3s;
}
.delay4{
    animation-delay: 4s;
}
/*Responsive tab*/
@media(max-width:1376px){
    html{
        font-size: 15px;
        transition: font-size 0.5s;
        
    }
    .navbar p{
        padding-right: 10rem;
        padding-left: 1.5rem;
        transition: padding-right 0.5s, padding-left 0.5s;
    }
    .img1 h1{
        padding-left: 7.5rem;
        transition: padding-left 0.5s;
    }
    .img1 p{
        padding-left: 7.5rem;
        transition: padding-left 0.5s;
    }
    .img1 button{
        transition:left 0.5s;
        left: 7.5rem;
    }
    .container1,
    .container2,
    .container3,
    .container4{
       
        transition: width 1s;
    }
}
@media(max-width:1099px){
    html{
        font-size: 14px;
        transition: font-size 0.5s;
    }
    .navbar p{
        padding-right: 5rem;
        padding-left: 1rem;
        transition: padding-right 0.5s, padding-left 0.5s;
    }
    .img1 h1{
        transition: padding-left 0.5s;
        padding-left: 5rem;
    }
    .img1 p{
        transition: padding-left 0.5s;
        padding-left: 5rem;
    }
    .img1 button{
        transition:left 0.5s;
        left: 5rem;
    }
    .infotab2{
        flex-wrap: wrap;
        flex-direction: row;
    }
    .container1,
    .container2,
    .container3,
    .container4{
        width: 30%;
        transition: width 1s;
    }
}
@media(max-width:945px){
    html{
        font-size: 13px;
        transition: font-size 0.5s;
    }
    .navbar p{
        font-size: 12px;
        padding-right: 5rem;
        padding-left: 1rem;
        transition: padding-right 0.5s, padding-left 0.5s;
    }
    .img1 h1{
        transition: padding-left 0.5s;
        padding-left: 5rem;
    }
    .img1 p{
        transition: padding-left 0.5s;
        padding-left: 5rem;
    }
    .img1 button{
        transition:left 0.5s;
        left: 5rem;
    }
}
@media (max-width:768px){
    html{
        font-size: 10px;
    }
    .navbar{
        flex-direction: column;
        text-align: center;
    }
    .navbar p{
        padding-left: 0rem;
        padding-right: 0rem;
    }
    .navbar h1{
        padding-left: 0rem;
    }
    .infowrap{
        display: flex;
        flex-direction: row;
    }
    .container1,
    .container2,
    .container3,
    .container4{
        width: 40%;
        transition: width 1s;
    }
}