:root{
  --primary:#393A56;
  --secondary:#FAFAFA;
  --third:#DF1F5A;
--grey:#D7D7D7;
--muted-primary:#5B5C81;
  
}
a {color: inherit; text-decoration: none;}
body{
  background:var(--secondary);
  font-family: "Cairo", sans-serif;
    font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

section {margin-top: 80px; margin-bottom: 80px;}
/* ===== Top Header ===== */
.top-header{
  background:var(--secondary);
  color:#fff;
  padding:10px 0;
}



.social-icons {
  color:#767676;
  background: #F3F3F3;
  margin-left:8px;
  font-size:18px;
 width:40px;
 height: 40px;
  border-radius: 50%;
  transition:.3s;
    display: flex;
justify-content: center ;
align-items:center
 
}

.social-icons:hover{
  color:#ddd;
  background-color: var(--primary);
}

.profile-btn{
  background:var(--third);
  color:var(--secondary);
  border-radius:20px;
  padding:10px 30px;
  font-size:14px;
  font-weight:500;
  border:none;
    transition:.5s;

}
.profile-btn:hover {
    background:var(--primary);
  color:var(--secondary);

}

/* تسجيل الخروج: مرئي على خلفية الهيدر الفاتحة */
.profile-btn.is-logout{
  background:transparent;
  color:var(--third);
  border:2px solid var(--third);
}
.profile-btn.is-logout:hover{
  background:var(--third);
  color:var(--secondary);
}
/* ===== Navbar ===== */
.navbar{
  background:var(--primary);
}

.navbar .nav-link{
  color:#fff;
  font-weight:500;
  padding:10px 18px !important;
   border-radius: 10px;

}

.navbar .nav-link:hover{
  color:#ddd;
  background-color: var(--third);
  border-radius: 10px;
}

.navbar-nav{
  margin:auto; 
}

.dropdown-menu{
  background:var(--primary);
  border:none;
  text-align:right;
  border-radius:12px;
}

.dropdown-item{
  color:#fff;
  border-radius:8px;
}

.dropdown-item:hover{
  background:rgba(255,255,255,.1);
}

.submenu{
  background:rgba(255,255,255,.05);
  border-radius:10px;
  padding:8px;
  margin-top:6px;
}

/* Offcanvas */
.offcanvas{
  background:var(--primary);
  color:#fff;
}

.offcanvas .nav-link{
  color:#fff;
  border-bottom: dotted #e4e6eb thin;
}
.offcanvas .nav-link:hover {
 color: var(--third);
}
.offcanvas .nav-item:hover  {background: var(--third);}

/*slider*/
/* ===== Hero Slider ===== */
.hero-slider{
  position:relative;
  height:95vh;
  overflow:hidden;
}

/* Image */
.swiper-slide{
  position:relative;
}

.swiper-slide img{
  width:100%;
  height:95vh;
  object-fit:cover;
}

/* Gradient Overlay */
.slide-overlay{
  position:absolute;
  inset:0;
  background:linear-gradient(to left,
    rgba(0,0,0,0.75),
    rgba(0,0,0,0.45),
    rgba(0,0,0,0.2));
  z-index:1;
}

/* Content */
.slide-content{
  position:absolute;
  top:50%;
  right:20%;
  transform:translateY(-50%);
    z-index:2;
  color:#fff;
  width:60%;
  text-align: center;

}

.slide-content h1{
  font-size:48px;
  font-weight:700;
  margin-bottom:20px;
  opacity:0;
  transform:translateY(40px);
  transition:all .8s ease;
}

.slide-content p{
  font-size:20px;
  margin-bottom:25px;
  opacity:0;
  transform:translateY(40px);
  transition:all .9s ease;
}

.slide-content .btn{
  border-radius:40px;
  padding:12px 30px;
  font-weight:500;
  margin-left:10px;
  opacity:0;
  transform:translateY(40px);
  transition:all 1s ease;
}

.btn-main{
  background:var(--primary);
  border:none;
}

/* Active animation */
.swiper-slide-active h1,
.swiper-slide-active p,
.swiper-slide-active .btn{
  opacity:1;
  transform:translateY(0);
}


.swiper-pagination-bullet{
  width:10px;
  height:10px;
  background:var(--grey);
  opacity:1;
  border-radius:50%;
  transition:all 0.3s ease;
  margin:0 6px !important;
}

.swiper-pagination-bullet:hover{
  background:var(--muted-primary);
}

.swiper-pagination-bullet-active{
  width:26px;
  height:10px;
  border-radius:20px;
  background:var(--third);
  box-shadow:0 0 8px rgba(223,31,90,0.4);
}

.swiper-pagination-bullet-active{
  width:20px;
  background:var(--primary);
  box-shadow:none;
}
/* Wave bottom */
.wave{
  position:absolute;
  bottom:0;
  left:0;
  width: 100%;
  height: auto;
  
  z-index:5;
}
.wave2{
  position:absolute;
  top:0;
  width: 100%;
  height: auto;
   transform: rotate(180deg);
  z-index:1;
}
/* Arrows */
.swiper-button-next,
.swiper-button-prev{
  color:#fff;
}



/*intro*/
.h-about-pic { position: relative; width: 100%; }
.h-about-pic1 { width:380px ; height: 380px; border-radius: 50%; background-color: var(--primary);  position: absolute; top: 10px; }
.h-about-pic1 img { width:370px ; height: 370px; border-radius: 50%;}
.h-about-pic2 { width:250px ; height: 250px; border-radius: 50%; position: absolute; top: 100%; left: 0; }
.h-about-pic2 img {border-radius: 50%; border: solid 10px var(--secondary); }
.h-about-pic .decor  { background-image: url("../images/decor.png"); width: 87px; height: 51px; position: absolute; bottom: 0; left: 0;}

.intro .container { max-width: 1000px;}
.intro-serv-b { background-color: var(--primary); color: var(--secondary); border-radius: 30px; padding: 10px 20px ; margin-bottom: 5px;}
.intro-serv-b.exc{background-color: var(--third);}

.h-about .icon {
    background-color: var(--primary); width: 55px; height: 55px; border-radius: 50%; margin-left: 10px;
    
}
.h-about li { border-bottom:dashed var(--grey) thin ; padding-bottom: 5px; margin-bottom: 5px;}



/* Section Title */





/*ماذا يقدم ican*/
.section-ican {
  position: relative;
  background: url('../images/forWho-bg.png') center/cover no-repeat;
  padding: 80px 0;
  color: var(--secondary);
}

.section-ican::before {
  content:"";
  position:absolute;
  inset:0;
  background: rgba(57,58,86,0.85); /* primary overlay */
  z-index:1;
}

.section-ican .container {
  position: relative;
  z-index:2;
}

.section-ican h2 {
  text-align:center;
  margin-bottom:50px;
  font-size:36px;
  font-weight:700;
}

/* ===== Items ===== */
.ican-items {
  display:flex;
  justify-content: space-between;
  flex-wrap:wrap;
  position: relative;
}

.ican-item {
 width: 300px;
  border-radius:20px;
  padding:30px 20px;
  text-align:center;
  transition: all 0.4s ease;
  cursor:pointer;
  min-width:250px;
}

.ican-item:hover {
  background: var(--hover-bg);
  border-color: var(--primary);
}

/* Icon wrapper */
.ican-icon {
  width:220px;
  height:220px;
  border: 2px solid var(--secondary);
  border-radius:50%;
  margin:0 auto 20px;
  transition: all 0.4s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

.ican-item .ican-icon:hover {
  border-color: var(--primary);
  background: var(--primary);
}

/* Title and text */
.ican-item h4 {
  font-size:20px;
  margin-bottom:10px;
  font-weight:600;
}

.ican-item p {
  font-size:14px;
  line-height:1.5;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}


/* Responsive */
@media(max-width:991px){
  .ican-items {
    flex-direction: column;
    align-items: center;
  }
  .ican-item {
    width:80%;
  }
  .ican-arrow-left { left:5px; }
  .ican-arrow-right { right:5px; }
}

/* Divider image */
.ican-divider {
  display:flex;
  align-items:center;
  justify-content:center;
  padding:0 10px;
}

.ican-divider img {
  max-width:174px; 
  height:auto;
  transition: transform 0.3s ease;
}

.ican-divider img:hover {
  transform: scale(1.1);
}


/* ===== Swiper ===== */
.swiper{
  padding-bottom:60px;
}

.swiper-slide{
  width:350px; 
  transition:.4s ease;
}


/* Card */
.testimonial-card{
  background:#fff;
  border-radius:20px;
  padding: 8px;
  box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
  height:100%;
  display:flex;
  flex-direction:column;

 
}

.testimonial-card img{
  width:100%;
  height:300px;
    border-radius:16px;
  object-fit:cover;
}

.card-body{
  padding:20px;
  flex-grow:1;
  display:flex;
  flex-direction:column;
}

.card-body h4{
  color:var(--primary);
  margin-bottom:10px;
}

.card-body p{
 overflow: hidden;
 text-overflow: ellipsis;
 display: -webkit-box;
 -webkit-line-clamp: 3;
 -webkit-box-orient:vertical;
  color:#555;
  margin-bottom:24px;
}

.read-btn{
  margin-top:auto;
  background:var(--primary);
  color:#fff;
  border:none;
  padding:8px 20px;
  border-radius:30px;
  margin-bottom: -40px;

 
}
.read-btn:hover{
  background: var(--third);
}

/* Arrows */
.swiper-button-next,
.swiper-button-prev{
  color:var(--primary);
}


  .testimonial-swiper .swiper-button-next-testimonial,
        .testimonial-swiper .swiper-button-prev-testimonial {
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            width: 45px;
            height: 45px;
            background: var(--primary);
            color: white;
            border-radius: 50%;
            cursor: pointer;
            z-index: 10;
            display: flex;
            align-items: center;
            justify-content: center;
            box-shadow: 0 3px 10px rgba(0,0,0,0.2);
        }
        
        .testimonial-swiper .swiper-button-next-testimonial {
            left: 10px;
        }
        
        .testimonial-swiper .swiper-button-prev-testimonial {
            right: 10px;
        }
        
        .testimonial-swiper .swiper-button-next-testimonial:after,
        .testimonial-swiper .swiper-button-prev-testimonial:after {
            font-family: 'swiper-icons';
            font-size: 18px;
        }
        
        .testimonial-swiper .swiper-button-next-testimonial:after {
            content: 'next';
        }
        
        .testimonial-swiper .swiper-button-prev-testimonial:after {
            content: 'prev';
        }
        
        .testimonial-swiper .swiper-button-next-testimonial:after {
            content: 'prev';
        }
        
        .testimonial-swiper .swiper-button-prev-testimonial:after {
            content: 'next';
        }
        
        @media (max-width: 768px) {
            .slide-content {
                max-width: 90%;
            }
            
            .slide-content h1 {
                font-size: 1.4rem;
            }
            
            .slide-content p {
                font-size: 1rem;
            }
            
            .section-title {
                font-size: 1.4rem;
            }
        }



/*HONOR ican*/
.honor-ican {
  position: relative;
  background: url('../images/honor-bg.png') center/cover no-repeat;
  padding: 80px 0;
  color: var(--secondary);
}

.honor-ican::before {
  content:"";
  position:absolute;
  inset:0;
  background: rgba(57,58,86,0.85); /* primary overlay */
  z-index:1;
}

.honors-content {z-index: 1; }
.honors-pic {background-color: var(--third); width: 330px; height: 330px; border-radius: 50%; margin: 0 auto; margin-bottom: 12px; position: relative;margin-top: -100px; z-index: 20;}
.honor-item {width: 100%; border: dashed 2px var(--secondary); border-radius: 20px; padding: 12px; font-weight: 600; font-size: 24px; margin-bottom: 5px;}
.honor-item .numb {margin-left: 12px; width: 60px ; height: 60px ; border-radius: 50%; background: var(--muted-primary); text-align: center; display: flex ; align-items: center; justify-content: center;}
/*adv ican*/

.adv {position: relative;}
.adv .container {max-width: 1000px;}
.adv h4 {font-weight:bolder; font-size: 50px;}
.adv h5 {font-weight: bold; font-size: 30px;}
.adv p { font-size: 20px;}
.adv h5 span {color: var(--third);}
.adv .decor { width: 60px; height: 60px; border-radius: 50%; position: absolute; background-color: var(--third); bottom: 50px; }
.adv-pic { width: 400px; height: 400px; border-radius:50% ; background-color: var(--primary);}
.adv-pic img {width: 380px; height: 380px; border-radius:50% ;}




.footer {background-color:var(--primary)  ; color: var(--grey); font-size: 12px; padding: 10PX;   }
.footer ul {list-style: none; display: flex; justify-content:left;  text-align: left;  margin: 0;} 
.footer li {padding-left: 5px;padding-right: 5px;}


.vision { background-color: var(--primary); color: var(--secondary); border-radius: 20px; padding: 20px; font-size: 13px; }
.mission{background-color: var(--third); color: var(--secondary);border-radius: 20px; padding: 20px; font-size: 13px;}
.target {}


.inside-about .about-card {
  border-radius: 20px;
  padding: 30px 25px;
  height: 100%;
  transition: 0.3s ease;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

.inside-about .about-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 15px 40px rgba(0,0,0,0.08);
}


.inside-about .icon {
  width: 100px;
  height: 100px;
  margin: 0 auto 20px;
  border-radius: 50%;
}
.inside-about .icon img{
  width: 100%;

}

.inside-about p {
  line-height: 1.8;
  margin: 0;
}

.color-white {color: var(--secondary);}

.stats-elegant {
  position: relative;
  background: url('../images/counter.png') center/cover no-repeat;
  padding: 80px 0;
  color: #FAFAFA;
}
.stats-elegant .container{max-width: 800px;}

.stats-elegant::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(57,58,86,0.94);
  z-index: 1;
}

.stats-elegant .container {
  position: relative;
  z-index: 2;
}

.stat-col {
  position: relative;
}

.stat-col:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 20%;
  bottom: 20%;
  left: 0;
  width: 1px;
  background: rgba(255,255,255,0.2);
}

