@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800;900&family=Righteous&display=swap');

* {
    padding: 0;
    margin: 0;
}

body {
    padding: 0;
    margin: 0;
    font-family: 'Poppins', sans-serif;
    /* font-family: 'Righteous', cursive; */
}


/* ---------------------- Common CSS Section Start ---------------------- */
:root {
    --textColor: #3b5998;
    --headingColor: #0c0d1c;
    --subHeadingColor: #2f4f4f;
    --btnColor: #525ddc;
    --bgColor: #ff0100;
    --bgOrange: #ff6c00;
    --bgnavyblue: #183262;
    --lightgrey: #d6d6d6;
    --darkgrey: #8a8a8a;
    --bgnevytwo: #041534e8;
    --bgsky:#00aef0;
    --clWhite:#fff;
    --bgviolet:#a5a9eb;
    --headerColor: #fefff8;
}

.heading {
    text-align: center;
    margin-bottom: 20px;
}

h2 {
    font-size: 40px;
    font-weight: 600;
    line-height: 60px;
}

h3 {
    font-size: 32px;
    font-weight: 600;
    line-height: 48px;
}

h4 {
    font-size: 24px;
    font-weight: 600;
    line-height: 36px;
}

h5 {
    font-size: 18px;
    font-weight: 600;
    line-height: 24px;
}

.common-btn {
    width: 140px;
    height: 55px;
    background-color: var(--bgOrange);
    color: var(--lightgrey);
    border-radius: 4px;
    padding: 15px 15px;
    text-align: center;
    display: inline-block;
}

.read-more {
    width: 100px;
    height: 34px;
    font-size: 12px;
    background-color: var(--bgOrange);
    border-radius: 4px;
    color: var(--lightgrey);
    padding: 10px 15px;
    text-align: center;
    display: inline-block;
    text-decoration: none;
}

.solid-btn {
    width: 160px;
    height: 55px;
    background-color: var(--bgOrange);
    color: var(--headerColor);
    border-radius: 3px;
    display: flex;
    justify-content: center;
    align-items: center;
    text-decoration: none;
}

.line-btn {
    width: 160px;
    height: 55px;
    background-color: transparent;
    border: 1px solid var(--bgOrange);
    border-radius: 3px;
    color: var(--headerColor);
    display: flex;
    justify-content: center;
    align-items: center;
    text-decoration: none;
}

.download-doc {
    width: 100%;
    height: 55px;
    border: 2px solid var(--bgOrange);
    border-radius: 50px;
    color: var(--bgOrange);
    padding: 15px 0px 15px 20px;
    font-weight: 600;
    text-align: center;
    display: flex;
    justify-content: space-between;
    align-items: center;
    text-decoration: none;
}

.download-img {
    width: 55px;
    height: 55px;
    background-color: var(--bgOrange);
    border-radius: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding-left: 2px;
}

.download-img img {
    height: 40%;
}

#events .owl-dots,
#popular-courses .owl-dots,
#expert-teachers .owl-dots,
#news .owl-dots,
#feedback .owl-dots,
#governing-body .owl-dots {
    text-align: center;
    padding-top: 15px;
    margin: 0 auto;
}

#events .owl-dots button.owl-dot,
#popular-courses .owl-dots button.owl-dot,
#expert-teachers .owl-dots button.owl-dot,
#news .owl-dots button.owl-dot,
#feedback .owl-dots button.owl-dot,
#governing-body .owl-dots button.owl-dot {
    width: 15px;
    height: 15px;
    border-radius: 50%;
    display: inline-block;
    background: #ccc;
    margin: 0 3px;
}

#events .owl-dots button.owl-dot.active,
#popular-courses .owl-dots button.owl-dot.active,
#expert-teachers .owl-dots button.owl-dot.active,
#news .owl-dots button.owl-dot.active,
#feedback .owl-dots button.owl-dot.active,
#governing-body .owl-dots button.owl-dot.active {
    background-color: var(--bgOrange);
}

#events .owl-dots button.owl-dot:focus,
#popular-courses .owl-dots button.owl-dot:focus,
#expert-teachers .owl-dots button.owl-dot:focus,
#news .owl-dots button.owl-dot:focus,
#feedback .owl-dots button.owl-dot:focus,
#governing-body .owl-dots button.owl-dot:focus {
    outline: none;
}

#events .owl-carousel .owl-nav,
#popular-courses .owl-carousel .owl-nav,
#expert-teachers .owl-carousel .owl-nav,
#news .owl-carousel .owl-nav,
#feedback .owl-carousel .owl-nav,
#governing-body .owl-carousel .owl-nav {
    width: 100%;    
    font-size: 20px;
    position: absolute;
    display: flex;
    justify-content: right;
    align-items: center;
    margin-top: 10px;
}

#events .owl-carousel .owl-nav .owl-prev, #events .owl-carousel .owl-nav .owl-next,
#popular-courses .owl-carousel .owl-nav .owl-prev, #popular-courses .owl-carousel .owl-nav .owl-next,
#expert-teachers .owl-carousel .owl-nav .owl-prev, #expert-teachers .owl-carousel .owl-nav .owl-next,
#news .owl-carousel .owl-nav .owl-prev, #news .owl-carousel .owl-nav .owl-next,
#feedback .owl-carousel .owl-nav .owl-prev, #feedback .owl-carousel .owl-nav .owl-next,
#governing-body .owl-carousel .owl-nav .owl-prev, #governing-body .owl-carousel .owl-nav .owl-next {
    width: 40px;
    height: 40px;
    background-color: transparent;
    color: var(--bgOrange);
    border: 1px solid #ff6a0048;
}

#events .owl-carousel .owl-nav .owl-prev:hover, #events .owl-carousel .owl-nav .owl-next:hover,
#popular-courses .owl-carousel .owl-nav .owl-prev:hover, #popular-courses .owl-carousel .owl-nav .owl-next:hover,
#expert-teachers .owl-carousel .owl-nav .owl-prev:hover, #expert-teachers .owl-carousel .owl-nav .owl-next:hover,
#news .owl-carousel .owl-nav .owl-prev:hover, #news .owl-carousel .owl-nav .owl-next:hover,
#feedback .owl-carousel .owl-nav .owl-prev:hover, #feedback .owl-carousel .owl-nav .owl-next:hover,
#governing-body .owl-carousel .owl-nav .owl-prev:hover, #governing-body .owl-carousel .owl-nav .owl-next:hover {
    background-color: var(--bgOrange);
    color: var(--lightgrey);
}

/* ---------------------- Common CSS Section End ---------------------- */


/* ---------------------- loading Section CSS Start ---------------------- */
.loading {
    width: 100%;
    height: 100%;
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
}

@keyframes loading-item {
    0% {
        transform: rotate(0deg)
    }

    50% {
        transform: rotate(180deg)
    }

    100% {
        transform: rotate(360deg)
    }
}

.loading-item div {
    position: absolute;
    animation: loading-item 1s linear infinite;
    width: 128px;
    height: 128px;
    top: 36px;
    left: 36px;
    border-radius: 50%;
    box-shadow: 0 6.4px 0 0 #3b5998;
    transform-origin: 64px 67.2px;
}

.loading-inner {
    width: 200px;
    height: 200px;
    display: inline-block;
    overflow: hidden;
}

.loading-item {
    width: 100%;
    height: 100%;
    position: relative;
    transform: translateZ(0) scale(1);
    backface-visibility: hidden;
    transform-origin: 0 0;
    /* see note above */
}

.loading-item div {
    box-sizing: content-box;
}

