/* =========================================================
   BADAMI SWEETS - GLOBAL STYLE.CSS
   Use this single CSS file for:
   Home Page
   About Page
   Contact Page
   Blog Listing
   Blog Details
   Restaurant Page
   ========================================================= */

/* =========================
   GOOGLE FONTS
========================= */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Playfair+Display:wght@600;700&display=swap');

/* =========================
   ROOT VARIABLES
========================= */

:root{
      --primary:#f57c00;
      --dark:#2b160f;
      --text:#555;
      --light:#fffaf5;
      --border:#eee3da;
    }

    *{
      margin:0;
      padding:0;
      box-sizing:border-box;
    }

    body{
      font-family:'Inter',sans-serif;
      background:#fff;
      color:#333;
      overflow-x:hidden;
    }

    h1,h2,h3,h4,h5{
      font-family:'Playfair Display',serif;
      color:var(--dark);
    }

    a{
      text-decoration:none;
    }

    img{
      width:100%;
      display:block;
    }

    section{
      padding:90px 0;
    }

    .section-title{
      font-size:52px;
      line-height:1.1;
      margin-bottom:20px;
    }

    .section-subtitle{
      color:#666;
      font-size:18px;
    }

    .btn-orange{
      background:var(--primary);
      color:#fff;
      border:none;
      border-radius:50px;
      padding:14px 28px;
      font-weight:600;
      transition:0.3s;
    }

    .btn-orange:hover{
      background:#e56f00;
      color:#fff;
    }

    /* ================= NAVBAR ================= */

    .navbar{
      padding:24px 0;
      background:#fff;
    }

    .logo{
      font-family:'Playfair Display',serif;
      font-size:44px;
      line-height:0.9;
      color:#b13e00;
      font-weight:700;
    }

    .logo span{
      display:block;
      font-size:22px;
      margin-left:35px;
    }

    .nav-link{
      color:#222;
      margin:0 12px;
      font-weight:500;
      position:relative;
    }

    .nav-link.active,
    .nav-link:hover{
      color:var(--primary);
    }

    .search-btn{
      width:48px;
      height:48px;
      border:none;
      border-radius:50%;
      background:var(--primary);
      color:#fff;
      font-size:18px;
    }

    /* ================= HERO ================= */

    .hero{
      background:#fffaf7;
      padding:70px 0 120px;
      position:relative;
    }

    .hero h1{
      font-size:72px;
      line-height:1.05;
      margin-bottom:25px;
    }

    .hero p{
      color:#666;
      font-size:18px;
      max-width:500px;
    }

    .search-box{
      background:#fff;
      border-radius:50px;
      padding:10px;
      display:flex;
      align-items:center;
      margin-top:35px;
      box-shadow:0 10px 30px rgba(0,0,0,0.06);
      max-width:560px;
    }

    .search-box input{
      border:none;
      flex:1;
      outline:none;
      padding:10px 18px;
      font-size:15px;
    }

    .search-box button{
      width:52px;
      height:52px;
      border:none;
      border-radius:50%;
      background:var(--primary);
      color:#fff;
      font-size:18px;
    }

    .popular-tags{
      margin-top:25px;
      display:flex;
      align-items:center;
      flex-wrap:wrap;
      gap:10px;
    }

    .popular-tags span{
      font-weight:600;
      color:#222;
    }

    .tag{
      border:1px solid #ddd;
      border-radius:50px;
      padding:10px 18px;
      background:#fff;
      color:#666;
      font-size:14px;
    }

    .hero-image{
      border-radius:30px;
    }

    /* ================= CATEGORY ================= */

    .categories{
      margin-top:-60px;
      position:relative;
      z-index:20;
    }

    .category-wrapper{
      background:#fff;
      border-radius:28px;
      padding:40px 20px;
      box-shadow:0 15px 40px rgba(0,0,0,0.06);
    }

    .category-card{
      text-align:center;
      padding:20px 10px;
      transition:0.3s;
      border-radius:20px;
    }

    .category-card:hover{
      background:#fff6ef;
      transform:translateY(-5px);
    }

    .icon-circle{
      width:90px;
      height:90px;
      border-radius:50%;
      background:#fff4eb;
      display:flex;
      align-items:center;
      justify-content:center;
      margin:auto;
      color:var(--primary);
      font-size:32px;
      margin-bottom:18px;
    }

    .category-card h5{
      font-size:18px;
      margin-bottom:8px;
    }

    .category-card p{
      color:#777;
      font-size:14px;
      margin-bottom:15px;
    }

    .explore-link{
      color:var(--primary);
      font-weight:600;
    }

    /* ================= BLOG ================= */

    .blog-card{
      display:flex;
      gap:20px;
      border-radius:22px;
      overflow:hidden;
      background:#fff;
      margin-bottom:28px;
      border:1px solid #f1f1f1;
      transition:0.3s;
    }

    .blog-card:hover{
      transform:translateY(-5px);
      box-shadow:0 12px 30px rgba(0,0,0,0.06);
    }

    .blog-card img{
      width:280px;
      object-fit:cover;
    }

    .blog-content{
      padding:25px;
    }

    .blog-tag{
      color:var(--primary);
      text-transform:uppercase;
      font-weight:700;
      font-size:13px;
      margin-bottom:12px;
      display:inline-block;
    }

    .blog-content h3{
      font-size:34px;
      margin-bottom:12px;
    }

    .blog-content p{
      color:#666;
      margin-bottom:14px;
    }

    .meta{
      color:#888;
      font-size:14px;
    }

    /* ================= SIDEBAR ================= */

    .sidebar-box{
      background:#fffaf5;
      border-radius:24px;
      padding:35px;
      margin-bottom:30px;
      border:1px solid var(--border);
    }

    .sidebar-box h4{
      margin-bottom:18px;
    }

    .trending-item{
      display:flex;
      gap:15px;
      margin-bottom:20px;
    }

    .trending-item img{
      width:90px;
      height:70px;
      object-fit:cover;
      border-radius:12px;
    }

    .trending-item h6{
      font-size:16px;
      margin-bottom:5px;
    }

    .trending-item small{
      color:#999;
    }

    /* ================= VIDEO SECTION ================= */

    .video-section{
      background:#fffaf6;
    }

    .video-wrapper{
      position:relative;
      border-radius:26px;
      overflow:hidden;
    }

    .play-btn{
      position:absolute;
      top:50%;
      left:50%;
      transform:translate(-50%,-50%);
      width:95px;
      height:95px;
      border-radius:50%;
      background:#fff;
      color:var(--primary);
      display:flex;
      align-items:center;
      justify-content:center;
      font-size:38px;
    }

    /* ================= TESTIMONIALS ================= */

    .testimonial-section{
      background:#fff;
    }

    .testimonial-card{
      background:#fff;
      border-radius:24px;
      padding:30px;
      border:1px solid #f0e6de;
      height:100%;
      position:relative;
    }

    .testimonial-top{
      display:flex;
      align-items:center;
      gap:15px;
      margin-bottom:20px;
    }

    .testimonial-top img{
      width:60px;
      height:60px;
      border-radius:50%;
      object-fit:cover;
    }

    .location{
      color:var(--primary);
      font-weight:600;
      font-size:14px;
    }

    .stars{
      color:var(--primary);
      margin-bottom:15px;
    }

    .testimonial-card p{
      color:#555;
      line-height:1.7;
    }

    /* ================= NEWSLETTER ================= */

    .newsletter{
      background:#fff5ea;
      border-radius:28px;
      padding:45px;
      margin-top:60px;
    }

    .newsletter-form{
      display:flex;
      gap:15px;
      margin-top:20px;
      flex-wrap:wrap;
    }

    .newsletter-form input{
      flex:1;
      min-width:220px;
      border:none;
      border-radius:50px;
      padding:16px 20px;
      outline:none;
    }

    .feature-box{
      text-align:center;
      padding:15px;
    }

    .feature-icon{
      color:var(--primary);
      font-size:36px;
      margin-bottom:12px;
    }

    /* ================= FOOTER ================= */

    footer{
      padding:90px 0 30px;
      background:#fff;
    }

    .footer-title{
      font-size:22px;
      margin-bottom:20px;
    }

    .footer-links a{
      display:block;
      color:#666;
      margin-bottom:12px;
      transition:0.3s;
    }

    .footer-links a:hover{
      color:var(--primary);
      padding-left:5px;
    }

    .social-icons{
      display:flex;
      gap:12px;
      margin-top:25px;
    }

    .social-icons a{
      width:42px;
      height:42px;
      border-radius:50%;
      background:#fff4eb;
      color:var(--primary);
      display:flex;
      align-items:center;
      justify-content:center;
      transition:0.3s;
    }

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

    .copyright{
      text-align:center;
      margin-top:50px;
      padding-top:25px;
      border-top:1px solid #eee;
      color:#888;
    }

    /* ================= RESPONSIVE ================= */

    @media(max-width:991px){

      .hero{
        text-align:center;
      }

      .hero h1{
        font-size:52px;
      }

      .hero p{
        margin:auto;
      }

      .search-box{
        margin:auto;
        margin-top:30px;
      }

      .popular-tags{
        justify-content:center;
      }

      .hero-image{
        margin-top:50px;
      }

      .blog-card{
        flex-direction:column;
      }

      .blog-card img{
        width:100%;
        height:260px;
      }

      .video-content{
        margin-bottom:40px;
      }

      .newsletter{
        text-align:center;
      }
    }

    @media(max-width:767px){

      section{
        padding:70px 0;
      }

      .hero h1{
        font-size:42px;
      }

      .section-title{
        font-size:40px;
      }

      .blog-content h3{
        font-size:28px;
      }

      .newsletter{
        padding:30px 20px;
      }

      .category-wrapper{
        padding:25px 15px;
      }
    }
    
    /* =========================================================
   ABOUT PAGE CSS
========================================================= */

