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

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

body{
    font-family:'Plus Jakarta Sans',sans-serif;
    background:#0b0416;
    color:#fff;
    min-height:100vh;
}

/* NAV */
nav{
    position:fixed;
    top:0;
    left:0;
    width:100%;
    z-index:1000;
    background:rgba(11,4,22,.75);
    backdrop-filter:blur(20px);
    border-bottom:1px solid rgba(255,255,255,.05);
}

.nav-inner{
    max-width:1200px;
    margin:auto;
    height:80px;
    padding:0 24px;
    display:flex;
    align-items:center;
    justify-content:space-between;
}

.logo-img {
    height: clamp(45px, 6vw, 70px);
    width: auto;
    max-width: 180px;
    object-fit: contain;
    display: block;
}

/* LINKS */
.nav-links{
    display:flex;
    gap:8px;
    padding:6px;
    border-radius:999px;
    background:rgba(255,255,255,.03);
    border:1px solid rgba(255,255,255,.05);
}

.nav-links a{
    text-decoration:none;
    color:#fff;
    font-size:14px;
    padding:10px 18px;
    border-radius:999px;
    opacity:.75;
    transition:.3s;
}

.nav-links a:hover,
.nav-links a.active{
    opacity:1;
    background:rgba(255,255,255,.08);
}

.nav-actions{
    display:flex;
    align-items:center;
    gap:14px;
}

