 /* CSS STORY-HIVE 
============================================== */
 :root {
     --text-white: #fff;
     --primary-story-hive-color: #fe7238;
     --cta-btn-1-top-color: #019201;
     --cta-btn-1-bottom-color: #7bff7b;
     --cta-btn-2-top-color: #0036ad;
     --cta-btn-2-bottom-color: #96c6f9;
     --cta-btn-1-top-color: #019201;
     --cta-btn-1-bottom-color: #7bff7b;
     --cta-btn-2-top-color: #0036ad;
     --cta-btn-2-bottom-color: #96c6f9;
     --primary-story-hive-color: #fe7238
 }


 /* HERO-BANNER */

 .hero1 {
     position: relative;
     background: linear-gradient(135deg, #007bff, #00bfa6);

 }

 .hero1 .hero1-bg {
     margin-top: 70px;
     padding: 100px 0px;
     margin-bottom: 0px;

 }

 .hero1 .hero1-bg .main-heading1 {
     text-align: center;
     padding-left: 0px;
 }

 /* @media (max-width: 1125px) {
     .hero1 .hero1-bg .main-heading1 {
         font-size: 40px;
     }
 } */

 .hero1 .hero1-bg .main-heading1 h1 {
     text-align: center;
     font-size: 48px !important;
     line-height: 55px !important;
 }

 /* @media only screen and (min-width: 1099px) and (max-width: 1440px) {
     .hero1 .hero1-bg .main-heading1 h1 {
         font-size: 55px !important;
         line-height: 60px !important;
     }
 } */

 @media (max-width: 1099px) {
     .hero1 .hero1-bg .main-heading1 h1 {
         font-size: 38px !important;
     }
 }

 @media (max-width: 768px) {
     .hero1 .hero1-bg {
         padding: 60px 0px;

     }

     .hero1 .hero1-bg .main-heading1 {
         padding: 15px 0px;
     }

     .hero1 .hero1-bg .main-heading1 h1 {
         text-align: center;
         font-size: 30px !important;
     }
 }

 @media (max-width: 767px) {
     .hero1 .hero1-bg .main-heading1 {
         padding: 15px 0px;
     }

     .hero1 .hero1-bg .main-heading1 h1 {
         font-size: 30px !important;
     }
 }

 @media (max-width: 525px) {
     .hero1 .hero1-bg .main-heading1 h1 {
         font-size: 23px !important;
         line-height: 35px !important;
     }

     .hero1 .hero1-bg {
         padding: 40px 12px;
     }

     .hero1 .hero1-bg .main-heading1 p {
         font-size: 15px;
         padding: 0px 35px;
     }
 }

 @media (max-width: 325px) {
     .hero1 .hero1-bg .main-heading1 h1 {
         font-size: 18px !important;
         line-height: 1.5 !important;
     }

     .hero1 .hero1-bg {
         padding: 22px 12px;
     }

     .hero1 .hero1-bg .main-heading1 p {
         font-size: 16px;
         line-height: 1.5;
         padding: 0px;
         margin-bottom: 20px;
     }
 }

 .footer-list1 a:hover {
     color: var(--primary-story-hive-color) !important;
 }

 .hero1 .hero1-bg .main-heading1 p {
     color: var(--text-white);
 }

 .hero-btn {
     gap: 30px;
     flex-wrap: wrap;
 }

 .banner-btn {
     text-align: center;

     /* margin-bottom: 20px; */
 }

 .banner-btn a {
     text-decoration: none;
     color: #fff;
     padding: 0.9rem 1.5rem;
     border-radius: 50px;
     font-weight: 600;
     display: inline-flex;
     align-items: center;
     justify-content: center;
     transition: all 0.3s ease;
     font-size: 14px;
     /* border: 2px solid rgba(255, 255, 255, 0.4); */
     border: 2px solid #6c757d;
     backdrop-filter: blur(5px);
 }

 /* Choose-us-BANNER */
 .choose-us {
     margin: 50px 0px;
 }

 .choose-us-content {
     margin: 30px 0px;
 }

 .choose-us-content .haeding h1 strong {
     color: var(--primary-story-hive-color);
 }

 .choose-us-list .choose-us-card {
     background: #fff;
     color: #575353d1;
     border-radius: 16px;
     box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
     padding: 20px 20px;
     /* box-shadow: 0 4px 15px #000000; */
     transition: all 0.3s ease;
     margin: 10px 0px;
     display: flex;
     align-items: center;
     gap: 15px;
     font-weight: 600;
 }

 .choose-us-list .choose-us-card i {
     color: red;
     font-size: 30px;
 }

 .choose-us-list .choose-us-card:hover {
     transform: translateY(-8px);
     box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08);
     background: #ffffffcc;
     box-shadow: rgba(0, 0, 0, 0.4) 0px 2px 4px, rgba(0, 0, 0, 0.3) 0px 7px 13px -3px, rgba(0, 0, 0, 0.2) 0px -3px 0px inset;
 }

 .blog1-posts-area {
     position: sticky;
     top: 100px;
 }

 .blog1-posts-area .featured-articles .section-title {
     font-size: 40px;
     font-weight: 700;
     margin-bottom: 30px;
 }

 .blog1-posts-area .featured-articles .featured-card {
     border: 1px solid var(--vtc-border-2);
     border-radius: 9px;
     transition: all 0.4s;
     padding: 10px 25px;
 }

 .blog1-posts-area .featured-articles .featured-card.sponsored {
     border-left: 4px solid #ff4d4f;
     position: relative;
 }

 .blog1-posts-area .featured-articles .featured-card.sponsored .heading1 .badge {
     position: absolute;
     top: 15px;
     right: 15px;
     background: #ff4d4f;
     color: #fff;
     padding: 5px 10px;
     border-radius: 6px;
     font-size: 12px;
 }

 .industry-categories .section-subtitle {
     margin-bottom: 20px;
 }

 .industry-categories .categories .category-card {
     padding: 18px 25px;
     background: #ffffff;
     border-radius: 10px;
     border: 1px solid #e4e4e4;
     font-size: 18px;
     text-decoration: none;
     transition: all 0.3s ease;
     box-shadow: 0 4px 15px rgba(0, 0, 0, 0.06);
     margin: 10px 0px;
 }

 .industry-categories .categories .category-card a {
     color: #111;
 }

 .industry-categories .categories .category-card:hover {
     transform: translateY(-5px);
     box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
 }

 @media (max-width: 992px) {
     .industry-categories .categories .category-card {
         max-width: 450px;
         margin: 10px auto;
         text-align: center;
     }
 }

 .magazine-section .section-subtitle {
     margin-bottom: 25px;
 }

 .magazine-section .sidebar-btn {
     display: flex;
     justify-content: center;
     align-items: center;
 }

 .cta1 .form-area {
     max-width: 500px;
     margin: 30px auto 0px;
 }

 .cta1 .form-area .button {
     bottom: 12px;
 }

 .cta1 .form-area input {
     width: 100%;
 }

 .cta1 strong {
     color: var(--primary-story-hive-color);
     font-size: 20px;
 }

 .cntri-cat {
     padding: 30px 0;
 }

 .cntri-cat-heading {
     text-align: center;

 }

 .cntri-cat-heading .top-heading {
     font-size: 34px;
     margin-bottom: 30px;
     font-weight: 700;
 }

 .filter-buttons {
     display: flex;
     flex-wrap: wrap;
     justify-content: center;
     gap: 10px;
     margin-bottom: 40px;
 }

 .filter-btn {
     background: #e0e0e0;
     color: #333;
     border: none;
     padding: 10px 18px;
     border-radius: 30px;
     font-size: 15px;
     cursor: pointer;
     transition: all 0.3s ease;
     font-weight: 500;
 }

 .filter-btn.active,
 .filter-btn:hover {
     background: var(--primary-story-hive-color);
     color: #fff;
 }

 .contributor-card {
     background: #fff;
     border-radius: 15px;
     box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
     overflow: hidden;
     text-align: center;
     margin: 10px;
     transition: transform 0.3s ease, box-shadow 0.3s ease;
 }

 .contributor-card:hover {
     transform: translateY(-5px);
     box-shadow: 0 6px 15px rgba(0, 0, 0, 0.15);
 }

 .contributor-card img {
     width: 100%;
     height: 200px;
     object-fit: cover;
 }

 .contributor-info {
     padding: 15px;
 }

 .contributor-info h4 {
     font-size: 18px;
     margin-bottom: 8px;
     color: #111;
 }

 .contributor-info p {
     font-size: 14px;
     color: #555;
     margin-bottom: 10px;
 }

 .contributor-info a {
     color: #007bff;
     text-decoration: none;
     font-weight: 500;
     transition: 0.3s;
 }

 .contributor-info a:hover {
     text-decoration: underline;
 }

 /* 🧩 Desktop Grid Layout */
 .contributors-grid {
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
     gap: 20px;
 }

 /* 📱 Mobile: Slick Slider */
 @media (max-width: 768px) {
     .contributors-grid {
         display: block;
     }
 }

 /* 📱 Responsive Tweaks */
 @media (max-width: 525px) {
     .contributors-category h2 {
         font-size: 22px;
     }

     .filter-btn {
         font-size: 13px;
         padding: 8px 14px;
     }

     .contributor-info h4 {
         font-size: 16px;
     }

     .contributor-info p {
         font-size: 13px;
     }

     .explore-btn {
         font-size: 14px;
         padding: 10px 22px;
     }
 }

 /* Slick Arrows */
 .slick-prev:before,
 .slick-next:before {
     color: #007bff;
     font-size: 24px;
 }

 .slick-prev:before {
     content: '←';
 }

 .slick-next:before {
     content: '→';
 }

 .slick-prev {
     left: 0px;
 }

 .slick-next {
     right: 0px;
 }

 .slick-prev,
 .slick-next {
     font-size: 0;
     line-height: 0;
     position: absolute;
     top: 50%;
     display: block;
     width: 20px;
     height: 20px;
     padding: 0;
     -webkit-transform: translate(0, -50%);
     -ms-transform: translate(0, -50%);
     transform: translate(0, -50%);
     cursor: pointer;
     color: transparent;
     border: none;
     outline: none;
     background: transparent;
 }

 .slick-slide {
     padding: 10px;
 }

 .contributor-section .main-heading {
     text-align: center;
 }

 .contributor-section h2 {
     font-size: 34px;
     margin-bottom: 30px;
     font-weight: 700;
 }

 .contributor-section h3 {
     font-size: 22px;
     color: var(--primary-story-hive-color);
     margin-bottom: 15px;
     font-weight: 600;
 }

 .steps ol {
     padding-left: 40px;
 }

 .steps ol li {
     padding-left: 15px;
 }

 .steps ol,
 .benefits ul {
     text-align: left;
     margin: 0 auto 25px;
     line-height: 1.8;
     font-size: 16px;
     padding-left: 20px;
 }

 .benefits ul li {
     display: flex;
     gap: 15px;
     /* flex-wrap: wrap; */
 }

 @media screen and (max-width: 991.99px) {
     .steps ol li {
         list-style: auto;

     }
 }

 .sponsor-section {
     background: #fff;
     padding: 30px 20px;
     text-align: center;
     /* border-top: 2px solid var(--primary-story-hive-color); */
     overflow: hidden;
 }

 .sponsor-section .section-title {
     font-size: 2.5rem;
     font-weight: 700;
     color: #222;
     margin-bottom: 15px;
 }

 .sponsor-section .section-subtitle {
     font-size: 1.1rem;
     color: #555;
     margin-bottom: 50px;
     max-width: 700px;
     margin-left: auto;
     margin-right: auto;
 }

 /* ===== Slider ===== */
 .sponsor-slider {
     position: relative;
     width: 100%;
     overflow: hidden;
     padding: 15px 0px;
 }

 .sponsor-track {
     display: flex;
     gap: 60px;
     animation: scroll 20s linear infinite;
 }

 .sponsor-banner {
     flex: 0 0 auto;
     background: #f9fafb;
     border-radius: 12px;
     box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
     padding: 25px 35px;
     transition: all 0.3s ease;
 }

 .sponsor-banner:hover {
     transform: translateY(-6px);
     box-shadow: 0 8px 18px rgba(0, 0, 0, 0.15);
 }

 .sponsor-banner img {
     width: 130px;
     filter: grayscale(100%);
     opacity: 0.8;
     transition: all 0.4s ease;
 }

 .sponsor-banner:hover img {
     filter: grayscale(0%);
     opacity: 1;
     transform: scale(1.05);
 }

 /* ===== Animation ===== */
 @keyframes scroll {
     0% {
         transform: translateX(0);
     }

     100% {
         transform: translateX(-50%);
     }
 }

 /* ===== Responsive ===== */
 @media (max-width: 992px) {
     .sponsor-banner img {
         width: 110px;
     }
 }

 @media (max-width: 768px) {
     .sponsor-section .section-title {
         font-size: 2rem;
     }

     .sponsor-section .section-subtitle {
         font-size: 1rem;
     }

     .sponsor-banner img {
         width: 90px;
     }
 }

 @media (max-width: 480px) {
     .sponsor-banner {
         padding: 15px 20px;
     }

     .sponsor-banner img {
         width: 70px;
     }
 }

 /* ------------------------------
   STATS SECTION
--------------------------------*/
 .stats-section {
     padding: 60px 20px;
     background: white;
 }

 .stat-box {
     background: #ffffff;
     padding: 15px;
     margin: 20px 0px;
     text-align: center;
     border-radius: 12px;
     box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1);
     position: relative;
     height: 165px;
     display: flex;
     justify-content: center;
     flex-direction: column;
     align-items: center;
 }

 .stat-icon {
     width: 100%;
     margin-bottom: 10px;
     opacity: 0.7;
 }

 .stat-number {
     font-size: 32px;
     font-weight: bold;
     color: #222;
     margin-bottom: 5px;
 }

 .stat-box p {
     color: #666;
     margin: 0;
 }


 /* TEAM CARD */
 .team-card {
     background: #fff;
     padding: 25px;
     border-radius: 20px;
     margin: 10px;
     text-align: center;
     box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
     transition: 0.3s;
     display: flex !important;
     justify-content: center !important;
     align-items: center !important;
     flex-direction: column !important;
 }

 .team-card:hover {
     transform: translateY(-6px);
 }

 .team-card img {
     width: 120px;
     height: 120px;
     border-radius: 50%;
     object-fit: cover;
     margin-bottom: 15px;
     border: 4px solid #007bff;
 }

 .team-name {
     font-size: 20px;
     font-weight: 600;
 }

 .team-role {
     color: #007bff;
     font-weight: 500;
     margin-bottom: 8px;
 }

 .team-bio {
     font-size: 14px;
     color: #444;
     line-height: 1.5;
 }

 /* Testimonials Section */
 .testimonials-section {
     padding: 70px 0;
     background: #f8f9ff;
 }

 .section-title {
     text-align: center;
     font-size: 32px;
     margin-bottom: 40px;
     font-weight: 700;
 }

 .testimonial-card {
     background: white;
     padding: 30px;
     border-radius: 15px;
     box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08);
     margin: 15px;
     text-align: center;
 }

 .testimonial-text {
     font-size: 18px;
     line-height: 1.6;
     color: #444;
     margin-bottom: 12px;
 }

 .author {
     font-size: 16px;
     color: #6a4df5;
     font-weight: 600;
 }

 .industry-categories .categories .category-card .feature {
     display: flex;
     gap: 12px;
     justify-content: center;
     align-items: center;

 }

 .industry-categories .categories .category-card .feature .icon {
     min-width: 44px;
     height: 44px;
     border-radius: 10px;
     display: inline-grid;
     place-items: center;
     background: var(--primary-story-hive-color);
     box-shadow: inset 0 -6px 14px rgba(0, 0, 0, 0.35);
 }

 .feature h3 {
     margin: 0;
     font-size: 15px;
 }

 .feature p {
     margin: 4px 0 0 0;
     font-size: 13px;
 }

 .leftsidebar-btn {
     display: flex;
     justify-content: center;
     margin-bottom: 10px;
 }

 .slick-dots {
     position: absolute;
     bottom: -25px;
     display: block;
     width: 100%;
     padding: 0;
     margin: 0;
     list-style: none;
     text-align: center;
 }

 .slick-dots li {
     position: relative;
     display: inline-block;
     width: 20px;
     height: 20px;
     margin: 0 5px;
     padding: 0;
     cursor: pointer;
 }

 .slick-dots li button {
     font-size: 0;
     line-height: 0;
     display: block;
     width: 20px;
     height: 20px;
     padding: 5px;
     cursor: pointer;
     color: transparent;
     border: 0;
     outline: none;
     background: transparent;
 }

 .slick-dots li button:before {
     font-family: 'slick';
     font-size: 50px;
     line-height: 20px;
     position: absolute;
     top: 0;
     left: 0;
     width: 20px;
     height: 20px;
     content: '•';
     text-align: center;
     opacity: .25;
     /* color: black; */
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
 }

 .slick-dots li.slick-active button:before {
     opacity: .75;
     color: black;
 }

 .slick-dots li button:before {
     color: #fe7238;
 }

 .slick-dots li button:hover:before,
 .slick-dots li button:focus:before {
     opacity: 1;
 }

 .mission-vision-card {
     width: 360px;
     border-radius: 16px;
     padding: 25px 30px;
     margin: 35px;
     overflow: hidden;
     box-shadow: 0 10px 30px rgba(20, 30, 70, 0.08);
     background: var(--card-bg);
     transition: transform .25s ease, box-shadow .25s ease;
     border-bottom: 4px solid var(--primary-story-hive-color);
     box-shadow:
         inset -4px 0 8px -4px rgba(0, 0, 0, 0.2),
         /* left */
         inset 4px 0 8px -4px rgba(0, 0, 0, 0.2),
         /* right */
         inset 0 4px 8px -4px rgba(0, 0, 0, 0.2);
     /* top */
 }

 .mission-vision-card:hover {
     transform: translateY(-8px);
     box-shadow: 0 20px 50px rgba(20, 30, 70, 0.12);
 }

 .mission-vision-card .img {
     width: 120px;
     height: 90px;
     /* margin-bottom: 15px; */
 }

 .mission-vision-card .tittle {
     font-size: 40px;
     font-weight: 700;
     line-height: 45px;
     margin-bottom: 10px;
 }

 .mission-vision-card .desc {
     font-size: 20px;
     font-weight: 500;
     line-height: 25px;
     color: #5b5656f2;
     text-align: justify;
     text-align-last: center;
 }

 @media (max-width: 1124px) and (min-width: 997px) {
     .mission-vision-card {
         margin: 35px 0px;
     }
 }

 @media (max-width: 996px) {
     .mission-vision-card .tittle {
         font-size: 30px;
         line-height: 35px;
     }

     .mission-vision-card .desc {
         font-size: 13px;
     }
 }

 .our-intro {
     margin: 50px 0px 30px;
 }

 .intro-area {
     padding: 30px 50px;
 }

 .intro-area .section-tittle {
     font-size: 45px;
     line-height: 45px;
     font-weight: 700;
     margin-bottom: 20px;
 }

 .intro-area .section-tittle strong {
     color: var(--primary-story-hive-color);
 }

 .intro-area .section-subtittle {
     font-size: 18px;
     font-weight: 500;
     line-height: 25px;
     text-align: justify;
     margin-bottom: 10px;
 }

 .about-intro-img img {
     width: 100%;
     height: 340px;
     border-radius: 10px;
     object-fit: cover;
 }

 .our-team-section {
     margin: 50px 0px;
 }

 .our-team-section .section-heading h2 {
     font-size: 40px;
     margin-bottom: 30px;
     font-weight: 600;
 }

 .our-team-section .section-heading h2 strong {
     color: var(--primary-story-hive-color);
 }


 .feature-magazine-section {
     margin: 50px 0px;
 }

 .feature-magazine .top-heading {
     font-size: 30px;
     margin-bottom: 30px;
     font-weight: 700;
 }

 .magazine-card {
     padding: 30px;
     border-radius: 14px;
     border: 2px solid #f6f6f6;
     position: relative;
     overflow: hidden;
     transition: 0.35s ease;
 }

 /* Hover: card lifts + shadow appears */
 .magazine-card:hover {
     transform: translateY(-6px);
     box-shadow: 0 15px 35px rgba(0, 0, 0, 0.20);
 }

 .magazine-img {
     width: 100%;
     height: 200px;
     margin-bottom: 25px;
     border-radius: 8px;
     position: relative;
     overflow: hidden;
 }

 .magazine-img img {
     width: 100%;
     height: 100%;
     display: block;
     object-fit: cover;
     transition: transform 0.4s ease;
     /* smooth zoom */
     transform-origin: center;
 }

 /* Zoom on hover */
 .magazine-card:hover .magazine-img img {
     transform: scale(1.06);
 }

 .img-overlay {
     position: absolute;
     inset: 0;
     background: rgba(0, 0, 0, 0.35);
     /* Dark layer */
     border-radius: 10px;
     opacity: 1;
     /* Always visible */
     transition: 0.3s ease;
     pointer-events: none;
     transition: 0.3s ease;
 }

 /* === Hover effect (optional) === */
 .magazine-card:hover .img-overlay {
     background: rgba(0, 0, 0, 0.55);
 }

 .magazine-highlight {
     position: absolute;
     top: 11%;
     left: 2%;
     background-color: #ffffff;
     padding: 5px 10px;
     font-size: 13px;
     font-weight: 600;
     /* border-radius: 18px; */
     color: #ff5400;
     border-left: 2px solid;
     border-top-right-radius: 3px;
     border-bottom-right-radius: 3px;
 }

 .magazine-deatils p {
     font-size: 16px;
     font-weight: 500;
     color: #000;
     text-align: justify;
     margin-bottom: 25px;
 }

 .magazine-btn {
     display: flex;
     align-items: center;
 }

 /* .previous-section {
     padding: 70px 0;
 } */

 .previous-section .top-heading {
     font-size: 30px;
     margin-bottom: 30px;
     font-weight: 700;
 }

 /* Filter Buttons */
 .previous-section .filter-buttons {
     display: flex;
     gap: 15px;
     justify-content: flex-start;
     margin-bottom: 25px;
     flex-wrap: wrap;
 }

 .previous-section .filter-buttons button {
     padding: 10px 20px;
     background: #fff;
     border: 2px solid var(--primary-story-hive-color);
     border-radius: 50px;
     font-size: 15px;
     cursor: pointer;
     transition: 0.3s;
 }

 .previous-section .filter-buttons button.active,
 .previous-section .filter-buttons button:hover {
     background: var(--primary-story-hive-color);
     color: #fff;
 }

 /* Cards */
 .previous-cards {
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
     gap: 25px;
 }

 .previous-card {
     background: #fff;
     border-radius: 16px;
     overflow: hidden;
     box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
     transition: 0.3s ease;
     cursor: pointer;
 }

 .previous-card:hover {
     transform: scale(1.03);
     box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2);
 }

 .previous-card .thumb {
     height: 170px;
     background-size: cover;
     background-position: center;
 }

 .previous-card .content {
     padding: 18px;
 }

 .previous-card .content h3 {
     font-size: 20px;
     font-weight: 600;
     margin-bottom: 8px;
 }

 .previous-card .content p {
     font-size: 15px;
     color: #444;
     line-height: 1.5;
     margin-bottom: 12px;
 }

 .previous-card .btn {
     display: inline-block;
     padding: 10px 20px;
     background: #3d7bfd;
     color: #fff;
     border-radius: 50px;
     font-size: 14px;
     text-decoration: none;
 }

 .previous-card .btn:hover {
     background: var(--primary-story-hive-color);
     border: 1px solid #000;
 }

 .top-article-section {
     padding: 70px 0;
 }

 .top-article .top-heading {
     font-size: 30px;
     font-weight: 700;
 }

 /* Card */
 .article-card {
     height: 435px;
     background: #fff;
     border-radius: 14px;
     overflow: hidden;
     box-shadow: 0 0 0 rgba(0, 0, 0, 0);
     transition: 0.35s ease;
     cursor: pointer;
     border: 1px solid #ff780aba;
     margin: 0 15px;
     padding: 20px;
 }

 .article-card:hover {
     transform: translateY(-6px);
     box-shadow: 0 15px 35px rgba(0, 0, 0, 0.15);
 }

 .article-img {
     position: relative;
     overflow: hidden;
     border-radius: 14px 14px 0 0;
 }

 .article-img img {
     width: 100%;
     border-radius: 14px 14px 0 0;
     transition: 0.4s ease;
 }

 .article-card:hover .article-img img {
     transform: scale(1.07);
 }

 .article-content {
     padding: 20px 0 0;
 }

 .article-title {
     font-size: 20px;
     font-weight: 600;
     margin-bottom: 8px;
     display: -webkit-box;
     -webkit-line-clamp: 2;
     /* show only 3 lines */
     -webkit-box-orient: vertical;
     overflow: hidden;
 }

 .article-snippet {
     font-size: 15px;
     color: #555;
     margin-bottom: 12px;
     display: -webkit-box;
     -webkit-line-clamp: 2;
     /* show only 3 lines */
     -webkit-box-orient: vertical;
     overflow: hidden;
 }

 .article-author {
     font-size: 14px;
     font-weight: 500;
     margin-bottom: 18px;
 }

 .read-btn {
     display: inline-block;
     padding: 10px 22px;
     background: #0c63e7;
     color: #fff;
     border-radius: 8px;
     font-size: 14px;
     text-decoration: none;
     transition: 0.3s ease;
 }

 .read-btn:hover {
     background: #094fb8;
 }

 .section-card {
     max-width: 1100px;
     margin: 40px auto;
     background: #fff;
     padding: 45px;
     border-radius: 18px;
     box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08);
     transition: .3s ease;
 }

 .section-card:hover {
     transform: scale(1.01);
     box-shadow: 0 8px 35px rgba(0, 0, 0, 0.12);
 }

 .subscribing-section h2,
 .cntri-magazine-section h2 {
     font-size: 32px;
     margin-bottom: 15px;
     font-weight: 700;
 }

 .subscribing-section p,
 .cntri-magazine-section p {
     font-size: 18px;
     font-weight: 600;
     color: #444;
     margin-bottom: 15px;
 }

 .cntri-magazine-section p strong {
     color: var(--primary-story-hive-color);
 }

 .subscribing-section ul,
 .cntri-magazine-section ul {
     list-style: none;
     margin-top: 10px;
 }

 .subscribing-section ul li,
 .cntri-magazine-section ul li {
     font-size: 17px;
     margin: 10px 0;
     display: flex;
     align-items: center;
     gap: 10px;
 }

 .subscribing-section ul li::before,
 .cntri-magazine-section ul li::before {
     content: "✔";
     color: var(--primary-story-hive-color);
     font-weight: 900;
 }

 /* MODAL OVERLAY */
 .contribute-modal .modal-overlay {
     position: fixed;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background: rgba(0, 0, 0, 0.55);
     display: none;
     justify-content: center;
     align-items: center;
     z-index: 999;
     backdrop-filter: blur(2px);
 }

 /* MODAL BOX */
 .contribute-modal .modal-box {
     width: 90%;
     max-width: 520px;
     background: #fff;
     padding: 30px;
     border-radius: 14px;
     box-shadow: 0 8px 45px rgba(0, 0, 0, 0.15);
     animation: modalShow .28s ease;
 }

 @keyframes modalShow {
     from {
         transform: translateY(-25px);
         opacity: 0;
     }

     to {
         transform: translateY(0);
         opacity: 1;
     }
 }

 /* HEADER */
 .contribute-modal .modal-header {
     display: flex;
     justify-content: space-between;
     align-items: center;
     margin-bottom: 18px;
 }

 .contribute-modal .modal-header h3 {
     margin: 0;
     font-size: 24px;
     font-weight: 600;
 }

 .contribute-modal .close-modal {
     cursor: pointer;
     font-size: 22px;
     padding: 5px;
     transition: .3s;
 }

 .contribute-modal .close-modal:hover {
     color: #ff3b3b;
 }

 /* FORM */
 .contribute-modal .form-group {
     margin-bottom: 15px;
 }

 .contribute-modal .form-group label {
     font-size: 15px;
     font-weight: 600;
     margin-bottom: 6px;
     display: block;
 }

 .contribute-modal .modal-box input,
 .contribute-modal .modal-box textarea {
     width: 100%;
     padding: 12px;
     border: 1.5px solid #d9d9d9;
     border-radius: 8px;
     font-size: 15px;
     outline: none;
     transition: .3s ease;
 }

 .contribute-modal .modal-box input:focus,
 .contribute-modal .modal-box textarea:focus {
     border-color: var(--primary-story-hive-color);
     box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.18);
 }

 /* SUBMIT */
 .contribute-modal .modal-submit {
     width: 100%;
     padding: 14px;
     background: #007bff;
     border: none;
     border-radius: 8px;
     color: #fff;
     font-size: 17px;
     cursor: pointer;
     transition: .3s;
     margin-top: 5px;
 }

 .contribute-modal .modal-submit:hover {
     background: #0062d6;
 }


 @media (max-width: 1125px) {
     .article-card {
         height: auto;
     }
 }

 @media (max-width: 996px) {
     .intro-area {
         padding: 30px 10px;
     }

     .our-intro {
         margin: 10px 0px 30px;
     }

     .article-title {
         -webkit-line-clamp: 1;
     }

 }

 @media (max-width: 424px) {
     .intro-area .section-tittle {
         font-size: 40px;
     }

     .mission-vision-card {
         margin: 35px 8px;
     }

     .blog1-posts-area .featured-articles .featured-card {
         padding: 15px 10px;
     }

     .blog1-single-box .heading1 {
         padding: 16px 5px;
     }

     .blog1 .featured-articles .featured-card .heading1 h4 a {
         font-size: 18px;
     }

 }

 @media (max-width: 524px) {
     /* .hero-btn {
         flex-direction: column;
     } */

     .cta-btns {
         flex-wrap: wrap;
     }

     .feature-magazine .top-heading {
         font-size: 22px;
     }
 }

 @media (max-width: 324px) {
     .magazine-deatils p {
         font-size: 14px;
     }
 }