/*=========================================================
    STCET CSE PORTAL
    landing.css
=========================================================*/

:root{

    --primary:#0d47a1;
    --secondary:#1565c0;
    --light:#f4f7fb;
    --white:#ffffff;
    --dark:#1f2937;
    --text:#555555;
    --success:#28a745;
    --warning:#ffc107;
    --danger:#dc3545;

}

*{

    margin:0;
    padding:0;
    box-sizing:border-box;

}

html{

    scroll-behavior:smooth;

}

body{

    font-family:'Poppins',sans-serif;
    background:#f4f7fb;
    color:#444;
    overflow-x:hidden;

}

/*=========================================================
    LINKS
=========================================================*/

a{

    text-decoration:none;
    transition:.3s;

}

a:hover{

    text-decoration:none;

}

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

section{

    padding:80px 0;

}

/*=========================================================
    TITLES
=========================================================*/

.section-title{

    font-size:38px;
    font-weight:700;
    color:var(--primary);
    margin-bottom:15px;

}

.section-subtitle{

    color:#777;
    font-size:17px;

}

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

.navbar{

    background:linear-gradient(90deg,#0d47a1,#1565c0)!important;

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

    padding:12px 0;

    transition:.4s;

}

.navbar-brand{

    font-weight:700;

    color:#fff!important;

    font-size:24px;

}

.navbar-brand img{

    margin-right:10px;

    border-radius:5px;

}

.navbar-nav .nav-link{

    color:#fff!important;

    font-weight:500;

    margin-left:18px;

    transition:.3s;

}

.navbar-nav .nav-link:hover{

    color:#ffd54f!important;

}

/*=========================================================
    HERO SLIDER
=========================================================*/

.carousel{

    position:relative;

}

.slider-image{

    height:700px;

    object-fit:cover;

    filter:brightness(.55);

}

.carousel-caption{

    bottom:25%;

}

.carousel-caption h1{

    font-size:58px;

    font-weight:700;

    color:#fff;

    text-shadow:2px 2px 8px rgba(0,0,0,.5);

}

.carousel-caption p{

    font-size:22px;

    margin-top:15px;

    margin-bottom:30px;

}

.carousel-caption .btn{

    padding:14px 35px;

    border-radius:50px;

    font-weight:600;

}

/*=========================================================
    LOGIN CARD
=========================================================*/

.login-section{

    margin-top:-140px;

    position:relative;

    z-index:999;

}

.login-card{

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

    border-radius:20px;

    border:none;

    overflow:hidden;

    transition:.4s;

}

.login-card:hover{

    transform:translateY(-8px);

    box-shadow:0 18px 40px rgba(0,0,0,.18);

}

.login-card .card-body{

    padding:35px;

}

.login-card h3{

    color:var(--primary);

    font-weight:700;

    margin-bottom:20px;

}

.login-card label{

    font-weight:600;

    color:#555;

}

.login-card .form-control{

    height:52px;

    border-radius:12px;

    border:1px solid #d6d6d6;

    padding-left:15px;

}

.login-card .form-control:focus{

    border-color:#1565c0;

    box-shadow:0 0 0 .2rem rgba(21,101,192,.15);

}

.login-card .btn{

    height:50px;

    border-radius:12px;

    font-weight:600;

    font-size:17px;

}

.login-card hr{

    margin:25px 0;

}

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

.btn-primary{

    background:linear-gradient(90deg,#0d47a1,#1565c0);

    border:none;

}

.btn-primary:hover{

    background:#0b3a82;

}

.btn-success{

    border:none;

}

.btn-outline-primary{

    border-radius:30px;

    padding:10px 25px;

}

.btn-warning{

    color:#222;

    font-weight:600;

}

/*=========================================================
    CARD
=========================================================*/

.card{

    border:none;

    border-radius:18px;

    overflow:hidden;

    transition:.35s;

}

.card:hover{

    transform:translateY(-8px);

    box-shadow:0 20px 45px rgba(0,0,0,.12);

}

/*=========================================================
    IMAGE
=========================================================*/

img{

    max-width:100%;

}

/*=========================================================
    SHADOWS
=========================================================*/

.shadow{

    box-shadow:0 8px 20px rgba(0,0,0,.08)!important;

}

.shadow-lg{

    box-shadow:0 20px 45px rgba(0,0,0,.15)!important;

}

/*=========================================================
    BACKGROUNDS
=========================================================*/

.bg-primary{

    background:linear-gradient(90deg,#0d47a1,#1565c0)!important;

}

.bg-light{

    background:#f4f7fb!important;

}

/*=========================================================
    TEXT
=========================================================*/

.text-primary{

    color:#0d47a1!important;

}

.text-muted{

    color:#6c757d!important;

}

/*=========================================================
    SPACING
=========================================================*/

.mt-5{

    margin-top:3rem!important;

}

.mb-5{

    margin-bottom:3rem!important;

}

.py-5{

    padding-top:80px!important;

    padding-bottom:80px!important;

}
/*=========================================================
        ABOUT SECTION
=========================================================*/

#about{

    background:#ffffff;

}

#about img{

    border-radius:20px;

    transition:.4s;

}

#about img:hover{

    transform:scale(1.02);

}

