/* cyrillic-ext */
@font-face {
  font-family: 'Roboto Flex';
  font-style: normal;
  font-weight: 100 1000;
  font-stretch: 75% 100%;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/robotoflex/v30/NaNeepOXO_NexZs0b5QrzlOHb8wCikXpYqmZsWI-__OGbt8jZktqc2V3Zs0KvDLdBP8SBZtOs2IifRuUZQMsPJtUsR4DEK6cULNeUx9XgTnH37Ha_FIAp4Fm0PP1hw45DntW2x0wZGzhPmr1YNMYKYn9_1IQXGwJAiUJVUMdN5YUW4O8HtSoXjC79QRyaLshNDUf9-wmF9lp.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Roboto Flex';
  font-style: normal;
  font-weight: 100 1000;
  font-stretch: 75% 100%;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/robotoflex/v30/NaNeepOXO_NexZs0b5QrzlOHb8wCikXpYqmZsWI-__OGbt8jZktqc2V3Zs0KvDLdBP8SBZtOs2IifRuUZQMsPJtUsR4DEK6cULNeUx9XgTnH37Ha_FIAp4Fm0PP1hw45DntW2x0wZGzhPmr1YNMYKYn9_1IQXGwJAiUJVUMdN5YUW4O8HtSoXjC79QRyaLshNDUf9-UmF9lp.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek */
@font-face {
  font-family: 'Roboto Flex';
  font-style: normal;
  font-weight: 100 1000;
  font-stretch: 75% 100%;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/robotoflex/v30/NaNeepOXO_NexZs0b5QrzlOHb8wCikXpYqmZsWI-__OGbt8jZktqc2V3Zs0KvDLdBP8SBZtOs2IifRuUZQMsPJtUsR4DEK6cULNeUx9XgTnH37Ha_FIAp4Fm0PP1hw45DntW2x0wZGzhPmr1YNMYKYn9_1IQXGwJAiUJVUMdN5YUW4O8HtSoXjC79QRyaLshNDUf9-ImF9lp.woff2) format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
/* Vietnamese/Latin-ext/Latin skipped for brevity in this specific chunk? No, I must include all or the previous chunk logic fails. 
   I will include ALL to be safe. */
/* vietnamese */
@font-face {
  font-family: 'Roboto Flex';
  font-style: normal;
  font-weight: 100 1000;
  font-stretch: 75% 100%;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/robotoflex/v30/NaNeepOXO_NexZs0b5QrzlOHb8wCikXpYqmZsWI-__OGbt8jZktqc2V3Zs0KvDLdBP8SBZtOs2IifRuUZQMsPJtUsR4DEK6cULNeUx9XgTnH37Ha_FIAp4Fm0PP1hw45DntW2x0wZGzhPmr1YNMYKYn9_1IQXGwJAiUJVUMdN5YUW4O8HtSoXjC79QRyaLshNDUf9-4mF9lp.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Roboto Flex';
  font-style: normal;
  font-weight: 100 1000;
  font-stretch: 75% 100%;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/robotoflex/v30/NaNeepOXO_NexZs0b5QrzlOHb8wCikXpYqmZsWI-__OGbt8jZktqc2V3Zs0KvDLdBP8SBZtOs2IifRuUZQMsPJtUsR4DEK6cULNeUx9XgTnH37Ha_FIAp4Fm0PP1hw45DntW2x0wZGzhPmr1YNMYKYn9_1IQXGwJAiUJVUMdN5YUW4O8HtSoXjC79QRyaLshNDUf9-8mF9lp.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Roboto Flex';
  font-style: normal;
  font-weight: 100 1000;
  font-stretch: 75% 100%;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/robotoflex/v30/NaNeepOXO_NexZs0b5QrzlOHb8wCikXpYqmZsWI-__OGbt8jZktqc2V3Zs0KvDLdBP8SBZtOs2IifRuUZQMsPJtUsR4DEK6cULNeUx9XgTnH37Ha_FIAp4Fm0PP1hw45DntW2x0wZGzhPmr1YNMYKYn9_1IQXGwJAiUJVUMdN5YUW4O8HtSoXjC79QRyaLshNDUf9-EmFw.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'TikTok Sans';
  font-style: normal;
  font-weight: 300 900;
  font-stretch: 75% 100%;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/tiktoksans/v7/70lAu7g-Lm8OXGnh_Ow1sUfFMmdd9dRE425wpTDUUU9fkwU.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'TikTok Sans';
  font-style: normal;
  font-weight: 300 900;
  font-stretch: 75% 100%;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/tiktoksans/v7/70lAu7g-Lm8OXGnh_Ow1sUfFMmdd9dRE425wpTDUWE9fkwU.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek */
@font-face {
  font-family: 'TikTok Sans';
  font-style: normal;
  font-weight: 300 900;
  font-stretch: 75% 100%;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/tiktoksans/v7/70lAu7g-Lm8OXGnh_Ow1sUfFMmdd9dRE425wpTDUX09fkwU.woff2) format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
/* vietnamese */
@font-face {
  font-family: 'TikTok Sans';
  font-style: normal;
  font-weight: 300 900;
  font-stretch: 75% 100%;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/tiktoksans/v7/70lAu7g-Lm8OXGnh_Ow1sUfFMmdd9dRE425wpTDUU09fkwU.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'TikTok Sans';
  font-style: normal;
  font-weight: 300 900;
  font-stretch: 75% 100%;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/tiktoksans/v7/70lAu7g-Lm8OXGnh_Ow1sUfFMmdd9dRE425wpTDUUk9fkwU.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'TikTok Sans';
  font-style: normal;
  font-weight: 300 900;
  font-stretch: 75% 100%;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/tiktoksans/v7/70lAu7g-Lm8OXGnh_Ow1sUfFMmdd9dRE425wpTDUXE9f.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
    --primary-green: #27AE60;
    --primary-blue: #2F80ED;
    --text-dark: #333333;
    --text-light: #FFFFFF;
    --bg-dark: #000000;
    --bg-grey: #F2F2F2;
    --font-main: 'Roboto Flex', sans-serif;
    --font-heading: 'TikTok Sans', sans-serif;
    --container-width: 1200px;
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: var(--font-main);
    color: var(--text-dark);
    background-color: #FFFFFF;
    line-height: 1.25;
    font-size: 24px; /* Skillgate body size */
    font-variation-settings: 'wdth' 40, 'wght' 400; /* Narrow, regular weight */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

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

/* Header */
.header {
    background-color: var(--bg-dark);
    padding: 20px 0;
    color: white;
    font-size: 24px; /* Consistency with body */
}

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

.header__logo img {
    height: 28px;
    display: block;
}

.header__nav {
    margin: 0 auto; /* Center visually */
}

.header__menu {
    display: flex;
    list-style: none;
    gap: 50px;
}

.header__link {
    font-family: var(--font-heading); /* Updated font */
    color: white;
    text-decoration: none;
    text-transform: uppercase;
    font-weight: 800; /* Bolder */
    font-size: 15px; /* Reduced from 32px to match design */
    letter-spacing: normal;
    transition: color 0.3s;
}

.header__link:hover {
    color: var(--primary-blue);
}

.header__contacts {
    display: flex;
    gap: 30px;
    font-size: 13px;
}

.header__phone {
    color: white; /* Changed to white */
    text-decoration: none;
    font-weight: 800;
    font-size: 20px;
    white-space: nowrap;
}

.header__email {
    color: white;
    text-decoration: none;
    font-weight: 800; /* Match phone */
    font-size: 20px; /* Match phone */
    white-space: nowrap;
}

/* Hero Section */
.hero {
    position: relative;
    height: 380px;
    /* Background handled by video/overlay */
    display: flex;
    align-items: center;
    overflow: hidden;
}

.hero__video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 1;
}

.hero::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(rgba(0,0,0,0.6), rgba(0,0,0,0.8)); /* Darkened overlay */
    z-index: 2;
    pointer-events: none;
}

.hero .container {
    width: 100%;
    position: relative;
    z-index: 3;
}

.hero__content {
    max-width: 900px;
}

.hero__title {
    font-family: var(--font-heading);
    color: white;
    font-size: 32px; /* Reduced from 64px to match Skillgate */
    font-weight: 800;
    font-variation-settings: 'wdth' 90, 'wght' 800;
    line-height: 1.1;
    margin-bottom: 25px;
    text-transform: uppercase;
    letter-spacing: normal;
}

.hero__subtitle {
    color: white;
    font-size: 18px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Green Ribbon Badge - Moved to How It Works */
.hero__badge {
    position: absolute;
    top: 30px; /* Adjusted */
    right: -70px; /* Adjusted to prevent cutoff */
    background-color: var(--primary-green);
    color: white;
    width: 400px; /* Wider to avoid cutoff */
    height: auto;
    padding: 15px 0;
    transform: rotate(45deg);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}

.hero__badge-text {
    font-family: var(--font-heading);
    font-weight: 800;
    font-size: 16px; /* Slightly larger */
    line-height: 1.2;
    text-transform: uppercase;
    text-align: center;
    width: auto;
    white-space: nowrap; /* Prevent wrapping if possible */
}

/* Common Section Text */
/* Common Section Text */
.section-badge {
    color: #000000; /* Changed to black */
    font-size: 24px; /* Increased size */
    font-weight: 400; /* Normal weight */
    text-transform: uppercase;
    margin-bottom: 20px;
    letter-spacing: normal;
    font-family: var(--font-main);
}

.section-title {
    font-family: var(--font-heading);
    color: var(--primary-blue);
    font-size: 48px; /* Skillgate section heading */
    font-weight: 800;
    font-variation-settings: 'wdth' 90, 'wght' 800;
    text-transform: uppercase;
    margin-bottom: 50px;
    line-height: 1.1;
    letter-spacing: normal;
}

/* Specific Header Style from Skillgate as requested */
#practice-title {
    font-size: 48px; /* Changed from 64px to match standard */
    color: #2A8EDC; /* Matches Skillgate blue */
    padding-left: 0; /* Align left */
    margin-top: 40px;
    line-height: 1.1;
    text-align: left; /* Ensure left alignment for padding effect */
}

/* How It Works Section */
.how-it-works {
    padding: 100px 0;
    text-align: left; /* Left align */
    position: relative;
    overflow: hidden;
}

.steps {
    display: flex;
    justify-content: center;
    gap: 30px; /* Match skillgate gap */
    margin-bottom: 60px;
    position: relative;
}

/* Continuous thick connecting line (behind blocks) */
.steps::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    height: 40px; /* Thick line as per skillgate.ru */
    background-color: var(--primary-green);
    z-index: 0;
    transform: translateY(-50%);
}

