/* IMPORTS */
@import url('https://fonts.googleapis.com/css2?family=Hind+Madurai:wght@300;400&family=Lora&family=Montserrat:wght@200;300;400;700&display=swap');

/* -----------FRONT-PAGE----------- */
.front-page{
    height: 110vh;
    background-color: #E3F4F4;
}
.col-FP-1{
    margin-top: 15%;
}
.col-FP-2{
    height: 80%;
}
.front-page-h1{
    font-size: 500%;
    line-height: 90%;
    font-family: 'Montserrat', sans-serif;
}
.fp-h1-1{
    font-weight: light;
}
.fp-h1-2{
    font-weight: bold;
}
.front-page-p{
    font-family: 'Montserrat', sans-serif;
    font-size: 23px;
}
/* TYPEWRITER TEXT */
.wrapper .dynamic-txts {
    margin-top: 1px;
    overflow: hidden;
    height: 33px;
    line-height: 35px;
    margin-bottom: 0;
}
.dynamic-txts li{
    list-style: none;
    position: relative;
    top: 0;
    animation: slide 9s steps(3) infinite;
}
.dynamic-txts li::after{
    content: "";
    position: absolute;
    background-color: #E3F4F4;
    left: 0;
    height: 100%;
    width: 100%;
    animation: typing 3s steps(100) infinite;
}
@keyframes typing {
    40%,
    60% {
        left: calc(100%);
    }
    100%{
        left: 0;
    }
}
@keyframes slide{
    100%{
        top: -105px;
    }
}
.front-page-svg{
    width: 40px;
    margin: 10px 30px 0 0;
}
.front-page-logo{
    width: auto;
    height: 110vh;
}
/* Front-Page Media Queries for MD */
@media (max-width: 991px) {
    .front-page{
        max-height: 102vh ;
    }
    .front-page-logo{
        width: auto;
        height: 102vh;
    }
    .col-FP-1{
        margin-top: 0;
        padding-top: 52px;
    }
    .col-FP-2{
        padding: 52px 0;
    }
    .front-page-h1{
    font-size: 300%;
    }
    .col-FP-2{
        padding-top: 0;
        height: auto;
    }
}
@media (max-width: 767px) {
    .front-page{
        height: 140vh;
    }
}
@media (min-width: 1200px){
    .col-FP-1{
        margin-top: 12% ;
    }
}
@media (min-width: 1400px){
    .col-FP-1{
        margin-top: 10%;
    }
}
/* DIVIDER */
.sep2{
    transform: translateY(-100%) translateY(2px) scale(1,1);
    transform-origin: top;
    padding: 0;
    position: absolute;
}
.divider{
    padding: 0;
}
/* -----------SECOND PAGE----------- */
.second-page-with-divider{
    background-color: #F8F6F4;
    height: 110%;
}
.second-page{
    padding-bottom: 15%;
}
.second-page-logo{
    width: 70%;
    height: auto;
    border-radius: 4%;
}
.second-page-text{
    padding-top: 0;
    text-align: left;
}
/* FLIP CARD */
.flip-card {
    width: 100%;
    height: 100%;
    aspect-ratio: 1/1;
    perspective: 1000px;
    cursor: pointer;
  }
  
  .flip-card-inner {
    width: 100%;
    height: 100%;
    transition: transform 0.6s;
    transform-style: preserve-3d;
  }
  
  .flip-card.flipped .flip-card-inner {
    transform: rotateY(180deg);
  }
  
  .flip-card-front,
  .flip-card-back {
    position: absolute;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
  }
  
  .flip-card-front {
    background-color: #f2f2f2;
    width: 100%;
    height: 100%;
  }
  .flip-card-in{
    width: 75%;
    height: 75%;
    position: relative;
    top: 12.5%;
    left: 12.5%;
}
.card-h3{
    text-align: center;
    font-family: 'Lora', serif;
    font-size: 150%;
} 
  .flip-card-back {
    background-color: #f2f2f2;
    transform: rotateY(180deg);
}
/* Second-Page Media Queries for MD */
@media (max-width: 991px) {
    .second-page-logo{
        position: relative;
        left: 25%;
    }
    .second-page-text {
        padding-top: 50px;
        text-align: center;
    }
    .flip-card {
        position: relative;
        left: 11%;
        padding-bottom: 10%;
    }
    .card-h3{
        font-size: 300%;
    }
}
/* Second-Page Media Queries for SM */
@media (max-width: 767px) {
    .second-page-logo{
        left: 0;
    }
    .card-h3{
        font-size: 150%;
    }
}
/* ---------THIRD PAGE---------- */
.third-page{
    background-color: #D2E9E9;
    padding-top: 20px;
    padding-bottom: 80px;
}
.blob{
    width: 200px;
    position: relative;
    bottom: 30px;
    left: 8px;
}
.mail{
    width: 130px;
    height: 130px;
    position: absolute;
}
/* FOOTER */
.foot{
    background-color: #D2E9E9;
}
/* COLOUR THEME DIVS */
.one{
    background-color: #c4dfdf;
    height: 23vh;
}
.two{
    background-color: #D2E9E9;
    height: 23vh;
}
.three{
    background-color: #E3F4F4;
    height: 23vh;
}
.four{
    background-color: #F8F6F4;
    height: 23vh;
}
/* FONT PREVIEW */
.hindm{
    font-family: 'Hind Madurai', sans-serif;;
}
.lora{
    font-family: 'Lora', serif;
}
.monsat{
    font-family: 'Montserrat', sans-serif;
}