@import url('fonts/inter/stylesheet.css');
@import url('fonts/montserrat/font.css');
@import url("fonts/mazzard/stylesheet.css");

html, 
body{
    background: var(--color-grey-bg);
}

#middle{
    margin: 30px auto;
    padding: 0 15px;
    position: relative;
}

.otz-container{
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
}

@media (max-width: 1200px) {
    #middle{
        margin: 80px auto;
    }
}


.aside-right{
    display: none;
}

.maxDiscountWrap{ 
    position: relative;
    background: #268DED url(imgnew/salebg.svg) center center no-repeat;
    background-size: auto 100%;
    display: flex;
    border-radius: 16px;
    min-height: 112px;
    width: 100%;
    padding: 0 48px;
    text-decoration: none !important;
}

@media (max-width: 1200px) {
    .maxDiscountWrap{
        padding: 0 15px;
        min-height: 80px;
    }
}


@media (max-width: 710px) {
    .maxDiscountWrap{
        padding-bottom: 25px;
    }    
}


.maxDiscount{
    width: 100%;
    position: relative;
    display: flex;
    justify-content: space-between;
    gap: 0 10px;
    flex-wrap: wrap;
    text-decoration: none !important;
}



.maxDiscountPercent{
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 0px 16px;
    gap: 16px;

    width: 182px;
    height: 85px;

    background: linear-gradient(164deg, #FF5C00 21.53%, #FF0F00 99.96%);
    backdrop-filter: blur(16px);
    border-radius:  0px 0px 16px 16px;

}



.maxDiscountPercent span{
    color: #fff;
    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 700;
    font-size: 48px;

    line-height: 120%;
}

@media (max-width: 1200px) {
    .maxDiscountPercent{
        width: 132px;
        height: 65px;        
    }

    .maxDiscountPercent span{
        font-size: 32px;
    }
}

@media (max-width: 710px) {
    .maxDiscountPercent{
        margin-left: 25px;    
    }
}


.maxDiscountBtn{
    width: 180px;
    height: 48px;
    border-radius: 10px;
    background: #F97146;
    transition: all .3s;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Mazzard H';
    font-style: normal;
    font-weight: 500;
    font-size: 18px;
    line-height: 109.71%;
    color: #fff;
}

@media (max-width: 1200px) {
    .maxDiscountBtn{
 
    }
}

.maxDiscountBtn:hover{
    background: #FC00B1;
    color: #fff;
}

.maxDiscountTitle{
    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 700;
    font-size: 20px;
    line-height: 140%;

    display: flex;
    align-items: center;

    color: #FFFFFF;
}

@media (max-width: 1200px) {
    .maxDiscountTitle{
        font-size: 16px;
        font-weight: 500;
    }
}

@media (max-width: 900px) {
    .maxDiscountTitle{
        display: none;
    }
}

.maxDiscountDate{
    font-family: 'Mazzard H';
    font-style: normal;
    font-weight: 400;
    font-size: 18px;
    line-height: 127%;
    text-align: right;
    color: #FFFFFF;
    align-items: center;
    display: flex;
    flex-wrap: wrap;
}

@media (max-width: 710px) {
    .maxDiscountDate{
        order: 10;
    }    
}




.maxDiscountDate .line{
    width: 100%;
    display: block;
}

@media (max-width: 1200px) {
    .maxDiscountDate .line{
        font-size: 16px;
    }    
}

@media (max-width: 710px) {
    .maxDiscountDate{
        font-size: 14px;
        font-weight: 300;
    }    
}

.maxDiscountBtnWrap, .maxDiscountCountdown{
    align-items: center;
    display: flex;
}

@media (max-width: 710px) {
    .maxDiscountBtnWrap{
        width: 50%;
    }    
}

.maxDiscountCountdown{
    font-family: 'Mazzard H';
    font-style: normal;
    font-weight: 400;
    font-size: 48px;
    line-height: 66px;
    width: 200px;
    color: #FFFFFF;
}

@media (max-width: 1200px) {
    .maxDiscountCountdown{
        font-size: 36px;
        width: 140px;
    }    
}

@media (max-width: 710px) {
    .maxDiscountCountdown{
        margin-top: 17px;
        margin-right: 10px;
    }    
}



.section-title {
	font-family: 'Montserrat', sans-serif;
	font-weight: 700;
	font-size: 4.8rem;
	line-height: 115%;
    margin-bottom: 1.5rem;
    margin-top: 1.7rem;
}

@media (max-width: 768px) {
    .section-title{
        font-size: 3.2rem;
    }    
}

.section-title span {
	white-space: nowrap;
}
.section-sub-title {
	font-size: 2rem;
	line-height: 150%;
	margin-bottom: 3.2rem;
	max-width: 830px;
}

@media (max-width: 768px) {
    .section-sub-title{
        font-size: 1.6rem;
    }    
}

#section-courses .items {
	display: flex;
	flex-wrap: wrap;
	gap: 30px;
    margin-top: 4.9rem;
}
#section-courses .item {
	position: relative;
	flex-basis: 370px;
	background: #fff;
	text-decoration: none;
	border-radius: 2rem;
	transition: all .5s;
    padding: 0 0 24px;
    color: #3A3A3A;
}