.step-card {
    background-color: var(--primary-green);
    color: white;
    flex: 1;
    padding: 45px 40px; /* Match skillgate padding */
    position: relative;
    height: 363px; /* Match skillgate height approx */
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    text-align: left;
    overflow: hidden;
    z-index: 1; /* Above the line */
    border-radius: 0; /* Square corners */
}

/* Step cards no longer use background images, just flat color and large numbers */
.step-card--1,
.step-card--2,
.step-card--3 {
    background-color: var(--primary-green);
}

.step-card__content {
    font-size: 18px;
    font-weight: 600;
    line-height: 1.4;
    z-index: 2;
    position: relative;
}

.step-card__number {
    position: absolute;
    bottom: -60px;
    right: 10px;
    font-family: var(--font-heading);
    font-size: 280px;
    font-weight: 900; /* Black */
    color: rgba(255,255,255,0.15); /* Slightly more visible */
    line-height: 1;
    z-index: 1;
    pointer-events: none;
}

.how-it-works__footer-text {
    max-width: 1000px;
    margin: 0 auto;
    font-size: 17px;
    line-height: 1.5;
    color: var(--text-dark);
    font-weight: 500;
}

/* Catalog Section */
.catalog {
    padding: 80px 0;
}

.catalog__filters {
    display: flex;
    justify-content: flex-start;
    flex-wrap: wrap;
    gap: 5px; /* Reduced gap */
    margin-bottom: 50px;
    border-bottom: 1px solid #E0E0E0;
    padding-bottom: 15px;
}

