/* Custom brand color matching the image */
    :root {
      --brand-orange: #f26522;
    }
    
    /* Ensures the sticky header leaves a visual floating gap at the top on scroll */
    .sticky-gap-wrapper {
      position: sticky;
      top: 15px; 
      z-index: 1030;
      margin-top: 15px;
    }

    .nav-link {
      color: #555555 !important;
      font-weight: 600;
      padding-left: 12px !important;
      padding-right: 12px !important;
    }

    .nav-link:hover, .nav-link.active {
      color: var(--brand-orange) !important;
    }

    .text-orange {
      color: var(--brand-orange) !important;
    }

    .bg-orange {
      background-color: var(--brand-orange) !important;
    }
    
    /* Smooth transitions for links */
    a {
      transition: color 0.2s ease-in-out;
    }
    /* ==========================================================================
       Hero Section & Slow Zoom Carousel Styles
       ========================================================================== */
    .hero-container {
      position: relative;
      overflow: hidden;
    }

    .hero-carousel-item {
      height: 480px;
      overflow: hidden;
      position: relative;
    }

    /* Base slide image setup */
    .hero-img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      /* Smooth execution window for zoom effect */
      transition: transform 6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
      transform: scale(1);
    }

    /* Target the active image to trigger continuous slow zoom */
    .carousel-item.active .hero-img {
      transform: scale(1.08);
    }

    /* Warm orange gradient overlay matching the reference image layout */
    .carousel-overlay {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: linear-gradient(90deg, var(--gradient-start) 0%, rgba(242, 101, 34, 0.9) 35%, rgba(242, 101, 34, 0.4) 70%, rgba(0,0,0,0) 100%);
      z-index: 1;
    }

    /* Custom positioned layout box for crisp title presentation */
    .carousel-caption-custom {
      position: absolute;
      top: 0;
      left: 0;
      height: 100%;
      display: flex;
      align-items: center;
      padding-left: 8%;
      z-index: 2;
      max-width: 65%;
    }

    .carousel-caption-custom h1 {
      font-size: 3.8rem;
      line-height: 1.1;
      letter-spacing: -1.5px;
    }

    /* Stacked navigation controls on the right side */
    .carousel-controls-vertical {
      position: absolute;
      right: 40px;
      bottom: 40px;
      display: flex;
      flex-direction: column;
      gap: 12px;
      z-index: 3;
    }

    .control-btn {
      width: 44px;
      height: 44px;
      border-radius: 50%;
      background: rgba(255, 255, 255, 0.15);
      border: 1px solid rgba(255, 255, 255, 0.35);
      color: white;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: all 0.2s ease-in-out;
    }

    .control-btn:hover {
      background: white;
      color: var(--brand-orange);
      border-color: white;
      background-color: #ffffff;
    }

    /* Responsive adjustments for mobile layout viewports */
    @media (max-width: 991.98px) {
      .hero-carousel-item {
        height: 380px;
      }
      .carousel-caption-custom {
        max-width: 90%;
        padding-left: 5%;
      }
      .carousel-caption-custom h1 {
        font-size: 2.5rem;
      }
      .carousel-overlay {
        background: linear-gradient(0deg, rgba(189, 72, 22, 0.95) 0%, rgba(242, 101, 34, 0.8) 100%);
      }
      .carousel-controls-vertical {
        right: 20px;
        bottom: 20px;
        flex-direction: row;
      }
    }
    /* ==========================================================================
   Internet Packages Section Styles
   ========================================================================== */
.package-card {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  background-color: #ffffff;
}

.package-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 20px rgba(0,0,0,0.08) !important;
}

.package-img-wrapper {
  height: 230px;
  overflow: hidden;
}

.package-img-wrapper img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Recreates the distinctive orange blend overlay from the design */
.package-gradient-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 70%;
  background: linear-gradient(to top, rgba(242, 101, 34, 0.95) 0%, rgba(242, 101, 34, 0.7) 40%, rgba(242, 101, 34, 0) 100%);
  z-index: 1;
}

.package-header-text {
  position: absolute;
  bottom: 15px;
  left: 20px;
  color: #ffffff;
  z-index: 2;
}

.package-header-text h3 {
  font-size: 1.8rem;
  font-weight: 700;
  letter-spacing: 0.5px;
  margin-bottom: 2px;
}

