@import url('https://fonts.googleapis.com/css?family=Lato:400,400i,700,700i,900,900i&display=swap');

:root {
    --font-primary: 'Lato', sans-serif !important;
    --primary-font: 'Lato', sans-serif !important;
    /* Add any other font variables you find here, e.g. --secondary-font */
}

body.evo {
    /* --- Font & Primary Colors --- */
    --font-primary: 'Lato', sans-serif !important;
    --primary-font: 'Lato', sans-serif !important;
    --active-color: #cea52d !important;
    --active-color-hover: 206, 165, 45 !important;
    --highlight-color: #cea52d !important;
    --link-color: #b89529 !important;
    --link-color-hover: #cea52d !important;

    /* --- Background Colors --- */
    --body-bg-color: #f4f2ef !important;
    --content-bg-color: #f4f2ef !important;
    --content-light-bg-color: #fffef9 !important;
    --evo-header-bg-color: #f4f2efeb !important;
    --evo-sub-side: #ffffff !important;
    --popup-bg: #ffffff !important;
    --popup-widget-bg: #f4f2ef !important;
    --popup-bg-container: #fff !important;
    --dropdown-bg: #fffffff7 !important;
    --left-bar-bg: #333333 !important;
    --section-nav-bg: #ffffff !important;
    --section-nav-gray: #f5f2ea !important;
    --nav-pullout-bg: #fffffff2 !important;
    --light-gray-bg: #f4f2ef !important;
    --tags-bg: #f5f2ea !important;
    --alert-bg: #fff9e6 !important;
    --input-bg: #fff !important;
    --disabled-bg: #f5f2ea !important;
    --th-bg-color: #f4f2ef !important;
    --editor-bg-color: #fff !important;
    --invert-bg-color: #fff !important;
    --copilot-bg: #fff !important;
    --copilot-bg-msg: #f5f2ea !important;
    --copilot-chat-bg: #f9fbff !important;
    --copilot-chat-input: #f5f2ea !important;

    /* --- Text Colors --- */
    --main-text-color: #333333 !important;
    --light-text-color: #444444 !important;
    --light-grey-text-color: #666666 !important;
    --placeholder-text: #888888 !important;
    --text-white: #fff !important;
    --left-bar-text: #e2cd98 !important;
    --color-gray: #666666 !important;

    /* --- Button Colors --- */
    --button-color: #ffffff !important;
    --button-color-2: #333333 !important;
    --button-color-3: #cea52d !important;
    --button-color-4: #ffffff !important;
    --button-bg-2: #f5f2ea !important;
    --button-bg-3: #ffffff !important;
    --button-bg-4: #333333 !important;
    --button-dark-bg: 51, 51, 51 !important;
    --button-gray-bg: #f5f2ea !important;
    --button-gray-bg-hover: #edeae1 !important;
    --button-hover-bg: #f5f2ea !important;
    --button-hover-bg-2: #edeae1 !important;
    --copilot-btn-light-hover: #edeae1 !important;
    --copilot-btn-light-visited: #f5f2ea !important;

    /* --- Border & Shadow Colors --- */
    --main-border-color: #e9e4d9 !important;
    --border-darker-color: #dcd6c8 !important;
    --border-color-light: #f5f2ea !important;
    --border-color-bg: #ffffff !important;
    --input-border-color: #dcd6c8 !important;
    --button-border-color: #e9e4d9 !important;
    --button-border-color-3: #cea52d !important;
    --table-border-color: #f5f2ea !important;
    --table-border-color-highlight: #cea52d !important;
    --user-table-border-color: #dcd6c8 !important;
    --tile-shadow: 0px 5px 10px -2px rgba(51, 51, 51, 0.04) !important;
    --box-shadow: 0px 5px 6px 0px rgba(51, 51, 51, 0.04) !important;
    --box-shadow-hover: 0px 5px 6px 0px rgba(51, 51, 51, 0.08) !important;
    --box-shadow-btn: 0px 3px 5px 0px rgba(51, 51, 51, 0.02) !important;
    --box-shadow-btn-hover: 0px 5px 6px 0px rgba(51, 51, 51, 0.08) !important;
    --box-shadow-heavy: 0px 5px 6px 0px rgba(51, 51, 51, 0.08) !important;
    --box-shadow-inset: inset 0 2px 5px rgba(51, 51, 51, 0.08) !important;

    /* --- Table & Interaction Colors --- */
    --table-selected: #fff9e6 !important;
    --table-row-alternate: #fdf8ef !important;
    --hover-color: #f5f2ea6e !important;
    --left-nav-bg: #fff !important;
    --left-nav-bg-hover: #f4f2ef !important;
    --nav-button-hover: #0000006e !important;
    --tool-bar-color: #ffffffeb !important;
    --scroll-bar-color: #c4bca9 !important;
    --scroll-bar-bg-color: #f4f2ef !important;

    /* --- Status & Message Colors --- */
    --progress-bar-color: #cea52d !important;
    --success-color: #00a572 !important;
    --color-green: #00a572 !important;
    --color-blue: #5da9d6 !important;
    --color-purple: #A584F3 !important;
    --color-yellow: #FCB707 !important;
    --color-red: #F46060 !important;
    --error-msg-bg: #ffe9e9 !important;
    --error-msg-text: #c72e2c !important;
    --color-red-bg: rgb(244, 96, 96) !important;
    --color-green-bg: rgb(0, 165, 114) !important;
    --color-overlay-bg: rgba(51, 51, 51, 0.67) !important;
    --color-lightgray: #f4f2ef !important;
    --bullet-color: #dcd6c8 !important;

    /* --- Font Sizes & Weights (Generally Unchanged) --- */
    --main-border-r: 10px;
    --border-r-rounded: 50px;
    --box-shadow-transition: box-shadow .3s ease-in-out, border .3s ease-in-out;
    --widget-text-font-size: .85rem;
    --font-size-smaller: .7rem;
    --font-size-small: .75rem;
    --font-size-regular: .8rem;
    --font-size-medium: .85rem;
    --font-size-large: .9rem;
    --font-size-larger: 1rem;
    --font-weight-thin: 300;
    --font-weight-light: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    --font-weight-bolder: 800;
}

