/* ===================================
    CSS Reset & Base Styles
    =================================== */

* {
     margin: 0;
     padding: 0;
     box-sizing: border-box;
     list-style-position: inside;
}

:root {
    interpolate-size: allow-keywords;
}

html {
     scroll-behavior: smooth;
     width: 100%;
     overflow-x: clip;
     overflow-y: visible;
}

body {
     font-family: var(--font-family-body);
     font-size: var(--font-size-base);
     line-height: 1.5;
     letter-spacing: var(--letter-spacing-sm);
     color: var(--color-text);
     background-color: var(--color-background);
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
     width: 100%;
     overflow-x: clip;
     overflow-y: visible;
}
.skip-link {
     position: absolute;
     top: -3rem;
     left: 0.75rem;
     z-index: 2000;
     padding: 0.5rem 0.75rem;
     border-radius: 0.5rem;
     background: var(--color-text);
     color: var(--color-white);
}
.skip-link:focus {
     top: 0.75rem;
}
:focus-visible {
     outline: 2px solid var(--color-line);
     outline-offset: 2px;
}

[data-include="header"] {
     height: 78px;
}

img {
     max-width: 100%;
     height: auto;
     display: block;
}

a {
     text-decoration: none;
     color: inherit;
}

button {
     cursor: pointer;
     border: none;
     background: none;
}

p.label {
     line-height: 1.3;
     color: var(--color-text-secondary);
     text-transform: uppercase;
     padding-bottom: var(--spacing-sm);
     position: relative;
     width: fit-content;
}

p.label::after {
     content: "";
     position: absolute;
     top: 100%;
     left: 0;
     width: 7.5rem;
     height: 0.25rem;
     background-color: var(--color-line);
}

.text-center p.label {
     margin-left: auto;
     margin-right: auto;
}

.text-center p.label::after {
     left: 50%;
     transform: translateX(-50%);
}

.atendimentos-hero-section p.label, .webinar-hero-section p.label {
     padding-bottom: 0;
}

.atendimentos-hero-section p.label::after {
     width: 11rem;
     left: 50%;
     transform: translateX(-50%);
}

.webinar-hero-section p.label::after {
     width: 6rem;
     left: 50%;
     transform: translateX(-50%);
}

/* ===================================
    Container & Layout
    =================================== */

.color-theme {
     background-color: var(--color-background);
     color: var(--color-text);
}

.container {
     width: 100%;
     max-width: var(--max-width-container-mobile);
     margin: 0 auto;
     padding: 0 var(--spacing-base);
}

@media screen and (max-width: 989px) {
     .container.container-desktop {
          padding: 0;
     }
}

.projects-section .container {
     max-width: var(--max-width-container-secondary);
     
}

@media (min-width: 990px) {
     .container {
          padding: 0 var(--spacing-xl);
          max-width: var(--max-width-container);
     }
}

/* ===================================
    Buttons
    =================================== */

.link {
     color: var(--color-link);
     text-decoration: underline;
     text-underline-offset: 4px;
     transition: opacity var(--transition-base);
     font-family: var(--font-family-heading);
     font-size: var(--font-size-md);
     appearance: none;
     width: fit-content;
     border: none;
     background: none;
}

.link:focus {
     outline: none;
}

.link:hover {
     opacity: 0.7;
}

.popup-link {
     font: inherit;
     color: var(--color-link);
     text-decoration: underline;
     text-underline-offset: 3px;
     transition: opacity var(--transition-base);
}

.popup-link:hover {
     opacity: 0.75;
}

.link[data-open-modal] {
     padding: 0;
}

.btn {
     display: inline-block;
     padding: var(--spacing-sm) var(--spacing-lg);
     border-radius: var(--radius-sm);
     font-size: var(--font-size-md);
     font-family: var(--font-family-heading);
     letter-spacing: var(--letter-spacing-sm);
     line-height: 1.4;
     text-align: center;
     transition: all var(--transition-base);
     cursor: pointer;
     background-color: var(--color-button);
     color: var(--color-button-text);
     width: fit-content;
}

.btn-primary {
     background-color: var(--color-button);
     color: var(--color-button-text);
}

.btn-primary:hover {
     background-color: var(--color-button-text);
     color: var(--color-button);
     border: 1px solid var(--color-button);
     transform: translateY(-2px);
     box-shadow: var(--shadow-lg);
}