.package-header-text p {
  font-size: 1.05rem;
  font-weight: 500;
  opacity: 0.95;
}

/* Structured feature listings with subtle divider lines */
.package-features li {
  font-size: 0.88rem;
  color: #444444;
  padding-bottom: 12px;
  margin-bottom: 12px;
  border-bottom: 1px solid #edf0f2;
  display: flex;
  align-items: flex-start;
}

.package-features li:last-child {
  border-bottom: none;
  margin-bottom: 0;
  padding-bottom: 0;
}

.package-price {
  font-size: 1.65rem;
  font-weight: 800;
  color: #1a1a1a;
  letter-spacing: -0.5px;
}

/* Footer Section Styles */
.footer-section{
    background:#2f3338;
    color:#d5d5d5;
}

.footer-logo{
    max-width:190px;
}

.footer-text{
    color:#b8b8b8;
    line-height:1.9;
    font-size:17px;
}

.footer-title{
    color:#fff;
    margin-bottom:25px;
    position:relative;
}

.footer-title:after{
    content:'';
    position:absolute;
    left:0;
    bottom:-12px;
    width:100px;
    height:3px;
    background:#f47c28;
}

.footer-links{
    list-style:none;
    padding:0;
    margin:0;
}

.footer-links li{
    margin-bottom:20px;
}

.footer-links a{
    color:#d9d9d9;
    text-decoration:none;
    transition:.3s;
}

.footer-links a:hover{
    color:#f47c28;
}

.social-icons{
    display:flex;
    gap:15px;
}

.social-icons a{
    width: 35px;
    height:35px;
    border:1px solid rgba(255,255,255,.18);
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:12px;
    color:#fff;
    text-decoration:none;
    transition:.3s;
    font-size:22px;
}

.social-icons a:hover{
    background:#f47c28;
    border-color:#f47c28;
}


.location-item p{
    margin:8px 0 5px;
    color:#ddd;
}


.contact-box{
    display:flex;
    gap:18px;
    align-items:flex-start;
}

.contact-icon{
    width:35px;
    height:35px;
    border-radius:12px;
    background:#403833;
    display:flex;
    align-items:center;
    justify-content:center;
    color:#f47c28;
    font-size:24px;
}


.phone{
    color:#fff;
    font-weight:600;
}

.footer-section hr{
    border-color:rgba(255,255,255,.08);
}

.footer-bottom{
    border-top:1px solid rgba(255,255,255,.12);
    padding:22px 0;
    color:#bbb;
}

.footer-bottom a{
    color:#fff;
    text-decoration:none;
}

.footer-bottom a:hover{
    color:#f47c28;
}

/* ==========================================================================
   About Section Styles
   ========================================================================== */
   .about-section{
    padding:100px 0;
    background:#fff;
}

.section-tag{
    color:#ff6a13;
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:2px;
    font-size:15px;
}

.about-title{
    font-size:56px;
    font-weight:800;
    line-height:1.15;
    color:#2f3640;
}

.about-subtitle{
    color:#ff8a00;
    font-size:26px;
    font-weight:600;
    line-height:1.5;
}

.about-text{
    color:#6d7480;
    font-size:18px;
    line-height:2;
}

.about-list{
    list-style:none;
    padding:0;
    margin:0;
}

.about-list li{
    margin-bottom:18px;
    font-size:19px;
    font-weight:600;
    color:#2f3640;
}

.about-list i{
    color:#ff6a13;
    margin-right:12px;
}

.btn-about{
    background:#ff6a13;
    color:#fff;
    padding:16px 38px;
    border-radius:50px;
    font-weight:600;
    transition:.3s;
}

.btn-about:hover{
    background:#e95c09;
    color:#fff;
}

.about-image{
    max-width:520px;
    margin:auto;
}

.about-image img{
    position:relative;
    z-index:2;
    width:100%;
    object-fit:cover;
}

.shape{
    position:absolute;
    z-index:1;
}

.shape-1{
    width:180px;
    height:180px;
    background:#00b5b8;
    bottom:-25px;
    left:-25px;
}

.shape-2{
    width:60px;
    height:60px;
    border:3px solid #ff6a13;
    border-radius:50%;
    top:-25px;
    right:-25px;
    background:#fff;
}

