*{
    margin: 0;
    padding: 0;
    border: 0;
}

:root{
    --font-family: 'AA Stetica',sans-serif;
}

.banner{
    position: relative;
    width: 100%;
    height: calc(100vh + 100px);
    box-sizing: border-box;
    background: #96ea2e;
}

.right_block{
    position: absolute;
    top: 186px;
    z-index: 2;
    left: 272px;
    display: flex;
    flex-direction: column;
}

.block_text{
    font-family: var(--font-family);
    font-weight: 900;
    font-size: 64px;
    padding: 14px 41px;
    border-radius: 12px;
    text-transform: uppercase;
    transition: all .3s ease;
    max-height: 103px;
    color: #262222;
    box-shadow: 4px 4px 15px 5px rgba(108, 177, 24, 0.3);
    background: #fdfdfd;
}

h2{
    font-family: var(--font-family);
    font-weight: 300 !important;
    font-size: 32px !important;
    color: #262222 !important;
    text-transform: none !important;
    padding: 23px 21px 23px 20px !important;
    max-width:  266px;
    max-height: fit-content !important;
}

.h1{
    display: flex;
    align-items: flex-start;
    flex-direction: column;
    gap: 10px;
    & span:nth-child(2){
        color: #96ea2e;
    }
}

.navbar-site{
    width: 1920px;
    height: 101px;
    z-index: 5;
    animation: navbar-transparent-non;
    animation-timeline: scroll();
    animation-fill-mode: both;
    animation-range: 20px 150px;
}

.nav-item{
    font-family: var(--font-family);
    font-weight: 400;
    font-size: 24px;
    color: #262222;
}

@keyframes navbar-transparent-non {
    to {
      border-bottom: 1px solid rgba(167, 155, 155, 0.5);
      background-color: #ffffff06;
      backdrop-filter: blur(40px);
      z-index: 5;
      padding: 20px 20px;
    }
  }

.banner-img{
    position: absolute;
    top: 59px;
    right: 89px;
    transition: all .3s ease;
    z-index: 1;
}

.btn-ride{
    display: flex;
    align-items: center;
    justify-content: center;
    text-transform: uppercase;
    gap: 25px;
    font-family: var(--font-family);
    font-style: italic;
    font-weight: 700;
    font-size: 32px;
    border-radius: 12px;
    box-shadow: 4px 4px 15px 5px rgba(108, 177, 24, 0.3);
    background: #262222;
    color: #96ea2e;
    padding: 19px 25px;
    box-sizing: content-box;
    text-decoration: none;
    width: 226px;
    height: 37px;
    cursor: pointer;
    transition: all .3s ease;
}
.btn-ride-small{
    display: flex;
    align-items: center;
    justify-content: center;
    text-transform: uppercase;
    gap: 25px;
    font-family: var(--font-family);
    font-weight: 900;
    font-size: 56px;
    color: #96ea2e;
    box-shadow: 4px 4px 15px 5px rgba(108, 177, 24, 0.3);
    background: #262222;
    color: #96ea2e;
    box-sizing: content-box;
    text-decoration: none;
    border-radius: 12px;
    width: 50px;
    height: 50px;
    cursor: pointer;
}

.animation-right-scale{
    &:hover{
        transition: all .3s ease;
        transform: translateX(10px) scale(1.02);
    }
}

.triangle-back{
    position: absolute;
    right: 0;
    top:0 ;
}

.track-adv{
    position: relative;
}

.advantage-circle{
    z-index: 3;
    position: absolute;
    width: 330px;
    height: 330px;
    box-shadow: 4px 4px 4px 0 rgba(45, 41, 41, 0.08);
    border-radius: 100%;
    background: #fdfafa;
    display: flex;
    flex-direction: column;
    gap: 10px;
    justify-content: center;
    align-items: center;
    font-family: var(--font-family);
    font-weight: 500;
    font-size: 24px;
    color: #262222;
    text-transform: uppercase;
    &:nth-child(1){
        top: -150px;
        left: 83px;
    }
    &:nth-child(2){
        top: 50px;
        left: 551px;
    }
    &:nth-child(3){
        top: -150px;
        right: 621px;
    }
    &:nth-child(4){
        top: 50px;
        right: 112px;
    }
}

