/* ========================================= ROOT / VARIABLES ========================================= */
:root{
    --primary:        #34A5DD;
    --secondary:      #34C909;
    --bg-light:       #EDFFE7;
    --heading-size:   36px;
    --body-size:      18px;
    --section-pad-x:  60px;   
}



/* ========================================= GLOBAL UTILITIES ========================================= */
.container-1200 {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
  box-sizing: border-box;
}
.section-heading {
  font-size: 32px;
  font-weight: 800;
  color: var(--dark);
  margin-bottom: 8px;
  font-family: "Georgia", "Times New Roman", serif;
  text-align: center;
}
.section-heading span {
  color: var(--cyan);
}
.section-eyebrow {
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: #000;
  margin-bottom: 6px;
  text-align: center;
  font-family:
    "Trebuchet MS", "Lucida Sans Unicode", "Lucida Grande", sans-serif !important;
}
.section-subtext {
  font-size: 15px;
  color: var(--text);
  max-width: 700px;
  margin-bottom: 40px;
  line-height: 1.7;
  text-align: center;
} /* Hero Slider Styles */
/* =============================================
   HERO SLIDER (Site 48)
   Primary #1B4ABC | Secondary #4CD844
   Second Secondary #287FF9 | BG #E9FFE8
============================================= */











/* =========================================
   HERO SLIDER – SITE #52
   (Root colors already defined hain: --primary, --secondary, --bg-light)
========================================= */
.hero-slider{
  position: relative;
  width: 100%;
  height: min(88vh, 660px);
  min-height: 420px;
  overflow: hidden;
  background: var(--bg-light);
}
.slider-container{ width: 100%; height: 100%; }

.slider-item{
  position: absolute; inset: 0;
  background-size: cover;
  background-position: center;
  opacity: 0; visibility: hidden;
  transition: opacity .9s ease, visibility .9s;
}
.slider-item::after{
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(0,0,0,.55) 0%, rgba(0,0,0,.35) 60%, rgba(0,0,0,.25) 100%);
}
.slider-item.active{ opacity: 1; visibility: visible; }

/* ---- Content: bilkul .container-1200 jaisi alignment (1200px + 20px padding) ---- */
.slider-content{
  position: relative; z-index: 2;
  height: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
  box-sizing: border-box;
  display: flex; flex-direction: column;
  justify-content: center; align-items: flex-start;
  text-align: left;
}

@media(max-width: 886px){
  .hero-slider{
  position: relative;
  width: 100%;
  height: min(88vh, 600px);
  min-height: 420px;
  overflow: hidden;
  background: var(--bg-light);
}
}

.slide-title{
  margin: 0 0 16px;
  color: #fff;
  font-size: 48px;               /* main heading */
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  text-shadow: 0 2px 8px rgba(0,0,0,.35);
  opacity: 0;
}
.slide-description{
  margin: 0 0 30px;
  max-width: 780px;
  color: #fff;
  font-size: 22px;               /* body font */
  line-height: 1.75;
  text-shadow: 0 1px 6px rgba(0,0,0,.35);
  opacity: 0;
}
.slide-btns{ opacity: 0; }

/* ---- Reload / slide change: half text left, half text right ---- */
.slider-item.active .slide-title{       animation: slideLeft  .8s cubic-bezier(.22,.61,.36,1) forwards .25s; }
.slider-item.active .slide-description{ animation: slideRight .8s cubic-bezier(.22,.61,.36,1) forwards .40s; }
.slider-item.active .slide-btns{        animation: slideRight .8s cubic-bezier(.22,.61,.36,1) forwards .55s; }

@keyframes slideLeft{
  from{ opacity: 0; transform: translateX(-70px); }
  to{   opacity: 1; transform: translateX(0); }
}
@keyframes slideRight{
  from{ opacity: 0; transform: translateX(70px); }
  to{   opacity: 1; transform: translateX(0); }
}

/* ---- Read More button ---- */
.btn-read{
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--secondary); color: #fff;
  padding: 13px 32px; border-radius: 50px;
  font-size: 17px; font-weight: 600;
  letter-spacing: 1px; text-transform: uppercase;
  text-decoration: none; transition: .3s;
    border: 2px solid var(--secondary);
}
.btn-read svg{ width: 16px; height: 16px; }
.btn-read:hover{ background: white;
    
  border: 2px solid var(--primary);
  color: #000;

    transform: translateY(-2px); }

