/* main block - the first block on the main page */
.main-block{
    position: relative;
    height: 100dvh
}

.main-block .container{
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center
}
.main-block .content{
    display: flex;
    align-items: center;
    z-index: 1;
    position: relative
}
.main-block .form{
    position: relative;
    margin-left: auto;
    background-color: #FFFFFFBF;
    border-radius: var(--size-1);
    padding: var(--size-2);
    width: 520px
}
.main-block .form h1 + p{
    font-weight: 600
}
.main-block .form form input{
    margin-top: var(--size-1)
}
.main-block .bg{
    object-position: left
}

/* end of main block */


/* advantages */

section.advantages{
    padding: var(--section-distance) 0;
    background-color: var(--primary-color)
}
section.advantages h2, .advantages__item p{
    color: var(--white)
}
.advantages__items{
    margin-top: var(--size-3)
}
.advantages__item{
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--size-1)
}
.advantages__item .title{
    display: flex;
    align-items: center;
    gap: var(--size-2)
}
.advantages__item .title h3{
    color: var(--white);
    width: 190px
}
.advantages__item p{
    text-align: center
}

/* end of advantages */

/* about */

section.about .img-container{
    border-radius: var(--size-2);
    border: 4px solid var(--primary-color)
}
section.about .media{
    position: relative
}
section.about .logo{
    position: absolute;
    top: 24px;
    left: 38px
}
section.about h2{
    color: var(--primary-color)
}
section.about .text{
    display: flex;
    flex-direction: column;
    justify-content: center
}

/* end of about */


/* services */

.services h2{
    color: var(--primary-color)
}
.services .title{
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: var(--size-3)
}
.services-slider__item{
    height: 320px;
    position: relative;
    border-radius: var(--size-2)
}
.services-slider__item .item-title{
    position: absolute;
    width: calc(100% - calc(var(--size-2) * 2));
    left: var(--size-2);
    bottom: var(--size-2);
    padding: var(--size-1) var(--size-2);
    background-color: var(--white);
    border-radius: var(--size-1);
    display: flex;
    gap: var(--size-2);
    color: var(--primary-color)
}
.services-slider__item .item-title img{
    width: 15px!important;
    margin-top: 8px
}
.services-slider{
    margin-top: var(--size-2)
}

.title-and-btn{
    display: flex;
    justify-content: space-between;
    gap: var(--size-1);
    position: absolute;
    top: 24px;
    width: calc(100% - 48px)
}
.title-and-btn h3{
    color: var(--primary-color)
}


.popup{
        position: fixed;
    width: 100%;
    height: 100%;
    background-color: #ffffffd4;
    backdrop-filter: blur(12px);
    top: 0;
    left: 0;
    z-index: 5;
    display: flex;
    justify-content: center;
    align-items: center;
}
.popup__content{
    max-width: 600px;
    width: 100%;
    position: relative;
    background-color: var(--white);
    border-radius: var(--size-1);
    margin: 24px;
    border: 6px solid var(--primary-color);
    padding: var(--size-2);
    max-width: 600px;
    width: 100%
}
.popup__content .img-container{
    width: 120px;
    height: 160px;
    position: absolute;
    top: -40px;
    left: 24px
}
.popup__content .img-container img{
    width: 120px;
    height: 160px
}
.popup__content .img-container:after{
    top: -8px;
    right: -12px;
    width: 120px;
    height: 160px
}
.popup__content .title{
    position: absolute;
    left: 180px;
    top: 30px;
    margin-right: 60px
}
.popup__content .text{
    max-height: 45dvh;
    overflow-y: scroll;
    margin-top: 72px
}
.popup__content .text{
    padding-right: 12px
}
.popup__content .text p:first-of-type{
    margin-top: 0
}

.popup__content .text::-webkit-scrollbar {
  width: 3px
}

.popup__content .text::-webkit-scrollbar-track {
  background: var(--light-gray);
  border-radius:0;
  padding: 2px
}

.popup__content .text::-webkit-scrollbar-thumb {
  background: var(--primary-color-light);
  border-radius: 0
}

