:root {

            --primary: #005BAC;

            --accent: #FFC72C;

            --bg: #F8FAFC;

            --card: #FFFFFF;

            --border: #E5E7EB;

            --radius: 22px;

            --shadow: 0 15px 40px rgba(0, 0, 0, .08);

            --shadow-hover: 0 25px 60px rgba(0, 91, 172, .18);

        }

        

        .premium-book-card {

            background: var(--card);

            border: 1px solid var(--border);

            border-radius: var(--radius);

            overflow: hidden;

            transition: .35s;

            box-shadow: var(--shadow);

        }

        .premium-book-card:hover {

            transform:

                translateY(-12px);

            box-shadow:

                var(--shadow-hover);

        }

        .premium-book-card img {

            transition: .45s;

        }

        .premium-book-card:hover img {

            transform: scale(1.05);

        }

        #newArrivalSlider {

            scrollbar-width: none;

        }

        #newArrivalSlider::-webkit-scrollbar {

            display: none;

        }

        .book-image-wrapper {

            position: relative;

            overflow: hidden;

        }

        .book-overlay {

            position: absolute;

            top: 0;

            left: 0;

            width: 100%;

            height: 100%;

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

            display: flex;

            flex-direction: column;

            justify-content: center;

            align-items: center;

            text-align: center;

            opacity: 0;

            transition: .35s;

            padding: 20px;

        }

        .book-image-wrapper:hover .book-overlay {

            opacity: 1;

        }



        .book-overlay h5 {

            margin-bottom: 8px;

        }

        .book-overlay p {

            margin-bottom: 15px;

        }

        .book-overlay .btn {

            font-weight: bold;

        }

        .service-card {

            border: none;

            border-radius: 22px;

            box-shadow: var(--shadow);

            transition: .35s;

            background: white;

        }

        .service-card:hover {

            transform:

                translateY(-10px);

            box-shadow:

                var(--shadow-hover);

        }

        .service-icon {

            font-size: 3rem;

            transition: .35s;

        }

        .service-card:hover .service-icon {

            transform: scale(1.15);

        }

        #about img {

            transition: .4s;

        }

        #about img:hover {

            transform: scale(1.03);

        }

        .footer-link {

            color: #d1d5db;

            text-decoration: none;

            display: block;

            margin-bottom: 10px;

            transition: .3s;

        }

        .footer-link:hover {

            color: #ffc107;

            padding-left: 6px;

        }

        #backToTop {

            position: fixed;

            bottom: 30px;

            right: 30px;

            width: 55px;

            height: 55px;

            border-radius: 50%;

            display: none;

            z-index: 999;

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

            transition: .3s;

        }

        #backToTop:hover {

            transform: translateY(-5px);

        }

        .section-line {

            width: 80px;

            height: 5px;

            background: #005BAC;

            border-radius: 30px;

            margin: auto;

        }

      .hero-section{

    position: relative;

    overflow: hidden;

    background:
        linear-gradient(
            90deg,
            rgba(0,48,120,.95) 0%,
            rgba(0,74,173,.90) 42%,
            rgba(0,91,172,.55) 68%,
            rgba(0,91,172,.15) 100%
        ),
        url("../images/sti-building-bg.png");

    background-size: cover;

    background-position: center;

    min-height: 700px;

}

    .hero-overlay{

    width:100%;

    padding-top:70px;

    padding-bottom:180px;

}

.hero-row{

    min-height:620px;

}

.hero-left{

    z-index:10;

}

.hero-image-column{

    display:flex;

    justify-content:flex-end;

    align-items:flex-end;

}

       .hero-title{

    font-size:5.2rem;

    line-height:1.05;

    font-weight:900;

    color:#fff;

    margin-top:20px;

}


.hero-title span{

    display:block;

    color:#FFC72C;

}

       .hero-subtitle{

    margin-top:25px;

    color:#fff;

    max-width:540px;

    font-size:1.35rem;

    line-height:1.8;

    opacity:.95;

}


   .hero-students{

    width:100%;

    max-width:760px;

    position:relative;

    right:-70px;

    bottom:-40px;

    z-index:20;

    filter:
        drop-shadow(
            0 35px 60px rgba(0,0,0,.35)
        );

}