.btn-secondary {
     background-color: var(--color-button-text);
     outline: 1px solid var(--color-button);
     color: var(--color-button);
}

.btn-secondary:hover {
     background-color: var(--color-button);
     color: var(--color-button-text);
     transform: translateY(-2px);
     box-shadow: var(--shadow-lg);
}

/* ===================================
    Modal
    =================================== */

.modal {
     position: fixed;
     inset: 0;
     display: none;
     align-items: center;
     justify-content: center;
     z-index: 1000;
     padding: var(--spacing-base);
}

.modal.active {
     display: flex;
}

.modal-overlay {
     position: absolute;
     inset: 0;
     background: rgba(24, 36, 48, 0.56);
}

.modal-content {
     position: relative;
     width: 100%;
     max-width: 44rem;
     max-height: 90dvh;
     overflow-y: auto;
     background: var(--color-background);
     border-radius: var(--radius-lg);
     padding: var(--spacing-xl);
     box-shadow: var(--shadow-lg);
     z-index: 1;
}

.modal-close {
     position: absolute;
     top: var(--spacing-md);
     right: var(--spacing-md);
     width: 2rem;
     height: 2rem;
     border-radius: 50%;
     background: var(--color-white);
     color: var(--color-text);
     font-size: 1.6rem;
     line-height: 1;
}

@media screen and (max-width: 989px) {
     .modal-content {
          padding: var(--spacing-lg);
     }
}

@media screen and (min-width: 990px) {
     .flex-column .btn {
          margin-top: var(--spacing-sm);
     }
}

/* ===================================
    Hero Carousel
    =================================== */

.hero-carousel {
     position: relative;
     height: fit-content;
     overflow: hidden;
}

.carousel-container {
     position: relative;
     width: 100%;
     height: fit-content;
     overflow: hidden;
}

.carousel-track {
     display: flex;
     align-items: stretch;
     flex-wrap: nowrap;
     width: max-content;
     position: relative;
     transition: transform var(--transition-base) ease-in-out;
}

.carousel-slide {
     width: 100vw;
     height: auto;
}

.carousel-content {
     position: relative;
     height: 100%;
     display: flex;
     align-items: center;
     z-index: 10;
     padding: var(--spacing-sm) 0 var(--spacing-3xl);
     background-image: var(--bg-mobile);
     background-position: center;
     background-size: cover;
     overflow: hidden;
}

.hero-content {
     display: flex;
     flex-direction: column-reverse;
     flex-wrap: nowrap;
     justify-content: start;
     align-items: center;
     gap: var(--spacing-md);
     height: 100%;
}

.hero-text {
     position: relative;
     width: 100%;
     text-align: center;
     align-items: center;
     z-index: 1;
}

.hero-image {
     position: relative;
     z-index: 0;
     width: 100%;
     height: auto;
}

.hero-image .main {
     width: 100%;
     height: auto;
}

.hero-image .main.max-height {
     height: 100%;
     max-height: 600px;
     object-fit: cover;
}

.hero-image .decoration {
     position: absolute;
     z-index: 1;
}

.slide-1 .hero-image .decoration, .slide-4 .hero-image .decoration {
     bottom: -6%;
     left: -12.5%;
     width: 22.5%;
     height: auto;
     transform: rotate(60deg);
}

.slide-2 .hero-image .main {
     height: 100%;
     width: 100%;
     object-fit: cover;
}

.slide-2 .hero-image .decoration {
     bottom: -6%;
     right: -18.2%;
     width: 44.3%;
     height: auto;
     transform: rotate(15deg);
}

.slide-3 .hero-image .decoration {
     width: 28.6%;
     height: auto;
     left: -18.3%;
     bottom: -16.5%;
     transform: rotate(60deg);
}

@media screen and (max-width: 989px) {
     .hero-image .main {
          border-radius: var(--radius-md);
     }

     .slider-3 .hero-image .main {
          border-radius: unset;
     }

     .hero-image .main.max-height {
          max-height: 77.5vw;
     }
}

