/* main block */

.main-block .content{
    position: relative
}
.main-block .content .media{
    position: absolute;
    width: 100%;
    height: 100dvh;
    left: 0;
    top: 0
}
.main-block .content .media .img-container{
    width: 100%;
    height: 100%
}
.main-block .content .media .img-container img{
    object-position: top
}
.main-block .media video{
    width: 100%;
    height: 100dvh;
    object-fit: cover
}
.main-block .video-container{
    position: relative
}
.main-block .media .video-container:before{
    content: '';
    width: 100%;
    height: 100%;
    background: url("../img/main-overlay.png") no-repeat left bottom;
    position: absolute;
    bottom: 0;
    left: 0;
    background-size: 100%
}
.main-block >.container{
    padding: 0
}
.main-block .text{
    height: 100dvh;
    position: relative;
    z-index: 111;
    padding-top: 22dvh;
    display: flex;
    flex-direction: column
}
.main-block .text >div:last-child{
    margin-top: auto
}
.main-block .title h1 + div{
    padding: 5px 20px 5px 20px;
    background: var(--brown-gradient-1);
    color: var(--white);
    font-size: 2rem;
    margin-left: -20px;
    width: fit-content;
    border-radius: 0 30px 30px 0
}
.main-block .name{
    width: fit-content;
    margin: 0 auto
}

.main-block .name div:first-child span{
    font-size: 2rem;
    font-weight: 600;
    font-style: italic;
    color: var(--white)
}
.main-block .name div:first-child span:nth-child(1),
.main-block .name div:first-child span:nth-child(3)
{
    font-family: 'Noto Sans', sans-serif
}
.main-block .name div:last-child{
    font-family: var(--decorative-font);
    font-size: 11.5rem;
    color: var(--white);
    line-height: 1
}
.main-block .img{
    width: calc(100% + 40px);
    height: auto;
    /* background: url(../img/shadow.svg) no-repeat bottom; */
    /* background-size: 100%; */
    margin: 0 -20px 0;
    text-align: center;
    position: relative;
    pointer-events: none;
    margin-top: -30%
}
.main-block .img >img{
    /* width: calc(100% + 40px) */
    width: 100%
}
.main-block .img .text-1, .main-block .img .text-2{
    position: absolute;
    color: var(--white)
}
.img-container img, .video-wrapper video{
    object-fit: cover;
    width: 100%;
    height: 100%
}
.video-wrapper{
    position: relative
}
.video-wrapper:hover .play-pause{
    opacity: 1!important;
    transition: 0.3s!important
}

.play-pause {
    width: 70px;
    height: 70px;
    background-color: #ffffffb0;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-35px, -35px);
    cursor: pointer;
    padding-left: 6px;
    z-index: 10;
}
.play-pause:after{
    content: '';
    width: 26px;
    height: 26px;
    background: url('../img/icons/play-icon.svg') no-repeat center;
    background-size: contain;
    position: absolute;
    top: calc(50% - 13px);
    left: calc(50% - 9px)
}

