:root {
     /* --bg: #043a45; */
     --bg: #03384D;
     --teal: #0f6b74;
     --accent: #8AAB5E;
     --muted: #7fb3bd;
     --card: #083b3f;
     --glass: rgba(255, 255, 255, 0.03);
     --light-gray: #0F3141;
     --text-light: #85CEE4;
     --text-dark: #0D7594;
     --text-badge-blue: #03384D;
     --sub: #9fd8d6;
     --dark_blue: #0F7492;
     --light_blue: #2195B8;
     --light-blue-3: #C2E7F2;
     --light-blue-4: #78BAD0;
     --white: #e6fff6;
     --black: #000000;
     --light-blue-2: #3AA3C3;
     --green-text: #506F28;
     --green-text2: #688b39;
     font-family: Inter, Arial, Helvetica, sans-serif;
 }

 @font-face {
     font-family: Calibri;
     src: url('../fonts/calibri-regular.ttf') format('truetype');
 }

 @font-face {
     font-family: Calibri-bold;
     src: url('../fonts/calibri-bold.ttf') format('truetype');
 }

 h6 {
     font-family: Calibri, Arial, Helvetica, sans-serif;
     color: var(--light-blue-2);
 }

 .chemicals h6 {
     color: var(--light-blue-4);
     line-height: 1.5;
 }

 .advantages_description {
     background-color: var(--light-gray);
     color: var(--accent);
     text-align: center;
     font-size: 1.2rem;

     span {
         display: block;
         font-size: 1.2rem;
         color: var(--accent);
         font-style: italic;
         text-decoration: underline;      
     }
 }

 .advantages-card-grid {
     display: grid;
     grid-template-columns: repeat(3, 1fr);
     gap: 15px;
 }

 .advantages-card {
     color: #d7f5df;
     padding: 10px;
     border-radius: 4px;
     position: relative;
     overflow: visible;
     /* IMPORTANT */
     z-index: 1;
 }

 .odd-child {
     background: #385723;
 }

 .even-child {
     background: #2E4E22;
 }

 .advantages-card.active {
     z-index: 10;
     /* bring above others */
 }

 .advantages-card-header {
     display: flex;
     /* justify-content: space-between; */
     align-items: center;
     flex-direction: column;
 }

 .advantages-card-header h3 {
     margin: 0;
     font-size: 14px;
 }

 .toggle-btn {
     background: none;
     border: none;
     color: var(--accent);
     font-size: 18px;
     cursor: pointer;
     transition: transform 0.3s ease;

     i {
         font-size: 1.25rem;
     }
 }

 .advantages-card.active .toggle-btn {
     transform: rotate(180deg);
 }

 /* 🔥 The magic */
 .advantages-card-content {
     position: absolute;
     left: 0;
     top: 85%;
     width: stretch;

     background: var(--light-gray);
     padding: 15px;
     border-radius: 6px;
     font-size: 1.2rem;

     opacity: 0;
     transform: translateY(-10px);
     pointer-events: none;

     transition: all 0.3s ease;
 }

 .advantages-card.active .advantages-card-content {
     opacity: 1;
     transform: translateY(10px);
     pointer-events: auto;
 }

 /* Responsive */
 @media (max-width: 900px) {
     .advantages-card-grid {
         grid-template-columns: repeat(2, 1fr);
     }
 }

 @media (max-width: 600px) {
     .advantages-card-grid {
         grid-template-columns: 1fr;
     }
 }

 /* ================= TABS ================= */
 .tabs {
     display: flex;
 }

 .tab {
     flex: 1;
     padding: 10px;
     text-align: center;
     /* background: #004F6A; */
     /* color: #3AA3C3; */
     color: var(--light-blue-4);
     cursor: pointer;
     font-size: 0.9rem;
     text-transform: uppercase;
     transition: 0.3s;
 }

 .tab:nth-child(odd) {
     background: #05435C;
 }

 .tab:nth-child(even) {
     background: #004F6A;
 }

 .tab.active {
     background: #E1F3F8;
     color: #03384D;
     font-weight: bold;
 }

 /* ================= CONTENT ================= */
 .tab-content {
     display: none;
     background: #E1F3F8;
     padding: 40px;
 }

 .tab-content.active {
     display: flex;
     gap: 30px;
 }

 .tab-popup {
     /* color: var(--white);
     font-size: 0.95rem; */
     color: var(--text-light);
     font-size: 1.2rem;
     text-align: center;
     margin-top: 2rem;
 }

 .tab-popup-click-here {
     color: var(--text-light);
     font-size: 1.2rem;
     text-align: center;
     margin-top: 2rem;
     font-style: italic;

     a {
         color: var(--white);
         text-decoration: underline;
     }
 }

 /* ===== embed youtube video ===== */

 .video-container {
    width: 100%;            /* Fills full width of parent */
    max-width: 1200px;       /* Prevents player from growing too large */
    margin: 0 auto;         /* Centers the container */
    aspect-ratio: 16 / 9;   /* Maintains 16:9 widescreen ratio */
}