/* =========================
   ABOUT HERO SECTION
========================= */

.about-hero-section{
  background:#fffaf5;
  overflow:hidden;
  position:relative;
}

.about-hero-subtitle{
  color:#f57c00;
  text-transform:uppercase;
  letter-spacing:2px;
  font-weight:700;
  margin-bottom:20px;
  display:inline-block;
}

.about-hero-title{
  font-size:72px;
  line-height:1.2;
  margin-bottom:30px;
  color:#2c140c;
  font-family:'Playfair Display',serif;
}

.about-hero-text{
  color:#666;
  font-size:18px;
  line-height:2;
  margin-bottom:35px;
  max-width:650px;
}

.about-hero-btn{
  background:#f57c00;
  color:#fff;
  padding:16px 34px;
  border-radius:50px;
  display:inline-flex;
  align-items:center;
  gap:10px;
  font-weight:600;
  transition:0.3s;
}

.about-hero-btn:hover{
  background:#e46f00;
  color:#fff;
}

.about-hero-image{
  border-radius:35px;
  overflow:hidden;
  box-shadow:0 20px 50px rgba(0,0,0,0.08);
}

.about-hero-image img{
  width:100%;
  height:100%;
  object-fit:cover;
}

/* =========================
   ABOUT STATS
========================= */

