/**
Theme Name: astra child
Author: Brainstorm Force
Author URI: http://wpastra.com/about/
Description: Astra is the fastest, fully customizable & beautiful theme suitable for blogs, personal portfolios and business websites. It is very lightweight (less than 50KB on frontend) and offers unparalleled speed. Built with SEO in mind, Astra comes with schema.org code integrated so search engines will love your site. Astra offers plenty of sidebar options and widget areas giving you a full control for customizations. Furthermore, we have included special features and templates so feel free to choose any of your favorite page builder plugin to create pages flexibly. Some of the other features: # WooCommerce Ready # Responsive # Compatible with major plugins # Translation Ready # Extendible with premium addons # Regularly updated # Designed, Developed, Maintained & Supported by Brainstorm Force. Looking for a perfect base theme? Look no further. Astra is fast, fully customizable and beautiful theme!
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: astra-child
Template: astra
*/
.site-content .ast-container {
    max-width: 100%;
    padding: 0;
        display: block;
}
.ast-separate-container {
    background-color: #f5f5f5!important;
}
a {
    color: #6b7f6b;
}
a:hover,
a:focus,
a:active,
a:visited {
    color: #6b7f6b;
}
/* HEADER MENU – hover & focus */
.main-header-bar-navigation 
.main-header-menu > li > a:hover,
.main-header-bar-navigation 
.main-header-menu > li > a:focus,
.main-header-bar-navigation 
.main-header-menu .sub-menu a:hover,
.main-header-bar-navigation 
.main-header-menu .sub-menu a:focus {
  color: #268133!important;
}

/* HEADER MENU – active / current */
.main-header-bar-navigation 
.main-header-menu > li.current-menu-item > a,
.main-header-bar-navigation 
.main-header-menu > li.current_page_item > a,
.main-header-bar-navigation 
.main-header-menu .sub-menu li.current-menu-item > a {
  color: #90ca26!important;
}


/* ==============================
   HERO BANNER BASE
================================ */
.hero-banner {
  position: relative;
  padding: 120px 20px 140px;
  overflow: hidden;
  background: linear-gradient(
    135deg,
    rgba(38, 129, 51, 0.08),
    rgba(144, 202, 38, 0.12)
  );
}

.hero-container {
  max-width: 1240px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  align-items: center;
  gap: 60px;
  position: relative;
  z-index: 2;
  padding: 0 20px;
}

/* ==============================
   TEXT CONTENT
================================ */
.hero-content h1 {
  font-size: 54px;
  line-height: 1.15;
  font-weight: 800;
  color: #1f2d1f;
  margin-bottom: 24px;
}

