/* ===========================
   Fonts Styles
=========================== */

@font-face {
    font-family: 'GT Walsheim Trial';
    font-weight: 400;
    src        : url('../fonts/GT-Walsheim-Regular.otf') format('opentype');
}

@font-face {
    font-family: 'GT Walsheim Trial';
    font-weight: 500;
    src        : url('../fonts/GT-Walsheim-Medium.otf') format('opentype');
}

@font-face {
    font-family: 'GT Walsheim Trial';
    font-weight: 600;
    src        : url('../fonts/GT-Walsheim-Bold.otf') format('opentype');
}

@font-face {
    font-family: 'GT Walsheim Trial';
    font-weight: 700;
    src        : url('../fonts/GT-Walsheim-Ultra-Bold.otf') format('opentype');
}


/* ===========================
   Global Base Styles
=========================== */

:root {
    --text-color-main     : #333333;
    --text-color-white    : #fff;
    --primary-color       : #F15922;
    --secondary-color     : #150F0B;
    --gradiend-primary    : linear-gradient(90deg, #FF4A07 0%, #FF931D 100%);
    --shadow-main         : 0px 2px 60px 0px #0000001F;
    --border-bottom-navbar: 1px solid #0000001A;
    --border-top-footer   : 1px solid #DADADACC;
    --text-color-navbar   : #150F0B;
    --text-color-title    : #150F0B;
    --radius-main         : 12px;
    --section-light       : #FCFCFC;
    --size                : clamp(10rem, 1rem + 40vmin, 30rem);
    --gap                 : calc(var(--size) / 14);
    --duration            : 60s;
    --duration-bottom     : 20s;
    --scroll-end          : 0;
    --scroll-start        : calc(-100% - var(--gap));
}

* {
    box-sizing: border-box;
    margin    : 0;
    padding   : 0;
}

html,
body {
    font-family     : "GT Walsheim Trial", serif;
    background-color: #FFFFFF;
    color           : var(--text-color-main);
    font-size       : 16px;
    line-height     : 26px;
    font-weight     : 400;
    letter-spacing  : 0.5px;
}

body {
    overflow-x: hidden;
}

.modal-open {
    padding-right: 0px !important;
}

/* ===========================
   Typography Styles
=========================== */

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: "GT Walsheim Trial", serif;
    color      : var(--text-color-title);
    line-height: 30px;
    font-weight: 600;
}

p {
    font-size  : 16px;
    line-height: 26px;
    color      : var(--text-color-main);
    font-weight: 400;
}

a {
    text-decoration: none;
    color          : var(--text-color-main);
    transition     : all 0.3s ease;
}

a:hover {
    color: var(--primary-color);
}

a.nav-link {
    font-weight   : 500;
    color         : var(--text-color-title);
    line-height   : 24px;
    padding       : 6px 12px;
    letter-spacing: 0.5px;
}

a.nav-link:hover,
a.nav-link.active {
    color: var(--primary-color);
}

body.no-header-footer .header,
body.no-header-footer .footer,
body.no-header-footer .footer-bottom {
    display: none;
}

/* ===========================
   Button Styles
=========================== */

.btn-main {
    background         : var(--gradiend-primary);
    color              : var(--text-color-white);
    font-weight        : 600;
    padding            : 10px 20px;
    border             : 1px solid transparent;
    background-position: center;
    background-size    : 105% 105%;
    background-repeat  : no-repeat;
    border-radius      : var(--radius-main);
}

.btn-main:hover,
.btn-main:active {
    background: var(--text-color-white);
    color     : var(--primary-color) !important;
    border    : 1px solid var(--primary-color);
}

.btn-main i {
    font-size  : 20px;
    margin-left: 12px;
}

.btn-main i.bi::before {
    vertical-align: middle !important;
}

.btn-main-outline {
    background   : transparent;
    color        : var(--primary-color);
    font-weight  : 600;
    padding      : 10px 20px;
    border       : 1px solid var(--primary-color);
    transition   : all 0.3s ease;
    border-radius: var(--radius-main);
}

.btn-main-outline:hover {
    background: var(--primary-color);
    color     : var(--text-color-white);
    border    : 1px solid transparent;
}

.btn:focus,
.btn:active,
.btn:active:focus,
button:focus,
.navbar-toggler:focus {
    box-shadow: none;
    outline   : none;
}

.custom-select {
    max-width    : 100%;
    margin-bottom: 30px;
}

.custom-select .vscomp-toggle-button {
    width        : 100%;
    border       : 1px solid #00000061;
    border-radius: 8px;
    padding      : 10px 16px;
    min-height   : 56px;
    max-height   : 56px;
}

.vscomp-wrapper.focused .vscomp-toggle-button,
.vscomp-wrapper:focus .vscomp-toggle-button,
.custom-select.pop-comp-active .vscomp-wrapper.focused .vscomp-toggle-button {
    box-shadow  : none !important;
    border-color: var(--primary-color);
}

.step-form-container .form-step .form-group {
    margin-bottom: 30px;
}

.step-form-container .form-step .custom-select,
.step-form-container .form-step input.form-control {
    margin-bottom: 0;
}

.step-form-container .form-step .floating-select .floating-label {
    top: 50% !important;
}

.step-form-container .form-step .floating-select.error-class .floating-label {
    top: 35% !important;
}

.step-form-container .form-step .floating-select.active .floating-label {
    top: 0 !important;
}

@media (max-width: 767px) {
    .step-form-container .form-step .form-group .col-md-6:first-child {
        margin-bottom: 30px;
    }
}

/* ===========================
   Utility Classes  
=========================== */

.sec-title {
    font-size     : 20px;
    line-height   : 30px;
    font-weight   : 600;
    color         : var(--text-color-title);
    position      : relative;
    text-transform: uppercase;
    letter-spacing: 2px;
    border-bottom : 2px solid var(--primary-color);
    display       : inline-block;
    padding-bottom: 4px;
    margin-bottom : 30px;
}

.sec-para {
    font-size     : 20px;
    line-height   : 32px;
    letter-spacing: 0.5px;
}

.card-heading {
    font-size     : 20px;
    line-height   : 30px;
    font-weight   : 600;
    letter-spacing: 0px;
}

section.zimam-content section {
    padding: 60px 0px;
}

section.zimam-content section .btn-main i {
    position   : relative;
    transition : 0.2s all;
    left       : 0;
    margin-left: 7px;
}

section.zimam-banner .btn-main:hover {
    background  : var(--gradiend-primary);
    color       : #fff !important;
    border-color: transparent;
}

section.zimam-banner .btn-main:hover i {
    left: 5px;
}

.top-section {
    background-image   : url('../images/backgrounds/left-shaps.svg'), url('../images/backgrounds/right-shaps.svg');
    background-repeat  : no-repeat, no-repeat;
    background-position: left top, right top;
    background-size    : inherit;
}

.light-bg {
    background-color: #FBFBFB;
}

input.form-control,
textarea.form-control,
select.form-control {
    border          : 1px solid #00000061;
    border-radius   : 8px;
    padding         : 10px 16px !important;
    font-size       : 16px;
    letter-spacing  : 0;
    color           : var(--text-color-title);
    font-weight     : 400;
    margin-bottom   : 30px;
    background-color: #fff;
}

.form-group.input-group .input-group-text {
    margin-bottom: 30px;
    border       : 1px solid #00000061;
    background   : transparent;
    border-left  : 0;
}

.form-group.input-group .input-group-text button {
    border          : 0;
    background-color: transparent;
    color           : var(--text-color-main);
}

.form-group.input-group input.form-control {
    border-right: 0;
}

.form-floating>label {
    padding           : 0 6px !important;
    color             : #00000099;
    font-weight       : 400;
    font-size         : 16px;
    z-index           : 1;
    left              : 12px;
    height            : auto;
    top               : 50%;
    transform         : translateY(-50%);
    transition        : all 0.2s ease;
    -webkit-transition: all 0.2s ease;
}

.form-floating.textMsg-input>label {
    top: 25px;
}

.form-floating>label span {
    color: Red;
}

.form-floating>.form-control {
    min-height: 56px !important;
    max-height: 56px !important;
}

.form-floating>textarea.form-control {
    min-height: 100px !important;
    max-height: 100px !important;
}

.form-floating>.form-control:focus~label,
.form-floating>.form-control:not(:placeholder-shown)~label {
    transform        : scale(1) translateY(-50%) !important;
    -webkit-transform: scale(1) translateY(-50%) !important;
    background       : #fff;
    top              : 0;
    font-size        : 14px;
}

.form-floating>textarea.form-control:focus~label,
.form-floating>textarea.form-control:not(:placeholder-shown)~label {
    height: 30%;
}

input.form-control::placeholder,
textarea.form-control::placeholder {
    color: #00000099;
}

input.form-control:focus,
input.form-control:active,
select.form-control:focus,
select.form-control:active,
textarea.form-control:focus,
textarea.form-control:active {
    box-shadow  : none;
    border-color: var(--primary-color) !important;
}

.form-group.input-group:has(input:focus) .input-group-text {
    border-color: var(--primary-color) !important;
}

.form-group.error input.form-control,
.form-group.error .input-group-text {
    border-color: #dc3545 !important;
}

.form-group.error label {
    color: #dc3545 !important;
}

input:-webkit-autofill,
input:-internal-outofill-selected {
    background-color: #fff !important;
}

input:-webkit-autofill,
textarea:-webkit-autofill,
select:-webkit-autofill {
    background-color       : #fff !important;
    color                  : #000 !important;
    -webkit-text-fill-color: #000 !important;
    box-shadow             : 0 0 0px 1000px #fff inset !important;
    transition             : background-color 5000s ease-in-out 0s !important;
}

.card.zimam-card {
    border-radius  : 30px;
    padding        : 45px 40px;
    box-shadow     : var(--shadow-main);
    backdrop-filter: blur(24px);
    border         : 0;
    height         : 100%;
}

.content-card {
    display        : flex;
    flex-direction : column;
    justify-content: flex-start;
    align-items    : center;
    gap            : 20px;
    text-align     : center;
    padding        : 40px 24px;
    border-radius  : 0;
    height         : 100%;
}

.regular-card {
    border-radius   : 10px;
    height          : 100%;
    width           : 100%;
    background-color: #fff;
    border          : 0;
    box-shadow      : var(--shadow-main);
}

.form-card {
    width        : 100%;
    height       : 100%;
    border-radius: 30px;
    padding      : 40px 40px;
    box-shadow   : var(--shadow-main);
    background   : #fff;
}

.form-card .fc-title {
    font-weight   : 600;
    font-size     : 20px;
    line-height   : 32px;
    letter-spacing: 0.4px;
    text-transform: capitalize;
    color         : var(--text-color-title);
    margin-bottom : 20px;
}

.bootstrap-select {
    display      : block !important;
    width        : 100% !important;
    margin-bottom: 30px !important;
}

.bootstrap-select>.dropdown-toggle {
    border          : 1px solid #00000061;
    border-radius   : 8px;
    padding         : 10px 16px;
    font-size       : 16px;
    letter-spacing  : 0;
    color           : var(--text-color-title);
    font-weight     : 400;
    background-color: #fff;
}

.bootstrap-select>.dropdown-toggle:focus,
.bootstrap-select>.dropdown-toggle:active {
    outline         : 0px !important;
    background-color: #ffff;
}

.bootstrap-select>.dropdown-menu {
    padding      : 0;
    border-radius: 0;
    transform    : scale(0.95) !important;
    opacity      : 0;
    transition   : all 150ms ease-in-out;
    display      : block;
    visibility   : hidden;
    top          : 101% !important;
    width        : 100%;
}

.bootstrap-select>.dropdown-menu.show {
    transform : scale(1) !important;
    opacity   : 1;
    visibility: visible;
}

.bootstrap-select .dropdown-menu.inner {
    max-height: 250px;
    overflow-y: auto;
}

.bootstrap-select>.dropdown-menu ul li a {
    font-weight: 400;
    font-size  : 16px;
    font-family: "Karla", sans-serif;
    padding    : 10px 20px;
}

.bootstrap-select>.dropdown-menu ul li a:hover {
    background-color: var(--primary-color);
    color           : #fff;
}

.bootstrap-select>.dropdown-menu ul li a.active {
    background-color: var(--primary-color);
    color           : #fff;
}

.lm-content .form-group .form-control,
.lm-content .form-group .floating-select .custom-select {
    margin-bottom: 0;
}

.lm-content .form-group .floating-select .floating-label {
    top: 50%;
}

.lm-content .form-group {
    margin-bottom: 30px;
}

@media (max-width: 767px) {
    .lm-content .form-group .col-md-6:first-child {
        margin-bottom: 30px;
    }
}

@media (max-width: 580px) {
    .sec-para {
        font-size  : 18px;
        line-height: 28px;
    }
}

/* ===========================
   Main Navbar Styles  
=========================== */

.header .top-navbar {
    background-color: var(--primary-color);
    padding         : 5px 0px;
    transition      : transform 0.5s ease;
}

.header .top-navbar ul.nav li a.nav-link {
    color         : var(--text-color-white);
    font-weight   : 500;
    font-size     : 16px;
    line-height   : 24px;
    padding       : 5px 15px !important;
    letter-spacing: 0.5px;
}

.header .top-navbar ul.nav li a.nav-link:hover,
.header .top-navbar ul.nav li a.nav-link.active {
    color  : var(--text-color-white);
    opacity: 0.8;
}

.header .top-navbar.hide-header {
    transform: translateY(-100%);
    position : fixed;
    top      : 0;
    left     : 0;
    width    : 100%;
}

.header .main-navbar {
    border-bottom: var(--border-bottom-navbar);
    z-index      : 1;
    position     : relative;
    transition   : transform 0.5s ease;
}