.about-stats-section{
  position:relative;
  margin-top:-70px;
  z-index:10;
}

.about-stats-wrapper{
  background:#fff;
  border-radius:30px;
  padding:45px;
  box-shadow:0 15px 40px rgba(0,0,0,0.06);
}

.about-stat-item{
  text-align:center;
}

.about-stat-number{
  font-size:52px;
  font-weight:700;
  color:#f57c00;
  margin-bottom:10px;
  font-family:'Playfair Display',serif;
}

.about-stat-text{
  color:#777;
  font-weight:500;
}

/* =========================
   ABOUT STORY SECTION
========================= */

.about-story-section{
  background:#fff;
}

.about-story-image{
  border-radius:30px;
  overflow:hidden;
}

.about-story-image img{
  width:100%;
  height:100%;
  object-fit:cover;
}

.about-section-subtitle{
  color:#f57c00;
  text-transform:uppercase;
  letter-spacing:2px;
  font-weight:700;
  margin-bottom:18px;
  display:inline-block;
}

.about-section-title{
  font-size:56px;
  line-height:1.3;
  margin-bottom:25px;
  color:#2c140c;
  font-family:'Playfair Display',serif;
}

.about-section-text{
  color:#666;
  line-height:2;
  margin-bottom:22px;
}

/* =========================
   ABOUT FEATURES
========================= */

.about-features-section{
  background:#fffaf5;
}

.about-feature-card{
  background:#fff;
  border:1px solid #f2f2f2;
  border-radius:28px;
  padding:40px 30px;
  text-align:center;
  height:100%;
  transition:0.4s;
}

.about-feature-card:hover{
  transform:translateY(-8px);
  box-shadow:0 15px 35px rgba(0,0,0,0.07);
}

.about-feature-icon{
  width:90px;
  height:90px;
  margin:auto;
  margin-bottom:25px;
  border-radius:50%;
  background:#fff4ea;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:36px;
  color:#f57c00;
}

.about-feature-title{
  font-size:30px;
  margin-bottom:18px;
  color:#2c140c;
  font-family:'Playfair Display',serif;
}

.about-feature-text{
  color:#666;
  line-height:1.9;
}

/* =========================
   ABOUT TEAM SECTION
========================= */

.about-team-section{
  background:#fff;
}

.about-team-card{
  text-align:center;
  background:#fff;
  border-radius:30px;
  overflow:hidden;
  border:1px solid #f2f2f2;
  transition:0.4s;
  height:100%;
}

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

.about-team-image{
  overflow:hidden;
}

.about-team-image img{
  width:100%;
  height:340px;
  object-fit:cover;
  transition:0.5s;
}

.about-team-card:hover .about-team-image img{
  transform:scale(1.08);
}

.about-team-content{
  padding:30px;
}

.about-team-name{
  font-size:32px;
  margin-bottom:8px;
  color:#2c140c;
  font-family:'Playfair Display',serif;
}

.about-team-role{
  color:#f57c00;
  font-weight:600;
  margin-bottom:18px;
}

.about-team-social{
  display:flex;
  justify-content:center;
  gap:12px;
  margin-top:20px;
}

.about-team-social a{
  width:42px;
  height:42px;
  border-radius:50%;
  background:#fff4ea;
  color:#f57c00;
  display:flex;
  align-items:center;
  justify-content:center;
  transition:0.3s;
}

.about-team-social a:hover{
  background:#f57c00;
  color:#fff;
}

/* =========================
   ABOUT TESTIMONIALS
========================= */

.about-testimonial-section{
  background:#fffaf5;
}

