:root {
    
 
  --color-bg-light: #FADAD9;    
  --color-bg-green: #DCE2CA;    
  --color-accent: #E0959C;      
  
  
  --color-text-main: #2C351E;   
  --color-text-dark: #1A1A1A;   
  --color-white: #FFFFFF;
  
  
  --font-main: 'Montserrat', 'Segoe UI', sans-serif; 
}
*, *::before, *::after {
    box-sizing: border-box;
    font-family: 'Quicksand', sans-serif;
    font-weight: 300;
    color: #2f1918
}

@import url('https://fonts.googleapis.com/css2?family=Quicksand:wght@300..700&display=swap');

body, h1, h2, h3, h4, p, ul, ol {
    margin: 0;
    padding: 0;
}

body {
  background-color: #F8F2F2;
  line-height: 1.6;
  margin: 0;
  padding: 0;
  font-family: quicksand;
  font-weight: 300;
}

h3 {
    color: #8b6664;
    font-weight: bold;
    margin-bottom: 20px;
}

html {
    scroll-behavior: smooth; 
}

.container {
    width: 100%;
    max-width: 1200px; 
    margin: 0 auto;    
    box-sizing: border-box;
}

.main-button {
    width: 250px;
    height: 60px;
    border-radius: 30px;
    border: none;
    color: #412726;
    background-color: #F4ADAF;
    cursor: pointer;
    transition: box-shadow 5s ease; 
    text-decoration: none; 
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: 500;
    color: #785654;
    animation: pulse_button 1.5s infinite ease-in-out;
}

@media (max-width:600px) {
    .main-button {
        width: 300px;
        height: 60px;
        font-size: 17px;
    }
}

/* header */


.header {
    width: 100%;
    background-color: #FADAD9;
}

.menu  {
    height: 90px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.menu__name h2 {
    font-weight: 500;
    color: #785452;
    margin-right: 5px;
}

.menu__button {
    width: 200px;
    height: 50px;
    border-radius: 30px;
    border: none;
    color: #412726;
    background-color: #F4ADAF;
    cursor: pointer;
    transition: box-shadow 5s ease; 
    text-decoration: none; 
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: 500;
    color: #785654;
    animation: pulse_button 1.5s infinite ease-in-out;
}


@keyframes pulse_button {
    0% { box-shadow: 0 0 0 0 rgba(231, 182, 182, 0.757); }
    70% { box-shadow: 0 0 0 12px rgba(148, 104, 104, 0); } 
    100% { box-shadow: 0 0 0 0 rgba(139, 98, 98, 0); }  
}


/* header media */


@media (max-width: 1220px) {
  .menu{
    padding: 0 5px;
  }
  
}

@media (max-width: 500px) {
  
}

@media (max-width: 500px) {

.menu{
    padding: 0 10px;;
  }
  
  .menu__name h2 {
    font-size: 17px;
    }
}

@media (max-width:400px) {
    .menu__button {
        font-size: 14px;
    }
}

/* hero */

.hero {
    margin-top: 100px;
    width: 100%;
    display: flex;
    justify-content: center;
}

.hero-block {
    display: grid;
    grid-template-columns: 1fr 1fr; 
    grid-template-rows: auto auto auto;
    gap: 30px clamp(20px, 5vw, 127px); 
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
}


.photo {
    grid-column: 1;
    grid-row: 1 / span 3;
    max-width: 550px;
    width: 100%;
    height: 725px;
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: center;
    font-weight: 700;
    text-transform: uppercase;
    font-weight: bolder;
    font-weight: bold;
    border-radius: 30px;
}

.photo-block__title {
    font-weight: 400;
    font-family: 'Quicksand', sans-serif;
    color: #785452;
    font-size: 20px;
}

.social {
    grid-column: 2;
    grid-row: 1;
    max-width: 100%; 
}

.features {
    grid-column: 2;
    grid-row: 2;
    width: 520px;
    height: 220px;
    padding: 5px;
    display: flex;
    justify-content: start;
    align-items: center;
    justify-self: end; 
    font-weight: 500;
    font-family: 'Quicksand', sans-serif;
}

.features p {
   color: #8b6664;
   font-weight: 400;
}

.about {
    grid-column: 2;
    grid-row: 3;
    width: 520px; 
    min-height: 300px;
    background-color: #cad5a9;
    border-radius: 30px;
    justify-self: end; 
    padding: 30px; 
    box-sizing: border-box;
}

.about__text {
    font-size: 14px;
    font-weight: 400;
    color: #8b6664;
}

.glass-block {
    border-radius: 30px;          
    position: relative;
    overflow: hidden;   
    border: 1px solid rgba(255, 255, 255, 0.45);
    box-shadow: 0 10px 40px rgba(226, 149, 156, 0.06);
    background-color: #FADAD9;
}

.glass-block::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background-image: url('img/back3.png'); 
    background-size: 110%;
    background-position: center top 10%; 
    background-repeat: no-repeat;
    background-color: rgba(247, 228, 227, 0.4); 
    background-blend-mode: overlay; 
    filter: blur(3px); 
    z-index: 1; 
}

