/* =====================================================
   P-SERIES EDUCATION
   PREMIUM RESPONSIVE DESIGN
===================================================== */


/* =========================
   LARGE SCREEN
========================= */

@media (max-width:1400px){


.container{

max-width:1140px;

}


.hero-content h1{

font-size:62px;

}



.ai-container{

transform:scale(.95);

}



}





/* =========================
   LAPTOP
========================= */


@media (max-width:1200px){


.hero-content h1{

font-size:55px;

}



.nav-link{

margin:0 5px;

}



.search-box input{

width:140px;

}



.ai-orb{

width:220px;

height:220px;

font-size:80px;

}



.floating-card{

font-size:14px;

padding:12px 18px;

}



}








/* =========================
   TABLET
========================= */


@media(max-width:992px){



body{

overflow-x:hidden;

}



/* Navbar */


.navbar-collapse{


background:

rgba(7,17,31,.95);


padding:25px;


border-radius:20px;


margin-top:15px;


backdrop-filter:blur(20px);


}




.navbar-nav{

text-align:center;

}




.nav-link{

padding:12px;

}




/* Hero */


.hero-section{


text-align:center;


padding-top:130px;


}



.hero-content h1{


font-size:48px;


}



.hero-content p{


font-size:16px;


}



.hero-buttons{


justify-content:center;


display:flex;


flex-wrap:wrap;


}




.search-ai{


margin-left:auto;

margin-right:auto;


max-width:500px;


}




.stats-row{


justify-content:center;


flex-wrap:wrap;


}



.ai-container{


margin-top:60px;


height:450px;


}





.category-card{


margin-bottom:20px;


}




.feature-box{


margin-bottom:20px;


}





}









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


@media(max-width:768px){



.container{


padding-left:20px;

padding-right:20px;


}



/* Header */


.logo span{


font-size:17px;


}



.logo small{


font-size:10px;


}




/* Hero */


.hero-section{


min-height:auto;


padding-bottom:70px;


}




.hero-content h1{


font-size:38px;


line-height:1.2;


}



.hero-content p{


font-size:15px;


}



.btn-main,


.btn-outline{


width:100%;


margin:8px 0;


text-align:center;


}




.search-ai{


display:flex;


padding:8px;


}




.search-ai input{


font-size:14px;


}




.search-ai button{


padding:10px 15px;


}





/* Stats */


.stats-row{


gap:20px;


}



.stats-row div{


width:100%;


background:

rgba(255,255,255,.05);


padding:15px;


border-radius:15px;


}







/* AI Section */


.ai-container{


height:350px;


}




.ai-orb{


width:180px;


height:180px;


font-size:60px;


}



.glow-circle{


width:250px;


height:250px;


}




.floating-card{


font-size:12px;


padding:10px;


}



.card1{


top:30px;

left:10px;


}


.card2{


top:70px;

right:10px;


}


.card3{


bottom:50px;

left:20px;


}


.card4{


bottom:30px;

right:20px;


}






/* Sections */


.section-title{


font-size:30px;


}



.section-subtitle{


font-size:14px;


}





.category-card{


padding:25px;


}



.category-card i{


font-size:35px;


}




/* Footer */


.footer-bottom{


display:block!important;


text-align:center;


}



.premium-footer{


padding-top:50px;


}



}









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


@media(max-width:480px){



.hero-content h1{


font-size:32px;


}



.badge-ai{


font-size:12px;


padding:8px 15px;


}



.ai-orb{


width:150px;

height:150px;


font-size:50px;


}



.floating-card{


display:none;


}




.stats-row h3{


font-size:25px;


}




.section-title{


font-size:26px;


}



.search-ai input{


width:100px;


}





}








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


@media(max-height:500px) and (orientation:landscape){



.hero-section{


padding-top:100px;


}



.ai-container{


height:300px;


}



}