/* ===================================== IMPORT CSS =================================== */

@import url('https://fonts.googleapis.com/css2?family=Onest:wght@100..900&family=Work+Sans:ital,wght@0,100..900;1,100..900&display=swap');



@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&display=swap');






/* ====================================== UNIVERSAL FORMAT ============================= */
*
{
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	font-family: "Onest", sans-serif;
    list-style: none;
    text-decoration: none;
    font-weight: 400;
    
}

html
{
    scroll-behavior: smooth;
}











/* ========================================== ROOT ======================================================== */
:root
{
    --primary-clr: #0E2872;
    --red-clr:#DC2422;
	--heading-clr: #010101;
    --white-clr:#fff;
    --diameter:500px;
    --grey-bg: #e3e3e4;

}



body
{
    width: 100%;
    min-height: 100vh;
}




/* ============================================= REUSBALE CODE START HERE =================================== */
.btn
{
  padding: 12px 30px;
  background-color: var(--primary-clr);
  border-radius: 25px;
  font-size: 16px;
  letter-spacing: 1px;
  transition: 0.5s;
  cursor: pointer;
  color: var(--white-clr);
  border: 1px solid var(--primary-clr);

}

.btn:hover 
{
    background-color: transparent;
    color: var(--primary-clr) ;
    border: 1px solid var(--primary-clr);

}


/* ============================== WHATSAPP BUTTON ======================= */
.top-btn
{
    position: fixed;
    right: 2rem;
    bottom: 4rem;
    opacity: 0;
    visibility: hidden;
    transition: all .4s ease;
    z-index: 200;
}

.top-btn:hover
{
 scale: 1.2;
}


.top-btn.active
{
  opacity: 1;
  visibility: visible;
}


.navbar.active
{
  box-shadow: 0px 2px 0 rgba(0,0,0,0.2);
  position: fixed;
}

.signin-btn--2
{
    padding: 10px 20px;
}
/* ============================================= REUSBALE CODE ENDS HERE =================================== */













/* ====================================== PAGE WRAPPER ================================================== */

.page__wrapper 
{
    position: relative;
    width: 100%;
    max-width: 1400px;
    min-height: 100vh;
    background-color: var(--light-grey-bg);
    margin: 0px auto;
}






/* ================================== TOPBAR STYLINGS STARTS HERE ================================ */
.top__bar
{
    width: 100%;
    padding: 12px 10%;
    background-color: var(--primary-clr);
    color: var(--white-clr);
    display: flex;
    justify-content: space-between;
}


.phone__email
{
    display: flex;
    gap: 60px;
}

.topbar__social__links
{
    position: relative;
}

.topbar__social__links a
{
    margin-left: 26px;
    color: var(--white-clr);
}

.topbar__social__links a i
{
    font-size: 18px;
    transition: 0.3s;
}


.topbar__social__links a i:hover
{
  color: var(--red-clr);
  transform: translateY(-2px);
}
/* ================================== TOPBAR STYLINGS ENDS HERE ================================ */

/* Dropdown Menu Styles */
.dropdown {
    position: relative;
}

.dropbtn {
    cursor: pointer;
}

.dropdown-content {
    display: none;
    position: absolute;
    background-color: var(--white-clr);
    min-width: 200px;
    box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.2);
    z-index: 120;
    top: 100%;
    left: -60px;
}

.dropdown-content a {
    color: var(--primary-clr);
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    font-weight: 500;
    font-size: 16px;
}

.dropdown-content a:hover {
    color: var(--red-clr);
    background-color: var(--grey-bg);
}

.dropdown:hover .dropdown-content {
    display: block;
}

/* Ensure dropdown works with hamburger menu on mobile */
.nav__list.active .dropdown-content {
    position: static;
    background-color: transparent;
    box-shadow: none;
    padding-left: 20px;
}






/* ======================================== IMAGE SLIDER STARTS HERE  ============================================ */

.mySlides img
{
    vertical-align: middle;
}


.slideshow__container
{
    max-width: 100%;
    position: relative;
    margin: auto;
}

.prev,
.next
{
    cursor: pointer;
    position: absolute;
    top: 40%;
    width: auto;
    padding: 16px;
    margin-top: -22px;
    color: var(--white-clr);
    font-weight: 400;
    font-size: 24px;
    transition: 0.6s ease;
    border-radius: 0 3px 3px 0 ;
    user-select: none;
    background-color: var(--primary-clr);
}


.prev:hover,
.next:hover
{
    
    background-color: rgba(0, 0, 0, 0.3);
    color: var(--primary-clr);
}


.next
{
    right: 0;
    border-radius: 3px 0 0 3px;
}

.texting
{
    color: var(--heading-clr);
    font-size: 22px;
    padding: 8px 12px ;
    position: absolute;
    width: 100%;
    bottom: 30px;
    background-color: var(--primary-clr);
    /* display: inline-block; */
    text-align: center;
}


