*{

margin:0;

padding:0;

box-sizing:border-box;

}

html{

overflow-x:hidden;

}

body{

overflow-x:hidden;

}
*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

body{

font-family:'Poppins',sans-serif;

overflow-x:hidden;

scroll-behavior:smooth;

 background: #ffffff;

}

.navbar-brand{
    font-size:30px;
    font-weight:bold;
}

.nav-link{
    font-size:17px;
    margin-left:15px;
}

.hero{

min-height:100vh;

background-size:cover;

background-position:center;

display:flex;

justify-content:center;

align-items:center;

text-align:center;

color:white;

padding:120px 20px;

}


.hero h1{

    font-size:70px;

    font-weight:700;

    line-height:1.2;

    margin-bottom:20px;

}


.hero p{

    font-size:24px;

    max-width:700px;

    margin:auto;

    margin-bottom:35px;

}

section{

padding-top:80px;

padding-bottom:80px;

}

h2{

font-weight:700;

}

p{

line-height:1.8;

font-size:17px;

}
/* WHY CHOOSE LUMTEC */

.feature-box{

background:#fff;

padding:40px 30px;

text-align:center;

border-radius:15px;

box-shadow:0 8px 25px rgba(0,0,0,.1);

transition:.4s;

height:100%;

}

.feature-box:hover{

transform:translateY(-12px);

}

.icon{

font-size:55px;

margin-bottom:20px;

}

.feature-box h4{

margin-bottom:15px;

font-weight:bold;

}
/* STATISTICS */

.stats{

background:#0d6efd;

color:white;

padding:80px 0;

}

.stats h1{

font-size:60px;

font-weight:bold;

}

.stats p{

font-size:20px;

}
/* CORE VALUES */

.value-card{

background:#ffffff;

padding:40px;

text-align:center;

border-radius:15px;

box-shadow:0 10px 30px rgba(0,0,0,.08);

transition:.4s;

height:100%;

}

.value-card:hover{

background:#0d6efd;

color:white;

transform:translateY(-10px);

}

.value-card h1{

font-size:55px;

margin-bottom:20px;

}
/* ADMISSION */

.admission{

background:#0d6efd;

padding:100px 0;

}
/* GALLERY */

.gallery-img{

width:100%;

height:270px;

object-fit:cover;

border-radius:15px;

transition:.5s;

box-shadow:0 10px 25px rgba(0,0,0,.15);

}

.gallery-img:hover{

transform:scale(1.05);

}
/* ===========================
   PREMIUM NAVBAR
=========================== */

.navbar{
    padding:18px 0;
    transition:all 0.4s ease;
}

.navbar-brand{
    font-size:32px;
    font-weight:700;
    letter-spacing:1px;
}

.nav-link{
    margin-left:18px;
    font-size:16px;
    font-weight:500;
    transition:0.3s;
}

.nav-link:hover{
    color:#ffc107 !important;
}

.navbar .btn{
    border-radius:30px;
    padding:10px 24px;
    font-weight:600;
}
/* ===========================
   PREMIUM BUTTONS
=========================== */

.btn{
    border-radius:50px;
    padding:12px 30px;
    font-weight:600;
    transition:all 0.3s ease;
}

.btn:hover{
    transform:translateY(-4px);
    box-shadow:0 10px 20px rgba(0,0,0,0.2);
}
/* ===========================
   CARD EFFECTS
=========================== */

.card{

    transition:all 0.4s ease;

    border:none;

    overflow:hidden;

}

.card:hover{

    transform:translateY(-10px);

    box-shadow:0 20px 40px rgba(0,0,0,0.15);

}
/* ===================================
   SCROLL ANIMATION
=================================== */

.fade-up{

    opacity:0;

    transform:translateY(60px);

    transition:all .8s ease;

}

.fade-up.active{

    opacity:1;

    transform:translateY(0);

}
/* ===========================
   HERO SLIDER
=========================== */

.hero-image{

    height:100vh;

    object-fit:cover;

    filter:brightness(45%);

}

.hero-content{

    bottom:50%;

    transform:translateY(50%);

}

.hero-content h1{

    font-size:70px;

    font-weight:700;

    margin-bottom:20px;

}

.hero-content p{

    font-size:24px;

    margin-bottom:35px;

}

.carousel-caption{

    text-align:center;

}

.carousel-item{

    transition:transform 1.2s ease-in-out;

}
/* ===========================
   WHY STUDY SECTION
=========================== */

.study-card{

    background:#ffffff;

    padding:40px;

    border-radius:15px;

    text-align:center;

    box-shadow:0 10px 30px rgba(0,0,0,.08);

    transition:.4s;

    height:100%;

}

.study-card:hover{

    transform:translateY(-10px);

    box-shadow:0 20px 40px rgba(0,0,0,.15);

}

.study-icon{

    font-size:60px;

    color:#0d6efd;

    margin-bottom:20px;

}

.study-card h4{

    margin-bottom:15px;

    font-weight:700;

}
/* ===========================
   TESTIMONIALS
=========================== */

.testimonial-box{

    background:white;

    max-width:800px;

    margin:auto;

    padding:50px;

    border-radius:20px;

    text-align:center;

    box-shadow:0 15px 35px rgba(0,0,0,.12);

}

.testimonial-img{

    width:120px;

    height:120px;

    border-radius:50%;

    object-fit:cover;

    margin-bottom:20px;

    border:5px solid #0d6efd;

}

