@charset "UTF-8";
/* CSS Document */

/* Navbar Section */
.navbar img,
.navbar .nav-item,
.navbar .btn-outside-popup,
.navbar-toggler {
    opacity: 1;
    animation: none !important;
}

/* Header Section */
.header-section {
    position: relative;
    width: 100%;
    height: 50vh;
}

.header-section::before {
    content: "";
    background-image: url("../images/contact-us-hero.jpg");
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    width: 100%;
    height: 100%;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    z-index: -1;
}

.header-section .d-flex{
    width: 100%;
    height: 100%;
    background-color: var(--color-secondary-overlay);
    color: var(--color-secondary-text);
}

/* Contact Us Section */
.contact-bg {
    padding: var(--space-xl) 0;
    background-color: var(--color-secondary-bg);
}

.bento-contact {
    width: 100%;
    height: 768px;
    gap: var(--space-s);
}

.bento-contact .contact-row:nth-of-type(1) {
    flex: 1 1 0;
    border-radius: var(--border-secondary-radius);
    background: var(--color-tertiary-bg-gradient);
    box-shadow: var(--shadow-primary) var(--shadow-primary) var(--shadow-secondary) var(--color-shadows);
    overflow: hidden;
}

.bento-contact .contact-row:nth-of-type(2) {
    flex: 1 1 0;
    border-radius: var(--border-secondary-radius);
    background: var(--color-primary-bg-gradient);
    box-shadow: var(--shadow-primary) var(--shadow-primary) var(--shadow-secondary) var(--color-shadows);
    overflow: hidden;
}

.bento-contact h4 {
    color: var(--color-secondary-text);
    margin-bottom: var(--space-s);
}

.bento-contact .form-label {
    color: var(--color-secondary-text);
}

.bento-contact .form-control:focus {
    border-color: var(--color-primary) !important;
    box-shadow: 0 0 0 3px var(--color-primary) !important;
    outline: 0 !important;
}

@media screen and (max-width: 1199.98px) {
    
    .bento-contact {
        height: 600px;
    }
}

@media screen and (max-width: 767.98px) {
    
    .bento-contact {
        height: 1200px;
        padding: 0 var(--space-s);
        flex-direction: column !important;
    }
}