/*---------------------------------------
                  HEADER TRANSPARENCY STYLES             
                -----------------------------------------*/
                /* Make navbar transparent */
                .navbar {
                    background: transparent !important;
                    background-color: transparent !important;
                    background-image: none !important;
                    z-index: 99 !important;
                    padding-top: 15px !important;
                    padding-bottom: 15px !important;
                    position: relative !important;
                }

                /* Override Bootstrap navbar styles */
                .navbar.navbar-expand-lg {
                    background: transparent !important;
                    background-color: transparent !important;
                    background-image: none !important;
                }

                /* Override any Bootstrap navbar variants */
                .navbar-light,
                .navbar-dark,
                .navbar[class*="bg-"] {
                    background: transparent !important;
                    background-color: transparent !important;
                    background-image: none !important;
                }

                /*---------------------------------------
                  CUSTOM PROPERTIES ( VARIABLES )             
                -----------------------------------------*/
                :root {
                    --white-color:                  #ffffff;
                    --primary-color:                #81B29A;
                    --secondary-color:              #3D405B;
                    --section-bg-color:             #F4F1DE;
                    --custom-btn-bg-color:          #F2CC8F;
                    --custom-btn-bg-hover-color:    #E07A5F;
                    --dark-color:                   #000000;
                    --p-color:                      #717275;
                    --link-hover-color:             #000000;
            
                    --body-font-family:             'DM Sans', sans-serif;
            
                    --h1-font-size:                 42px;
                    --h2-font-size:                 36px;
                    --h3-font-size:                 28px;
                    --h4-font-size:                 24px;
                    --h5-font-size:                 22px;
                    --h6-font-size:                 20px;
                    --p-font-size:                  18px;
                    --menu-font-size:               16px;
                    --btn-font-size:                14px;
            
                    --border-radius-large:          100px;
                    --border-radius-medium:         20px;
                    --border-radius-small:          10px;
            
                    --font-weight-normal:           400;
                    --font-weight-medium:           500;
                    --font-weight-bold:             700;
                }
            
                body {
                    background-color: var(--white-color);
                    font-family: var(--body-font-family); 
                }
            
                /*---------------------------------------
                  NAVBAR SECTION             
                -----------------------------------------*/
                .navbar {
                    background: transparent;
                    z-index: 99;
                    padding-top: 15px;
                    padding-bottom: 15px;
                }
            
                .navbar .navbar-brand {
                    font-size: var(--h4-font-size);
                    font-weight: var(--font-weight-bold);
                    color: var(--white-color);
                    text-decoration: none;
                }
            
                .navbar-brand-text small {
                    display: block;
                    font-size: 10px;
                    text-transform: uppercase;
                }
            
                .navbar-nav .nav-link {
                    color: var(--white-color);
                    font-size: var(--menu-font-size);
                    font-weight: var(--font-weight-medium);
                    padding: 10px;
                    transition: color 0.3s;
                }
            
                .navbar-nav .nav-link:hover {
                    color: var(--link-hover-color);
                }
            
                .navbar-toggler {
                    border: none;
                    outline: none;
                }
            
                .navbar-toggler-icon {
                    background-color: var(--dark-color);
                    width: 30px;
                    height: 2px;
                    position: relative;
                }
            
                .navbar-toggler-icon::before,
                .navbar-toggler-icon::after {
                    content: '';
                    position: absolute;
                    left: 0;
                    width: 30px;
                    height: 2px;
                    background-color: var(--dark-color);
                }
            
                .navbar-toggler-icon::before {
                    top: -8px;
                }
            
                .navbar-toggler-icon::after {
                    top: 8px;
                }
            
                .custom-border-btn {
                    background: transparent;
                    border: 2px solid var(--custom-btn-bg-color);
                    color: var(--custom-btn-bg-color);
                }
            
                .custom-border-btn:hover {
                    background: var(--custom-btn-bg-color);
                    color: var(--white-color);
                }
                