body.evo,
body.evo * {
    font-family: 'Lato', sans-serif !important;
}

body.evo h1,
body.evo h2,
body.evo h3,
body.evo h4,
body.evo h5,
body.evo h6 {
    font-family: 'Lato', sans-serif !important;
}



/* HOME PAGE CLASS LANDING PAGE DIV STYLING START */
@media (max-width: 770px) {

    /* Styles for mobile devices */
    .class-home-div {
        padding: 50px;
        margin: 10px;
        display: block;
    }

    .class-home-div h1 {
        font-size: 30px !important;
    }

    .class-home-div p {
        font-size: 16px !important;
    }

    .class-inner-left {
        padding: 5px 10px;
    }

    .class-inner-right {
        padding: 5px 10px;
    }

    #current-courses-title {
        padding-top: 25px;
    }
}

@media (min-width: 771px) and (max-width: 979px) {

    /* Styles for tablets */
    .class-home-div {
        padding: 50px;
        margin: 20px;
        display: flex;
    }

    .class-home-div h1 {
        font-size: 30px !important;
    }

    .class-home-div p {
        font-size: 18px !important;
    }

    .class-inner-left {
        padding: 20px;
    }

    .class-inner-right {
        padding: 20px;
    }

    #current-courses-title {
        padding-top: 50px;
    }
}


@media (min-width: 980px) and (max-width: 1100px) {

    /* Styles for laptops */
    .class-home-div {
        padding: 50px;
        margin: 25px;
        display: flex;
    }

    .class-home-div h1 {
        font-size: 32px !important;
    }

    .class-home-div p {
        font-size: 18px !important;
    }

    .class-inner-left {
        padding: 20px;
    }

    .class-inner-right {
        padding: 20px;
    }

    #current-courses-title {
        padding-top: 50px;
    }
}

@media (min-width: 1101px) {

    /* Styles for desktops */
    .class-home-div {
        padding: 50px;
        margin: 25px auto 25px auto;
        display: flex;
    }

    .class-home-div h1 {
        font-size: 32px !important;
    }

    .class-home-div p {
        font-size: 18px !important;
    }

    .class-inner-left {
        padding: 20px;
    }

    .class-inner-right {
        padding: 20px;
    }

    #current-courses-title {
        padding-top: 50px;
    }
}

.class-home-div {
    max-width: 950px;
    border-radius: 15px;
    background-color: #9F5448;
    justify-content: center;
    align-items: center;
    box-shadow: rgba(0, 0, 0, .05) 0 5px 30px, rgba(0, 0, 0, .2) 0 2px 10px;
}

#current-courses-title {
    font-weight: 900;
    color: #333;
    font-size: 40px;
    text-align: center;
    font-family: 'Lato' !important;
}

/*BUTTON*/
.button-home-ad {
    appearance: none;
    backface-visibility: hidden;
    background-color: #cea52d;
    border-radius: 10px;
    border-style: none;
    box-shadow: none;
    box-sizing: border-box;
    color: white;
    cursor: pointer;
    display: inline-block;
    font-size: 15px;
    font-weight: 700;
    font-family: 'Lato';
    height: 50px;
    letter-spacing: normal;
    line-height: 1.5;
    outline: none;
    overflow: hidden;
    margin-top: 10px;
    padding: 14px 30px;
    position: relative;
    text-align: center;
    text-decoration: none;
    transform: translate3d(0, 0, 0);
    transition: all .3s;
    user-select: none;
    -webkit-user-select: none;
    touch-action: manipulation;
    vertical-align: top;
    white-space: nowrap;
}

