*{
margin:0;
padding:0;
box-sizing:border-box;
font-family:'Poppins',sans-serif;
}

body{
background:#f5f5f7;
overflow-x:hidden;
}

/* ================= NAVBAR ================= */

.navbar{
width:100%;
height:105px;
background:#fff;
display:flex;
align-items:center;
justify-content:space-between;
padding:0 60px;
}

.logo{
display:flex;
flex-direction:column;
}

.logo h1{
font-size:82px;
font-weight:800;
line-height:0.8;
color:#1a1a7a;
}

.logo span{
font-size:11px;
margin-left:8px;
margin-top:8px;
}

.nav-links{
display:flex;
gap:38px;
align-items:center;
}

.nav-links a{
text-decoration:none;
font-size:17px;
font-weight:500;
color:#111;
position:relative;
}

.nav-links a.active{
color:#1a1a7a;
}

.nav-links a.active::after{
content:'';
position:absolute;
left:0;
bottom:-12px;
width:100%;
height:4px;
border-radius:20px;
background:linear-gradient(90deg,#ff7a00,#ff00b7,#0084ff);
}

.quote-btn{
padding:16px 34px;
border:none;
border-radius:40px;
font-size:17px;
font-weight:600;
cursor:pointer;
color:#fff;
background:linear-gradient(90deg,#5a2dff,#ff9800);
}

/* ================= HERO ================= */

.hero{
width:100%;
height:650px;
display:flex;
background:#fff;
position:relative;
overflow:hidden;
}

/* LEFT */

.hero-left{
width:42%;
padding:55px 0 0 65px;
}

.hero-left h1{
font-size:86px;
line-height:1.08;
font-weight:800;
color:#17177b;
}

.hero-left h1 span{
background:linear-gradient(90deg,#ff7300,#ff00b3,#3366ff);
-webkit-background-clip:text;
-webkit-text-fill-color:transparent;
}

.color-line{
width:90px;
height:6px;
border-radius:20px;
margin-top:35px;
background:linear-gradient(90deg,#ff7300,#ff00b3,#3366ff);
}

.hero-left p{
font-size:20px;
line-height:1.9;
color:#555;
margin-top:40px;
max-width:520px;
}

.hero-buttons{
display:flex;
gap:18px;
margin-top:45px;
}

.btn1{
padding:16px 30px;
border:none;
border-radius:40px;
font-size:16px;
font-weight:600;
color:#fff;
cursor:pointer;
background:linear-gradient(90deg,#5d2dff,#ff9800);
}

.btn2{
padding:15px 30px;
border-radius:40px;
border:2px solid #1b1b7a;
background:#fff;
font-size:16px;
font-weight:600;
cursor:pointer;
color:#1b1b7a;
}

/* RIGHT */

.hero-right{
width:58%;
position:relative;
overflow:hidden;
}

.hero-bg{
position:absolute;
top:0;
right:0;
width:100%;
height:100%;
background:
linear-gradient(135deg,
#173a89 15%,
#ff7300 45%,
#ff003c 68%,
#0084ff 100%);
clip-path:polygon(20% 0%,100% 0%,100% 100%,0% 100%);
}

/* PAINT SPLASH */

.paint-splash{
position:absolute;
right:-80px;
top:-30px;
width:700px;
height:700px;
background:
radial-gradient(circle at 20% 20%,#ffae00 0%,transparent 22%),
radial-gradient(circle at 40% 10%,#ff6f00 0%,transparent 20%),
radial-gradient(circle at 70% 25%,#ff0040 0%,transparent 22%),
radial-gradient(circle at 85% 40%,#0084ff 0%,transparent 20%),
radial-gradient(circle at 55% 75%,#00a651 0%,transparent 22%);
opacity:0.8;
filter:blur(1px);
}

/* BRUSH EFFECT */

.brush{
position:absolute;
left:0;
top:0;
width:100%;
height:100%;
background:
linear-gradient(120deg,
transparent 12%,
rgba(255,255,255,0.95) 18%,
transparent 28%);
}

/* ROOM */

.room{
position:absolute;
bottom:0;
right:0;
width:500px;
height:230px;
background:#efe5da;
border-top-left-radius:60px;
}

.sofa{
position:absolute;
right:35px;
bottom:15px;
width:230px;
height:115px;
background:#efe3d7;
border-radius:30px;
box-shadow:0 10px 30px rgba(0,0,0,0.08);
}

.chair{
position:absolute;
left:150px;
bottom:35px;
width:135px;
height:190px;
background:#345795;
border-radius:35px;
box-shadow:0 10px 30px rgba(0,0,0,0.15);
}

.lamp{
position:absolute;
left:310px;
top:55px;
width:4px;
height:120px;
background:#222;
}

.lamp::after{
content:'';
position:absolute;
left:-18px;
bottom:-10px;
width:42px;
height:28px;
background:#444;
border-radius:40px 40px 10px 10px;
}

/* PAINT BUCKET */

.paint-box{
position:absolute;
right:250px;
top:120px;
width:280px;
height:360px;
background:#1d1d8d;
border-radius:25px;
padding:35px;
z-index:5;
box-shadow:0 25px 40px rgba(0,0,0,0.25);
overflow:hidden;
}

.paint-box::after{
content:'';
position:absolute;
left:-20px;
bottom:-45px;
width:120%;
height:120px;
background:linear-gradient(90deg,#ff7300,#ff009d,#0084ff);
border-radius:50%;
}

.paint-box h2{
font-size:68px;
color:#fff;
margin-top:40px;
font-weight:700;
position:relative;
z-index:2;
}

.paint-box h3{
font-size:34px;
color:#fff;
margin-top:10px;
font-weight:700;
position:relative;
z-index:2;
}

.paint-box p{
margin-top:25px;
font-size:16px;
line-height:1.8;
color:#fff;
position:relative;
z-index:2;
}

.badge{
position:absolute;
top:-20px;
right:-20px;
width:95px;
height:95px;
border-radius:50%;
background:#1d1d8d;
display:flex;
align-items:center;
justify-content:center;
text-align:center;
color:#fff;
font-size:11px;
font-weight:700;
line-height:1.7;
z-index:10;
}

/* ================= FEATURES ================= */

.features{
width:92%;
margin:auto;
margin-top:18px;
background:#fff;
border-radius:25px;
padding:30px;
display:grid;
grid-template-columns:repeat(5,1fr);
gap:20px;
box-shadow:0 5px 20px rgba(0,0,0,0.06);
position:relative;
z-index:10;
}

.feature{
display:flex;
gap:15px;
align-items:flex-start;
}

.icon{
width:58px;
height:58px;
border-radius:50%;
flex-shrink:0;
}

.blue{background:#0057ff;}
.orange{background:#ff8800;}
.purple{background:#8000ff;}
.green{background:#5aa300;}
.pink{background:#ff0077;}

.feature h3{
font-size:20px;
color:#1b1b7a;
margin-bottom:6px;
}

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

/* ================= PRODUCTS ================= */

.products{
padding:0px 0px;
}

.products-header{
display:flex;
justify-content:space-between;
align-items:center;
margin-bottom:35px;
margin-left: 70px;
}

.products-header h2{
font-size:42px;
color:#1b1b7a;
}

.product-grid{
display:grid;
grid-template-columns:repeat(5,1fr);
gap:25px;
}

.card{
background:#fff;
border-radius:20px;
overflow:hidden;
box-shadow:0 5px 20px rgba(0,0,0,0.06);
}

.card-image{
height:180px;
text-align: center;
margin-top:5px;
}
.card-image img{
    height: 180px;
}

.card-content{
padding:20px;
}

.card-content h3{
font-size:20px;
margin-bottom:10px;
color:#1b1b7a;
}

.card-content p{
font-size:14px;
line-height:1.7;
color:#666;
}

/* COLOR SECTION */

.color-box{
margin-top:40px;
width:100%;
background:#fff;
border-radius:25px;
padding:40px;
box-shadow:0 5px 20px rgba(0,0,0,0.06);
display:flex;
justify-content:space-between;
align-items:center;
}

.color-left h2{
font-size:38px;
color:#1b1b7a;
margin-bottom:15px;
}

.color-left p{
font-size:16px;
line-height:1.8;
color:#666;
max-width:500px;
}

.palette{
width:220px;
height:220px;
border-radius:50%;
background:conic-gradient(red,orange,yellow,green,cyan,blue,purple,pink,red);
}

/* STATS */

.stats{
width:100%;
background:#07124d;
padding:35px 65px;
display:grid;
grid-template-columns:repeat(5,1fr);
color:#fff;
margin-top:40px;
}

.stat{
text-align:center;
}

.stat h2{
font-size:38px;
}

.stat p{
margin-top:10px;
color:#ccc;
}

/* RESPONSIVE */

@media(max-width:1200px){

.hero{
flex-direction:column;
height:auto;
}

.hero-left,
.hero-right{
width:100%;
}

.hero-right{
height:650px;
}

.features{
grid-template-columns:repeat(2,1fr);
}

.product-grid{
grid-template-columns:repeat(2,1fr);
}

}

@media(max-width:768px){

.navbar{
flex-direction:column;
height:auto;
padding:25px;
gap:20px;
}

.nav-links{
flex-wrap:wrap;
justify-content:center;
}

.hero-left{
padding:50px 30px;
}

.hero-left h1{
font-size:58px;
}

.features{
grid-template-columns:1fr;
}

.product-grid{
grid-template-columns:1fr;
}

.stats{
grid-template-columns:1fr;
gap:30px;
}

.color-box{
flex-direction:column;
gap:30px;
text-align:center;
}


}

/* FOOTER */

.footer{
width:100%;
margin:0;
padding:70px 6% 25px;
background:linear-gradient(to right,#030817,#071c4d,#030817);
color:#fff;
box-sizing:border-box;
overflow:hidden;
}

.footer-container{
width:100%;
max-width:1400px;
margin:auto;
display:grid;
grid-template-columns:2fr 1fr 1fr;
gap:45px;
}

/* LOGO */

.footer-logo img{
width:260px;
max-width:100%;
display:block;
}

/* ABOUT */

.footer-about p{
color:#c5c7d2;
line-height:1.8;
margin:30px 0;
font-size:17px;
max-width:430px;
}

.contact-info div{
margin-bottom:18px;
color:#d9d9d9;
font-size:16px;
display:flex;
align-items:center;
gap:12px;
}

.contact-info i{
color:#f6b73c;
font-size:18px;
}

/* MAP */

.map-box{
width:100%;
margin-top:18px;
overflow:hidden;
border-radius:12px;
}

.map-box iframe{
width:100%;
height:180px;
display:block;
border:0;
border-radius:12px;
}

/* LINKS */

.footer-links h3,
.newsletter h3{
font-size:30px;
margin-bottom:28px;
position:relative;
}

.footer-links h3::after,
.newsletter h3::after{
content:"";
width:55px;
height:3px;
background:#f6b73c;
position:absolute;
left:0;
bottom:-12px;
}

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

.footer-links ul li{
margin-bottom:18px;
}

.footer-links ul li a{
text-decoration:none;
color:#d7d7d7;
font-size:17px;
transition:0.3s;
}

.footer-links ul li a:hover{
color:#f6b73c;
padding-left:6px;
}

/* LOCATION SECTION */

.newsletter p{
color:#cfcfcf;
line-height:1.8;
margin-bottom:18px;
font-size:16px;
}

/* SOCIAL */

.social-icons{
display:flex;
gap:15px;
margin-top:25px;
flex-wrap:wrap;
}

.social-icons a{
width:48px;
height:48px;
border-radius:50%;
background:rgba(255,255,255,0.08);
display:flex;
align-items:center;
justify-content:center;
text-decoration:none;
color:#fff;
font-size:18px;
transition:0.3s;
}

.social-icons a:hover{
background:#f6b73c;
color:#111;
transform:translateY(-4px);
}

/* BOTTOM */

.footer-bottom{
width:100%;
max-width:1400px;
margin:auto;
margin-top:55px;
padding-top:25px;
border-top:1px solid rgba(255,255,255,0.1);
display:flex;
justify-content:space-between;
align-items:center;
gap:20px;
flex-wrap:wrap;
}

.footer-bottom p{
font-size:15px;
color:#ccc;
margin:0;
}

.web-octopus{
font-size:18px !important;
font-weight:600;
color:#f6b73c !important;
letter-spacing:1px;
}

/* RESPONSIVE */

@media(max-width:1100px){

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

}

@media(max-width:768px){

.footer{
padding:60px 25px 25px;
}

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

.footer-links h3,
.newsletter h3{
font-size:26px;
}

.footer-bottom{
flex-direction:column;
text-align:center;
gap:15px;
}