*,
*::after,
*::before {
    margin: 0;
    padding: 0;
    box-sizing: inherit;
}

html {
    height: 100%;

}

body {
    box-sizing: border-box;
    font-size: 20px;
    font-family: 'Oswald', sans-serif;
    font-weight: 200;
    height: 100%;
    
}

::selection {
    background-color: #000;
    color: #fff;
}

h1 {
    font-size: 120px;
    color: #ffffff;
    font-weight: 600;
    text-transform: uppercase;
    line-height: 1;
}

h1 span {
    font-size: 50%;
}

h2 {
    text-transform: uppercase;
    font-size: 54px;
    line-height: 56px;
    font-weight: 900;
}

h2 span {
    color: #1dc5fc;
    /*display: block;*/
}

a:link, a:visited {
    color: #ffffff;
    text-decoration: none;
}

.wrapper {
    height: 100%;
    background-color: #000000;
    color: #ffffff;
}

.wrapper_grid {
    height: 100%;
    display: grid;
    grid-template-columns: max-content 1fr;
    align-items: center;
    gap: 100px;
    overflow: hidden;
}

.wrapper_grid--left {
    height: 100%;
    box-shadow: 0 1px 15px rgb(255 255 255 / 20%);
    align-items: center;
    display: grid;
    padding: 20px 40px;
}

.wrapper_grid--left-links {
    display: grid;
    gap:20px;
}

.wrapper_grid--left-links a {
    text-decoration: underline;
}

.wrapper_grid--left img {
    max-width: 100%;
}

.wrapper_grid--right {
    height: 100%;
    background: url(../images/header_bg.jpg) center center no-repeat;
    background-size: cover;
    align-items: end;
    display: grid;
    grid-template-rows: 1fr max-content 1fr;
    gap: 50px;
    position: relative;
}

.wrapper_grid--right-text {
    align-self: start;
}

.wrapper_grid--right h2 {
    align-self: start;
}

.wrapper_grid--right-phone {
    position: absolute;
    right: 25px;
    top: 25px;
    z-index: 2;
    height: auto;
    width: auto;
    font-size: 30px;
}

.wrapper_grid--right-social {
    position: absolute;
    right: 25px;
    bottom: 25px;
    z-index: 2;
    height: auto;
    width: auto;
    font-size: 40px;
    display: grid;
    gap: 10px;
    grid-template-columns: repeat(2, 1fr);
}

.wrapper_grid--bottom-viber a {
    background-color: #7360f2;
    color: #ffffff;
    width:70px;
    height: 70px;
    display: grid;
    align-items: center;
    text-align: center;
}

.wrapper_grid--bottom-viber a:hover {
    color: #7360f2;
    background-color: #ffffff;
}

.wrapper_grid--bottom-whatsapp a {
    background-color: #128C7E;
    color: #ffffff;
    width:70px;
    height: 70px;
    display: grid;
    align-items: center;
    text-align: center;
}

.wrapper_grid--bottom-whatsapp a:hover {
    color: #128C7E;
    background-color: #ffffff;
}



/* POPUP */
.popup__bg {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background: rgba(0,0,0,0.5);
    opacity: 0; 
    pointer-events: none; 
    transition: 0.5s all;
}

.popup__bg2 {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background: rgba(0,0,0,0.5);
    opacity: 0; 
    pointer-events: none; 
    transition: 0.5s all;
}

.popup__bg.active { 
    opacity: 1; 
    pointer-events: all;
    transition: 0.5s all;
    z-index: 9999;
}

.popup__bg2.active { 
    opacity: 1; 
    pointer-events: all;
    transition: 0.5s all;
    z-index: 9999;
}

.popup {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0); 
    background: #fff;
    width: auto;
    padding: 25px;
    transition: 0.5s all;
    max-width: 100%;
    z-index: 10000;
}

.popup img {
    max-width: 100%;
}

.popup2 {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0); 
    background: #fff;
    width: auto;
    padding: 25px;
    transition: 0.5s all;
    max-width: 100%;
    z-index: 10000;
}

.popup2 img {
    max-width: 100%;
}

.popup.active { 
    transform: translate(-50%, -50%) scale(1); 
    transition: 0.5s all;
}

.popup2.active { 
    transform: translate(-50%, -50%) scale(1); 
    transition: 0.5s all;
}

.close-popup {
    position: absolute;
    top: 10px;
    right: 10px;
    cursor: pointer;
    font-weight: 500;
}

.close-popup2 {
    position: absolute;
    top: 10px;
    right: 10px;
    cursor: pointer;
    font-weight: 500;
}


@media only screen and (min-width: 1201px) {

}

@media only screen and (max-width: 1200px) {
    h1 {font-size: 70px;}
}

@media only screen and (max-width: 992px) {
    .wrapper {background: url(../images/header_bg_mobile.jpg) no-repeat center center; background-size: cover;}
    h1 {font-size: 50px;order:2;}
    .wrapper_grid {grid-template-columns: 1fr;grid-template-rows: 1fr max-content;overflow: visible;gap:20px;}
    .wrapper_grid--right {order:1;gap:10px;background: none;text-align: center;padding: 0 20px;}
    .wrapper_grid--left {order:2;background-color: black;text-align: center;}
    .wrapper_grid--right-phone {position: relative; order:4;left:auto;right:auto;top:auto;}
    .wrapper_grid--right-phone a {text-decoration: underline;}
    .wrapper_grid--right-social {position: relative; order: 1;right:auto;bottom:auto;display: block;}
    .wrapper_grid--right-text {order:5;}
    .wrapper_grid--right h2 {order:3;font-size: 30px;}
    .wrapper_grid--left-links {grid-template-columns: repeat(3, 1fr);}
    .wrapper_grid--left-links-0 {display: none;}
    .wrapper_grid--bottom-viber, .wrapper_grid--bottom-viber a {display: inline-block;}
    .wrapper_grid--bottom-whatsapp, .wrapper_grid--bottom-whatsapp a {display: inline-block;}
    .popup, .popup2 {width:90%;}
    
}

@media only screen and (max-width: 768px) {
    
}

@media only screen and (max-width: 460px) { 
    .wrapper_grid--left-links {grid-template-columns: 1fr;}
}

@media only screen and (max-width: 390px) { 

}