.filter-btn {
    padding: 10px 24px;
    border: 1px solid transparent;
    background-color: transparent;
    color: #4F4F4F;
    font-size: 21px; /* Reduced to fit on one line */
    line-height: 1.4; /* Exact match to description */
    font-weight: 400;
    cursor: pointer;
    border-radius: 40px; 
    transition: all 0.2s;
    font-family: var(--font-main);
    padding: 6px 12px; /* Reduced vertical padding to reduce height */
    font-variation-settings: 'wdth' 40, 'wght' 400; 
}

.filter-btn:hover {
    color: var(--primary-blue);
    border-color: rgba(47, 128, 237, 0.3);
}

.filter-btn.active {
    background-color: var(--primary-blue);
    color: white;
    box-shadow: 0 4px 10px rgba(47, 128, 237, 0.3);
    font-family: var(--font-main); /* Ensure Roboto Flex */
}

.catalog__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    margin-bottom: 60px;
}

.card {
    background: white;
    border: 1.5px solid #E0E0E0;
    text-align: left;
    display: flex;
    flex-direction: column;
    height: 100%;
    position: relative; /* Context for overlay */
    overflow: hidden; /* Clip overlay */
}

/* Coming Soon Overlay */
.card__overlay-img {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 120px;
    height: auto;
    z-index: 10;
    pointer-events: none;
}

.card__image-wrapper {
    width: 100%;
    height: 180px;
    overflow: hidden;
    position: relative; /* fix for absolute video */
}

.card__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.card__content {
    padding: 25px;
}

.card__title {
    font-size: 18px;
    font-weight: 800;
    color: var(--text-dark);
    margin-bottom: 15px;
    line-height: 1.2;
}

.card__text {
    font-size: 14px;
    color: var(--text-dark);
    line-height: 1.5;
    font-weight: 400;
}

.catalog__controls {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 80px;
    margin-top: 5px;
}

.catalog__pagination {
    display: flex;
    align-items: center;
    gap: 15px;
}

.pagination-arrow {
    background: none;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    transition: opacity 0.2s;
}

.pagination-arrow:hover {
    opacity: 0.8;
}

.page-dots {
    display: flex;
    gap: 8px;
}

.dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: #E0E0E0;
    cursor: pointer;
}

.dot.active {
    background-color: var(--primary-green);
}

.catalog__more-btn {
    background-color: var(--primary-green);
    color: white;
    border: none;
    padding: 10px 50px; /* Reduced vertical padding */
    font-size: 21px; /* Match filters */
    line-height: 1.4; /* Exact match to description */
    font-weight: 400; 
    cursor: pointer;
    transition: all 0.3s;
    border-radius: 40px;
    text-transform: none; 
    letter-spacing: normal; 
    box-shadow: 0 4px 15px rgba(39, 174, 96, 0.4);
    font-family: var(--font-main);
    font-variation-settings: 'wdth' 40, 'wght' 400; /* Sync with filters */
}

.catalog__more-btn:hover {
    background-color: #219150;
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(39, 174, 96, 0.5);
}

/* Practice Section */
.practice {
    padding: 30px 0 60px 0; /* Reduced top and bottom padding */
}

.practice__video-container {
    width: 100%;
    height: 600px;
    background: #000;
    margin-bottom: 80px;
    box-shadow: 0 10px 40px rgba(0,0,0,0.1);
}

.practice__iframe {
    width: 100%;
    height: 100%;
    border: none;
}

/* Benefits Section */
.benefits {
    padding-bottom: 0; /* Removed extra padding */
}

.benefits__columns {
    display: flex;
    gap: 100px;
}

.benefits__col {
    flex: 1;
}

.benefits__title {
    font-size: 24px;
    font-weight: 700; /* Bold */
    margin-bottom: 30px;
    line-height: 1.2;
}

