/*==================================
* Author        : "ThemeSine"
* Template Name : Listrace  HTML Template
* Version       : 1.0
==================================== */

/*==================================
font-family: 'Roboto', sans-serif;
==================================== */


/*=========== TABLE OF CONTENTS ===========
1.  General css (Reset code)
2.  Header-top
3.  Top-area
4.  Welcome-hero
5.  List-topics
6.  Works  
7.  Explore
8.  Reviews
9.  Counter
10. Blog
11. Subscribe
12. Footer
==========================================*/







/* =========================================
    CSS VARIABLES & RESET
    ========================================= */
:root {
    /* Palette */
    --primary-purple: #3f0099;
    --primary-dark-purple: #2a0066;
    --secondary-cyan: #00d2ff;
    --accent-green: #00ff85;
    --text-dark: #1a1a1a;
    --text-gray: #555555;
    --text-light: #f4f4f4;
    --white: #ffffff;
    --card-bg: #4b00b5; /* Bright purple for cards */
    
    /* Spacing */
    --container-width: 1200px;
    --section-padding: 80px 0;
    
    /* Typography */
    --font-heading: 'font4', sans-serif;
    --font-body: 'font2', sans-serif;
    --border-radius: 12px;


    /* blog */
    --color-primary: #3f0099;
    --color-primary-dark: #2a0066;
    --color-accent: #00ff85;
    --color-text-main: #1a1a1a;
    --color-text-light: #555555;
    --color-white: #ffffff;
    --color-bg-light: #f9f9f9;  
    --container-width: 1400rem;
    --section-spacing: 40px;
    --border-radius: 12px;

    /* article */

}



body {
    font-family: var(--font-body);
    color: var(--text-dark);
    line-height: 1.6;
    background-color: #fdfdfd;
    overflow-x: hidden;
}

a {
    text-decoration: none;
    color: inherit;
    transition: 0.3s ease;
}


img {
    max-width: 100%;
    display: block;
    object-fit: cover;
}











/*-------------------------------------
		1.General css (Reset code)
--------------------------------------*/
* {
    padding: 0;
    margin: 0;
}

* {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -o-box-sizing: border-box;
    -ms-box-sizing: border-box;
    box-sizing: border-box;
}

  *,
  html * /* override x.xhtml.ru style */ 
  {
    scrollbar-width: thin;
    scrollbar-color: #02f893 #1d2029;
  }



  *::-webkit-scrollbar,
  html *::-webkit-scrollbar {
    height: 12px;
    width: 12px;
  }
  *::-webkit-scrollbar-track,
  html *::-webkit-scrollbar-track {
    background: #1d2029;
  }
  *::-webkit-scrollbar-thumb,
  html *::-webkit-scrollbar-thumb {
    background-color: #02f893;
    border-radius: 5px;
    border: 3px solid #1d2029;
  }
  html {
      font-size: 1px;
      scroll-behavior: smooth;
  }




@font-face {
            font-family: 'font1';
            src: url('/media/assets/fonts2/font1.woff2');
        }

@font-face {
            font-family: 'font2';
            src: url('/media/assets/fonts2/font2.woff2');
        }

@font-face {
            font-family: 'font3';
            src: url('/media/assets/fonts2/font3.woff2');
        }


@font-face {
            font-family: 'font4';
            src: url('/media/assets/fonts2/font4.woff2');
        }





body {
    font-family: 'font2', sans-serif;
    font-size: 14px;

    text-transform: initial;

    overflow-x: hidden;

            line-height: 1.6;
           
}

  /* .zoom {
      zoom: 0.8;
  } */

/* a,
a:hover,
a:active,
a:focus {
    display: inline-block;
    text-decoration: none;
    color: #343a3f;
    font-size: 16px;
    padding: 0;
    font-weight: 500;
    text-transform: capitalize;
} */

h1,
h2,
h3,
h4,
h5,
h6 {
    margin: 0;
    color: #fff;
    font-size: 18px;
    font-weight: 500;
    text-transform: capitalize;
}

p {
    /* margin: -7px; */
    color: #a09e9c;
    font-size: 15px;
    line-height: 1.8;
    text-transform: initial;
}


img {
    border: none;
    max-width: 100%;
    height: auto;
}

ul {
    padding: 0;
  
    list-style: none;
}

ul li {
    list-style: none;

}

select,
input,
textarea,
button {
    box-shadow: none;
    outline: 0 !important;
}

button {
    background: transparent;
    border: 0;
    font-size: 12px;
}

html,
body {
    height: 100%;

            line-height: 1.6;
            color: #000;
}

[placeholder]:focus::-webkit-input-placeholder {
    -webkit-transition: opacity 0.3s 0.3s ease;
    -moz-transition: opacity 0.3s 0.3s ease;
    -ms-transition: opacity 0.3s 0.3s ease;
    -o-transition: opacity 0.3s 0.3s ease;
    transition: opacity 0.3s 0.3s ease;
    opacity: 0;
}



/* header */

.header {
background: #fff;
    /* padding: 20px 0; */
    position: fixed;
    top: 0;
    z-index: 100;
    /* box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); */
    padding-top: 5px;
    padding-right: 50px;
    padding-bottom: 5px;
    padding-left: 50px;
        width: 100%;
                background-color: #ffffff71;
        backdrop-filter: blur(23px);
        -webkit-backdrop-filter: blur(23px);
}

@media screen and (max-width: 768px){
   .header {
    padding-top: 10px;
    padding-right: 20rem;
    padding-bottom: 10px;
    padding-left: 20rem;
   } 
}

.header_wrap{
   
}

.logo {
    width: 25%;
    padding: 15px 20px;
    box-sizing: border-box;
    position: relative;
}

.logo a {
    display: block;
}

@media screen and (max-width: 768px){
    .logo{
        width: 35%;
        padding: 0;
    }
}



.header_right{
     display: flex;
    justify-content: flex-end;
    column-gap: 30px;
    width: 75%;
    align-items: center;
}

.header_right_btn {
    transition: all 0.25s ease-in-out;
    border-style: solid;
    border-width: 2px;
    border-color: var(#4700ad, #FE5B24);
    color: #4700ad;
    background-color: #ffffff;
    /* padding-top: 13px; */
    /* padding-right: 28px; */
    /* padding-bottom: 13px; */
    /* padding-left: 28px; */
    border-top-left-radius: 20px;
    border-top-right-radius: 0px;
    border-bottom-right-radius: 20px;
    border-bottom-left-radius: 0px;background-color: #ffffff52;
}



.header_right_btn:hover {
    box-shadow: 0 0 0 5px #4800ad80;
}
.header_right_btn a {
    display: block;
    width: 100%;
    height: 100%;
    padding-top: 13px;
    padding-right: 28px;
    padding-bottom: 13px;
    padding-left: 28px;
    color: #4700ad;
    font-weight: 600;
    font-size: 18px;
    font-family: 'font1';
    text-decoration: none;
}
.header_right_btn a span {}



.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 50px;
}

.header-inner {
    display: flex
;
    justify-content: space-between;
    align-items: center;

max-width: 1400rem;
    margin: 0 auto;
    
}

.logo img {
    height: auto;
}

.nav ul {
    list-style: none;
    display: flex
;
    gap: 30px;
}

.nav ul li{
    position: relative;
}

.nav a {
    text-decoration: none;
    color: #000;
    font-size: 18px;
 
    transition: color 0.3s;
        font-family: 'font1';
}

.nav a:hover {
      color: #4700AD;  
}

.nav a:hover::after {
    transform: scaleX(1);
}

.nav a::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 2px;
    background: #9C90FC;
    border-radius: 10px;
    transform: scaleX(0);
    transform-origin: center;
    transition: transform 0.4s 
ease;
}

p b {
        font-family: 'font4';
}




  .hamburger {
                display: none;
    }

    .nav {
        display: block;
    }

    .header_right_btn {
        display: block;
    }

    @media screen and (max-width: 768px){
    .header_right_btn{
        display: none;
    }
}

    .mobile-menu {
        display: none;
    }