.testimonial-box p{

    font-size:18px;

}
/* ===========================
   EVENTS
=========================== */

.event-card{

    display:flex;

    align-items:center;

    gap:25px;

    background:white;

    padding:25px;

    border-radius:15px;

    box-shadow:0 10px 30px rgba(0,0,0,.08);

    transition:.4s;

}

.event-card:hover{

    transform:translateY(-8px);

    box-shadow:0 20px 40px rgba(0,0,0,.15);

}

.event-date{

    width:90px;

    height:90px;

    background:#0d6efd;

    color:white;

    border-radius:15px;

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;

    flex-shrink:0;

}

.event-date h3{

    margin:0;

    font-size:32px;

    font-weight:700;

}

.event-date span{

    font-size:16px;

    font-weight:600;

}
/* ===========================
   PARTNERS
=========================== */

.partner-card{

    background:white;

    padding:30px;

    border-radius:15px;

    box-shadow:0 8px 20px rgba(0,0,0,.08);

    transition:.4s;

}

.partner-card:hover{

    transform:translateY(-8px);

    box-shadow:0 15px 35px rgba(0,0,0,.15);

}

.partner-logo{

    width:120px;

    height:120px;

    object-fit:contain;

}
/*==========================
CONTACT
==========================*/

.contact-section{

background:#f8f9fa;

}

.contact-info{

background:white;

padding:40px;

border-radius:20px;

height:100%;

box-shadow:0 15px 35px rgba(0,0,0,.08);

}

.contact-info p{

margin-bottom:25px;

font-size:18px;

}

.contact-info i{

color:#0d6efd;

font-size:22px;

margin-right:12px;

}

.contact-form{

background:white;

padding:40px;

border-radius:20px;

box-shadow:0 15px 35px rgba(0,0,0,.08);

}

.contact-form input,

.contact-form textarea{

padding:15px;

border-radius:12px;

margin-bottom:15px;

}
/*==========================
FOOTER
==========================*/

.footer{

background:#021526;

color:white;

padding:80px 0 20px;

}

.footer-logo{

font-size:34px;

font-weight:700;

margin-bottom:20px;

}

.footer h4{

margin-bottom:20px;

font-weight:600;

}

.footer ul{

list-style:none;

padding:0;

}

.footer li{

margin-bottom:12px;

}

.footer a{

color:#dcdcdc;

text-decoration:none;

transition:.3s;

}

.footer a:hover{

color:#ffc107;

}

.social-icons{

margin-top:25px;

}

.social-icons a{

display:inline-flex;

align-items:center;

justify-content:center;

width:45px;

height:45px;

background:#0d6efd;

border-radius:50%;

margin-right:10px;

font-size:18px;

transition:.3s;

}

.social-icons a:hover{

background:#ffc107;

color:black;

transform:translateY(-5px);

}

.footer input{

padding:12px;

border-radius:10px;

border:none;

}
/* ================================================= */
/* FINAL MOBILE RESPONSIVE DESIGN */
/* ================================================= */

@media (max-width: 768px){

body{
overflow-x:hidden;
}

/* Navigation */

.navbar{
padding:10px 15px;
}

.navbar-brand{
font-size:1.8rem;
font-weight:700;
}

.navbar-collapse{
background:#0d6efd;
padding:15px;
border-radius:12px;
margin-top:12px;
}

.navbar-nav .nav-link{
padding:12px 0;
font-size:18px;
text-align:center;
}

.navbar .btn{
width:100%;
margin-top:10px;
}

/* Search */

.search-box{
display:flex;
flex-direction:column;
gap:10px;
padding:15px;
}

.search-box input,
.search-box button{
width:100%;
}

/* Hero */

.hero{

height:auto;

min-height:70vh;

padding:90px 20px;

background-position:center;

background-size:cover;

text-align:center;

display:flex;

align-items:center;

justify-content:center;

flex-direction:column;

}

.hero h1{

font-size:2.2rem;

line-height:1.2;

margin-bottom:20px;

}

.hero p{

font-size:1.1rem;

margin-bottom:25px;

}

.hero .btn{

display:block;

width:100%;

margin-bottom:12px;

}

/* Images */

img{

max-width:100%;

height:auto;

}

}

/* Cards */

.card{

margin-bottom:25px;

border:none;

border-radius:15px;

overflow:hidden;

box-shadow:0 8px 20px rgba(0,0,0,.12);

}

.card img{

height:220px;

object-fit:cover;

}

.card-body{

padding:25px;

text-align:center;

}

/* Sections */

section{

padding:70px 20px;

}

.container{

padding-left:18px;

padding-right:18px;

}

.row{

row-gap:25px;

}

/* Typography */

h1{

font-size:2.2rem;

}

h2{

font-size:2rem;

}

h3{

font-size:1.5rem;

}

p{

font-size:1rem;

line-height:1.8;

}

/* Forms */

input,

select,

textarea{

font-size:16px;

padding:12px;

}

button,

.btn{

font-size:16px;

padding:12px 24px;

}

/* Footer */

footer{

text-align:center;

padding:40px 20px;

}

footer .row{

text-align:center;

}
.btn{

border-radius:50px;

font-weight:600;

transition:.3s;

}

.btn:hover{

transform:translateY(-3px);

}
section{

animation:fadeIn .8s ease;

}

@keyframes fadeIn{

from{

opacity:0;

transform:translateY(20px);

}

to{

opacity:1;

transform:translateY(0);

}

}