:root{
    --black : #393C41;
    --forange : #E36D01;
    --fdgreen : #0E743B;
    --flgreen : #4F9E2D;
    --fsgreen : #4F9E2D;
    --fmorange : #F7941D;
    --fred : #E92326;
    --florange : #F7C221;
    --fygreen : #98C641;
}
h1, h2, h3, h4, h5, h6, p {
    font-family: 'Poppins';
}
h1, h2, h3, h4, h5, h6 {
    font-weight: 700!important;
}
h1{
    font-size: 50px!important;
    color: #fff;
    font-weight: 700;
    text-align: center;
    line-height: 67px!important;
}
h2 {
    font-size: 28px!important;
    line-height: 35px!important;
}
h3 {
    font-size: 22px!important;
    line-height: 33px!important;
}
p {
    font-size: 16px!important;
    line-height: 28px!important;
    font-weight: 400!important;
    color: var(--black);
}

 button {
    font-size: 16px;
    line-height: 1.5;
    font-weight: 300;
}

.logo-image {
    object-fit: contain;
    height: 75px;
    max-width: 200px;
}

.logo-image:not(#header .logo-image){
    margin: auto;
}

.border-green {
    border: solid 1px var(--ygreen)!important;
}

.inner-border-primary-hover:hover::before, .inner-border-primary-hover:hover::after {
    border: 3px solid transparent;
}

.inner-border-secondary-hover:hover::before, .inner-border-secondary-hover:hover::after {
    border: 3px solid var(--red);
}

.inner-border-primary::before, .inner-border-primary::after {
    border: 3px solid transparent;
}

.inner-border-secondary::before, .inner-border-secondary:hover::after {
    border: 3px solid var(--lred);
}


/* Custom CSS for double border button */
.double-border-button {
    position: relative;
    overflow: hidden;
    transition: all 0.3s ease;
}

.double-border-button::before,
.double-border-button::after {
    content: '';
    position: absolute;
    width: 100% ;
    height: 100%;
    top: 0;
    left: 0;
    transition: all 0.3s ease;
    border-radius: 5px;
}

.card-primary {
    box-shadow: 0px 0px 20px #6E93AF40;
}

.card-secondary {
    border: 2px solid #F2665C;
    box-shadow: 0px 0px 20px #6E93AF40;
}

.btn {
    font-weight: 200!important;
    font-size: 16px!important;
    padding: 10px 40px;
    border-radius: 5px!important;
}

.mh-130 {
    min-height: 130px !important;
}

.slider-testimonials p {
    display: flex;
    align-items: center;
}

.slider-testimonials .fa-quote-left {
    font-size: 80px;
    position: absolute;
    top: 10px;
    left: 50px
}

.item .sliders .slider-testimonials {
    align-items: center;
    justify-content: center;
    display: flex!important;
    margin-top: 0!important;
}

.l-green {
    background : var(--lgreen);
}

.green-btn, .bg-green {
    background: var(--green)!important;
}

.d-green {
    background: var(--dgreen)!important;
}

.y-green {
    background: var(--ygreen)!important;
}

.modal-content {
    margin: 200px auto 0 auto;
    max-width: 850px;
    padding: 20px;
    border: none!important;
    border-radius: 0!important;
}

.modal .close-btn {
    position: absolute;
    top: 10px;
    right: 20px;
}

.modal .close-btn, .modal .close-btn span {
    outline: none !important;
}

/* HEADER */

#header {
    position: relative;
    box-shadow: 0px -3px 8px 1px #000000;
}
#header .container {
    width: 100%;
    align-items: center;
}
#header .row {
    position: relative;
    align-items: center;
}
#header img {
    /* max-width: 295px !important; */
    /* width: 100%; */
    max-height: 90px;
    /* object-fit: contain; */
}
.logo-image img {
    /* max-width: 180px !important; */
    /* width: 100%; */
    height: 90px !important;
    object-fit: contain;
    object-position: left;
}
#header .btn:last-child {
    margin: 0 0 0 15px;
}
#header .header-btn .btn {
    padding-right: 25px;
    padding-left: 25px;
    max-width: 100% !important;
    width: 100%;
}
.cta-timer {
    /* background-color: var(--fred); */
    padding: 10px;
    max-width: 100%!important;
}
.demo-timer {
    justify-content: center;
    display: flex;
}
#demo {
    font-weight: 700;
    display: flex;
    padding-left: 20px;
    column-gap: 6px;
}

