@import url('https://fonts.googleapis.com/css2?family=Be+Vietnam+Pro:wght@400;600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Rubik+Mono+One&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@200..800&family=Rubik+Mono+One&display=swap');
/* ИМПОРТ ШРИФТОВ С GOOGLE FONTS */
* {
    cursor: url('img/cursor.png'), pointer;
}
body {
    margin:0;
    padding:0;
    background-color:black;
    color: white;
    overflow-x:hidden;
}
main {
    margin:0 120px 0 120px;
   
}

/* ПРИМЕННЕНИЕ ОБШИХ СТИЛЕЙ К СТРАННИЦЕ */
:root {
--font-family:"Be Vietnam Pro", sans-serif;
--interface-color: #EE8313;
--font-color:white;
cursor: url('img/cursor.png'), pointer;
}
/* СОЗДАННИЕ ПЕРЕМЕННЫХ СО СТИЛЯМИ */
.navigation-bar {
 display:flex;
 flex-direction:row;
 align-items: center;
 margin: 0 0 0 0;
 font-family:var(--font-family);
 font-size:16px;
 /* border: solid 2px white; */
 width:100%;
 height:70px;
position: fixed;
top:0;
z-index: 5;
background-color: black;
border-bottom: 1px solid  #343434;
}
.navigation-bar p {
    margin-right: 380px;   
}
.navigation-bar a {
    margin-right: 30px;
    text-decoration: none;
    color:white;
    cursor:pointer; 
    padding: 10px 0 10px 0;
    position:relative;
    transition: background-color 0.3s ease-in-out;
    border-radius: 13px;
    /* cursor: url('img/cursor.png'), pointer; */
}

.navigation-bar a:hover {
    background-color: #EE8313;
    border-radius:13px;
    width:fit-content;
    height: fit-content;
    opacity:60%;

} 

.navigation-bar a:focus {
    background-color: #EE8313;
    border-radius:13px;
    width:fit-content;
    height: fit-content;
    opacity:100%;
}
/* .navigation-bar a .active::after {
    transform: scaleX(1);
} */

.navigation-bar a:last-of-type {
    margin-right:150px;
}
.navigation-bar button {
  width:164px;
  height:40px;
  background-color:#EE8313;
  font-weight: 600;
  font-family:var(--font-family);
  color: white;
  border-style:none; 
  cursor:pointer;
  transition: all 0.5s ease-in-out;
  /* cursor: url('img/cursor.png'), pointer; */
}
.navigation-bar button:hover {
    background-color: black;
    border:solid 2px #EE8313;
    transform:scale(1.1 , 1.1);
    color:#EE8313;
}
.navigation-bar img {
    width:150px;
    height:150px;
    margin-right: 330px;
    cursor: url('img/cursor.png'), pointer;
}

#menu-icon {
   margin-left:70px;
   margin-right: 0;
   width:50px;
   height:44px;
   background-color:#343434;
}
.close-sidebar-icon {
    width:50px;
    height:44px;
    margin: 6px 0 0 6px;
}

.slide-animate-close {
    transform: translateX(350px);
}

.slide-animate-open {
    transform: translateX(-350px);
}

/* СТИЛИЗАЦИЯ МЕННЮ НАВИГАЦИИ ВВЕРХУ СТРАННИЦЫ */
.side-bar-menu {
    position:fixed;
    left:1350px;
    bottom:0px;
    width:350px;
    height:574px;
    background-color:#343434;
    z-index: 4;
    transition: transform 1s ease-out;
    overflow-y:scroll;
}

.side-bar-list {
    text-align: center;
    list-style:none;
    padding:0;


}
.side-bar-list li:first-child {
    margin-bottom:60px;
    font-size:27px;
    letter-spacing: 3px;
    font-family:var(--font-family);
    color: black;
    font-weight: 600;
    text-transform:uppercase;
}
.side-bar-list li:not(:first-child) {
    margin-bottom:45px;
    font-family:var(--font-family);
    font-size:20px;
    text-transform:uppercase;
}
.side-bar-list li:not(:first-child):hover {
    color: #EE8313;
}
.container-with-info {
    margin:167px 0 32px 0;
    font-family:var(--font-family);
    height:500px;
    transition: filter 0.5s ease;
    cursor: url('img/cursor.png'), pointer;
}
 .line {
    /* font-size:40px;
    margin-bottom: 28px;
    width:500px;
    height: 160px;
    font-family: "Rubik Mono One", monospace;
    font-weight: 400;
    position:relative;
    color:black; */
    white-space: nowrap; /* Запрещаем перенос текста внутри строки */
    overflow: hidden; /* Скрываем текст, который выходит за пределы */
    border-right: 3px solid; /* Эффект мигающего курсора */
    width: 0;
}

