/* =========================
   GOOGLE FONT
========================= */

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800&display=swap');

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

html{
scroll-behavior:smooth;
}

body{
background:#050505;
color:#fff;
overflow-x:hidden;
}

body{
    font-family:'Poppins',sans-serif;
    background:#000;
}

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

a{
text-decoration:none;
}

ul{
list-style:none;
}

.container{
width:90%;
max-width:1400px;
margin:auto;
}

/* =========================
   COLORS
========================= */

:root{

--gold:#f4b731;
--gold-light:#ffd76a;
--dark:#050505;
--card:#0b0b0b;
--border:#262626;
--white:#ffffff;

}

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

.header{

position:fixed;
top:0;
left:0;
width:100%;
z-index:999;
background:rgba(0,0,0,.95);
backdrop-filter:blur(10px);
border-bottom:1px solid rgba(255,183,49,.15);

}

.nav-container{

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

}

.logo img{
height:60px;
}

.navbar ul{

display:flex;
gap:35px;

}

.navbar a{

color:#fff;
font-size:15px;
font-weight:500;
transition:.3s;

}

.navbar a:hover{

color:var(--gold);

}

.btn-talk{

padding:12px 26px;
border:1px solid var(--gold);
border-radius:10px;
color:var(--gold);
font-weight:600;
transition:.3s;

}

.btn-talk:hover{

background:var(--gold);
color:#000;

}

.menu-btn{

display:none;
font-size:28px;
cursor:pointer;

}

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

.hero{

   position:relative;
   overflow:hidden;
   
   }
   
   .hero::before{
   
   content:"";
   
   position:absolute;
   
   width:500px;
   height:500px;
   
   background:
   rgba(244,183,49,.15);
   
   filter:blur(120px);
   
   top:-150px;
   right:-150px;
   
   border-radius:50%;
   
   }
   
   .hero::after{
   
   content:"";
   
   position:absolute;
   
   width:400px;
   height:400px;
   
   background:
   rgba(244,183,49,.08);
   
   filter:blur(100px);
   
   bottom:-100px;
   left:-100px;
   
   border-radius:50%;
   
   }

   
.hero{

padding-top:150px;
padding-bottom:80px;

}

.hero-grid{

display:grid;
grid-template-columns:1fr 1fr;
align-items:center;
gap:50px;

}

.tag{

color:var(--gold);
letter-spacing:2px;
font-size:14px;
font-weight:600;

}

.hero-content h1{

font-size:72px;
line-height:1.1;
margin-top:20px;
margin-bottom:25px;

}

.hero-content h1 span{

display:block;
color:var(--gold);

}

.hero-content p{

font-size:20px;
line-height:1.8;
color:#cfcfcf;
max-width:650px;

}

.hero-buttons{

display:flex;
gap:20px;
margin-top:35px;

}

.btn-primary{

background:var(--gold);
color:#000;
padding:15px 35px;
border-radius:12px;
font-weight:700;
transition:.3s;

}

.btn-primary:hover{

transform:translateY(-3px);

}

.btn-secondary{

border:1px solid var(--gold);
padding:15px 35px;
border-radius:12px;
color:#fff;

}

.btn-secondary:hover{

background:var(--gold);
color:#000;

}

.hero-image{

position:relative;

}

.hero-image img{

width:100%;
border-radius:20px;

}

.hero-image::before{

content:'';
position:absolute;
inset:0;
background:radial-gradient(circle,
rgba(255,183,49,.25),
transparent 70%);
z-index:-1;

}

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

.features{

display:flex;
gap:35px;
margin-top:40px;
flex-wrap:wrap;

}

.features div{

display:flex;
align-items:center;
gap:10px;
color:#fff;

}

.features i{

color:var(--gold);

}

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

.section-title{

text-align:center;
margin-bottom:50px;
font-size:40px;
font-weight:700;
color:var(--gold);
letter-spacing:2px;

}

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

.services{

padding:90px 0;

}

.service-grid{

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

}

.card{

   background:
   rgba(255,255,255,.03);
   
   backdrop-filter:
   blur(15px);
   
   border:
   1px solid rgba(255,255,255,.08);
   
   padding:35px 25px;
   
   border-radius:20px;
   
   transition:.4s;
   
   }