/* ---------------------- loading Section CSS End ---------------------- */

/* ---------------------- Header Section CSS Start ---------------------- */

/* ------------ Top Section CSS Start ------------ */
header {
    width: 100%;
    /* position: relative; */    
}

#top {
    background-color: var(--headingColor);
    padding: 5px 0;
}

#top .top-items {
    display: flex;
    justify-content: space-between;
    align-items: center;
    z-index: 999;
}

#top .top-items .text-left a, #top .top-items .text-right a{
    text-decoration: none;
    color: var(--clWhite);
    font-weight: 500;
}

#top .iem-name {
    display: none;
}

.text-left i {
    margin-right: 5px;
}

.phone i {
    margin-left: 20px;
}

.sign-btn {
    all: unset;
    font-size: 20px;
    color: var(--headingColor);
    margin-left: 50px;
}

.sign-btn i {
    margin-right: 10px;
}

.login {
    background-color:var(--bgnevytwo);
    background-size: cover;
    background-repeat: no-repeat;
    width: 100%;
    height: 100%;
    position: fixed;
    top: 32px;
    left: 0;
    z-index: 1000;
    transform: translateY(-110%);
    transition: all 0.8s;
    opacity: 0;
}

.login.active {
    transform: translateY(0%);
    opacity: 1;
}

.login .close-login {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    color: rgba(255, 255, 255, 0.74);
    background-color: rgba(255, 255, 255, 0.082);
    box-shadow: 0px 6px 35px -7px rgba(0,0,0,0.75);
    font-size: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    left: 50%;
    bottom: 60px;
    transform: translateX(-50%);
}

.close-login img {
    height: 80%;
}

.login .tab-container{
    width: 100%;
    margin: 0 auto;
}

.login ul.tabs{
    margin: 0px;
    padding: 0px;
    list-style: none;
    text-align: center;
}

.login ul.tabs li{
    background: #e4e4e4;
    color: #0c0d1c;
    display: inline-block;
    padding: 10px 15px;
    cursor: pointer;
}

.login ul.tabs li.current{
    background: var(--bgsky);
    color: var(--clWhite);
}

.login .tab-content{
    display: none;
    background: #ededed00;
    padding: 15px;
}

.login .tab-content.current{
    display: inherit;
}

.login .form-area {
    max-width: 40%;
    padding: 20px;
    margin: 150px auto 20px;
    border: 2px solid var(--bgsky);
    background-color: var(--bgnevytwo);
    border-radius: 10px;
}

.login .form-area h2 {
    color: var(--bgsky);
    text-align: center;
    font-weight: 600;
    margin-bottom: 20px;
}

.login .email, .login .pw, .login .name, .login .mobile{
    width: 100%;
    height: 50px;
    padding: 10px 20px;
    box-sizing: border-box;
    background:transparent;
    border: none;
    outline: none;
    border-bottom: 1px solid var(--textColor);
    margin-bottom: 5px;
}

.login .login-btn {
    width: 100%;
    height: 50px;
    border: none;
    background-color:var(--bgsky);
    color: var(--clWhite);
    display: inline-block;
    margin-top: 50px;
}

.login span{
    color: var(--clWhite);
    text-align: center;
    padding-top: 40px;
    display: block;
} 

/* ------------ Top Section CSS End ------------ */


/* ------------ NAvbar Section CSS Start ------------ */
.navbar {
    padding: 0;
    margin: 0;
    width: 100%;
    background-color:var(--headerColor);
    display: flex;
    justify-content: space-between;
    align-items: center;    
    z-index: 1002;  
    transition: all 0.8s;
}

.navbar.active {
    width: 100%;  
    background-color:var(--clWhite);
    box-shadow: 0px 10px 25px -7px rgba(0,0,0,0.1);
    border-radius: 0;
    position: fixed;
    top: 0px;
    box-shadow: 0px -3px 18px 0px rgba(0, 0, 0, 0.473);
    z-index: 1001;
    transform: translateY(0%);
    transition: all 0.8s;  
}

.navbar .brand {
    width: 10%;
}

.navbar .brand img {
    height: 60px;
}

.nav-items {
    width: 80%;
    position: relative;
}

.navbar .nav-list {
    width: calc(100% - 60px);
    margin: 0 auto;
    padding: 0;
    list-style: none;    
    display: flex;
    justify-content: center;
}