.fade 
{
    animation: fade 600ms ease-in;
}

@keyframes fade {
    from { opacity: 0.9; }
    to { opacity: 1; }
}
/* ======================================== IMAGE SLIDER ENDS HERE ============================================ */







/* ===================================== HOME SECTION STYLE STARTS ============================================= */

.home
{
    position: relative;
    width: 100%;
    min-height: 100vh;
}



/* =================================  navbar styling ============================= */
.navbar
{
    position: sticky;
    top: 0;
    left: 0;
    width: 100%;
    height: 90px;
    padding: 0px 8%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    z-index: 100;
    background-color: var(--white-clr);
}


.navbar img
{
    width: 80px;
}



.active .navbar
{
    position: fixed;
    top: 0;
    left: 0;
    background-color: var(--grey-bg);
    box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.2);
    animation: animateNavbar 0.5s linear;
    z-index: 110;
}



@keyframes animateNavbar
{
    0%
    {
        transform: translateY(-100%);
    }
    100%
    {
        transform: translateY(0px);
    }
}







.nav__list
{
    text-align: center;
    display: flex;
    align-items: center;
    gap: 70px;
    font-size: 16px;
}

.nav__list li a
{
    color: var(--primary-clr);
    transition: color 0.3s;
    font-weight: 500;
    font-size: 16px;
}

.nav__list li a:hover
{
    color: var(--red-clr);
}


.signin-btn
{
    padding: 10px 25px;
    font-weight: 500;
    background-color: var(--primary-clr);
    color: var(--white-clr);
}


.signin-btn:hover
{
    background-color: transparent;
    border: 1px solid var(--primary-clr);
    color: var(--primary-clr);
}

.harbuger-btn
{
    min-width: 29px;
    height: 29px;
    width: 29px;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    cursor: pointer;
    display: none;
    /* background-color: white; */
}

.harbuger-btn span
{
    position: relative;
    display: block;
    width: 100%;
    height: 2px;
    background-color: var(--heading-clr);
    border-radius: 5px;
    transition: all 0.4s;
    color: var(--grey-bg);
}

.harbuger-btn span::before,
.harbuger-btn span::after
{
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 80%;
    height: 100%;
    background-color: var(--heading-clr);
    transition: all 0.4s;
    color: var(--grey-bg);
}

.harbuger-btn span::before
{
    transform: translateY(-9px);
}


.harbuger-btn span::after
{
    transform: translateY(9px);
}






































/* ===============================   BANNER STYLING STARTS HERE  ====================================================  */

.banner
{
    position: relative;
    width: 100%;
    min-height: calc(100vh - 80px);
    top: 40px;
    padding: 0px 8% 80px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0px 20px;
    z-index: 1;
}


/* ================  BANNER TEXT STARTS HERE ================ */
.banner__text
{
    flex-basis: 45%;
    display: flex;
    flex-direction: column;
    gap: 15px;
}






.learning
{
    font-family: "Onest", sans-serif;
    font-size: 44px;
    font-weight: 600;
    margin: 10px 0px 15px;
    line-height: 1.2;
    color: var(--primary-clr);
}


.notes 
{
    font-size: 16px;
    font-family: "Onest", sans-serif ;
    margin-bottom: 15px;
    line-height: 1.4;
}

.buttons__wrapper
{
    display: flex;
    align-items: center;
    gap: 30px;
}

.learn-more-btn
{
    background-color: transparent;
    color: var(--primary-clr);
}


.learn-more-btn:hover
{
    background-color: var(--primary-clr);
    color: var(--white-clr);
    border-color: transparent;
}
/* ===============  HERO TEXT ENDS HERE ==================== */



/* ===============  HERO IMAGE STARTS HERE ==================== */

.banner__img
{
    position: relative;
    flex-basis: 40%;
    display: flex;
}

.hero__img
{
    width: 500px;
    display: inline-block;
    object-fit: fill;
    outline-offset: 17px;
}

/* ===============  HERO IMAGE ENDS HERE ==================== */



/* ===================================== HOME SECTION STYLE ENDS =============================================== */





























































/* ===================================== PROGRAMMES SECTION STYLE STARTS =============================================== */

.academic__programmes
{
  padding: 70px 8% 70px;
}

