/* urbanist */
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,100..1000;1,9..40,100..1000&family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&family=Open+Sans:ital,wght@0,300..800;1,300..800&family=Roboto:ital,wght@0,100..900;1,100..900&family=Urbanist:ital,wght@0,100..900;1,100..900&display=swap');
/* inter */
@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');

/* dmsans */
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,100..1000;1,9..40,100..1000&family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&family=Open+Sans:ital,wght@0,300..800;1,300..800&family=Roboto:ital,wght@0,100..900;1,100..900&family=Urbanist:ital,wght@0,100..900;1,100..900&display=swap');


* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: "Inter", sans-serif;
}

:root {
    --border-btn: #3384F9;
    --body-bg: #F6F7F9;
    --dark-black: #000;
    --white: #fff;
    --cloud-gray: #E5E7EB;
    --brown: #281D1B;
    /* --dark-slate: #181D27; */
    --box-shadow: 0px 10px 15px -3px #F3F4F6, 0px 4px 6px -4px #F3F4F6;
    --offcanvas-border: #E9EAEB;
    --charcoal-gray: #414651;
    --charcoal: #181D27;
    --light-gray: #D5D7DA;
    --gray-slate: #717680;
    --gray-tb: #969696;
    --royal-blue: #1E1841;
    --dim-grey: rgba(255, 255, 255, 0.60);
    --navy-blue: #2C2748;
    /* --dark-brown: #4A4A4A; */
    /* --blackish-blue: #2C2748; */
    --dim-black: #4A4A4A;
    --mat-black: #1E1E1E;
    /* --alpha-black: rgba(0, 0, 0, 0.50); */
    --light-pink: #F6F0F0;
    /* --red: #A8093D; */
    --darkish-gray: #F8F8F8;
    --border-gray: #F2F2F2;
    --dim-white: rgba(255, 255, 255, 0.80);
    --maroon: #A8093D;
    --beige:#F7F7F7;
    --dark-blue:#1F1941;
    --pink:#FFE4EA;
    --aliceblue:#F0F5F9;
    --light-green:#F5FCEF;
    --cream-color:#FFFAF6;
    --purple:#FFFAF6;
    --grey:#F4F6F8;

}


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

/* custom-color-classes */
/* .dark-brown {
    color: var(--dark-brown);
} */

.red {
    color: var(--maroon);
}

.royal-blue {
    color: var(--royal-blue);
}

.darkish-gray {
    color: var(--darkish-gray);
}

.light-pink {
    background-color: var(--light-pink);
}

.border-gray {
    border: 1px solid var(--border-gray);
}

.dim-white,.alpha-black {
    color: var(--dim-white);
}

.brown {
    color: var(--brown);
}

.dim-black,.dark-brown {
    color: var(--dim-black);
}

/* .blackish-blue {
    color: var(--blackish-blue);
} */

.dim-grey {
    color: var(--dim-grey);
}

.amt-black {
    color: var(--mat-black);
}

.gray-tb {
    color: var(--gray-tb);
}

.gray-slate {
    color: var(--gray-slate);
}

.charcoal,.text-dark-slate {
    color: var(--charcoal);
}

.light-white {
    color: var(--white);
    opacity: 0.4;
}

/* .alpha-black {
    color: var(--alpha-black);
} */

.charcoal-gray {
    color: var(--charcoal-gray);
}

.bg_white {
    background: var(--white);
}

.text-dark-black {
    color: var(--dark-black);
}

.text-white,
.white {
    color: var(--white);
}

/* .text-dark-slate {
    color: var(--dark-slate);
} */

.bg-dark-slate {
    background-color: var(--charcoal);
}

.light-white {
    color: var(--white);
    opacity: 0.6;
}

.navy-blue,.blackish-blue {
    color: var(--navy-blue);
}

.border-btn {
    color: var(--border-btn);
}

.underline {
    text-decoration: underline
}

.inter {
    font-family: "Inter", sans-serif;
}

.urbanist {
    font-family: "Urbanist", sans-serif;
}

.dm-sans {
    font-family: "DM Sans", sans-serif;

}

