@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
/* font-family: "Poppins", sans-serif; */
/* Thin 100
ExtraLight 200
Light 300
Regular 400
Medium 500
SemiBold 600
Bold 700
ExtraBold 800
Black 900
Thin 100 Italic
ExtraLight 200 Italic
Light 300 Italic
Regular 400 Italic
Medium 500 Italic
SemiBold 600 Italic
Bold 700 Italic
ExtraBold 800 Italic
Black 900 Italic */
:root{
    --color-gray: #e1e5e7;
    --color-dark-gray: #282828;
    --color-blue: #4299d7;

    --font-poppins : "Poppins", sans-serif;
    --font-14: 14px;
    --font-16: 16px;

}
/* ================
Global style
=============== */
body{
    padding: 0%;
    margin: 0%;
    font-family: var(--font-poppins);
    font-weight: 400;
    font-size: var(--font-14);
}
::placeholder {
    color: #8f8f8f;
    opacity: 1; /* Firefox */
    text-transform: uppercase;
    font-weight: 400;
    font-size: var(--font-14);
  }
  
  ::-ms-input-placeholder { /* Edge 12 -18 */
    color: #8f8f8f;
    text-transform: uppercase;
  }
  .form-select, .form-control {
    color: #8f8f8f;
    text-transform: uppercase;
    font-weight: 400;
    font-size: var(--font-14);
    border-radius: 0px;
    padding: 15px 15px;
}
.section-title {
    font-size: 45px;
}
.description {
    font-size: var(--font-16);
    font-weight: 400;
    line-height: 28px;
}
/* ================
top menu
=============== */
.top-menu {
    background-color: var(--color-gray);
    padding: 7px;
}
.top-menu-ul {
    margin-bottom: 0%;
    padding-left: 0%;
    list-style: none;
    display: flex;
    gap: 15px;
    height: 100%;
    align-items: center;
    font-weight: 500;
    font-size: var(--font-14);
}
.top-social-menu-ul {
    margin-bottom: 0%;
    padding-left: 0%;
    list-style: none;
    display: flex;
    gap: 15px;
    justify-content: flex-end;
    align-items: center;
    font-weight: 500;
    font-size: var(--font-14);
}
.top-social-menu-ul li a {
    text-decoration: none;
    color: var(--color-dark-gray);
    border: 1px solid var(--color-dark-gray);
    width: 40px;
    height: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 25px;
    transition: 0.3s;
}
.top-social-menu-ul li a:hover{
    background-color: var(--color-blue);
    color: var(--bs-white);
    border: 1px solid var(--color-blue);
}
.codlyt-nav {
    padding: 10px 50px;
}
.codlyt-nav .nav-link {
    font-size: var(--font-16);
    font-weight: 500;
}
.codlyt-nav .nav-link.active, .codlyt-nav .nav-link.show{
    font-weight: 700;
    color: var(--color-blue);
}

/* ================
    Banner section
=============== */
.bg-home-banner {
    max-height: 680px;
    background-size: cover;
    background-position: center center;
}
.banner-text-box {
    min-height: 680px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    gap: 35px;
    padding-bottom: 50px;
}
.banner-text-box h1 {
    color: var(--bs-white);
    font-weight: 700;
    text-transform: uppercase;
    font-size: 45px;
}
.banner-text-box .hilight-text {
    font-size: var(--font-16);
    color: var(--color-blue);
    text-transform: uppercase;
    font-weight: 400;
}
.banner-text-box .italic-text {
    color: var(--bs-white);
    font-weight: 300;
    font-style: italic;
    font-size: var(--font-14);
}
.enq-form-card {
    border: none;
    margin-bottom: -70px;
}
.enq-form-card h4 {
    background-color: #051b46;
    border: none;
    color: var(--bs-white);
    text-transform: uppercase;
    width: 100%;
    padding: 20px 10px;
    font-size: 21px;
    text-align: center;
    margin-bottom: 0;
}
.enq-form-card .card-body{
    background-color: var(--color-gray);
}
.btn-banner-enq {
    background-color: #233f53;
    border: none;
    color: var(--bs-white);
    text-transform: uppercase;
    width: 100%;
    padding: 10px;
    font-size: 21px;
    border-radius: 5px;
}
.banner-btn-box {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 25px;
}
.btn-blue-line {
    text-decoration: none;
    text-align: center;
    padding: 15px;
    border-radius: 5px;
    border: 1px solid var(--color-blue);
    color: var(--bs-white);
    font-size: var(--font-16);
    text-transform: uppercase;
}
.btn-white{
    background-color: var(--bs-white);
    text-decoration: none;
    text-align: center;
    padding: 15px;
    border-radius: 5px;
    border: 1px solid var(--bs-white);
    color: var(--bs-black);
    font-size: var(--font-16);
    text-transform: uppercase;
}