#about h2{

    font-size:38px;

    font-weight:700;

    color:var(--primary);

    margin-bottom:20px;

}

#about p{

    text-align:justify;

    line-height:1.9;

    color:#555;

    font-size:16px;

}

#about .btn{

    margin-top:20px;

    padding:12px 30px;

    border-radius:40px;

}


/*=========================================================
        VISION
        MISSION
        PEO
        PSO
=========================================================*/

.card-header{

    padding:18px 25px;

    font-size:20px;

    font-weight:600;

    border:none;

}

.card-header h4{

    margin:0;

    font-weight:700;

}

.card-header i{

    margin-right:10px;

}

.card-body{

    padding:30px;

}

.card-body p{

    line-height:1.8;

    text-align:justify;

    color:#555;

}


/*=========================================================
        COLOURED HEADERS
=========================================================*/

.bg-success{

    background:#198754!important;

}

.bg-warning{

    background:#ffc107!important;

    color:#222!important;

}

.bg-danger{

    background:#dc3545!important;

}


/*=========================================================
        HOD MESSAGE
=========================================================*/

.hod-card{

    border-radius:20px;

    overflow:hidden;

}

.hod-card img{

    width:220px;

    height:220px;

    object-fit:cover;

    border-radius:50%;

    border:8px solid #ffffff;

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

}

.hod-name{

    font-size:24px;

    font-weight:700;

    color:var(--primary);

    margin-top:20px;

}

.hod-designation{

    color:#777;

    margin-bottom:20px;

}

.hod-message{

    line-height:1.9;

    text-align:justify;

}


/*=========================================================
        ICONS
=========================================================*/

.fa-eye{

    color:#ffffff;

}

.fa-bullseye{

    color:#ffffff;

}


/*=========================================================
        CARD HOVER EFFECT
=========================================================*/

.card{

    transition:.35s ease;

}

.card:hover{

    transform:translateY(-10px);

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

}


/*=========================================================
        IMAGE SHADOW
=========================================================*/

.rounded{

    border-radius:20px!important;

}

.shadow-lg{

    box-shadow:0 18px 40px rgba(0,0,0,.15)!important;

}


/*=========================================================
        ANIMATION
=========================================================*/

.fade-up{

    animation:fadeUp 1s ease;

}

@keyframes fadeUp{

    from{

        opacity:0;

        transform:translateY(50px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}


/*=========================================================
        TEXT COLORS
=========================================================*/

.text-primary{

    color:#0d47a1!important;

}

.text-success{

    color:#198754!important;

}

.text-danger{

    color:#dc3545!important;

}


/*=========================================================
        LIST STYLE
=========================================================*/

ul{

    padding-left:20px;

}

ul li{

    margin-bottom:10px;

    line-height:1.7;

}


/*=========================================================
        SECTION GAP
=========================================================*/

.py-5{

    padding-top:80px!important;

    padding-bottom:80px!important;

}


/*=========================================================
        BUTTON HOVER
=========================================================*/

.btn{

    transition:.35s;

}

.btn:hover{

    transform:translateY(-3px);

}


/*=========================================================
        SMALL SCREEN
=========================================================*/

@media(max-width:991px){

#about h2{

    text-align:center;

}

#about p{

    text-align:left;

}

.card-header{

    text-align:center;

}

.card-body{

    text-align:center;

}

.hod-card img{

    width:170px;

    height:170px;

}

}
/*=========================================================
        CERTIFICATE SECTION
=========================================================*/

#certificates{

    background:#f4f7fb;

}

#certificates .card{

    border-radius:20px;

    overflow:hidden;

    transition:.35s;

    background:#ffffff;

    border:none;

}

#certificates .card:hover{

    transform:translateY(-10px);

    box-shadow:0 25px 45px rgba(0,0,0,.15);

}

#certificates .card-body{

    padding:35px 25px;

}

#certificates i{

    transition:.4s;

}

#certificates .card:hover i{

    transform:scale(1.15);

    color:#1565c0;

}

#certificates h5{

    margin-top:20px;

    font-weight:700;

    color:#0d47a1;

}