/* ---- Arrows: corners par ---- */
.slider-arrow{
  position: absolute; top: 50%; transform: translateY(-50%);
  z-index: 6; width: 42px; height: 42px; border-radius: 4px;
  background: var(--primary); color: #fff;
  display: flex; align-items: center; justify-content: center;
  transition: .3s;
} 
@media(max-width: 1218px){
  .slider-arrow{ display: none; } 
}
.slider-arrow svg{ width: 20px; height: 20px; }
.slider-arrow:hover{ background: var(--secondary); }
.slider-prev{ left: 0; }
.slider-next{ right: 0; }

/* ---- Indicators ---- */
.slider-indicators{
  position: absolute; bottom: 22px; left: 50%; transform: translateX(-50%);
  display: flex; gap: 10px; z-index: 6;
}
.indicator{ width: 12px; height: 12px; border-radius: 50%; background: rgba(255,255,255,.5); transition: .3s; }
.indicator.active{ width: 26px; border-radius: 20px; background: var(--secondary); }

/* =========================================
   SLIDER KI APNI RESPONSIVENESS (sirf slider, global nahi)
========================================= */
@media (max-width: 1024px){
  .slider-arrow{ display: none; }        /* tablet k baad arrows hide */
}
@media (max-width: 768px){
  .hero-slider{ height: 52vh; min-height: 400px; }
  .slide-title{ font-size: 28px; }
  .slide-description{ font-size: 16px; max-width: 100%; }
}
@media (max-width: 576px){
  .hero-slider{ height: 50vh; min-height: 360px; }
  .slide-title{ font-size: 24px; }
  .btn-read{ padding: 11px 26px; }
}

















/* =========================================
   WHY CHOOSE SECTION – SITE #52
========================================= */
.why-choose-section{
  background: var(--primary);          /* primary blue band */
  padding: 45px 0;
}

.why-grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
}

.why-box{
  display: flex;
  align-items: flex-start;
  gap: 18px;
}

.why-icon{
  flex: 0 0 60px;
  width: 60px; height: 60px;
  color: #fff;
}
.why-icon svg{ width: 100%; height: 100%; display: block; }

.why-text h3{
  margin: 0 0 10px;
  color: #fff;
  font-size: 18px;                     /* aapke rule ke mutabiq 18 */
  font-weight: 700;
}
.why-text p{
  margin: 0;
  color: #fff;
  font-size: 18px;                     /* text size 18 */
  line-height: 1.7;
}

/* =========================================
   RESPONSIVENESS (sirf isi section ki)
========================================= */
@media (max-width: 1024px){
  .why-grid{ grid-template-columns: repeat(2, 1fr); gap: 30px; }   /* tablet: 2 cards */
}
@media (max-width: 768px){
  .why-choose-section{ padding: 35px 0; }
  .why-grid{ grid-template-columns: 1fr; gap: 30px; }             /* mobile: 1 card */
}



/* =========================================
   ABOUT SECTION – SITE #52
========================================= */
.about-section{
  padding: 80px 0;                 /* top padding takay border frame fit rahe */
}

.about-grid{
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 60px;
  align-items: start;              /* dono columns same top line se start */
}

/* ---- Left: text ---- */
.about-title{
  margin: 0;
  color: #000000;                  /* dark navy, image jaisa */
  font-size: 36px;                 /* main heading rule */
  font-weight: 700;
}
.about-title::after{
  content: "";
  display: block;
  width: 70px; height: 4px;
  background: var(--primary);      /* heading ke neeche primary line */
  margin-top: 20px;
}
.about-content p{
  margin: 6px 0 7px;
  color:  #000000; 
  font-size: 18px;                 /* body text rule */
  line-height: 1.7;
}
.about-content p:last-child{ margin-bottom: 0; }

