/* ===================================
GLOBAL RESET
=================================== */

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

body{
background:#f7f8fa;
color:#222;
overflow-x:hidden;
}

img{
max-width:100%;
display:block;
}

.container{
max-width:1200px;
margin:auto;
padding:0 20px;
}

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

.navbar{
background:#fff;
border-bottom:1px solid #eee;
padding:18px 0;
position:sticky;
top:0;
z-index:1000;
}

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

.logo{
font-size:20px;
font-weight:700;
}

/* NAV LINKS */

nav{
display:flex;
gap:25px;
align-items:center;
}

nav a{
text-decoration:none;
color:#444;
font-weight:500;
}

/* HAMBURGER */

.hamburger{
display:none;
flex-direction:column;
gap:5px;
cursor:pointer;
}

.hamburger span{
width:25px;
height:3px;
background:#222;
border-radius:3px;
}

/* ===================================
BUTTONS
=================================== */

.btn{
padding:12px 22px;
border-radius:30px;
text-decoration:none;
font-weight:600;
display:inline-block;
}

.primary{
background:#111;
color:#fff;
}

.secondary{
border:1px solid #ccc;
color: #333;
}

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

.hero{
min-height:calc(100vh - 80px);
display:flex;
align-items:center;
justify-content:center;
padding:80px 20px 40px;
text-align: center;
}


.hero-content{
max-width:700px;
margin:auto;
}

.hero h1{
font-size:3rem;
line-height:1.2;
margin-bottom:20px;
}

.hero span{
color:brown;
}

.hero p{
color:#666;
margin-bottom:30px;
}

.hero-buttons{
display:flex;
justify-content:center;
gap:15px;
flex-wrap:wrap;
}

/* ===================================
FLOATING IMAGES
=================================== */

.floating-images{
position:relative;
margin-top:60px;
height:200px;

}

.fimg{
position:absolute;
width:120px;
height:160px;
border-radius:16px;
object-fit:cover;
box-shadow:0 10px 30px rgba(0,0,0,0.2);
transition: transform 0.3s ease;
}

.floating-images .fimg:hover { transform: scale(1.06); }

/* image positions */

.f1{left:5%; top:25px; transform:rotate(-6deg);}
.f2{left:25%; top:0; transform:rotate(-3deg);}
.f3{left:45%; top:20px; transform:rotate(2deg);}
.f4{left:65%; top:0; transform:rotate(6deg);}
.f5{left:80%; top:25px; transform:rotate(10deg);}

/* ===================================
ABOUT
=================================== */

.about{
padding:100px 0;
background:#fff;
}

.about-container{
display:flex;
align-items:center;
gap:60px;
}

.badge{
    display:inline-block;
    background:brown;
    color:#fff;
    padding:6px 14px;
    border-radius:20px;
    font-size:13px;
    margin-bottom:18px;
    }

.about-text{
flex:1;
}

.about-image img{
width:100%;
max-width:350px;
height:auto;
border-radius:16px;
box-shadow:0 20px 50px rgba(0,0,0,0.15);
}

@media (max-width:768px){

.about-image img{
max-width:260px;
height:350px;
object-fit:cover;
margin:auto;
}

}
.about-text h2{
font-size:2.2rem;
margin-bottom:20px;
}

.about-desc{
color:#666;
line-height:1.6;
margin-bottom:25px;
}

/* FEATURES */

.about-features{
display:flex;
flex-direction:column;
gap:20px;
margin-top:25px;
}

.feature{
display:flex;
gap:15px;
align-items:flex-start;
background:#fff;
padding:18px;
border-radius:12px;
box-shadow:0 6px 18px rgba(0,0,0,0.06);
transition:0.3s;
}

.feature:hover{
transform:translateY(-3px);
box-shadow:0 10px 25px rgba(0,0,0,0.08);
}

/* ICON */

.feature i{
font-size:22px;
color:brown;
margin-top:3px;
min-width:24px;
}

/* TEXT */

.feature h4{
font-size:16px;
margin-bottom:5px;
font-weight:600;
}

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

/* =========================
MOBILE STYLE
========================= */

@media (max-width:768px){

.feature{
flex-direction:column;
align-items:center;
text-align:center;
}

.feature i{
margin-bottom:6px;
}

}
.about-image{
flex:1;
display:flex;
justify-content:center;
}

.about-image img{
width:350px;
border-radius:16px;
box-shadow:0 20px 50px rgba(0,0,0,0.15);
}

/* HOW IT WORKS */

.works{
padding:100px 0;
background:#f7f8fa;
text-align:center;
}

.section-title{
margin-bottom:60px;
font-size:2.2rem;
font-weight:700;
}

.steps{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:30px;
}

/* CARD */

.step{
position:relative;
background:#fff;
padding:40px 30px;
border-radius:16px;
box-shadow:0 10px 30px rgba(0,0,0,0.06);
transition:0.3s;
overflow:hidden;
}