/*---------------------------------------
  NAVIGATION BAR & OFFCANVAS              
-----------------------------------------*/
.offcanvas {
    background-color: var(--primary-color);
    padding: 30px;
  }
  
  .offcanvas.offcanvas-end {
    border-left: 0;
  }
  
  .offcanvas-header .btn-close {
    transition: all 0.3s;
  }
  
  .offcanvas-header .btn-close:hover {
    transform: rotate(180deg);
  }
  
  .offcanvas svg {
    position: absolute;
    bottom: 0;
    right: 0;
    left: 0;
  }
  
  .sticky-wrapper {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
  }
  
  
  .navbar {
    background: transparent;
    z-index: 99;
    padding-top: 15px;
    padding-bottom: 15px;
  }
  
  .navbar-brand,
  .navbar-brand:hover {
    font-size: var(--h4-font-size);
    font-weight: var(--font-weight-bold);
    display: block;
    color: var(--dark-color);
    max-width: 48px;
  }
  
  .navbar .navbar-brand,
  .navbar .navbar-brand:hover {
    color: var(--white-color);
  }
  
  .navbar .navbar-brand-image {
    filter: none;
  }
  
  .navbar-brand-image {
    width: 48px;
    height: 48px;
  }
  
  .navbar-brand-text {
    line-height: normal;
    margin-left: 10px;
    position: relative;
    bottom: 5px;
  }
  
  .navbar-brand-text small {
    display: block;
    font-size: 10px;
    line-height: 1;
    text-transform: uppercase;
  }
  
  .navbar-expand-lg .navbar-nav .nav-link {
    border-radius: var(--border-radius-large);
    margin: 10px;
    padding: 10px;
  }
  
  .navbar-nav .nav-link {
    display: inline-block;
    color: var(--white-color);
    font-size: var(--menu-font-size);
    font-weight: var(--font-weight-medium);
    padding-top: 15px;
    padding-bottom: 15px;
  }
  
  .navbar-nav .nav-link.active, 
  .navbar-nav .nav-link:hover {
    color: var(--link-hover-color);
  }
  
  .navbar .dropdown-menu {
    background: var(--white-color);
    box-shadow: 0 1rem 3rem rgba(0,0,0,.175);
    border: 0;
    display: inherit;
    opacity: 0;
    min-width: 9rem;
    margin-top: 20px;
    padding: 13px 0 10px 0;
    transition: all 0.3s;
    pointer-events: none;
  }
  
  .navbar .dropdown-menu::before {
    content: "";
    width: 0;
    height: 0;
    border-left: 20px solid transparent;
    border-right: 20px solid transparent;
    border-bottom: 15px solid var(--white-color);
    position: absolute;
    top: -10px;
    left: 10px;
  }
  
  .navbar .dropdown-item {
    display: inline-block;
    color: var(--p-color);
    font-size: var(--menu-font-size);
    font-weight: var(--font-weight-medium);
    position: relative;
  }
  
  .navbar .dropdown-item.active, 
  .navbar .dropdown-item:active,
  .navbar .dropdown-item:focus, 
  .navbar .dropdown-item:hover {
    background: transparent;
    color: var(--link-hover-color);
  }
  
  .navbar .dropdown-toggle::after {
    content: "\f282";
    display: inline-block;
    font-family: bootstrap-icons !important;
    font-size: var(--copyright-font-size);
    font-style: normal;
    font-weight: normal !important;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    vertical-align: -.125em;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    position: relative;
    left: 2px;
    border: 0;
  }
  
  @media screen and (min-width: 992px) {
    .navbar .dropdown:hover .dropdown-menu {
      opacity: 1;
      margin-top: 0;
      pointer-events: auto;
    }
  }
  
  .navbar-toggler {
    border: 0;
    padding: 0;
    cursor: pointer;
    margin: 0;
    width: 30px;
    height: 35px;
    outline: none;
  }
  
  .navbar-toggler:focus {
    outline: none;
    box-shadow: none;
  }
  
  .navbar-toggler[aria-expanded="true"] .navbar-toggler-icon {
    background: transparent;
  }
  
  .navbar-toggler[aria-expanded="true"] .navbar-toggler-icon:before,
  .navbar-toggler[aria-expanded="true"] .navbar-toggler-icon:after {
    transition: top 300ms 50ms ease, -webkit-transform 300ms 350ms ease;
    transition: top 300ms 50ms ease, transform 300ms 350ms ease;
    transition: top 300ms 50ms ease, transform 300ms 350ms ease, -webkit-transform 300ms 350ms ease;
    top: 0;
  }
  
  .navbar-toggler[aria-expanded="true"] .navbar-toggler-icon:before {
    transform: rotate(45deg);
  }
  
  .navbar-toggler[aria-expanded="true"] .navbar-toggler-icon:after {
    transform: rotate(-45deg);
  }
  
  .navbar-toggler .navbar-toggler-icon {
    background: var(--white-color);
    transition: background 10ms 300ms ease;
    display: block;
    width: 30px;
    height: 2px;
    position: relative;
  }
  
  .navbar-toggler .navbar-toggler-icon:before,
  .navbar-toggler .navbar-toggler-icon:after {
    transition: top 300ms 350ms ease, -webkit-transform 300ms 50ms ease;
    transition: top 300ms 350ms ease, transform 300ms 50ms ease;
    transition: top 300ms 350ms ease, transform 300ms 50ms ease, -webkit-transform 300ms 50ms ease;
    position: absolute;
    right: 0;
    left: 0;
    background: var(--white-color);
    width: 30px;
    height: 2px;
    content: '';
  }
  
  .navbar-toggler .navbar-toggler-icon::before {
    top: -8px;
  }
  
  .navbar-toggler .navbar-toggler-icon::after {
    top: 8px;
  }
            
                /*---------------------------------------
                  VIDEO SECTION             
                -----------------------------------------*/

                .video-section {
                    position: relative;
                    width: 100vw;
                    height: 100vh;
                    overflow: hidden;
                    background-color: black;
                }
            
                #background-video {
                    position: absolute;
                    top: 50%;
                    left: 50%;
                    min-width: 100%;
                    min-height: 100%;
                    object-fit: cover;
                    transform: translate(-50%, -50%);
                }
            
                .video-text-content {
                 position: absolute;
                 bottom: 5%;
                 left: 5%;
                 color: white;
                 text-align: left;
                } 

            
                .small-text {
                    font-size: 1.2em;
                    font-weight: 400;
                }
            
                .video-text-content h1 {
                    font-size: 2.5em;
                    font-weight: 700;
                    margin: 0.5em 0;
                }
            
                .video-btn {
                    display: inline-block;
                    padding: 10px 20px;
                    border: 2px solid white;
                    color: white;
                    text-decoration: none;
                    font-weight: 500;
                    transition: background-color 0.3s, color 0.3s;
                }
            
                .video-btn:hover {
                    background-color: white;
                    color: black;
                }

                /*---------------------------------------
                  LIFESTYLE SECTION             
                -----------------------------------------*/

                .lifestyle-categories {
                    text-align: center;
                    padding: 2em;
                }
            
                .categories-container {
                    display: grid;
                    grid-template-columns: repeat(4, 1fr);
                    gap: 1.5em;
                    max-width: 1400px;
                    margin: 0 auto;
                }
            
                .category-item {
                    position: relative;
                    flex: 1;
                }
            
                .category-item img {
                    width: 100%;
                    height: auto;
                    border-radius: 8px;
                }
            
                .category-label {
                    position: absolute;
                    bottom: 1em;
                    left: 1em;
                    color: white;
                    font-size: 1.5em;
                    font-weight: bold;
                    background-color: rgba(0, 0, 0, 0.6);
                    padding: 0.5em;
                    border-radius: 4px;
                    text-decoration: none;
                }
            
                .category-label:hover {
                    background-color: rgba(255, 255, 255, 0.8);
                    color: black;
                }

                 /*---------------------------------------
                  THUNDER SECTION             
                -----------------------------------------*/

                .thunder-celebration .article-component {
                    display: flex;
                    flex-direction: column;
                    align-items: center;
                    justify-content: center;
                    text-align: center;
                }
        
                .thunder-celebration picture {
                    display: flex;
                    justify-content: center;
                    width: 100%;
                }
        
                .thunder-celebration img {
                    max-width: 100%;
                    height: auto;
                    margin: 0 auto;
                }
        
                .thunder-btn-link-secondary {
                    display: inline-block;
                    padding: 10px 20px;
                    border: 1px solid #000;
                    text-decoration: none;
                    font-size: 16px;
                    color: #000;
                    max-width: fit-content; /* Butonun genişliğini içeriğine göre ayarla */
                    width: auto; /* Varsayılan genişliği kaldır */
                }
        
                .thunder-btn-link-secondary span {
                    float: right;
                }


                 /*---------------------------------------
                  İLETİSİM BANNER SECTION             
                -----------------------------------------*/
                .banner-section {
                    width: 100%;
                    height: auto;
                    position: relative; /* Banner içindeki yazıyı konumlandırmak için relative yaptık */
                    overflow: hidden; /* Görselin taşmasını önlemek için */
                }
            
                .banner-image {
                    width: 100%;
                    max-height: 400px; /* İstediğin maksimum yüksekliği sağladım */
                    object-fit: cover; /* Görselin boyutunu tam ekran doldurmasını sağlar */
                }
            
                .banner-text {
                    position: absolute;
                    top: 50%; /* Dikeyde ortalar */
                    left: 50%; /* Yatayda ortalar */
                    transform: translate(-50%, -50%); /* Ortalamak için translate kullanılır */
                    color: white; /* Yazı rengi */
                    font-size: 2.5rem; /* Yazı boyutu */
                    text-align: center; /* Yazıyı ortalar */
                    font-weight: bold; /* Kalın yazı */
                }
            
                /* Ekran boyutu küçüldüğünde yazı boyutunu küçültmek için */
                @media (max-width: 768px) {
                    .banner-text {
                        font-size: 1.5rem;
                    }
                }

                /*---------------------------------------
                  VIDEO SECTION STYLES             
                -----------------------------------------*/
                .video-section {
                    position: relative;
                    width: 100vw;
                    height: 100vh;
                    overflow: hidden;
                    background-color: black;
                }

                #background-video {
                    position: absolute;
                    top: 50%;
                    left: 50%;
                    min-width: 100%;
                    min-height: 100%;
                    object-fit: cover;
                    transform: translate(-50%, -50%);
                }

                .video-text-content {
                    position: absolute;
                    bottom: 5%;
                    left: 5%;
                    color: white;
                    text-align: left;
                }

                .small-text {
                    font-size: 1.2em;
                    font-weight: 400;
                }

                .video-text-content h1 {
                    font-size: 2.5em;
                    font-weight: 700;
                    margin: 0.5em 0;
                }

                .video-btn {
                    display: inline-block;
                    padding: 10px 20px;
                    border: 2px solid white;
                    color: white;
                    text-decoration: none;
                    font-weight: 500;
                    transition: background-color 0.3s, color 0.3s;
                }

                .video-btn:hover {
                    background-color: white;
                    color: black;
                }

                /*---------------------------------------
                  LIFESTYLE CATEGORIES STYLES             
                -----------------------------------------*/
                .lifestyle-categories {
                    text-align: center;
                    padding: 2em;
                }

                .lifestyle-categories h2 {
                    margin-bottom: 2em;
                }

                .categories-container {
                    display: grid;
                    grid-template-columns: repeat(4, 1fr);
                    gap: 1.5em;
                    max-width: 1400px;
                    margin: 0 auto;
                }

                .category-item {
                    position: relative;
                    flex: 1;
                    height: 400px;
                    overflow: hidden;
                }

                .category-img {
                    width: 100%;
                    height: 100%;
                    object-fit: cover;
                    border-radius: 8px;
                }

                .category-label {
                    position: absolute;
                    bottom: 1em;
                    left: 1em;
                    color: white;
                    font-size: 1.5em;
                    font-weight: bold;
                    background-color: rgba(0, 0, 0, 0.6);
                    padding: 0.5em;
                    border-radius: 4px;
                    text-decoration: none;
                }

                .category-label:hover {
                    background-color: rgba(255, 255, 255, 0.8);
                    color: black;
                }

                @media (max-width: 1200px) {
                    .categories-container {
                        grid-template-columns: repeat(2, 1fr);
                        gap: 1em;
                    }
                }

                @media (max-width: 768px) {
                    .categories-container {
                        grid-template-columns: 1fr;
                        gap: 1em;
                    }

                    .category-item {
                        width: 100%;
                        margin-bottom: 1em;
                    }
                }

                /*---------------------------------------
                  PRODUCT DESCRIPTION STYLES             
                -----------------------------------------*/
                .product-description-section {
                    background-color: #f8f9fa;
                }

                .feature-card {
                    background: white;
                    border-radius: 12px;
                    padding: 2rem;
                    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
                    transition: transform 0.3s ease, box-shadow 0.3s ease;
                    border: 1px solid #e9ecef;
                }

                .feature-card:hover {
                    transform: translateY(-5px);
                    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
                }

                .feature-icon {
                    text-align: center;
                }

                .feature-card h5 {
                    color: var(--secondary-color);
                    font-weight: 600;
                    margin-bottom: 1rem;
                }

                .feature-card p {
                    color: #6c757d;
                    line-height: 1.6;
                    margin-bottom: 0;
                }

                .specifications-card {
                    background: white;
                    border-radius: 12px;
                    padding: 2.5rem;
                    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
                    border: 1px solid #e9ecef;
                }

                .spec-item {
                    padding: 0.75rem 0;
                    border-bottom: 1px solid #f1f3f4;
                    color: #495057;
                }

                .spec-item:last-child {
                    border-bottom: none;
                }

                .spec-item strong {
                    color: var(--secondary-color);
                    font-weight: 600;
                }

                .youtube-video {
                    background: white;
                    border-radius: 12px;
                    padding: 2rem;
                    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
                    border: 1px solid #e9ecef;
                }

                .youtube-video h3 {
                    color: var(--secondary-color);
                    font-weight: 600;
                }

                @media (max-width: 768px) {
                    .feature-card {
                        padding: 1.5rem;
                    }
                    
                    .specifications-card {
                        padding: 1.5rem;
                    }
                    
                    .youtube-video {
                        padding: 1.5rem;
                    }
                }