/*
Theme Name: Netband
Author: Modina Theme
Author URI: https://themeforest.net/user/modinatheme/
Description:  Internet provider & Broadband TV HTML Template
Version: 1.0.0
*/

/*
=================================
|***    Table of contents:   ***|
=================================

1. General styles
2. Typography
3. Helpers
4. Preloader
5. Go up button
6. Header and navigation
7. Hero Section
8. About us
9. Services
10. Fun facts
11. Projects
12. Pricing
13. Testimonial
14. CTA
15. Team
16. Video Banner
17. Shop
18. Marquee
19. Blog
20. Footer

Main Style file-> assets/css/main.css 
*/
.header-logo {
    max-height: 80px;
    width: auto;
    transition: all 0.3s ease;
}

/* Hover effect */
.navbar-brand:hover .header-logo {
    transform: scale(1.05);
    opacity: 0.9;
}

/* Tablet */
@media (max-width: 991.98px) {
    .header-logo {
        max-height: 50px;
    }
}

/* Mobile */
@media (max-width: 575.98px) {
    .header-logo {
        max-height: 42px;
    }
}



/* logo/// */


.offcanvas__logo {
    padding: 20px 15px;
    border-bottom: 1px solid #e9ecef;
    text-align: center;
}

.offcanvas__logo a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
}

.offcanvas__logo img {
    max-height: 55px;
    width: auto;
    transition: all 0.3s ease;
}

/* Hover effect */
.offcanvas__logo a:hover img {
    transform: scale(1.05);
    opacity: 0.9;
}

/* Mobile optimization */
@media (max-width: 575.98px) {
    .offcanvas__logo img {
        max-height: 45px;
    }
}



/* hero .video styling */


.hero-video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    z-index: -1; /* content upar rahe */
}

.hero-video video {
    width: 100%;
    height: 100%;
    object-fit: cover; /* image jaisa effect */
}
.hero-section::before {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.45);
    z-index: 0;
}

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


/* video  */
.video-bg{
    position: relative;
    height: 80vh; /* ya jo height chahiye */
    overflow: hidden;
}

.bg-video{
    position: absolute;
    top: 50%;
    left: 50%;
    min-width: 100%;
    min-height: 100%;
    transform: translate(-50%, -50%);
    object-fit: cover;
    z-index: -1;
}

.video-bg .content{
    position: relative;
    z-index: 2;
    color: #fff;
    text-align: center;
    padding: 100px 20px;
}


/* 2nd video  */
.cta-subscribe-image{
    position: relative;
    max-width: 100%;
}

.cta-video{
    width: 100%;
    height: auto;
    border-radius: 12px; /* optional */
    object-fit: cover;
}

/* 3rd video  */
.video-hero{
    position: relative;
    height: 100%;
    overflow: hidden;
}

.hero-video{
    position: absolute;
    top: 50%;
    left: 50%;
    min-width: 100%;
    min-height: 100%;
    transform: translate(-50%, -50%);
    object-fit: cover;
    z-index: -1;
}




@media (max-width: 767px) {
  .section-title h2 {
    margin-bottom: 10px;
    font-size: 23px;
    line-height: 1.3;
  }
}
@media (max-width: 767px) {
  .section-title span {
    font-size: 12px;
  }
  .network-solution-items .icon {
    font-size: 50px;
  }
  .trusted-client-wrapper .trusted-client-image .counter-main-area .counter-area .counter-items h2 {
    font-size: 33px;
}
.brand-wrapper h6 {
    font-size: 20px;
}
.cta-subscribe-wrapper .cta-subscribe-content .subscribe-plan .price {
    font-size: 18px;
}

.cta-subscribe-wrapper .cta-subscribe-content .subscribe-plan .price span {
    font-size: 8px;
}

.link-btn {
    font-size: 9px;
}

}