@media(max-width:768px){
  .stat-col::after{
    display:none;
  }
}

.stat-box {
  padding: 20px;
  transition: 0.3s ease;
}

.stat-box:hover {
  transform: translateY(-10px);
}

.stat-icon {
  font-size: 32px;
  margin-bottom: 15px;
  opacity: 0.8;

}

.counter {
  font-size: 32px;
  font-weight: 700;
  margin: 0;
  letter-spacing: -2px;
}
.stat-icon {  border: dotted 2px var(--muted-primary);
    border-radius: 50%;
text-align: center;
  width: 100px;
  height: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto;
    margin-bottom: 10px;

}
.stat-box span {
  font-size: 15px;
  opacity: 0.8;
}


/*comunity*/
/* ===== HERO ===== */
.forum-cover{
  background:url("../images/comunity-bg.png") center/cover no-repeat;
  height:420px;
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  color:#fff;
}

.forum-cover::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(to bottom, rgba(0,0,0,.8), rgba(57,58,86,.7));
  border-bottom: var(--third) 5px solid;
}

.cover-inner{
  position:relative;
  z-index:2;
}

.cover-inner h1{
  font-size:42px;
  margin-bottom:20px;
}

/* البحث */
.search-wrapper{
  position:relative;
  width:800px;
  max-width:90%;
  margin:0 auto;
}

