body {
        margin-top: 121px;
            height: 100vh; 
            font-size: 33px;
            line-height: 1.6;
            font-family: avenir-lt-w01_35-light1475496, avenir-lt-w05_35-light, sans-serif;
            background: url('media/AdobeStock_249421624.webp') center center/cover;
            background-attachment: fixed;
        }

        p {
            font-size: 20px;
            line-height: 1.6;
            color: #333;
            font-family: Arial, Helvetica, sans-serif;
        }
        h2 {
            position: relative; 
            z-index: 2; 
            margin: 0; 
            padding: 10px 20px; 
            color: #333; 
            font-size: 28px; 
            font-weight: bold;
        }
        .h2-styling {
            position: absolute; 
            top: 0; 
            left: 0; 
            width: 100%; 
            height: 100%; 
            background: rgba(0, 123, 255, 0.16); 
            z-index: 1;
        }
        .h2-cursor {
            position: absolute; 
            top: 0; 
            left: 0; 
            height: 100%; 
            width: 8%; 
            background: rgba(28, 194, 181, 1); 
            z-index: 0;
        }   
        .h2-base {
            position: relative; 
            display: inline-block; 
        }

        .header {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        z-index: 9999;
        box-shadow: 0 2px 5px rgba(0,0,0,0.1); /* optional */
        }
        /* ################cabling infrastructure section below */
        .banner {
            position: relative;
            height: 600px; /* adjust as needed */
            background: linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)), url('media/mobile_banner_background.webp') center/cover;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .banner::before {
            content: none !important;
            display: none !important;
        }
        .banner-content {
            background-color: rgba(51, 51, 51, 0.83);
            display: flex;
            align-items: center;
            gap: 20px; /* space between text and image */
            padding: 20px;
            border-radius: 6px;
            justify-content: space-between;
        }
        .banner-text {
            color: #fff;
            max-width: 600px;
            flex: 1;
        }
        .banner-text h1 {
            margin-bottom: 15px;
            font-size: 1.5em;
        }
        .banner-text p {
            line-height: 1.5;
            color: #fff;
        }
        .banner-content img {
            max-width: 350px;
            height: auto;
            border-radius: 6px;
        }
        .icon-grid {
            max-width: 1000px;
            margin: auto;
            display: grid;
            grid-template-columns: repeat(4, 1fr); /* 4 per row */
            gap: 20px;
            padding: 40px;
            text-align: center;
        }

        .icon-item img {
            max-width: 70px; /* Control icon size */
            height: auto;
        }

        .icon-item p {
            font-size: 16px;
            color: #333;
            margin: 0;
        }

        /* Responsive: 2 per row on small screens */
        @media (max-width: 768px) {
            .icon-grid {
                grid-template-columns: repeat(2, 1fr);
            }
        }

        /* Responsive: 1 per row on very small screens */
        @media (max-width: 480px) {
            .icon-grid {
                grid-template-columns: 1fr;
            }
        }
    .contact-section {
        background-color: #fff;
        padding: 40px 20px;
        margin: 0 auto;
    }

    .contact-title {
        text-align: center;
        font-size: 28px;
        margin-bottom: 25px;
        color: #333;
    }

    .contact-form {
        display: flex;
        flex-direction: column;
        gap: 10px;
        font-size: 16px;
    }

    .form-row {
        display: flex;
        flex-wrap: wrap;
        gap: 20px;
    }

    .form-group {
        flex: 1;
        display: flex;
        flex-direction: column;
    }

    .form-group.full-width {
        flex: 1 1 100%;
    }

    label {
        font-weight: bold;
        margin-bottom: 5px;
        color: #555;
    }

    input, select, textarea {
        padding: 10px;
        font-size: 16px;
        border: 1px solid #ccc;
        border-radius: 5px;
    }

    select {
        height: 40px;
        font-weight: 600;
    }

    textarea {
        resize: vertical;
    }

    .form-submit {
        background-color: #1cc2b5;
        color: #fff;
        border: none;
        padding: 12px 25px;
        font-size: 18px;
        border-radius: 5px;
        cursor: pointer;
        transition: background-color 0.3s;
    }

    .form-submit:hover {
        background-color: #159a8c;
    }

    /* Responsive adjustments */
    @media (max-width: 768px) {
        .form-row {
            flex-direction: column;
        }
    }
    .contact-button-img {
        width: 100px;
    }
    /* #################### Cabling Infrastructure section above */
        .banner {
            position: relative;
            width: 100%;
            height: 600px; /* Adjust height as needed */
            background: url('media/Banner_background.mp4') no-repeat center center/cover;
            display: flex;
            align-items: center;
            justify-content: center;
        }


        .banner-video {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            object-fit: cover;
            z-index: -1; /* Behind all content */
            }

        .banner-container {
            position: relative;
            z-index: 1; /* Above the video */
            /* Keep all your existing banner-container styles */
            }



         .contact_banner {
            position: relative;
            width: 100%;
            height: 600px; /* Adjust height as needed */
            background: url('media/contact_banner.jpeg') no-repeat center center/cover;
            display: flex;
            align-items: center;
            justify-content: center;
        }
           .mission_container {
            margin: 0 auto;
            padding: 20px;
            box-sizing: border-box;
            background-image: url('media/tech_background.jpeg');
            background-size: cover;
        }
         .mission {
            text-align: center;
            padding: 40px 20px;
            background-color: rgba(255, 255, 255, 0.8);
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
            max-width: 1200px;
            margin: auto;
        }
        .cabling_container {
            padding: 20px;
            box-sizing: border-box;
            background-size: cover;
            max-width: 1200px;
            margin: auto;
            margin-top: 20px;
            background-color: rgba(96, 174, 207, 0.21);
        }
        .cabling {
            padding: 80px;
            max-width: 1000px;
            margin: auto;
            margin-top: 20px;
            font-size: 20px;
            line-height: 1.6;
            color: #333;
            font-family: Arial, Helvetica, sans-serif;
            background-color: rgba(255, 255, 255, 0.7); /* Semi-transparent background for readability */
        }

        .banner::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.5); /* Overlay for better text readability */
            z-index: 1;
        }
        .banner-container {
            position: relative;
            z-index: 2;
            display: flex;
            width: 80%;
            max-width: 1200px;
            gap: 40px;
            align-items: center;
        }
        .banner-slideshow-text {
            flex: 1;
            color: #ffffff;
            font-family: Arial, sans-serif;
            overflow: hidden;
            position: relative;
        }
        .banner-slideshow-image {
            flex: 1;
            overflow: hidden;
            position: relative;
            text-align: right;
        }
        .slide-text, .slide-image {
            display: none;
            opacity: 0;
            transition: opacity 1s ease-in-out;
        }
        .slide-text.active, .slide-image.active {
            display: block;
            opacity: 1;
        }
        .slide-text h1 {
            font-size: 36px;
            margin-bottom: 20px;
        }
        .slide-text p {
            font-size: 18px;
            line-height: 1.6;
            color: #ffffff;
        }
        .slide-image img {
            max-width: 100%;
            height: auto;
            border-radius: 10px;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
        }
        @media (max-width: 768px) {
            .banner-container {
                flex-direction: column;
                text-align: center;
            }
            .banner-slideshow-image {
                text-align: center;
            }
        }
        /* three panel section */
        .info-section {
        display: flex;
        justify-content: space-between;
        padding: 40px 20px;
        flex-wrap: wrap;
        }

        .info-panel {
        flex: 1 1 0%;
        background-color: rgba(96, 174, 207, 0.21); /* semi-transparent */
        margin-left: 10px;
        margin-right: 10px;
        padding-top: 20px;
        text-align: center;
        color: #333;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
        }

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

        .icon img {
        width: auto; 
        height: 100px;
        }

        @media (max-width: 768px) {
        .info-section {
            flex-direction: column;
            align-items: center;
        }

        .info-panel {
            flex: 1 1 100%;
            max-width: 90%;
        }
        }

        /* Icon Section Styles */
        .services-section {
            position: relative;
            width: 100%;
            height: 200px;
            background: url('media/AdobeStock_249421624.jpeg') no-repeat center center/cover;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 40px 0;
        }
        .services-container {
            background-color: #ffffff;
            padding: 40px;
            width: 80%;
            max-width: 1200px;
            display: flex;
            justify-content: space-around;
            align-items: center;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
        }
        .service-icon {
            text-align: center;
            font-family: Arial, Helvetica, sans-serif;
            font-size: 24px;
            font-weight: bold;
            color: #333;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
        }
        .service-icon img {
            width: 100px;
            height: 100px;
            margin-bottom: 10px;
        }
        @media (max-width: 768px) {
            .services-container {
                flex-direction: column;
                gap: 20px;
            }
        }
        /* logo section below */
        .logo-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
            gap: 30px;
            justify-items: center;
            align-items: center;
            padding: 40px 20px;
        }

        .logo-grid a, 
        .logo-grid div[data-testid="linkElement"] {
            display: inline-block;
            max-width: 100%;
            text-align: center;
        }

        .logo-grid img {
            max-width: 100%;
            height: 50px;
            object-fit: contain;
        }
        /* button styles  below */
        .contact-button-link {
        display: inline-block;
        text-decoration: none;
        }

        .contact-button-img {
        width: 150px;
        height: auto;
        display: block;
        transition: transform 0.3s ease-in-out;
        border: none;
        pointer-events: auto;
        will-change: transform;
        }

        .contact-button-link:hover .contact-button-img:hover {
        transform: scale(1.1) !important; 
        }
        /* upper icon grid */
        .job-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 30px;
  padding: 40px;
  max-width: 1200px;
  margin: 0 auto;
}