.hero-content h1 span {
  background: linear-gradient(90deg, #268133, #90ca26);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.hero-subheadline {
  font-size: 20px;
  line-height: 1.6;
  color: #3f4f3f;
  margin-bottom: 20px;
  max-width: 520px;
}

.hero-secondary {
    font-size: 16px;
    line-height: 1.6;
    color: #5a6b5a;
    max-width: 480px;
    background-color: #fff;
    padding: 15px;
    border-left: 3px solid #82bf35;
    border-radius: 4px;
}

/* ==============================
   DECORATIVE VISUAL AREA
================================ */
.hero-visual {
  position: relative;
  height: 420px;
}

.visual-card {
  position: absolute;
  border-radius: 20px;
  background: linear-gradient(
    135deg,
    rgba(38, 129, 51, 0.9),
    rgba(144, 202, 38, 0.9)
  );
  box-shadow: 0 30px 60px rgba(0, 0, 0, 0.15);
}

.card-1 {
  width: 260px;
  height: 160px;
  top: 0;
  left: 40px;
}

.card-2 {
  width: 300px;
  height: 190px;
  top: 120px;
  right: 0;
  background: linear-gradient(
    135deg,
    rgba(144, 202, 38, 0.95),
    rgba(38, 129, 51, 0.95)
  );
}

.card-3 {
  width: 220px;
  height: 140px;
  bottom: 0;
  left: 100px;
}

/* ==============================
   BACKGROUND SHAPES
================================ */
.hero-bg-shape {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  opacity: 0.6;
}

.shape-1 {
  width: 380px;
  height: 380px;
  background: #268133;
  top: -120px;
  left: -120px;
}

.shape-2 {
  width: 420px;
  height: 420px;
  background: #90ca26;
  bottom: -140px;
  right: -140px;
}

/* ==============================
   VALUE SECTION
================================ */
.value-section {
  position: relative;
  padding: 100px 20px;
  background: #f6faf6;
}

.value-container {
  max-width: 1240px;
  margin: 0 auto;
}
.value-header {
  text-align: center;
  margin-bottom: 60px;
}

.value-header h2 {
  font-size: 42px;
  font-weight: 800;
  color: #1f2d1f;
  line-height: 1.2;
  background: linear-gradient(90deg, #268133, #90ca26);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.value-card {
  position: relative;
  padding: 40px 32px;
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(10px);
  box-shadow: 0 20px 40px rgba(38, 129, 51, 0.08);
  transition: transform 0.4s ease, box-shadow 0.4s ease;
}

.value-card:hover {
  transform: translateY(-10px);
  box-shadow: 0 35px 70px rgba(38, 129, 51, 0.15);
}

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

/* ==============================
   CARD STYLES
================================ */
.value-card {
  position: relative;
  padding: 40px 32px;
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.75);
  backdrop-filter: blur(10px);
  box-shadow: 0 20px 40px rgba(38, 129, 51, 0.08);
  transition: transform 0.4s ease, box-shadow 0.4s ease;
}

.value-card:hover {
  transform: translateY(-10px);
  box-shadow: 0 35px 70px rgba(38, 129, 51, 0.15);
}

/* Highlight middle card */
.value-card.highlight {
  background: linear-gradient(
    135deg,
    rgba(38, 129, 51, 0.95),
    rgba(144, 202, 38, 0.95)
  );
  color: #ffffff;
}

.value-card.highlight p {
  color: rgba(255, 255, 255, 0.9);
}

/* ==============================
   ICONS (PURE CSS)
================================ */
.value-icon {
  width: 64px;
  height: 64px;
  border-radius: 16px;
  margin-bottom: 24px;
  background: linear-gradient(135deg, #268133, #90ca26);
  position: relative;
}

/* Platform icon */
.icon-platform::before {
  content: "";
  position: absolute;
  inset: 14px;
  border-radius: 8px;
  border: 2px solid #fff;
}

/* Trends icon */
.icon-trends::before {
  content: "";
  position: absolute;
  left: 18px;
  bottom: 14px;
  width: 6px;
  height: 26px;
  background: #fff;
  box-shadow: 12px -10px 0 #fff, 24px -4px 0 #fff;
}

/* Usage icon */
.icon-usage::before {
  content: "";
  position: absolute;
  inset: 18px;
  border-radius: 50%;
  border: 2px solid #fff;
}

/* ==============================
   TEXT
================================ */
.value-card h3 {
  font-size: 22px;
  font-weight: 700;
  margin-bottom: 14px;
  color: inherit;
}

.value-card p {
  font-size: 16px;
  line-height: 1.6;
  color: #4a5f4a;
}
/* ==============================
   ARTICLES SECTION
================================ */
.articles-section {
  padding: 120px 20px;
  background: #ffffff;
}

.articles-container {
  max-width: 1240px;
  margin: 0 auto;
}

/* ==============================
   HEADER
================================ */
.articles-header {
  margin-bottom: 70px;
}

.articles-header h2 {
  font-size: 44px;
  font-weight: 800;
  color: #1f2d1f;
  line-height: 1.2;
  position: relative;
}

.articles-header h2::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -14px;
  width: 80px;
  height: 5px;
  border-radius: 4px;
  background: linear-gradient(90deg, #268133, #90ca26);
}

/* ==============================
   GRID
================================ */
.articles-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 48px 36px;
}

/* ==============================
   CARD
================================ */
.article-card {
  display: flex;
  flex-direction: column;
  box-shadow: 0px 0px 12px 0px rgba(0, 0, 0, 0.4);
}
.article-content {
    padding: 10px 20px;
}

.article-thumb {
  display: block;
  overflow: hidden;
  border-radius: 4px;
  margin-bottom: 20px;
}

.article-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s ease;
}