/* reset our lists to remove bullet points and padding */
.mainmenu, .submenu {
    list-style: none;
    padding: 0;
    padding-left: 25px;
    margin: 0;
}

/* make ALL links (main and submenu) have padding and background color */
.mainmenu a {
    display: block;
    /* background-color: var(--fsgreen); */
    text-decoration: none;
    padding: 10px;
    color: #fff;
}

/* add hover behaviour */
.mainmenu a:hover {
    /* background-color: var(--fsgreen); */
}

.mainmenu li a {
    padding-left: 8px;
}


/* when hovering over a .mainmenu item,
    display the submenu inside it.
    we're changing the submenu's max-height from 0 to 200px;
*/

.mainmenu li .submenu {
    display: block;
    max-height: 280px;
}

/*
    we now overwrite the background-color for .submenu links only.
    CSS reads down the page, so code at the bottom will overwrite the code at the top.
*/

.text-decoration-none {
    text-decoration: none !important;
}

.submenu a {
    /* background-color: var(--fsgreen); */
}

/* hover behaviour for links inside .submenu */
.submenu a:hover {
    /* background-color: var(--fsgreen); */
}

/* this is the initial state of all submenus.
    we set it to max-height: 0, and hide the overflowed content.
*/
.submenu {
    overflow: hidden;
    max-height: 0;
    -webkit-transition: all 0.5s ease-out;
}

/*FOOTER*/

div#footer {
    max-width: 100%;
}
#footer {
    max-width: 1200px;
}
#footer img {
    max-width: 150px;
}
ul.footer-nav li {
    font-weight: 400;
    list-style: none!important;
}
#footer {
    text-align: center;
    /* background-color: #FAFAFA!important; */
}
ul.footer-nav {
    display: flex;
    justify-content: center;
    column-gap: 65px;
    margin: 0;
}
.social-btn, #footer img, ul.footer-nav {
    padding-bottom: 20px;
}
#footer .fa-1x {
    font-size: 1.8em;
    color: #3F3F3F;
    padding: 20px;
}
.footer-last {
    padding-top: 20px;
    display: flex;
    place-content: space-between;
    max-width: 1200px;
    margin: auto;
}
#footer {
    margin:auto;
    padding: 50px 20px 10px 20px;
}
.footer-nav a, .footer-last a {
    color: var(--black);
    text-decoration: none!important;
}
#footer .social-btn img {
    width: 100%;
    max-width: 33px!important;
}

.header-btn .hamburger-menu-container {
    display: block;
}

.btn-container {
    padding: 0 10px 0 10px;
}

@media screen and (max-width:1220px) {
    .sidebar-btn-container {
        right: 15px !important;
    }
}
@media screen and (max-width:1170px) {
    #header .header-btn .btn {
        padding: 10px 30px;
    }
}
@media screen and (max-width:1088px) {
    .association-img {
        max-width: 125px;
        text-align: center !important;
    }
    html, body {
        overflow-x: hidden;
    }
    .header-btn {
        display: block;
        justify-content: unset;
        max-width: 100%;
        flex: 0 0 100%;
    }
    #header .header-btn .btn {
        text-align: center;
        max-width: 100%!important;
        display: flex;
        justify-content: center;
    }
    .header-btn .hamburger-menu-container {
        display: none;
    }
    /* .sidebar-btn-container {
        right: 15px !important;
        top: -80px !important;
    } */

    /* .header-btn .btn-container {
        padding-left: 15px;
    } */
    div#header {
        position: unset!important;
    }

    .header-btn .btn-container a {
        display: block;
    }

    .logo-image {
        height: 100%;
        display: block !important;
        max-height: 90px;
        margin-bottom: 20px;
    }
}