.header .main-navbar.fixed-navbar {
    position  : fixed;
    top       : 0;
    left      : 0;
    right     : 0;
    width     : 100%;
    height    : auto;
    z-index   : 9999;
    transition: transform 0.5s ease;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.header .main-navbar.fixed-navbar.hide-navbar {
    transform        : translateY(-100%);
    -webkit-transform: translateY(-100%);
}

.header .main-navbar .navbar-expand-lg {
    background-color: #fff;
}

.header .main-navbar .navbar-brand img {
    width : 120px;
    height: auto;
}

.header .main-navbar .navbar a.nav-link {
    margin: 0px 10px;
}

.header .main-navbar .navbar ul.navbar-nav li.activeDropdown a.nav-link {
    color: var(--primary-color);
}

.header .main-navbar .navbar ul.navbar-nav li.dropdown {
    position: inherit;
}

.header .main-navbar .navbar ul.navbar-nav li.dropdown.activeDropdown,
.header .main-navbar .navbar ul.navbar-nav li.dropdown.active a {
    color: var(--primary-color);
}

.navbar-expand-lg .navbar-nav .dropdown-menu {
    position                  : absolute;
    left                      : 0;
    top                       : 0;
    width                     : 100%;
    max-height                : 0;
    background                : #F2F2F2;
    border-radius             : 0;
    border-bottom-right-radius: 16px;
    border-bottom-left-radius : 16px;
    padding                   : 16px 80px;
    overflow                  : hidden;
    display                   : flex;
    align-items               : center;
    justify-content           : center;
    gap                       : 10px;
    border                    : none;
    flex-wrap                 : wrap;
    -webkit-transition        : 0.3s all;
    -moz-transition           : 0.3s all;
    -o-transition             : 0.3s all;
    -ms-transition            : 0.3s all;
    transition                : 0.3s all;
    visibility                : hidden;
    opacity                   : 0;
    z-index                   : -1;
    box-shadow                : var(--shadow-main);
}

.navbar-expand-lg .navbar-nav .dropdown-menu.show {
    max-height: 40em;
    top       : 98%;
    visibility: visible;
    z-index   : 0;
    opacity   : 1;
}

.navbar-expand-lg .navbar-nav .dropdown-menu li a.nav-link {
    border             : 1px solid #CECECE;
    background-color   : #fff;
    color              : var(--text-color-title) !important;
    font-size          : 14px;
    font-weight        : 500;
    letter-spacing     : 0.5px;
    padding            : 11px 44px 11px 14px !important;
    position           : relative;
    border-radius      : 10px;
    background-image   : url('../images/header/dropdown-link-icon.svg');
    background-position: right 13px center;
    background-repeat  : no-repeat;
    background-size    : 20px;
    min-width          : 240px;
}

.navbar-expand-lg .navbar-nav .dropdown-menu li a.nav-link:hover,
.navbar-expand-lg .navbar-nav li.active .dropdown-menu li.activeDropdown a.nav-link {
    color           : var(--text-color-title) !important;
    border-color    : var(--primary-color);
    background-image: url('../images/header/dropdown-link-icon-active.svg');
}

.navbar-expand-lg .navbar-nav li .dropdown-toggle::after {
    border             : none;
    width              : 12px;
    height             : 12px;
    background-image   : url('../images/header/menu-after.svg');
    background-position: center;
    background-repeat  : no-repeat;
    background-size    : inherit;
    vertical-align     : middle;
    margin-left        : 8px;
    transition         : 0.2s all;
}

.navbar-expand-lg .navbar-nav li.activeDropdown .dropdown-toggle::after {
    transform        : rotate(180deg);
    -webkit-transform: rotate(180deg);
    background-image : url('../images/header/menu-after-active.svg');
}

.navbar-expand-lg .navbar-nav li.active .dropdown-toggle::after {
    background-image: url('../images/header/menu-after-active.svg');
}

.hamburger {
    width        : 30px;
    height       : 3px;
    background   : var(--text-color-main);
    position     : relative;
    transition   : 0.5s;
    border-radius: 50px;
}

.main-navbar.home-navbar .hamburger {
    background: var(--text-color-main);
}

.header.scroll .main-navbar.home-navbar .hamburger {
    background: var(--text-color-main);
}

.hamburger-three:before,
.hamburger-three:after {
    content      : '';
    position     : absolute;
    width        : 22px;
    height       : 3px;
    background   : var(--text-color-main);
    transition   : 0.5s;
    border-radius: 50px;
    right        : 0;
}

.main-navbar.home-navbar .hamburger-three:before,
.main-navbar.home-navbar .hamburger-three:after {
    background: var(--text-color-main);
}

.header.scroll .main-navbar.home-navbar .hamburger-three:before,
.header.scroll .main-navbar.home-navbar .hamburger-three:after {
    background: var(--text-color-main);
}

.hamburger:before {
    top: -6px;
}

.hamburger:after {
    top: 6px;
}

.main-navbar .navbar .navbar-toggler.active .hamburger {
    background: rgba(0, 0, 0, 0) !important;
}

.main-navbar .navbar .navbar-toggler.active .hamburger:before {
    transform        : rotate(135deg);
    -webkit-transform: rotate(135deg);
    top              : 0;
}

/* .header .user-dropdown {
    display: none;
} */

.main-navbar .navbar .navbar-toggler.active .hamburger:after {
    transform        : rotate(225deg);
    -webkit-transform: rotate(225deg);
    top              : 0;
}

body.no-header-btn .header .btn-login,
body.no-header-btn .header .btn-join {
    display: none;
}

/* body.no-header-btn .header .user-dropdown {
    display: block;
} */

a:focus,
a:focus-visible,
a:focus-within,
a:active,
button:focus,
button:focus-visible,
button:focus-within {
    outline                    : none !important;
    box-shadow                 : none !important;
    -webkit-box-shadow         : none !important;
    -webkit-tap-highlight-color: transparent !important;
}

@media (max-width: 1400px) {
    .header .main-navbar .navbar a.nav-link {
        margin : 0px 5px;
        padding: 6px 5px !important;
    }

    .header .main-navbar .navbar-brand img {
        width: 80px;
    }
}

@media (max-width: 1200px) {
    .header .main-navbar .navbar-brand img {
        width: 90px;
    }

    .header .main-navbar .navbar a.nav-link {
        font-size: 14px;
        margin   : 0;
    }

    .header .main-navbar .header-buttons .btn-main-outline,
    .header .main-navbar .header-buttons .btn-main {
        font-size    : 14px;
        padding      : 5px 10px;
        border-radius: 6px;
    }
}

@media (max-width: 1200px) and (min-width: 992px) {
    .header .main-navbar .container {
        max-width: 1000px !important;
    }
}

@media (max-width: 992px) {

    .header .navbar .container {
        padding-left : 0;
        padding-right: 0
    }

    .header .navbar .container .navbar-brand {
        padding-left: calc(var(--bs-gutter-x) * .5);
    }

    .header .navbar .container .header-buttons {
        padding-right: calc(var(--bs-gutter-x) * .5);
    }

    .header .main-navbar .navbar a.nav-link {
        margin : 5px 5px;
        padding: 10px 10px !important;
    }

    .header .main-navbar .navbar ul.navbar-nav li .dropdown-toggle {
        position: relative;
    }

    .header .main-navbar .navbar ul.navbar-nav li .dropdown-toggle::after {
        position : absolute;
        top      : 50%;
        right    : 20px;
        transform: translateY(-50%);
    }

    .navbar-expand-lg .navbar-nav li.activeDropdown .dropdown-toggle::after {
        transform        : translateY(-50%) rotate(180deg) !important;
        -webkit-transform: translateY(-50%) rotate(180deg) !important;
    }

    /* .navbar-expand-lg .navbar-nav li.active .dropdown-toggle::after {
        transform        : translateY(-50%) rotate(180deg) !important;
        -webkit-transform: translateY(-50%) rotate(180deg) !important;
    } */

    .header .main-navbar .navbar .navbar-collapse {
        height    : 0;
        transition: 0.3s all;
    }

    .header .main-navbar .navbar .navbar-collapse.show {
        height: calc(100vh - 130px);
    }

    .header .main-navbar .navbar ul.navbar-nav {
        border-top   : 1px solid #0000001A;
        margin-top   : 15px;
        margin-bottom: 40px;
    }

    .header .main-navbar .navbar ul.navbar-nav li {
        border-bottom: 1px solid #0000001A;
    }

    .navbar-expand-lg .navbar-nav .dropdown-menu li {
        border-bottom: 0 !important;
        width        : 100%;
    }

    .navbar-expand-lg .navbar-nav .dropdown-menu {
        position  : static;
        max-height: 0;
        display   : none;
        visibility: visible;
        opacity   : 1;
        top       : 100%;
    }

    .navbar-expand-lg .navbar-nav .dropdown-menu.show {
        display   : flex;
        max-height: 100%;
        padding   : 16px 24px;
    }

    .header .main-navbar.fixed-navbar.hide-navbar {
        transform        : translateY(0%);
        -webkit-transform: translateY(0%);
    }
}

@media (max-width: 580px) {
    .header .top-navbar ul.nav li a.nav-link {
        padding: 5px 8px !important;
    }
}

/* ===========================
  Landing Pages Styles  
=========================== */

.zimam-banner {
    background-image   : url('../images/backgrounds/zimam-banner.jpg');
    background-repeat  : no-repeat;
    background-position: center;
    background-size    : cover;
    position           : relative;
    width              : 100%;
    height             : 100vh;
    max-height         : 810px;
    display            : flex;
    align-items        : center;
    justify-content    : center;
    z-index            : 0;
}

.zimam-banner .video-bg {
    position        : absolute;
    top             : 0;
    left            : 0;
    width           : 100%;
    height          : 100%;
    background-color: #000;
    -o-object-fit   : fill;
    object-fit      : fill;
    z-index         : -2;
}

/* .zimam-banner .video-bg video {
    position         : absolute;
    top              : 0;
    left             : 0;
    width            : 100%;
    height           : 100%;
    pointer-events   : none;
    width            : 100vw;
    height           : 56.25vw;
    min-height       : 100vh;
    min-width        : 177.77vh;
    -webkit-transform: translate(-50%, 0%);
    -ms-transform    : translate(-50%, 0%);
    transform        : translate(-50%, 0%);
    margin-left      : 50%;
     z-index          : 1;
    opacity          : .4;
} */

.zimam-banner::before {
    content   : '';
    position  : absolute;
    top       : 0;
    left      : 0;
    width     : 100%;
    height    : 100%;
    background: linear-gradient(270deg, rgba(0, 0, 0, 0) 6.23%, rgba(0, 0, 0, 0.301723) 20.4%, rgba(0, 0, 0, 0.72) 34.7%, rgba(0, 0, 0, 0.72) 65.07%, rgba(0, 0, 0, 0.473991) 82.09%, rgba(0, 0, 0, 0) 100%);
    z-index   : -1;
}

.zimam-banner .banner-content {
    width    : 100%;
    max-width: 800px;
    margin   : 0 auto;
}

.zimam-banner .banner-content h1 {
    font-weight   : 600;
    font-size     : 60px;
    line-height   : 76px;
    letter-spacing: 0.5px;
    text-transform: capitalize;
    color         : #fff;
    margin-bottom : 16px;
}

.zimam-banner .banner-content p {
    font-weight   : 400;
    font-size     : 20px;
    line-height   : 32px;
    letter-spacing: 0.5px;
    text-transform: capitalize;
    margin-left   : auto;
    margin-right  : auto;
    margin-bottom : 30px;
    color         : #CDCDCD;
    width         : 100%;
    max-width     : 670px;
}

.what-we-do {
    padding            : 60px 0px;
    position           : relative;
    background-image   : url('../images/backgrounds/left-shape-orange.png'), url('../images/backgrounds/right-shape-orange.png');
    background-repeat  : no-repeat;
    background-position: top left, top right;
    background-size    : inherit;
}

.what-we-do .wwd-card,
.become-member .wwd-card,
.mac-body .wwd-card {
    display        : flex;
    flex-direction : column;
    gap            : 20px;
    text-align     : center;
    justify-content: center;
    color          : #333333;
}

.what-we-do .wwd-card {
    justify-content: space-between;
}

.what-we-do .wwd-card .cardIcon,
.become-member .wwd-card .cardIcon,
.mac-body .wwd-card .cardIcon {
    width : 72px;
    height: auto;
}

.what-we-do .wwd-card .wwd-card-title,
.mac-body .wwd-card .wwd-card-title {
    font-weight   : 600;
    font-size     : 20px;
    line-height   : 30px;
    letter-spacing: 0px;
}

.what-we-do .wwd-card .card-pra,
.become-member .wwd-card .card-pra,
.mac-body .wwd-card .card-pra {
    font-weight   : 400;
    font-size     : 16px;
    line-height   : 26px;
    letter-spacing: 0px;
}

.what-we-do .wwd-card .card-img img {
    width : 72px;
    height: 72px;
}

.upcomingEvent-carousel .swiper-wrapper .swiper-slide {
    perspective: 1000px;
    transform  : perspective(1000px);
    width      : auto !important;
    height     : auto !important;
}

.control-carousel {
    display        : flex;
    align-items    : center;
    justify-content: center;
    gap            : 20px;
}

.control-carousel .btn.btn-round-slider {
    width          : 48px;
    height         : 48px;
    display        : flex;
    align-items    : center;
    justify-content: center;
    border-radius  : 50%;
    border         : transparent;
    color          : #fff;
    background     : var(--gradiend-primary);
    font-size      : 25px;
}

.control-carousel .btn.btn-round-slider.swiper-button-disabled {
    background: transparent;
    color     : var(--primary-color);
    border    : 1px solid var(--primary-color);
    color     : var(--primary-color);
    cursor    : not-allowed;
    opacity   : 0.5;
}

.control-carousel .btn.btn-round-slider svg path {
    fill: #fff !important;
}

.control-carousel .btn.btn-round-slider.swiper-button-disabled svg path {
    fill: var(--primary-color) !important;
}

.control-carousel .btn.btn-round-slider .bi::before {
    vertical-align: middle !important;
}

.upcoming-card {
    width          : 405px;
    margin         : 10px;
    border-radius  : 20px;
    position       : relative;
    overflow       : hidden;
    box-shadow     : var(--shadow-main);
    height         : 100%;
    display        : flex;
    flex-direction : column;
    justify-content: space-between;
}

.upcoming-card .event-date {
    padding        : 10px 15px;
    display        : flex;
    align-items    : center;
    justify-content: center;
    color          : #fff;
    gap            : 5px;
    background     : var(--gradiend-primary);
    font-weight    : 600;
    font-size      : 14px;
    line-height    : 100%;
    letter-spacing : 0;
}

.upcoming-card .event-date i {
    margin-right: 5px;
}

.upcoming-card .event-banner {
    padding       : 30px 20px;
    padding-top   : 100px;
    position      : relative;
    display       : flex;
    flex-direction: column;
    gap           : 20px;
    color         : #fff;
    font-weight   : 600;
    font-size     : 24px;
    line-height   : 100%;
    letter-spacing: 0px;
    align-items   : flex-start;
    z-index       : 1;
}

.upcoming-card .event-banner::before {
    content   : '';
    position  : absolute;
    top       : 0;
    left      : 0;
    width     : 100%;
    height    : 100%;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.8) 96.68%);
    z-index   : -1;
}

.upcoming-card .event-tag {
    background-color: #F3F3F3;
    width           : auto;
    border-radius   : 6px;
    padding         : 5px 10px;
    color           : #150F0B;
    display         : flex;
    align-items     : center;
    justify-content : center;
    font-size       : 12px;
    font-weight     : 400;
}

.upcoming-card .event-banner .banner-img {
    position: absolute;
    top     : 0;
    left    : 0;
    width   : 100%;
    height  : 100%;
    z-index : -2;
    overflow: hidden;
}

.upcoming-card .event-banner .banner-img img {
    width     : 100%;
    height    : auto;
    object-fit: cover;
}

.upcoming-card .uc-body {
    padding       : 20px 20px;
    display       : flex;
    flex-direction: column;
}

.upcoming-card .uc-body p {
    margin-bottom : 0;
    font-size     : 16px;
    line-height   : 26px;
    letter-spacing: 0px;
}

