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

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

header{
position:fixed;
width:100%;
top:0;
left:0;
z-index:999;
}

.navbar{

display:flex;
justify-content:space-between;
align-items:center;

padding:20px 8%;

background:rgba(92, 6, 6, 0.35);

backdrop-filter:blur(15px);

}

.logo{

font-size:30px;
font-weight:700;
color:#fff;

}

.logo span{

color:#D4AF37;

}

.nav-links{

display:flex;
list-style:none;

}

.nav-links li{

margin-left:40px;

}

.nav-links a{

text-decoration:none;

color:white;

font-size:17px;

transition:.4s;

}

.nav-links a:hover{

color:#D4AF37;

}

.menu{

display:none;

font-size:35px;

color:white;

cursor:pointer;

}

/* HERO */

.hero{

height:100vh;

background:url('../images/hero.jpg') center/cover;

display:flex;

justify-content:center;

align-items:center;

position:relative;

}

.overlay{

position:absolute;

width:100%;

height:100%;

background:#4c3d09;

}

.hero-content{

position:relative;

text-align:center;

color:white;

padding:20px;

animation:fadeUp 1.5s;

}

.hero-content h3{

font-size:25px;

color:#D4AF37;

margin-bottom:10px;

}

.hero-content h1{

font-size:70px;

margin-bottom:20px;

}

.hero-content p{

font-size:20px;

max-width:700px;

margin:auto;

line-height:1.8;

}

.buttons{

margin-top:40px;

}

.btn{

padding:15px 40px;

background:#D4AF37;

color:white;

text-decoration:none;

margin-right:15px;

border-radius:40px;

transition:.4s;

}

.btn:hover{

background:white;

color:black;

}

.btn2{

padding:15px 40px;

border:2px solid #D4AF37;

color:white;

text-decoration:none;

border-radius:40px;

transition:.4s;

}

.btn2:hover{

background:#D4AF37;

}

@keyframes fadeUp{

from{

opacity:0;

transform:translateY(80px);

}

to{

opacity:1;

transform:translateY(0);

}

}

/* MOBILE */

@media(max-width:991px){

.nav-links{

position:absolute;

top:80px;

left:-100%;

background:#111;

width:100%;

flex-direction:column;

text-align:center;

transition:.5s;

}

.nav-links.active{

left:0;

}

.nav-links li{

margin:25px 0;

}

.menu{

display:block;

}

.hero-content h1{

font-size:45px;

}

.hero-content p{

font-size:17px;

}

}

@media(max-width:600px){

.hero-content h1{

font-size:35px;

}

.hero-content h3{

font-size:18px;

}

.buttons{

display:flex;

flex-direction:column;

gap:20px;

}

.btn,.btn2{

margin:0;

}

}



/* ===========================
   Loader
=========================== */

#loader{
position:fixed;
top:0;
left:0;
width:100%;
height:100vh;
background:#111;
display:flex;
justify-content:center;
align-items:center;
z-index:99999;
transition:1s;
}

.loader-logo{

font-size:70px;
font-weight:700;
color:#D4AF37;
letter-spacing:5px;
animation:pulse 1s infinite;

}

@keyframes pulse{

0%{transform:scale(1);}
50%{transform:scale(1.15);}
100%{transform:scale(1);}

}

/* ===========================
Progress Bar
=========================== */

#progress-bar{

position:fixed;
top:0;
left:0;
width:0%;
height:4px;
background:#D4AF37;
z-index:999999;

}

/* ===========================
Sticky Navbar
=========================== */

header.sticky{

background:#111;
box-shadow:0 5px 20px rgba(0,0,0,.4);

}

/* ===========================
Floating Buttons
=========================== */

.whatsapp,
.call{

position:fixed;
right:25px;

width:60px;
height:60px;

border-radius:50%;

display:flex;
justify-content:center;
align-items:center;

font-size:30px;

color:#fff;

text-decoration:none;

z-index:999;

transition:.4s;

box-shadow:0 10px 20px rgba(0,0,0,.3);

}

.whatsapp{

bottom:100px;
background:#25D366;

}

.call{

bottom:170px;
background:#D4AF37;

}

.whatsapp:hover,
.call:hover{

transform:scale(1.1);

}

/* ===========================
Top Button
=========================== */

#topBtn{

position:fixed;

bottom:30px;
right:25px;

width:55px;
height:55px;

border:none;

background:#D4AF37;

color:#fff;

font-size:25px;

border-radius:50%;

