/* ========================= 1) Fonts ========================= */
@font-face { font-family: dana; font-style: normal; font-weight: bold; src: url('../fonts/DanaFaNum-Bold.woff2') format('woff2'), url('../fonts/DanaFaNum-Bold.woff') format('woff'); }
@font-face { font-family: dana; font-style: normal; font-weight: normal; src: url('../fonts/DanaFaNum-Regular.woff2') format('woff2'), url('../fonts/DanaFaNum-Regular.woff') format('woff'); }

/* ========================= 2) Base & Utilities ========================= */
a { text-decoration: none; }
body { font-family: dana; padding: 0; margin: 0; font-size: 14px;}
.rtl { direction: rtl; }
.ltr { direction: ltr; }
.f-10 { font-size: 10px; }
.f-12 { font-size: 12px; }
.f-14 { font-size: 14px; }
.box-shadow{box-shadow: 0 0 30px 0 rgba(0, 0, 0, 0.10);}
hr {border-top: 1px solid #a5a5a5;}
.radius-custom{border-radius: 16px;}
.wh-btn {border: 1px solid #ffffff5c;background-color: #ffffff2b;width: fit-content;padding: 12px;color: #fff;border-radius: 10px;font-size: 16px;}
.gng-text{color: #F25E1A;}
a,
a:focus,
a:active,
button:focus,
button:active {outline: none !important;box-shadow: none !important;}

/* ========================= 3) Section Backgrounds ========================= */
.section-1.home-slider { margin-top: -130px;}
.section-2 { background-color: #DEEDFF; }
.section-3 { background-image: url(../img/back-sec3.svg); background-repeat: no-repeat; background-size: cover; }
.section-5 { background: #e2481a; padding-top: 20px;}
.section-6 { background: rgba(38, 132, 252, 0.16); }
.section-7 { background-color: #fff; }
.section-8 { background-image: url(../img/slider-3.jpg); background-repeat: no-repeat; background-size: cover; }

/* ========================= 4) Course Box (cards) ========================= */
.cource-box { background-color: #fff; border-radius: 20px; box-shadow: 0 0 40px 0 rgba(0, 0, 0, 0.16); }
.cource-box-img img { width: 100%; border-radius: 20px 20px 0px 0px; }
.cource-box-title .float-end { background-color: #fef1ea; font-size: 13px; color: #f25e1a; padding: 6px; border-radius: 9px; }
.cource-box-cat { width: 100%; display: flex; }
.cource-box-pros { margin-top: 20px; margin-bottom: 15px; }
.progres-count { float: left; color:#F25E1A; margin-top: -20px; }
.progres-ui { background-color: #FEF1EA; height: 8px; border-radius: 10px; }
.progres-ui div { background-color: #F25E1A; height: 8px; border-radius: 25px; }
.sec8-box {display: flex;justify-content: space-evenly;align-items: center;min-height: 240px;border: 1px solid #ffffff42;background-color: #ffffff12; border-radius: 20px;}

/* ========================= 5) Repeated Course Box (variant) ========================= */
.rep-cource-box .s6-cource-box-img img { border-radius: 12px 12px 0 0; }
.rep-cource-box { border-radius: 12px; }
.badg-tag { border-radius: 100px; padding: 5px; font-size: 12px; width: fit-content; }
.badg-tag.gng { background: rgba(242, 94, 26, 0.10); }
.cource-box-link { border-radius: 8px; background: #2684FC; width: 100%; display: block; color: #fff; padding: 10px; text-align: center; }

/* ========================= 6) Color Tiles (left palette) ========================= */
.colors-box { border-radius: 24px; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; padding: 20px; color: #fff; margin: 10px; height: 150px; }
.colors-box.gng { background: #F25E1A; width: 53%; }
.colors-box.hr { background: linear-gradient(139deg, #6973D1 22.73%, #595EC2 86.47%); width: 40%; }
.colors-box.digi { background: linear-gradient(139deg, #70C7B1 22.73%, #1EA5FD 86.47%); width: 40%; }
.colors-box.uniconnect { background: linear-gradient(305deg, #0B6F38 20.96%, #7FBB3D 101.77%); width: 53%; }
.colors-box.tous { background: linear-gradient(316deg, #0152F0 6.94%, #207DFA 85.98%); width: 63%; }
.colors-box.other { background: linear-gradient(289deg, #F15019 9.02%, #F11940 88.13%); width: 30%; }
.swap-btn.gng.active { box-shadow: 0 1px 50px 0 rgba(242, 94, 26, 0.60); }
.swap-btn.hr.active { box-shadow: 0 1px 50px 0 #595EC2; }
.swap-btn.digi.active { box-shadow: 0 1px 50px 0 rgba(242, 94, 26, 0.60); }
.swap-btn.uniconnect.active { box-shadow: 0 1px 50px 0 rgba(242, 94, 26, 0.60); }
.swap-btn.tous.active { box-shadow: 0 1px 50px 0 rgba(242, 94, 26, 0.60); }
.swap-btn.other.active { box-shadow: 0 1px 50px 0 rgba(242, 94, 26, 0.60); }

/* ========================= 7) Tabs (inside color box) & Section-6 tabs shell ========================= */
#colors-box-content-myTab { border: 1px solid #42A1FD; border-radius: 50px; }
.color-box-tab { width: 100%; }
.color-box-tab ul#myTab { border-radius: 100px; background-color: #fff; border: 1px solid #42A1FD; display: flex; justify-content: space-between; }
.color-box-tab .nav-item { width: 50%; }
.color-box-tab .nav-item button { width: 100%; border: 0; background-color: #2b89fc21; border-radius: 100px;}
.section-6 .nav { border-radius: 100px; border: 1px solid #2A87FC; background: linear-gradient(90deg, rgba(0, 82, 240, 0.10) 0%, rgba(38, 132, 252, 0.10) 100%); }
.section-6 li.nav-item { width: 50%; }
.section-6 li.nav-item button { width: 100%; text-align: center; }
.nav-tabs .nav-link.active, .nav-tabs .nav-item.show .nav-link { width: 100%; border-radius: 100px; background: linear-gradient(90deg, #2684FC 0%, #4EADFE 100%); border: 1px solid #4EADFE; color: #fff; }

/* ========================= 8) Custom Scroll (colors & shape) ========================= */
.custom-scroll { direction: ltr; --scroll-thumb: #0d6efd; --scroll-track: #f1f1f1; }
.custom-scroll::-webkit-scrollbar { width: 10px; }
.custom-scroll::-webkit-scrollbar-track { background: var(--scroll-track); }
.custom-scroll::-webkit-scrollbar-thumb { background-color: var(--scroll-thumb); border-radius: 10px; border: 2px solid var(--scroll-track); }
.custom-scroll::-webkit-scrollbar-thumb:hover { background-color: #084298; }
.custom-scroll { scrollbar-width: thin; scrollbar-color: var(--scroll-thumb) var(--scroll-track); }
.custom-scroll .row { border-radius: 16px; border-right: 2px solid #2684FC; background: rgba(255, 255, 255, 0.30); box-shadow: 0 4px 40px 0 rgba(28, 39, 77, 0.08); margin-bottom: 10px; height: 50px; display: flex; align-items: center; }

/* ========================= 9) Slider (hero) ========================= */
.slider { position: relative; width: 100%;}
.slidehome { position: absolute; inset: 0; opacity: 0; transition: opacity .6s ease; display: flex; align-items: center; background-size: cover; background-position: center; height: 580px; padding-top:5%;}
.slidehome.active { opacity: 1; position: relative; }
.slide-1 { background-image: url('../img/slider-1.jpg'); }
.slide-2 { background-image: url('../img/slider-3.jpg'); }
.slide-3 { background-image: url('../img/slider-2.jpg'); }
.grid-2col { grid-template-columns: 2fr 1fr; height: 100%; }
.lottie-box { width: 100%; max-width: 350px; aspect-ratio: 1/1; margin-inline: auto; }
.slider .content h3 { margin: 0 0 .5rem; }
.slider .content p { margin: 0 0 1rem; color: #fff; }
.slider .btn { border: 0; border-radius: 999px; padding: .6rem 1.2rem; background: #0d6efd; color: #fff; box-shadow: 0 6px 18px rgba(13,110,253,.25); cursor: pointer; }
.slider .btn.outline { background: transparent; color: #fff; border: 1px solid #fff; box-shadow: none; }
.slider .btn.secondary { background: #6c757d; }
.slider .controls { position: absolute; inset-block-end: 12px; inset-inline-end: 12px; display: flex; gap: 8px; }
.slider .controls button { border: 0; border-radius: 999px; padding: .4rem .9rem; background: #fff; cursor: pointer; box-shadow: 0 4px 14px rgba(0,0,0,.08); }
.slider .dots { position: absolute; inset-block-end: 14px; inset-inline-start: 14px; display: flex; gap: 6px; }
.slider .dot { width: 8px; height: 8px; border-radius: 50%; background: #dee2e6; }
.slider .dot.active { background: #0d6efd; }


/*========================== Comment Box =============================*/
.comment-row{background-color:#F4F9FF;}
.comment-box-custom{box-shadow:10px 10px 30px rgba(117,117,117,0.15);}
.text-primary-custom{color:#1C274C;font-size:14px;font-family:Dana,sans-serif;}
.text-muted-custom{color:#757575;font-size:13px;font-family:Dana,sans-serif;}
.user-name-custom{color:#1C274C;font-size:12px;font-family:Dana,sans-serif;font-weight:500;}
.comment-input-box-custom{height:140px;}
.placeholder-custom{color:#B3B3B3;font-size:12px;font-family:Dana,sans-serif;font-weight:300;}
.icon-btn-custom{width:18px;height:18px;font-size:12px;border:1px solid #BDBDBD;border-radius:50%;text-align:center;line-height:18px;cursor:pointer;}
.emoji-custom{font-size:16px;}
.btn-send-custom{background:linear-gradient(317deg,#2684FC 0%,#66BBFA 100%);border-radius:100px;color:#fff;font-size:14px;font-family:Dana,sans-serif;padding:4px 10px;}
.btn-send-custom:hover{opacity:0.9;}

/* ========================= 10) Colored Cards (category blocks) ========================= */
.cart-item-color a {color: #FFF;display: flex;align-items: center;margin-top: 7px;}
.cart-item-color a:before {content: '';display: inline-flex;margin-left: 10px;background-image: url(../img/arrow-w.svg);width: 17px;height: 16px;}
.cart-item-color { border-radius: 24px; }
.cart-item-color-tolid { background: linear-gradient(153deg, #2FE876 -1.99%, #189F4B 100%); height: 360px; }
.cart-item-color-lojestik { background: linear-gradient(0deg, #F15416 0%, #F15416 100%); height: 300px; }
.cart-item-color-maali { background: linear-gradient(150deg, #F6B500 -2.33%, #E67300 86.64%); height: 280px; }
.cart-item-color-fooroosh { background-color: #2684FC; height: 390px; }
.cart-item-color-ensani { background: linear-gradient(153deg, #6470FF -1.99%, #847CDD 100%); height: 360px; }
.cart-item-color-other { background: linear-gradient(159deg, #F15019 8.42%, #F1322E 46.13%, #F1193F 76.52%); height: 290px; }

/* ========================= 11) Masonry ========================= */
.masonry { column-count: 3; column-gap: 1rem; }
.masonry-item { display: inline-block; width: 100%; margin: 0 0 1rem; break-inside: avoid; }

/* ========================= 12) List View Switch ========================= */
.cardsContainer.list-view > div {flex: 0 0 100%;max-width: 100%;}

/* ========================= 13) Extra Card Style (gskm) ========================= */
.gskm-section-2 .card { border-radius: 12px; box-shadow: 0 0 30px 0 rgba(0, 0, 0, 0.10); border: 0; border-right: 3px solid #F25E1A; }
.gskm-btn{border-radius: 100px; background: linear-gradient(307deg, #2684FC 11.86%, #66BBFA 94.08%);}
.gskm-pic-user{background-color: #2684FC26; border-radius: 100px; padding: 6px;}

.tree { font-family: inherit; }
.toggle { all: unset; cursor: pointer; display: block; width: 100%; }
.children { display: none; }
.node.open > .children { display: block; }
.leaf { display: block; text-decoration: none; }
.node { margin: .25rem 0; font-size: 14px;}
.node[data-level="2"] { margin-inline-start: 1rem;  border: 1px solid #2684fc45; border-radius: 10px; width: -webkit-fill-available; margin: 12px; margin-top: 0;}
.node[data-level="3"] { margin-inline-start:10px; margin-top: 10px; margin-bottom: 10px;}
.node[data-level="4"] { margin-inline-start: 3rem; }
button.toggle.lvl-1 {border-radius: 24px; background: #F4F9FF; padding: 8px; width: -webkit-fill-available; margin: 10px; color: #2684FC; padding-right: 20px; font-weight: 700; }
.node.open button.toggle.lvl-1 { border-radius: 24px; background: linear-gradient(92deg, #65BBFA 0%, #328EFC 100%); padding: 8px; width: -webkit-fill-available; margin: 10px; color: #fff; padding-right: 20px;}
.node.lvl-2 > button { background-color: #2684fc1a; padding: 8px; width: -webkit-fill-available; border-radius: 10px 10px 0 0; color: #2684FC; font-weight: 500;}
a.leaf.lvl-4 {border-bottom: 1px solid #4b556324; margin: 3px 13px; color: #000; line-height: 30px; }
.node .lvl-3 button.toggle {display: flex; justify-content: space-between; width: 95%; font-weight: 500;}
.gsck-inside .top-row{}
.gskm-inside .top-row-col-1{border-radius: 24px; background: linear-gradient(156deg, #4EADFE 6.99%, #595EC2 94.65%);}
.gskm-inside .top-row-col-2{border-radius: 24px; background: linear-gradient(156deg, #FED425 6.99%, #FFAC04 94.65%);}
.gskm-inside .top-row-col-3{border-radius: 24px; background: linear-gradient(156deg, #F87D48 6.99%, #F14923 94.65%);}
.gskm-inside-back-1{background-image: url(../img/inside-back.jpg);}
.pic-text { background-color: #ffffff29; border-radius: 100px; padding: 7px;}
.inside-content-row2-leftside{border-radius: 24px; background: linear-gradient(156deg, #4EADFE 6.99%, #595EC2 94.65%); height: 100%; margin: 0 10px 0px -10px;}
.inside-content-row2-leftside hr { border-top: 1px solid #ffffff;}
.gskm-header{background:linear-gradient( 283deg, #551878 0%, #140F2A 100%);}
.user-back-repeater img{width:100%; border-radius: 110px;}
.user-back-repeater{background-image:url(../img/user-back-repeater.png);padding:30px;background-size:contain;background-position:center center;background-repeat:no-repeat;text-align:center;position:relative;top:-60px;left:60px;}
.user-back-repeater-point{background-color:#ffffff17;text-align:center;width:170px;height:170px;display:flex;flex-direction:column;justify-content:center;align-items:center;border-radius:120px;color:#fff;font-size:20px;}
.user-back-repeater-point-star{width:110%;font-size:16px;border-radius:13px;display:flex;align-items:flex-start;justify-content:space-evenly;padding-right:7px;}
.gskm-list, .gskm-children { list-style:none; padding:0; margin:0; }
.gskm-item {
    padding: 5px 10px;
    border-bottom: 1px solid #eee;
    margin: 5px 5px;
/*
    background-color: #2684fc12;
    border: 1px solid #2684fc4a;
*/    
    border-radius: 6px;
}
button.gskm-toggle {
    background: linear-gradient(92deg, #65BBFA 0%, #328EFC 100%);
    color: #fff;
    border: 0;
    width: 22px;
    height: 20px;
    padding-top: 5px;
}
li.gskm-item.activity .gskm-row {
    margin-right: -30px;
}
.gskm-row { display:flex; align-items:center; gap:8px; }
.gskm-toggle {background:#f7f7f7; border:1px solid #ddd; width:24px; height:24px; border-radius:6px;display:flex; align-items:center; justify-content:center; cursor:pointer; padding:0;}
.gskm-icon {}
.gskm-name { font-weight:600; color:#222; text-decoration:none; font-size:13px;}
.gskm-link { margin-inline-start:auto; font-size:11px; text-decoration:none; display:none;}
.gskm-children { margin-top:6px;  border-right:2px dashed #eee; display:none; }
.gskm-item.activity .gskm-name { font-weight:400; color:#000; }
.gskm-item.activity { padding:4px 8px; }

/* ========================= 14) Course Tabs (bottom section) ========================= */
.nav.nav-tabs.cours-links { background: linear-gradient(90deg, rgba(0, 82, 240, 0.10) 0%, rgba(38, 132, 252, 0.10) 100%); border-radius: 100px; border: 0; }
.cart-row .nav-item { width: 50%; }
.cart-row .nav-link { width: 100%; color: #fff; }
.cart-row .nav-link:hover { border: 0; }
.cart-row .nav-link.active { background: linear-gradient(90deg, #2684FC 0%, #4EADFE 100%); }
footer { background-image: url(../img/footer.jpg); background-repeat: no-repeat; background-size: cover; }

/* =================================== Other =======================================*/
body.has-secondarynavigation #page, body.has-secondarynavigation #page.drawers{margin-top: 0;}
a { color: rgb(0 0 0);}
.top-row-menu {display: block; width: 80%; margin: 0 auto; border-radius: 70px; margin-top: 30px;}
nav.navbar.fixed-top { position: relative; border-radius: 83px; padding: 0px 20px;}
.top-row-menu .secondary-navigation.moove { width: 100%; max-width: 100% !important; border-radius: 70px; position: relative; top: 0; background-color: #1b13654f; filter: none;}
.secondary-navigation .moremenu, .moremenu{opacity:1;}
.secondary-navigation .moremenu{height: 30px;}
.secondary-navigation .moremenu .nav-tabs .nav-link{height: 30px; font-size: 13px;}
.top-row-menu .btn{background:transparent; box-shadow: none;}
.list-group-item { border: 1px solid #dfdfdf; padding: 12px; font-size: 14px; }
.input-group .btn { position: relative; z-index: 2; padding: 5px 10px; font-size: 13px;}
.simplesearchform input { border-radius: 0 30px 30px 0px !important; border: 1px solid #dcdcdc; font-size: 11px;}
#page, #page.drawers{margin-top: 0;}
.drawer.drawer-left{z-index: 999999;height: 100vh; top: 0;}
.drawer.drawer-left.show {z-index: 999999;height: 100vh;top: 0; right: 0; visibility: visible; box-shadow: -10px 0px 50px #00000012;}
.page-context-header { display: flex; align-items: center;}
ol.breadcrumb { margin: 0;}
#page-header { margin: 0 auto; padding: 0; font-size: 13px;}
.activity-navigation .larrow .icon-arrow-left { background: transparent url(/theme/image.php/moove/theme/1755499938/right-arrow) no-repeat 50% 50%; }
.activity-navigation .rarrow .icon-arrow-right { background: transparent url(/theme/image.php/moove/theme/1755499938/left-arrow) no-repeat 50% 50%;}
#page-header , #page.drawers .main-inner{ width: 80%;}
.nav-tabs .dropdown-menu{font-size: 13px;}
.drawer.drawer-right.show{top: 0 !important; z-index: 999999; box-shadow: 20px 0px 60px #00000021; height: 100vh;}
.comment-ctrl{display:block !important;}
.comment-list{display: flex;}
.comment-list li {background-color: #ffffff;border-radius: 10px;box-shadow: 15px 15px 40px #00000014;width: 33.3%;padding: 17px;margin: 2%;}
.mdl-left {width: 100%;background-color: #F4F9FF;padding: 30px;}
.comment-delete {margin: 10px;background-color: #f4433645;width: 25px;height: 25px;padding: 6px;border-radius: 35px;font-size: 11px;}
.comment-area textarea {width: 100%;overflow: auto;background-color: #ffffff;border: 0;border-radius: 7px;padding: 17px;box-shadow: 15px 15px 40px #00000014;margin: 10px 0px;}
.comment-message span.time {width: 100%;display: block;}
.comment-message span.user {font-size: 13px;font-weight: 600;}
.comment-box-title {margin-top: 40px;padding-right: 20px;line-height: 6px;}
.comment-message .text {margin: 0;padding: 0;background-color: transparent;padding: 7px;border-radius: 6px;margin-top: 5px;font-size: 14px;}
.comment-area .fd a {background-color: #8BC34A;color: white;font-weight: normal;padding: 3px 15px;border-radius: 6px;background: linear-gradient(307deg, #2684FC 11.86%, #66BBFA 94.08%);border-radius: 50px;font-size: 15px;}
#page-header h1.h2 { font-weight: 700;font-size: 18px;}
#page-mod-data-edit .basefieldinput { width: 100%;}
#page-mod-data-edit .inline-req .text-danger{ font-size: 6px;}
.tox.tox-tinymce{height: 300px !important;}
#defaulttemplate-addentry label.form-label.fw-semibold + div { display: block !important;}
#page-mod-data-edit .inline-req {position: absolute;top: 0;left: 0;}
#defaulttemplate-addentry label.form-label.fw-semibold + div .custom-select{width:100% !important;}
.list-item-view-data{border-radius: 12px;box-shadow: 10px 10px 30px 0 rgba(0, 0, 0, 0.10);border: 0;border-right: 3px solid #F25E1A;padding: 12px 20px 0;margin-bottom: 30px;}
#page-mod-data-view .datapreferences label {display: inline-block;font-size: 14px;}
.custom-select {font-size: 12px;border: 1px solid #d1d1d1;border-radius: 6px;}
.row.top-row * {color: #000000;}
.post-actions a {font-size: 13px;text-decoration: none; color: #000; background-color: #00000014; padding: 3px 12px;margin: 3px;}
.forumpost {
    border-radius: 20px;
    box-shadow: 10px 10px 30px #00000012;
    background-color: #fff;
    margin-top: 20px;
}

/* ========================= 15) Responsive (media queries) ========================= */
@media (max-width: 992px) { .masonry { column-count: 2; } }
@media (max-width: 576px) { .masonry { column-count: 1; } }
@media (max-width: 768px) { 
.grid-2col { grid-template-columns: 1fr; text-align: center; } 
.lottie-box { max-width: 300px; }
}
@media (max-width: 1366px) {
#page-header, #page.drawers .main-inner{width:95%; max-width: 95% !important;}
}