.contact{
    position: relative;
    margin-top: 190px;
    width: 100%;
    overflow: hidden;
    height: 758px;
    padding-left: 100px;
}

.contact-container{
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 40px ;
    flex-wrap: wrap;
    border-radius: 12px;
    width: 1517px;
    height: 471px;
    background: #262222;
    margin-bottom: 35px;
    & span{
        font-family: var(--font-family);
        font-weight: 500;
        font-size: 32px;
        color: #fff;
        & mark{
            font-family: var(--font-family);
            font-weight: 300;
            font-size: 30px;
            background: none;
            color: #fff;
        }
    }
}

.block-contact:hover + .contact-car{
    right: -300px;
    filter: blur(3px); /* Размытие */ 
    overflow: hidden;
}

.contact-car{
    position: absolute;
    right: 0;
    top: 0;
    transition: all .5s ease-out;
}

.reviews{
    width: 100%;
    height: 722px;
    display: flex;
    flex-direction: column;
    margin-top: 100px;
    justify-content: center;
    & h3{
        text-align: center;
        font-family: var(--font-family);
        font-weight: 900;
        font-size: 32px;
        color: #262222;
        margin-bottom: 68px;
    }
}

.reviews_container{
    display: flex;
    flex-direction: column;
    margin: 0 auto;
    width: 1362px;
    gap: 75px;
}

.reviews_card{
    position: relative;
    border-radius: 12px;
    padding: 27px;
    width: 100%;
    box-shadow: 4px 4px 80px 15px rgba(170, 156, 156, 0.24);
    background: #fdfafa;
    & h4{
        font-family: var(--font-family);
        font-weight: 500;
        font-size: 32px;
        color: #262222;
    }
    & .comment {
        font-family: var(--font-family);
        font-weight: 300;
        font-size: 24px;
        color: #262222;
    }
}

.card_avatar{
    border-radius: 50px;
    width: 53px;
    height: 53px;   
    box-shadow: 4px 4px 50px 0 rgba(38, 34, 34, 0.53);
    object-fit: cover;
    position: absolute;
    top: -27px;
    left: -27px;
}

.navbar-nav{
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 10px;
}

.label-profile{
    display: flex;
    align-items: center;
}

.link{
    font-family: var(--font-family);
    font-weight: 300;
    font-size: 24px;
    color: #262222;
    background: none;
}

.label-profile::before{
    display: block;
    width: 50px;
    height: 50px;
    content: '';
    background: url('../images/icons/profile.svg') no-repeat center;
}

.site-login{
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background-color: #96ea2e;
    height: 100vh;
}

.login-h3{
    font-family: var(--font-family);
    font-weight: 900;
    font-size: 40px;
    color: #262222;
}
.col-form-label{
    font-family: var(--font-family);
    font-weight: 300;
    font-size: 24px;
    width: fit-content;
    color: #262222;
}
.form-control, .form-select{
    font-family: var(--font-family);
    font-weight: 300;
    font-size: 24px;
    color: #262222;
    border-radius: 15px;
    padding: 17px 23px;
    background: #fff; 
}

.invalid-feedback{
    font-family: var(--font-family);
    font-weight: 400;
    font-size: 20px;
    color: #504343;
}

.btn-call{
    display: flex;
    align-items: center;
    justify-content: center;
    text-transform: uppercase;
    gap: 25px;
    font-family: var(--font-family);
    font-style: italic;
    font-weight: 700;
    font-size: 32px;
    border-radius: 12px;
    background: #96ea2e;
    color: #262222;
    padding: 19px 25px;
    box-sizing: content-box;
    text-decoration: none;
    width: 226px;
    height: 37px;
    cursor: pointer;
}

.form-group{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-end !important;
}

#popover-application{
    margin: auto auto;
    border-radius: 12px;
    padding: 25px;
    width: 70%;
    height: calc(100vh - 5%);
    background: #fdfafa;
}