@media (max-width:991px){

    .about-title{
        font-size:40px;
    }

    .about-subtitle{
        font-size:22px;
    }

    .about-section{
        padding:70px 0;
    }

    .about-image{
        margin-bottom:30px;
    }

}

/* ==========================================================================
   icons below hero section
   ========================================================================== */
.services-section{
    background:#f8f9fc;
    padding:30px 0;
}

.service-card{
    position:relative;
    background:#fff;
    border-radius:15px;
    padding:45px 35px;
    display:flex;
    align-items:center;
    gap:30px;
    overflow:hidden;
    transition:.35s ease;
    box-shadow:0 12px 30px rgba(0,0,0,.08);
}

/* Creates the second card behind */
.service-card::after{
    content:"";
    position:absolute;
    top:18px;
    left:18px;
    width:100%;
    height:100%;
    background:#eef1f6;
    border-radius:15px;
    z-index:-1;
}

.service-card:hover{
    transform:translateY(-8px);
    box-shadow:0 18px 40px rgba(0,0,0,.12);
}

.service-icon{
    width:20px;
    height:20px;
    min-width:20px;
    border:1px solid #e4e4e4;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:52px;
    color:#ff6a13;
    transition:.35s;
}

.service-card:hover .service-icon{
    background:#ff6a13;
    color:#fff;
    border-color:#ff6a13;
}

.service-content h3{
    font-size:2rem;
    font-weight:700;
    color:#222;
    margin-bottom:15px;
}

.service-content p{
    margin:0;
    color:#6d7480;
    line-height:1.8;
    font-size:18px;
}

@media (max-width:991px){

    .service-card{
        flex-direction:column;
        text-align:center;
        padding:40px 25px;
    }

    .service-icon{
        width:100px;
        height:100px;
        min-width:100px;
        font-size:42px;
    }

    .service-content h3{
        font-size:1.7rem;
    }

}
/* Coverage Page Banner */
#coverage-banner {
    background: linear-gradient(rgba(10, 15, 45, 0.75), rgba(10, 15, 45, 0.75)),
                url("../images/Octick home internet services.png") center center/cover no-repeat;
    border-radius: 0px;
    overflow: hidden;
}
/* Contact Page Banner */
#contact-banner {
    background: linear-gradient(rgba(10, 15, 45, 0.75), rgba(10, 15, 45, 0.75)),
                url("../images/best internet in ruaka.jpg") center center/cover no-repeat;
    border-radius: 0px;
    overflow: hidden;
}
/* Projects Page Banner */
#projects-banner {
    background: linear-gradient(rgba(10, 15, 45, 0.75), rgba(10, 15, 45, 0.75)),
                url("../images/structured cabling in school kenya.jpg") center center/cover no-repeat;
    border-radius: 0px;
    overflow: hidden;
}
/* Services Page Banner */
#services-banner {
    background: linear-gradient(rgba(10, 15, 45, 0.75), rgba(10, 15, 45, 0.75)),
                url("../images/network design and installation kenya.jpg") center center/cover no-repeat;
    border-radius: 0px;
    overflow: hidden;
}
/* About us Page Banner */
.page-banner-section {
    padding: 0px 0 60px;
}

.page-banner {
    background: linear-gradient(rgba(10, 15, 45, 0.75), rgba(10, 15, 45, 0.75)),
                url("../images/about our internet services.jpg") center center/cover no-repeat;
    border-radius: 0px;
    overflow: hidden;
}

.page-banner-content {
    padding: 90px 20px;
}

.page-banner h1, #services-banner h1,#projects-banner h1, #contact-banner h1,#coverage-banner h1 {
    color: #fff;
    font-size: 3.5rem;
    font-weight: 700;
    margin-bottom: 20px;
}

.breadcrumb {
    background: transparent;
}

.breadcrumb-item a {
    color: #fff;
    text-decoration: none;
    font-weight: 600;
}

.breadcrumb-item.active {
    color: #f58220;
}

.breadcrumb-item + .breadcrumb-item::before {
    content: "|";
    color: rgba(255,255,255,.7);
    padding: 0 15px;
}

@media (max-width: 768px) {
    .page-banner-content {
        padding: 60px 20px;
    }

    .page-banner h1 {
        font-size: 2.4rem;
    }
}
/*==============================
 Company Overview
===============================*/

.company-overview{
    padding:90px 0;
}