.about-testimonial-card{
  background:#fff;
  padding:40px;
  border-radius:30px;
  border:1px solid #f1f1f1;
  height:100%;
}

.about-testimonial-top{
  display:flex;
  align-items:center;
  gap:18px;
  margin-bottom:25px;
}

.about-testimonial-top img{
  width:75px;
  height:75px;
  border-radius:50%;
  object-fit:cover;
}

.about-testimonial-name{
  font-size:28px;
  margin-bottom:5px;
  color:#2c140c;
  font-family:'Playfair Display',serif;
}

.about-testimonial-location{
  color:#f57c00;
  font-weight:600;
}

.about-testimonial-stars{
  color:#f57c00;
  margin-bottom:18px;
}

.about-testimonial-text{
  line-height:2;
  color:#666;
}

/* =========================
   ABOUT CTA SECTION
========================= */

.about-cta-section{
  background:#fff;
}

.about-cta-box{
  background:#fff5ea;
  border-radius:35px;
  padding:70px;
  text-align:center;
}

.about-cta-title{
  font-size:58px;
  margin-bottom:20px;
  color:#2c140c;
  font-family:'Playfair Display',serif;
}

.about-cta-text{
  max-width:750px;
  margin:auto;
  color:#666;
  line-height:2;
  margin-bottom:35px;
}

.about-newsletter-form{
  max-width:700px;
  margin:auto;
  display:flex;
  gap:15px;
  flex-wrap:wrap;
}

.about-newsletter-form input{
  flex:1;
  min-width:250px;
  border:none;
  border-radius:50px;
  padding:18px 22px;
}

.about-newsletter-btn{
  border:none;
  background:#f57c00;
  color:#fff;
  border-radius:50px;
  padding:18px 35px;
  font-weight:600;
  transition:0.3s;
}

.about-newsletter-btn:hover{
  background:#e46f00;
}

/* =========================
   RESPONSIVE
========================= */

@media(max-width:992px){

  .about-hero-title{
    font-size:54px;
  }

  .about-section-title{
    font-size:42px;
  }

  .about-cta-title{
    font-size:42px;
  }

  .about-stats-section{
    margin-top:40px;
  }

}

@media(max-width:768px){

  .about-hero-title{
    font-size:42px;
  }

  .about-section-title{
    font-size:34px;
  }

  .about-cta-title{
    font-size:34px;
  }

  .about-cta-box{
    padding:40px 25px;
  }

  .about-newsletter-form{
    flex-direction:column;
  }

  .about-newsletter-btn{
    width:100%;
  }

}

@media(max-width:576px){

  .about-hero-title{
    font-size:34px;
  }

  .about-section-title{
    font-size:30px;
  }

  .about-cta-title{
    font-size:30px;
  }

  .about-stat-number{
    font-size:40px;
  }

}

/* =========================================================
   CONTACT PAGE CSS
========================================================= */

/* =========================
   CONTACT PAGE HEADER
========================= */

.contact-page-header{
  background:#fffaf5;
  padding:100px 0;
  text-align:center;
}

.contact-page-subtitle{
  color:#f57c00;
  font-weight:700;
  letter-spacing:2px;
  text-transform:uppercase;
  margin-bottom:20px;
  display:inline-block;
}

.contact-page-title{
  font-size:72px;
  line-height:1.2;
  margin-bottom:25px;
  color:#2c140c;
  font-family:'Playfair Display',serif;
}

.contact-page-text{
  max-width:750px;
  margin:auto;
  color:#666;
  line-height:2;
  font-size:18px;
}

/* =========================
   CONTACT INFO SECTION
========================= */

.contact-info-section{}

.contact-info-card{
  background:#fff;
  border:1px solid #f2f2f2;
  border-radius:30px;
  padding:40px 30px;
  text-align:center;
  height:100%;
  transition:0.4s;
}

.contact-info-card:hover{
  transform:translateY(-8px);
  box-shadow:0 18px 40px rgba(0,0,0,0.06);
}

.contact-info-icon{
  width:90px;
  height:90px;
  margin:auto;
  margin-bottom:25px;
  border-radius:50%;
  background:#fff4ea;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:36px;
  color:#f57c00;
}

.contact-info-title{
  font-size:30px;
  margin-bottom:18px;
  color:#2c140c;
  font-family:'Playfair Display',serif;
}

.contact-info-text{
  color:#666;
  line-height:1.9;
  margin-bottom:0;
}

/* =========================
   CONTACT FORM SECTION
========================= */

.contact-form-section{}

.contact-form-wrapper{
  background:#fffaf5;
  border-radius:35px;
  overflow:hidden;
}

.contact-form-box{
  padding:60px;
}

.contact-form-subtitle{
  color:#f57c00;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:1px;
  margin-bottom:15px;
  display:inline-block;
}

.contact-form-title{
  font-size:52px;
  margin-bottom:20px;
  color:#2c140c;
  font-family:'Playfair Display',serif;
}

