*{
margin:0;
padding:0;
box-sizing:border-box;
font-family:Arial, Helvetica, sans-serif;
}
html, body{
overflow-x:hidden;
width:100%;
}
/* NAVBAR */

#navbar{
position:fixed;
top:40px;
left:0;
width:100%;
background:white;
z-index:1000;
transition:0.3s;
}

.navbar-scrolled{
box-shadow:0 4px 15px rgba(0,0,0,0.1);
}

/* ===== TOP BAR ===== */

.top-bar{
position:fixed;
top:0;
left:0;
width:100%;
height:40px; /* FIXED HEIGHT */
background:black;
color:#ffffff;
z-index:1001;

display:flex;
align-items:center;

transition:transform 0.3s ease;
}
.top-container{
width:100%;
max-width:1200px;
margin:auto;
display:flex;
justify-content:space-between;
align-items:center;

height:100%; /* IMPORTANT */
padding:0 16px; /* REMOVE vertical padding */
}

.top-left span{
margin-right:20px;
display:inline-flex;
align-items:center;
gap:6px;
}

.top-right a{
color:white;
margin-left:15px;
transition:0.3s;
}

.top-right a:hover{
color:#057fcc;
}


/* CONTAINER */
.nav-container{
width:100%;
max-width:1200px;
margin:0 auto;
display:flex;
align-items:center;
justify-content:space-between;
padding:14px 16px;
}

/* LOGO */

.logo img{
height:60px;
display:block;
}
.menu-toggle{
display:none;
font-size:26px;
cursor:pointer;
}
/* NAV LINKS */

.nav-links{
display:flex;
list-style:none;
gap:40px;
align-items:center;
}

.nav-links a{
text-decoration:none;
font-weight:700;
position:relative;
transition:0.3s;
color:black;
text-transform:uppercase;
}

/* HOVER */

.nav-links a:hover{
color:#057fcc;
}

.nav-links > li > a::after{
content:"";
position:absolute;
left:0;
bottom:-6px;
width:0%;
height:2px;
background:#057fcc;
transition:0.3s;
}

.nav-links > li > a:hover::after{
width:100%;
}

/* DROPDOWN */

.dropdown{
position:relative;
}
.dropdown-menu{
position:absolute;
top:100%;
left:0;

width:260px;   /* increase width */
padding:18px;
min-height:420px;
left:-20px;
border-radius:14px;

display:flex;
flex-direction:column;
gap:8px;

opacity:0;
transform:translateY(10px);
pointer-events:none;
transition:0.35s;

/* IMAGE BACKGROUND */
background:white;

background-size:contain;
background-position:center;
background-repeat:no-repeat;

box-shadow:0 15px 35px rgba(0,0,0,0.15);
}

/* SHOW DROPDOWN */

.dropdown:hover .dropdown-menu{
opacity:1;
transform:translateY(0);
pointer-events:auto;
}

/* Dropdown Item base style */
.dropdown-item {
    display: block;
    text-decoration: none;
    color: black !important; /* Force black initially */
    font-size: 16px;
    padding: 10px 15px;
    border-radius: 6px;
    font-weight: 700;
    transition: 0.3s;
}

/* Hover state fix */
.dropdown-menu .dropdown-item:hover {
    background: #057fcc;
    color: white !important; /* Hover chesinappudu white avvali */
}


.dropdown-menu.show{
opacity:1;
transform:translateY(0);
pointer-events:auto;
display:flex;
}

/* MOBILE MENU */

.menu-toggle{
display:none;
font-size:28px;
cursor:pointer;
}




@media (max-width:768px){



/* NAV CONTAINER */

.nav-container{
width:100%;
display:flex;
align-items:center;
justify-content:space-between;
padding:12px 16px;
}

/* LOGO */

.logo img{
height:45px;
}

/* MENU ICON */

.menu-toggle{
display:block;
font-size:26px;
cursor:pointer;
}

/* NAV LINKS */

.nav-links{
position:absolute;
top:70px;
left:0;
width:100%;
background:white;
flex-direction:column;
align-items:flex-start;
gap:18px;
padding:20px;
display:none;
box-shadow:0 10px 20px rgba(0,0,0,0.1);
}

/* ACTIVE MENU */

.nav-links.active{
display:flex;
}

/* NAV LINK STYLE */

.nav-links a{
color:black !important;
font-size:16px;
width:100%;
}

/* DROPDOWN */

.dropdown-menu{
position:static;
background:#ffffff;
box-shadow:none;
opacity:1;
transform:none;
pointer-events:auto;
display:none;
width:100%;
padding-left:15px;
}

/* SHOW DROPDOWN */

.dropdown-menu.show{
display:flex;
flex-direction:column;
align-items:flex-start;
}

/* DROPDOWN LINKS */

.dropdown-item{
color:#333 !important;
font-size:15px;
padding:10px 0;
width:100%;
}

/* REMOVE DESKTOP HOVER */

.dropdown:hover .dropdown-menu{
opacity:1;
transform:none;
pointer-events:auto;
}

}




