.search-wrapper input{
  width:100%;
  padding:12px 40px 12px 12px;
  border-radius:30px;
  border:none;
  outline:none;
  font-size:16px;
}

.search-wrapper .search-icon{
  position:absolute;
  right:12px; 
  top:50%;
  transform:translateY(-50%);
  font-size:18px;
  color:var(--muted-primary);
  pointer-events:none;
  
}

/* ===== STATS ===== */
.stats-area{
  justify-content:center;
  gap:60px;
  padding:30px 20px;
  background:#fff;
  display: flex;
}

.stat{
  text-align:right;
  position:relative;
    gap: 10px;


}

.stat:not(:last-child)::after{
  content:"";
  position:absolute;
  left:-30px;
  top:15px;
  height:30px;
  width:1px;
  background:var(--grey);
}

.stat p { margin-bottom: 0;  font-size:12px;}
.stat h2{
  font-size:32px;
  color:var(--primary);
  margin-bottom: 0;
  font-weight: bold;
}

/* ===== MAIN ===== */
.forum-layout{
  display:flex;
  gap:30px;
  padding:10px 8%;
}

.content-side{flex:3; border: 1px dotted #ddd; border-radius: 24px;}
.sidebar-side{flex:1; }

/* ===== FILTER ===== */
.tab-filter{
  margin-bottom:25px;
}

.tab-filter button{
  padding:10px 18px;
  border:none;
  border-radius:20px;
  margin-left:10px;
  background:var(--grey);
  cursor:pointer;
  transition:.3s;
}

.tab-filter button.active,
.tab-filter button:hover{
  background:var(--third);
  color:#fff;
}

/* ===== CARD ===== */
.post-card{
  background:#fff;
  border-radius:12px;
  padding:20px;
  margin-bottom:20px;
  display:flex;
  gap:20px;
  box-shadow:0 5px 20px rgba(0,0,0,.05);
  transition:.3s;
  opacity:0;
  transform:translateY(20px);
}

.post-card.show{
  opacity:1;
  transform:translateY(0);
}

.publisher-box{
  text-align:center;
  min-width:90px;
}

.publisher-box img{
  width:70px;
  height:70px;
  border-radius:50%;
}

.post-content h3{
  margin-top:0;
}

/* ===== SIDEBAR ===== */
.action-btn{
  width:100%;
  padding:16px;
  border:none;
  border-radius:10px;
  margin-bottom:15px;
  font-size:16px;
  cursor:pointer;
  transition:.3s;
}

.join-btn{background:var(--third);color:#fff; border-radius: 24px;}
.post-btn{background:var(--primary);color:#fff; border-radius: 24px;}

.action-btn:hover{
  transform:translateY(-3px);
  box-shadow:0 5px 15px rgba(0,0,0,.15);
}

.sidebar-widget{
  background:#fff;
  border: 1px solid #ddd;
  padding:18px;
  border-radius:12px;
  margin-bottom:20px;
  box-shadow:0 5px 20px rgba(0,0,0,.05);
}
.sidebar-widget ul {
  list-style: none;
  padding: 0;
  font-size: 13px;

}

.sidebar-widget ul.custom-list  li {margin-bottom: 8px; padding-bottom: 8px; border-bottom: 1px dotted #ddd ;
 position: relative;
    padding: 10px 25px 10px 10px;
    margin-bottom: 8px;
    border-radius: 8px;
    cursor: pointer;
    transition: background .3s;}
    ul.custom-list li:hover {
    background: #eaeaea;
}

/* سهم بسيط بدون اعتماد على خط Font Awesome داخل ::after (يظهر أحياناً مربعاً) */
ul.custom-list li::after {
    content: "";
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 6px 0 6px 9px;
    border-color: transparent transparent transparent var(--third);
}
/* ===== MODAL ===== */
.modal-overlay{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.6);
  display:flex;
  align-items:center;
  justify-content:center;
  opacity:0;
  visibility:hidden;
  transition:.3s;
}

.modal-overlay.active{
  opacity:1;
  visibility:visible;
}

.modal-box{
  background:#fff;
  width:400px;
  max-width:90%;
  border-radius:12px;
  transform:scale(.8);
  transition:.3s;
    padding: 60px;

}

.modal-overlay.active .modal-box{
  transform:scale(1);
}

.modal-box input,
.modal-box textarea{
  width:100%;
  padding:12px;
  margin-bottom:15px;
  border-radius: 20px;
  border:solid #D7D7D7 thin;
  text-align: right;
}

.close-modal{
  float:left;
  cursor:pointer;
  color:red;
}

/* ===== ANIMATIONS ===== */
@keyframes fadeDown{
  from{opacity:0;transform:translateY(-20px)}
  to{opacity:1;transform:translateY(0)}
}

/* ===== RESPONSIVE ===== */
@media(max-width:900px){
  .forum-layout{flex-direction:column}
  .stats-area{flex-direction:column;gap:30px}
  .stat::after{display:none}
}



.filter-buttons{
  margin-bottom:15px;
  text-align:right;
}

/* أغلب الخصائص من `button` العامة في نهاية الملف تفرض لوناً أبيض؛ هنا نفرض ألواناً واضحة للفلتر */
.forum-layout .filter-buttons button{
  border: solid 2px var(--third);
  border-bottom: solid 3px var(--third);
  background: #fff;
  color: var(--primary);
  padding:8px 24px;
  margin-left:10px;
  border-radius:24px;
  cursor:pointer;
  transition:.3s;
  font-weight: 600;
}

.forum-layout .filter-buttons button.active,
.forum-layout .filter-buttons button:hover{
  border: solid thin var(--third);
  background: var(--third);
  color: #fff;
}


#forumTable table{
  width:100%;
  border-collapse:collapse;
  border:1px solid #ddd; 
  border-radius:10px;
  overflow:hidden;
  border-bottom: solid thick var(--primary);
}
#forumTable  table h5 {font-weight: bold;}
#forumTable table p {font-size: 13px;}
#forumTable  thead{
  background:#efc3d0;
}