.contact-form-text{
  color:#666;
  line-height:1.9;
  margin-bottom:35px;
}

.contact-input{
  border:none;
  border-radius:18px;
  padding:18px 20px;
  background:#fff;
  margin-bottom:20px;
  box-shadow:none !important;
}

.contact-textarea{
  height:180px;
  resize:none;
}

.contact-submit-btn{
  border:none;
  background:#f57c00;
  color:#fff;
  padding:16px 34px;
  border-radius:50px;
  font-weight:600;
  transition:0.3s;
}

.contact-submit-btn:hover{
  background:#e36f00;
}

.contact-form-image{
  height:100%;
}

.contact-form-image img{
  width:100%;
  height:100%;
  object-fit:cover;
}

/* =========================
   CONTACT FAQ SECTION
========================= */

.contact-faq-section{
  background:#fff;
}

.contact-faq-title{
  font-size:56px;
  color:#2c140c;
  font-family:'Playfair Display',serif;
}

.contact-faq-item{
  border:none;
  border-radius:20px !important;
  overflow:hidden;
  margin-bottom:20px;
  background:#fffaf5;
}

.contact-faq-button{
  background:#fffaf5;
  padding:24px 28px;
  font-weight:600;
  color:#2c140c;
  box-shadow:none !important;
}

.contact-faq-button:not(.collapsed){
  background:#fff4ea;
  color:#f57c00;
}

.contact-faq-body{
  padding:25px 28px;
  color:#666;
  line-height:1.9;
}

/* =========================
   CONTACT MAP SECTION
========================= */

.contact-map-section{}

.contact-map-box{
  border-radius:35px;
  overflow:hidden;
  box-shadow:0 15px 35px rgba(0,0,0,0.06);
}

.contact-map-box iframe{
  width:100%;
  height:500px;
  border:0;
}

/* =========================
   CONTACT NEWSLETTER
========================= */

.contact-newsletter-section{}

.contact-newsletter-box{
  background:#fff5ea;
  border-radius:35px;
  padding:70px;
  text-align:center;
}

.contact-newsletter-title{
  font-size:56px;
  margin-bottom:20px;
  color:#2c140c;
  font-family:'Playfair Display',serif;
}

.contact-newsletter-text{
  max-width:700px;
  margin:auto;
  color:#666;
  line-height:2;
  margin-bottom:35px;
}

.contact-newsletter-form{
  max-width:700px;
  margin:auto;
  display:flex;
  gap:15px;
  flex-wrap:wrap;
}

.contact-newsletter-input{
  flex:1;
  min-width:250px;
  border:none;
  border-radius:50px;
  padding:18px 22px;
  outline:none;
}

.contact-newsletter-btn{
  border:none;
  background:#f57c00;
  color:#fff;
  border-radius:50px;
  padding:18px 35px;
  font-weight:600;
  transition:0.3s;
}

.contact-newsletter-btn:hover{
  background:#e36f00;
}

/* =========================
   RESPONSIVE
========================= */

@media(max-width:992px){

  .contact-page-title{
    font-size:54px;
  }

  .contact-form-title{
    font-size:42px;
  }

  .contact-newsletter-title{
    font-size:42px;
  }

  .contact-form-box{
    padding:40px;
  }

}

@media(max-width:768px){

  .contact-page-title{
    font-size:40px;
  }

  .contact-form-title{
    font-size:34px;
  }

  .contact-newsletter-title{
    font-size:34px;
  }

  .contact-newsletter-box{
    padding:40px 25px;
  }

  .contact-newsletter-form{
    flex-direction:column;
  }

  .contact-newsletter-btn{
    width:100%;
  }

  .contact-form-box{
    padding:30px 25px;
  }

}

@media(max-width:576px){

  .contact-page-title{
    font-size:34px;
  }

  .contact-form-title{
    font-size:30px;
  }

  .contact-newsletter-title{
    font-size:30px;
  }

  .contact-faq-title{
    font-size:34px;
  }

}

/* =========================================
   BLOG DETAILS PAGE CSS
   UNIQUE CLASSES
========================================= */

/* HERO */
.blog-details-hero{
  background:var(--light);
  padding:70px 0;
}

.blog-details-category{
  color:var(--primary);
  font-weight:700;
  letter-spacing:1px;
  text-transform:uppercase;
  margin-bottom:20px;
  display:inline-block;
}

.blog-details-title{
  font-size:62px;
  line-height:1.2;
  margin-bottom:25px;
}

.blog-details-desc{
  max-width:850px;
}

.blog-details-meta{
  display:flex;
  flex-wrap:wrap;
  gap:25px;
  color:#777;
  font-size:15px;
  margin-top:20px;
}

.blog-details-meta i{
  color:var(--primary);
  margin-right:8px;
}

.blog-details-cover{
  border-radius:30px;
  overflow:hidden;
  margin-top:50px;
  box-shadow:0 15px 40px rgba(0,0,0,0.08);
}