@media screen and (max-width:1024px) {
    .sidebar-btn-container {
        right: 15px!important;
    }
    .btn-container {
        padding: 0 14px 5px 14px;
    }
    /* #header .header-btn .btn {
        max-width: 180px!important;
    } */
}

@media screen and (max-width:980px) {
    h2 {
        font-size: 26px!important;
    }
    section:first-child {
        background-size: cover !important;
        align-items: center;
        display: flex;
        height: 360px;
    }
    
    #header img {
        max-width: 100px;
        height: 100%;
    }
    .sidebar-btn-container {
        right: 15px!important;
        top: -67px!important;
    }

    #container-header {
        padding: 20px 15px 5px 15px !important;
        max-width: 100%;
    }
    #myModal {
        padding: 20px;
    }
    h1{
        font-size: 30px!important;
        line-height: 42px!important;
    }
    section, #header .cta-timer, div#footer {
        padding: 30px 20px 10px 20px!important;
    }
    /* #header .row{
        display: block!important;
    } */
    #header .nav-btn-primary {
        margin: 15px!important;
        margin-left: 32px!important;
        width: 100%!important;
        max-width: 200px!important;
    }
    
    #header .col-6{
        max-width: 100%;
        display: block;
    }
    .col-6.header-btn .btn:last-child {
        margin-bottom: 0!important;
    }
    ul.footer-nav {
        display: block!important;
    }
    ul.footer-nav, .row.footer-last{
        padding: 0;
    }
    .row.footer-last, .privacy-policy {
        display: block;
    }
    ul.footer-nav li:last-child {
        padding-bottom: 0;
    }
    ul.footer-nav li {
        padding-bottom: 20px;
    }
    #footer hr {
        margin: 25px 0;
    }
    .modal-content {
        margin: 10px auto 0 auto;
    }
    .header-btn .row {
        padding: 0!important;
    }
    /* .header-btn {
        display: flex;
    } */

    .logo-image {
        height: 100%;
        max-width: max-content;
    }
    /* #header .btn {
        margin-bottom: 20px!important;
    } */
    #header .cta-timer {
        padding: 10px 20px!important;
    }
    #demo {
        column-gap: 10px;
        display: flex!important;
        justify-content: center;
        padding-left: 0!important;
    }
    .demo-timer {
        text-align: center!important;
        display: block!important;
    }
}
@media screen and (max-width:414px) {
    .header-btn .btn-container:first-child,  .header-btn .btn-container:nth-child(2){
        max-width: 50%;
    }
}

#shadow-host-companion {
    display: none;
}

/* The side navigation menu */
.sidenav {
    height: 100%; /* 100% Full-height */
    width: 0; /* 0 width - change this with JavaScript */
    position: fixed; /* Stay in place */
    z-index: 1; /* Stay on top */
    top: 0;
    background-color: #111; /* Black*/
    overflow-x: hidden; /* Disable horizontal scroll */
    padding-top: 60px; /* Place content 60px from the top */
    transition: 0s; /* 0.5 second transition effect to slide in the sidenav */
}

/* The navigation menu links */
.sidenav a {
    padding: 8px 8px 8px 32px;
    text-decoration: none;
    font-size: 16px;
    color: #ffffff;
    display: block;
    transition: 0.2s
}

#mySidenav .nav-btn-primary {
    background-color: var(--fsgreen)!important;
    color: #fff!important;
    text-transform: uppercase;
    margin-left: 0px!important;
}

#mySidenav .nav-btn-primary:hover {
    border-color: var(--green)!important;
}

/* When you mouse over the navigation links, change their color */
.sidenav a:hover, .offcanvas a:focus{
    color: #f1f1f1;
}

/* Position and style the close button (top right corner) */
.sidenav .closebtn {
    position: absolute;
    top: 0;
    right: 20px;
    font-size: 36px;
    margin-left: 50px;
}

#mySidenav .mainmenu {
    margin-top: 20px;
}

