* {
    margin:0;
    padding:0;
    box-sizing:border-box;
}

html,
body {
    width:100%;
    min-height:100%;
    background:#000;
    font-family: 'Montserrat', sans-serif;
}

.contacts-page {
    min-height:100vh;
    position:relative;
}

.contacts-background {
    position:fixed;
    inset:0;
    overflow:hidden;
    z-index:0;
}

.background-image {
    position:absolute;
    inset:0;
    background-size:cover;
    background-position:center;
    opacity:0;
    transform:scale(1);
    transition: opacity 2s ease, transform 8s ease;
}

.background-image.active {
    opacity:1;
    transform:scale(1.08);
}

.contacts-background::after {
    content:"";
    position:absolute;
    inset:0;
    background: rgba(0,0,0,0.55);
}

.contacts-header {
    height:217px;
    display:flex;
    justify-content:center;
    align-items:center;
    position:relative;
    z-index:2;
}

.contacts-header h1 {
    color:white;
    font-size:56px;
    font-weight:300;
    letter-spacing:5px;
}

.close-icon {
    position:absolute;
    top:35px;
    left:50%;
    transform:translateX(-50%);
    width:45px;
    height:45px;
}

.close-icon span {
    position:absolute;
    width:35px;
    height:2px;
    background:white;
    left:5px;
    top:22px;
    transition:.4s;
}

.close-icon span:first-child {
    transform:rotate(45deg);
}

.close-icon span:last-child {
    transform:rotate(-45deg);
}

.close-icon:hover span:first-child {
    transform: rotate(0) translateY(-7px);
    width:22px;
}

.close-icon:hover span:last-child {
    transform: rotate(0) translateY(7px);
    width:22px;
}

.contacts-content {
    position:relative;
    z-index:2;
    min-height: calc(100vh - 217px);
    background: rgba(0,0,0,.65);
    display:flex;
    justify-content:center;
    gap:120px;
    padding:70px 10%;
    color:white;
}

.contact-left,
.contact-right {
    width:40%;
}

h2 {
    font-size:34px;
    font-weight:300;
    margin-bottom:40px;
}

.contact-item {
    margin-bottom:30px;
}

.contact-item small {
    color:#CA8E46;
    font-size:18px;
}

.contact-item p {
    margin-top: 8px;
    font-size: 22px;
}

.daily-item {
    display:flex;
    justify-content:space-between;
    font-size:22px;
    margin-bottom:20px;
}

.qr-code {
    margin-top:50px;
}

.qr-code img {
    width: 140px;
}

.contact-socials {
    display:flex;
    align-items:center;
    flex-wrap:wrap;
    gap:14px 32px;
    margin-top:50px;
}

.social-link {
    position:relative;
    color:#CA8E46;
    text-decoration:none;
    font-size:18px;
    font-weight:400;
    letter-spacing:1px;
    transition: color .3s ease, transform .3s ease;
}

.social-link::after {
    content:"";
    position:absolute;
    left:0;
    bottom:-6px;
    width:0;
    height:1px;
    background:#CA8E46;
    transition:width .3s ease;
}

.social-link:hover {
    color: #fff;
    transform: translateY(-2px);
}

.social-link:hover::after {
    width: 100%;
}

@media(max-width:900px){
.contacts-header {
    height: 180px;
}

.contact-socials {
    gap: 14px 22px;
}

.contacts-header h1 {
    font-size: 38px;
}

.contacts-content {
    flex-direction: column;
    gap: 50px;
    padding: 40px 25px;
}

.contact-left,
.contact-right {
    width: 100%;
}

h2 {
    font-size: 28px;
}
}