@media (max-width: 768px) {
    #section-courses .item{
        flex-basis: 350px;
    }    
}

#section-courses .item img{
    width: 100%;
    display: block;
    border-radius: 2rem 2rem 0 0;
}

#section-courses .item  .info{
    padding: 0 20px;
    margin-top: 20px;
}

#section-courses .link-more{
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 22px 36px;
    width: calc(100% - 40px);
    height: 54px;
    background: #FFD87D;
    border-radius: 10px;
    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 600;
    font-size: 17.8667px;
    line-height: 22px;
    display: flex;
    align-items: center;
 
    margin: 0 20px;
    transition: all .3s;
}

#section-courses .link-more:hover{
    background: #fdca53;
}


#section-courses .p-author{
    font-size: 15px;
    line-height: 140%;
    display: flex;
    align-items: center;
    color: #6D6D6D;
    margin-bottom:5px;
}


#section-courses .meta{
    align-items: center;
    display: flex;
    gap: 17px;
}

#section-courses .meta > span {
    align-items: center;
    font-weight: 400;
    font-size: 14px;
    display: inline-flex;
}

#section-courses .meta i {
    background: #1A76FF;
}

#section-courses .price-block{
    background: #F1F1F1;
    padding: 2rem;
    margin: 22px 0;
    border-radius: 10px;
    margin-bottom: 24px;
    height: 144px;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

#section-courses .price-block .discount{
    position: absolute;
    width: 80px;
    height: 40px;
    right: 20px;
    top: 0px;
    background: linear-gradient(65.07deg, #FF0046 31.73%, #FA00FF 74.24%);
    backdrop-filter: blur(16px);
    border-radius: 0px 0px 6px 6px;

    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 700;
    font-size: 24px;
    line-height: 100%;
    color: #FFFFFF;
    
    display: flex;
    align-items: center;
    justify-content: center;
}

.price-row .value{
    font-size: 44px;
    line-height: 54px;
    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 700;
    
    display: flex;
    align-items: center;
    
    color: #3A3A3A;
    margin-right: 10px;
}

.price-row{
    display: flex;
    align-items: center;
}
.price-row .currency{
    font-weight: 600;
    font-size: 18px;
    line-height: 22px;
}

.price-row > span{
    display: flex;
    flex-wrap: wrap;
}

.price-row .title{
    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 500;
    font-size: 12px;
    line-height: 140%;
    /* identical to box height, or 17px */

    display: flex;
    align-items: center;

    color: #8B8B8B;

}

.price-row .total-value{
    color: #8B8B8B;
}

.price-block  .price-row-old{
    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 600;
    font-size: 18px;
    line-height: 22px;
    display: flex;
    align-items: center;
    text-decoration-line: line-through;
    color: #3A3A3A;
}

#section-experts{
    margin-top: 5rem;
}


#section-experts .items{
    gap: 5rem 3rem;
    display: flex;
    flex-wrap: wrap;
    margin-top: 5.8rem;
}

#section-experts .item{
    max-width: 570px;
    padding-right: 3rem;
}

#section-experts h4{
    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 700;
    font-size: 3.2rem;
    line-height: 130%;
    color: #3A3A3A;
    margin: 2rem 0 9px;
}

@media (max-width: 768px) {
    #section-experts h4{
        font-size: 2.6rem;
    }    
}

#section-experts .info{
    padding: 0;
    font-size: 16px;
    line-height: 150%;
}