.button-home-ad:hover {
    background-color: #c49d2b;
    color: white;
    box-shadow: rgba(0, 0, 0, .05) 0 5px 30px, rgba(0, 0, 0, .05) 0 1px 4px;
    opacity: 1;
    transform: translateY(0);
    transition-duration: .35s;
}

.button-home-ad:hover:after {
    opacity: .5;
}

.button-home-ad:active {
    box-shadow: rgba(0, 0, 0, .1) 0 3px 6px 0, rgba(0, 0, 0, .1) 0 0 10px 0, rgba(0, 0, 0, .1) 0 1px 4px -1px;
    transform: translateY(2px);
    transition-duration: .35s;
}

.button-home-ad:active:after {
    opacity: 1;
}

/* HOME PAGE CLASS LANDING PAGE DIV STYLING END */

table tr th,
table tr td,
table tr.highlight td {
    border-width: 0px 0 0 0;
}

table tr:last-child td {
    border-bottom-width: 0px;
}

table img,
table div {
    display: inline-block;
    /* removed 'table a' for inline icon alignment */
}

.bjqs-caption h2,
.bjqs-caption p {
    -webkit-text-shadow: 0px 0px 0px rgba(0, 0, 0, 0.0);
    -moz-text-shadow: 0px 0px 0px rgba(0, 0, 0, 0.0);
    text-shadow: 0px 0px 0px rgba(0, 0, 0, 0.0);
}

.bjqs-caption a {
    background: rgba(189, 146, 45, 0.16));
    text-align: center;
    border-radius: 3px;
    border: 2px solid #000;
}

nav.mainNav ol>li>a,
nav.footerNav div h2,
.resellers #contentBody .contentBlock p {
    font-size: 14px;
    text-transform: uppercase;
    font-weight: bold;
}

nav.mainNav ol>li>a {
    height: 100%;
    display: block;
    padding: 0 20px;
    line-height: 75px;
}



/* HOME PAGE XDIV 6 Column Course Stack */

.xhero-full-w {
    width: 100%;
    padding: 10px;
    margin-top: 50px;
    margin-bottom: 25px;
    font-family: 'Lato' !important;
    box-sizing: border-box;
}

.xhero-title-div {
    max-width: 950px;
    margin: auto;
    text-align: center;
}

#xlive-courses-title {
    font-size: 35px !important;
    font-weight: 900;
    font-family: 'Lato' !important;
    margin-top: 30px;
    margin-bottom: 25px;
}

.xlive-desc {
    color: #333;
    max-width: 550px;
    margin: 15px auto;
}

.xhero-course-content-div {
    font-family: 'Lato' !important;
    max-width: 950px;
    margin: auto;
}

.xhero-course-row {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}

.xhero-course-tile {
    margin: 10px;
    border-radius: 10px;
    padding: 20px;
    color: white;
    width: 100%;
    box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
    box-sizing: border-box;
}

#intensive {
    color: #4E7B62;
    width: auto;
}

.intensive-link {
    margin-top: 45px;
}

.half-half {
    width: 50%;
}

.speakers {
    text-align: center;
}

.speakers-img {}

.creed-tile {
    background-color: #7E506C;
    border: 2px solid #6c3958;
}

.arabic-tile {
    background-color: #59728F;
    border: 2px solid #3f5772;
}

.quran-tile {
    background-color: #85584B;
    border: 2px solid #673d36;
}

.fiqh-tile {
    background-color: #465366;
    border: 2px solid #384457;
}

.seerah-tile {
    background-color: #73381A;
    border: 2px solid #652e12;
}

.hadith-tile {
    background-color: #5F7D6A;
    border: 2px solid #42644f;
}

.tazk-tile {
    background-color: #B6894F;
    border: 2px solid #9c733c;
}

.intensive-tile {
    /* background-color: #F2F0E9; */
    background-image: url('https://instituteofknowledge.com/random/IOK-Winter-Intensive-2023-BG.jpg');
    background-repeat: no-repeat;
    background-size: cover;
    background-position: top center;
    border: 2px solid #dfdcd1;
    display: flex;
    align-items: center;
}

#xcourse-cat {
    font-size: 16px;
    margin-top: 0px;
}

#xcourse-cat-intensive {
    font-size: 18px !important;
    margin-top: 0px;
}

#xcourse-title {
    font-size: 22px !important;
    font-weight: 900;
}

#xcourse-title-intensive {
    font-size: 27px !important;
    font-weight: 900;
}

