body{
font-family: Arial;
margin:0;
padding:0;
}

header{
background:#e60023;
color:white;
padding:15px;
}

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

nav a{
color:white;
margin:0 10px;
text-decoration:none;
}

.hero{
background:url("https://images.unsplash.com/photo-1598514983318-2f64f8f4796c");
height:500px;
display:flex;
align-items:center;
justify-content:center;
color:white;
text-align:center;
}

.btn{
background:white;
color:#e60023;
padding:10px 20px;
text-decoration:none;
}

.about{
padding:50px;
text-align:center;
}

.products{
padding:50px;
text-align:center;
}

.product-grid{
display:flex;
gap:30px;
justify-content:center;
}

.card{
border:1px solid #ddd;
padding:20px;
}

.why{
background:#f5f5f5;
padding:50px;
text-align:center;
}

.why-grid{
display:grid;
grid-template-columns:repeat(4,1fr);
gap:20px;
}

.form-section{
padding:50px;
text-align:center;
}

form{
max-width:400px;
margin:auto;
display:flex;
flex-direction:column;
gap:10px;
}

input,select,textarea{
padding:10px;
}

button{
background:#e60023;
color:white;
border:none;
padding:12px;
cursor:pointer;
}

footer{
background:#000;
color:white;
text-align:center;
padding:20px;
}

*{
margin:0;
padding:0;
box-sizing:border-box;
font-family:Arial;
}


/* TOP BAR */

.topbar{
background:#2b0d2e;
color:white;
padding:8px 0;
font-size:14px;
}

.container{
width:90%;
margin:auto;
display:flex;
justify-content:space-between;
align-items:center;
}


/* NAVBAR */

header{
background:linear-gradient(90deg,#ff0037,#7b00ff);
padding:15px 0;
}

.logo{
color:white;
font-size:28px;
font-weight:bold;
}

nav a{
color:white;
text-decoration:none;
margin-left:25px;
font-size:16px;
}

nav a:hover{
opacity:0.8;
}


/* HERO */

.hero{
height:600px;
background:linear-gradient(180deg,#3b003b,#5b2c6f);
display:flex;
align-items:center;
justify-content:center;
text-align:center;
color:white;
}

.hero-content h1{
font-size:60px;
font-weight:bold;
margin-bottom:20px;
}

.hero-content p{
font-size:20px;
margin-bottom:30px;
opacity:0.9;
}

.btn{
background:white;
color:#7b00ff;
padding:15px 40px;
border-radius:40px;
text-decoration:none;
font-weight:bold;
}

.btn:hover{
background:#eee;
}

.about-section{

background:#f5f3f6;

padding:120px 20px;

text-align:center;

font-family: 'Poppins', sans-serif;

}


.about-section h2{

color:#d1006f;

font-size:48px;

font-weight:700;

margin-bottom:40px;

}


.about-section p{

max-width:900px;

margin:auto;

font-size:22px;

line-height:1.8;

color:#2b1b2b;

}

.products{

background:#1a001c;

padding:100px 20px;

text-align:center;

font-family:'Poppins',sans-serif;

}


.products-title{

color:#ff007a;

font-size:42px;

margin-bottom:60px;

}


.products-grid{

display:grid;

grid-template-columns:repeat(3,1fr);

gap:40px;

max-width:1200px;

margin:auto;

}


.product-card{

background:#2b1f2d;

padding:40px 30px;

border-radius:20px;

transition:0.3s;

}


.product-card:hover{

transform:translateY(-8px);

}


.product-card img{

height:150px;

margin-bottom:20px;

}


.product-card h3{

color:white;

font-size:20px;

margin-bottom:10px;

}


.product-card p{

color:#d6d6d6;

font-size:16px;

line-height:1.5;

}

@media(max-width:900px){

.products-grid{

grid-template-columns:1fr 1fr;

}

}

@media(max-width:600px){

.products-grid{

grid-template-columns:1fr;

}

}

.why-section{

background:#1b001d;

padding:120px 20px;

text-align:center;

font-family:'Poppins',sans-serif;

}


.why-title{

color:#ff007a;

font-size:42px;

margin-bottom:70px;

}


.why-grid{

display:grid;

grid-template-columns:repeat(3,1fr);

gap:40px;

max-width:1200px;

margin:auto;

}


.why-card{

background:#f4f4f4;

padding:40px 30px;

border-radius:20px;

text-align:center;

transition:0.3s;

}


.why-card:hover{

transform:translateY(-10px);

}


.icon{

width:70px;

height:70px;

margin:auto;

margin-bottom:20px;

border-radius:50%;

display:flex;

align-items:center;

justify-content:center;

font-size:28px;

color:white;

background:linear-gradient(45deg,#ff004c,#9c00ff);

}


.why-card h3{

font-size:22px;

margin-bottom:10px;

}


.why-card p{

color:#555;

line-height:1.6;

font-size:16px;

}
.franchise-section{

background:#f3f0f6;

padding:120px 20px;

text-align:center;

font-family:'Poppins',sans-serif;

}


.franchise-title{

font-size:42px;

background:linear-gradient(90deg,#ff004c,#9c00ff);

-webkit-background-clip:text;

color:transparent;

margin-bottom:60px;

}


.form-card{

max-width:500px;

margin:auto;

background:white;

padding:40px;

border-radius:20px;

box-shadow:0 10px 30px rgba(0,0,0,0.1);

}


form{

display:flex;

flex-direction:column;

text-align:left;

}


label{

margin-top:15px;

font-weight:500;

font-size:14px;

}


input, select{

margin-top:5px;

padding:12px;

border-radius:8px;

border:1px solid #ddd;

font-size:14px;

}


button{

margin-top:25px;

padding:14px;

border:none;

border-radius:10px;

color:white;

font-size:16px;

cursor:pointer;

background:linear-gradient(90deg,#ff004c,#9c00ff);

}

.logo img{
height:45px;
}

html{
scroll-behavior:smooth;
}

.footer{

background:linear-gradient(180deg,#2b0030,#120015);

color:white;

padding:80px 20px 20px;

font-family:'Poppins',sans-serif;

}


.footer-container{

max-width:1200px;

margin:auto;

display:grid;

grid-template-columns:1fr 1fr 1fr;

gap:40px;

}


.footer-logo{

width:160px;

margin-bottom:20px;

}


.footer-col h3{

color:#ff003c;

margin-bottom:20px;

}


.footer-col p{

color:#ccc;

line-height:1.6;

}


.footer-col ul{

list-style:none;

padding:0;

}


.footer-col ul li{

margin-bottom:10px;

}


.footer-col ul li a{

color:#ddd;

text-decoration:none;

}


.footer-col ul li a:hover{

color:white;

}


.social{

margin-top:20px;

}


.social a{

display:inline-block;

width:40px;

height:40px;

border-radius:50%;

background:#2b1a33;

text-align:center;

line-height:40px;

margin-right:10px;

color:white;

text-decoration:none;

}


.footer-bottom{

text-align:center;

margin-top:40px;

padding-top:20px;

border-top:1px solid rgba(255,255,255,0.1);

color:#aaa;

}

.call-button{

position:fixed;

bottom:20px;

right:20px;

width:60px;

height:60px;

background:#ff004c;

color:white;

font-size:28px;

display:flex;

align-items:center;

justify-content:center;

border-radius:50%;

text-decoration:none;

box-shadow:0 6px 15px rgba(0,0,0,0.3);

z-index:999;

}

.call-button:hover{

background:#cc003c;

}