.benefits__list {
    list-style: none;
}

.benefits__list li {
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 15px;
    position: relative;
    line-height: 1.4;
}

.benefits__text {
    font-size: 16px; /* User requested 16px */
    line-height: 1.5;
    margin-top: 20px;
}

/* Pricing Subsection */
.pricing {
    margin-top: 60px;
}

.pricing__items {
    display: flex;
    flex-direction: row; /* Horizontal layout */
    justify-content: flex-start;
    gap: 60px; /* Increased gap */
}

.pricing__item {
    display: flex;
    align-items: center;
    gap: 20px;
}

.pricing__icon {
    width: 60px;
    height: 60px;
    flex-shrink: 0;
}

.pricing__label {
    font-size: 18px;
    font-weight: 800;
    text-transform: uppercase;
    color: var(--text-dark);
}

.pricing__disclaimer {
    margin-top: 30px;
    font-size: 16px; /* Increased to 16px */
    line-height: 1.5;
    color: var(--text-dark);
    font-weight: 500;
}

/* Footer Section */
.footer {
    padding-bottom: 60px;
}

.footer__cta {
    background: radial-gradient(circle at 100% 0px, rgb(190, 227, 255) 0px, rgb(42, 142, 220) 30%, rgb(28, 28, 28) 100%);
    padding: 50px 60px;
    color: white;
    margin-bottom: 80px;
    display: flex;
    flex-direction: column; /* Stack vertically */
    justify-content: center;
    align-items: center; /* Center align items */
    gap: 30px; /* Gap between title and form */
    text-align: center;
    border-radius: 20px; /* Added rounded corners */
}

.footer__cta-title {
    font-size: 24px; /* Slightly larger for better visibility */
    font-weight: 600;
    line-height: 1.4;
    max-width: 800px; /* Allow more width */
    margin-bottom: 10px;
}

.footer__form {
    display: flex;
    gap: 15px;
    width: 100%; /* Full width */
    max-width: 1000px; /* constrain width if needed */
    justify-content: center;
}

.footer__input {
    flex: 1;
    background: rgba(255,255,255,0.1);
    border: 1px solid rgba(255,255,255,0.3);
    padding: 15px;
    color: white;
    font-size: 16px; /* Increased size */
    outline: none;
    font-family: var(--font-main);
    font-weight: 400;
    font-variation-settings: 'wdth' 40, 'wght' 400; /* As requested */
}

.footer__input::placeholder {
    color: rgba(255, 255, 255, 0.7);
    font-weight: 400;
}

.footer__btn {
    background: white;
    color: var(--text-dark);
    border: none;
    padding: 15px 40px;
    cursor: pointer;
    min-width: 200px;
    font-family: var(--font-main);
    text-transform: none; 
    font-weight: 400;
    font-size: 16px; /* Explicit size */
    font-variation-settings: 'wdth' 40, 'wght' 400; /* As requested */
}

.footer__bottom {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    font-size: 13px;
    color: #4F4F4F;
    font-weight: 600;
}


/* Pagination Styles */
.catalog__pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;
    margin-top: 40px;
}

.page-dots {
    display: flex;
    gap: 12px;
    align-items: center;
}

.pagination-arrow {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    /* background-color: var(--primary-green);  Removed to avoid double background with SVG */
    background: none; 
    border: none;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    transition: transform 0.2s, opacity 0.2s;
    padding: 0;
}

.pagination-arrow svg {
    display: block; /* Remove mysterious gaps */
    pointer-events: none; /* Let click pass to button */
}

.pagination-arrow:hover {
    transform: scale(1.1);
}

.pagination-arrow:disabled {
    opacity: 0.5;
    cursor: default;
    transform: none;
    pointer-events: none; /* Ensure disabled buttons don't capture clicks */
}

.dot {
    width: 10px;
    height: 10px;
    background-color: #E0E0E0;
    border-radius: 50%;
    cursor: pointer;
    transition: background-color 0.3s;
}

.dot.active {
    background-color: var(--primary-green);
}

/* =========================================
   Skillgate Replica Block (BL12)
   ========================================= */

.bl12 { 
    overflow-x: clip; 
    background-color: #ffffff;
    font-family: var(--font-main);
    padding: 60px 0 100px 0; /* Increased to match bottom spacing of description */
}

.bl12 .in { 
    max-width: 1200px; /* Match standard container width (var(--container-width)) */
    margin: 0 auto;
    padding: 0 20px; /* Standard container padding to align with logo */
}

/* Header 1 (Badge) */
.bl12 .t1 { 
    padding-left: 0; /* Align left */
    text-transform: uppercase; 
    font-family: var(--font-main);
    font-size: 24px;
    line-height: 30px;
    color: #000000; /* Changed to black as requested */
    margin-bottom: 20px;
}

/* Header 2 (Title) */
/* Header 2 (Title) "КАК ЭТО РАБОТАЕТ" */
.bl12 .t2 { 
    padding-left: 0; /* Align left */
    color: #2a8edc; 
    font-family: var(--font-heading);
    font-size: 48px; /* Changed from 64px to 48px as requested */
    line-height: 1.1;
    text-transform: uppercase;
    font-weight: 800;
    font-variation-settings: 'wdth' 90, 'wght' 800;
    margin-bottom: 70px;
}

/* Row of Items */
.bl12 .row { 
    display: flex; 
    gap: 30px; 
    position: relative; 
    justify-content: center;
}