.video{
    margin: var(--size-3) 0;
    overflow: visible
}
.video .video-wrapper{
    height: 210px;
    border-radius: var(--border-radius);
    overflow: visible
}
.video .media{
    position: relative
}
.video .media:before{
    content: '';
    background: url(../img/substrate.svg);
    width: calc(100% + 40px);
    height: 160%;
    background-position: center center;
    background-size: cover;
    position: absolute;
    top: -3%;
    left: -20px
}
.video .media img{
    border-radius: var(--border-radius);
    box-shadow: 2px 2px 50px rgba(0, 0, 0, 0.4), 0 0 20px rgba(0, 150, 255, 0.2)
}
.video .media{
    margin-top: 20px
}
.the-best-solution .title{
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 20px;
    position: relative
}
.the-best-solution .title span:first-child,
.the-best-solution .title span:last-child
{
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--brown);
    text-transform: uppercase;
    text-wrap-mode: nowrap;
    margin-bottom: 5px
}
.the-best-solution .title h2{
    font-size: 2.6rem;
    font-weight: 700;
    color: var(--pink);
    text-transform: uppercase
}
.the-best-solution .media{
    margin: 0 -20px;
    position: relative
}
.the-best-solution .media .text{
    position: absolute;
    width: 57%;
    height: 60%;
    top: 16%;
    right: 0;
    padding-right: 20px
}
.the-best-solution .media .text .title-2{
    display: flex;
    flex-direction: column;
    align-items: center
}
.the-best-solution .media .text .title-2 span:first-child{
    text-align: center;
    line-height: 1.2;
    font-size: 1.3rem;
    color: var(--brown);
    font-weight: 600;
    font-style: italic
}
.the-best-solution .media .text .title-2 span:last-child{
    font-family: var(--decorative-font);
    font-size: 3.9rem;
    color: var(--white);
    line-height: 1;
    text-shadow: 4px 0px 4px rgba(34, 34, 34, 0.75);
    font-weight: 700;
    text-align: left;
    width: 100%;
    margin-top: 8px
}
.the-best-solution .media .text p{
    font-size: 1.3rem;
    margin-top: 3px
}
.the-best-solution__items{
    display: flex;
    gap: 20px;
    padding: 0 20px;
    margin-top: -31%
}
.the-best-solution__item{
    flex: 1;
    position: relative
}
.the-best-solution__item .name{
    font-size: 1.6rem;
    text-transform: uppercase;
    font-weight: 700;
    color: var(--white);
    background: var(--pink-gradient);
    padding: 6px 20px;
    border-radius: var(--border-radius);
    text-align: center;
    font-family: var(--decorative-font);
    line-height: 1;
    position: relative;
    z-index: 1
}
.the-best-solution__item .description{
    margin-top: 10px;
    font-style: italic;
    font-weight: 600;
    font-size: 1.4rem;
    line-height: 1.2;
    color: #1D3039;
    text-align: center;
    background-color: var(--light-blue-1);
    box-shadow: var(--blue-shadow-1);
    border-radius: var(--border-radius);
    padding: 5px 20px;
    position: relative;
    z-index: 1
}
.the-best-solution__items + .btn{
    margin: 20px auto 0;
    position: relative;
    z-index: 1
}
.the-best-solution__item:first-child >img{
    position: absolute;
    top: 8px;
    left: 35%;
    height: 120px;
    transform: scaleX(-1)
}
.the-best-solution__item:last-child >img{
    position: absolute;
    top: 8px;
    right: 35%;
    height: 120px
}
.what-is-all-on-4{
    margin-top: var(--size-3)
}
.what-is-all-on-4 .media{
    margin: -40px -20px -45px 0
}
.what-is-all-on-4 .text p{
    color: var(--brown)
}
.what-is-all-on-4 .text p span{
    font-size: 1.6rem;
    text-transform: uppercase;
    color: var(--red);
    font-weight: 600
}
.what-is-all-on-4 .text p:not(:first-child){
    margin-top: 1.5rem
}
.banner{
    margin-top: var(--size-3)
}
.banner .media{
    position: relative
}
.banner .media .text{
    position: absolute;
    width: 100%;
    height: 100%;
    padding-left: 20px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 25px;
    padding-bottom: 20px
}
.banner .media .text p{
    font-style: italic
}
.banner .media .text p strong{
    font-weight: 600
}
.banner .media .text p span:not(.popup span){
    color: var(--red);
    font-style: normal
}
.banner .media .text p:first-child{
    /*position: absolute;*/
    /*top: 20%*/
    font-size: 1.8rem
}
.banner .media .text p:last-child{
    font-size: 1.6rem;
    /*position: absolute;*/
    /*top: 60%;*/
    z-index: 1;
    max-width: 40%
}
/*.banner .media .text >.btn{*/
/*    position: absolute;*/
/*    top: 43%;*/
/*    left: 10%*/
/*}*/
.banner .media img.bg-layer-2{
    position: absolute;
    height: auto;
    width: 56%;
    right: 0px;
    top: 0
}
.banner .container{
    padding-left: 0;
    padding-right: 0
}
.testimonials{
    margin-top: var(--size-3)
}
.testimonials-slider{
    margin-top: 20px
}
.testimonials .media{
    position: relative
}
.testimonials .img-container{
    height: 360px;
    border-radius: var(--border-radius);
    width: calc(100% - 52px);
    margin: 0 auto 0
}

