body {
    margin: 0;
    background:var(--bg-home);
    background-size: cover;
    font-family: 'Almarai';
    background-repeat: no-repeat;
    font-size: 1rem;
    line-height: 1.5;

}
/*this is step form*/

*,
*::before,
*::after {
    -webkit-box-sizing: border-box;
    box-sizing: border-box; }

html {
    font-family: sans-serif;
    line-height: 1.15;
    -webkit-text-size-adjust: 100%;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0); }

article, aside, figcaption, figure, footer, header, hgroup, main, nav, section {
    display: block; }

a{
    color: #000;
}

.bg-default{
    background: var(--bg-default);
}
a:hover{
    color:var(--default-color);
}
#box_whatsapp{
    position: fixed;
    left: 50px;
    background: #4baf4f;
    width: 62px;
    height: 62px;
    font-size: 2.5rem;
    text-align: center;
    border-radius: 50%;
    line-height: 62px;
    bottom: 50px;
    color: #fff;
}
[tabindex="-1"]:focus:not(:focus-visible) {
    outline: 0 !important; }


.wizard{
    font-family:"custemfont";

}
.wizard-wrapper{
    text-align: right!important;
}
#FaqImage{
    height: 384px;
    position: absolute;
    left: 13%;
    margin-top: 10%;
}
.font14PX{
    font-size: 14px!important;
}
#FaqImage img{
    width: 450px;
}
input[type=email]{
    font-family: monospace;
}
input[type=email]::placeholder{
    font-family: 'custemfont';
}


.wizard [data-wizard-type="step-info"] {
    display: none; }

.wizard [data-wizard-type="step-info"][data-wizard-state="current"] {

    display: block; }

.wizard [data-wizard-type="step-content"] {
    display: none; }
.wizard [data-wizard-type="step-content"][data-wizard-state="current"] {
    display: block; }

.wizard [data-wizard-type="action-prev"] {
    display: none; }

.wizard [data-wizard-type="action-next"] {
    display: inline-block; }

.wizard [data-wizard-type="action-submit"] {
    display: none; }

.wizard[data-wizard-state="first"] [data-wizard-type="action-prev"] {
    display: none; }

.wizard[data-wizard-state="first"] [data-wizard-type="action-next"] {
    display: inline-block; }

.wizard[data-wizard-state="first"] [data-wizard-type="action-submit"] {
    display: none; }

.wizard[data-wizard-state="between"] [data-wizard-type="action-prev"] {
    display: inline-block; }

.wizard[data-wizard-state="between"] [data-wizard-type="action-next"] {
    display: inline-block; }

.wizard[data-wizard-state="between"] [data-wizard-type="action-submit"] {
    display: none; }

.wizard[data-wizard-state="last"] [data-wizard-type="action-prev"] {
    display: inline-block; }

.wizard[data-wizard-state="last"] [data-wizard-type="action-next"] {
    display: none; }

.wizard[data-wizard-state="last"] [data-wizard-type="action-submit"] {
    display: inline-block; }

.wizard[data-wizard-clickable="true"] .wizard-step {
    cursor: pointer; }

/*timer*/
.form-control{

   height: 44px!important;
   line-height: 44px!important;
}

#toast-container > div{
    padding: 15px 10px !important;
}

::placeholder {
    line-height: 144px !important;
    height: 144px !important;
  }