.students-wrapper::before{

    display:none;

}

.students-wrapper::after{

    display:none;

}

        .hero-students:hover {

            transform:

                scale(1.03) translateY(-8px);

        }

        @keyframes floatImage {

            0% {

                transform: translateY(0);

            }

            50% {

                transform: translateY(-10px);

            }

            100% {

                transform: translateY(0);

            }

        }

        .hero-section .btn {

            border-radius: 50px;

            padding: 15px 36px;

            font-size: 18px;

            font-weight: 700;

            transition: .35s;

        }

        .hero-section .btn:hover {

            transform:

                translateY(-5px);

        }

        .hero-badge {

            display: inline-block;

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

            color: white;

            padding: 10px 20px;

            border-radius: 30px;

            margin-bottom: 25px;

            font-weight: 600;

            backdrop-filter: blur(15px);

        }

        .hero-students {

            filter:

                drop-shadow(0 40px 70px rgba(0, 0, 0, .35));

        }

        .hero-students {

            animation:

                floatHero 5s ease-in-out infinite;

        }

      @keyframes floatHero{

    0%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-12px);

    }

    100%{

        transform:translateY(0);

    }

}

        body {

            background: var(--bg);

            font-family: 'Poppins', sans-serif;

            color: #1F2937;

        }

        section {

            padding: 110px 0;

        }

        .section-title {

            font-size: 2.3rem;

            font-weight: 800;

            color: #111827;

        }

        .section-subtitle {

            color: #6B7280;

            margin-top: 10px;

            margin-bottom: 55px;

        }

        .service-circle {

            width: 75px;

            height: 75px;

            border-radius: 50%;

            background: #EEF5FF;

            color: var(--primary);

            display: flex;

            justify-content: center;

            align-items: center;

            font-size: 2rem;

            margin: auto;

            transition: .35s;

        }

        .service-card:hover .service-circle {

            background: var(--primary);

            color: white;

        }

        .btn {

            border-radius: 50px;

            font-weight: 600;

            transition: .35s;

        }

        .btn:hover {

            transform:

                translateY(-4px);

        }

        .section-divider {

            width: 80px;

            height: 5px;

            background: var(--primary);

            border-radius: 50px;

            margin: 18px auto 30px;

        }

        
.students-wrapper{

    width:100%;

    display:flex;

    justify-content:flex-end;

    align-items:flex-end;

    position:relative;

    overflow:visible;

}




.hero-right{

    position:relative;

    display:flex;

    justify-content:flex-end;

    align-items:flex-end;

    height:100%;

    overflow:visible;

}
    

.hero-curve{

    position:absolute;

    left:0;

    bottom:-2px;

    width:100%;

    height:170px;

    background:#F8FAFC;

    border-radius:100% 100% 0 0;

    z-index:2;

}



.service-item{

    display:flex;

    align-items:center;

    gap:18px;

}


.service-icon{

    width:72px;

    height:72px;

    border-radius:20px;

    background:#005BAC;

    color:#fff;

    display:flex;

    justify-content:center;

    align-items:center;

    font-size:30px;

    flex-shrink:0;

    transition:.3s;

}



.service-item p{

    margin:0;

    color:#64748B;

    line-height:1.6;

}


@media(max-width:991px){

.quick-services-card{

grid-template-columns:1fr;

}

.service-divider{

display:none;

}

}


.quick-services-wrapper{

    position:relative;

    z-index:100;

    margin-top:-55px;

    display:flex;

    justify-content:center;

}

.quick-services-card{

    width:100%;

    max-width:1280px;

    background:#fff;

    border-radius:28px;

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

    padding:35px 40px;

    display:grid;

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

    gap:25px;

}

.service-item:hover .service-icon{

    transform:translateY(-6px);

    background:#FFC72C;

    color:#005BAC;

}

.service-item h5{

    font-size:22px;

    font-weight:700;

    margin-bottom:6px;

    color:#1E293B;

}