/* Style page content - use this if you want to push the page content to the right when you open the side navigation */
#main {
    transition: margin-left .5s;
    padding: 20px;
}
.sidenav {
    right: 0;
}
/* On smaller screens, where height is less than 450px, change the style of the sidenav (less padding and a smaller font size) */
@media screen and (max-height: 450px) {
    .sidenav {padding-top: 15px;}
    .sidenav a {font-size: 16px;}
}
.sidenav {
    right: 0;
}

div.sidebar-btn-container:hover {
cursor: pointer!important;
}

#mySidenav {
background: var(--fsgreen);
z-index: 999;
}

#header .nav-btn-primary {
    margin: 4px 0 0 0px!important;
}

.sidenav a {
color: #fff;
}

.sidebar-btn-container .menu-btn {
    color: #fff;
    font-size: 25px;
    cursor: pointer;
}

.sidebar-btn-container {
    position: absolute;
    right: 15px;
    top: 27px;
}

.p-description {
    max-width: 1100px;
    margin: 0 auto;
    width: 100%;
    margin-bottom: 20px!important;
}
.association-img p {
    line-height: 1!important;
    font-size: 10px!important;
}
.social-btn {
    padding-top: 20px;
    column-gap: 40px;
    display: flex!important;
    justify-content: center!important;
}
.header-btn .row .col a {
    text-decoration: none !important;
}
@media screen and (max-width: 980px) {
#header .row .col-6 .row:first-child {
    align-items: flex-start;
    padding-bottom: 10px;
    display: flex!important;
}
.section-space .row {
    padding-top: 0px!important;
}
#mySidenav a {
    padding-right: 30px;
}
#mySidenav a:first-child {
    padding-right: 5px;
}
#testimonials-btn {
    width: 100%!important;
}
/* .header-btn .row .col {
    display: flex;
    column-gap: 20px;
} */
.header-btn .row .col a {
    width: 100%;
}
}
.fa-facebook:before {
    font-size: 32px;
    padding-top: 12px;
    border-radius: 50px;
    content: "\f09a";
}

/* for hiding the event-info & book tab */
/* .footer-nav li:nth-child(3), .footer-nav li:nth-child(6)
, .mainmenu li:nth-child(2), .mainmenu li:nth-child(5) {
    display: none;
} */
.submenu li:nth-child(2), .submenu li:nth-child(4) , .submenu li:nth-child(5){
    display: block!important;
}

div#header {
    z-index: 9999;
    width: 100%;
    position: fixed;
}
.section-space .row {
    height: 400px;
    align-items: center;
}

.dgreen-text {
    color: var(--dgreen);
}
.green-text {
    color: var(--green);
}

#owl-demo .profile-photo {
    position: relative!important;
    margin: 0 auto;
    margin-top: -130px;
    margin-bottom: 20px;
    right: 0!important;
    left: 0!important;
}
#owl-demo .quote-icon {
    top: 0px!important;
}
@media screen and (max-width: 768px) {
    #owl-demo .item img {
        /* left: 43%; */
        right: 50%;
        top: 0px;
        margin: 0 auto!important;
        margin-top: -50px!important;
        position: relative;
    }

    #owl-demo .quote-icon {
        padding-right: 30px!important;
        position: absolute;
        top: 50px!important;
    }
    #owl-demo .item img {
        left: 0!important;
    }
    .slider-testimonials.d-green p {
        min-height: auto!important;
    }
    #owl-demo .slider-testimonials.d-green .profile-photo {
        margin-top: -120px!important;
    }
    .slider-testimonials {
        margin-top: 50px!important;
    }
    #owl-demo .profile-photo {
        position: relative!important;
    }

    .logo-image {
        margin-bottom: 10px;
    }

    #header .btn {
        padding-top: 7px;
        padding-bottom: 7px;
    }

    #header .bold-cta {
        line-height: 1.1;
    }
}

@media screen and (max-width: 600px) {
    .sponsors-slides-separator {
        display: none;
    }
}

@media screen and (max-width: 400px) {
    #header .col-4.association-img {
        padding-left: 0px;
        max-width: 110px;
    }

    #header .row .col-6 .row:first-child {
        column-gap: 0px!important;
    }
}
.mainmenu svg {
    padding-left: 1px!important;
    margin-left: 13px;
}