h1,
h2,
h3,
h4,
h5,
h6 {
    line-height: 1.2;
    word-break: break-word;

}

p,
a,
span {
    line-height: 1.5;
    word-break: break-word;
    text-decoration: none;
}



h1 {
    font-size: 64px;
    font-weight: 600;
}

h2 {
    font-size: 48px;
    font-weight: 600;
}

h3 {
    font-size: 36px;
    font-weight: 700;
}

h4 {
    font-size: 24px;
    font-weight: 700;
}

h5 {
    font-size: 20px;
    font-weight: 400;
}

h6,
.fs-16 {
    font-size: 16px;
    font-weight: 400;
}


p,
.fs-13 {
    font-size: 13px;
    font-weight: 400;
}

.fs-14 {
    font-size: 14px;
}
.fs-15 {
    font-size: 15px;
}

.fs-18 {
    font-size: 18px;
}

.fs-22 {
    font-size: 22px;
}
.fs-38 {
    font-size: 38px;
}
.fs-34 {
    font-size: 34px;
}

/* fontweight */
.fw-300 {
    font-weight: 300;
}

.fw-400 {
    font-weight: 400;
}

.fw-500 {
    font-weight: 500;
}

.fw-600 {
    font-weight: 600;
}

.fw-700 {
    font-weight: 700;
}
#kt_scrolltop {background-color: var(--maroon);}
#kt_scrolltop i{ color:var(--white);}
#kt_scrolltop:hover {background-color: var(--maroon);}
.footer-main {
    background: var(--royal-blue);
}

.footer-main .navbar-nav {
    gap: 7em;
}

.footer-border-top {
    border-top: 1px solid var(--dim-grey);
}

.card {
    border-radius: 10px;
    border: 1px solid var(--cloud-gray);
    background: var(--white);
    padding: 25px;
    height: 100%;
}

.key-features-sec .card .card-body {
    border-radius: 10px;
    background: var(--grey);
    /* width: 475px; */
}

.simplify-service {
    background: url(../media/images/hero-bg.png) no-repeat;
    background-size: cover;
    background-position: center;
}


.social-icon i {
    font-size: 20px;
    color: var(--white);
}

.banner-section {
    border-radius: 16px;
    background: var(--dark-blue);
    padding: 5em;
}

.manage-img {
    width: 100%;
}

.platform {
    padding-top: 100px;
}

.breadcrumb i {
    color: white;
    font-size: 16px;
}

.about-img-parent {
    width: 600px;
}

.mission-card.card,
.vision-card.card {
    border-radius: 16px;
    background: var(--aliceblue);
    padding: 45px 38px;
}

.vision-card.card {
    background: var(--purple);
}

.client-card .card-header,
.staff-card.card .card-header,
.communication-card.card .card-header,
.plan-card.card .card-header {
    /* height: 100px; */
    width: 74px;
}

.client-card.card,
.staff-card.card,
.communication-card.card,
.plan-card.card {
    border-radius: 16px;
    /* background: var(--cream-color); */
    padding: 34px;
}

/* --subscription--csss */

.Subscription_card {
    padding: 24px;
    border-radius: 6px;
    border: 1.5px solid rgba(0, 0, 0, 0.00);
    background: linear-gradient(0deg, var(--white) 0%, var(--white) 100%), rgba(0, 0, 0, 0.09);
    box-shadow: 0px 10px 15px -3px #F3F4F6, 0px 4px 6px -4px #F3F4F6;
}

/* --testimonials-- */
.testimonial-card .star-ratings i {
    color: var(--maroon);

}

.testimonial-card:hover {
    background-color: var(--royal-blue);
    color: var(--white);
}

/* Change text colors on hover */
.testimonial-card:hover .testimonial-text,
.testimonial-card:hover .testimonial-user,
.testimonial-card:hover .user-name {
    color: var(--white);
}


.testimonial-card:hover .filled-star {
    color: var(--white);
}

.testimonial-card .testimonial-text {
    color: var(--royal-blue);
}

.testimonial-card .user-name {
    color: var(--royal-blue);
    font-size: var(--fs-10);
}