.blog-details-cover img{
  width:100%;
  height:550px;
  object-fit:cover;
}

/* CONTENT */
.blog-details-content{
  font-size:18px;
  line-height:2;
  color:#555;
}

.blog-details-content p{
  margin-bottom:30px;
}

.blog-details-content h2{
  margin-top:50px;
  margin-bottom:20px;
  font-size:42px;
}

.blog-details-content blockquote{
  background:#fff7ef;
  border-left:5px solid var(--primary);
  padding:35px;
  border-radius:20px;
  font-size:24px;
  font-style:italic;
  line-height:1.8;
  color:#333;
  margin:50px 0;
}

/* TAGS */
.blog-details-tags{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  margin-top:50px;
}

.blog-details-tag{
  background:#fff4ea;
  color:var(--primary);
  padding:12px 22px;
  border-radius:50px;
  font-weight:600;
  font-size:14px;
}

/* AUTHOR */
.blog-details-author-box{
  background:#fffaf6;
  border:1px solid var(--border);
  border-radius:30px;
  padding:40px;
  margin-top:70px;
  display:flex;
  gap:25px;
  align-items:center;
}

.blog-details-author-box img{
  width:120px;
  height:120px;
  border-radius:50%;
  object-fit:cover;
}

.blog-details-author-box h4{
  margin-bottom:10px;
}

.blog-details-author-box p{
  color:#666;
  line-height:1.8;
  margin-bottom:0;
}

/* SIDEBAR */
.blog-details-sidebar-card{
  background:#fff;
  border:1px solid #f1f1f1;
  border-radius:25px;
  padding:35px;
  margin-bottom:35px;
}

.blog-details-sidebar-title{
  font-size:30px;
  margin-bottom:30px;
}

/* SEARCH */
.blog-details-search-box{
  position:relative;
}

.blog-details-search-box input{
  width:100%;
  border:none;
  background:#fff7f1;
  border-radius:50px;
  padding:16px 60px 16px 22px;
  outline:none;
}

.blog-details-search-box button{
  position:absolute;
  right:8px;
  top:50%;
  transform:translateY(-50%);
  width:45px;
  height:45px;
  border:none;
  border-radius:50%;
  background:var(--primary);
  color:#fff;
}

/* RECENT POSTS */
.blog-details-recent-post{
  display:flex;
  gap:15px;
  margin-bottom:25px;
  align-items:center;
}

.blog-details-recent-post:last-child{
  margin-bottom:0;
}

.blog-details-recent-post img{
  width:90px;
  height:90px;
  border-radius:16px;
  object-fit:cover;
}

.blog-details-recent-post h6{
  font-size:18px;
  line-height:1.5;
  margin-bottom:8px;
}

.blog-details-recent-post small{
  color:#888;
}

/* CATEGORY LIST */
.blog-details-category-list a{
  display:flex;
  justify-content:space-between;
  padding:14px 0;
  border-bottom:1px solid #f3f3f3;
  color:#555;
  transition:0.3s;
}

.blog-details-category-list a:hover{
  color:var(--primary);
  padding-left:6px;
}

/* COMMENTS */
.blog-details-comment-box{
  background:#fff;
  border:1px solid #f1f1f1;
  border-radius:24px;
  padding:30px;
  margin-bottom:25px;
}

.blog-details-comment-header{
  display:flex;
  gap:18px;
  margin-bottom:20px;
  align-items:center;
}

.blog-details-comment-header img{
  width:70px;
  height:70px;
  border-radius:50%;
  object-fit:cover;
}

.blog-details-comment-box p{
  color:#666;
  line-height:1.9;
}

/* COMMENT FORM */
.blog-details-comment-form{
  background:#fffaf5;
  border-radius:30px;
  padding:45px;
  margin-top:60px;
}

.blog-details-comment-form .form-control{
  border:none;
  background:#fff;
  padding:18px 20px;
  border-radius:18px;
  margin-bottom:20px;
  box-shadow:none !important;
}

.blog-details-comment-form textarea.form-control{
  height:180px;
  resize:none;
}

.blog-details-submit-btn{
  border:none;
  background:var(--primary);
  color:#fff;
  padding:16px 35px;
  border-radius:50px;
  font-weight:600;
  transition:0.3s;
}

.blog-details-submit-btn:hover{
  background:#e36f00;
}

/* RESPONSIVE */
@media(max-width:992px){

  .blog-details-title{
    font-size:48px;
  }

  .blog-details-author-box{
    flex-direction:column;
    text-align:center;
  }

}

@media(max-width:768px){

  .blog-details-title{
    font-size:38px;
  }

  .blog-details-cover img{
    height:320px;
  }

  .blog-details-content h2{
    font-size:32px;
  }

  .blog-details-author-box{
    padding:30px;
  }

  .blog-details-comment-form{
    padding:30px 25px;
  }

  .blog-details-meta{
    gap:15px;
  }

}

/* =========================
    BLOG LISTING SECTION
========================= */

