html{
    scroll-behavior:smooth;
}

body{
margin:0;
font-family:Arial;
}

.hero{

background:url("../images/entrance.jpg");

background-size:cover;

background-position:center;

height:100vh;

position:relative;

}

.overlay{

background:rgba(0,0,0,0.45);

height:100%;

display:flex;

justify-content:center;

align-items:center;

color:white;

text-align:center;

}

.hero h1{

font-size:70px;

font-weight:bold;

}

.hero p{

font-size:24px;

margin:20px 0;

}

.btn{

border-radius:40px;

padding:15px 35px;

font-weight:bold;

}

/* Services Section */

.services{
    background:#FFF8F0;
    padding:80px 0;
}

.services h2{
    color:#1E7A4D;
    font-size:42px;
    font-weight:bold;
}

.service-card{
    background:white;
    border-radius:20px;
    padding:30px;
    text-align:center;
    box-shadow:0 8px 20px rgba(0,0,0,.1);
    transition:.3s;
    margin-bottom:30px;
    height:100%;
}

.service-card:hover{
    transform:translateY(-10px);
}

.icon{
    font-size:50px;
    margin-bottom:20px;
}

.service-card h4{
    color:#6B4F3A;
    font-weight:bold;
}

.service-card p{
    color:#555;
}

/* ===================================
   Professional Gallery
=================================== */

.gallery{
    background:#f8f9fa;
    padding:90px 0;
}

.gallery h2{
    color:#1E7A4D;
    font-size:48px;
    font-weight:700;
}

.gallery h3{
    color:#198754;
    font-weight:bold;
    margin-bottom:25px;
}

.gallery-img{

    width:100%;

    height:300px;

    object-fit:cover;

    border-radius:20px;

    box-shadow:0 8px 20px rgba(0,0,0,.15);

    transition:all .4s ease;

    cursor:pointer;

}

.gallery-img:hover{

    transform:scale(1.05);

    box-shadow:0 18px 35px rgba(0,0,0,.25);

}

/* Why Choose Us */

.why-choose{
    padding:80px 0;
    background:#f8f9fa;
}

.why-choose h2{
    text-align:center;
    color:#1E7A4D;
    font-size:42px;
    margin-bottom:15px;
}

.section-subtitle{
    text-align:center;
    color:#666;
    margin-bottom:50px;
    font-size:18px;
}

.features{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
    gap:30px;
}

.feature-box{
    background:#fff;
    border-radius:15px;
    padding:30px;
    text-align:center;
    box-shadow:0 10px 20px rgba(0,0,0,.08);
    transition:0.3s;
}

.feature-box:hover{
    transform:translateY(-10px);
}

.feature-icon{
    font-size:50px;
    margin-bottom:20px;
}

.feature-box h4{
    color:#6B4F3A;
    margin-bottom:15px;
}

.feature-box p{
    color:#555;
}

html{
    scroll-behavior:smooth;
    
}

.service-card,
.feature-box{
transition:.4s ease;
}

.service-card:hover,
.feature-box:hover{
transform:translateY(-12px);
}

/* WhatsApp Floating Button */

.whatsapp{

    position:fixed;

    bottom:25px;

    right:25px;

    width:60px;

    height:60px;

    background:#25D366;

    color:white;

    border-radius:50%;

    display:flex;

    justify-content:center;

    align-items:center;

    text-decoration:none;

    font-size:32px;

    box-shadow:0 5px 15px rgba(0,0,0,.3);

    z-index:1000;

    transition:0.3s;

}

.whatsapp:hover{

    background:#1ebe5d;

    transform:scale(1.1);

}

@media (max-width:768px){

.hero h1{
    font-size:42px;
}

.hero p{
    font-size:18px;
}

.btn{
    padding:12px 25px;
    font-size:16px;
}

.overlay{
    padding:20px;
}

.services h2,
.gallery h2,
.why-choose h2{
    font-size:32px;
}

.icon,
.feature-icon{
    font-size:40px;
}

.service-card,
.feature-box{
    padding:20px;
}

.gallery-grid img{
    height:220px;
}

.navbar-brand span{
    font-size:22px;
}

.hero{
    height:80vh;
}

.features{
    grid-template-columns:1fr;
}

.gallery-grid{
    grid-template-columns:1fr;
}

}

/* Pricing */

.price-card{

    background:#fff;

    padding:30px;

    border-radius:20px;

    box-shadow:0 8px 20px rgba(0,0,0,.10);

    transition:.3s;

}

