body{
    margin: 0; padding: 0; background: #121212; font-family: Arial, sans-serif; color: white; overflow-x: hidden;}
header{
    text-align: center;  background-color: black; padding: 20px 0;
}
    nav{
    text-align: center; padding: 15px; background-color: #1a1a1a;
}
nav a{
text-decoration: none; background-color: #0066cc; padding: 12px 22px; color: white; 
margin:0 10px; border-radius: 50px; display: inline-block; font-size:18px; font-weight: bold;
}
.nav-whatsapp{ background-color: #25D366; font-weight: bold; font-size: 16px } .nav-whatsapp:hover{ color: white;}
.hero{
    margin-bottom: 30px; position: relative;
}
.hero-img{
    width: 100%; height: auto; object-fit: cover; display: block;
}
.hero-text{
     position: absolute;  transform: translate(-50%, -50%);  top: 50%; left:50%; width: 100%; text-align: center;
}
h1{
    font-size: 60px; color: red; margin: 0; background: transparent; 
    width: 100%;  line-height: 1.2; text-align: center;
}
.a-a{ 
     font-size: 45px; color: red; margin: 10px 0 0 0; background: transparent; text-align: center; line-height: 1.5;
    }
.card{
    background-color: #1b1b1b; width: 100%; max-width: 1100px; margin: 30px auto; border-radius: 15px; overflow: hidden; text-align: center;
    box-shadow: 0 0 15px rgba(0,255,255,0.3); padding: 10px; border: 2px solid #00d9ff; box-sizing: border-box;
}
.card h2{
color: white; font-size: 40px; font-weight: bold;  text-align: center; margin: 10px 0; line-height: 1.2;                                                                                   
}
.card h3{
    color: white; font-size: 40px; font-weight: bold;  text-align: center; margin: 10px 0; line-height: 1.2;
}
.image-box{
    width: 100%; height: 100%;  display: flex;  justify-content: center;  align-items: flex-start;  overflow: hidden; padding-top: 20px;
}
.image-box img{
    width: 100%;  height: auto;  object-fit: contain;  display: block;
}
.a-b{
    color: white; background-color: #1e1e1e; font-size: 23px; text-align: center; margin: 10px 20px; line-height: 1.5; 
}
.c-d{
    color: white; background-color: #1e1e1e; font-size: 23p; text-align: center; margin: 10px 20px; line-height: 1.5;
}
.whatsapp-btn{
    background-color: rgb(11, 224, 11); font-size: 30px; font-weight: bold; color: white; padding: 20px 40px;
     text-decoration: none; border-radius: 999px; display: inline-block; margin-right: 10px;
}
.call-btn{
    background-color: rgb(43, 43, 238); color: white; font-size: 30px; font-weight: bold; padding: 20px 60px;
     border-radius: 999px; text-decoration: none; display: inline-block;
}
.buttons{
    text-align: center; margin-top: 20px; font-size:30px;
}
.about h2{
    color: gold; font-size: 50px; 
}
.about p{
    color: white; font-size: 35px; max-width: 700px; margin: auto; line-height: 50px; text-align: center;
}
.contact{
    text-align: center; padding: 40px 20px;
}
.contact h2{
    color: gold; font-size: 50px; margin-bottom: 20px; 
}
.contact p{
    color: white; font-size: 40px; margin: 10px 0; text-align: center;
 }
.contact a{
    display: inline-block; margin: 10px; padding: 10px 20px; background-color: gold;
    color: black; text-decoration: none; border-radius: 5px; font-weight: bold;
}
.contact a:hover{
    background-color: white; color: black;
}
.read-more:havor{
    background-color: white;
}
footer{
 background-color: #000;
    color: white; text-align: center; padding: 20px; margin-top: 40px; border-top: 2px solid gold;
}
footer p{
    margin: 0;
    font-size: 30px;
}
@media (max-width:
 768px){
    .card{  width: 100%; } .image-box{ height: 450px; }
    .image-box img{
        width: 100%;  height: auto;  object-fit: contain;  display: block;}
        .whatsapp-btn, .call-btn {font-size:16px; padding: 12px 20px; }
        .buttons{
            display: flex; justify-content: center; gap: 10px; flex-wrap: wrap;
        }
    h1{
        font-size: 45px;
    }
    .a-a{
        font-size: 35px;
    }
     h2{
        font-size: 40px;
    }
    .a-b{
        font-size: 23px;
        line-height: 1.5;
    }
    }
    #loader {
        position: fixed; width: 100%; height: 100vh; background: #000;top: 0; left:0; display: flex; 
        justify-content: center; align-items: center; z-index: 9999;
    }
    .loader-content{
        width: 100%; height: 300px; border-radius: 50%; display: flex; flex-direction: column;
         justify-content: center; align-items: center; position: relative; 
    }
    /* Red rotating circle 
    */
     .loader-content::before
    {
    content: ""; 
    position: absolute; width: 470px; height: 470px; border-radius:  50%; border-top: 6px solid #ff1a1a;
    border-right: 6px solid #ff3300; border-bottom: 6px solid red; border-left: 5px solid transparent;
    animation: rotateLoader 2s linear infinite, glowFire 1s ease-in-out infinite alternate; box-shadow: 0 0 20px #ff0000,
     0 0 40px #ff3300, 0 0 60px #ff6600, 0 0 80px orangered, 0 0 100px red;
}
    .loader-content h1{
        color: red; font-size: 90px; margin: 0; text-shadow: 0 0 20px red; z-index: 1; position: relative; top: -15px;}
        .loader-content p{
            color: rgba(247, 142, 5, 0.856); font-size: 24px; text-align: center; z-index: 1; }
           
            @keyframes rotateLoader{
                from{
          transform: rotate(0deg);  }  to { transform: rotate(360deg); }
            }
            .loader-content img{
                width: 320px; height: 190px; display: block; position: relative; z-index: 2; }
                @keyframes glowFire {
                    from{
                    box-shadow: 0 0 15px #ff0000,  0 0 30px #ff3300, 0 0 50px #ff6600;
                }
                to{ box-shadow: 0 0 30px #ff0000, 0 0 60px #ff3300, 0 0 90px #ff6600, 0 0 120px #ffcc00;
                }
            }
            .sparks{
    position:absolute;
    width:470px;
    height:470px;
    border-radius:50%;
    z-index:4;
}
.spark{
    position:absolute;
    width:6px;
    height:6px;
    background:#ffd700;
    border-radius:50%;
    box-shadow:0 0 8px #ff0,0 0 15px #ff6600;
}
            
            @keyframes sparkMove{
                0%{
                    transform: rotate(0deg) translateX(235px); opacity: 1;  }
        100%{
            transform: rotate(360deg) translateX(235px); opacity: 0;
        }
            }