@font-face {font-family:'avenir';src:url('/assets/fonts/AvenirNextCyr-Thin.woff') format('woff');font-weight:100;font-style:normal;}
@font-face {font-family:'avenir';src:url('/assets/fonts/AvenirNextCyr-Light.woff') format('woff');font-weight:300;font-style:normal;}
@font-face {font-family:'avenir';src:url('/assets/fonts/AvenirNextCyr-Regula.woff') format('woff');font-weight:400;font-style:normal;}
@font-face {font-family:'avenir';src:url('/assets/fonts/AvenirNextCyr-Medium.woff') format('woff');font-weight:500;font-style:normal;}
@font-face {font-family:'avenir';src:url('/assets/fonts/AvenirNextCyr-Heavy.woff') format('woff');font-weight:600;font-style:normal;}
@font-face {font-family:'avenir';src:url('/assets/fonts/AvenirNextCyr-Bold.woff') format('woff');font-weight:700;font-style:normal;}

html, body{
    font-family: 'avenir',Arial,sans-serif;
    overflow-x: hidden;
}
a{
    text-decoration: none;
    color: #f73a51;

}
a:hover{
    color: inherit;
}
img {
    max-width: 100%;
}
.badge{
    position: relative;
    right: -46%;
    top: -21px;
    padding: 10px 37px;
    font-style: normal;
    font-weight: 700;
    font-size: 12px;
    line-height: 158.9%;
    text-align: center;
    text-transform: uppercase;
    color: #fff;
    transform: rotate(45deg);
    background: #f73a51;
}
#scrollToTop {
    display: none; /* Hidden by default */
    position: fixed; /* Fixed/sticky position */
    bottom: 20px; /* Place the button at the bottom of the page */
    right: 30px; /* Place the button 30px from the right */
    z-index: 99; /* Make sure it does not overlap */
    border: none; /* Remove borders */
    outline: none; /* Remove outline */
    background-color: red; /* Set a background color */
    color: white; /* Text color */
    cursor: pointer; /* Add a mouse pointer on hover */
    padding: 15px; /* Some padding */
    border-radius: 10px; /* Rounded corners */
    font-size: 18px; /* Increase font size */
}

#scrollToTop:hover {
    background-color: #555; /* Add a dark-grey background on hover */
}

.btn {
    margin-top: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    background-color: #fa1955;
    height: 45px;
    padding-left: 30px;
    padding-right: 30px;
    border-radius: 100px;
    font-size: 14px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: bold;
}
.btn:hover,
.books-your-slot:hover,
#header-menu .navbar-text a.books-your-slot:hover {
    color: #8249c1;
    background-color: #ffd012;
}

.books-your-slot,
#header-menu .navbar-text a.books-your-slot{
    color: #ffffff;
    background-color: #fa1955;
    text-decoration: none;
    -webkit-border-radius: 100px;
    height: 60px;
    font-size: 16px;
    padding-left: 60px;
    padding-right: 60px;
    border: 0 none;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    font-weight: bold;
    background-image: none;
    cursor: pointer;
    -webkit-appearance: none;
    user-select: none;
    box-sizing: border-box;
    display: flex;
    justify-content: center;
    align-items: center;
    width: min-content;
}

#header-menu{
    background-color: #539ce3;
    color: #ffffff;
}
#header-menu .nav-link{
    color: #ffffff;
    font-size: 20px;
    font-weight: 500;
}
#header-menu .nav-link,
#header-menu .navbar-text a{
    color: #ffffff;
}
#header-menu .nav-link:hover,
#header-menu .navbar-text a:hover{
    color: #fa1955;
}
#header-menu .navbar-brand{
    max-width: 100px;
    width: 100px;
    min-width: 100px;
    height: auto;
}
#header-menu .navbar-nav{
    margin: 0 auto;
}

#hero {
    min-height: 100vh;
    background-repeat: no-repeat;
    background-size: cover;
    background-image: url(/assets/img/hero-backgraund.png);
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #61a5e6;
    padding-top: 80px;
}

