/* ================================
   Fourth Wall Communications - Custom CSS
   ================================ */

/* ================================
   RESET / BASE
   ================================ */
* {
  box-sizing: border-box;
  font-family: "Segoe UI", Arial, sans-serif;
}

body {
  margin: 0;
  background: #ffffff;
}

/* ================================
   DARK MODE VARIABLES
   ================================ */
body.dark-mode {
  --eston-white: #121212;
  --eston-black: #ffffff;
  --eston-gray: #a0a0a0;
  --eston-primary: #1e1e1e;
  --eston-border-color: #333333;
}

/* ================================
   DARK MODE GLOBAL OVERRIDES
   ================================ */
body.dark-mode,
body.dark-mode .page-wrapper,
body.dark-mode .section-title__title,
body.dark-mode .footer-widget__title,
body.dark-mode .testimonial-three,
body.dark-mode .services-three,
body.dark-mode .services-five,
body.dark-mode .contact-page,
body.dark-mode .site-footer {
  color: var(--eston-black);
  background-color: var(--eston-white) !important;
}

body.dark-mode .testimonial-two__single,
body.dark-mode .services-three__single {
  background-color: var(--eston-primary) !important;
  border-color: var(--eston-border-color);
}

/* ================================
   HEADER / NAV
   ================================ */
.main-header-three__top {
  background-color: #143f8d !important;
}

body.dark-mode .main-header-three__top {
  background-color: #0d2b63 !important;
}

.main-header-three,
.main-menu-three__wrapper,
.stricky-header.stricked-menu {
  background-color: var(--eston-white) !important;
}

/* ===== LOGO SIZE (DESKTOP) ===== */
.main-menu-three__logo img {
  width: 250px;        /* 🔥 CHANGE SIZE HERE */
  height: auto;
}

/* Footer logo */
.footer-widget__logo img {
  width: 150px;
  height: auto;
}

/* Menu links */
.main-menu__list > li > a {
  color: var(--eston-black) !important;
}

.main-menu__list > li > a:hover {
  color: #143f8d !important;
}

/* ================================
   THEME TOGGLER
   ================================ */
.theme-toggler {
  background: transparent;
  border: 2px solid #143f8d;
  color: #143f8d;
  width: 45px;
  height: 45px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

body.dark-mode .theme-toggler {
  border-color: #ffffff;
  color: #ffffff;
}

/* ================================
   PRICING SECTION
   ================================ */
.pricing-section {
  padding: 100px 0;
}

.pricing-card {
  padding: 30px 25px;
  border-radius: 14px;
  color: #ffffff;
  text-align: center;
  box-shadow: 0 12px 30px rgba(0,0,0,0.35);
  transition: transform 0.3s ease;
}

.pricing-card:hover {
  transform: translateY(-8px);
}

.pricing-card h3 {
  font-size: 26px;
  font-weight: 700;
  margin-bottom: 15px;
}

.pricing-card .price {
  font-size: 38px;
  font-weight: 800;
  margin-bottom: 25px;
}

.pricing-card ul {
  list-style: none;
  padding: 0;
  margin: 0 0 30px 0;
}

.pricing-card ul li {
  font-size: 15px;
  margin: 12px 0;
}

/* Pricing buttons */
.pricing-card .thm-btn {
  padding: 12px 24px;
  font-size: 14px;
  font-weight: 600;
  border-radius: 6px;
}

/* Pricing colors */
.pricing-card.starter {
  background: linear-gradient(180deg, #1e6fd9, #0b3d91);
}

.pricing-card.professional {
  background: linear-gradient(180deg, #6a3bb7, #3b1d6d);
}

.pricing-card.premium {
  background: linear-gradient(180deg, #f2b233, #8c5a00);
}

/* ================================
   TESTIMONIAL SECTION (FIXED)
   ================================ */
.testimonial-three__bottom .row {
  display: flex;
  justify-content: center;
}

.testimonial-two__single {
  padding: 25px;
  background: #f8f9fa;
  border-radius: 12px;
  height: 100%;
  max-width: 360px;
  margin: 0 auto;
}

body.dark-mode .testimonial-two__single {
  background: #1e1e1e;
}

/* ================================
   RESPONSIVE (MOBILE)
   ================================ */
@media (max-width: 767px) {

  .pricing-section {
    padding: 60px 0;
  }

  /* 🔥 LOGO SIZE (MOBILE) */
  .main-menu-three__logo img {
    width: 120px;
    height: auto;
  }

  .main-header-three__top {
    display: none;
  }
}