/* ==========================================================================
   Webex Studio — Home page styles
   ========================================================================== */

:root {
  --clr-dark: #152139;
  --clr-navy: #152139;
  /*--clr-heading: #303030;*/
  --clr-heading: #0B1220;
  
  --clr-section-alt: #f8f8f8;
  --clr-light: #eff2f8;
  /*--clr-orange: #FC5A14;*/
    --clr-orange: #F46002;
  --clr-orange-dark: #C94810;
  --clr-cream: #efe9e1;
  --clr-cream-2: #f5f2ed;
  --clr-gray-700: #4a4a4a;
  --clr-gray-500: #767676;
  --clr-border: #e4e0d8;
  --font-heading: "Poppins", sans-serif;
  --font-body: "Inter", sans-serif;
  --topbar-h: 2.4rem;
}
@media (max-width: 575.98px) {
  :root { --topbar-h: 2.1rem; }
}

html { scroll-behavior: smooth; }

/*.container { max-width: 85% !important; }*/

.container { max-width: 80% !important; }

body {
  /*font-family: var(--font-body);*/
  font-family: "Montserrat", sans-serif!important;
  color: var(--clr-dark);
  overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6 {
   font-family: "Montserrat", sans-serif!important;
  font-weight: 600;
  color: var(--clr-heading);
}

a { text-decoration: none; }

.text-orange { color: var(--clr-orange) !important; }
.bg-cream { background-color: var(--clr-cream); }
.bg-cream-2 { background-color: #F8FAFC; }
.services-section {
  background: #ffffff !important;
}
#services.services-section {
  position: relative;
  background: #ffffff !important;
}
#services.services-section .container { position: relative; z-index: 1; }
.services-intro-title { color: var(--clr-heading); }
.services-intro-sub { color: var(--clr-gray-700); }
.agency-intro-section {
  background: #ffffff;
}
#contact.bg-white {
  background: #ffffff !important;
}
.work-preview-section {
  background: var(--clr-section-alt);
}
.blog-teaser-section {
  background: var(--clr-section-alt);
}

.section-pad { padding-top: 5.5rem; padding-bottom: 5.5rem; }

.eyebrow {
  text-transform: uppercase;
  letter-spacing: .12em;
  font-size: .8rem;
  font-weight: 600;
  color: var(--clr-orange);
}
.eyebrow i { margin-right: .35rem; }

/* Buttons */
.btn-brand {
  /*background: linear-gradient(160deg, var(--clr-orange), #000);*/
  background: var(--clr-orange);
  border: none;
  color: #ffffff;
  font-weight: 700;
  letter-spacing: .03em;
  padding: 10px 1.75rem;
  border-radius: 999px;
  transition: all .2s ease;
}
.btn-brand:hover {
  /*background: linear-gradient(90deg, #ff9526 0%, #f04c15 60%, #d13611 100%);*/
  background: var(--clr-orange-dark);
  color: #fff;
  transform: translateY(-2px);
}
.btn-outline-brand {
  border: 2px solid var(--clr-dark);
  color: var(--clr-dark);
  font-weight: 600;
  padding: .7rem 1.75rem;
  border-radius: 999px;
  transition: all .2s ease;
}
.btn-outline-brand:hover {
  background-color: var(--clr-dark);
  color: #fff;
}