.overview-image{
    overflow:hidden;
    border-radius:12px;
    box-shadow:0 20px 45px rgba(0,0,0,.15);
}

.overview-image img{
    width:100%;
    height:420px;
    object-fit:cover;
    transition:.5s;
}

.overview-image:hover img{
    transform:scale(1.05);
}

.section-tag{
    color:#ff6b00;
    font-size:.95rem;
    font-weight:700;
    letter-spacing:2px;
    text-transform:uppercase;
}

.section-title{
    font-size:3rem;
    font-weight:700;
    line-height:1.3;
    color:#0d2a4d;
    margin-bottom:0;
}

.title-divider{
    width:75px;
    height:4px;
    background:#ff6b00;
    border-radius:5px;
    margin:28px 0;
}

.company-overview p{
    color:#6c757d;
    line-height:1.9;
    font-size:1.05rem;
    margin-bottom:1.6rem;
}

/* Primary Button */
.btn-orange{
    background-color:#ff6b00 !important;
    border:2px solid #ff6b00 !important;
    color:#fff !important;
    padding:14px 38px;
    border-radius:50px;
    font-weight:600;
    font-size:16px;
    min-width:180px;
    transition:all .35s ease;
    box-shadow:0 8px 20px rgba(255,107,0,.25);
}

.btn-orange:hover{
    background:#e65c00 !important;
    border-color:#e65c00 !important;
    color:#fff !important;
    transform:translateY(-3px);
    box-shadow:0 12px 28px rgba(255,107,0,.35);
}

/* Outline Button */
.btn-outline-orange{
    background:#fff !important;
    border:2px solid #ff6b00 !important;
    color:#ff6b00 !important;
    padding:14px 38px;
    border-radius:50px;
    font-weight:600;
    font-size:16px;
    min-width:180px;
    transition:all .35s ease;
}

.btn-outline-orange:hover{
    background:#ff6b00 !important;
    color:#fff !important;
    transform:translateY(-3px);
    box-shadow:0 12px 28px rgba(255,107,0,.35);
}

/* Responsive */

@media (max-width:991px){

    .company-overview{
        padding:70px 0;
    }

    .section-title{
        font-size:2.3rem;
    }

    .overview-image img{
        height:350px;
    }

}

@media (max-width:767px){

    .company-overview{
        padding:60px 0;
        text-align:center;
    }

    .title-divider{
        margin:25px auto;
    }

    .section-title{
        font-size:2rem;
    }

    .overview-image{
        margin-bottom:20px;
    }

    .company-overview .d-flex{
        justify-content:center;
    }

    .overview-image img{
        height:280px;
    }

}

/*==================================
 Guiding Principles
===================================*/

.guiding-principles{
    padding:100px 0;
    background:
        linear-gradient(rgba(12,14,24,.88),rgba(12,14,24,.88)),
        url("../images/bg-pattern.jpg") center/cover no-repeat;
}

.section-subtitle{
    display:block;
    color:#ff5b2e;
    font-size:15px;
    font-weight:600;
    letter-spacing:3px;
    text-transform:uppercase;
    margin-bottom:15px;
}

.section-title-guiding{
    color:#fff;
    font-size:3.3rem;
    font-weight:700;
}

.principle-card{
    background:#151821;
    border:1px solid rgba(255,255,255,.08);
    border-radius:30px;
    padding:50px 40px;
    height:100%;
    transition:.4s ease;
}

.principle-card:hover{
    border:1px solid #dc3545;
    transform:translateY(-8px);
    box-shadow:0 25px 45px rgba(220,53,69,.15);
}

.icon-box{
    width:75px;
    height:75px;
    border-radius:50%;
    border:2px solid #00c896;
    display:flex;
    align-items:center;
    justify-content:center;
    margin-bottom:35px;
}

.icon-box i{
    color:#00c896;
    font-size:2rem;
}

.principle-card h3{
    color:#fff;
    font-size:2rem;
    font-weight:700;
    margin-bottom:25px;
}

.principle-card p{
    color:#9ca3af;
    line-height:1.9;
    font-size:1.05rem;
    margin-bottom:0;
}

/* Responsive */

@media(max-width:991px){

    .guiding-principles{
        padding:80px 0;
    }

    .section-title{
        font-size:2.5rem;
    }

    .principle-card{
        padding:40px 30px;
    }

}