/* ================
    About Us section
=============== */
.bg-about {
    position: relative;
    overflow: hidden;
    padding: 50px 0px 100px 0px;
}
.about-text-box {
    min-height: 700px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 25px;
}
.section-title.text-blue{
    color: #051b46;
}
.section-title>span{
    font-weight: 700;
}
.about-img-box {
    position: relative;
    min-height: 700px;
    display: flex;
    /* gap: 25px; */
    flex-direction: column;
    justify-content: center;
}
.animated-box {
    position: absolute;
    right: -500px;
    top: 50%;
    transform: translateY(-40%);
    width: 400px;
    height: 400px;
    z-index: -1;
    background-color: var(--color-blue);
    animation: slideRightToLeft 2s ease-in-out forwards;
}

@keyframes slideRightToLeft {
    0% {
        right: -500px;
    }
    100% {
        right: 0;
    }
}
.img1 {
    margin-left: 50px;
    width: 450px;
    max-width: 100%;
}
.img2 {
    position: absolute;
    left: 0;
    bottom: 0px;
    width: 156px;
    height: 156px;
    border: 10px solid var(--color-blue);
}
.vision-card {
    border: none;
    border-radius: 50%;
    padding: 15px;
    text-align: center;
    width: 300px;
    height: 300px;
    max-width: 100%;
    display: flex;
    justify-content: center;
    gap: 25px;
    position: relative;
    margin: auto;
}
.vision-card>img {
    background-color: var(--bs-white);
    padding: 10px;
    border-radius: 50%;
    width: 100px;
    position: absolute;
    top: 0%; 
    left: 50%; 
    transform: translate(-50%, -50%);
}
.vision-card.blue{
    background-color: #051b46;
    color: var(--bs-white);
}
.vision-card.red{
    background-color: #051b46;
    color: var(--bs-white);
}
.vision-card.yellow{
    background-color: #051b46;
    color: var(--bs-white);
}
.vision-card.green{
    background-color: #051b46;
    color: var(--bs-white);
}


.vision-card div>h5 {
    text-transform: uppercase;
    font-size: 22px;
    letter-spacing: 2px;
    font-weight: 600;
}
.vision-card div>p {
    font-size: 22px;
    letter-spacing: 2px;
    font-weight: 400;
}
.vision-card div>h2 {
    text-transform: uppercase;
    font-size: 56px;
    letter-spacing: 7px;
    font-weight: 500;
}
/* ================
    Course section
=============== */
.bg-course{
    padding: 50px 0px;
}
.bg-course .table-blue>tr>th {
    background-color: #051b46;
    color: var(--bs-white);
    font-size: 22px;
    font-weight: 400;
}
.bg-course tbody, .bg-course td, .bg-course tfoot, .bg-course th, .bg-course thead, .bg-course tr {
    border-color: inherit;
    border-style: solid;
    border-width: 0;
    padding: 20px !important;
    font-size: 19px;
    font-weight: 500;
}
.bg-course .table>:not(caption)>*>* {
    padding: .5rem .5rem;
    color: var(--bs-white);
    background-color: #1a57cc85;
    border-bottom-width: 0px;
    box-shadow: inset 0 0 0 9999px var(--bs-table-bg-state, var(--bs-table-bg-type, var(--bs-table-accent-bg)));
}
.bg-course .table-striped>tbody>tr:nth-of-type(odd)>* {
    --bs-table-color-type: var(--bs-table-striped-color);
    --bs-table-bg-type: rgb(255 255 255 / 5%);
    background-color: #1a72ff4f;
}
.table-footer tr th {
    background-color: var(--bs-white) !important;
    font-size: 25px;
    font-weight: 600;
    color: #051b46 !important;
}
/* ================
    about 2 section
=============== */
.bg-about2 {
    padding: 50px 0px;
    position: relative;
    overflow: hidden;
}
.section-title-box>h5 {
    text-transform: uppercase;
    letter-spacing: 4px;
    font-size: 20px;
}
.img3 {
    width: 370px;
    max-width: 100%;
}
/* Left to Right Animation */
.animated-box.left {
    transform: translateY(-20%);
    left: -500px; /* Start off-screen on the left */
    animation: slideLeftToRight 2s ease-in-out forwards;
}