.testimonials .img-container .more-btn{
    position: absolute;
    bottom: 30px;
    font-size: 1.2rem;
    color: var(--brown);
    background-color: #ffffff91;
    padding: 6px 15px;
    line-height: 1;
    text-transform: uppercase;
    border-radius: 5px;
    box-shadow: var(--items-box-shadow)
}
.testimonials .slider-nav{
    position: absolute;
    top: calc(170px - 8.815px);
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    z-index: 2
}
section.price{
    margin-top: var(--size-3);
    padding-bottom: 125px;
    margin-bottom: -125px
}
section.price .list{
    position: relative
}
section.price .list .tooth{
    position: absolute;
    top: -35px;
    right: -20px;
    height: 80%
}
section.price .list .price-img{
    position: absolute;
    right: 0px;
    bottom: -125px;
    width: 291px;
    animation: pulse 2.5s ease-in-out infinite;
    transform-origin: center center;
}
@keyframes pulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.05); }
    100% { transform: scale(1); }
}
section.price ul{
    padding: 45px 0 45px 20px;
    background: url('../img/price-bg.webp') no-repeat left center;
    background-size: cover;
    margin-right: -20px;
    border-radius: 30px 0 0 30px
}
section.price ul li{
    position: relative;
    padding: 15px 0 15px 35px;
    list-style: none;
    background-color: var(--light-blue-2);
    box-shadow: var(--blue-shadow-2);
    border-radius: var(--border-radius) 0 0 var(--border-radius);
    color: var(--brown);
    text-transform: uppercase;
    font-weight: 600;
    text-wrap-mode: nowrap
}
section.price ul li strong{
    font-size: 1rem;
    font-weight: 600
}

section.price ul li:not(:first-child){
    margin-top: 25px
}
section.price ul li:nth-child(3){
    z-index: 1
}
section.price ul li:nth-child(2) strong:first-of-type{
    font-family: 'Nunito Sans';
    font-size: 2.4rem;
    line-height: 0

}
section.price ul li:before{
    content: '';
    width: 12px;
    height: 12px;
    border-radius: 50%;
    box-shadow: inset -3px -3px 4px 0px rgba(0, 0, 0, 0.35);
    background: var(--red);
    position: absolute;
    top: 17px;
    left: 15px
}
section.price ul li:after{
    content: url('../img/icons/list-blue-shadow.svg');
    position: absolute;
    bottom: -7px;
    left: -3px
}
section.price h2 + p{
    font-weight: 600;
    font-style: italic;
    color: var(--red);
    margin: 20px 0
}
.doctors{
    margin-top: calc(80px + var(--size-3))
}
.doctors .media{
    position: relative
}
.doctors .media .description{
    position: absolute;
    width: 100%;
    height: auto;
    bottom: 0;
    left: 0;
    padding: 5px 5px 10px;
    background-color: #9acad1c2
}
.doctors .media .description .name{
    color: var(--black);
    font-weight: 500
}
.doctors .media .description .name span:first-child{
    font-size: 1.4rem;
    text-transform: uppercase;
    display: block
}
.doctors .media .description .name span:last-child{
    font-size: 1.2rem;
    display: block;
    margin-top: 2px
}
.doctors .media .description .job-title{
    font-size: 1rem;
    font-weight: 500;
    font-style: italic;
    color: var(--white);
    margin-top: 5px
}
.doctors-slider{
    margin-top: 20px
}
.doctors-slider .media img{
    height: 230px;
    object-fit: cover;
    object-position: top
}

.contact{
    margin-top: var(--size-3)
}
.contact-img{
    width: calc(100% + 40px);
    margin: 20px -20px 0
}
.contact address{
    padding: 15px 25px;
    background: var(--white-blue-gradient);
    box-shadow: var(--shadow-for-white-blue-gradient);
    border-radius: var(--border-radius);
    margin-top: -45px;
    position: relative;
    font-style: normal
}