label{
    margin-top: 10px!important;
}
.fv-help-block{
    text-align: right!important;
    font-size: 14px;
    color: red;
    margin-top: 7px;
}
.select2-search__field{
    outline: none;
    border-radius: 5px;
    border-color: #ced4da;
    height: 48px!important;
}
.select2-container--default .select2-results__option--highlighted[aria-selected] {
    background-color: var(--default-color)!important;

}
.select2-results__options::-webkit-scrollbar{width:10px;!important;border-left:2px solid #E6ECF8;!important;border-radius: 4px}

.select2-results__options::-webkit-scrollbar-thumb{background-color: #666666;!important;}
.select2-results__option:hover{
    background-color: var(--default-color)!important;
}
.page-link{
    color: var(--default-color)!important;
    outline: none!important;
}
.page-link:focus{
    box-shadow: none!important;
    outline: none!important;
}
.page-item.active .page-link {
    z-index: 3;
    color: #fff!important;
    background-color: var(--default-color);
    border-color: var(--default-color);
}
.mle{
    margin-right:1.5rem;
    font-size: 14px;
    align-self: center;
}
.select2-selection{
    align-items: center!important;
    display: flex!important;
    width: 100%!important;
    outline: none;
    height: 48px!important;
    border-color: #ced4da!important;
}
.select2-selection__arrow{
    height: 100%!important;
}
.select2-container--default .select2-selection--single .select2-selection__arrow b {
    border-color: #88888894 transparent transparent transparent!important;
    border-style: solid!important;
    border-width: 7px 5px 0 5px!important;
    height: 0!important;
    left: 100%!important;

    /* margin-left: -4px; */
    /* margin-top: -2px; */
    position: absolute!important;
    top: 43%!important;
    width: 0!important;
}

.border-footer {
    border-color: #ebebeb !important;
}

.lh-none{
    line-height: normal !important;
}
.lh-none{
    line-height: normal !important;
}
@font-face {
    font-family: 'custemfont';
    src: url("../fonts/g1.otf");
}

.flora{
    float:right!important;
}

.invalid-feedback{
    text-align: right!important;
}

@font-face {
    font-family: 'custemfont2';
    src: url("../fonts/g2.otf");
}

.btnx {
    padding: 0.6em 6em!important;
}
.wizard-desc{
    font-size: 12px!important;
}

.px-6{
    padding: 0em 2em !important;
}

.img-size90{
    width: 90px;
    height: 90px;
}

.img-size150{
    width: 150px;
    height: 150px;
}

.toast-error{
    text-align: right !important;
    direction: rtl;
}

.mtx {
    margin: 8em 0em;
}

.btnx2 {
    padding: 0.6em 3em !important;
        display:inline-block;
}
.mre{
   margin-right: .5rem !important
}

.sub-social{
    background: var(--bg-default);
    border-radius: 50%;
    width: 34px;
    height: 34px;
    margin: 4px 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: opacity .2s;
}
.sub-social:hover{
    opacity: .8;
}
.sub-social a{
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    color: #fff;
    font-size: 14px;
}

#captcha-img img{
    width: 100%;
    height: 100%; 
}

.finished {
    padding: 7px 0 !important;
    background-color: orangered;
    color: white;
    border-radius: 0.4em;
    font-size: 10px;
    width: 70px;
}
.progress{
    padding: 1.3em 0.7em !important;
    background-color: rebeccapurple;
    color: white;
    border-radius: 0.4em;
    font-size: 10px;
}


.progress-b{
    padding: 7px 0 !important;
    background-color: rebeccapurple;
    color: white;
    border-radius: 0.4em;
    font-size: 10px;
    width: 70px;
}

.fothover:hover{
    color:var(--default-color)!important;
}
.fothover{
    color:#6c757d!important;
}

.roundedrx {
    border-top-right-radius: 3em;
    border-bottom-right-radius: 3em;
    border-top-left-radius: 0em;
    border-bottom-left-radius: 0em;
}
.roundedrx3 {
    border-top-right-radius: 2em !important;
    border-bottom-right-radius: 2em !important;
    border-top-left-radius: 2em !important;
    border-bottom-left-radius: 2em !important;
}
.cp:hover {
    cursor: pointer;
  }
.roundedlx {
    border-top-left-radius: 3em;
    border-bottom-left-radius: 3em;
    border-top-right-radius: 0em;
    border-bottom-right-radius: 0em;
}

.h60 {
    height: 5em;
}

.h30 {
    height: 3em;
}
.dropdown-item:focus {
    background-color: none !important;           
}

.style_bg{

background: var(--default-color) !important;
border:var(--default-color) !important;
}


.style_bg_secondary {
    background: #ccc!important;
    border: #ccc !important;
    }
    


.justify-content-left{
 justify-content: left;    
}

.w-130px{
    width: 130px;
}

.w-150px{
    width: 150px;
}


#header2 #b-search{
    left: 19px;
    background: none;
    border: none;
    top: 0px;
    color: #000;
}
#header2 form{
    width:90%;
}

.hover:hover{
    background:var(--secondary-color) !important;
    color: #fff;
    border:solid 1px var(--secondary-color) !important;
}

.hover2:hover{
    background:var(--secondary-color) !important;
    color: #fff;;
    border:var(--secondary-color) !important;
}


.activeItem a{
    color: #ffffff;
}

.text-black{
color: #000
}

.items-center{
display: flex;
align-items: center;
}

.border-white {
    border: 1px solid #fff !important;
}

.dropdown-item:active {
    background-color: #eee !important;
    color: #000;           
}
.style_txts_color {
    color:var(--default-color) !important;
}

.style_txts_color:hover {
    color:var(--secondary-color)!important;
}

.style_secondary_bg{
    background: var(--secondary-color)!important;
}
.whitebtn {
    background-color: white !important;
    color: #669BA3 !important;
}

.whitebtn:hover {
    background-color: #669BA3 !important;
    color: white !important;
}

.lightbluebackgroundhover {
    background-color: white!important;
}

.lightbluebackgroundhover:hover {
    background-color:var(--bg-default) !important;
}

.lightbluebackground {
    background-color:var(--bg-default);
    border-radius: 40px !important;
}

.lightbluebackgroundhover:hover .lightbluebackground {
    background-color: #ffffff !important;
}


.triangle-up{
    width: 0;
    height: 0;
    border-left: 12px solid transparent;
    border-right: 12px solid transparent;
    border-bottom: 16px solid #ffffff;
    left:0
}

.lightbluebackgroundhover:hover .triangle-up{
    border-bottom: 16px solid var(--bg-default);
}