@media (min-width: 990px) {
     .carousel-content {
          background-image: var(--bg);
          background-repeat: no-repeat;
          background-position: center;
          background-size: 2560px;
          padding: var(--spacing-xl) 0;
     }

     .carousel-content:has(.slide-2) {
          padding: 0;
     }

     .hero-content {
          flex-direction: row;
          justify-content: space-between;
     }

     .hero-text {
          max-width: 34rem;
          width: 50%;
          text-align: left;
          align-items: start;
     }

     .hero-image {
          width: 50%;
     }

     .slide-1 .hero-image, .slide-4 .hero-image {
          right: calc(-1 * var(--spacing-xl));
     }

     .slide-1 .hero-image .main, .slide-4 .hero-image .main {
          border-radius: var(--radius-xl);
     }

     .slide-1 .hero-image .decoration,
     .slide-3 .hero-image .decoration,
     .slide-4 .hero-image .decoration {
          left: unset;
          bottom: 0;
          right: -8%;
          width: 26.3%;
          transform: rotate(45deg);
     }

     .slide-2 .hero-image {
          width: 53%;
          right: max(-115px, min(calc(-1 * var(--spacing-xl)), calc(var(--max-width-container) / 2 - 50vw - var(--spacing-xl) - 3px)));
          height: 100%;
     }

     .slide-2 .hero-image .main {
          width: 100%;
          height: 100%;
          object-fit: cover;
     }

     .slide-2 .hero-image .decoration {
          bottom: 64.7%;
          right: 85%;
          width: 49.4%;
     }

     .slide-3 .hero-image {
          width: 41.1%;
     }

     .slide-4 .hero-image {
          width: 52.6%;
     }
}

@media (min-width: 82rem) {
     .slide-1 .hero-image {
          right: -8%;
     }
}

/* Carousel Controls */
.carousel-control {
     position: absolute;
     top: 25%;
     transform: translateY(-50%);
     background-color: var(--color-line);
     color: var(--color-text);
     padding: 0.675rem;
     z-index: 20;
     transition: all var(--transition-base);
}

.carousel-control:hover {
     box-shadow: var(--shadow-md);
}

.carousel-control.prev {
     left: 0;
     border-radius: 0 50% 50% 0;
}

.carousel-control.next {
     right: 0;
     border-radius: 50% 0 0 50%;
}

.carousel-control svg {
     width: 0.75rem;
     height: auto;
}

/* Carousel Indicators */
.carousel-indicators {
     position: absolute;
     bottom: 2rem;
     left: 50%;
     transform: translateX(-50%);
     display: flex;
     gap: 0.5rem;
     z-index: 20;
}

.indicator {
     width: 0.75rem;
     height: 0.75rem;
     border-radius: 50%;
     border: 1px solid var(--color-button);
     transition: all var(--transition-base);
}

.indicator.active {
     background-color: var(--color-button);
}

.carousel-container:has(.carousel-slide.secondary.active) .indicator {
     border-color: var(--color-white);
}

.carousel-container:has(.carousel-slide.secondary.active) .indicator.active {
     background-color: var(--color-white);
}

@media screen and (min-width: 990px) {
     .carousel-control {
          top: 50%;
     }
}

/* ===================================
    About Section
    =================================== */

.about-grid {
     display: grid;
     grid-template-columns: 1fr;
     gap: var(--spacing-lg);
     align-items: stretch;
}

.about-image {
    position: relative;
    width: 100%;
    height: 100%;
}

.about-image img {
     position: sticky;
     top: 120px;
     border-radius: var(--radius-xl);
     width: 100%;
     height: auto;
}

.about-image img[data-accordion-image] {
     transition: opacity 0.2s ease;
}

.about-image img[data-accordion-image].is-switching {
     opacity: 0.4;
}

.about-image.no-radius {
    border-radius: 0;
}

.transition-section {
     position: relative;
}

.transition-cards-grid {
     display: grid;
     grid-template-columns: 1fr;
     gap: var(--spacing-sm);
     margin-top: var(--spacing-sm);
}

.transition-card {
     text-align: left;
     padding: var(--spacing-md);
     border-radius: var(--radius-md);
     border: 1px solid rgba(30, 72, 84, 0.1);
     background-color: rgba(255, 255, 255, 0.78);
     box-shadow: var(--shadow-sm);
}

.transition-card.reveal-ready {
     opacity: 0;
     transform: translateY(18px);
     transition: opacity 0.6s ease, transform 0.6s ease;
     transition-delay: var(--reveal-delay, 0ms);
}

.transition-card.reveal-ready.in-view {
     opacity: 1;
     transform: translateY(0);
}

.transition-icon {
     display: inline-flex;
     align-items: center;
     justify-content: center;
     width: 3.2rem;
     height: 3.2rem;
     border-radius: 50%;
     margin-bottom: var(--spacing-xs);
     color: var(--color-text-secondary);
     background: var(--color-background);
}