.glass-block > * {
    position: relative;
    z-index: 2; 
}

.photo-block__img {
    max-width: 100%;
    height: auto;
    max-height: 550px;
    object-fit: cover;
    margin-top: 15px; 
    border-radius: 30px;
}

.social-items {
    display: flex;
    justify-content: flex-end;
    gap: 40px;
}

.social-items__item--link{
    width: 70px;
    height: 70px;
    border-radius: 50%; 
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    background-color: #cad5a9;
    transition: box-shadow 1.3s ease;
        animation: play_item 1.5s infinite ease-in-out;

}

@keyframes play_item {
    0% { box-shadow: 0 0 0 0 rgba(193, 207, 166, 0.757); }
    70% { box-shadow: 0 0 0 12px rgba(159, 171, 135, 0); } 
    100% { box-shadow: 0 0 0 0 rgba(213, 225, 186, 0); }  
}

.social-items__img { width: 30px; }
.features__list { padding-left: 30px; }
.features__item { display: flex; justify-content: start; align-items: center; height: 40px; }
.features__icon { width: 30px; margin-right: 25px; }


/* hero media */

@media (max-width: 1220px) {
    .hero-block {
        padding: 0 10px;
    }
}

@media (max-width: 1100px) {
    .photo-block__img {
        max-width: 300px
    }
}

@media (max-width: 970px) {
    .hero {
        margin-top: 70px;
    }
    
    .hero-block {
        display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: auto;
        gap: 30px 0;
        justify-items: center;
        padding: 0 5px;
    }
    .photo {
        order: 1;
        grid-column: 1;
        grid-row: auto;
        width: 100%;
        max-width: 550px;
        height: auto;
        padding: 40px 20px;
    }

    .about {
        order: 2; 
        grid-column: 1;
        grid-row: auto;
        width: 100%;
        max-width: 750px;
        height: auto;
        min-height: 220px;
        justify-self: center;
    }

    .features {
        order: 3; 
        grid-column: 1;
        grid-row: auto;
        width: 100%;
        max-width: 750px;
        height: auto;
        min-height: 220px;
        justify-self: center;
    }

    .social {
        order: 4; 
        grid-column: 1;
        grid-row: auto;
        width: 100%;
        max-width: 520px;
        justify-self: center;
    }

    .social-items {
        justify-content: center;
    }
}

@media (max-width: 550px) {
    .hero {
        margin-top: 35px;
    }
}


@media (max-width: 415px) {
    .features__text {
        font-size: 15px;
        line-height: 1;
    }
}


/* topics */

.topics {
    margin-top: 150px;
}

.topics-block {
    display: flex;
    justify-content: center;
    align-items: center;
}

.topics__main {
    display: flex;
    flex-direction: column;
    align-items: start;
}

.custom-list {
    list-style: none; 
    padding: 0;       
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 15px;   
    margin-bottom: 40px;     
    margin-right: 5px;
}

.custom-list__item {
    position: relative;         
    padding-left: 25px; 
    height: 15px; 
    margin-bottom: 10px;       
    color: #8b6664;
    font-weight: 400;        
    font-size: 14px;
    line-height: 1.2;
    display: flex;
    align-items: center;
          
}


.custom-list__item::before {
    content: '';
    position: absolute;
    left: 0;                    
    width: 12px;                
    height: 12px;               
    border-radius: 50%;         
    
    background-color: #cad5a9;  
}

.topics-block__decor {
    max-width: 600px;
}
.topics-block__img {
    border-radius: 30px;
    max-width: 100%;
}


/* topics media  */

@media (max-width: 1220px) {
    .topics-block {
        padding: 0 10px;
    }
}

    @media (max-width: 1020px) {
     .topics-block__decor {
        max-width: 520px;
     }
}