@media(max-width:768px){

    .section-title{
        font-size:2rem;
    }

}
/*=============================
 Contact Information Bar
==============================*/

.contact-info-bar{
    background:#1d2122;
    padding:50px 0;
}

.info-box{
    display:flex;
    align-items:center;
    gap:25px;
    transition:.35s;
}

.info-icon{
    width:85px;
    height:85px;
    display:flex;
    align-items:center;
    justify-content:center;
    color:#16c23a;
    font-size:3.4rem;
    flex-shrink:0;
}

.info-content span{
    display:block;
    color:#b9b9b9;
    font-size:1.65rem;
    font-weight:600;
    margin-bottom:8px;
}

.info-content h5{
    color:#16c23a;
    font-size:2rem;
    font-weight:700;
    margin:0;
}

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

.info-box:hover .info-icon{
    color:#ffffff;
}

.info-box:hover h5{
    color:#ffffff;
}

@media(max-width:991px){

    .contact-info-bar{
        padding:40px 0;
    }

    .info-icon{
        width:70px;
        height:70px;
        font-size:2.8rem;
    }

    .info-content span{
        font-size:1.2rem;
    }

    .info-content h5{
        font-size:1.6rem;
    }

}

@media(max-width:767px){

    .info-box{
        justify-content:center;
        text-align:center;
        flex-direction:column;
        gap:15px;
    }

}
/*=================================
 Call To Action home page section
==================================*/

.cta-section{
    padding:80px 0;
    background:#f8f9fa;
}

.cta-box{
    background:#ffffff;
    border-radius:18px;
    padding:60px;
    box-shadow:0 15px 40px rgba(0,0,0,.08);
}

.cta-box h2{
    font-size:2.6rem;
    font-weight:700;
    color:#1b1b1b;
    margin-bottom:15px;
}

.cta-box p{
    font-size:1.15rem;
    color:#6c757d;
    margin-bottom:0;
    line-height:1.8;
}


@media(max-width:991px){

    .cta-box{
        padding:40px 30px;
        text-align:center;
    }

    .cta-box h2{
        font-size:2rem;
    }

    .cta-btn{
        width:100%;
        max-width:280px;
    }

}

/* projects section*/
.projects{
    padding:100px 0;
}

.section-tag{
    color:#f58220;
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:2px;
}

.section-title{

    font-size:3rem;
    font-weight:700;
    color:#0b2341;
}

.filter-btn{

    border:1px solid #ddd;
    background:#fff;
    border-radius:40px;
    padding:12px 28px;
    margin-left:10px;
    transition:.3s;
    font-weight:600;

}

.filter-btn:hover,
.filter-btn.active{

    background:#f58220;
    color:#fff;
    border-color:#f58220;

}

.project-card{

    position:relative;
    overflow:hidden;
    border-radius:15px;
    box-shadow:0 15px 40px rgba(0,0,0,.1);

}

.project-card img{

    width:100%;
    height:420px;
    object-fit:cover;
    transition:.5s;

}

.project-overlay{

    position:absolute;
    left:0;
    right:0;
    bottom:-220px;
    padding:35px;
    background:linear-gradient(transparent,rgba(0,0,0,.95));
    transition:.45s;

}

.project-card:hover .project-overlay{

    bottom:0;

}

.project-card:hover img{

    transform:scale(1.08);

}

.project-overlay h3{

    color:#fff;
    font-weight:700;
    margin-bottom:15px;

}

.project-overlay p{

    color:#ddd;
    margin-bottom:20px;

}

.project-overlay a{

    color:#fff;
    background:#f58220;
    padding:10px 25px;
    border-radius:30px;
    text-decoration:none;
    display:inline-block;

}

.project-overlay a:hover{

    background:#fff;
    color:#f58220;

}

.project-item.hide{

    display:none;

}

@media(max-width:768px){

.section-title{

font-size:2.2rem;

}

.filter-btn{

margin-top:10px;
margin-left:0;

}

.project-card img{

height:320px;

}

}
/*=================================
  Mumbi House Installation Section
  *===============================*/
.project-details{

    padding:90px 0;

}

.project-cover{

    width:100%;
    height:500px;
    object-fit:cover;
    border-radius:15px;

}

.project-details h2{

    font-size:2.5rem;
    font-weight:700;
    color:#1b1b1b;

}