#hero .left-side{
    color: #ffffff;
    font-weight: 800;
    letter-spacing: 1px;
    background-position: center center;
    border-color: transparent;
    border-style: solid;
    justify-content: center;
    display: flex;
    flex-direction: column;
}
#hero .left-side>div:nth-child(1){
    font-size: 30px;
    line-height: 1.2;
    margin-bottom: 20px;
}
#hero .left-side>div:nth-child(2){
    font-size: 20px;
    margin-bottom: 30px;
}
#hero .left-side .img-wrapper{
    max-width: 60px;
}

#hero .left-side .left-side2,
#hero .left-side .right-side2 {
    display: flex;
    justify-content: left;
    align-items: center;
    max-width: 50%;
}
#hero .left-side .buttons{
    margin-top: 50px;
}
#hero .left-side .buttons>div{
    max-width: 50%;
}

#hero .right-side>.row>div:first-child{
    max-width: 200px;
    transform: rotate(350deg);
    margin-left: 100px;
}

#hero .right-side>.row>div>div:first-child{
    color: #e63a5c;
    font-size: 84px;
    line-height: 1.2;
    font-weight: 800;
    letter-spacing: 1px;
    background-position: center center;
    border-color: transparent;
    border-style: solid;
}
#hero .right-side>.row>div>div:last-child{
    color: #ffffff;
    font-size: 30px;
    font-weight: 500;
    letter-spacing: 1px;
    background-position: center center;
    border-color: transparent;
    border-style: solid;
    line-height: 36px;
}
#hero .right-side>.row>div:last-child{
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}
#hero .right-side>.row>div{
    margin: 0 auto;
}

#about {
    padding-top: 150px;
}
#about h2{
    margin-bottom: 40px;
    font-size: 42px;
    line-height: 1.23;
    font-weight: 600;
    color: #000000;
    text-align: center;
}
#about .left-side{
    margin-bottom: 30px;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}
#about .left-side img{
    max-width: 500px;
}
#about .right-side{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
#about .right-side li{
    font-size: 20px;
    font-weight: 300;
    color: #000000;
    margin-bottom: 30px;
    max-width: 500px;
}
#about .buttons {
    margin-top: 70px;
    display: flex;
    justify-content: center;
}
#about .arrow-icon {
    width: 45px;
    transform: translateX(-100%);
}


#about2{
    padding-top: 150px;
    padding-bottom: 150px;
}
#about2 h2{
    font-size: 42px;
    line-height: 1.23;
    font-weight: 600;
    color: #000000;
    text-align: center;
    margin-bottom: 105px;
}

#about2 .item-wrapper{}
#about2 .item-wrapper .item{
    width: 50.1%;
    /*border-right: 3px solid #8349c1;*/
    text-align: center;
    padding-right: 44px;
    margin-bottom: -5px;
}
#about2 .item-wrapper .item:nth-child(2n){
    margin-left: auto;
    /*border-left: 3px solid #8349c1;*/
    border-right: none;
    padding-right: 0;
    padding-left: 44px;
}

#about2 .item-wrapper .item .img-wrapper,
#about2 .item-wrapper .item .title,
#about2 .item-wrapper .item .description{
    max-width: 386px;
    margin-left: auto;
}

#about2 .item-wrapper .item:nth-child(2n) .img-wrapper,
#about2 .item-wrapper .item:nth-child(2n) .title,
#about2 .item-wrapper .item:nth-child(2n) .description{
    margin-left: unset;
    margin-right: auto;
}

/*#about2 .item-wrapper .item:after{*/
/*    content: ' ';*/
/*    background-color: #8ba5ff;*/
/*    border-radius: 50%;*/
/*    width: 20px;*/
/*    height: 20px;*/
/*    position: absolute;*/
/*    right: 49.5%;*/
/*    margin-top: -8.5%;*/
/*}*/
/*#about2 .item-wrapper .item:nth-child(4):after{*/
/*    margin-top: -7.2%;*/
/*}*/
/*#about2 .item-wrapper .item:nth-child(5):after,*/
/*#about2 .item-wrapper .item:nth-child(6):after{*/
/*    margin-top: -5.8%;*/
/*}*/

/*#about2 .item-wrapper .item:first-child:before{*/
/*    content: ' ';*/
/*    background-color: #ffffff;*/
/*    width: 3px;*/
/*    height: 10%;*/
/*    position: absolute;*/
/*    right: 49.93%;*/
/*}*/
/*#about2 .item-wrapper .item:last-child:before{*/
/*    content: ' ';*/
/*    background-color: #ffffff;*/
/*    width: 3px;*/
/*    height: 11%;*/
/*    position: absolute;*/
/*    right: 49.93%;*/
/*    margin-top: 5%;*/
/*}*/

