/* --- CSS VARIABLES & GLOBAL STYLES --- */
        :root {
            --primary-orange: #F25912; /* Matches the orange in the image */
            --dark-bg: #111111;
            --darker-bg: #000000;
            --text-grey: #a0a0a0;
            --light-grey-bg: #f8f9fa;
        }

        body {
            font-family: 'Poppins', sans-serif;
            overflow-x: hidden;
            color: #000000;
            padding-top: 54px;
        }
 .color-dark{
          color: #000000;
 }
  .color-orange{
          color: #F25912;
 }
        h1, h2, h3, h4, h5, h6 {
            font-weight: 700;
        }

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

        .bg-black {
            background-color: var(--darker-bg) !important;
        }
        .btn{
            border-radius: 10px;
        }
        .btn-primary {
            background-color: var(--primary-orange);
            border-color: var(--primary-orange);
            padding: 10px 25px;
            font-weight: 600;
            border-radius: 8px;
            transition: all 0.3s ease;
        }

        .btn-primary:hover {
            background-color: #F25912;
            border-color: #F25912;
            transform: translateY(-2px);
        }

        .btn-outline-light {
            border-radius: 8px;
            padding: 10px 25px;
            font-weight: 600;
        }

        .section-padding {
            padding: 80px 0;
        }

        /* --- NAVBAR STYLES --- */
        .navbar {
            background-color: rgba(0, 0, 0, 0.95);
           padding: 5px 0;
        }
        .navbar .btn-light{color: #000 !important;}
        .navbar-collapse{
            width: 20%;
        }
        .navbar-brand img {
            height: 40px;
        }
   .navbar-nav .nav-item:first-child .nav-link{
    padding-left: 0;
    margin-left: 0;
   }
        .nav-link {
            color: #fff !important;
            font-weight: 500;
            margin: 0 10px;
            font-size: 0.9rem;
        }
  .nav-item.active .nav-link{
    color: var(--primary-orange) !important;
    position: relative;
  }

    .nav-item.active .nav-link:after{
        content: "";
        position: absolute;
        left: 0;
        top: auto;
        bottom: -10px;
        width: 100%;
        height: 3px;
        background-color: var(--primary-orange) !important;
    }
        .nav-link:hover {
            color: var(--primary-orange) !important;
        }

        .navbar .btn-sm {
            padding: 8px 20px;
        }

        /* Animated Hamburger Menu */
        .navbar-toggler {
            border: none;
            padding: 0;
            width: 30px;
            height: 24px;
            position: relative;
            transition: .5s ease-in-out;
            cursor: pointer;
        }

        .navbar-toggler:focus {
            box-shadow: none;
        }

        .navbar-toggler span {
            display: block;
            position: absolute;
            height: 3px;
            width: 100%;
            background: #fff;
            border-radius: 9px;
            opacity: 1;
            left: 0;
            transform: rotate(0deg);
            transition: .25s ease-in-out;
        }

        .navbar-toggler span:nth-child(1) { top: 0px; }
        .navbar-toggler span:nth-child(2) { top: 10px; }
        .navbar-toggler span:nth-child(3) { top: 20px; }

        .navbar-toggler[aria-expanded="true"] span:nth-child(1) {
            top: 10px;
            transform: rotate(135deg);
        }

        .navbar-toggler[aria-expanded="true"] span:nth-child(2) {
            opacity: 0;
            left: -60px;
        }

        .navbar-toggler[aria-expanded="true"] span:nth-child(3) {
            top: 10px;
            transform: rotate(-135deg);
        }

        /* --- HERO SECTION --- */
        .hero-section {
            background-color: var(--darker-bg);
            color: white;
            padding: 190px 0 150px 0; /* Extra padding bottom for visual balance */
            position: relative;
            overflow: hidden;
            min-height: 100vh;
            position: relative;
        }
  .hero-section video{
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
object-fit: cover;
  }

  .hero-text{
    position: relative;
  }
     
        .hero-title {
            font-size: 3.5rem;
            line-height: 1.2;
            margin-bottom: 20px;
        }

        .hero-text {
            color: white;
            margin-bottom: 30px;
            font-size: 1.1rem;
            
        }

        .hero-image-container img {
            max-width: 100%;
            height: auto;
            position: relative;
            z-index: 2;
            filter: drop-shadow(0 20px 30px rgba(0,0,0,0.5));
        }

        /* --- CONTENT SECTIONS --- */
        .content-img {
            border-radius: 20px;
            width: 100%;
            height: 350px;
            object-fit: cover;
            box-shadow: 0 10px 30px rgba(0,0,0,0.1);
        }

        .section-title {
            font-size: 3.125rem;
            margin-bottom: 20px;
        }

        .section-desc {
        
            line-height: 1.6;
            margin-bottom: 0;
        }
.mh-450{
    min-height: 450px;
}
        /* --- VARIETY SECTION (Dark) --- */
        .variety-section {
            background-color: #0f0f0f;
            color: white;
            background-image: url('../images/cylidnerbg.jpg'); /* Subtle texture */ 
            background-size: cover;
            background-attachment: fixed;
        }

        .product-card {
            background: rgba(255, 255, 255, 0.05);
            border: 1px solid rgba(255, 255, 255, 0.1);
            border-radius: 15px;
          border-radius: 24px;
          overflow: hidden;
            text-align: center;
            transition: transform 0.3s;
            backdrop-filter: blur(10px);
            position: relative;
        }

        .product-card:hover {
            transform: translateY(-10px);
            background: rgba(255, 255, 255, 0.1);
        }

        .product-card img {
    
    width: 100%;
    margin-bottom: 20px;
    height: 100%;
    object-fit: cover;
        }

        .product-card-footer {
            background: white;
            border-radius: 16px;
               padding: 5px 5px 5px 15px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-top: 15px;
            color: #000;
            font-weight: 600;
                position: absolute;
    left: 50%;
    bottom: 13px;
    transform: translate(-50%, 0);
    width: 92%;
    text-decoration: none;
        }

        .btn-arrow {
          background: black;
    color: white;
    width: 49px;
    height: 49px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
        }
     .btn-arrow img{
       width: 14px;
    height: 14px;
    object-fit: contain;
    margin: 0;
    transition: all .3s;

     }

         .product-card-footer:hover .btn-arrow {
            background-color: var(--primary-orange) !important;
         }
        /* --- FEATURES ICONS --- */
        .feature-icon-wrapper {
            display: flex;
            align-items: flex-start;
      
                align-items: center;
        }

        .feature-icon {
            width: 114px;
            height: 114px;
            margin-right: 20px;
            flex-shrink: 0;
            color: var(--primary-orange);
            font-size: 2rem;
        }
.feature-icon img{
    width: 100%;
    height: 100%;
    object-fit: contain;
}
        
.features-table td{
    border-bottom: 1px solid #E3E3E3;
    padding: 30px ;
}
.features-table tr td:first-child{
    border-right: 1px solid #E3E3E3;
}
.features-table tr:last-child td{
    border-bottom: 0;
}

        .feature-title {
            font-size: 1.4375rem;
            margin-bottom: 5px;
            font-weight: 900;
        }

        .feature-text {
            font-size: 1rem;
           
        }

        /* --- SPLIT SECTIONS (Cages etc) --- */
        .split-section-container {
            overflow: hidden;
        }
        .font-18{
            font-size: 18px;
        }
          .font-16{
            font-size: 16px;
        }
        .cages-section-right img{

    position: relative;
    min-height: 400px;
    border-radius: 0 !important;
        }

        .cages-img {
              max-width: 100%;
    height: 100%;
    object-fit: cover;
        }

        /* --- TESTIMONIAL --- */
        .testimonial-card {
            background-color: #000;
            color: white;
            border-radius: 20px;
            padding: 60px;
            position: relative;
            overflow: hidden;
            display: flex;
            align-items: center;
            gap: 40px;
        }

        .testimonial-img {
            width: 250px;
            height: 250px;
            border-radius: 15px;
            object-fit: cover;
            flex-shrink: 0;
            border: 1px solid #1a1a1a;
        }
  .testimonial-card p{
    color: #B4B4B4;
  }
        /* --- APP SECTION --- */
        .app-badges img {
            height: 70px;
            margin-right: 10px;
            cursor: pointer;
        }
        
        .app-phones-img {
            max-width: 100%;
            height: auto;
        }

        /* --- FOOTER --- */
        footer {
            background-color: #fff;
            padding: 60px 0 20px 0;
          
        }
   footer .container{
    border: 1px solid #E6E6E6;
    border-radius: 20px;
    padding: 50px 50px 20px 50px;
   }
        .social-icons a {
            color: #000;
            margin-right: 15px;
            font-size: 1.2rem;
            transition: color 0.3s;
        }

        .social-icons a:hover {
            color: var(--primary-orange);
        }

        .contact-box {
            background-color: #fff4ec;
            padding: 10px 20px;
            border-radius: 8px;
            display: inline-block;
            color: var(--primary-orange);
            font-weight: 600;
        }
 .appphone{
    padding: 0 0;
    min-height: 80vh;
 }
        .appphone .container{
            position: relative;
            height: 100%;
                min-height: 80vh;
        }
        .appphone .phone-image{
position: absolute;
left: 0;
top: 0;
height: 100%;
 

        }

        .phone-image img{
width: 100%;
height: 100%;
object-fit: contain;
        }
        .phoneright{
            left: auto !important;
            right: 0;
        }
.btn-block{width: 100%;}

.form-check-input:checked{background-color: var(--primary-orange);border-color: var(--primary-orange);}
/* ON DEMAND PAGE */
.on-demandhero{background: url(../images/ondemand-herobg.jpg) center no-repeat;background-size: cover;background-attachment: fixed;}
.commercialhero{background: url(../images/commercialherobg.jpg);}
.commercial-icons .feature-icon-wrapper{flex-direction: column;text-align: center;}
.commercial-icons .feature-icon-wrapper .feature-icon{margin-right: 0;}
.form-control{border-width: 2px;border-color: #000;font-weight: 700;padding-left: 15px;min-height: 50px;}
.loginsignup{padding-top: 140px !important;}
label, .font-bold{font-weight: 700;}
.product-details ul{list-style: none;margin-left: 0;padding-left: 0;}
.product-details ul li{font-size: 14px;line-height: 1.6;position: relative;padding-left: 20px;}
.product-details ul li:before{
    content: "";
    width: 12px;
    height: 12px;
    position: absolute;
    left: 0;
    top: 5px;
    background: url(../images/orange-check.svg) center no-repeat;
    background-size: contain;
}
.form-floating>.form-control:not(:placeholder-shown)~label{ color: var(--primary-orange);   transform: scale(.85) translateY(-28px) translateX(.15rem);}
.wpcf7-form-control{padding-left: 15px !important;}
.wpcf7-checkbox .wpcf7-list-item{margin-left: 0 !important;}
.wpcf7-checkbox{padding-left: 0 !important;border: 0 !important;}
.wpcf7-list-item-label{font-size: 16px !important;}
.wpcf7-checkbox input{width: 18px;height: 18px;margin-top: 3px;margin-right: 9px;}
.wpcf7-checkbox .wpcf7-list-item label{display: flex;}

 @media (min-width: 991px){
.headersign-mb{display: none !important;}
 }


        /* --- RESPONSIVE ADJUSTMENTS --- */
        @media (max-width: 991px) {
            .hero-title { font-size: 2.5rem; }
            .hero-spotlight { right: 50%; transform: translate(50%, -50%); }
            .hero-image-container { margin-top: 40px; text-align: center; }
            .product-card { margin-bottom: 30px; }
            .testimonial-card { flex-direction: column; text-align: center; padding: 40px; }
            .features-table td{width: 100%;display: block;border-right: 0 !important;border-bottom: 1px solid #E3E3E3 !important;}
            .features-table tr:nth-child(2) td:last-child{border-bottom: 0 !important;}
            .navbar-brand{margin-right: auto !important;}
            .navbar-toggler{    position: absolute;right: 20px;}
            .navbar-collapse{position: fixed;width: 100%;left:0;top: 60px;background: #000;}
            .buttonnav{display: none;}
            .nav-item.active .nav-link:after{bottom: 0;}
            .nav-link{margin: 0 !important;}
            .loginsignup{padding-top: 80px !important;}
        
.headersign-mb{padding-right: 16% !important;}
        }

        @media (max-width: 768px) {
            .hero-title { font-size: 2rem; }
            .section-padding { padding: 50px 0; }
            .cages-section-right { min-height: 250px;}
            .testimonial-img { margin-bottom: 20px; }
            .app-phones-img { margin-top: 30px; }
            .cages-section-right img{min-height: 250px;}
            .section-title{font-size: 2.5rem;}
            .hero-text .d-flex{flex-direction: column;}
            .hero-text .d-flex a{width: 100%;}
            .appphone .phone-image{position: static;}

            .mh-450{min-height: 250px;height: 250px;}
            .font-18{font-size: 15px;}
            footer .container{padding: 20px;text-align: center;}
            footer .text-md-end{margin-top: 20px;}
            footer .text-md-end a{display: block;text-align: center;margin: 0 !important;}
            .hero-section{background-position: right;}
            footer{padding-top: 0;}
        }

        @media (max-width:500px){
           .headersign-mb a{font-size: 13px !important;padding: 5px 10px!important;}
           .navbar-brand img {
    height: auto;
    width: 88px;
    
}
.on-demandhero{background-image: url(../images/ondemand-herobg-mb.jpg);}
  .commercialhero{background-image: url(../images/commercialherobg-mb.jpg);}         
        }

        .nav-item{list-style: none !important;}