/* Fonts */
:root {
    --font-default: "Open Sans", system-ui, -apple-system, "Segoe UI", Roboto,
        "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif,
        "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol",
        "Noto Color Emoji";
    --font-primary: "Montserrat", sans-serif;
    --font-secondary: "Lato", sans-serif;
}

/* Global Colors */
:root {
    --blue: #3db2ff;
    --blue-rgb: 61, 178, 255;
    --beige: #ffedda;
    --orange: #ffb830;
    --red: #ff2442;

    --text-color: #000000;
    --text-color-2: #181818;
    --text-color-3: #383838;

    --black: #000000;
    --white: #ffffff;
    --body-color: #ffffff;
    --dark: #212529;
    --dark-rgb: 33, 37, 41;
    --body: #ffffff;
    --body-rgb: 255, 255, 255;
    --dark-2: #32353a;
    --dark-2-rgb: 50, 53, 58;
    --box-background: #ffffff;
    --box-background-rgb: 255, 255, 255;
    --inverse: #ffffff;
    --inverse-rgb: 255, 255, 255;
}

/* Nav Menu Colors */
:root {
    --nav: #3a3939;
    --nav-hover: #3db2ff;
    --nav-dropdown: #3a3939;
    --nav-dropdown-hover: #3db2ff;
    --nav-dropdown-background: #ffffff;
    --nav-mobile-background: #ffffff;
}

/* GLOBAL STYLES */
[data-theme="light"] {
    --shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.05);
    --blue: #026db4;
    --blue-light: #cfebff;
    --blue-dark: #3084bd;
    --orange: #f6a912;
    --orange-light: #fdeed0;
    --orange-dark: #c5870e;
    --green: #2fad1a;
    --green-light: #ccedc7;
    --green-dark: #268a15;
    --red: #ff2442;
    --red-light: #f7d7d0;
    --red-dark: #c41e34;
    --black: #222;
    --black-rgb: 34, 34, 34;
    --dark: #212529;
    --dark-rgb: 33, 37, 41;
    --dark-2: #32353a;
    --dark-2-rgb: 50, 53, 58;
    --white: #fff;
    --white: 255, 255, 255;
    --grey-dark: #555;
    --grey: #dddddd;
    --inverse: #ffffff;

    --body: #fff;
    --text: #000;
    --text-color: #222;
    --text-color-2: #181818;
    --text-color-3: #383838;
    --button: #fff;
    --footer: #222;

    --navbar: #eafaf9;

    --rounded: 0.25rem;
    --rounded-md: 0.5rem;
}
[data-theme="dark"] {
    --shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.05);
    --blue: #026db4;
    --blue-light: #cfebff;
    --blue-dark: #0a7acc;
    --orange: #f6a912;
    --orange-light: #fdeed0;
    --orange-dark: #c5870e;
    --green: #2fad1a;
    --green-light: #ccedc7;
    --green-dark: #268a15;
    --red: #d63916;
    --red-light: #f7d7d0;
    --red-dark: #ab2e12;
    --black: #fff;
    --black-rgb: 255, 255, 255;
    --white: #222;
    --white: 34, 34, 34;
    --dark: #32353a;
    --dark-rgb: 50, 53, 58;
    --dark-2: #212529;
    --dark-rgb-2: 33, 37, 41;
    --grey-dark: #999;
    --grey: #f2f2f2;
    --inverse: #ffffff;

    --body: #06111f;
    --text: #fff;
    --text-color: #e2e2e2;
    --text-color-2: #ebebeb;
    --text-color-3: #c7c7c7;
    --button: #fff;
    --footer: #222;

    --navbar: #292c3b;

    --rounded: 0.25rem;
    --rounded-md: 0.5rem;
}
/* Smooth scroll */
:root {
    scroll-behavior: smooth;
}

/*--------------------------------------------------------------
# General
--------------------------------------------------------------*/
body {
    color: var(--dark);
    background-color: var(--body);
    font-family: var(--font-default);
}

a {
    color: #ffffff;
    text-decoration: none;
    transition: 0.3s;
}

a:hover {
    text-decoration: none;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    text-decoration: none;
    font-family: var(--font-primary);
}
ul,
li {
    text-decoration: none;
}

section {
    color: var(--dark);
    background-color: var(--body);
    padding: 60px 0;
    overflow: clip;
}
.tabz {
    text-indent: 50px;
}

/*--------------------------------------------------------------
# Section Title
--------------------------------------------------------------*/
.section-title {
    text-align: center;
    padding-bottom: 60px;
}

.section-title h2 {
    color: var(--text);
    font-size: 32px;
    font-weight: 700;
    position: relative;
}