#about2 .item-wrapper .item .img-wrapper img{
    width: 100%;
    display: block;
    margin: 0 auto 14px;
    max-width: 60px;
}
#about2 .item-wrapper .item .title{
    margin-bottom: 6px;
    margin-top: 10px;
    font-size: 22px;
    line-height: 1.35;
    font-weight: 600;
    color: #000000;
}
#about2 .item-wrapper .item .description{
    margin-top: 10px;
    margin-bottom: 5px;
    font-size: 15px;
    line-height: 1.55;
    font-weight: 300;
    color: #000000;
}

#rec519409067{
    padding-top: 120px;
    padding-bottom: 120px;
    background-color: #4399e0;
    font-size: 42px;
    line-height: 1.3;
    text-align: center;
    font-weight: bold;
}
#rec519409067 h2{
    color: #ffffff;
    font-size: 42px;
    font-weight: bold;
}
#rec519409067 .description{
    color: rgb(255, 208, 20);
}

#pricing{
    padding-top: 135px;
    padding-bottom: 50px;
}
#pricing h2{
    margin-bottom: 105px;
    font-size: 42px;
    line-height: 1.23;
    font-weight: 600;
    color: #000000;
    text-align: center;
}

#pricing .item-wrapper{
    border: 1px solid #e0e6ed;
    background-color: #f5f1fa;
    border-radius: 50px;
    text-align: center;
    overflow: hidden;
    width: 100%;
    padding: 45px 30px;
    box-sizing: border-box;
    max-width: 360px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 30px;
}
#pricing .item-wrapper img {
    max-width: 200px;
    max-height: 200px;
}
#pricing .item-wrapper .item-name{
    margin-bottom: 25px;
    margin-top: 40px;
    height: 32px;
    font-size: 24px;
    line-height: 1.35;
    font-weight: 600;
    color: #000000;
}

#pricing .item-wrapper .item-description{
    font-size: 16px;
    text-align: left;
    line-height: 1.55;
    font-weight: 300;
    color: #000000;
    min-height: 158px;
}
#pricing .item-wrapper .item-save{
    color: rgb(48, 199, 73);
    font-size: 22px;
    font-weight: bold;
    margin-top: 20px;
}
#pricing .item-wrapper .item-price{
    margin-top: 25px;
    font-weight: 600;
    color: #000000;
    font-size: 20px;
    line-height: 1.35;
}
#pricing .arrow-icon{
    width: 45px;
    transform: translateX(-100%);
}
#pricing .buttons {
    margin-top: 70px;
    display: flex;
    justify-content: center;
}

#contacts{
    padding-top: 150px;
    padding-bottom: 150px;
    background-color: #f5f1fa;
}

#contacts a{
    color: #000000;
    font-style: italic;
}
#contacts h2{
    font-size: 42px;
    line-height: 1.23;
    font-weight: 600;
    color: #000000;
    text-align: center;
    margin-bottom: 90px;
}

#contacts .left-side{
    font-size: 25px;
    line-height: 1.45;
    font-weight: 300;
    color: #000000;
    margin-bottom: 30px;
}

#countdown-section{
    min-height: 561px;
    background-image: -webkit-linear-gradient(top, rgb(67, 153, 224), rgb(67, 153, 224));
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    color: #ffffff;
}
#countdown-section .title{
    font-size: 52px;
    line-height: 1.23;
    font-weight: 600;
    text-align: center;
}
#countdown-section .second{
    margin-top: 18px;
    margin-bottom: 55px;
    font-size: 20px;
    line-height: 1.55;
    font-weight: 300;
    text-align: center;
}
#countdown-section #countdown ul{
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 0;

}
#countdown-section #countdown ul li {
    list-style: none;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-transform: lowercase;
    min-width: 90px;
    padding-left: 30px;
    padding-right: 30px;
    border-right: 1px solid #ffffff33;
}
#countdown-section #countdown ul li:last-child{
    border: none;
}
#countdown-section #countdown ul li span {
    font-weight: 600;
    font-size: 64px;
    line-height: 1.23;
}
#countdown-section .button-wrapper{
    display: flex;
    justify-content: center;
    margin-top: 50px;
}