#section-experts li{
    position: relative;
    padding-left: 16px;
    margin-bottom: 8px;
    padding-right: 4rem;
}
#section-experts .info li:before{
    content: '';
    width: 6px;
    height: 6px;
    background: #8926ED;
    position: absolute;
    left: 0;
    top: 7px;
    border-radius: 50%;    
}

#section-experts .info li strong{
    color: #8926ED;
    font-weight: 700;
}



#section-form{
	margin-top: 11rem;
}

#section-form form{
    background: #FFFFFF;
    border-radius: 20px;
    padding: 4.2rem 6rem;
    margin-bottom: 50px;
}

#section-form .inputs{
	display: grid;
	grid-template-columns: 1fr 1fr 1fr 1fr;
	gap: 5.3rem;
	margin-top: 3rem;
}

@media (max-width: 1229px) {
	#section-form .inputs{
		gap: 4.3rem;
	}
}

@media (max-width: 1199px) {
	#section-form .inputs{
		display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
	}

	#section-form .inputs span:last-child{
		margin-left: auto;
	}
}

@media (max-width: 1199px) {
	#section-form .inputs{
		display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
	}

	#section-form .inputs span:last-child{
		margin-left: auto;
	}
}


@media (max-width: 991px) {
	#section-form .inputs span{
		width: 100%;
	}

	#section-form .inputs span input{
		width: 100%;
	}

}

@media (max-width: 575px) {
	#section-form .container{
		width: 100%;
    padding: 0 !important;
	}
	#section-form form{
    border-radius: 0;
    padding: 4.4rem;
	}

	#section-form form h3{
		font-size: 26px !important; 
	}
}

@media (max-width: 414px) {
	#section-form form{
    padding: 5.4rem 1.6rem;
	}

	#section-form form p{
		font-size: 16px !important;
	}

	#section-form .inputs span {
    margin-bottom: -18px;
	}	

	#section-form .inputs span:last-child{
    margin-bottom: 0;
    margin-top: 25px;
	}
}


#section-form form h3{
	font-weight: 600;
	font-size: 36px;
	line-height: 115%;
	font-family: 'Montserrat';
}

#section-form form h3 span{
	color: #8926ED;
}

#section-form form p{
	margin-top: 15px;
	font-size: 18px;
}

input[name="fio"]{
	display: none;
}

#section-form input{
	border: 0;
	border-bottom: 2px solid #303B44;
	font-size: 16px;
	line-height: 120%;
	font-size: 16px;
	margin-top: 9px;
	padding-top: 10px;
	padding-bottom: 10px;
	transition: all .3s;
    width: 100%;
}

#section-form
.has-error input{
	border-bottom: 2px solid red;
	color: red;
}

#section-form
 .error{
	display: none; 
}


#section-form
.has-error .error{
	display: block;
	font-size: 12px;
	color: red;
}

#section-form input:focus{
	border-bottom: 2px solid #8926ED;
}


#section-form .btn-primary {
	font-family: 'Montserrat', sans-serif;
	font-weight: 600;
	font-size: 1.5rem;
	line-height: 1.8rem;
	text-align: center;
	text-decoration: none;
	background: #8926ED;
	border: 2px solid #8926ED;
	color: #fff;
	border-radius: 1rem;
	box-sizing: border-box;
	padding: 1.4rem 5.8rem;
	transition: all .5s;	
}
#section-form .btn-primary:hover{
    background: #C76DFF !important;
    border: 2px solid #C76DFF;
}


#section-otz {
    margin-top: 7.7rem;
}

#section-otz h2, 
#section-otz h2 + p {
    max-width: 760px;
}
#section-otz h2 + p {
    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 500;
    font-size: 2rem;
    line-height: 150%;
    margin-top: 2.2rem;
}

@media (max-width: 768px) {
    #section-otz h2 + p {
        font-size: 1.6rem;
    }    
}

.section-title-selected{
    color: #8926ED;
}

.otz-icon{
    width: 24px;
    height: 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-right: 5px;
    border-radius: 50%;
}

.otz-icon-instagram{
    background: #E22DFF;
}

.otz-icon-vk{
    background: #007AFF;
}

.otz-icon-creativo{
    background: #2880FF;
}

#section-otz-carousel-nav .owl-next,
#section-otz-carousel-nav .owl-prev{
    background: #9653FF;
    width: 6rem;
    height: 6rem;
    backdrop-filter: blur(16px);
    border-radius: 50%;
    transform: matrix(1, 0, 0, -1, 0, 0);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size:60px;
    border: 0;
    position: relative;
    transition: all .3s;
}