#certificates p{

    color:#666;

    font-size:15px;

    line-height:1.7;

    min-height:70px;

}

#certificates .btn{

    margin-top:15px;

    border-radius:30px;

    padding:10px 25px;

}



/*=========================================================
        EVENT SECTION
=========================================================*/

#events{

    background:#ffffff;

}

#events .card{

    border:none;

    border-radius:20px;

    overflow:hidden;

}
.event-card{
    border:none;
    border-radius:18px;
    overflow:hidden;
    transition:.3s;
}

.event-card:hover{
    transform:translateY(-8px);
    box-shadow:0 15px 35px rgba(0,0,0,.18);
}

.event-card img{
    transition:.4s;
}

.event-card:hover img{
    transform:scale(1.05);
}

#events .card:hover{

    transform:translateY(-10px);

    box-shadow:0 25px 45px rgba(0,0,0,.15);

}

#events .card-img-top{

    height:240px;

    object-fit:cover;

    transition:.4s;

}

#events .card:hover .card-img-top{

    transform:scale(1.06);

}

#events .badge{

    font-size:13px;

    padding:8px 14px;

    border-radius:20px;

}

#events h5{

    margin-top:15px;

    color:#0d47a1;

    font-weight:700;

}

#events p{

    line-height:1.7;

    color:#555;

}

#events .btn{

    border-radius:30px;

}



/*=========================================================
        EVENT DATE
=========================================================*/

.event-date{

    color:#777;

    font-size:14px;

    margin-top:10px;

}



/*=========================================================
        STATISTICS
=========================================================*/

.statistics{

    background:#eef4fb;

}

.statistics .card{

    border:none;

    border-radius:18px;

    padding:15px;

    transition:.35s;

}

.statistics .card:hover{

    transform:translateY(-8px);

    box-shadow:0 20px 40px rgba(0,0,0,.12);

}

.statistics i{

    margin-bottom:20px;

}

.statistics h2{

    font-size:40px;

    color:#0d47a1;

    font-weight:700;

}

.statistics p{

    color:#666;

    font-weight:500;

}



/*=========================================================
        BADGES
=========================================================*/

.badge{

    font-weight:500;

    letter-spacing:.4px;

}



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

.btn-outline-primary{

    border:2px solid #1565c0;

    color:#1565c0;

    transition:.35s;

}

.btn-outline-primary:hover{

    background:#1565c0;

    color:#ffffff;

}



/*=========================================================
        CARD ANIMATION
=========================================================*/

.zoom-card{

    overflow:hidden;

}

.zoom-card img{

    transition:.5s;

}

.zoom-card:hover img{

    transform:scale(1.08);

}



/*=========================================================
        ICON CIRCLE
=========================================================*/

.icon-circle{

    width:90px;

    height:90px;

    border-radius:50%;

    background:#eef5ff;

    display:flex;

    align-items:center;

    justify-content:center;

    margin:auto;

    margin-bottom:20px;

}



/*=========================================================
        SECTION HEADINGS
=========================================================*/

.section-title{

    font-size:38px;

    font-weight:700;

    color:#0d47a1;

}

.section-subtitle{

    color:#777;

    margin-bottom:45px;

}



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

@media(max-width:991px){

#events .card-img-top{

    height:210px;

}

.statistics h2{

    font-size:34px;

}

