/* ===== Start - Common (Repetitive) Section Styles ===== */
/* ===== Start - CTA Banner Section ===== */
.CTA-Banner {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 30px;

    height: 300px;

    background-image: url(../Assets/Image/Common/BG.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;

    padding: 0 120px;
    border-radius: 10px;

    margin: var(--section-pad) var(--page-pad) 0 var(--page-pad);
}
    @media (max-width: 1400px) {
        .CTA-Banner {
            height: 290px;
            padding: 0px 80px;
        }
    }
    @media (max-width: 1200px) {
        .CTA-Banner {
            height: 280px;
            padding: 0px 50px;
        }
    }
    @media (max-width: 1000px) {
        .CTA-Banner {
            gap: 22px;
            height: 270px;
            padding: 0px 25px;
        }
    }
    @media (max-width: 768px) {
        .CTA-Banner {
            flex-direction: column;
            gap: 30px;

            height: 300px;
        }
    }


/* CTA Banner Left Side Line */
.CTA-Banner .Line {
    height: 40%;
    padding: 10px 0 0 0;
}
    @media (max-width: 768px) {
        .CTA-Banner .Line {
            display: none;
        }
    }


/* CTA Banner Main Text */
.CTA-Banner h1,
.CTA-Banner h4 {
    color: var(--white);
}
    @media (max-width: 768px) {
        .CTA-Banner h1,
        .CTA-Banner h4 {
            text-align: center;
        }
    }

.CTA-Banner h1 {
    font-size: calc(var(--size-large) - 3rem);
    font-weight: var(--weight-medium);
    padding: 0 0 5px 0;
}
    @media (max-width: 768px) {
        .CTA-Banner h1 {
            line-height: 30rem;
            padding: 0 0 10px 0;
        }
    }


/* CTA Banner Button */
.CTA-Banner .Contact {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;

    background-color: var(--white);
    border-radius: 100px;
    padding: 0 0 0 40px;

    cursor: pointer;
}
    @media (max-width: 1200px) {
        .CTA-Banner .Contact {
            padding: 0 0 0 30px;
        }
    }
    @media (max-width: 1000px) {
        .CTA-Banner .Contact {
            gap: 0;
            padding: 0 0 0 20px;
        }
    }

.CTA-Banner .Contact p {
    width: 120px;
    font-weight: var(--weight-medium);
}
    .CTA-Banner .Contact p:hover {
        color: var(--orange);
    }
    @media (max-width: 1200px) {
        .CTA-Banner .Contact p {
            width: 110px;
        }
    }

.CTA-Banner .Contact img {
    width: 60px;
}
    @media (max-width: 1200px) {
        .CTA-Banner .Contact img {
            width: 55px;
        }
    }
    @media (max-width: 1000px) {
        .CTA-Banner .Contact img {
            width: 50px;
        }
    }
    @media (max-width: 500px) {
        .CTA-Banner .Contact img {
            width: 45px;
        }
    }
/* ===== End - CTA Banner Section ===== */



/* ===== Start - Swiper Slider Customization ===== */
.swiper-slide {
    height: auto !important;
}

.Slider-Arrow {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.Slider-Arrow img {
    width: 20px;
    background-color: var(--bg-blue);
    padding: 13px;
    border-radius: 100px;
    box-sizing: content-box;

    cursor: pointer;
}
    .Slider-Arrow img:hover {
        filter: brightness(1) invert(1);
    }

.Slider-Arrow .Prev {
    transform: rotate(180deg);
}
/* ===== End - Swiper Slider Customization ===== */
/* ===== End - Common (Repetitive) Section Styles ===== */



/* ===== Start - Intro Section Details ===== */
.Intro-Details {
    background-image: url(../Assets/Image/Intro/BG.jpg);
    height: 540px;
}
    @media (max-width: 768px) {
        .Intro-Details {
            height: 875px;
        }
    }


.Intro-Details h1 span {
    color: var(--black);
}


/* Intro Banner Links */
.Intro-Details .Banner-Links ,
.Intro-Details .Banner-Links a{
    display: flex;
    align-items: center;
    justify-content: flex-start;
}

.Intro-Details .Banner-Links {
    gap: 50px;
}
    @media (max-width: 1400px) {
        .Intro-Details .Banner-Links {
            gap: 35px;
        }
    }
    @media (max-width: 768px) {
        .Intro-Details .Banner-Links {
            flex-direction: column;
            gap: 15px;
        }
    }
    @media (max-width: 500px) {
        .Intro-Details .Banner-Links {
            gap: 10px;
        }
    }

.Intro-Details .Banner-Links a {
    gap: 20px;
    border-radius: 100px;
}
    .Intro-Details .Banner-Links a:nth-of-type(1){
        background-color: var(--orange);
    }
    .Intro-Details .Banner-Links a:nth-of-type(1):hover {
        background-color: var(--red);
    }

    .Intro-Details .Banner-Links a:nth-of-type(2){
        background-color: var(--green);
    }
    .Intro-Details .Banner-Links a:nth-of-type(2):hover {
        background-color: var(--till-light);
    }
    @media (max-width: 1000px) {
        .Intro-Details .Banner-Links a {
            gap: 15px;

            width: 270px;
        }
    }
    @media (max-width: 768px) {
        .Intro-Details .Banner-Links a {
            width: 260px;
        }
    }

.Intro-Details .Banner-Links img {
    width: 60px;
}
    @media (max-width: 1400px) {
        .Intro-Details .Banner-Links img {
            width: 55px;
        }
    }
    @media (max-width: 768px) {
        .Intro-Details .Banner-Links img {
            width: 50px;
        }
    }
    @media (max-width: 500px) {
        .Intro-Details .Banner-Links img {
            width: 45px;
        }
    }

.Intro-Details .Banner-Links p {
    font-weight: var(--weight-medium);
    color: var(--white);
    padding: 0 50px 0 0;
}
    @media (max-width: 1000px) {
        .Intro-Details .Banner-Links p {
            padding: 0;
        }
    }
/* ===== End - Intro Section Details ===== */



/* ===== Start - Course Section ===== */
.Course {
    padding: 0 var(--slider-pad);
    margin: var(--section-pad) 0 0 0;
}


/* Course Slider */
.Course .swiper {
    width: calc(92% - var(--page-pad));
}


/* Course Slider Arrow Position */
.Course .Slider-Arrow img {
    position: absolute;
    top: 1195px;
}

.Course .Slider-Arrow img:nth-of-type(1) {
    left: 6.5%;
}
.Course .Slider-Arrow img:nth-of-type(2) {
    right: 6.5%;
}
    @media (max-width: 1400px) {
        .Course .Slider-Arrow img {
            top: 1160px;
        }
        .Course .Slider-Arrow img:nth-of-type(1) {
            left: 3.9%;
        }
        .Course .Slider-Arrow img:nth-of-type(2) {
            right: 3.9%;
        }
    }
    @media (max-width: 1200px) {
        .Course .Slider-Arrow img {
            top: 1110px;
        }
        .Course .Slider-Arrow img:nth-of-type(1) {
            left: 3.1%;
        }
        .Course .Slider-Arrow img:nth-of-type(2) {
            right: 3.1%;
        }
    }
    @media (max-width: 1000px) {
        .Course .Slider-Arrow img:nth-of-type(1) {
            left: 1%;
        }
        .Course .Slider-Arrow img:nth-of-type(2) {
            right: 1%;
        }
    }
    @media (max-width: 768px) {
        .Course .Slider-Arrow {
            display: none;
        }
    }


.Course-Items-Wrapper {
    margin: var(--sub-section-pad) 0 0 0;
}


/* Course Section Individual Items */
.Course-Item {
    padding: 30px;
}

.Course-Item:nth-of-type(even) {
    background-color: var(--bg-blue);
}

.Course-Item:nth-of-type(odd) {
    outline: 5px solid var(--bg-blue);
    outline-offset: -5px;
}

.Course-Item img {
    width: 80px;
}

.Course-Item h3 {
    font-weight: var(--weight-medium);
    padding: 10px 0 10px 0;
}

.Course-Item h5 {
    color: var(--grey);
}

    .Course-Item h3:hover {
        color: var(--orange);
    }

.Course-Item .Arrow {
    display: flex;

    width: fit-content;
    margin: 20px 0 0 auto;

    padding: 12px;
    border-radius: 100px;
}

.Course-Item .Arrow img {
    width: 20px;
}

.Course-Item:nth-of-type(even) .Arrow {
    background-color: var(--white);
}

.Course-Item:nth-of-type(odd) .Arrow {
    background-color: var(--till);
}

.Course-Item:nth-of-type(odd) .Arrow img {
    filter: brightness(0) invert(1);
}

    .Course-Item .Arrow:hover {
        background-color: var(--orange) ;
    }
/* ===== End - Course Section ===== */



/* ===== Start - About Us Section ===== */
.About-Us {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;

    padding: 0 var(--page-pad);
    margin: var(--section-pad) 0 0 0;
}
    @media (max-width: 1200px) {
        .About-Us {
            gap: 15px;
        }
    }
    @media (max-width: 1000px) {
        .About-Us {
            gap: 20px;
        }
    }
    @media (max-width: 768px) {
        .About-Us {
            flex-direction: column;
            gap: 30px;
        }
    }


/* Left Side Image */
.About-Us .Image {
    flex-basis: 50%;
}
    @media (max-width: 1000px) {
        .About-Us .Image {
            flex-basis: 40%;
        }
    }
    @media (max-width: 768px) {
        .About-Us .Image {
            padding: 0 5%;
        }
    }
    @media (max-width: 500px) {
        .About-Us .Image {
            padding: 0 0 0 15px;
        }
    }

.About-Us .Image img {
    max-width: 100%;
}


/* Right Side Details */
.About-Us .Details {
    flex-basis: 50%;

    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 15px;
}
    @media (max-width: 1400px) {
        .About-Us .Details {
            gap: 10px;
        }
    }
    @media (max-width: 1200px) {
        .About-Us .Details {
            gap: 5px;
        }
    }
    @media (max-width: 1000px) {
        .About-Us .Details {
            flex-basis: 60%;
        }
    }
    @media (max-width: 768px) {
        .About-Us .Details {
            gap: 10px;
        }
    }
    @media (max-width: 500px) {
        .About-Us .Details {
            gap: 5px;
        }
    }


/* About Us Heading */
.About-Us .Details .Highlight {
    font-weight: var(--weight-semi-bold);
}

.About-Us .Details h1 {
    font-size: calc(var(--size-large) - 5rem);
    font-weight: var(--weight-medium);
    padding: 0 30% 0 0;
}
    @media (max-width: 1400px) {
        .About-Us .Details h1 {
            padding: 0 20% 0 0;
        }
    }
    @media (max-width: 1000px) {
        .About-Us .Details h1 {
            padding: 0;
        }
    }

.About-Us .Details h4 {
    padding: 0 10% 0 0;
    line-height: 27rem;
}
    @media (max-width: 1200px) {
        .About-Us .Details h4 {
            padding: 0 5% 0 0;
        }
    }
    @media (max-width: 1000px) {
        .About-Us .Details h4 {
            padding: 0;
        }
    }
    @media (max-width: 500px) {
        .About-Us .Details h4 {
            padding: 5px 0 0 0;
            line-height: 25rem;
        }
    }


/* About Us Feature Points */
.About-Us .Details .Checks {
    display: grid;
    grid-template-columns: 40% 60%;
    align-items: center;
    justify-content: flex-start;
    row-gap: 15px;
    column-gap: 5px;

    width: 100%;
    padding: 20px 0;
}
    @media (max-width: 500px) {
        .About-Us .Details .Checks {
            grid-template-columns: 45% 55%;
            row-gap: 10px;
        }
    }

.About-Us .Details .Checks div {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
}

.About-Us .Details .Checks h4 {
    font-weight: var(--weight-medium);
}

.About-Us .Details .Check img {
    width: 17px;
}


/* About Us Know More Button */
.About-Us .Details .btn-More {
    font-size: calc(var(--size-regular) - 2rem);
    font-weight: var(--weight-medium);
    color: var(--white);
    background-color: var(--black);
    padding: 15px 40px;
    border-radius: 6px;
}
    .About-Us .Details .btn-More:hover {
        background-color: var(--orange);
    }
    @media (max-width: 1200px) {
        .About-Us .Details .btn-More {
            padding: 13px 35px;
        }
    }
    @media (max-width: 768px) {
        .About-Us .Details .btn-More {
            align-self: center;
        }
    }
/* ===== End - Course Section ===== */



/* ===== Start - Test Section ===== */
.Test {
    padding: 0 var(--slider-pad);
    margin: var(--section-pad) 0 0 0;
}


/* Test Slider */
.Test .swiper {
    width: calc(95% - var(--page-pad));
}
    @media (max-width: 768px) {
        .Test .swiper {
            width: 100%;
        }
    }
    @media (max-width: 500px) {
        .Test .swiper {
            width: 90%;
        }
    }


/* Test Slider Arrow Position */
.Test .Slider-Arrow img {
    position: absolute;
    top: 2500px;
}

.Test .Slider-Arrow img:nth-of-type(1) {
    left: 6%;
}
.Test .Slider-Arrow img:nth-of-type(2) {
    right: 6%;
}
    @media (max-width: 1400px) {
        .Test .Slider-Arrow img {
            top: 2350px;
        }
        .Test .Slider-Arrow img:nth-of-type(1) {
            left: 3%;
        }
        .Test .Slider-Arrow img:nth-of-type(2) {
            right: 3%;
        }
    }
    @media (max-width: 1200px) {
        .Test .Slider-Arrow img {
            top: 2190px;
        }
        .Test .Slider-Arrow img:nth-of-type(1) {
            left: 1.5%;
        }
        .Test .Slider-Arrow img:nth-of-type(2) {
            right: 1.5%;
        }
    }
    @media (max-width: 1000px) {
        .Test .Slider-Arrow img {
            top: 2080px;
        }
        .Test .Slider-Arrow img:nth-of-type(1) {
            left: 0.5%;
        }
        .Test .Slider-Arrow img:nth-of-type(2) {
            right: 0.5%;
        }
    }
    @media (max-width: 850px) {
        .Test .Slider-Arrow img {
            top: 2120px;
        }
    }
    @media (max-width: 768px) {
        .Test .Slider-Arrow {
            display: none;
        }
    }


.Test-Items-Wrapper {
    margin: var(--sub-section-pad) 0 0 0;
}


/* Test Section Individual Items */
.Test-Item {
    padding: 25px;
}

.Test-Item:nth-of-type(odd) {
    background-color: var(--bg-blue);
    
}

.Test-Item:nth-of-type(even) {
    outline: 3px solid var(--bg-blue);
    outline-offset: -3px;
}

.Test-Item img {
    width: 70px;
}

.Test-Item h2 {
    font-size:calc(var(--size-medium) + 3rem );
    font-weight: var(--weight-semi-bold);
    padding: 10px 0 0 0;
}

.Test-Item h5 {
    color: var(--grey);
}

    .Test-Item h2:hover,
    .Test-Item h4:hover,
    .Test-Item h5:hover {
        color: var(--black);
    }

.Test-Item .Arrow {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 15px;

    margin: 10px 0 0 0;    
}

.Test-Item .Arrow img {
    width: 42px;
}

.Test-Item .Arrow h4 {
    font-weight: var(--weight-medium);
}
/* ===== End - Test Section ===== */



/* ===== Start - CTA Banner Section (Corporate Sector) ===== */
.CTA-Banner.Corporate {
    background-color: var(--red);
}
/* ===== End - CTA Banner Section (Corporate Sector) ===== */



/* ===== Start - Offer Section ===== */
.Offer-Banner {
    padding: 0 var(--page-pad);
    margin: var(--section-pad) 0 0 0;
}
    @media (max-width: 1000px) {
        .Offer-Banner {
            padding: 0;
        }
    }

.Offer-Banner img {
    max-width: 100%;
}
/* ===== End - Offer Section ===== */



/* ===== Start - Testimonial Section ===== */
.Testimonial {
    padding: 90px var(--page-pad) 100px var(--page-pad);
    margin: var(--section-pad) 0 0 0;

    background-color: var(--black);
}


/* Testimonial Items Wrapper */
.Testimonial-Items-Wrapper {
    display: flex;
    align-items: stretch;
    justify-content: center;
    gap: 25px;

    padding: var(--sub-section-pad) 0 0 0;
}
    @media (max-width: 1200px) {
        .Testimonial-Items-Wrapper {
            gap: 20px;
        }
    }
    @media (max-width: 1000px) {
        .Testimonial-Items-Wrapper {
            flex-direction: column;
            align-items: center;
            gap: 30px;
        }
    }
    @media (max-width: 500px) {
        .Testimonial-Items-Wrapper {
            gap: 22px;
        }
    }


/* Testimonial Section Individual Items */
.Testimonial-Items-Wrapper .Item {
    flex-basis: 50%;

    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;

    background-color: var(--white);
    padding: 27px;
    border-radius: 10px;
}
    @media (max-width: 1200px) {
        .Testimonial-Items-Wrapper .Item {
            gap: 20px;
            padding: 18px;
        }
    }
    @media (max-width: 1000px) {
        .Testimonial-Items-Wrapper .Item {
            gap: 30px;
            padding: 22px;
        }
    }
    @media (max-width: 768px) {
        .Testimonial-Items-Wrapper .Item {
            padding: 20px;
        }
    }
    @media (max-width: 500px) {
        .Testimonial-Items-Wrapper .Item {
            flex-direction: column;
        }
    }

.Testimonial-Items-Wrapper .User {
    width: 180px;
    border-radius: 10px;
}
    @media (max-width: 1200px) {
        .Testimonial-Items-Wrapper .User {
            width: 150px;
        }
    }

.Testimonial-Items-Wrapper .Rating {
    width: 130px;
}

.Testimonial-Items-Wrapper h2,
.Testimonial-Items-Wrapper h4 {
    font-weight: var(--weight-medium);
}

.Testimonial-Items-Wrapper h2 {
    font-size: calc(var(--size-medium) + 1.5rem);
    padding: 3px 0 0 0;
}

.Testimonial-Items-Wrapper .Review {
    padding: 15px 0;
}
    @media (max-width: 1200px) {
        .Testimonial-Items-Wrapper .Review {
            font-size: calc(var(--size-xs) - 1rem);
            padding: 12px 0;
        }
    }
    @media (max-width: 500px) {
        .Testimonial-Items-Wrapper .Review {
            padding: 8px 0;
        }
    }

/* ===== End - Testimonial Section ===== */



/* ===== Start - Our Principles Section ===== */
.Our-Principle {
    padding: 0 var(--page-pad);
    margin: var(--section-pad) 0 0 0;
}


/* Our Principles Items Wrapper */
.Our-Principle-Items-Wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 90px;

    padding: var(--sub-section-pad) 0 0 0;
}
    @media (max-width: 1400px) {
        .Our-Principle-Items-Wrapper {
            gap: 70px;
        }
    }
    @media (max-width: 1200px) {
        .Our-Principle-Items-Wrapper {
            gap: 50px;
        }
    }


/* Our Principles Individual Items */
.Our-Principle-Items-Wrapper .Item {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 90px;
}
    @media (max-width: 1400px) {
        .Our-Principle-Items-Wrapper .Item {
            gap: 80px;
        }
    }
    @media (max-width: 1200px) {
        .Our-Principle-Items-Wrapper .Item {
            gap: 60px;
        }
    }
    @media (max-width: 1000px) {
        .Our-Principle-Items-Wrapper .Item {
            flex-direction: column;
            gap: 30px;
        }
    }


/* Left Side Image */
.Our-Principle-Items-Wrapper .Item .Image {
    max-width: 100%;
}

.Our-Principle-Items-Wrapper .Item:nth-of-type(2) .Image-Wrapper {
    order: 2;
}
    @media (max-width: 1000px) {
        .Our-Principle-Items-Wrapper .Item:nth-of-type(2) .Image-Wrapper {
            order: 0;
        }
    }


/* Right Side Details */
.Our-Principle-Items-Wrapper .Item .Details {
    flex-basis: 50%;
}
    @media (max-width: 1400px) {
        .Our-Principle-Items-Wrapper .Item .Details {
            flex-basis: 52%;
        }
    }
    @media (max-width: 1200px) {
        .Our-Principle-Items-Wrapper .Item .Details {
            flex-basis: 67%;
        }
    }

.Our-Principle-Items-Wrapper .Item h2 {
    font-size: calc(var(--size-medium) + 4rem);
    font-weight: var(--weight-medium);
}

.Our-Principle-Items-Wrapper .Item h4 {
    color: var(--grey);
    line-height: 27rem;
    padding: 20px 0;
}
    @media (max-width: 1400px) {
        .Our-Principle-Items-Wrapper .Item h4 {
            padding: 10px 0;
        }
    }
    @media (max-width: 1200px) {
        .Our-Principle-Items-Wrapper .Item h4 {
            line-height: 25rem;
        }
    }

.Our-Principle-Items-Wrapper .Item a {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 15px;
}

.Our-Principle-Items-Wrapper .Item a h4 {
    color: var(--black);
    font-weight: var(--weight-semi-bold);
}
    .Our-Principle-Items-Wrapper .Item a h4:hover {
        color: var(--orange);
    }

.Our-Principle-Items-Wrapper .Item a img {
    width: 22px;
}
/* ===== End - Our Principles Section ===== */



/* ===== Start - CTA Banner Section (Join Us) ===== */
.CTA-Banner.Join-Us {
    background-color: var(--green);
    margin: var(--section-pad) var(--page-pad);
}
/* ===== End - CTA Banner Section (Join Us) ===== */