#popover-application::backdrop{
    background: rgba(45, 41, 41, 0.08);
    backdrop-filter: blur(20px);
    pointer-events: none;
}

#application-form{
    margin: 50px auto;
    width: 581px;
    height: fit-content;
}

.site-profile{
    width: 100%;
    padding: 120px 194px 0 194px;
    background-color: #96ea2e;
    height: 100vh;  
}

.avatar{
    width: 125px;
    height: 125px;
    border-radius: 50%;
    object-fit: cover;
}

.profile-info{
    display: flex;
    flex-direction: row;
    gap: 20px;
    width: fit-content;
}

.profile-fio{
    display: flex;
    flex-direction: column;
    justify-content: center;
    & h2{
        font-family: var(--font-family);
        font-weight: 700;
        font-size: 24px;
        color: #262222;
    }
    & a{
        text-decoration: none;
        font-family: var(--font-family);
        font-weight: 300;
        font-size: 24px;
        color: #262222;
    }
}

.order{
    display: flex;
    flex-direction: column;
    margin-top: 45px;
}

.table-profile{
    display: flex;
    flex-direction: column;
    gap: 20px;
    border-radius: 12px;
    font-family: var(--font-family);
}


.thead{
    display: flex;
    flex-direction: row;
    border-radius: 12px;
    width: 100%;
    padding: 30px 20px;
    background: #fdfafa;
}

.tbody{
    display: flex;
    flex-direction: column;
    border-radius: 12px;
    width: 100%;
    padding: 30px 20px;
    background: #fdfafa;
    & .tr{
        margin-bottom: 50px;
    }
    & .tr:last-child{
        margin-bottom: 0;
    }
}

.tr{
    display: grid;
    grid-template-columns: 30px 200px 200px 250px 150px 160px 150px 1fr;
    flex-direction: row;
    gap: 15px;
}

.th{
    background: none !important;
}

.rides-index, .user-index, .driver-index, .transactions-index{
    padding: 100px 80px;
}

.want-driver{
    display: flex;
    margin-top: 100px;
    margin-bottom: 50px;
    justify-content: center;
}

#driver-form{
    width: 990px;
    background: #96ea2e;
    border-radius: 12px;
    padding: 70px 200px;
    & h3{
        font-family: var(--font-family);
        font-weight: 900;
        font-size: 32px;
        color: #262222;
    }
    & p {
        font-family: var(--font-family);
        font-weight: 400;
        font-size: 18px;
        color: #262222;
    }
}

.driver-form{
    display: flex;
    margin: 0 auto;
    width: 500px;
}

.driver-form .form-group{
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start !important;
}

td img{
    border-radius: 50%;
    width: 95px;
    height: 95px;
}

.footer-taxi{
    position: relative;
    display: grid;
    grid-template-areas: '. . . . logo . . . .' 'nav nav nav nav . phone phone ogrn ogrn' 'ip ip ip inn . address address address .';
    gap: 10px;
    height: 406px;
    background: #262222;
    padding: 55px 62px 55px 177px;
}

.footer-nav{
    grid-area: nav;
    z-index: 2;
    & nav{
        display: flex;
        flex-direction: row;
        justify-content: space-between !important;
        gap: 15px;
        & li{
            display: flex;
            & a {
                text-decoration: none;
            }
        }
    }
}

.phone{
    grid-area: phone;
    z-index: 2;
}

.ogrn{
    grid-area: ogrn;
        z-index: 2;
}

.logo{
    display: flex;
    justify-content: center !important;
    grid-area: logo;
    z-index: 2;
    max-width: 100px;
}

.ip{
    grid-area: ip;
        z-index: 2;
}

.inn{
    grid-area: inn;
        z-index: 2;
}

.address{
    grid-area: address;
    z-index: 2;
}

.circle{
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    height: 100%;
}

.block-taxi{
    display: flex;
    justify-content: flex-start;
    align-items: center;
    border-radius: 12px;
    width: 100%;
    background: #fdfafa;
    padding: 15px;
    font-family: var(--font-family);
    font-weight: 300;
    font-size: 24px;
    color: #262222;
}