.video-container iframe {
    width: 100%;            /* Stretches iframe width */
    height: 100%;           /* Stretches iframe height */
    
}
 /* ===== Modal Backdrop (darker, premium feel) ===== */
 .modal-backdrop.show {
     opacity: 0.75;
     background-color: #072f3a;
 }

 /* ===== Modal Dialog ===== */
 #industriesModal .modal-dialog {
     max-width: 750px;
     margin-top: 6vh;
 }

 /* ===== Modal Container ===== */
 #industriesModal .modal-content {
     border: none;
     border-radius: 4px;
     overflow: hidden;
     background: #C2E7F2;
     color: #d7f5df;
     box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
     animation: modalSlide 0.35s ease;
 }

 /* ===== Header ===== */
 #industriesModal .modal-header {
     border-bottom: 1px solid rgba(255, 255, 255, 0.9);
     padding: 10px 20px;
 }

 #industriesModal .modal-title {
     font-size: 24px;
     /* letter-spacing: 1px; */
     text-transform: uppercase;
     font-weight: bold;
     color: #506F28;
 }

 /* Close button styling */
 #industriesModal .btn-close {
     color: #506F28;
     transition: opacity 0.3s ease;
 }

 #industriesModal .btn-close:hover {
     opacity: 1;
 }

 /* ===== Body ===== */
 #industriesModal .modal-body {
     padding: 22px;
     font-size: 18px;
     line-height: 1.7;
     color: #e6ffe9;
 }

 /* Headings inside modal */
 #industriesModal .modal-body h4 {
     color: #c6ff9e;
     margin-bottom: 10px;
 }

 /* List styling */
 #industriesModal .modal-body ul {
     padding-left: 18px;
 }

 #industriesModal .modal-body li {
     margin-bottom: 6px;
 }

 .tab-popup-title {
     font-size: 1.2rem;
     font-weight: bold;
     color: #506F28;
 }

 .tab-popup-description {
     color: #5b5b5b;
     font-size: 1.2rem;
     line-height: 1.7rem;
 }

 /* ===== Footer (if you add later) ===== */
 #industriesModal .modal-footer {
     border-top: 1px solid rgba(255, 255, 255, 0.1);
 }

 /* ===== Animation ===== */
 @keyframes modalSlide {
     from {
         opacity: 0;
         transform: translateY(-25px) scale(0.96);
     }

     to {
         opacity: 1;
         transform: translateY(0) scale(1);
     }
 }

 /* ===== Responsive ===== */
 @media (max-width: 768px) {
     #industriesModal .modal-dialog {
         margin: 20px;
     }

     #industriesModal .modal-content {
         border-radius: 10px;
     }
 }

 /* ===== GRID ===== */
 .products-grid {
     display: grid;
     grid-template-columns: repeat(5, 1fr);
     gap: 2px;
 }

 /* ===== CARD ===== */
 .products-card {
     perspective: 1000px;
     transition: transform 0.2s;
 }


 .products-card:hover {
     transform: translateY(-1px);
     cursor: pointer;
 }

 .card-inner {
     position: relative;
     width: 100%;
     height: 160px;
     transition: transform 0.6s;
     transform-style: preserve-3d;
     box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
 }

 /* Flip on hover */
 .products-card:hover .card-inner {
     transform: rotateY(180deg);
 }

 /* ===== FRONT & BACK ===== */
 .card-front,
 .card-back {
     position: absolute;
     width: 100%;
     height: 100%;
     padding: 15px;
     box-sizing: border-box;
     backface-visibility: hidden;
     display: flex;
     flex-direction: column;
     justify-content: center;
     text-align: center;
     line-height: 0.7rem;
 }

 /* FRONT */
 .card-front {
     /* background: #0e5a6b; */
     /* color: #3AA3C3; */
     color: var(--light-blue-4);
 }

 .products-card:nth-child(odd) .card-front {
     background: #05435C;
 }

 .products-card:nth-child(even) .card-front {
     background: #004F6A;
 }

 /* BACK */
 .card-back {
     background: #8fae57;
     color: #ffffff;
     transform: rotateY(180deg);
 }

 /* TEXT STYLING */
 .products-card h4 {
     font-size: 17px;
     margin: 0 0 10px;
     line-height: 1.3;
 }

 .products-card p {
     margin: 0;
     font-size: 1.2rem;
     /* font-weight: bold; */
     color: #8AAB5E;
 }

 /* BACK TEXT */
 .card-back h4 {
     font-size: 17px;
     line-height: 1.2;
 }

 .card-back p {
     color: #03384D;
 }

 /* ===== RESPONSIVE ===== */
 @media (max-width: 900px) {
     .products-grid {
         grid-template-columns: repeat(3, 1fr);
     }
 }

 @media (max-width: 600px) {
     .products-grid {
         grid-template-columns: repeat(2, 1fr);
     }
 }

 /*** ===================== BISMALEIMIDES PRODUCT PAGE ===================== */
 /* ===== MODAL STYLING ===== */
 .modal-backdrop.show {
     opacity: 0.75;
     background-color: #0F3141;
 }

 #productsModal .modal-dialog {
     max-width: 750px;
     margin-top: 6vh;
 }

 #productsModal .modal-header {
     flex-direction: column;
     border-bottom: none;
 }

 #productsModal .modal-content {
     background: #0F3141;
     color: #d7f5df;
     border: none;
     border-radius: 12px;
     animation: modalSlide 0.35s ease;
 }

 #productsModal .modal-title {
     color: #8AAB5E;
     text-decoration: underline;
     text-align: center;
     font-size: 1.5rem;
     margin-left: 30px;
     margin-right: 30px;
 }

 #productsModal .modal-body {
     line-height: 1.6;
 }

 #productsModal .btn-close {
     filter: invert(62%) sepia(34%) saturate(500%) hue-rotate(150deg);
     color: var(--light-blue-2);
     transition: opacity 0.3s ease;
 }

 #productsModal .btn-close:hover {
     opacity: 1;
 }

 #productsModal .tab-popup-details {
     background-color: var(--light-gray);
 }

 #productsModal .products-description {
     color: var(--light-blue-2);
     text-align: center;
     font-size: 1.2rem;
 }

 #productsModal .products-info {
     text-align: center;
 }

 #productsModal .products-info h5 {
     color: var(--accent);
     margin-bottom: 1rem;
     font-size: 1.5rem;
 }

 #productsModal .products-info h6 {
     color: var(--light-blue-2);
     margin-top: 1rem;
     font-size: 1.4rem;
 }

 #productsModal .applications_container {
     background-color: var(--light-blue-3);
     font-size: 1.2rem;
 }

 #productsModal .applications_container .applications_header {
     color: #506F28;
     font-size: 1.4rem;
 }

 #productsModal .application_title {
     font-size: 1.2rem;
     font-weight: bold;
     color: #2195B8;
 }

 #productsModal .applications_description {
     color: #5b5b5b;
     font-size: 1.2rem;
     line-height: 1.7rem;
 }

 @keyframes modalSlide {
     from {
         opacity: 0;
         transform: translateY(-20px) scale(0.95);
     }

     to {
         opacity: 1;
         transform: translateY(0) scale(1);
     }
 }

 /* ===== RESPONSIVE ===== */
 @media (max-width: 900px) {
     .products-grid {
         grid-template-columns: repeat(3, 1fr);
     }
 }

 @media (max-width: 600px) {
     .products-grid {
         grid-template-columns: repeat(2, 1fr);
     }
 }

 /* Section */
 /* .spec-section {
     padding: 40px 20px;
 } */

 /* Titles */
 .spec-title {
     color: var(--accent);
     font-size: 1.2rem;
     margin-bottom: 0.5rem;
 }

 /* Each spec item */
 .spec-item {
     margin-bottom: 18px;
 }

 /* Label */
 .spec-label {
     color: var(--light-blue-2);
     font-size: 1.2rem;
 }

 /* Value */
 .spec-value {
     color: var(--light-blue-4);
     font-size: 1.2rem;
     line-height: 1;
 }

 /* Responsive */
 @media (max-width: 768px) {
     .spec-title {
         font-size: 22px;
     }
 }

 .browse-enquiries {
     color: var(--light_blue);
 }

 .products-caption {
     color: var(--accent);
     font-style: italic;
     text-align: center;
     font-size: 1.2rem;
     text-decoration: underline ;
 }

  .products-indicative {
     color: var(--accent);
     font-style: italic;
     text-align: center;
     font-size: 1.2rem;
 }

 .products-disclaimer {
     color: var(--light_blue);
     font-style: italic;
     text-align: center;
     margin-top: 1rem;
     font-size: 1.05rem;
 }

 .products-disclaimer span {
     font-style: normal;
     color: var(--accent);
 }

 .customsolutions {
     background-color: var(--light-blue-3);
     color: var(--bg);
     text-align: left;
     font-size: 1.2rem;
 }

 .customsolutions_list span {
     font-size: 1.4rem;
     color: var(--green-text2);
     text-align: left;
     display: block;
     font-weight: bold;
 }

 .developmentsolutions {
     background-color: #D3DDC1;
     color: var(--bg);
     text-align: left;
     padding-top: 15px;
     padding-left: 35px;
     padding-right: 50px;
     padding-bottom: 15px;
     font-size: 1.2rem;
 }

 .developmentsolutions span {
     font-size: 1.4rem;
     color: var(--green-text);
     text-align: left;
     display: block;
     font-weight: bold;
 }

 /* Custom Solutions Tabs & Content */
 /* ================= Tabs ================= */
 .tabs_custom {
     display: flex;
 }

 .tab_custom {
     flex: 1;
     padding: 10px;
     text-align: center;
     /* background: #004F6A; */
     color: var(--light-blue-4);
     cursor: pointer;
     font-size: 0.9rem;
     text-transform: uppercase;
     transition: 0.3s;
 }

 .tab_custom:nth-child(odd) {
     background: #05435C;
 }

 .tab_custom:nth-child(even) {
     background: #004F6A;
 }

 .tab_custom.active {
     background: #9CD7E9;
     color: #03384D;
     font-weight: bold;
 }

 /* ================= CONTENT ================= */
 .tab-custom-content {
     display: none;
     background: #E1F3F8;
     padding: 40px;
 }

 .tab-custom-content.active {
     display: flex;
     gap: 30px;
 }


 /* Product Development Tabs & Content */
 /* ================= Tabs ================= */
 .tabs_development {
     display: flex;
 }

 .tab_development {
     flex: 1;
     padding: 10px;
     text-align: center;
     color: var(--light-blue-4);
     cursor: pointer;
     font-size: 0.9rem;
     text-transform: uppercase;
     transition: 0.3s;
 }

 .tab_development:nth-child(odd) {
     background: #05435C;
 }

 .tab_development:nth-child(even) {
     background: #004F6A;
 }

 .tab_development.active {
     background: #D3DDC1;
     color: #03384D;
     font-weight: bold;
 }

 /* ================= CONTENT ================= */
 .tab-development-content {
     display: none;
     background: #D3DDC1;
     padding: 40px;
 }

 .tab-development-content.active {
     display: flex;
     gap: 30px;
 }

 /* ================ VIDEO ==================== */
 .video-wrapper {
     width: 100%;
     max-width: 800px;
 }

 /* Facade Container */
 .video-container {
     position: relative;
     width: 100%;
     aspect-ratio: 16 / 9;
     border-radius: 12px;
     overflow: hidden;
     background-color: #111827;
     cursor: pointer;
     box-shadow: 0 12px 32px rgba(0, 0, 0, 0.4);
     border: 1px solid rgba(255, 255, 255, 0.1);
 }

 /* Poster Image */
 .video-poster {
     width: 100%;
     height: 100%;
     object-fit: cover;
     transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1);
     display: block;
 }

 .video-container:hover .video-poster {
     transform: scale(1.02);
 }

 /* Minimalist Play Button */
 .custom-play-btn {
     position: absolute;
     bottom: 5px;
     left: 50%;
     transform: translate(-50%, -50%);
     width: 50px;
     height: 50px;
     border-radius: 50%;
     background: #78BAD0;
     border: none;
     display: flex;
     align-items: center;
     justify-content: center;
     cursor: pointer;
     transition: all 0.3s cubic-bezier(0.25, 1, 0.5, 1);
     box-shadow: 0 6px 20px rgba(0, 102, 153, 0.8);
 }

 .custom-play-btn svg {
     width: 30px;
     height: 30px;
     fill: white;
     margin-left: 3px;
 }

 .video-container:hover .custom-play-btn {
     transform: translate(-50%, -50%) scale(1.5);
     background: #78BAD0;
     box-shadow: 0 8px 28px rgba(0, 102, 153, 0.8);
 }

 /* Active Video Iframe */
 .video-container iframe {
     width: 100%;
     height: 100%;
     border: none;
 }