/* Reset default browser styles */
html{
scroll-behavior:smooth;
}
*{
margin:0;
padding:0;
box-sizing:border-box;
font-family:Arial;
}

/* Background gradient like video */
body{
background:linear-gradient(180deg,#020617,#020617,#000814);
color:white;
}


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

.navbar{
display:flex;
justify-content:space-between;
align-items:center;
padding:100px 150px 100px 150px;
backdrop-filter: blur(10px);
position:sticky;
top:0;
z-index:1000;

background:linear-gradient(180deg,#020617,#020617,#000814);

border-bottom:1px solid #1e293b;
box-shadow:0 4px 12px rgba(0,0,0,0.4);
}

.logo{
font-size:30px;
color:#00e5ff;
}
.logo img{
height:500px;
width:40px;
display:block;
}

.menu{
display:none;
font-size:22px;
cursor:pointer;
}

.nav-links{
display:flex;
gap:30px;
list-style:none;
align-items:center;
}

.nav-links a{
text-decoration:none;
color:white;
font-size:16px;
transition:0.3s;
}

.nav-links a:hover{
color:#38bdf8;
}


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

.hero{
text-align:center;
padding:100px 20px;
max-width:900px;
margin:auto;
}

/* Small pill badge */
.badge{
display:inline-block;
background:#0f172a;
border:1px solid #1e293b;
padding:8px 16px;
border-radius:20px;
font-size:14px;
margin-bottom:20px;
}

/* Main heading */
.hero h1{
font-size:48px;
line-height:1.2;
margin-bottom:20px;
}

/* Gradient text effect */
.hero span{
background:linear-gradient(90deg,#00d4ff,#a855f7);
-webkit-background-clip:text;
color:transparent;
}

.hero p{
color:#94a3b8;
max-width:650px;
margin:auto;
line-height:1.6;
margin-bottom:40px;
}


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

.hero-buttons{
display:flex;
justify-content:center;
gap:20px;
}

.btn-primary{
background:linear-gradient(90deg,#06b6d4,#7c3aed);
border:none;
padding:14px 26px;
border-radius:10px;
color:white;
cursor:pointer;
}

.btn-outline{
background:transparent;
border:1px solid #334155;
padding:14px 26px;
border-radius:10px;
color:white;
cursor:pointer;
}
.hero-links{
    display:flex;
    justify-content:center;
    gap:20px;

}
.btn1{
    background:transparent;
border:1px solid #334155;
padding:14px 26px;
border-radius:10px;
color:white;
cursor:pointer;
}


/* ================= STATS SECTION ================= */

.stats{
display:flex;
justify-content:center;
gap:60px;
padding:60px 20px;
flex-wrap:wrap;
}

.stat-box h2{
font-size:40px;
background: linear-gradient(90deg,#06b6d4,#7c3aed);
-webkit-background-clip: text;
color: transparent;
}

.stat-box p{
color:#94a3b8;
font-size:14px;
}


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

.services{
text-align:center;
padding:80px 20px;
}

.services h2{
font-size:36px;
margin-bottom:10px;
}

.services-subtitle{
color:#94a3b8;
margin-bottom:40px;
}


/* Grid layout for service cards */
.service-grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
gap:30px;
max-width:1000px;
margin:auto;
}


/* Service card design */
.service-card{
background:#0f172a;
border:1px solid #1e293b;
border-radius:12px;
padding:25px;
text-align:left;
}

.service-card h3{
margin-top: 5px;
margin-bottom:10px;
}

.service-card ul{
margin-left:18px;
margin-bottom:10px;
}

.service-card li{
margin-bottom:5px;
color:#94a3b8;
}
.service-card p{
    color: #94a3b8;
    margin-bottom: 5px;
}


.service-card a{
color:#38bdf8;
text-decoration:none;
}
.actions{
text-align:center;
padding:80px 20px;
}

.actions h2{
font-size:36px;
margin-bottom:10px;
}

.action-subtitle{
color:#94a3b8;
margin-bottom:40px;
}

.action-grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
gap:30px;
max-width:1000px;
margin:auto;
}

.action-card{
background:#0f172a;
border:1px solid #1e293b;
border-radius:12px;
padding:25px;
text-align:left;
}
.action-card:nth-child(4){
    grid-column: 2;
}
.action-card p{
    color: #94a3b8;
    margin-bottom: 5px;
}
.action-card h3{
margin-top: 5px;
margin-bottom:10px;
}
.action-taken{
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
margin: auto;
max-width: 1000px;
background:#0f172a;
border:1px solid #1e293b;
border-radius:12px;
padding:25px;
text-align:left;
}
.action-taken p{
    text-align: center;
    color: #94a3b8;
    margin-bottom: 5px;
}
.action-taken h3{
text-align: center;
margin-bottom:10px;
}
.btn-action{
background:linear-gradient(90deg,#06b6d4,#7c3aed);
border:none;
max-width: 300px;
padding:14px 26px;
border-radius:10px;
color:white;
cursor:pointer;
}

.testim{
text-align:center;
padding:100px 20px;
max-width:900px;
margin:auto;
}
.testim h2{
font-size:48px;
line-height:1.2;
margin-bottom:20px;
}

.test-grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
gap:30px;
max-width:1000px;
margin:auto;
}

.test-card{
background:#06080d;
border:1px solid #1e293b;
border-radius:12px;
text-align:left;
padding: 25px;
margin: 0px;
max-width: 400px;

}

.head1{
    background-color: #09171c;
    color: rgb(0, 225, 254);
    padding: 5px;
    text-align: center;
    border-radius: 8px;
    max-width: 120px;
    border-radius: 5px;
    margin-bottom: 10px;
    font-size: 10px;
}
.h1s{
display:flex;
justify-content:center;
align-items: center;
flex-wrap:wrap;
max-height: fit-content;

}

.h1-stat-box h2{
font-size:20px;
background: linear-gradient(90deg,#06b6d4,#7c3aed);
-webkit-background-clip: text;
color: transparent;
margin-bottom: -1px;

}

.h1-stat-box p{
color:#94a3b8;
font-size:14px;

}
.h1-stat-box{
    margin: auto;
    max-height: 20px;
}
.test-button{
background: black;
border-color: white;
border-width: 1px;
padding:14px 26px;
border-radius:15px;
color:rgb(255, 255, 255);
cursor:pointer;
}
.test-button:hover{
   background: linear-gradient(90deg,#06b6d4,#7c3aed);
}

.user-comment{
text-align:center;
padding:80px 20px;
}

.user-comment h2{
font-size:36px;
margin-bottom:10px;
}
.user-comment p{
    margin-bottom: 10px;
}


.comment-grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
gap:50px;
max-width:1000px;
margin:auto;
}
.comment{
background:#0f172a;
border:1px solid #1e293b;
border-radius:12px;
padding: 10px;
text-align:left;
}
.comment-user p{
    margin-bottom: 5px;
}
.contact{
    text-align: center;
}
.contact h2{
    font-size: 35px;
    margin: 25px;
}
.contact h3{
    font-size: 18px;
    margin-bottom: 25px;
}

.contact-section{
    max-width: 1000px;
    margin: auto;
}

.contact-item{
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 15px;
    border-radius: 8px;
    transition: 0.3s;
}

.contact-icon{
    width: 40px;
    height: 40px;
}

.contact-text h3{
    margin: 0;
    font-size: 18px;
}

.contact-text p{
    margin: 0;
    font-size: 14px;
    color: gray;
}

/* Hover Effect */
.contact-item:hover{
    background:linear-gradient(90deg,#06b6d4,#7c3aed);
    transform: translateX(5px);
}

/*-----------------Form section--------------------*/

.contact-form-section{
    max-width: 600px;
    margin: 60px auto;
    text-align: center;
}

.contact-form-section h2{
    margin-bottom: 10px;
}

.contact-form{
    display: flex;
    flex-direction: column;
    gap: 15px;
    margin-top: 20px;
}

.contact-form input,
.contact-form textarea{
    padding: 12px;
    border: 1px solid #ddd;
    border-radius: 6px;
    font-size: 14px;
}

.contact-form input:focus,
.contact-form textarea:focus{
    outline: none;
    border-color: #ff6600;
}

.send-btn{
    background-color: #050d3e;
    color: white;
    border: none;
    padding: 12px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 16px;
    transition: 0.3s;
    
}

.send-btn:hover{
    background:linear-gradient(90deg,#06b6d4,#7c3aed);
    transform: translateX(5px);
}


/*-----------------Footer section--------------------*/

.footer
{
background:linear-gradient(135deg,#0f0f0f,#1a1a1a);
color:white;
padding:70px 10%;
font-family:Arial;
}

.footer-container
{
display:flex;
justify-content:space-between;
flex-wrap:wrap;
margin-bottom:50px;
}

.footer-column h3
{
color:#0059ff;
margin-bottom:20px;
font-size:20px;
}

.footer-column ul
{
list-style:none;
padding:0;
}

.footer-column ul li
{
margin-bottom:12px;
}

.footer-column ul li a
{
text-decoration:none;
color:#ccc;
transition:0.3s;
}

.footer-column ul li a:hover
{
color:#08aff1;
padding-left:5px;
}

.footer-column p
{
color:#ccc;
margin-bottom:10px;
}


.social-bar
{
display:flex;
justify-content:center;
gap:25px;
border-top:1px solid #333;
padding-top:30px;
margin-top:20px;
}


.social-icon
{
width:40px;
height:40px;
display:flex;
align-items:center;
justify-content:center;
background:#222;
border-radius:50%;
color:white;
text-decoration:none;
font-weight:bold;
transition:0.3s;
}

.social-icon:hover
{
background:linear-gradient(90deg,#06b6d4,#7c3aed);
transform:scale(1.15);
}


.copyright
{
text-align:center;
margin-top:25px;
font-size:14px;
color:#888;
}

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

@media (max-width:768px){

.action-grid{
grid-template-columns:1fr;
gap:20px;
}

.action-card{
width:100%;
}

/* Remove center positioning for 4th card */
.action-card:nth-child(4){
grid-column:auto;
}
.navbar{
padding:15px 20px;
}

.logo{
font-size:18px;
}

.nav-links{
position:absolute;
top:70px;
right:0;
background:#020617;
flex-direction:column;
width:220px;
padding:20px;
border-left:1px solid #1e293b;
transform:translateX(100%);
transition:0.3s;
}

.nav-links.active{
transform:translateX(0);
}

.menu{
display:block;
}

}