@media screen and (max-width: 768px){

        .menu-overlay {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.5); /* Полупрозрачный черный */
            opacity: 0;
            visibility: hidden;
            transition: all 0.3s ease;
            z-index: 998; /* Должен быть ниже меню (z-index: 999), но выше остального контента */
        }

        .menu-overlay.active {
            opacity: 1;
            visibility: visible;
        }


       /* Hamburger Menu Button */
        .hamburger {
            display: flex;
            flex-direction: column;
            cursor: pointer;
            gap: 5px;
            z-index: 1001;
            padding: 15px;
        border-top-left-radius: 20px;
        border-top-right-radius: 0px;
        border-bottom-right-radius: 20px;
        border-bottom-left-radius: 0px;
        background-color: #4700ad;
        }

        .hamburger span {
            width: 28px;
            height: 3px;
            background: #fff;
            border-radius: 3px;
            transition: all 0.3s ease;
        }

        .hamburger.active span:nth-child(1) {
            transform: rotate(45deg) translate(8px, 8px);
        }

        .hamburger.active span:nth-child(2) {
            opacity: 0;
        }

        .hamburger.active span:nth-child(3) {
            transform: rotate(-45deg) translate(8px, -8px);
        }

        .hamburger2 {
                 position: relative;
        top: 0;
        /* left: -30px; */
        display: flex
;
        flex-direction: column;
        align-items: flex-end;
        cursor: pointer;
        gap: 5px;
        z-index: 1000;
        padding: 20px 0;
        /* background-color: #4700ad; */
        position: absolute;
        right: 27px;
        width: 50px;
        }

        .hamburger2 span {
            width: 28px;
            height: 3px;
            background: #fff; /* Белые линии */
            border-radius: 3px;
            transition: all 0.3s ease;
        }

        /* Преобразование в крестик (X) */
        .hamburger2 span:nth-child(1) {
            transform: rotate(45deg) translate(5px, 5px);
        }

        .hamburger2 span:nth-child(2) {
            transform: rotate(-45deg) translate(5px, -5px);
        }

        /* Mobile Menu Overlay */
        .mobile-menu {
            position: fixed;
            top: 0;
            right: -100%;
            width: 80%;
            max-width: 350px;
            height: 100vh;
            background: #fff;
            box-shadow: -5px 0 15px rgba(0, 0, 0, 0.2);
            transition: right 0.4s ease;
            z-index: 999;
            padding: 80px 30px 30px;
            overflow-y: auto;
            display: block;
       

                padding-top: 0;
                display: flex;
                flex-direction: column;
                justify-content: center;  
                background: #4700ad;

        }
         
        .mobile-menu.active {
            right: 0;
        }

        .mobile-menu ul {
            list-style: none;
        }

        .mobile-menu li {
            margin-bottom: 25px;
        }

        .mobile-menu a {
            display: block;
            color: #fff;
            text-decoration: none;
            font-size: 18px;
            font-weight: 500;
            padding: 10px 0;
            border-bottom: 1px solid #05010a;
            transition: color 0.3s;
        }

        .mobile-menu a:hover {
            color: #ccc;
        }

        .mobile-cta {
            margin-top: 30px;
        }

        .mobile-cta a {
            display: block;
            text-align: center;
            padding: 15px;
            background: #fff;
            color: #230056;
            border-radius: 20px 0 20px 0;
            text-decoration: none;
            font-weight: 600;
            border: none;
        }

        /* Overlay for background */
        .menu-overlay {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.5);
            opacity: 0;
            visibility: hidden;
            transition: all 0.3s ease;
            z-index: 998;
            z-index: -1;
        }

        .menu-overlay.active {
            opacity: 1;
            visibility: visible;
        }

        .nav {
            display: none;
        }
}


















/* about */

.about-hero-section {
 
margin: 145px auto 10px;
    border-radius: 20px;
    height: 550rem;
    position: relative;
    overflow: hidden;
    background-image: url(/media/assets/img/Header_about.jpg);
    background-size: cover;
    background-position: right;
    background-repeat: no-repeat;
    position: relative;
    max-width: 1400rem;
}

@media screen and (max-width: 768px){
    .about-hero-section{
                margin: 60px 0rem 30px;
        border-radius: 0;
        height: auto;
        padding: 50px 0;
        margin-bottom: 0;
    }
}

.about-hero-section:after {
      content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    background: linear-gradient(90deg, #512296 0%, #00000000 50%, #1a1a2e 100%);
}

.about-hero-container {
        flex-direction: row;
        align-items: center;
        gap: 60px;
        height: 100%;
        font-size: 30rem;
        margin-left: 50px;
        margin-right: 50px;
        /* width: 35%; */
        width: 600rem;
     
    display: flex
;
}

@media screen and (max-width: 768px){
    .about-hero-container {
       width: calc(100% - 60rem);
        margin-right: 0;
        margin-left: 30rem;
    }
}

.about-hero-text-wrapper {
    flex: 1;
    z-index: 3;
}

.about-hero-title {
    color: #ffffff;
    font-size: 40rem;
        font-family: 'font1';
   
    line-height: 1.2;
    margin-bottom: 24px;
}

@media screen and (max-width: 768px){
    .about-hero-title {
          width: 100%;
    font-size: 36rem;  
    }
}

.about-hero-description {
    color: rgba(255, 255, 255, 0.9);
    font-size: 0.95rem;
    line-height: 1.65;
    margin-bottom: 32px;
}

@media screen and (max-width: 768px){
   .about-hero-description {
    font-size: 14rem;
   } 
}

.about-hero-cta-btn {
 display: inline-block;
    background: #02f893;
    color: #4700ad;
    padding: 9px 8px;
    text-decoration: none;
    border-radius: 6px;
    font-weight: 600;
    font-size: 22rem;
    transition: all 0.3s  ease;
}

@media screen and (max-width: 768px){
    .about-hero-cta-btn {
    display: inline-block;
    background: #02f893;
    color: #4700ad;
    padding: 9px 8px;
    text-decoration: none;
    border-radius: 6px;
    font-weight: 600;
    font-size: 18rem;
    transition: all 0.3s ease;
    }
}

.about-hero-cta-btn:hover {

    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3);
}

.about-hero-image-wrapper {
    flex: 1;
    position: relative;
}

.about-hero-image-box {
    width: 100%;
    height: 280px;
    border-radius: 16px;
    overflow: hidden;
    background: #374151;
    position: relative;
}

.about-hero-image-box img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.about-star-icon {
    position: absolute;
    width: 50px;
    height: 50px;
    background: #10b981;
    clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
}

.about-star-top-right {
    top: -10px;
    right: 40px;
}

.about-star-bottom-left {
    bottom: -10px;
    left: 40px;
}

/* About Journey Section */
.about-journey-section {

    background: #ffffff;
}

@media screen and (max-width: 768px){
   .about-journey-section {
  background: #ffffff;
        padding: 0px 10rem 40px;
        width: 49%;
} 
}

.about-journey-container {
       margin: 0 auto;
    display: flex
;
    flex-direction: column-reverse;
    align-items: top;
}

.about-journey-heading {
    font-size: 40rem;
    font-weight: 700;
    line-height: 1.3;
    color: #000;
    font-family: 'font2';

    font-weight: 700;
    color: #000;
    margin-bottom: 24px;
}

@media screen and (max-width: 768px){
   
      .about-journey-heading {
                font-size: 18rem;
        margin-bottom: 20px;
    }

     .about-journey-heading br{
            display: none;
          }

}

.about-journey-content-wrapper {
    display: flex;
    flex-direction: column;
    gap: 40px;

}

@media screen and (max-width: 768px){
    .about-journey-content-wrapper {
       flex-direction: column-reverse; 
               gap: 0;
    }

    .about-journey-content-wrapper-reverse{
          flex-direction: column !important; 
               gap: 0;
    }
}

.about-journey-text-block {
    flex: 1;
}

@media screen and (max-width: 768px){
    .about-journey-text-block{
        background-color: #ffffff71;
        /* backdrop-filter: blur(23px);
        -webkit-backdrop-filter: blur(23px); */
        /* margin-top: 2px; */
        padding: 20px 0;
        border-radius: 40px 0 0 0;
        box-shadow: 0;
        z-index: 5;
    }
}

.about-journey-paragraph {
 color: #000;
    font-size: 16rem;
    line-height: 2;
    margin-top: 2px;
    display: inline;
    margin-left: 5px;
        font-family: 'font2';
}

@media screen and (max-width: 768px){
    .about-journey-paragraph {
    color: #000;
    font-size: 14rem;
    line-height: 1.5;
    margin-top: 0;
    display: inline;
    margin-left: 0;
    font-family: 'font2';        display: block;
}
}

.about-journey-paragraph strong {
    color: #000;
    font-weight: 600;
}

.about-journey-image-block {
    flex: 1;
    position: relative;
    width: 100%;
}

/* @media screen and (max-width: 768px){
    .about-journey-image-block {
        display: none;
    }
} */

.about-journey-image-container {
    width: 100%;
    height: 300px;
    border-radius: 16px;
    overflow: hidden;
    background: #e5e7eb;
    position: relative;
    width: 100%;
    height: 300px;
    border-radius: 16px;
    overflow: hidden;
    background: #374151;
    position: relative;
    border-top-left-radius: 40px;
    border-top-right-radius: 0px;
    border-bottom-right-radius: 40px;
    border-bottom-left-radius: 0px;
}

@media screen and (max-width: 768px){
    .about-journey-image-container {
        border-radius: 0;
        height: auto;
        width: 100%;
    }
}

.about-journey-image-container img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* About Philosophy Section */
.about-philosophy-section {
    padding: 100px 60px 50px;
}

@media screen and (max-width: 768px){
    .about-philosophy-section{
        padding: 40px 20rem 40px;
    }
}

.about-philosophy-container {
    display: flex;
    flex-direction: column-reverse;
    gap: 40px;
    /* align-items: center; */
    margin: 0 auto;
    display: flex;
    flex-direction: column-reverse;
    align-items: top;
}

@media screen and (max-width: 768px){
    .about-philosophy-container {
          flex-direction: column;  
    }
}

.about-philosophy-image-block {
    flex: 1;
    width: 100%;
}

.about-philosophy-image-wrapper {
width: 100%;
    height: 300px;
    border-radius: 16px;
    overflow: hidden;
    background: #374151;
    position: relative;
    border-top-left-radius: 40px;
    border-top-right-radius: 0px;
    border-bottom-right-radius: 40px;
    border-bottom-left-radius: 0px;
}

.about-philosophy-image-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.about-philosophy-text-block {
    flex: 1;
}

@media screen and (max-width: 768px){
    .about-philosophy-text-block {
    background-color: #ffffff71;
    backdrop-filter: blur(23px);
    -webkit-backdrop-filter: blur(23px);
    margin-top: -100px;
    padding: 20px;
    border-radius: 40px 0 0 0;
    box-shadow: 8px 7px 0px #efeded;
    }
}

.about-philosophy-heading {
    font-size: 40rem;
    font-weight: 700;
    color: #000;
    margin-bottom: 24px;
    font-family: 'font2';
}

@media screen and (max-width: 768px){
    .about-philosophy-heading {
        margin-bottom: 10px;
        font-size: 34rem;
    }
}

.about-philosophy-text {
    margin-bottom: 16px;
    color: #000;
    font-size: 20rem;
    line-height: 2;
    margin-top: 2px;
    display: inline;
    margin-left: 5px;
        font-family: 'font2';
}

.about-philosophy-text strong {
    color: #1f2937;
    font-weight: 600;
}