#forumTable  th, td{
  padding:12px 15px;
  text-align:right; 
}

#forumTable  thead th{
  font-weight:bold;
}

#forumTable  tbody tr{
  border-bottom:1px solid #ddd;
  transition:0.3s;
  cursor:pointer;
}

#forumTable  tbody tr:hover{
  background:#f9f2f4;
}

#forumTable  tbody tr:last-child{
  border-bottom:none;
}

#forumTable  .title-cell{
  display:-webkit-box;
  -webkit-line-clamp:4;
  -webkit-box-orient:vertical;
  overflow:hidden;
  text-overflow:ellipsis;
  line-height:1.4em;
  color:#393A56;
  position:relative;
}

#forumTable  .title-cell .details-btn{
  background:transparent;
  border:none;
  color:#DF1F5A;
  cursor:pointer;
  margin-left:5px;
  font-size:14px;
}

#forumTable  .type-badge{
  padding:4px 24px;
  border-radius:16px;
  color:#fff;
  font-size:12px;
}

#forumTable  .type-story{background:#DF1F5A;}
#forumTable  .type-article{background:#393A56;}

#forumTable  td img{
  width:30px;
  height:30px;
  border-radius:50%;
  vertical-align:middle;
  margin-left:8px;
}

/* Responsive */
@media(max-width:768px){
  #forumTable  table, thead, tbody, th, td, tr{
    display:block;
    width:100%;
  }
  #forumTable  thead tr{display:none;}
  #forumTable  tbody tr{
    margin-bottom:15px;
    border-bottom:1px solid #ddd;
    padding:10px;
  }
 #forumTable  td{
    text-align:right;
    padding-right:50%;
    position:relative;
    border:none;
    border-bottom:1px solid #ddd;
  }

  #forumTable  td::before{
    content: attr(data-label);
    position:absolute;
    right:10px;
    top:12px;
    font-weight:bold;
  }
   #forumTable  h5 {
    font-size: 16px;
    font-weight: bold;
   }
 #forumTable  p {
  
    font-size: 14px;
   }