.blog-listing-section{
  position:relative;
}

/* GRID */

.blog-list-wrapper{
  position:relative;
}

/* =========================
    BLOG CARD
========================= */

.blog-list-card{
  background:#fff;
  border-radius:30px;
  overflow:hidden;
  height:100%;
  border:1px solid rgba(0,0,0,0.05);
  box-shadow:0 10px 30px rgba(0,0,0,0.04);
  transition:0.4s ease;
  position:relative;
}

.blog-list-card:hover{
  transform:translateY(-10px);
  box-shadow:0 25px 60px rgba(0,0,0,0.08);
}

/* =========================
    BLOG IMAGE
========================= */

.blog-list-image{
  position:relative;
  overflow:hidden;
}

.blog-list-image img{
  width:100%;
  height:280px;
  object-fit:cover;
  transition:0.6s ease;
}

.blog-list-card:hover .blog-list-image img{
  transform:scale(1.08);
}

/* CATEGORY */

.blog-list-category{
  position:absolute;
  top:20px;
  left:20px;
  background:var(--primary);
  color:#fff;
  padding:10px 18px;
  border-radius:50px;
  font-size:13px;
  font-weight:600;
  letter-spacing:0.5px;
  z-index:2;
}

/* =========================
    BLOG CONTENT
========================= */

.blog-list-content{
  padding:35px;
}

/* META */

.blog-list-meta{
  display:flex;
  flex-wrap:wrap;
  gap:18px;
  margin-bottom:18px;
  font-size:14px;
  color:#888;
}

.blog-list-meta span{
  display:flex;
  align-items:center;
}

.blog-list-meta i{
  color:var(--primary);
  margin-right:7px;
}

/* TITLE */

.blog-list-title{
  font-size:32px;
  line-height:1.4;
  margin-bottom:18px;
  transition:0.3s;
}

.blog-list-card:hover .blog-list-title{
  color:var(--primary);
}

/* DESCRIPTION */

.blog-list-desc{
  color:#666;
  line-height:1.9;
  margin-bottom:28px;
}

/* BUTTON */

.blog-list-btn{
  display:inline-flex;
  align-items:center;
  gap:10px;
  color:var(--primary);
  font-weight:600;
  transition:0.3s;
}

.blog-list-btn:hover{
  color:var(--primary-dark);
  gap:16px;
}

.blog-list-btn i{
  transition:0.3s;
}

/* =========================
    RESPONSIVE
========================= */

@media(max-width:992px){

  .blog-list-title{
    font-size:28px;
  }

  .blog-list-content{
    padding:30px;
  }
}

@media(max-width:768px){

  .blog-list-image img{
    height:240px;
  }

  .blog-list-title{
    font-size:24px;
  }

  .blog-list-content{
    padding:26px;
  }

  .blog-list-meta{
    gap:14px;
  }
}

/* =========================
    BLOG LISTING SECTION
========================= */

.blog-listing-section{
  background:#fff;
}

/* BLOG CARD */

.blog-list-card{
  background:#fff;
  border:1px solid #f2f2f2;
  border-radius:28px;
  overflow:hidden;
  transition:0.4s;
  height:100%;
  box-shadow:0 5px 20px rgba(0,0,0,0.03);
}

.blog-list-card:hover{
  transform:translateY(-8px);
  box-shadow:0 18px 40px rgba(0,0,0,0.08);
}

.blog-list-image{
  position:relative;
  overflow:hidden;
}

.blog-list-image img{
  width:100%;
  height:280px;
  object-fit:cover;
  transition:0.5s;
}

.blog-list-card:hover .blog-list-image img{
  transform:scale(1.08);
}

.blog-list-category{
  position:absolute;
  top:20px;
  left:20px;
  background:var(--primary);
  color:#fff;
  padding:10px 18px;
  border-radius:50px;
  font-size:13px;
  font-weight:600;
  letter-spacing:0.5px;
}

.blog-list-content{
  padding:35px;
}

.blog-list-meta{
  display:flex;
  flex-wrap:wrap;
  gap:18px;
  color:#888;
  font-size:14px;
  margin-bottom:18px;
}

.blog-list-meta i{
  color:var(--primary);
  margin-right:6px;
}

.blog-list-title{
  font-size:34px;
  line-height:1.4;
  margin-bottom:18px;
}

.blog-list-title a{
  color:var(--dark);
  transition:0.3s;
}

.blog-list-title a:hover{
  color:var(--primary);
}

.blog-list-desc{
  color:#666;
  line-height:1.9;
  margin-bottom:25px;
}

.blog-list-btn{
  color:var(--primary);
  font-weight:600;
  display:inline-flex;
  align-items:center;
  gap:10px;
  transition:0.3s;
}

.blog-list-btn:hover{
  gap:15px;
  color:var(--primary);
}

/* =========================
    SIDEBAR
========================= */

.blog-sidebar-card{
  background:#fff;
  border:1px solid #f1f1f1;
  border-radius:24px;
  padding:35px;
  margin-bottom:35px;
}