.stay-connect {
    padding   : 80px 0px;
    background: linear-gradient(90deg, #FF4A07 0%, #FF931D 100%);
    position  : relative;
    z-index   : 1;
}

.stay-connect::before {
    content            : '';
    position           : absolute;
    top                : 0;
    left               : 0;
    width              : 30%;
    height             : 100%;
    background-image   : url('../images/backgrounds/top-left-white-shapes.png');
    background-position: top left;
    background-repeat  : no-repeat;
    background-size    : inherit;
    z-index            : -1;
}

.stay-connect::after {
    content            : '';
    position           : absolute;
    top                : 0;
    right              : 0;
    width              : 30%;
    height             : 100%;
    background-image   : url('../images/backgrounds/top-right-white-shapes.png');
    background-position: top right;
    background-repeat  : no-repeat;
    background-size    : inherit;
    z-index            : -1;
}

.stay-connect .container {
    background         : #FFFFFF;
    border-radius      : 30px;
    padding            : 60px 40px;
    background-image   : url('../images/backgrounds/Visual.jpg');
    background-repeat  : no-repeat;
    background-position: center right;
    background-size    : inherit;
    max-width          : 1050px;
}

.stay-connect .container .ns-body {
    width    : 100%;
    max-width: 605px;
}

.stay-connect .container .ns-body h1 {
    font-weight   : 600;
    font-size     : 36px;
    line-height   : 48px;
    letter-spacing: 0.5px;
}

.stay-connect .container .ns-body p {
    line-height   : 26px;
    color         : #333333;
    margin-bottom : 32px;
    letter-spacing: 0;
}

.stay-connect .container .ns-body .subscribe-form .form-group {
    width    : 100%;
    display  : flex;
    gap      : 12px;
    flex-wrap: nowrap;
}

.stay-connect .container .ns-body .subscribe-form .form-group input.formc-control {
    width: 472px;
}

.stay-connect .container .ns-body .subscribe-form .form-group input.sf-input {
    border-color : #94A3B863;
    margin-bottom: 0;
}

.stay-connect .container .ns-body .subscribe-form .form-group input.sf-input::placeholder {
    color: #94A3B8;
}

.stay-connect .container .ns-body .subscribe-form .form-group input.btn.btn-main {
    width        : 120px;
    border       : 1px solid transparent;
    color        : #fff;
    font-weight  : 500;
    margin-bottom: 0;
}

.stay-connect .container .ns-body .subscribe-form .form-group input.btn.btn-main:hover {
    border-color: var(--primary-color);
    color       : var(--primary-color);
}

section.become-member {
    background-image   : url('../images/backgrounds/center-left-shapes.svg'), url('../images/backgrounds/center-right-shapes.svg');
    background-repeat  : no-repeat;
    background-position: left top 15%, right top 15%;
    background-size    : inherit;
}

.feature-partner .marquee {
    display           : flex;
    overflow          : hidden;
    user-select       : none;
    gap               : var(--gap);
    -webkit-mask-image: linear-gradient(var(--mask-direction, to right), hsl(0 0% 0% / 0), hsl(0 0% 0% / 1) 20%, hsl(0 0% 0% / 1) 80%, hsl(0 0% 0% / 0));
}

.feature-partner .marquee .marquee_group {
    flex-shrink        : 0;
    display            : flex;
    align-items        : center;
    justify-content    : space-around;
    gap                : var(--gap);
    min-width          : 100%;
    animation          : scroll-x var(--duration) linear infinite;
    animation-direction: reverse;
    animation-delay    : -3s;
}

.feature-partner .marquee .marquee_group .logo_img {
    display      : grid;
    place-items  : center;
    padding      : 10px;
    border-radius: 8px;
    width        : 200px;
    height       : 120px;
    position     : relative;
    margin-bottom: 10px;
}

.feature-partner .marquee .marquee_group .logo_img img {
    width            : 140px;
    padding          : 10px;
    margin           : auto;
    position         : absolute;
    top              : 50%;
    left             : 50%;
    transform        : translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -moz-transform   : translate(-50%, -50%);
    -o-transform     : translate(-50%, -50%);
    -ms-transform    : translate(-50%, -50%);
}

@keyframes scroll-x {
    from {
        transform: translateX(var(--scroll-start));
    }

    to {
        transform: translateX(var(--scroll-end));
    }
}

@media (max-width: 992px) {

    .zimam-banner .banner-content h1 {
        font-size  : 50px;
        line-height: 62px;
    }

    .what-we-do {
        background-size: 40%;
    }

    section.become-member {
        background-size: 80%;
    }

    section.zimam-content section {
        padding: 40px 0px;
    }

    .stay-connect::before,
    .stay-connect::after {
        background-size: 100%;
    }

    .stay-connect .container {
        padding        : 30px 20px;
        background-size: 100%;
    }

    .stay-connect .container .ns-body .subscribe-form .form-group {
        flex-wrap: wrap;
    }

    .content-card {
        padding: 30px 20px;
        gap    : 15px;
    }
}

@media (max-width: 767px) {

    section.zimam-content section {
        padding: 20px 0px;
    }

    .zimam-banner {
        height: 80vh !important;
    }

    .zimam-banner .banner-content h1 {
        font-size  : 40px;
        line-height: 52px;
    }

    .stay-connect .container {
        max-width       : 95%;
        background-image: none;
    }

    .stay-connect .container .ns-body .subscribe-form .form-group {
        flex-direction: column;
    }

    .stay-connect .container .ns-body h1 {
        font-size  : 28px;
        line-height: 34px;
    }

    .content-card {
        padding: 20px 15px;
        gap    : 10px;
    }

    .upcomingEvent-carousel .swiper-wrapper .swiper-slide {
        width: 100% !important;
    }

    .upcoming-card {
        width: 95%;
    }

}

/* ===========================
   About Us Pages Styles  
=========================== */

section.history {
    position           : relative;
    background-image   : url('../images/backgrounds/center-left-shapes.svg'), url('../images/backgrounds/center-right-shapes.svg');
    background-repeat  : no-repeat;
    background-position: left top 15%, right top 15%;
    background-size    : inherit;
}

.historyCarousel .timeline-container,
.award-winner .timeline-container {
    position : relative;
    max-width: 800px;
    margin   : auto;
    padding  : 0px 50px;
    z-index  : 1;
}

.historyCarousel .year-indicators {
    position             : relative;
    display              : flex;
    align-items          : center;
    justify-content      : center;
    gap                  : 50px;
    padding              : 60px 20px;
    width                : 100%;
    margin               : auto;
    overflow-x           : auto;
    scroll-behavior      : smooth;
    scrollbar-width      : none;
    -ms-overflow-style   : none;
    flex-wrap            : nowrap;
    z-index              : 1;
    /* -webkit-mask-image: linear-gradient(var(--mask-direction, to right), hsl(0 0% 0% / 0), hsl(0 0% 0% / 1) 20%, hsl(0 0% 0% / 1) 80%, hsl(0 0% 0% / 0)); */
    /* keep your fade edges */
    -webkit-mask-image   : linear-gradient(to right,
            transparent,
            black 20%,
            black 80%,
            transparent);
    mask-image: linear-gradient(to right,
            transparent,
            black 20%,
            black 80%,
            transparent);

    /* create the background line instead of ::after */
    /* background           : linear-gradient(#D1D5DC 2px, transparent 2px) center center / 150% 2px no-repeat;
    background-attachment: local; */
    /* this is the magic line that stays steady during scroll */
}

.historyCarousel .before-overlay {
    content          : '';
    position         : absolute;
    top              : 50%;
    left             : 0;
    width            : 100px;
    height           : 80%;
    background       : linear-gradient(270deg, rgba(255, 255, 255, 0), #fff);
    transform        : translateY(-50%);
    -webkit-transform: translateY(-50%);
    z-index          : 2;
}

.historyCarousel .after-overlay {
    content          : '';
    position         : absolute;
    top              : 50%;
    right            : 0;
    width            : 100px;
    height           : 100%;
    background       : linear-gradient(90deg, rgba(255, 255, 255, 0), #fff);
    transform        : translateY(-50%);
    -webkit-transform: translateY(-50%);
    z-index          : 2;
}

.historyCarousel .year-indicators::-webkit-scrollbar,
.year-indicators::-webkit-scrollbar {
    display: none;
}

.historyCarousel .timeline-container .year-indicators::after {
    content          : '';
    position         : absolute;
    top              : 50%;
    left             : 50%;
    width            : 150%;
    height           : 2px;
    background       : #D1D5DC;
    transform        : translate(-50%, -50%);
    -webkit-transform: translate(-50%, 50%);
    z-index          : -1;
    display          : none;
}

.historyCarousel .year-indicators .btn.year-btn,
.award-winner .year-indicators .btn.year-btn {
    padding      : 0;
    border       : 0;
    position     : relative;
    width        : 70px;
    height       : 70px;
    border-radius: 50%;
    background   : #D1D5DC;
    flex         : 0 0 auto;
}

.historyCarousel .year-indicators .btn.year-btn.active,
.award-winner .year-indicators .btn.year-btn.active {
    background: var(--gradiend-primary);
    box-shadow: 0px 12px 25px -5px #F159224D;
}

.historyCarousel .year-indicators .btn.year-btn .btn-inner,
.award-winner .year-indicators .btn.year-btn .btn-inner {
    position         : absolute;
    width            : 57px;
    height           : 57px;
    border-radius    : 50%;
    top              : 50%;
    left             : 50%;
    transform        : translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    display          : flex;
    align-items      : center;
    justify-content  : center;
    background       : #fff;
    font-weight      : 600;
    font-size        : 16px;
    letter-spacing   : 0;
    text-align       : center;
}

.historyCarousel .year-indicators .btn.year-btn.active .btn-inner,
.award-winner .year-indicators .btn.year-btn.active .btn-inner {
    color: var(--primary-color);
}

.historyCarousel .year-indicators .btn.year-btn.active::after,
.award-winner .year-indicators .btn.year-btn.active::after {
    content          : '';
    position         : absolute;
    top              : 100%;
    left             : 50%;
    width            : 2px;
    height           : 60px;
    background-color : var(--primary-color);
    transform        : translateX(-50%);
    -webkit-transform: translateX(-50%);
}

.historyCarousel .year-indicators .btn.year-btn::before {
    content          : '';
    position         : absolute;
    top              : 50%;
    left             : 100%;
    width            : 100px;
    height           : 2px;
    background-color : #D1D5DC;
    transform        : translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    z-index          : -1;
}

.historyCarousel .year-indicators .btn.year-btn:last-child::before {
    display: none;
}

.historyCarousel .timeline-container .scroll-btn {
    height           : 42px;
    width            : 42px;
    border-radius    : 50%;
    border           : 2px solid var(--primary-color);
    display          : flex;
    align-items      : center;
    justify-content  : center;
    background-color : transparent;
    position         : absolute;
    top              : 50%;
    transform        : translateY(-50%);
    -webkit-transform: translateY(-50%);
    z-index          : 2;
}

.historyCarousel .timeline-container .scroll-btn:hover {
    background-color: var(--primary-color);
}

.historyCarousel .timeline-container .scroll-btn:hover svg path {
    fill: #ffffff !important;
}

.historyCarousel .timeline-container .scroll-btn.left {
    left: -10%;
}

.historyCarousel .timeline-container .scroll-btn.right {
    right: -10%;
}

.historyCarousel .carousel-inner {
    box-shadow   : var(--shadow-main);
    border-radius: 30px;
    margin-bottom: 100px;
}

.historyCarousel .carousel-indicators {
    margin: 0;
    width : 100%;
    bottom: -30px;
}

.historyCarousel .carousel-indicators button {
    border       : 1px solid var(--primary-color);
    opacity      : 1;
    width        : 10px;
    height       : 10px;
    border-radius: 50%;
    transition   : 0.2s all;
}

.historyCarousel .carousel-indicators button.active {
    background   : var(--gradiend-primary);
    width        : 16px;
    border       : transparent;
    border-radius: 100px;
    height       : 12px;
}

.history-card {
    background-color: #fff;
    width           : 100%;
    position        : relative;
    padding         : 45px 40px;
    margin-bottom   : 26px;
}

.history-card .history-img img {
    width        : 100%;
    height       : auto;
    border-radius: var(--radius-main);
}

.history-card .history-content {
    padding: 10px 20px;
}

.history-card p {
    line-height: 26px;
}

.legal-card {
    background-color: #fff;
    box-shadow      : var(--shadow-main);
    border-radius   : 30px;
    width           : 100%;
    position        : relative;
    padding         : 30px 40px;
    margin-top      : 20px;
}

.legal-card .sec-title {
    width       : fit-content;
    margin-right: auto;
    margin-left : auto;
}

.legal-card .row-title {
    font-weight: 600;
    font-size  : 16px;
    line-height: 26px;
    color      : var(--text-color-main);
}

.legal-card .sec-para {
    font-size  : 16px;
    line-height: 26px;
}

section.structure .zimamGs-tab li button.nav-link {
    box-shadow     : 0px 1px 10px 0px #4e4c4c1f;
    background     : #fff;
    border         : 1px solid var(--primary-color);
    font-weight    : 500;
    font-size      : 16px;
    line-height    : 30px;
    letter-spacing : 0px;
    text-align     : center;
    padding        : 6px 20px;
    border-radius  : 10px;
    color          : var(--text-color-main);
    backdrop-filter: blur(24px)
}

section.structure .zimamGs-tab li button.nav-link.active {
    border-color   : transparent;
    background     : var(--gradiend-primary);
    color          : var(--text-color-white);
    box-shadow     : 0px 2px 20px -2px #F159224D;
    background-size: 105%;
}

section.structure .tab-pane {
    margin-top      : 40px;
    box-shadow      : 0px 2px 20px 0px #0000001F;
    backdrop-filter : blur(24px);
    background-color: #fff;
    border-radius   : 20px;
    padding         : 45px 40px;
    text-align      : center;
    line-height     : 26px;
    letter-spacing  : 0px;
}

.contact-info .content-card {
    gap: 20px;
}


.contact-info .content-card .card-heading {
    font-size  : 16px;
    line-height: 26px;
}

section.our-guiding {
    background: linear-gradient(180deg, #FF4A07 20.97%, #FF931D 55.47%);
    position  : relative;
    z-index   : 1;
}

section.structure .zimamGs-tab li button.nav-link i.bi::before {
    vertical-align: middle;
    font-size     : 12px;
    margin-left   : 10px;
}

section.our-guiding::before {
    content : '';
    position: absolute;
    top     : 0;
    left    : 0;
    width   : 100%;
    height  : 100%;
    background-image: url('../images/backgrounds/top-left-white-shapes.png'), url('../images/backgrounds/top-right-white-shapes.png'),
        url('../images/backgrounds/bottom-left-white-shapes.png'), url('../images/backgrounds/bottom-right-white-shapes.png');
    background-repeat  : no-repeat;
    background-size    : inherit;
    background-position: left top, right top, bottom left, bottom right;
    z-index            : -1;
}

section.our-guiding .sec-title,
section.our-guiding p.sec-para {
    color: var(--text-color-white);
}

section.our-guiding .sec-title {
    border-bottom-color: #fff;
}

section.our-guiding .row.gc-row {
    justify-content: center;
    gap            : 12px;
}

section.our-guiding .row.gc-row .col {
    width        : 246px;
    margin-bottom: 20px;
    padding      : 0;
}

section.our-guiding .card.guide-card {
    padding       : 40px 16px;
    flex-direction: column;
    gap           : 20px;
    text-align    : center;
}

section.our-guiding .card.guide-card .card-icon img {
    height: 60px;
    width : auto;
}

section.our-guiding .card.guide-card h2 {
    font-size     : 20px;
    line-height   : 30px;
    letter-spacing: 0;
    margin-bottom : 0;
}

section.our-guiding .card.guide-card p {
    line-height   : 26px;
    letter-spacing: 0;
}

section.strategic-sec {
    background-image   : url('../images/backgrounds/bottom-left-shaps.svg'), url('../images/backgrounds/bottom-right-shaps.svg');
    background-position: left bottom, right bottom;
    background-repeat  : no-repeat, no-repeat;
    background-size    : inherit;
}

.card.strategic-card {
    padding        : 20px;
    flex-direction : column;
    justify-content: flex-start;
    align-items    : center;
    gap            : 20px;
}

.card.strategic-card .card-img img {
    width        : 100%;
    height       : auto;
    border-radius: 10px;
}

.card.strategic-card .sc-heading {
    font-weight   : 600;
    font-size     : 26px;
    line-height   : 30px;
    letter-spacing: 0px;
    text-align    : center;
}

.card.strategic-card p {
    letter-spacing: 0px;
    text-align    : center;
    line-height   : 26px;
}

section.organization-members .members-container {
    background-color   : #fff;
    box-shadow         : var(--shadow-main);
    border-radius      : 30px;
    padding            : 40px 20px;
    margin-bottom      : 110px;
    position           : relative;
    background-image   : url('../images/backgrounds/left-shape-orange.png'), url('../images/backgrounds/right-shape-orange.png');
    background-position: top left, top right;
    background-repeat  : no-repeat;
    background-size    : inherit;
}

section.organization-members .members-container::after {
    content            : '';
    position           : absolute;
    width              : 20px;
    height             : 110px;
    top                : 100%;
    background-image   : url('../images/section-images/middle-line.svg');
    background-position: center;
    background-repeat  : no-repeat;
    background-size    : inherit;
}

section.organization-members .members-container:last-child {
    margin-bottom: 20px;
}

section.organization-members .members-container:last-child::after {
    display: none;
}

section.organization-members .members-container .mc-row {
    justify-content: center;
    gap            : 40px;
    max-width      : 900px;
    flex-wrap      : wrap;
    margin-left    : auto;
    margin-right   : auto;
}

section.organization-members .members-container .mc-row .col {
    width        : 272px;
    margin-bottom: 10px;
    padding      : 0;
    flex         : none;
}

section.organization-members .members-container .mc-row .col .card.mc-card {
    height        : 100%;
    border        : none;
    box-shadow    : 0px 2px 20px 0px #0000001F;
    padding       : 10px 12px;
    padding-bottom: 20px;
    width         : 100%;
    border-radius : 20px;
}

section.organization-members .members-container .mc-row .col .card.mc-card .member-image {
    margin-bottom  : 10px;
    width          : 200px;
    height         : 200px;
    margin-right   : auto;
    margin-left    : auto;
    display        : flex;
    align-items    : flex-end;
    justify-content: center;
}

section.organization-members .members-container .mc-row .col .card.mc-card .member-image img {
    width : 200px;
    height: auto;
}

section.organization-members .members-container .mc-row .col .card.mc-card .member-name {
    font-weight   : 500;
    font-size     : 16px;
    line-height   : 160%;
    letter-spacing: 0;
    text-align    : center;
    color         : var(--text-color-title);
}

section.organization-members .members-container .mc-row .col .card.mc-card .member-position {
    font-weight   : 400;
    font-size     : 14px;
    line-height   : 160%;
    letter-spacing: 0;
    text-align    : center;
}

section.organization-members .working-group .mc-row {
    max-width: 1200px;
    gap      : 30px;
}

section.organization-members .working-group .mc-row .col .card.mc-card {
    padding       : 40px 20px;
    padding-bottom: 120px;
    cursor        : pointer;
}

section.organization-members .working-group .mc-row .col .card.mc-card .card-icon {
    margin-bottom: 30px;
}

section.organization-members .working-group .mc-row .col .card.mc-card .card-icon img {
    height: 90px;
    width : auto;
}

section.organization-members .working-group .mc-row .col .card.mc-card .btn {
    position         : absolute;
    bottom           : 40px;
    left             : 50%;
    width            : 80%;
    transform        : translateX(-50%);
    -webkit-transform: translateX(-50%);
    border-radius    : 50px;
    background-color : #F3F3F3;
    border-color     : #F3F3F3;
    font-weight      : 400;
    font-size        : 14px;
    letter-spacing   : 0;
    color            : #333333;
    display          : flex;
    align-items      : center;
    justify-content  : flex-start;
    padding          : 12px 20px;
}

section.organization-members .working-group .mc-row .col .card.mc-card .btn::after {
    content            : '';
    position           : absolute;
    top                : 50%;
    right              : 20px;
    transform          : translateY(-50%);
    -webkit-transform  : translateY(-50%);
    width              : 12px;
    height             : 12px;
    background-image   : url('../images/section-images/btn-after.svg');
    background-position: center;
    background-repeat  : no-repeat;
    background-size    : inherit;
}

section.organization-members .working-group .mc-row .col .card.mc-card:hover .btn {
    background-color: var(--primary-color);
    border-color    : var(--primary-color);
    color           : #fff;
}

section.organization-members .working-group .mc-row .col .card.mc-card:hover .btn::after {
    background-image: url('../images/section-images/btn-after-white.svg');
}

section.partner-community {
    padding-top: 0;
}

section.partner-community .card.partner-card {
    width          : 100%;
    border-radius  : 10px;
    box-shadow     : 0px 2px 20px 0px #0000001F;
    backdrop-filter: blur(24px);
    padding        : 16px 16px;
    padding-bottom : 100px;
    font-weight    : 400;
    font-size      : 14px;
    line-height    : 22px;
    letter-spacing : 0px;
    border         : 0;
    cursor         : pointer;
}

section.partner-community .card.partner-card .partner-logo {
    width           : 100%;
    height          : 160px;
    display         : flex;
    align-items     : center;
    justify-content : center;
    background-color: #F5F4F5;
    border-radius   : 10px;
    margin-bottom   : 16px;
}

section.partner-community .card.partner-card .partner-logo img {
    width     : auto;
    max-width : 100%;
    height    : auto;
    max-height: 100%;
    transition: 0.2s all;
    transform : scale(1);
    object-fit: contain;
    display   : block;
}

section.partner-community .card.partner-card .partner-name {
    text-transform: uppercase;
    color         : var(--text-color-main);
    font-weight   : 600;
    font-size     : 14px;
    line-height   : 22px;
    margin-bottom : 13px;
}

section.partner-community .card.partner-card .pc-footer {
    position       : absolute;
    bottom         : 0;
    left           : 0;
    width          : 100%;
    padding        : 16px;
    display        : flex;
    align-items    : center;
    justify-content: space-between;
}

section.partner-community .card.partner-card .pc-footer .partner-type {
    font-size     : 14px;
    line-height   : 30px;
    letter-spacing: 0px;
    color         : #454853;
    font-style    : oblique;
}

section.partner-community .card.partner-card .pc-footer .c-icon {
    width           : 36px;
    height          : 36px;
    display         : flex;
    align-items     : center;
    justify-content : center;
    border-radius   : 50%;
    background-color: #F3F3F3;
}

section.partner-community .card.partner-card:hover {
    box-shadow: var(--shadow-main);
}

section.partner-community .card.partner-card:hover .partner-logo img {
    transform: scale(1.05);
}

section.partner-community .card.partner-card:hover .pc-footer .partner-type {
    color: #150F0B;
}

section.partner-community .card.partner-card:hover .pc-footer .c-icon {
    background-color: var(--primary-color);
}

section.partner-community .card.partner-card:hover .pc-footer .c-icon svg path {
    fill: #ffffff !important;
}

.partner-benitfit,
.partner-form {
    width        : 100%;
    height       : 100%;
    border-radius: 30px;
    padding      : 40px 40px;
    box-shadow   : var(--shadow-main);
    background   : #fff;
}

.partner-benitfit .pb-header,
.partner-form .pf-title {
    font-weight   : 600;
    font-size     : 20px;
    line-height   : 32px;
    letter-spacing: 0.4px;
    text-transform: capitalize;
    color         : var(--text-color-title);
    margin-bottom : 20px;
}

.partner-benitfit .pb-body {
    display       : flex;
    flex-direction: column;
    gap           : 32px;
}

.partner-benitfit .pb-body .pb-col {
    display    : flex;
    align-items: flex-start;
    gap        : 16px;
    flex-wrap  : nowrap;
}

.partner-benitfit .pb-body .pb-col .pb-icon img {
    width : 50px;
    height: auto;
}

.partner-benitfit .pb-body .pb-col .pb-content,
.partner-form .pf-content {
    display       : flex;
    flex-direction: column;
    gap           : 5px;
    line-height   : 26px;
    letter-spacing: 0;
}

.partner-benitfit .pb-body .pb-col .pb-content .title {
    font-weight   : 600;
    font-size     : 14px;
    line-height   : 26px;
    letter-spacing: 0;
    text-transform: uppercase;
    color         : var(--text-color-title);
}

.partner-form .form-group input.form-control,
.partner-form .form-group .custom-select,
.partner-form .form-group textarea.form-control {
    margin-bottom: 0;
}

.partner-form .floating-select .floating-label {
    top: 50% !important;
}

.partner-form .floating-select.error-class .floating-label {
    top: 35% !important;
}

.partner-form .floating-select.active .floating-label {
    top: 0 !important;
}

.partner-form .form-group {
    margin-bottom: 30px;
}

@media (max-width: 1400px) {
    section.structure .zimamGs-tab li button.nav-link {
        font-size: 14px;
        padding  : 6px 10px;
    }
}

@media (max-width: 992px) {
    .top-section {
        background-size: 40%;
    }

    section.our-guiding::before {
        background-size: 30%;
    }

    section.strategic-sec,
    section.organization-members .members-container {
        background-size: 40%;
    }

    section.history {
        background-size: 80%;
    }
}

@media (max-width: 767px) {
    section.our-guiding .row.gc-row {
        flex-direction: column;
        align-items   : center;
    }

    section.our-guiding .row.gc-row .col {
        width        : 95%;
        margin-bottom: 10px;
    }

    section.our-guiding .card.guide-card {
        padding: 20px 10px;
        gap    : 10px;
    }

    .legal-card {
        padding   : 15px 20px;
        margin-top: 10px;
    }

    section.structure .tab-pane {
        padding: 25px 20px;
    }

    section.organization-members .members-container .mc-row .col {
        margin-bottom: 0;
    }

    section.organization-members .members-container {
        margin-bottom: 50px;
    }

    section.organization-members .members-container::after {
        height: 50px;
    }

    .partner-benitfit,
    .partner-form {
        padding: 20px 15px;
    }

    .historyCarousel .timeline-container,
    .award-winner .timeline-container {
        padding: 0px 20px;
    }

    .historyCarousel .year-indicators {
        padding              : 20px 10px;
        gap                  : 30px;
        background-attachment: inherit;
        mask-image           : none;
    }

    .historyCarousel .year-indicators .btn.year-btn.active::after,
    .award-winner .year-indicators .btn.year-btn.active::after {
        height: 20px;
    }

    .historyCarousel .year-indicators .btn.year-btn,
    .award-winner .year-indicators .btn.year-btn {
        width : 50px;
        height: 50px;
    }

    .historyCarousel .year-indicators .btn.year-btn .btn-inner,
    .award-winner .year-indicators .btn.year-btn .btn-inner {
        width    : 37px;
        height   : 37px;
        font-size: 12px;
    }

    .historyCarousel .timeline-container .scroll-btn {
        display: none !important;
    }

    .history-card {
        padding: 25px 20px;
    }

    .partner-form .form-group.row .col-md-6:first-child {
        margin-bottom: 30px;
    }
}

/* ===========================
   Membership Pages Style
=========================== */

.membership-banner {
    padding            : 65px 0px !important;
    position           : relative;
    background-image   : url('../images/backgrounds/membership-banner.png');
    background-repeat  : no-repeat;
    background-size    : cover;
    background-position: center;
}

.membership-banner .mb-content {
    display       : flex;
    flex-direction: column;
    gap           : 20px;
    color         : #fff;
    line-height   : 100%;
    letter-spacing: 0.5px;
}

.membership-banner .mb-content .mb-title {
    font-weight: 600;
    font-size  : 20px;

}

.membership-banner .mb-content .mb-heading {
    font-weight: 600;
    font-size  : 42px;
    line-height: 125%;
}

.membership-banner .mb-content .mb-para {
    width    : 100%;
    max-width: 760px;
}

.membeship-details-tab ul.memberhsip-tab li .nav-link {
    display        : flex;
    align-items    : center;
    justify-content: center;
    flex-direction : column;
    gap            : 5px;
    border         : 1px solid var(--primary-color);
    border-radius  : 12px;
    padding        : 12px 20px;
    background     : #fff;
    color          : var(--text-color-title);
    font-weight    : 600;
}

.membeship-details-tab ul.memberhsip-tab li .nav-link:hover,
.membeship-details-tab ul.memberhsip-tab li .nav-link.active {
    background: var(--gradiend-primary);
    color     : #fff;
}

.membeship-details-tab ul.memberhsip-tab li .nav-link:hover svg path,
.membeship-details-tab ul.memberhsip-tab li .nav-link.active svg path {
    fill: #fff !important;
}

.membeship-details-tab .tab-content .tab-pane,
.membership-accordion .accordion-item .accordion-collapse {
    border       : 1px solid var(--primary-color);
    border-radius: 20px;
    padding      : 45px 40px;
    margin-top   : 30px;
}

.membeship-details-tab .tab-content .tab-pane .tp-body,
.membership-accordion .accordion-item .accordion-collapse .collapse-body {
    display       : flex;
    flex-direction: column;
    gap           : 16px;
}

.membeship-details-tab .tab-content .tab-pane .tp-body .tp-header,
.membership-accordion .accordion-item .accordion-collapse .collapse-body .tp-header {
    display        : flex;
    flex-wrap      : wrap;
    justify-content: space-between;
    align-items    : center;
}

.membeship-details-tab .tab-content .tab-pane .tp-body .tp-header .tph-left,
.membership-accordion .accordion-item .accordion-collapse .collapse-body .tp-header .tph-left {
    width    : 100%;
    max-width: 75%;
}

.membeship-details-tab .tab-content .tab-pane .tp-body .tp-header h1,
.membership-accordion .accordion-item .accordion-collapse .collapse-body .tp-header h1 {
    font-weight   : 600;
    font-size     : 36px;
    line-height   : 32.09px;
    letter-spacing: 0;
    text-transform: capitalize;
}

.membeship-details-tab .tab-content .tab-pane .tp-body .tp-header p,
.membership-accordion .accordion-item .accordion-collapse .collapse-body .tp-header p {
    font-size     : 18px;
    font-weight   : 500;
    letter-spacing: 0;
}

.membeship-details-tab .tab-content .tab-pane .tp-body .membership-points,
.membership-accordion .accordion-item .accordion-collapse .collapse-body .membership-points {
    display       : flex;
    flex-direction: column;
    gap           : 16px;
}

.membeship-details-tab .tab-content .tab-pane .tp-body h2,
.membership-accordion .accordion-item .accordion-collapse .collapse-body h2 {
    color        : var(--primary-color);
    font-size    : 18px;
    font-weight  : 600;
    line-height  : 100%;
    margin-bottom: 0;
}

.membeship-details-tab .tab-content .tab-pane .tp-body ul.nav li,
.membership-accordion .accordion-item .accordion-collapse .collapse-body ul.nav li {
    letter-spacing: 0;
    line-height   : 100%;
    color         : var(--text-color-main);
    margin-bottom : 12px;
    padding-left  : 26px;
    position      : relative;
}

.membeship-details-tab .tab-content .tab-pane .tp-body ul.nav li::before,
.membership-accordion .accordion-item .accordion-collapse .collapse-body ul.nav li::before {
    content            : '';
    width              : 16px;
    height             : 16px;
    background-image   : url('../images/memberhsip/tick.svg');
    background-repeat  : no-repeat;
    background-position: center;
    background-size    : inherit;
    position           : absolute;
    top                : 0;
    left               : 0;
}

.membeship-details-tab .tab-content .tab-pane .tp-body ul.nav li strong,
.membeship-details-tab .tab-content .tab-pane .tp-body ul.nav li b,
.membership-accordion .accordion-item .accordion-collapse .collapse-body ul.nav li strong,
.membership-accordion .accordion-item .accordion-collapse .collapse-body ul.nav li b {
    font-weight: 500;
}

.membeship-details-tab .tab-content .tab-pane .memberhsip-price,
.membership-accordion .accordion-item .accordion-collapse .collapse-body .memberhsip-price {
    display       : flex;
    flex-direction: column;
    gap           : 20px;
    text-align    : center;
    width         : 100%;
    max-width     : 20%;
}

.membeship-details-tab .tab-content .tab-pane .memberhsip-price .price-title,
.membership-accordion .accordion-item .accordion-collapse .collapse-body .memberhsip-price .price-title {
    font-weight   : 600;
    font-size     : 32px;
    line-height   : 100%;
    letter-spacing: 0;
    text-transform: capitalize;
    color         : var(--text-color-title);
    display       : flex;
    align-items   : center;
    gap           : 10px;
}

.membeship-details-tab .tab-content .tab-pane .memberhsip-price .price-title span,
.membership-accordion .accordion-item .accordion-collapse .collapse-body .memberhsip-price .price-title span {
    font-weight: 500;
    font-size  : 16px;
}

.membership-accordion {
    border       : 1px solid var(--primary-color);
    padding      : 10px;
    border-radius: 20px;
}

.membership-accordion .accordion-item {
    border       : none;
    margin-bottom: 15px;
}

.membership-accordion .accordion-item .accordion-collapse {
    border    : 0;
    margin-top: 0;
    padding   : 20px 15px;
}

.membership-accordion .accordion-item .accordion-button {
    display         : flex;
    align-items     : center;
    justify-content : flex-start;
    flex-direction  : row;
    gap             : 10px;
    background-color: #fff;
    border          : 0;
    color           : var(--text-color-title);
    border-radius   : 10px;
    box-shadow      : none;
}

.membership-accordion .accordion-item .accordion-button:not(.collapsed) {
    background: var(--gradiend-primary);
    color     : #fff;
}

.membership-accordion .accordion-item .accordion-button:not(.collapsed) svg path {
    fill: #fff !important;
}

.membership-application {
    background-image: url('../images/backgrounds/left-shape-orange.png'), url('../images/backgrounds/right-shape-orange.png'),
        url('../images/backgrounds/bottom-left-shaps.svg'), url('../images/backgrounds/bottom-right-shaps.svg');
    background-position: top left, top right, bottom left, bottom right;
    background-repeat  : no-repeat;
    background-size    : inherit;
}

.how-to-work {
    position   : relative;
    padding-top: 30px;
}

.how-to-work .title {
    font-weight   : 600;
    font-size     : 20px;
    line-height   : 32px;
    letter-spacing: 0.4px;
    text-transform: capitalize;
    margin-bottom : 20px;
}

.how-to-work .flow-steps {
    display       : flex;
    flex-direction: column;
    gap           : 30px;
    position      : relative;
    margin-bottom : 45px;
    padding-left  : 45px;
}

.how-to-work .flow-steps::before {
    content            : '';
    position           : absolute;
    top                : 0;
    left               : 0;
    width              : 28px;
    height             : 100%;
    background-image   : url('../images/memberhsip/line-before.svg');
    background-repeat  : repeat-y;
    background-position: center;
    background-size    : inherit;

}

.how-to-work .flow-steps .step .title {
    line-height   : 100%;
    letter-spacing: 0.4px;
    font-weight   : 600;
    margin-bottom : 5px;
    position      : relative;
}

.how-to-work .flow-steps .step .title::before {
    content            : '';
    position           : absolute;
    top                : 0;
    left               : -45px;
    width              : 28px;
    height             : 28px;
    background-image   : url('../images/memberhsip/step.svg');
    background-repeat  : no-repeat;
    background-position: center;
    background-size    : inherit;
}

.how-to-work .flow-steps .step p {
    letter-spacing: 0;
}

.how-to-work .contact-box {
    display       : flex;
    flex-direction: column;
    gap           : 10px;
}

.how-to-work .contact-box .cb-inner {
    display       : flex;
    align-items   : center;
    gap           : 10px;
    font-size     : 14px;
    line-height   : 130%;
    letter-spacing: 0.37px;
}

.how-to-work .contact-box .cb-inner .icon-box {
    width           : 24px;
    height          : 24px;
    border-radius   : 50%;
    display         : flex;
    align-items     : center;
    justify-content : center;
    color           : #fff;
    font-size       : 12px;
    background-color: var(--primary-color);
}

.how-to-work .contact-box .cb-inner .icon-box .bi::before {
    vertical-align: -2.5px;
}

.step-form-container .step-indicators {
    display        : flex;
    justify-content: space-between;
    margin-bottom  : 90px;
}

.step-form-container .step-indicators .step {
    text-align     : center;
    position       : relative;
    flex           : 1;
    font-weight    : 500;
    color          : #828282;
    letter-spacing : 0.4px;
    font-size      : 14px;
    display        : flex;
    align-items    : center;
    justify-content: center;
    gap            : 8px;
    flex-direction : column;
}

.step-form-container .step-indicators .step .step-number {
    width           : 36px;
    height          : 36px;
    border-radius   : 50%;
    display         : flex;
    align-items     : center;
    justify-content : center;
    background-color: #fff;
    border          : 1px solid #AFAFAF;
    font-weight     : 600;
    font-size       : 16px;
    color           : #454853;
    z-index         : 1;
}

.step-form-container .step-indicators .step.active {
    color: #000;
}

.step-form-container .step-indicators .step.active .step-number {
    background-color: #454853;
    color           : #fff;
}

.step-form-container .step-indicators .step::before {
    content         : '';
    position        : absolute;
    top             : 50%;
    left            : 100%;
    transform       : translate(-50%, -50%);
    width           : 100%;
    height          : 1px;
    background-color: #AFAFAF;
}

.step-form-container .step-indicators .step:last-child::before {
    display: none;
}

.step-form-container .step-indicators .step span {
    display  : block;
    font-size: 14px;
}

.step-form-container .step-indicators .step span.step-title {
    position         : absolute;
    bottom           : -60px;
    left             : 50%;
    text-align       : center;
    width            : 280px;
    transform        : translateX(-50%);
    -webkit-transform: translateX(-50%);
    line-height      : 20px;
    letter-spacing   : 0.4px;
}

.step-form-container .form-step {
    display: none;
}

.step-form-container .form-step.active {
    display  : block;
    animation: fadeIn 0.3s ease-in-out;
}

.step-form-container .form-step .form-heading {
    font-weight   : 600;
    font-size     : 16px;
    line-height   : 24px;
    letter-spacing: 0px;
    color         : #150F0B;
    margin-bottom : 20px;
}

.step-form-container .form-step .form-group .btn-upload-group {
    background-color: #fff;
    border          : 1px solid #00000061;
    border-radius   : 8px;
    padding         : 0;
    letter-spacing  : 0;
}

.step-form-container .form-step .form-group .btn-upload-group span.upload-btn {
    display                  : flex;
    align-items              : center;
    justify-content          : center;
    gap                      : 10px;
    padding                  : 16px 25px;
    font-size                : 16px;
    line-height              : 23px;
    letter-spacing           : 0.4px;
    color                    : #333333;
    font-weight              : 500;
    border-right             : 1px solid #00000061;
    background-color         : #F0F0F0;
    border-top-left-radius   : 8px;
    border-bottom-left-radius: 8px;
    width                    : 160px;
}


.step-form-container .form-step .form-group .btn-upload-group span.file-name {
    padding    : 16px 14px;
    color      : #00000099;
    font-size  : 16px;
    line-height: 23px;
    width      : fit-content;
}

.step-form-container .form-step .form-group .btn-upload-group span.file-name.file-selected {
    color      : #150F0B;
    font-weight: 500;
}

.step-form-container .form-step .form-group .delete-btn {
    background-color : #F0F0F0;
    width            : 24px;
    height           : 24px;
    display          : flex;
    align-items      : center;
    justify-content  : center;
    border-radius    : 50%;
    position         : absolute;
    top              : 50%;
    right            : 20px;
    transform        : translateY(-50%);
    -webkit-transform: translateY(-50%);
    color            : #454853;
    font-size        : 14px;
    padding          : 0;
    border           : 0;
}

.step-form-container .form-step .form-group .delete-btn:hover {
    background-color: #dfdede;
}

@keyframes fadeIn {
    from {
        opacity  : 0;
        transform: translateY(10px);
    }

    to {
        opacity  : 1;
        transform: translateY(0);
    }
}

@media (max-width: 992px) {
    .membeship-details-tab ul.memberhsip-tab li .nav-link {
        font-size    : 14px;
        padding      : 6px 15px;
        border-radius: 8px;
        gap          : 0;
    }

    .membeship-details-tab ul.memberhsip-tab li .nav-link svg {
        width : 30px !important;
        height: auto !important;
    }

    .membeship-details-tab .tab-content .tab-pane .tp-body .tp-header,
    .membership-accordion .accordion-item .accordion-collapse .collapse-body .tp-header {
        flex-direction: column;
        align-items   : flex-start;
    }

    .membeship-details-tab .tab-content .tab-pane .tp-body .tp-header .tph-left,
    .membeship-details-tab .tab-content .tab-pane .memberhsip-price,
    .membership-accordion .accordion-item .accordion-collapse .collapse-body .tp-header .tph-left,
    .membership-accordion .accordion-item .accordion-collapse .collapse-body .memberhsip-price {
        max-width: 100%;
    }

    .membeship-details-tab .tab-content .tab-pane .tp-body .tp-header .tph-left,
    .membership-accordion .accordion-item .accordion-collapse .collapse-body .tp-header .tph-left {
        margin-bottom: 10px;
    }

    .membeship-details-tab .tab-content .tab-pane .memberhsip-price,
    .membership-accordion .accordion-item .accordion-collapse .collapse-body .memberhsip-price {
        text-align: left;
        gap       : 5px;
    }

    .membeship-details-tab .tab-content .tab-pane .tp-body ul.nav li::before,
    .membership-accordion .accordion-item .accordion-collapse .collapse-body ul.nav li::before {
        width          : 12px;
        height         : 12px;
        background-size: 100%;
        top            : 5px;
    }

    .membership-application {
        background-size: 40%;
    }

    .form-card {
        padding: 30px 30px;
    }

    .step-form-container .step-indicators .step span.step-title {
        width: 200px;
    }
}

@media (max-width: 768px) and (min-width: 767px) {
    .step-form-container .step-indicators {
        margin-bottom: 120px;
    }

    .step-form-container .step-indicators .step span.step-title {
        width      : 170px;
        bottom     : -100px;
        line-height: 20px;
    }
}

@media (max-width: 767px) {

    .membership-banner .mb-content {
        gap: 15px;
    }

    .membership-banner .mb-content .mb-title {
        font-size: 16px;
    }

    .membership-banner .mb-content .mb-heading {
        font-size  : 32px;
        line-height: 115%;
    }

    .membership-banner .mb-content .mb-para {
        font-size  : 16px;
        line-height: 26px;
    }

    .membership-accordion .accordion-item .accordion-collapse .collapse-body {
        gap: 20px;
    }

    .membership-accordion .accordion-item .accordion-collapse .collapse-body .tp-header .title {
        font-size: 26px;
    }

    .membership-accordion .accordion-item .accordion-collapse .collapse-body .tp-header p {
        font-size : 16px;
        margin-top: 10px;
    }

    .membership-accordion .accordion-item .accordion-collapse .collapse-body .memberhsip-price .price-title {
        font-size: 28px;
    }

    .form-card {
        padding: 20px 15px;
    }

    .step-form-container .step-indicators {
        margin-bottom: 30px;
    }
}

/* ===========================
   Working Group
=========================== */

.companies-framework {
    position: relative;
}

.companies-framework::before {
    content          : '';
    position         : absolute;
    top              : 0;
    left             : 0;
    width            : 30%;
    height           : 40%;
    background       : linear-gradient(180deg, rgba(255, 255, 255, 0) 15.24%, #FFFFFF 74.15%);
    transform        : rotate(180deg);
    -webkit-transform: rotate(180deg);
    z-index          : 1;
    display          : none;
}

.companies-framework::after {
    content   : '';
    position  : absolute;
    top       : 0;
    right     : 0;
    width     : 30%;
    height    : 40%;
    background: linear-gradient(0deg, rgba(255, 255, 255, 0) 15.24%, #FFFFFF 74.15%);
    z-index   : 1;
    display   : none;
}

/* .companies-framework .tabs-wrapper::before {
    content          : '';
    position         : absolute;
    top              : 50%;
    left             : 0;
    width            : 100px;
    height           : 80%;
    background       : linear-gradient(270deg, rgba(255, 255, 255, 0), #fff);
    transform        : translateY(-50%);
    -webkit-transform: translateY(-50%);
    z-index          : 1;
}

.companies-framework .tabs-wrapper::after {
    content          : '';
    position         : absolute;
    top              : 50%;
    right            : 0;
    width            : 100px;
    height           : 80%;
    background       : linear-gradient(90deg, rgba(255, 255, 255, 0), #fff);
    transform        : translateY(-50%);
    -webkit-transform: translateY(-50%);
    z-index          : 1;
} */

.tabs-wrapper .scroll-btn {
    width            : 42px;
    height           : 42px;
    border-radius    : 50%;
    align-items      : center;
    justify-content  : center;
    background       : var(--primary-color);
    position         : absolute;
    top              : 50%;
    transform        : translateY(-50%);
    -webkit-transform: translateY(-50%);
    z-index          : 2;
    outline          : none;
    box-shadow       : none;
    border           : 0;
}

.tabs-wrapper .scroll-btn.disabled {
    opacity: 0.5;
    cursor : not-allowed;
}

.tabs-wrapper .scroll-btn.prev {
    left: 0;
}

.tabs-wrapper .scroll-btn.next {
    right: 0;
}

.tabs-wrapper .nav {
    border            : 0;
    padding           : 20px 10px;
    overflow-x        : auto;
    scrollbar-width   : none;
    -webkit-mask-image: linear-gradient(var(--mask-direction, to right), hsl(0 0% 0% / 0), hsl(0 0% 0% / 1) 20%, hsl(0 0% 0% / 1) 80%, hsl(0 0% 0% / 0));
}

.tabs-wrapper .nav::-webkit-scrollbar {
    display: none;
}

.tabs-wrapper .nav .nav-link {
    border-radius   : var(--radius-main);
    background-color: #fff;
    min-width       : 240px;
    display         : flex;
    flex-direction  : column;
    align-items     : center;
    justify-content : center;
    gap             : 20px;
    padding         : 20px 20px;
    font-weight     : 500;
    font-size       : 18px;
    line-height     : 24px;
    letter-spacing  : 0;
    color           : var(--text-color-title);
    box-shadow      : 0px 2px 20px 0px #0000001F;
    border          : 3px solid #fff;
    position        : relative;
}

.tab-slider-nav button {
    border-radius   : var(--radius-main);
    background-color: #fff;
    display         : flex;
    flex-direction  : column;
    align-items     : center;
    justify-content : center;
    gap             : 20px;
    padding         : 20px 20px;
    font-weight     : 500;
    font-size       : 18px;
    line-height     : 24px;
    letter-spacing  : 0;
    color           : var(--text-color-title);
    box-shadow      : 0px 2px 20px 0px #0000001F;
    border          : 3px solid #fff;
    position        : relative;
    margin          : 0 auto;
    width           : 225px;
    height          : 174px;
}

.tabs-wrapper .nav .nav-link.active,
.tab-slider-nav .slick-slide.slick-active.slick-current button {
    border: 3px solid var(--primary-color);
}

.tabs-wrapper .nav .nav-link.active::after,
.tab-slider-nav .slick-slide.slick-active.slick-current button::after {
    content     : '';
    position    : absolute;
    top         : 100%;
    left        : 50%;
    transform   : translateX(-50%);
    border-left : 10px solid transparent;
    border-right: 10px solid transparent;
    border-top  : 12px solid var(--primary-color);
    width       : 0;
    height      : 0;
}

.companies-framework .tab-content {
    padding-top: 30px;
}

.companies-framework .tab-content .company-card {
    width              : 100%;
    background-color   : #fff;
    box-shadow         : 0px 2px 60px 0px #0000001F;
    backdrop-filter    : blur(24px);
    border-radius      : 20px;
    padding            : 40px 80px;
    position           : relative;
    background-image   : url('../images/backgrounds/left-shape-orange.png'), url('../images/backgrounds/right-shape-orange.png');
    background-repeat  : no-repeat;
    background-position: top left, top right;
    background-size    : 20%;
}

.tabSlider-cards .company-card {
    width              : 100%;
    background-color   : #fff;
    backdrop-filter    : blur(24px);
    border-radius      : 20px;
    padding            : 60px 80px;
    position           : relative;
    background-image   : url('../images/backgrounds/left-shape-orange.png'), url('../images/backgrounds/right-shape-orange.png');
    background-repeat  : no-repeat;
    background-position: top left, top right;
    background-size    : 20%;
}

.companies-framework .tab-content .company-card .user-card,
.card.user-card,
.tabSlider-cards .company-card .user-card {
    box-shadow    : 0px 2px 12px 0px #00000014;
    border-radius : 20px;
    overflow      : hidden;
    letter-spacing: 0;
}

.companies-framework .tab-content .company-card .user-card .header,
.card.user-card .header,
.tabSlider-cards .company-card .user-card .header {
    width         : 100%;
    padding       : 10px;
    text-align    : center;
    color         : #fff;
    background    : var(--gradiend-primary);
    letter-spacing: 0;
    font-weight   : 500;
}

.companies-framework .tab-content .company-card .user-card .uc-body,
.card.user-card .uc-body,
.tabSlider-cards .company-card .user-card .uc-body {
    padding        : 12px 12px;
    padding-bottom : 20px;
    display        : flex;
    flex-direction : column;
    align-items    : center;
    justify-content: center;
    text-align     : center;
}

.companies-framework .tab-content .company-card .user-card .user-img,
.card.user-card .user-img,
.tabSlider-cards .company-card .user-card .user-img {
    width        : 80%;
    height       : auto;
    margin       : auto;
    margin-bottom: 10px;
}

.companies-framework .tab-content .company-card .user-card .uc-body .user-name,
.card.user-card .uc-body .user-name,
.tabSlider-cards .company-card .user-card .uc-body .user-name {
    font-weight: 500;
    font-size  : 16px;
    text-align : center;
}

.companies-framework .tab-content .company-card .user-card .uc-body .user-position,
.card.user-card .uc-body .user-position,
.tabSlider-cards .company-card .user-card .uc-body .user-position {
    color      : var(--text-color-main);
    font-weight: 400;
    font-size  : 14px;
    line-height: 16px;
}

.companies-framework .tab-content .company-card .list-title,
.companies-framework .tab-content .company-card h3,
.tabSlider-cards .company-card .list-title {
    font-weight   : 600;
    font-size     : 20px;
    line-height   : 32px;
    letter-spacing: 0.4px;
    text-transform: capitalize;
    margin-bottom : 20px;
}

.companies-framework .tab-content .company-card .point-list li,
.tabSlider-cards .company-card .point-list li {
    position      : relative;
    padding-left  : 26px;
    letter-spacing: 0;
    color         : var(--text-color-main);
    line-height   : 26px;
}

.companies-framework .tab-content .company-card .point-list li::before,
.tabSlider-cards .company-card .point-list li::before {
    content            : '';
    position           : absolute;
    top                : 5px;
    left               : 0;
    width              : 16px;
    height             : 16px;
    background-image   : url('../images/working-group/check-mark.svg');
    background-position: center;
    background-size    : 100%;
    background-repeat  : no-repeat;
}

.tab-slider-nav .slick-list .slick-track {
    padding: 30px 0px;
}

.tab-slider-nav .slick-prev,
.tab-slider-nav .slick-next {
    width              : 42px;
    height             : 42px;
    border-radius      : 50%;
    display            : flex;
    align-items        : center;
    justify-content    : center;
    background-color   : var(--primary-color);
    position           : absolute;
    top                : 50%;
    transform          : translateY(-50%);
    -webkit-transform  : translateY(-50%);
    z-index            : 2;
    outline            : none;
    box-shadow         : none;
    border             : 0;
    background-repeat  : no-repeat;
    background-position: center;
}

.tab-slider-nav .slick-list {
    -webkit-mask-image: linear-gradient(var(--mask-direction, to right), hsl(0 0% 0% / 0), hsl(0 0% 0% / 1) 20%, hsl(0 0% 0% / 1) 80%, hsl(0 0% 0% / 0));
}

.tab-slider-nav .slick-list .slick-track .slick-slide {
    display: flex !important;
}

.tabSlider-cards .slick-list {
    box-shadow   : 0px 2px 60px 0px #0000001F;
    border-radius: 20px;
}

.tabSlider-cards .company-card .MultiUser-carousel {
    margin-top: -10px;
}

.tabSlider-cards .company-card .MultiUser-carousel .carousel-inner .carousel-item .user-card {
    margin: 10px 10px;
}

.tabSlider-cards .company-card .MultiUser-carousel .carousel-indicators {
    bottom       : -30px;
    margin-bottom: 0;
}

.tabSlider-cards .company-card .MultiUser-carousel .carousel-indicators button {
    background   : #fff;
    border       : 1px solid var(--primary-color);
    opacity      : 1;
    width        : 10px;
    height       : 10px;
    padding      : 0;
    border-radius: 50%;
    transition   : 0.2s all;
}

.tabSlider-cards .company-card .MultiUser-carousel .carousel-indicators button.active {
    background-color: var(--primary-color);
    width           : 16px;
    border-radius   : 25px;
}

@media (max-width: 992px) {

    .companies-framework .tab-content .company-card,
    .tabSlider-cards .company-card {
        padding        : 20px 40px;
        background-size: 40%;
    }

    .tab-slider-nav button {
        font-size  : 16px;
        line-height: 18px;
        gap        : 10px;
        height     : 150px;
        width      : 180px;
    }
}

@media (max-width: 767px) {

    .tab-slider-nav .slick-list .slick-track .slick-slide div {
        width: 100%;
    }

    .tab-slider-nav button {
        width    : auto;
        max-width: 85%;
    }

    .tab-slider-nav .slick-prev,
    .tab-slider-nav .slick-next {
        top            : auto;
        bottom         : -20%;
        width          : 35px;
        height         : 35px;
        background-size: 20px;
    }

    .companies-framework::before,
    .companies-framework::after {
        height: 18%;
        width : 20%;
    }

    .companies-framework .tab-content .company-card,
    .tabSlider-cards .company-card {
        padding        : 20px 30px;
        background-size: 30%;
    }
}

/* ===========================
   On-Demand Learning Zone Styles  
=========================== */

.learning-zone .sort-card {
    border-radius   : 20px;
    box-shadow      : 0px 2px 20px 0px #0000001F;
    background-color: #fff;
    padding         : 20px 20px;
    width           : 100%;
    position        : relative;
    letter-spacing  : 0;
}

.learning-zone .sort-card .title {
    font-weight: 600;
    font-size  : 16px;
    line-height: 30px;
    color      : var(--text-color-title);
}

.learning-zone .sort-card ul.nav .form-check {
    display    : flex;
    align-items: center;
    gap        : 10px;
    padding    : 0;
}

.learning-zone .sort-card ul.nav .form-check .form-check-input {
    width       : 20px;
    height      : 20px;
    margin      : 0;
    cursor      : pointer;
    border-color: #454853;
}

.learning-zone .sort-card ul.nav .form-check .form-check-input:checked {
    background-color: var(--primary-color);
    border-color    : var(--primary-color);
}

.learning-zone .sort-card ul.nav .form-check .form-check-input:focus,
.learning-zone .sort-card ul.nav .form-check .form-check-input:active {
    outline   : none;
    box-shadow: none;
}

.learning-zone .sort-card ul.nav .form-check .form-check-label {
    font-weight: 400;
    font-size  : 14px;
    line-height: 20px;
    color      : var(--text-color-main);
}

.learning-zone .card.learingVideo-card {
    border        : 0;
    padding       : 0;
    flex-direction: column;
    gap           : 14px;
    box-shadow    : none;
    height        : 100%;
    transition    : all 0.3s ease;
}

.learning-zone .card.learingVideo-card .video-thumbnil {
    position      : relative;
    width         : 100%;
    padding-bottom: 70%;
    border-radius : 12px;
    overflow      : hidden;
}

.learning-zone .card.learingVideo-card .video-thumbnil img {
    position  : absolute;
    top       : 0;
    left      : 0;
    width     : 100%;
    height    : 100%;
    object-fit: cover;
}

.learning-zone .card.learingVideo-card .video-thumbnil::before {
    content   : '';
    position  : absolute;
    top       : 0;
    left      : 0;
    width     : 100%;
    height    : 100%;
    z-index   : 1;
    background: #00000033;
}

.learning-zone .card.learingVideo-card .video-thumbnil .videoBadge {
    border-radius   : 6px;
    background-color: #fff;
    position        : absolute;
    top             : 10px;
    right           : 10px;
    font-weight     : 400;
    font-size       : 12px;
    line-height     : 150%;
    letter-spacing  : 0;
    color           : var(--text-color-title);
    padding         : 5px 15px;
    z-index         : 2;
}

.learning-zone .card.learingVideo-card .video-thumbnil .lockIcon {
    border-radius   : 50%;
    background-color: #fff;
    position        : absolute;
    top             : 10px;
    left            : 10px;
    width           : 24px;
    height          : 24px;
    display         : none;
    align-items     : center;
    justify-content : center;
    z-index         : 2;
}

.learning-zone .card.learingVideo-card .video-thumbnil .lockIcon img {
    width   : 12px;
    height  : auto;
    position: relative;
}

.learning-zone .card.learingVideo-card.locked .video-thumbnil .lockIcon {
    display: flex;
}

.learning-zone .card.learingVideo-card .video-thumbnil .playBtn {
    border           : 0;
    padding          : 0;
    outline          : 0;
    width            : 50px;
    height           : 50px;
    border-radius    : 50%;
    display          : flex;
    align-items      : center;
    justify-content  : center;
    position         : absolute;
    top              : 50%;
    left             : 50%;
    transform        : translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    background       : linear-gradient(90deg, rgba(255, 74, 7, 0.8) 0%, rgba(255, 147, 29, 0.8) 100%);
    color            : #fff;
    font-size        : 36px;
    z-index          : 1;
}

.learning-zone .card.learingVideo-card .video-thumbnil .playBtn .bi {
    width          : 50px;
    height         : 50px;
    display        : flex;
    align-items    : center;
    justify-content: center;
    text-align     : center;
}

.learning-zone .card.learingVideo-card .video-thumbnil .playBtn:hover {
    background: linear-gradient(90deg, rgba(252, 99, 44, 0.8) 0%, rgba(255, 164, 67, 0.8) 100%);
}

.learning-zone .card.learingVideo-card .video-title {
    font-weight   : 500;
    font-size     : 16px;
    line-height   : 24px;
    letter-spacing: 0px;
    color         : var(--text-color-title);
    padding       : 5px 0px;
}

.video-modal .modal-header,
.video-modal .modal-body {
    padding: 24px 24px;
}

.video-modal .modal-header h1 {
    font-weight   : 600;
    font-size     : 18px !important;
    line-height   : 100%;
    letter-spacing: 0;
}

.video-modal .modal-body video {
    border-radius: 12px;
}

.locked-modal .modal-content {
    border-radius: 20px;
}

.locked-modal .modal-header {
    padding: 24px 24px;
}

.locked-modal .modal-body {
    padding       : 30px 60px;
    letter-spacing: 0;
    color         : var(--text-color-main);
    font-weight   : 400;
    font-size     : 13px;
    line-height   : 18px;
}

.locked-modal .modal-body .lm-header {
    display       : flex;
    flex-direction: column;
    gap           : 24px;
    margin-bottom : 16px;
}

.locked-modal .modal-body .lm-header .title {
    font-weight : 600;
    line-height : 30px;
    font-size   : 20px;
    color       : var(--text-color-title);
    width       : 100%;
    max-width   : 360px;
    margin-right: auto;
    margin-left : auto;
}

.locked-modal .modal-body .lm-header p {
    font-weight   : 500;
    line-height   : 32px;
    letter-spacing: 0.5px;
}

.locked-modal .modal-body .lm-content .locked-content {
    display: flex;
    gap    : 16px;

}

.locked-modal .modal-body .lm-content .login-content {
    font-weight   : 500;
    font-size     : 14px;
    line-height   : 32px;
    letter-spacing: 0.5px;
}

.locked-modal .modal-body .lm-content .login-content a {
    text-decoration: none;
    color          : var(--primary-color);
    text-transform : uppercase;
    border-bottom  : 1px solid var(--primary-color);
}

.locked-modal .modal-body .lm-content .login-content a:hover {
    border-bottom-color: transparent;
}

/* ===========================
   Education Resources Page Style   
=========================== */

.er-card {
    border        : 0;
    padding       : 0;
    flex-direction: column;
    height        : 100%;
    border-radius : 20px;
    overflow      : hidden;
}

.er-card:hover {
    box-shadow: var(--shadow-main) !important;
}

.er-card .er-banner {
    position      : relative;
    width         : 100%;
    padding-bottom: 55%;
}

.er-card .er-banner img {
    position  : absolute;
    top       : 0;
    left      : 0;
    width     : 100%;
    height    : 100%;
    object-fit: cover;
}

.er-card .er-banner .lockIcon {
    border-radius   : 50%;
    background-color: #fff;
    position        : absolute;
    top             : 10px;
    left            : 10px;
    width           : 24px;
    height          : 24px;
    display         : none;
    align-items     : center;
    justify-content : center;
    z-index         : 2;
}

.er-card.locked .er-banner .lockIcon {
    display: flex;
}

.er-card.locked .er-banner .lockIcon img {
    width   : 12px;
    height  : auto;
    position: relative;
}

.er-card .er-body {
    padding : 16px 24px;
    position: relative;
}

.er-card .er-body .title {
    font-weight   : 600;
    font-size     : 18px;
    line-height   : 24px;
    letter-spacing: 0px;
    color         : var(--text-color-title);
    margin-bottom : 16px;
}

.er-card .er-body .er-tag {
    border        : 1px solid var(--primary-color);
    font-weight   : 400;
    font-size     : 12px;
    line-height   : 150%;
    letter-spacing: 0;
    padding       : 3px 8px;
    border-radius : 6px;
}

.er-card .er-body .btn.btn-main-download {
    width            : 42px;
    height           : 42px;
    border-radius    : 50%;
    border-color     : transparent;
    background       : var(--gradiend-primary);
    background-size  : 105%;
    display          : flex;
    align-items      : center;
    justify-content  : center;
    margin           : 0;
    padding          : 0;
    position         : absolute;
    top              : 15px;
    right            : 24px;
    transition       : 0.2s all;
    transform        : scale(1);
    -webkit-transform: scale(1);
    display          : none;
}

.er-card .er-body .btn.btn-main-download:hover {
    transform        : scale(1.1);
    -webkit-transform: scale(1.1);
}

.er-card.download-available .er-body .title {
    padding-right: 60px;
}

.er-card.download-available .er-body .btn.btn-main-download {
    display: block;
}

.pagination-row {
    margin-top: 60px;
}

.pagination-row .pagination {
    display        : flex;
    justify-content: center;
    gap            : 20px;
}

.pagination-row .pagination li a {
    width          : 32px;
    height         : 32px;
    display        : flex;
    align-items    : center;
    justify-content: center;
    font-size      : 14px;
    font-weight    : 500;
    color          : var(--text-color-main);
    box-shadow     : 0px 2px 20px 0px #0000001F;
    border         : 1px solid #fff;
    border-radius  : 6px;
    padding        : 0;
}

.pagination-row .pagination li a:hover,
.pagination-row .pagination li a.active {
    background-color: #fff;
    border-color    : var(--primary-color);
    color           : var(--primary-color);
}

.pagination-row .pagination li:first-child a:hover,
.pagination-row .pagination li:last-child a:hover {
    background  : var(--gradiend-primary);
    border-color: transparent;
    color       : #fff;
}

.pagination-row .pagination li:first-child a:hover svg path,
.pagination-row .pagination li:last-child a:hover svg path {
    fill: #ffffff !important;
}

.education-details {
    padding-top        : 40px;
    padding-bottom     : 80px;
    position           : relative;
    background-image   : url('../images/backgrounds/left-shape-orange.png'), url('../images/backgrounds/right-shape-orange.png');
    background-position: top left, top right;
    background-size    : 20%;
    background-repeat  : no-repeat;
    color              : var(--text-color-main);
}

.education-details .breadcrumb {
    margin-bottom: 30px;
}

.education-details .breadcrumb li.breadcrumb-item {
    font-weight   : 400;
    font-size     : 14px;
    line-height   : 20px;
    letter-spacing: 0;
}

.education-details .breadcrumb li.breadcrumb-item a {
    color      : var(--text-color-main);
    font-weight: 600;
}

.education-details .breadcrumb li.breadcrumb-item a:hover {
    color: var(--primary-color);
}

.education-details .breadcrumb li.breadcrumb-item::before {
    color      : var(--primary-color);
    font-weight: 400;
}

.education-details h1 {
    font-weight   : 600;
    font-size     : 30px;
    line-height   : 40px;
    letter-spacing: 0;
    text-transform: capitalize;
    margin-bottom : 30px;
}

.education-details ul.nav {
    margin-bottom       : 35px;
    flex-direction      : row;
    gap                 : 10px;
    padding-inline-start: 0;
    padding-bottom      : 0;
}

.education-details ul.nav li.nav-item {
    border        : 1px solid var(--primary-color);
    font-weight   : 400;
    font-size     : 14px;
    line-height   : 20px;
    letter-spacing: 0;
    padding       : 4px 10px;
    border-radius : 6px;
}


.education-details img {
    width          : 100%;
    height         : auto;
    max-height     : 400px;
    object-fit     : cover;
    object-position: top;
    margin-bottom  : 15px;
    border-radius  : 10px;
}

.education-details h2 {
    font-weight   : 600;
    font-size     : 20px;
    line-height   : 100%;
    letter-spacing: 0;
    text-transform: capitalize;
    padding-top   : 15px;
    padding-bottom: 16px;
    margin-bottom : 0;
}

.education-details p,
.education-details ul li {
    font-weight   : 400;
    font-size     : 16px;
    line-height   : 27px;
    letter-spacing: 0px;
    margin-bottom : 15px;
}

.education-details p strong,
.education-details p b,
.education-details ul li strong,
.education-details ul li b {
    font-weight: 600;
}

.education-details p a,
.education-details ul li a {
    color: var(--primary-color);
}

.education-details ul {
    display             : flex;
    flex-direction      : column;
    padding-bottom      : 15px;
    padding-inline-start: 25px;
    margin-bottom       : 0;
}

.education-details ul li {
    margin-bottom: 0;
}

.education-details .btn.btn-main {
    margin-top: 15px;
}

section.about-event {
    background-image   : url('../images/backgrounds/bottom-left-shaps.svg'), url('../images/backgrounds/bottom-right-shaps.svg');
    background-position: bottom left, bottom right;
    background-repeat  : no-repeat;
    background-size    : inherit;
}

.upcoming-event-listing {
    width           : 100%;
    padding         : 40px 40px;
    box-shadow      : var(--shadow-main);
    border-radius   : 30px;
    background-color: #fff;
}

.upcoming-event-listing .header {
    display        : flex;
    align-items    : center;
    justify-content: space-between;
    margin-bottom  : 60px;
}

.upcoming-event-listing .header .dropdown .dropdown-toggle {
    width           : 220px;
    display         : flex;
    align-items     : center;
    justify-content : space-between;
    border          : 1px solid #00000061;
    color           : #00000099;
    font-size       : 16px;
    font-weight     : 400;
    background-color: #fff;
}

.upcoming-event-listing .header .dropdown .dropdown-toggle:hover,
.upcoming-event-listing .header .dropdown .dropdown-toggle:active,
.upcoming-event-listing .header .dropdown .dropdown-toggle:focus {
    background-color: #F3F3F3;
}

.upcoming-event-listing .header .year-slider {
    display        : flex;
    align-items    : center;
    justify-content: center;
    gap            : 20px;
}

.upcoming-event-listing .header .year-slider .btn.btn-sm {
    width          : 30px;
    height         : 30px;
    border-radius  : 6px;
    padding        : 0;
    background     : #fff;
    box-shadow     : 0px 2px 20px 0px #0000001F;
    display        : flex;
    align-items    : center;
    justify-content: center;
    border         : 0;
}

.upcoming-event-listing .header .year-slider .btn.btn-sm:hover {
    background: var(--gradiend-primary);
}

.upcoming-event-listing .header .year-slider .btn.btn-sm:disabled {
    opacity: 0.4;
    cursor : not-allowed;
}

.upcoming-event-listing .header .year-slider .btn.btn-sm:hover svg path {
    fill: #fff !important;
}

.upcoming-event-listing .header .year-slider .year-title {
    font-weight   : 600;
    font-size     : 20px;
    line-height   : 30px;
    letter-spacing: 2px;
    text-align    : center;
    text-transform: uppercase;
}

.upcoming-event-listing .ue-row {
    display       : flex;
    flex-direction: column;
    gap           : 30px;
}

.upcoming-event-listing .ue-row .uel-card {
    border-radius  : 30px;
    box-shadow     : 0px 2px 60px 0px #0000001F;
    backdrop-filter: blur(24px);
    overflow       : hidden;
    display        : flex;
    flex-direction : row;
}

.upcoming-event-listing .ue-row .uel-card .uel-image {
    width: 45%;
}

.upcoming-event-listing .ue-row .uel-card .uel-image .img-body {
    width : 100%;
    height: 100%;
}

.upcoming-event-listing .ue-row .uel-card .uel-image img {
    width     : 100%;
    height    : 100%;
    object-fit: cover;
}

.upcoming-event-listing .ue-row .uel-card .content {
    width         : 55%;
    height        : 100%;
    padding       : 40px 40px 40px 30px;
    display       : flex;
    flex-direction: column;
    gap           : 30px;
}

.upcoming-event-listing .ue-row .uel-card .content .content-header .title-date {
    font-weight   : 600;
    font-size     : 14px;
    line-height   : 100%;
    letter-spacing: 0;
    color         : var(--primary-color);
    display       : flex;
    flex-direction: column;
    gap           : 2px;
}

.upcoming-event-listing .ue-row .uel-card .content .content-header .title-date .title {
    font-size: 12px;
    color    : var(--text-color-main);
}

.upcoming-event-listing .ue-row .uel-card .content .content-header .title-date .date {
    font-family: "Open Sans", sans-serif;
    font-weight: 700;
}

.upcoming-event-listing .ue-row .uel-card .content .content-header .event-badge {
    border-radius   : 6px;
    padding         : 2px 10px;
    background-color: #F3F3F3;
    font-weight     : 400;
    font-size       : 12px;
    line-height     : 150%;
    letter-spacing  : 0;
}

.upcoming-event-listing .ue-row .uel-card .content h2 {
    font-size    : 32px;
    line-height  : 100%;
    font-weight  : 600;
    margin-bottom: 16px;
}

.upcoming-event-listing .ue-row .uel-card .content p {
    font-size    : 18px;
    line-height  : 28px;
    margin-bottom: 0;
}

.upcoming-event-listing .ue-row .uel-card .content .btn.btn-main {
    font-weight: 500;
}

.event-details img {
    margin-bottom: 30px;
}

.event-details ul.nav li.nav-item {
    background-color: #F3F3F3;
    border          : none;
    color           : var(--text-color-main);
}

.event-details .date-location-row {
    display       : flex;
    align-items   : center;
    gap           : 40px;
    margin-bottom : 50px;
    flex-wrap     : wrap;
    font-family   : "Open Sans", sans-serif;
    font-weight   : 700;
    font-size     : 16px;
    line-height   : 100%;
    letter-spacing: 0;
    color         : var(--primary-color);
}

.event-details .date-location-row div {
    display    : flex;
    align-items: center;
    gap        : 15px;
}

/* Event Calendar */



.month-picker-dropdown {
    width           : 420px;
    border-radius   : 20px;
    border          : 1px solid #E3E3E3;
    background-color: #F4F4F4;
}

.month-grid {
    display              : grid;
    grid-template-columns: repeat(4, 1fr);
    gap                  : 10px;
}

.month-btn {
    border          : 1px solid transparent;
    border-radius   : 10px;
    padding         : 10px 0;
    text-align      : center;
    font-weight     : 400;
    cursor          : pointer;
    position        : relative;
    transition      : all 0.2s ease;
    background-color: #fff;
    box-shadow      : 0px 2px 20px 0px #0000001F;
}

.month-btn:hover:not(.disabled) {
    background-color: #f8f9fa;
    border-color    : #ffc107;
}

.month-btn.active {
    border-color: var(--primary-color);
    color       : var(--primary-color);
    font-weight : 500;
}

.month-btn.disabled {
    opacity: 0.4;
    cursor : not-allowed;
}

/* Orange dot for event months */
/* .month-btn.has-event {
    border-color: var(--primary-color);
} */

.month-btn.has-event::after {
    content         : "";
    position        : absolute;
    top             : 6px;
    right           : 10px;
    width           : 6px;
    height          : 6px;
    background-color: #ff6600;
    border-radius   : 50%;
}

.btn-light.year-nav {
    width           : 30px;
    height          : 30px;
    border-radius   : 6px;
    padding         : 0;
    background-color: #fff;
    box-shadow      : 0px 2px 20px 0px #0000001F;
}

.calendar-header .year-label {
    font-weight   : 600;
    font-size     : 20px;
    line-height   : 30px;
    letter-spacing: 2px;
}

.calendar-footer .btn-outline-secondary {
    border-color: var(--primary-color);
    color       : var(--text-color-main);
    font-weight : 500;
}

.calendar-footer .btn-outline-secondary:hover {
    background-color: #fff;
}

.calendar-footer .btn-primary {
    border         : 1px solid transparent;
    background     : var(--gradiend-primary);
    color          : #fff;
    font-weight    : 500;
    background-size: 105%;
}

.join-events .card.join-card {
    height         : 100%;
    border         : none;
    box-shadow     : 0px 2px 20px 0px #0000001F;
    padding        : 20px 20px;
    width          : 100%;
    border-radius  : 20px;
    flex-direction : column;
    align-items    : center;
    justify-content: center;
    gap            : 30px;
}

.join-events .card.join-card .title {
    font-weight   : 600;
    font-size     : 18px;
    line-height   : 100%;
    letter-spacing: 0;
    text-align    : center;
    text-transform: capitalize;
}

.join-events .card.join-card .btn-main {
    width: 100%;
}

.join-modal .modal-body {
    padding: 24px 24px;
}

.join-modal .modal-body .lm-header {
    gap: 10px;
}

.join-modal .modal-body .lm-header .title {
    max-width     : 80%;
    margin-left   : 0;
    margin-right  : 0;
    letter-spacing: 2px;
}

.join-modal .modal-body .lm-header p {
    font-weight   : 400;
    line-height   : 26px;
    letter-spacing: 0;
}

.join-modal .modal-body .form-heading {
    font-weight   : 600;
    font-size     : 18px;
    line-height   : 100%;
    letter-spacing: 0;
    margin-bottom : 20px;
}

.join-modal .modal-body .form-group .custom-select {
    margin-bottom: 0px;
}

.join-modal .modal-body .form-group .floating-select.active .floating-label {
    top: 0 !important;
}

@media (min-width: 992px) {

    /* .upcoming-event-listing {
        padding: 20px 20px;
    } */
}

@media (max-width: 992px) {

    .upcoming-event-listing {
        padding: 20px 20px;
    }

    .upcoming-event-listing {
        padding: 20px 20px;
    }

    .upcoming-event-listing .header {
        gap: 10px;
    }

    .upcoming-event-listing .header .sec-title {
        font-size  : 18px;
        line-height: 26px;
    }

    .upcoming-event-listing .header .dropdown .dropdown-toggle {
        width: 160px;
    }

    .month-picker-dropdown {
        width: 330px;
    }

    .upcoming-event-listing .header .year-slider {
        gap: 10px;
    }

    .upcoming-event-listing .header .year-slider .year-title {
        font-size: 16px;
    }

    .upcoming-event-listing .ue-row .uel-card {
        flex-direction: column;
    }

    .upcoming-event-listing .ue-row .uel-card .uel-image,
    .upcoming-event-listing .ue-row .uel-card .content {
        width: 100%;
    }

    .upcoming-event-listing .ue-row .uel-card .content {
        padding: 20px 20px;
    }

    .join-modal .modal-dialog.modal-lg {
        --bs-modal-width: 700px;
    }
}

@media (max-width: 767px) {

    .education-details h1 {
        font-size    : 26px;
        line-height  : 32px;
        margin-bottom: 10px;
    }

    .upcoming-event-listing .ue-row .uel-card .content .content-header {
        flex-direction: column;
        gap           : 20px;
        align-items   : flex-start !important;
    }

    .upcoming-event-listing .ue-row .uel-card .content h2 {
        font-size: 24px;
    }

    .upcoming-event-listing .ue-row .uel-card .content p {
        font-size  : 16px;
        line-height: 24px;
    }

    .event-details .date-location-row {
        gap          : 15px;
        margin-bottom: 20px;
    }
}

/* ===========================
   Award Page Styles  
=========================== */

.award-categories {
    background-color: #F2F2F2;
    position        : relative;
}

.award-categories .row.ac-cards {
    margin-top: 10px;
}

.award-categories .row.ac-cards .award-card {
    border-radius: 20px;
    border       : none;
    box-shadow   : 0px 2px 12px 0px #00000014;
    border-bottom: 3px solid var(--primary-color);
    overflow     : hidden;
}

.award-categories .row.ac-cards .award-card .ac-header {
    background     : var(--gradiend-primary);
    color          : #fff;
    font-weight    : 600;
    font-size      : 20px;
    line-height    : 30px;
    letter-spacing : 0px;
    display        : flex;
    align-items    : center;
    justify-content: center;
    flex-direction : column;
    gap            : 10px;
    padding        : 16px 20px;
    text-align     : center;
}

.award-categories .row.ac-cards .award-card .ac-body {
    padding       : 20px 20px;
    padding-bottom: 30px;
}

.award-categories .row.ac-cards .award-card .ac-body ul.award-listing {
    display       : flex;
    flex-direction: column;
    gap           : 10px;
}

.award-categories .row.ac-cards .award-card .ac-body ul.award-listing li {
    font-weight   : 500;
    font-size     : 16px;
    line-height   : 24px;
    letter-spacing: 0;
    color         : #000;
    border-bottom : 1px solid #E4E4E4;
    padding-top   : 6px;
    padding-bottom: 15px;
    position      : relative;
    padding-left  : 35px;
}

.award-categories .row.ac-cards .award-card .ac-body ul.award-listing li::before {
    content            : '';
    position           : absolute;
    width              : 23px;
    height             : 28px;
    top                : 40%;
    left               : 0;
    transform          : translateY(-50%);
    -webkit-transform  : translateY(-50%);
    background-image   : url('../images/awards/award-ic.svg');
    background-repeat  : no-repeat;
    background-position: center;
    background-size    : 23px;
}

.award-categories .row.ac-cards .award-card .ac-body ul.award-listing li:last-child {
    border-bottom: 0;
}

.award-winner .accordion.awardAccordion .accordion-item {
    border       : none;
    box-shadow   : 0px 2px 60px 0px #0000001F;
    background   : #fff;
    border-radius: 30px;
    padding      : 0;
    margin-bottom: 20px;
}

.award-winner .accordion.awardAccordion .accordion-item .accordion-button {
    padding       : 30px 40px;
    border        : none;
    background    : transparent;
    box-shadow    : none;
    font-weight   : 600;
    font-size     : 20px;
    line-height   : 30px;
    letter-spacing: 0px;
    color         : #150F0B;
}

.award-winner .accordion.awardAccordion .accordion-item .accordion-body {
    padding    : 30px 40px;
    padding-top: 0;
}

.award-winner .aw-listing .winner-card {
    border-radius: 20px;
    border       : 1px solid #CDCDCD;
    box-shadow   : 0px 2px 12px 0px #00000014;
    overflow     : hidden;
    height       : 100%;
}

.award-winner .aw-listing .winner-card .wc-header {
    background    : var(--gradiend-primary);
    color         : #fff;
    font-weight   : 600;
    font-size     : 18px;
    line-height   : 140%;
    letter-spacing: 0px;
    text-align    : center;
    padding       : 21px 24px;
}

.award-winner .aw-listing .winner-card .wc-body {
    padding       : 15px 24px;
    display       : flex;
    flex-direction: column;
    gap           : 15px;
}

.award-winner .aw-listing .winner-card .wc-body .member-img {
    width        : 200px;
    height       : 200px;
    border       : 1px solid var(--primary-color);
    border-radius: 50%;
    margin       : auto;
    overflow     : hidden;
}

.award-winner .aw-listing .winner-card .wc-body .member-img img {
    width     : 100%;
    height    : 100%;
    object-fit: cover;
}

.award-winner .aw-listing .winner-card .wc-body .member-details {
    padding       : 10px 12px;
    display       : flex;
    flex-direction: column;
    gap           : 5px;
    text-align    : center;
    font-size     : 14px;
    line-height   : 160%;
    letter-spacing: 0px;
    color         : #150F0B;
}

.award-winner .aw-listing .winner-card .wc-body .member-details .name {
    font-weight   : 600;
    font-size     : 14px;
    text-transform: uppercase;
}

.award-winner .aw-listing .winner-card .wc-body .member-details .department {
    font-weight: 600;
}

.award-winner .aw-listing .winner-card.org-award .wc-body {
    padding        : 40px 24px;
    align-items    : center;
    justify-content: center;
    height         : 100%;
}

.award-winner .aw-listing .winner-card.org-award .wc-body .member-img {
    border         : none;
    border-radius  : 0;
    max-width      : 80%;
    height         : 100px;
    margin         : auto;
    display        : flex;
    align-items    : center;
    justify-content: center;
    overflow       : hidden;
}

.award-winner .aw-listing .winner-card.org-award .wc-body .member-img img {
    max-width : 100%;
    max-height: 100%;
    object-fit: contain;
    height    : auto;
    width     : auto;
    display   : block;
}

.award-winner .timeline-container {
    display    : flex;
    align-items: center;
    position   : relative;
    max-width  : 800px;
    margin     : auto;
    padding    : 0px 50px;
    z-index    : 1
}

.award-winner .timeline-container::after {
    display: none;
}

.award-winner .year-indicators {
    display           : flex;
    align-items       : center;
    justify-content   : flex-start;
    gap               : 100px;
    padding           : 60px 20px;
    position          : relative;
    z-index           : 1;
    width             : auto;
    margin            : auto;
    overflow-x        : auto;
    scroll-behavior   : smooth;
    scrollbar-width   : none;
    -ms-overflow-style: none;
    flex-wrap         : nowrap;
}

.award-winner .year-indicators::after {
    content          : '';
    position         : absolute;
    top              : 50%;
    left             : 50%;
    width            : 80%;
    height           : 2px;
    background       : #D1D5DC;
    transform        : translate(-50%, -50%);
    -webkit-transform: translate(-50%, 50%);
    z-index          : -1;
}

@media (max-width: 767px) {

    .award-categories .row.ac-cards .award-card .ac-header {
        font-size  : 18px;
        line-height: 24px;
    }

    .award-winner .accordion.awardAccordion .accordion-item {
        border-radius: 15px;
    }

    .award-winner .accordion.awardAccordion .accordion-item .accordion-button {
        padding    : 20px 30px;
        font-size  : 18px;
        line-height: 26px;
    }

    .award-winner .accordion.awardAccordion .accordion-item .accordion-body {
        padding    : 20px 30px;
        padding-top: 0;
    }

    .award-winner .aw-listing .winner-card .wc-header {
        font-size  : 16px;
        line-height: 130%;
    }

    .award-winner .aw-listing .winner-card .wc-body .member-img {
        width : 170px;
        height: 170px;
    }

    .award-winner .aw-listing .winner-card.org-award .wc-body {
        padding: 30px 20px;
    }

    .award-winner .year-indicators {
        gap: 50px;
    }

    .award-winner .year-indicators {
        padding: 20px 10px;
    }
}

/* ===========================
   News & Publications Style   
=========================== */

.news-publications .nav-tabs {
    gap: 20px;
}

.news-publications .nav-tabs li.nav-item .nav-link {
    border        : 1px solid var(--primary-color);
    padding       : 10px 12px;
    border-radius : 10px;
    font-weight   : 500;
    font-size     : 16px;
    letter-spacing: 0px;
    color         : var(--text-color-main);
    min-width     : 185px;
}

.news-publications .nav-tabs li.nav-item .nav-link:hover,
.news-publications .nav-tabs li.nav-item .nav-link.active {
    background     : var(--gradiend-primary);
    border-color   : transparent;
    box-shadow     : 0px 12px 25px -5px #F159224D;
    backdrop-filter: blur(24px);
    color          : #fff;
    background-size: 105%;
}

.news-publications .tab-content {
    padding-top: 40px;
}

@media (max-width: 767px) {

    .news-publications .nav-tabs {
        gap: 10px;
    }

    .news-publications .nav-tabs li.nav-item .nav-link {
        padding       : 6px 12px;
        font-size     : 12px;
        letter-spacing: 1px;
        min-width     : auto;
        line-height   : 18px;
    }
}

/* ===========================
   Contact Us Style 
=========================== */

section.zimam-content section.contact-us {
    position      : relative;
    padding-top   : 100px;
    padding-bottom: 100px;
}

section.zimam-content section.contact-us .sec-title {
    font-size     : 36px;
    line-height   : 160%;
    border-bottom : 0;
    text-transform: capitalize;
    letter-spacing: 0px;
}

section.zimam-content section.contact-us p.sec-para {
    max-width     : 530px;
    text-transform: capitalize;
}

.contact-us .content-card {
    text-align     : left;
    justify-content: flex-start;
    align-items    : flex-start;
}

@media (max-width: 992px) {
    section.zimam-content section.contact-us {
        padding-top   : 70px;
        padding-bottom: 70px;
    }
}

@media (max-width: 767px) {

    section.zimam-content section.contact-us .sec-title {
        font-size    : 30px;
        line-height  : 140%;
        margin-bottom: 20px;
    }

    section.zimam-content section.contact-us {
        padding-top   : 50px;
        padding-bottom: 50px;
    }

    .partner-form.contactus-form {
        padding: 30px 25px;
    }
}

/* ===========================
   Member Account Page Styles  
=========================== */

.member-account .member-account-card {
    border-radius  : 12px;
    backdrop-filter: blur(24px);
    box-shadow     : 0px 2px 60px 0px #0000001F;
    overflow       : hidden;
}

.member-account .member-account-card .mac-header {
    padding       : 55px 0px;
    background    : var(--gradiend-primary);
    position      : relative;
    z-index       : 1;
    text-align    : center;
    font-weight   : 600;
    font-size     : 24px;
    line-height   : 160%;
    letter-spacing: 0;
    text-transform: uppercase;
    text-align    : center;
    color         : #fff;
}

.member-account .member-account-card .mac-header::before {
    content            : '';
    position           : absolute;
    top                : 0;
    left               : 0;
    width              : 100%;
    height             : 100%;
    background-image   : url('../images/backgrounds/top-left-white-shapes.png'), url('../images/backgrounds/top-right-white-shapes.png');
    background-repeat  : no-repeat;
    background-size    : inherit;
    background-position: left top, right top, bottom left, bottom right;
    z-index            : -1;
}

.member-account .member-account-card .mac-body {
    padding     : 40px 40px;
    padding-left: 90px;
}

.member-account .member-account-card .mac-body .member-detail {
    display       : flex;
    flex-direction: column;
    gap           : 28px;
    position      : relative;
    top           : -105px;
    z-index       : 1;
}

.member-account .member-account-card .mac-body .member-detail .username-img {
    margin-bottom: 35px;
}

.member-account .member-account-card .mac-body .member-detail .username-img .user-photo {
    width           : 117px;
    height          : 117px;
    border-radius   : 50%;
    background-color: #fff;
    border          : 2px solid #fff;
    overflow        : hidden;
    box-shadow      : 0px 2px 60px 0px #0000001F;
}

.member-account .member-account-card .mac-body .member-detail .username-img .user-photo img {
    width     : 100%;
    height    : 100%;
    object-fit: cover;
}

.member-account .member-account-card .mac-body .member-detail .username-img .user-name {
    font-size     : 18px;
    font-weight   : 600;
    line-height   : 160%;
    letter-spacing: 0;
}

.member-account .member-account-card .mac-body .member-detail .md-row {
    display    : flex;
    gap        : 16px;
    align-items: center;
}

.member-account .member-account-card .mac-body .member-detail .md-row .title {
    font-weight   : 400;
    font-size     : 14px;
    line-height   : 120%;
    letter-spacing: 0;
    color         : #6B6B6B;
}

.member-account .member-account-card .mac-body .member-detail .md-row .info {
    font-weight   : 500;
    font-size     : 16px;
    line-height   : 100%;
    letter-spacing: 0;
    color         : #333333;
}

.member-account .member-account-card .mac-body .wwd-card {
    padding        : 25px 20px;
    justify-content: flex-end;
}

.user-dropdown .dropdown-toggle {
    border        : 1px solid #B9B9B9;
    border-radius : 10px;
    padding       : 8px 12px 8px 12px;
    display       : flex;
    align-items   : center;
    gap           : 12px;
    font-size     : 12px;
    font-weight   : 400;
    line-height   : 100%;
    letter-spacing: 0.5px;
}

.user-dropdown .dropdown-toggle .user-info {
    display       : flex;
    flex-direction: column;
    gap           : 5px;
    align-items   : flex-start;
}

.user-dropdown .dropdown-toggle .user-info span {
    font-weight: 500;
    font-size  : 16px;
}

.user-dropdown .dropdown-toggle::after {
    border             : none;
    width              : 12px;
    height             : 12px;
    background-image   : url('../images/header/menu-after.svg');
    background-position: center;
    background-repeat  : no-repeat;
    background-size    : inherit;
    vertical-align     : middle;
    margin-left        : 8px;
    transition         : 0.2s all;
}

.user-dropdown .dropdown-menu {
    width   : 100%;
    padding : 0;
    border  : 1px solid #B9B9B9;
    overflow: hidden;
}

.user-dropdown .dropdown-menu li a {
    padding-top   : 5px;
    padding-bottom: 5px;
    border-bottom : 1px solid #B9B9B9;
}

.user-dropdown .dropdown-menu li a:active,
.user-dropdown .dropdown-menu li a:focus,
.user-dropdown .dropdown-menu li a:hover {
    color           : var(--primary-color);
    background-color: #f8f9fa;
}

.user-dropdown .dropdown-menu li:last-child a {
    border-bottom: 0;
}

@media (max-width: 992px) {
    .member-account .member-account-card .mac-body {
        padding-left: 40px;
    }

    .member-account .member-account-card .mac-body .member-detail {
        top: -80px;
    }

    .member-account .member-account-card .mac-header::before {
        background-size: 25%;
    }

    .user-dropdown .dropdown-toggle {
        padding: 4px 6px 4px 6px;
        gap    : 6px;
    }

    .user-dropdown .dropdown-toggle .user-info {
        display: none;
    }

    .user-dropdown .dropdown-menu {
        right: 0 !important;
        left : auto;
    }
}

@media (max-width: 767px) {
    .member-account .member-account-card .mac-header {
        padding       : 35px 0px;
        padding-bottom: 55px;
        font-size     : 20px;
    }

    .member-account .member-account-card .mac-body .member-detail {
        top: -65px;
    }

    .member-account .member-account-card .mac-body {
        padding     : 20px 20px;
        padding-left: 20px;
    }
}

/* ===========================
   Footer Styles  
=========================== */


section.footer {
    background-color: var(--section-light);
    padding         : 45px 0px;
    border-top      : var(--border-top-footer);
}

section.footer .footer-col {
    display        : flex;
    justify-content: space-between;
}

section.footer .footer-col .list-col {
    width: 200px
}

section.footer .footer-col .list-col .footer-heading {
    font-size     : 14px;
    line-height   : 18px;
    font-weight   : 600;
    color         : var(--text-color-title);
    margin-bottom : 20px;
    letter-spacing: 0;
}

section.footer .footer-col .list-col ul li a.nav-link {
    font-size     : 14px;
    font-weight   : 400;
    letter-spacing: 0.6px;
    margin-bottom : 16px;
    padding       : 0;
    line-height   : 100%;
    color         : var(--text-color-main);
}

section.footer .footer-col .list-col ul li a.nav-link:hover {
    color: var(--primary-color);
}

section.footer-bottom {
    background-color: var(--primary-color);
    padding         : 10px 0px;
}

section.footer-bottom .footer-bottom-content {
    display        : flex;
    align-items    : center;
    justify-content: space-between;
    flex-direction : row;
}

section.footer-bottom .footer-bottom-content ul li a.nav-link {
    color         : var(--text-color-white);
    font-weight   : 500;
    font-size     : 14px;
    line-height   : 18px;
    padding       : 0px 15px;
    letter-spacing: 0px;
    margin        : 12px 0px;
}

section.footer-bottom .footer-bottom-content ul li a.nav-link:hover,
section.footer-bottom .footer-bottom-content ul li a.nav-link.active {
    color  : var(--text-color-white);
    opacity: 0.8;
}

section.footer-bottom .footer-bottom-content .footer-links ul li a.nav-link {
    border-right: 1px solid #fff;
}

section.footer-bottom .footer-bottom-content .footer-links ul li:last-child a.nav-link {
    border-right: 0px;
}

section.footer-bottom .footer-bottom-content .footer-logo img {
    width : 80px;
    height: auto;
}

@media (max-width: 1400px) {
    section.footer .footer-col .list-col {
        width: 125px;
    }
}

@media (max-width: 1200px) {
    section.footer .footer-col .list-col {
        width: 110px;
    }
}

@media (max-width: 992px) {
    section.footer .footer-col {
        flex-wrap: wrap;
    }

    section.footer .footer-col .list-col {
        width        : 150px;
        margin-bottom: 40px;
    }

    section.footer-bottom .footer-bottom-content {
        flex-direction : column;
        align-items    : center;
        justify-content: center;
        padding        : 20px 0px;
    }
}

@media (max-width: 767px) {
    section.footer-bottom .footer-bottom-content .footer-links ul li a.nav-link {
        border-right: 0;
    }
}

@media (max-width: 580px) {

    section.footer .footer-col .list-col {
        width        : 100%;
        margin-bottom: 40px;
    }

    section.footer .footer-col .list-col:last-child {
        margin-bottom: 40px;
    }

    section.footer-bottom .footer-bottom-content .footer-links ul {
        align-items    : center;
        justify-content: center;
    }

    section.footer-bottom .footer-bottom-content .footer-links ul li a.nav-link {
        border: 0;
    }
}

@media (max-width: 380px) {
    section.footer .footer-col {
        flex-direction : column;
        align-items    : center;
        justify-content: center;
    }

    section.footer .footer-col .list-col {
        width     : 100%;
        text-align: left;
    }
}


/* =========================================================
   Login Signup / Forgot Password / Reset Password 
============================================================= */

.loginSignup-sec {
    position      : relative;
    padding-top   : 100px;
    padding-bottom: 100px;
    background-image: url('../images/backgrounds/top-left.svg'), url('../images/backgrounds/top-right.svg'),
        url('../images/backgrounds/bottom-left.svg'), url('../images/backgrounds/bottom-right.svg');
    background-repeat  : no-repeat;
    background-size    : 15%, 15%, 15%, 15%;
    background-position: top left, top right, bottom left, bottom right;
}

.loginSignup-sec.full-height {
    min-height     : 100vh;
    display        : flex;
    align-items    : center;
    justify-content: center;
}

.loginSignup-sec .login-sigup-wrapper {
    width           : 500px;
    margin          : 0px auto;
    background-color: #fff;
    border-radius   : 30px;
    box-shadow      : 0px 2px 60px 0px #0000001F;
    backdrop-filter : blur(24px);
    border-bottom   : 3px solid #F15922;
    padding         : 40px 40px;
    display         : flex;
    flex-direction  : column;
    gap             : 30px;
}

.loginSignup-sec .login-sigup-wrapper .header {
    display       : flex;
    flex-direction: column;
    gap           : 10px;
}

.loginSignup-sec .login-sigup-wrapper .header h1 {
    font-weight   : 600;
    font-size     : 24px;
    line-height   : 32px;
    letter-spacing: 0.4px;
    text-align    : center;
    text-transform: capitalize;
    margin-bottom : 0;
}

.loginSignup-sec .login-sigup-wrapper .header p {
    letter-spacing: 0px;
    margin-bottom : 0;
}

.loginSignup-sec .login-sigup-wrapper .header svg {
    margin-right : auto;
    margin-left  : auto;
    margin-bottom: 30px;
}

.loginSignup-sec .login-sigup-wrapper .forgot-link a {
    font-weight    : 500;
    font-size      : 14px;
    line-height    : 100%;
    letter-spacing : 0.4px;
    text-align     : center;
    text-transform : capitalize;
    color          : var(--text-color-main);
    border-bottom  : 1px solid var(--primary-color);
    padding-bottom : 3px;
    text-decoration: none;
}

@media (max-width: 1200px) {
    .loginSignup-sec {
        background-size: 20%, 20%, 20%, 20%;
    }
}

@media (max-width: 768px) {
    .loginSignup-sec {
        background-size: 25%, 25%, 25%, 25%;
    }
}

@media (max-width: 600px) {
    .loginSignup-sec .login-sigup-wrapper {
        width  : 100%;
        padding: 20px 20px;
    }

    .loginSignup-sec .login-sigup-wrapper .header h1 {
        font-size  : 20px;
        line-height: 28px;
    }
}

.floating-select {
    position: relative;
    width   : 100%;
    z-index : 1;
}

.floating-select .floating-label {
    position      : absolute;
    left          : 12px;
    top           : 30%;
    transform     : translateY(-50%);
    color         : #00000099;
    font-size     : 16px;
    pointer-events: none;
    transition    : all 0.2s ease;
    background    : #fff;
    padding       : 0 6px;
    z-index       : 999;
}

.floating-select .floating-label span {
    color: red;
}

.floating-select.active .floating-label {
    top      : 0;
    font-size: 14px;
    color    : #00000099;
}

.floating-select .vscomp-wrapper.closed {
    position: relative;
    z-index : 3 !important;
}

.form-navigation .navigation-col {
    display        : flex;
    justify-content: space-between;
}

.iti {
    width: 100%;
}

input[type="tel"] {
    width       : 100%;
    padding-left: 90px !important;
    min-height  : 56px !important;
    max-height  : 56px !important;
}

.iti__search-input {
    border-radius : 0;
    padding-top   : 5px;
    padding-bottom: 5px;
    background    : #f1f1f1;
}

@media (max-width: 992px) {
    /* .floating-select .vscomp-wrapper {
        z-index: 999 !important;
    } */

    .floating-select .vscomp-wrapper.closed {
        position: relative;
        z-index : 3 !important;
    }

}

@media (max-width: 767px) {
    .step-form-container .step-indicators .step span.step-title {
        display: none;
    }

    .step-form-container .step-indicators .step::before {
        top: 50%;
    }

    .form-navigation .navigation-col {
        flex-direction: column;
        gap           : 10px;
    }

    .form-navigation .navigation-col .btn {
        width: 100% !important;
    }
}

.vscomp-wrapper.show-as-popup .vscomp-dropbox-container {
    z-index: 999 !important;
}


.error-page {
    position       : relative;
    width          : 100%;
    min-height     : calc(100vh - 250px);
    overflow       : hidden;
    display        : flex;
    align-items    : center;
    justify-content: center;
}

.error-page .gif img {
    width    : 100%;
    max-width: 320px;
}

.error-page p {
    font-size     : 20px;
    line-height   : 160%;
    letter-spacing: 0;
    width         : 100%;
    max-width     : 608px;
}

@media (max-width: 500px) {
    .error-page .gif img {
        max-width: 200px;
    }
}

.iti__selected-country {
    gap: 5px !important;
}

.iti__selected-country-primary {
    background               : #f8f8f8 !important;
    border-top-left-radius   : 8px !important;
    border-bottom-left-radius: 8px !important;
}

#countrySelect.custom-select .vscomp-wrapper:not(.has-value) .vscomp-value {
    color      : #00000099;
    font-weight: 400;
    font-size  : 16px;
    opacity    : 1;
    font-family: "GT Walsheim Trial", serif;
}

#countrySelect.custom-select .vscomp-wrapper .vscomp-value {
    color      : var(--text-color-title);
    font-weight: 400;
    font-size  : 16px;
    opacity    : 1;
    font-family: "GT Walsheim Trial", serif;
}

.modal {
    z-index: 99999 !important;
}

.modal-backdrop {
    z-index: 9999 !important;
}