/* ==========================================
   UTHMAN ALHADITHAH COMPANY LTD.
   Premium Landing Page Styles
========================================== */

:root{
    --primary:#0056d2;
    --secondary:#0b1f3a;
    --accent:#25d366;
    --light:#f7f9fc;
    --dark:#1f2937;
    --white:#ffffff;
}

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

html{
    scroll-behavior:smooth;
}

body{
    font-family:'Poppins',sans-serif;
    color:var(--dark);
    background:#fff;
    line-height:1.7;
}

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

.navbar{
    padding:15px 0;
    transition:.3s;
}

.navbar-brand{
    font-size:28px;
    font-weight:700;
    color:var(--primary)!important;
}

.nav-link{
    color:#333!important;
    font-weight:500;
    margin-left:15px;
}

.nav-link:hover{
    color:var(--primary)!important;
}

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

.hero{
    min-height:50vh;
    display:flex;
    align-items:center;
    background:linear-gradient(
    135deg,
    rgba(0,86,210,.95),
    rgba(11,31,58,.95)),
    url(images/hero-bg.jpg);

    background-size:cover;
    background-position:center;

    color:#fff;
}

.hero h1{
    font-size:58px;
    font-weight:700;
    line-height:1.2;
}

.hero p{
    margin:25px 0;
    font-size:18px;
    opacity:.95;
}

.hero img{
    max-width:100%;
}

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

.btn-primary{

background:var(--primary);
border:none;
padding:14px 35px;
border-radius:50px;

}

.btn-primary:hover{

background:#0040a5;

}

.btn-success{

background:var(--accent);
border:none;
padding:14px 35px;
border-radius:50px;

}

/*================ SECTIONS ================*/

section{

padding:100px 0;

}

section h2{

font-size:42px;
font-weight:700;
margin-bottom:20px;
color:var(--secondary);

}

section p{

font-size:17px;

}

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

#about img{

border-radius:20px;

box-shadow:0 20px 50px rgba(0,0,0,.15);

}

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

.service-card{

background:#fff;

padding:40px 30px;

border-radius:20px;

text-align:center;

transition:.35s;

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

height:100%;

}

.service-card:hover{

transform:translateY(-12px);

}

.service-card i{

color:var(--primary);

margin-bottom:20px;

}

.service-card h4{

margin-top:15px;

font-weight:600;

}

/*================ PROJECTS ================*/

#projects{
  padding: 100px 0;
}
 
#projects h2{
  font-weight: 700;
  letter-spacing: -0.5px;
  margin-bottom: 10px;
  color: #14171f;
}
 
#projects .section-sub{
  text-align:center;
  color:#6b7280;
  max-width:520px;
  margin:0 auto 50px;
  font-size:1rem;
}
 
#projects .project-card{
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(15,15,20,0.08);
  transition: transform .45s cubic-bezier(.2,.8,.2,1), box-shadow .45s ease;
  margin-bottom: 30px;
  background:#000;
}
 
#projects .project-card:hover{
  transform: translateY(-8px);
  box-shadow: 0 25px 50px rgba(15,15,20,0.18);
}
 
#projects .project-card .img-wrap{
  width:100%;
  height: 260px;
  overflow:hidden;
}
 
#projects .project-card img{
  width:100%;
  height:100%;
  object-fit: cover;
  display:block;
  transition: transform .6s ease;
}
 
#projects .project-card:hover img{
  transform: scale(1.08);
}
 
#projects .project-card .overlay{
  position:absolute;
  inset:0;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  padding: 22px;
  background: linear-gradient(to top, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.35) 55%, rgba(0,0,0,0) 100%);
  opacity: 0;
  transform: translateY(10px);
  transition: opacity .4s ease, transform .4s ease;
}
 
#projects .project-card:hover .overlay{
  opacity:1;
  transform: translateY(0);
}
 
#projects .project-card .tag{
  color:#c9cdd6;
  font-size:.75rem;
  text-transform:uppercase;
  letter-spacing:1px;
  margin-bottom:4px;
}
 
#projects .project-card .title{
  color:#fff;
  font-size:1.15rem;
  font-weight:600;
  margin-bottom:8px;
}
 
