/* ==========================
   ARS SOLUTIONS STYLE.CSS
========================== */

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

body{

font-family:'Poppins',sans-serif;

background:#f8fbff;

color:#1e293b;

overflow-x:hidden;

line-height:1.7;

}


/* NAVBAR */

.navbar{

position:fixed;

top:0;

width:100%;

padding:20px 7%;

display:flex;

justify-content:space-between;

align-items:center;

background:rgba(255,255,255,0.92);

backdrop-filter:blur(18px);

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

z-index:1000;

}


.logo{

font-size:28px;

font-weight:700;

letter-spacing:1px;

color:#0F3D91;

}


.nav-links{

display:flex;

gap:35px;

list-style:none;

}


.nav-links a{

text-decoration:none;

font-weight:500;

color:#1e293b;

transition:.3s;

}


.nav-links a:hover{

color:#2563eb;

}


.menu-btn{

display:none;

font-size:25px;

cursor:pointer;

}



/* HERO */

.hero{

min-height:100vh;

display:flex;

justify-content:center;

align-items:center;

text-align:center;

padding:120px 10%;

background:

linear-gradient(135deg,#0F3D91,#2563eb);


color:white;

position:relative;

overflow:hidden;

}


.hero::before{

content:"";

position:absolute;

width:500px;

height:500px;

border-radius:50%;

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

top:-200px;

right:-150px;

}


.hero::after{

content:"";

position:absolute;

width:400px;

height:400px;

border-radius:50%;

background:rgba(255,255,255,.06);

bottom:-180px;

left:-150px;

}



.hero h1{

font-size:65px;

font-weight:700;

margin-bottom:20px;

}


.hero p{

font-size:22px;

opacity:.9;

margin-bottom:35px;

}


.hero-buttons{

display:flex;

justify-content:center;

gap:20px;

flex-wrap:wrap;

}



.btn-primary{

padding:14px 35px;

border-radius:40px;

background:white;

color:#0F3D91;

font-weight:600;

text-decoration:none;

transition:.3s;

}


.btn-primary:hover{

transform:translateY(-4px);

}


.btn-secondary{

padding:14px 35px;

border:2px solid white;

border-radius:40px;

text-decoration:none;

color:white;

transition:.3s;

}


.btn-secondary:hover{

background:white;

color:#0F3D91;

}



/* GENERAL */

section{

padding:110px 8%;

}


.container{

max-width:1200px;

margin:auto;

}


section h2{

font-size:42px;

text-align:center;

margin-bottom:50px;

color:#0F3D91;

}



/* ABOUT */

#about p{

max-width:900px;

margin:auto;

font-size:18px;

text-align:center;

}



/* SERVICES */

.cards{

display:grid;

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

gap:30px;

}


.card{

padding:40px;

background:white;

border-radius:25px;

text-align:center;

box-shadow:0 10px 40px rgba(0,0,0,.05);

transition:.4s;

}


.card:hover{

transform:translateY(-10px);

}


.card i{

font-size:42px;

margin-bottom:20px;

color:#2563eb;

}


.card h3{

margin-bottom:15px;

font-size:24px;

}



/* WHY US */

.why-list{

display:grid;

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

gap:20px;

list-style:none;

}


.why-list li{

padding:20px;

background:white;

border-radius:18px;

box-shadow:0 5px 25px rgba(0,0,0,.05);

}



/* FOUNDER */

.founder-box{

background:white;

padding:60px;

border-radius:25px;

box-shadow:0 8px 35px rgba(0,0,0,.05);

text-align:center;

}


.founder-box h3{

margin-top:30px;

font-size:28px;

color:#0F3D91;

}



/* TESTIMONIALS */

.testimonial{

display:none;

text-align:center;

}


.testimonial.active{

display:block;

}


.testimonial p{

font-size:22px;

font-style:italic;

margin-bottom:25px;

}


.testimonial h4{

font-size:20px;

color:#2563eb;

}



/* CONTACT */

form{

display:flex;

flex-direction:column;

gap:20px;

max-width:700px;

margin:auto;

}


input,textarea{

padding:18px;

border:none;

border-radius:12px;

background:white;

box-shadow:0 5px 20px rgba(0,0,0,.05);

font-size:16px;

}


textarea{

height:160px;

resize:none;

}


button{

padding:16px;

border:none;

background:#0F3D91;

color:white;

font-size:17px;

border-radius:12px;

cursor:pointer;

}


.contact-details{

margin-top:40px;

text-align:center;

}


.contact-details p{

margin:12px 0;

}



/* WHATSAPP */

.whatsapp{

position:fixed;

bottom:30px;

right:30px;

width:60px;

height:60px;

background:#25D366;

border-radius:50%;

display:flex;

justify-content:center;

align-items:center;

font-size:28px;

color:white;

text-decoration:none;

box-shadow:0 8px 25px rgba(0,0,0,.2);

z-index:999;

}



/* FOOTER */

footer{

padding:30px;

text-align:center;

background:#0F3D91;

color:white;

}



/* MOBILE */

@media(max-width:768px){

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

.hero p{
font-size:18px;
}

.nav-links{
display:none;
}

.menu-btn{
display:block;
}

.why-list{
grid-template-columns:1fr;
}

.founder-box{
padding:35px;
}

}


/* Mobile Menu Popup */

.nav-links.show{

display:flex;

flex-direction:column;

position:absolute;

top:80px;

right:20px;

background:white;

padding:20px;

border-radius:15px;

box-shadow:0 5px 20px rgba(0,0,0,.1);

}

.logo{
    display:flex;
    align-items:center;
    gap:12px;
}

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

.logo span{
    font-size:24px;
    font-weight:700;
    color:#0B3D91;
}