:root {
         --beige-light: #f8f4f0;
         /* --beige: #e8dcc8; */
         --beige: #F4F2EA;
         /* --beige-dark: #d4c4a8; */
         --beige-dark: #E0DBD0;
         --blue-pastel: #a8d0e6;
         --blue-pastel-dark: #7fb3d5;
         /* --text-dark: #5a4c3a; */
         --back-dark: #2f2d2c;
         --text-dark: #5A4C3A;
         --text-light: #8a7860;
         --second-font: "Alumni Sans SC", sans-serif;
     }

     * {
         margin: 0;
         padding: 0;
         box-sizing: border-box;
         /* font-family: 'Cormorant Garamond', 'Times New Roman', serif;
            font-family: "Montserrat", sans-serif; */
         font-family: var(--second-font);
         font-optical-sizing: auto;
         font-size: 1.2rem;
         font-style: normal;
     }

     body {
         background-color: var(--beige-light);
         color: var(--text-dark);
         line-height: 1.6;
         overflow-x: hidden;
     }

     h1,
     h2,
     h3 {
         font-family: "Great Vibes", cursive;
         font-weight: 400;

     }

     /* Плавные переходы для всех ссылок и кнопок */
     a,
     button {
         transition: all 0.3s ease;
     }

     /* Шапка сайта */
     header {
         position: fixed;
         top: 0;
         width: 100%;
         padding: 1rem 5%;
         display: flex;
         justify-content: space-between;
         align-items: center;
         background-color: rgba(248, 244, 240, 0.95);
         z-index: 1000;
         box-shadow: 0 2px 10px rgba(90, 76, 58, 0.05);

     }

     header::before,
     header::after,
     .footer-logo::before,
     .footer-logo::after {
         position: absolute;
         inset: 0;
         top: 3.8rem;
         /* bottom: 1rem; */
         content: "";
         width: 100%;
         height: 10px;
         border-bottom: 2px dashed;
         opacity: .2;
     }

     header::after {

         top: 0rem;

     }

     .footer-logo::after {

         top: -1.2rem;

     }

     .footer-logo::before {

         top: 2.6rem;

     }

     .logo {
         font-size: 1.8rem;
         /* font-weight: 600; */
         color: var(--text-dark);
         text-decoration: none;
         display: flex;
         align-items: center;
         font-family: "Great Vibes", cursive;
     }

     .logo-icon {
         width: 40px;
         height: 40px;
         /* background-color: var(--blue-pastel); */
         border-radius: 50%;
         margin-right: 10px;
         display: flex;
         align-items: center;
         justify-content: center;
         position: relative;
         overflow: hidden;
         color: var(--blue-pastel-dark);
     }

     .logo-icon::after {
         content: "";
         position: absolute;
         width: 100%;
         height: 100%;
         /* background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><path d="M30,30 Q50,10 70,30 T90,50 Q70,70 50,90 T30,70 Q10,50 30,30 Z" fill="none" stroke="white" stroke-width="3"/></svg>') center no-repeat; */
     }

     nav ul {
         display: flex;
         list-style: none;
     }

     nav li {
         margin-left: 2rem;
     }

     nav a {
         text-decoration: none;
         color: var(--text-dark);
         font-size: 1.1rem;
         position: relative;
     }

     nav a::after {
         content: '';
         position: absolute;
         width: 0;
         height: 2px;
         bottom: -5px;
         left: 0;
         background-color: var(--blue-pastel);
         transition: width 0.3s ease;
     }

     nav a:hover::after {
         width: 100%;
     }

     /* Герой секция */
     .hero {
         min-height: 100vh;
         display: flex;
         align-items: center;
         justify-content: center;
         position: relative;
         overflow: hidden;
         padding: 3rem 5%;
         line-height: 1.2;
         background: linear-gradient(135deg, var(--beige-light) 0%, var(--beige) 100%), url('/assets/img/igrunika_drawing_1.svg');
         -webkit-animation: theme 21s linear infinite;
         animation: theme 21s linear infinite;
     }


     .hero:after,
     .hero:before {
         content: "";
         display: block;
         position: fixed;
         z-index: -1;
         top: 0;
         width: 100vw;
         height: 100vh;
         width: 100vmax;
         height: 100vmax;
         background: rgba(0, 0, 0, 0.05);
         -webkit-animation: background 90s linear infinite;
         animation: background 90s linear infinite;
     }

     .hero:after {
         left: 15vw;
     }

     .hero:before {
         right: 15vw;
         -webkit-animation-delay: -30s;
         animation-delay: -30s;
         animation-direction: reverse;
     }

     .hero-content img {
         position: relative;
         /* top: -20%; */
         /* margin-top: -5rem; */
     }


     @-webkit-keyframes theme {
         0% {
             background: #74C390;
         }

         16% {
             background: #5DBDB6;
         }

         33% {
             background: #59D4E1;
         }

         50% {
             background: #51BCE8;
         }

         66% {
             background: #FA5374;
         }

         83% {
             background: #E46653;
         }

         100% {
             background: #74C390;
         }
     }

     @keyframes theme {
         0% {
             /* background: #74C390; */
             background: var(--beige);
         }

         16% {
             background: var(--beige-dark);
             /* background: #5DBDB6; */
         }

         33% {
             /* background: #59D4E1; */
             background: var(--beige-light);
         }

         50% {
             /* background: #51BCE8; */
             background-color: var(--blue-pastel);
         }

         66% {
             /* background: #FA5374; */
             background: var(--blue-pastel-dark);
         }

         83% {
             /* background: #E46653; */
             background: var(--back-dark);
         }

         100% {
             background: #74C390;
             background: var(--beige);
         }
     }

     @-webkit-keyframes background {
         0% {
             transform: rotate(0deg);
         }

         100% {
             transform: rotate(360deg);
         }
     }

     @keyframes background {
         0% {
             transform: rotate(0deg);
         }

         100% {
             transform: rotate(360deg);
         }
     }

     .hero-content {
         text-align: center;
         z-index: 2;
         max-width: 800px;
     }

     .hero h1 {
         font-size: 3.5rem;
         /* margin-top: -5rem; */
         margin-bottom: 1rem;
         font-weight: 300;
         font-size: clamp(3.5rem, 7vw, 5rem);
     }

     .hero h3 {
         font-size: clamp(2rem, 5vw, 3rem);
         font-family: var(--second-font);
         color: var(--blue-pastel-dark);
         font-weight: 400;
         font-optical-sizing: auto;
         font-style: normal;
         padding-bottom: 2rem;
         line-height: 1;
     }

     .hero p {
         font-size: 1.4rem;
         margin-bottom: 2rem;
         color: var(--text-light);
     }

     .btn {
         display: inline-block;
         padding: 0.8rem 2rem;
         background-color: var(--blue-pastel);
         color: white;
         text-decoration: none;
         border-radius: 30px;
         font-size: 1.1rem;
         border: none;
         cursor: pointer;
         transition: all 0.3s ease;
     }

     .btn:hover {
         background-color: var(--blue-pastel-dark);
         transform: translateY(-3px);
         box-shadow: 0 5px 15px rgba(168, 208, 230, 0.4);
     }

     .floating-elements {
         position: absolute;
         width: 100%;
         height: 100%;
         top: 0;
         left: 0;
         z-index: 1;
     }

     .floating-element {
         position: absolute;
         opacity: 0.1;
     }

     .floating-element:nth-child(1) {
         top: 20%;
         left: 10%;
         animation: float 15s infinite ease-in-out;
     }

     .floating-element:nth-child(2) {
         top: 60%;
         right: 15%;
         animation: float 18s infinite ease-in-out;
         animation-delay: 2s;
     }

     .floating-element:nth-child(3) {
         bottom: 20%;
         left: 20%;
         animation: float 12s infinite ease-in-out;
         animation-delay: 4s;
     }

     @keyframes float {

         0%,
         100% {
             transform: translateY(0) rotate(0deg);
         }

         50% {
             transform: translateY(-120px) rotate(95deg);
         }
     }

     /* Секции */
     section {
         padding: 6rem 5%;
     }

     .section-title {
         text-align: center;
         font-size: 2.5rem;
         margin-bottom: 3rem;
         position: relative;
         font-size: clamp(3rem, 5vw, 5rem);
     }

     .section-title::after {
         content: '';
         position: absolute;
         width: 60px;
         height: 2px;
         background-color: var(--blue-pastel);
         bottom: -10px;
         left: 50%;
         transform: translateX(-50%);
     }

     /* О мастере */
     .about {
         background-color: white;
     }

     .about-content {
         display: flex;
         align-items: center;
         max-width: 1200px;
         margin: 0 auto;
         gap: 4rem;
         position: relative;
     }

     .about-text {
         flex: 1;
     }

     .about-text h3 {
         font-size: 1.8rem;
         margin-bottom: 1.5rem;
         color: var(--text-dark);
     }

     .about-text p {
         margin-bottom: 1.5rem;
         font-size: 1.1rem;
         color: var(--text-light);
     }

     .about-image {

         flex: 1;
         border-radius: 80% 20% 79% 21% / 18% 76% 24% 82%;
         overflow: hidden;
         border-radius: 50%;
         /* clip-path: url(#clippath); */
         width: 100%;
         height: auto;
         border-bottom: 17px solid var(--beige);
         border-top: 17px solid var(--beige-light);
         /* box-shadow: 0 10px 30px rgba(90, 76, 58, 0.1); */

     }

     /* .about-image:before, .about-image:after {
    display: block;
    width: 150px;
    height: 150px;
    border: 4px solid var(--blue-pastel-dark);
    border-radius: 3rem;
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1111;
} */

     .about-image img {
         width: 100%;
         height: auto;
         display: block;
         transition: transform 0.5s ease;
         /* border-radius: 80% 20% 79% 21% / 18% 76% 24% 82%; */
         /* position: absolute; */


     }

     .about-image:hover img {
         transform: scale(1.25);

     }

     /* Галерея */

     #background-video {
         position: fixed;
         top: 0;
         left: 0;
         inset: 0;
         /* min-width: 100%; */
         min-height: 100%;
         width: 100%;
         height: auto;
         z-index: -1;
         object-fit: cover;
         overflow: hidden;
         filter: blur(.07rem) grayscale(.51);
         /* filter: grayscale(.51); */
         /* filter: grayscale(.81) ; */
     }

     .gallery {
         /* background-color: var(--beige); */
     }

     .gallery-grid {
         display: grid;
         grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
         gap: 2rem;
         max-width: 1200px;
         margin: 0 auto;
     }

     .gallery-item {
         position: relative;
         border-radius: 10px;
         /* overflow: hidden; */
         /* box-shadow: 1px 20px 15px rgba(90, 76, 58, 0.1); */
         border: 1px solid;
         height: 300px;
         cursor: pointer;
         display: flex;
         justify-content: center;

     }

     .gallery-item img {
         /* width: 100%;
         height: 100%;
         object-fit: cover;
         margin-top: -3rem;
         transition: transform 0.5s ease; */
         width: auto;
         height: 100%;
         /* object-fit: cover; */
         margin-top: -3rem;
         transition: transform 0.5s ease;
         transform-origin: center bottom;
         z-index: 2;
         filter: brightness(1.1);
     }

     .gallery-item:hover img {
         transform: scale(1.5);

     }

     .gallery-item-overlay {
         position: absolute;
         bottom: 0;
         left: 0;
         right: 0;
         background: linear-gradient(to top, #2F2D2C 35%, transparent);
         padding: 1.5rem;
         color: white;
         /* transform: translateY(100%); */
         transition: transform 0.3s ease;
         z-index: 2;
     }

     .gallery-item-overlay h3 {
         font-size: 1.7rem;

     }

     .gallery-item-overlay p {
         font-size: 1rem;
         color: var(--blue-pastel);
         line-height: 1;
         font-weight: 300;
     }

     .gallery-item:hover .gallery-item-overlay {
         transform: translateY(0);
     }

     /* Мастер-классы */
     .workshops {
         background-color: var(--back-dark);
     }

     .workshop-cards {
         display: grid;
         grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
         gap: 2rem;
         max-width: 1200px;
         margin: 0 auto;
     }

     .workshop-card {
         background-color: var(--beige-light);
         border-radius: 10px;
         overflow: hidden;
         box-shadow: 0 5px 15px rgba(90, 76, 58, 0.05);
         transition: transform 0.3s ease, box-shadow 0.3s ease;
     }

     .workshop-card:hover {
         transform: translateY(-10px);
         box-shadow: 0 15px 30px rgba(90, 76, 58, 0.1);
     }

     .workshop-card-image {
         height: 200px;
         overflow: hidden;
     }

     .workshop-card-image img {
         width: 100%;
         height: 100%;
         object-fit: cover;
         transition: transform 0.5s ease;
     }

     .workshop-card:hover .workshop-card-image img {
         transform: scale(1.1);
     }

     .workshop-card-content {
         padding: 1.5rem;
     }

     .workshop-card h3 {
         font-size: 1.4rem;
         margin-bottom: 0.5rem;
         color: var(--text-dark);
     }

     .workshop-card p {
         color: var(--text-light);
         margin-bottom: 1rem;
     }

     .workshop-card-price {
         font-size: 1.2rem;
         font-weight: 600;
         color: var(--blue-pastel-dark);
         margin-bottom: 1rem;
     }

     /* Контакты */
     .contacts {
         /* background-color: var(--beige); */
         position: relative;

     }



     /* .contacts::after {
         content: "";
         background: url("/assets/img/courses/Courses_31.webp");
         background-repeat: no-repeat;
         opacity: 0.5;
         position: absolute;
         top: 0;
         left: 0;
         height: 100%;
         width: 100%;
         filter: grayscale();
         z-index: -1;
     } */


     .contact-content {
         display: flex;
         max-width: 1200px;
         margin: 0 auto;
         gap: 4rem;
     }

     .contact-info {
         flex: 1;

     }

     .contact-info h3 {
         font-size: 1.8rem;
         margin-bottom: 1.5rem;
         color: var(--text-dark);
     }

     .contact-info p {
         margin-bottom: 1rem;
         color: var(--text-light);
         font-size: 1.1rem;

     }

     .contact-info p i {
         margin-right: .5em;
     }

     p.phone {
         font-size: 2rem;
     }

     .social-links {
         display: flex;
         gap: 1rem;
         margin-top: 2rem;
     }

     .social-link {
         display: flex;
         align-items: center;
         justify-content: center;
         width: 3rem;
         height: 3rem;
         background-color: var(--blue-pastel);
         color: white;
         border-radius: 50%;
         text-decoration: none;
         transition: all 0.3s ease;
     }

     .social-link:hover {
         background-color: var(--blue-pastel-dark);
         transform: translateY(-3px);
     }

     .contact-form {
         flex: 1;
     }

     .form-group {
         margin-bottom: 1.5rem;
     }

     .form-group label {
         display: block;
         margin-bottom: 0.5rem;
         color: var(--text-dark);
     }

     .form-group input,
     .form-group textarea {
         width: 100%;
         padding: 0.8rem;
         border: 1px solid var(--beige-dark);
         border-radius: 5px;
         font-size: 1rem;
         background-color: white;
         transition: border-color 0.3s ease;
     }

     .form-group input:focus,
     .form-group textarea:focus {
         outline: none;
         border-color: var(--blue-pastel);
     }

     /* Футер */
     footer {
         background-color: var(--back-dark);
         color: var(--beige);
         padding: 2rem 5%;
         text-align: center;
     }

     .footer-content {
         max-width: 1200px;
         margin: 0 auto;
     }

     .footer-logo {
         position: relative;
         font-size: 1.5rem;
         /* margin-bottom: 1rem; */
     }

     .footer-links {
         display: flex;
         justify-content: center;
         gap: 1rem;
         margin: 2rem 0;
         flex-wrap: wrap;
     }

     .footer-links a {
         font-size: 1rem;
         color: var(--beige);
         text-decoration: none;
         transition: color 0.3s ease;
         border-bottom: 1px solid var(--beige);
     }

     .footer-links a:hover {
         color: var(--blue-pastel);
     }

     .copyright {
         margin-top: 2rem;
         font-size: 0.9rem;
         color: var(--beige-dark);
     }

     /* Адаптивность */
     @media (max-width: 768px) {
         /* .hero h1 {
                font-size: 2.5rem;
            } */

         .hero p {
             font-size: 1.2rem;
         }

         .about-content,
         .contact-content {
             flex-direction: column;
         }

         .gallery-grid {
             grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
         }

         /* .workshop-cards {
                grid-template-columns: 1fr;
            } */

         nav ul {
             display: none;
         }

         .mobile-menu-btn {
             display: block;
         }
     }