.contact address .tel{
    display: block;
    width: fit-content;
    margin: 0 auto;
    font-size: 2.2rem;
    color: var(--black);
    font-weight: 600;
    text-shadow: none;
    margin-top: 5px
}
.contact address .tel:before {
    content: '';
    position: absolute;
    left: 0;
    top: 4px;
    width: 21px;
    height: 21px;
    background: url(../img/icons/call-black.svg) center center no-repeat;
    background-size: 100%;
}
.contact address .map-link{
    font-size: 1.6rem;
    font-weight: 600;
    line-height: 1.4;
    color: var(--black);
    text-align: center;
    width: 100%;
    display: block;
    line-height: 1.4
}
.contact address .map-link .icon{
    height: 1.5rem
}
.contact address .map-link .icon:nth-of-type(2){
    margin-bottom: -3px;
    height: 16px
}

.contact address + p{
    font-size: 1.6rem;
    font-weight: 600;
    margin-top: 20px;
    text-align: center;
    line-height: 1.4
}
.contact h3{
    margin-top: 30px
}
.contact .map-link{
    text-decoration: underline;
    text-decoration-thickness: from-font
}
.wpcf7-response-output{
    margin: var(--size-1);
    text-align: center;
    line-height: 1.4;
    color: var(--brown);
    font-size: 1.6rem;
    font-weight: 600
}


@media all and (min-width: 370px){
    .the-best-solution__item:last-child >img{
        right: 50%
    }
    .the-best-solution__item:first-child >img{
        left: 50%
    }
    /*.banner .media .text p:first-child {*/
    /*    top: 24%*/
    /*}*/
    /*.banner .media .text p:last-child {*/
    /*    top: 59%*/
    /*}*/
    /*.banner .media .text >.btn {*/
    /*    top: 44%*/
    /*}*/
}
@media all and (min-width: 400px) {
    .the-best-solution .media .text{
        top: 20%
    }
    /*.banner .media .text >.btn {*/
    /*    top: 45%*/
    /*}*/
    /*.banner .media .text p:first-child {*/
    /*    top: 26%*/
    /*}*/
    /*.banner .media .text p:last-child {*/
    /*    top: 60%*/
    /*}*/
    /*.banner .media .text >.btn {*/
    /*    left: 15%*/
    /*}*/
    .the-best-solution .media .text .title-2 span:last-child{
        font-size: 4.2rem
    }
    .the-best-solution .media .text .title-2 span:first-child,
    .the-best-solution .media .text p
    {
        font-size: 1.4rem
    }
    body, h3,
    .the-best-solution .title span:first-child, .the-best-solution .title span:last-child,
    .the-best-solution__item .description,
    .testimonials .img-container .more-btn,
    .doctors .media .description .name span:first-child
    {
        font-size: 1.6rem
    }
    .doctors .media .description .name span:last-child{
        font-size: 1.4rem
    }
    .doctors .media .description .job-title{
        font-size: 1.2rem
    }
    .video .video-wrapper {
        height: 250px
    }

}
@media all and (min-width: 440px){
    .main-block .text{
        padding-top: 17dvh
    }
   
    h1{
        font-size: 5rem
    }
    .main-block .title h1 + div, .main-block .name div span{
        font-size: 2.2rem
    }
    .main-block .name div:last-child{
        font-size: 12.5rem
    }


    .the-best-solution .media .text{
        top: 24%
    }
    /*.banner .media .text >.btn {*/
    /*    top: 46%;*/
    /*    left: 20%*/
    /*}*/
    .price .list .tooth{
        height: 80%
    }
}
@media all and (min-width: 480px){
    .the-best-solution__item:last-child >img{
        right: 65%
    }
    .the-best-solution__item:first-child >img{
        left: 65%
    }
 
    /*.banner .media .text p:last-child {*/
    /*    top: 55%;*/
    /*    font-size: 1.4rem*/
    /*}*/
    /*.banner .media .text p:first-child{*/
    /*    font-size: 1.6rem;*/
    /*     top: 27%*/
    /*}*/
}
@media all and (min-width: 500px){
    .banner .media .text >.btn {
        font-size: 3rem
    }
    .banner .media .text p:first-child {
        font-size: 2.2rem
    }
    .banner .media .text p:last-child {
        font-size: 1.8rem
    }
    .doctors-slider .media img{
        height: 360px
    }
    .video .video-wrapper{
        height: 320px
    }

}
@media all and (min-width: 700px){
    .the-best-solution .media .text {
        top: 26%
    }
   
}
@media all and (min-width: 800px){
    
    .main-block .img{
        margin-top: -34%
    }
   
}
@media all and (max-width: 370px) {
    .main-block .name div:last-child{
        font-size: 10.5rem
    }
    .the-best-solution .title h2{
        font-size: 1.8rem
    }
    .the-best-solution .media .text .title-2 span:last-child{
        font-size: 3rem;
        margin-top: 3px
    }
    .the-best-solution .media .text{
        height: 60%;
        padding-right: 10px;
        top: 12%
    }
    .the-best-solution__item .name{
        padding: 6px 10px
    }
    .the-best-solution__items{
        gap: 10px
    }
    .the-best-solution__item .description{
        font-size: 1.2rem
    }
    h2{
        font-size: 2.2rem
    }
    h2 span {
        font-size: 3rem
    }
    .testimonials .img-container {
        height: 360px
    }
    .price ul{
        padding-left: 15px
    }
    .price ul li{
        padding-left: 30px
    }
    .price ul li:before{
        width: 10px;
        height: 10px;
        top: 18px;
        left: 14px
    }
    .contact address{
        padding: 15px
    }
    .video .video-wrapper{
        height: 190px
    }
    
}

