/* GLOBAL */
body{
margin:0;
font-family:sans-serif;
background:#8b0000;
color:#fff;
}
h1,h2,h3{margin:10px;padding:0;color:#ffcc00;}
a{text-decoration:none;color:#fff;}

/* RED–BLACK THEME COLORS */
:root{
--red:#d40000;
--dark:#0c0c0c;
--gold:#ffcc00;
--border:#2d2d2d;
}

/* =============================== */
/* HEADER WITH MOBILE MENU */
/* =============================== */
header{
background:#000;

display:flex;
justify-content:space-around;
align-items:center;
top:0;
left:0;
width:100%;
z-index:999;
border-bottom:2px solid var(--red);
}
.logo{
font-size:22px;
font-weight:bold;
color:#fff;
    text-transform: uppercase;
}
.menu-icon{
font-size:26px;
cursor:pointer;
display:none;
color:#fff;
}

/* Desktop Nav */
nav ul{
display:flex;
gap:25px;
}
nav ul li{
list-style:none;
}
nav ul li a{
color:#fff;
font-size:16px;
transition:0.3s;
}
nav ul li a:hover{color:var(--red);}

/* Mobile Nav */
@media(max-width:768px){
nav ul{
display:none;
flex-direction:column;
background:#111;
width:100%;
text-align:center;
position:absolute;
top:60px;
left:0;
padding:20px 0;
border-top:2px solid var(--red);
animation:slideDown 0.4s ease;
}
@keyframes slideDown{
0%{opacity:0;transform:translateY(-20px);}
100%{opacity:1;transform:translateY(0);}
}
.menu-icon{display:block;}
}

/* =============================== */
/* TOP MARQUEE */
/* =============================== */
.top-marquee{
background:#000;
color:#fff;
padding:12px 0;
font-weight:bold;
border-bottom:2px solid var(--gold);
}

/* =============================== */
/* 3 IMAGE SECTION */
/* =============================== */
.section1{padding:25px 0px;text-align:center;}
.section{padding-bottom:50px;text-align:center;}
.section h5{padding:5px;text-align:center; font-size:30px;color:#ffcc00;}
.three-images{
display:flex;gap:10px;justify-content:center;flex-wrap:wrap;
}
.three-images img{
width:100%;max-width:470px;border-radius:10px;
transition:0.4s;box-shadow:0 0 10px #ffcc00;padding:10px;
}


/* =============================== */
/* BLINK TEXT */
/* =============================== */
.blink-line{
background:#8b0000;
padding:12px;
font-size:20px;
text-align:center;
animation:blink 1s infinite;
border-top:2px solid var(--gold);
border-bottom:2px solid var(--gold);
}
@keyframes blink{50%{opacity:0;}}

/* =============================== */
/* IMAGE SLIDER */
/* =============================== */
.slider{
height:700px;
overflow:hidden;
margin-top:20px;
}
.slides{
display:flex;
width:200%;
animation:slide 6s infinite alternate;
}
.slides img{
width:100%;
height:700px;
object-fit:cover;
border-bottom:4px solid var(--red);
}
@keyframes slide{
0%{transform:translateX(0);}
100%{transform:translateX(-50%);}
}

/* =============================== */
/* ABOUT */
/* =============================== */
.about{
background:#111;
border-top:3px solid var(--red);
border-bottom:3px solid var(--red);
padding:50px 20px;
line-height:1.7;
}
.about ul li{
	list-style: circle;
    text-align: justify;
}
/* =============================== */
/* 6 SERVICES */
/* =============================== */
.services{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
gap:20px;
padding: 10px;
}
.service-box{
background:#fff;
padding:20px;
border-radius:10px;
border:1px solid var(--border);
transition:0.3s;
}
.service-box:hover{
transform:translateY(-7px);
box-shadow:0 0 12px var(--red);
}
.service-box h3{
	    padding: 10px;
    font-size: 22px;
    font-weight: bold;
    font-family: serif;
}
.service-box h3 a{
	  color:#8b0000;
}
.service-box p{
	line-height:25px;
	    color: #000;
}
.service-box img{
width:100%;border-radius:8px;border:2px solid var(--red);
}
.call-btn{
display:block;
margin-top:10px;
background:#000;
padding:10px;
border-radius:6px;
font-weight:bold;
color:#fff;
}

/* =============================== */
/* WHY CHOOSE US */
/* =============================== */
.why-grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
gap:20px;
padding: 10px;
}
.why-box{
background:#8b0000;
padding:20px;
border-radius:10px;
border:2px solid #fff;
}
.why-icon{
font-size:40px;
color:var(--gold);
}

/* =============================== */
/* BANNER */
/* =============================== */
.banner img{
width:100%;
box-shadow:0 0 20px var(--red);
}

/* =============================== */
/* 4 CARDS */
/* =============================== */
.cards{
display:grid;
padding: 10px;
grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
gap:20px;
}
.card{
background:#fff;
padding:20px;
border-radius:10px;
border:1px solid var(--border);
transition:0.4s;
}
.card:hover{
transform:scale(1.05);
box-shadow:0 0 15px var(--red);
}
.card h3 {
    padding: 5px;
    font-size: 22px;
    font-weight: bold;
    font-family: serif;
	
}
.card h3 a{
	color:#8b0000;
}
.card p {
   line-height:25px;
   color:#000;
}
.card img{
width:100%;border-radius:10px;border:2px solid var(--red);
}

/* =============================== */
/* CLIENT FEEDBACK */
/* =============================== */
.clients{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
gap:20px;
padding: 10px;
}
.client-box{
background:#fff;
padding:20px;
border-radius:10px;
border:1px solid var(--border);
}
.client-box p{
	line-height:25px;
	color:#000;
}
.client-box h3{
	
	color:#8b0000;
}
.client-img{
width:80px;height:80px;border-radius:50%;
object-fit:cover;border:3px solid var(--red);
}

/* =============================== */
/* FOOTER */
/* =============================== */
/* FOOTER CONTAINER */
footer{
  background:#0c0c0c;
  color:#fff;
  margin-top:50px;
  border-top:3px solid var(--red);
  font-family:Arial, sans-serif;
}

/* 4 COLUMN GRID */
.footer-container{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
  gap:30px;
  padding:50px 20px;
}

.footer-col h3{
  color:#ffcc00;
  margin-bottom:15px;
  font-size:18px;
  border-bottom:2px solid #ffcc00;
  display:inline-block;
  padding-bottom:5px;
}

.footer-col a{
  display:block;
  color:#fff;
  margin:6px 0;
  transition:0.3s;
}

.footer-col a:hover{
  color:var(--gold);
  transform:translateX(5px);
}

/* FOOTER BOTTOM / COPYRIGHT */
.footer-bottom{
  text-align:center;
  background:#0a0a0a;
  padding:15px 20px;
  font-size:14px;
  color:#fff;
  border-top:2px solid var(--red);
}

/* =============================== */
/* FLOATING BUTTONS */
/* =============================== */
/* Floating Buttons Base */
.float-whatsapp, .float-call{
    position: fixed;
    right: 20px;
    z-index: 9999;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--red);
    box-shadow: 0 0 15px rgba(255,0,0,0.6);
    animation: pulse 1.5s infinite;
}

.float-whatsapp img,
.float-call img{
    width: 35px;
    filter: brightness(0) invert(1);
}

/* Position */
.float-whatsapp{
    bottom: 120px;
    background:#25D366;
    box-shadow:0 0 12px #25D366;
}

.float-call{
    bottom: 40px;
    background:#e60000;
    box-shadow:0 0 12px #e60000;
}

/* Hover */
.float-whatsapp:hover, .float-call:hover{
    transform: scale(1.15);
    transition: 0.3s;
}

/* Glow Animation */
@keyframes pulse {
  0% { box-shadow: 0 0 10px #ff0000; }
  50% { box-shadow: 0 0 25px #ff0000; }
  100% { box-shadow: 0 0 10px #ff0000; }
}

/* ICONS */
.icon{font-size:25px;}
/* COPYRIGHT BAR */
/* BLOG SECTION */
.blog-section{
    padding:60px 20px;
    background:#0d0d0d;
    text-align:center;
}

.section-title{
    color:var(--red);
    font-size:36px;
    margin-bottom:40px;
    text-transform:uppercase;
    letter-spacing:2px;
}

/* Blog Grid */
.blog-container{
    display:grid;
    grid-template-columns:repeat(auto-fit, minmax(300px, 1fr));
    gap:30px;
}

/* Blog Card */
.blog-card{
    background:#fff;
    border:2px solid #fff;
    border-radius:10px;
    overflow:hidden;
    box-shadow:0 0 15px rgba(255,0,0,0.3);
    transition:0.4s;
}

.blog-card:hover{
    transform:translateY(-10px);
    box-shadow:0 0 30px rgba(255,0,0,0.6);
}

/* Blog Image */
.blog-card img{
    width:100%;
    height:220px;
    object-fit:cover;
}

/* Text */
.blog-card h3{
    color:var(--gold);
    font-size:20px;
    margin:15px 10px;
}
.blog-card h3 a{
    color:#8b0000;
   
}
.blog-card p{
    color:#000;
    font-size:15px;
    padding:0 15px 10px 15px;
}

/* Button */
.blog-btn{
    display:inline-block;
    padding:10px 20px;
    margin-bottom:20px;
    background:#000;
    color:#fff;
    border-radius:5px;
    transition:0.3s;
    text-decoration:none;
}

.blog-btn:hover{
    background:var(--gold);
    color:#000;
}