.testimonial-card { margin-bottom:20px; height: auto;}
}

/* MODAL */
.modal-overlay{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,0.6);
  display:flex;
  align-items:center;
  justify-content:center;
  opacity:0;
  visibility:hidden;
  transition:.3s;
  z-index:9999;
}

.modal-overlay.active{
  opacity:1;
  visibility:visible;
}

.modal-box{
  background:#fff;
  padding:40px;
  width:500px;
  max-width:90%;
  border-radius:12px;
  position:relative;
  max-height:80vh;
  overflow-y:auto;
}

.close-modal{
  position:absolute;
  left:15px;
  top:15px;
  cursor:pointer;
  font-size:18px;
  color:red;
}

.auther { font-size: 11px; text-align: center;}

/* ===== Article ===== */

.article-card{
    background:var(--white);
    padding:30px;
    border-radius:12px;
        
    margin-bottom:30px;
}

.article-title{
    font-size:26px;
    margin-bottom:15px;
    font-weight: bold;
}

.article-meta{
    display:flex;
    gap:20px;
    font-size:14px;
    color:var(--gray);
    margin-bottom:20px;
     background: #efc3d0;
     border-radius: 10px;
  padding: 10px;
}


.article-content{
    line-height:1.9;
    color:#333;
    font-size:16px;
}

/* ===== Interaction ===== */

.article-actions{
    display:flex;
    gap:20px;
    margin-top:25px;
    font-size:14px;
    color:var(--gray);
    border-top: solid thin #ddd;
     border-bottom: solid thin #ddd;
    padding-top: 10px;
    padding-bottom  : 10px;
}

/* ===== Comments Section ===== */
.comments-section{
    background:#fff;
    padding:25px;
    border-radius:14px;
    border:1px solid #e4e6eb;
}

.comments-title{
    margin-bottom:25px;
}

.comment{
    display:flex;
    gap:15px;
    padding:18px 0;
    border-bottom:1px solid #f0f0f0;
}

.comment:last-child{
    border-bottom:none;
}

.comment-avatar{
    min-width:42px;
    height:42px;
    background:#f2f2f2;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    color:#777;
    font-size:16px;
}

.comment-body{
    flex:1;
}