.testimonial-card {
    border-radius: 20px;
    background: var(--darkish-gray);
    padding: 24px;
    width: 90%;
}

.custom-swiper-prev,
.custom-swiper-next {
    width: 40px;
    height: 40px;
    background-color: #ffffff;
    border-radius: 50%;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    background-size: 50%;
    background-repeat: no-repeat;
    background-position: center;
    transition: all 0.3s ease-in-out;
    z-index: 10;
    cursor: pointer;
    /* Add cursor pointer for better UX */
}

.swiper {
    position: unset !important;
}


.swiper-button-prev::after,
.swiper-button-next::after {
    display: none;
}

.swiper-button-prev.custom-swiper-prev {
    padding: 22px;
    top: 58%;
    left: 3%;
}

.swiper-button-next.custom-swiper-next {
    top: 58%;
    right: 3%;
    padding: 22px;
}

/* .staff-card.card {
    background: var(--light-green);
}

.communication-card.card {
    background: var(--aliceblue);
}

.plan-card.card {
    background: var(--pink);
} */

.blue-container {
    border-radius: 16px;
    background: var(--dark-blue);
    padding: 34px;
}

.who-we-serve img {
    border-radius: 16px;
}
.ligh-blue-bg,.contact-bg{
    background-image: url('../media/images/educator-bg.png');
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    border-radius: 16px;
    padding: 50px 15px;

}
.red-btn,.white-btn {
    border-radius: 14px;
    background: var(--maroon);
    border: 1px solid var(--maroon);
    padding: 16px 32px;
    font-family: Inter;
    font-size: 16px;
    font-weight: 600;
    color: var(--white);
}
.red-btn:hover,.white-btn {
    background: var(--white);
    color: var(--maroon);
    transition: 0.2s ease-in;
}
.white-btn:hover{
       background: var(--maroon);
    color: var(--white);
    transition: 0.2s ease-in;
}

.red-btn:hover i {
    color: var(--maroon);
    transition: 0.2s ease-in;
}

.red-btn i {
    color: var(--white);
    font-size: 16px;

}

.managment-sec .managment-head {
    max-width: 368px;
}

.image-wrapper {
    position: relative;
    /* width: fit-content;
    display: inline-block; */
    height: 200px;
}

.image-wrapper::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 50%; 
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.8) 100%);
  pointer-events: none;
}

.contact-card {
    background: var(--white);
    box-shadow: 0 0 37.3px 0 rgba(102, 102, 102, 0.10);
    padding: 64px 34px;
}

input.form-control, textarea.form-control {
    background-color: var(--beige);
    outline: none;
    border: none;
    border-radius: 0;
    padding: 15px 0 15px 15px;
    color: #1E1E40;
    font-family: Urbanist;
    font-size: 13px;
    font-weight: 400;
}

.form-control:focus {
    background: var(--beige);
    outline: none;
    box-shadow: none;
    border: none;
}
.contact-bg{
    background-image: url('../media/images/contact-bg2.png');
        padding: 3em 3em;
}
.contact-social-icon i {
    color: var(--white);
    background: var(--maroon);
    border-radius: 40px;
    padding: 10px;
    font-size: 17px;
}

.contact-socialmedia-icons i {
    font-size: 18px;
    color: var(--royal-blue);
}
.footer-main .nav-link:focus,.footer-main .nav-link:hover {
    color: var(--white);
}
.footer-logo{
    width: 260px;
}
.mission-n-vision .card {
    min-height: 368px;
}

/* 4 color pattern — repeats automatically */
 .row > div.offer-card-parent:nth-child(4n + 1) .offer-card {
  background: var(--cream-color);/* cream */
}
 .row > div.offer-card-parent:nth-child(4n + 2) .offer-card {
    background: var(--light-green);/*green*/
}
 .row > div.offer-card-parent:nth-child(4n + 3) .offer-card {
  background: var(--aliceblue); /* blue */
}
 .row > div.offer-card-parent:nth-child(4n + 4) .offer-card {
  background: var(--pink); /* pink */
}