#xcourse-subtitle {
    font-size: 12px !important;
    font-weight: 400;
    color: lightgrey;
    margin-top: -13px;
}

#xcourse-desc {
    font-size: 16px;
}

#xcourse-desc-intensive {
    font-size: 18px !important;
}

#xcourse-link {
    font-size: 16px;
    color: #cea52d;
}

#xcourse-link:hover {
    color: #f7d676;
}

@media screen and (max-width: 768px) {
    .xhero-course-row {
        flex-direction: column;
        align-items: center;
    }

    .xhero-title-div,
    .xlive-courses-title {
        max-width: 100%;
    }

    .xhero-course-tile {
        max-width: 370px;
    }

    .xlive-desc {
        max-width: 370px;
    }

    #intensive-center {
        flex-direction: column;
        align-items: center;
        display: flex;
    }

    .half-half {
        width: auto;
    }

    .intensive-link {
        margin-top: 20px;
    }

    .speakers-img {
        margin-top: 35px;
    }
}

/* END HOME PAGE XDIV 6 Column Course Stack */

/* QURAN INTENSIVE 2024 */
.rfn-outer-container {
    padding: 30px 15px 0;
}
.rfn-main-container {
    background: #E6FBFD;
    border-radius: 15px;
    padding: 50px;
    max-width: 1100px;
    margin: auto;
    font-family: 'Lato', sans-serif;
}
.rfn-content {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
}
.rfn-left-column, .rfn-right-column {
    flex: 1 1 100%;
    box-sizing: border-box;
}
.rfn-left-column {
    order: 2;
}
.rfn-right-column {
    order: 1;
    text-align: center;
}
.rfn-left-column .rfn-preheader {
    font-size: 18px;
    text-transform: uppercase;
    color: #6880af;
    margin-bottom: 10px;
}
.rfn-left-column .rfn-title {
    font-size: 48px;
    color: #333;
    margin-bottom: 10px;
    font-weight: 900;
}
.rfn-left-column .rfn-description {
    font-size: 18px;
    color: #333;
    margin-bottom: 20px;
    line-height: 1.5;
}
.rfn-left-column .rfn-button {
    display: inline-block;
    padding: 10px 20px;
    border: 1px solid #6880af;
    border-radius: 50px;
    color: #6880af;
    text-decoration: none;
    transition: background 0.3s, color 0.3s;
}
.rfn-left-column .rfn-button:hover {
    background: #6880af;
    color: #E6FBFD;
}
.rfn-right-column img {
    width: 100%;
    max-width: 475px;
    height: auto;
    border-radius: 15px;
}
@media(min-width: 768px) {
    .rfn-left-column {
        order: 1;
        flex: 0 1 calc(50% - 15px);
        margin-right: 15px;
    }
    .rfn-right-column {
        order: 2;
        flex: 0 1 calc(50% - 15px);
    }
}
@media(max-width: 767px) {
    .rfn-main-container {
        padding: 25px;
    }
    .rfn-right-column img {
        margin-bottom: 25px;
    }
}

/* END QURAN INTENSIVE 2024 */

/* Quran Intensive Description */
.cou-descr-div {
    border: 2px solid #efefef;
    padding: 25px;
    border-radius: 20px;
    margin: 5px;
}

.cou-descr-inner-div-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
}

.cou-descr-inner-div {
    background-color: #f7f7f7;
    padding: 25px;
    border-radius: 20px;
    margin: 10px;
    flex: 1 1 calc(33.333% - 20px); /* Adjusted for three columns */
    max-width: calc(33.333% - 20px); /* Ensure max-width matches flex-basis */
    box-sizing: border-box;
}

.cou-descr-p {
font-family: Lato, sans-serif !important;
color: #333
}

.cou-descr-li {
    font-family: Lato, sans-serif !important;
    color: #333
}

.cou-descr-h2 {
    margin: 5px 0px 15px 0px;
    font-family: Lato, sans-serif !important;
    font-size: 1.5em;
    font-weight: 700;
    color: #333
}

.cou-descr-h3 {
    margin: 5px 0px 10px 0px;
    font-family: Lato, sans-serif !important;
    font-size: 1.17em;
    font-weight: 700;
    color: #333
}

.cou-descr-link {
    color: #cea52d;
}

@media (max-width: 1200px) {
    .cou-descr-inner-div {
        flex: 1 1 calc(50% - 20px); /* Adjust base width for smaller screens */
        max-width: calc(50% - 20px);
    }
}

@media (max-width: 900px) {
    .cou-descr-inner-div {
        flex: 1 1 100%; /* Stack divs on top of each other */
        max-width: 100%;
        padding: 15px;
    }

    .cou-descr-div {
    padding: 15px;
    }
}

/* END Quran Intensive Description */