.navbar .nav-list .nav-link {
    position: relative;
    height: 80px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.navbar .nav-list .nav-link:hover {
    background-color: #f5f5f5;
}

.navbar .nav-list .nav-link::before {
    content: "";
    width: 100%;
    height: 5px;
    background-color:var(--headingColor);
    border-radius: 50px;
    position: absolute;
    left: 0;
    bottom: 0px;
    transform: scaleX(0);
    transform-origin: center;
    transition: transform 0.5s ease;
}

.navbar .nav-list .nav-link:hover::before, .active {
    transform: scaleX(1);
    transition: transform 0.5s ease;
}

.navbar .nav-list .nav-link a {
    text-decoration: none;
    text-transform: uppercase;
    color:var(--headingColor);
    padding-inline: 15px;
    font-weight: 600;
}

/* ------------ Mega-Menu Section Start ------------ */

.course-box {
    width: 139vh;
    position: absolute;
    top: 100px;
    left: -508px;
    background-color:var(--clWhite);
    padding: 20px;
    opacity: 0;
    visibility: hidden;
    border: 1px solid #e6e6e6b6;
    box-shadow: 0px 8px 28px -11px rgba(0,0,0,0.75);
} 

.course-mega-menu:hover .course-box {
    top: 80px;
    opacity: 1;
    visibility: visible;
    transition: all 0.8s;
}

.course-box .course-items span {
    width: 100%;
    height: 50px;
    background-color:var(--bgOrange);
    color: var(--clWhite);
    display: flex;
    justify-content: center;
    align-items: center;
    text-transform: uppercase;
    font-size: 20px;
    font-weight: 600;
    border-radius: 4px;
}

.course-box .course-items .course-list {
    list-style: none;
    padding: 0;
    margin-top: 10px;
}

.course-box .course-items {
    border-right: 1px solid #e6e6e6b6;
}

.course-box .course-items .course-list li:hover {
    background-color: #e6e6e6b6;
    color: var(--headingColor);
}

.course-box .course-items .course-list lse.searchi:hover a{
    color: var(--headingColor);
}

.course-box .course-items .course-list li a{
    font-size: 13px;
    display: inline-block;
    color: var(--headingColor);
    padding: 5px;
    font-weight: 600;
}

/* ------------ Mega-Menu Section End ------------ */

.grid_button {
    background-color: transparent;
    border: none;
    width: 40px;
    height: 40px;
}

.grid_button img{
    width: 100%;
    height: 100%;
}

.nav-search-btn {
    all: unset;
    color:var(--headingColor);
    font-size: 20px;
    padding-left: 20px;
}

.list-toggle-btn {
    background-color: transparent;
    width: 50px;
    height: 50px;
    box-sizing: border-box;
    border: none;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    border-radius: 5px;
    overflow: hidden;
    color: var(--bgOrange);
    cursor: pointer;
}

.list-toggle-btn span {
    width: 50px;
    height: 4px;
    background-color:var(--bgOrange);
    border: none;
    border-radius: 10px;
    transition: all .5s;
}

.list-toggle-btn span:nth-child(1) {
    transform: translateY(-8px);
    width: 40px;
}

.list-toggle-btn span:nth-child(3) {
    transform: translateY(8px);
    width: 40px;
}

.list-toggle-btn.active span:nth-child(2) {
    transform: translateX(100px);
}

.list-toggle-btn.active span:nth-child(1) {
    transform: translateY(4px) rotate(45deg);
}

.list-toggle-btn.active span:nth-child(3) {
    transform: translateY(-4px) rotate(-45deg);
}

.list-toggle {
    display: none;
}
/* ---------------------- Grid Menu Section CSS End ---------------------- */
.grid-menu {
    width: 100%;
    height: 100%;
    position: fixed;
    left: 0;
    top: 0;
    background-color:var(--bgnevytwo);
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    z-index: 999;
    transform: translateY(-110%);
    transition: all 0.8s;
    opacity: 0;
}

.search {
    width: 70%;
    padding-bottom: 20px;
    height: 140px;
    position: fixed;
    left: 50%;
    top: 114px;
    background-color:var(--bgnevytwo);
    border-radius: 0px 0px 150px 150px;
    display: flex;
    justify-content: center;
    align-items:last baseline;
    z-index: 2;
    transform: translate(-50%, -80%);
    transition: all 0.3s;
    opacity: 0;
}

.search.active{  
    width: 70%; 
    top: 80px;   
    transform: translate(-50%, 0%);
    opacity: 1;
}

.search.activly{  
    width: 70%;    
    transform: translate(-50%, -10%);
    opacity: 1;
}

.grid-menu.active{
    transform: translateY(0%);
    opacity: 1;
}

.search .form-wrapper {
    width: 100%;    
    display: flex;
    justify-content: space-between;
    align-content: center;
    border-bottom: 2px solid #3b5998;
}

.search input {
    width: 100%;
    height: 60px;
    background:transparent;
    color: var(--clWhite);
    padding: 10px 20px;
    border: none;
    outline: none;
}

.search input::placeholder {
    color: var(--clWhite);
    font-size: 24px;
}

.search-btn {
    all: unset;
    width: 10%;
    color: var(--btnColor);
    font-size: 24px;
}

.close-search img {
    height: 80%;
}

.close-search {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    color: #ffffff84;
    background-color: rgba(255, 255, 255, 0.13);
    box-shadow: 0px 6px 35px -7px rgba(0,0,0,0.75);
    font-size: 32px;
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    left: 50%;
    bottom: 40px;
    transform: translateX(-50%);
}

.main-menu {
    width: 60%;
    padding: 20px;
    height: 400px;
    background-color: rgba(255, 255, 255, 0);
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    /* align-items: center; */
}

.main-menu .menu-items {
    width: 18%;
    padding: 10px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    margin-bottom: 15px;
    position: relative;
    transition: all .8s;
}


.menu-items:hover {
    background-color: var(--clWhite);
    border-radius: 4px;
}

.menu-items:hover span{
    color: var(--headingColor);
    font-weight: 600;
}

.menu-items:hover .front-icon {
    opacity: 0;
    transition: all .8s;
}

.menu-items:hover .back-icon {
    opacity: 0;
    transition: all .8s;
}

.main-menu .menu-items span {
    font-size: 14px;
    display: block;
}

.main-menu .menu-items .front-icon {
    position: absolute;
}

.main-menu .menu-items .back-icon {
    opacity: 1;
}

.main-menu .menu-items img {
    height: 40px;
    margin: 0px auto 10px;
}

.main-menu .menu-items a {
    text-transform: uppercase;
    text-decoration: none;
    color: var(--clWhite);
}

/* ---------------------- Grid Menu Section CSS End ---------------------- */

/* ---------------------- Responsive nav-list-menu Section CSS Start ---------------------- */
.nav-list-menu {
    width: 80%;
    height: 100%;
    background-color: var(--bgnevytwo);
    padding: 20px 0;
    position: fixed;
    top: 0;
    left: 0px;
    z-index: 9999;
    overflow: scroll;
    transform: translateX(-110%); 
    opacity: 0;
    transition: all 0.5s;
}

.nav-list-menu.activly {
    transform: translateX(0%); 
    opacity: 1;
    transition: all 0.5s;
}

.close-side-nav-btn img {
    height: 80%;
}

.nav-list-menu .brand-logo {
    padding-bottom: 24px;
    border-bottom: 1px solid var(--clWhite);
    text-align: center;
}

.nav-list-menu .brand-logo img {
    height: 80px;
}

.nav-list-menu ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.nav-list-menu ul li {
    width: 100%;
    height: 60px;
    padding: 0 20px;
    border-bottom: 1px solid var(--bgnevytwo);
    display: flex;
    justify-content: left;
    align-items: center;
    transition: all 0.5s;
}

.nav-list-menu ul .course-menu {
    position: relative;
}

.nav-list-menu ul .course-menu ul{
    width: 100%;
    position: absolute;
    left: 0;
    top: 60px;
}

.nav-list-menu ul li .icon {
    width: 40px;
    height: 40px;
    padding-right: 10px;
}

.nav-list-menu ul li img {
    height: 80%;    
}

.nav-list-menu ul li:hover {
    background: linear-gradient(90deg, rgba(4,21,52,1) 97%, rgba(82,93,220,1) 97%);
}

.nav-list-menu ul li a {
    text-decoration: none;
    color: var(--clWhite);
    font-size: 16px;
    padding-block: 15px;
    display: flex;
    justify-content: left;
    align-items: center;
    gap: 15px;
    transition: all 0.5s;
}

.nav-list-menu ul .course-menu::after, li.course-menu::after {
    content: "\f078";
    font: normal normal normal 14px/1 FontAwesome;
    font-size: 18px;
    color: var(--headerColor);
    position: absolute;
    right: 16px;
}

.nav-list-menu ul .course-menu{
    width: 100%;
    left: 0;
}

.nav-list-menu ul li.course-menu ul {
    width: 100%;
    list-style: none;
}

.nav-list-menu ul li.course-menu ul.course-subject li {
    width: 100%;
    height: 50px;
    color: #183262;
    background-color: #fff;   
}



/* ------------ Responsive nav-list-menu Section CSS End ------------ */

/* ---------------------- Navbar Section CSS End ---------------------- */

/* ---------------------- Pop-up Section CSS Start ---------------------- */
#pop-up {
    width: 100%;
    height: 100%;
    background-color: var(--bgnevytwo);
    display: flex;
    justify-content: center;
    align-items: center;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1100;
    transform: scale(0);
    transition: .8s;
}

#pop-up.active {
    transform: scale(1.0);
    transition: .8s;
}

.enquiry-btn {
    width: 40px;
    height: 110px;
    background-color:var(--bgOrange);
    border-radius: 0px 8px 8px 0px;
    box-shadow: 3px 0px 5px 0px rgba(0,0,0,0.25);
    display: flex;
    justify-content: center;
    align-items: center;
    position: fixed;
    top: 80%;
    left: 0;
    z-index: 1102;
    cursor: pointer;
}

.enquiry-btn h4 {
    font-size: 18px;
    color: var(--lightgrey);
    transform: rotate(270deg);
}

.pop-up-close-btn {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background-color: var(--lightgrey);
    color: rgba(4, 21, 52, 0.863);
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    top: -10px;
    right: -10px;
    z-index: 1201;
}

.pop-up-window {
    background-color: var(--clWhite);
    padding: 20px;
    display: flex;
    
}

.pop-up-window .pop-up-img {
    width: 40%;
    max-height: 100%;
}