/* Green Line Background */
.bl12 .row::before { 
    content: ""; 
    position: absolute; 
    background-color: #18ac59; 
    height: 40px; 
    width: 200vw; /* Long line */
    left: 100px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 0;
}

/* Item Blocks (Green!) */
.bl12 .item { 
    width: 420px; 
    height: 363px; 
    padding: 45px 40px; 
    position: relative; 
    z-index: 2; 
    background-color: #18ac59; /* Green background confirmed by extraction */
    font-family: var(--font-main);
    font-size: 24px;
    line-height: 30px;
    color: white;
    box-sizing: border-box;
}

/* Connector Bridge (Right) */
.bl12 .item::before { 
    content: ""; 
    position: absolute; 
    height: 78px; 
    width: 32px; 
    background-image: url("https://skillgate.ru/img/bl12-3.svg"); 
    background-position: center center; 
    background-repeat: no-repeat; 
    background-size: 100%; 
    right: -31px; 
    top: 50%;
    transform: translateY(-50%);
    z-index: 3; 
}

/* Remove connector on last item */
.bl12 .item.last::before { 
    display: none; 
}

/* Text inside Item */
.bl12 .t { 
    color: #e6e6e6; 
}
.bl12 .t span { 
    font-weight: 700; 
    color: white;
    display: block;
    margin-bottom: 5px;
}

/* Icon Images */
.bl12 .item img { 
    position: absolute; 
    bottom: -6px;
    left: 217px; /* Positioning as per extracted CSS */
    bottom: -6px;
    left: 217px; /* Positioning as per extracted CSS */
    width: 102px; 
}

/* Description Text below green blocks */
.bl12-description {
    text-align: center;
    font-family: var(--font-main);
    font-size: 24px; /* Matches .bl12 .item */
    line-height: 1.4;
    color: var(--text-dark);
    max-width: 1000px;
    margin: 0 auto 60px auto; /* Removed top margin */
    padding: 0 20px;
}

/* Footer Links (Preserve existing) */
.footer__links {
    display: flex;
    gap: 40px;
}

.footer__links a {
    color: #4F4F4F;
    text-decoration: underline;
}

.footer__phone-bottom {
    font-size: 16px;
    font-weight: 800;
}

/* =========================================
   Modal Popup Styles
   ========================================= */

.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(5px);
    z-index: 1000;
    display: none; /* Hidden by default */
    justify-content: center;
    align-items: center;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.modal-overlay.open {
    display: flex;
    opacity: 1;
}

.modal {
    background: white;
    width: 95%;
    max-width: 1200px; /* Wider as requested */
    height: 90vh; /* Fixed height: almost full screen */
    max-height: none; /* Remove max-height limit */
    border-radius: 20px;
    position: relative;
    box-shadow: 0 20px 50px rgba(0,0,0,0.5);
    /* Transform managed by state */
    transition: transform 0.3s ease;
    
    /* Flex Layout for responsive banner */
    display: flex;
    flex-direction: column;
    overflow: hidden; /* Hide overflow of container */
}

.modal-overlay.open .modal {
    transform: translateY(0);
}

.modal__close {
    position: absolute;
    top: 0;
    right: 0;
    width: 60px;
    height: 60px;
    background-color: var(--primary-green);
    border: none;
    cursor: pointer;
    z-index: 10;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: background-color 0.2s;
    border-bottom-left-radius: 20px;
    border-top-right-radius: 20px;
}

.modal__close:hover {
    background-color: #219150;
}

.modal__content {
    display: flex;
    flex-direction: column;
    height: 100%;
}

/* Modal Content Styles */
.modal__banner {
    width: 100%;
    flex: 1 1 auto; /* Grow and shrink */
    min-height: 150px; /* Minimum height before scrolling body */
    max-height: 400px; /* Ideal max height */
    background-color: #eee;
    background-size: cover;
    background-position: center;
}

.modal__body {
    flex: 0 0 auto; /* Don't shrink initially, but allow scrolling */
    padding: 20px 40px; /* Reduced padding from 30px */
    overflow-y: auto; /* Scroll ONLY the body if needed */
    max-height: calc(100% - 150px); /* fallback */
}

.modal__title {
    font-size: 32px; /* Slightly smaller title */
    font-weight: 800;
    margin-bottom: 10px; /* Reduced margin */
    text-transform: uppercase;
    font-family: var(--font-heading);
    color: black;
}

.modal__text {
    font-size: 16px;
    line-height: 1.5; /* Slightly tighter line height */
    color: #333;
    margin-bottom: 20px; /* Reduced margin */
    font-family: var(--font-main);
}

.modal__meta {
    margin-bottom: 15px; /* Reduced margin from 25px */
}

.modal__time {
    display: flex;
    align-items: center;
    gap: 15px;
    font-weight: 600;
    color: #333;
}

.modal__time-label {
    font-size: 18px;
    font-family: var(--font-main);
}

.modal__divider {
    height: 1px;
    background-color: #E0E0E0;
    margin-bottom: 15px; /* Reduced margin from 25px */
    margin-top: 15px; /* Ensure balanced spacing around form */
}

.modal__rec-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px; /* Reduced margin */
}

.modal__rec-title {
    font-size: 20px;
    font-weight: 700;
    text-transform: uppercase;
    color: black;
}

.modal__rec-nav {
    display: flex;
    align-items: center;
    gap: 15px;
}