/* About Vision Section */
.about-vision-section {
    padding: 100px 60px 50px;
    background: #ffffff;
}

@media screen and (max-width: 768px){
    .about-vision-section {
        padding: 40px 20rem 40px;
        background: #ffffff;
    }
}

.about-vision-container {

    flex-direction: column;
    gap: 40px;
    align-items: flex-start;
    margin: 0 auto;
    display: flex;
    flex-direction: column-reverse;
    align-items: top;
}

.about-vision-text-block {
    flex: 1;
}

@media screen and (max-width: 768px){
    .about-vision-text-block{
       background-color: #ffffff71;
    backdrop-filter: blur(23px);
    -webkit-backdrop-filter: blur(23px);
    margin-top: -100px;
    padding: 20px;
    border-radius: 40px 0 0 0;
    box-shadow: 8px 7px 0px #efeded;
    z-index: 5; 
    }
}

.about-vision-heading {
    font-size: 40rem;
    font-weight: 700;
    color: #000;
    margin-bottom: 20px;
    font-family: 'font2';
}

@media screen and (max-width: 768px){
    .about-vision-heading {
        font-size: 34rem;
        margin-bottom: 10px;
    }
}

.about-vision-description {
color: #000;
    font-size: 20rem;
    line-height: 2;
    margin-top: 2px;
    display: inline;
    margin-left: 5px;
        font-family: 'font2';
}

.about-vision-image-block {
    flex: 1;
    width: 100%;
}

.about-vision-image-wrapper {
width: 100%;
    height: 300px;
    border-radius: 16px;
    overflow: hidden;
    background: #374151;
    position: relative;
    border-top-left-radius: 40px;
    border-top-right-radius: 0px;
    border-bottom-right-radius: 40px;
    border-bottom-left-radius: 0px;
}

.about-vision-image-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* About Mission Section */
.about-mission-section {
    padding: 80px 20px;
    background: #ffffff;
}

.about-mission-container {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    flex-direction: column-reverse;
    gap: 40px;
    align-items: flex-start;
}

.about-mission-image-block {
    flex: 1;
    width: 100%;
}

.about-mission-image-wrapper {
    width: 100%;
    height: 300px;
    border-radius: 16px;
    overflow: hidden;
    background: #e5e7eb;
    position: relative;
}

.about-mission-image-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.about-mission-text-block {
    flex: 1;
}

.about-mission-heading {
    font-size: 40rem;
    font-weight: 700;
    color: #000;
    margin-bottom: 20px;
    font-family: 'font2';
}

@media screen and (max-width: 768px){
    .about-mission-heading {
        font-size: 34rem;
        margin-bottom: 10px;
    }
}

.about-mission-description {
 color: #000;
    font-size: 20rem;
    line-height: 2;
    margin-top: 2px;
    display: inline;
    margin-left: 5px;
        font-family: 'font2';
}

/* About Values Section */
.about-values-section {
    padding: 80px 20px;
}

@media screen and (max-width: 768px){
    .about-values-section {
    padding: 40px 20rem 80px;
}
}

.about-values-container {
   
    margin: 0 auto;
    display: flex;
    flex-direction: column-reverse;

    align-items: top;
}

@media screen and (max-width: 768px){
    .about-values-container {
           flex-direction: column; 
    }
}

.about-values-image-block {
    flex: 1;
    width: 100%;
    position: relative;
}

.about-values-image-wrapper {
    width: 100%;
    height: 300px;
    border-radius: 16px;
    overflow: hidden;
    background: #374151;
    position: relative;
    border-top-left-radius: 40px;
    border-top-right-radius: 0px;
    border-bottom-right-radius: 40px;
    border-bottom-left-radius: 0px;
}

.about-values-image-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.about-values-text-block {
    flex: 1;
}

@media screen and (max-width: 768px){
  .about-values-text-block {
    background-color: #ffffff71;
    backdrop-filter: blur(23px);
    -webkit-backdrop-filter: blur(23px);
    margin-top: -65px;
    padding: 20px;
    border-radius: 40px 0 0 0;
    box-shadow: 8px 7px 0px #efeded;
    }  
}

.about-values-heading {
    font-size: 1.75rem;
    font-weight: 700;
    color: #000;
    margin-bottom: 30px;
    font-family: 'font2';
}

@media screen and (max-width: 768px){
   .about-values-heading {
    font-size: 34rem;
    margin-bottom: 10px;
   } 
}

.about-values-list {
    list-style: none;
        font-family: 'font2';
}

.about-values-list-item {
    font-size: 24rem;
}

@media screen and (max-width: 768px){
    .about-values-list-item {
    font-size: 24rem;
    margin-bottom: 10px;
}
}

.about-values-list-item strong {
    color: #000;
    font-weight: 600;
    font-size: 18rem;
        font-family: 'font4';
}

@media screen and (max-width: 768px){
    .about-values-list-item strong {
    color: #000;0
    font-weight: 600;
    font-size: 18rem;
    font-family: 'font4';
    display: block;
}
}

.about-values-list-item-text {
    color: #000;
    font-size: 20rem;
    line-height: 2;
    margin-top: 2px;
    display: inline;
    margin-left: 5px;
}