.pop-up-window .pop-up-img img{
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.pop-up-site {
    margin-block: 20px;
    display: flex;
    gap: 10px;
}

.pop-up-site a{
    text-decoration: none;
    color: var(--lightgrey);
    font-size: 15px;
    width: 30px;
    height: 30px;
    border: 1px solid var(--lightgrey);
    border-radius: 50%;
    padding: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.pop-up-contact ul {
    padding: 0;
    margin: 0;
    list-style: none;
}

.pop-up-window .pop-up-info {
    width: 58%;
    margin-left: 20px;
    box-sizing: border-box;
    position: relative;
    /* border: 1px solid var(--bgnavyblue); */
}

.pop-up-window .pop-up-info .pop-up-header {
    text-align: center;
}

.pop-up-window .pop-up-info .pop-up-header img {
    height: 80px;
}

/* .pop-up-window .pop-up-info .form-wrapper {
    padding: 10px;
} */

.pop-up-window .pop-up-info .form-wrapper form input {
    width: 100%;
    height: 55px;
    display: inline-block;
    padding: 12px 15px;
    margin-top: 10px;
    border: none;
    outline: none;
    border-bottom: 1px dotted var(--bgnavyblue);
}

.pop-up-window .pop-up-info .form-wrapper form textarea {
    width: 100%;
    height: 120px;
    display: inline-block;
    padding: 12px 15px;
    border: none;
    outline: none;
    border-bottom: 1px dotted var(--bgnavyblue);
}

.pop-up-window .pop-up-info .form-wrapper form .form-btn {
    width: 100%;
    height: 55px;
    display: inline-block;
    padding: 15px 20px;
    background-color:var(--bgnavyblue);
    color: var(--clWhite);
    border: none;
    outline: none;
}
/* ---------------------- Pop-up Section CSS End ---------------------- */

/* ---------------------- Banner Section CSS Start ---------------------- */
#banner {
    position: relative;
    height: 92vh;
}

#banner .swiper {
    width: 100%;
    height: 92vh;
}

#banner .swiper-slide {
    background-position: center;
    background-size: cover;
}

#banner .swiper-slide img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

#banner .swiper-slide {
    background-repeat: no-repeat;
    background-size: cover;
    height: 100vh;
}

#banner .one {
    background-image: linear-gradient(90deg, rgba(4,26,54,0.9416141456582633) 46%, rgba(255,255,255,0) 100%), url(../img/img-2.jpg);
}

#banner .two {
    background-image: linear-gradient(90deg, rgba(4,26,54,0.9416141456582633) 46%, rgba(255,255,255,0) 100%), url(../img/img-7.jpg);
}

#banner .three {
    background-image: linear-gradient(90deg, rgba(4,26,54,0.9416141456582633) 46%, rgba(255,255,255,0) 100%), url(../img/img-2.jpg);
}

#banner .four {
    background-image: linear-gradient(90deg, rgba(4,26,54,0.9416141456582633) 46%, rgba(255,255,255,0) 100%), url(../img/img-6.jpg);
}

#banner .banner-info {
    padding: 160px 0;
}

#banner .banner-info span {
    color: var(--bgviolet);
    font-size: 20px;
    position: relative;
}

#banner .banner-info span::after {
    content: "";
    width: 30px;
    height: 1px;
    background-color: var(--bgviolet);
    position: absolute;
    right: -34px;
    top: 50%;
    transform: translateY(-50%);
}

#banner .banner-info h2 {
    color: var(--clWhite);
    font-size: 50px;
    line-height: 72px;
    margin-block: 20px;
}

#banner .banner-info p {
    font-size: 16px;
    font-weight: 300;
    line-height: 24px;
    color: var(--lightgrey);
}

#banner .banner-info .banner-btn {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 10px;
    margin-top: 40px;
}

/* ---------------------- Banner Section CSS End ---------------------- */

/* ---------------------- About Section CSS Start ---------------------- */
#about {
    
    padding: 100px 0;
}

#about .heading {
    margin-bottom: 28px;
}

#about .about-text-content h2 span {
    color: var(--bgOrange);
}

#about .about-text-content p {
    text-align: justify;
    line-height: 28px;
}

#about .about-text-content .common-btn {
    text-decoration: none;
    width: 100%;
    height: 55px;
    background-color: var(--bgOrange);
    color: var(--lightgrey);
    padding: 15px 15px;
    text-align: center;
    display: inline-block;
}

#about .about-text-content .about-doc {
    margin-top: 20px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
}

#about .about-text-content .about-doc a {
    margin-bottom: 20px;
}

#about .about-silder {
    position: relative;
    height: 100%;
}

#about .swiper {
    max-width: 80%;
    max-height: 80%;
    position: absolute;
    left: 50%;
    top: 50%;
    margin-left: -280px;
    margin-top: -150px;
  }

#about .swiper-slide {
    background-position: center;
    background-size: cover;
  }

#about .swiper-slide img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

/* #about .swiper-pagination {
    bottom: -100px;
} */
/* ---------------------- About Section CSS End ---------------------- */

/* ---------------------- Affiliation Section CSS Start ---------------------- */
#affiliation {
    padding: 50px 0;
}

#affiliation .affiliations-items {
    width: 100px;
    height: 100px;
    margin-inline: 24px;
}

#affiliation .affiliations-items img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}
/* ---------------------- Affiliation Section CSS End ---------------------- */

/* ---------------------- Find your Course Section CSS Start ---------------------- */
#courses {
    width: 100%;
    background-color: #f8f8f8;
    padding: 100px 0;
}

#courses h2 span {
    color: var(--bgOrange);
}

#courses form {
    width: 100%;
    padding: 0;
    margin: 0;
}

form select {
    width: 100%;
    height: 50px;
    text-align: center;
    padding: 10px;
    border: 1px solid var(--bgOrange);
    color: var(--bgOrange);
    font-weight: 600;
    margin-block: 10px;
    outline: none;
}

/* form .course, form .specialization{
    margin-left: 10px;
    margin-block: 10px;
} */

/* form .course-type, form .stream {
    margin-right: 10px;
    margin-block: 10px;
} */

form .course-apply {
    width: 100%;
    height: 50px;
    background:var(--bgOrange);
    color: var(--clWhite);
    border: none;
    margin-top: 20px;
}

.course-video {
    position: relative;
}

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

.overlay img {
    width: 80px;
    height: 80px;
}


/* ---------------------- Find your Course Section CSS End ---------------------- */

/* ---------------------- Event Section CSS Start ---------------------- */
#events {
    padding: 100px 0;
}

#events .heading h2 span {
    color: var(--bgOrange);
}

#events .event-info {
    width: 96%;
    margin-block: 20px;
    position: relative;
    transition: all 0.5s;
    margin-inline: 28px;
}

#events .event-info:hover {
    transform: translateY(-10px);
    box-shadow: 5px 5px 22px -10px rgba(0,0,0,0.75);
    transition: all 0.5s;
}

#events .event-info .date {
    width: 160px;
    height: 40px;
    background-color: var(--bgOrange);
    color: var(--clWhite);
    padding: 10px 20px;
    position: absolute;
    top: 10px;
    left: -20px;
}

#events .event-info .clippy {
    width: 30px;
    height: 30px;
    background-color: #974509;
    clip-path: polygon(20% 0%, 100% 0, 100% 93%, 0 40%);
    position: absolute;
    top: 38px;
    left: -20px;
    z-index: -2;
}

#events .event-info .event-poster {
    width: 100%;
    height: 250px;
    overflow: hidden;
}

#events .event-info .event-poster img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.place-time {
    width: 100%;
    height: 50px;
    background: var(--lightgrey);
    color: var(--bgOrange);
    font-size: 20px;
    padding: 15px 20px;
    box-sizing: border-box;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

#events .event-info .event-description {
    padding: 20px;
}