.project-details h3{

    font-size:1.6rem;
    font-weight:700;
    margin-bottom:15px;

}

.project-details p{

    line-height:1.9;
    color:#6c757d;

}

.project-box{

    background:#fff;
    padding:35px;
    border-radius:15px;
    box-shadow:0 10px 30px rgba(0,0,0,.06);

}

.project-sidebar{

    background:#f8f9fa;
    padding:35px;
    border-radius:15px;
    position:sticky;
    top:120px;

}

.project-sidebar h4{

    margin-bottom:25px;
    font-weight:700;

}

.project-sidebar ul{

    list-style:none;
    padding:0;
    margin:0;

}

.project-sidebar li{

    display:flex;
    justify-content:space-between;
    padding:15px 0;
    border-bottom:1px solid #ddd;

}

.project-sidebar strong{

    color:#222;

}

.project-sidebar span{

    color:#6c757d;

}

.gallery-img{

    width:100%;
    height:230px;
    object-fit:cover;
    border-radius:10px;
    transition:.4s;

}

.gallery-img:hover{

    transform:scale(1.05);

}

.btn-orange{

    background:#f58220;
    color:#fff;
    padding:14px;
    border-radius:8px;
    font-weight:600;

}

.btn-orange:hover{

    background:#dd6f0f;
    color:#fff;

}

@media(max-width:991px){

.project-cover{

height:350px;

}

.project-sidebar{

position:relative;
top:0;
margin-top:40px;

}

}
/*=========================
Contact Section
==========================*/

.contact-section{
    padding:20px 0;
}

.section-tag{

    display:inline-block;
    color:#f58220;
    font-size:15px;
    font-weight:700;
    letter-spacing:3px;
    text-transform:uppercase;

}

.section-title{

    font-size:3rem;
    font-weight:700;
    color:#16243b;
    margin-bottom:20px;

}

.section-description{

    max-width:760px;
    margin:auto;
    color:#6c757d;
    font-size:1.15rem;
    line-height:1.9;

}

.contact-card{

    background:#fff;
    border-radius:18px;
    padding:25px 15px;
    text-align:center;
    box-shadow:0 12px 35px rgba(0,0,0,.08);
    transition:.35s ease;
    height:100%;

}

.contact-card:hover{

    transform:translateY(-8px);
    box-shadow:0 20px 45px rgba(0,0,0,.12);

}

.contact-icon{

    width:60px;
    height:60px;
    border-radius:50%;
    background:#f5f7fb;
    margin:0 auto 30px;
    display:flex;
    align-items:center;
    justify-content:center;
    transition:.35s;

}

.contact-icon i{

    font-size:2rem;
    color:#f58220;

}

.contact-card:hover .contact-icon{

    background:#f58220;

}

.contact-card:hover .contact-icon i{

    color:#fff;

}

.contact-card h3{

    font-size:2rem;
    font-weight:700;
    color:#16243b;
    margin-bottom:20px;

}

.contact-card p{

    margin:0;
    color:#6c757d;
    font-size:1.05rem;
    line-height:1.8;

}

@media(max-width:991px){

.section-title{

font-size:2.4rem;

}

.contact-section{

padding:80px 0;

}

}

@media(max-width:768px){

.section-title{

font-size:2rem;

}

.section-description{

font-size:1rem;

}

.contact-card{

padding:40px 25px;

}

}

.frepnet-contact{
    background:#fff;
}

.frepnet-contact .contact-subtitle{
    display:inline-flex;
    align-items:center;
    gap:8px;
    font-size:15px;
    font-weight:600;
    color:#0b1b4d;
    text-transform:uppercase;
    letter-spacing:.5px;
}

.frepnet-contact .contact-subtitle i{
    color:#19b54a;
}

.frepnet-contact .contact-title{
    font-size:56px;
    font-weight:800;
    color:#07153f;
    margin-top:12px;
    margin-bottom:0;
}

.frepnet-contact .contact-box{
    background:#f7f7f7;
    padding:35px;
    border-radius:12px;
}

.frepnet-contact .form-label{
    font-weight:600;
    color:#0b1b4d;
    margin-bottom:8px;
}

.frepnet-contact .form-control,
.frepnet-contact .form-select{
    height:56px;
    border:1px solid #ddd;
    border-radius:8px;
    box-shadow:none;
    padding:0 18px;
}

