*{margin: 0px; padding: 0px; box-sizing: border-box;}

img{max-width: 100%;}

a,a:hover,a:visited,a:active,a:focus{text-decoration: none;}

ul{margin: 0px; padding: 0px;}

p{margin: 0px;}


body{    font-family: 'ABeeZee', sans-serif; padding-right:0 !important; overflow-x:hidden;}


header{position: relative; left: 0px; right: 0px; top: 0px; z-index: 99;}

header .header-bottom{padding: 0px 15px; background: rgba(255, 255, 255, 0.2); backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px); border-bottom: 1px solid rgba(255, 255, 255, 0.3); }

header .header-bottom .navbar{padding: 0px;}

header .header-bottom .navbar .navbar-brand{width:8%;}

header .header-bottom .navbar .navbar-nav{align-items: center; justify-content: center; gap: 30px; margin-right: 25px;}

header .header-bottom .navbar .navbar-nav .nav-link{color: #000; font-size: 15px; font-weight: 400; position: relative; transition: .5s; font-family: Poppins,Arial,Helvetica,sans-serif;}

header .header-bottom .navbar .navbar-nav .nav-link:hover{color: #093364}

/* header .header-bottom .navbar .navbar-nav .nav-link::before{position: absolute; content: ''; width: 0px; height: 2px; background-color: #ff0000; bottom: 7px; transition: .5s; z-index: 1;} */

header .header-bottom .navbar .navbar-nav .nav-link:hover::before{width: 100%;}

header .header-bottom .navbar .outbox li a{font-size: 14px; color: #000; transition: .5s;}

header .header-bottom .navbar .outbox li a:hover{color: #093364;}

header .header-bottom .dropdown .dropdown-menu{border-left: 4px solid #093364 !important; background-color: #fff; padding: 0; border-radius: 0 0 0 0; width: auto; box-shadow: 0 0 10px 0 rgba(0,0,0,.12); border: transparent;}

header .header-bottom .dropdown .dropdown-menu .dropdown-item:hover{background-color: #fff; color: #093364;}

header .header-bottom .navbar .navbar-toggler{color: #093364; box-shadow: none; border: 2px solid #093364; border-radius:0px;}

header .header-bottom .navbar .offcanvas{width: 100%;}

.offcanvas-backdrop {
    position: relative !important;
 }
 .offcanvas.offcanvas-end {
     transform: translateX(0%) !important;
}

/* Hide dropdown by default */
/* .navbar .dropdown-menu {
    display: block;
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: all 0.3s ease;
    border: none;
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.12);
} */
@media (max-width: 992px) {
    header .header-bottom .navbar .navbar-nav .nav-link {color: #000000 !important;}
    header .header-bottom .navbar .outbox li  i{color: #000 !important;} 
     .navbar .dropdown-item {
        font-size: 10px;
    }
    header .header-bottom .navbar .navbar-nav{
        gap:10px;
    }

    header .topbar { display: none;}
}
/* Show on hover */
@media (min-width: 992px) {
    .navbar .dropdown:hover .dropdown-menu {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
    }


}

@media (max-width: 992px) {
      header{
    position: relative !important;
  }  
}

/* Dropdown items */
.navbar .dropdown-item {
    padding: 10px 20px;
    border-bottom: 1px solid #093364;
}

/* Arrow rotate */
@media (min-width: 992px) {
    .navbar .dropdown:hover .dropdown-toggle::after {
        transform: rotate(180deg);
    }
}


/* header ko sticky karna ki */

.sticky{background-color:#ffffffcc ; color: #000; left: 0; right: 0;z-index: 999; position: fixed !important; top:0px; animation: slideDown .5s ease-out;}


@keyframes slideDown { from { transform: translateY(-100%); }

                       to { transform: translateY(10); }

  }

header .heaberbooyem .offcanvas-title{color: #020202; }


.main{ background: linear-gradient(180deg,#f1f6fa,#f9f8ff); }





/* ======================================================================================== */
/* ======================================================================================== */



/* footer */

:root {
    --primary: #6C63FF;
    --primary-dark: #4D44DB;
    --secondary: #FF6584;
    --dark: #1A1A2E;
    --darker: #0F0F1B;
    --light: #F8F9FA;
    --white: #ffffff;
    --gray: #ADB5BD;
    --transition: all 0.3s ease;
}

/* Footer */
#footer {
position: relative;
    background-color:#000;
    background-image:url(../images/footer-bg.png);
    background-position:center center;
    background-repeat:no-repeat;
    background-size:cover;
    overflow:hidden;
    padding:50px 0;
}
#footer::before{
    content:"";
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background:rgba(0,0,0,.75); /* opacity yaha adjust kar sakte ho */
    z-index:1;
}

#footer .container{
    position:relative;
    z-index:2;
}


.footer-logo {
    width: 150px;
    margin-bottom: 15px;
    background: #fff;
    border-radius: 20px 0;
}

.footer-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 40px;
}

.footer-column h3 {
    font-size: 22px;
    color:#fff;
    font-weight:600;
    margin-bottom: 20px;
    position: relative;
}

.footer-column h3::after {
    content: "";
    width: 45px;
    height: 3px;
    background: #fff;
    position: absolute;
    left: 0;
    bottom: -8px;
}

.footer-column p {
    font-size: 14px;
    color: #f4f6f7;
    line-height: 1.7;
}

/* Links */
.footer-links {
    list-style: none;
}

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

.footer-links a {
    color: #f4f6f7;
    text-decoration: none;
    position: relative;
    transition: var(--transition);
}

.footer-links a::before {
    content: "→";
    position: absolute;
    left: 0;
    opacity: 0;
    transition: var(--transition);
}

.footer-links a:hover {
    color:#0c6d86;
    padding-left: 22px;
}

.footer-links a:hover::before {
    opacity: 1;
    color: #0c6d86;
}

/* Contact */
.contact-item {
    display: flex;
    gap: 10px;
    margin-bottom: 15px;
    align-items: baseline;
    color:#fff;
}

.contact-item i {
    color: #fff;
}

.contact-item a{
     color: var(--white);
}

/* Social */
.social-links {
    display: flex;
    gap: 12px;
    margin-top: 20px;
}

.social-link {
    width: 40px;
    height: 40px;
    background: rgba(255,255,255,0.08);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--white);
    transition: var(--transition);
}

.social-link:hover {
    background: #fff;
    transform: translateY(-4px);
    color: #0c6d86;
}

/* Bottom */
.copyright {
    text-align: center;
    margin-top: 40px;
}
.copyright  a img{
    width: 200px;
    height: auto;
}

/* Back to top */
.back-to-top {
    position: fixed;
    right: 20px;
    bottom: 20px;
    width: 48px;
    height: 48px;
    background: var(--primary);
    color: var(--white);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: var(--transition);
    cursor: pointer;
}

.back-to-top.visible {
    opacity: 1;
    visibility: visible;
}


/* model */

.modal .forem .icon-input {position: relative;}

.modal .modal-content{background-color: #f8f8f8; padding: 30px;}

.modal .forem span {position: absolute; top: 9px; left: 23px; color: #093364;}

.modal .forem .form-control {background-color: #fff; padding: 10px 40px; box-shadow: none; border: transparent;
border-radius: 0px; margin-bottom: 10px; font-size: 15px;}

.modal .forem .btn {padding: 10px 30px; background-color: #093364; color: #fff; border-radius: 0px; margin-top: 20px;}



    /* whatapp */
	.quickcontact { width: 40px; position: fixed; top: 77%; right: 30px; z-index: 9999;}


/* ======================================================================================== */
 /* slider section css start  */
/* ======================================================================================== */



.slider-section {
    overflow-x: hidden;
}



/* ======================================================================================== */
 /* about section css start  */
/* ======================================================================================== */



#about-section .hero-section{min-height:100vh;display:grid;grid-template-columns:1fr 1fr;position:relative;overflow:hidden}
#about-section .left-panel{padding:60px 50px;display:flex;flex-direction:column;justify-content:center;position:relative;z-index:2}
#about-section .badge{display:inline-flex;align-items:center;gap:8px;background: #0c2f52;color:white;font-size:12px;font-weight:600;letter-spacing:2px;text-transform:uppercase;padding:8px 16px;border-radius:2px;width:fit-content;margin-bottom:28px;animation:fadeSlideUp .6s ease forwards}
#about-section .badge-dot{width:6px;height:6px;background:white;border-radius:50%;animation:pulse 1.5s infinite}
#about-section .rank-display{display:flex;align-items:flex-start;gap:0;margin-bottom:16px;animation:fadeSlideUp .7s ease forwards}
#about-section .rank-no{font-family:'Bebas Neue',sans-serif;font-size:22px;color:#0c6d86;line-height:1;margin-top:8px}
#about-section .rank-number{font-family:'Bebas Neue',sans-serif;font-size:140px;line-height:.85;color:#0c6d86;letter-spacing:-4px}
#about-section .rank-star{font-family:'Bebas Neue',sans-serif;font-size:40px;color:#FF5722;margin-top:10px}
#about-section .rank-label{font-family:'Bebas Neue',sans-serif;font-size:28px;color: #0c6d86;letter-spacing:3px;text-transform:uppercase;line-height:1;margin-bottom:4px;animation:fadeSlideUp .8s ease forwards}
#about-section .rank-sub{font-size:13px;font-weight:500;color:#5a7070;letter-spacing:1px;text-transform:uppercase;padding:6px 0;border-top:2px solid #0c6d86;border-bottom:2px solid #0c6d86;margin-bottom:30px;width:fit-content;animation:fadeSlideUp .9s ease forwards}
#about-section .tagline-note{font-size:12px;color:#5a7070;margin-bottom:32px;font-style:italic;animation:fadeSlideUp 1s ease forwards}
#about-section .description{font-size:15px;line-height:1.8;color:#5a7070;max-width:420px;margin-bottom:40px;animation:fadeSlideUp 1.1s ease forwards}
#about-section .cta-btn{display:inline-flex;align-items:center;gap:10px;background:#0c6d86;color:white;padding:14px 28px;font-size:14px;font-weight:600;letter-spacing:1px;text-transform:uppercase;border:none;cursor:pointer;transition:background .3s,transform .2s;text-decoration:none;width:fit-content;animation:fadeSlideUp 1.2s ease forwards;clip-path:polygon(0 0,calc(100% - 12px) 0,100% 12px,100% 100%,12px 100%,0 calc(100% - 12px))}
#about-section .cta-btn:hover{background: #0c6d86;transform:translateY(-2px);color: #fff;}
#about-section .cta-btn svg{transition:transform .3s}
#about-section .cta-btn:hover svg{transform:translateX(4px)}
#about-section .right-panel{position:relative;overflow:hidden}
#about-section .right-panel img {width: 100%; height: 100%; object-fit: contain; object-position: left;}
#about-section .stats-bar{background: #0c6d86;padding:0;position:relative;z-index:10}
#about-section .stats-inner{display:flex;flex-wrap:wrap;justify-content:stretch}
#about-section .stat-item{flex:1;min-width:120px;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:28px 16px;position:relative;cursor:default;transition:background .3s;text-align:center}
#about-section .stat-item:not(:last-child)::after{content:'';position:absolute;right:0;top:20%;height:60%;width:1px;background:rgba(255,255,255,.2)}
#about-section .stat-item:hover{background:rgba(255,255,255,.08)}
#about-section .stat-value{font-family:'Bebas Neue',sans-serif;font-size:38px;color:white;line-height:1;letter-spacing:1px}
#about-section .stat-value span{color:#fff}
#about-section .stat-label{font-size:11px;font-weight:500;color:rgba(255,255,255,.65);letter-spacing:1.5px;text-transform:uppercase;margin-top:6px}
#about-section .stat-icon{width:28px;height:28px;margin-bottom:8px;opacity:.8}
@keyframes fadeSlideUp{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:translateY(0)}}
@keyframes pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.5;transform:scale(1.4)}}
@media (max-width:900px){
    #about-section .hero-section{grid-template-columns:1fr;min-height:auto}
    #about-section .right-panel{height:380px;order:-1}.left-panel{padding:48px 32px}
    #about-section .rank-number{font-size:110px}
}
@media (max-width:600px){
    #about-section .left-panel{padding:40px 10px}
    #about-section .rank-number{font-size:90px}
    #about-section .rank-label{font-size:22px}
    #about-section .right-panel{height:300px}
    #about-section .stat-value{font-size:28px}
    #about-section .stat-item{padding:20px 10px;min-width:90px}
    #about-section .stats-inner{display:grid;grid-template-columns:repeat(3,1fr)}
    #about-section .stat-item::after{display:none}
    #about-section .stat-item:nth-child(1),.stat-item:nth-child(2),.stat-item:nth-child(3){border-bottom:1px solid rgba(255,255,255,.15)}
}









/* ======================================================================================== */
 /* projects section css start  */
/* ======================================================================================== */



  :root {
    --teal: #0c6d86;
    --teal-dark: #0c6d86;
    --accent: #E8520A;
    --white: #ffffff;
    --offwhite: #f7f8f8;
    --text: #111e1d;
    --muted: #6b8080;
    --border: #e0eaea;
  }


 #projects-section {padding:80px 0 60px;background:var(--white);overflow:hidden}
 #projects-section .section-heading{text-align:center;margin-bottom:56px;padding:0 24px}
 #projects-section .section-heading h2{font-family:'Bebas Neue',sans-serif;font-size:clamp(32px,6vw,58px);letter-spacing:3px;color:var(--text);line-height:1}
 #projects-section .section-heading h2 strong{color:var(--teal)}
 #projects-section .heading-line{width:60px;height:3px;background:var(--accent);margin:14px auto 0;border-radius:2px}
 #projects-section .slider-wrapper{display:grid;grid-template-columns:1fr 1fr;min-height:520px;position:relative}
 #projects-section .slide-image-panel{position:relative;overflow:hidden;background:#0a2a28}
 #projects-section .slide-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transform:scale(1.04);transition:opacity .7s ease,transform .7s ease}
 #projects-section .slide-img.active{opacity:1;transform:scale(1)}
 #projects-section .img-count-badge{position:absolute;bottom:24px;left:28px;background:rgba(0,0,0,.55);backdrop-filter:blur(6px);color:white;font-size:13px;font-weight:600;padding:6px 14px;letter-spacing:1px;z-index:5;border-left:3px solid var(--teal)}
 #projects-section .img-overlay-gradient{position:absolute;inset:0;background:linear-gradient(to right,transparent 60%,rgba(247,248,248,.08) 100%);pointer-events:none;z-index:2}
 #projects-section .slide-content-panel{background:var(--offwhite);display:flex;flex-direction:column;justify-content:center;padding:52px 56px;position:relative;border-left:4px solid var(--teal)}
 #projects-section .slide-content{position:relative;animation:none}
 #projects-section .slide-content.entering{animation:contentIn .5s ease forwards}
 @keyframes contentIn{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:translateY(0)}}
 #projects-section .project-status{display:inline-flex;align-items:center;gap:7px;font-size:11px;font-weight:700;letter-spacing:2.5px;text-transform:uppercase;color:var(--teal);margin-bottom:20px}
 #projects-section .status-dot{width:7px;height:7px;border-radius:50%;background:var(--teal);animation:blink 2s infinite}
 @keyframes blink{0%,100%{opacity:1}50%{opacity:.3}}
 #projects-section .project-number{font-family:'Bebas Neue',sans-serif;font-size:72px;line-height:.85;color:rgba(0,169,157,.1);position:absolute;top:-10px;right:0;letter-spacing:-2px;user-select:none}
 #projects-section .project-title{font-family:'Bebas Neue',sans-serif;font-size:clamp(26px,3.5vw,40px);letter-spacing:2px;color:var(--text);line-height:1.1;margin-bottom:8px}
 #projects-section .project-subtitle{font-size:13px;font-weight:600;color:var(--accent);letter-spacing:2px;text-transform:uppercase;margin-bottom:28px}
 #projects-section .divider{width:48px;height:2px;background:var(--teal);margin-bottom:24px}
 #projects-section .project-desc{font-size:15px;line-height:1.85;color:var(--muted);margin-bottom:36px;max-width:440px}
 #projects-section .explore-link{display:inline-flex;align-items:center;gap:8px;color:var(--teal);font-size:13px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;text-decoration:none;border-bottom:2px solid var(--teal);padding-bottom:4px;transition:color .2s,gap .2s}
 #projects-section .explore-link:hover{color:var(--teal-dark);gap:14px}
 #projects-section .nav-controls{display:flex;align-items:center;gap:20px;margin-top:40px}
 #projects-section .nav-btn{width:46px;height:46px;border:2px solid var(--teal);background:transparent;color:var(--teal);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .25s,color .25s,transform .2s;font-size:18px}
 #projects-section .nav-btn:hover{background:var(--teal);color:white;transform:scale(1.08)}
 #projects-section .nav-dots{display:flex;gap:8px;align-items:center}
 #projects-section .nav-dot{width:8px;height:8px;border-radius:50%;background:var(--border);cursor:pointer;transition:background .3s,transform .3s}
 #projects-section .nav-dot.active{background:var(--teal);transform:scale(1.3)}
 #projects-section .thumb-strip{display:flex;gap:10px;padding:20px 0 0 0;overflow-x:auto;scrollbar-width:none}
 #projects-section .thumb-strip::-webkit-scrollbar{display:none}
 #projects-section .thumb{flex-shrink:0;width:80px;height:54px;object-fit:cover;cursor:pointer;border:2px solid transparent;transition:border-color .3s,opacity .3s;opacity:.5}
 #projects-section .thumb.active{border-color:var(--teal);opacity:1}
 @media (max-width:900px){
 #projects-section .slider-wrapper{grid-template-columns:1fr;min-height:auto}
 #projects-section .slide-image-panel{height:340px}
 #projects-section .slide-content-panel{padding:40px 32px;border-left:none;border-top:4px solid var(--teal)}
 #projects-section .project-number{font-size:54px}
}
@media (max-width:560px){
 #projects-section .projects-section{padding:56px 0 40px}
 #projects-section .slide-image-panel{height:260px}
 #projects-section .slide-content-panel{padding:32px 20px}
 #projects-section .project-title{font-size:26px}
 #projects-section .project-desc{font-size:14px}
 #projects-section .thumb{width:64px;height:44px}
}








/* ======================================================================================== */
 /* products section css start  */
/* ======================================================================================== */
.products-grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 25px;
}
#products-section {padding:100px 5%;background:linear-gradient(135deg,#0c7187,#020617);color:#fff;position:relative}
#products-section .section-head{text-align:center;margin-bottom:60px}
#products-section .section-head h2{font-size:42px;font-weight:700}
#products-section .section-head h2 span{color:#38bdf8}
#products-section .section-head p{opacity:.7;margin-top:10px}
#products-section .slider-outer{position:relative}
#products-section .slider-track-wrap{overflow:hidden}
#products-section .slider-track{display:flex;transition:transform .6s ease}
#products-section .product-card{border-radius:18px;overflow:hidden;background:rgba(255,255,255,.05);backdrop-filter:blur(12px);transition:.4s;border:1px solid rgba(255,255,255,.08)}
#products-section .product-card:hover{transform:translateY(-12px) scale(1.02);box-shadow:0 20px 60px rgba(0,0,0,.5)}
#products-section .card-img-wrap{background: #fff; height:220px;position:relative;overflow:hidden}
#products-section .card-img-wrap img{width:100%;height:100%;object-fit:contain;transition:.6s}
#products-section .product-card:hover img{transform:scale(1.1)}
#products-section .card-tag{position:absolute;top:12px;left:12px;background:#38bdf8;color:#000;font-size:11px;padding:5px 10px;border-radius:20px;font-weight:600}
#products-section .card-body{padding:20px}
#products-section .card-title{font-size:18px;font-weight:600;margin-bottom:10px}
#products-section .card-desc{font-size:13px;opacity:.7;margin-bottom:15px}
#products-section .feature-chip{display:inline-block;font-size:11px;padding:5px 10px;border-radius:20px;background:rgba(56,189,248,.15);margin:3px}
#products-section .card-link{display:inline-flex;align-items:center;gap:6px;margin-top:10px;font-size:12px;color:#38bdf8;text-decoration:none}
#products-section .slider-footer{margin-top:40px;text-align:center}
#products-section .progress-bar-bg{width:200px;height:4px;background:rgba(255,255,255,.1);margin:10px auto;border-radius:10px}
#products-section .progress-bar-fill{height:100%;background:#38bdf8;width:0}
#products-section .dot{width:8px;height:8px;background:#555;display:inline-block;border-radius:50%;margin:5px}
#products-section .dot.active{background:#38bdf8}

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

@media(max-width: 576px){
  .products-grid{
    grid-template-columns: 1fr;
  }
}




/* your existing code */


#our-story-section{background-image:url(../images/mid-part.avif);background-position:center;background-repeat:no-repeat;background-attachment:fixed;background-size:cover;width:100%;height:100vh;display:flex;align-items:center;justify-content:center;position:relative}
#our-story-section::before{content:"";position:absolute;inset:0;background:rgb(0 0 0 / 30%);}
#our-story-section .story-overlay{position:relative;text-align:center;max-width:700px}
#our-story-section .story-overlay h1{font-size:42px;font-weight:400;color:#fff}
#our-story-section .story-overlay h1 span{font-weight:700}
#our-story-section .story-hover{opacity:0;transform:translateY(20px);transition:.4s ease}
#our-story-section .story-hover p{margin:15px 0;color:#fff;font-size:16px}
#our-story-section .story-hover a{background-color:#00a8b5;color: #fff; padding: 10px 20px ; border-radius: 10px; font-size:18px;text-decoration:underline}
#our-story-section:hover .story-hover{opacity:1;transform:translateY(0)}







#innovation-section {display:flex;min-height:100vh}
#innovation-section .innovation-content{flex:1;background:#f4f4f4;display:flex;flex-direction:column;justify-content:center;align-items:center;padding:60px;text-align:center;position:relative}
#innovation-section .logo{width:180px;margin-bottom:20px}
#innovation-section .innovation-content p{max-width:500px;font-size:16px;color:#222;line-height:1.6}
#innovation-section .explore-btn{margin-top:20px;font-size:18px;color:#00a8b5;text-decoration:none;border-bottom:2px solid #00a8b5;transition:.3s}
#innovation-section .explore-btn:hover{color:#007c86;border-color:#007c86}
#innovation-section .innovation-image{flex:1;overflow:hidden}
#innovation-section .innovation-image img{width:100%;height:100%;object-fit:cover}
@media (max-width:992px){
    #innovation-section {flex-direction:column}
    #innovation-section .innovation-image{height:400px}
}
@media (max-width:576px){
    #innovation-section .innovation-content{padding:30px 20px}
    #innovation-section .innovation-content p{font-size:14px}
    #innovation-section .explore-btn{font-size:16px}
}
#innovation-section .innovation-content::before{content:"";position:absolute;width:300px;height:200px;background:url('../images/steelpipe_4.png') no-repeat center/contain;top:-100px;left:0}
#innovation-section .innovation-content::after{content:"";position:absolute;width:260px;height:200px;background:url('../images/steel_2.png') no-repeat center/contain;bottom:0;left:-75px}











#innovation-section1 {display:flex;min-height:100vh}
#innovation-section1 .left{width:50%;position:relative;overflow:hidden}
#innovation-section1 .left img{width:100%;height:100%;object-fit:cover}
#innovation-section1 .left::after{content:"KR";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-size:300px;font-weight:bold;color:rgba(255,255,255,.6)}
#innovation-section1 .right{width:50%;padding:80px 60px;background:#f7f7f7;display:flex;flex-direction:column;justify-content:center}
#innovation-section1 .right h1{font-size:42px;font-weight:700;margin-bottom:20px}
#innovation-section1 .right .line{width:60px;height:3px;background:orange;margin-bottom:25px}
#innovation-section1 .right p{font-size:16px;color:#444;line-height:1.6;margin-bottom:20px}
#innovation-section1 .read-more{color:#0c6d86;text-decoration:none;font-weight:500}

@media (max-width:992px){
    #innovation-section1 {flex-direction:column}
    #innovation-section1 .left,.right{width:100%}
    #innovation-section1 .right{padding:40px 20px; width: 100%;}
    #innovation-section1 .left::after{font-size:150px}
}

@media (max-width:576px){
    #innovation-section1 .right h1{font-size:28px}
    #innovation-section1 .right p{font-size:14px}
}





#kamla-roofing{padding:70px 0;background:#f8f9fa}
#kamla-roofing .kamla-heading{font-size:42px;font-weight:700;color:#076f86}
#kamla-roofing .kamla-subheading{font-size:28px;font-weight:600;margin-bottom:20px}
#kamla-roofing .kamla-subheading span{color:#076f86;}
#kamla-roofing .kamla-desc{max-width:900px;margin:auto;font-size:16px;color:#555;line-height:1.7}
#kamla-roofing .kamla-box{margin-top:30px}
#kamla-roofing .kamla-icon{width:90px;height:90px;margin:0 auto 15px;border:4px solid #076f86;border-radius:20px;display:flex;align-items:center;justify-content:center;padding:6px}
#kamla-roofing .kamla-icon i{font-size:36px;color:#333}
#kamla-roofing h4{font-size:16px;font-weight:700;margin-top:40px}


#kamla-brand{padding:40px 0;background:#f5f5f5}
#kamla-brand .brand-small{font-size:13px;letter-spacing:2px;color:#777;margin-bottom:10px}
#kamla-brand .brand-logo{width:150px}
#kamla-brand .brand-heading{font-size:32px;font-weight:700;color:#076f86}
#kamla-brand .brand-sub{font-size:16px;color:#444;line-height:1.6;margin-bottom:20px}
#kamla-brand .brand-card{background:#fff;padding:20px;border-radius:6px;margin-top:20px;transition:.3s}
#kamla-brand .brand-card img{width:100%;height:220px;object-fit:cover}
#kamla-brand .brand-card h4{margin-top:20px;font-weight:600}
#kamla-brand .brand-btn{display:inline-block;margin-top:15px;padding:10px 18px;background:#00a8b5;color:#fff;font-size:14px;border-radius:5px;text-decoration:none;transition:.3s}
#kamla-brand .brand-btn:hover{background:#00a8b5}
#kamla-brand .brand-card:hover{transform:translateY(-5px)}


#kamla-expertise{padding:80px 0;background:#f8f8f8}
#kamla-expertise .row{row-gap:20px;}
#kamla-expertise .exp-title{font-size:36px;font-weight:700;color:#333}
#kamla-expertise .exp-title span{color:#076f86}
#kamla-expertise .exp-title strong{color:#076f86}
#kamla-expertise .exp-sub{margin-top:10px;color:#555;font-size:16px}
#kamla-expertise .exp-img{overflow:hidden;border-radius:6px}
#kamla-expertise .exp-img img{width:100%;height:260px;object-fit:cover;transition:.4s}
#kamla-expertise .exp-img:hover img{transform:scale(1.5)}
#kamla-expertise .exp-btn{display:inline-block;margin-top:20px;padding:12px 25px;background:#00a8b5;color:#fff;font-size:14px;border-radius:5px;text-decoration:none;transition:.3s}
#kamla-expertise .exp-btn:hover{background:#00a8b5}


#kamla-gallery{padding:60px 0;background:#ffffff}
#kamla-gallery .gallery-box{overflow:hidden;border-radius:6px;position:relative}
#kamla-gallery .gallery-box img{width:100%;height:280px;object-fit:cover;transition:.5s ease}
#kamla-gallery .gallery-box:hover img{transform:scale(1.1)}
#kamla-gallery .gallery-box::after{content:"";position:absolute;inset:0;background:rgba(0,0,0,.2);opacity:0;transition:.4s}
#kamla-gallery .gallery-box:hover::after{opacity:1}



#kamla-custom{background:linear-gradient(135deg,#0c7187,#020617);padding:40px 0;color:#fff}
#kamla-custom .custom-content h2{font-size:38px;font-weight:700;margin-bottom:20px;line-height:1.3}
#kamla-custom .custom-content p{line-height:1.9;font-size:16px;color:rgba(255,255,255,.92)}
#kamla-custom .fan-wrap{position:relative;width:100%;height:320px}
#kamla-custom .fan-card{position:absolute;width:78%;height:260px;border-radius:10px;overflow:hidden;transition:all .5s ease;box-shadow:0 14px 35px rgba(0,0,0,.35)}
#kamla-custom .fan-card img{width:100%;height:100%;object-fit:cover;display:block;pointer-events:none}
#kamla-custom .fan-card.c{top:50%;left:50%;transform:translate(-50%,-50%) rotate(0deg) scale(1);z-index:5;opacity:1;cursor:default}
#kamla-custom .fan-card.r1{top:54%;left:60%;transform:translate(-50%,-50%) rotate(0deg) scale(.86);z-index:4;opacity:1;cursor:pointer}
#kamla-custom .fan-card.r2{top:57%;left:70%;transform:translate(-50%,-50%) rotate(0deg) scale(.72);z-index:3;opacity:1;cursor:pointer}
#kamla-custom .fan-card.l1{top:54%;left:40%;transform:translate(-50%,-50%) rotate(0deg) scale(.86);z-index:4;opacity:1;cursor:pointer}
#kamla-custom .fan-card.l2{top:57%;left:30%;transform:translate(-50%,-50%) rotate(0deg) scale(.72);z-index:3;opacity:1;cursor:pointer}
#kamla-custom .fan-card.hidden{opacity:0;pointer-events:none;z-index:0}
#kamla-custom .fan-dots{display:flex;justify-content:center;gap:8px;margin-top:22px}
#kamla-custom .fan-dots span{width:9px;height:9px;border-radius:50%;background:rgba(255,255,255,.35);cursor:pointer;display:inline-block;transition:background .3s}
#kamla-custom .fan-dots span.on{background:#fff}
#kamla-custom .fan-arrows{display:flex;justify-content:center;gap:12px;margin-top:12px}
#kamla-custom .fan-arrows button{background:rgba(255,255,255,.18);border:1px solid rgba(255,255,255,.45);color:#fff;width:40px;height:40px;border-radius:50%;font-size:18px;cursor:pointer;transition:background .25s;outline:none}
#kamla-custom .fan-arrows button:hover{background:rgba(255,255,255,.38)}
@media (max-width:767px){#kamla-custom .custom-content{margin-bottom:30px}
#kamla-custom .custom-content h2{font-size:26px}
#kamla-custom .fan-wrap{height:240px}
#kamla-custom .fan-card{width:72%;height:190px}
}





#appointment-section{background:url('../images/bg-appoitment.jpg') no-repeat center center/cover;background-attachment:fixed;padding:100px 0;position:relative}
#appointment-section::before{content:"";position:absolute;width:100%;height:100%;background:rgba(0,0,0,.274);top:0;left:0}
#appointment-section .form-wrapper{position:relative;max-width:750px;background:#fff;padding:40px;border-radius:10px;z-index:2}
#appointment-section .form-row{display:flex;gap:20px;margin-bottom:15px}
#appointment-section .input-box{position:relative;width:100%}
#appointment-section .input-box i{position:absolute;top:50%;left:12px;transform:translateY(-50%);color:#076f86}
#appointment-section .input-box input,#appointment-section .input-box select{width:100%;padding:12px 12px 12px 40px;border:1px solid #ccc;border-radius:5px}
#appointment-section button{padding:12px 30px;background:#076f86;color:#fff;border:none;border-radius:5px;cursor:pointer}
#appointment-section textarea.form-control{padding-left:40px;padding-top:12px;resize:none}
#appointment-section textarea+i,#appointment-section .input-box textarea~i{top:18px;left:12px;transform:none}
#appointment-section .heading{font-size:20px;margin-bottom:10px;font-weight:600;color:#076f86}
#appointment-section .sub-heading{font-size:18px;margin-bottom:20px;font-weight:700;color:#000000}
@media (max-width:767px){#appointment-section .sub-heading{font-size:15px;}
#appointment-section .heading{font-size:14px;}
}




#slider {
  position: relative;
}

#slider .item img {
  width: 100%;
  display: block;
}

#slider .owl-dots {
  position: absolute;
  bottom: 15px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 9;
}

#slider .owl-theme .owl-dots .owl-dot span {
  width: 8px;
  height: 8px;
  margin: 5px;
  background: rgba(255,255,255,0.5);
  border: 2px solid #fff;
  transition: 0.3s;
}

#slider .owl-theme .owl-dots .owl-dot.active span,
#slider .owl-theme .owl-dots .owl-dot:hover span {
  background: #fff;
  transform: scale(1.2);
}


/* ===== Scoped CSS ===== */

/* ===== Scoped CSS ===== */

#roof-feature-section {
  padding: 40px 0;
  background: #f2f2f2;
}