/* Sticky top info bar (inbound number) — stays visible above the navbar while scrolling */
.top-info-bar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1031; /* above navbar's fixed-top (1030) */
  height: var(--topbar-h);
  /*background: var(--clr-orange);*/
  background:#eeeeee;
  color: #000;
  display: flex;
  align-items: center;
}
.top-info-bar .container-fluid {
  padding-left: 4rem;
  padding-right: 4rem;
}
@media (max-width: 991.98px) {
  .top-info-bar .container-fluid { padding-left: 2rem; padding-right: 2rem; }
}
@media (max-width: 575.98px) {
  .top-info-bar .container-fluid { padding-left: 1.25rem; padding-right: 1.25rem; }
}
.top-info-bar-inner {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 1.5rem;
  width: 100%;
}
.top-info-bar-phone,
.top-info-bar-email {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  color: #000;
  font-weight: 700;
  font-size: .85rem;
  letter-spacing: .02em;
  transition: opacity .2s ease;
}
.top-info-bar-phone:hover,
.top-info-bar-email:hover { opacity: .75; color: #000; }
.top-info-bar-phone i,
.top-info-bar-email i { font-size: .8rem; }

/* Navbar sits directly below the top info bar, both stay fixed on scroll */
body.has-topbar .navbar-webex.fixed-top { top: var(--topbar-h); }
body.has-topbar { padding-top: var(--topbar-h); }

/* Navbar */
.navbar-webex {
  background: #000000;
  padding-top: .6rem;
  padding-bottom: .6rem;
  transition: background-color .3s ease, box-shadow .3s ease;
}
.navbar-webex .container-fluid {
  padding-left: 4rem;
  padding-right: 4rem;
}
@media (min-width: 992px) {
  .navbar-webex .container-fluid {
    flex-wrap: nowrap;
    padding-left: 2rem;
    padding-right: 2rem;
  }
  .navbar-webex .navbar-collapse {
    flex-wrap: nowrap;
  }
  .navbar-webex .navbar-nav {
    flex-wrap: nowrap;
  }
  .navbar-webex .nav-link {
    margin: 0 .45rem;
    white-space: nowrap;
  }
}
@media (max-width: 991.98px) {
  .navbar-webex .container-fluid {
    padding-left: 2rem;
    padding-right: 2rem;
  }
}
@media (max-width: 575.98px) {
  .navbar-webex .container-fluid {
    padding-left: 1.25rem;
    padding-right: 1.25rem;
  }
}
.navbar-webex.scrolled {
  background-color: #000000;
  box-shadow: 0 4px 18px rgba(0,0,0,.25);
}
.navbar-webex .nav-link {
  color: #fff;
  font-weight: 500;
  margin: 0 .6rem;
  position: relative;
  transition: color .3s ease;
}
.navbar-webex.scrolled .nav-link { color: #fff; }
.navbar-webex .nav-link.active,
.navbar-webex .nav-link:hover,
.navbar-webex .nav-link:focus,
.navbar-webex .nav-link.show { color: var(--clr-orange); }
.navbar-cta { white-space: nowrap; }

/* Services mega menu */
.services-mega { position: relative; }
.services-mega .dropdown-toggle::after { vertical-align: .1em; }
.services-mega-menu {
  width: min(860px, 92vw);
  padding: 1.75rem;
  margin-top: .5rem;
  border: none;
  border-radius: 16px;
  box-shadow: 0 30px 60px rgba(0,0,0,.2);
}
@media (min-width: 992px) {
  .services-mega-menu {
    left: 50%;
    transform: translateX(-50%);
  }
}
.mega-menu-title {
  font-weight: 700;
  color: var(--clr-heading);
  font-size: .85rem;
  text-transform: uppercase;
  letter-spacing: .05em;
  margin-bottom: 1rem;
}
.mega-menu-list { list-style: none; padding-left: 0; margin-bottom: 0; }
.mega-menu-list li { margin-bottom: .65rem; }
.mega-menu-list a { color: var(--clr-gray-700); font-size: .9rem; transition: color .2s ease; }
.mega-menu-list a:hover { color: var(--clr-orange); }
.mega-menu-img {
  width: 100%;
  height: 100%;
  min-height: 170px;
  object-fit: cover;
  border-radius: 12px;
  display: block;
}
@media (max-width: 991.98px) {
  .services-mega-menu {
    position: static;
    float: none;
    width: 100%;
    padding: 1.25rem;
    box-shadow: none;
    border: 1px solid var(--clr-border);
    margin-top: .75rem;
    inset: auto;
    transform: none;
  }
  .mega-menu-img { min-height: 140px; margin-top: .5rem; }
}
@media (max-width: 991.98px) {
  .navbar-collapse {
    background-color: var(--clr-cream);
    border-radius: 14px;
    padding: 1.25rem 1.25rem 1.5rem;
    margin-top: .75rem;
    box-shadow: 0 10px 30px rgba(0,0,0,.12);
  }
  .navbar-webex .navbar-collapse .nav-link { color: var(--clr-dark); }
  .navbar-webex .navbar-nav { margin-bottom: .5rem; }
  .navbar-cta { width: 100%; text-align: center; }
}
.navbar-webex .navbar-toggler { border-color: rgba(255,255,255,.6); }
.navbar-webex .navbar-toggler-icon {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3E%3Cpath stroke='rgba(255,255,255,0.9)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");
}
.navbar-webex.scrolled .navbar-toggler { border-color: rgba(255,255,255,.6); }
.navbar-webex.scrolled .navbar-toggler-icon {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3E%3Cpath stroke='rgba(255,255,255,0.9)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");
}

.brand-logo {
  display: flex;
  align-items: center;
  padding-top: 0;
  padding-bottom: 0;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1.4rem;
  color: #fff;
  transition: color .3s ease;
}
.navbar-webex.scrolled .brand-logo { color: #fff;}
.brand-logo span { color: var(--clr-orange); }
.brand-logo img {
  height: 46px;
  
  width: auto;
}

/* Inner page banner */
.page-banner {
  /*background-color: #362626;*/
  background: linear-gradient(rgba(0,0,0,.55), rgba(0,0,0,.55)), url(../images/about-us.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  /*min-height: 60vh;*/
  min-height: 80vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  position: relative;
  overflow: hidden;
}

/*.page-banner::before { top: 14%; left: 6%; }*/
/*.page-banner::after { bottom: 12%; right: 8%; box-shadow: -140px -30px 0 -4px rgba(252,90,20,.6); }*/
.page-banner h1 {
  color: #fff;
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 700;
  margin-bottom: .75rem;
}
.page-banner .breadcrumb-nav {
  font-size: .9rem;
  font-weight: 500;
}
.page-banner .breadcrumb-nav a { color: rgba(255,255,255,.7); }
.page-banner .breadcrumb-nav a:hover { color: var(--clr-orange); }
.page-banner .breadcrumb-nav .current { color: var(--clr-orange); }
@media (max-width: 991.98px) {
  .page-banner { min-height: 45vh; padding-top: 7.5rem; padding-bottom: 2.5rem; }
}

/* FAQ accordion (About page) */
/*.faq-section { background: linear-gradient(180deg, #fff6ef 0%, #fdf2ea 45%, #f6ece0 100%); }*/
.faq-section { background:#ffffff; }
.faq-stack { max-width: 900px; }
.faq-item {
  background-color: #fff;
  border-radius: 10px;
  margin-bottom: 1rem;
  box-shadow: 0 4px 14px rgba(0,0,0,.05);
  overflow: hidden;
  border: 1px solid transparent;
  transition: border-color .3s ease, box-shadow .3s ease;
}
.faq-item:has(.collapse.show) {
  border-color: var(--clr-orange);
  box-shadow: 0 10px 28px rgba(252,90,20,.14);
}
.faq-question {
  width: 100%;
  background: none;
  border: none;
  text-align: left;
  padding: 1.25rem 1.5rem;
  font-weight: 700;
  color: var(--clr-dark);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  transition: background-color .25s ease;
}
.faq-question:hover { background-color: var(--clr-light); }
.faq-question:not(.collapsed) { background-color: var(--clr-light); }

/* Plus / minus toggle icon (question opens with "+", becomes "-" when expanded) */
.faq-toggle-icon {
  display: inline-flex;
  position: relative;
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--clr-cream-2);
  border: 1px solid var(--clr-border);
  transition: background-color .25s ease, border-color .25s ease, transform .25s ease;
}
.faq-toggle-icon::before,
.faq-toggle-icon::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  background: var(--clr-dark);
  transition: transform .25s ease, background-color .25s ease, opacity .25s ease;
}
.faq-toggle-icon::before { width: 12px; height: 2px; transform: translate(-50%, -50%); }
.faq-toggle-icon::after { width: 2px; height: 12px; transform: translate(-50%, -50%); }
.faq-question:hover .faq-toggle-icon { border-color: var(--clr-orange); }
.faq-question:not(.collapsed) .faq-toggle-icon { background: var(--clr-orange); border-color: var(--clr-orange); }
.faq-question:not(.collapsed) .faq-toggle-icon::before,
.faq-question:not(.collapsed) .faq-toggle-icon::after { background: #fff; }
.faq-question:not(.collapsed) .faq-toggle-icon::after { transform: translate(-50%, -50%) rotate(90deg); opacity: 0; }
.faq-answer { padding: 0 1.5rem 1.25rem; color: var(--clr-gray-700); margin-bottom: 0; line-height: 1.7; }

/* Testimonials — dark full-bleed carousel (About page) */
.testimonials-wall-section {
  position: relative;
  background: linear-gradient(135deg, #152139 0%, #1c2c4d 100%);
  padding: 5rem 0 4.5rem;
  overflow: hidden;
}
.testimonials-wall-section::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image:
    radial-gradient(50% 45% at 90% 10%, rgba(252,90,20,.14), transparent 70%),
    radial-gradient(45% 40% at 8% 95%, rgba(255,255,255,.05), transparent 70%);
}
.testimonials-wall-section::after {
  content: "";
  position: absolute;
  left: 40px;
  bottom: 32px;
  width: 90px;
  height: 90px;
  z-index: 0;
  pointer-events: none;
  background-image: radial-gradient(rgba(255,255,255,.18) 1.5px, transparent 1.5px);
  background-size: 14px 14px;
  opacity: .5;
}
.testimonials-wall-section .container { position: relative; z-index: 1; }
.testimonial-wall {
  display: grid;
  grid-template-columns: minmax(260px, .85fr) minmax(0, 1.6fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}
.testimonial-wall-intro {
  position: relative;
}
.testimonial-wall-watermark {
  position: absolute;
  left: -6px;
  top: 220px;
  z-index: 0;
  display: grid;
  color: rgba(255,255,255,.06);
  font-size: clamp(2.5rem, 6vw, 4.5rem);
  font-weight: 800;
  line-height: .85;
  letter-spacing: -.03em;
  pointer-events: none;
}
.testimonial-wall-eyebrow {
  position: relative;
  z-index: 1;
  display: inline-block;
  color: var(--clr-orange);
  font-weight: 700;
  letter-spacing: .12em;
  font-size: .8rem;
  text-transform: uppercase;
  margin-bottom: .75rem;
}
.testimonial-wall-heading {
  position: relative;
  z-index: 1;
  margin: 0;
  font-weight: 800;
  font-size: clamp(1.9rem, 3.6vw, 2.75rem);
  line-height: 1.15;
}
.testimonial-wall-heading span { display: block; color: #ffffff; }
.testimonial-wall-heading strong { display: block; color: var(--clr-orange); font-weight: 800; }

.testimonial-wall-columns {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.25rem;
  height: 560px;
  position: relative;
}
.testimonial-wall-columns::before,
.testimonial-wall-columns::after {
  content: "";
  position: absolute;
  left: 0; right: 0;
  height: 70px;
  z-index: 2;
  pointer-events: none;
}
.testimonial-wall-columns::before {
  top: 0;
  background: linear-gradient(180deg, #152139 0%, rgba(21,33,57,0) 100%);
}
.testimonial-wall-columns::after {
  bottom: 0;
  background: linear-gradient(0deg, #152139 0%, rgba(21,33,57,0) 100%);
}
.testimonial-wall-col {
  overflow: hidden;
  height: 100%;
}
.testimonial-wall-track {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  will-change: transform;
}
.marquee-scroll-up { animation: wallScrollUp 14s linear infinite; }
.marquee-scroll-down { animation: wallScrollDown 14s linear infinite; }
.testimonial-wall-col:hover .testimonial-wall-track { animation-play-state: paused; }
@keyframes wallScrollUp {
  from { transform: translateY(0); }
  to { transform: translateY(-50%); }
}
@keyframes wallScrollDown {
  from { transform: translateY(-50%); }
  to { transform: translateY(0); }
}

.review-card {
  position: relative;
  padding: 1.5rem 1.5rem 1.35rem;
  border: 1px solid rgba(0,0,0,.06);
  border-radius: 16px;
  background: #ffffff;
  box-shadow: 0 12px 28px rgba(0,0,0,.08);
}
.review-card .reviewer {
  display: flex;
  align-items: center;
  gap: .85rem;
  margin-bottom: 1.1rem;
}
.review-card .avatar {
  flex: 0 0 auto;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  object-fit: cover;
}
.review-card .avatar-initial {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--clr-orange);
  color: #ffffff;
  font-weight: 700;
}
.review-card .reviewer b { display: block; color: var(--clr-dark); font-size: .9rem; }
.review-card .reviewer small { display: block; color: var(--clr-gray-500); font-size: .78rem; }
.review-card p {
  color: var(--clr-gray-700);
  font-size: .92rem;
  line-height: 1.5;
  margin: 0 0 1.75rem;
}
.review-badge {
  position: absolute;
  right: 18px;
  bottom: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 34px;
  height: 24px;
  padding: 0 6px;
  border-radius: 6px;
  background: var(--clr-orange);
  color: #ffffff;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .04em;
}

@media (max-width: 991.98px) {
  .testimonial-wall { grid-template-columns: 1fr; }
  .testimonial-wall-intro { text-align: center; }
  .testimonial-wall-watermark { display: none; }
  .testimonial-wall-columns { height: 480px; }
}
@media (max-width: 575.98px) {
  .testimonial-wall-columns { grid-template-columns: 1fr; height: 420px; }
}

/* Meet our team — photo cards (About page) */
.meet-team-cards-section { background-color: #fbf9f6; }
.meet-team-card {
  position: relative;
  border-radius: 14px;
  overflow: hidden;
  height: 430px;
  box-shadow: 0 10px 26px rgba(0,0,0,.08);
}
.meet-team-card img { width: 100%; height: 100%; object-fit: cover; display: block; }
.meet-team-card-info {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 1.5rem 1.25rem;
  background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.65) 100%);
  color: #fff;
}
.meet-team-card-info h5 { color: #fff; font-weight: 700; margin-bottom: .2rem; }
.meet-team-card-info p { color: rgba(255,255,255,.85); font-size: .88rem; margin-bottom: 0; }

/* About vision/mission grid (About page) — dark glassmorphism cards */
.about-grid-section {
  position: relative;
  background: #EEF2F6;
}
.about-grid-subtitle { max-width: 700px; color: var(--clr-gray-700); }

.about-grid-row {
  display: flex;
  flex-wrap: wrap;
  border: 1px solid var(--clr-border);
  border-radius: 16px;
  overflow: hidden;
  background: #fff;
}
.about-grid-col {
  flex: 1 1 25%;
  padding: 2.25rem 1.75rem;
  border-right: 1px solid var(--clr-border);
  border-top: 1px solid var(--clr-border);
}
.about-grid-col:nth-child(1) { border-top: none; }
@media (min-width: 992px) {
  .about-grid-col { border-top: none; }
  .about-grid-col:last-child { border-right: none; }
}
@media (max-width: 991.98px) and (min-width: 576px) {
  .about-grid-col { flex: 1 1 50%; }
  .about-grid-col:nth-child(2n) { border-right: none; }
  .about-grid-col:nth-child(3) { border-top: 1px solid var(--clr-border); }
}
@media (max-width: 575.98px) {
  .about-grid-col { flex: 1 1 100%; border-right: none; }
  .about-grid-col:nth-child(n+2) { border-top: 1px solid var(--clr-border); }
}

.about-grid-card-icon {
  width: 50px; height: 50px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 12px;
  background: rgba(252,90,20,.15);
  color: var(--clr-orange);
  font-size: 1.3rem;
  margin-bottom: 1.25rem;
}
.about-grid-col h3 { font-size: 1.2rem; font-weight: 700; margin-bottom: .75rem; color: var(--clr-heading); }
.about-grid-col p { color: var(--clr-gray-700); margin-bottom: 0; line-height: 1.65; font-size: .93rem; }

/* Meet the team hero (About page): text left, full-bleed photo right */
.meet-team-hero { background-color: #fff; }
.meet-team-hero-inner { /*max-width: 480px;*/ max-width: 800px; margin: 0 auto; padding: 4.5rem 2rem; }
.meet-team-hero-inner h2 {
  font-size: clamp(1.9rem, 3vw, 2.5rem);
  color: var(--clr-heading);
  margin-bottom: 1.5rem;
}
.meet-team-script {
  font-style: italic;
  color: var(--clr-orange);
  font-weight: 400;
}
.meet-team-hero-inner p { color: var(--clr-gray-700); line-height: 1.75; margin-bottom: 1.15rem; }
.meet-team-hero-inner hr { border-top: 1px solid var(--clr-border); margin: 1.75rem 0 1.5rem; opacity: 1; }
.meet-team-socials a {
  width: 38px; height: 38px;
  border: 1px solid var(--clr-border);
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-right: .6rem;
  color: var(--clr-dark);
  transition: all .2s ease;
}
.meet-team-socials a:hover { background-color: var(--clr-orange); border-color: var(--clr-orange); color: #fff; }
.meet-team-contact { font-weight: 600; color: var(--clr-dark); white-space: nowrap; }
.meet-team-contact:hover { color: var(--clr-orange); }
.meet-team-hero-photo { position: relative; height: 100%; min-height: 560px; overflow: hidden; }
.meet-team-hero-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
@media (max-width: 991.98px) {
  .meet-team-hero-photo { min-height: 380px; }
  .meet-team-hero-inner { padding: 3rem 1.5rem; text-align: center; }
  .meet-team-socials { width: 100%; text-align: center; margin-bottom: 1rem; }
}

/* Split hero-style banner (About page): text left, ringed circular photo right */
.page-banner--split { text-align: left; padding-top: 8.5rem; padding-bottom: 4.5rem; }
.page-banner-tag {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  color: var(--clr-orange);
  font-weight: 700;
  font-size: .78rem;
  letter-spacing: .1em;
  margin-bottom: 1rem;
}
.page-banner--split h1 { font-size: clamp(2.2rem, 4.5vw, 3.4rem); line-height: 1.15; }
.page-banner--split .breadcrumb-nav { margin-top: .5rem; }

.page-banner-photo-wrap {
  position: relative;
  width: min(360px, 80%);
  aspect-ratio: 1 / 1;
  margin: 0 auto;
}
.page-banner-photo-wrap::before {
  content: "";
  position: absolute;
  inset: -22px;
  border-radius: 50%;
  border: 2px solid var(--clr-orange);
  border-left-color: transparent;
  border-bottom-color: transparent;
  transform: rotate(-35deg);
}
.page-banner-photo-wrap::after {
  content: "";
  position: absolute;
  bottom: -14px;
  left: -14px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background-color: var(--clr-orange);
  box-shadow: 300px -290px 0 -4px rgba(252,90,20,.85);
}
.page-banner-photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
  display: block;
  position: relative;
  z-index: 1;
  box-shadow: 0 20px 45px rgba(0,0,0,.4);
}
@media (max-width: 991.98px) {
  .page-banner--split { text-align: center; }
  .page-banner--split h1,
  .page-banner--split .breadcrumb-nav { text-align: center !important; }
  .page-banner-photo-wrap { margin-top: 2.5rem; }
}

/* Hero */
.hero {
  --hero-nav-offset: 6.3rem;
  background-color: var(--clr-dark);
  position: relative;
  padding-top: var(--hero-nav-offset);
  overflow: hidden;
  min-height: 105vh;
  display: flex;
  align-items: center;
}
@media (max-width: 991.98px) {
  .hero { --hero-nav-offset: 5.3rem; min-height: 88vh; }
}
.hero-video {
  position: absolute;
  top: var(--hero-nav-offset);
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: calc(100% - var(--hero-nav-offset));
  object-fit: cover;
  z-index: 0;
}
.hero-overlay {
  position: absolute;
  top: var(--hero-nav-offset);
  left: 0;
  right: 0;
  bottom: 0;
 /* background-color: rgba(0,0,0,0.4);*/
  z-index: 1;
}
.hero-content {
  position: relative;
  z-index: 2;
  width: 100%;
}
.hero h1 {
  font-size: clamp(2.2rem, 6vw, 4.5rem);
  color: #fff;
  line-height: 1.1;
  font-weight: 700;
}
.hero-badge {
  width: 110px;
  height: 110px;
  position: relative;
}
.hero-badge svg { animation: spin 12s linear infinite; }
.hero-badge .arrow {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  font-size: 1.4rem;
  color: #fff;
}
@keyframes spin { from { transform: rotate(0deg);} to { transform: rotate(360deg);} }

/* Stat cards */
.stat-card {
  border: 1px solid var(--clr-border);
  border-radius: 14px;
  padding: 1.5rem 1rem;
  text-align: center;
  height: 100%;
  background: #fff;
}
.stat-card .stat-icon {
  width: 46px; height: 46px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: rgba(252,90,20,.12);
  color: var(--clr-orange);
  font-size: 1.3rem;
  margin-bottom: .75rem;
}
.stat-card .stat-num { font-weight: 700; font-size: 1.3rem; }
.stat-card .stat-label { color: var(--clr-gray-500); font-size: .85rem; }

.intro-photo-wrap { position: relative; }
.intro-photo-wrap img {
  border-radius: 50%;
  border: 8px solid #fff;
  box-shadow: 0 10px 30px rgba(0,0,0,.12);
}

/* Sliding heading text (Complete Web solution / Service Australia) */
.heading-slider {
  display: inline-block;
  overflow: hidden;
  height: 1.15em;
  line-height: 1.15;
  vertical-align: bottom;
  width: 100%;
}
.heading-slider-track {
  display: flex;
  flex-direction: row;
  width: 300%;
  animation: headingSlide 6s cubic-bezier(.65,0,.35,1) infinite;
}
.heading-slide {
  width: 33.3333%;
  flex: 0 0 33.3333%;
  height: 1.15em;
  line-height: 1.15;
  display: block;
  color: var(--clr-dark);
}
@keyframes headingSlide {
  0%   { transform: translateX(0); }
  30%  { transform: translateX(0); }
  38%  { transform: translateX(-33.3333%); }
  63%  { transform: translateX(-33.3333%); }
  71%  { transform: translateX(-66.6666%); }
  96%  { transform: translateX(-66.6666%); }
  100% { transform: translateX(-66.6666%); }
}

/* About photo with trusted badge */
.about-photo-wrap { position: relative; max-width: 480px; }
.about-photo-wrap img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 45% 55% 52% 48% / 55% 45% 55% 45%;
  display: block;
  position: relative;
  z-index: 2;
  box-shadow: 0px 0px 62px 0px rgba(0, 0, 0, 0.36);
}
.about-photo-wrap::before {
  content: "";
  position: absolute;
  top: -7%;
  left: -9%;
  width: 52%;
  height: 52%;
  border: 1.5px solid rgba(255,255,255,.75);
  border-radius: 50%;
  z-index: 1;
}
.trusted-badge {
  position: absolute;
  left: -8%;
  bottom: 6%;
  width: 34%;
  aspect-ratio: 1 / 1;
  background-color: var(--clr-dark);
  color: #fff;
  border-radius: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-size: .8rem;
  line-height: 1.4;
  z-index: 3;
  padding: .5rem;
  box-shadow: 0 12px 26px rgba(0,0,0,.25);
}
.trusted-badge .trusted-num { font-weight: 700; font-size: 2.1rem; }

/* Feature pills */
.feature-pill {
  display: flex;
  align-items: flex-start;
  gap: .75rem;
  border: 1px solid var(--clr-border);
  border-radius: 12px;
  padding: 1rem;
  height: 100%;
  /*font-size: .92rem;*/
  font-size: 2rem;
  font-weight: 500;
}
.feature-check {
  flex-shrink: 0;
  width: 26px; height: 26px;
  border-radius: 50%;
  /*background-color: var(--clr-orange);*/
  background-color: var(--clr-orange);
  color: #ffffff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: .85rem;
}

/* Stat row (framed, divided) */
.stat-row {
  border: 1px solid var(--clr-border);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 0 30px 0px rgba(48, 48, 48, 0.12);
}
.stat-col { border-right: 1px solid var(--clr-border); border-top: 1px solid var(--clr-border); }
.stat-col:first-child, .stat-col:nth-child(3) { border-top: none; }
@media (min-width: 992px) {
  .stat-col { border-top: none; }
  .stat-col:last-child { border-right: none; }
}
@media (max-width: 991.98px) {
  .stat-col:nth-child(2n) { border-right: none; }
  .stat-col:nth-child(3) { border-top: 1px solid var(--clr-border); }
}
.stat-row .stat-card {
  border: none;
  border-radius: 0;
  padding: 4rem 1rem;
}
.stat-icon-img { height: 60px; width: 60px; object-fit: contain; margin-bottom: .9rem; }
.stat-row .stat-num { font-size: 30px; margin-bottom: .35rem; }
.stat-row .stat-label { font-size: 22px; color: var(--clr-dark); }

/* Team — dark section with arch-shaped photo cards */
.team-section-dark { background-color: var(--clr-dark); }
.team-arch-card {
  position: relative;
  border-radius: 130px 130px 20px 20px;
  overflow: hidden;
  aspect-ratio: .62;
  display: flex;
  flex-direction: column;
  box-shadow: 0 20px 40px rgba(0,0,0,.35);
}
.team-arch-info {
  text-align: center;
  padding: 1.6rem 1rem .5rem;
  position: relative;
  z-index: 2;
}
.team-arch-info h5 { margin-bottom: .15rem; font-weight: 700; color: var(--clr-heading); font-size: 1.05rem; }
.team-arch-info p { margin-bottom: 0; font-size: .82rem; color: rgba(26,26,26,.65); }
.team-arch-photo { flex: 1; position: relative; }
.team-arch-photo img { width: 100%; height: 100%; object-fit: cover; object-position: top center; display: block; }

.team-arch-tint-1 { background: linear-gradient(160deg, #f9d77e 0%, #c9a6e0 100%); }
.team-arch-tint-2 { background: #f0f0f0; }
.team-arch-tint-3 { background: linear-gradient(160deg, #cfe0f5 0%, #dbe6f7 100%); }
.team-arch-tint-4 { background: linear-gradient(160deg, #f7d9c4 0%, #fbe8da 100%); }

@media (max-width: 575.98px) {
  .team-arch-card { border-radius: 90px 90px 16px 16px; }
  .team-arch-info { padding: 1.1rem .5rem .35rem; }
  .team-arch-info h5 { font-size: .9rem; }
  .team-arch-info p { font-size: .72rem; }
}

/* Services page — intro list + feature cards */
.services-intro-list { list-style: none; padding-left: 0; }
.services-intro-list li {
  display: flex;
  align-items: flex-start;
  gap: .75rem;
  margin-bottom: .85rem;
  font-size: .95rem;
}
.services-intro-list .feature-check { margin-top: .1rem; }

.service-feature-card {
  background-color: #fff;
  border-radius: 16px;
  padding: 2.25rem 1.75rem;
  height: 100%;
  box-shadow: 0 6px 20px rgba(0,0,0,.06);
  transition: transform .3s ease, box-shadow .3s ease;
}
.service-feature-card:hover { transform: translateY(-6px); box-shadow: 0 18px 34px rgba(0,0,0,.1); }
.service-feature-icon {
  width: 66px; height: 66px;
  margin: 0 auto 1.25rem;
  border-radius: 50%;
  background: linear-gradient(160deg, var(--clr-orange), #000);
  color: #ffffff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.7rem;
}
.service-feature-card h5 { font-weight: 700; margin-bottom: .75rem; }
.service-feature-card p { color: var(--clr-gray-500); font-size: .9rem; margin-bottom: 1.1rem; }
.service-feature-link { color: var(--clr-orange); font-weight: 600; font-size: .88rem; }
.service-feature-link i { margin-left: .3rem; transition: transform .2s ease; }
.service-feature-link:hover i { transform: translateX(3px); }

/* Pricing */
.pricing-section { padding-top: 2rem; }
.pricing-badge {
  display: inline-flex;
  align-items: center;
  background-color: #FFEFE6;
  color: var(--clr-orange);
  font-weight: 700;
  font-size: .8rem;
  padding: .4rem 1.1rem;
  border-radius: 999px;
  margin-bottom: 1rem;
  box-shadow: 0 2px 10px rgba(0,0,0,.06);
}
.pricing-subtitle { color:var(--clr-dark); max-width: 560px; margin-left: auto; margin-right: auto; }

.pricing-card {
  background-color: #fff;
  border: 1px solid var(--clr-border);
  border-radius: 20px;
  padding: 2.25rem 1.75rem;
  height: 100%;
  text-align: left;
  transition: transform .3s ease, box-shadow .3s ease;
}
.pricing-card:hover { transform: translateY(-6px); box-shadow: 0 20px 40px rgba(0,0,0,.08); }
.pricing-card h5 { font-weight: 700; margin-bottom: 1rem; }
.pricing-price {
  font-size: 2.75rem;
  font-weight: 800;
  color: var(--clr-heading);
  line-height: 1;
  margin-bottom: .5rem;
}
.pricing-currency { font-size: 1.6rem; font-weight: 700; vertical-align: top; }
.pricing-period { font-size: 1rem; font-weight: 500; color: var(--clr-gray-500); }
.pricing-tagline { color: var(--clr-gray-500); font-size: .9rem; margin-bottom: 1.5rem; }
.pricing-includes { font-weight: 700; font-size: .85rem; margin: 1.75rem 0 1rem; color: var(--clr-dark); }
.pricing-features { list-style: none; padding-left: 0; margin-bottom: 0; }
.pricing-features li {
  display: flex;
  align-items: center;
  gap: .65rem;
  font-size: .92rem;
  color: var(--clr-gray-700);
  margin-bottom: .85rem;
}
.pricing-check {
  flex-shrink: 0;
  width: 22px; height: 22px;
  border-radius: 50%;
  border: 1.5px solid var(--clr-orange);
  color: var(--clr-orange);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: .7rem;
}

.pricing-card--featured {
  background-color: #FFF3EA;
  border-color: #FFD8BC;
  box-shadow: 0 20px 45px rgba(252,90,20,.15);
  transform: scale(1.04);
}
.pricing-card--featured:hover { transform: scale(1.04) translateY(-6px); }
.pricing-recommended {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  background-color: #fff;
  color: var(--clr-orange);
  font-weight: 700;
  font-size: .78rem;
  padding: .35rem 1rem;
  border-radius: 999px;
  margin-bottom: 1.1rem;
  box-shadow: 0 4px 12px rgba(0,0,0,.08);
}
@media (max-width: 991.98px) {
  .pricing-card--featured { transform: scale(1); }
  .pricing-card--featured:hover { transform: translateY(-6px); }
}

/* Service cards */
.service-card {
  border: 1px solid var(--clr-border);
  border-radius: 2px;
  padding: 2.75rem 1.5rem;
  height: 100%;
  min-height: 400px;
  background: #fff;
   /*background: #F7F7F8;*/
  /*background: url(../../images/16.png);*/
  background-position: center;
   background-repeat: no-repeat;
   display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
  box-shadow: 0 4px 16px rgba(0,0,0,.05);
  transition: transform .8s ease, box-shadow .8s ease, background-color .8s ease;
}
.service-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 16px 34px rgba(0,0,0,.12);
}
.service-card img { /*height: 90px;*/ height:300px; width: auto; margin-bottom: 1.5rem; object-fit: contain; }
.service-card h5 { margin-bottom: 0; font-weight: 700; font-size: 25px; }
.service-card p { color: var(--clr-gray-500); font-size: .92rem; margin-bottom: 0; }

/* Slide-up black popup shown on hover */
.service-popup {
  position: absolute;
  inset: 0;
  background-color: #000000;
  /*background-color: #524D4D;*/
  color: #fff;
  border-radius: 2px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.5rem;
  padding: 2rem 1.75rem;
  text-align: center;
  transform: translateY(100%);
  transition: transform .9s cubic-bezier(.25,.8,.25,1);
  z-index: 3;
}
.service-card:hover .service-popup { transform: translateY(0); }
.service-popup p {
  color: rgba(255,255,255,.85);
  font-size: .92rem;
  line-height: 1.7;
  margin-bottom: 0;
}
.service-popup-link {
  color: #fff;
  font-weight: 700;
  letter-spacing: .06em;
  font-size: .85rem;
  border-bottom: 1px solid transparent;
  transition: color .2s ease, border-color .2s ease;
}
.service-popup-link:hover {
  color: var(--clr-orange);
  border-color: var(--clr-orange);
}

.service-card--cta {
  background-color: #4a4844;
  color: #fff;
  padding: 2.5rem 2rem;
}
.service-card--cta p { color: rgba(255,255,255,.8); font-size: .9rem; line-height: 1.7; }
.service-card--cta a { color: #fff; font-weight: 700; letter-spacing: .04em; font-size: .9rem; }
.service-card--cta a:hover { color: var(--clr-orange); }

/* WordPress agency intro — vertical marquee columns */
.wp-marquee-wrap {
  display: flex;
  gap: .4rem;
  height: 520px;
  position: relative;
}
.wp-marquee-wrap::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 90px;
  background: linear-gradient(0deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.85) 70%, #ffffff 100%);
  pointer-events: none;
  z-index: 2;
}
.wp-marquee-wrap::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 90px;
  background: linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.85) 70%, #ffffff 100%);
  pointer-events: none;
  z-index: 2;
}
.wp-marquee-col {
  flex: 1;
  overflow: hidden;
  border-radius: .75rem;
}
.wp-marquee-track {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  will-change: transform;
}
.wp-marquee-track img {
  width: 100%;
  height: 250px;
  object-fit: cover;
  border-radius: .75rem;
  box-shadow: 0 6px 16px rgba(0,0,0,.08);
  display: block;
}
@keyframes wpScrollUp {
  from { transform: translateY(0); }
  to { transform: translateY(-50%); }
}
@keyframes wpScrollDown {
  from { transform: translateY(-50%); }
  to { transform: translateY(0); }
}
.wp-marquee-up { animation: wpScrollUp 16s linear infinite; }
.wp-marquee-down { animation: wpScrollDown 16s linear infinite; }
.wp-marquee-col:hover .wp-marquee-track { animation-play-state: paused; }

@media (max-width: 767.98px) {
  .wp-marquee-wrap { height: 380px; }
  .wp-marquee-track img { height: 180px; }
}

/* Tech logos strip — right-to-left marquee */
.tech-strip {
  background:
    radial-gradient(60% 120% at 50% 0%, rgba(252,90,20,.06), transparent 65%),
    var(--clr-section-alt);
  overflow-x: hidden;
  overflow-y: visible;
  padding-top: 2.75rem;
  padding-bottom: 1.5rem;
}
.tech-marquee-row { width: 100%; overflow-x: hidden; overflow-y: visible; padding: 2.5rem  0; }
.tech-marquee-track {
  display: flex;
  align-items: center;
  gap: 2.75rem;
  width: max-content;
  will-change: transform;
}
.tech-strip img {
  height: 100px; width: 100px; object-fit: cover; border-radius: 50%;
  border: 1px solid rgba(252,90,20,.18);
  opacity: .95;
  transition: transform .25s ease;
  transform-origin: center center;
  flex: 0 0 auto;
  padding: 4px;
  background: #ffffff;
  box-shadow: 0 10px 24px rgba(26,26,26,.08);
}
.tech-strip img:hover { transform: scale(1.15); }

/* Featured & Listed In badges */
.featured-badge {
  height: 60px; width: 52px;
  object-fit: cover;
  border-radius: 6px;
  box-shadow: 0 4px 10px rgba(0,0,0,.12);
}

/* WP dev services cards */
.wpdev-card-wrap { perspective: 1000px; }
.wpdev-card {
  position: relative;
  border-radius: 16px;
  overflow: hidden;
  height: 470px;
  box-shadow: 0 8px 20px rgba(0,0,0,.12);
  transform: rotateX(0deg) translateZ(0) scale(1);
  transform-style: preserve-3d;
  transform-origin: center bottom;
  transition: transform .55s cubic-bezier(.25,.8,.25,1), box-shadow .55s cubic-bezier(.25,.8,.25,1);
  will-change: transform;
}
.wpdev-card:hover {
  transform: rotateX(22deg) translateZ(20px) scale(1.02);
  box-shadow: 0 55px 55px -20px rgba(0,0,0,.4);
}
.wpdev-card img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform .5s ease, filter .55s ease;
  filter: brightness(.4);
  transform: translateZ(0);
}
.wpdev-card:hover img { transform: scale(1.1) translateZ(0); filter: brightness(.9); }
.wpdev-card .overlay {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,.05) 0%, rgba(0,0,0,.3) 45%, rgba(0,0,0,.6) 100%);
  display: flex; flex-direction: column; justify-content: flex-end;
  align-items: center;
  text-align: center;
  padding: 1.75rem 1.5rem;
  color: #fff;
  transform-style: preserve-3d;
  transform: translateZ(20px);
  transition: transform .55s cubic-bezier(.25,.8,.25,1), background .55s ease;
}
.wpdev-card:hover .overlay {
  background: linear-gradient(180deg, rgba(0,0,0,.2) 0%, rgba(0,0,0,.5) 50%, rgba(0,0,0,.85) 100%);
  transform: translateZ(55px);
}

.wpdev-card .wpdev-label,
.wpdev-card .overlay h6,
.wpdev-card .overlay p {
  transform: translateZ(0);
  transition: transform .55s cubic-bezier(.25,.8,.25,1), text-shadow .55s ease;
}
.wpdev-card:hover .wpdev-label { transform: translateZ(20px) translateY(-10px); }
.wpdev-card:hover .overlay h6 { transform: translateZ(45px) translateY(-16px); text-shadow: 0 18px 28px rgba(0,0,0,.55); }
.wpdev-card:hover .overlay p { transform: translateZ(12px) translateY(-8px); }

.wpdev-card .wpdev-label {
  /*font-size: 2.4rem;*/
  font-size: 24px;
  font-weight: 800;
  letter-spacing: .01em;
  margin-bottom: .25rem;
  color: rgba(255,255,255,.4);
  -webkit-text-stroke: 1px rgba(255,255,255,.75);
}
@media (max-width: 767.98px) {
  .wpdev-card .wpdev-label { font-size: 1.6rem; }
}
.wpdev-card .overlay h6 {
  color: #fff;
  margin-bottom: .6rem;
  font-size: 44px;
  font-weight: 600;
  background-color: rgba(0,0,0,.65);
  padding: .2em .5em;
  border-radius: 8px;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}
@media (max-width: 767.98px) {
  .wpdev-card .overlay h6 { font-size: 26px; }
}
.wpdev-card .overlay p {
  font-size: 16px;
  margin-bottom: 0;
  max-width: 340px;
  background-color: rgba(0,0,0,.65);
  padding: .3em .6em;
  border-radius: 8px;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

.rating-badge {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  background-color: #FFEFE6;
  color: var(--clr-dark);
  font-weight: 600;
  font-size: .9rem;
  padding: .55rem 1.1rem;
  border-radius: 999px;
}
.rating-badge i { color: var(--clr-orange); }

.wpdev-services-section { padding-top: 2rem; }
.wpdev-heading-spaced { margin-bottom: 4.5rem; }
@media (max-width: 575.98px) {
  .wpdev-heading-spaced { margin-bottom: 2.5rem; }
}

.wpdev-heading-gradient {
 /* background: linear-gradient(90deg, var(--clr-orange) 0%, var(--clr-dark) 100%);*/
 /*background: linear-gradient(135deg, #ffb347 0%, #ff6b00 50%, #0a0a0c 100%);*/
  /*background: linear-gradient(160deg, var(--clr-orange), #000);*/
/*background: linear-gradient(145deg, #ff6b35 0%, #ff4500 35%, #000000 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: var(--clr-dark);
  font-weight: bold;
  line-height: 1.5;*/
}

.wpdev-agency-heading {
  font-size: clamp(2.1rem, 3.2vw, 2rem);
  font-weight: 800;
  line-height: 1.25;
}

/* Portfolio — scroll-driven marquee rows */
.portfolio-scroll-wrap { display: flex; flex-direction: column; gap: 1.5rem; }
.portfolio-row { overflow: hidden; width: 100%; }
.portfolio-track {
  display: flex;
  gap: 1.5rem;
  width: max-content;
  will-change: transform;
}
.portfolio-item {
  flex: 0 0 auto;
  width: clamp(190px, 20vw, 340px);
  border-radius: 4px;
  overflow: hidden;
  position: relative;
}
.portfolio-item img {
  width: 100%; aspect-ratio: 4 / 3.4; object-fit: cover;
  display: block;
}

/* Trust badges */
.badge-strip img { height: 70px; width: auto; border-radius: 10px; box-shadow: 0 6px 16px rgba(0,0,0,.06); }

/* Consultation form */
.form-control-brand {
  background-color: #fff;
  border: 1px solid var(--clr-border);
  color: var(--clr-dark);
  padding: .85rem 1.1rem;
  border-radius: 50px;
}
.form-control-brand::placeholder { color: #a8a8a8; }
.form-control-brand:focus {
  border-color: var(--clr-orange);
  box-shadow: 0 0 0 .2rem rgba(252,90,20,.15);
}
select.form-control-brand {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='38' height='38' viewBox='0 0 38 38'%3E%3Ccircle cx='19' cy='19' r='19' fill='%231a1a1a'/%3E%3Cpolyline points='11,16 19,24 27,16' fill='none' stroke='white' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right .35rem center;
  background-size: 34px;
  color: var(--clr-dark);
  padding-right: 3.5rem;
}
select.form-control-brand option { color: var(--clr-dark); background-color: #fff; }

textarea.form-control-brand { border-radius: 20px; }

.btn-submit-consult {
  border: none;
  padding: 1rem 1.75rem;
  font-size: 1.05rem;
}

/* Footer */
.footer-webex { background-color: #000000; color: rgba(255,255,255,.7); }
.footer-webex .container-fluid {
  padding-left: 4rem;
  padding-right: 4rem;
}
@media (max-width: 991.98px) {
  .footer-webex .container-fluid {
    padding-left: 2rem;
    padding-right: 2rem;
  }
}
@media (max-width: 575.98px) {
  .footer-webex .container-fluid {
    padding-left: 1.25rem;
    padding-right: 1.25rem;
  }
}
.footer-webex h6 { color: #fff; margin-bottom: 1.1rem; }
.footer-webex a { color: rgba(255,255,255,.7); }
.footer-webex a:hover { color: #ffffff; }
.footer-webex ul { list-style: none; padding-left: 0; }
.footer-webex ul li { margin-bottom: .55rem; }
.footer-webex .social-icon {
  width: 38px; height: 38px;
  border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,.08);
  margin-right: .5rem;
}
.footer-webex .social-icon:hover { background: var(--clr-orange); }
.footer-bottom { border-top: 1px solid rgba(255,255,255,.1); font-size: .85rem; }

/* Back to top */
#backToTop {
  position: fixed; right: 22px; bottom: 22px;
  width: 46px; height: 46px; border-radius: 50%;
  background: var(--clr-orange); color: #fff;
  display: none; align-items: center; justify-content: center;
  z-index: 999; border: none; box-shadow: 0 8px 20px rgba(0,0,0,.2);
}

/* Floating WhatsApp / Email contact icons */
.floating-contact {
  position: fixed;
  right: 22px;
  bottom: 88px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  z-index: 999;
}
.floating-contact a {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 1.5rem;
  box-shadow: 0 8px 20px rgba(0,0,0,.25);
  transition: transform .2s ease;
}
.floating-contact a:hover { transform: translateY(-3px); color: #fff; }
.floating-contact .whatsapp-float { background-color: #25D366; }
.floating-contact .email-float { background-color: var(--clr-orange); }
@media (max-width: 575.98px) {
  .floating-contact { right: 16px; bottom: 78px; gap: 10px; }
  .floating-contact a { width: 46px; height: 46px; font-size: 1.3rem; }
}

/* ==================== Floating Contact Character Widget ====================
   Peeks in from the right edge on a timed cycle, slides fully into view,
   holds, then slides back out. Bounces gently while visible; pausing on hover.
   Two-layer transform: outer element handles vertical centering + the
   slide-in/out translateX, inner element handles the independent bounce
   so the two animations never fight over the transform property. */
.contact-character-widget {
  position: fixed;
  top: 58%;
  right: 0;
  width: 170px;
  z-index: 1000;
  transform: translateY(-50%) translateX(68%);
  transition: transform .6s cubic-bezier(.34, 1.56, .64, 1);
}
.contact-character-widget.is-visible { transform: translateY(-50%) translateX(0); }

.contact-character-link { display: block; cursor: pointer; }

.contact-character-bounce {
  animation: contactCharacterBounce 2.4s ease-in-out infinite;
  animation-play-state: paused;
  filter: drop-shadow(0 20px 16px rgba(0,0,0,.35));
  transition: transform .25s ease, filter .25s ease;
}
.contact-character-widget.is-visible .contact-character-bounce { animation-play-state: running; }
.contact-character-widget.is-hover .contact-character-bounce {
  animation-play-state: paused;
  transform: scale(1.06);
  filter: drop-shadow(0 16px 22px rgba(0,0,0,.45));
}
.contact-character-bounce img {
  width: 100%;
  height: auto;
  display: block;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
}
@keyframes contactCharacterBounce {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-10px); }
}
@media (prefers-reduced-motion: reduce) {
  .contact-character-widget { transition: none; }
  .contact-character-bounce { animation: none !important; }
}
@media (max-width: 991.98px) {
  .contact-character-widget { width: 130px; top: 60%; }
}
@media (max-width: 575.98px) {
  .contact-character-widget { width: 96px; top: 64%; transform: translateY(-50%) translateX(64%); }
  .contact-character-widget.is-visible { transform: translateY(-50%) translateX(0); }
}

/* Responsive tweaks */

/* Container width scales down progressively so content never feels
   cramped on tablets/phones — the 85% desktop value is too narrow below xl. */
@media (max-width: 1199.98px) {
  .container { max-width: 88% !important; }
}
@media (max-width: 991.98px) {
  .container { max-width: 92% !important; }
}
@media (max-width: 575.98px) {
  .container { max-width: 94% !important; }
}
@media (max-width: 991.98px) {
  .section-pad { padding-top: 3.5rem; padding-bottom: 3.5rem; }
  .navbar-webex .nav-link { margin: .35rem 0; }

  /* Tablet-specific component scaling */
  .wp-marquee-wrap { height: 440px; }
  .wp-marquee-track img { height: 210px; }
  .tech-strip img { height: 80px; width: 80px; }
  .tech-marquee-track { gap: 1.75rem; }
  .wpdev-card { height: 400px; }
  .service-card { min-height: 300px; padding: 2.25rem 1.25rem; }
  .about-photo-wrap { max-width: 380px; margin: 0 auto; }
  .hero h1 { font-size: clamp(2rem, 5.5vw, 3.2rem); }
}

@media (max-width: 767.98px) {
  .stat-row .stat-card { padding: 1.5rem .75rem; }
  .stat-row .stat-num { font-size: 1.15rem; }
  .portfolio-track { gap: .9rem; }
  .service-card { min-height: 260px; }
  .wpdev-card { height: 360px; }
}

@media (max-width: 575.98px) {
  .hero h1 { font-size: 2rem; }
  .stat-card { padding: 1.1rem .6rem; }
  .tech-strip img { height: 64px; width: 64px; }
  .tech-marquee-track { gap: 1.1rem; }
  .featured-badge { height: 50px; width: 44px; }
  .wp-marquee-wrap { height: 320px; }
  .wp-marquee-track img { height: 150px; }
  .trusted-badge {
    left: -4%;
    bottom: 4%;
    width: 30%;
    padding: .3rem;
    font-size: .58rem;
    line-height: 1.25;
    box-shadow: 0 6px 14px rgba(0,0,0,.25);
  }
  .trusted-badge .trusted-num { font-size: .78rem; }
  .service-popup p { font-size: .84rem; }
  .btn-brand, .btn-outline-brand { padding: .65rem 1.4rem; font-size: .92rem; }
}

#projects h2{
  font-size: clamp(2.1rem, 3.2vw, 3rem);
  font-weight: bold;
}

/*.services-section h2{
  font-size: clamp(2.1rem, 3.2vw, 3rem);
  font-weight: bold;
}*/

@media (max-width: 575.98px) {
  #projects .d-flex.align-items-center.gap-4 { flex-wrap: wrap; row-gap: 1rem; }
  #projects .fs-2 { display: none; }
}



.content h6{
  color: #ffffff;
}

/*price-table===========*/



.pricing-section{
    background:linear-gradient(120deg,#fff5f7,#ffffff);
}


.pricing-card{

    background:#fff;
    padding:35px 30px;
    border-radius:22px;
    box-shadow:0 15px 35px rgba(0,0,0,.08);
    height:100%;
    width:100%;
    transition:.3s;
}

/* Keep every pricing card the same height in a row and pin the CTA to the bottom,
   regardless of how many features a package lists. */
.pricing-feature-list{ margin-bottom: 1.25rem; }
.pricing-toggle-btn{
    display:inline-flex;
    align-items:center;
    gap:.4rem;
    background:none;
    border:none;
    padding:0 0 1.25rem;
    margin-top:-.5rem;
    font-weight:700;
    font-size:.85rem;
    color:var(--clr-orange);
    cursor:pointer;
    text-align:left;
}
.pricing-toggle-btn:hover{ text-decoration:underline; }
.pricing-toggle-btn::after{
    content:"\f282"; /* bootstrap-icons chevron-down */
    font-family:"bootstrap-icons";
    font-size:.7rem;
    transition:transform .25s ease;
}
.pricing-toggle-btn.is-expanded::after{ transform:rotate(180deg); }
.pricing-toggle-btn--on-active{ color:#fff; }


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



.pricing-card .icon-box{

    width:45px;
    height:45px;
    border-radius:12px;
    /* background: linear-gradient(160deg, var(--clr-orange), #000);*/
    background: var(--clr-orange);
    color:#ffffff;
    display:flex;
    align-items:center;
    justify-content:center;
    margin-bottom:20px;
    margin-left: 0;
    margin-right: 0;
}



.pricing-card h5{
    font-weight:700;
}



.pricing-card h2{

    font-size:38px;
    font-weight:800;

}


.pricing-card h2 small{
    font-size:14px;
    color:#000;
}


.pricing-card ul{

    list-style:none;
    padding:0;
    margin:25px 0;

}


.pricing-card ul li{

    margin-bottom:12px;
    color:#555;

}


/*.price-btn{

    width:100%;
    border-radius:30px;

    background: linear-gradient(160deg, var(--clr-orange), #000);
    color:#fff;

}*/
.price-btn {
    width: 100%;
    border-radius: 30px;
    color: #ffffff;
    background: var(--clr-orange);
    /*background: linear-gradient(#fff, #fff) padding-box,
                linear-gradient(90deg, var(--clr-orange), #000) border-box;*/
               /* background: linear-gradient(160deg, var(--clr-orange), #000);*/
    border: 2px solid transparent;
    transition: transform .3s ease, box-shadow .3s ease, background .3s ease;
}

.price-btn:hover {
  color:#ffffff;
  background: var(--clr-orange-dark);
  /*background: linear-gradient(160deg, #ff6a2b, var(--clr-orange));*/
  transform: translateY(-4px);
  box-shadow: 0 15px 30px rgba(252,90,20,.35);
}



.active-card{

    /*background:linear-gradient(160deg,#ff6b81,#c83cff);*/
    /*background: linear-gradient(160deg, var(--clr-orange), #000);*/
    background: var(--clr-orange);
    color:#fff;
}


.active-card p,
.active-card ul li,
.active-card h5,
.active-card h2{

    /*color:#fff;*/
    color: #000000;

}

.active-card h2 small{

    /*color:rgba(255,255,255,.8);*/

}


.active-card .icon-box{

    background:rgba(255,255,255,.2);
    color:#fff;

}



.premium-btn{

    width:100%;
    background:#fff;
    color:#000000;
    border-radius:30px;
    border: #ffffff 2px solid !important;

}



/*about section*/

.company-section{
    overflow:hidden;
}


.section-title{
    font-size:42px;
    font-weight:700;
    color:#111;
    margin-bottom:20px;
}


.company-section p{
    font-size:14px;
    line-height:1.7;
    color:#000000;
}


.demo-btn{
    margin-top:15px;
    background: linear-gradient(160deg, var(--clr-orange), #000);
    color:#fff;
    padding:12px 25px;
    border-radius:5px;
    font-size:14px;
    font-weight:600;
}


.demo-btn:hover{
    background:#c91c70;
    color:#fff;
}



/* image */

.value-image img{
    width:100%;
}



/* Team */

.team-title{
    font-size:26px;
    font-weight:600;
    margin-bottom:30px;
}


.team-area{
    position:relative;
}


.team-area:before{
    content:"";
    position:absolute;
    bottom:-20px;
    left:-100px;
    width:120%;
    height:150px;

    background:linear-gradient(
        90deg,
        #fff0d7,
        #f8bfdc
    );

    z-index:-1;
}



/* Card */


.team-card{
    position:relative;
    height:270px;
    border-radius:80px 80px 70px 70px;
    overflow:hidden;
    background:linear-gradient(
        180deg,
        var(--clr-orange),
        #000000
    );
}


.team-card img{
    position:absolute;
    bottom:0;
    width:100%;
    height:100%;
    object-fit:contain;
}



.team-info{

    position:absolute;
    bottom:25px;
    left:45px;
    color:white;
}


.team-info h5{
    font-size:16px;
    margin:0;
}


.team-info p{
    margin:0;
    font-size:12px;
}



.linkedin{
    position:absolute;
    right:40px;
    bottom:30px;

    background:#fff;
    color:#222;

    width:25px;
    height:25px;

    display:flex;
    align-items:center;
    justify-content:center;

    font-weight:bold;
    border-radius:3px;
}



.team-card {
    position: relative;
    overflow: hidden;
}

.team-card::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 60px;
    background: linear-gradient(
        180deg,
        transparent,
        rgba(0,0,0,0.9)
    );
}


@media(max-width:991px){

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

    .team-card{
        height:300px;
    }

}


.faq-question {
    min-height: 90px;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 22px;
    line-height: 1.5;
}

.faq-item {
    margin-bottom: 15px;
}

/* Our Story (About page) */
.webex-story-section {
    padding: 100px 0;
    background: #f8f7fa;
    overflow: hidden;
}
.story-intro {
    max-width: 650px;
    margin: 20px auto 0;
    color: #000000;
    font-size: 15px;
    line-height: 1.8;
}
.story-card {
    overflow: hidden;
    background: #fff;
    border-radius: 28px;
    box-shadow: 0 18px 60px rgba(55, 20, 70, 0.08);
}
.story-image {
    position: relative;
    height: 100%;
    min-height: 500px;
    overflow: hidden;
}
.story-image img {
    width: 100%;
    height: 100%;
    min-height: 500px;
    object-fit: cover;
    display: block;
    transition: transform .6s ease;
}
.story-card:hover .story-image img {
    transform: scale(1.04);
}
.story-number {
    position: absolute;
    top: 25px;
    left: 25px;
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255,255,255,.92);
    color: #000000;
    border-radius: 50%;
    font-size: 13px;
    font-weight: 800;
}
.story-floating-card {
    position: absolute;
    right: 25px;
    bottom: 25px;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 15px 20px;
    background: rgba(255,255,255,.95);
    border-radius: 15px;
    box-shadow: 0 12px 30px rgba(0,0,0,.15);
}
.story-floating-card strong {
    font-size: 32px;
    line-height: 1;
    color: var(--clr-orange);
}
.story-floating-card span {
    color: #49434c;
    font-size: 11px;
    line-height: 1.4;
    font-weight: 600;
}
.story-content {
    height: 100%;
    padding: 55px 55px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.story-content h3 {
    margin-bottom: 22px;
    color: #28222d;
    font-size: 25px;
    line-height: 1.25;
    font-weight: 700;
}
.story-content p {
    margin-bottom: 15px;
    color: #4a4a4a;
    font-size: 14.5px;
    line-height: 1.85;
}
.story-features {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
    margin-top: 18px;
}
.story-feature {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px;
    background: #f8f5fa;
    border-radius: 12px;
}
.feature-icon {
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--clr-orange);
    color: #fff;
    border-radius: 10px;
}
.story-feature strong {
    display: block;
    color: #332d38;
    font-size: 12px;
}
.story-feature small {
    display: block;
    margin-top: 3px;
    color: #8a838d;
    font-size: 10px;
}
.story-bottom {
    display: flex;
    gap: 0;
    margin-top: 22px;
    padding-top: 22px;
    border-top: 1px solid #eee9f0;
}
.story-bottom div {
    flex: 1;
    padding-right: 20px;
    margin-right: 20px;
    border-right: 1px solid #e9e4eb;
}
.story-bottom div:last-child {
    border-right: 0;
}
.story-bottom strong {
    display: block;
    color: #000000;
    font-size: 25px;
    line-height: 1;
}
.story-bottom span {
    display: block;
    margin-top: 6px;
    color: #77717b;
    font-size: 11px;
}
.story-image-caption {
    position: absolute;
    left: 25px;
    bottom: 25px;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 13px 17px;
    background: var(--clr-orange);
    color: #ffffff;
    border-radius: 12px;
    font-size: 11px;
    line-height: 1.4;
}
.story-image-caption i {
    font-size: 22px;
    color: #ffffff;
}
@media (max-width: 991px) {
    .webex-story-section { padding: 70px 0; }
    .story-image, .story-image img { min-height: 380px; }
    .story-content { padding: 40px; }
    .story-content h3 { font-size: 29px; }
}
@media (max-width: 575px) {
    .webex-story-section { padding: 55px 0; }
    .story-intro { font-size: 14px; }
    .story-card { border-radius: 20px; }
    .story-image, .story-image img { min-height: 300px; }
    .story-content { padding: 30px 22px; }
    .story-content h3 { font-size: 25px; }
    .story-content p { font-size: 13.5px; }
    .story-features { grid-template-columns: 1fr; }
    .story-bottom { gap: 10px; }
    .story-bottom div { padding-right: 8px; margin-right: 8px; }
    .story-bottom strong { font-size: 21px; }
    .story-bottom span { font-size: 10px; }
    .story-floating-card { right: 15px; bottom: 15px; padding: 11px 14px; }
    .story-floating-card strong { font-size: 26px; }
}



/* ==========================================================================
   Added: hover / mouseover effects for cards that had none
   (blog cards, portfolio cards, project cards, feature cards, service
   cards, team cards, info cards). Safe, additive lift + shadow + image
   zoom treatment that layers on top of each card's existing styling.
   ========================================================================== */
.blog-card,
.portfolio-card,
.project-card,
.feature-card,
.custom-service-card,
.info-card,
.about-grid-card,
.stat-card,
.meet-team-card,
.wpdev-card-wrap .card {
  transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.blog-card:hover,
.portfolio-card:hover,
.project-card:hover,
.feature-card:hover,
.custom-service-card:hover,
.info-card:hover,
.about-grid-card:hover,
.stat-card:hover,
.wpdev-card-wrap .card:hover {
  transform: translateY(-8px);
  box-shadow: 0 22px 42px rgba(0,0,0,.12);
}
.meet-team-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 22px 42px rgba(0,0,0,.16);
}

/* Zoom the thumbnail/photo inside any hovered card, when one is present */
.blog-card,
.portfolio-card,
.project-card,
.meet-team-card,
.card-img-container {
  overflow: hidden;
}
.blog-card img,
.portfolio-card img,
.project-card img,
.card-img-container img {
  transition: transform .45s ease;
}
.blog-card:hover img,
.portfolio-card:hover img,
.project-card:hover img,
.card-img-container:hover img {
  transform: scale(1.08);
}
.meet-team-card:hover img { transform: scale(1.06); }

/* Links / icons that should react to mouseover but currently don't */
.footer-webex .quick-link a,
.mega-menu-list a,
.breadcrumb-nav a {
  transition: color .2s ease, padding-left .2s ease;
}
.blog-card a.read-more,
.project-card a.read-more,
.portfolio-card a.read-more {
  transition: color .2s ease, gap .2s ease;
}
.blog-card a.read-more:hover,
.project-card a.read-more:hover,
.portfolio-card a.read-more:hover {
  color: var(--clr-orange);
}

/* Buttons: consistent tactile hover across every button variant on the site */
.btn:not(.faq-question):hover { filter: brightness(1.02); }
.btn-brand, .btn-outline-brand, .price-btn, .demo-btn {
  will-change: transform;
}

/* Custom red round cursor with a lagging outer ring for hover feedback.
   Only enabled on real mouse pointers (see initCustomCursor in script.js),
   so touch devices keep the native tap behaviour untouched. */
.custom-cursor,
.custom-cursor-ring {
  position: fixed;
  top: 0;
  left: 0;
  border-radius: 50%;
  pointer-events: none;
  z-index: 9999;
  opacity: 0;
  transition: opacity .2s ease, width .25s ease, height .25s ease, background-color .25s ease, border-color .25s ease;
}
.custom-cursor {
  width: 10px;
  height: 10px;
  margin: -5px 0 0 -5px;
  background: #e02424;
}
.custom-cursor-ring {
  width: 38px;
  height: 38px;
  margin: -19px 0 0 -19px;
  border: 2px solid #e02424;
  transition: opacity .2s ease, width .25s ease, height .25s ease, margin .25s ease, border-color .25s ease, background-color .25s ease;
}
body.custom-cursor-active,
body.custom-cursor-active a,
body.custom-cursor-active button,
body.custom-cursor-active .btn,
body.custom-cursor-active input,
body.custom-cursor-active textarea,
body.custom-cursor-active select {
  cursor: none;
}
body.custom-cursor-active .custom-cursor,
body.custom-cursor-active .custom-cursor-ring {
  opacity: 1;
}
body.custom-cursor-hover .custom-cursor-ring {
  width: 60px;
  height: 60px;
  margin: -30px 0 0 -30px;
  background: rgba(224, 36, 36, .12);
}
body.custom-cursor-down .custom-cursor-ring {
  width: 30px;
  height: 30px;
  margin: -15px 0 0 -15px;
}
@media (max-width: 991px) {
  .custom-cursor,
  .custom-cursor-ring {
    display: none;
  }
}


.work-preview-section{
    background:#F7F7F8!important;
   
}




/*#contact {
    position: relative;
    overflow: hidden;
}

#contact::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;

    background-image:
        radial-gradient(circle, rgba(150,150,150,.35) 2px, transparent 2px),
        radial-gradient(circle, rgba(150,150,150,.2) 1px, transparent 1px);

    background-size: 70px 70px, 110px 110px;
    background-position: 0 0, 35px 35px;

    animation: particleMove 20s linear infinite;
}

#contact > * {
    position: relative;
    z-index: 1;
}

@keyframes particleMove {
    from {
        background-position: 0 0, 35px 35px;
    }
    to {
        background-position: 100px 100px, 135px 135px;
    }
}*/



.blog-teaser-section {
    background: #F7F7F8 !important;
    position: relative;
    overflow: hidden;
}

.blog-teaser-section::before {
    content: "WEBEX STUDIO";
    position: absolute;

    right: 30px;
    bottom: 20px;

    font-size: 55px;
    font-weight: 800;
    letter-spacing: 5px;

    color: #000;
    opacity: 0.035;

    white-space: nowrap;
    pointer-events: none;
    z-index: 0;
}

.blog-teaser-section > * {
    position: relative;
    z-index: 1;
}


.contact-form-card button{
    background: #F46002!important;
}

.about-hero-static{
    min-height: 80vh!important;
}






.navbar-contact-info {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    margin-right: 18px;
}

.navbar-contact-info a {
    display: flex;
    align-items: center;
    gap: 7px;
    color: #ffffff;
    text-decoration: none;
    font-size: 14px;
    white-space: nowrap;
}

.navbar-contact-info i {
    font-size: 13px;
}



@media (max-width: 991px) {

    .navbar-contact-info {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
        margin: 15px 0 0;
    }

    .navbar-contact-info a,
    .navbar-contact-info a:visited {
        color: #000000 !important;
    }

    .navbar-contact-info i {
        color: #000000 !important;
    }
}





.speak-team-section {
    padding: 60px 0;
    background: #f7f7f7;
}

.speak-team-card {
    height: 100%;
    padding: 35px 30px;
    background: #fff;
    border: 1px solid #e8e8e8;
    border-radius: 12px;
    transition: all 0.3s ease;
}

.speak-team-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 12px 35px rgba(0, 0, 0, 0.08);
}

.speak-team-card h3 {
    margin: 0 0 6px;
    font-size: 24px;
    font-weight: 700;
    color: #222;
}

.team-role {
    margin-bottom: 22px;
    color: #777;
    font-size: 15px;
}

.team-contact {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.team-contact a {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #333;
    text-decoration: none;
    font-size: 15px;
    transition: 0.3s ease;
}

.team-contact a:hover {
    color: #ff6b00;
}

.team-contact i {
    width: 20px;
    font-size: 14px;
    color: #ff6b00;
}


/* Mobile */
@media (max-width: 767px) {

    .speak-team-section {
        padding: 40px 0;
    }

    .speak-team-card {
        padding: 28px 22px;
    }

    .speak-team-card h3 {
        font-size: 21px;
    }
}

.icon-box i {
    color: #ffffff!important;
}