.nav-pills .nav-link.active{
    background-color:var(--bg-default)!important;
    }


#contact_us{
    font-size: 14px;
}

.fontx {
    font-size: 16px !important;
    color:#676869 !important;
}

.min-vh-50{
    min-height: 50vh !important;    
}

.radius-right{
border-top-right-radius:2em  !important;
}

.radius-left{
    border-top-left-radius:2em  !important;
    }

.account-icons{
    width: 35px;
    height: 35px;
    font-size: 16px;
}
#myTabContent iframe{
    width: 100% !important;
}
/* #myTabContent img{
    width: 100% !important;
} */

.box-n{
    position:absolute;
    top: -4px;
    left:-10px;
    font-size:46%;
    width: 15px;
    height: 15px;
    text-align: center; 
}

.icon-faq{
    position: absolute;
    left: 25px;
    width: 25px;
    height: 25px;
    background: #fff;
    border: solid 1px #B8BBBC;
    color: #B8BBBC;
    line-height: 25px;
    font-size:80%;
}

.sidenav {
    height: 100%;
    width: 0;
    position: fixed;
    z-index: 1;
    top: 0;
    left: 0;
    overflow-x: hidden;
    transition: 0.5s;
    padding-top: 60px;
    background: #f5f4f4;
}

.sidenav a {
    padding: 8px 8px 8px 32px;
    text-decoration: none;
    font-size: 25px;
    color: #818181;
    display: block;
    transition: 0.3s;
    width: 100% !important;
}

.sidenav a:hover {
    color: #f1f1f1;
}

.sidenav .closebtn {
    position: absolute;
    top: 0;
    right: 25px;
    font-size: 36px;
    margin-left: 50px;
}

.swal2-content{
    font-size: 16px !important;
}



#dropdownMenuLink::after {
    content:none;
}

@media screen and (max-height: 450px) {
    .sidenav {
        padding-top: 15px;
    }

   
}

@media only screen and (max-width: 768px){
    .justify-content-left {
        justify-content: center !important;
    }
    .headtitle {
        height: auto !important;
    }
    #contact h6{
        width: 55%;
    }
    #contact h6 a{
        color: #fff;
    }

    .radius-right{
        border-radius:2em !important;
    }

    .w-xs-100{
        width: 100% !important;
    }
}


/* ═══════════════════════════════════════════
   Header1
   ═══════════════════════════════════════════ */
#header1 { font-family: inherit; }

#header1 .h1-topbar { padding: 8px 0; }
#header1 .h1-topbar .container { display: flex; align-items: center; gap: 10px; justify-content: flex-start; }
[dir="rtl"] #header1 .h1-topbar .container { flex-direction: row-reverse; }

#header1 .h1-search { position: relative; flex: 1; max-width: 320px; }
#header1 .h1-search input { width: 100%; border: 1px solid #ddd; border-radius: 20px; height: 36px; font-size: 13px; outline: none; background: #fff; }
[dir="rtl"] #header1 .h1-search input { padding: 0 40px 0 14px; }
[dir="ltr"] #header1 .h1-search input { padding: 0 14px 0 40px; }
#header1 .h1-search-btn { position: absolute; top: 50%; transform: translateY(-50%); background: none; border: none; color: #999; cursor: pointer; font-size: 13px; }
[dir="rtl"] #header1 .h1-search-btn { right: 13px; }
[dir="ltr"] #header1 .h1-search-btn { left: 13px; }

#header1 .h1-lang { height: 32px; padding: 0 14px; border: 1.5px solid var(--default-color); border-radius: 16px; color: var(--default-color) !important; font-size: 12px; font-weight: 700; display: inline-flex; align-items: center; text-decoration: none !important; white-space: nowrap; flex-shrink: 0; }

#header1 .h1-navbar { background: var(--bg-default); border-radius: 50px; padding: 6px 16px; margin-bottom: 8px; box-shadow: 0 2px 12px rgba(0,0,0,.06); flex-wrap: nowrap; }
#header1 .h1-pill { display: flex; align-items: center; flex-shrink: 0; gap: 10px; }

#header1 .h1-toggler { width: 36px; height: 36px; border-radius: 8px; background: var(--default-color); color: #fff; border: none; display: none; align-items: center; justify-content: center; cursor: pointer; flex-shrink: 0; }

#header1 .h1-btn { display: inline-flex; align-items: center; justify-content: center; padding: 5px 18px; border-radius: 20px; font-size: 13px; text-decoration: none !important; white-space: nowrap; cursor: pointer; transition: opacity .2s; border: 1.5px solid transparent; }
#header1 .h1-btn:hover { opacity: .85; }
#header1 .h1-btn--ghost { color: var(--default-color) !important; border-color: var(--default-color); background: transparent; }
#header1 .h1-btn--solid { background: var(--default-color); color: #fff !important; border-color: var(--default-color); }

