:root {
    --color-font: #212121;
    --color-primary: #df2033 !important;
    --color-secondary: #0D73BE !important;
    --color-accsent: #f3d33e;
    --color-btn: #EF6911;
    --color-link: #1090ee;
    --color-link-hover: #0D73BE;
    --color-gradient-start: #aa692e;
    --color-gradient-stop: #db9f4b;
    --color-img-holder: #aa692e;
}

/* === font === */
h1,
h2,
h3,
h4,
h5,
h6 {
    letter-spacing: 0.025em !important;
}

.title-1 {
    font-size: 3.1em !important;
}
/* === font === ./end */


/*  ===== Background ===== */
.bg-banner {
    /* background-image: url('/images/'); */
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.bg-primary {
    background-color: var(--color-primary) !important;
}

.bg-red {
    background-color: #df2033 !important;
}

.bg-1 {
    background-image: url('/images/bg-1.jpg') !important;
}
/*  ===== Background ===== ./end */

/*  ===== Font & Text ===== */
.text-primary {
    color: var(--color-primary) !important;
}

.text-transparent {
    color: transparent !important;
}

.text-red {
    color: #FF0000 !important;
}
/*  ===== Font & Text ===== ./end */

/*  ===== Sizing ===== */
.vh-50 {
    height: 50vh !important;
}
.vh-70 {
    height: 70vh !important;
}
/*  ===== Sizing ===== ./end */

/*  ===== Button ===== */
.btn-join {
    background: #df2033 !important;
    border-color: transparent;
    letter-spacing: 0.05rem !important;
    color: #fdfdfd;
}

.btn-join:hover {
    background: #dc9b70 !important;
}
/*  ===== Button ===== ./end */

/** === NAVBAR ===  */
/* Color of the links BEFORE scroll */
.navbar .navbar-scroll  {
    /* background-color: transparent !important; */
}

.navbar-scroll .nav-link,
.navbar-scroll .navbar-toggler-icon {
    color: transparent !important;
    font-size: 18.5px !important;
    font-weight: bold !important;
}

/* Color of the links AFTER scroll */
.navbar .navbar-scrolled  {
    /* background-color: #E8E2E2 !important; */
}

.navbar-scrolled .nav-link,
.navbar-scrolled .navbar-toggler-icon {
    color: #000;
    font-size: 18.5px !important;
    font-weight: bold !important;
}

.navbar-scrolled .navbar-toggler {
    color: black !important;
}

/* Color of the navbar AFTER scroll */
.navbar-scrolled {
    /* background-color: #E8E2E2 !important; */
}

/* An optional height of the navbar AFTER scroll */
.navbar.navbar-scroll.navbar-scrolled {
    padding-top: 5px;
    padding-bottom: 5px;
}

/* ++ Responsive ++ */
/* Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 600px) {
    /* Color of the links BEFORE and AFTER scroll */
    .navbar-scroll .nav-link,
    .navbar-scroll .navbar-toggler-icon,
    .navbar-scrolled .nav-link,
    .navbar-scrolled .navbar-toggler-icon {
        color: black !important;
        /* font-size: 18.5px !important; */
        font-weight: 700 !important;
    }

    .navbar-scrolled .navbar-toggler {
        color: black !important;
    }
}

/* Small devices (portrait tablets and large phones, 600px and up) */
@media only screen and (min-width: 600px) {

}

/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (min-width: 768px) {

}

/* Large devices (laptops/desktops, 992px and up) */
@media only screen and (min-width: 992px) {

}

/* Extra large devices (large laptops and desktops, 1200px and up) */
@media only screen and (min-width: 1200px) {

}
/* ++ Responsive ++ ./end*/
/** -- MEGA MENU -- .end */
/** === NAVBAR ===  .end */

/* === Counter - custom === */
.counter {
    background-color: grey !important;
    padding: 20px 0;
    border-radius: 5px;
}

.count-number {
    font-size: 35px !important;
    font-weight: bold !important;
    margin-top: 10px !important;
    margin-bottom: 0 !important;
    text-align: center !important;
}

.count-text {
    font-size: 20px !important;
    font-weight: 700 !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    text-align: center !important;
}
/* === Counter - custom ./end === */


/* === Icon Text With - custom === */
.icon-text-stack .text-div {
    display: inline-block;
    margin-left: 10px;
    width:calc(100% - 60px);
    /* vertical-align:middle; */
}
.icon-text-stack .icon-div {
    display: inline-block;
    margin-left: 15px;
    /* width:30px; */
    /* vertical-align:middle; */
}
/* === Icon Text With - custom === .end */


/* === General Mobile $ Tablet Sizing === */
/* source: https://www.w3schools.com/css/css_rwd_mediaqueries.asp */
/* Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 600px) {
    .vh-50 {
        height: 50vh !important;
    }

    .count-number {
        font-size: 1em !important;
    }

    .count-text {
        font-size: 0.6em !important;
        margin-top: 0.1em;
    }
}

/* Small devices (portrait tablets and large phones, 600px and up) */
@media only screen and (min-width: 600px) {

}

/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (min-width: 768px) {
    
}

/* Large devices (laptops/desktops, 992px and up) */
@media only screen and (min-width: 992px) {
    .vh-md-100 {
        height: 100vh !important;
    }
    .vh-md-70 {
        height: 70vh !important;
    }
    
}

/* Extra large devices (large laptops and desktops, 1200px and up) */
@media only screen and (min-width: 1200px) {

}

/* === General Mobile $ Tablet Sizing === */
/* Custom Class Exist on Bootsrap ./end */