body {
    margin: 0px;
    padding: 0px;
    font-family: 'Times New Roman', Times, serif;
    line-height: 1.5px;



    display: flex;
    flex-direction: column;

}

h1 {
    color: #f58f2d
    !important;
}
p {
 font-weight:500;
}
/*primary-color:#2784c9;
secondary-color:#e52027*/


.header-item {
    padding: 30px 20px;
}

.navbar-brand {
    color: #000;
    font-weight: bold;
    font-size:30px;
    text-decoration: none;
}


.navbar-nav .nav-link {
    font-weight:bold;
    color: #000;
    margin: 0 0.5rem;
 
}


    .navbar-nav .nav-link.active {
        font-weight: bold;
        color: #2784c9!important;
    }


    .navbar-nav .nav-link:hover {
        color: #2784c9;
    }


.navbar-brand img {
    height: 100px; 
    width: auto;
}
.nav-item .dropdown-menu {
    background: #2784c9;
}
.nav-item .dropdown-menu li a {
 
    color: #fff;
    padding: 5px 12px !important;
   

    font-size: 15px;
    font-weight: 400;
    background: #2784c9;
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.5);
    
    padding: 10px 15px;
}

.nav-item .dropdown-menu li a:hover {
    background: #f58f2d;
}



    .carousel-caption-left {
        position: absolute;
        top: 40%;
        left: 5%;
        text-align: left;
        max-width: 45%;
        color: #000;
    }

    .carousel-caption-left h1 {
        font-weight: 700;
        color: #f58f2d;
        text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.4);
    }




    .carousel-caption-left p {
        font-size: 1.1rem;
        margin: 15px 0;
        color: #fff !important;
        text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
    }

    .carousel-caption-left a {
        display: inline-block;
        background-color: #f58f2d;
        color: #fff;
        padding: 12px 25px;
        border-radius: 30px;
        text-decoration: none;
        font-weight: 600;
        transition: 0.3s;
    }

.carousel-item img {
    width: 100%;
    height: auto;
    object-fit: cover;
}
.carousel-control-prev
{
    top:80%!important;
}
.carousel-control-next {
    top: 80% !important;
}


.about-us-wrapper {
    background: #fde6c2;
}
.play-school {
    background: #d6ecfa!important;
}
.play-school-1 {
    background: #fbd4d5!important;
}

.left-text
{
    padding:50px 5px;
    font-size:18px;
}

.icon
{ padding-top:20px;
    height:80px;
    width:80px;
}
.btn-learn-more {
    margin-top:9px;
    background: #f58f2d!important;
    padding:13px;
    color:#fff!important;
    border: 2px dashed #fff!important;
}

.footer {
    background: #a6d4f2;
}
.quick-link  li a
{
    color:#000!important;
}