.comment-header{
    display:flex;
    justify-content:space-between;
    font-size:13px;
    margin-bottom:8px;
}

.comment-author{
    font-weight:600;
}

.comment-date{
    
        background: #efc3d0;
        padding: 5px 15px;
        border-radius: 20px;
}

.comment-text{
    font-size:14px;
    line-height:1.7;
    margin-bottom:10px;
}

.comment-actions{
    display:flex;
    gap:15px;
    font-size:13px;
    color:#777;
    align-items:center;
}

.reply-btn{
    background:none;
    border:none;
    color:#DF1F5A;
    cursor:pointer;
    font-weight:600;
    font-size:13px;
}

.reply-btn:hover{
    text-decoration:underline;
}

/* Add Comment */
.add-comment{
    margin-top:25px;
}

.add-comment textarea{
    width:100%;
    padding:12px;
    border-radius:10px;
    border:1px solid #e4e6eb;
    resize:none;
    margin-bottom:12px;
}

.btn-main{
    background:#DF1F5A;
    color:white;
    border:none;
    padding:10px 25px;
    border-radius:50px;
    font-weight:600;
    cursor:pointer;
}

/*pagination*/
.pagination{
    display:flex;
    justify-content:center;
    align-items:center;
    gap:8px;
    margin:40px 0;
}

.page-btn{
    min-width:38px;
    height:38px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:8px;
    text-decoration:none;
    border:1px solid #e4e6eb;
    background:white;
    color:#333;
    font-weight:600;
    transition:.3s;
}

.page-btn:hover{
    background:#f3f3f3;
}

.page-btn.active{
    background:#DF1F5A;
    color:white;
    border:none;
}

.page-btn.disabled{
    opacity:.4;
    pointer-events:none;
}

.pagination .page-btn i{
    color: var(--primary);
    font-size: 15px;
    line-height: 1;
    display: inline-block;
}

.pagination .page-btn.active i{
    color: #fff;
}

.dots{
    padding:0 6px;
    color:#777;
}


/* ===== Cards ===== */
.goal-card{
    background:#fff;
    border-radius:15px;
    padding:10px;
    box-shadow:0 10px 25px rgba(0,0,0,.05);
    height:100%;
    transition:.3s;
}

.goal-card:hover{
    transform:translateY(-5px);
}

.goal-number{
    font-size:30px;
    width: 50px;
    height: 50px;
    font-weight:800;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    color:var(--secondary);
    background: var(--third);
    margin-top: -50px;
    position: relative;
    z-index: 999;
    border-radius: 50%;
    margin-right: 20px;
}

.goal-card img{
    border-radius:10px;
    margin-bottom:15px;
    width:100%;
    height:180px;
    object-fit:cover;
}




/*faq*/


/* Section background */


/* Title */
.faq-title {
  color: var(--primary-color);
}

/* Glass Effect Container */
.glass-accordion .accordion-item {
  border: none;
  background: rgba(255, 255, 255, 0.6);
  backdrop-filter: blur(12px);
  border-radius: 16px;
  margin-bottom: 20px;
  padding: 5px 0;
  position: relative;
  transition: 0.3s ease;
}

/* Soft Divider Line */
.glass-accordion .accordion-item::after {
  content: "";
  position: absolute;
  bottom: -10px;
  left: 10%;
  width: 80%;
  height: 1px;
  background: linear-gradient(to right, transparent, #ddd, transparent);
}

/* Remove last divider */
.glass-accordion .accordion-item:last-child::after {
  display: none;
}

/* Button */
.glass-accordion .accordion-button {
  background: transparent;
  font-weight: 600;
  font-size: 16px;
  padding: 10px 25px;
  position: relative;
  transition: 0.3s ease;
  box-shadow: none;
}

/* Animated underline */
.glass-accordion .accordion-button::before {
  content: "";
  position: absolute;
  bottom: 8px;
  left: 25px;
  width: 0;
  height: 2px;
  background: var(--third);
  transition: width 0.35s ease;
}

/* When active */
.glass-accordion .accordion-button:not(.collapsed) {
  color: var(--third-color);
}

/* Expand underline smoothly */
.glass-accordion .accordion-button:not(.collapsed)::before {
  width: 60%;
}

/* Icon */
.icon-wrapper {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: rgba(223,31,90,0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--primary-color);
  transition: 0.3s ease;
}

/* Icon active */
.accordion-button:not(.collapsed) .icon-wrapper {
  background: var(--third);
  color: #fff;
  transform: scale(1.08);
}

/* Body */
.glass-accordion .accordion-body {
  padding: 15px 25px 25px;
  color: #555;
  line-height: 1.8;
}

/* Remove default arrow */
.accordion-button::after {
  display: none;
}


/*contact*/



/* Info Card */
.contact-info {
  background: rgba(255, 255, 255, 0.6);
  backdrop-filter: blur(12px);
  padding: 35px;
  border-radius: 18px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.05);
}

/* Info Items */
.info-item {
  display: flex;
  align-items: center;
  margin-bottom: 25px;
  border-bottom: 1px dotted #ddd;
}

.info-icon {
  width: 45px;
  height: 45px;
  border-radius: 50%;
  background: rgba(223,31,90,0.1);
  color: var(--primary-color);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-left: 15px;
  font-size: 18px;
  transition: 0.3s;
}