.frepnet-contact textarea.form-control{
    height:140px;
    padding-top:15px;
    resize:none;
}

.frepnet-contact .form-control:focus,
.frepnet-contact .form-select:focus{
    border-color:#ef3b33;
    box-shadow:none;
}

.frepnet-contact .form-check-label{
    color:#222;
    font-size:15px;
}

.frepnet-contact .form-check-label a{
    text-decoration:none;
    color:#0b1b4d;
    font-weight:600;
}

.frepnet-contact .contact-btn{
    background:#ef3b33;
    color:#fff;
    border:none;
    border-radius:50px;
    padding:14px 34px;
    font-weight:700;
    transition:.3s;
}

.frepnet-contact .contact-btn:hover{
    background:#d82e27;
    color:#fff;
}

.frepnet-contact .map-box{
    overflow:hidden;
    border-radius:12px;
    height:100%;
    min-height:575px;
}

.frepnet-contact .map-box iframe{
    width:100%;
    height:100%;
    border:0;
}

@media (max-width:991px){

    .frepnet-contact .contact-title{
        font-size:42px;
    }

    .frepnet-contact .map-box{
        min-height:420px;
    }
}

@media (max-width:767px){

    .frepnet-contact .contact-title{
        font-size:34px;
    }

    .frepnet-contact .contact-box{
        padding:25px;
    }

    .frepnet-contact .contact-btn{
        width:100%;
    }
}
/* ==========================================================================
   why choose us Section Styles
   ========================================================================== */
   
.why-section{
    padding:30px 0;
}

.why-card{
    background:#fff;
    overflow:hidden;
}

.why-left{
    padding:15px;
}

.why-title{
    color:#25165D;
    font-size:2.25rem;
    font-weight:700;
    margin-bottom:10px;
}

.feature{
    display:flex;
    align-items:flex-start;
    gap:15px;
    margin-bottom:10px;
}

.feature:last-child{
    margin-bottom:0;
}

.feature i{
    color:#11A8FF;
    font-size:18px;
    margin-top:3px;
}

.feature h5{
    color:#25165D;
    font-weight:600;
    font-size:1.05rem;
    margin-bottom:2px;
}

.feature p{
    color:#54546a;
    font-size:.95rem;
    line-height:1.8;
    margin:0;
}

.why-image{
    height:100%;
}

.why-image img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
}

@media(max-width:991px){

.why-left{
    padding:15px;
}

.why-title{
    font-size:1.9rem;
}

.why-image{
    min-height:350px;
}

}

@media(max-width:768px){

.why-left{
    padding:15px;
}

.why-title{
    font-size:1.7rem;
}

.feature{
    margin-bottom:15px;
}

}

/* ==========================================================================
   Testimonials Section Styles
   ========================================================================== */
   /* ==========================================================================
   Octic Services Custom Styling
   ========================================================================== */
.octic-services {
  --octic-orange: #ff4d1c;
  --octic-gray-bg: #f5f7f8;
  --octic-circle-bg: #f1f3f4;
  font-family: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
}

/* --- Top Section Elements --- */
.octic-services .features-subtitle {
  color: var(--octic-orange);
  font-weight: 700;
  font-size: 0.9rem;
  letter-spacing: 1px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 15px;
}

.octic-services .features-subtitle::before,
.octic-services .features-subtitle::after {
  content: "";
  width: 30px;
  height: 2px;
  background-color: var(--octic-orange);
  display: inline-block;
}

.octic-services .section-title {
  font-size: 2.6rem;
  font-weight: 800;
  color: #111111;
  margin-top: 10px;
  margin-bottom: 50px;
}

.octic-services .service-card-top {
  border: 1px solid #ebebeb;
  background-color: #ffffff;
  border-radius: 4px;
  padding: 50px 30px;
  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.octic-services .service-card-top:hover {
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.04);
  transform: translateY(-5px);
  border-color: #e2e2e2;
}

.octic-services .service-card-top h3 {
  font-size: 1.4rem;
  font-weight: 700;
  color: #111111;
  margin-bottom: 15px;
}

.octic-services .service-card-top p {
  font-size: 0.9rem;
  color: #7a7a7a;
  line-height: 1.7;
  margin-bottom: 35px;
}