button.btn.nav-btn-primary.border-white.button-hover-bg-green.text-white.double-border-button {
    max-width: 200px;
    width: 100%;
}
#mySidenav .btn {
    margin: 0!important;
    width: 92% !important;
    padding: 10px 20px;
}
i.fa-solid.fa-chevron-down {
    color: #fff;
    padding-left: 10px;
    font-size: 13px;
    cursor: pointer;
}

/* FOR TEXT */
.home-sponsor-span {
    color: var(--fmorange)!important;
}
.cms-txt {
    /* color: var(--fdgreen)!important; */
}
.fsgreen-txt {
    color: var(--fsgreen)!important;
}
.flgreen-txt {
    color: var(--flgreen)!important;
}
.fygreen-txt {
    color: var(--fygreen)!important;
}
/* FOR BACKGROUND */
.fdgreen {
    background-color: var(--fdgreen)!important;
}
.flgreen {
    background-color: var(--flgreen)!important;
}
.forange {
    background-color: var(--forange)!important;
}
.fygreen {
    background-color: var(--fygreen)!important;
}
/* FOR BUTTON */

.button-hover-bg-green:hover {
    box-shadow: 0 0 0 3px #fff !important;
    /* border: solid 3px var(--fdgreen) !important; */
}
.button-hover-bg-green {
    border: solid 3px;
}
.glbl-btn {
    border: 3px solid var(--florange)!important;
}
.glbl-btn:hover {
    border: 3px solid white!important;
}
.double-border-button:hover {
    /* box-shadow: 0 0 0 3px var(--florange); */
}
.association-img {
    /* display: none; */
}

.dropdown a {
    display: inline-block!important;
}
#mySidenav::-webkit-scrollbar {
    overflow-y: hidden;
    display: none;
}
#mySidenav button {
    text-transform: uppercase;
}

#header .logo-image img {
    width: 230px !important;
}

.owl-item {
    opacity: .5;
}

.owl-item.active {
    opacity: unset;
}

/* @media screen and (min-width: 981px){
    .header-btn .btn-container {
        padding-left: 0;
    }
} */

@media screen and (max-width: 980px){
    #mySidenav .btn {
        width: 100% !important;
    }
    .slider-testimonials .fa-quote-left {
        display: none;
    }
    .section-space .container, .section-space .col-lg-12 {
        padding: 0;
    }
    /* .header-btn .row.justify-content-end {
        padding: 0 15px !important;
        column-gap: 15px;
    } */
    /* .header-btn .btn-container {
        padding-right: 8px;
        padding-left: 8px;
    } */
    section.section-space {
        padding: 30px 20px!important;
    }
    .section-space p:last-child {
        margin-bottom: 0;
    }
    #header .logo-image img {
        max-width: 160px!important  ;
        margin-bottom: 15px!important;
    }
    .col.logo-image {
        margin-bottom: 10px!important;
        padding-bottom: 0!important;
        max-width: 200px!important
    }
    .col-4.association-img {
        margin-left: 0 !important;
    }
    #header img {
        height: auto !important;
    }
    #header #container-header {
        padding: 20px 20px 5px 20px !important;
    }
    .sidebar-btn-container {
        position: absolute;
        right: 15px !important;
        top: 13px !important;
    }
    div#header {
        position: unset;
    }
    .header-btn .btn-container:first-child, .header-btn .btn-container:nth-child(2) {
        max-width: 50%;
    }
    img#custom-logo {
        padding-bottom: 20px !important;
    }
}
.social-icons {
    display: inline-flex;
    gap: 12px;
    margin-left: 5px;
}
.social-icons svg {
    width: 30px;
    height: 30px!important;
    border-radius: 50%;
    background: var(--black);
    fill: #fff;
    padding: 5px;
}
.section-space {
    padding-top: 200px !important;
}
.association-img {
    margin-left: 40px!important;
}
#container-header {
    padding: 25px 15px !important;
}