.blog-sidebar-title{
  font-size:30px;
  margin-bottom:25px;
}

.blog-recent-post{
  display:flex;
  gap:15px;
  margin-bottom:22px;
  align-items:center;
}

.blog-recent-post:last-child{
  margin-bottom:0;
}

.blog-recent-post img{
  width:90px;
  height:90px;
  border-radius:18px;
  object-fit:cover;
}

.blog-recent-post h6{
  font-size:18px;
  line-height:1.5;
  margin-bottom:8px;
  color:var(--dark);
}

.blog-recent-post small{
  color:#888;
}

.blog-category-list a{
  display:flex;
  justify-content:space-between;
  padding:15px 0;
  border-bottom:1px solid #f3f3f3;
  color:#555;
  transition:0.3s;
}

.blog-category-list a:last-child{
  border-bottom:none;
}

.blog-category-list a:hover{
  color:var(--primary);
  padding-left:6px;
}

/* =========================
    PAGINATION
========================= */

.blog-pagination{
  margin-top:60px;
}

.blog-pagination .pagination{
  gap:8px;
}

.blog-pagination .page-link{
  width:52px;
  height:52px;
  border-radius:50% !important;
  display:flex;
  align-items:center;
  justify-content:center;
  border:none;
  background:#fff4ea;
  color:var(--primary);
  font-weight:600;
  box-shadow:none !important;
}

.blog-pagination .page-item.active .page-link{
  background:var(--primary);
  color:#fff;
}

.blog-pagination .page-link:hover{
  background:var(--primary);
  color:#fff;
}

/* =========================
    RESPONSIVE
========================= */

@media(max-width:992px){

  .blog-sidebar-card{
    padding:28px;
  }

  .blog-sidebar-title{
    font-size:26px;
  }

  .blog-list-title{
    font-size:28px;
  }
}

@media(max-width:768px){

  .blog-list-content{
    padding:28px;
  }

  .blog-list-title{
    font-size:24px;
  }

  .blog-list-image img{
    height:240px;
  }

  .blog-sidebar-card{
    padding:25px;
  }

  .blog-recent-post img{
    width:75px;
    height:75px;
  }

  .blog-pagination .page-link{
    width:46px;
    height:46px;
  }
}

/* =========================
    PAGE HEADER
========================= */

.page-header{
  background:var(--light);
  padding:90px 0;
  text-align:center;
  position:relative;
  overflow:hidden;
}

.page-header::before{
  content:'';
  position:absolute;
  width:320px;
  height:320px;
  background:rgba(245,124,0,0.06);
  border-radius:50%;
  top:-120px;
  left:-100px;
}

.page-header::after{
  content:'';
  position:absolute;
  width:260px;
  height:260px;
  background:rgba(245,124,0,0.05);
  border-radius:50%;
  bottom:-120px;
  right:-80px;
}

.page-header .container{
  position:relative;
  z-index:2;
}

.page-title{
  font-size:68px;
  line-height:1.2;
  margin-bottom:22px;
  color:var(--dark);
  font-weight:700;
}

.page-subtitle{
  max-width:760px;
  margin:auto;
  color:#777;
  font-size:18px;
  line-height:1.9;
}

/* =========================
    RESPONSIVE
========================= */

@media(max-width:992px){

  .page-header{
    padding:80px 0;
  }

  .page-title{
    font-size:52px;
  }
}

@media(max-width:768px){

  .page-header{
    padding:70px 0;
  }

  .page-title{
    font-size:40px;
  }

  .page-subtitle{
    font-size:16px;
    line-height:1.8;
  }
}

@media(max-width:576px){

  .page-title{
    font-size:34px;
  }

  .page-subtitle{
    font-size:15px;
  }
}


/* =========================
    SEARCH POPUP
========================= */

.search-popup{
  position:fixed;
  inset:0;
  width:100%;
  height:100%;
  background:rgba(0,0,0,0.75);
  display:flex;
  align-items:center;
  justify-content:center;
  opacity:0;
  visibility:hidden;
  transition:0.4s;
  z-index:9999;
}

.search-popup.active{
  opacity:1;
  visibility:visible;
}

.search-popup-content{
  width:90%;
  max-width:700px;
  position:relative;
}

.search-popup form{
  position:relative;
}

.search-popup input{
  width:100%;
  height:75px;
  border:none;
  border-radius:60px;
  padding:0 80px 0 30px;
  font-size:18px;
  outline:none;
}

.search-popup form button{
  position:absolute;
  top:50%;
  right:10px;
  transform:translateY(-50%);
  width:58px;
  height:58px;
  border:none;
  border-radius:50%;
  background:var(--primary);
  color:#fff;
  font-size:20px;
}

.close-search{
  position:absolute;
  top:-70px;
  right:0;
  width:50px;
  height:50px;
  border:none;
  border-radius:50%;
  background:#fff;
  color:#000;
  font-size:18px;
}