.transition-icon svg {
     width: 2.4rem;
     height: 2.4rem;
     display: block;
}

.transition-card h3 {
     margin-bottom: var(--spacing-xs);
}

.transition-card p {
     line-height: 1.55;
}

@media (min-width: 750px) {
     .transition-cards-grid {
          grid-template-columns: repeat(2, minmax(0, 1fr));
     }
}

@media (min-width: 990px) {
     .transition-cards-grid {
          grid-template-columns: repeat(4, minmax(0, 1fr));
     }
}

@media screen and (max-width: 989px) {
     .about-image {  
        grid-row: 1;
        border-radius: var(--radius-md);
     }
}

@media (min-width: 990px) {
     .about-grid {
          grid-template-columns: 1fr 1fr;
     }
}

/* ===================================
   Evidence Section
   =================================== */

.evidence-section {
     position: relative;
}

.evidence-card {
     padding: var(--spacing-sm);
     border-radius: var(--radius-lg);
     box-shadow: var(--shadow-sm);
}

.evidence-head h2 {
     max-width: 45rem;
}

.evidence-points {
     display: grid;
     grid-template-columns: 1fr;
     gap: var(--spacing-sm);
}

.evidence-point {
     display: flex;
     flex-direction: column;
     align-items: flex-start;
     gap: var(--spacing-sm);
     padding: var(--spacing-sm);
     border-radius: var(--radius-md);
     background: var(--color-white);
     border: 1px solid rgba(30, 72, 84, 0.08);
}

.evidence-point > * {
     color: var(--color-button-text);
}

.evidence-icon {
     display: inline-flex;
     align-items: center;
     justify-content: center;
     width: 2.4rem;
     height: 2.4rem;
     border-radius: 50%;
     color: var(--color-button-text);
     background: var(--color-button);
     border: 1px solid rgba(30, 72, 84, 0.14);
}

.evidence-icon svg {
     width: 1.6rem;
     height: auto;
}

@media (min-width: 750px) {
     .evidence-card {
        padding: var(--spacing-xl);
     }

     .evidence-points {
          grid-template-columns: repeat(3, minmax(0, 1fr));
     }
}

/* ===================================
    Projects Section
    =================================== */

.projects-section {
     background-color: var(--color-gray-50);
}

.projects-card {
     border-radius: var(--radius-md);
     padding: var(--spacing-base);
     display: flex;
     flex-direction: column-reverse;
     gap: var(--spacing-lg);
     box-shadow: var(--shadow-md);
}

.projects-section.internal .projects-card {
     flex-direction: column;
     background-color: var(--color-white);
}

.projects-card > * {
     width: 100%;
     flex-grow: 1;
}

.project-tags {
     display: flex;
     flex-wrap: wrap;
     gap: var(--spacing-xs);
}

.tag {
     border: 1px solid var(--color-link);
     background-color: transparent;
     color: var(--color-link);
     padding: var(--spacing-xs) var(--spacing-sm);
     border-radius: var(--radius-full);
     font-size: var(--font-size-base);
     text-transform: uppercase;
     font-family: var(--font-family-body);
     transition: background var(--transition-base) ease, color var(--transition-base) ease, transform var(--transition-base) ease;
}

.tag:hover,
.tag:focus {
     transform: translateY(-1px);
     box-shadow: 0 6px 18px rgba(15, 15, 25, 0.04);
}

.tag.active,
.tag[aria-selected="true"] {
     background-color: var(--color-link);
     color: var(--color-button-text);
}

.project-panel {
     display: none;
     opacity: 0;
     transform: translateY(6px);
     transition: opacity var(--transition-base) ease, transform var(--transition-base) ease;
}

.project-panel.active {
     display: block;
     opacity: 1;
     transform: translateY(0);
}

.expand-toggle {
     width: fit-content;
}

.expandable-content {
     overflow: hidden;
}

.project-images {
     position: relative;
     height: auto;
     border-radius: inherit;
}

.project-figure {
     position: sticky;
     top: 120px;
     display: flex;
     align-items: center;
     justify-content: center;
     opacity: 0;
     transform: scale(1.02);
     transition: opacity 0.5s cubic-bezier(0.2, 0.9, 0.2, 1), transform 0.5s cubic-bezier(0.2, 0.9, 0.2, 1);
     z-index: 1;
     border-radius: inherit;
}

