@font-face {
    font-family: "granville-bold";
    src: url(/v2/assets/font/Granville/Granville-Bold.otf) format("opentype");
    font-weight: 400;
    font-style: normal;
}
@font-face {
    font-family: "font-regular";
    src: url(/v2/assets/font/archivo/ArchivoNarrow.ttf) format("truetype");
    font-weight: 400;
    font-style: normal;
  }
  @font-face {
    font-family: "font-medium";
    src: url(/v2/assets/font/archivo/ArchivoNarrow.ttf) format("truetype");
    font-weight: 500;
    font-style: normal;
  }
  @font-face {
    font-family: "font-semiBold";
    src: url(/v2/assets/font/archivo/ArchivoNarrow.ttf) format("truetype");
    font-weight: 600;
    font-style: normal;
  }
  @font-face {
    font-family: "font-bold";
    src: url(/v2/assets/font/archivo/ArchivoNarrow.ttf) format("truetype");
    font-weight: 700;
    font-style: normal;
  }
  * {
    font-variation-settings: 'wdth' 75, 'slnt' 0 !important;
  }
.contactContainer {
    max-width: 864px; 
    margin: 0 auto;
}

.contactPageTitle {
    font-size: 35px;
    font-weight: 700;
    color: var(--bzc-base-color, #000000);
    text-align: center;
    margin: 20px 0;
}

.contactFlex {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    
}

.mail img {
    margin: auto;
}
.mail {
    display: flex;
}

.contactBox {
    width: 408px;
    height: 408px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    background-color: #F2F2F3;
    border-radius: 25px;
}

.contactBoxText {
    margin: 50px 0;
}

.contactBox p {
    margin: 0;
}

.contactTitle {
    font-size: 20px;
    font-family: 'font-semiBold' !important;
}

.contactParagraph {
    font-size: 17px;
    font-weight: 400;
}

.contactBtn {
    font-size: 16px;
    font-weight: 600;
    background-color: var(--bzc-base-color, #000000);
    color: white !important;
    padding: 10px 10px;
    border-radius: 25px;
    border: 1px solid var(--bzc-base-color, #000000);
    width: 280px;
    text-decoration: none !important;
}

.contactBtn:hover {
    cursor: pointer;
    background-color: var(--bzc-base-color-50, #000000) !important;
    border: 1px solid var(--bzc-base-color-50, #000000) !important;
    text-decoration: none !important;
    color: white !important;
}

.noMargin p{
    margin: 0 0;
}

.absolutePosition {
    position: absolute;
    right:  25px;
    top: 70px;
    width: 57%;
}

.paragarphContact {
    font-weight: 400;
    font-size: 14px !important;
}

.paragraphTitle {
    font-weight: 600;
    font-size: 20px;
}

.contactDescription {
    position: relative;
    margin: 30px 0;
}

.contactImgRelative {
    background-image: url("https://bazarchic-front.s3.eu-west-3.amazonaws.com/contact/contact.jpg");
    width: 100%;
    height: 264px;

}
.mobileLogo {
    display: none;
    font-size: 0px;
}
/* Mobile CSS */
@media screen and (max-width: 480px) {
    .contactContainer {
        width: 100%; 
    }
    .contactDescription {
        position: relative;
        margin: 27px 0;
    }
    .contactPageTitle {
        font-size: 35px;
        font-weight: 700;
        color: var(--bzc-base-color, #000000);
        text-align: center;
        margin: 15px 0;
    }


    .contactFlex {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
    }
    
    .contactBox {
        width: 100%;
        height: 300px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        text-align: center;
        background-color: #F2F2F3;
        border-radius: 0px;
    }
    
    .contactBoxText {
        margin: 30px 0;
    }
    
    .contactBox p {
        margin: 0;
    }
    
    .contactTitle {
        font-size: 18px;
        font-weight: 700;
    }
    
    .contactParagraph {
        font-size: 14px !important;
        font-weight: 400;
    }
    
    .contactBtn {
        font-size: 16px;
        font-weight: 600;
        background-color: var(--bzc-base-color, #000000) !important;
        color: white !important;
        padding: 10px 10px;
        border-radius: 25px;
        border: 1px solid var(--bzc-base-color, #000000);
        width: 250px;
        text-decoration: none;
    }
    
    .contactBtn:hover {
        cursor: pointer;
        background-color: rgb(144, 122, 252) !important;
        border: 1px solid rgb(144, 122, 252) !important;
        text-decoration: none !important;
        color: white !important;
    }
    
    .noMargin p {
        margin: 0 0;
    }
    
    .absolutePosition {
        width: 100%;
        height: 280px;
        position: initial;
        background-color: #F2F2F3;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }
    
    .paragarphContact p {
        font-weight: 400;
        font-size: 14px !important;
        margin: 0 50px;
    }
    
    .paragraphTitle {
        font-weight: 600;
        font-size: 17px;
    }
    .pMobile {
        font-size: 14px !important;
    }
    .contactImgRelative {
        display: none;
    }
    .mobileContactDescription {
        margin: auto;
        text-align: center;
    }
    .marginMobile {
        margin-bottom: 27px;
    }
    .mobileLogo {
        font-size: 40px;
        display: block;

    }
    .mobileLogo path {
        stroke-width: 4px;
    }
    .mobileMargin {
        margin: 10px 0;
    }
    .paddingMobile {
        padding: 0 10px;
    }
}