/* ==========================================
FINAL PROFESSIONAL UPDATED CSS
RAZI CONSULTANCY SERVICES
========================================== */

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

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

html{
scroll-behavior:smooth;
}

body{
font-family:'Inter',sans-serif;
background:#f4f7fb;
color:#111827;
line-height:1.7;
overflow-x:hidden;
}

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

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

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

a{
text-decoration:none;
color:inherit;
}

ul{
list-style:none;
}

section{
padding:110px 0;
}

/* =========================
TYPOGRAPHY
========================= */

h1,h2,h3,h4,h5,h6{
font-weight:800;
color:#0f172a;
line-height:1.2;
}

p{
color:#64748b;
font-size:16px;
}

.section-title{
font-size:48px;
text-align:center;
margin-bottom:18px;
}

.section-title.left{
text-align:left;
}

.section-desc{
max-width:760px;
margin:auto;
text-align:center;
margin-bottom:70px;
font-size:18px;
}

.gradient{
background:linear-gradient(90deg,#16a34a,#2563eb);
-webkit-background-clip:text;
-webkit-text-fill-color:transparent;
}

/* =========================
HEADER
========================= */

header{
position:sticky;
top:0;
z-index:1000;
background:white;
backdrop-filter:blur(10px);
box-shadow:0 4px 20px rgba(0,0,0,.05);
}

.navbar{
display:flex;
justify-content:space-between;
align-items:center;
padding:18px 0;
}

.logo img{
height:60px;
width:auto;
object-fit:contain;
}

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

.nav-links a{
font-size:15px;
font-weight:600;
color:#1e293b;
position:relative;
transition:.3s ease;
}

.nav-links a:hover{
color:#16a34a;
}

.nav-links a::after{
content:'';
position:absolute;
left:0;
bottom:-7px;
width:0;
height:2px;
background:#16a34a;
transition:.3s ease;
}

.nav-links a:hover::after{
width:100%;
}

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

.btn{
display:inline-flex;
align-items:center;
justify-content:center;
padding:15px 30px;
border-radius:14px;
font-size:15px;
font-weight:700;
transition:.35s ease;
cursor:pointer;
border:none;
}

.btn-primary{
background:linear-gradient(135deg,#16a34a,#22c55e);
color:white;
box-shadow:0 10px 30px rgba(34,197,94,.25);
}

.btn-primary:hover{
transform:translateY(-4px);
box-shadow:0 18px 40px rgba(34,197,94,.35);
}

.btn-secondary{
background:white;
border:2px solid #16a34a;
color:#16a34a;
}

.btn-secondary:hover{
background:#16a34a;
color:white;
transform:translateY(-4px);
}

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

.hero{
padding:120px 0;
background:
linear-gradient(rgba(255,255,255,.92),rgba(255,255,255,.94)),
url('https://images.unsplash.com/photo-1520607162513-77705c0f0d4a?q=80&w=2070&auto=format&fit=crop');
background-size:cover;
background-position:center;
}

.hero-grid{
display:grid;
grid-template-columns:1fr 1fr;
gap:80px;
align-items:center;
}

.hero-badge{
display:inline-block;
padding:12px 20px;
border-radius:50px;
background:#dcfce7;
color:#15803d;
font-size:14px;
font-weight:700;
margin-bottom:24px;
}

.hero h1{
font-size:72px;
margin-bottom:24px;
}

.hero p{
font-size:18px;
margin-bottom:35px;
max-width:650px;
}

.hero-buttons{
display:flex;
gap:18px;
flex-wrap:wrap;
}

.hero-image img{
border-radius:28px;
box-shadow:0 25px 60px rgba(0,0,0,.15);
}

/* =========================
CARDS
========================= */

.cards,
.grid-3,
.grid-4{
display:grid;
gap:30px;
}

.cards{
grid-template-columns:repeat(4,1fr);
}

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

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

.grid-2{
display:grid;
grid-template-columns:1fr 1fr;
gap:70px;
align-items:center;
}

.card{
background:white;
padding:35px;
border-radius:28px;
box-shadow:0 10px 35px rgba(15,23,42,.06);
transition:.4s ease;
border:1px solid #eef2f7;
}

.card:hover{
transform:translateY(-10px);
box-shadow:0 25px 50px rgba(15,23,42,.08);
}

.card img{
width:100%;
height:220px;
object-fit:cover;
border-radius:20px;
margin-bottom:24px;
}

.card h3{
font-size:24px;
margin-bottom:14px;
}

.card p{
margin-bottom:24px;
}

.card ul{
margin:22px 0;
padding-left:18px;
}

.card ul li{
list-style:disc;
margin-bottom:10px;
color:#64748b;
}

/* =========================
SERVICE ICONS
========================= */

.service-icon{
width:72px;
height:72px;
border-radius:20px;
display:flex;
align-items:center;
justify-content:center;
background:linear-gradient(135deg,#dcfce7,#ecfeff);
margin-bottom:20px;
}

.service-icon svg{
width:34px;
height:34px;
stroke:#16a34a;
stroke-width:2.2;
}

/* =========================
MINI CARDS
========================= */

.mini-grid{
display:grid;
grid-template-columns:repeat(2,1fr);
gap:18px;
margin-top:30px;
}

.mini-card{
background:white;
padding:18px;
border-radius:18px;
font-weight:700;
text-align:center;
box-shadow:0 8px 25px rgba(0,0,0,.05);
}

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

.rounded-img{
border-radius:28px;
box-shadow:0 20px 50px rgba(0,0,0,.12);
}

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

.cta{
background:linear-gradient(135deg,#16a34a,#15803d);
text-align:center;
color:white;
}

.cta h2{
font-size:54px;
margin-bottom:20px;
color:white;
}

.cta p{
color:#dcfce7;
font-size:18px;
max-width:700px;
margin:auto;
margin-bottom:35px;
}

/* =========================
CONTACT
========================= */

.contact-info,
.contact-form{
background:white;
padding:40px;
border-radius:30px;
box-shadow:0 12px 40px rgba(15,23,42,.06);
}

.contact-info h3,
.contact-form h3{
font-size:32px;
margin-bottom:30px;
}

.info-box{
display:flex;
gap:18px;
margin-bottom:28px;
align-items:flex-start;
}

.info-box i{
background:#dcfce7;
padding:14px;
border-radius:14px;
color:#16a34a;
}

.contact-form input,
.contact-form select,
.contact-form textarea{
width:100%;
padding:16px;
margin-bottom:20px;
border:1px solid #dbe4ee;
border-radius:16px;
font-size:15px;
background:#f8fafc;
outline:none;
transition:.3s ease;
}

.contact-form input:focus,
.contact-form select:focus,
.contact-form textarea:focus{
border-color:#16a34a;
background:white;
}

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

footer{
background:#0f172a;
color:white;
padding:90px 0 30px;
}

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

.footer-logo{
height:58px;
margin-bottom:22px;
}

footer p{
color:#94a3b8;
}

footer h3{
margin-bottom:24px;
font-size:22px;
color:white;
}

footer ul li{
margin-bottom:14px;
}

footer ul li a{
color:#94a3b8;
transition:.3s ease;
}

footer ul li a:hover{
color:white;
padding-left:4px;
}

/* =========================
SOCIAL ICONS
========================= */

.social-icons {
    display:flex;
    gap:15px;
    align-items:center;
}

.social-icons a {
    width:45px;
    height:45px;
    background:#1e293b;
    color:white;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    text-decoration:none;
    transition:0.3s ease;
    font-size:18px;
}

.social-icons a i{
    display:flex;
    align-items:center;
    justify-content:center;
    line-height:1;
}

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

.footer-bottom{
margin-top:60px;
padding-top:25px;
border-top:1px solid #1e293b;
text-align:center;
color:#94a3b8;
}

/* =========================
CHATBOT
========================= */
.chat-toggle{
position:fixed;
bottom:20px;
right:20px;
display:flex;
align-items:center;
justify-content:center;
width:68px;
height:68px;
border:none;
border-radius:50%;
background:linear-gradient(135deg,#16a34a,#22c55e);
color:white;
font-size:28px;
cursor:pointer;
z-index:999;
box-shadow:0 18px 40px rgba(0,0,0,.2);
transition:.35s ease;
}

.chat-toggle:hover{
transform:translateY(-5px);
}

.chatbox{
position:fixed;
bottom:100px;
right:20px;
width:340px;
background:white;
padding:25px;
border-radius:24px;
display:none;
z-index:999;
box-shadow:0 25px 60px rgba(0,0,0,.18);
}

.chatbox h3{
margin-bottom:12px;
}

.chatbox button{
width:100%;
padding:14px;
margin-top:12px;
border:none;
border-radius:14px;
background:#f1f5f9;
cursor:pointer;
transition:.3s ease;
font-weight:600;
}

.chatbox button:hover{
background:#dcfce7;
}

/* =========================
FLOATING BUTTONS WRAPPER
========================= */
.scroll-buttons{
    position:fixed;
    right:20px;
    bottom:100px;
    display:flex;
    flex-direction:column;
    gap:15px;
    z-index:999;
}

/* =========================
COMMON BUTTON STYLE
========================= */

.scroll-buttons button,
.scroll-buttons a{
    width:60px;
    height:60px;
    border:none;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    text-decoration:none;
    cursor:pointer;
    font-size:24px;
    transition:all .35s ease;
    box-shadow:0 18px 40px rgba(0,0,0,.18);
}

/* =========================
WHATSAPP BUTTON
========================= */

/* =========================
WHATSAPP BUTTON
LEFT SIDE
========================= */

.whatsapp-float{
    position:fixed;
    left:20px;
    bottom:20px;
    width:68px;
    height:68px;
    background:#25D366;
    color:white;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    z-index:999;
    box-shadow:0 18px 40px rgba(0,0,0,.2);
    transition:.35s ease;
}

.whatsapp-float:hover{
    transform:translateY(-5px);
    background:#1ebe5d;
}

.whatsapp-float i{
    font-size:34px;
    color:white;
    line-height:1;
    display:flex;
    align-items:center;
    justify-content:center;
}

/* =========================
SCROLL TOP BUTTON
========================= */

#backToTop{
    background:#2563eb;
    color:white;
    display:none;
}

#backToTop:hover{
    transform:translateY(-5px);
    background:#1d4ed8;
}

/* Arrow Icon */
#backToTop i{
    font-size:24px;
}


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

@media(max-width:1100px){

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

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

.hero-grid{
grid-template-columns:1fr;
text-align:center;
}

.hero p{
margin:auto auto 35px;
}

.hero-buttons{
justify-content:center;
}

.hero h1{
font-size:56px;
}

}

@media(max-width:768px){

.nav-links{
display:none;
}

.cards,
.grid-3,
.grid-4,
.footer-grid,
.mini-grid{
grid-template-columns:1fr;
}

.hero{
padding:90px 0;
}

.hero h1{
font-size:42px;
}

.section-title{
font-size:36px;
}

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

.chatbox{
width:90%;
right:5%;
}

.logo img{
height:50px;
}


.chat-toggle{
width:60px;
height:60px;
}

.scroll-buttons{
    right:15px;
    bottom:85px;
    gap:12px;
.whatsapp-float{
left:15px;
bottom:15px;
width:60px;
height:60px;
}

.whatsapp-float i{
font-size:30px;
}

.scroll-buttons button,
.scroll-buttons a{
width:55px;
height:55px;
font-size:20px;
}

}