.project-figure:first-child {
     opacity: 1;
     transform: none;
     z-index: 2;
}

.project-figure.active {
     opacity: 1;
     transform: none;
     z-index: 3;
}

.project-figure img {
     width: 100%;
     height: auto;
     display: flex;
     border-radius: inherit;
}

@media screen and (max-width: 989px) {
     .tag {
          font-size: var(--font-size-sm);
     }
}

@media (min-width: 990px) {
     .projects-card {
          flex-direction: row;
          padding: var(--spacing-lg);
          flex-wrap: nowrap;
          border-radius: var(--radius-xl);
     }

     .projects-section.internal .projects-card {
          flex-direction: row;
     }

     .projects-card > * {
          width: 50%;
     }

     .projects-card > *:first-child {
          max-width: 33rem;
     }
}

@media (min-width: 1200px) {
     .projects-card {
          padding: var(--spacing-xl);
     }
}

@media (min-width: 1400px) {
     .projects-card {
          padding: var(--spacing-2xl);
     }
}

/* ===================================
    Gallery Section
    =================================== */

.gallery-carousel .gallery-viewport {
     overflow: hidden;
     width: 100%;
}

.gallery-carousel .gallery-track {
     display: flex;
     gap: 16px;
     align-items: center;
     width: max-content;
     animation: gallery-scroll 24s linear infinite;
     will-change: transform;
}

.gallery-carousel .gallery-item {
     flex: 0 0 auto;
     width: 280px;
     height: 520px;
     border-radius: var(--radius-xl);
     overflow: hidden;
     background: var(--color-gray-placeholder);
}

.gallery-carousel .gallery-item img {
     width: 100%;
     height: 100%;
     object-fit: cover;
     display: block;
}

@keyframes gallery-scroll {
     from { transform: translateX(0); }
     to { transform: translateX(-50%); }
}

/* ===================================
    Contact Form Section
    =================================== */

.contact-form-section {
     position: relative;
     overflow: hidden;
}

.contact-grid {
     display: grid;
     gap: var(--spacing-lg);
     align-items: start;
}

.contact-intro {
     position: relative;
}

.contact-illustration {
     position: absolute;
     bottom: 0;
     left: 0;
     width: 28.5rem;
     max-width: 120vw;
     height: auto;
     z-index: -1;
}

.contact-form {
     padding-bottom: 28rem;
}

.contact-form label {
     font-size: var(--font-size-base);
}

.contact-form input,
.contact-form select,
.contact-form textarea {
     width: 100%;
     padding: var(--spacing-xs) var(--spacing-sm);
     border: 1px solid var(--color-gray);
     background-color: transparent;
     border-radius: var(--radius-sm);
     font-family: inherit;
     font-size: var(--font-size-base);
     transition: all var(--transition-base);
     height: 3.125rem;
}

.contact-form textarea {
     height: 8rem;
     width: 100% !important;
     min-height: 3.125rem;
}

.contact-form input:focus,
.contact-form select:focus,
.contact-form textarea:focus {
     outline: none;
     border-color: var(--color-button);
     box-shadow: 0 0 0 3px rgba(22, 163, 74, 0.1);
}

.form-feedback {
     min-height: 1.5rem;
     margin: 0;
     font-size: 0.95rem;
     line-height: 1.4;
}

.form-feedback.is-error {
     color: #b91c1c;
}

.form-feedback.is-success {
     color: #166534;
}

.form-feedback.is-info {
     color: #1d4ed8;
}

@media (min-width: 990px) {
     .contact-grid {
          grid-template-columns: 1fr 1fr;
     }

     .contact-illustration {
          width: 48.5%;
          max-width: 56rem;
     }

     .contact-form {
          padding-bottom: var(--spacing-xl);
     }

     .contact-form label {
          font-size: var(--font-size-md);
     }
}

/* ===================================
    Accordion Section
    =================================== */
.accordion-item {
    border-bottom: 1px solid var(--color-gray);
}

.accordion-header {
    padding: var(--spacing-base) 0;
    cursor: pointer;
    display: flex;
    justify-content: start;
    align-items: center;
    gap: var(--spacing-xs);
}

.accordion-content {
    overflow: hidden;
    transition: height 0.3s ease, padding 0.3s ease;
    height: 0px;
}

.accordion-item.active .accordion-content {
    height: auto;
    padding: 0 0 var(--spacing-base);
}