.step:hover{
transform:translateY(-6px);
box-shadow:0 18px 40px rgba(0,0,0,0.08);
}

/* STEP NUMBER BACKGROUND */

.step-number{
position:absolute;
top:10px;
right:20px;
font-size:80px;
font-weight:800;
color:#000;
opacity:0.06;
pointer-events:none;
}

/* ICON */

.step i{
font-size:26px;
color:brown;
margin-bottom:15px;
}

/* TEXT */

.step h3{
font-size:18px;
margin-bottom:10px;
}

.step p{
font-size:14px;
color:#666;
line-height:1.5;
}

@media(max-width:768px){

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

.step{
padding:35px 25px;
}

.step-number{
font-size:65px;
}

}

/* ===================================
PORTFOLIO
=================================== */

.portfolio{
padding:100px 0;
}

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

.art-card{
background:#fff;
border-radius:16px;
overflow:hidden;
box-shadow:0 10px 25px rgba(0,0,0,0.05);
transition:0.3s;
}

.art-card:hover{
transform:translateY(-5px);
}

.art-info{
padding:15px;
text-align:center;
}

.art-info h4{
font-size:1rem;
margin-bottom:5px;
}

.art-info p{
font-size:0.85rem;
color:#666;
margin-bottom:10px;
}

.contact-btn{
display:inline-block;
padding:8px 14px;
background:#25D366;
color:#fff;
border-radius:25px;
font-size:0.85rem;
text-decoration:none;
}

/* ===================================
MODAL
=================================== */

.modal{
display:none;
position:fixed;
z-index:1000;
left:0;
top:0;
width:100%;
height:100%;
background:rgba(0,0,0,0.95);
flex-direction:column;
justify-content:center;
align-items:center;
padding:20px;
}

.modal img{
max-width:90%;
max-height:60%;
border-radius:12px;
margin-bottom:20px;
}

.modal-info{
text-align:center;
color:#fff;
}

.close{
position:absolute;
top:20px;
right:30px;
color:#fff;
font-size:35px;
cursor:pointer;
}

/* ===================================
CTA
=================================== */

.cta{
background:linear-gradient(135deg,#111,#444);
color:#fff;
text-align:center;
padding:80px 20px;
border-radius:16px;
margin:60px 0;
}

.cta h2{
font-size:2.4rem;
margin-bottom:16px;
}

.cta p{
margin-bottom:25px;
color:#ddd;
}

.cta .btn{
background:#b3291c;
color:#fff;
}

/* ===================================
FOOTER
=================================== */

.footer{
background:#000;
color:#aaa;
padding:30px 0;
}

.footer-container{
display:flex;
justify-content:space-between;
align-items:center;
}
.socials {
display: flex;
gap: 10px;
}
.socials a {
    color: #d8d8d8;
}

/* ===================================
RESPONSIVE
=================================== */

@media(max-width:1024px){

.portfolio-grid{
grid-template-columns:repeat(3,1fr);
}

}

@media(max-width:768px){

nav{
position:absolute;
top:50px;
left:0;
width:100%;
background:#fff;
flex-direction:column;
align-items:center;
padding:20px 0;
gap:20px;
display:none;
}

nav.active{
display:flex;
}

.hamburger{
display:flex;
}

.desktop-btn{
display:none;
}

.hero{
min-height:auto;
padding:60px 20px 30px;
}

.hero h1{
font-size:2.2rem;
}

.about-container{
flex-direction:column;
text-align:center;
}

/* Adjust spacing on mobile */ .f1 { left: 1%; } .f2 { left: 20%; } .f3 { left: 42%; } .f4 { left: 61%; } .f5 { left: 75%; }
.steps{
grid-template-columns:1fr;
}

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

.fimg{
width:80px;
height:110px;
}

}

@media(max-width:480px){

.hero h1{
font-size:2.5rem;
}

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

/* Floating buttons common styles */
.floating-btn {
    position: fixed;
    right: 20px;
    border-radius: 50%;
    width: 50px;      /* smaller */
    height: 50px;     /* smaller */
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;  /* smaller icon */
    color: white;
    z-index: 1000;
    cursor: pointer;
    box-shadow: 0 4px 15px rgba(0,0,0,0.3);
    transition: transform 0.3s;
text-decoration: none;
border: none;
  }
  
  /* WhatsApp button */
  .floating-btn.whatsapp {
    bottom: 90px;
    background-color: #25D366;
    animation: pulse 2s infinite;
    display: none; 
  }
  
  /* Pulse animation */
  @keyframes pulse {
    0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.5); }
    70% { transform: scale(1.1); box-shadow: 0 0 0 10px rgba(37, 211, 102, 0); }
    100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(37, 211, 102, 0); }
  }
  
  /* Back to top button */
  .floating-btn.back-to-top {
    bottom: 20px;
    background-color: #333;
    display: none;
  }
  
  .floating-btn:hover {
    transform: scale(1.06);
  }