#roof-feature-section .roof-feature-box {
  background:#0c6d86;
  border-radius: 20px;
  padding:20px 5px;
  text-align: center;
  transition: 0.4s ease;
  box-shadow: 0 5px 15px rgba(0,0,0,0.15);
}

#roof-feature-section .roof-feature-box:hover {
  transform: translateY(-5px);
}

#roof-feature-section .roof-feature-icon {
  width: 40px;
  color: #fff;
  margin: 0 auto 10px;
  line-height: 1;
}

#roof-feature-section .roof-feature-box h4 {
  color: #fff;
  font-size: 15px;
  font-weight: 600;
  margin: 0;
  line-height: 1.4;
}

@media (max-width: 767px) {
  #roof-feature-section .roof-feature-box h4 {
    font-size: 15px;
  }

  #roof-feature-section .roof-feature-icon {
    font-size: 34px;
  }
}


/* ===== Scoped CSS ===== */
#kamla-why-choose{
    overflow: hidden;
}

/* LEFT CONTENT AREA */
#kamla-why-choose .kamla-content-wrapper{
    position: relative;
    background: url('../images/why-choose-bg.png') center center/cover no-repeat;
    background-attachment: fixed;
    padding: 20px 24px;
    color: #fff;
    overflow: hidden;
    z-index: 1;
    min-height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* Overlay */