.container-print-anim {
    font-family: "Rubik Mono One", monospace;;
    font-size: 33px;
}
/* Анимация для первой строки */
.line1 {
    animation: typing1 9.5s steps(60, end), blink 0.75s step-end infinite 3.7s;
}

/* Анимация для второй строки с задержкой */
.line2 {
    animation: typing2 4.5s steps(45, end) 3.5s forwards, blink 0.75s step-end infinite 7s;
}

@keyframes typing1 {
    from {
         width: 0; 
    }
    to { 
        width: 100%; 
    }
}

@keyframes typing2 {
    from { 
        width: 0; 
    }
    to { 
        width: 54%; 
    }
}

@keyframes blink {
    from { 
        border-right-color: black; 
    }
    to {
         border-right-color: transparent; 
    }
}
.description {
    margin-bottom:38px;
}
.btn-buy-now {
    width:110px;
    height:48px;
    margin-right: 35px;
    background-color:#EE8313;
    font-weight: 600;
    font-family:var(--font-family);
    color: white;
    border-style:none; 
    cursor:pointer;
    transition:all 0.3s ease-in-out; 
    cursor: url('img/cursor.png'), pointer;
}
.btn-buy-now:hover {
    background-color: black;
    border:solid 2px #EE8313;
    transform:scale(1.1 , 1.1);
    color:#EE8313;
}
.btn-video-intro {
    width:180px;
    height:48px;
    font-weight: 600;
    font-family:var(--font-family);
    border:solid 1px #EE8313;
    color:#EE8313;
    background-color: black;
    cursor:pointer;
    transition:all 0.3s ease-in-out; 
    cursor: url('img/cursor.png'), pointer;
}
.btn-video-intro:hover {
    border:solid 2px #EE8313;
    transform:scale(1.1 , 1.1);
}
.description {
    margin-top:20px;
    font-family: "Rubik Mono One", monospace;
    font-size:13px;
    font-weight: 300;
    width:400px;
}
.spanDescript1 , .spanDescript2 {
    font-weight: 700;
    font-size:40px;
    margin-right:10px ;
}
.descrptDiv1 {
    display:inline-block;
    margin-right: 40px;
    width: 225px;
    height: 52px;
}
.descrptDiv2 {
    display:inline-block;
    width: 190px;
    height: 52px;

}

.img-container {
    position:relative;
    bottom:820px;
    left:410px;
    z-index:3;
}
.img-container img {
    filter: drop-shadow(25px 25px 50px black);
}
.backgroundImg {
    position:relative;
    bottom:360px;
    left:640px;
    z-index:2;
    background-color:#343434;
    width: 757px;
    height: 480px;
    border-radius: 370px 370px 0 0;
    box-shadow: inset 0px 6px 20px 0px #000;
}
/* НАЧИНАЕМ СТИЛИЗОВАТЬ КАРТОЧКИ ВЫБОРА КАТЕГОРИИ АВТОМОБИЛЯ */
.cars-card-main-container {
    display:flex;
    justify-content:center;
    align-items: center;
    width:1200px;
    height:1000px;
}
.cars-card-child-container {
    display:flex;
    justify-content:center;
    align-items: center;
    flex-wrap:wrap;
    row-gap: 45px;
    column-gap: 45px;
    margin-right:74px;
    margin-bottom: 70px;
    width:1097px;
    height:945px;
}
.card-images-ferrari {
    background-image:url('img/ferrari.png');
    width:510px;
    height:450px;
    border-radius:70px;
    transition: all 0.5s ease-in-out;
}
.card-images-astonmartin {
    background-image:url('img/aston-martin.png');
    width:510px;
    height:450px;
    border-radius:70px;
    transition: all 0.5s ease-in-out;
}
.card-images-suv {
    background-image:url('img/SUV.png');
    width:510px;
    height:450px;
    border-radius:70px;
    transition: all 0.5s ease-in-out;
}
.card-images-supersuv {
    background-image:url('img/Super-suv.png');
    width:510px;
    height:450px;
    border-radius:70px;
    transition: all 0.5s ease-in-out;
}
.card:hover {
    transform: scale(1.1);
    border: solid 2px #EE8313;
}