.price-card:hover{

    transform:translateY(-5px);

}

.price-card h3{

    color:#198754;

    font-weight:bold;

}

.table th,
.table td{

    vertical-align:middle;

}

/* About Section */

.about-section{
    background:#f8f9fa;
    padding:90px 0;
}

.about-title{
    color:#1E7A4D;
    font-size:44px;
    font-weight:bold;
    margin-bottom:25px;
}

.about-image{
    width:100%;
    height:520px;
    object-fit:cover;
}

.about-box{
    background:white;
    border-radius:18px;
    padding:20px;
    text-align:center;
    box-shadow:0 8px 20px rgba(0,0,0,.08);
    transition:.3s;
}

.about-box:hover{
    transform:translateY(-8px);
}

.about-box h3{
    color:#198754;
    font-weight:bold;
}

.about-box p{
    margin:0;
    color:#555;
}

.gallery-video{

    width:100%;

    height:300px;

    object-fit:cover;

    border-radius:20px;

    box-shadow:0 8px 20px rgba(0,0,0,.15);

}

/* Statistics */

.stats{

background:#198754;

color:white;

}

.stats h2{

font-size:48px;

font-weight:bold;

margin-bottom:10px;

}

.stats p{

font-size:18px;

margin:0;

}

/* Footer */

.footer{

background:#1E7A4D;

color:white;

padding:60px 0 30px;

margin-top:80px;

}

.footer h3,
.footer h4{

font-weight:bold;

margin-bottom:20px;

}

.footer p{

color:#f1f1f1;

}

.footer-links{

list-style:none;

padding:0;

}

.footer-links li{

margin-bottom:10px;

}

.footer-links a{

color:white;

text-decoration:none;

transition:.3s;

}

.footer-links a:hover{

color:#FFD166;

}

.footer a{

color:white;

text-decoration:none;

}

.footer hr{

border-color:rgba(255,255,255,.3);

margin:30px 0;

}

/* Navbar */

.navbar{

padding:15px 0;

transition:.3s;

}

.navbar-brand{

font-size:28px;

font-weight:bold;

}

.navbar-brand img{

border:3px solid white;

}

.nav-link{

font-weight:600;

margin-left:10px;

transition:.3s;

}

.nav-link:hover{

color:#FFD166 !important;

}

.navbar.shadow{

box-shadow:0 5px 15px rgba(0,0,0,.15);

}

/* Instagram Section */

.instagram-section{

background:#fff8f0;

padding:90px 0;

}

.instagram-card{

max-width:600px;

margin:auto;

background:white;

padding:40px;

border-radius:20px;

box-shadow:0 10px 25px rgba(0,0,0,.1);

}

.instagram-logo{

width:120px;

height:120px;

border-radius:50%;

object-fit:cover;

margin-bottom:20px;

border:4px solid #198754;

}

.instagram-card h3{

color:#198754;

font-weight:bold;

margin-bottom:15px;

}

.instagram-card p{

color:#666;

margin-bottom:25px;

}

/* Back to Top Button */

#topBtn{

display:none;

position:fixed;

bottom:100px;

right:25px;

z-index:9999;

border:none;

outline:none;

background:#198754;

color:white;

cursor:pointer;

width:55px;

height:55px;

border-radius:50%;

font-size:24px;

box-shadow:0 5px 15px rgba(0,0,0,.3);

transition:.3s;

}

#topBtn:hover{

background:#145c32;

transform:scale(1.1);

}

/* ===========================
   Mobile Responsive Design
=========================== */

@media (max-width:768px){

.container{
    padding-left:20px;
    padding-right:20px;
}

/* Navbar */

.navbar-brand span{
    font-size:20px;
}

.navbar-brand img{
    width:45px;
    height:45px;
}

/* Hero */

.hero{
    height:75vh;
}

.hero h1{
    font-size:38px;
}

.hero p{
    font-size:18px;
}

.hero .btn{
    display:block;
    width:100%;
    margin:10px 0;
}

/* About */

#about img{
    margin-bottom:25px;
}

/* Services */

.service-card{
    margin-bottom:25px;
}

/* Pricing */

.price-card{
    margin-bottom:30px;
    overflow-x:auto;
}

/* Gallery */

.gallery-img,
.gallery-video{
    height:230px;
}

/* Statistics */

.stats h2{
    font-size:32px;
}

/* Footer */

.footer{
    text-align:center;
}

.footer-links{
    margin-top:20px;
}

}