*{
box-sizing:border-box;
}
body{
background: linear-gradient(
to bottom,
black 0%,
black 33%,
white 33%,
white 66%,
#e31b23 66%,
#e31b23 100%
);
}

.app-footer{
    margin-top: -35px;
    background: #000;
    padding: 20px ;
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* 2 per row */
    gap: 12px;
    background: transparent;
}
/* Big button blocks */
.footer-box{
    display: block;
    width: 95%;
    text-align: center;
    background: #111;
    color: #fff;
    padding: 14px;
    border-radius: 10px;
    text-decoration: none;
    font-size: 10px;
    font-weight: 500;
    border: 1px solid #333;
    transition: 0.3s;
}

/* Hover */
.footer-box:hover{
    background: #FFD700;
    color: red;
    border-color: #FFD700;
}

/* Click effect */
.footer-box:active{
    transform: scale(0.97);
}

/* Desktop layout */
@media (min-width:768px){
    .app-footer{
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
    }

    .footer-box{
        width: 45%;
    }
}

.social-share{
position:fixed;
left:10px;
bottom:20px;
display:flex;
flex-direction:column;
gap:10px;
z-index:9999;
}

.social-share a{
width:30px;      /* reduced from 42px */
height:30px;
font-size:14px;  /* icon size */
border-radius:6px;
display:flex;
align-items:center;
justify-content:center;
color:white;
text-decoration:none;
position:relative;
box-shadow:0 4px 10px rgba(0,0,0,0.2);
transition:0.3s;
}

.fb{background:#1877f2;}
.x{background:#000;}
.wa{background:#25D366;}
.copy{background:#555;}

.social-share a:hover{
transform:scale(1.1);
}

/* hover labels */

.social-share a span{
position:absolute;
left:50px;
background:#333;
color:white;
padding:5px 8px;
border-radius:5px;
font-size:12px;
opacity:0;
white-space:nowrap;
transition:0.3s;
}

.social-share a:hover span{
opacity:1;
}

/* responsive */

@media(max-width:768px){

.social-share{
left:6px;
bottom:15px;
}

.social-share a{
width:30px;
height:30px;
font-size:13px;
border-radius:5px;
}

}

.menu-btn{
background:#ffcc00;
border:none;
padding:10px 18px;
border-radius:6px;
cursor:pointer;
font-weight:bold;
}

.menu-container{
position:absolute;
top:15px;
right:15px;
z-index:99999;
}

.menu-panel{
position:absolute;
top:60px;
right:20px;
background:white;
display:none;
grid-template-columns:repeat(2,160px);
gap:10px;
padding:20px;
border-radius:10px;
box-shadow:0 10px 25px rgba(0,0,0,0.2);
z-index:99999;
}

.menu-panel a{
text-decoration:none;
background:#f3f3f3;
padding:12px;
border-radius:6px;
text-align:center;
color:black;
font-weight:500;
transition:.3s;
}

.menu-panel a:hover{
background:#ffcc00;
}

.menu-panel.active{
display:grid;
}

/* responsive */

@media(max-width:768px){

.menu-panel{
right:10px;
grid-template-columns:1fr;
}

}
/* WhatsApp floating button */

.wa-button{
position:fixed;
bottom:20px;
right:20px;
width:60px;
height:60px;
background:#25D366;
border-radius:50%;
display:flex;
align-items:center;
justify-content:center;
cursor:pointer;
box-shadow:0 4px 10px rgba(0,0,0,0.3);
z-index:9999;
}

.wa-button img{
width:32px;
height:32px;
}

/* Chat box */

.wa-chat-box{
position:fixed;
bottom:90px;
right:20px;
width:300px;
background:#fff;
border-radius:12px;
box-shadow:0 8px 25px rgba(0,0,0,0.3);
display:none;
z-index:9999;
font-family:'Noto Sans Tamil',sans-serif;
}

.wa-show{
display:block;
}

.wa-header{
background:#d0ffc7;
padding:12px;
display:flex;
align-items:center;
gap:10px;
border-radius:12px 12px 0 0;
}

.wa-header img{
width:40px;
height:40px;
}

.wa-close{
margin-left:auto;
cursor:pointer;
font-size:20px;
}

.wa-body{
padding:15px;
font-size:14px;
line-height:1.6;
}

.wa-start{
display:block;
background:#033300;
color:white;
text-align:center;
padding:12px;
text-decoration:none;
border-radius:0 0 12px 12px;
}

.wa-start:hover{
background:#055505;
}
.hero{
top:120%;
text-align:center;
padding:15px 10px;
color:white;
position:relative;

background:linear-gradient(
to bottom,
#000000 0%,
#000000 35%,
#ffffff 35%,
#ffffff 55%,
#e31b23 55%,
#e31b23 100%
);
}

.count-text{
color:black;
}



.hero h1,
.hero p,
.hero h3,
.hero a{
position:relative;
z-index:1;
}

.btn-red{
background:#b30000;
color:#fff;
padding:12px 25px;
text-decoration:none;
display:inline-block;
margin-top:20px;
}

.card{
background:white;
padding:30px;
margin:40px auto;
width:85%;
border-radius:10px;
}

.grid{
display:flex;
flex-wrap:wrap;
gap:10px;
}

.block{
flex:1;
background:#b30000;
padding:20px;
text-align:center;
}

.form-container{
width:95%;
max-width:600px;
padding:20px;
margin:auto;
border:1px solid #ccc;
border-radius:8px;
background:#fff;
}

input, select, textarea{
width:100%;
margin:10px 0;
padding:10px;
background:#0f0f0f;
color:#fff;
border:1px solid #b30000;
}

.checkline{
display:flex;
align-items:center;
gap:8px;
margin-top:8px;
}

.checkline input{
width:auto;
}


.success{
color:#ff1a1a;
}

footer{
text-align:center;
padding:20px;
background:#000;
}
.contact-block{
    text-align:center;
}

.contact-email{
    margin-top:15px;
    line-height:1.8;
}

@media (max-width:600px){

.hero-box{
width:75%;        /* slightly smaller than 90% */
margin:15px auto;
padding:12px;
background:white;
}

}
.hero-box{
max-width:520px;
margin:60px 30px 60px 30px; 
padding:18px;
background:white;
border-radius:8px;
}