#events .event-info .event-description h4 {
    color: var(--bgOrange);
}

#events .event-info .event-description p{
    color: var(--darkgrey);
}

#events .owl-carousel {
    display: none;
}

/* ---------------------- Event Section CSS End ---------------------- */

/* ---------------------- Admission going on Section CSS Start ---------------------- */
#admissions {
    background-image: url(../img/admission-bg.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    padding: 100px 0;
}

#admissions h2 {
    color: var(--headingColor);
    line-height: 80px;
}

#admissions h2 span{
    color: var(--bgOrange);
}

#admissions p {
    color: var(--lightgrey);
    line-height: 22px;
}

#admissions a {
    text-decoration: none;
    margin-top: 20px;
}
/* ---------------------- Admission going on Section CSS End ---------------------- */

/* ---------------------- Accordion Section CSS Start ---------------------- */
#faq{
    background-color: #f8f8f8;
    padding: 100px 0;
}

#faq h2 span {
    color: var(--bgOrange);
}

#faq .accordion-area {
    background-color: var(--clWhite);
    padding: 32px;
    border-radius: 8px;
    box-shadow: 0px 0px 27px -14px rgba(0,0,0,0.50);
}

#faq .accordion-area .accordion-header {
    padding: 12px;
    cursor: pointer;
    font-size: 18px;
    font-weight: 600;
    color:var(--bgnavyblue);
}

#faq .accordion-area .accordion-header::before {
    content: "+";
    padding-right: 16px;
    font-size: 28px;
    width: 20px;
    display: inline-block;
    transform: rotate(45deg);
    transition: all 0.5s;
    position: relative;
    top: 5px;
}

#faq .accordion-area .accordion-header.collapsed::before {
    content: "+";
    width: 20px;
    display: inline-block;
    font-size: 24px;
    transform: rotate(0deg);
    transition: all 0.5s;
    position: relative;
    top: 2px;
}

#faq .accordion-area .card {
    border: none;
    border-radius: 8px;
    box-shadow: 0px 8px 19px -9px rgba(0, 0, 0, 0.40);
    margin-bottom: 8px;
    border-left: 5px solid;
}

#faq .accordion-area .card:nth-child(odd) {
    border-color: #f2c298;
    background-color:#fef7ed;
}

#faq .accordion-area .card:nth-child(even) {
    border-color: #8a8ae6;
    background-color:#f1f0fe;
}

#faq .accordion-area .card .card-body {
    padding-top: 0;
    padding-left: calc(20px + 12px + 12px);
    color: #5c5c5c;
    font-size: 14px;
}

#faq .accordion-area .card .card-body p {
    text-align: justify;
}

#faq .accordion-area .card .card-body ol {
    padding: 0;
    margin: 0;
}

#faq .accordion-area .card .card-body ul {
    padding: 0;
    margin: 0;
}
/* ---------------------- Accordion Section CSS End ---------------------- */

/* ---------------------- Our popular Couses Section CSS Start ---------------------- */
#popular-courses {
    padding: 100px 0;
}

#popular-courses h2 span{
    color: var(--bgOrange);
}

.popular-courses-info {
    width: 100%;
    padding: 15px;
    background-color: var(--clWhite);
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-shadow: 0px 2px 22px -10px rgba(0,0,0,0.75);
}

.popular-courses-img {
    width: 40%;
}

.popular-courses-img img{
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.popular-courses-details {
    width: 60%;
    height: 100%;
    padding-left: 20px;
}

.popular-courses-details p{
    color: var(--darkgrey);
}

.popular-courses-duration {
    display: flex;
    justify-content: space-between;
    font-weight: 600;
    color: var(--bgOrange);
}

.popular-courses-details i {
    font-size: 20px;
    color: var(--bgOrange);
}

#popular-courses .item {
    margin-block: 40px;
}

.popular-courses-duration a {
    text-decoration: none;
    font-weight: 400;
}

/* ---------------------- Our popular Couses Section CSS End ---------------------- */

/* ---------------------- Tabs Section CSS Start ---------------------- */
#tabs-Section {
    background-color: #f8f8f8;
    padding: 100px 0;
}

#tabs-Section .nav-link {
    width: 220px;
    min-height: 60px;
    border-left: 3px solid #8a8ae6;
    background-color: #f1f0fe;
    color: var(--bgnavyblue);
}

#tabs-Section .nav-link.active {
    border-left: 3px solid #f2c298;
    background-color: #fef7ed;
}

#tabs-Section .tab-content {
    background-color: #fef7ed;
    color: var(--bgnavyblue);
    padding: 20px;
    min-height: 360px;
    display: block;
    font-size: 14px;
}

/* ---------------------- Tabs Section CSS End ---------------------- */

/* ---------------------- Academic Tabs Section CSS Start ---------------------- */

#academic-tabs {
    padding: 100px 0;
}

#academic-tabs .heading {
    margin-bottom: 40px;
}

#academic-tabs h2 span {
    color: var(--bgOrange);
}

#academic-tabs .nav-pills {
    background-color: #fef7ed;
    border-radius: 10px 10px 0 0;
    display: flex;
    justify-content: center;
    margin: 0
}

 .nav-pills .nav-item{
    max-width: 100%;
    background-color: #fef7ed;
    display: inline-block;
    color: var(--bgnavyblue);
    font-weight: 600;
    border-radius: 10px 10px 0px 0px;
}

/* #academic-tabs .nav-pills .nav-item.active {
    background-color: #f1f0fe !important;
    border-top: 5px solid #8a8ae6 !important;
} */

#academic-tabs .nav-pills .nav-link {
    color: var(--bgnavyblue);
    font-weight: 400;
}

#academic-tabs .nav-pills .nav-link.active, .nav-pills .show>.nav-link {
    color: var(--bgnavyblue);
    background-color: #f1f0fe;
    border-top: 5px solid #8a8ae6;
    font-weight: 600;
    border-radius: 6px 6px 0 0;
}

#academic-tabs .tab-content>.active {
    display: block;
    background-color: #f1f0fe;
    border-left: 5px solid #8a8ae6;
    border-radius: 0 0px 10px 10px;
    min-height: 300px;
    padding: 20px;
}

/* ---------------------- Academic Tabs Section CSS End ---------------------- */

/* ---------------------- Our Expert Teachers Section CSS Start ---------------------- */
#expert-teachers {
    padding: 100px 0;
}

#expert-teachers h2 span{
    color: var(--bgOrange);
}

.faculty-img {
    width: 100%;
    position: relative;
}

.faculty-img img {
    width: 100%;
}

#expert-teachers .img-overlay {
    width: 100%;
    height: 100%;
    background-color: var(--bgnevytwo);
    display: flex;
    justify-content: center;
    align-items:flex-end;
    position: absolute;
    bottom: 0;
    left: 0;
    opacity: 0;
    transition: opacity 0.50s;
    overflow: hidden;
}

#expert-teachers .img-overlay:hover {
    opacity: 1;
}

#expert-teachers .img-overlay a {
    text-decoration: none;
}

#expert-teachers .img-overlay >* {
    transform: translateY(60px);
    transition: transform 0.50s;
}

#expert-teachers .img-overlay:hover >* {
    transform: translateY(-20px);
}

#expert-teachers .img-overlay i {
    width: 40px;
    height: 40px;
    font-size: 24px;    
    color: var(--clWhite);
    background-color: transparent;
    border: 1px solid var(--clWhite);
    border-radius: 50%;
    margin: 5px;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: all 0.8s;
}