/* About Final CTA Section */
.about-final-cta-section {
background: linear-gradient(135deg, #1e1b4b 0%, #0f172a 100%);
    padding: 70px 20px;
    text-align: center;
    border-top-left-radius: 55px;
    border-top-right-radius: 0px;
    border-bottom-right-radius: 55px;
    border-bottom-left-radius: 0px;
    margin-bottom: 60px;
    background: #000;
    margin-left: 60px;
    margin-right: 60px;
    position: relative;
    overflow: hidden;
        max-width: 1400px;
    margin: 0 auto 60px;
}

@media screen and (max-width: 768px){
    .about-final-cta-section {
        margin-left: 20rem;
        margin-right: 20rem; 
        margin-bottom: 50px;
    }
}

.about-final-cta-section:after {
 background-image: url(/media/assets/img/stillfundregion.svg);
    background-repeat: no-repeat;
    background-position: top right;
    background-size: 138%;
    content: '';
    position: absolute;
    right: -45px;
    top: -10px;
    width: 331rem;
    height: 431rem;
    transform: rotate(184deg);
    filter: invert(1);
    opacity: 0.1;
}

@media screen and (max-width: 768px){
    .about-final-cta-section:after {
background-image: url(/media/assets/img/stillfundregion.svg);
    background-repeat: no-repeat;
    background-position: top right;
    background-size: 138%;
    content: '';
    position: absolute;
    right: -146px;
    top: -10px;
    width: 331rem;
    height: 431rem;
    transform: rotate(184deg);
    filter: invert(1);
    opacity: 0.1;
    }
}

.about-final-cta-section:before {
background-image: url(/media/assets/img/stillfundregion.svg);
    background-repeat: no-repeat;
    background-position: top right;
    background-size: 117%;
    content: '';
    position: absolute;
    left: -142px;
    top: 32px;
    width: 374rem;
    height: 374rem;
    transform: rotate(194deg);
    filter: invert(1);
    opacity: 0.1;
}

@media screen and (max-width: 768px){
    .about-final-cta-section:before {
    background-image: url(/media/assets/img/stillfundregion.svg);
    background-repeat: no-repeat;
    background-position: top right;
    background-size: 117%;
    content: '';
    position: absolute;
    left: -263px;
    top: 32px;
    width: 374rem;
    height: 374rem;
    transform: rotate(194deg);
    filter: invert(1);
    opacity: 0.1;
    }
}


.about-final-cta-container {
    max-width: 900px;
    margin: 0 auto;
}

.about-final-cta-text {
    color: #ffffff;
    font-size: 20rem;
    line-height: 1.75;
    margin-bottom: 35px;
}

@media screen and (max-width: 768px){
    .about-final-cta-text {
        font-size: 16rem;
    }
}

.about-final-cta-button {
    display: inline-block;
    background: #02f893;
    color: #000;
    padding: 9px 10px;
    text-decoration: none;
    border-radius: 3px;
    font-weight: 600;
    font-size: 20rem;
    transition: all 0.3s ease;
}

@media screen and (max-width: 768px){
    .about-final-cta-button {
        font-size: 12rem;
    }
}

.about-final-cta-button:hover {
    background: #059669;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3);
}

/* Tablet Styles */
@media (min-width: 768px) {
    .about-hero-container {
        flex-direction: row;
        align-items: center;
        gap: 60px;
                z-index: 2;
        position: relative;
    }

    .about-hero-title {
        font-size: 2.8rem;
    }

    .about-hero-image-box {
        height: 380px;
    }

  


    .about-journey-content-wrapper {
        flex-direction: row;
        gap: 60px;
    }

    .about-journey-image-container {
        height: 400rem;
    }

    .about-philosophy-container {
        flex-direction: row;
        gap: 60px;
    }

    .about-philosophy-image-wrapper {
        height: 500rem;
    }

    .about-vision-container {
        flex-direction: row;
   
        gap: 60px;
    }

    .about-vision-image-wrapper {
        height: 500rem;
    }

    .about-mission-container {
        flex-direction: row;

        gap: 60px;
    }

    .about-mission-image-wrapper {
        height: 500rem;
    }

    .about-values-container {
        flex-direction: row;
        gap: 60px;
    }

    .about-values-image-wrapper {
        height: 500rem;
    }
}

/* Desktop Styles */
@media (min-width: 1024px) {
  

    .about-hero-title {
       font-size: 40rem;
        font-family: 'font1';
    }

    .about-hero-description {
      font-size: 16rem;
        font-family: 'font3';
    }

    .about-hero-image-box {
        height: 420px;
    }

    .about-journey-section {
               padding: 50px 30px 50px;
        max-width: 1464px;
        margin: 0 auto;
    }

    .about-journey-heading {
        font-size: 30rem;
        margin-bottom: 20rem;
    }

    .about-philosophy-section {
        padding: 40px 20rem 30px;
    }

    .about-philosophy-heading {
        font-size: 40rem;
    }

    .about-vision-section {
        padding: 100px 60px 50px;
    }

    .about-vision-heading {
        font-size: 40rem;
    }

    .about-mission-section {
        padding: 100px 60px 50px;
    }

    .about-mission-heading {
        font-size: 40rem;
    }

    .about-values-section {
        padding: 100px 60px 50px
    }

    .about-values-heading {
        font-size: 40rem;
    }

    .about-final-cta-section {
        padding: 120px 20px 60px;
    }

    .about-final-cta-text {
        font-size: 20rem;
    }
}

@media screen and (max-width: 768px){
   .service-category-wrap{
        display: flex;
        flex-wrap: wrap;
   } 
}











        /* Utility Classes */
        .index_container {
            max-width: var(--container-width);
            margin: 0 auto;
            padding: 0 20px;
        }

        .index_btn {
            display: inline-block;
            padding: 12px 24px;
            border-radius: 6px;
            font-weight: 600;
            cursor: pointer;
            text-align: center;
            transition: transform 0.2s, background-color 0.3s;
            font-family: var(--font-heading);
        }

        .index_btn2 {
            display: inline-block;
            padding: 12px 24px;
            border-radius: 6px;
            font-weight: 600;
            cursor: pointer;
            text-align: center;
            transition: transform 0.2s, background-color 0.3s;
            font-family: var(--font-heading);
        }


        .index_btn-primary {
            background-color: var(--accent-green);
            color: var(--text-dark);
            border: none;
        }
        
        .index_btn-primary:hover {
            background-color: #00cc6a;
            transform: translateY(-2px);
        }

        .index_btn-outline {
            background: transparent;
            border: 1px solid var(--primary-purple);
            color: var(--primary-purple);
        }

        .index_btn-outline:hover {
            background-color: var(--primary-purple);
            color: var(--white);
        }

        .index_btn-small {
            padding: 6px 16px;
            font-size: 14rem;
            background-color: var(--accent-green);
            color: #000;
            border: none;
            border-radius: 4px;
            display: inline-flex;
            align-items: center;
        }

        .index_section-title {
            font-family: var(--font-heading);
            font-size: 34rem;
            font-weight: 700;
            text-align: center;
            margin-bottom: 50px;
            color: var(--text-dark);
        }

        /* =========================================
           HEADER
           ========================================= */
        .index_header {
            padding: 20px 0;
            background-color: var(--white);
            position: sticky;
            top: 0;
            z-index: 1000;
            box-shadow: 0 2px 10px rgba(0,0,0,0.05);
        }

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

        .index_logo {
            display: flex;
            align-items: center;
            gap: 10px;
            font-family: var(--font-heading);
            font-weight: 700;
            font-size: 20rem;
            color: var(--text-dark);
        }

        .index_logo svg {
            width: 30px;
            height: 30px;
            fill: var(--accent-green);
        }

        .index_nav ul {
            display: flex;
            gap: 30px;
        }

        .index_nav a {
            font-weight: 500;
            font-size: 16rem;
            color: var(--text-dark);
        }
        
        .index_nav a:hover, .index_nav a.active {
            color: var(--primary-purple);
            border-bottom: 2px solid var(--primary-purple);
        }

        /* Mobile Menu Trigger (Hidden on Desktop) */
        .index_mobile-menu-btn {
            display: none;
            background: none;
            border: none;
            font-size: 1.5rem;
            cursor: pointer;
        }

        /* =========================================
           HERO SECTION
           ========================================= */
        .index_hero {
            position: relative;
            height: 600px;
            background: linear-gradient(135deg, rgba(40, 0, 100, 0.85), rgba(0, 0, 0, 0.6)),
                        url('https://images.pexels.com/photos/3183197/pexels-photo-3183197.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1');
            background-size: cover;
            background-position: center;
            display: flex;
            align-items: center;
            color: var(--white);
            margin: 20px; /* As per design inset */
            border-radius: 20px;
            overflow: hidden;
        }

        .index_hero-content {
            max-width: 600px;
            padding-left: 60px;
            position: relative;
            z-index: 2;
        }

        .index_hero h1 {
            font-family: var(--font-heading);
            font-size: 48rem;
            line-height: 1.2;
            margin-bottom: 30px;
        }

        /* Decorative 3D Shapes (CSS Only approximation) */
        .index_shape {
            position: absolute;
            filter: drop-shadow(0 10px 10px rgba(0,0,0,0.3));
        }
        
        .index_shape-1 { right: 10%; top: 20%; width: 60px; animation: float 6s infinite ease-in-out; }
        .index_shape-2 { left: 40%; bottom: 20%; width: 80px; animation: float 5s infinite ease-in-out reverse; }

        @keyframes float {
            0% { transform: translateY(0px) rotate(0deg); }
            50% { transform: translateY(-20px) rotate(10deg); }
            100% { transform: translateY(0px) rotate(0deg); }
        }

        /* =========================================
           ABOUT US
           ========================================= */
        .index_about {
            padding: var(--section-padding);
        }

        .index_about-grid {
            display: grid;
            grid-template-columns: 1fr 1.2fr;
            gap: 60px;
            align-items: center;
        }

        .index_about-text h2 {
            font-family: var(--font-heading);
            color: var(--primary-purple);
            font-size: 32rem;
            margin-bottom: 20px;
        }

        .index_about-text p {
            color: var(--text-gray);
            margin-bottom: 30px;
            font-size: 16rem;
        }

        .index_about-img-wrapper {
            position: relative;
            border-radius: var(--border-radius);
            overflow: hidden;
            box-shadow: 0 20px 40px rgba(0,0,0,0.1);
        }

        /* =========================================
           SERVICES
           ========================================= */
        .index_services {
            padding: var(--section-padding);
            background: linear-gradient(to bottom, #fff 0%, #f9f9ff 100%);
        }

        .index_services-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 30px;
        }

        .index_service-card {
            background-color: var(--card-bg);
            padding: 40px 30px;
            border-radius: 16px;
            color: var(--white);
            transition: transform 0.3s;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            min-height: 280px;
            position: relative;
            overflow: hidden;
        }

        .index_service-card:hover {
            transform: translateY(-10px);
        }

        .index_service-icon {
            width: 50px;
            height: 50px;
            margin-bottom: 20px;
            fill: var(--accent-green);
        }

        .index_service-card h3 {
            font-family: var(--font-heading);
            font-size: 24rem;
            margin-bottom: 20px;
            line-height: 1.3;
        }

        /* "Explore All" Card specific style */
        .index_service-card.explore {
            background-color: #3a0088; /* Slightly darker */
            justify-content: center;
            align-items: center;
            text-align: center;
        }

        .index_service-card.explore h3 {
            color: var(--accent-green);
            font-size: 30rem;
        }

        .index_service-card.explore .index_arrow {
            width: 40px;
            fill: var(--accent-green);
            margin-top: 10px;
            transform: rotate(-45deg);
        }

        /* =========================================
           PARTNER (ODOO)
           ========================================= */
        .index_partner {
            padding: 40px 0;
        }

        .index_partner-box {
            background-color: #111;
            border-radius: 20px;
            padding: 60px 100px;
            text-align: center;
            color: var(--white);
            position: relative;
            display: flex;
            flex-direction: column;
            align-items: center;
        }

        .index_partner-logo {
            font-family: sans-serif;
            font-weight: 800;
            font-size: 48rem;
            letter-spacing: -2px;
            margin-bottom: 20px;
            color: white;
        }
        .index_partner-logo span { color: #999; } /* simulating the odoo logo style somewhat */

        .index_partner-text {
            max-width: 700px;
            font-size: 18rem;
            color: #ccc;
            margin-top: 20px;
        }

        .index_partner-green-text {
            color: var(--accent-green);
            font-weight: 600;
            margin-bottom: 15px;
        }

        .index_slider-arrow {
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            color: var(--white);
            font-size: 32rem;
            cursor: pointer;
            user-select: none;
        }
        .index_arrow-left { left: 40px; }
        .index_arrow-right { right: 40px; }

        /* =========================================
           WHY CHOOSE US
           ========================================= */
        .index_features {
            padding: var(--section-padding);
        }

        .index_features-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            gap: 40px;
        }

        .index_feature-item h4 {
            color: var(--primary-purple);
            font-family: var(--font-heading);
            font-size: 16rem;
            margin-bottom: 15px;
            min-height: 60px; /* align titles */
        }

        .index_feature-item {
            border-left: 2px solid #eee;
            padding-left: 20px;
        }

        /* =========================================
           CTA BANNER
           ========================================= */
        .index_cta-banner {
            margin-top: 40px;
        }

        .index_cta-inner {
            background: #0a0a0a;
            border-radius: 30px;
            padding: 80px 20px;
            text-align: center;
            color: var(--white);
            position: relative;
            overflow: hidden;
        }
        
        /* Curved Background Effect using Radial Gradient */
        .index_cta-inner::before {
            content: '';
            position: absolute;
            top: -50%;
            left: 0;
            right: 0;
            height: 100%;
            background: radial-gradient(ellipse at center, rgba(255,255,255,0.05) 0%, rgba(0,0,0,0) 70%);
            pointer-events: none;
        }

        .index_cta-inner h3 {
            font-family: var(--font-heading);
            font-size: 32rem;
            margin-bottom: 10px;
        }
        
        .index_cta-inner p {
            margin-bottom: 40px;
            color: #ccc;
        }

        /* =========================================
           NEWS
           ========================================= */
        .index_news {
            padding: var(--section-padding);
            text-align: center;
        }
        
        .index_news h2 {
            text-align: left;
            margin-bottom: 30px;
            font-family: var(--font-heading);
        }

        .index_news-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 30px;
            margin-bottom: 40px;
        }

        .index_news-card {
            text-align: left;
        }

        .index_news-img {
            height: 200px;
            width: 100%;
            border-radius: 12px;
            overflow: hidden;
            margin-bottom: 20px;
        }
        
        .index_news-img img {
            width: 100%;
            height: 100%;
            transition: transform 0.3s;
        }
        
        .index_news-card:hover img {
            transform: scale(1.05);
        }

        .index_news-title {
            font-weight: 700;
            font-size: 18rem;
            margin-bottom: 10px;
            font-family: var(--font-heading);
            color: var(--text-dark);
        }

        .index_news-excerpt {
            font-size: 16rem;
            color: var(--text-gray);
            margin-bottom: 15px;
        }

        .index_btn-purple {
            background-color: var(--primary-purple);
            color: var(--white);
            border: none;
            padding: 10px 30px;
        }

        /* =========================================
           LOGOS
           ========================================= */
        .index_logos {
            padding: 40px 0;
            border-top: 1px solid #eee;
        }
        
        .index_logos-flex {
            display: flex;
            justify-content: space-around;
            align-items: center;
            flex-wrap: wrap;
            gap: 40px;
            opacity: 0.6;
            filter: grayscale(100%);
        }

        /* Simple CSS text representation for logos to avoid images where possible, or use simple imgs */
        .index_logo-item {
            font-weight: 800;
            font-size: 24rem;
            color: #000;
        }

     





        /* =========================================
           MEDIA QUERIES (Responsive)
           ========================================= */
        @media (max-width: 992px) {
            .index_hero {
                height: auto;
                padding: 60px 0;
                text-align: center;
            }
            .index_hero-content {
                padding-left: 0;
                margin: 0 auto;
            }
            .index_about-grid {
                grid-template-columns: 1fr;
            }
            .index_footer-grid {
                grid-template-columns: 1fr 1fr;
            }
            .index_nav {
                display: none; /* Simplify for this exercise */
            }
            .index_mobile-menu-btn {
                display: block;
            }
        }

        @media (max-width: 600px) {
            .index_header-inner { flex-wrap: wrap; }
            .index_hero h1 { font-size: 2rem; }
            .index_section-title { font-size: 2rem; }
            .index_partner-box { padding: 40px 20px; }
            .index_arrow-left, .index_arrow-right { display: none; } /* Hide arrows on small mobile */
            .index_footer-grid { grid-template-columns: 1fr; text-align: center; }
        }



        
      

        .index_logos-gallery-container {
            position: relative;
            overflow: hidden;
 
         
                padding: 40px 0;
    border-top: 1px solid #eee;
        }

        .index_logos-gallery-wrapper {
            overflow-x: auto;
            overflow-y: hidden;
            scroll-behavior: smooth;
            scrollbar-width: none;
            -ms-overflow-style: none;
        }

        .index_logos-gallery-wrapper::-webkit-scrollbar {
            display: none;
        }

        .index_logos-gallery-track {
            display: flex;
            gap: 60px;
            transition: transform 0.3s ease-out;
        }

        .index_logos-gallery-item {
            flex-shrink: 0;
            height: 50px;
            overflow: hidden;
            position: relative;
            opacity: 0;
            animation: fadeIn 0.8s ease-in-out forwards;
        }

		@media screen and (max-width: 768px){
			.index_logos-gallery-item{
				height: 300rem;
			}
		}


        .index_logos-gallery-item img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            display: block;
            transition: transform 0.5s ease;
            filter: grayscale(1);
        }

        .index_logos-gallery-item:hover img {
            
            filter: grayscale(0);
        }

        @keyframes fadeIn {
            from {
                opacity: 0;
                transform: translateY(20px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }


  .index_logos-dots {
            display: flex;
            justify-content: center;
            gap: 8px;
            flex-wrap: wrap;
            max-width: 600px;
            margin: 30px auto 0;
        }

        .index_logos-dot {
            width: 8px;
            height: 8px;
            border-radius: 50%;
            background: rgba(255, 255, 255, 0.3);
            cursor: pointer;
            transition: all 0.3s ease;
        }

        .index_logos-dot.active {
            background: #ffffff;
            width: 24px;
            border-radius: 4px;
        }

        .index_logos-dot:hover {
            background: rgba(255, 255, 255, 0.6);
        }










/* --- Стили для Футера --- */
.site-footer {
     background-color: #4700ad;
    color: #ffffff;
    padding: 60px 60px 60px 60px;
    margin-top: auto;
    position: relative;
    height: 470px;
        overflow: hidden;
}

@media screen and (max-width: 768px){
    .site-footer {
            padding: 60px 20rem 60px 20rem;
            height: auto;
    }
}



.footer-container {
 
}

/* --- Основная сетка футера --- */
.footer-main {
    display: flex;
    flex-wrap: wrap; /* Позволяет колонкам переноситься на новую строку на мал. экранах */
    justify-content: space-between; /* Распределяет колонки */
    gap: 40px; /* Пространство между колонками */
    padding-bottom: 40px;
        max-width: 1400rem;
    margin: 0 auto;
    position: relative;
}


.footer-main:after{
    background-image: url(/media/assets/img/stillfundregion-cropped.svg);
    background-repeat: no-repeat;
    background-position: top right;
    background-size: 100%;
    content: '';
    position: absolute;
    right: -87px;
    top: -120px;
    width: 750rem;
    height: 731rem;
    transform: rotate(180deg);
    filter: invert(1);
    width: 600rem;
    height: 600rem;
}

@media screen and (max-width: 768px){
    .footer-main:after{
           position: absolute;
        left: -103px;
        bottom: -83px;
        width: 359rem;
        height: 368rem;
        transform: rotate(184deg);
        top: auto;
        right: auto;
        background-size: auto;
    
    }
}

@media screen and (max-width: 768px){
    .footer-main{
        padding-bottom: 0;
    }
}

.footer-column {
    flex: 1; /* Позволяет колонкам расти */
    min-width: 200px; /* Минимальная ширина колонки */
}

/* Стили для заголовков колонок (CONTACT, MENU) */
.footer-column h3 {
    color: #00f0b0;
    text-transform: uppercase;
    font-size: 24rem;
    margin-bottom: 75px;
}

@media screen and (max-width: 768px){
  .footer-column h3 {
    margin-bottom: 25px;
  }  
}

/* --- Колонка "Contact" --- */
.footer-contact p {
 margin-bottom: 12px;
    font-size: 18px;
    line-height: 1.6;
    color: #fff;
    font-family: 'font3';
}

.footer-contact a {
    color: #ffffff;
    text-decoration: underline; /* Подчеркивание для email, как на скриншоте */
}

/* --- Колонка "Menu" --- */
.footer-menu-grid {
    display: flex;
    gap: 40px; /* Пространство между двумя списками меню */
}

.footer-menu-grid ul {
    list-style: none; /* Убираем маркеры списка */
        margin-right: 100px;
        font-family: 'font3';
}

@media screen and (max-width: 768px){
    .footer-menu-grid ul {
    list-style: none;
    margin-right: 0;
    font-family: 'font3';
    width: 50%;
}
}

.footer-menu-grid li {
    margin-bottom: 12px;
}

.footer-menu-grid a {
    color: #ffffff;
    text-decoration: none; /* Убираем подчеркивание у ссылок меню */
    font-size: 19px;
}

.footer-menu-grid a:hover {
    text-decoration: underline; /* Добавляем подчеркивание при наведении */
}

/* --- Колонка для графики/логотипа --- */
.footer-graphics {
    flex-basis: 300px; /* Задаем базовую ширину */
    flex-grow: 0; /* Запрещаем ей расти */
    display: flex;
    justify-content: flex-end; /* Прижимаем вправо */
    align-items: flex-end; /* Прижимаем вниз */
        position: relative;
}

@media screen and (max-width: 768px){
    .footer-graphics{
           justify-content: flex-start; 
           margin-bottom: 50px;
    }
}

/* Это стилизованный блок вместо логотипа "Nomad" */
.footer-logo-placeholder {
background-image: url(/media/assets/img/logo_foot-cropped.svg);
    width: 200rem;
    height: 200rem;
    background-size: contain;
    background-repeat: no-repeat;
    position: absolute;
    top: 60px;
    right: 110px;
}

@media screen and (max-width: 768px){
   .footer-logo-placeholder {
        position: relative;
        width: 150rem;
        height: 150rem;
        top: 29rem;
        right: auto;
   } 
}

/* * Примечание: Декоративные "кирпичики" (один из которых зеленый) 
    * обычно реализуются через SVG или фоновое изображение (background-image) 
    * для .footer-graphics, так как их сложно воссоздать чистым CSS.
    * Для простоты я включил только логотип.
*/

/* --- Нижняя строка с копирайтом --- */
.footer-bottom {
    padding-top: 30px;
}

.footer-bottom p {
    font-size: 15px;
    color: #fff;
}


















/* Модальные окна */
.modal {
    display: none;
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.6);
}

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

.modal-content {
    background-color: #4b00b5;
    padding: 40px;
    border-radius: 12px;
    max-width: 500px;
    width: 90%;
    position: relative;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
}

.modal-close {
   position: absolute;
    right: 30px;
    top: 9px;
    font-size: 55px;
    cursor: pointer;
    color: #fff;
    line-height: 1;
}

.modal-header {
    text-align: center;
    margin-bottom: 20rem;
    font-size: 30rem;
}

.modal-header h2{
    font-size: 30rem;
}

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

.form-group label {
        color: #fff;
    margin-bottom: 10rem;
    display: block;
}

.form-control {
      width: 100%;
    padding: 12px 16px;
    border: 2px solid #e0e0e0;
    border-radius: 8px;
    font-size: 15px;
}

.submit-btn {
       width: 100%;
    padding: 15px;
    background: #00ff85;
    color: #170036;
    border: none;
    border-radius: 8px;
    font-size: 16px;
    cursor: pointer;
}

.spinner {
    display: inline-block;
    width: 20px;
    height: 20px;
    border: 3px solid rgba(255,255,255,.3);
    border-radius: 50%;
    border-top-color: white;
    animation: spin 1s ease-in-out infinite;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}






    /* =========================================
           BLOG HERO SECTION
           ========================================= */

        .blog_container {
            margin: 0 auto;
            max-width: 1400rem;
        }

        .blog_hero_blog {
            position: relative;
            height: 550rem; /* Чуть меньше, чем на главной */
            margin: 120px auto 20px;
            max-width: 1300px;
            border-radius: 20px;
            overflow: hidden;
            display: flex;
            align-items: center;
            justify-content: center;
            text-align: center;
            background: linear-gradient(135deg, rgba(42, 0, 102, 0.9), rgba(63, 0, 153, 0.8)),
                        url('https://cdn.pixabay.com/photo/2016/03/26/13/09/workspace-1280538_1280.jpg');
            background-size: cover;
            background-position: center;
            max-width: 1400rem;
        }

        .blog_hero_content { position: relative; z-index: 2; padding: 0 20px; }
        .blog_hero_blog h1 {
            font-family: var(--font-heading);
            font-size: 52rem;
            color: var(--color-white);
            margin-bottom: 10px;
        }
        .blog_hero_blog p {
            color: rgba(255,255,255,0.8);
            font-size: 16rem;
            max-width: 600px;
            margin: 0 auto;
        }

        .blog_hero_blog .blog_deco-star:nth-child(1) { top: 15%; left: 10%; }
        .blog_hero_blog .blog_deco-star:nth-child(2) { bottom: 15%; right: 10%; animation-delay: 1s; }

        /* =========================================
           FILTERS & SEARCH
           ========================================= */
        .blog_filters_section {
            padding: 40px 0;
            border-bottom: 1px solid #eee;
        }
        .blog_filters_wrapper {
            display: flex;
            justify-content: space-between;
            align-items: center;
            flex-wrap: wrap;
            gap: 20px;
        }
        .blog_filter_tags {
            display: flex;
            gap: 10px;
            flex-wrap: wrap;
        }
        .blog_filter_btn {
            padding: 8px 20px;
            border-radius: 50px;
            border: 1px solid #eee;
            background: #fff;
            color: var(--color-text-light);
            font-size: 16rem;
            font-weight: 600;
            cursor: pointer;
            transition: 0.3s;
        }
        .blog_filter_btn:hover, .blog_filter_btn.active {
            background: var(--color-primary);
            color: #fff;
            border-color: var(--color-primary);
        }
        
        .blog_search_bar {
            position: relative;
            width: 300px;
        }
        .blog_search_input {
            width: 100%;
            padding: 10px 15px;
            padding-right: 40px;
            border: 1px solid #ddd;
            border-radius: 50px;
            outline: none;
            font-family: var(--font-body);
        }
        .blog_search_icon {
            position: absolute;
            right: 15px;
            top: 50%;
            transform: translateY(-50%);
            width: 18px;
            height: 18px;
            fill: var(--color-text-light);
            cursor: pointer;
        }

        /* =========================================
           BLOG GRID
           ========================================= */
        .blog_blog_section { padding: var(--section-spacing) 0; }
        
        .blog_blog_grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
            gap: 40px;
        }

        .blog_article_card {
            display: flex;
            flex-direction: column;
            background: #fff;
            border-radius: 16px;
            overflow: hidden;
            transition: transform 0.3s, box-shadow 0.3s;
            border: 1px solid #f0f0f0;
            height: 100%;
        }

        .blog_article_card:hover {
            transform: translateY(-5px);
            box-shadow: 0 15px 30px rgba(0,0,0,0.08);
        }

        .blog_card_thumb {
            height: 240px;
            overflow: hidden;
            position: relative;
        }
        
        .blog_card_thumb img {
            width: 100%;
            height: 100%;
            transition: transform 0.5s ease;
        }

        .blog_article_card:hover .blog_card_thumb img {
            transform: scale(1.05);
        }

        .blog_card_body {
            padding: 25px;
            display: flex;
            flex-direction: column;
            flex-grow: 1;
        }

        .blog_category_tag {
            color: var(--color-accent);
            font-weight: 700;
            font-size: 14rem;
            text-transform: uppercase;
            margin-bottom: 10px;
            letter-spacing: 1px;
        }

        .blog_card_title {
            font-family: var(--font-heading);
            font-size: 20rem;
            font-weight: 600;
            color: var(--color-text-main);
            margin-bottom: 15px;
            line-height: 1.3;
        }
        
        .blog_card_title a:hover { color: var(--color-primary); }

        .blog_card_excerpt {
            font-size: 16rem;
            color: var(--color-text-light);
            margin-bottom: 20px;
            flex-grow: 1;
        }

        .blog_card_footer {
            display: flex;
            align-items: center;
            justify-content: space-between;
            border-top: 1px solid #eee;
            padding-top: 15px;
            font-size: 16rem;
            color: #888;
        }

        .blog_read_more {
            color: var(--color-primary);
            font-weight: 700;
            display: inline-flex;
            align-items: center;
            gap: 5px;
        }
        .blog_read_more:hover { gap: 8px; } /* Анимация стрелки */

        /* =========================================
           PAGINATION
           ========================================= */
        .blog_pagination {
            display: flex;
            justify-content: center;
            gap: 10px;
            margin-top: 60px;
        }
        .blog_page_link {
            width: 40px; height: 40px;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 50%;
            font-weight: 600;
            color: var(--color-text-main);
            transition: 0.3s;
            cursor: pointer;
        }
        .blog_page_link:hover, .blog_page_link.active {
            background-color: var(--color-primary);
            color: #fff;
        }

        /* =========================================
           NEWSLETTER CTA
           ========================================= */
        .blog_newsletter {
            margin: 40px auto 80px auto;
        }
        .blog_newsletter_box {
            background-color: #0a0a0a;
            border-radius: 20px;
            padding: 60px 40px;
            text-align: center;
            position: relative;
            overflow: hidden;
            color: #fff;
        }
        .blog_newsletter_box::before {
            content: '';
            position: absolute;
            top: -50%; left: 0; right: 0; height: 100%;
            background: radial-gradient(ellipse at center, rgba(255,255,255,0.1) 0%, rgba(0,0,0,0) 70%);
            pointer-events: none;
        }
        .blog_newsletter_box h3 {
            font-family: var(--font-heading);
            font-size: 32rem;
            margin-bottom: 15px;
        }
        .blog_newsletter_box p {
            color: #ccc;
            margin-bottom: 30px;
        }
        
        .blog_form_group {
            display: flex;
            max-width: 500px;
            margin: 0 auto;
            gap: 10px;
        }
        .blog_form_input {
            flex: 1;
            padding: 15px 20px;
            border-radius: 8px;
            border: none;
            outline: none;
            font-family: var(--font-body);
        }
        .blog_btn-subscribe {
            background-color: var(--color-accent);
            color: #000;
            border: none;
            padding: 15px 30px;
            border-radius: 8px;
            font-weight: 700;
            cursor: pointer;
            transition: 0.3s;
        }
        .blog_btn-subscribe:hover { background-color: #00cc6a; }






          /* =========================================
           ARTICLE HEADER
           ========================================= */

        .blogfull_container { max-width: var(--container-width); margin: 0 auto; padding: 0 20px; }
        .blogfull_article_header { padding: 160px 0 40px 0; text-align: left; }
        
        .blogfull_breadcrumbs { font-size: 16rem; color: var(--color-text-light); margin-bottom: 20px; }
        .blogfull_breadcrumbs a:hover { color: var(--color-primary); text-decoration: underline; }

        .blogfull_article_tags { display: flex; gap: 10px; margin-bottom: 15px; }
        .blogfull_tag {
            background: rgba(63, 0, 153, 0.1); color: var(--color-primary);
            font-size: 16rem; font-weight: 700; padding: 4px 12px; border-radius: 4px; text-transform: uppercase;
        }

        .blogfull_article_title { font-family: var(--font-heading); font-size: 34rem; line-height: 1.2; margin-bottom: 25px; color: var(--color-text-main); }

        .blogfull_meta_info {     border-bottom: 1px solid #ccc; display: flex; align-items: center; gap: 15px; font-size: 16rem; 
            color: var(--color-text-light); padding-bottom: 30px; }
        .blogfull_author_mini { display: flex; align-items: center; gap: 10px; font-weight: 600; color: var(--color-text-main); }
        .blogfull_author_avatar { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; }

        /* =========================================
           MAIN LAYOUT (Content + Sidebar)
           ========================================= */
        .blogfull_content_wrapper { display: grid; grid-template-columns: 1fr; gap: 60px; margin-bottom: 80px; }

        /* Left Column: Article Content */
        .blogfull_featured_image {
            width: 100%; height: 450px; border-radius: var(--border-radius); overflow: hidden; margin-bottom: 40px; position: relative;
        }
        .blogfull_featured_image img {
            width: 100%;
        }
        .blogfull_article_body { font-size: 18rem; line-height: 1.8; color: #333; }
        
        .blogfull_article_body h2 { font-family: var(--font-heading); font-size: 30rem; color: var(--color-primary); margin: 40px 0 20px 0; }
        .blogfull_article_body p { margin-bottom: 20px; }
        
        .blogfull_blockquote {
            border-left: 4px solid var(--color-accent);
            padding: 20px 30px;
            background: #f8f9fa;
            font-style: italic;
            font-size: 1.2rem;
            color: var(--color-text-main);
            margin: 40px 0;
            border-radius: 0 8px 8px 0;
        }
        .blogfull_blockquote cite { display: block; font-size: 16rem; font-style: normal; color: var(--color-text-light); margin-top: 10px; font-weight: 600; }

        .blogfull_article_list { margin-bottom: 20px; padding-left: 20px; }
        .blogfull_article_list li { margin-bottom: 10px; list-style-type: disc; }

        /* Share Buttons */
        .blogfull_share_section {  padding-top: 30px; border-top: 1px solid var(--color-border); }
        .blogfull_share_label { font-weight: 700; font-family: var(--font-heading); margin-bottom: 15px; display: block; }
        .blogfull_share_icons { display: flex; gap: 15px; }
        .blogfull_share_btn {
            width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--color-border);
            display: flex; align-items: center; justify-content: center; color: var(--color-text-main);
        }
        .blogfull_share_btn:hover { background: var(--color-primary); color: #fff; border-color: var(--color-primary); }


















       
    /* =========================================
           HERO SECTION
           ========================================= */

  .contact_container { max-width: var(--container-width); margin: 0 auto; padding: 0 20px; }

        .contact_hero_contact {
            position: relative;
            height: 550rem;
            background: linear-gradient(135deg, rgba(42, 0, 102, 0.9), rgba(63, 0, 153, 0.8)),
                        url('https://cdn.pixabay.com/photo/2017/12/02/14/38/contact-us-2993000_1280.jpg');
            background-size: cover;
            background-position: center;
            display: flex;
            align-items: center;
            justify-content: center;
            text-align: center;
            color: var(--color-white);
            border-radius: 20px 20px; /* Curve at bottom only */
            margin-bottom: 60px;
             max-width: var(--container-width); margin: 140px auto 60px;
        }

        .contact_hero_content h1 {
            font-family: var(--font-heading); font-size: 48rem; margin-bottom: 10px;
        }
        .contact_hero_content p { font-size: 18rem; opacity: 0.9; }

        /* =========================================
           CONTACT GRID
           ========================================= */
        .contact_contact_grid {
            display: grid;
            grid-template-columns: 1fr 1.5fr; /* Info takes less space than Form */
            gap: 50px;
            margin-bottom: var(--section-spacing);
        }

        /* --- Left Column: Info & Map --- */
        .contact_info_card {
            background: #fff;
            padding: 0;
            display: flex;
            flex-direction: column;
            gap: 30px;
        }

        .contact_contact_item {
            display: flex;
            align-items: flex-start;
            gap: 15px;
        }

        .contact_icon_box {
            width: 50px; height: 50px;
            background: rgba(0, 255, 133, 0.1);
            border-radius: 12px;
            display: flex; align-items: center; justify-content: center;
            flex-shrink: 0;
            color: var(--color-primary);
        }
        .contact_icon_box svg { width: 24px; height: 24px; fill: currentColor; }

        .contact_contact_text h4 { font-family: var(--font-heading); font-size: 18rem; color: var(--color-text-main); margin-bottom: 5px; }
        .contact_contact_text p { color: var(--color-text-light); font-size: 16rem; line-height: 1.5; }
        .contact_contact_text a { color: var(--color-primary); font-weight: 600; }

        /* Social Media Section */
        .contact_social_section { margin-top: 20px; }
        .contact_social_section h4 { font-family: var(--font-heading); margin-bottom: 15px; }
        .contact_social_icons { display: flex; gap: 15px; }
        .contact_social_link {
            width: 40px; height: 40px; border-radius: 50%;
            background: #f0f0f0; color: var(--color-text-main);
            display: flex; align-items: center; justify-content: center;
            transition: 0.3s;
        }
        .contact_social_link:hover { background: var(--color-primary); color: #fff; transform: translateY(-3px); }
        .contact_social_link svg { width: 18px; height: 18px; fill: currentColor; }

        /* Map */
        .contact_map_wrapper {
            margin-top: 30px;
            width: 100%;
            height: 250px;
            border-radius: var(--border-radius);
            overflow: hidden;
            box-shadow: 0 10px 30px rgba(0,0,0,0.1);
            position: relative;
        }
        .contact_map_wrapper iframe { width: 100%; height: 100%; border: 0; }

        /* --- Right Column: Form --- */
        .contact_form_card {
            background: var(--color-white);
            padding: 40px;
            border-radius: var(--border-radius);
            box-shadow: 0 15px 40px rgba(63, 0, 153, 0.08);
            border: 1px solid var(--color-border);
            position: relative;
        }

        .contact_form_header { margin-bottom: 30px; }
        .contact_form_header h2 { font-family: var(--font-heading); color: var(--color-primary); font-size: 32rem; margin-bottom: 10px; }
        .contact_form_header p { color: var(--color-text-light); }

        .contact_form_group { margin-bottom: 20px; }
        .contact_form_label { display: block; margin-bottom: 8px; font-weight: 600; font-size: 16rem; color: var(--color-text-main); }
        
        .contact_form_input, .contact_form_textarea {
            width: 100%;
            padding: 12px 15px;
            border: 1px solid #ddd;
            border-radius: 8px;
            font-family: var(--font-body);
            font-size: 16rem;
            transition: 0.3s;
            background: #fafafa;
        }
        
        .contact_form_input:focus, .contact_form_textarea:focus {
            outline: none;
            border-color: var(--color-primary);
            background: #fff;
            box-shadow: 0 0 0 3px rgba(63, 0, 153, 0.1);
        }

        .contact_form_textarea { resize: vertical; min-height: 150px; }

        /* Form Row for Name/Email */
        .contact_form_row { display: flex; gap: 20px; }
        .contact_form_row .contact_form_group { flex: 1; }















        /* =========================================
           UTILITY CLASSES
           ========================================= */
        .price_container { max-width: var(--container-width); margin: 0 auto; padding: 0 20px; }
        
        .price_btn {
            display: inline-block; padding: 12px 24px; border-radius: 6px;
            font-weight: 600; font-family: var(--font-heading); cursor: pointer; transition: 0.3s;
            text-align: center; border: none; width: 100%;
        }

        .price_btn-outline { border: 1px solid var(--color-primary); color: var(--color-primary); background: transparent; width: auto; }
        .price_btn-outline:hover { background: var(--color-primary); color: var(--color-white); }

        .price_btn-primary { background-color: var(--color-accent); color: #000; }
        .price_btn-primary:hover { background-color: #00cc6a; transform: translateY(-2px); }

        .price_btn-purple { background-color: var(--color-primary); color: #fff; }
        .price_btn-purple:hover { background-color: var(--color-primary-dark); }

        .price_section_title { text-align: center; font-family: var(--font-heading); font-size: 40rem; margin-bottom: 10px;     color: #3f0099;}
        .price_section_desc { text-align: center; color: var(--color-text-light); max-width: 700px; margin: 0 auto 50px auto; }

        /* 3D Star Decoration */
        .price_deco-star {
            position: absolute; width: 40px; height: 40px; background: var(--color-accent);
            clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
            box-shadow: 0 0 10px rgba(0,255,133, 0.5); z-index: 2; animation: float 6s ease-in-out infinite;
        }
        @keyframes float { 0% { transform: translateY(0) rotate(0deg); } 50% { transform: translateY(-10px) rotate(10deg); } 100% { transform: translateY(0) rotate(0deg); } }








 /* =========================================
           HERO SECTION
           ========================================= */
        .price_hero_pricing {
            position: relative; height: 550rem;
            background: linear-gradient(135deg, rgba(42, 0, 102, 0.9), rgba(63, 0, 153, 0.8)),
                        url('https://cdn.pixabay.com/photo/2016/10/09/08/32/digital-marketing-1725340_1280.jpg');
            background-size: cover; background-position: center;
            display: flex; align-items: center; justify-content: center; text-align: center;
            color: var(--color-white); border-radius: 0 0 20px 20px; margin-bottom: 60px;
            border-radius: 20px 20px;
    margin-bottom: 60px;
    max-width: var(--container-width);
    margin: 140px auto 60px;
        }
        .price_hero_content h1 { font-family: var(--font-heading); font-size: 48rem; margin-bottom: 15px; }
        .price_hero_content p { font-size: 18rem; opacity: 0.9; max-width: 600px; margin: 0 auto; }

        /* =========================================
           OPTION 1: CARDS LAYOUT (Marketing)
           ========================================= */
        .price_pricing_section { padding-bottom: var(--section-spacing); }
        
        .price_cards_grid {
            display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 30px; align-items: center;
        }

        .price_price_card {
            background: #fff; border: 1px solid var(--color-border); border-radius: 16px;
            padding: 40px 30px; position: relative; transition: transform 0.3s, box-shadow 0.3s;
        }

        .price_price_card:hover { transform: translateY(-10px); box-shadow: 0 20px 40px rgba(0,0,0,0.08); }

        /* Highlighted Card (Best Value) */
        .price_price_card.featured {
            border: 2px solid var(--color-primary);
            box-shadow: 0 10px 30px rgba(63, 0, 153, 0.15);
            transform: scale(1.05); z-index: 2;
        }
        .price_price_card.featured:hover { transform: scale(1.05) translateY(-5px); }
        
        .price_badge {
            position: absolute; top: -15px; left: 50%; transform: translateX(-50%);
            background: var(--color-primary); color: #fff; padding: 5px 15px;
            border-radius: 20px; font-size: 14rem; font-weight: 700; text-transform: uppercase;
        }

        .price_plan_name { font-size: 18rem; font-weight: 700; color: var(--color-text-light); margin-bottom: 10px; }
        .price_price { font-size: 48rem; font-weight: 700; color: var(--color-text-main); font-family: var(--font-heading); line-height: 1; margin-bottom: 5px; }
        .price_price span { font-size: 16rem; font-weight: 400; color: var(--color-text-light); }
        .price_plan_desc { color: var(--color-text-light); font-size: 16rem; margin-bottom: 30px; border-bottom: 1px solid #eee; padding-bottom: 20px; }

        .price_features_list { margin-bottom: 30px; }
        .price_features_list li { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; font-size: 16rem; }
        .price_check_icon { width: 20px; height: 20px; fill: var(--color-accent); flex-shrink: 0; }
        .price_cross_icon { width: 20px; height: 20px; fill: #ddd; flex-shrink: 0; }

        /* =========================================
           OPTION 2: TABLE LAYOUT (Web Development)
           ========================================= */
        .price_table_section { padding: var(--section-spacing) 0; background-color: var(--color-bg-light); }
        
        .price_table_wrapper { overflow-x: auto; background: #fff; border-radius: 16px; box-shadow: 0 5px 20px rgba(0,0,0,0.05); padding: 20px; }
        
        .price_pricing_table { width: 100%; border-collapse: collapse; min-width: 700px; }
        
        .price_pricing_table th {
            text-align: center; padding: 25px 15px; font-family: var(--font-heading);
            color: var(--color-primary); font-size: 18rem; border-bottom: 2px solid #eee;
        }
        .price_pricing_table th:first-child { text-align: left; width: 30%; color: var(--color-text-main); }
        
        .price_pricing_table td {
            padding: 20px 15px; border-bottom: 1px solid #eee; text-align: center; color: var(--color-text-light);
        }
        .price_pricing_table td:first-child { text-align: left; font-weight: 600; color: var(--color-text-main); }
        
        .price_pricing_table tr:last-child td { border-bottom: none; }
        .price_pricing_table tr:hover td { background-color: #fafafa; }

        .price_price_header { display: block; font-size: 24rem; font-weight: 700; color: var(--color-text-main); margin-top: 5px; }

        /* =========================================
           OPTION 3: CATALOG LIST (Services Menu)
           ========================================= */
        .price_catalog_section { padding: var(--section-spacing) 0; }
        
        .price_catalog_grid {
            display: grid; grid-template-columns: repeat(auto-fit, minmax(400px, 1fr)); gap: 40px;
        }

        .price_service_category h3 {
            font-family: var(--font-heading); color: var(--color-primary);
            border-bottom: 2px solid var(--color-accent); padding-bottom: 10px;
            margin-bottom: 20px; display: inline-block;
        }

        .price_service_row {
            display: flex; justify-content: space-between; align-items: flex-start;
            margin-bottom: 20px; border-bottom: 1px dashed #ddd; padding-bottom: 10px;
        }
        .price_service_info h4 { font-weight: 700; color: var(--color-text-main); margin-bottom: 5px; }
        .price_service_info p { font-size: 14rem; color: #777; }
        .price_service_price { font-weight: 700; color: var(--color-primary); font-family: var(--font-heading); white-space: nowrap; margin-left: 20px; font-size: 18rem;}

        /* =========================================
           CTA Banner
           ========================================= */
        .price_cta_simple { text-align: center; padding: 60px 0; background: #fff; border-top: 1px solid #eee; }
        .price_cta_simple h2 { font-family: var(--font-heading); font-size: 32rem; margin-bottom: 20px; color: #3f0099;}

        /* Responsive */
        @media (max-width: 992px) {
            .price_price_card.featured { transform: scale(1); z-index: 1; border-width: 1px; }
            .price_cards_grid { gap: 20px; }
        }
        @media (max-width: 768px) {
            .price_nav_menu { display: none; }
            .price_catalog_grid { grid-template-columns: 1fr; }
            .price_hero_pricing h1 { font-size: 36rem; }
        }



















          /* =========================================
           HERO SECTION
           ========================================= */


        /* =========================================
           UTILITY CLASSES
           ========================================= */
        .faq_container { max-width: var(--container-width); margin: 0 auto; padding: 0 20px; }
        
        .faq_btn {
            display: inline-block; padding: 12px 24px; border-radius: 6px;
            font-weight: 600; font-family: var(--font-heading); cursor: pointer; transition: 0.3s;
            text-align: center; border: none;
        }

        .faq_btn-outline { border: 1px solid var(--color-primary); color: var(--color-primary); background: transparent; }
        .faq_btn-outline:hover { background: var(--color-primary); color: var(--color-white); }

        /* 3D Star Decoration */
        .faq_deco-star {
            position: absolute; width: 40px; height: 40px; background: var(--color-accent);
            clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
            box-shadow: 0 0 10px rgba(0,255,133, 0.5); z-index: 2; animation: float 6s ease-in-out infinite;
        }
        @keyframes float { 0% { transform: translateY(0) rotate(0deg); } 50% { transform: translateY(-10px) rotate(10deg); } 100% { transform: translateY(0) rotate(0deg); } }


        .faq_hero_faq {
            position: relative; height: 550rem;
            background: linear-gradient(135deg, rgba(42, 0, 102, 0.9), rgba(63, 0, 153, 0.8)),
                        url('https://cdn.pixabay.com/photo/2021/03/13/04/11/question-mark-6091016_960_720.jpg');
            background-size: cover; background-position: center;
            display: flex; align-items: center; justify-content: center; text-align: center;
            color: var(--color-white); border-radius: 0 0 20px 20px; margin-bottom: 60px;
                border-radius: 20px 20px;
    margin-bottom: 60px;
    max-width: var(--container-width);
    margin: 140px auto 60px;
        }
        .faq_hero_content h1 { font-family: var(--font-heading); font-size: 48rem; margin-bottom: 15px; }
        .faq_hero_content p { font-size: 18rem; opacity: 0.9; max-width: 600px; margin: 0 auto; }

        /* =========================================
           FAQ CONTENT
           ========================================= */
        .faq_faq_section { padding-bottom: var(--section-spacing); }
        
        .faq_faq_layout {
            display: grid; grid-template-columns: 1fr 2.5fr; gap: 50px;
        }

        /* Sidebar (Filters) */
        .faq_faq_sidebar { position: sticky; top: 100px; height: fit-content; }
        .faq_faq_nav { background: #fff; border-radius: 12px; padding: 20px; border: 1px solid var(--color-border); border: 1px solid #e1e1e1;}
        .faq_faq_nav h3 {     font-family: var(--font-heading);
    margin-bottom: 15px;
    font-size: 18rem;
    padding-bottom: 10px;
    border-bottom: 1px solid #eee;
    color: #552895;
    font-family: 'font1';}
        .faq_faq_nav ul li { margin-bottom: 10px; }
        .faq_faq_nav a {
            display: block; padding: 10px 15px; border-radius: 8px; font-weight: 500; color: var(--color-text-light);
            transition: all 0.2s;
        }
        .faq_faq_nav a:hover, .faq_faq_nav a.active { background: rgba(63, 0, 153, 0.05); color: var(--color-primary); font-weight: 600; }

        /* Main FAQ List */
        .faq_faq_list { display: flex; flex-direction: column; gap: 20px; }
        .faq_category_title { font-family: var(--font-heading); color: var(--color-primary); margin: 30px 0 15px 0; font-size: 24rem; }
        .faq_category_title:first-child { margin-top: 0; }

        /* FAQ Item (Accordion) */
        .faq_faq_item {
            background: #fff; border: 1px solid var(--color-border); border-radius: 12px;
            overflow: hidden; transition: box-shadow 0.3s ease;margin-bottom: 10px; border: 1px solid #e1e1e1;
        }
        .faq_faq_item:hover { box-shadow: 0 5px 15px rgba(0,0,0,0.03); }
        .faq_faq_item.active { border-color: var(--color-primary); box-shadow: 0 5px 20px rgba(63, 0, 153, 0.1); }

        /* Question Button */
        .faq_faq_question {
            width: 100%; text-align: left; padding: 20px 25px; background: none; border: none;
            display: flex; justify-content: space-between; align-items: center; cursor: pointer;
            font-family: var(--font-heading); font-weight: 600; font-size: 16rem; color: var(--color-text-main);
            transition: color 0.3s;
        }
        .faq_faq_item.active .faq_faq_question { color: var(--color-primary); }

        /* Icon Animation */
        .faq_faq_icon {
            width: 24px; height: 24px; position: relative; flex-shrink: 0; margin-left: 15px;
        }
        .faq_faq_icon::before, .faq_faq_icon::after {
            content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
            background-color: var(--color-primary); transition: transform 0.3s ease; border-radius: 2px;
        }
        .faq_faq_icon::before { width: 14px; height: 2px; } /* Horizontal */
        .faq_faq_icon::after { width: 2px; height: 14px; } /* Vertical */

        .faq_faq_item.active .faq_faq_icon::after { transform: translate(-50%, -50%) rotate(90deg); } /* Turns into minus */
        /* Alternatively to make it minus: rotate the whole icon 45deg or hide the vertical line */
        
        /* Answer Content */
        .faq_faq_answer {
            max-height: 0; overflow: hidden; transition: max-height 0.3s ease-out;
            background-color: #fafafa;
        }
        .faq_answer_content { padding: 10px 25px 25px 25px; font-size: 16rem; color: var(--color-text-light); line-height: 1.7; }
        
        /* Helper link in text */
        .faq_answer_content a { color: var(--color-primary); text-decoration: underline; }

        /* CTA Box */
        .faq_faq_cta {
            margin-top: 60px; background: #0a0a0a; color: #fff; padding: 40px; border-radius: 16px;
            text-align: center; position: relative; overflow: hidden;
        }
        .faq_faq_cta::before {
             content: ''; position: absolute; top: -50%; left: 0; right: 0; height: 100%; background: radial-gradient(ellipse at center, rgba(255,255,255,0.1) 0%, rgba(0,0,0,0) 70%); pointer-events: none;
        }

        /* Responsive */
        @media (max-width: 992px) {
            .faq_faq_layout { grid-template-columns: 1fr; }
            .faq_faq_sidebar { display: none; /* Simplify for mobile, or make horizontal scroll */ }
        }
        @media (max-width: 768px) {
            .faq_nav_menu { display: none; }
            .faq_hero_faq h1 { font-size: 32rem; }
        }