@keyframes slideLeftToRight {
    0% {
        left: -500px; /* Start completely off-screen */
    }
    100% {
        left: 0; /* Move to the left edge of container */
    }
}

/* ================
    facilities section
=============== */
.bg-facilities{
    padding: 50px 0px;
}
.owl-facilit {
    display: flex;
    gap: 15px;
    justify-content: space-between;
}
.facilit-item {
    text-align: center;
    width: 100%;
}
.facilit-item h4 {
    font-size: 20px;
    text-transform: uppercase;
    text-align: center;
    letter-spacing: 4px;
    border-top: 1px solid var(--color-gray);
    margin: 0;
    padding: 10px 0px;
}
.img-faculty {
    height: 200px;
    object-fit: cover;
}
.desc-box {
    background-color: #051b46;
    padding: 15px;
    height: 200px;
}
.desc-box p {
    color: var(--bs-white);
    font-weight: 400;
    font-size: var(--font-14);
    margin-bottom: 0;
    line-height: 24px;
}
.owl-facilit .owl-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: -64px;
    width: 110%;
    display: flex;
    justify-content: space-between;
}
.owl-nav button {
    background-color: var(--color-blue) !important;
    width: 50px;
    height: 50px;
    border-radius: 0px !important;
    opacity: 1 !important;
    margin: 0px !important;
    cursor: pointer !important;
}
.owl-nav button.owl-prev:after {
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    content: "\f053";
    font-size: 24px;
    color: var(--bs-white);
}
.owl-nav button.owl-next:after {
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    content: "\f054";
    font-size: 24px;
    color: var(--bs-white);
}
.owl-nav button>span {
    display: none;
}
.owl-prev.disabled, .owl-next.disabled {
    opacity: 0.3 !important;
}
/* ================
    Testimonial section
=============== */
.bg-testimonial {
    padding: 50px 0px;
    background-color: var(--color-blue);
    height: 750px;
}
.item-testimonial{
    background: rgb(66 153 215);
    background: linear-gradient(103deg, rgba(0, 0, 0, 0) 0%, rgb(58 144 205) 100%);
    padding: 15px;
}
.test-desc-box p {
    color: var(--bs-white);
    font-weight: 400;
    font-size: var(--font-14);
    margin-bottom: 0;
    line-height: 24px;
}
.owl-carousel .owl-item .img-client {
    width: 76px;
}
.owl-carousel .owl-item .img-quote {
    width: 30px;
    margin-bottom: 16px;
}
.client-dtls>h4{
    font-size: var(--font-16);
    font-weight: 500;
    color: var(--bs-white);
}
.client-dtls>p{
    font-size: 12px;
    font-weight: 400;
    color: var(--bs-white);
    margin: 0;
}
.owl-theme .owl-dots .owl-dot span {
    width: 20px;
    height: 4px;
    border-radius: 0px;
}
.owl-theme .owl-dots .owl-dot.active span, .owl-theme .owl-dots .owl-dot:hover span {
    background: #145888;
}
/* ================
    Partner section
=============== */
.bg-partner{
    margin-top: -230px;
}
.owl-partner .partner-item img{
    width: 100%;
}
.owl-partner .owl-nav{
    display: flex;
    gap: 15px;
    justify-content: center;
}
.bg-event{
    padding: 50px 0px;
}
/* ================
    Footer section
=============== */
.bg-footer {
    background-color: var(--color-blue);
    margin-top: -300px;
    padding-top: 350px;
}
.footer-logo{

}
.footer-item-title {
    font-size: var(--font-16);
    font-weight: 600;
    color: var(--bs-white);
    margin-bottom: 25px;
}
.footer-link-ul {
    color: var(--bs-white);
    padding-left: 19px;
}
.footer-link-ul li a {
    text-decoration: none;
    color: var(--bs-white);
    font-size: var(--font-14);
    font-weight: 400;
    line-height: 27px;
}
.ftr-desc{
    text-decoration: none;
    color: var(--bs-white);
    font-size: var(--font-14);
    font-weight: 400;
    line-height: 27px;
    margin-bottom: 0;
}
.addreff-flex {
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 15px;
    margin-bottom: 15px;
}
.addreff-flex img {
    padding-top: 7px;
}
.footer-social-media{
    justify-content: flex-start;

}
.footer-social-media li a {
    color: var(--bs-white);
    border: 1px solid var(--bs-white);
    border-radius: 5px;
}
.footer-social-media li a:hover {
    background-color: var(--bs-white);
    color: var(--color-blue);
    border: 1px solid var(--bs-white);
}
.bottom-footer {
    background-color: #215589;
    padding: 15px;
}