.card:hover{

transform:translateY(-10px);
border-color:var(--gold);

}

.card i{

font-size:45px;
color:var(--gold);

}

.card h3{

margin-top:20px;
margin-bottom:15px;

}

.card p{

color:#bcbcbc;
font-size:15px;
line-height:1.7;

}

.card a{

display:inline-block;
margin-top:20px;
color:var(--gold);

}

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

.about{

padding:100px 0;

}

.about-grid{

display:grid;
grid-template-columns:1fr 1fr;
gap:60px;
align-items:center;

}

.about h4{

color:var(--gold);
margin-bottom:15px;

}

.about h2{

font-size:48px;
margin-bottom:20px;

}

.about p{

color:#cfcfcf;
line-height:1.8;
margin-bottom:25px;

}

.stats{

display:grid;
grid-template-columns:repeat(4,1fr);
gap:20px;

}

.stats div{

text-align:center;
background:#0d0d0d;
border:1px solid #222;
padding:30px;
border-radius:15px;

}

.stats h3{

font-size:40px;
color:var(--gold);

}

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

.portfolio{

padding:100px 0;

}

.portfolio-filter{

display:flex;
justify-content:center;
gap:15px;
flex-wrap:wrap;
margin-bottom:40px;

}

.portfolio-filter button{

background:transparent;
border:1px solid #333;
color:#fff;
padding:12px 22px;
border-radius:30px;
cursor:pointer;

}

.portfolio-filter button.active{

background:var(--gold);
color:#000;
border:none;

}

.portfolio-grid{

display:grid;
grid-template-columns:repeat(5,1fr);
gap:20px;

}

.portfolio-item{

overflow:hidden;
border-radius:15px;

}

.portfolio-item img{

width:100%;
height:250px;
object-fit:cover;
transition:.5s;

}

.portfolio-item:hover img{

transform:scale(1.1);

}





/* Responsive */

/* =========================
TESTIMONIAL
========================= */