.section__header
{
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.section__header--1
{
    font-family: "Onest", sans-serif;
    font-size: 44px;
    font-weight: 600;
    margin: 10px 0px 15px;
    line-height: 1.2;
    color: var(--primary-clr);
}

.section__header--1::before
{
    position: relative;
    content: '';
    display: inline-block;
    width: 30px;
    height: 2px;
    background-color: var(--primary-clr);
    margin-right: 10px;
    margin-bottom: 6px;
    transition: width 0.5s;
   
}

.section__header--1:hover::before
{
    width: 45px;
}

.section__header--2
{
   font-size: 18px;
   max-width: 1000px;
   margin-bottom: 30px;
}




.academic__programmesbox--wrapper
{
    display: flex;
    flex-direction: column;
    gap: 60px;
}



.academic__programme--box
{
    width: 85%;
    background-color: var(--primary-clr);
    padding: 30px 30px;
    display: flex;
    gap: 60px;
    border-radius: 30px;
}

.programme__icon
{
    width: 120px;
}


.academic__programme--contents
{
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.programme__header
{
    font-size: 32px;
    font-weight: 500;
    color: var(--white-clr);
}


.programme__requirements
{
    font-size: 18px;
    font-weight: 500;
    color: var(--white-clr);
}


.requirements__contents
{
    font-size: 16px;
    font-weight: 300;
    color: var(--white-clr);
}



.requirement--btn
{
    background-color: var(--white-clr);
    color: var(--primary-clr);
    padding: 10px 20px;
    margin-top: 10px;
}



.requirement--btn:hover
{
    background-color: transparent;
    color: var(--white-clr);
    border: 1px solid var(--white-clr);
}






















/* ===================================================== ABOUT US STARTS HERE ======================================================= */

.about
{
    position: relative;
    width: 100%;
    padding: 110px 8% 110px;
    display: grid;
    grid-template-columns: 1.2fr 1.8fr;
    background-color: var(--light-grey-bg);
    gap: 80px;
}







.about__img
{
    display: inline-block;
    width: 500px;
    height: auto;
    object-fit: cover;
}

.aboutus
{
    margin-top: -20px;
}


.isthebest
{
    font-family: "Onest" sans-serif; 
    font-size: 16px;
    font-weight: 500;
    color: var(--primary-clr);
    padding: 10px 20px;
    border: 1px solid var(--primary-clr);
    border-radius: 30px;
    margin-top: 15px;
}




.about__text
{
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
}

.mission__vision
{
    padding: 80px 8% 60px;
    background-color: var(--primary-clr);
}


.institutional__philosophies
{
    /* text-align: center; */
    margin-bottom: 50px;
    color: var(--white-clr);
}

.institutional__philosophies::before
{
    position: relative;
    content: '';
    display: inline-block;
    width: 30px;
    height: 2px;
    background-color: var(--white-clr);
    margin-right: 10px;
    margin-bottom: 6px;
    transition: width 0.5s;
   
}

.section__header--1:hover::before
{
    width: 45px;
}


.mission__vision--header
{
    font-size: 42px;
    text-align: center;
    margin-top: 30px;
    font-weight: 600;
    color: var(--white-clr);
}


.mission__text
{
    text-align: center;
    padding-block: 15px;
    max-width: 1200px;
    font-size: 16px;
    color: var(--white-clr);
}


.mission__list

{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px;
    padding-top: 10px;
    padding-bottom: 50px;
}

.mission__list--2
{
display: grid;
grid-template-columns: 1fr 1fr;
gap: 20px;
}

.mission__list--2 li
{

list-style: circle;
color: var(--white-clr);
}

.mission__list li
{

list-style: circle;
color: var(--white-clr);

}

.our__objectives
{
    color: var(--white-clr);
}


.our__values
{
    color: var(--white-clr);
    padding-block: 30px;
}


.our__values::before
{
    position: relative;
    content: '';
    display: inline-block;
    width: 30px;
    height: 2px;
    background-color: var(--white-clr);
    margin-right: 10px;
    margin-bottom: 6px;
    transition: width 0.5s;
   
}

.our__values:hover::before
{
    width: 45px;
}
/* ===================================================== ABOUT US ENDS HERE ======================================================= */




















































/* =============================================  WHY CHOOSE US STARTS HERE  =============================================== */

.whychooseus
{
   padding: 10px 8% 130px;
}


.whychooseus__headers
{
    text-align: center;
    margin-bottom: 30px;
}

.whychooseus__header--2
{
    font-size: 16px;
    margin-bottom: 55px;
}

.whychooseusboxes__wrapper
{
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 50px;
    justify-content: center;
}



.whychooseus__box
{
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 30px 20px;
    border-radius: 20px;
    text-align: center;
    box-shadow: 0px 1px 1px 1px var(--primary-clr);
    transition: 0.4s ease;
}

.whychooseus__box:hover
{
    transform: scale(1.05);
}
.whychoooseus__img
{
    width: 70px;
}

.whychooseus__boxheader
{
    color: var(--primary-clr);
    font-weight: 600;
    font-size: 16px;
}























































/* ===================================================== ACHIEVEMENTS STARTS HERE ======================================================= */

.achievements
{
    padding: 20px 8% 70px;
    width: 100%;
    background-color: var(--primary-clr);
}


.achievements__header
{
    display: flex;
    flex-direction: column;
    gap: 14px;
    /* margin-bottom: 30px; */
    
}

.our__acheivements
{
    position: relative;
    display: inline-block;
    color: var(--white-clr);
    font-family:"Onest", sans-serif ;
    font-size: 42px;
    cursor: pointer;
    font-weight: 600;
}

.our__acheivements::before
{
    position: relative;
    content: '';
    display: inline-block;
    width: 30px;
    height: 2px;
    background-color: var(--white-clr);
    margin-right: 10px;
    margin-bottom: 6px;
    transition: width 0.5s;
   
}

.our__acheivements:hover::before
{
    width: 45px;
}




.we__strive
{
    
    font-family:"Onest", sans-serif ;
    font-size: 18px;
    font-weight: 400;
    transition: all 0.9s;
    margin-bottom: 20px;
    color: var(--white-clr);
}




.achievement__boxes--grid
{
    display: grid;
    /* border: 2px solid red; */
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 40px;
    justify-content: center;
}


.achivement__box
{
    display: flex;
    flex-direction: column;
    gap: 15px;
    background: var(--primary-clr);
    padding: 30px 20px;
    border-radius: 20px;
    text-align: center;
    align-items: flex-start;

}


.achievement__header
{
    text-align: center;
    font-family: "Onest" sans-serif ;
    font-weight: 500;
    font-size: 30px;
    color: var(--white-clr);
}

.achivement__box span
{
    background-color: var(--white-clr);
    height: 2px;
    color: var(--white-clr);
    width: 250px;
}

.achievement__number
{
    text-align: center;
    font-family: "Onest" sans-serif ;
    font-weight: 600;
    font-size: 48px;
    color: var(--white-clr);
}

/* ========================================================= ACHIEVEMENTS ENDS HERE ======================================================== */




































/* =============================================== OUR LEADERSHIP SECTION STATS HERE ========================================= */
.our__leadership
{
    width: 100%;
    padding: 50px 8% 0px;
}


.our__staff--h2
{
    margin-top: 30px;
}

.profile__card--leadership
{
    position: relative;
    padding-block: 2rem;
}


.profile__card--container
{
    position: relative;
    display:grid ;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 40px;
    justify-content: center;
}




.profile__card--article
{
    position: relative;
    border-radius: 1.5rem;
    overflow: hidden;
}

.profile__card--img
{
    width: 100%;
    transition: transform .4s;
}





.profile__card--shadow
{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(180deg,
                hsla(0, 0%, 0%, 0) 70%,
                hsl(0, 0%, 0%) 100%);
     
}





.profile__card--data
{
    color: var(--white-clr);
    position: absolute;
    left: 1.5rem;
    bottom: 2rem;
}




.profile__card--name
{
    font-family: 'Onest', sans-serif;
    font-weight: 400;
    margin-bottom: .25rem;
    color: var(--grey-bg);
}

.profile__card--profession
{
    display: block;
    font-size: 18px;
    font-family: 'Onest', sans-serif;
    color: var(--grey-bg);
}

.profile__card--clip
{
    position: absolute;
    top: 1.5rem;
    right: 1.5rem;
    /* width: 2.5rem; */
    /* height: 2.5rem; */
    border-radius: 50%;
    /* background-color: hsl(52, 90%, 50%); */
    /* box-shadow: 0 0 16px 4px hsl(52, 90%, 50%); */
    display: grid;
    place-items: center;
    font-size: 1.2rem;
    color: var(--white-clr);
    z-index: 5;
    cursor: pointer;
    transition: transform .4s;
}

.profile__card--clip i
{
    font-size: 22px;
}

.profile__card--article:hover .profile__card--img
{
 transform: scale(1.2);
}

.profile__card--info
{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* background-color: hsla(0, 0%, 0%, .1); */
    backdrop-filter: blur(12px);
    padding: 3rem 1.5rem 1.5rem;
    color: white;
    clip-path: circle(0px at 88% 9%);
    transition: clip-path .5s ease-in-out;
}


.profile__card__info--name
{
    font-family: 'Onest' , sans-serif;
    font-size: 26px;
    font-weight: 400;
    margin-block: 1.5rem ;
    color: var(--white-clr);
}



.profile__card__info--description
{
    font-size: 14px;
    margin-bottom: 1rem;
     color: var(--white-clr);
}

.profile__card__info--button
{
    display: inline-flex;
    background-color: hsl(52, 90%, 50%);
    box-shadow: 0 0 12px hsl(52, 90%, 50%);
    padding: .5rem .75rem;
    border-radius: .5rem;
    color: var(--heading-clr);
    font-size: 16px;
    transition: box-shadow .4s;
    margin-block: 1rem;
}


.profile__card__info--button:hover
{
    box-shadow: 0 0 20px hsl(52, 90%, 50%);
}


.profile__card--socials
{
    position: absolute;
    left: 1.5rem;
    bottom: 1.5rem;
    display: flex;
    gap: 1rem;
}



.profile__card__info--link
{
    background-color: hsl(52, 90%, 50%);
    box-shadow: 0 0 12px hsl(52, 90%, 50%);
    width: 2rem;
    height: 2rem;
    border-radius: .75rem;
    display: grid;
    place-items: center;
    font-size: 1.5rem;
    color: var(--heading-clr) ;
    transition: transform .4s;
}


.profile__card__info--link:hover
{
  transform: translateY(-.25rem);
}


.profile__card--article:hover .profile__card--clip
{
   transform: rotate(-45deg);
}


.profile__card--info:hover,
.profile__card--clip:hover ~ .profile__card--info
{
    clip-path: circle(100%);
}



































































/* ================================================== ADMISSION STARTS HERE ================================================================ */
.admission
{
    width: 100%;
    padding: 80px 8% 80px;
    background: var(--grey-bg);
}


.admissions__header
{
    margin-bottom: 20px;

}



.admsission__intro
{
    max-width: 800px;
    font-size: 28px;
    margin-bottom: 40px;
    font-weight: 400;
}


.admissionsss
{
    position: relative;
    display: inline-block;
    color: var(--primary-clr);
    font-family:"Onest", sans-serif ;
    font-size: 48px;
    font-weight: 600;
    cursor: pointer;
    margin-bottom: 30px;
    max-width: 600px;
}





.admission__contents
{
    background-color: var(--primary-clr);
    padding: 80px 50px;
    display: grid;
    grid-template-columns: 1fr 150px;
    align-items: center;
    border-radius: 14px;
}


.admission__text
{
  flex-basis: 100%;
  padding-right: 5%;
}


.learn__from
{
    font-size: calc(24px + 1.5vw);
    line-height: 1;
    padding-block: 10px;
    max-width: 700px;
    margin-top: -40px;
    font-weight: 500;
    color: var(--white-clr);
}


.learn__here
{
    font-size: calc(14 + 0.3vw);
    max-width: 700px;
    margin-top: 20px;
    color: var(--white-clr);
    font-weight: 400;
}

.admission__btn
{
    color: var(--primary-clr);
    padding: 10px 18px;
    background-color: var(--white-clr);
    border: 1px solid var(--white-clr);
    transition: 0.4s ease;
}

.admission__btn:hover
{
    background-color: transparent;
    border: 1px solid var(--white-clr);
    color: var(--white-clr);
}

/* ================================================ AMDISSION ENDS HERE ===================================================================== */










































































/* ============================================= GALLERY STYLING STARTS HERE ============================================ */
.gallery
{
   padding: 10px 8% 100px;
}



.slider{

   
    height: 100vh;
    position: relative;
}
.slider .list .item{
    position: absolute;
    inset: 0 0 0 0;
    overflow: hidden;
    opacity: 0;
    transition: .5s;
    border-radius: 30px;
}
.slider .list .item img{
    width: 100%;
    height: 100%;
    object-fit: cover;
}




.slider .list .item::after{
    content: '';
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    bottom: 0;
    background-image: linear-gradient(
        to top, #000 1%, transparent
    );
}
.slider .list .item .content{
    position: absolute;
    left: 10%;
    top: 20%;
    width: 500px;
    max-width: 80%;
    z-index: 1;
    color: var(--white-clr);
}
.slider .list .item .content p:nth-child(1){
    text-transform: uppercase;
    letter-spacing: 10px;
}
.slider .list .item .content h2{
    font-size: 100px;
    margin: 0;
}
.slider .list .item.active{
    opacity: 1;
    z-index: 10;
}
@keyframes showContent {
    to{
        transform: translateY(0);
        filter: blur(0);
        opacity: 1;
    }
}
.slider .list .item.active p:nth-child(1),
.slider .list .item.active h2,
.slider .list .item.active p:nth-child(3){
    transform: translateY(30px);
    filter: blur(20px);
    opacity: 0;
    animation: showContent .5s .7s ease-in-out 1 forwards;
}
.slider .list .item.active h2{
    animation-delay: 1s;
}
.slider .list .item.active p:nth-child(3){
    animation-duration: 1.3s;
}
.arrows{
    position: absolute;
    top: 30%;
    right: 50px;
    z-index: 100;
}
.arrows button{
    background-color: #eee5;
    border: none;
    font-family: monospace;
    width: 40px;
    height: 40px;
    border-radius: 5px;
    font-size: x-large;
    color: #eee;
    transition: .5s;
}
.arrows button:hover{
    background-color: #eee;
    color: black;
}
.thumbnail{
    position: absolute;
    bottom: -20px;
    z-index: 11;
    display: flex;
    gap: 10px;
    width: 100%;
    height: 250px;
    padding: 0 50px;
    box-sizing: border-box;
    overflow: auto;
    justify-content: center;
}
.thumbnail::-webkit-scrollbar{
    width: 0;
}
.thumbnail .item{
    width: 150px;
    height: 220px;
    filter: brightness(.5);
    transition: .5s;
    flex-shrink: 0;
}
.thumbnail .item img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 10px;
}
.thumbnail .item.active{
    filter: brightness(1);
}
.thumbnail .item .content{
    position: absolute;
    inset: auto 10px 10px 10px;
    color: var(--white-clr);
    
}
@media screen and (max-width: 678px) 
{
    .list .item .content
    
    {
        margin-top: -40px;
    }



    .thumbnail{
        justify-content: start;
    }
    .slider .list .item .content h2{
        font-size: 60px;
    }
    .arrows{
        top: 10%;
    }
}










































































































/* ==================================================== NEWS STARTS  HERE ============================================================== */

.news
{
    width: 100%;
    padding: 90px 8% 20px;
}



.news__headers
{
    display: flex;
    flex-direction: column;
    gap: 30px;
}



.latest__news
{
    font-family: "Onest" ,sans-serif;
    position: relative;
    display: inline-block;
    color: var(--text-clr);
    font-family:"Onest", sans-serif ;
    font-size: 36px;
    font-weight: 500;
    cursor: pointer;
    max-width: 600px;
}


.latest__news::before
{
    position: relative;
    content: '';
    display: inline-block;
    width: 30px;
    height: 1px;
    background-color: var(--heading-clr);
    margin-right: 10px;
    margin-bottom: 6px;
    transition: width 0.5s;
   
}


.latest__news:hover::before
{
    width: 45px;
}



.updates

{
    /* text-align: center; */
    font-weight: 400;
    font-size: 32px;
    font-family: 'Onest', sans-serif;
    
    color: var(--heading-clr);
    margin-top: 40px;
}


.owl__carousel
{
    display: grid;
    /* border: 2px solid red; */
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 20px;
    justify-content: center;
    margin-top: 50px;
}


.news__item
{
    padding: 35px 30px;
    cursor: pointer;
    transition: all 0.3s;
    background: #C8C8C8;
    border-radius: 14px;
    margin-bottom: 30px;
}



.news__box
{
    display: flex;
    flex-direction: column;
    gap: 10px;
}


.news__headings
{
    display: flex;
    align-items: center;
    gap: 20px;
}

.upadated__news
{
    font-family: 'Onest' , sans-serif;
    max-width: 560px;
    font-size: 16px;
}


.news__date
{
    font-size: 14px;
    font-weight: 300;
    padding: 8px 16px;
    margin: 16px 0 18px;
    background: #DDE4FF;
    width: fit-content;
    border-radius: 50px;
}

.news__description
{
    margin-bottom: 19px;
}

.news__download--button a
{
    padding: 10px 15px;
    background-color: var(--primary-clr);
    border-radius: 20px;
    transition:  all 0.4s ease-in ;
    color: var(--white-clr);
}



.news__download--button a:hover
{
 background-color: transparent;
 border: 1px solid var(--primary-clr);
 color: var(--primary-clr);
}



.card__conteiner--new
{
    /* max-width: 1400px; */
    /* margin: 0 60px 35px; */
    margin-bottom: 40px;
    overflow: hidden;
}



.card__conteiner--new .swiper-pagination-bullet
{
    opacity: 0.8;
    background: var(--primary-clr);

}

.card__conteiner--new .swiper-pagination-bullet-active
{
    opacity: 1;
}

.card__conteiner--new .swiper-slide-button
{
    display: none;
}

.card__conteiner--new .card__list .card__item .card__link
{
  display: block;
  background: #C8C8C8;
  padding: 10px;
  border-radius: 14px;
  user-select: none;
  color: var(--heading-clr);
}


.card__link .card__image
{
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    border-radius: 10px;
}


.badge
{
    padding: 8px 16px;
    margin: 16px 0 18px;
    background: #DDE4FF;
    width: fit-content;
    border-radius: 50px;
    font-weight: 300;
}



.card__title--news-2
{
    /* font-family: 'Onest', sans-serif; */
    font-size: 16px;
    font-weight: 400;
}

.card__button
{
    height: 35px;
    width: 35px;
    border-radius: 50%;
    background-color: transparent;
    /* color: #5372F0; */
    /* border: 2px solid #5372F0; */
    cursor: pointer;
    transform: rotate(-45deg);
    border: none;
    
}

.read__more--news
{
    display: flex;
    align-items: center;
    gap: 1px;
    margin: 30px 0 5px;
}


.read__more__text
{
    font-size: 16px;
    text-decoration: underline;
}



/* ========================================================== NEWS SECTION ENDS HERE ======================================================= */













































/* ===================================================  FOOTER SECTION STARTS HERE ====================================================== */
.footer
{
    position: relative;
    /* margin-top: 7px; */
    width: 100%;
    padding: 70px 8% 100px;
    background-color: var(--primary-clr);
    display: grid;
    grid-template-columns: 3fr 2fr 2fr 2fr;
    gap: 30px;
}

.footer__column
{
    position: relative;
    z-index: 2;
}

.column__header
{
    position: relative;
    margin-bottom: 20px;
}

.column__header h2
{
    font-size: calc(16px + 0.6vw);
    color: var(--white-clr);
    font-weight: 500;
}

.footer__column-1 .column__header img
{
    width: calc(100px + 0.6vw);
}

.column__paragraph
{
    font-size: 15px;
    color: var(--white-clr);
    line-height: 1.3;
}



.column__paragraph--2
{
    font-size: 15px;
    color: var(--white-clr);
    line-height: 1.3;
    margin-top: 20px;
    margin-bottom: 40px;

}

.footer__social__media a i
{
    color: var(--white-clr);
    text-decoration: none;
    font-size: calc(14px + 0.4vw);
    margin-right: 15px;
    transition: color 0.3s;
}


.footer__social__media a i:hover
{
    color: var(--red-clr);
}


.footer__column-2 .column__description
{
 display: flex;
 flex-direction: column;
 gap: 20px;
}

.contact__row
{
    margin-bottom: 15px;
    display: flex;
    flex-direction: column;
    color: var(--white-clr);
}


.contact__row span
{
    color: var(--white-clr);
    font-size: 16px;
}





.contact__row span:nth-child(1)
{
  color: var(--white-clr);
  font-size: 17px;
  font-weight: 500;
  margin-bottom: 2px;
}




.footer__column-3 .column__description
{
   display: flex;
   flex-direction: column;
}


.footer__column-3 .column__description a
{
    position: relative;
    text-decoration: none;
    color: var(--white-clr);
    margin-bottom: 15px;
    align-self: flex-start;
    transition: all 0.3s;
    left: 15px;
}


.footer__column-3 .column__description a:before
{
    content: '';
    position: absolute;
    width: 7px ;
    height: 7px;
    background-color: var(--white-clr);
    border-radius:50% ;
    left: -15px;
    top: 50%;
    transform: translateY(-50%);
}

.footer__column-3 .column__description a:hover
{
    letter-spacing: 3px;
}


.footer__column--4 .column__description
{
    display: flex;
    flex-direction: column;
}


.footer__column--4 .column__description p
{
    font-size: 15px;
    color: var(--white-clr);
    line-height: 1.3;
}

.footer__column--4 .column__description form
{
    display: flex;
    flex-direction: column;
    margin-top: 20px;
}

.footer__column--4 .column__description form input
{
    width: 100%;
    padding: 12px;
    border: 1px solid var(--white-clr);
    background-color: var(--primary-clr);
    outline: none;
    border-radius: 5px;
    margin-bottom: 20px;
}

.email-submit-btn
{
    background-color: var(--white-clr);
    color: var(--primary-clr);
    border-radius: 5px;
}

.email-submit-btn:hover
{
    background-color: transparent;
    border: 1px solid var(--white-clr);
    color: var(--white-clr);
}
/* ===================================================  FOOTER SECTION ENDS HERE ======================================================== */




























/* ==================================================== COPYRIGHT SECTION STARTS =======================================================  */

.copyright
{
    padding: 0px 8%;
    background-color: var(--primary-clr);
}


.line
{
    width: 100%;
    height: 1px ;
    background-color: var(--white-clr);
}

.copyright__created
{
    padding: 25px 0px;
    display: flex;
    justify-content: space-between ;
    color: var(--white-clr);
}


.copyright__created span a
{
    color: var(--white-clr);
}


/* ==================================================== COPYRIGHT SECTION ENDS =======================================================  */









































































/* ====================================== MEDIA QUERY STARTS HERE ============================================== */

@media (max-width :1200px)
{
  /* =========== topbar =============== */
.phone__email span,
.phone__email i
{
    font-size: 12px;
}



/* ============ NAVBAR =============== */
.navbar
{
    gap: 10px;
}

.navbar .nav__list li a
{
    font-size: 12px;
}

.signin-btn
{
    display: none;
}


/* ============== HOME =============== */
.hero__img,
.about__img

{
    width: 400px;
}


/* ========== BTN ======== */
.btn
{
    padding: 10px 15px;
    font-size: 14px;
}

/* ======== ABOUT US ======= */
.isthebest
{
    padding: 10px 10px;
    font-size: 12px;
}

}














@media (max-width :1068px)
{

/* =========== topbar =============== */
.phone__email span,
.phone__email i
{
    font-size: 12px;
}



/* ============ NAVBAR =============== */
.navbar
{
    gap: 10px;
}

.navbar .nav__list li a
{
    font-size: 12px;
}

.signin-btn
{
    display: none;
}


/* ============== HOME =============== */
.hero__img,
.about__img

{
    width: 400px;
}


/* ========== BTN ======== */
.btn
{
    padding: 10px 15px;
    font-size: 14px;
}

/* ======== ABOUT US ======= */
.isthebest
{
    padding: 10px 10px;
    font-size: 12px;
}

/* ===== ACADEMIC DEPT.==== */
.card__wrapper
{
  justify-content:center;
  grid-template-columns: repeat(2, 1fr);
}




}






@media(max-width :968px)
{




/* ============== HOME =============== */
.banner
{
    flex-direction: column;
    align-items: flex-start;
    top: 70px;
    gap: 70px 0px;
}

.banner__text,
.banner__img,
.about__img
{
 flex-basis: 100%;
}






}


@media(max-width :868px)
{
  


    .dropdown-content 
    {
        background-color: hsla(0, 0%, 69%, 0.71);
    }
    
    .dropdown-content a:hover 
    {
    color: var(--red-clr);
    background-color: hsla(0, 0%, 69%, 0.71) ;
    }


    .mission__list,
    .mission__list--2
    {
        display: flex;
        flex-direction: column;
    }



    .learning
    {
        width: 100%;
    }




    .learning br
    {
        display: none;
    }
    .list .item .content
    {
        margin-top: -40px;
    }



   /* ============= TOPBAR ============== */
     .topbar__social__links
    {
      display: none;
    }


    /* ============== HOME =============== */
    .harbuger-btn
    {
    display: flex;
    z-index: 101;
    }


    .harbuger-btn .active span
    {
        background-color: transparent;
    }

    .harbuger-btn .active span,
    .harbuger-btn .active span::before,
    .harbuger-btn .active span::after

    {
       width: 100%;
    }

    .harbuger-btn .active span::before
    {
        transform: rotate(45deg) translateY(0px);
    }

    .harbuger-btn .active span::after
    {
        transform: rotate(-45deg) translateY(0px);
    }


    

    .nav__list
    {
        position: fixed;
        width: 100%;
        height: 100vh;
        top: 0;
        /* right: 0; */
        right: -100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        background-color: var(--grey-bg);
        transition: right 0.8s;
        z-index: 100;
        gap:10px;
        margin-right: 0px;
        font-size: 2rem;
        
    }

    .nav__list.active
    {
        right: 0px;
    }



    .nav__list li
    {
        margin-right: 0px;
        margin-top: 20px;
    }

    .nav__list li a
    {
        color: var(--primary-clr);
        font-weight: 300;
        font-size: 2rem;
        
    }

    .nav__list li:first-child
    {
         margin-top: 150px;
    }
    
    .signin-btn
    {
        display: none;
    }

    .learn-more-btn
    {
        padding: 10px 20px;
    }
    
    
    /* =========== ABOUT SECTION =========== */
    .about
    {
        /* margin-top: 10px; */
        grid-template-columns: 1fr;
    }

    
    .about__img
    {
        display: flex;
        justify-content: flex-start;
        width: 350px;
        
    }

    /* ===== ACADEMIC DEPT.==== */
    .card__wrapper
    {
   justify-content: center;
   grid-template-columns: repeat(1, 1fr);
   gap: 50px;
    }

    /* =========== NEWS ============ */
   .card__conteiner--new .card__list .card__item .card__link
   {
    width: 100%;
   }


   /* =========== FOOTER ========== */
   .footer
   {
    grid-template-columns: 1fr 1fr;
   }


    /* =========== Image slider ========= */
   .prev,
   .next{
    font-size: 14px;
    top: 60%;
   }

   .mySlides img
   {
    margin-top: 2rem;
    scale: 1.1;
   }


}



















@media(max-width :768px)
{



/* ============== ADMISSIONS =========== */
.admission__contents
{
    grid-template-columns: 1fr;
    gap: 30px 0px ;
    padding: 80px 30px;
}


}




@media(max-width :668px)

{
    /* ============= ACADEMIC PROGRAMMES ========= */

    .academic__programme--box
    {
        display: flex;
        flex-direction: column;
        gap: 20px;
        width: 100%;
    }


    /* =========== FOOTER ========== */
   .footer
   {
    grid-template-columns: 1fr ;
    grid-area: 40px 0px;
   }
    
   /* ========= COPYRIGHT ========= */
   .copyright__created
   {
    flex-direction: column;
    align-items: center;
    gap: 20px;
   }
}




@media(max-width :568px)
{
     .top__bar
     {
     display: none;
        
     }


     
}



@media(max-width :468px)
{
    /* =========== HOME SECTION ========== */
    .banner__img
    {
        width: 100%;
        justify-content: center;
    }

    .hero__img
    {
        width: calc(100% - 34px);
        height: auto;
    }


}