/*   Define colors   */
:root {--indigo:#3f51b5; --indig:#3f51b5; --tbl1:#eee; --tbl2:#fff; --shin:#88F;  --zerd:#CA0;  --sewz:#3C3;  --firz:#0AA;  --sour:#F44;  --resh:#000;  --sipi:#fff; --shad:#444;
  --bg:#fff;  --fg:#333;  --tarik:#212;  --roon:#DDC;  --hash:rgba(128,128,128,0.5);}
*:focus {outline:none;}
.shin{color:var(--shin)}
.zerd{color:var(--zerd)}
.sewz{color:var(--sewz)}
.firz{color:var(--firz)}
.sour{color:var(--sour)}
.tarik{color:var(--tarik)}
.roon{color:var(--roon)}
.indig{color:var(--indig)}
/* General Styling & Shared Classes */
html, body {direction:rtl;background:var(--bg);color:var(--fg);user-select:none}
a {color: var(--fg);text-decoration: none;transition: 0.3s;}
a:hover {color: color-mix(in srgb, var(--fg), transparent 25%);text-decoration: none;}
h1,h2,h3,h4,h5,h6 {color: var(--fg);}
/* Scrollbar */
::-webkit-scrollbar {width:8px;}
::-webkit-scrollbar-track {background:none;border:none;border-radius:10px;box-shadow:inset 0 0 4px #3f51b5;}
::-webkit-scrollbar-thumb {background:#bbd;border-radius:10px;box-shadow:inset 0 0 2px #000;}
::-webkit-scrollbar-thumb:hover {background:#bbf;}
/*Global Header
--------------------------------------------------------------*/
.header {position:absolute;left:0;top:0;color:var(--fg);padding:5px 0;transition:all 0.5s;z-index:1997;}
@media (max-width: 1200px) { .head0 {display:block} .head1 {display:none} }
.ites {width:0px !important;overflow:hidden}
/*Navigation Menu
--------------------------------------------------------------*/
/* Desktop Navigation */
@media (min-width: 1200px) { .head0 {display:block} .head1 {display:none} }
/*Global Footer
--------------------------------------------------------------*/
.footer {color:var(--sipi);background-color:var(--indigo);font-size: 14px; padding: 40px 0; position: relative;}
.footer .copyright p { margin-bottom: 0;}
.footer .social-links { margin-top: 20px;}
.footer .social-links a{display:flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:50%;border:1px solid color-mix(in srgb,var(--fg),transparent 50%);font-size:16px;color:color-mix(in srgb,var(--fg),transparent 50%);margin:0 5px;transition:.3s}
.footer .social-links a:hover { color: var(--fg);  border-color: var(--fg);}
.footer .credits { margin-top: 10px; font-size: 13px; text-align: center;}
.footer-info a, .footer-info img {background:var(--bg);}
.footer-info i {color:var(--shin)}
.ft-col {border:1px dashed var(--shin);outline:1px dashed var(--shin);outline-offset:-6px;border-radius:8px;margin:3px 10px;padding:10px 25px;height:100%;box-shadow:0 0 10px #335;;}
.ft-col h6 {text-align:center !important;border-bottom:1px dashed var(--shin);}
/*Scroll Top Button
--------------------------------------------------------------*/
.totop {position:relative;right:15px;bottom:10px; background-color:var(--indigo);border:1px solid var(--sipi);width: 44px;  height: 44px;  border-radius: 50px;  transition: all 0.4s;}
.totop i {font-size: 24px;color: var(--sipi);line-height: 0;}
.totop:hover {background-color:var(--shin);}
/*Global Page Titles & Breadcrumbs
--------------------------------------------------------------*/
.page-title{color:var(--fg);background-color:var(--bg);padding:25px 0;position:relative;border-bottom:1px solid color-mix(in srgb,var(--fg),transparent 85%)}
.page-title h1 { font-size: 24px; font-weight: 400;}
.page-title .breadcrumbs ol{display:flex;flex-wrap:wrap;list-style:none;padding:0;margin:0;font-size:14px;font-weight:400}
.page-title .breadcrumbs ol li+li { padding-left: 10px;}
.page-title .breadcrumbs ol li+li::before { content: "/"; display: inline-block; padding-right: 10px; color: color-mix(in srgb, var(--fg), transparent 70%);}
/*Global Sections
--------------------------------------------------------------*/
section, .section { color: var(--fg); background-color: var(--bg); padding: 60px 0; scroll-margin-top: 100px; overflow: clip;}
@media (max-width: 1199px) { section, .section { scroll-margin-top: 66px; } }
/*Global Section Titles
--------------------------------------------------------------*/
.section-title {text-align: center; padding-bottom: 60px; position: relative;}
.section-title h2 { font-size: 32px; font-weight: 700; margin-bottom: 20px; padding-bottom: 20px; position: relative;}
.section-title h2:after{content:"";position:absolute;display:block;width:50px;height:3px;background:var(--fg);left:0;right:0;bottom:0;margin:auto}
.section-title p { margin-bottom: 0;}
/*Hero Section
--------------------------------------------------------------*/
.hero {width:100%;height:100vh;position:relative;padding:0;display:flex;align-items: center;justify-content: center;}
.hero .container {position: relative;z-index: 3;}
.hero h2 {margin: 0; font-size: 48px; font-weight: 700;}
.hero p { margin: 10px 0 0 0; font-size: 24px; color: var(--fg);}
.hero .btn-get-started { color:var(--fg); background: var(--bg); font-weight:600; font-size:12px;display:inline-block; padding: 12px 40px; border-radius: 50px; transition: 0.5s; margin-top: 30px;}
.hero .btn-get-started:hover {  background: color-mix(in srgb, var(--fg) 90%, var(--roon)white 20%);}
/*About Section
--------------------------------------------------------------*/
.about .content h2 {font-weight: 700;font-size: 24px;}
.about .content ul {list-style: none;padding: 0;}
.about .content ul li {margin-bottom: 20px;display: flex;align-items: center;}
.about .content ul strong {margin-right: 10px;}
.about .content ul i {font-size: 16px;margin-right: 5px;color: var(--fg);line-height: 0;}
/*--------------------------- NEW --------------------------*/
.banner {position:absolute;width:100%;height:100%;background:none;text-align:center;}
.title-desk {position:relative;margin:12vh auto;max-width:50%;max-height:50%}
.title-mob {bottom:30px;margin:10px auto;max-height:70%;max-width:70%;display:none}
.subtitle {text-align:center;width:48%;margin-top:30px !important}
.banner-a {position:relative;width:100%;height:300px !important;left:0;top:0;padding:0;margin:0;background-color:none;text-align:center;box-shadow:0 15px 15px #f3f3f3}
.title-a {position:relative;text-align:center;width:200px;}
.subtitle-a {text-align:center;width:300px;margin-top:20px !important}
.ite {border-radius:10px;padding-top:8px !important;margin:0;font-size:21px;font-weight:400;color:var(--indigo);background:none}
.ite:hover {transform:scale(1.06);transition: all 0.2s;}
#langu i {font-size:24px;color:#777}
.langu {font-size:24px;background:none;border:none}
.ttip {border:none}
.ttip span {position:absolute;display:none;z-index:10;margin:0px -40px 0 0;line-height:10px;font-size:10px;background:#f5f9ff;border:1px solid #abf;border-radius:20px;color:#3f51b5;padding:3px 8px}
.bk {padding-top:8px !important;width:40px !important;margin:0;font-size:21px;font-weight:400;color:#3F51B5;background:none;border:none}
.bk:hover {color:#ffd700;transition: all 0.8s;}
.homes {float:right !important;padding:5px 10px}
.bts {border:1px solid #fff;border-radius:10px;padding:3px;margin:0 3px;font-size:20px;font-weight:600;color:#3f51b5;background:none}
.bts:hover {border:1px solid #3f51b5;color:#fff;background:var(--indigo);transition: all 0.8s;}
.sbtn {font-size:30px;cursor:pointer;padding-left:15px;display:block;}
.snav {height:100px;width:0;position:fixed;z-index:1;top:0;left:40px;background-color:none;overflow:hidden;transition:0.1s;padding:5px 55px 55px 0;display:flex}
.snav a {border-radius:10px;width:40px !important;margin:0 5px;font-size:16px;font-weight:400;color:#3f51b5;background:#fff;z-index:2000}
.snav a:hover {color:#fff;background:var(--indigo);transition: all 0.8s;}
.dropdown, .dropdown-content {display:none}
@media screen and (orientation:portrait) {
  .hero, .banner {height:50vh}
  .title-desk {display:none}
  .title-mob {display:block}
}

@media screen and (max-width: 720px) {
.sbtn, .snav {display:none}
.dropdown, .dropdown-content {display:block}
.ite {border:none;padding:5px 15px 5px 5px;width:auto;margin:5px;font-size:12px;background:none;display:flex;flex-direction:row}
.ite i {color:#fff;padding:10px 10px 0 0}
.ite img {display:none;}
.homes .ttip span {display:none;}
.ttip span {all:unset;position:relative;display:block;margin:0 20px 0 0;font-size:14px;border:none;background:none;color:#ddd;padding:0;width:100%;white-space: nowrap }
.ttip span:hover {color:#fff;}
#langu i {font-size:18px;}
.langu {font-size:18px;}
}


/*  Mobile menu   */
.dropdown {position:fixed;outline:none;top:0;left:0;font-size:32px;direction:ltr !important;z-index:900;text-align:left}
.dropbtn {display:none;}
.dropdown .dropdown-content {width:280px;max-height:calc(100vh - 40px) !important;overflow-y:auto;overflow-x:hidden;position:absolute;top:50%;left:0;visibility:hidden;opacity:0;z-index:100000;background:#eee;min-width:120%;;padding:25px 10px;font-size:16px;box-shadow:0px 8px 16px rgba(0, 0, 0, 0.8);transition:0.35s ease-out;}
.dropdown-content hr {padding:0;margin:0}
.dropdown-content .mi i {float:left;margin:10px}
.dropdown-content .mi {display:block;color:#000;padding:4px 0;text-decoration:none;position:relative}
.dropdown-content .mi::before {content:'';position:absolute;top:0;right:0;bottom:0;left:0;opacity:0;z-index:-1;transition:0.4s ease-out;box-shadow:0 4px 8px 0 rgba(0,0,0,1);}
.dropdown-content .mi:hover::before {opacity:1;}
.dropdown:focus .dropdown-content {outline:none;visibility:visible;opacity:1;transform: translateY(20px);}
.dropdown .db2 {position: absolute;top:0;right:0;bottom:0;left:0;opacity:0;cursor:pointer;z-index:10;display:none;}
.dropdown:focus .db2 {display:inline-block;}
.dropdown .db2:focus .dropdown-content, .dropdown-content .db3:focus .dropdown-content {outline:none;visibility:hidden;opacity:0;}
.dropbtn::before{position:absolute;top:0;right:0;bottom:0;left:0;z-index:-1;background:radial-gradient(circle at 0 0,#fff 0,#d59bf0 5%,#8b1dc0 35%,transparent 60%);background-repeat:no-repeat;background-color:#eee;transition:.35s ease-out}
.dropbtn.c::before{background:radial-gradient(circle at 50% -1px,#fff 0,#cfe1e9 5%,#5f71d5 35%,transparent 60%);background-repeat:no-repeat;background-color:#eee}
.dropdown:focus .dropbtn.c::before,.dropdown:focus .dropbtn.r::before,.dropdown:focus .dropbtn::before{background-color:#eee}
.dropdown:focus  {z-index:1;}
.dropdown:focus .dropbtn  {background:none;}
.dropbtn::after {display: inline-block;width:20px;font-size:25px;content: "\2630";}
.dropdown:focus .dropbtn::after {content: "\2AF4";}
@media screen and (max-width: 720px) { .dropbtn {display:block;padding-left:15px;cursor:pointer;transition:0.35s ease-out;height:63px;color:#333;font-size:30px;} }

.row-flex {display:flex;flex-wrap:wrap;}
h1 {font-weight:300;margin:-30px 0 20px 0;text-align:center;color:#f60}
.services {background:#f9f9ff;margin:5px auto;padding:10px;padding-bottom:4px;border-radius:15px;width:calc(100% - 50px);height:100%;box-Shadow:inset 0 0 0 0 #fff,  0 0 8px rgba(50,100,150,0.4);-webkit-transition:ease-out 0.4s;-moz-transition:ease-out 0.4s;transition:ease-out 0.4s;}
.services:hover {box-Shadow:inset 0 700px 0 0 #fff, 0 0 20px rgba(100,100,100,0.5)}
.services img {max-height:100%;max-width:100%;padding:0}
.services h4 {line-height:35px;}
.services p {clear:both;text-align:justify;}
.c1 {width:150px !important;overflow:hidden;text-align:left;}
.c2 {width:calc(100% - 150px) !important;text-align:center;}
[class*="col-"] {margin-bottom:40px;}
#ser-desk {display:block}
#ser-mob {display:none}
@media screen and (max-width: 720px) {
#ser-desk {display:none}
#ser-mob {display:block}
}

.slidecenter {background:#3F51B5;color:#fff;border:1px solid #3F51B5;border-radius:20px;padding:8px 20px;display:inline-block;cursor:pointer;box-Shadow:inset 0 0 0 30px #3f51b5;-webkit-transition:ease-out 0.4s;-moz-transition:ease-out 0.4s;transition:ease-out 0.4s;}
.slidecenter:hover {background:#fff;box-shadow:inset 0 0 0 0 #3F51B5;color:#3f51b5}

.hvr-shutter-out-horizontal{display:inline-block;vertical-align:middle;margin:0;-webkit-transform:translateZ(0);transform:translateZ(0);box-shadow:0 0 1px #fff0;-webkit-backface-visibility:hidden;backface-visibility:hidden;-moz-osx-font-smoothing:grayscale;position:relative;background:var(--indigo);color:#fff;padding:5px 20px;border:1px solid #3f51b5;border-radius:6px;-webkit-transition-property:color;transition-property:color;-webkit-transition-duration:0.3s;transition-duration:0.3s}
.hvr-shutter-out-horizontal:before{content:"";position:absolute;z-index:-1;top:0;bottom:0;left:0;right:0;border-radius:5px;background:#fff;-webkit-transform:scaleX(0);transform:scaleX(0);-webkit-transform-origin:50%;transform-origin:50%;-webkit-transition-property:transform;transition-property:transform;-webkit-transition-duration:0.3s;transition-duration:0.3s;-webkit-transition-timing-function:ease-out;transition-timing-function:ease-out}
.hvr-shutter-out-horizontal:hover,.hvr-shutter-out-horizontal:focus,.hvr-shutter-out-horizontal:active{color:#3f51b5;border:1px solid #3f51b5}
.hvr-shutter-out-horizontal:hover:before,.hvr-shutter-out-horizontal:focus:before,.hvr-shutter-out-horizontal:active:before{-webkit-transform:scaleX(1);transform:scaleX(1)}

.logo-a {position:absolute;top:40px;left:50%;-ms-transform: translate(-50%, 0);transform: translate(-50%, 0);}
/* Glow text */
@property --k {syntax: "<number>";initial-value: 0;inherits: false;}
svg[height="0"] {position: absolute;}
.glow-text {  /* no pseudo needed */
--k: 0;place-self:center;background:linear-gradient(90deg, hsl(calc(var(--k)*1turn), 95%, 65%), hsl(calc(var(--k)*1turn + 90deg), 95%, 65%));
-webkit-background-clip:text;background-clip:text;color:transparent;font-weight:800;
filter: url(#f);text-align:center;animation: k 4s linear infinite;position:absolute;
top:220px;left:50%;-ms-transform:translate(-50%, 0);transform: translate(-50%, 0);width:90%;line-height: 1.5 !important;}
@keyframes k { to { --k: 1 ; } }

/*Neon*/
.glow-white {text-align:center;font-size:7em;margin-bottom:0;margin-top:0;line-height:1;text-decoration:none;color:#3f51b5;}
.glow-white:nth-child(1) {animation:neon1 0.5s ease-in-out infinite alternate;}
@keyframes neon1 {
from {text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #fff, 0 0 40px #ff1177,
0 0 70px #def, 0 0 80px #def, 0 0 100px #def, 0 0 150px #def;}
to {text-shadow: 0 0 5px #def, 0 0 10px #def, 0 0 15px #def, 0 0 20px #def,
0 0 35px #fff, 0 0 40px #fff, 0 0 50px #fff, 0 0 75px #fff;}
}
/*----------------- wane-app -----------------*/
.wane-app{width: 80%;margin: auto;text-align: center;padding-top: 100px;}
.wane-app-col{flex-basis: 31%;border-radius: 10px;margin-bottom: 5%;text-align: right;}
.wane-app-col img{width: 100%;border-radius: 10px;}
.wane-app-col p{padding: 0;}
.wane-app-col h3{margin-top: 16px;margin-bottom: 15px;text-align: right;}
/**/
.about-us{width:80%;margin:auto;padding-top:80px;padding-bottom:50px;}
.about-col{flex-basis:48%;padding:30px 2px;}
.about-col img{width:100%;}
.about-col h1{padding-top:0;}
.about-col p{padding:15px 0 25px;}
.about-col i{color:#3f51b5;}
/**/
.faq{background:#f1f1f1;width: 80%;margin: auto;text-align: center;padding-top: 100px;}
.faq-col{flex-basis: 31%;border-radius: 10px;margin-bottom: 5%;text-align: right;}
.faq-col img{width: 100%;border-radius: 10px;}
.faq-col p{padding: 0;}
.faq-col h3{margin-top: 16px;margin-bottom: 15px;text-align: right;}
.faq-container {max-width:100%;margin:0 auto;border:1px solid #3F51B5;border-radius:4px;}
.faq-question {background-color: #3F51B5;color:#fff;padding:10px;width:100%;text-align:justify;border:none;cursor:pointer;font-size:18px;}
.faq-answer {padding:0 10px;background-color:#f1f1f1; height:0;overflow:hidden;transition:height 0.3s ease-out;}
.faq-answer p {margin:0;text-align:right;justify-content:space-between;white-space:wrap;}
/*--------------------------------------------------------------
# Contact
--------------------------------------------------------------*/
.contact .info-box {color:#444444;text-align:center;box-shadow:0 0 20px rgba(214, 215, 216, 0.5);margin:10px;padding:20px 0 0 0;}
.contact .info-box i {  font-size: 32px;  color: #3F51B5;  border-radius: 50%;  padding: 8px;}
.contact .info-box h3 {  font-size: 20px;  color: #777777;  font-weight: 700;  margin: 10px 0;}
.contact .info-box p { padding: 0;  line-height: 24px;  font-size: 14px;  margin-bottom: 0;}
.contact .php-email-form {  box-shadow: 0 0 20px rgba(214, 215, 216, 0.5);  padding: 30px;}
.contact .php-email-form .error-message {  display: none;  color: #fff;  background: #ed3c0d;  text-align: left;  padding: 15px;  font-weight: 600;}
.contact .php-email-form .error-message br+br { margin-top: 25px;}
.contact .php-email-form .sent-message {  display: none;  color: #fff;  background: #18d26e;  text-align: center;  padding: 15px;  font-weight: 600;}
.contact .php-email-form .loading {display: none;  background: #fff;  text-align: center;  padding: 15px;}
.contact .php-email-form .loading:before { content: "";  display: inline-block;  border-radius: 50%;  width: 24px;  height: 24px;  margin: 0 10px -6px 0;  border: 3px solid #18d26e;  border-top-color: #eee;  animation: animate-loading 1s linear infinite;}
.contact .php-email-form input, .contact .php-email-form textarea {  border-radius: 4px;  box-shadow: none;  font-size: 14px;}
.contact .php-email-form input:focus, .contact .php-email-form textarea:focus {  border-color: #3F51B5;}
.contact .php-email-form input {  padding: 10px 15px;}
.contact .php-email-form textarea { padding: 12px 15px;}
.contact .php-email-form button[type=submit] {background: #3F51B5;  border: 0;  padding: 10px 30px;  color: #fff;  transition: 0.4s;  border-radius: 4px;}
.contact .php-email-form button[type=submit]:hover {background:#65c9cd;}
/**/
.contact-us{ width: 80%;  margin: auto;}
.contact-col{ flex-basis: 48%;  margin-bottom: 30px;}
.contact-col a {text-decoration:none}
.contact-col div{  align-items: center;  margin-bottom: 40px;}
.contact-col div .fa{  font-size: 28px;  color: #3f51b5;  margin: 10px;  margin-right: 30px;}
.contact-col div p {padding: 0;}
.contact-col div h5{font-size: 20px;  margin-bottom: 5px;  color: #555;  font-weight: 400;}
.contact-col input, .contact-col textarea{  width: 100%;  padding: 15px;  margin-bottom: 17px;  outline: none;  border: 1px solid #ccc;  box-sizing: border-box;}
/* Captch */
.main {width:100%;;font-size:14px;direction:rtl;}
.capt {border:1px solid #ddd;border-radius:5px;padding:5px;overflow:hidden}
.capt label {color:#666}
.cap-title {color:#3f51b5;font-weight:800}
input[type='range']{fg:#3f51b5;}
datalist {display:flex;flex-direction:column;justify-content:space-between;writing-mode:vertical-lr;width:100%;font-size:10px;padding:0 0;margin:-10px 0 0 0}
option {padding:0;margin:0;text-align:left}
input[type="range"] {width:100%;padding:0;margin:0;direction:ltr}
#capt-range {width:100%;height:20px;margin-bottom:0;padding:10px;text-align:center;color:#3f51b5 !important;border:none}
.refr {cursor:pointer;color:#3f51b5;transition:all 0.8s}
.refr:hover {transform:rotate(180deg)}
.targetLayer {width:100%;text-align:center;}
.targetLayer img {margin-bottom:10px;}
.targetLayer p {background:#090;width:100%;margin-bottom:10px;padding:3px 10px;color:#fff}
.targetLayer div {background:#900;width:100%;margin-bottom:10px;padding:3px 10px;color:#fff}
#loading {position:fixed;display:none;z-index:1000000;top:calc(50% - 100px);left:calc(50% - 32px);}
#invalid {background:#900;width:100%;margin-bottom:10px;padding:3px 10px;color:#fff;display:none}
#success {background:#090;width:100%;margin-bottom:10px;padding:3px 10px;color:#fff;display:none}
/**/
.class1-item {padding-right:15px;transition:all 0.5s;line-height:30px}
.class1-item:hover {padding-right:25px;color:#f60}
.class1-item i {color:#f60;}
/**/
.class2-item {padding-right:15px;transition:all 0.5s;line-height:30px}
.class2-item:hover {padding-right:25px;color:#906}
.class2-item i {color:#f5a;}
/**/
.class3-item {padding-right:15px;transition:all 0.5s;line-height:30px}
.class3-item:hover {padding-right:25px;color:#074}
.class3-item i {color:#0a6;}
/**/
.class4-item {padding-right:15px;transition:all 0.5s;line-height:30px}
.class4-item:hover {padding-right:25px;color:#06d}
.class4-item i {color:#29f;}
/**/
.bg5 {left:0;right:0;margin:0 auto;color:#ffd700;font-weight:600;line-height:40px;max-width:500px;border-radius:8px;padding:15px 25px;background-image:url(../img/bg/5.webp);background-position:center;background-size:cover;}
/**/
.box {max-width:400px;height:100%;padding:10px;border-radius:8px;left:0;right:0;margin:5px auto}
.box-blue {background-color:#9ED9EB;box-shadow:0 8px 5px rgba(0,0,0,0.25), 0 15px 15px rgba(63,81,181,0.6), 0 20px 80px rgba(63,81,181,0.3) inset;}
.box-gold {background-color:#EFBF04;box-shadow:0 8px 5px rgba(0,0,0,0.25), 0 15px 15px rgba(133,106,0,0.6), 0 20px 80px rgba(133,106,0,0.3) inset;}
.box-content {height:100%;border-radius:5px;padding:10px;border:2px dashed rgba(255,255,255,0.3);color:#fff;}
.box h3 {text-align:center;margin-top:10px;}
.box h5 {text-align:justify;color:#fff;line-height:150%;}

.rules i {color:#ffd52f;padding:5px;;transition:all 0.5s}
.rules p {color:#333;text-align:justify;;transition:all 1s}
.rules p:hover {color:#3f51b5;transform:rotate(-1deg);transition:all 0.2s}

.h-border {color:#3f51b5;border-top:2px dotted #ddd;border-bottom:2px double #ddd;padding:10px 0 0 0;left:0;right:0;margin:15px auto;width:fit-content}

.blog-slider{width:95%;position:relative;max-width:800px;margin:auto;background:#fff;box-shadow:0 3px 15px rgb(56 180 252 / .2);padding:25px;border-radius:25px;height:400px;transition:all 0.3s}
@media screen and (max-width:992px){.blog-slider{max-width:680px;height:400px}}
@media screen and (max-width:768px){.blog-slider{min-height:500px;height:auto;margin:180px auto}}
@media screen and (max-height:500px) and (min-width:992px){.blog-slider{height:350px}}
.blog-slider__item{display:flex;align-items:center}
@media screen and (max-width:768px){.blog-slider__item{flex-direction:column}}
.blog-slider__item.swiper-slide-active .blog-slider__img img{opacity:1;transition-delay:0.3s}
.blog-slider__item.swiper-slide-active .blog-slider__content>*{opacity:1;transform:none}
.blog-slider__item.swiper-slide-active .blog-slider__content>*:nth-child(1){transition-delay:0.3s}
.blog-slider__item.swiper-slide-active .blog-slider__content>*:nth-child(2){transition-delay:0.4s}
.blog-slider__item.swiper-slide-active .blog-slider__content>*:nth-child(3){transition-delay:0.5s}
.blog-slider__item.swiper-slide-active .blog-slider__content>*:nth-child(4){transition-delay:0.6s}
.blog-slider__item.swiper-slide-active .blog-slider__content>*:nth-child(5){transition-delay:0.7s}
.blog-slider__item.swiper-slide-active .blog-slider__content>*:nth-child(6){transition-delay:0.8s}
.blog-slider__item.swiper-slide-active .blog-slider__content>*:nth-child(7){transition-delay:0.9s}
.blog-slider__item.swiper-slide-active .blog-slider__content>*:nth-child(8){transition-delay:1s}
.blog-slider__item.swiper-slide-active .blog-slider__content>*:nth-child(9){transition-delay:1.1s}
.blog-slider__item.swiper-slide-active .blog-slider__content>*:nth-child(10){transition-delay:1.2s}
.blog-slider__item.swiper-slide-active .blog-slider__content>*:nth-child(11){transition-delay:1.3s}
.blog-slider__item.swiper-slide-active .blog-slider__content>*:nth-child(12){transition-delay:1.4s}
.blog-slider__item.swiper-slide-active .blog-slider__content>*:nth-child(13){transition-delay:1.5s}
.blog-slider__item.swiper-slide-active .blog-slider__content>*:nth-child(14){transition-delay:1.6s}
.blog-slider__item.swiper-slide-active .blog-slider__content>*:nth-child(15){transition-delay:1.7s}
.blog-slider__img{width:300px;flex-shrink:0;height:300px;background:#fff;box-shadow:0 3px 15px rgb(56 180 252 / .2);border-radius:20px;transform:translateX(-80px);overflow:hidden}
.blog-slider__img:after{content:"";position:absolute;top:0;left:0;width:100%;height:100%;}
.blog-slider__img img{width:100%;height:100%;object-fit:cover;display:block;opacity:0;border-radius:20px;transition:all 0.3s}
@media screen and (max-width:768px){.blog-slider__img{transform:translateY(-50%);width:90%}}
@media screen and (max-width:576px){.blog-slider__img{width:95%}}
@media screen and (max-height:500px) and (min-width:992px){.blog-slider__img{height:270px}}
.blog-slider__content{padding-right:55px}
@media screen and (max-width:768px){.blog-slider__content{margin-top:-80px;text-align:center;padding:0 30px}}
@media screen and (max-width:576px){.blog-slider__content{padding:0}}
.blog-slider__content>*{opacity:0;transform:translateY(25px);transition:all 0.4s}
.blog-slider__code{color:#7b7992;margin-bottom:15px;display:block;font-weight:500}
.blog-slider__title{font-size:24px;font-weight:700;color:#0d0925;margin-bottom:20px}
.blog-slider__text{color:#4e4a67;margin-bottom:30px;line-height:1.5em}
.blog-slider .swiper-container-horizontal>.swiper-pagination-bullets,.blog-slider .swiper-pagination-custom,.blog-slider .swiper-pagination-fraction{bottom:10px;left:0;width:100%}
.blog-slider__pagination{position:absolute;z-index:21;right:20px;width:11px!important;text-align:center;left:auto!important;top:50%;bottom:auto!important;transform:translateY(-50%)}
@media screen and (max-width:768px){.blog-slider__pagination{transform:translateX(-50%);left:50%!important;top:205px;width:100%!important;display:flex;justify-content:center;align-items:center}}
.blog-slider__pagination.swiper-pagination-bullets .swiper-pagination-bullet{margin:8px 0}
@media screen and (max-width:768px){.blog-slider__pagination.swiper-pagination-bullets .swiper-pagination-bullet{margin:0 5px}}
.blog-slider__pagination .swiper-pagination-bullet{width:11px;height:11px;display:block;border-radius:10px;background:#159;opacity:.2;transition:all 0.3s}
.blog-slider__pagination .swiper-pagination-bullet-active{opacity:1;background:#09d;height:30px;box-shadow:0 0 14px rgb(56 56 252 / .3)}
@media screen and (max-width:768px){.blog-slider__pagination .swiper-pagination-bullet-active{height:11px;width:30px}}


/* --------  Flip Cards  ----------*/
.scard{position:relative;width:calc(100% - 8px);height:300px;margin:0 4px;text-align:center;color:#ecf0f1;border-radius:.8rem;transform-style:preserve-3d;perspective:1000px}
.face{display:block;position:absolute;top:0;left:0;width:100%;height:100%;border-radius:.8rem;background-size:cover;background-position:center center;-webkit-backface-visibility:hidden;backface-visibility:hidden;}
.face--front{background:#f9f9f9;border:1px solid #ddd;padding:20px;display:flex;flex-direction:column;align-items:center;justify-content:center;transition:transform 0.5s ease-in-out}
.face--back{background:#fefeff;border:1px solid #def;padding:20px;display:flex;flex-direction:column;align-items:center;justify-content:center;transform:rotateX(180deg);transition:transform 0.5s ease-in-out}
.scard:hover .face--front{transform:rotateX(-180deg)}
.scard:hover .face--back{color:#333;transform:rotateX(0deg)}
.face--front h5 {font-weight:800;color:#666;}
.face--front p {color:#048}
.face--back h5 {font-weight:800;color:#333;line-height:50px;}
.face--back p {color:#333;text-align:center}
.cyanf {background:#dfe;border:1px solid #8dc} .cyanb {background:#2ba;border:1px solid #075}
.goldf {background:#fea;border:1px solid #dcb} .goldb {background:#da2;border:1px solid #960}
.pinkf {background:#fdf;border:1px solid #dbd} .pinkb {background:#959;border:1px solid #606}
.bluef {background:#bdf;border:1px solid #7bd} .blueb {background:#09d;border:1px solid #06a}
.prevent-select {-webkit-user-select:none;-ms-user-select: none;user-select: none;}

/* Dict */
.found0 {font-size:16px;padding:10px;text-align:right;}
.found0 label, .akk-item table label {padding:2px 4px 0 10px;margin:1px 0 1px 8px;background:#999;color:#fff;border-radius:20px 0 0 20px}
.firstimg {cursor:pointer;max-width:100%;max-height:100%;}
.imgafter {z-index:1000;position:fixed;left:0;right:0;top:0;margin:auto;max-height:100vh;max-width:100%;object-fit:contain;}
.blured{pointer-events:none;-khtml-filter:blur(1px);-moz-filter:blur(1px);-o-filter:blur(1px);filter:blur(1px);-webkit-filter:blur(1px);}
.related {background:var(--indigo);color:#fff;width:200px;padding:5px 10px;margin:3px 0;direction:ltr;text-align:center;font-size:14px;border-radius:50px 0 0 0}
#akkordeon {width:100%;margin:0 auto;}
#akkordeon h2 {font-size:14px;font-weight:bold;text-align:right;}
#akkordeon .title {width:fit-content;margin:2px 0;padding:2px 5px 2px 15px;cursor:pointer;-webkit-transition: all .2s ease-in-out;-moz-transition: all .2s ease-in-out;-o-transition: all .2s ease-in-out;-ms-transition: all .2s ease-in-out;transition: all .2s ease-in-out;text-align:right}
.closed:before {float:right;padding:0 3px;color:#666;content:"▼";}
.open:before {float:right;padding:0 3px;color:#099;content:"▲";}
#akkordeon .content {display:none;text-align:right;width:100%;background:none;padding-right:5px}
table {width:100%;border:none !important;background:none}
table tr, table td {border:none;background:none;}
#akkordeon .open {font-size:140%;}

.login-btn {background:none;border:none;cursor:pointer;font-size:20px;padding:0 10px 0 0;;line-height:60px;}
.theme-toggle {background:none;border:none;cursor:pointer;font-size:20px;padding:0 15px 0 0;line-height:60px;}
.lang-toggle {background:none;border:none;cursor:pointer;font-size:20px;padding:0 10px 0 0;line-height:60px;}
.lang-toggle i, .login-btn i, .theme-toggle i {color:var(--indigo)}
.lang-toggle:hover, .theme-toggle:hover, .login-btn:hover {transform:scale(1.06);transition: all 0.2s;}
#lngdrp {position:relative;display:inline-block;}
#lngdrpContent {display:none;position:absolute;background-color:#ddd;border:1px solid #bbb;text-align:center;margin:-15px 15px 0 0;width:80px;padding:8px 0 ;box-shadow:0px 3px 5px 0px rgba(0,0,0,0.2);z-index:1;}
#lngdrpContent span {color: black;padding:0 6px 5px;margin:0;text-decoration:none;display:block;cursor:pointer;font-size:12px;}
#lngdrpContent span:hover {background-color:#fff;}
/*    Costum Table    */
.tbl {display:table;width:100%;table-layout:fixed;overflow-x:scroll;border-radius:8px;text-align: center;}
.tblRow {display:table-row;}
.tblCell {display:table-cell;vertical-align:middle;text-wrap:nowrap;}

/* tuition */
.allas {width:310px;height:440px;padding:0;margin:5px;}
.ham {width:100%;height:400px;padding:0;overflow:hidden;background:#eee;border:1px solid #3f51b5;border-bottom:none;border-radius:8px 8px 0 0}
.ham h4 {color:#333}
.bab {width:100%;height:400px;padding:0;opacity:1;transition:all 0.5s}
.kur {padding:5px;text-align:center;}
.img {height:200px}
.kur p {color:#888;}
.kur span {color:#4a0;}  
.sharawe {width:100%;background:#3f51b5;color:#fff;text-align:center;vertical-align:middle;padding:10px;height:400px;transition:all 0.5s}
.sharawe td {padding:10px;}
.slidecenter1 {color:#fff;width:100%;margin-top:-5px;border:1px solid #3F51B5;border-radius:0 0 8px 8px ;padding:8px 20px;display:inline-block;cursor:pointer;box-Shadow:inset 0 0 0 30px #3f51b5;-webkit-transition:ease-out 0.4s;-moz-transition:ease-out 0.4s;transition:ease-out 0.4s;}
.slidecenter1:hover {box-shadow:inset 0 0 0 0 #ffffff;background: #eee;color:#3f51b5}

/* e-learning */
.e-learning{width:85%;margin:auto;padding-top:80px;padding-bottom:50px;}

/* General Container Styling */
.card-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 20px; /* Consistent spacing between cards */
  padding: 0; /* Remove unnecessary padding */
  max-width: 85%; /* Adjust based on your design */
  margin: 0 auto 20px auto; /* Add consistent bottom margin between containers */
}



.card-item {
  flex: 1 1 calc(50% - 20px); /* Two cards per row with consistent spacing */
  min-width: 270px; /* Minimum width for cards */
  margin: 0; /* Ensure no extra margins */
}

@media (max-width: 768px) {
  .card-item {
    flex: 1 1 100%; /* One card per row on smaller screens */
  }
}

/* Card Styling */
.card {
  background: white;
  border-radius: 10px;
  box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.1);
  overflow: hidden;
  transition: transform 0.4s ease-in-out, box-shadow 0.4s ease-in-out;
  padding: 0; /* Ensure no extra padding */
  margin: 0; /* Ensure no extra margins */
}

.card:hover {
  transform: scale(1.05);
  box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.2);
}

/* Card Image */
.card-image img {
  width: 100%;
  height: auto;
  object-fit: cover;
  transition: transform 0.4s ease-in-out;
}

.card:hover .card-image img {
  transform: scale(1.05);
}

/* Card Header */
.card-header {
  padding: 15px;
  background: none;
  border: none;
  transition: none;
}

.card-title {
  font-size: 24px;
  font-weight: 600;
  color: #202020;
  margin: 0;
  background: none;
  border: none;
  transition: none;
}

.card-subtitle {
  font-size: 18px;
  font-weight: 500;
  color: #3f51b5;
  margin: 5px 0 0;
}

/* Hidden Content */
.card-content.hidden {
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition: max-height 0.4s ease-in-out, opacity 0.4s ease-in-out;
}

.card:hover .card-content.hidden {
  max-height: 700px; /* Adjust based on content */
  opacity: 1;
}

/* Card Text */
.card-text {
  padding: 15px;
  text-align: justify;
}

/* Card Action Button */
.card-action {
  text-align: center;
  padding: 10px;
}

.btn-card {
  display: inline-block;
  padding: 10px 20px;
  background: #3f51b5;
  color: white;
  text-decoration: none;
  border-radius: 5px;
  transition: background 0.3s ease-in-out;
}

.btn-card:hover {
  background: #283593;
  color: white;
}

.image-cell img {width:70%;height:auto;display:block;margin:0 auto}