cursor:pointer;

display:none;

transition:.4s;

z-index:999;

}

#topBtn:hover{

background:#fff;
color:#111;

}

/* Mobile */

@media(max-width:768px){

.whatsapp,
.call{

width:50px;
height:50px;
font-size:24px;

}

}



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

.about{

padding:100px 8%;
background:#181818;
color:#fff;

}

.about-container{

display:grid;

grid-template-columns:1fr 1fr;

gap:60px;

align-items:center;

}

.about-image{

position:relative;

}

.about-image img{

width:100%;

border-radius:20px;

box-shadow:0 15px 40px rgba(0,0,0,.4);

}

.experience{

position:absolute;

bottom:-25px;

right:-25px;

background:#D4AF37;

padding:25px;

border-radius:15px;

text-align:center;

color:#111;

}

.experience h2{

font-size:45px;

}

.about-content h5{

color:#D4AF37;

letter-spacing:3px;

margin-bottom:15px;

}

.about-content h2{

font-size:45px;

margin-bottom:25px;

line-height:1.3;

}

.about-content p{

color:#ccc;

line-height:1.9;

margin-bottom:30px;

}

.about-features{

display:grid;

grid-template-columns:1fr 1fr;

gap:20px;

margin-bottom:35px;

}

.feature{

display:flex;

align-items:center;

gap:10px;

font-size:18px;

}

.feature i{

color:#D4AF37;

font-size:22px;

}

.about-btn{

display:inline-block;

padding:15px 35px;

background:#D4AF37;

color:#111;

text-decoration:none;

border-radius:40px;

font-weight:600;

transition:.4s;

}

.about-btn:hover{

background:#fff;

transform:translateY(-5px);

}

/* ===========================
COUNTER
=========================== */

.counter{

padding:80px 8%;

display:grid;

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

background:#111;

text-align:center;

gap:30px;

}

.counter-box{

padding:40px;

background:#1d1d1d;

border-radius:15px;

transition:.4s;

}

.counter-box:hover{

transform:translateY(-10px);

}

.counter-box h2{

font-size:50px;

color:#D4AF37;

margin-bottom:10px;

}

.counter-box p{

color:#bbb;

}

/* ===========================
Responsive
=========================== */

@media(max-width:991px){

.about-container{

grid-template-columns:1fr;

}

.counter{

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

}

.about-content h2{

font-size:35px;

}

}

@media(max-width:600px){

.counter{

grid-template-columns:1fr;

}

.about-features{

grid-template-columns:1fr;

}

.about-content h2{

font-size:30px;

}

}



/* ===========================
SECTION TITLE
=========================== */

.section-title{
    text-align:center;
    margin-bottom:60px;
}

.section-title h5{
    color:#D4AF37;
    letter-spacing:3px;
    font-size:16px;
}

.section-title h2{
    color:#fff;
    font-size:42px;
    margin:15px 0;
}

.section-title p{
    color:#bdbdbd;
    max-width:700px;
    margin:auto;
    line-height:1.8;
}

/* ===========================
SERVICES
=========================== */

.services{
    background:#181818;
    padding:100px 8%;
}

.service-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
    gap:30px;
}

.service-card{
    background:#202020;
    border:1px solid rgba(212,175,55,.15);
    border-radius:20px;
    padding:35px;
    text-align:center;
    transition:.4s;
    position:relative;
    overflow:hidden;
}

.service-card::before{
    content:'';
    position:absolute;
    top:0;
    left:-100%;
    width:100%;
    height:100%;
    background:linear-gradient(
        90deg,
        transparent,
        rgba(212,175,55,.12),
        transparent
    );
    transition:.6s;
}

.service-card:hover::before{
    left:100%;
}

.service-card:hover{
    transform:translateY(-12px);
    border-color:#D4AF37;
    box-shadow:0 15px 35px rgba(212,175,55,.2);
}

.service-card i{
    font-size:55px;
    color:#D4AF37;
    margin-bottom:20px;
}

.service-card h3{
    color:#fff;
    margin-bottom:15px;
}

.service-card p{
    color:#bdbdbd;
    line-height:1.8;
    margin-bottom:25px;
}

.service-card a{
    color:#D4AF37;
    text-decoration:none;
    font-weight:600;
}

.service-card a:hover{
    color:#fff;
}




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


.portfolio{

background:#111;

padding:100px 8%;

}


.filter-buttons{

display:flex;

justify-content:center;

gap:20px;

margin-bottom:50px;

flex-wrap:wrap;

}