/* ---- Right: image + background border frame ---- */
.about-image{
  position: relative;
}
.about-image::before{
  content: "";
  position: absolute;
  top: -32px; bottom: -32px;       /* oper neeche extend */
  left: 36px; right: 36px;         /* sides mein andar */
  border: 10px solid var(--primary);
  z-index: 0;
}
.about-image img{
  position: relative;
  z-index: 1;
  width: 100%;
  display: block;
  object-fit: cover;
}

/* =========================================
   RESPONSIVENESS (sirf about section ki)
========================================= */
@media (max-width: 1024px){
  .about-grid{ gap: 40px; }
  .about-title{ font-size: 30px; }
  .about-image::before{ top: -26px; bottom: -26px; left: 38px; right: 46px; }
}
@media (max-width: 768px){
  .about-section{ padding: 60px 0; }
  .about-grid{ grid-template-columns: 1fr; gap: 0; }
  .about-title{ font-size: 26px; }
  .about-image{ margin-top: 45px; }   /* border frame ke liye jagah */
  .about-image::before{ top: -24px; bottom: -24px; left: 20px; right: 20px; border-width: 5px; }
}




/* =========================================
   SERVICES SECTION – SITE #52
========================================= */
.services-bg{
 
  padding: 5px 0 24px;
}

/* ---- Header: title + bar + description ---- */
.services-header{
  text-align: center;
  margin-bottom: 30px;
}
.services-header .section-title{
  margin: 0;
  color: #000;
  font-size: 35px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
}
.services-header .section-title::after{
  content: "";
  display: block;
  width: 60px; height: 3px;
  background: #C9C9C9;
  margin: 16px auto 0;
}
.services-header p{
  margin: 18px 0 0;
  color:  #000000; 
  font-size: 18px;
  line-height: 1.8;
}
.services-header .phone-nowrap{
  white-space: nowrap;
}

/* ---- Grid ---- */
.services-grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
}
.service-card-link{
  display: block;
  text-decoration: none;
}
.service-image-wrapper{
  position: relative;
  overflow: hidden;
}
.service-image-wrapper img{
  width: 100%;
 
  object-fit: cover;
  display: block;
}

/* ---- Hover overlay: white pill slide-up mid par ---- */
.service-overlay{
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, 30%);
  opacity: 0;
  visibility: hidden;
  display: flex;
  align-items: center;
  gap: 12px;
  background: #fff;
  border-radius: 50px;
  padding: 10px 12px 10px 22px;
  white-space: nowrap;
  z-index: 2;
  transition: transform .4s ease, opacity .4s ease, visibility .4s, background .3s;
}
.service-card-link:hover .service-overlay{
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, -50%);
}

.service-overlay:hover{
  background: var(--secondary);
}
.service-overlay:hover .overlay-title{
  color: #fff;
}
.service-overlay:hover .service-overlay::after,
.service-overlay:hover::after{
  background: #fff;
  color: var(--secondary);
}
.overlay-title{
  margin: 0;
  color: #111;
  font-size: 16px;
  font-weight: 600;
  transition: .3s;
}
/* Right arrow black circle */
.service-overlay::after{
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  content: "\f061";
  flex: 0 0 26px;
  width: 26px; height: 26px;
  border-radius: 50%;
  background: #000;
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 11px;
  transition: .3s;
}
/* Click par pill secondary se fill */
.service-card-link:active .service-overlay{
  background: var(--secondary);
}
.service-card-link:active .overlay-title{
  color: #fff;
}
.service-card-link:active .service-overlay::after{
  background: #fff;
  color: var(--secondary);
}

/* ---- Image fail hone par title text ---- */
.service-image-wrapper.img-fallback{
  min-height: 230px;
  background: var(--bg-light);
  display: flex;
  align-items: center;
  justify-content: center;
}
.service-image-wrapper.img-fallback::before{
  content: attr(data-title);
  color: var(--primary);
  font-size: 18px;
  font-weight: 700;
  text-align: center;
  padding: 20px;
  word-break: break-word;
}