@media (max-width: 768px) {
    #section-otz-carousel-nav .owl-next,
    #section-otz-carousel-nav .owl-prev{
        width: 5rem;
        height: 5rem;
		padding: 0;
    }
}

#section-otz-carousel-nav .owl-next:hover,
#section-otz-carousel-nav .owl-prev:hover{
    background: #8926ED;
}

#section-otz-carousel-nav{
    display: flex;
    justify-content: end;
    padding-right: 185px;
    gap: 24px;
    margin-top: -80px;
}

@media (max-width: 768px) {
    #section-otz-carousel-nav{
        padding-right: 0;
        margin-top: 0;
		justify-content: center;
    }
}

#section-otz-carousel-nav .owl-next span {
    position: relative;
    top: -6px;
    left: 3px;
}

#section-otz-carousel-nav .owl-prev span {
    position: relative;
    top: -6px;
    left: -3px;
}

.section-otz-carousel{
    margin-top: 8.9rem;
}


@media (max-width: 768px) {
    .section-otz-carousel{
        margin-top: 3.9rem;
    }    
}

.section-otz-carousel header{
    display: flex;
    align-items: center;
    margin-bottom: 7px;
    flex-wrap: wrap;
}
.section-otz-carousel header img{
    width: 12rem !important; 
    height: 12rem !important;
    margin-right: 2rem;
    border-radius: 50%;
}


@media (max-width: 768px) {
    .section-otz-carousel header img{
        margin: 0 auto 20px;
    }    
}

#section-otz-2 .item{
    background: #fff;
    padding: 3rem;
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    max-width: 470px;
    margin: 0 15px;
}

.section-otz-carousel header > span {
    width: calc(100% - 140px);
}


@media (max-width: 768px) {
    .section-otz-carousel header > span{
        width: 100%;
    }    
}

.section-otz-carousel header > span > a{
    width: 100%;
    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 400;
    font-size: 14px;
    line-height: 150%;
    display: flex;
    align-items: center;
    text-decoration-line: underline;
    color: #3A3A3A;
    text-overflow: ellipsis;
    color: #3A3A3A;
    width: 100%;
    display: inline-block;
    overflow: hidden;
    white-space: nowrap;
}

@media (max-width: 768px) {
    .section-otz-carousel header > span > a{
        text-align: center;
    }
}


.section-otz-carousel header > span > span.name{
    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 700;
    font-size: 26px;
    line-height: 130%;
    display: flex;
    align-items: center;
    color: #3A3A3A;
}


@media (max-width: 768px) {
    .section-otz-carousel header > span > span.name{
        justify-content: center;
    }
    .section-otz-carousel header > span > span.name br {
        display: none;
    }    
}

.section-otz-carousel h4 {
    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 700;
    font-size: 24px;
    line-height: 150%;
    color: #3A3A3A;
}

@media (max-width: 768px) {
    .section-otz-carousel h4 {
        font-size: 18px;
    }
}

.section-otz-carousel footer{
    position: relative;
    padding-top: 28px;
    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 600;
    font-size: 16px;
    line-height: 150%;
    color: #3A3A3A;
    margin: 25px 0 0 0;
}

.section-otz-carousel footer:before{
    content: '';
    border-top: 1px solid rgba(58, 58, 58, 0.3);
    width: 100%;
    position: absolute;
    top: 10px;
}

.section-otz-carousel footer:after{
    content: attr(data-title);
    background: #fff;
    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 400;
    font-size: 14px;
    line-height: 150%;
    color: rgba(58, 58, 58, 0.6);
    padding: 10px 10px 10px 0;
    text-transform: lowercase;
    position: absolute;
    left: 0;
    top: -10px;
}

.section-otz-carousel .more{
    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 500;
    font-size: 18px;
    line-height: 150%;
    color: #8926ED;
    margin-top: 25px;
    cursor: pointer;
}

@media (max-width: 768px) {
    .section-otz-carousel .more{
        font-size: 16px;
    }
}


.section-otz-carousel
.descr{
    display: -webkit-box;
    -webkit-line-clamp: 7;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: all .3s;
}

.section-otz-carousel
.descr.show{
    -webkit-line-clamp: 999;
}

/*
.section-otz-carousel .owl-stage{display: flex;}
.section-otz-carousel  .owl-item{
    display: flex;
}
*/