#expert-teachers .img-overlay i:hover {
    border-color: var(--bgOrange);
    background-color:var(--bgOrange);
    transition: all 0.8s;
}

#expert-teachers .faculty-details {
    width: 100%;
    background-color:var(--bgOrange);
    text-align: center;
    padding: 20px;
}

#expert-teachers .faculty-details h4 {
    line-height: 24px;
    color: var(--clWhite);
}

#expert-teachers .faculty-details span {
    color: var(--lightgrey);
}

#expert-teachers .owl-dots {
    text-align: center;
    padding-top: 15px;
    margin: 0 auto;
}

#expert-teachers .item {
    margin-block: 40px;
}

/* ---------------------- Our Expert Teachers Section CSS End ---------------------- */

/* ---------------------- Counting Section CSS Start ---------------------- */
#counting {
    background-image: url(../img/admission-bg.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    padding: 60px 0;
}

.counting-info {
    width: 100%;
    background-color: var(--clWhite);
    text-align: center;
    padding: 20px;
    box-sizing: border-box;
    border-radius: 10px;
}

.counting-info h3 {
    color: var(--bgOrange);
}

.counting-info span {
    color: var(--headingColor);
    font-size: 20px;
    font-weight: 500;
}
/* ---------------------- Counting Section CSS End ---------------------- */

/* ---------------------- Latest News Section CSS Start ---------------------- */
#news {
    background-color: #f8f8f8;
    padding: 100px 0;
}

#news .news-info {
    width: 100%;
    padding: 20px;
    background-color: var(--clWhite);
}

#news h2 span{
    color: var(--bgOrange);
}

#news .news-info .news-img {
    width: 100%;
    height: 220px;
    overflow: hidden;
}

#news .news-info .news-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

#news .news-info .news-description {
    margin-top: 20px;
}

#news .news-info .news-description a {
    margin-top: 20px;
}

#news .news-info .news-description .news-title {
    color: var(--headingColor);
}

#news .news-info .news-description .news-para {
    color: var(--darkgrey);
    text-align: justify;
}

.news-respons {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 20px;
}

#news .item {
    margin-block: 40px;
}

/* ---------------------- Latest News Section CSS End ---------------------- */

/* ---------------------- Feedback Section CSS Start ---------------------- */
#feedback {
    padding: 100px 0;
}

#feedback h2 span{
    color: var(--bgOrange);
}

#feedback .feedback-info {
    width: 100%;
    background-color: #f8f8f8;
    padding: 60px 30px 30px;
    position: relative;
    border-radius: 10px;
}

#feedback .feedback-info .feedback-img {
    width: 120px;
    height: 120px;
    overflow: hidden;
    border-radius: 50%;
    border: 5px dashed var(--bgOrange);
    position: absolute;
    top: -60px;
    left: 50%;
    transform: translateX(-50%);
}

#feedback .feedback-info .feedback-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

#feedback .feedback-info .feedback-title {
    text-align: center;
    margin-block: 20px;
}


#feedback .item {
    margin-block: 60px;
}

/* ---------------------- Feedback Section CSS End ---------------------- */

/* ---------------------- footer Section CSS Start ---------------------- */
footer {
    background-color: #49627e;
    padding: 60px 0;
}

.footer-items .footer-brand img {
    height: 100px;
    margin-bottom: 20px;
}


footer .footer-items .footer-contact i {
    color: var(--lightgrey);
    padding-right: 10px;
}

.footer-items p {
    color: var(--lightgrey);
    text-align: left;
}

.footer-social-site {
    margin-block: 20px;
    display: flex;
    gap: 10px;
}

.footer-social-site a{
    text-decoration: none;
    color: var(--lightgrey);
    font-size: 20px;
    width: 40px;
    height: 40px;
    border: 1px solid var(--lightgrey);
    border-radius: 50%;
    padding: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    overflow: hidden;
    z-index: 5;
}

.footer-social-site a::before {
    content: "";
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background-color:var(--bgOrange);
    position: absolute;
    cursor: pointer;
    transform: scale(0);
    transform-origin: center;
    transition: .8s;
    z-index: -1;
    transition: .8s;
}

.footer-social-site a:hover::before{
    transform: scale(1.0);
    transition: .8s;
}

.footer-items h4 {
    color: var(--lightgrey);
}

.footer-items ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.footer-items ul li {
    
    color: var(--lightgrey);
}

.footer-items ul li a {
    font-size: 14px;
    text-decoration: none;
    color: var(--lightgrey);
    padding-block: 10px;
    display: inline-block;
}
/* ---------------------- footer Section CSS End ---------------------- */

/* ---------------------- Legal Section CSS Start ---------------------- */
#legal {
    background-color: #38516d;
    padding: 10px 0;
}

#legal .legal-items {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.terms a{
    font-size: 14px;
    text-decoration: none;
    color: var(--lightgrey);
    padding-left: 10px;
}

.legal-info {
    font-size: 14px;
    color: var(--lightgrey);
}
/* ---------------------- Legal Section CSS End ---------------------- */

/* ---------------------- Scroll-top Section CSS Start ---------------------- */
.scroll-top {
    width: 40px;
    height: 40px;
    border-radius: 5px;
    background-color:var(--lightgrey);
    box-shadow: 0px 0px 14px -3px rgba(0,0,0,0.75);
    padding: 6px;
    position: fixed;
    right: 20px;
    bottom: 20px;
    z-index: 999;
}

.scroll-top img {
    width: 100%;
    height: 100%;
}
/* ---------------------- Scroll-top Section CSS End ---------------------- */

/* *************************** IEM About Page CSS Start *************************** */

/* ------------ About Page About Banner Section CSS Start ------------ */
#about-banner {
    background-image: url(../img/img-5.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed;
    padding: 100px 0;
    width: 100%;
    height: 60vh;
    position: relative;
}

#about-banner h1 {
    font-size: 80px;
    font-weight: 600;
    color: var(--bgOrange);
    position: absolute;
    bottom: 10px;
}

#about-banner .significant {
    margin-top: 220px;
}

#about-banner .significant .signatory {
    width: 280px;
    height: 280px;
    border-inline: 8px solid var(--bgOrange);
}

#about-banner .significant .signatory img{
    width: 100%;
    height: 100%;
    object-fit: cover;
}

#about-banner .img-overlay {
    width: 100%;
    height: 100%;
    background: linear-gradient(0deg, rgba(4,21,52,1) 19%, rgba(4,21,52,0) 100%);
    display: flex;
    flex-direction: column; 
    justify-content: end;  
    text-align: center;
    position: absolute;
    bottom: 0;
    left: 0;
    opacity: 0;
    transition: opacity 0.50s;
    overflow: hidden;
}

#about-banner .img-overlay h6 {
    font-size: 14px;
    color: var(--clWhite);
    text-transform: uppercase;
}

#about-banner .img-overlay span {
    font-size: 13px;
    font-weight: 500;
    color: var(--bgOrange);
    display: block;
}

#about-banner .img-overlay:hover {
    opacity: 1;
}

#about-banner .img-overlay >* {
    transform: translateY(220px);
    transition: transform 0.50s;
}

#about-banner .img-overlay:hover >* {
    transform: translateY(-10px);
}

/* ------------ About Page About Banner Section CSS End ------------ */

/* ------------ About Page About Descriptions Section CSS Start ---------------------- */
#about-descriptions {
    padding: 150px 0 100px 0;
}
#about-descriptions .description-box p {
    text-align: justify;
}
/* ------------ About Page About Descriptions Section CSS End ---------------------- */

/* ------------ About Page Name Section CSS Start ------------ */
#campus{
    width: 100%;
    background-color:#fef7ed;
    padding: 50px 0;
}