.filter-buttons button{

padding:12px 30px;

border-radius:30px;

border:1px solid #D4AF37;

background:transparent;

color:white;

cursor:pointer;

transition:.4s;

}


.filter-buttons button:hover,
.filter-buttons .active{

background:#D4AF37;

color:#111;

}



.gallery{

display:grid;

grid-template-columns:
repeat(auto-fit,minmax(280px,1fr));

gap:25px;

}



.gallery-item{

position:relative;

height:300px;

overflow:hidden;

border-radius:20px;

cursor:pointer;

}



.gallery-item img{

width:100%;

height:100%;

object-fit:cover;

transition:.6s;

}



.gallery-overlay{

position:absolute;

inset:0;

background:
rgba(0,0,0,.7);

display:flex;

flex-direction:column;

justify-content:center;

align-items:center;

color:white;

opacity:0;

transition:.5s;

}



.gallery-overlay h3{

font-size:25px;

color:#D4AF37;

}



.gallery-overlay i{

font-size:40px;

margin-top:15px;

}



.gallery-item:hover img{

transform:scale(1.15);

}



.gallery-item:hover .gallery-overlay{

opacity:1;

}


/* LIGHTBOX */


.lightbox{

position:fixed;

top:0;

left:0;

width:100%;

height:100%;

background:rgba(0,0,0,.9);

display:none;

justify-content:center;

align-items:center;

z-index:9999;

}


.lightbox img{

max-width:90%;

max-height:85%;

border-radius:15px;

}


.close{

position:absolute;

top:30px;

right:50px;

font-size:50px;

color:white;

cursor:pointer;

}



@media(max-width:600px){

.filter-buttons button{

padding:10px 18px;

}


.gallery-item{

height:250px;

}

}




/* ===========================
TESTIMONIALS
=========================== */
/* ===========================
   TESTIMONIALS SECTION
=========================== */


.testimonials{

    background:#181818;

    padding:40px 2%;

    color:white;

}



.testimonial-slider{

    width:100%;

    overflow:hidden;

    padding:70px 40px;

}



.testimonial-slider .swiper-wrapper{

    display:flex;

}



.testimonial-slider .swiper-slide{

    height:auto;

    display:flex;

}



.testimonial-card{

    width:100%;

    background:#202020;

    padding:40px 30px;

    border-radius:10px;

    text-align:center;

    border:1px solid transparent;

    transition:0.5s;

}



.testimonial-card:hover{

    transform:translateY(-12px);

    border-color:#D4AF37;

    box-shadow:0 15px 40px rgba(212,175,55,0.25);

}




.testimonial-card img{

    width:90px;

    height:90px;

    border-radius:50%;

    object-fit:cover;

    border:3px solid #D4AF37;

    margin-bottom:20px;

}



.testimonial-card h3{

    color:white;

    font-size:22px;

    margin-bottom:10px;

}



.stars{

    color:#D4AF37;

    font-size:10px;

    letter-spacing:5px;

    margin-bottom:10px;

}



.testimonial-card p{

    color:#ccc;

    font-size:15px;

    line-height:1.8;

    font-style:italic;

}




/* Swiper Buttons */


.swiper-button-next,
.swiper-button-prev{

    color:#D4AF37 !important;

}



.swiper-button-next:after,
.swiper-button-prev:after{

    font-size:25px;

}



/* Pagination */


.swiper-pagination-bullet{

    background:#D4AF37 !important;

    opacity:0.7;

}


.swiper-pagination-bullet-active{

    opacity:1;

}



/* Tablet */


@media(max-width:1024px){


.testimonials{

    padding:80px 5%;

}


}



/* Mobile */


@media(max-width:600px){


.testimonials{

    padding:60px 5%;

}


.testimonial-card{

    padding:30px 20px;

}


.testimonial-card img{

    width:80px;

    height:80px;

}


.swiper-button-next,
.swiper-button-prev{

    display:none;

}


}


/* Swiper Fix */

.testimonial-slider{
    width:100%;
    overflow:hidden;
}


.testimonial-slider .swiper-wrapper{
    display:flex;
}


.testimonial-slider .swiper-slide{
    flex-shrink:0;
    height:auto;
}


.testimonial-card{
    width:100%;
}

/* =========================
COST CALCULATOR
========================= */


.calculator{

background:#181818;

padding:100px 8%;

color:white;

}