#kamla-why-choose .kamla-content-wrapper::before{
    content: "";
    position: absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background: #000000ba;
    z-index:-1;
}

/* Content overlay ke upar rahe */
#kamla-why-choose .kamla-content-wrapper > *{
    position: relative;
    z-index: 2;
    row-gap:20px;
}

#kamla-why-choose .kamla-subtitle{
    font-size:18px;
    font-weight:700;
    text-transform:uppercase;
    display:inline-block;
    margin-bottom:15px;
    letter-spacing:1px;
}

#kamla-why-choose h2{
    font-size:33px;
    font-weight:700;
    line-height:1.2;
    margin-bottom:15px;
    color:#fff;
}

#kamla-why-choose p{
    font-size:16px;
    line-height:1.9;
    color:rgba(255,255,255,0.85);
    margin-bottom:20px;
}

#kamla-why-choose .kamla-feature-box{
    background:#fff;
    text-align:center;
    padding:20px;
    transition:.4s ease;
    height:100%;
}

#kamla-why-choose .kamla-feature-box:hover{
    transform:translateY(-6px);
    box-shadow:0 15px 35px rgba(0,0,0,.15);
}

#kamla-why-choose .kamla-feature-box i{
    font-size:42px;
    color:#0c6d86;
    margin-bottom:15px;
}