.testimonial{

   padding:100px 0;
   
   }
   
   .testimonial-box{
   
   background:#0b0b0b;
   border:1px solid #252525;
   border-radius:20px;
   padding:50px;
   display:flex;
   justify-content:space-between;
   align-items:center;
   gap:30px;
   
   }
   
   .testimonial-box p{
   
   font-size:22px;
   line-height:1.8;
   max-width:800px;
   color:#fff;
   
   }
   
   .client{
   
   display:flex;
   align-items:center;
   gap:15px;
   
   }
   
   .client img{
   
   width:80px;
   height:80px;
   border-radius:50%;
   object-fit:cover;
   border:3px solid var(--gold);
   
   }
   
   .client h4{
   
   font-size:20px;
   margin-bottom:5px;
   
   }
   
   .client span{
   
   color:#ccc;
   
   }
   
   /* =========================
   CTA SECTION
   ========================= */
   
   .cta{
   
   padding:70px 0;
   background:linear-gradient(
   90deg,
   #111,
   #0a0a0a,
   #111
   );
   
   border-top:1px solid rgba(255,183,49,.2);
   border-bottom:1px solid rgba(255,183,49,.2);
   
   }
   
   .cta-grid{
   
   display:flex;
   justify-content:space-between;
   align-items:center;
   gap:30px;
   
   }
   
   .cta h2{
   
   font-size:48px;
   max-width:800px;
   
   }
   
   /* =========================
   FOOTER
   ========================= */
   
   footer{
   
   background:#000;
   
   }
   
   .footer-grid{
   
   display:grid;
   grid-template-columns:
   2fr
   1fr
   1fr
   2fr
   1fr;
   
   gap:30px;
   align-items:center;
   
   }
   
   .footer-grid img{
   
   height:70px;
   
   }
   
   .footer-grid div{
   
   color:#ddd;
   
   }
   
   /* =========================
   GOLD GLOW EFFECT
   ========================= */
   
   .card,
   .stats div,
   .portfolio-item,
   .testimonial-box{
   
   box-shadow:
   0 0 0 rgba(255,183,49,0);
   
   transition:.4s;
   
   }
   
   .card:hover,
   .stats div:hover,
   .portfolio-item:hover{
   
   box-shadow:
   0 0 25px rgba(255,183,49,.18);
   
   }
   
   /* =========================
   SCROLLBAR
   ========================= */
   
   ::-webkit-scrollbar{
   
   width:10px;
   
   }
   
   ::-webkit-scrollbar-track{
   
   background:#0b0b0b;
   
   }
   
   ::-webkit-scrollbar-thumb{
   
   background:var(--gold);
   border-radius:50px;
   
   }
   
   /* =========================
   TABLET RESPONSIVE
   ========================= */
   
   @media(max-width:1200px){
   
   .hero-content h1{
   
   font-size:55px;
   
   }
   
   .service-grid{
   
   grid-template-columns:
   repeat(3,1fr);
   
   }
   
   .portfolio-grid{
   
   grid-template-columns:
   repeat(3,1fr);
   
   }
   
   .footer-grid{
   
   grid-template-columns:
   repeat(2,1fr);
   
   }
   
   }

   .pricing-grid{

      grid-template-columns:
      repeat(2,1fr);
      
      }
   
   /* =========================
   TABLET
   ========================= */
   
   @media(max-width:992px){
   
   .hero-grid{
   
   grid-template-columns:1fr;
   
   }
   
   .hero-content{
   
   order:2;
   text-align:center;
   
   }
   
   .hero-image{
   
   order:1;
   
   }
   
   .hero-buttons{
   
   justify-content:center;
   
   }
   
   .features{
   
   justify-content:center;
   
   }
   
   .about-grid{
   
   grid-template-columns:1fr;
   
   }
   
   .stats{
   
   grid-template-columns:
   repeat(2,1fr);
   
   }
   
   .service-grid{
   
   grid-template-columns:
   repeat(2,1fr);
   
   }
   
   .portfolio-grid{
   
   grid-template-columns:
   repeat(2,1fr);
   
   }
   
   .cta-grid{
   
   flex-direction:column;
   text-align:center;
   
   }
   
   .testimonial-box{
   
   flex-direction:column;
   text-align:center;
   
   }
   
   }
   
   /* =========================
   MOBILE MENU
   ========================= */
   

   .pricing-grid{

      grid-template-columns:1fr;
      
      }

   @media(max-width:768px){
   
   .menu-btn{
   
   display:block;
   
   }
   
   .navbar{
   
   position:absolute;
   top:100%;
   left:-100%;
   width:100%;
   background:#050505;
   padding:30px;
   transition:.4s;
   
   }
   
   .navbar.active{
   
   left:0;
   
   }
   
   .navbar ul{
   
   flex-direction:column;
   gap:25px;
   
   }
   
   .btn-talk{
   
   display:none;
   
   }
   
   .hero{
   
   padding-top:120px;
   
   }
   
   .hero-content h1{
   
   font-size:42px;
   
   }
   
   .hero-content p{
   
   font-size:16px;
   
   }
   
   .section-title{
   
   font-size:30px;
   
   }
   
   .about h2{
   
   font-size:35px;
   
   }
   
   .cta h2{
   
   font-size:32px;
   
   }
   
   .service-grid{
   
   grid-template-columns:1fr;
   
   }
   
   .portfolio-grid{
   
   grid-template-columns:1fr;
   
   }
   
   .footer-grid{
   
   grid-template-columns:1fr;
   text-align:center;
   
   }
   
   .stats{
   
   grid-template-columns:1fr;
   
   }
   
   }
   
   /* =========================
   SMALL MOBILE
   ========================= */
   
   @media(max-width:480px){
   
   .hero-content h1{
   
   font-size:34px;
   
   }
   
   .btn-primary,
   .btn-secondary{
   
   width:100%;
   text-align:center;
   
   }
   
   .hero-buttons{
   
   flex-direction:column;
   
   }
   
   .features{
   
   flex-direction:column;
   align-items:center;
   
   }
   
   .cta h2{
   
   font-size:26px;
   
   }
   
   }

   .header.scrolled{

      background:#000;
      
      box-shadow:
      0 5px 30px
      rgba(244,183,49,.15);
      
      }

      #topBtn{

         position:fixed;
         
         right:25px;
         bottom:25px;
         
         width:55px;
         height:55px;
         
         border:none;
         
         border-radius:50%;
         
         background:#f4b731;
         
         color:#000;
         
         font-size:20px;
         
         cursor:pointer;
         
         display:none;
         
         z-index:999;
         
         }



         .whatsapp-btn{

            position:fixed;
            
            left:25px;
            bottom:25px;
            
            width:60px;
            height:60px;
            
            display:flex;
            align-items:center;
            justify-content:center;
            
            background:#25d366;
            
            color:#fff;
            
            font-size:30px;
            
            border-radius:50%;
            
            z-index:999;
            
            box-shadow:
            0 0 20px rgba(37,211,102,.5);
            
            animation:
            pulse 2s infinite;
            
            }
            
            @keyframes pulse{
            
            0%{
            
            transform:scale(1);
            
            }
            
            50%{
            
            transform:scale(1.1);
            
            }
            
            100%{
            
            transform:scale(1);
            
            }
            
            }



            #loader{

               position:fixed;
               inset:0;
               
               background:#000;
               
               display:flex;
               justify-content:center;
               align-items:center;
               
               z-index:99999;
               
               }
               
               .loader-circle{
               
               width:80px;
               height:80px;
               
               border:6px solid #222;
               
               border-top:6px solid #f4b731;
               
               border-radius:50%;
               
               animation:
               spin 1s linear infinite;
               
               }
               
               @keyframes spin{
               
               100%{
               
               transform:rotate(360deg);
               
               }
               
               }


               .contact{

                  padding:100px 0;
                  
                  }
                  
                  .contact-form{
                  
                  max-width:800px;
                  
                  margin:auto;
                  
                  display:flex;
                  flex-direction:column;
                  
                  gap:20px;
                  
                  }
                  
                  .contact-form input,
                  .contact-form textarea{
                  
                  background:#0c0c0c;
                  
                  border:1px solid #222;
                  
                  padding:18px;
                  
                  color:#fff;
                  
                  border-radius:10px;
                  
                  outline:none;
                  
                  }
                  
                  .contact-form textarea{
                  
                  height:180px;
                  
                  resize:none;
                  
                  }


                  .cursor-glow{

                     position:fixed;
                     
                     width:300px;
                     height:300px;
                     
                     background:
                     radial-gradient(
                     circle,
                     rgba(244,183,49,.12),
                     transparent 70%
                     );
                     
                     pointer-events:none;
                     
                     z-index:-1;
                     
                     transform:
                     translate(-50%,-50%);
                     
                     }

                     .footer-top{

                        text-align:center;
                        margin-bottom:30px;
                        
                        }
                        
                        .footer-top img{
                        
                        height:80px;
                        margin:auto;
                        
                        }
                        
                        .footer-bottom{
                        
                        display:flex;
                        
                        justify-content:space-between;
                        
                        flex-wrap:wrap;
                        
                        gap:20px;
                        
                        text-align:center;
                        
                        color:#bbb;
                        
                        }


                        .faq{

                           padding:100px 0;
                           
                           }
                           
                           .faq-item{
                           
                           background:#0d0d0d;
                           
                           border:1px solid #222;
                           
                           padding:25px;
                           
                           margin-bottom:20px;
                           
                           border-radius:15px;
                           
                           }
                           
                           .faq-item h3{
                           
                           margin-bottom:10px;
                           
                           color:#f4b731;
                           
                           }



                           .pricing{

                              padding:100px 0;
                              
                              }
                              
                              .pricing-grid{
                              
                              display:grid;
                              grid-template-columns:
                              repeat(3,1fr);
                              
                              gap:25px;
                              
                              }
                              
                              .price-card{
                              
                              background:#0c0c0c;
                              
                              border:1px solid #222;
                              
                              padding:40px;
                              
                              border-radius:20px;
                              
                              text-align:center;
                              
                              transition:.4s;
                              
                              }
                              
                              .price-card:hover{
                              
                              transform:
                              translateY(-10px);
                              
                              border-color:#f4b731;
                              
                              }
                              
                              .price-card h2{
                              
                              font-size:45px;
                              
                              margin:20px 0;
                              
                              color:#f4b731;
                              
                              }
                              
                              .price-card p{
                              
                              margin-bottom:10px;
                              
                              }




               /* CTA SECTION */