#projects .project-card .view-link{
  color:#fff;
  font-size:.9rem;
  text-decoration:none;
  display:inline-flex;
  align-items:center;
  gap:6px;
  width:fit-content;
  border-bottom:1px solid rgba(255,255,255,0.4);
  padding-bottom:2px;
  transition: gap .3s ease, border-color .3s ease;
}
 
#projects .project-card .view-link:hover{
  gap:10px;
  border-color:#fff;
  color:#fff;

  transform:scale(1.05);
}



/*================ FAQ ================*/

.accordion-item{

border:none;

margin-bottom:15px;

border-radius:15px!important;

overflow:hidden;

box-shadow:0 8px 20px rgba(0,0,0,.08);

}

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

form{

background:#fff;

padding:35px;

border-radius:20px;

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

}

.form-control{

height:55px;

border-radius:10px;

}

textarea.form-control{

height:160px;

resize:none;

}

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

footer{

background:var(--secondary);

}

footer h4{

font-weight:700;

}

footer p{

opacity:.8;

}

/*================ FLOATING WHATSAPP ================*/

.whatsapp{

position:fixed;

bottom:25px;

right:25px;

width:65px;

height:65px;

background:#25D366;

border-radius:50%;

display:flex;

align-items:center;

justify-content:center;

font-size:30px;

color:#fff;

text-decoration:none;

box-shadow:0 10px 30px rgba(0,0,0,.25);

z-index:999;

transition:.3s;

}

.whatsapp:hover{

transform:scale(1.1);

color:#fff;

}

/*================ BACK TO TOP ================*/

.top-btn{

position:fixed;

left:25px;

bottom:25px;

width:55px;

height:55px;

background:var(--primary);

color:#fff;

display:flex;

align-items:center;

justify-content:center;

border-radius:50%;

text-decoration:none;

font-size:20px;

opacity:0;

visibility:hidden;

transition:.3s;

}

.top-btn.active{

opacity:1;

visibility:visible;

}

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

.service-card,
img,
.btn{

transition:.35s ease;

}

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

@media(max-width:991px){

.hero{

text-align:center;

padding-top:120px;

}

.hero h1{

font-size:40px;

}

.hero img{

margin-top:50px;

}

section{

padding:80px 0;

}

}

@media(max-width:576px){

.hero h1{

font-size:32px;

}

section h2{

font-size:30px;

}

.btn{

display:block;

width:100%;

margin-bottom:15px;

}

.navbar-brand{

font-size:22px;

}

}
/*==================== STATS ====================*/

#stats{

color:#fff;

}

#stats h1{

font-size:60px;

font-weight:700;

margin-bottom:10px;

}

#stats p{

font-size:18px;

}

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

.bg-primary{

background:linear-gradient(135deg,#0056d2,#0b1f3a)!important;

}

.rounded-4{

border-radius:25px!important;

}
/*==================== TESTIMONIALS ====================*/

.testimonial-card{

background:#fff;

padding:35px;

border-radius:20px;

box-shadow:0 15px 35px rgba(0,0,0,.08);

transition:.3s;

height:100%;

}

.testimonial-card:hover{

transform:translateY(-10px);

}

.stars{

color:#FFD700;

font-size:22px;

margin-bottom:20px;

}

.testimonial-card h5{

margin-top:20px;

font-weight:600;

}

.testimonial-card span{

color:#777;

font-size:14px;

}

/*==================== FAQ ====================*/

.accordion-button{

font-weight:600;

}

.accordion-button:not(.collapsed){

background:#0056d2;

color:#fff;

}

.accordion-button:focus{

box-shadow:none;

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

.contact-item{

font-size:17px;

line-height:1.8;

}

.contact-item a{

text-decoration:none;

color:#0056d2;

}

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

.footer{

background:#071c35;

color:#fff;

padding:70px 0 20px;

}

.footer h3,
.footer h4{

margin-bottom:20px;

font-weight:600;

}

.footer a{

color:#ddd;

text-decoration:none;

}

.footer a:hover{

color:#25D366;

}

.footer hr{

border-color:rgba(255,255,255,.2);

}