.calculator-box{

max-width:700px;

margin:auto;

background:#202020;

padding:40px;

border-radius:20px;

border:1px solid rgba(212,175,55,.3);

}



.form-group{

margin-bottom:25px;

}


.form-group label{

display:block;

margin-bottom:10px;

color:#D4AF37;

}



.form-group input,
.form-group select{

width:100%;

padding:15px;

background:#111;

border:none;

outline:none;

color:white;

border-radius:10px;

font-size:16px;

}



.calculate-btn{

width:100%;

padding:15px;

background:#D4AF37;

border:none;

border-radius:30px;

font-size:18px;

font-weight:600;

cursor:pointer;

transition:.4s;

}



.calculate-btn:hover{

background:white;

}



#result{

margin-top:30px;

text-align:center;

color:#D4AF37;

}



.whatsapp-quote{

display:block;

text-align:center;

margin-top:25px;

padding:15px;

background:#25D366;

color:white;

text-decoration:none;

border-radius:30px;

font-weight:600;

}



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


.contact{

background:#111;

padding:100px 8%;

color:white;

}



.contact-container{

display:grid;

grid-template-columns:1fr 1fr;

gap:50px;

}



.contact-info{

display:flex;

flex-direction:column;

gap:20px;

}



.contact-card{

display:flex;

align-items:center;

gap:20px;

background:#202020;

padding:25px;

border-radius:15px;

transition:.4s;

}



.contact-card:hover{

transform:translateX(10px);

border-left:4px solid #D4AF37;

}



.contact-card i{

font-size:40px;

color:#D4AF37;

}



.contact-card h3{

margin-bottom:5px;

}



.contact-card p{

color:#bbb;

}



/* FORM */


.contact-form{

background:#202020;

padding:40px;

border-radius:20px;

}



.contact-form input,
.contact-form textarea{


width:100%;

padding:15px;

margin-bottom:20px;

background:#111;

border:none;

outline:none;

border-radius:10px;

color:white;

font-size:16px;

}



.contact-form button{

width:100%;

padding:15px;

border:none;

background:#D4AF37;

color:#111;

font-size:18px;

font-weight:600;

border-radius:30px;

cursor:pointer;

transition:.4s;

}



.contact-form button:hover{

background:white;

}



/* MAP */


.map{

margin-top:60px;

}



.map iframe{

width:100%;

height:400px;

border:0;

border-radius:20px;

}



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


.footer{

background:#181818;

padding:80px 8% 20px;

color:white;

}



.footer-container{

display:grid;

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

gap:40px;

}



.footer-logo{

font-size:35px;

}


.footer-logo span{

color:#D4AF37;

}



.footer-box p{

color:#bbb;

line-height:1.8;

margin-top:15px;

}



.footer-box h3{

color:#D4AF37;

margin-bottom:20px;

}



.footer-box ul{

list-style:none;

}



.footer-box li{

margin-bottom:12px;

color:#bbb;

}



.footer-box a{

color:#bbb;

text-decoration:none;

transition:.3s;

}



.footer-box a:hover{

color:#D4AF37;

}



/* SOCIAL */

.social-icons{

display:flex;

gap:15px;

margin-top:25px;

}



.social-icons a{

width:40px;

height:40px;

background:#111;

display:flex;

align-items:center;

justify-content:center;

border-radius:50%;

font-size:22px;

}



.social-icons a:hover{

background:#D4AF37;

color:#111;

}



/* NEWSLETTER */

.newsletter{

display:flex;

margin-top:20px;

}



.newsletter input{

width:70%;

padding:12px;

border:none;

outline:none;

}



.newsletter button{

background:#D4AF37;

border:none;

padding:12px;

cursor:pointer;

}



/* FOOTER BOTTOM */


.footer-bottom{

margin-top:50px;

padding-top:20px;

border-top:1px solid #333;

display:flex;

justify-content:space-between;

align-items:center;

}



#themeToggle{

width:45px;

height:45px;

border-radius:50%;

border:none;

background:#D4AF37;

cursor:pointer;

font-size:22px;

}


body.light{

background:#fff;

color:#111;

}


body.light .footer,
body.light .services,
body.light .about,
body.light .contact,
body.light .testimonials{

background:#f5f5f5;

color:#111;

}


body.light .service-card,
body.light .testimonial-card,
body.light .contact-card{

background:white;

color:#111;

}


.email-card{

text-decoration:none;
color:white;
display:flex;

}


.email-card h3{

color:white;

}


.email-card i{

color:#D4AF37;

}



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

