/* Responsive Design */
@media screen and (min-width: 249.99px) and (max-width: 575.97px) {

.logo-text {
 position: absolute;
 top: 2%;
 right: 0%;
 max-height: 120px;
}

.logo-image {
    max-height: 180px !important;
}
.logo-text {
 max-height: 135px !important;
}
.bg {
    background-image: url(images/miang2.jpg);
    height: 100%;
    object-fit: fill;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover !important;
}
    .typed {
    font-size: calc(4rem + 0.75vw) !important;
    }
    .contact {
            margin: 0% 10% 20% 10% !important;
    }
}   

@media screen and (min-width: 575.98px) and (max-width: 767.97px) {
    .typed {
    font-size: calc(4rem + 0.75vw) !important;
    }
    .logo-image {
    max-height: 200px !important;
}
.logo-text {
 max-height: 150px !important;
}
    .contact {
            margin: 0% 10% 10% 10% !important;
    }
    .button {
        padding: 2vw !important;
    }

    .socials li {
        margin: 0 8px !important;
    }
    
}

@media screen and (min-width: 767.98px) and (max-width: 991.99px) {
    .typed {
    font-size: calc(4rem + 0.75vw) !important;
    }
        .logo-image {
    max-height: 225px !important;
}
.logo-text {
 max-height: 175px !important;
}
    .contact {
            margin: 0% 10% 10% 10% !important;
    }

    .button {
        padding: 2vw !important;
    }

    .socials li {
        margin: 0 4px !important;
    }
}

@media screen and (min-width: 991.98px) and (max-width: 1199.99px) {
    .typed {
    font-size: calc(4rem + 0.75vw);    }

    .button {
        padding: 1.25vw !important;
    }

    .socials li {
        margin: 0 2px !important;
    }
}

@media screen and (min-width: 1199.98px) and (max-width: 1399.99px),
       screen and (min-width: 1399.98px) {
    .typed {
    font-size: calc(5rem + 0.75vw);   
 }
}

/* Landing Page */
body, html {
    height: 100%;
    align-items: center;
    font-family: 'Didact Gothic' !important; 
    overflow: none;
}

p {
    font-family: 'Didact Gothic' !important; 
}

.center {
    align-items: center;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
}

.bg {
    background-image: url("images/miang2.jpg");
    height: 100%;
    object-fit: fill;
    background-position: center;
    background-repeat: no-repeat;
    background-size: 115%;
}

.bg::before
 {
    content: '';
    position: absolute;
    z-index: 0;
    pointer-events: none;
    background-repeat: no-repeat;
    bottom: -0vw;
    left: -0vw;
    right: -0vw;
    top: -0vw;
    background-color: rgb(0 0 0 / 25%);
}

.content {
    z-index: 10;
}


.logo-text {
 position: absolute;
 top: 2%;
 right: 0%;
 max-height: 180px;
}

.logo-image {
    position: absolute;
    top: -2%;
    right: 2%;
    max-height: 225px;
}

.contact {
    color: white;  
}

.socials {
    position: absolute;
    bottom: 2.5%;
}

.fab {
    transition: 0.3s;
    font-size: 4vh;
    margin: 1vw;
}

.fab:hover {
    transform:scale(1.15);
}

.buttons {
    margin-top: 4% 0% 2% 0%;
    padding: 2.5% 0%;
    /* border-radius: 100%; */
    background-color: rgba(0, 0, 0, 0.1);
}


.button {
    text-decoration: none;
    color: white;
    font-size: calc(1.25rem + 0.75vw);  
    padding: 0.8vw;
    position: relative;
    overflow: hidden;
    background: transparent;
    border: 3px solid white;
    border-top: none;
    border-bottom: none;
    border-radius: 30px/70px;
  }

.button:hover {
    transform: scale(1.05);
    background-color:rgba(227, 214, 198, 0.5);
    box-shadow: rgba(0, 0, 0, 0.25) 0px 54px 55px, rgba(0, 0, 0, 0.12) 0px -12px 30px, rgba(0, 0, 0, 0.12) 0px 4px 6px, rgba(0, 0, 0, 0.17) 0px 12px 13px, rgba(0, 0, 0, 0.09) 0px -3px 5px;
  }

.show {
    transition: 1s;
}

.label {
    color: #333;
}

.btn-send {
    font-weight: 300;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    margin-bottom: 20px;
}

.help-block.with-errors {
    color: #ff5050;
    margin-top: 5px;
}

.messages {
    position: absolute;
    z-index: 999;
}


/* --------------- JS Classes ---------------*/
.tag {
    opacity: 0;
    transition: 3s;
    transition-delay: 1s;
    transition-timing-function: ease-in-out;
}

.tag.visible {
    opacity: 1;
  }

.tagbtn {
    opacity: 0;
    transition: 1s;
    transition-delay: 0.25s;
    transition-timing-function: ease;
}

.tagbtn.visible {
    opacity: 1;
  }

.typed {
    color: white;
    font-size: calc(5rem + 0.75vw); 
}