.info-item:hover .info-icon {
  background: var(--third);
  color: #fff;
  transform: scale(1.1);
}

/* Form Card */
.contact-form {
  background: #fff;
  padding: 35px;
  border-radius: 18px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.05);
}

/* Inputs */
.form-control {
  border-radius: 12px;
  padding: 12px 15px;
  border: 1px solid #eee;
  transition: 0.3s;
  text-align: right;
}

.form-control:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(223,31,90,0.1);
}

/* Button */
.contact-btn {
  background: var(--primary);
  color: #fff;
  padding: 10px 30px;
  border-radius: 30px;
  transition: 0.3s;
}

.contact-btn:hover {
  background: var(--third);
  transform: translateY(-2px);
}

/*honord*/


/* Section Background Image */
.honor-section {
  position: relative;
  background: url('../images/forWho-bg.png') center center/cover no-repeat;
  padding: 120px 0;
  color: #fff;
  overflow: hidden;
}

/* Dark Overlay */
.honor-section .overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    rgba(20, 20, 25, 0.85),
    rgba(20, 20, 25, 0.85)
  );
  z-index: 1;
}

/* Content */
.content-wrapper {
  position: relative;
  z-index: 2;
}

/* Titles */
.section-title {
  font-size: 34px;
  font-weight: 700;

}



/* Cards */
.honor-card {
  background: rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(10px);
  padding: 30px;
  border-radius: 18px;
  transition: 0.3s ease;
  height: 100%;
  border: 5px solid rgba(255,255,255,0.1);
}

.honor-card:hover {
  transform: translateY(-6px);
  border-color: var(--primary-color);
}

/* Level Number */
.level-number {
  
  font-size: 40px;
  font-weight: 700;
  color: var(--secondary);


}

/* Card Title */
.honor-card h5 {
  margin: 15px 0;
  font-weight: 600;
}

/* List */
.honor-card ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.honor-card ul li {
  margin-bottom: 8px;
  position: relative;
  padding-right: 18px;
}

.honor-card ul li::before {
  content: "•";
  position: absolute;
  right: 0;
  color: var(--primary-color);
}

/* No-Do Box */
/* Main Box */
.no-do-section {
  backdrop-filter: blur(14px);
  padding: 40px 30px;
  border-radius: 20px;
  border: 1px solid rgba(255,255,255,0.15);
  position: relative;
  overflow: hidden;
}

/* Left Accent Line */
.no-do-section::before {
  content: "";
  position: absolute;
  right: 0;
  top: 0;
  width: 5px;
  height: 100%;
  background: linear-gradient(
    var(--primary-color),
    var(--third)
  );
}

/* Header */
.no-do-header h4 {
  font-weight: 700;
}

.no-do-header .subtitle {
  font-size: 14px;
}

/* Items */
.no-do-item {
  background: rgba(255,255,255,0.05);
  padding: 25px 15px;
  border-radius: 14px;
  transition: 0.3s ease;
  border: 3px solid var(--grey);
}

.no-do-item:hover {
  transform: translateY(-6px);
  border-color: var(--primary);
}

/* Icon */
.no-icon {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: rgba(223,31,90,0.15);
  color: var(--primary);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 12px;
  font-size: 18px;
  transition: 0.3s ease;
}

.no-do-item:hover .no-icon {
  background: var(--third);
  color: var(--secondary);
 
}

/* Text */
.no-do-item span {
  display: block;

  font-weight: 500;
}

/* Closing Statement */
.closing-line {
  font-size: 16px;
  font-weight: 600;
  color: var(--primary-color);
  letter-spacing: 0.5px;
}



.story-wrapper{
  max-width:900px;
  margin:50px auto;
  background:#fff;
  border-radius:14px;
  box-shadow:0 8px 25px rgba(0,0,0,0.05);
  overflow:hidden;
}

.story-header{
  padding:30px;
  border-bottom:1px solid var(--grey);
}

.story-title{
  font-size:26px;
  color:var(--primary);
  margin:0 0 10px;
}

.story-meta{
  color:var(--muted-primary);
  font-size:14px;
  display:flex;
  flex-wrap:wrap;
  gap:15px;
}

.story-meta i{
  color:var(--third);
  margin-left:5px;
}

.story-image  {text-align: center;}
.story-image img{
  width:80%;
  height:400px;
  object-fit:cover;
}

.story-body{
  padding:30px;
  color:var(--primary);
  line-height:1.9;
  font-size:17px;
  position:relative;
}

.story-text{

 
}

.story-text.full{
  -webkit-line-clamp:unset;
}

.read-more{
  margin-top:20px;
  background:var(--third);
  color:#fff;
  border:none;
  padding:8px 20px;
  border-radius:25px;
  cursor:pointer;
  font-size:14px;
}

.read-more:hover{
  opacity:0.9;
}

.story-actions{
  margin-top:30px;
  display:flex;
  gap:20px;
  color:var(--muted-primary);
  font-size:15px;
}

.story-actions i{
  margin-left:6px;
  color:var(--third);
  cursor:pointer;
}