#header1 .h1-bell { color: var(--default-color) !important; font-size: 17px; text-decoration: none !important; }
#header1 .h1-badge { position: absolute; top: -4px; right: -4px; left: auto; background: #e74c3c; color: #fff; border-radius: 50%; min-width: 16px; height: 16px; font-size: 9px; font-weight: 700; display: flex; align-items: center; justify-content: center; padding: 0 3px; border: 2px solid #fff; z-index: 10; }

#header1 .h1-nav-item { border-bottom: 1px solid rgba(0,0,0,.06); }

@media (max-width: 991px) {
    #header1 { overflow-x: hidden; }
    #header1 .h1-topbar { padding: 8px 12px; }
    #header1 .h1-topbar .container { padding: 0; max-width: 100%; }
    #header1 .h1-topbar .h1-search { max-width: 100%; }
    #header1 .h1-navbar { background: transparent; border-radius: 0; box-shadow: none; flex-wrap: wrap; padding: 0; margin: 0 8px 8px; }
    #header1 .h1-pill { width: 100%; justify-content: space-between; background: var(--bg-default); border-radius: 14px; padding: 6px 10px; box-shadow: 0 2px 12px rgba(0,0,0,.06); }
    #header1 .h1-toggler { display: flex; }
    #header1 .navbar-collapse { width: 100%; background: #fff; border-radius: 14px; margin-top: 6px; padding: 4px 10px 10px; box-shadow: 0 2px 8px rgba(0,0,0,.08); }
    #header1 .h1-auth { padding: 12px 4px 4px; border-top: 1px solid rgba(0,0,0,.08); display: flex; gap: 8px; justify-content: center; }
    #header1 .h1-btn { flex: 1; }
}
@media (min-width: 992px) {
    #header1 .h1-nav-item { border-bottom: none; }
    #header1 .h1-auth { display: flex; align-items: center; gap: 8px; }
    #header1 .dropdown:hover > .dropdown-menu { display: block; }
    #header1 .navbar-nav .nav-item { position: relative; }
    #header1 .navbar-nav .dropdown-menu { position: absolute; top: 100%; min-width: 180px; }
    [dir="rtl"] #header1 .navbar-nav .dropdown-menu { right: 0; left: auto; }
    [dir="ltr"] #header1 .navbar-nav .dropdown-menu { left: 0; right: auto; }
    #header1 .h1-auth .dropdown { position: relative; }
    [dir="rtl"] #header1 .h1-auth .dropdown-menu { right: 0; left: auto; }
    [dir="ltr"] #header1 .h1-auth .dropdown-menu { left: 0; right: auto; }
}


/* ═══════════════════════════════════════════
   Header2
   ═══════════════════════════════════════════ */
#header2 { font-family: inherit; }

#header2 .h2-topbar { background: var(--default-color); padding: 10px 0; }
#header2 .h2-topbar .container { display: flex; align-items: center; gap: 8px; }

#header2 .h2-btn { display: inline-flex; align-items: center; justify-content: center; padding: 5px 20px; border-radius: 20px; font-size: 13px; text-decoration: none !important; white-space: nowrap; cursor: pointer; transition: opacity .2s; border: 1.5px solid transparent; }
#header2 .h2-btn:hover { opacity: .85; }
#header2 .h2-btn--outline { border-color: rgba(255,255,255,.8); color: #fff !important; background: transparent; }
#header2 .h2-btn--fill { background: #fff; color: var(--default-color) !important; font-weight: 600; border-color: #fff; }

/* User info */
#header2 .h2-user-info { display:flex; align-items:center; gap:8px; }
#header2 .h2-user-avatar { width:34px; height:34px; border-radius:50%; object-fit:cover; border:2px solid rgba(255,255,255,.5); }
#header2 .h2-user-name { color:#fff !important; font-size:.85rem; font-weight:600; text-decoration:none; white-space:nowrap; }
#header2 .h2-user-name:hover { opacity:.85; }

/* Bell */
#header2 .h2-bell-wrap { position:relative; }
#header2 .h2-bell { position:relative; display:flex; align-items:center; justify-content:center; width:36px; height:36px; border-radius:50%; background:rgba(255,255,255,.15); color:#fff !important; font-size:15px; text-decoration:none !important; transition:background .2s; }
#header2 .h2-bell:hover { background:rgba(255,255,255,.28); }
#header2 .h2-badge { position:absolute; top:-4px; right:-4px; left:auto; background:#e74c3c; color:#fff; border-radius:50%; min-width:18px; height:18px; font-size:9px; font-weight:700; display:flex; align-items:center; justify-content:center; padding:0 3px; border:2px solid white; z-index:10; }