.t-input-title {
    margin-top: 30px;
}
.navbar-toggler{
    border-color: #ffffff;
}
.discount{
    display: none;
}

@media screen and (max-width: 1400px){
    #hero .right-side>.row>div:first-child{
        margin-right: -100px;
    }
    #hero .right-side>.row>div>div:first-child{
        font-size: 64px;
    }
}
@media screen and (max-width: 1199px){
    #hero .right-side>.row>div:first-child{
        margin-right: -20px;
        margin-left: 6px;
    }
    #hero .right-side>.row>div>div:first-child {
        font-size: 50px;
    }
}
@media screen and (max-width: 992px){
    #header-menu {
        background-color: #539ce3;
    }
    #hero .left-side>div:nth-child(1){
        font-size: 35px;
        margin-bottom: 20px;
    }
    #hero .left-side>div:nth-child(2){
        font-size: 18px;
    }
    #hero{
        padding-top: 100px;
        background-size: contain;
        background-repeat: unset;
    }
    #hero .right-side>.row>div:first-child{
        margin-left: 100px;
    }
    #hero .right-side>.row>div>div:last-child{
        font-size: 25px;
    }

}
@media screen and (max-width: 768px){
    #hero{
        padding-top: 8em;
    }
    #hero .right-side>.row>div:last-child img{
        max-width: 300px;
    }
    #hero .left-side{
        margin-bottom: 40px;
    }
    #hero .right-side>.row>div:first-child {
        margin-left: 78px;
    }
    #contacts h2,
    #rec519409067 h2,
    #rec519409067,
    #about2 h2,
    #about h2{
        font-size: 33px;
    }
}
@media screen and (max-width: 576px){
    .discount{
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        text-align: center;
        color: #e63a5c;
        font-weight: bold;
        font-size: 35px;
    }
    .discount span {
        font-size: 40px;
    }
    #hero .right-side>.row>div:first-child {
        display: none;
        margin-left: 34px;
        margin-bottom: -153px;
    }
    #hero .right-side>.row>div:last-child{
        margin-left: 0;
    }
    #about2 .item-wrapper .item,
    #about2 .item-wrapper .item:nth-child(2n){
        width: 100%;
        padding-right: 0;
        padding-left: 0;
        margin-bottom: 30px;
    }
    #about2 .item-wrapper .item .img-wrapper,
    #about2 .item-wrapper .item .title,
    #about2 .item-wrapper .item .description,
    #about2 .item-wrapper .item:nth-child(2n) .img-wrapper,
    #about2 .item-wrapper .item:nth-child(2n) .title,
    #about2 .item-wrapper .item:nth-child(2n) .description {
        margin-left: auto;
        margin-right: auto;
    }

    #pricing {
        padding-top: 26px;
    }
    #pricing h2{
        margin-bottom: 26px;
    }
    #pricing .item-wrapper .item-name{
        margin-top: 0;
        margin-bottom: 0;
    }
    #pricing .item-wrapper .item-description{
        min-height: unset;
    }
    #pricing .item-wrapper .item-price{
        margin-top: 0;
    }
    #pricing .item-wrapper{
        /*padding: 15px 30px;*/
    }
    #pricing .arrow-icon,
    #about .arrow-icon{
        display: none;
    }
    #hero .left-side>div:nth-child(1),
    #hero .left-side>div:nth-child(2){
        text-align: center;
    }
    #hero .left-side .left-side2,
    #hero .left-side .right-side2{
        justify-content: center;
    }
    #hero .left-side .buttons>div a {
        margin: 0 auto 0 auto;
    }
    #hero .left-side .buttons{
        margin-top: 30px;
    }
}
@media screen and (max-width: 507px){
    #hero .left-side .left-side2,
    #hero .left-side .right-side2,
    #hero .left-side .buttons>div{
        max-width: unset;
    }
}
@media screen and (max-width: 425px){
    #countdown-section #countdown ul li span{
        font-size: 45px;
    }
    #countdown-section .title{
        font-size: 40px;
    }
    #about .left-side img{
        max-width: 100%;
    }

}
@media screen and (max-width: 375px) {
    #countdown ul {
        padding: 0;
    }

    #contacts .left-side {
        font-size: 25px;
    }
}