.section-title h2:before,
.section-title h2:after {
    content: "";
    width: 50px;
    height: 2px;
    background: var(--blue);
    display: inline-block;
}

.section-title h2:before {
    margin: 0 15px 10px 0;
}

.section-title h2:after {
    margin: 0 0 10px 15px;
}

.section-title p {
    margin-bottom: 0;
}

/*--------------------------------------------------------------
# Page Title & Breadcrumbs
--------------------------------------------------------------*/
.page-title {
    --box-background: rgba(var(--dark-rgb), 0.05);
    color: var(--dark);
    background-color: var(--body);
}

.page-title .heading {
    padding: 80px 0;
    border-top: 1px solid rgba(var(--dark-rgb), 0.1);
}

.page-title .heading h1 {
    font-size: 38px;
    font-weight: 700;
    color: var(--dark-2);
}

.page-title nav {
    background-color: var(--box-background);
    padding: 20px 0;
}

.page-title nav ol {
    display: flex;
    flex-wrap: wrap;
    list-style: none;
    margin: 0;
    font-size: 16px;
    font-weight: 600;
}

.page-title nav ol li + li {
    padding-left: 10px;
}

.page-title nav ol li + li::before {
    content: "/";
    display: inline-block;
    padding-right: 10px;
    color: rgba(var(--dark-rgb), 0.3);
}

/* Global Header on page scroll
------------------------------*/
.scrolled .header {
    --white: #ffffff;
    --color-secondary: #444444;
    --color-nav: #444444;
    --text-color-nav: #000;
    box-shadow: 0 0 30px 10px rgba(0, 0, 0, 0.1);
}

/* Global Scroll Margin Top
------------------------------*/
section {
    scroll-margin-top: 90px;
}

@media (max-width: 1199px) {
    section {
        scroll-margin-top: 66px;
    }
}

/* Home Page Custom Header
------------------------------*/
[data-theme="light"] .header {
    --blue: rgba(2, 109, 180, 0.329);
    --white: rgb(255, 255, 255);
    --white-mobile: rgb(255, 255, 255);
    --color-secondary: #ffffff;
    --color-nav: #ffffff;
    --text-color-nav: #ffffff;
    --text-color-nav-active: rgb(2, 109, 180);
    --text-color-nav-mobile: #222222;
}

[data-theme="light"] .navIcon {
    --white: rgb(255, 255, 255);
    --white-mobile: rgb(255, 255, 255);

    --color-secondary: #ffffff;
    --color-nav: #ffffff;
    --text-color-nav: #000;
}

/* Home Page Custom Header on page scroll
------------------------------*/
[data-theme="light"] .scrolled .header {
    --blue: rgb(2, 109, 180);
    --white: #ffffff;
    --white-mobile: rgb(255, 255, 255);
    --color-secondary: #444444c9;
    --color-nav: #444444;
    --text-color-nav: #ffffff;
    --text-color-nav-active: var(--orange);
    --text-color-nav-mobile: #ffffff;
}
[data-theme="light"] .scrolled .navIcon {
    --white: #444444;

    --color-secondary: #444444c9;
    --color-nav: #444444;
    --text-color-nav: #000;
}

/* Home Page Custom Header
------------------------------*/
[data-theme="dark"] .header {
    --blue: rgb(2, 109, 180);
    --white: rgb(255, 255, 255);
    --white-mobile: #0c1929;
    --color-secondary: #ffffff;
    --color-nav: #ffffff;
    --text-color-nav: #ffffff;
    --text-color-nav-mobile: #ffffff;
}

[data-theme="dark"] .navIcon {
    --white: rgb(255, 255, 255);
    --color-secondary: #ffffff;
    --color-nav: #ffffff;
    --text-color-nav: #ffffff;
}

/* Home Page Custom Header on page scroll
------------------------------*/
[data-theme="dark"] .scrolled .header {
    --blue: rgb(2, 109, 180);
    --white: #ffffff;
    --white-mobile: #0c1929;
    --color-secondary: #444444c9;
    --color-nav: #444444;
    --text-color-nav: #ffffff;
    --text-color-nav-mobile: #ffffff;
}
[data-theme="dark"] .scrolled .navIcon {
    --white: #444444;
    --color-secondary: #444444c9;
    --color-nav: #444444;
    --text-color-nav: #ffffff;
}

/*--------------------------------------------------------------
# banner Section
--------------------------------------------------------------*/
.banner {
    overflow-x: hidden;
    padding: 0;
}

.banner .banner-container {
    width: 100%;
    height: 500px;
    position: relative;
}

.banner .banner-img {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    overflow: hidden;
    z-index: 1;
    transition-duration: 0.4s;
}

.banner .banner-img img {
    width: 100%;
}