/* Notifications dropdown */
#header2 .h2-noty-menu { min-width:320px; border-radius:12px; border:none; box-shadow:0 8px 30px rgba(0,0,0,.14); padding:0; overflow:hidden; }
#header2 .h2-noty-header { display:flex; justify-content:space-between; align-items:center; padding:12px 16px; background:#f8f8f8; border-bottom:1px solid #eee; font-weight:700; font-size:.9rem; color:#1a1a2e; }
#header2 .h2-noty-count { background:var(--default-color); color:#fff; border-radius:20px; padding:1px 8px; font-size:.75rem; font-weight:600; }
#header2 .h2-noty-item { display:flex; align-items:flex-start; gap:10px; padding:10px 16px; text-decoration:none; transition:background .15s; border-bottom:1px solid #f5f5f5; }
#header2 .h2-noty-item:hover { background:#f9f9f9; }
#header2 .h2-noty-img { width:42px; height:42px; border-radius:8px; object-fit:cover; flex-shrink:0; }
#header2 .h2-noty-text { display:flex; flex-direction:column; gap:2px; min-width:0; }
#header2 .h2-noty-title { font-size:.8rem; color:#1a1a2e; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
#header2 .h2-noty-sub { font-size:.75rem; color:var(--default-color); }
#header2 .h2-noty-time { font-size:.7rem; color:#aaa; }
#header2 .h2-noty-all { display:block; text-align:center; padding:10px; font-size:.82rem; font-weight:600; color:var(--default-color); background:#f8f8f8; text-decoration:none; }
#header2 .h2-noty-all:hover { background:#f0f0f0; }
#header2 .h2-noty-empty { display:flex; flex-direction:column; align-items:center; gap:8px; padding:24px; color:#aaa; font-size:.85rem; }
#header2 .h2-noty-empty i { font-size:1.8rem; }

#header2 .h2-nav { background: #fff; padding: 6px 0; box-shadow: 0 2px 8px rgba(0,0,0,.05); }

#header2 .h2-lang { height: 32px; padding: 0 12px; border: 1.5px solid var(--default-color); border-radius: 16px; color: var(--default-color) !important; font-size: 12px; font-weight: 700; display: inline-flex; align-items: center; text-decoration: none !important; white-space: nowrap; flex-shrink: 0; }

#header2 .h2-toggler { width: 36px; height: 36px; border-radius: 8px; background: var(--default-color); color: #fff; border: none; display: flex; align-items: center; justify-content: center; cursor: pointer; flex-shrink: 0; }

#header2 .h2-mobile-ctrls { display: none; align-items: center; gap: 6px; }
[dir="rtl"] #header2 .h2-mobile-ctrls { margin-right: auto; }
[dir="ltr"] #header2 .h2-mobile-ctrls { margin-left: auto; }

#header2 .h2-search { position: relative; }
#header2 .h2-search input { border: 1px solid #ddd; border-radius: 20px; height: 36px; font-size: 13px; width: 180px; outline: none; }
[dir="rtl"] #header2 .h2-search input { padding: 0 40px 0 14px; }
[dir="ltr"] #header2 .h2-search input { padding: 0 14px 0 40px; }
#header2 .h2-search .h2-search-btn { position: absolute; top: 50%; transform: translateY(-50%); background: none; border: none; color: #999; cursor: pointer; font-size: 13px; }
[dir="rtl"] #header2 .h2-search .h2-search-btn { right: 13px; }
[dir="ltr"] #header2 .h2-search .h2-search-btn { left: 13px; }

#header2 .h2-desktop-tools { display: flex; align-items: center; gap: 10px; }
#header2 .h2-mobile-tools { display: none; }
#header2 .h2-nav-item { border-bottom: 1px solid #f0f0f0; }

/* Nav items — no internal line-break, natural font size */
#header2 .h2-nav-text { white-space: nowrap; }

@media (max-width: 991px) {
    #header2 .h2-topbar { padding: 8px 12px; }
    #header2 .h2-topbar .container { padding: 0; gap: 6px; flex-wrap: nowrap; }
    #header2 .h2-topbar .dropdown { position: relative; }
    #header2 .h2-topbar .dropdown > a { white-space: nowrap; }
    #header2 .h2-topbar .h2-btn { font-size: 11px; padding: 5px 10px; }

    /* User info: avatar only on mobile, hide name */
    #header2 .h2-user-info { gap: 0; }
    #header2 .h2-user-name { display: none; }
    #header2 .h2-user-avatar { width: 28px !important; height: 28px !important; flex-shrink: 0; }

    /* Bell: override headers.css line-103 that forces width:100% on all .dropdown > a */
    #header2 .h2-bell-wrap { flex: none !important; margin: 0 2px; position: relative; }
    #header2 .h2-bell-wrap > a.h2-bell { width: 28px !important; height: 28px !important; font-size: 12px; background: rgba(255,255,255,.12); flex: none !important; }

    /* Logout/account buttons: compact, no stretching — override headers.css flex:1 on h2-btn--fill */
    #header2 .h2-topbar a.h2-btn--fill,
    #header2 .h2-topbar a.h2-btn--outline { flex: none !important; }

    /* Notification dropdown: centered fixed panel on mobile */
    #header2 .h2-bell-wrap .dropdown-menu {
        position: fixed !important;
        top: 60px !important;
        left: 50% !important;
        right: auto !important;
        transform: translateX(-50%) !important;
        width: 320px !important;
        max-width: calc(100vw - 24px) !important;
    }

    #header2 .h2-mobile-ctrls { display: flex; }
    #header2 .h2-desktop-tools { display: none; }
    #header2 .h2-mobile-tools { display: block; padding: 10px 4px 14px; }
    #header2 .h2-mobile-tools .h2-search input { width: 100%; }
    #header2 .h2-mobile-tools .h2-search { width: 100%; }
    #header2 .navbar-brand { padding: 0 !important; }
    #header2 .h2-noty-menu { min-width: 280px; max-width: 92vw; }
}
@media (min-width: 992px) {
    #header2 .h2-nav-item { border-bottom: none; }
    #header2 .dropdown:hover > .dropdown-menu { display: block; }
    #header2 .navbar-nav .nav-item { position: relative; }
    #header2 .navbar-nav .dropdown-menu { position: absolute; top: 100%; min-width: 180px; }
    [dir="rtl"] #header2 .navbar-nav .dropdown-menu { right: 0; left: auto; }
    [dir="ltr"] #header2 .navbar-nav .dropdown-menu { left: 0; right: auto; }
    #header2 .h2-topbar .dropdown { position: relative; }
    [dir="rtl"] #header2 .h2-topbar .dropdown-menu { right: 0; left: auto; }
    [dir="ltr"] #header2 .h2-topbar .dropdown-menu { left: 0; right: auto; }
}