#certificates p{

    min-height:auto;

}

}
```css
/*=========================================================
        NOTICE BOARD
=========================================================*/

.notice-board{

    background:#ffffff;

}

.notice-board .card{

    border:none;

    border-radius:20px;

    overflow:hidden;

}

.notice-board .card-body{

    padding:30px;

}

.notice-board marquee{

    height:220px;

}

.notice-board ul{

    margin:0;

    padding-left:20px;

}

.notice-board ul li{

    margin-bottom:15px;

    color:#555;

    line-height:1.8;

}


/*=========================================================
        CONTACT
=========================================================*/

#contact{

    background:#f4f7fb;

}

#contact h2{

    color:#0d47a1;

    font-weight:700;

    margin-bottom:20px;

}

#contact h4{

    color:#0d47a1;

    margin-bottom:20px;

}

#contact p{

    line-height:1.8;

    color:#555;

}

#contact i{

    width:28px;

    color:#1565c0;

}

#contact iframe{

    border-radius:20px;

    box-shadow:0 12px 30px rgba(0,0,0,.15);

}


/*=========================================================
        FOOTER
=========================================================*/

footer{

    background:linear-gradient(90deg,#0d47a1,#1565c0);

    color:#ffffff;

}

footer h5{

    font-weight:700;

    margin-bottom:15px;

}

footer p{

    margin-bottom:6px;

    color:#eeeeee;

}

footer a{

    color:#ffffff;

}

footer a:hover{

    color:#ffd54f;

}


/*=========================================================
        REGISTER MODAL
=========================================================*/

.modal-content{

    border:none;

    border-radius:20px;

    overflow:hidden;

}

.modal-header{

    background:#0d47a1;

    color:#ffffff;

}

.modal-title{

    font-weight:600;

}

.modal-body{

    padding:30px;

}

.modal-body label{

    font-weight:600;

    margin-bottom:6px;

}

.modal-body .form-control,

.modal-body .form-select{

    height:50px;

    border-radius:10px;

}

.modal-body .btn{

    height:50px;

    font-weight:600;

    border-radius:10px;

}


/*=========================================================
        ALERTS
=========================================================*/

.alert{

    border-radius:12px;

    border:none;

}


/*=========================================================
        SCROLLBAR
=========================================================*/

::-webkit-scrollbar{

    width:10px;

}

::-webkit-scrollbar-track{

    background:#eeeeee;

}

::-webkit-scrollbar-thumb{

    background:#1565c0;

    border-radius:20px;

}

::-webkit-scrollbar-thumb:hover{

    background:#0d47a1;

}


/*=========================================================
        SCROLL TO TOP BUTTON
=========================================================*/

.scroll-top{

    position:fixed;

    right:25px;

    bottom:25px;

    width:50px;

    height:50px;

    background:#1565c0;

    color:#ffffff;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

    text-decoration:none;

    font-size:20px;

    opacity:0;

    visibility:hidden;

    transition:.35s;

    z-index:9999;

}

.scroll-top.active{

    opacity:1;

    visibility:visible;

}

.scroll-top:hover{

    background:#0d47a1;

    color:#ffffff;

}


/*=========================================================
        LOADER
=========================================================*/

.loader{

    position:fixed;

    top:0;

    left:0;

    width:100%;

    height:100%;

    background:#ffffff;

    display:flex;

    align-items:center;

    justify-content:center;

    z-index:99999;

}

.loader.hidden{

    display:none;

}


/*=========================================================
        UTILITIES
=========================================================*/

.text-justify{

    text-align:justify;

}

.rounded-20{

    border-radius:20px;

}

.transition{

    transition:.35s;

}


/*=========================================================
        RESPONSIVE
=========================================================*/

@media(max-width:1200px){

.slider-image{

    height:600px;

}

.carousel-caption h1{

    font-size:46px;

}

}

@media(max-width:992px){

.slider-image{

    height:500px;

}

.login-section{

    margin-top:40px;

}

.carousel-caption{

    bottom:15%;

}

.carousel-caption h1{

    font-size:36px;

}

.carousel-caption p{

    font-size:18px;

}

#contact iframe{

    margin-top:30px;

}

footer{

    text-align:center;

}

footer .text-end{

    text-align:center!important;

}

}

@media(max-width:768px){

.section-title{

    font-size:30px;

}

.slider-image{

    height:420px;

}

.carousel-caption{

    bottom:12%;

}

.carousel-caption h1{

    font-size:28px;

}

.carousel-caption p{

    font-size:15px;

}

.login-card{

    margin-top:20px;

}

.card-body{

    padding:20px;

}

}

@media(max-width:576px){

.navbar-brand{

    font-size:18px;

}

.slider-image{

    height:320px;

}

.carousel-caption{

    display:block;

    bottom:10%;

}

.carousel-caption h1{

    font-size:22px;

}

.carousel-caption p{

    display:none;

}

.carousel-caption .btn{

    padding:8px 18px;

    font-size:14px;

}

.section-title{

    font-size:26px;

}

.login-card{

    border-radius:15px;

}

.modal-body{

    padding:20px;

}

}

/*=========================================================
        HERO IMAGE
=========================================================*/


.hero-image{
    width:100%;
    max-width:620px;
    height:auto;
    border:none;
    border-radius:0;
    box-shadow:none;

    /* Fade the image edges */
    -webkit-mask-image: linear-gradient(to left,
                        rgba(0,0,0,1) 65%,
                        rgba(0,0,0,.8) 78%,
                        rgba(0,0,0,.4) 90%,
                        transparent 100%);
    mask-image: linear-gradient(to left,
                        rgba(0,0,0,1) 65%,
                        rgba(0,0,0,.8) 78%,
                        rgba(0,0,0,.4) 90%,
                        transparent 100%);
}


.hero-image:hover{

    transform:translateY(-6px);

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

.hero-section{

    background:linear-gradient(
        90deg,
        #f7faff 0%,
        #eef5ff 50%,
        #ffffff 100%
    );

    overflow:hidden;

}
/*=========================================================
        END OF FILE
=========================================================*/