.grid-item {
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08);
  padding: 20px;
  text-align: center;
  width: 250px; /* Fixed width for uniform sizing */
  height: 250px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  box-sizing: border-box;
  transition: transform 0.2s ease-in-out;
}

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

.grid-item img {
  width: 80px;
  height: 80px;
  object-fit: contain;
}

.grid-item p {
  font-size: 22px;
  color: #555;
  line-height: 1.4;
  margin: 0;
  flex-grow: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}



        /* lower icons and list */
        .icon-text {
        display: flex;
        align-items: center;
        gap: 12px; /* spacing between icon and text */
        margin-bottom: 10px;
        }

        .icon-text img {
        width: 80px; /* or whatever size you want */
        height: auto;
        }

        .icon-text h4 {
        margin: 0;
        font-size: 18px;
        color: #333;
        font-family: Arial, sans-serif;
        }
          footer {
    background-color: rgba(240, 240, 240, 0.9); /* Light gray with slight transparency */
    padding: 20px 0;
    text-align: center;
    font-family: Arial, sans-serif;
    font-size: 14px;
    color: #333;
  }

  footer a {
    color: #333;
    text-decoration: none;
    margin: 0 10px;
  }

  footer a:hover {
    text-decoration: underline;
  }
  .contact_banner_text {
  background-color: rgba(255, 255, 255, 0.8); /* white with 80% opacity */
  padding: 30px;
  max-width: 700px;
  margin: auto;
}
.text-background {
  background-color: rgba(107, 160, 167, 0.66); /* White with soft transparency */
  padding: 30px;
  max-width: 700px;
  margin: auto;
}
/* #################### Data Cabling section below */
 .banner {
            position: relative;
            height: 600px; /* adjust as needed */
            
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .banner::before {
            content: none !important;
            display: none !important;
        }
        .banner-content {
            background-color: rgba(51, 51, 51, 0.83);
            display: flex;
            align-items: center;
            gap: 20px; /* space between text and image */
            padding: 20px;
            border-radius: 6px;
        }
        .banner-text {
            color: #fff;
            max-width: 600px;
        }
        .banner-text h1 {
            margin-bottom: 15px;
            font-size: 1.5em;
        }
        .banner-text p {
            line-height: 1.5;
            color: #fff;
        }
        .banner-content img {
            max-width: 350px;
            height: auto;
            border-radius: 6px;
        }
        .icon-grid {
            max-width: 1000px;
            margin: auto;
            display: grid;
            grid-template-columns: repeat(4, 1fr); /* 4 per row */
            gap: 20px;
            padding: 40px;
            text-align: center;
        }

        .icon-item img {
            max-width: 70px; /* Control icon size */
            height: auto;
        }

        .icon-item p {
            font-size: 16px;
            color: #333;
            margin: 0;
        }

        /* Responsive: 2 per row on small screens */
        @media (max-width: 768px) {
            .icon-grid {
                grid-template-columns: repeat(2, 1fr);
            }
        }

        /* Responsive: 1 per row on very small screens */
        @media (max-width: 480px) {
            .icon-grid {
                grid-template-columns: 1fr;
            }
        }
    
    .page-banner {
    background-color: #f9f9f9;
    padding: 40px 20px;
    text-align: center;
}
.page-banner h1 {
    font-size: 32px;
    color: #333;
}
.page-banner p {
    font-size: 18px;
    color: #555;
}

.page-content {
    background-color: #fff;
    padding: 40px 20px;
}
.content-wrapper {
    max-width: 1100px;
    margin: 0 auto;
}
.applications-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 20px;
    margin-top: 30px;
}
.application-card {
    background-color: #e6f5f9;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
}
.application-card h3 {
    margin-bottom: 10px;
    color: #222;
}
.application-card p {
    color: #555;
    font-size: 18px;
    line-height: 1.4;
}