.parallax {
    background-image: url('/images/hri-slide-1.jpg'); 
    background-attachment: fixed; 
    background-position: center;
    background-repeat: no-repeat;
    position: relative;
}
@media (max-width:768px)
{
    .parallax {
        background-size: 100% auto;
    }
}
    @media( max-width:768px) {
        .hrid-school {
            padding: 150px 0px;
        }
    }

    .content {
        background: rgba(0, 0, 0, 0.1) !important;
        color: #333;
    }

    .hrid-school {
        padding: 200px 0px;
        color: #fff;
    }

    .overlay {
        background: rgba(0, 0,0, 0.5) !important;
    }

    .header-section {
        margin: 0px !important;
        padding: 0px !important;
    }

    .hero-section {
        position: relative;
        width: 100%;
        height: 300px;
        background-size: cover;
        background-position: center;
    }

    .hero-overlay {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.5);
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .hero-title {
        color: white;
        font-size: 2.5rem;
        font-weight: bold;
    }

    .about-icon {
        background: #f58f2d;
        border-radius: 50%;
        height: 80px;
        width: 80px;
        color: #fff;
        padding: 18px;
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0 auto;
        animation: pulse1 1.5s infinite ease-in-out;
    }

    .about-icon-2 {
        background: #2784c9;
        border-radius: 50%;
        height: 80px;
        width: 80px;
        color: #fff;
        padding: 18px;
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0 auto;
        animation: pulse2 1.5s infinite ease-in-out;
    }

    .about-icon-3 {
        background: #e52027;
        border-radius: 50%;
        height: 80px;
        width: 80px;
        color: #fff;
        padding: 18px;
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0 auto;
        animation: pulse3 1.5s infinite ease-in-out;
    }


    @keyframes pulse1 {
        0% {
            transform: scale(1);
            opacity: 1;
            box-shadow: 0 0 0 0 rgba(245, 143, 45, 0.7);
        }

        50% {
            transform: scale(1.1);
            opacity: 0.8;
            box-shadow: 0 0 15px 5px rgba(245, 143, 45, 0.5);
        }

        100% {
            transform: scale(1);
            opacity: 1;
            box-shadow: 0 0 0 0 rgba(245, 143, 45, 0.7);
        }
    }


    @keyframes pulse2 {
        0% {
            transform: scale(1);
            opacity: 1;
            box-shadow: 0 0 0 0 rgba(39, 132, 201, 0.7);
        }

        50% {
            transform: scale(1.1);
            opacity: 0.8;
            box-shadow: 0 0 15px 5px rgba(39, 132, 201, 0.5);
        }

        100% {
            transform: scale(1);
            opacity: 1;
            box-shadow: 0 0 0 0 rgba(39, 132, 201, 0.7);
        }
    }


    @keyframes pulse3 {
        0% {
            transform: scale(1);
            opacity: 1;
            box-shadow: 0 0 0 0 rgba(229, 32, 39, 0.7);
        }

        50% {
            transform: scale(1.1);
            opacity: 0.8;
            box-shadow: 0 0 15px 5px rgba(229, 32, 39, 0.5);
        }

        100% {
            transform: scale(1);
            opacity: 1;
            box-shadow: 0 0 0 0 rgba(229, 32, 39, 0.7);
        }
    }

    .why-choose-us {
        background: #2784c9;
    }

    .why-card {
        background-color: #2784c9;
        transition: all 0.3s ease;
        cursor: pointer;
        border: 1px solid #fff;
    }

        .why-card:hover {
            background-color: #fff;
        }

            .why-card:hover h5,
            .why-card:hover p {
                color: #f58f2d;
            }

            .why-card:hover .icon-wrapper i {
                color: #e52027;
            }

    .value-card .icon-wrapper i {
        color: #fff;
        transition: color 0.3s ease;
    }

    .v-m {
        color: #2784c9;
    }

    .contact-btn {
        border-radius: 5px;
        background: #e52027 !important;
        padding: 8px;
        color: #fff !important;
    }

    .contact {
        background: #2784c9 !important;
        color: #fff !important;
    }

        .contact p {
            color: #fff !important;
        }

    .service-icon {
        color: #2784c9;
    }

    @media( max-width:768px) {
        .about-img {
            width: 100% !important;
        }
    }

    @media( max-width:768px) {
        .project-img {
            width: 100% !important;
            height: 200px;
        }
    }

    .feestructure h5 {
        color: #2784c9;
    }

    .card {
        transition: all 0.3s ease;
    }

        .card:hover {
            transform: translateY(-5px);
            box-shadow: 0 0 20px rgba(0,0,0,0.1);
        }

    .zoom-img {
        width: 100%;
        height: 300px;
        cursor: pointer;
        transition: transform 0.3s ease;
    }

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

    #galleryModal .carousel-control-prev,
    #galleryModal .carousel-control-next {
        width: auto;
        top: 50%;
        transform: translateY(-50%);
        background: none;
        opacity: 1;
    }

    #galleryModal .carousel-control-prev {
        left: -250px;
        top: 50% !important;
    }

    #galleryModal .carousel-control-next {
        right: -250px;
        top: 50% !important;
    }


    #galleryModal .carousel-control-prev-icon,
    #galleryModal .carousel-control-next-icon {
        background-color: #000;
        border-radius: 50%;
        padding: 10px;
    }

    @media (max-width: 768px) {
        #galleryModal .carousel-control-prev {
            left: 0;
        }

        #galleryModal .carousel-control-next {
            right: 0;
        }
    }