.accordion-header .chevron {
    width: 30px;
    height: auto;
    transition: transform 0.3s ease;
    transform: rotate(180deg);
    margin-left: auto;
}

.accordion-item.active .accordion-header .chevron {
    transform: rotate(0deg);
}

/* ===================================
     Atendimentos Hero Section
     =================================== */

.atendimentos-hero-section {
     position: relative;
     --img-h: 0px; /* JS vai preencher */
     color: var(--color-white);
     --color-text-secondary: var(--color-white);
}

.atendimentos-hero-section::after {
     content: "";
     position: absolute;
     width: 100%;
     height: calc(100% - var(--img-h)*0.4);
     z-index: 0;
     top: 0;
     left: 0;
     background-color: var(--color-button);
     background-image: url('/assets/images/atendimentos-banner_bg-mobile.webp');
     background-repeat: no-repeat;
     background-position: center;
     background-size: cover;
}

.atendimentos-hero-section .container {
     z-index: 1;
     position: relative;
}

.atendimentos-hero-images {
     display: grid;
     grid-template-columns: 3fr 4fr 3fr;
     gap: var(--spacing-xs);
     align-items: stretch;
}

.atendimentos-hero-images img {
     width: 100%;
     height: auto;
     object-fit: cover;
     border-radius: var(--radius-md)
}

@media screen and (min-width: 990px) {
     .atendimentos-hero-section::after {
          background-image: url('/assets/images/atendimentos-banner_bg.webp');
     }

     .atendimentos-hero-images {
          grid-template-columns: 1.75fr 1.75fr 3fr 1.75fr 1.75fr;
          gap: var(--spacing-sm);
     }

     .atendimentos-hero-images img {
          border-radius: var(--radius-xl)
     }
}

.onde {
     position: relative;
}

.onde .decorations {
     position: absolute;
     right: 53.3%;
     top: 72%;
     width: 279px;
     height: auto;
     z-index: -1;
}

.onde .container {
     display: grid;
     grid-template-columns: 1fr;
     gap: var(--spacing-md);
}

.onde-text {
     width: 100%;
     justify-content: space-between;
     line-height: 1.1;
}

.onde-map > * {
     width: 100%;
     height: auto;
     aspect-ratio: 1.02;
     border: 5px solid #fff;
     border-radius: var(--radius-md);
     box-shadow: 0 146px 88px 0 rgba(0, 0, 0, 0.02), 0 65px 65px 0 rgba(0, 0, 0, 0.03), 0 16px 36px 0 rgba(0, 0, 0, 0.03);
}

@media screen and (max-width: 989px) {
     .onde-text .onde-image {
          order: -1;
     }
}

@media screen and (min-width: 990px) {
     .onde .decorations {
          top: 22.65%;
          left: 70.55%;
          width: 677px;
     }

     .onde .container {
          grid-template-columns: 1fr 1fr;
     }


     .onde-text {
          max-width: 525px;
     }

     .onde-map > * {
          height: 100%;
          max-width: 590px;
          border: 7px solid #fff;
     }
}

.webinar-hero-section {
     position: relative;
     overflow: hidden;
     min-height: 17.5rem;
     display: flex;
     align-items: center;
}

.webinar-hero-section::after {
     content: '';
     position: absolute;
     top: 0;
     left: 0;
     right: 0;
     bottom: 0;
     background-image: var(--bg);
     background-repeat: no-repeat;
     background-size: 2560px auto;
     background-position: center;
     z-index: 0;
}

.webinar-hero-content {
     position: relative;
     z-index: 1;
}

@media screen and (max-width: 375px) {
     .webinar-hero-content .hero-title {
          font-size: 1.5rem;
     }
}

.categories-section {
     border-bottom: 2px solid #DFDDDB;
     background: var(--color-white);
     overflow: hidden;
     width: 100%;
}

.categories-scroll {
     display: flex;
     gap: var(--spacing-lg);
     overflow-x: auto;
     overflow-y: hidden;
     scrollbar-width: thin;
     scrollbar-color: var(--color-line) var(--color-white);
     -webkit-overflow-scrolling: touch;
}

.categories-scroll::-webkit-scrollbar {
     height: 6px;
}

.categories-scroll::-webkit-scrollbar-track {
     background: var(--color-white);
     border-radius: 3px;
}

.categories-scroll::-webkit-scrollbar-thumb {
     background: var(--color-line);
     border-radius: 3px;
}