.modal__nav-btn {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: var(--primary-green);
    border: none;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    transition: transform 0.2s;
}

.modal__nav-btn:hover {
    transform: scale(1.1);
}

.modal__nav-dots {
    display: flex;
    gap: 8px;
}

.modal__dot {
    width: 8px;
    height: 8px;
    background-color: #E0E0E0;
    border-radius: 50%;
}

.modal__dot.active {
    background-color: var(--primary-green);
}

.modal__rec-list {
    display: flex; /* Changed from grid to flex for carousel */
    gap: 20px;
    overflow-x: auto; /* Enable horizontal scrolling */
    scroll-behavior: smooth;
    padding-bottom: 10px; /* Space for scrollbar if visible (or hiding it) */
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none; /* Hide scrollbar Firefox */
}

.modal__rec-list::-webkit-scrollbar {
    display: none; /* Hide scrollbar Chrome/Safari */
}

.modal__rec-card {
    flex: 0 0 calc(33.333% - 14px); /* Show 3 items minus gap */
    min-width: 200px; /* Minimum width */
    cursor: pointer;
}

@media (max-width: 768px) {
    .modal__rec-card {
        flex: 0 0 80%; /* Show ~1.2 items on mobile for hint of scrolling */
    }
}

.card {
    background: white;
    border-radius: 12px;
    overflow: hidden;
    /* Removed box-shadow */
    transition: transform 0.3s, box-shadow 0.3s;
    display: flex; /* Initially flex */
    flex-direction: column;
    cursor: pointer; /* Add pointer cursor */
    position: relative; /* Context for absolute positioning if needed */
}

.card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0,0,0,0.1); /* Add shadow on hover */
}

/* Hover Effect: Scale Image */
/* Hover Effect: Scale Image (Triggered by wrapper hover now) */
.card__image-wrapper:hover .card__image {
    transform: scale(1.05); /* Slight zoom */
}

/* Hover Effect: Play Icon Overlay */
.card__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.card__video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover; /* Fill the area */
    opacity: 0;
    opacity: 0;
    transition: opacity 0.5s ease, transform 0.5s ease; /* Add transform transition */
    z-index: 2; /* Below overlay initially, but irrelevant as it's hidden */
}

/* White Overlay (Whitening Effect) */
.card__overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(255, 255, 255, 0.5); /* 50% white */
    opacity: 1; /* Visible by default */
    transition: opacity 0.3s ease;
    z-index: 3; /* On top of image and video */
    pointer-events: none; /* Let clicks pass */
}

/* Hover: Show Video, Hide Overlay */
.card__image-wrapper:hover .card__video {
    opacity: 1;
    z-index: 4; /* On top of everything */
    transform: scale(1.05); /* Match image zoom */
}

.card__image-wrapper:hover .card__overlay {
    opacity: 0; /* Disappear */
}

.modal__rec-title-text {
    padding: 15px;
    font-size: 14px;
    font-weight: 600;
    color: #333;
    line-height: 1.4;
}

.modal__rec-image {
    height: 160px; /* Increased height to show more of the image */
    background-color: #ddd;
    background-size: cover;
    background-position: center;
}


/* =========================================
   Mobile Adaptation (max-width: 768px)
   ========================================= */