.cta-section{
    background:#000;
    padding:35px 0;
    border-top:1px solid #222;
}

.cta-container{
    width:90%;
    max-width:1400px;
    margin:auto;

    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:30px;
}

.cta-left{
    display:flex;
    align-items:center;
    gap:20px;
}

.cta-left img{
    width:130px;
}

.cta-left h2{
    color:#f8c441;
    font-size:42px;
    font-weight:700;
    margin-bottom:8px;
}

.cta-left p{
    color:#bbb;
}

.cta-btn{
    background:#f8c441;
    color:#000;
    text-decoration:none;
    padding:18px 40px;
    border-radius:12px;
    font-weight:700;
    transition:.3s;
}

.cta-btn:hover{
    transform:translateY(-3px);
}

/* FOOTER */

.footer{
    background:#000;
    border-top:1px solid #222;
}

.footer-container{
    width:90%;
    max-width:1400px;
    margin:auto;
    padding:30px 0;

    display:flex;
    justify-content:space-between;
    /* align-items:center; */
    gap:40px;
}

.footer-logo img{
    width:220px;
}

.footer-logo p{
    color:#999;
    margin-top:10px;
}

.footer-info{
    /* display:flex; */
    gap:50px;
    flex-wrap:wrap;
}

.info-item{
    display:flex;
    gap:12px;
    align-items:center;
    color:#fff;
}