.card-name {
    font-size: 30px;
    font-family: var(--font-family);
    font-weight: 600;
    position:relative;
    width:170px;
    top:40px;
    left:40px;
}
.card-link {
    position:relative;
    display:inline-block;
    top:280px;
    left:370px;
    font-family: var(--font-family);
    font-size: 19px;
    width:170px;
    cursor: pointer;
    filter:blur(0);
    cursor: url('img/cursor.png'), pointer;
}
.card-link::after {
    content:url('img/Frame\ 22.png');
    position:absolute;
    top:-2px;
    right: 73px;
    width:25px;
    height:25px;
    opacity:0;
    transition:all 0.4s ease;
    
}
.card-link:hover::after {
    opacity:1;
    right:65px;
    filter:blur(0px);
}
.name-container {
    font-size: 42px;
    font-family: var(--font-family);
    font-weight: 700;
    margin-bottom: 40px;
    padding:0 32.3% 0 32.3%;
    width:380px;
}
.name-container2 {
    font-size: 42px;
    font-family: var(--font-family);
    font-weight: 700;
    margin-bottom: 40px;
    padding:0 60.5% 0 28px;
    width:430px;
}

.main-cont-other-serv {
    display:flex;
    justify-content: center;
    width:1200px;
    height:520px;

}
.child-cont-othr-serv {
    display:flex;
    justify-content: center;
    height:480px;
    margin-right: 74px;
}
.card-othr-inf {
    display:flex;
    justify-content: center;
    align-content: center;
    align-items: center;
    flex-direction: column;
    height:400px;
    width:370px;
    text-align: center;
}

.card-othr-inf img {
    width:325px;
    height:280px;
}
.header-othr-inf {
    font-size: 20px;
    font-weight: 700;
    font-family: var(--font-family);
    /* width:fit-content; */
}
.descrpt-other-inf {
    font-size: 12px;
    font-weight: 400;
    font-family: var(--font-family);
    color: lightslategrey;
    width:fit-content;
}
/* СТИЛИЗАЦИЯ КАРТОЧЕК ВЫБОРА МЕСТНОСТИ*/
.name-place-dest {
    font-size: 42px;
    font-family: var(--font-family);
    font-weight: 700;
    margin-bottom: 40px;
    padding:0 32.3% 0 32.3%; 
    width:480px;
    text-align:center;
}

.place-dest-container {
    display:flex;
    flex-direction: row;
    row-gap: 24px;
    column-gap: 24px;
    flex-wrap: wrap;
    margin-bottom: 100px;
}

.child-element-dest {
    width:348px;
    height:428px;
    background: rgba(19, 19, 19, 1);
    border-radius:28px;
    transition: all 0.4s ease-in-out;
}
.child-element-dest:hover {
    transform:scale3d(1.1, 1.1, 1);
    background-color: rgba(50, 50, 50, 1);
}
.child-element-dest img {
    width:348px;
    border-radius:28px 28px 0 0 ;
}
.child-element-dest a {
    text-decoration: none;
    color: var(--interface-color);
    padding:0 24px 24px 24px;
    font-family: var(--font-family);
    font-size: 15px;
    font-weight: 400;
}
.child-element-dest a:hover {
    color:darkgray;
    transition:color 0.4s ease-in;
}