.article-card:hover .article-thumb img {
  transform: none;
}

/* ==============================
   CONTENT
================================ */
.article-content h3 {
    font-size: 22px;
    line-height: 1.35;
    font-weight: 700;
    margin-bottom: 12px;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
}

.article-content h3 a {
  color: #1f2d1f;
  text-decoration: none;
}

.article-content h3 a:hover {
  color: #268133;
}

.article-excerpt {
  font-size: 16px;
  line-height: 1.6;
  color: #4a5f4a;
  margin-bottom: 16px;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
}

/* ==============================
   META
================================ */
.article-meta {
  font-size: 14px;
  color: #6a7a6a;
  display: flex;
  align-items: center;
  gap: 6px;
}

.article-meta .dot {
  font-size: 12px;
}
/* ==============================
   PLATFORM SECTION
================================ */
.platform-section {
  padding: 120px 20px;
  background: linear-gradient(
    135deg,
    rgba(38, 129, 51, 0.06),
    rgba(144, 202, 38, 0.08)
  );
}

.platform-container {
  max-width: 1240px;
  margin: 0 auto;
}

/* ==============================
   HEADER
================================ */
.platform-header {
  margin-bottom: 70px;
}

.platform-header h2 {
  font-size: 42px;
  font-weight: 800;
  color: #1f2d1f;
  line-height: 1.2;
  position: relative;
}

.platform-header h2::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -14px;
  width: 90px;
  height: 5px;
  border-radius: 4px;
  background: linear-gradient(90deg, #268133, #90ca26);
}

/* ==============================
   GRID
================================ */
.platform-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 32px;
}

/* ==============================
   CARD
================================ */
.platform-card {
  display: block;
  padding: 36px 30px 40px;
  border-radius: 22px;
  background: #ffffff;
  text-decoration: none;
  box-shadow: 0 20px 40px rgba(38, 129, 51, 0.08);
  transition: transform 0.4s ease, box-shadow 0.4s ease;
  position: relative;
  overflow: hidden;
  border: 1px solid #fff;
}

.platform-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    135deg,
    rgba(38, 129, 51, 0.08),
    rgba(144, 202, 38, 0.12)
  );
  opacity: 0;
  transition: opacity 0.4s ease;
}

.platform-card:hover::before {
  opacity: 1;
}

.platform-card:hover {
  transform: translateY(-10px);
  box-shadow: 0 35px 70px rgba(38, 129, 51, 0.15);
  border: 1px solid green;
}

/* ==============================
   TEXT
================================ */
.platform-card h3 {
  font-size: 24px;
  font-weight: 700;
  color: #1f2d1f;
  margin-bottom: 14px;
  position: relative;
  z-index: 1;
}

.platform-card p {
  font-size: 16px;
  line-height: 1.6;
  color: #4a5f4a;
  margin-bottom: 22px;
  position: relative;
  z-index: 1;
}

.platform-link {
  font-size: 15px;
  font-weight: 600;
  color: #268133;
  position: relative;
  z-index: 1;
}