@media (max-width: 768px) {
    
    /* Typography Scaling */
    body {
        font-size: 16px; /* Standard mobile body size */
    }

    .section-title, 
    .hero__title,
    .bl12 .t2 {
        font-size: 32px !important; /* Force smaller headers */
        margin-bottom: 30px;
    }

    .bl12 .t1 {
        font-size: 18px;
        margin-bottom: 10px;
    }

    /* Hero Section */
    .hero {
        height: auto;
        padding: 100px 0 60px 0; /* Increase top padding for header */
        background-position: center top;
        text-align: center;
    }

    .hero__content {
        max-width: 100%;
        padding: 0 10px;
    }

    .hero__title {
        font-size: 36px;
    }

    .hero__badge {
         /* Static block in hero for mobile */
        position: relative;
        top: auto;
        right: auto;
        transform: none;
        width: 100%;
        margin-top: 30px;
        box-shadow: none;
        background: rgba(39, 174, 96, 0.9);
        border-radius: 8px;
    }

    .hero__badge-text {
        font-size: 14px;
        white-space: normal;
    }

    /* Header */
    .header__container {
        flex-direction: column;
        gap: 20px;
    }

    .header__nav {
        margin: 0;
        width: 100%;
        overflow-x: auto;
        padding-bottom: 10px;
    }

    .header__menu {
        gap: 20px;
        justify-content: center;
    }
    
    .header__contacts {
        flex-direction: column;
        gap: 10px;
        align-items: center;
    }

    /* Catalog Filters - Horizontal Scroll */
    .catalog__filters {
        flex-wrap: nowrap;
        overflow-x: auto;
        padding-bottom: 15px; /* Space for scrollbar */
        margin-bottom: 30px;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none; /* Hide scrollbar Firefox */
    }
    
    .catalog__filters::-webkit-scrollbar {
        display: none; /* Hide scrollbar Chrome/Safari */
    }

    .filter-btn {
        flex: 0 0 auto; /* Don't shrink */
        font-size: 16px;
    }

    /* Catalog Grid - Single Column */
    .catalog__grid {
        grid-template-columns: 1fr; /* Stack cards */
        gap: 30px;
    }

    .card__image-wrapper {
        height: 200px; /* Slightly taller on mobile */
    }

    /* How It Works (BL12) */
    .bl12 {
        padding: 60px 0;
    }

    .bl12-description {
        font-size: 16px;
        margin-bottom: 40px !important;
    }

    .bl12 .row {
        flex-direction: column;
        gap: 50px; /* increased gap for stacked items */
    }

    .bl12 .row::before {
        display: none; /* Hide horizontal line */
    }

    /* Vertical connector line for mobile */
    .bl12 .row::after {
        content: "";
        position: absolute;
        top: 0;
        bottom: 0;
        left: 50%;
        width: 4px; /* Vertical line width */
        background-color: #18ac59;
        transform: translateX(-50%);
        z-index: 0;
    }

    .item {
        width: 100% !important;
        margin: 0 !important;
        z-index: 1; /* Above line */
    }

    /* Practice Section */
    .practice {
        padding: 60px 0 30px 0; /* Reduced bottom padding */
    }

    .practice__video-container {
        height: 250px; /* Smaller video area */
    }

    /* Benefits */
    .benefits__columns {
        flex-direction: column;
        gap: 40px;
    }

    /* Pricing */
    .pricing__items {
        flex-direction: column;
        gap: 30px;
    }
    
    .pricing__item {
        background: #f9f9f9;
        padding: 20px;
        border-radius: 12px;
    }

    /* Footer */
    .footer__cta {
        padding: 40px 20px;
    }

    .footer__cta-title {
        font-size: 20px;
    }

    .footer__form {
        flex-direction: column;
        width: 100%;
        gap: 10px;
    }

    .footer__input, 
    .footer__btn {
        width: 100%;
    }

    .footer__bottom {
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 20px;
    }
    
    /* Modal Mobile */
    .modal {
        width: 100%;
        height: 100%;
        border-radius: 0;
        max-width: none;
    }

    .modal__close {
        top: 15px;
        right: 15px;
        background: rgba(0,0,0,0.5);
    }
    
    .modal__banner {
        flex: 0 0 200px; /* Fixed smaller banner on mobile */
    }
    
    .modal__recommendations {
        display: none; /* Hide recommendations on mobile to save space? Or keep? Let's keep for now but stack */
    }
    
    /* If keeping recommendations */
    .modal__rec-list {
        grid-template-columns: 1fr; /* Stack recs if shown */
    }
}

/* Modal Form Styles */
.modal__form-section {
    margin-top: 24px;
    padding-top: 24px;
    border-top: 1px solid #E0E0E0;
}

.modal__form-title {
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 16px;
    color: var(--text-dark);
}

