/*==================================
        PREMIUM HEADER CSS
==================================*/

html,
body{
    margin:0;
    padding:0;
    overflow-x:hidden;
}

section{
    margin:0;
}

#mobileMenu{
    margin:0;
    padding:0;
}

#mobileMenu{
    inset:0;
    overflow:hidden;
}

#mobilePanel{
    height:100vh;
    overflow-y:auto;
    -webkit-overflow-scrolling:touch;
}


/* Header */

header{
    height:72px;
}

#header.scrolled{

    background:#fff;

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

}

/* Logo */

#header img{

    transition:.35s;

}

#header.scrolled img{

    transform:scale(.95);

}

/* Desktop Menu */

.navLink{

    position:relative;

    color:#444;

    text-decoration:none;

    transition:.3s;

}

.navLink:hover{

    color:#a50058;

}

/* Underline */

.navLink::after{

    content:"";

    position:absolute;

    left:0;

    bottom:-8px;

    width:0;

    height:2px;

    background:#a50058;

    transition:.35s;

}

.navLink:hover::after{

    width:100%;

}

/* Active */

.navLink.active{

    color:#a50058;

}

.navLink.active::after{

    width:100%;

}

/* Mobile Panel */

#mobilePanel{

    transition:transform .35s ease;

}

.translate-x-full{

    transform:translateX(100%);

}

.translate-x-0{

    transform:translateX(0);

}

/* Mobile Links */

.mobileLink{

    display:block;

    padding:16px 0;

    border-bottom:1px solid #eee;

    color:#444;

    font-weight:500;

    text-decoration:none;

    transition:.3s;

}

.mobileLink:hover{

    color:#a50058;

    padding-left:12px;

}

/* CTA */

.bg-primary{

    transition:.3s;

}

.bg-primary:hover{

    transform:translateY(-2px);

    box-shadow:0 12px 25px rgba(165,0,88,.25);

}

/* Button */

#menuBtn{

    transition:.3s;

}

#menuBtn:hover{

    background:#f8f8f8;

}

/* Overlay */

#mobileMenu{

    backdrop-filter:blur(4px);

}

/* Responsive */

@media(max-width:1024px){

body{

padding-top:75px;

}

}

@media(max-width:768px){

body{

padding-top:70px;

}

#header{

height:70px;

}

#header img{

height:52px;

}

#mobilePanel{

width:300px;

}

}

@media(max-width:480px){

#mobilePanel{

width:100%;

}

}

/* Scrollbar */

::-webkit-scrollbar{

width:8px;

}

::-webkit-scrollbar-thumb{

background:#a50058;

border-radius:30px;

}

::-webkit-scrollbar-track{

background:#f3f3f3;

}

/* ===============================
AI DATA CENTER HERO
=============================== */


/* Hero Section */
section#home {
    position: relative;
    overflow: hidden;
}


/* Slider Image Animation */
.heroSlider .swiper-slide img {
    transition: transform 8s ease;
}

.heroSlider .swiper-slide-active img {
    transform: scale(1.08);
}


/* Slider Overlay */
.heroSlider .swiper-slide::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
        180deg,
        rgba(0,0,0,0.15),
        rgba(0,0,0,0.75)
    );
}


/* Slide Content Above Image */
.heroSlider .swiper-slide div {
    z-index: 2;
}


/* Contact Form Card */

.relative > .absolute.bottom-8 {

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

    backdrop-filter: blur(20px);

    -webkit-backdrop-filter: blur(20px);

    border:1px solid rgba(255,255,255,0.4);

}


/* Form Inputs */

.relative form input,
.relative form select {

    height:52px;

    border:1px solid #e2e8f0;

    padding:0 16px;

    transition:.3s;

}


.relative form input:focus,
.relative form select:focus {

    outline:none;

    border-color:#06b6d4;

    box-shadow:0 0 0 4px rgba(6,182,212,.15);

}


/* Slider Buttons */

.heroSlider .swiper-button-next,
.heroSlider .swiper-button-prev {

    width:45px;

    height:45px;

    border-radius:50%;

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

    backdrop-filter:blur(10px);

}


.heroSlider .swiper-button-next:after,
.heroSlider .swiper-button-prev:after {

    font-size:18px;

    color:white;

}



/* Pagination */

.heroSlider .swiper-pagination-bullet {

    background:white;

    opacity:.5;

}


.heroSlider .swiper-pagination-bullet-active {

    background:#06b6d4;

    width:30px;

    border-radius:20px;

}



/* Stats Cards Animation */

.grid.grid-cols-3 > div {

    transition:.4s;

}


.grid.grid-cols-3 > div:hover {

    transform:translateY(-8px);

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

}



/* Button Hover */

a.bg-cyan-500,
button.bg-cyan-500 {

    transition:.3s;

}


a.bg-cyan-500:hover,
button.bg-cyan-500:hover {

    transform:translateY(-3px);

}



/* Background Glow */

section#home::before {

    content:"";

    position:absolute;

    width:500px;

    height:500px;

    background:#06b6d4;

    opacity:.15;

    filter:blur(150px);

    top:-200px;

    left:-150px;

}


/* Tablet */

@media(max-width:1024px){


.relative > .absolute.bottom-8 {

    position:relative;

    left:auto;

    bottom:auto;

    margin-top:30px;

    width:100%;

}


}


/* Mobile */

@media(max-width:640px){


.heroSlider img {

    height:360px!important;

}


h1 {

    font-size:38px!important;

}


.grid.grid-cols-3 {

    grid-template-columns:1fr;

}


.relative > .absolute.bottom-8 {

    padding:20px;

    border-radius:20px;

}


.heroSlider .swiper-button-next,
.heroSlider .swiper-button-prev {

    display:none;

}


}

/* Scroll Reveal */

.glass-card,
.stats-counter{

opacity:0;

transform:translateY(40px);

transition:.8s ease;

}


.reveal-show{

opacity:1;

transform:translateY(0);

}


/* Hero Animation */

.hero-content h1,
.hero-content p,
.hero-content a{

opacity:0;

transform:translateY(20px);

transition:.6s ease;

}


.hero-content .show{

opacity:1;

transform:translateY(0);

}


/* Form Focus */

.hero-form input:focus,
.hero-form select:focus{

transform:translateY(-2px);

}