@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');

body {
    font-family: "Inter", sans-serif;
    font-size: 18px;
}

.contact {
    background-image: url("images/bg6.webp");
    background-color: black;
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed;
    padding: 2em;
}

.whatsapp-section {
    position: fixed;
    display: flex;
    flex-direction: column;
    text-align: right;
    right: 1em;
    bottom: 2em;
}

.whatsapp-section > a > i {
    margin-top: 10px;
    float: right;
}

#about-us-image {
    background-image: url('images/about-us.jpg');
    background-repeat: no-repeat;
    background-size: cover;
}

.jumbotron-fluid {
    background-image: url('images/bg1.jpg');
    background-repeat: no-repeat;
    background-size: cover;
    height: 500px;
    justify-content: center;
    align-items: center;
    align-content: center;
}

.error_alert {
    display: none;
}

.success_alert {
    display: none;
}

#spinner_container {
    display: none;
}
    

.add-text-shadow {
    text-shadow: 3px 3px 4px black;
}

.drop-cap::first-letter {
  float: left;
  font-size: 3rem;
  line-height: 1;
  font-weight: bold;
  margin-right: 8px;
  /*color: #0d6efd; */
  color: black; /* Bootstrap primary color */
}

.section {
    visibility: hidden;
}

.slide-in-top {
    visibility: visible;
    animation: slideInTop 2s ease-in-out forwards ;
}

.section .blink-in {
    animation: blinkIn 2s ease-in-out forwards;
}

.fade-in-bottom {
    animation: fadeInBottom 2s ease-in-out;
}


@keyframes fadeInBottom{
    0%{
        transform: translateY(100px);
        opacity: 0;
    }
    
    100% {
        transform: translateY(0);
        opacity: 1;
    }
}

@keyframes blinkIn {
    0%{
        opacity: 0;
    }
    
    100% {
        opacity: 1;
    }
}

@keyframes slideInTop {
    0%{
        transform: translateY(-100px);
        opacity: 0;
    }
    
    100% {
        transform: translateY(0);
        opacity: 1;
    }
}

@keyframes slideInLeft {
    0%{
        transform: translateX(-100px);
        opacity: 0;
    }
    
    100% {
        transform: translateX(0);
        opacity: 1;
    }
}