@font-face {
    font-family: 'Lato-Regular';
    src: url("../font/Lato-Regular.woff") format("woff");
}

@font-face {
    font-family: 'Lato-Bold';
    src: url("../font/Lato-Bold.woff") format("woff");
}

@font-face {
    font-family: 'Lato-Italic';
    src: url("../font/lato-italic.woff") format("woff");
}

@font-face {
    font-family: 'Lato-Semibold';
    src: url("../font/lato-semibold.woff") format("woff");
}

@font-face {
    font-family: 'Lato-Heavy';
    src: url("../font/lato-heavy.woff") format("woff");
}

@font-face {
    font-family: 'NotoSans-Black';
    src: url("../font/NotoSans-Black.woff") format("woff");
}

body {
    overflow: auto;
}

.g-recaptcha {
    padding-left: 4em;
}

#contactUs #heading-bg .right {
    height: 41vw;
    top: 45%;
    left: 84%;
}

#contactUs #heading-bg .heading .title {
    margin-bottom: 2em;
}

#contactUs .contactTopContainer {
    margin: 5vw 0 0 0;
    width: 100%;
    position: relative;
}

#contactUs .contactTopContainer .dotted-line {
    width: 100%;
}

#contactUs .contactTopContainer .info-wrapper {
    position: absolute;
    display: flex;
    align-items: center;
    width: 35%;
}

#contactUs .contactTopContainer .info-wrapper .left {
    position: relative;
    height: 2vw;
    margin-right: 2vw;
}

#contactUs .contactTopContainer .info-wrapper .left .icon-bg {
    position: absolute;
    width: 180%;
    top: -62%;
    left: -36%;
    z-index: -1;
}

#contactUs .contactTopContainer .info-wrapper .left .logo {
    width: 45px;
}

#contactUs .contactTopContainer .info-wrapper .left #phone-icon {
    transform: scale(.9);
}

#contactUs .contactTopContainer .info-wrapper #openingHours {
    cursor: default;
}

#contactUs .contactTopContainer .info-wrapper .right a,
#contactUs .contactTopContainer .info-wrapper .right p {
    display: block;
    font-family: Lato-Regular;
    color: #5f5e5e;
    margin: 0;
    letter-spacing: .1em;
}

#contactUs .contactTopContainer .info-wrapper .right a:hover {
    color: #51d9de;
}

#contactUs .contactTopContainer .info-wrapper .right .info {
    font-size: 16px;
    width: 55%;
}

#contactUs .contactTopContainer .info-wrapper .right #asterisk {
    color: #dd0303;
}

#contactUs .contactTopContainer .info-wrapper .right #asterisk span {
    color: #5f5e5e;
}

#contactUs .contactTopContainer .info-wrapper .right .to-note {
    font-size: 14px;
    color: #dd0303;
    letter-spacing: .1em;
}

#contactUs .contactTopContainer .info-wrapper .right:hover p {
    color: #51d9de;
}

#contactUs .contactTopContainer .opening-hours {
    top: -1%;
    left: 4%;
}

#contactUs .contactTopContainer .opening-hours .shout {
    position: absolute;
    top: -30%;
    left: -15%;
    width: 15%;
    transform: rotate(323deg);
}

#contactUs .contactTopContainer .address {
    top: 40%;
    left: 19%;
}

#contactUs .contactTopContainer .contact {
    top: -9%;
    left: 59%;
}

#contactUs .contactTopContainer .email {
    top: 44%;
    left: 78%;
}

#contactUs .form-container {
    margin: -3em 0 0;
    border-radius: initial;
    box-shadow: none;
    background: none;
}

#contactUs .form-container .paintBG {
    position: absolute;
    top: 0;
    left: -13%;
    width: 23.6%;
    z-index: -1;
}

#contactUs .form-container .form-bg-wrapper {
    position: relative;
}

#contactUs .form-container .form-bg-wrapper .tape {
    position: absolute;
    top: -3vw;
    left: 40%;
    width: 20.16%;
    min-width: 150px;
    transform: none;
}

#contactUs .form-container .form-bg-wrapper .target {
    position: absolute;
    top: -4vw;
    left: 103%;
    width: 5.5%;
    min-width: 65px;
    transform: rotate(20deg);
}

/* Default (Large screens - Desktop/Laptop) */
#contactUs .form-container .form-bg-wrapper .form-bg {
    position: absolute;
    width: 115%;
    height: 62em;
    top: -12em;
    left: -5%;
    opacity: .7;
    z-index: -1;
}