/* ####################  Mobile version ov Index page below */

        /* Mobile Responsive Styles */
        @media (max-width: 768px) {
            body {
                padding-top: 0px;
            }

            /* Banner Mobile */
            .banner {
                min-height: 300px;
                padding: 15px;
                background: linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)), url('media/mobile_banner_background.webp') center/cover;
            }

            .banner-container {
                flex-direction: column;
                text-align: center;
                gap: 20px;
            }

            .slide-text h1 {
                font-size: 1.8rem;
            }

            .slide-text p {
                font-size: 1.2rem;
            }

            /* Info Section Mobile */
            .info-section {
                grid-template-columns: 1fr;
                padding: 20px 15px;
                gap: 15px;
            }

            .info-panel {
                padding: 25px 15px;
            }

            .info-panel .icon img {
                width: 60px;
                height: 60px;
            }

            .info-panel h3 {
                font-size: 1.3rem;
            }

            /* Mission Section Mobile */
            .mission_container {
                padding: 20px 15px;
            }

            .mission {
                flex-direction: column;
                padding: 25px 20px;
                gap: 25px;
            }

            .mission-header h2 {
                font-size: 1.5rem;
                padding: 8px 15px;
            }

          .mobile-infographic {
              width: 100% !important;
              height: auto !important;
            }

            /* Cabling Section Mobile */

            .cabling_container .two-column-flex {
              flex-direction: column !important;
              gap: 20px !important;
            }
            
            .cabling_container .column {
              width: 100% !important;
            }
            
            .cabling_container {
              padding: 20px 20px !important;
            }
            
            .cabling_container {
                padding: 20px 15px;
            }

            .cabling-grid {
                grid-template-columns: 1fr;
                gap: 20px;
            }

            .cabling-card {
                padding: 25px 20px;
            }

            .cabling-card h2 {
                font-size: 1.5rem;
            }

            .cabling-card p {
                font-size: 1rem;
            }

            .cabling-header h2 {
                font-size: 1.5rem;
                padding: 12px 20px;
                padding-left: 30px;
            }

            /* Partners Section Mobile */
            .partners-section {
                padding: 20px 15px;
            }

            .partners-section h2 {
                font-size: 1.5rem;
                margin-bottom: 25px;
            }

            .logo-grid {
                grid-template-columns: repeat(auto-fit, minmax(80px, 1fr));
                gap: 15px;
            }

            .logo-grid img {
                max-width: 80px;
                max-height: 50px;
            }

            .contact-button-img {
                width: 120px;
            }
        }

        @media (max-width: 480px) {
            /* Extra small screens */
            .slide-text h1 {
                font-size: 1.5rem;
            }

            .info-panel h3 {
                font-size: 1.2rem;
            }

            .mission-header h2 {
                font-size: 1.3rem;
            }

            .cabling-header h2 {
                font-size: 1.3rem;
            }

            .partners-section h2 {
                font-size: 1.3rem;
            }

            .logo-grid {
                grid-template-columns: repeat(3, 1fr);
            }
        }

        /* Mobile styles */
@media (max-width: 768px) {
  .mobile-banner {
    min-height: auto;
    padding: 20px 0;
  }
  
  .mobile-banner-content {
    flex-direction: column !important;
    gap: 20px !important;
    padding: 20px !important;
    align-items: center !important;
  }
  
  .mobile-banner-text {
    width: 100% !important;
    text-align: center !important;
    margin-bottom: 20px;
  }
  
  .mobile-banner-text h1 {
    font-size: 24px !important;
    margin-bottom: 15px;
  }
  
  .mobile-banner-text p {
    font-size: 20px !important;
    line-height: 1.5;
  }
  
  .mobile-banner-image {
    width: 100% !important;
    max-width: 300px !important;
    height: auto !important;
    border-radius: 10px;
  }
}

/* For very small phones */
@media (max-width: 480px) {
  .mobile-banner {
    padding: 15px 0;
  }
  
  .mobile-banner-content {
    padding: 15px !important;
  }
  
  .mobile-banner-text h1 {
    font-size: 28px !important;
  }
  
  .mobile-banner-text p {
    font-size: 14px !important;
  }
}