#campus .campus-box {
    width: 100%;
    position: relative;
    border: 8px solid #f2c298;    
}

#campus .campus-box img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

#campus .img-overlay {
    width: 100%;
    height: 100%;
    background-color: var(--bgnevytwo);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items:center;
    position: absolute;
    bottom: 0;
    left: 0;
    opacity: 0;
    transition: opacity 0.50s;
    overflow: hidden;
}

#campus .img-overlay img {
    height: 40%;
    width: 40%;
    display: block;
}

#campus .img-overlay h4 {
    font-size: 20px;
    color: var(--clWhite);
    text-transform: uppercase;
    margin-top: 15px;
}

#campus .img-overlay:hover {
    opacity: 1;
}

#campus .img-overlay a {
    text-decoration: none;
}

#campus .img-overlay >* {
    transform: translateY(60px);
    transition: transform 0.50s;
}

#campus .img-overlay:hover >* {
    transform: translateY(30px);
}

/* ------------ About Page Name Section CSS End ------------ */

/* ------------ About Page Name Section CSS Start ------------ */
#governing-body {
    padding: 100px 0;
}

#governing-body h2 span {
    color: var(--bgOrange);
}

#governing-body .member-img {
    width: 100%;
    position: relative;
}

#governing-body .member-img img {
    width: 100%;
}

#governing-body .img-overlay {
    width: 100%;
    height: 100%;
    background-color: var(--bgnevytwo);
    display: flex;
    justify-content: center;
    align-items:flex-end;
    position: absolute;
    bottom: 0;
    left: 0;
    opacity: 0;
    transition: opacity 0.50s;
    overflow: hidden;
}

#governing-body .img-overlay:hover {
    opacity: 1;
}

#governing-body .img-overlay a {
    text-decoration: none;
}

#governing-body .img-overlay >* {
    transform: translateY(60px);
    transition: transform 0.50s;
}

#governing-body .img-overlay:hover >* {
    transform: translateY(-20px);
}

#governing-body .img-overlay i {
    width: 40px;
    height: 40px;
    font-size: 24px;    
    color: var(--clWhite);
    background-color: transparent;
    border: 1px solid var(--clWhite);
    border-radius: 50%;
    margin: 5px;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: all 0.8s;
}

#governing-body .img-overlay i:hover {
    border-color: var(--bgOrange);
    background-color:var(--bgOrange);
    transition: all 0.8s;
}

#governing-body .member .member-details {
    padding: 10px;
    text-align: center;
    /* background-color:var(--headingColor); */
}

#governing-body .member .member-details h5 {
    font-size: 16px;
    padding: 13px !important;
    line-height: 18px;
}

#governing-body .member .member-details span {
    font-size: 14px;
    display: block;
}

/* ------------ About Page Name Section CSS End ------------ */

/* ------------ About Page Name Section CSS Start ------------ */
/* ------------ About Page Name Section CSS End ------------ */

/* ------------ About Page Name Section CSS Start ------------ */
/* ------------ About Page Name Section CSS End ------------ */

/* ------------ About Page Name Section CSS Start ------------ */
/* ------------ About Page Name Section CSS End ------------ */

/* ------------ About Page Name Section CSS Start ------------ */
/* ------------ About Page Name Section CSS End ------------ */

/* ------------ About Page Name Section CSS Start ------------ */
/* ------------ About Page Name Section CSS End ------------ */

/* ------------ About Page Name Section CSS Start ------------ */
/* ------------ About Page Name Section CSS End ------------ */


/* *************************** IEM About Page CSS End *************************** */

/* *************************** IEM Placement Page CSS Start *************************** */

/* ------------ Placement Page Placement Banner Section CSS Start ------------ */
#placement-banner {
    background-image: url(../img/admission-bg.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    padding: 100px 0;
}


/* ------------ Placement Page Placement Banner Section CSS End ------------ */

/* ------------ Placement Page Placement Information Section CSS Start ------------ */
#placement-info {
    padding: 100px 0;
    background-color: #f8f8f8;
}
/* ------------ Placement Page Placement Information Section CSS End ------------ */

/* ------------ Placement Page Placement Section CSS Start ------------ */
#recruitment {
    padding: 100px 0;
}

#recruitment .recruitment-box {
    width: 100%;
    height: 100px;
    padding: 15px;
    text-align: center;
    box-shadow: 0px 0px 12px -1px rgba(0, 0, 0, 0.274);
    margin-bottom: 20px;
    border-radius: 5px;
}

#recruitment .recruitment-box img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}
/* ------------ Placement Page Placement Section CSS End ------------ */

/* ------------ Placement Page Name Section CSS Start ------------ */
/* ------------ Placement Page Name Section CSS End ------------ */

/* ------------ Placement Page Name Section CSS Start ------------ */
/* ------------ Placement Page Name Section CSS End ------------ */

/* *************************** IEM Placement Page CSS End *************************** */

/* *************************** IEM Error Page CSS Start *************************** */

#error-page {
    padding: 100px 0;
    position: relative;
}

.error-box {
    text-align: center;
    position: absolute;
    top: 60%;
    left: 50%;
    transform: translateX(-50%);
}

.error-box h2 {
    color: var(--bgOrange);
}



/* *************************** IEM Error Page CSS End *************************** */

/* *************************** IEM News Bulletin Page CSS Start *************************** */

#news-bulletin {
    padding: 100px 0;
}

#news-bulletin .heading {
    margin-bottom: 50px;
}

#news-bulletin .heading h2 span {
    color: var(--bgOrange);
}

#news-bulletin .news-box {
    border-bottom: 5px solid #f2c298;
    background-color:#fef7ed;
    padding: 20px;
    border-radius: 10px;
    margin-block: 15px;
    transition: all 0.5s;
}

#news-bulletin .news-box:hover {
    background-color: #f1f0fe;
    border-bottom: 5px solid #8a8ae6;
    box-shadow: 0px 0px 13px -3px rgba(0,0,0,0.54);
    transition: all 0.5s;
}

#news-bulletin .news-box .img-news-box {
    width: 100%;
    height: 250px;
}

#news-bulletin .news-box .img-news-box img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

#news-bulletin .news-box .info-news-box {
    padding-top: 20px;
}

#news-bulletin .news-box .info-news-box .read-more {
    margin-top: 10px;
}


/* *************************** IEM News Bulletin Page CSS End *************************** */

/* *************************** IEM Contact Page CSS Start *************************** */

#contact-page {
    background-image: url(../img/contact-page-bg.jpg);
    background-repeat: no-repeat;
    background-size: contain;
    background-attachment: fixed;
    padding: 100px 0;
}

/* ---------------------- Name Section CSS Start ---------------------- */
#get-in-touch{
    padding: 100px 0;
}

#get-in-touch{
    background-color: #f8f8f8;
    padding: 100px 0;
}

#get-in-touch h2 span {
    color: var(--bgOrange);
}

#get-in-touch .accordion-area {
    background-color: var(--clWhite);
    padding: 32px;
    border-radius: 8px;
    box-shadow: 0px 0px 27px -14px rgba(0,0,0,0.50);
}

#get-in-touch .accordion-area .accordion-header {
    padding: 12px;
    cursor: pointer;
    font-size: 18px;
    font-weight: 600;
    color:var(--bgnavyblue);
}

#get-in-touch .accordion-area .accordion-header::before {
    content: "+";
    padding-right: 16px;
    font-size: 28px;
    width: 20px;
    display: inline-block;
    transform: rotate(45deg);
    transition: all 0.5s;
    position: relative;
    top: 5px;
}