.story-actions .story-action-btn{
  background:none;
  border:none;
  padding:0;
  margin:0;
  font:inherit;
  color:inherit;
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  gap:6px;
}

.story-actions .story-action-btn.is-active{
  color:var(--third);
  font-weight:600;
}

.story-comments-list{
  margin-top:24px;
  padding-top:20px;
  border-top:1px solid var(--grey);
}

.story-comment-item{
  padding:12px 0;
  border-bottom:1px solid var(--grey);
  font-size:15px;
}

.story-comment-item:last-child{
  border-bottom:none;
}

@media(max-width:600px){
  .story-header,
  .story-body{
    padding:20px;
  }
  .story-title{
    font-size:20px;
  }
}


@media(max-width:768px){
  .social-icons {display: none;}
  .h-about-pic2  {display: none;}

  .h-about-pic1 img {
  width: 250px;
  height: 250px;
  border-radius: 50%;
}

.h-about-pic1 {
    width: 260px;
  height: 260px;
  margin: 0 auto;
  position: relative;
  margin-bottom: 20px;
}

.ican-icon {
  width: 120px;
  height: 120px;
} 
.ican-icon img {

width: 80px;
  height: 80px;

}

.ican-item {
  padding: 0;
}

.section-title {text-align: center;}
.adv-pic {width: 250px;
  height: 250px;
margin: 0 auto;
}
.adv-pic img {width: 220px;
  height: 220px;}

  .footer  {text-align: center !important;}
  .slide-content .btn {margin-bottom: 5px; width: 100%;}
.inside-about .about-card {height: auto; margin-bottom: 10px;}
.search-wrapper {width: 90%;}
}


/*profile*/

.profile-wrapper{
  max-width:1000px;
  margin:40px auto;
  background:#fff;
  border-radius:16px;
  box-shadow:0 8px 25px rgba(0,0,0,0.04);
  overflow:hidden;
}

/* Header */
.profile-header{
  background:var(--primary);
  color:#fff;
  padding:30px;
  text-align:center;
}

.profile-header i{
  font-size:60px;
  margin-bottom:10px;
}

.profile-header h2{
  margin:0;
  font-weight:600;
}

.profile-header p{
  margin:10px 0 0;
  font-size:14px;
  opacity:0.95;
}

/* Tabs */
.tabs{
  display:flex;
  justify-content:space-around;
  border-bottom:1px solid var(--grey);
  background:#fafafa;
}

.tab-btn{
  flex:1;
  padding:15px;
  cursor:pointer;
  text-align:center;
  color:var(--muted-primary);
  font-size:14px;
  transition:0.3s;
}

.tab-btn.active{
  color:var(--third);
  border-bottom:3px solid var(--third);
  font-weight:600;
}

/* Content */
.tab-content{
  display:none;
  padding:30px;
  animation:fade 0.3s ease-in-out;
}

.tab-content.active{
  display:block;
}

@keyframes fade{
  from{opacity:0;}
  to{opacity:1;}
}

textarea, input{
  width:100%;
  padding:10px;
  border:1px solid var(--grey);
  border-radius:8px;
  margin-bottom:12px;
  font-family:inherit;
  text-align: right;
}

button{
  background:var(--third);
  color:#fff;
  border:none;
  padding:8px 18px;
  border-radius:25px;
  cursor:pointer;
}

button:hover{
  opacity:0.9;
}

.story-card, .message-card{
  border:1px solid var(--grey);
  padding:15px;
  border-radius:12px;
  margin-bottom:15px;
  background:#fcfcff;
}

.comment{
  background:#f5f6fa;
  padding:8px;
  border-radius:8px;
  margin-top:8px;
  font-size:13px;
}

.support-note{
  background:#f9f9ff;
  padding:12px;
  border-radius:10px;
  font-size:13px;
  color:var(--muted-primary);
  margin-bottom:15px;
}

@media(max-width:768px){
  .tabs{
    flex-direction:column;
  }
}

/* Tab triggers: match mock (row of tabs, not stacked full-width buttons) */
.tabs .tab-btn{
  background:transparent;
  border:none;
  width:auto;
  flex:1;
  box-sizing:border-box;
  font-family:inherit;
}

.profile-wrapper form button[type="submit"]{
  width:100%;
  padding:10px;
  font-size:15px;
}


/*login*/
.auth-card{
  background:#fff;
  width:380px;
  padding:40px;
  border-radius:18px;
    margin: 50px auto;

  box-shadow:0 10px 30px rgba(0,0,0,0.05);
}

.auth-header{
  text-align:center;
  margin-bottom:25px;
}

.auth-header i{
  font-size:50px;
  color:var(--third);
}

.auth-header h2{
  margin:10px 0 5px;
  color:var(--primary);
}

.auth-header p{
  font-size:13px;
  color:var(--muted-primary);
}

.auth-card button{
  width:100%;
  background:var(--third);
  color:#fff;
  border:none;
  padding:10px;
  border-radius:25px;
  cursor:pointer;
  font-size:15px;
}

.auth-card button:hover{
  opacity:0.9;
}

.switch-link{
  text-align:center;
  margin-top:15px;
  font-size:13px;
  color:var(--muted-primary);
}

.switch-link a{
  color:var(--third);
  text-decoration:none;
  font-weight:600;
}