.city {
    font-size: 22px;
    font-family: var(--font-family);
    font-weight: 700;
    text-align:start;
    padding:0 24px 0 24px;
}
.descript-dest-card {
    font-size: 15px;
    font-family: var(--font-family);
    font-weight: 200;
    text-align:start;
    padding:0 24px 0 24px;
    color:darkgray;
}
.price {
    font-size: 16px;
    font-family: var(--font-family);
    font-weight: 600;
    text-align:start;
    padding:0 24px 0 24px;
}
.price-logo {
   position: relative;
   top:7px;
   padding: 0 12px 0 0;
}
.location-name {
    font-size: 42px;
    font-family: var(--font-family);
    font-weight: 700;
    margin-bottom: 40px;
    padding:0 32.3% 0 32.3%; 
    width:380px;
    text-align:center;
}
.location-container {
    display:flex;
    justify-content: center;
    align-content: center;
    align-items: center;
    padding-bottom: 90px;
    cursor: url('img/cursor.png'), pointer;
}
.img-location {
    background: url('img/location.png');
    width:800px ;
    height:324px;
    resize: both;
    overflow: auto;
}
.location-marker {
    width:30px;
    height:30px;
    position:relative;
    top:169px;
    left:498px;
    cursor: url('img/cursor.png'), pointer;
}

.google-map {
    width:200px;
    height:50px;
    background-color: rgba(0, 0, 0, 0.5);
    position: relative;
    top:264px;
    left:555px;
    border-radius: 20px;
    cursor: url('img/cursor.png'), pointer;
}

.footer-main {
    display:flex;
    justify-content: center;
    align-content: center;
    align-items: center;
    flex-direction: row;
    width:100% !important;
    height:377px;
    padding:0 120px 0 120px;
    font-family: "Manrope", sans-serif;
    font-size:16px;
    font-weight:400;
    background-color: #1F1905;
    margin-left: 0 !important;
}
.footer-main img {
    width:150px;
    height:150px;
    position:relative;
}

.down-line {
    width:100%;
    background-color: #EE8313;
    height:68px;
    text-align: center;
}
.down-line p {
    margin:0;
    font-size: 17px;
    font-family: var(--font-family);
    font-weight: 300;
    padding-top: 25px;
}
.footer-list {
    list-style: none;
    margin-right: 90px;
    cursor: url('img/cursor.png'), pointer;
}
.footer-list li:not(:first-child) {
    font-size: 16px;
    font-family: var(--font-family);
    font-weight: 400;
    opacity:80%;
    margin-bottom: 30px;
    transition: color 0.4s ease-in-out;
    cursor: url('img/cursor.png'), pointer;
}
.footer-list li:not(:first-child):hover {
   color:#EE8313;

}
.footer-list li:first-child {
    margin-bottom:40px;
    font-size: 19px;
    font-weight: 600;
}
.footer-text {
    font-size: 20px;
    font-family: var(--font-family);
    font-weight: 600;
    width:fit-content;
    padding-left: 25px;

}
.img-logo-title {
    position:relative;
    right:237px;
    bottom:50px;
    width:260px;
    height: fit-content;
}
/*                                       DARK THEME BUTTON                                                  */
.toggle-switch {
    display: inline-block;
    position: relative;
    width: 90px;
    height: 50px;
    right: 800px;
}

.toggle-input {
    display: none;
}

.toggle-label {
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    width: 98%;
    height: 98%;
    padding: 0 15px;
    background-color: #ccc;
    border-radius: 25px;
    position: relative;
    transition: background-color 0.3s;
    border:solid 2px #343434;
}

/* Иконка солнца для Day Mode */
.sun {
    color: black;
    font-weight: bold;
    font-size: 10px;
    transition: font-size 1s ease;
}

/* Иконка луны для Night Mode */
.moon {
    color: white;
    font-weight: bold;
    font-size: 10px;
    transition: font-size 0.6s ease;
}

/* Круглый индикатор */
.toggle-label::before {
    content: "";
    position: absolute;
    width: 44px;
    height: 44px;
    background-color: white;
    border-radius: 50%;
    top: 3px;
    left: 3px;
    transition: transform 0.3s;
}

/* Переключение цветов и положения индикатора при включении переключателя */
.toggle-input:checked + .toggle-label {
    background-color: black;
}

.toggle-input:checked + .toggle-label .sun {
    color: white;
    font-size:13px;
}

.toggle-input:checked + .toggle-label .moon {
    color: black;
    font-size:13px;
}

.toggle-input:checked + .toggle-label::before {
    transform: translateX(70px);
}
/* Стили для Day Mode */
body.day-mode {
    background-color: #ffffff;
    color: #000000;
}

/* Стили для Night Mode */
body.night-mode {
    background-color: #000000;
    color: #ffffff;
}