.info-item span{
    color:#f8c441;
    font-size:22px;
}

.footer-social h4{
    color:#fff;
    margin-bottom:15px;
    text-align:center;
}

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

.social-icons a{
    width:45px;
    height:45px;
    border-radius:50%;
    background:#111;
    color:#f8c441;

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

    font-size:20px;
    text-decoration:none;
    transition:.3s;
}

.social-icons a:hover{
    background:#f8c441;
    color:#000;
}

.copyright{
    border-top:1px solid #222;
    text-align:center;
    color:#999;
    padding:18px;
    font-size:14px;
}




.footer-services h3{
    color:#fff;
    font-size:28px;
    font-weight:700;
    margin-bottom:20px;
    position:relative;
}

.footer-services h3::after{
    content:'';
    width:60px;
    height:3px;
    background:#f8c441;
    position:absolute;
    left:0;
    bottom:-8px;
}

.footer-services ul{
    margin-top:25px;
    padding-left:18px;
}

.footer-services ul li{
    color:#d1d1d1;
    margin-bottom:10px;
    line-height:1.7;
    transition:.3s;
}

.footer-services ul li:hover{
    color:#f8c441;
    padding-left:5px;
}




.footer-services-wrapper{
    /* width:100%; */
}

.service-title{
    color:#fff;
    font-size:28px;
    font-weight:700;
    margin-bottom:25px;
    text-align:center;
    position:relative;
}

.service-title::after{
    content:'';
    width:60px;
    height:3px;
    background:#f8c441;
    position:absolute;
    left:50%;
    transform:translateX(-50%);
    bottom:-10px;
}

.services-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:40px;
}

.services-grid ul{
    list-style:none;
    padding:0;
    margin:0;
}

.services-grid ul li{
    color:#d6d6d6;
    margin-bottom:14px;
    transition:.3s;
}

.services-grid ul li:hover{
    color:#f8c441;
    padding-left:5px;
}



.contact-title {
    color: #fff;
    font-size: 28px;
    font-weight: 700;
    margin-bottom: 25px;
    text-align: center;
    position: relative;
}
.contact-title::after {
    content: '';
    width: 60px;
    height: 3px;
    background: #f8c441;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: -10px;
}
.info-item {
    color: #d6d6d6;
    margin-bottom: 14px;
    transition: .3s;
}