#kamla-why-choose .kamla-feature-box h4{
    font-size:18px;
    font-weight:700;
    color:#000;
    margin:0;
}

/* RIGHT IMAGE */
#kamla-why-choose .kamla-image{
    height:100%;
}

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

/* ================= Responsive ================= */

@media (max-width:1199px){

    #kamla-why-choose h2{
        font-size:40px;
    }
}

@media (max-width:991px){

    #kamla-why-choose .kamla-content-wrapper{
        padding:15px;
        background-attachment:scroll; /* mobile fix */
    }

    #kamla-why-choose h2{
        font-size:34px;
    }

    #kamla-why-choose .kamla-image{
        height:450px;
    }
}

@media (max-width:767px){

    #kamla-why-choose h2{
        font-size:24px;
    }

    #kamla-why-choose p{
        font-size:15px;
        line-height:1.8;
    }

    #kamla-why-choose .kamla-feature-box{
        padding:25px 15px;
        height:120px;
    }

    #kamla-why-choose .kamla-feature-box h4{
        font-size:16px;
    }

    #kamla-why-choose .kamla-feature-box i{
        font-size:34px;
    }

    #kamla-why-choose .kamla-image{
        height:320px;
    }
}


#thanks{
       padding: 80px 0 10px;
}

#thanks .image{
    text-align:center;
}

@media (max-width:767px){
    #thanks {
    padding: 40px 0 10px;
}
}