.img-fluid {
   width: 100%;
   height: 209px;
   object-fit: cover;
}
.blog-box {
   background: #fff;
   border-radius: 18px;
   overflow: hidden;
   box-shadow: 0 12px 30px rgba(0, 65, 119, 0.12);
   transition: all 0.35s ease;
   position: relative;
}
.blog-box:hover {
   transform: translateY(-12px);
   box-shadow: 0 20px 45px rgba(0, 65, 119, 0.2);
}
.blog-thumb {
   position: relative;
   height: 230px;
}
.blog-thumb img {
   width: 100%;
   height: 100%;
   object-fit: cover;
}
.badge-new {
   position: absolute;
   top: 15px;
   right: 15px;
   background: #ffb703;
   color: #004177;
   padding: 6px 14px;
   border-radius: 20px;
   font-size: 13px;
   font-weight: bold;
}
.blog-info {
   padding: 25px;
}
.blogs-meta {
   font-size: 13px;
   color: #777;
}
.blog-info h3 {
   margin: 12px 0;
   font-size: 20px;
   line-height: 1.5;
}
.blog-info h3 a {
   color: #004177;
   text-decoration: none;
   transition: 0.3s;
}
.blog-info h3 a:hover {
   color: #002a44;
}
.blog-info p {
   font-size: 15px;
   color: #555;
   line-height: 1.8;
}
.blog-footer {
   margin-top: 20px;
}
.btn-read {
   color: #004177;
   font-weight: 600;
   text-decoration: none;
   display: inline-flex;
   align-items: center;
   gap: 8px;
}
.btn-read i {
   transition: transform 0.3s ease;
}
.blog-box:hover .btn-read i {
   transform: translateX(-5px);
}

/* blog page */
.blog-container {
   max-width: 900px;
   margin: auto;
   padding: 40px 20px;
   color: #333;
}
.blog-hero h1 {
   font-size: 36px;
   font-weight: bold;
   color: #004177;
   margin-bottom: 10px;
}
.blog-hero p {
   font-size: 16px;
   color: #555;
   margin-bottom: 30px;
}
.blog-meta {
   display: flex;
   flex-wrap: wrap;
   gap: 25px;
   margin-bottom: 30px;
   font-size: 16px;
   color: #333;
   padding: 20px;
   background-color: #f5f8fb;
   padding: 15px 20px;
   border-radius: 8px;
   box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}
.blog-meta a {
   color: #004177;
   text-decoration: none;
}
.blog-meta a:hover {
   text-decoration: underline;
}
.blog-content {
   line-height: 1.8;
   margin-bottom: 30px;
}
.blog-comments{
   padding: 20px;
   border-radius: 12px;
}
.blog-comments h2 {
   color: #004177;
   margin-bottom: 15px;
}
.comment {
   border-right: 4px solid #004177;
   background-color: #f7f9fc;
   padding: 10px 15px;
   margin-bottom: 10px;
   border-radius: 6px;
}
.comment-name {
   font-weight: bold;
   margin-bottom: 5px;
   display: flex;
   justify-content: space-between;
   align-items: center;
}
.comment-content {
   color: #555;
}
.comment-form input,
.comment-form textarea {
   padding: 8px 12px;
   margin-bottom: 10px;
}
.comment-form button:hover {
   background-color: #00325c;
}
.related-articles {
   padding: 20px;
   border-radius: 12px;
   /* background-color: #fffaf0; */
   /* background-color: #f0f7ff; */
   /* box-shadow: 0 2px 8px rgba(0,0,0,0.05); */
}
.related-grid {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 15px;
}
.related-card {
   position: relative;
   border-radius: 8px;
   overflow: hidden;
   height: 200px;
   color: #fff;
   text-decoration: none;
   display: flex;
   align-items: flex-end;
   background-size: cover;
   background-position: center;
   transition: transform 0.3s, box-shadow 0.3s;
}
.related-card:hover {
   background: rgba(0,0,0,0.4);
   h3{
      color: #004177 !important;
   }
   p{
      color: #fff !important;
   }
}
.related-text {
   position: absolute;
   padding: 15px;
   top: 50%;
   transform: translateY(-50%);
}
.related-text h3 {
   margin: 0 0 5px 0;
   font-size: 18px;
   text-align: center;
}
.related-text p {
   font-size: 14px;
   margin: 0;
}
.newsletter {
   border-top: 1px solid #ccc;
   padding: 20px;
   border-radius: 12px;
   background-color: #e8f1f8;
   box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}