/* BUTTONS */
.btn-gold{
    padding:12px 24px;
    background:linear-gradient(180deg,#fef08a,#eab308);
    color:#0b0416;
    border-radius:999px;
    font-size:12px;
    font-weight:800;
    text-transform:uppercase;
    text-decoration:none;
}

.btn-primary{
    display:inline-block;
    padding:18px 36px;
    border-radius:14px;
    background:linear-gradient(180deg,#fef08a,#eab308);
    color:#0b0416;
    font-weight:800;
    text-transform:uppercase;
    text-decoration:none;
}

/* HAMBURGER */
.menu-toggle{
    display:none;
    background:none;
    border:none;
    color:white;
    font-size:30px;
    cursor:pointer;
}

/* MOBILE MENU */
#mobileMenu{
    display:none;
    flex-direction:column;
    align-items:center;
    gap:20px;
    padding:25px;
    background:rgba(11,4,22,.97);
    backdrop-filter:blur(20px);
}

/* HERO */
.hero-container{
    max-width:900px;
    padding:12rem 1.5rem 5rem;
}

.hero-label{
    color:#a78bfa;
    font-size:13px;
    text-transform:uppercase;
    letter-spacing:.2em;
    font-weight:700;
    margin-bottom:20px;
}

.hero-title{
    font-size:clamp(3rem,7vw,5rem);
    font-weight:800;
    line-height:1.05;
    margin-bottom:30px;
}

.hero-desc{
    color:#94a3b8;
    font-size:1.15rem;
    line-height:1.8;
    max-width:700px;
    margin-bottom:50px;
}

/* CURSOR */
.cursor{
    animation:blink 0.8s infinite;
    color:#a78bfa;
}

/* Partners Section */
.partners-section { 
    padding: 80px 24px; 
    background: #fff; 
    text-align: center; 
}

.partners-title { 
    color: #475569; 
    font-size: 0.85rem; 
    font-weight: 700; 
    text-transform: uppercase; 
    letter-spacing: 0.15em; 
    margin-bottom: 50px; 
}

.partners-grid { 
    max-width: 1000px; 
    margin: auto; 
    display: grid; 
    /* Mobile: 2 columns, Desktop: scales up to 5 */
    grid-template-columns: repeat(2, 1fr); 
    gap: 30px; 
    align-items: center; 
    justify-items: center;
}

@media (min-width: 640px) {
    .partners-grid { grid-template-columns: repeat(3, 1fr); gap: 40px; }
}

@media (min-width: 1024px) {
    .partners-grid { grid-template-columns: repeat(5, 1fr); }
}

.partner-logo { 
    filter: grayscale(100%) opacity(0.6); 
    transition: 0.3s ease; 
    width: 100%;
    max-height: 40px; 
    object-fit: contain;
    cursor: pointer;
}

.partner-logo:hover { 
    filter: grayscale(0%) opacity(1); 
    transform: scale(1.05); 
}
/* MOBILE */
@media(max-width:768px){

    .nav-links,
    .desktop-btn{
        display:none;
    }

    .menu-toggle{
        display:block;
    }

    .logo-img{
        height:40px;
    }

    .hero-container{
        padding:8rem 1.2rem 4rem;
    }

    .btn-primary{
        width:100%;
        text-align:center;
    }
}

/* Reveal Animation */
.reveal {
    opacity: 0;
    transform: translateY(40px);
    transition: all 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.reveal.active {
    opacity: 1;
    transform: translateY(0);
}

/*Service */

.services-section { padding: 80px 24px; background: #0b0416; }
.services-grid { 
    display: grid; 
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); 
    gap: 24px; 
    max-width: 1200px; 
    margin: 40px auto 0; 
}
.service-card { 
    background: rgba(255, 255, 255, 0.03); 
    padding: 32px; 
    border-radius: 20px; 
    border: 1px solid rgba(255, 255, 255, 0.05);
    transition: 0.3s;
}
.service-card:hover { border-color: #fef08a; transform: translateY(-5px); }
.service-card h3 { color: #fff; font-size: 1.25rem; margin: 16px 0; }
.service-card p { color: #94a3b8; line-height: 1.6; }
.icon-box { color: #fef08a; margin-bottom: 16px; }


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



body{

    background:white;

}



.products-section{

    width:100%;
    padding:60px 20px;
}



.heading{

    text-align:center;
    margin-bottom:35px;

}


.heading span{

    font-size:10px;
    letter-spacing:3px;
    color:#5c32d8;
    font-weight:bold;

}



.heading h1{

    font-size:28px;
    color:#10152b;
    margin-top:10px;

}


.heading h1 b{

    color:#d69b19;

}



.heading p{

    margin-top:12px;
    color:#8a8a99;
    font-size:12px;

}




.products-grid{

    max-width:540px;
    margin:auto;

    display:grid;

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

    gap:12px;

}





.card{

    border-radius:14px;
    overflow:hidden;

    background:white;

    border:1px solid #ddd;

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

}




.image-box{

    height:118px;

    display:flex;

    align-items:center;

    justify-content:center;

    background-size:cover;

    background-position:center;

    position:relative;

}



.image-box::after{

    content:"";

    position:absolute;

    inset:0;

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

}



.image-box h2{

    position:relative;

    z-index:2;

    color:#f7c623;

    font-size:16px;

    text-align:center;

}





/* Replace these images with your own */

.img1{

background-image:url("images/betting.jpg");

}


.img2{

background-image:url("images/learning.jpg");

}



.img3{

background-image:url("images/healthcare.jpg");

}



.img4{

background-image:url("images/career.jpg");

}




.content{

    padding:12px;

}



label{

    background:#ffd900;

    font-size:8px;

    padding:3px 6px;

    border-radius:3px;

    color:white;

    font-weight:bold;

}



.blue{

background:#4267ff;

}


.red{

background:#ff3559;

}


.purple{

background:#6427d8;

}



.content h3{

    font-size:11px;

    margin-top:8px;

    color:#111827;

}



.content h5{

    font-size:9px;

    color:#4f46e5;

    margin:5px 0;

}



.content p{

    font-size:9px;

    line-height:1.5;

    color:#777;

}



.tags{

    display:flex;

    gap:5px;

    flex-wrap:wrap;

    margin-top:10px;

}



.tags span{

    font-size:8px;

    border:1px solid #ddd;

    padding:4px 8px;

    border-radius:20px;

    color:#555;

}





button{

    display:block;

    margin:25px auto;

    background:#5420c9;

    border:none;

    color:white;

    padding:12px 25px;

    border-radius:30px;

    font-size:12px;

    cursor:pointer;

}



button:hover{

    transform:translateY(-2px);

}




@media(max-width:700px){


.products-grid{

grid-template-columns:1fr;

max-width:350px;

}


}






/* Increased height for the icon/image area */
.icon-box {
    height: 80px;
    width: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 20px;
    margin-bottom: 24px;
    color: #eab308; /* Gold accent */
    transition: 0.4s;
}

.service-card:hover .icon-box {
    background: #eab308;
    color: #0b0416;
}


.swiper-slide {
        transition: transform 0.5s ease, opacity 0.5s ease;
        opacity: 0.6;
        transform: scale(0.9);
    }
    .swiper-slide-active {
        opacity: 1;
        transform: scale(1);
    }










/* Animation setup */
.reveal-on-scroll {
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.8s ease-out;
}

.reveal-on-scroll.active {
    opacity: 1;
    transform: translateY(0);
}







    .swiper-slide {
        transition: transform 0.5s ease, opacity 0.5s ease;
        opacity: 0.5;
        transform: scale(0.9);
    }
    .swiper-slide-active {
        opacity: 1;
        transform: scale(1);
    }
    /* Ensures the pagination dots are visible and perfectly styled */
    .swiper-pagination-bullet-active {
        background-color: #2e1065 ;
    }



    


.testimonial-section{

padding:100px 20px;

background:
linear-gradient(
180deg,
#ffffff,
#f8f7ff
);

overflow:hidden;

}




.testimonial-header{

text-align:center;

max-width:700px;

margin:auto;

margin-bottom:60px;

}



.testimonial-header span{

font-size:12px;

letter-spacing:4px;

font-weight:700;

color:#6d28d9;

}



.testimonial-header h2{

font-size:48px;

font-weight:700;

color:#111827;

margin-top:15px;

}



.testimonial-header h2 b{

color:#d4a017;

}



.testimonial-header p{

color:#64748b;

margin-top:15px;

font-size:16px;

}




.testimonialSwiper{

padding:30px 10px 70px;

}




.testimonial-card{


height:100%;

background:

rgba(255,255,255,.75);


backdrop-filter:blur(15px);


border:1px solid rgba(226,232,240,.8);


border-radius:28px;


padding:35px;


box-shadow:

0 20px 50px rgba(15,23,42,.08);


transition:.5s ease;


}



.swiper-slide{

transform:scale(.9);

opacity:.6;

transition:.5s;

}



.swiper-slide-active{

transform:scale(1);

opacity:1;

}




.quote{


font-size:70px;

font-family:Georgia;

color:#eab308;

height:45px;

}




.review{


margin-top:25px;

font-size:16px;

line-height:1.8;

color:#475569;

}




.client{


display:flex;

gap:15px;

align-items:center;

margin-top:30px;

padding-top:25px;

border-top:1px solid #e2e8f0;

}




.avatar{


width:55px;

height:55px;

border-radius:50%;


background:

linear-gradient(
135deg,
#4f46e5,
#9333ea
);


color:white;

display:flex;

align-items:center;

justify-content:center;


font-weight:bold;

font-size:20px;


}




.client h4{

font-size:16px;

color:#111827;

margin-bottom:4px;

}



.client span{

font-size:14px;

color:#64748b;

}



.stars{

margin-top:8px;

color:#facc15;

letter-spacing:3px;

font-size:13px;

}





.swiper-pagination-bullet{

width:10px;

height:10px;

background:#cbd5e1;

opacity:1;

}



.swiper-pagination-bullet-active{

background:#4f46e5;

width:30px;

border-radius:20px;

}



@media(max-width:768px){


.testimonial-header h2{

font-size:34px;

}


}