.btn-animation{
	position: relative;
    overflow: hidden
}

.btn-animation::before,
.btn-animation::after {
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	transform: translateX(-100px) skewX(-15deg);
	content: "";
	pointer-events: none;
}

.btn-animation::before {
	width: 60px;
	background: rgba(255, 255, 255, 0.5);
	filter: blur(30px);
	opacity: 0.5;
	animation: shineBefore 1s linear infinite;
}

.btn-animation::after {
	width: 30px;
	left: 30px;
	background: rgba(255, 255, 255, 0.2);
	filter: blur(5px);
	animation: shineAfter 1s linear infinite;
}

@keyframes shineBefore {
	0% {
		transform: translateX(-100px) skewX(-15deg);
		opacity: 0;
	}
	50% {
		opacity: 1;
	}
	100% {
		transform: translateX(300px) skewX(-15deg);
		opacity: 0;
	}
}

@keyframes shineAfter {
	0% {
		transform: translateX(-100px) skewX(-15deg);
		opacity: 0;
	}
	50% {
		opacity: 1;
	}
	100% {
		transform: translateX(300px) skewX(-15deg);
		opacity: 0;
	}
}

/* Обгортка для тексту */
.aos-glow-text {
	position: relative;
	display: inline-block;
	overflow: hidden;
	color: #fff; /* або будь-який */
}

/* Псевдоелементи для бликів */
.aos-glow-text::before,
.aos-glow-text::after {
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	transform: translateX(-100px) skewX(-15deg);
	content: "";
	pointer-events: none;
	opacity: 0;
}

/* Широкий блік */
.aos-glow-text::before {
	width: 60px;
	background: rgba(255, 255, 255, 0.5);
	filter: blur(30px);
}

/* Тонкий блік */
.aos-glow-text::after {
	width: 30px;
	left: 30px;
	background: rgba(255, 255, 255, 0.2);
	filter: blur(5px);
}

/* AOS-поява тригерить анімацію */
[data-aos="glow-text"].aos-animate::before {
	animation: shineBefore 1s ease-out forwards;
}

[data-aos="glow-text"].aos-animate::after {
	animation: shineAfter 1s ease-out forwards;
}

/* Ключові кадри */
@keyframes shineBefore {
	0% {
		transform: translateX(-100px) skewX(-15deg);
		opacity: 0;
	}
	50% {
		opacity: 1;
	}
	100% {
		transform: translateX(300px) skewX(-15deg);
		opacity: 0;
	}
}

@keyframes shineAfter {
	0% {
		transform: translateX(-100px) skewX(-15deg);
		opacity: 0;
	}
	50% {
		opacity: 1;
	}
	100% {
		transform: translateX(300px) skewX(-15deg);
		opacity: 0;
	}
}