/* make sure to set some focus styles for accessibility */
:focus {
    outline: 0;
}
/* ====================================== */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500&display=swap');
:root{
    --ffMontserrat: 'Montserrat', sans-serif;
}
@media screen and (-webkit-min-device-pixel-ratio: 0) {
    select:focus, textarea:focus, input:focus {
            font-size: 16px;
        }
    }
*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
div{
    font-family: "Open Sans", sans-serif;
}
body{
    height: 100vh;
    max-width: 100%;
}
label{
    -webkit-touch-callout: none; 
    -webkit-user-select: none; 
     -khtml-user-select: none; 
       -moz-user-select: none; 
        -ms-user-select: none; 
            user-select: none;
}
.wrapper{
   height: 100%;
}
.cont{
    width: 100%;
    height:100% ;
    background-size: cover;
    background-position: center;
    display: grid;
    justify-items: center;
    align-items: center;
    -webkit-transition:  background 0.3s;
    -moz-transition:  background 0.3s;
    -o-transition: background 0.3s;
    transition: background 0.3s;
    position: absolute;
    top: 0;
    left: 0;
}
.slick-slider{
    height: inherit
}
.slick-list{
    height: inherit;
}
.slick-track{
    height: inherit;
}
.slide {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    background-image: url(img/back_1.webp);
  }
  .slide--1{
    background-image: url(img/back_1.webp);
  }
  .slide--2{
    background-image: url(img/back_2.webp);
  }
  .slide--3{
    background-image: url(img/back_3.webp);
  }
  .slide--4{
    background-image: url(img/back_4.webp);
  }
  .slide--5{
    background-image: url(img/back_5.webp);
  }
  .slide--6{
    background-image: url(img/back_6.webp);
  }
  .slide--7{
    background-image: url(img/back_7.webp);
  }
  .slide--8{
    background-image: url(img/back_8.webp);
  }
  .slide--9{
    background-image: url(img/back_9.webp);
  }
  .slide--10{
    background-image: url(img/back_10.webp);
  }