/* HERO */

.products-hero{
height:60vh;
background: url("../images/productbg.png") center/cover no-repeat;

position:relative;
color:white;
text-align:center;
}

/* REMOVE OVERLAY ❌ */
/* .hero-overlay removed */

/* TEXT - PERFECT CENTER */

.hero-text{
position:absolute;
top:50%;
left:50%;
transform:translate(-50%, -50%);
z-index:2;
max-width: 1000px;
margin-top: 50px;
}

/* REMOVE DEFAULT MARGINS */


/* TITLE */

.hero-text h1{
text-transform: uppercase;
font-size:50px;
white-space:nowrap;
/* SHADE */
text-shadow:
0 5px 15px rgba(0,0,0,1.9),
0 2px 5px rgba(0,0,0,1.9);
}
.hero-overlay{
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;

  background: rgba(0,0,0,0.5); /* overlay color */

  z-index:1;
}
/* TEXT */

.hero-text p{
margin-top:10px;
font-size:15px;

max-width: 1000px;
/* SHADE */
text-shadow:
0 3px 10px rgba(0,0,0,0.8),
0 1px 3px rgba(0,0,0,0.6);
}

/* RESPONSIVE */
@media (max-width: 768px) {

  .products-hero {
    height: 50vh;
  }

  .hero-text h1 {
    font-size: 26px;
  }

  .hero-text p {
    font-size: 13px;
  }

}











:root {
    --primary: #057fcc;
    --dark: #1a1a1a;
}

.premium-sleek {
    padding: 50px 8%;
    position: relative;
}

.glass-bg-text {
     position: fixed;
    top: 50%;
    left: 24%;
    transform: translate(-50%, -50%);
    font-size: 14vw;
    font-weight: 900;
    color: rgba(0, 0, 0, 0.05);
    z-index: -1;
    letter-spacing: -5px;
    user-select: none;
}

.sleek-wrapper {
    display: grid;
    grid-template-columns: 0.9fr 1.1fr; /* Matter Left, Images Right */
    gap: 70px;
    position: relative;
    z-index: 1;
    max-width:1200px; /* important */
width:100%;
margin:auto; 
}