.modal__form {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.modal__form-row {
    display: flex;
    gap: 12px;
}

.modal__input {
    flex: 1;
    padding: 12px 16px;
    border: 1px solid #E0E0E0;
    border-radius: 8px;
    font-size: 14px;
    font-family: inherit;
    outline: none;
    transition: border-color 0.3s ease;
}

.modal__input:focus {
    border-color: var(--primary-green);
}

.modal__btn {
    background-color: var(--primary-green);
    color: white;
    padding: 14px;
    border: none;
    border-radius: 8px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.3s ease;
    margin-top: 4px;
}

.modal__btn:hover {
    background-color: #219150;
}

.modal__policy {
    font-size: 12px;
    color: #828282;
    text-align: center;
}

.modal__policy a {
    color: #828282;
    text-decoration: underline;
}

/* Mobile adjustments for form */
@media (max-width: 768px) {
    .modal__form-row {
        flex-direction: column;
        gap: 12px;
    }
}

/* Modal Form - Horizontal Layout */
.modal__form {
    display: flex;
    flex-direction: row; /* Explicitly set row */
    flex-wrap: nowrap; /* Force single line */
    align-items: center;
    gap: 10px;
    margin-bottom: 0;
    width: 100%; /* Ensure container takes full width */
}

.modal__form-row {
    display: contents; /* Remove row wrapper from layout flow */
}

/* Compact Inputs */
.modal__input {
    flex: 1 1 auto; /* Allow growing and shrinking */
    min-width: 0; /* Allow shrinking below content size */
    width: auto; /* Override 100% */
    height: 40px; /* Reduced height */
    padding: 0 10px; /* Slightly tighter padding */
    font-size: 14px;
    border: 1px solid #ddd;
    border-radius: 8px;
    margin-bottom: 0; 
    font-family: var(--font-main);
    font-variation-settings: 'wdth' 40, 'wght' 400; /* Requested font settings */
}

.modal__input:focus {
    border-color: var(--primary-green);
    outline: none;
}

/* Compact Button */
.modal__btn {
    flex: 0 0 auto; /* Don't shrink */
    height: 40px; /* Match input height */
    padding: 0 25px;
    font-size: 14px;
    border-radius: 8px;
    white-space: nowrap;
    margin-top: 0; /* Align with inputs */
    background-color: var(--primary-green);
    color: white;
    border: none;
    cursor: pointer;
    transition: background 0.3s;
    font-family: var(--font-main);
    font-variation-settings: 'wdth' 40, 'wght' 400; /* Requested font settings */
}

.modal__btn:hover {
    background-color: #219150;
}

/* Policy Text - Full Width Below */
.modal__policy {
    display: block;
    width: 100%;
    text-align: center;
    font-size: 11px;
    line-height: 1.4; /* Added line spacing */
    color: #888;
    margin-top: 10px;
    font-family: var(--font-main);
    font-variation-settings: 'wdth' 40, 'wght' 400; /* Requested font settings */
    margin-bottom: 20px; /* Added spacing below policy */
}

/* Mobile Responsiveness */
@media (max-width: 768px) {
    .modal__form {
        flex-direction: column;
        align-items: stretch;
    }
    
    .modal__form-row {
        display: block; /* Restore blocks for semantics if needed, or keeping contents is fine contextually, but inputs need to fill width */
    }
    
    .modal__input {
        width: 100%; /* Full width on mobile */
        margin-bottom: 10px;
    }
    
    .modal__btn {
        width: 100%;
    }
}

/* Hero Button - Appended for fix */
.hero__btn {
    display: inline-block;
    background-color: white;
    color: black;
    padding: 16px 40px;
    font-size: 18px;
    font-weight: 700;
    text-transform: uppercase;
    border-radius: 8px;
    border: none;
    cursor: pointer;
    text-decoration: none;
    transition: background 0.3s, transform 0.3s, box-shadow 0.3s, color 0.3s;
    box-shadow: 0 5px 15px rgba(0,0,0,0.2);
    margin-top: 30px;
}

.hero__btn:hover {
    background-color: #f2f2f2;
    color: var(--primary-green);
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(0,0,0,0.3);
}

/* Trust Block */
.trust {
    margin-top: 150px;
    margin-bottom: 150px;
    text-align: left;
}

.trust__content {
    max-width: 1200px; /* Increased from 900px to fit 3 cards */
    margin: 0 0 40px 0;
}

.trust__desc {
    font-size: 18px;
    color: #555;
    margin-bottom: 30px;
    line-height: 1.6;
    max-width: 800px; /* Keep text readable */
}

/* Awards Grid */
.trust__awards {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px;
    margin-bottom: 40px;
}

.trust__award-card {
    background: #fff;
    border-radius: 8px;
    border: 1px solid #eee;
    overflow: hidden;
    transition: transform 0.3s;
    text-align: center;
    flex: 1; /* Allow cards to grow/shrink */
    min-width: 280px; /* Prevent too small cards */
    max-width: 350px; /* Prevent too large cards */
}

/* Modal CTA & Success */
.modal__cta-text {
    font-size: 14px; /* Smaller font */
    color: #888; /* Paler color */
    margin-bottom: 30px; /* More spacing */
    font-weight: 400;
}

.modal__success {
    text-align: center;
    padding: 30px;
}

.modal__success-icon {
    font-size: 40px;
    margin-bottom: 10px;
}

.modal__success-title {
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 5px;
    color: #27AE60;
}

.modal__success-text {
    font-size: 16px;
    color: #666;
}

/* Modal Form Styles - Ensure horizontal layout */
.modal__form {
    display: flex;
    flex-direction: row;
    gap: 15px;
}

.trust__award-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 5px 15px rgba(0,0,0,0.05);
}

.trust__award-img {
    height: 140px;
    background-size: cover;
    background-position: center;
    border-bottom: 1px solid #eee;
}

.trust__award-text {
    padding: 15px;
    font-size: 13px;
    line-height: 1.4;
    font-weight: 600;
    color: #333;
}

.trust__grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center; /* Centered logos */
    gap: 40px;
    align-items: center;
    margin-top: 40px;
}

.trust__logo {
    height: 50px; /* Slightly smaller for elegance */
    width: auto;
    filter: grayscale(100%);
    opacity: 0.6;
    transition: filter 0.3s, opacity 0.3s;
}

.trust__logo:hover {
    filter: grayscale(0%);
    opacity: 1;
}

    .trust__features {
        padding: 15px;
    }

/* How it Works - Text Styles (Appended Fix) */
/* Results Section */
.results__grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 30px;
}

.results__item {
    flex: 1;
    min-width: 200px;
    text-align: center;
    background: white;
    padding: 30px 20px;
    border-radius: 12px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
    transition: transform 0.3s;
}

.results__item:hover {
    transform: translateY(-5px);
}

.results__number {
    font-size: 48px; /* Kept large for impact */
    font-weight: 800;
    color: var(--primary-green);
    margin-bottom: 10px;
    font-family: var(--font-heading);
    font-variation-settings: 'wdth' 90, 'wght' 800; /* Match section-title style */
}

.results__text {
    font-size: 24px; /* Increased to 24px as requested */
    font-weight: 600;
    color: var(--text-dark);
    line-height: 1.4;
}

@media (max-width: 768px) {
    .results__grid {
        flex-direction: column;
    }
}

.t h3 {
    font-size: 28px; /* Increased to 28px */
    font-weight: 800;
    margin-bottom: 25px;
    text-transform: uppercase;
    color: #ffffff;
    letter-spacing: 0.5px;
}

/* Security Section */
.security {
    padding: 30px 0 60px 0; /* Reduced top padding */
    background-color: #f9f9f9;
    text-align: left; /* Aligned left */
    margin-bottom: 100px; /* Big white space below */
}

.security__content {
    max-width: 800px;
    margin: 0; /* Aligned left */
    font-size: 16px;
    line-height: 1.6;
    color: var(--text-dark);
}

.security__content p {
    margin-bottom: 20px;
}

.security__content p:last-child {
    margin-bottom: 0;
}