/* ---- View All Services button (secondary pill) ---- */
.srv-toggle-wrap{
  text-align: center;
  padding: 1px 0 30px;
}
.srv-toggle-btn{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: var(--secondary);
    border: 2px solid var(--secondary);
  color: #fff;
 
  padding: 17px 30px;
  border-radius: 50px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: .3s;
}
.srv-toggle-btn:hover{
    color: #000;
  background: white;
  border: 2px solid var(--primary);
}
.btn-arrow i{ font-size: 12px; }

/* =========================================
   RESPONSIVENESS
========================================= */
@media (max-width: 1024px){
  .services-grid{ gap: 20px; }
  
}
@media (max-width: 900px){
  .services-grid{ grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px){
  .services-bg{ padding: 20px 0 28px; }
  .services-header .section-title{ font-size: 24px; }
  .services-header p{ font-size: 14px; }
  .service-overlay{ padding: 8px 10px 8px 18px; gap: 10px; }
  .overlay-title{ font-size: 14px; }
  .service-image-wrapper.img-fallback{ min-height: 180px; }
  .service-image-wrapper.img-fallback::before{ font-size: 16px; }
  .srv-toggle-wrap{ padding: 14px 0 30px; }
}
@media (max-width: 576px){
  .services-grid{ grid-template-columns: 1fr; }
  .service-image-wrapper img{ height: 220px; }
}/* why choose us */



/* =========================================
   CTA BANNER – SITE #52
========================================= */
.cta-section{
  background: var(--primary);          /* primary blue band */
  padding: 45px 0;
      margin-bottom: 60px;
}
@media(max-width: 786px){
  .cta-section{
    margin-bottom: 30px;
  }
 

}
.cta-wrap{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 30px;
}

.cta-text h2{
  margin: 0 0 8px;
  color: #fff;                          /* blue bg par white heading */
  font-size: 36px;
  font-weight: 700;
}
.cta-text p{
  margin: 0;
  color: #fff;
  font-size: 18px;
}

.cta-btn{
  display: inline-block;
  background: var(--secondary);         /* secondary green button */
  color: #fff;
  border: 2px solid var(--secondary);              
  padding: 12px 30px;
  border-radius: 50px;
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  transition: .3s;
}
.cta-btn:hover{
  background: #fff;
  color:#000;
  border: 2px solid var(--secondary);
}

/* =========================================
   RESPONSIVENESS (sirf isi section ki)
========================================= */
@media (max-width: 1024px){
  .cta-text h2{ font-size: 30px; }
}
@media (max-width: 768px){
  .cta-section{ padding: 35px 0; }
  .cta-wrap{ flex-direction: column; align-items: center; text-align: center; gap: 20px; }
  .cta-text h2{ font-size: 26px; }
}


/* =========================================
   OFFERS SECTION – SITE #52
========================================= */
.offers-section{
  background: #EFEFEF;                 /* poore offers ka background, image jaisa */
  padding: 12px 0;
  margin-bottom: 60px;
}

.offers-title{
  margin: 0;
  color: #000;                          /* black heading rule */
  font-size: 36px;
  font-weight: 700;
  text-align: center;
}
.offers-title::after{
  content: "";
  display: block;
  width: 75px; height: 3px;
  background: var(--primary);           /* heading ke neeche primary line */
  margin: 18px auto 0;
}

/* ---- Slider ---- */
.offers-slider{ margin-top: 45px; }
.offers-viewport{ overflow: hidden; }
.offers-track{
  display: flex;
  gap: 12px;
  transition: transform .5s ease;
}
.offers-item{ flex: 0 0 calc((100% - 24px) / 3); }   /* desktop: 3 cards */
.offers-item img{ width: 100%; display: block; }

/* ---- Dots ---- */
.offers-dots{
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 25px;
}
.offer-dot{
  width: 10px; height: 10px;
  border-radius: 50%;
  background: #C9C9C9;
  transition: .3s;
}
.offer-dot.active{ background: var(--secondary); }   /* active dot green */

/* =========================================
   RESPONSIVENESS (sirf offers section ki)
========================================= */
@media (max-width: 1024px){
  .offers-item{ flex: 0 0 calc((100% - 12px) / 2); }  /* tablet: 2 cards */
}
@media (max-width: 768px){
  .offers-section{ padding: 8px 0; }
  .offers-title{ font-size: 26px; }
  .offers-item{ flex: 0 0 100%; }                     /* mobile: 1 card */
}

.cta-section{
  background: var(--primary);          /* primary blue band */
  padding: 45px 0;
      margin-bottom: 60px;
}
@media(max-width: 786px){
  
  .offers-section {
    margin-bottom: 30px;
  }
.cta-section{
  margin-bottom: 30px;
}
}
/* =========================================
   FUN FACTS – SITE #52
========================================= */
.funfacts-section{
  position: relative;
  background: var(--primary);
  padding: 36px 0;
  overflow: visible;      
  margin-bottom: 65px;           /* deco-4 oper bhi nazar aaye */
}

/* ---- 4 decorative images: exact positions + smooth up/down float ---- */
.ff-deco{ position: absolute; z-index: 0; animation: ffFloat 4s ease-in-out infinite; }
.ff-deco img{ width: 65%; display: block; }

.ff-deco-1{ width: 150px; left: 2%;  top: 12%; }                          /* striped triangle */
.ff-deco-2{ width: 160px; left: 1%;  top: 46%; animation-duration: 5s; }  /* dots square */
.ff-deco-3{ width: 70px;  left: 10%; top: 46%; animation-duration: 4.5s; animation-delay: .5s; }  /* chhota triangle */
.ff-deco-4{ width: 360px; right: 0;  top: -50px; animation-duration: 6s; } /* right bara dots pattern */

@keyframes ffFloat{
  0%, 100%{ transform: translateY(0); }
  50%{     transform: translateY(-10px); }
}

/* ---- Counters ---- */
.ff-grid{
  position: relative; z-index: 1;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 40px;
}
.ff-item{
  text-align: center;
  opacity: 0; transform: translateY(45px);      /* reload par slide-up */
  transition: opacity .7s ease, transform .7s ease;
}
.ff-item:nth-child(2){ transition-delay: .15s; }
.ff-item:nth-child(3){ transition-delay: .30s; }
.ff-item:nth-child(4){ transition-delay: .45s; }
.funfacts-section.animated .ff-item{ opacity: 1; transform: translateY(0); }

.ff-icon{ color: #fff; }
.ff-icon svg{ width: 56px; height: 56px; }
.ff-count{
  margin: 14px 0 10px;
  color: #fff;
  font-size: 42px;
  font-weight: 800;
  letter-spacing: 1px;
}
.ff-label{ color: #fff; font-size: 18px; }

/* =========================================
   RESPONSIVENESS
========================================= */
@media (max-width: 1024px){
  .ff-grid{ grid-template-columns: repeat(2, 1fr); gap: 40px 20px; }
  .ff-deco-4{ width: 260px; top: -30px; }
}
@media (max-width: 768px){
  .funfacts-section{ padding: 55px 0; }
  .ff-count{ font-size: 34px; }
  .ff-icon svg{ width: 46px; height: 46px; }
  .ff-deco-1{ width: 100px; }
  .ff-deco-2{ width: 100px; }
  .ff-deco-3{ display: none; }
  .ff-deco-4{ width: 200px; }
}
@media (max-width: 576px){
  .ff-grid{ gap: 30px 15px; }
  .ff-count{ font-size: 28px; }
  .ff-label{ font-size: 16px; }
}

@media(max-width: 786px){
  
  .funfacts-section {
    
    margin-bottom: 30px;
}

}

/* =========================================
   TESTIMONIALS – SITE #52
========================================= */
.testimonials-section{
  background-size: cover;
  background-position: center;
  background-attachment: fixed;          /* fixed image, jesa kaha */
  position: relative;
  padding: 90px 0;
  text-align: center;
}
.testimonials-section::before{          /* dark overlay */
  content: "";
  position: absolute; inset: 0;
  background: rgba(40, 45, 55, .55);
}
.testimonials-section .container-1200{ position: relative; z-index: 1; }

.testi-title{
  margin: 0 0 30px;
  color: #fff;
  font-size: 36px;
  font-weight: 700;
}

/* ---- Slides ---- */
.testi-slider{ min-height: 170px; }
.testi-slide{ display: none; }
.testi-slide.active{ display: block; animation: testiFade .7s ease; }
@keyframes testiFade{
  from{ opacity: 0; transform: translateY(12px); }
  to{   opacity: 1; transform: translateY(0); }
}

.testi-quote{
  margin: 0 auto 22px;
  max-width: 800px;
  color: #fff;
  font-size: 18px;
  font-style: italic;
  line-height: 1.8;
}
.testi-divider{
  width: 60px; height: 2px;
  background: rgba(255,255,255,.8);
  margin: 0 auto 18px;
}
.testi-author{ margin: 0; color: #fff; font-size: 16px; }
.testi-name{ color: var(--primary); }          /* name primary blue, image jaisa */

/* ---- Dots ---- */
.testi-dots{
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 35px;
}
.testi-dot{
  width: 10px; height: 10px;
  border-radius: 50%;
  background: #C9C9C9;
  transition: .3s;
}
.testi-dot.active{ background: var(--primary); }   /* active blue, image jaisa */

/* =========================================
   RESPONSIVENESS
========================================= */
@media (max-width: 1024px){
  .testi-title{ font-size: 30px; }
}
@media (max-width: 768px){
  .testimonials-section{ padding: 60px 0; background-attachment: scroll; }  /* mobile par fixed bg issue fix */
  .testi-title{ font-size: 26px; }
  .testi-slider{ min-height: 260px; }
  .testi-quote{ font-size: 16px; }
}
@media (max-width: 576px){
  .testi-slider{ min-height: 320px; }
}

/* =========================================
   BLOGS SECTION – SITE #52
========================================= */
.blogs-section{ padding: 70px 0; }

/* ---- Header: primary eyebrow + black heading + primary bar ---- */
.blogs-header{ text-align: center; margin-bottom: 45px; }
.blogs-eyebrow{
  display: block;
  color: var(--primary);
  font-size: 14px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  margin-bottom: 10px;
}
.blogs-title{
  margin: 0;
  color: #000;                          /* black heading rule */
  font-size: 36px;
  font-weight: 700;
}
.blogs-title::after{
  content: "";
  display: block;
  width: 70px; height: 3px;
  background: var(--primary);           /* primary bar */
  margin: 18px auto 0;
}

/* ---- Grid (container-1200 jaisi alignment, HTML same rakhne ke liye CSS mein) ---- */
.blogs-grid{
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
  box-sizing: border-box;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
}

/* ---- Card ---- */
.blog-card{
  position: relative;
  display: block;
  background: #F2F3F5;
  text-decoration: none;
}

/* Image frame: green border + primary blue padding, image jaisa */

.blog-image img{
  width: 100%;
 
  object-fit: cover;
  display: block;
}

/* ---- Arrow: image aur description ke beech right par ---- */
.blog-arrow{
  position: absolute;
  right: 3px;
  top: 197px;                            /* image bottom boundary (230 + 8*2 + 2*2) */
  transform: translateY(-50%);
  width: 44px; height: 44px;
  border-radius: 50%;
  background: var(--primary);            /* default primary */
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  z-index: 2;
  transition: .3s;
}
@media(max-width: 400px){
  .blog-arrow{
    top: 148px;
  }
}
.blog-arrow svg{ width: 20px; height: 20px; }
.blog-card:hover .blog-arrow{ background: var(--secondary); }   /* hover par secondary */
.blog-card:hover .blog-title{ color: var(--primary); }          /* title hover primary, middle card jaisa */

/* ---- Body ---- */
.blog-body{ padding: 28px 20px 30px; }
.blog-title{
  margin: 0 0 12px;
  color: #000;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.45;
  transition: .3s;
}
.blog-excerpt{
  margin: 0;
  color: #000000;
  font-size: 15px;
  line-height: 1.7;
}
.blog-read{ display: none; }   /* image mein nahi hai is liye hidden — chahiye to display:inline-block karein */
.no-blogs{ text-align: center; color: #000000; }

/* =========================================
   RESPONSIVENESS
========================================= */
@media (max-width: 1024px){
  .blogs-grid{ grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px){
  .blogs-section{ padding: 50px 0; }
  .blogs-title{ font-size: 26px; }
  .blogs-grid{ grid-template-columns: 1fr; }
}