.logo img{
   max-width: 200px;
}
/* @media (max-width:1400px) {
    .logo img{
        max-width: 180px;
     }
}
@media (max-width:1300px) {
    .logo img{
        max-width: 150px;
     }
}
@media (max-width:450px) {
    .logo img{
        max-width: 200px;
     }
} */
.avatar,.avatar1{
    width: 100px;
    height: 100px;
    margin: 20px 0;
    border-radius: 50px;
    object-fit: cover;
    background: rgba(201, 201, 201, 0.529);
}
/* @media (max-width:1400px) {
    .avatar,.avatar1{
        width: 90px;
        height: 90px;
        margin: 13px 0;
    }
}
@media (max-width:1300px) {
    .avatar,.avatar1{
        width: 70px;
        height: 70px;
        margin: 13px 0;
    }
}
@media (max-width:450px) {
    .avatar,.avatar1{
        width: 100px;
        height: 100px;
        margin: 20px 0;
    }
} */
.hello{
    font-family: var(--ffMontserrat);
    padding-bottom: 15px;
}
.input{
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
    width: 100%;
    font-family: var(--ffMontserrat); 
    color: white;
    width: 100%;
    padding: 0 35px;
}
.input__text{
    -webkit-appearance: none;
    -moz-appearance: none;
    width: 100%;
    outline: none;
    border-radius: 8px;
    padding: 6px;
    border: none;
    background: rgba(208, 204, 204, 0.752);
    font-family: var(--ffMontserrat);
    font-weight: 500;
    font-size: 16px; 
}
/* @media (max-width:450px) {
    .input__text{
        padding: 7px;
    }
} */
.input__text::placeholder{
    color: rgb(40, 40, 41);
    font-family: var(--ffMontserrat);
    font-weight: 500;
    font-size: 16px;
}
.input__text:focus{
    font-size: 16px;
    box-shadow: 0 0 10px 1px white;
}
.input__text:hover{
    box-shadow: 0 0 10px 1px white;
}
.input__button{
    padding: 5px 20px;
    cursor: pointer; 
    border: none;
    outline: none;
    font-family: var(--ffMontserrat);
    font-weight: 500;
    border-radius: 7px;
    background: rgb(180, 187, 201);
    -webkit-appearance: none;
    -moz-appearance:    none;
    appearance:         none;
    font-size: 16px;
}
.input__button:hover{
    background: radial-gradient(rgb(133, 141, 177),rgb(112, 111, 111));
}
.input input[type='checkbox']{
    width: 15px;
    height: 15px;
    border: none;
}
.chackbox{
    display: flex;
    align-items: center;
    gap: 5px;
}
.question{
    cursor: pointer;
}
.flip-container {
    -webkit-perspective: 800px;
    -moz-perspective: 800px;
    perspective: 800px;
    transition: .6s;
}
.flip-container, .front, .back {
	width: 260px;
}
.flipper {   
	transition: transform .6s;
    -webkit-transition: -webkit-transform .6s;
    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    transform-style: preserve-3d; 
	position: relative;  
    will-change: transform;
}
.card-face{
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    backface-visibility: hidden;
	position: absolute;
    top: 50%; 
}
.front, .back {      
    -webkit-transform:  translateY(-50%);
    -moz-transform:  translateY(-50%);
    transform:  translateY(-50%);
    color: white;
    background: rgba(9, 9, 9, 0.525);
    box-shadow: 0 0 20px 10px white;
    border-radius: 10px;
    height: auto;
    padding: 20px 0;
}
.front {
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: start;    
}
.back {
    z-index: 1;
    -webkit-transform:translateY(-50%) rotateY( 180deg);
	transform:translateY(-50%) rotateY(180deg);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: start;  
    will-change: transform;
}
.exit, .submit {
    /* padding: 5px 22px; */
    margin-top: 10px;
}
.input span{
    width: 100%;
    display: flex;
    justify-content: space-between;
}
.info{
    display: flex;
    justify-content: space-around;
    align-items: center;
    gap: 30px;
    padding: 30px 20px 0 20px;
    border-radius: 10px;
    width: 100%;
}
.info img{
    width: 30px;
    height: 30px;
    cursor: pointer;
}
.info img:hover{
    transform: scale(1.2);
}
.contacts__modal{
    width: 93vw;
    height: fit-content;
    border-radius: 10px;
    box-shadow: 0 0 20px 10px white;
    background: rgba(9, 9, 9, 0.525);
    padding: 15px 10px;
    font-family: var(--ffMontserrat);
    color: white;
    text-align: center;
    font-size: .8rem;
    transform: scale(0);
    transition: 0.7s;
    position: absolute;
    bottom: 10px;
}
@media (max-width:415px) {
    .contacts__modal{
        margin-top: -130px;
    }
}
.contacts__modal a{
    color: white;
    text-decoration: none;
}
.contacts__info{
    display: flex;
    justify-content: space-around;
    align-items: center;
    margin-bottom: 15px;
}
.contacts__info a{
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
}
.contacts__modal-mobile{
    display: none;
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    background: rgb(29, 38, 78);
    opacity: 0.96;
    z-index: 1000;
    overflow: scroll;
}
.showAnimationModal {
    animation: showModal 0.5s;
  }
.hideAnimationModal {
    animation: hideModal 0.5s;
  }
@keyframes showModal {
    to {
      left: 0;
    }
    from {
      left: -430px;
    }
  }
@keyframes hideModal {
    to {
      left: -430px;
    }
    from {
      left: 0;
    }
  }
.contacts__modal-close {
    display: flex;
    justify-content: flex-end;
    padding: 20px;
}
.contacts__modal-close img{
    width: 40px;
    height: 40px;
}
.contacts__mobile{
    display: flex;
    height: auto;
    flex-direction: column;
    justify-content: space-between;
    height: calc(100% - 119px);
}
.contacts__info-mobile{
    margin: 40px 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 30px;
    font-family: var(--ffMontserrat);
    
}
.contacts__info-mobile a{
    color: aliceblue;
    text-decoration: none;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 8px;
    font-size: 18px;
}
.contacts__adress-mobile{
    text-align: center;
    line-height: 1.4;
    color: aliceblue;
    font-family: var(--ffMontserrat);
    padding: 20px;
}
.contacts__info-adress{
    line-height: 1.3;
}