/* Medium devices (Tablets, 768px to 1024px) */
@media (max-width: 1024px) {
    #contactUs .form-container .form-bg-wrapper .form-bg {
        width: 120%;
        height: 60em;
        top: -12em;
        left: -10%;
    }
}

/* Small devices (Mobile, up to 767px) */
@media (max-width: 767px) {
    #contactUs .form-container .form-bg-wrapper .form-bg {
        width: 281%;
        height: 50em;
        top: -10em;
        left: -20%;
    }
}


#contactUs .form-container .form-title {
    position: relative;
    margin: 2.5vw 0;
}

#contactUs .form-container .form-title .title {
    position: relative;
    text-align: center;
    font-size: 32px;
    color: #5f5e5e;
    font-family: NotoSans-Black;
    background-image: linear-gradient(180deg, #51d9de, #7ad7f9);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

#contactUs .form-container .form-title .title .bubble {
    display: inline-block;
    width: 3.54%;
    min-width: 43px;
}

#contactUs .form-container .form-title .title .bubble img {
    width: 100%;
}

#contactUs .form-container .form-title .title .speech-bubble {
    display: inline-block;
    width: 3.71%;
    min-width: 45px;
    animation: float 5s infinite linear;
}

#contactUs .form-container .form-title .title .speech-bubble img {
    width: 100%;
}

@media(min-width:1600px) {
    #contactUs .contactTopContainer .info-wrapper .left .logo {
        width: 2.813vw;
    }

    #contactUs .contactTopContainer .info-wrapper .right .info {
        font-size: 1vw;
    }

    #contactUs .contactTopContainer .info-wrapper .right .to-note {
        font-size: .875vw;
    }

    #contactUs .form-container {
        margin: -3vw 0;
    }

    #contactUs .form-container .form-bg-wrapper .form-bg {
        top: -5vw;
        height: 62vw;
    }

    #contactUs .form-container .form-title .title {
        font-size: 2vw;
    }
}

@media(max-width:1024px) {
    #contactUs .title {
        margin: 0 0 2em;
    }

    #contactUs .contactTopContainer {
        display: flex;
        flex-wrap: wrap;
        row-gap: 5vw;
        justify-content: flex-end;
        margin: 6vw 0 8em 2em;
    }

    #contactUs .contactTopContainer .dotted-line {
        display: none;
    }

    #contactUs .contactTopContainer .info-wrapper {
        position: initial;
        background: transparent;
        width: 50%;
    }

    #contactUs .contactTopContainer .info-wrapper .left {
        width: 37px;
        height: 2em;
        margin-right: 2em;
    }

    #contactUs .contactTopContainer .info-wrapper .left .icon-bg {
        width: 75px;
        top: -50%;
        left: -35%;
    }

    #contactUs .form-container .form-bg-wrapper .tape {
        top: -3em;
        left: 28vw;
    }

    #contactUs .form-container .form-bg-wrapper .target {
        top: -5.5em;
        left: 100%;
    }

    /* #contactUs .form-container .form-bg-wrapper .form-bg {
        top: -8.5em;
        height: 90em;
    } */
}

@media(max-width:768px) {
    #contactUs .contactTopContainer {
        flex-direction: column;
        align-items: center;
        gap: 2em;
        width: 80%;
        margin: 0 auto 10em;
    }

    #contactUs .contactTopContainer .info-wrapper {
        width: 100%;
    }

    #contactUs .contactTopContainer .info-wrapper .left {
        min-width: 1.5em;
        min-height: 1.5em;
        margin-right: 2em;
    }

    #contactUs .contactTopContainer .info-wrapper .left .icon-bg {
        left: -35%;
    }

    #contactUs .contactTopContainer .info-wrapper .right .info.address-info {
        width: 100%;
    }
}

@media(max-width:500px) {
    #contactUs {
        margin: 6em auto;
    }

    #contactUs .form-container .form-bg-wrapper {
        width: 100%;
        top: -6%;
        left: 0;
        height: 115%;
    }

    #contactUs .form-container .form-bg-wrapper .form-bg {
        left: -1.5em;
    }

    #contactUs .form-container .form-bg-wrapper .target {
        left: 85%;
    }

    #contactUs .contactTopContainer .info-wrapper .right .info.address-info {
        width: 100%;
    }
}

@keyframes float {
    0% {
        transform: translateY(0);
    }

    25% {
        transform: translateY(10px);
    }

    50% {
        transform: translateY(0);
    }

    75% {
        transform: translateY(10px);
    }

    100% {
        transform: translateY(0);
    }
}
.info-wrapper.email {
    margin-top: -10px; /* adjust value as needed */
  }