/* ==============================
   PLATFORM ACCENTS
================================ */
.platform-card.instagram h3 { color: #2e7d32; }
.platform-card.tiktok h3 { color: #388e3c; }
.platform-card.twitter h3 { color: #1b5e20; }
.platform-card.trends h3 { color: #33691e; }

.popular-section {
  padding: 120px 20px;
  background: #f9fbf9;
}

.popular-container {
  max-width: 1240px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: 80px;
  align-items: start;
}
/* ==============================
   HEADER
================================ */
.popular-header h2 {
  font-size: 42px;
  font-weight: 800;
  line-height: 1.2;
  margin-bottom: 12px;
  background: linear-gradient(90deg, #268133, #90ca26);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.popular-subtitle {
  font-size: 16px;
  color: #5a6b5a;
}

/* ==============================
   LIST
================================ */
.popular-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.popular-list li {
  display: flex;
  align-items: baseline;
  gap: 20px;
  padding: 22px 0;
  border-bottom: 1px solid rgba(38, 129, 51, 0.15);
}

.popular-list li:last-child {
  border-bottom: none;
}

.popular-number {
  font-size: 22px;
  font-weight: 800;
  min-width: 42px;
  color: rgba(38, 129, 51, 0.35);
}

.popular-list a {
  font-size: 18px;
  font-weight: 600;
  color: #1f2d1f;
  text-decoration: none;
  line-height: 1.5;
  transition: color 0.3s ease;
}

.popular-list a:hover {
  color: #268133;
}

/* ==============================
   AUTHORITY SECTION
================================ */
.authority-section {
    padding: 50px 20px;
    background: linear-gradient(135deg, rgb(38 129 51 / 77%), rgb(144 202 38 / 97%));
}

.authority-container {
  max-width: 1240px;
  margin: 0 auto;
}

/* ==============================
   INNER WRAP
================================ */
.authority-inner {
  max-width: 860px;
  position: relative;
  padding-left: 36px;
}

.authority-inner::before {
  content: "";
  position: absolute;
  left: 0;
  top: 6px;
  width: 6px;
  height: 80%;
  border-radius: 6px;
  background: linear-gradient(357deg, #f4f4f4, #454740);
}

/* ==============================
   TEXT
================================ */
.authority-inner h2 {
  font-size: 44px;
  font-weight: 800;
  line-height: 1.2;
  margin-bottom: 22px;
  color: #1f2d1f;
}

.authority-inner p {
  font-size: 18px;
  line-height: 1.75;
  color: #4a5f4a;
}
/* ==============================
   FOOTER BASE
================================ */
.site-footer {
  background: #0f1f14;
  color: #cfd9cf;
  padding: 100px 20px 40px;
}

.footer-container {
  max-width: 1240px;
  margin: 0 auto;
}

/* ==============================
   GRID
================================ */
.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 60px;
  padding-bottom: 60px;
  border-bottom: 1px solid rgba(144, 202, 38, 0.15);
}

/* ==============================
   COLUMNS
================================ */
.footer-col h4 {
  font-size: 18px;
  font-weight: 700;
  margin-bottom: 20px;
  color: #ffffff;
  position: relative;
}

.footer-col h4::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -8px;
  width: 36px;
  height: 3px;
  border-radius: 3px;
  background: linear-gradient(90deg, #268133, #90ca26);
}

.footer-about p {
  font-size: 15px;
  line-height: 1.7;
  color: #b9c6b9;
  max-width: 320px;
}

/* ==============================
   LINKS
================================ */
.footer-col ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.footer-col li {
  margin-bottom: 12px;
}

.footer-col a {
  font-size: 15px;
  color: #cfd9cf;
  text-decoration: none;
  transition: color 0.3s ease;
}

.footer-col a:hover {
  color: #90ca26;
}

/* ==============================
   BOTTOM
================================ */
.footer-bottom {
  padding-top: 30px;
  text-align: center;
}

.footer-bottom p {
  font-size: 14px;
  color: #8fa08f;
}
/* ==============================
   BLOG HEADER
================================ */
.blog-header {
  padding: 110px 20px 80px;
  background: linear-gradient(
    135deg,
    rgba(38, 129, 51, 0.05),
    rgba(144, 202, 38, 0.10)
  );
}

.blog-header-container {
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 20px;
}

.blog-header h1 {
  font-size: 52px;
  font-weight: 800;
  margin-bottom: 14px;
  color: #1f2d1f;
}

.blog-header p {
  font-size: 18px;
  max-width: 640px;
  line-height: 1.6;
  color: #4a5f4a;
}

/* ==============================
   BLOG GRID SECTION
================================ */
.blog-grid-section {
  padding: 90px 20px 120px;
}

.blog-grid-container {
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 20px;
}

/* ==============================
   PAGINATION
================================ */
.blog-pagination {
  margin-top: 80px;
  text-align: center;
}

.blog-pagination a {
  display: inline-block;
  margin: 0 6px;
  padding: 10px 16px;
  font-size: 15px;
  border-radius: 30px;
  text-decoration: none;
  color: #268133;
  border: 1px solid rgba(38, 129, 51, 0.35);
  transition: all 0.3s ease;
}

.blog-pagination a:hover {
  background: rgba(38, 129, 51, 0.08);
}

.blog-pagination a.active {
    background: linear-gradient(90deg, #268133, #90ca26);
    color: #fff;
    border-color: transparent;
    border-width: 0;
}
/* ==============================
   SINGLE ARTICLE LAYOUT
================================ */
.single-article {
  max-width: 820px; /* comfortable reading width */
  margin: 100px auto 0;
  padding: 0 20px;
}

/* ==============================
   ARTICLE HEADER
================================ */
.article-header {
  margin-bottom: 36px;
}

.article-title {
  font-size: 44px;
  font-weight: 800;
  line-height: 1.2;
  margin-bottom: 14px;
  color: #1f2d1f;
}

.article-meta {
  font-size: 14px;
  color: #6b7f6b;
}

.article-meta .dot {
  margin: 0 6px;
}

/* ==============================
   FEATURED IMAGE
================================ */
.article-featured-image {
  margin: 40px 0 50px;
}

.article-featured-image img {
  width: 100%;
  display: block;
  border-radius: 14px;
}

/* ==============================
   TABLE OF CONTENTS
================================ */
.article-toc {
  margin-bottom: 50px;
}

.article-toc details {
  background: rgba(38, 129, 51, 0.06);
  border-radius: 12px;
  padding: 18px 22px;
}

.article-toc summary {
  font-weight: 600;
  cursor: pointer;
  color: #268133;
}

.article-toc nav {
  margin-top: 14px;
}

.article-toc ul {
  padding-left: 18px;
}

.article-toc li {
  margin-bottom: 10px;
}

.article-toc a {
  text-decoration: none;
  color: #3a5f3a;
}

.article-toc a:hover {
  text-decoration: underline;
}

/* ==============================
   ARTICLE CONTENT
================================ */
.single-article .article-content {
  font-size: 18px;
  line-height: 1.75;
  color: #2e3e2e;
}

.single-article .article-content p {
  margin-bottom: 26px;
}

.single-article .article-content h2 {
  font-size: 28px;
  margin: 50px 0 18px;
  color: #1f2d1f;
}

.single-article .article-content ul {
  margin: 20px 0 30px;
  padding-left: 20px;
}

.single-article .article-content li {
  margin-bottom: 10px;
}

.single-article blockquote {
  margin: 40px 0;
  padding-left: 20px;
  border-left: 4px solid #90ca26;
  font-style: italic;
  color: #445944;
}

.single-article hr {
  border: none;
  height: 1px;
  background: rgba(38, 129, 51, 0.2);
  margin: 60px 0;
}

/* ==============================
   RELATED ARTICLES
================================ */
.related-articles {
  padding: 120px 20px 140px;
}

.related-container {
  max-width: 1240px;
  margin: 0 auto;
}

.related-title {
  font-size: 34px;
  font-weight: 800;
  margin-bottom: 50px;
  color: #1f2d1f;
}
/* ==============================
   PAGE HEADER
================================ */
.page-header {
  padding: 110px 20px 80px;
  background: linear-gradient(
    135deg,
    rgba(38, 129, 51, 0.05),
    rgba(144, 202, 38, 0.10)
  );
}

.page-header-container {
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 20px;
}

.page-header h1 {
  font-size: 52px;
  font-weight: 800;
  margin-bottom: 14px;
  color: #1f2d1f;
}

.page-header p {
  font-size: 18px;
  max-width: 640px;
  line-height: 1.6;
  color: #4a5f4a;
}

/* ==============================
   PAGE GRID SECTION
================================ */
.page-grid-section {
  padding: 90px 20px 120px;
}

.page-grid-container {
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 20px;
}

/* ==============================
   PAGINATION
================================ */
.page-pagination {
  margin-top: 80px;
  text-align: center;
}

.page-pagination a {
  display: inline-block;
  margin: 0 6px;
  padding: 10px 16px;
  font-size: 15px;
  border-radius: 30px;
  text-decoration: none;
  color: #268133;
  border: 1px solid rgba(38, 129, 51, 0.35);
  transition: all 0.3s ease;
}

.page-pagination a:hover {
  background: rgba(38, 129, 51, 0.08);
}

.page-pagination a.active {
  background: linear-gradient(90deg, #268133, #90ca26);
  color: #fff;
  border-color: transparent;
  border-width: 0;
}
/* ================================
   Page Content – Corporate Style
   ================================ */

.page-content-wrapper {
    width: 100%;
}
.page-content-wrapper .contact-form {
    font-weight: 800;
    text-align: center;
    font-size: 2rem;
    color: #1f2d1f;
    margin: 0;
}
.page-content-container {
    max-width: 900px;
    margin: 0 auto;
    padding: 56px 48px;
    background-color: #ffffff;
    color: #374151;
    border-left: 6px solid transparent;
    border-image: linear-gradient(180deg, #268133, #90ca26) 1;
}


/* Typography */
.page-content-container p {
    font-size: 1.05rem;
    line-height: 1.8;
    margin-bottom: 1.75rem;
}

.page-content-container h2 {
    font-size: 1.7rem;
    margin-top: 3.5rem;
    margin-bottom: 1.25rem;
    color: #111827;
}
.page-content-container.contact {
    border: none;
}

.page-content-container a {
    color: #2563eb;
    text-decoration: none;
    font-weight: 500;
}

/* Wrapper styling */
.wpcf7 {
    max-width: 600px;
    margin: 40px auto;
    padding: 30px;
    background: linear-gradient(135deg, rgba(38, 129, 51, 0.9), rgba(144, 202, 38, 0.9));
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
    box-sizing: border-box;
}

/* Labels */
.wpcf7 label {
    display: block;
    font-weight: 600;
    color: #ffffff;
    margin-bottom: 6px;
}

/* Inputs & textarea */
.wpcf7 input[type="text"],
.wpcf7 input[type="email"],
.wpcf7 textarea {
    width: 100%;
    padding: 12px 14px;
    margin-top: 6px;
    border-radius: 8px;
    border: none;
    font-size: 15px;
    box-sizing: border-box;
    background-color: #ffffff;
    color: #333333;
}

/* Focus states */
.wpcf7 input[type="text"]:focus,
.wpcf7 input[type="email"]:focus,
.wpcf7 textarea:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.4);
}

/* Textarea */
.wpcf7 textarea {
    resize: vertical;
    min-height: 120px;
}

/* Submit button */
.wpcf7 input[type="submit"] {
    display: inline-block;
    width: 100%;
    padding: 14px;
    margin-top: 10px;
    background-color: #ffffff;
    color: rgba(38, 129, 51, 1);
    font-size: 16px;
    font-weight: 700;
    border: none;
    border-radius: 30px;
    cursor: pointer;
    transition: all 0.3s ease;
}

/* Submit hover */
.wpcf7 input[type="submit"]:hover {
    background-color: rgba(38, 129, 51, 1);
    color: #ffffff;
}

/* Validation messages */
.wpcf7-not-valid-tip {
    color: #fff;
    font-size: 13px;
    margin-top: 4px;
}

/* Response output */
.wpcf7-response-output {
    margin-top: 20px;
    padding: 12px;
    border-radius: 8px;
    font-size: 14px;
    color: #ffffff;
}

.wpcf7-mail-sent-ok {
    background-color: rgba(0, 0, 0, 0.2);
}


.wpcf7-validation-errors,
.wpcf7-mail-sent-ng {
    background-color: rgba(0, 0, 0, 0.3);
}

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

/* 1024px */
@media (max-width: 1024px) {
  .hero-container {
    grid-template-columns: 1fr;
    gap: 50px;
  }

  .hero-visual {
    height: 360px;
  }

  .hero-content h1 {
    font-size: 46px;
  }
  .value-grid {
    gap: 30px;
  }
  .value-header h2 {
    font-size: 36px;
  }
  .articles-grid {
    gap: 40px 28px;
  }

  .articles-header h2 {
    font-size: 38px;
  }
  .platform-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 28px;
  }

  .platform-header h2 {
    font-size: 36px;
  }
  .popular-container {
    grid-template-columns: 1fr;
    gap: 50px;
  }

  .popular-header h2 {
    font-size: 36px;
  }
  .authority-inner h2 {
    font-size: 38px;
  }
  .footer-grid {
    grid-template-columns: 1fr 1fr;
    gap: 50px;
  }
  .blog-header h1 {
    font-size: 44px;
  }
  .article-title {
    font-size: 38px;
  }
  .page-header h1 {
    font-size: 44px;
  }
}

/* 991px */
@media (max-width: 991px) {
  .hero-banner {
    padding: 100px 20px 120px;
  }

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

  .hero-subheadline {
    font-size: 18px;
  }
  .value-grid {
    grid-template-columns: 1fr 1fr;
  }

  .value-card.highlight {
    grid-column: span 2;
  }
  .articles-grid {
    grid-template-columns: 1fr 1fr;
  }
  .platform-section {
    padding: 100px 20px;
  }
  .popular-section {
    padding: 100px 20px;
  }
  .authority-section {
    padding: 120px 20px;
  }
  .site-footer {
    padding: 80px 20px 30px;
  }
  .single-article {
    margin-top: 80px;
  }
}

/* 767px */
@media (max-width: 767px) {
  .hero-banner {
    padding: 80px 16px 100px;
  }

  .hero-content h1 {
    font-size: 36px;
  }

  .hero-visual {
    height: 300px;
  }
  .value-section {
    padding: 80px 16px;
  }

  .value-grid {
    grid-template-columns: 1fr;
  }

  .value-card.highlight {
    grid-column: auto;
  }
  .value-header {
    margin-bottom: 40px;
  }

  .value-header h2 {
    font-size: 32px;
  }
  .articles-section {
    padding: 90px 16px;
  }

  .articles-grid {
    grid-template-columns: 1fr;
  }

  .articles-header {
    margin-bottom: 50px;
  }

  .articles-header h2 {
    font-size: 34px;
  }
  .platform-section {
    padding: 80px 16px;
  }

  .platform-grid {
    grid-template-columns: 1fr;
  }

  .platform-header {
    margin-bottom: 50px;
  }

  .platform-header h2 {
    font-size: 32px;
  }
  .popular-section {
    padding: 80px 16px;
  }

  .popular-header h2 {
    font-size: 32px;
  }

  .popular-list a {
    font-size: 17px;
  }
  .authority-section {
    padding: 90px 16px;
  }

  .authority-inner {
    padding-left: 24px;
  }

  .authority-inner h2 {
    font-size: 32px;
  }

  .authority-inner p {
    font-size: 16px;
  }
  .site-footer {
    padding: 70px 16px 30px;
  }

  .footer-grid {
    grid-template-columns: 1fr;
    gap: 40px;
  }
   .blog-header {
    padding: 90px 16px 60px;
  }

  .blog-header h1 {
    font-size: 36px;
  }

  .blog-grid-section {
    padding: 70px 16px 90px;
  }
   .single-article {
    padding: 0 16px;
  }

  .article-title {
    font-size: 32px;
  }

  .single-article .article-content {
    font-size: 16.5px;
  }

  .related-articles {
    padding: 90px 16px 100px;
  }
  .page-header {
    padding: 90px 16px 60px;
  }

  .page-header h1 {
    font-size: 36px;
  }

  .page-grid-section {
    padding: 70px 16px 90px;
  }
}

/* 560px */
@media (max-width: 560px) {
  .hero-content h1 {
    font-size: 30px;
  }
 .page-header h1 {
    font-size: 30px;
  }

  .hero-subheadline {
    font-size: 16px;
  }

  .hero-secondary {
    font-size: 15px;
  }

  .hero-visual {
    height: 260px;
  }
  .value-card {
    padding: 32px 24px;
  }

  .value-card h3 {
    font-size: 20px;
  }
  .value-header h2 {
    font-size: 28px;
  }
  .articles-header h2 {
    font-size: 30px;
  }

  .article-content h3 {
    font-size: 20px;
  }
   .platform-header h2 {
    font-size: 28px;
  }

  .platform-card {
    padding: 32px 24px;
  }
  .popular-header h2 {
    font-size: 28px;
  }

  .popular-list li {
    gap: 14px;
  }

  .popular-number {
    font-size: 18px;
  }
  .authority-inner h2 {
    font-size: 28px;
  }
   .footer-col h4 {
    font-size: 17px;
  }

  .footer-col a {
    font-size: 14px;
  }
  .blog-header h1 {
    font-size: 30px;
  }
  .article-title {
    font-size: 28px;
  }
}