@media (max-width: 940px) {
    .topics {
        margin-top: 70px;
    }
    .topics-block {
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    .topics__main {
        margin-bottom: 30px;
        display: flex;
        flex-direction: column;
        align-items: center;
    }
     .topics-block__decor {
        max-width: 600px;
     }
    
}



/* service */

.service {
    margin-top: 150px;
}
.service-block {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.service__description {
    width: 100%;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    min-height: 650px;
}

.description__block {
    width: 500px;
    min-height: 350px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    padding-right: 20px;
    margin: 20px;
    background-color: #FADAD9;
    border-radius: 30px;
}

.description__wrap {
    padding: 10px 5px;
    margin-left: 50px;
}

.description__text {
    max-width: 500px;
    color: #8b6664;
    font-weight: 500;
}

.description__decor {
    max-width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 20px;
}

.description__img {
    width: 87%;
    border-radius: 30px;
}


/* service media  */

@media (max-width: 1175px) {
    .service {
        margin-top: 70px;
    }
    .service-block {
        padding: 0px 10px;
    }
    .description__decor {
    top: 270px;
    }
}

@media (max-width: 1080px) {
    .description__block {
        width: 100%;
        margin: 10px;
    }
    .description__img {
        width: 100%;
    }
}

@media (max-width: 550px) {
    .service {
        margin-top: 45px;
    }
    .description__wrap {
        padding: 10px;
        margin-left: 5px;
    }
}

/* questions */


.questions {
    margin-top: 150px;
    width: 100%;
    margin-bottom: 100px;
}

.questions h2 {
    text-align: center;
    font-weight: bold;
    color: #8b6664;
    margin-bottom: 40px;
}

.questions-block {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 650px;
    padding: 10px 5px;
}


.questions__list {
    width: 80%;
    display: flex;
    flex-direction: column;
    align-items: center;
   
}

.question__item {
    margin-bottom: 20px;
    display: flex;
    flex-direction: column;
    width: 100%;
    background-color: #FADAD9;
    border-radius: 30px;
    cursor: pointer;
    padding: 20px; 
    box-sizing: border-box;
    transition: box-shadow 0.3s ease, transform 0.2s ease;
}


.question__item:hover {
    transform: translateY(-2px); 
    box-shadow: 0 10px 25px rgba(216, 148, 149, 0.4);
}

.question__item:last-child {
    margin-bottom: 0;
    z-index: 100;
}


.question__title {
    width: 100%;
    min-height: 30px;
    display: flex;
    justify-content: flex-start; 
    align-items: start;
    font-weight: 500;
    color: #412726;
    margin: 0;
    position: relative; 
    padding-right: 40px;
    box-sizing: border-box;
}

.question__title::after {
    content: '';
    position: absolute;
    right: 10px; 
    top: 50%;
    transform: translateY(-50%) rotate(45deg); 
    width: 10px;
    height: 10px;
    border-bottom: 3px solid #F4ADAF; 
    border-right: 3px solid #F4ADAF;
    border-radius: 2px; 
    transition: transform 0.9s ease; 
}


.question__item.active .question__title::after {
    
    transform: translateY(-25%) rotate(225deg); 
}


.question__content {
    display: none; 
    min-height: 160px; 
    background-color: #cad5a9;
    border-radius: 20px; 
    margin-top: 15px;
    text-align: start;
    padding: 20px;
    box-sizing: border-box;
    color: #8b6664;
    font-weight: 400;
    overflow: hidden;
    font-weight: 400;
}


.question__item.active .question__content {
    display: block;
}


.question__content::-webkit-scrollbar {
    width: 6px;
}

.question__content::-webkit-scrollbar-track {
    background: transparent; 
    margin: 10px 0;          
}

.question__content::-webkit-scrollbar-thumb {
    background-color: rgba(65, 39, 38, 0.2); 
    border-radius: 10px;                     
}

.question__content::-webkit-scrollbar-thumb:hover {
    background-color: rgba(65, 39, 38, 0.4); 
}

/* questions media */

@media (max-width: 1180px) {
    .questions {
        padding: 0 5px;
    }
}

@media (max-width: 590px) {
    
    .questions__list {
        width: 95%;
    }
}

@media (max-width: 530px) {
    
    .questions {
        margin-top: 80px;
    }
}

@media (max-width: 360px) {
    
    .questions {
        margin-top: 50px;
    }
    
    .questions h2{
        font-size: 17px;
        margin-bottom: 20px;
}

}


/* article */


.article-block {
    position: relative;
}

.article__title {
    margin-bottom: 20px;
}

.article__info {
    max-width: 700px;
    min-height: 300px;
    background-color: #cad5a9;
    border-radius: 30px;
    padding: 30px;
    margin-bottom: 50px;
    display: flex;
    flex-direction: column;
    align-items: start;
    justify-content: center;
}

.article__content {
    max-width: 500px;
}

.article__decor {
    max-width: 600px;
    position: absolute;
    right: 0;
    top: 150px;
}

.article__img {
    width: 100%;
    border-radius: 30px;
}


/* article media  */

@media (max-width: 1220px) {
    .article {
        padding: 0 5px;
    }
}

@media (max-width: 1140px) {
    .article__decor {
        top:290px;
    }
}


@media (max-width: 870px) {
    .article {
        margin-top: 10px;
    }
    .article__decor {
        top:500px;
    }

    .article-block {
    display: flex;
    flex-direction: column;
    align-items: center;
    }
}   

@media (max-width: 390px) {
    .article__decor {
        top:500px;
    }
}

@media (max-width: 373px) {
    .article__decor {
        top:550px;
    }
}

@media (max-width: 355px) {
    .article__decor {
        top:580px;
    }
}

/* contacts */

.contacts {
    margin-top: 290px;
}

.contacts-block {
    width: 100%;
    display: flex;
    justify-content: flex-end;
    position: relative;
    flex-direction: column;
    align-items: flex-end;
}

.contacts__title {
    margin-right: 293px;
}

.contacts__wrapp {
    width: 50%;
    border-radius: 30px;
    margin-right: 100px;
    background-color: #FADAD9;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}

.contacts__info{
    max-width: 370px;
    padding: 30px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    
}

.contacts__phone {
    margin: 15px 0;
}

.contacts__decor {
    max-width: 600px;
    position: absolute;
    left: 90px;
    top: -35px;
}

.contacts__img {
    width: 100%;
    border-radius: 30px;
}

/* contacts media  */

@media (max-width: 1150px) {
    .contacts {
        padding: 0 10px;
        margin-top: 310px;
    }

    .contacts-block {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    }
    .contacts__decor {
        top: 330px;
        left: 0;
}

.contacts__wrapp {
    margin-right: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 80%;
}

.contacts__title {
   margin-right: 0;
    }
    .contacts__decor {
        margin-top: 20px;
    }
}

@media (max-width: 870px) {
    .contacts {
        margin-top: 480px;
    }

    .contacts__wrapp {
    width: 90%;
}
}

@media (max-width: 510px) {
    .contacts {
        margin-top: 380px;
    }

    .contacts__wrapp {
    width: 100%;
}
}

@media (max-width: 450px) {
    .contacts {
        margin-top: 400px;
    }

    .contacts__wrapp {
    width: 100%;
    }
}

@media (max-width: 400px) {
    .contacts {
        margin-top: 350px;
    }

    .contacts__wrapp {
    width: 100%;
}
}

@media (max-width: 380px) {
    
    .contacts__decor {
    top: 340px;
    }
}


/* schedule */

.schedule {
    margin-top: 200px;
}

.schedule__info {
    max-width: 550px;
    margin-right: 40px;
}

.schedule__text {
    margin-bottom: 40px;
}

.schedule__main {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.schedule__calendar {
    width: 100%;
    min-height: 400px;
    background-color: #cad5a9;
    border-radius: 30px;
}

.schedule__name {
    font-weight: 500;
    color: #8b6664;
}

/* schedule media */

@media (max-width: 1220px) {
    .schedule {
        padding: 0 10px;
    }
    .schedule__info {
    margin-right: 20px;
}
}   

@media (max-width: 1150px) {
    .schedule__main {
        margin-top: 450px;
    }

}   

@media (max-width: 1000px) {
    .schedule__main {
        display: flex;
        flex-direction: column;
    }

    .schedule__info {
    margin-bottom: 30px;
    }

}   

@media (max-width: 550px) {
    .schedule__main {
        margin-top: 400px;
    }

}   

@media (max-width: 480px) {
    .schedule__main {
        margin-top: 380px;
    }

}   

@media (max-width: 420px) {
    .schedule__main {
        margin-top: 300px;
    }

}   

@media (max-width: 365px) {
    /* .schedule__main {
        margin-top: 70px;
    } */

}   



/* footer */

.footer {
    margin-top: 150px;
    min-height: 90px;
    background-color: #cad5a9;
}

.footer-block {
    display: flex;
    justify-content: space-between;
    align-items: center;
    min-height: 90px;
}

.footer__main {
    display: flex;
    justify-content: center;
    align-items: center;
}

.footer__title {
    margin-right: 30px;
}

.footer__phone {
    width: 150px;
    display: flex;
    justify-content: center;
    align-items: center;
}
.footer__powered {
    margin-left: 5px;
}


/* footer media */

@media (max-width:1220px) {
    .footer{
        padding: 5px;
    }
}

@media (max-width:510px) {
    .footer {
        margin-top: 100px;
    }
    .footer__main{
        display: flex;
        flex-direction: column;
        align-items: start;
    }

    .footer__phone {
    margin: 10px 0;
    }
}