.footer-social a{
    width:35px;
    height:35px;
    display:flex;
    justify-content:center;
    align-items:center;
    border-radius:50%;
    background:#222;
    color:#fff;
    font-size:20px;
    transition:.3s;
}

.footer-social a:hover{
    background:#c59d5f;
    transform:translateY(-3px);
}

/* ==========================
   WEBSITE DEVELOPMENT
========================== */
/* ==========================================
   ULTRA PREMIUM WEBSITE DEVELOPMENT SECTION
========================================== */


.website-service{

position:relative;

padding:120px 8%;

overflow:hidden;

text-align:center;

background:
linear-gradient(
135deg,
#020617,
#111827,
#1e1b4b,
#312e81
);

background-size:400% 400%;

animation:luxuryBg 15s ease infinite;

color:white;

}



/* Floating Background Lights */

.website-service::before{

content:"";

position:absolute;

width:500px;
height:500px;

top:-200px;
left:-150px;

background:#FFD700;

opacity:.12;

border-radius:50%;

filter:blur(120px);

animation:floatingGlow 8s infinite alternate;

}



.website-service::after{

content:"";

position:absolute;

width:450px;
height:450px;

right:-150px;
bottom:-150px;

background:#00ffff;

opacity:.15;

border-radius:50%;

filter:blur(120px);

animation:floatingGlow2 10s infinite alternate;

}



.website-service>*{

position:relative;

z-index:2;

}



/* Heading */


.website-service .section-title h5{

font-size:18px;

letter-spacing:5px;

color:#FFD700 !important;

animation:blinkTitle 3s infinite;

}



.website-service .section-title h2{


font-size:48px;

font-weight:800;


background:

linear-gradient(
90deg,
#FFD700,
#ffffff,
#00ffff,
#FFD700
);


background-size:300%;


-webkit-background-clip:text;

-webkit-text-fill-color:transparent;


animation:gradientText 6s linear infinite;

}



.website-service .section-title p{

max-width:700px;

margin:20px auto;

color:#ddd !important;

font-size:17px;

line-height:1.8;

}




/* MAIN CARD */


.website-box{

max-width:900px;

margin:60px auto 0;


padding:60px 45px;


background:

rgba(255,255,255,.08);


backdrop-filter:blur(25px);


border-radius:35px;


border:

1px solid rgba(255,255,255,.25);


box-shadow:

0 30px 80px rgba(0,0,0,.5);


position:relative;


overflow:hidden;


animation:

cardMove 5s ease-in-out infinite;


}



/* Animated Border */