.category-btn {
     flex-shrink: 0;
     padding: var(--spacing-md) 0;
     font-size: var(--font-size-base);
     font-family: var(--font-family-heading);
     font-weight: 400;
     color: var(--color-text);
     cursor: pointer;
     transition: all 0.3s ease;
     white-space: nowrap;
     border-bottom: 4px solid transparent;
}

.category-btn:hover, .category-btn.active {
     border-color: var(--color-link);
}

.videos-grid {
     display: grid;
     grid-template-columns: repeat(auto-fill, minmax(282px, 1fr));
     gap: var(--spacing-xl) var(--spacing-lg);
}

.video-card {
     transition: transform 0.3s ease, box-shadow 0.3s ease;
     cursor: pointer;
}

.video-card:hover {
     transform: translateY(-4px);
}

.video-thumbnail {
     position: relative;
     width: 100%;
     padding-top: 78.38%;
     overflow: hidden;
}

.video-thumbnail-bg {
     position: absolute;
     top: 0;
     left: 0;
     right: 0;
     bottom: 0;
     display: flex;
     align-items: center;
     justify-content: center;
     background-color: rgba(0, 0, 0, 1);
     border-radius: var(--radius-md);
}

.video-thumbnail-bg::after {
     content: "";
     position: absolute;
     top: 0;
     left: 0;
     right: 0;
     bottom: 0;
     background-image: var(--thumbnail);
     background-size: cover;
     background-position: center;
     opacity: 0.6;
     border-radius: inherit;
}

.play-button {
     position: absolute;
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);
     width: 114px;
     height: 114px;
     border-radius: 50%;
     border: 3px solid var(--color-white);
     display: flex;
     align-items: center;
     justify-content: center;
     transition: all 0.3s ease;
}

.video-card:hover .play-button {
     transform: translate(-50%, -50%) scale(1.1);
     box-shadow: 0 4px 12px rgba(0,0,0,0.2);
}

.play-icon {
     width: 0;
     height: 0;
     border-left: 40px solid var(--color-white);
     border-top: 24px solid transparent;
     border-bottom: 24px solid transparent;
     margin-left: 8px;
}

.load-more-container {
     text-align: center;
     margin-top: var(--spacing-lg);
}

.load-more-container .btn:disabled {
     opacity: 0.3;
     cursor: not-allowed;
     transform: none;
     box-shadow: none;
}

.load-more-container .btn:disabled:hover {
     background-color: var(--color-button);
     color: var(--color-button-text);
     border: none;
}

@media (max-width: 989px) {
     .videos-section .container {
          max-width: unset;
     }
}

@media (max-width: 749px) {
     .webinar-hero-section::after {
          background-image: var(--bg-mobile);
          background-repeat: no-repeat;
          background-size: cover;
          background-position: center;
     }

     .videos-grid {
          grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
          gap: var(--spacing-sm);
     }

     .play-button {
          width: 80px;
          height: 80px;
          border: 2px solid var(--color-white);
     }

     .play-icon {
          border-left: 30px solid var(--color-white);
          border-top: 18px solid transparent;
          border-bottom: 18px solid transparent;
          margin-left: 6px;
     }

     .categories-scroll {
          padding: 0 var(--spacing-base);
     }

     .video-thumbnail {
          padding-top: 65.53%;
     }
}

.video-modal {
     position: fixed;
     inset: 0;
     display: none;
     z-index: 9999;
}

.video-modal.is-open {
     display: flex;
     align-items: center;
     justify-content: center;
}

.video-modal__backdrop {
     position: absolute;
     inset: 0;
     background: rgba(0,0,0,.7);
}

.video-modal__content {
     position: relative;
     width: 100%;
     max-width: var(--max-width-container);
     max-height: 90vh;
     background: #000;
     border-radius: 12px;
     overflow: hidden;
     z-index: 1;
}

.video-modal__player {
     aspect-ratio: 16 / 9;
     width: 100%;
     height: auto;
}

.video-modal__player iframe {
     width: 100%;
     height: 100%;
     display: block;
}

.video-modal__close {
     position: absolute;
     top: 10px;
     right: 10px;
     z-index: 2;
     background: rgba(0,0,0,.6);
     color: #fff;
     border: 0;
     width: 40px;
     height: 40px;
     border-radius: 999px;
     font-size: 24px;
     cursor: pointer;
     transition: background var(--transition-base);
}

.video-modal__close:hover {
     background: rgba(0,0,0,.8);
}