#get-in-touch .accordion-area .accordion-header.collapsed::before {
    content: "+";
    width: 20px;
    display: inline-block;
    font-size: 24px;
    transform: rotate(0deg);
    transition: all 0.5s;
    position: relative;
    top: 2px;
}

#get-in-touch .accordion-area .card {
    border: none;
    border-radius: 8px;
    box-shadow: 0px 8px 19px -9px rgba(0, 0, 0, 0.40);
    margin-bottom: 8px;
    border-left: 5px solid;
}

#get-in-touch .accordion-area .card:nth-child(odd) {
    border-color: #f2c298;
    background-color:#fef7ed;
}

#get-in-touch .accordion-area .card:nth-child(even) {
    border-color: #8a8ae6;
    background-color:#f1f0fe;
}

#get-in-touch .accordion-area .card .card-body {
    padding-top: 0;
    padding-left: calc(20px + 12px + 12px);
    color: #5c5c5c;
    font-size: 14px;
}

#get-in-touch .accordion-area .card .card-body p {
    text-align: justify;
}

#get-in-touch .accordion-area .card .card-body p {
    color: var(--headingColor);
    font-size: 16px;
    font-weight: 500;
}
#get-in-touch .accordion-area .card .card-body ul {
    list-style: none;
    padding: 0;
    margin: 0;
} 
/* ---------------------- Name Section CSS End ---------------------- */

/* ---------------------- Name Section CSS Start ---------------------- */
#map iframe{
    width: 100%;
}
/* ---------------------- Name Section CSS End ---------------------- */

/* ---------------------- Name Section CSS Start ---------------------- */
#contact-form{
    padding: 50px 0;
}

#contact-form h2 {
    margin-bottom: 20px;
}

#contact-form h2 span {
    color: var(--bgOrange);
}

#contact-form .contact-form-area {
    padding: 50px;
    background-color: #ffffff;
    box-shadow: 0px 0px 27px -14px rgb(0 0 0 / 50%);
    border-bottom: 5px solid #f2c298;
    border-radius: 10px;
}

#contact-form .contact-form-area form input {
    display: block;
    margin-bottom: 20px;
    width: 100%;
    height: 40px;
    padding: 15px;
    border: none;
    outline: none;
    border-bottom: 1px solid #0c0d1c81;
    background-color:transparent;
}

#contact-form .contact-form-area form textarea {
    display: block;
    margin-bottom: 20px;
    width: 100%;
    height: 120px;
    padding: 15px;
    border: none;
    outline: none;
    border-bottom: 1px solid #0c0d1c81;
    background-color:transparent;
}

#contact-form .contact-form-area form button {
    display: block;
    margin-bottom: 20px;
    width: 100%;
    height: 50px;
    background-color:var(--bgOrange);
    color: var(--clWhite);
    font-weight: 500;
    border: none;
}

#contact-form .footer-social-site {
    margin-top: 40px;
    display: flex;
    gap: 10px;
    justify-content: center;
}

#contact-form .footer-social-site a{
    text-decoration: none;
    color: var(--bgOrange);
    font-size: 20px;
    width: 40px;
    height: 40px;
    border: 1px solid var(--bgOrange);
    border-radius: 50%;
    padding: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    overflow: hidden;
    z-index: 5;
    transition: .8s;
}

#contact-form .footer-social-site a:hover {
    color: var(--lightgrey);
    transition: .8s;
}

#contact-form .footer-social-site a::before {
    content: "";
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background-color:var(--bgOrange);
    position: absolute;
    cursor: pointer;
    transform: scale(0);
    transform-origin: center;
    transition: .8s;
    z-index: -1;
    transition: .8s;
}

#contact-form .footer-social-site a:hover::before{
    transform: scale(1.0);
    transition: .8s;
}

/* ---------------------- Name Section CSS End ---------------------- */

/* *************************** IEM Contact Page CSS End *************************** */

/* ---------------------- Name Section CSS Start ---------------------- */
/* ---------------------- Name Section CSS End ---------------------- */

/* ---------------------- Name Section CSS Start ---------------------- */
/* ---------------------- Name Section CSS End ---------------------- */

/* ---------------------- Name Section CSS Start ---------------------- */
/* ---------------------- Name Section CSS End ---------------------- */

/* ---------------------- Responsive CSS Start ---------------------- */

@media (max-width: 1200px) {}

@media (max-width: 1024px) {
    .pop-up-img {
        display: none;
    }

    .pop-up-window .pop-up-info {
        width: 100%;
        margin-left: 0px;
    }
}

@media (max-width: 992px) {
    #events .owl-carousel .owl-nav,
    #popular-courses .owl-carousel .owl-nav,
    #expert-teachers .owl-carousel .owl-nav,
    #news .owl-carousel .owl-nav,
    #feedback .owl-carousel .owl-nav,
    #governing-body .owl-carousel .owl-nav {
    justify-content: space-between;
    }

    .login .form-area {
        max-width: 60%;
        padding: 20px;
        margin-top: 100px;
    }

    .form-area h2 {
        font-size: 28px;
    }

    .navbar, .navbar.active {
        padding: 10px 0;
    }

    .nav-items, .grid_button {
        display: none;
    }

    .list-toggle {
        display: block;
    }

    #about .about-text-content {
        order: 1;
    }

    #about .about-silder {
        order: 2;
    }

    #about .about-silder {
        margin-top: 50px;
        padding-block: 150px;
    }

    #about .swiper {
        position: inherit;
        top: 0;
        left: 320px;
    }

    .course-video {
        margin-top: 20px;
    }

    #events .owl-carousel {
        display: block;
    }

    #events .events-grid {
        display: none;
    }

    #counting .counting-info {
        margin-block: 10px;
    }
}

@media (max-width: 768px) {

    #top .brand-name {
        display: none;
    }

    #top .iem-name {
        display: block;
    }

    .login .form-area {
        max-width: 70%;
        padding: 20px;
    }

    #about .about-text-content .about-doc {
        flex-direction: column;        
    }

    .form-area h2 {
        font-size: 28px;
    }

    #academic-tabs .nav-pills {
        justify-content: center;
    }

    #legal .legal-items {
        flex-direction: column;
    }

    #legal .legal-items a {
        padding-block: 20px;
    }
}

@media (max-width: 576px) {
    .login .form-area {
        max-width: 75%;
        padding: 20px;
    }

    #banner .banner-info {
    padding: 50px 0;
    }

    #banner .banner-info h2 {
        font-size: 48px;
        line-height: 60px;
        margin-block: 20px;
    }

    #banner .banner-info p {
        font-size: 14px;
        line-height: 20px;
    }

    .form-area h2 {
        font-size: 28px;
    }

    .popular-courses-info {
        flex-direction: column;
    }

    .popular-courses-img {
        width: 100%;
        margin-bottom: 20px;
    }

    .popular-courses-details {
        width: 100%;
        padding-left: 0px;
    }

    #faq .accordion-area {
        padding: 10px;
    }
}

@media (max-width: 480px) {
    h2 {
        font-size: 32px;
    }

    .login .form-area {
        max-width: 80%;
        padding: 20px;
    }

    .form-area h2 {
        font-size: 28px;
    }

    #top .top-items .text-left a, #top .top-items .text-right a {
        font-size: 14px;
    }
}

@media (max-width: 360px) {
    .login .form-area {
        max-width: 100%;
        padding: 20px;
    }

    .form-area h2 {
        font-size: 28px;
    }
}

/* ---------------------- Responsive CSS End ---------------------- */