.popup__content .text::-webkit-scrollbar-thumb:hover {
  background: var(--primary-color)
}
.success-stories__item img.popup__close{
    position: absolute;
    top: 24px;
    right: 24px;
    width: 12px;
    height: 12px;
    cursor: pointer
}
.open-popup{
    cursor: pointer
}
.popup__close{
    position: fixed;
    top: 20px;
    right: 20px;
    cursor: pointer
}

.no-scroll {
  overflow: hidden
}

/* end of services */

/* projects */
.projects-slider-wrap{
    position: relative;
    margin: 0 auto;
    width: calc(100% - 248px)
}
.projects{
    background-color: var(--primary-color);
    color: var(--white)
}
.projects .container{
     padding: 90px 0
}
.projects .owl-nav{
    display: none
}
.projects-slider{
    margin-top: var(--size-2)
}
.projects-slider .item{
    border-radius: var(--size-2);
    border: 6px solid var(--white);
    overflow: hidden;
    height: 520px;
    /* width: calc(100% - 248px); */
    /* margin: 0 auto; */
    position: relative
}
.projects-slider .item .img-container{
    position: relative;
    height: 100%
}
.projects-slider .item .text{
    position: absolute;
    top: var(--size-2);
    left: var(--size-2);
    background-color: var(--white);
    padding: var(--size-2);
    border-radius: var(--size-1);
    max-width: 485px
}

.projects-slider .item .btn{
    position: absolute;
    bottom: var(--size-3)
}

.projects .prev, .projects .next{
    color: var(--white)
}
.projects .prev div, .projects .next div{
    background: var(--white)
}
.projects .container{
    position: relative
}
.projects .decor-left, .projects .decor-right{
    width: 76px;
    height: calc(100% + var(--section-distance) * 2);
    position: absolute;
    top: -96px;
    background: url('../img/embroidery-pattern.svg');
    background-repeat: repeat;
    background-size: 100%
}
.projects .decor-left{
    /* left: -68px */
    left: 12px
}
.projects .decor-right{
    /* right: -68px */
    right: 12px
}
.projects h2, .projects h2 + p, .testimonials h2, .testimonials h2 + p{
    text-align: center;
    max-width: 790px;
    width: 100%;
    margin-left: auto;
    margin-right: auto
}
.projects-slider .item .text h3{
    color: var(--primary-color)
}
.projects-slider .item .text p{
    color: var(--black)
}
.projects .slider-nav .prev, .projects .slider-nav .next{
    position: absolute;
    top: calc(50% - 24px)
}
.projects .slider-nav .prev{
    left: 30px
}

.projects .slider-nav .next{
    right: 30px
}

/* end of projects */

/* testimonials */

.testimonials h2{
    color: var(--primary-color)
}
.testimonials-slider{
    margin-top: var(--size-2)
}
.testimonial{
    margin-top: 45px;
    border-radius: var(--border-radius);
    display: flex;
    flex-direction: column;
    padding: 0 var(--size-2) var(--size-2);
    background-color: var(--primary-color-light);
    border-radius: var(--size-2)
}
.testimonial > img{
    width: 90px!important;
    height: 90px;
    border: 3px solid var(--primary-color);
    border-radius: 50%;
    margin-top: -45px;
    align-self: center
}
.testimonial .name{
    color: var(--primary-color)
}
.testimonial .name + p{
    font-size: 1.4rem;
    text-transform: none;
    color: var(--brown);
    line-height: 1.4
}

/* end of testimonials */

.contact .text{
    display: flex;
    gap: var(--size-3)
}
.contact .text >div{
    flex: 1
}
.contact .text >div:first-child{
    padding-bottom: var(--size-2)
}
.contact .text >div:last-child{
    display: flex;
    justify-content: flex-end
}
.contact .text h2{
    color: var(--primary-color)
}

.contact .banner{
    background-color: var(--primary-color);
    padding: calc(var(--section-distance) / 2) 0;
    color: var(--white);
    text-align: center
}
.contact .banner .btn{
    margin-top: var(--size-2)
}
.contact .banner h2 + p{
    max-width: 850px;
    margin-left: auto;
    margin-right: auto
}
.contact .map{
    height: 305.6px;
    overflow: hidden
}
.contact .map iframe{
    width: 100%
}