.newsletter h2 {
   color: #004177;
   margin-bottom: 10px;
}
.blog-share {
   display: flex;
   flex-wrap: wrap;
   gap: 10px;
   padding: 20px;
   border-radius: 12px;
   background-color: #f5f8fb;
   box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}
.share-btn {
   display: flex;
   align-items: center;
   gap: 6px;
   color: #fff;
   padding: 8px 16px;
   border-radius: 6px;
   text-decoration: none;
   transition: 0.3s;
   font-weight: 500;
}
.share-btn.facebook { background-color: #1877F2; }
.share-btn.facebook:hover { color: #fff !important; background-color: #145dbf; }
.share-btn.twitter { color: #fff !important; background-color: #1DA1F2; }
.share-btn.twitter:hover { color: #fff !important; background-color: #0d95e8; }
.share-btn.whatsapp { color: #fff !important; background-color: #25D366; color: #fff; }
.share-btn.whatsapp:hover { color: #fff !important; background-color: #1ebe5c; }
.share-btn.linkedin { color: #fff !important; background-color: #0077B5; }
.share-btn.linkedin:hover { color: #fff !important; background-color: #005f8a; }
.share-btn.snapchat { color: #fff !important; background-color: #FFFC00; color: #000; }
.share-btn.snapchat:hover { color: #fff !important; background-color: #e6e500; }
.share-btn.instagram { background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fd5949 45%, #d6249f 60%, #285AEB 90%); }
.share-btn.instagram:hover { color: #fff !important; opacity: 0.85; }
.meta-item {
   display: flex;
   align-items: center;
   gap: 6px;
}
.meta-item i, .meta-item strong {
   color: #004177;
}
.meta-item a {
   color: #004177;
   text-decoration: none;
   margin-right: 5px;
}
.meta-item a:hover {
   text-decoration: underline;
}

.blog-rating {
   padding: 20px;
   border-radius: 12px;
   background: #fff8e1;
   box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}
.blog-rating h2 {
   color: #004177;
   margin-bottom: 10px;
}
.current-rating span {
   font-weight: 500;
   margin-right: 5px;
}
.current-rating i {
   color: #ccc;
   margin-right: 2px;
}
.current-rating i.filled {
   color: #FFD700;
}
.rating-form {
   margin-top: 10px;
   display: flex;
   align-items: start;
   flex-direction: column;
   justify-content: center;
   gap: 10px;
}



.btn-submit {
   background-color: #004177;
   color: #fff;
   padding: 6px 20px;
   border: none;
   border-radius: 6px;
   cursor: pointer;
   transition: 0.3s;
}
.col-12{
   display: flex;
}

@media(max-width:768px){
}
@media(max-width:768px){
   .related-grid {
      grid-template-columns: 1fr;
   }
   .blog-meta {
      flex-direction: column;
      gap: 10px;
   }
   .blog-share{
      padding: 20px 10px;
   }
}

/* hover effects خفيف */
.related-card:hover,
.blog-hero:hover,
.blog-content:hover,
.blog-meta:hover,
.blog-rating:hover,
.blog-comments:hover,
.blog-share:hover,
.newsletter:hover {
   transform: translateY(-2px);
   transition: 0.3s;
}




.stars-input {
    display: flex;
    gap: 4px;
}

.stars-input input {
    display: none;
}

.stars-input label {
    font-size: 22px;
    color: #ccc;
    cursor: pointer;
    transition: color 0.2s;
}
.stars-input label.active {
    color: #FFD700;
}