/* LEFT SIDE: CONTENT */
.content-panel .title { font-size: 48px; color: var(--dark); margin-bottom: 25px;font-weight: 300; line-height: 1.1; }
.content-panel .thin { font-weight: 300; }
.content-panel .description { font-size: 16px; color: #555; line-height: 1.8; margin-bottom: 35px; text-align: justify;}

.card-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
    margin-bottom: 40px;
}
.info-card { background: #fcfcfc; padding: 18px; border: 1px solid #eee; border-radius: 4px; transition: 0.3s; }
.info-card:hover { border-color: var(--primary); transform: translateY(-3px); }
.card-title { font-size: 10px; font-weight: 700; color: #999; text-transform: uppercase; letter-spacing: 1px; }
.card-value { font-size: 14px; color: #333; margin-top: 4px; display: block; }

/* RIGHT SIDE: IMAGES */
.image-panel { 
    display: flex; 
    flex-direction: column; 
    gap: 20px; 
    justify-content: flex-start; /* Images top nundi align avthayi */
    height: 100%; /* Parent height ni motham teesukuntundi */
}

.expand-trigger {
    overflow: hidden;
    position: relative;
    cursor: zoom-in;
    border-radius: 4px;
    box-shadow: 10px 10px 40px rgba(0,0,0,0.05);
}

.main-frame { height: 480px; }
/* Container lo images and button alignment */
/* Container ni simplified chesthunnam */
/* Ee row ippudu images mathrame kabatti simple ga untundi */
.image-footer-row {
    margin-top: 20px;
    width: 100%;
}

.side-images {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
    width: 100%; /* Full width occupy chestundi */
}

/* Deenni penchithe images kindaki diguthayi */
.small-frame { 
    height: 220px; /* Ikkada height penchandi, matter kante kindaki vasthundi */
    overflow: hidden;
    border-radius: 4px;
}

.side-images img {
    width: 100%;
    height: 100%; /* Frame entha height unte anthe height vastundi */
    object-fit: cover; /* Image stretch avvakunda chustundi */
}
/* Parent container ki relative position undali */
.expand-trigger {
    position: relative; 
    overflow: hidden;
    cursor: zoom-in;
}

/* Zoom Tag design */
.zoom-tag {
    position: absolute;
    bottom: 15px; 
    right: 15px;
    background: rgba(0, 0, 0, 0.6);
    color: #fff;
    padding: 5px 10px;
    font-size: 11px;
    border-radius: 4px;
    opacity: 0; /* Normal ga hidden */
    transition: 0.3s ease;
    pointer-events: none; /* Tag click ni block cheyakunda */
    z-index: 10;
}

/* Hover chesinappudu kanipisthundi */
.expand-trigger:hover .zoom-tag {
    opacity: 1;
}
/* Button position fix h*/
.action-area {
    margin-left: 10px; /* Chinna images ki button ki madhya gap */
}


.zoom-img { width: 100%; height: 100%; object-fit: cover; transition: 0.6s; }
.expand-trigger:hover .zoom-img { transform: scale(1.05); }

.zoom-tag {
    position: absolute; bottom: 20px; right: 20px;
    background: rgba(0,0,0,0.5); color: #fff;
    padding: 4px 10px; font-size: 11px; border-radius: 4px; opacity: 0; transition: 0.3s;
}
.main-frame:hover .zoom-tag { opacity: 1; }

/* MODAL */
.modal {
    display: none; position: fixed; z-index: 2000;
    left: 0; top: 0; width: 100%; height: 100%;
    background: rgba(0,0,0,0.92); justify-content: center; align-items: center;
}
.modal-content { max-width: 85%; max-height: 85%; object-fit: contain; }
.modal-close { position: absolute; top: 30px; right: 50px; color: #fff; font-size: 40px; cursor: pointer; }

/* REVEAL ANIMATIONS */
.reveal-left { opacity: 0; transform: translateX(-50px); transition: 1s; }
.reveal-right { opacity: 0; transform: translateX(50px); transition: 1s; }
.show-left, .show-right { opacity: 1; transform: translateX(0); }






.sid-images {
    display: flex;
    flex-direction: column; /* one by one */
    gap: 20px;
    width: 100%;
}
.mai-frame,
.sma-frame {
    width: 100%;
    height: 480px; /* same height */
}

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


@media (max-width: 768px) {
    /* Section Padding Adjustment */
    .premium-sleek {
        padding: 50px 5%;
        overflow: hidden;
    }

    /* Layout direction switch: Content paina, Images kinda */
    .sleek-wrapper {
        display: flex;
        flex-direction: column; 
        gap: 30px;
    }

    /* OYSTO background text size thagginchali */
    .glass-bg-text {
        font-size: 80px !important;
        top: 20px;
        left: 10px;
        opacity: 0.05;
    }

    /* Content Alignment */
    .content-panel .title {
        font-size: 32px !important;
        text-align: left;
    }

    /* Mobile lo 2 columns cards handle cheyalante spacing thaggali */
    .card-grid {
        grid-template-columns: 1fr 1fr; /* 2 columns maintain chestundi */
        gap: 10px;
    }

    .info-card {
        padding: 12px;
    }

    /* Button full width kakunda left align undali */
    .action-area {
        justify-content: flex-start;
        margin-top: 20px;
    }

    .btn-premium {
        width: 100%; /* Mobile lo button touch cheyadaniki easy ga untundi */
        justify-content: center;
    }

    /* IMAGES SECTION MOBILE FIX */
    .image-panel {
        order: 2; /* Images content kinda vastayi */
        gap: 15px;
    }

    .main-frame {
        height: 300px !important;
    }

    .side-images {
        width: 100% !important; /* Images motham screen width occupy chestayi */
        grid-template-columns: 1fr 1fr;
        gap: 10px;
    }

    .small-frame {
        height: 100px !important;
    }

    /* IMPORTANT: Scroll Reveal Animation Fix */
    /* Mobile lo scroll cheyakunda munde images kanipinchalante idi thappakunda undali */
    .reveal-left, .reveal-right {
        opacity: 1 !important;
        transform: translateY(0) !important; /* Screenshot lo unna translate syntax error fix */
        visibility: visible !important;
        transition: none !important;
    }

    /* Zoom Tag in Mobile */
    .zoom-tag {
        font-size: 9px;
        padding: 3px 6px;
        bottom: 5px;
        right: 5px;
        opacity: 1; /* Mobile lo hover undadu kabatti tag direct ga kanipisthe better */
    }
}


.main-frame{
height:480px;

/* STRONG BORDER */
border-top:2px solid #057fcc;
border-right:2px solid #057fcc;

/* EXTRA GLOW LINE */
box-shadow:
2px 0 0 rgba(5,127,204,0.4),
0 -2px 0 rgba(5,127,204,0.4);
}

.side-images .small-frame:first-child{
border-left:2px solid #057fcc;
border-bottom:2px solid #057fcc;

/* EXTRA VISIBILITY */
box-shadow:
-2px 0 0 rgba(5,127,204,0.4),
0 2px 0 rgba(5,127,204,0.4);
}











.engineering{
padding:30px 8%;
background:#f4f8fd;
text-align:center;
}
.eng-container{
    max-width:1200px; 
width:100%;
margin:auto; 
}
.engineering-title{
font-size:40px;
margin-bottom:40px;
color:black;
}

/* LINE */

.engineering-line{
display:flex;
justify-content:space-between;
position:relative;
}

.engineering-line::before{
content:"";
position:absolute;
top:35px;
left:0;
width:100%;
height:2px;
background:#057fcc;
opacity:.2;
}

/* ITEM */

.eng-item{
width:180px;
text-align:center;
opacity:0;
transform:translateY(40px);
transition:0.8s;
}

.eng-icon{
width:70px;
height:70px;
background:white;
border-radius:50%;
display:flex;
align-items:center;
justify-content:center;
margin:auto;
box-shadow:0 10px 30px rgba(0,0,0,0.1);
margin-bottom:15px;
}

.eng-icon i{
font-size:26px;
color:#057fcc;
}

.eng-item h3{
margin-bottom:10px;
color:black;
font-size:18px;
}

.eng-item p{
font-size:14px;
color:#555;
line-height:1.6;
}

/* SCROLL ANIMATION */

.reveal.active{
opacity:1;
transform:translateY(0);
}

/* MOBILE */

@media(max-width:900px){

.engineering-line{
flex-direction:column;
gap:40px;
}

.engineering-line::before{
display:none;
}

.eng-item{
width:100%;
}

}
















.cta-section{
padding:50px 8%;
background:white;
color:black;
text-align:center;
overflow:hidden;
}

/* CONTAINER */

.cta-container{
max-width:750px;
margin:auto;
transform:translateY(80px);
opacity:0;
transition:0.8s;
}

/* TITLE */

.cta-container h2{
font-size:40px;
color:#057fcc;
margin-bottom:20px;
}

/* TEXT */

.cta-container p{
font-size:17px;
line-height:1.7;
margin-bottom:30px;
opacity:0.9;
}

/* BUTTON */

.cta-btn{
display:inline-block;
padding:14px 34px;
background:#057fcc;
color:white;
text-decoration:none;
border-radius:30px;
font-size:16px;
font-weight:500;
transition:0.3s;
}

.cta-btn i{
margin-right:8px;
}

/* BUTTON HOVER */

.cta-btn:hover{
transform:translateY(-4px);
box-shadow:0 8px 20px rgba(0,0,0,0.2);

}

/* SCROLL ANIMATION */

.cta-show .cta-container{
transform:translateY(0);
opacity:1;
}

/* MOBILE */

@media(max-width:768px){

.cta-container h2{
font-size:30px;
}

.cta-container p{
font-size:15px;
}

.cta-btn{
padding:12px 28px;
font-size:14px;
}

}





















.footer{
background:#282829;
color:white;

font-family:Arial;
padding:50px 10px 10px 10px;
}

.footer-container{
max-width:1200px;
margin:auto;
padding:0 40px;
display:grid;
grid-template-columns:repeat(4,1fr);
gap:40px;
}

.footer-logo{
width:150px;
margin-bottom:15px;
}

.footer-box h2{
margin-bottom:20px;
text-transform: uppercase;
font-size:20px;
}

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

.footer-box ul li{
margin-bottom:10px;
cursor:pointer;
transition:0.3s;
}

.footer-box ul li:hover{
padding-left:5px;
}

.footer-box p{
margin-bottom:10px;
line-height:1.6;
}

.footer-box p i{
margin-right:8px;
font-size: 14px;
}
.address-row{
display:flex;
align-items:flex-start;
gap:10px;
}

.address-row i{
font-size:16px;
margin-top:4px;
}

.address-text{
line-height:1.6;
}
.contact-row{
display:flex;
align-items:center;
gap:10px;
margin-top:12px;
}

.contact-text{
line-height:1.6;
}

.contact-row i{
font-size:16px;
margin-top:2px;
}


.social{
margin-top:20px;
display:flex;
align-items:center;
gap:6px;   /* icons madhya space */
}
.social i{
width:42px;
height:42px;

display:flex;
align-items:center;
justify-content:center;

font-size:18px;

background:white;
color:#282829;

border-radius:50%;

margin-right:10px;

cursor:pointer;
transition:.3s;
}

.social i:hover{
background:#035fa3;
color:white;
transform:translateY(-3px);
}

.footer-bottom{
border-top:1px solid rgba(255,255,255,0.4);
margin-top:10px;
padding:10px 10px;
text-align:center;
width:100%;
}

.footer-bottom a{
color:#057fcc;
font-weight:600;
text-decoration:none;
}

.footer-box ul li a{
text-decoration:none;
color:white;
}

.footer-box ul li a:hover{
opacity:0.8;
}

/* animations */

.left-anim{
opacity:0;
transform:translateX(-80px);
transition:1s;
}

.right-anim{
opacity:0;
transform:translateX(80px);
transition:1s;
}

.show-left{
opacity:1;
transform:translateX(0);
}

.show-right{
opacity:1;
transform:translateX(0);
}


.social a{
text-decoration: none;
}

/* tablet */

@media (max-width:900px){

.footer-container{
grid-template-columns:1fr 1fr;
}

}


/* mobile */

@media (max-width:600px){

.footer-container{
grid-template-columns:1fr;
text-align:left;
}

.footer-logo{
margin:auto;
}

.social i{
margin:8px;
}

}













/* WhatsApp Button */

.float-whatsapp{
position:fixed;
bottom:50px;
right:20px;
text-decoration: none;
width:55px;
height:55px;

background:#25D366;
color:white;

border-radius:50%;

display:flex;
align-items:center;
justify-content:center;

font-size:26px;

box-shadow:0 8px 20px rgba(0,0,0,0.25);

z-index:999;

animation:whatsappPulse 2s infinite;
}

/* Phone Button */

.float-phone{
position:fixed;
bottom:20px;
right:20px;
text-decoration: none;
width:55px;
height:55px;

background:#057fcc;
color:white;

border-radius:50%;

display:flex;
align-items:center;
justify-content:center;

font-size:22px;

box-shadow:0 8px 20px rgba(0,0,0,0.25);

z-index:999;

animation:phonePulse 2s infinite;
}

/* Hover */

.float-whatsapp:hover,
.float-phone:hover{
transform:scale(1.1);
}

/* Animations */

@keyframes whatsappPulse{

0%{box-shadow:0 0 0 0 rgba(37,211,102,.6)}

70%{box-shadow:0 0 0 15px rgba(37,211,102,0)}

100%{box-shadow:0 0 0 0 rgba(37,211,102,0)}

}

@keyframes phonePulse{

0%{box-shadow:0 0 0 0 rgba(5,127,204,.6)}

70%{box-shadow:0 0 0 15px rgba(5,127,204,0)}

100%{box-shadow:0 0 0 0 rgba(5,127,204,0)}

}

/* HIDE PHONE IN DESKTOP */

.float-phone{
display:none;
}

/* MOBILE VIEW */

@media(max-width:768px){

.float-whatsapp{
bottom:95px;
}

/* SHOW PHONE ICON IN MOBILE */
.float-phone{
display:flex;   /* IMPORTANT FIX */
bottom:20px;
}

}

.nav-cta{
background:#057fcc;
color:#fff;
padding:10px 22px;
border-radius:4px;
font-size:13px;
font-weight:700;
text-decoration:none;
transition:0.3s;
}

.nav-cta:hover{
background:#034e8a;
transform:translateY(-2px);
}









@media (max-width:768px){

.nav-container{
display:flex;
align-items:center;
justify-content:space-between;
}

/* keep CTA visible */
.nav-cta{
display:inline-block;
font-size:12px;
padding:8px 14px;
}

/* reduce logo size */
.logo img{
height:45px;
}

}

@media (max-width:768px){

#navbar{
top:40px; /* match EXACT topbar height */
}
.top-bar{
height:40px; /* slightly small */
font-size:11px;
}

/* LEFT SIDE (PHONE + EMAIL) */
.top-left{
display:flex;
align-items:center;
gap:8px;
overflow:hidden;
}

/* hide email for clean look */
.top-left span:nth-child(2){
display:none;
}

/* RIGHT SIDE ICONS */
.top-right{
display:flex;
align-items:center;
gap:8px;
}

.top-right a{
margin:0;
font-size:12px;
}

}