.octic-services .icon-circle {
  width: 110px;
  height: 110px;
  background-color: var(--octic-circle-bg);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: auto; /* Pushes the circle container to the absolute bottom of card content */
  transition: background-color 0.3s ease;
}

.octic-services .icon-circle i {
  font-size: 2.6rem;
  color: var(--octic-orange);
}

/* --- Bottom Section Elements --- */
.octic-services .bottom-services-wrapper {
  background-color: var(--octic-gray-bg);
  padding: 90px 0;
  margin-top: 90px;
}

.octic-services .service-card-bottom {
  background: #ffffff;
  border-radius: 4px;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.01);
  height: 100%;
  transition: all 0.3s ease;
}

.octic-services .service-card-bottom:hover {
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.04);
}

.octic-services .num-block {
  background-color: var(--octic-orange);
  color: #ffffff;
  font-size: 2.2rem;
  font-weight: 800;
  width: 85px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.octic-services .content-block {
  padding: 30px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.octic-services .content-block h4 {
  font-size: 1.3rem;
  font-weight: 700;
  color: #111111;
  margin-bottom: 10px;
}

.octic-services .content-block p {
  font-size: 0.88rem;
  color: #7a7a7a;
  line-height: 1.6;
  margin: 0;
}

/* --- Areas Covered styles --- */
.areas-covered{
    background:#f8fafc;
}

.section-badge{
    display:inline-block;
    padding:8px 20px;
    background:#eaf3ff;
    color:#0d6efd;
    font-weight:600;
    font-size:.9rem;
}

.coverage-card{
    background:#fff;
    padding:35px 25px;
    display:block;
    text-align:center;
    text-decoration:none;
    color:#222;
    transition:.35s;
    border:1px solid #e9ecef;
    height:100%;
    position:relative;
    overflow:hidden;
}

.coverage-card::before{
    content:"";
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:5px;
    background:#0d6efd;
    transform:scaleX(0);
    transition:.35s;
}

.coverage-card:hover::before{
    transform:scaleX(1);
}

.coverage-card .icon{
    width:20px;
    height:20px;
    margin:auto;
    border-radius:50%;
    background:#eef5ff;
    display:flex;
    align-items:center;
    justify-content:center;
    color:#0d6efd;
    font-size:28px;
    transition:.35s;
}

.coverage-card h5{
    margin:20px 0 10px;
    font-weight:700;
}

.coverage-card span{
    display:inline-block;
    padding:6px 16px;
    border-radius:30px;
    background:#d1f7df;
    color:#198754;
    font-size:.85rem;
    font-weight:600;
}

.coverage-card:hover{
    transform:translateY(-10px);
    box-shadow:0 18px 40px rgba(0,0,0,.08);
    color:#222;
}

.coverage-card:hover .icon{
    background:#0d6efd;
    color:#fff;
}

@media (max-width:767px){
    .coverage-card{
        padding:25px 20px;
    }
}
/* ==========================================================================
   FAQs Section Styles
   ========================================================================== */
/* FAQ */
#faq{
    background:#f8f9fa;
}

.accordion-item{
    border:none;
    margin-bottom:15px;
    border-radius:10px !important;
    overflow:hidden;
}

.accordion-button{
    padding:20px 25px;
    font-size:1.05rem;
    font-weight:600;
    background:#fff;
    box-shadow:none;
}

.accordion-button:not(.collapsed){
    background:#ff6b00;
    color:#fff;
}

.accordion-button:focus{
    box-shadow:none;
    border:none;
}

.accordion-button::after{
    filter:brightness(0);
}

.accordion-button:not(.collapsed)::after{
    filter:brightness(0) invert(1);
}

.accordion-body{
    padding:20px 25px;
    color:#666;
    line-height:1.8;
    background:#fff;
}
/* ==========================================================================
   Speed Test Section Styles
   ========================================================================== */
   .speed-test{
    background:#f7f8fa;
}

.speed-card{
    background:#fff;
    border-radius:18px;
    padding:20px;
    box-shadow:0 10px 35px rgba(0,0,0,.08);
    overflow:hidden;
}

.speed-card iframe{
    width:100%;
    height:720px;
    border:0;
    border-radius:12px;
}

@media (max-width:992px){
    .speed-card iframe{
        height:650px;
    }
}

@media (max-width:768px){
    .speed-card{
        padding:10px;
    }

    .speed-card iframe{
        height:600px;
    }
}