.website-box::before{


content:"";

position:absolute;


inset:0;


padding:2px;


background:

linear-gradient(
90deg,
#FFD700,
#00ffff,
#ff00ff,
#FFD700
);


background-size:300%;


animation:borderAnimation 5s linear infinite;


border-radius:35px;


mask:

linear-gradient(#000 0 0) content-box,
linear-gradient(#000 0 0);


mask-composite:exclude;



}




/* Icon */


.website-box i{


font-size:90px;


color:#25D366 !important;


filter:

drop-shadow(0 0 25px #25D366);


animation:

floatingIcon 2.5s infinite;


}




/* Card Heading */


.website-box h3{


margin-top:25px;


font-size:36px;


color:white !important;


font-weight:800;


}




/* Services List */


.website-box p{


margin-top:20px;


font-size:18px;


line-height:2;


color:#eeeeee !important;


}



/* WhatsApp Button */


.website-btn{


margin-top:30px;


padding:

18px 45px;


display:inline-flex;


align-items:center;


gap:12px;


border-radius:50px;


background:

linear-gradient(
45deg,
#25D366,
#00ff99
);


color:white !important;


font-size:18px;


font-weight:700;


text-decoration:none;


box-shadow:

0 15px 40px rgba(37,211,102,.5);


transition:.5s;


}



.website-btn:hover{


transform:

translateY(-8px) scale(1.05);


box-shadow:

0 25px 60px rgba(37,211,102,.8);


}




/* =====================
   ANIMATIONS
===================== */


@keyframes luxuryBg{

0%{
background-position:0% 50%;
}

50%{
background-position:100% 50%;
}

100%{
background-position:0% 50%;
}

}



@keyframes gradientText{

0%{

background-position:0%;

}

100%{

background-position:300%;

}

}



@keyframes cardMove{


0%,100%{

transform:translateY(0);

}

50%{

transform:translateY(-15px);

}

}



@keyframes floatingIcon{


0%,100%{

transform:translateY(0);

}


50%{

transform:translateY(-20px);

}

}



@keyframes borderAnimation{


0%{

background-position:0%;

}

100%{

background-position:300%;

}

}



@keyframes floatingGlow{


from{

transform:translate(0,0);

}

to{

transform:translate(150px,100px);

}

}



@keyframes floatingGlow2{


from{

transform:translate(0,0);

}

to{

transform:translate(-120px,-100px);

}

}



@keyframes blinkTitle{


50%{

opacity:.5;

}

}




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


@media(max-width:992px){


.website-service{

padding:90px 5%;

}


.website-service .section-title h2{

font-size:38px;

}


.website-box{

padding:50px 35px;

}


.website-box h3{

font-size:30px;

}

}




@media(max-width:600px){


.website-service{

padding:70px 20px;

}


.website-service .section-title h2{

font-size:28px;

}


.website-box{

padding:35px 20px;

border-radius:25px;

}


.website-box i{

font-size:60px;

}


.website-box h3{

font-size:24px;

}


.website-box p{

font-size:15px;

}


.website-btn{

width:100%;

justify-content:center;

font-size:15px;

padding:15px;

}


}


.hero-title{
    font-size:70px;
    font-weight:800;
    text-transform:uppercase;
    letter-spacing:3px;

    background:linear-gradient(
        90deg,
        #FFD700,
        #ffffff,
        #ff6b6b,
        #00e5ff,
        #7CFC00,
        #FFD700
    );

    background-size:400% auto;

    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;
    background-clip:text;

    animation:
        colorMove 8s linear infinite,
        slideText 3s ease-in-out infinite;
}

/* Color Animation */
@keyframes colorMove{
    0%{
        background-position:0% center;
    }
    100%{
        background-position:400% center;
    }
}

/* Slide Animation */
@keyframes slideText{
    0%{
        transform:translateX(-60px);
        opacity:0;
    }

    20%{
        transform:translateX(0);
        opacity:1;
    }

    80%{
        transform:translateX(0);
        opacity:1;
    }

    100%{
        transform:translateX(60px);
        opacity:0;
    }
}





/* ===========================
   PREMIUM ABOUT SECTION
=========================== */

.about{
    padding:100px 8%;
    background:linear-gradient(135deg,#0f172a,#111827,#1e293b);
    color:#fff;
    overflow:hidden;
    position:relative;
}

.about::before{
    content:"";
    position:absolute;
    width:350px;
    height:350px;
    background:rgba(255,215,0,.15);
    border-radius:50%;
    top:-120px;
    left:-120px;
    filter:blur(90px);
    animation:blob1 8s ease-in-out infinite;
}

.about::after{
    content:"";
    position:absolute;
    width:300px;
    height:300px;
    background:rgba(0,255,255,.12);
    border-radius:50%;
    bottom:-100px;
    right:-100px;
    filter:blur(90px);
    animation:blob2 10s ease-in-out infinite;
}

.about-container{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:60px;
    align-items:center;
    position:relative;
    z-index:2;
}

/* Image */

.about-image{
    position:relative;
    animation:slideLeft 1.5s ease;
}

.about-image img{
    width:100%;
    border-radius:25px;
    transition:.6s;
    box-shadow:0 25px 60px rgba(0,0,0,.4);
}

.about-image:hover img{
    transform:scale(1.05) rotate(-1deg);
}

/* Experience Box */

.experience{
    position:absolute;
    bottom:-20px;
    right:-20px;
    background:linear-gradient(45deg,#FFD700,#ff9800);
    padding:25px;
    border-radius:18px;
    text-align:center;
    color:#111;
    animation:floatBox 3s ease-in-out infinite;
    box-shadow:0 15px 35px rgba(255,215,0,.35);
}

.experience h2{
    font-size:48px;
    font-weight:800;
}

.experience p{
    font-weight:600;
}

/* Content */

.about-content{
    animation:slideRight 1.5s ease;
}

.about-content h5{
    color:#FFD700;
    font-size:18px;
    letter-spacing:4px;
    text-transform:uppercase;
    margin-bottom:15px;
}

.about-content h2{
    font-size:46px;
    line-height:1.3;

    background:linear-gradient(
    90deg,
    #FFD700,
    #ffffff,
    #00E5FF,
    #FFD700);

    background-size:300%;

    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;

    animation:textGradient 6s linear infinite;
}

.about-content p{
    color:#ddd;
    line-height:1.9;
    margin:25px 0;
    font-size:17px;
}

/* Features */

.about-features{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:20px;
    margin:35px 0;
}

.feature{
    display:flex;
    align-items:center;
    gap:12px;
    background:rgba(255,255,255,.08);
    padding:16px 20px;
    border-radius:15px;
    transition:.4s;
    backdrop-filter:blur(10px);
}

.feature i{
    color:#FFD700;
    font-size:24px;
}

.feature:hover{
    transform:translateY(-8px);
    background:linear-gradient(45deg,#FFD700,#ff9800);
    color:#111;
}

/* Button */

.about-btn{
    display:inline-block;
    padding:15px 40px;
    background:linear-gradient(45deg,#FFD700,#ff9800);
    color:#111;
    border-radius:50px;
    text-decoration:none;
    font-weight:700;
    transition:.4s;
    box-shadow:0 10px 30px rgba(255,215,0,.4);
}

.about-btn:hover{
    transform:translateY(-6px) scale(1.05);
    box-shadow:0 15px 40px rgba(255,215,0,.6);
}

/* Animations */

@keyframes textGradient{
    0%{background-position:0%;}
    100%{background-position:300%;}
}

@keyframes floatBox{
    0%,100%{transform:translateY(0);}
    50%{transform:translateY(-12px);}
}

@keyframes slideLeft{
    from{
        opacity:0;
        transform:translateX(-80px);
    }
    to{
        opacity:1;
        transform:translateX(0);
    }
}

@keyframes slideRight{
    from{
        opacity:0;
        transform:translateX(80px);
    }
    to{
        opacity:1;
        transform:translateX(0);
    }
}

@keyframes blob1{
    0%,100%{
        transform:translate(0,0);
    }
    50%{
        transform:translate(60px,40px);
    }
}

@keyframes blob2{
    0%,100%{
        transform:translate(0,0);
    }
    50%{
        transform:translate(-50px,-30px);
    }
}

/* Responsive */

@media(max-width:991px){

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

.about-content h2{
    font-size:36px;
}

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

}

@media(max-width:576px){

.about{
    padding:70px 20px;
}

.about-content h2{
    font-size:28px;
}

.experience{
    padding:18px;
}

.experience h2{
    font-size:34px;
}

}


.about-image{
    overflow:visible;
}


.about-image::before{
    content:"";
    position:absolute;
    inset:-3px;
    border-radius:28px;
    background:linear-gradient(
        45deg,
        #FFD700,
        transparent,
        #00E5FF,
        transparent
    );
    z-index:-1;
    animation:imageGlow 6s linear infinite;
}


@keyframes imageGlow{

0%{
    transform:rotate(0deg);
}

100%{
    transform:rotate(360deg);
}

}



.about-image,
.about-content{
    opacity:0;
}


.about-image.show{
    animation:slideLeft 1s forwards;
}


.about-content.show{
    animation:slideRight 1s forwards;
}




.experience {
    position: relative;

    margin-top: 20px;

    width: 100%;

    padding: 18px 25px;

    background: #101820;

    color: #fff;

    text-align: center;

    border-left: 4px solid #d6aa45;

    border-radius: 5px;

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

.experience h2 {
    margin: 0;

    color: #d6aa45;

    font-size: 32px;

    line-height: 1;
}

.experience p {
    margin: 7px 0 0;

    color: #ffffff;

    font-size: 14px;
}





/* =========================================
   OFFICE LOCATIONS
========================================= */

.office-locations {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin: 30px 0 25px;
}

.office-card {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 20px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 15px;
    color: #fff;
    transition: 0.3s ease;
}

.office-card:hover {
    transform: translateY(-5px);
    border-color: #d4af37;
    box-shadow: 0 8px 25px rgba(212, 175, 55, 0.15);
}

.office-card i {
    width: 48px;
    height: 48px;
    min-width: 48px;
    display: flex;
    align-items: center;
    justify-content: center;

    font-size: 25px;
    color: #d4af37;

    border: 1px solid rgba(212, 175, 55, 0.5);
    border-radius: 50%;
}

.office-card h3 {
    margin: 0 0 5px;
    color: #fff;
    font-size: 17px;
    font-weight: 600;
}

.office-card p {
    margin: 0 0 3px;
    color: rgba(255, 255, 255, 0.8);
    font-size: 14px;
}

.office-card span {
    color: #d4af37;
    font-size: 12px;
}


/* =========================================
   OPEN TO WORK
========================================= */

.open-work {
    display: inline-flex;
    align-items: center;
    gap: 8px;

    padding: 11px 18px;
    margin: 5px 0 25px;

    border: 1px solid rgba(212, 175, 55, 0.5);
    border-radius: 30px;

    background: rgba(212, 175, 55, 0.08);
    color: #fff;
}

.open-work i {
    color: #35c759;
    font-size: 21px;
}

.open-work strong {
    color: #fff;
    font-size: 14px;
}


/* =========================================
   GOOGLE MAP
========================================= */

.map {
    width: 100%;
    overflow: hidden;
    border-radius: 15px;

    border: 1px solid rgba(255, 255, 255, 0.12);
}

.map iframe {
    width: 100%;
    height: 400px;
    display: block;
    border: 0;
}


/* =========================================
   LAPTOP / DESKTOP
========================================= */

@media (min-width: 1200px) {

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

    .office-card {
        padding: 22px;
    }

    .map iframe {
        height: 420px;
    }
}


/* =========================================
   TABLET
========================================= */

@media (min-width: 769px) and (max-width: 1199px) {

    .office-locations {
        grid-template-columns: repeat(2, 1fr);
        gap: 16px;
    }

    .office-card {
        padding: 18px;
    }

    .office-card h3 {
        font-size: 16px;
    }

    .office-card p {
        font-size: 13px;
    }

    .map iframe {
        height: 350px;
    }
}


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

@media (max-width: 768px) {

    .office-locations {
        grid-template-columns: 1fr;
        gap: 14px;
        margin: 25px 0 20px;
    }

    .office-card {
        padding: 16px;
        gap: 13px;
    }

    .office-card i {
        width: 43px;
        height: 43px;
        min-width: 43px;
        font-size: 22px;
    }

    .office-card h3 {
        font-size: 16px;
    }

    .office-card p {
        font-size: 13px;
    }

    .office-card span {
        font-size: 11px;
    }

    .open-work {
        width: 100%;
        justify-content: center;
        box-sizing: border-box;
        margin-bottom: 20px;
        text-align: center;
    }

    .map iframe {
        height: 300px;
    }
}


/* =========================================
   SMALL MOBILE
========================================= */

@media (max-width: 480px) {

    .office-locations {
        gap: 12px;
    }

    .office-card {
        padding: 14px;
    }

    .office-card i {
        width: 40px;
        height: 40px;
        min-width: 40px;
        font-size: 20px;
    }

    .office-card h3 {
        font-size: 15px;
    }

    .office-card p {
        font-size: 12px;
    }

    .open-work {
        padding: 10px 14px;
    }

    .open-work strong {
        font-size: 12px;
    }

    .map iframe {
        height: 260px;
    }
}




/* ===== WEBSITE SERVICE OVERRIDE ===== */

.website-service {
    padding: 30px 15px !important;
}

.website-service .section-title {
    margin-bottom: 18px !important;
}

.website-service .section-title h5 {
    margin-bottom: 5px !important;
    font-size: 12px !important;
}

.website-service .section-title h2 {
    font-size: 25px !important;
    margin-bottom: 6px !important;
}

.website-service .section-title p {
    font-size: 13px !important;
    line-height: 1.4 !important;
}

.website-box {
    max-width: 400px !important;
    padding: 20px 18px !important;
    margin: 0 auto !important;
}

.website-box > i {
    font-size: 35px !important;
    margin-bottom: 6px !important;
}

.website-box h3 {
    font-size: 18px !important;
    margin-bottom: 8px !important;
}

.website-box p {
    font-size: 13px !important;
    line-height: 1.5 !important;
    margin-bottom: 14px !important;
}

.website-btn {
    padding: 9px 15px !important;
    font-size: 13px !important;
}


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

@media (max-width: 600px) {

    .website-service {
        padding: 22px 12px !important;
    }

    .website-service .section-title {
        margin-bottom: 14px !important;
    }

    .website-service .section-title h2 {
        font-size: 22px !important;
    }

    .website-service .section-title p {
        font-size: 12px !important;
    }

    .website-box {
        padding: 16px 14px !important;
        border-radius: 12px !important;
    }

    .website-box > i {
        font-size: 32px !important;
    }

    .website-box h3 {
        font-size: 17px !important;
    }

    .website-box p {
        font-size: 12px !important;
        line-height: 1.45 !important;
    }

    .website-btn {
        padding: 8px 13px !important;
        font-size: 12px !important;
    }
}