.lightbluebackgroundhover{overflow:hidden;border-radius:12px;transition:box-shadow .25s ease}.lightbluebackgroundhover:hover{box-shadow:0 8px 24px rgba(0,0,0,.12)!important}.lightbluebackgroundhover .row.d-flex{width:100%;margin:0}.card-img-wrap{display:block;width:100%;line-height:0;font-size:0}.card-img{width:100%;height:220px;display:block;object-fit:cover}
img.rounded-circle{object-fit:cover}

/* Trainer Card */
.trainer-card{display:flex;flex-direction:column;align-items:center;text-align:center;padding:20px 12px;text-decoration:none;color:inherit;transition:opacity .2s}
.trainer-card:hover{opacity:.8;text-decoration:none;color:inherit}
.trainer-card-img-wrap{width:100px;height:100px;border-radius:50%;overflow:hidden;margin-bottom:12px;border:3px solid #e8e8e8}
.trainer-card-img{width:100%;height:100%;object-fit:cover;display:block}
.trainer-card-name{font-size:.95rem;font-weight:600;color:#1a1a2e;margin:0 0 6px;line-height:1.4}
.trainer-card-courses{font-size:.8rem;color:var(--default-color);background:color-mix(in srgb,var(--default-color) 12%,white);padding:3px 10px;border-radius:12px;font-weight:600}

/* Trainer Card Style 3 — circular photo with decorative ring */
.trainer-card3{display:flex;flex-direction:column;align-items:center;text-align:center;text-decoration:none;color:inherit;padding:16px 10px 16px;transition:transform .22s;border-radius:16px}
.trainer-card3:hover{transform:translateY(-5px);text-decoration:none;color:inherit}
.trainer-card3-img-outer{width:140px;height:140px;border-radius:50%;background:#efefef;display:flex;align-items:center;justify-content:center;margin-bottom:8px;transition:background .25s,box-shadow .25s}
.trainer-card3:hover .trainer-card3-img-outer{background:color-mix(in srgb,var(--default-color) 18%,white);box-shadow:0 0 0 4px color-mix(in srgb,var(--default-color) 22%,white)}
.trainer-card3-img-wrap{width:118px;height:118px;border-radius:50%;overflow:hidden;border:3px solid #fff;box-shadow:0 3px 12px rgba(0,0,0,.12)}
.trainer-card3-img-wrap img{width:100%;height:100%;object-fit:cover;display:block}
.trainer-card3-info{display:flex;flex-direction:column;align-items:center}
.trainer-card3-rating{font-size:.8rem;color:#888;margin-bottom:6px;display:flex;align-items:center;gap:4px}
.trainer-card3-rating .tc3-rate-val{font-weight:700;color:#333;font-size:.85rem}
.trainer-card3-rating .fa-star{color:#f59e0b;font-size:.78rem}
.trainer-card3-rating .fa-book-open{color:var(--default-color);font-size:.78rem}
.trainer-card3-rating .tc3-rate-label{color:#aaa}
.trainer-card3-name{font-size:.98rem;font-weight:700;color:#1a1a2e;margin:0 0 5px;line-height:1.4}
.trainer-card3-job{font-size:.8rem;color:var(--default-color);font-weight:500}

/* Trainer Card Style 2 — floating image over gradient header */
.trainer-card2{display:flex;flex-direction:column;align-items:center;text-align:center;background:#fff;border-radius:16px;border:1px solid #ececec;text-decoration:none;color:inherit;transition:box-shadow .25s,transform .25s;overflow:hidden;height:100%}
.trainer-card2:hover{box-shadow:0 10px 28px rgba(0,0,0,.12);transform:translateY(-4px);text-decoration:none;color:inherit}
.trainer-card2-header{width:100%;height:64px;background:color-mix(in srgb,var(--default-color) 20%,white);flex-shrink:0}
.trainer-card2-img-wrap{width:80px;height:80px;border-radius:50%;overflow:hidden;margin-top:-40px;border:3px solid #fff;box-shadow:0 2px 10px rgba(0,0,0,.18);flex-shrink:0}
.trainer-card2-img-wrap img{width:100%;height:100%;object-fit:cover;display:block}
.trainer-card2-name{font-size:.88rem;font-weight:700;color:#1a1a2e;margin:10px 12px 6px;line-height:1.4;flex:1}
.trainer-card2-courses{font-size:.75rem;color:var(--default-color);background:color-mix(in srgb,var(--default-color) 12%,white);padding:3px 14px;border-radius:20px;font-weight:600;margin-bottom:16px}

/* Trainers2 equal height items */
.trainers-slider.box2 .owl-stage{display:flex}
.trainers-slider.box2 .owl-item{display:flex}
.trainers-slider.box2 .item{display:flex;flex:1}
.trainers-slider.box2 .trainer-card2{flex:1}

/* Trainers3 equal height + nav */
.trainers-slider.box3{min-height:unset;overflow:visible!important}
.trainers-slider.box3 .owl-stage-outer{overflow:hidden}
.trainers-slider.box3 .owl-nav{position:absolute;top:50%;transform:translateY(-50%);width:calc(100% + 100px);right:-50px;pointer-events:none;display:flex;justify-content:space-between;align-items:center}
.trainers-slider.box3 .owl-nav button{pointer-events:all;position:static!important;background:#fff!important;border:none!important;border-radius:50%!important;width:38px;height:38px;min-width:38px;display:flex;align-items:center;justify-content:center;box-shadow:0 3px 12px rgba(0,0,0,.12);color:#bbb!important;font-size:.8rem;transition:box-shadow .2s,color .2s}
.trainers-slider.box3 .owl-nav button:hover{box-shadow:0 6px 20px rgba(0,0,0,.18);color:#666!important}
.trainers-slider.box3 .owl-nav .owl-prev,.trainers-slider.box3 .owl-nav .owl-next{position:static!important;transform:none!important}

/* Owl nav vertical centering for trainers2 */
.trainers2-wrap{position:relative;padding:0 50px}
.trainers-slider.box2{min-height:unset;overflow:visible!important}
.trainers-slider.box2 .owl-stage-outer{overflow:hidden}
.trainers-slider.box2 .owl-nav{position:absolute;top:50%;transform:translateY(-50%);width:calc(100% + 100px);right:-50px;pointer-events:none;display:flex;justify-content:space-between;align-items:center}
.trainers-slider.box2 .owl-nav button{pointer-events:all;position:static!important;background:#fff!important;border:none!important;border-radius:50%!important;width:38px;height:38px;min-width:38px;display:flex;align-items:center;justify-content:center;box-shadow:0 3px 12px rgba(0,0,0,.12);color:#bbb!important;font-size:.8rem;transition:box-shadow .2s,color .2s}
.trainers-slider.box2 .owl-nav button:hover{box-shadow:0 6px 20px rgba(0,0,0,.18);color:#666!important}
.trainers-slider.box2 .owl-nav .owl-prev,.trainers-slider.box2 .owl-nav .owl-next{position:static!important;transform:none!important}

/* Trainer Profile Card */
.trainer-profile-card{display:flex;align-items:center;gap:24px;background:#fff;border-radius:16px;padding:24px 28px;box-shadow:0 2px 16px rgba(0,0,0,.07);flex-wrap:wrap}
.trainer-profile-avatar{width:90px;height:90px;border-radius:50%;overflow:hidden;flex-shrink:0;border:3px solid color-mix(in srgb,var(--default-color) 20%,white)}
.trainer-profile-avatar img{width:100%;height:100%;object-fit:cover;display:block}
.trainer-profile-info{flex:1;min-width:0}
.trainer-profile-name{font-size:1.2rem;font-weight:700;color:#1a1a2e;margin:0 0 4px}
.trainer-profile-job{font-size:.85rem;color:#888;display:block;margin-bottom:10px}
.trainer-profile-socials{list-style:none;padding:0;margin:0;display:flex;gap:8px;flex-wrap:wrap}
.trainer-profile-socials li a{display:flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:50%;background:color-mix(in srgb,var(--default-color) 10%,white);color:var(--default-color);font-size:.85rem;transition:background .2s,color .2s}
.trainer-profile-socials li a:hover{background:var(--default-color);color:#fff}
.trainer-profile-cv{display:inline-flex;align-items:center;gap:6px;padding:8px 20px;border-radius:25px;background:var(--default-color);color:#fff;font-size:.85rem;font-weight:600;text-decoration:none;transition:opacity .2s;white-space:nowrap;flex-shrink:0}
.trainer-profile-cv:hover{opacity:.85;color:#fff;text-decoration:none}

/* Pagination */
.pagination{gap:4px}
.pagination .page-item .page-link{border-radius:8px!important;border:1px solid #e8e8e8;color:#555;padding:6px 14px;font-size:.9rem;transition:background .2s,color .2s}
.pagination .page-item.active .page-link{background:var(--default-color);border-color:var(--default-color);color:#fff}
.pagination .page-item:not(.active) .page-link:hover{background:color-mix(in srgb,var(--default-color) 10%,white);border-color:var(--default-color);color:var(--default-color)}
.pagination .page-item.disabled .page-link{color:#ccc;background:#f9f9f9;border-color:#eee}

/* Full-width category badge (trainer page) */
.course-card-category-badge.d-block{max-width:100%;border-radius:8px;padding:5px 12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* Prevent CLS from carousel/section init */
.feat-slider,.trainers-slider{min-height:300px}
.owl-carousel .owl-stage-outer{min-height:200px}


/* ============================================================
   Course Card — shared across home, /courses, /cat_courses
   ============================================================ */

/* Wrapper */
.course-card { border-radius: 12px; overflow: hidden; display: flex; flex-direction: column; height: 100%; }

/* Image */
.card-img-wrap { display: block; width: 100%; line-height: 0; font-size: 0; }
.card-img { width: 100%; height: 220px; display: block; object-fit: cover; }

/* Body */
.course-card-body { padding: 16px; display: flex; flex-direction: column; flex: 1; }

/* Trainer + badge row */
.course-card-meta { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 10px; flex-wrap: nowrap; overflow: hidden; }
.course-card-trainer { display: flex; align-items: center; gap: 8px; min-width: 0; overflow: hidden; flex: 1; }
.course-card-trainer img { flex-shrink: 0; }
.course-card-trainer-name { font-size: 12px; color: #555; text-decoration: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.course-card-trainer-name:hover { color: var(--default-color); }

/* Category badge (inline next to trainer) */
.course-card-category-badge { font-size: 11px; font-weight: 600; color: var(--default-color); background: color-mix(in srgb, var(--default-color) 12%, white); padding: 4px 10px; border-radius: 12px; flex-shrink: 0; max-width: 120px; display: inline-block; line-height: 1.4; text-align: center; }

/* Category block (standalone line, used in some layouts) */
.course-card-category { display: inline-block; font-size: 11px; font-weight: 600; color: var(--default-color); background: color-mix(in srgb, var(--default-color) 12%, white); padding: 4px 10px; border-radius: 20px; margin-bottom: 8px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }

/* Title */
.course-card-title { font-size: 0.95rem; font-weight: 700; color: #1a1a2e; line-height: 1.6; margin: 0 0 12px; text-align: right; }
.course-card-title:hover { color: var(--default-color); }

/* Lecture sub-title (opened_lectures only) */
.course-card-lecture-title { font-size: 0.85rem; color: var(--default-color); text-align: right; margin: 0 0 10px; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; height: 2.6em; }

/* Footer row: duration / date / lectures / price */
.course-card-footer { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 6px; border-top: 1px solid #f0f0f0; padding-top: 10px; margin-top: auto; }
.course-card-meta-item { font-size: 12px; color: #888; display: flex; align-items: center; gap: 4px; }
.course-card-price { font-size: 1rem; font-weight: 700; color: var(--default-color); }

/* View-more button */
.course-more-btn { display: inline-flex; align-items: center; gap: 8px; padding: 10px 24px; border-radius: 25px; background: var(--default-color); color: #fff; font-size: 0.9rem; font-weight: 600; text-decoration: none; transition: opacity .2s; }
.course-more-btn:hover { opacity: .85; color: #fff; text-decoration: none; }

/* ---- Responsive ---- */
/* Tablet: 2 columns */
@media (max-width: 991px) {
    .card-img { height: 180px; }
}
/* Mobile: 1 column, footer wraps */
@media (max-width: 575px) {
    .card-img { height: 200px; }
    .course-card-footer { gap: 8px; }
    .course-card-price { font-size: 0.95rem; }
}

/* ── Pagination ─────────────────────────────── */
.pagination {
    justify-content: center;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: 20px;
}
.pagination .page-item .page-link {
    border-radius: 8px !important;
    border: 1px solid #e0e6ef;
    color: var(--default-color);
    padding: 6px 14px;
    font-size: 13px;
    font-weight: 600;
    background: #fff;
    transition: all .15s;
    min-width: 38px;
    text-align: center;
}
.pagination .page-item .page-link:hover {
    background: var(--default-color);
    color: #fff;
    border-color: var(--default-color);
}
.pagination .page-item.active .page-link {
    background: var(--default-color);
    border-color: var(--default-color);
    color: #fff;
    box-shadow: 0 3px 10px rgba(0,0,0,.15);
}
.pagination .page-item.disabled .page-link {
    color: #b0b8c8;
    background: #f5f7fa;
    border-color: #e8ecf2;
}