@import url('https://fonts.googleapis.com/css2?family=Source+Sans+3:wght@300;400;500;600;700&display=swap');

  

@import url('https://fonts.googleapis.com/css2?family=Anton&display=swap');



  

  *{

    margin: 0px;

    font-family: 'Source Sans 3', sans-serif;

  }



 



/* BASIC RESET */

*,

*::before,

*::after {

  box-sizing: border-box;

  margin: 0;

  padding: 0;

}



body {

  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  line-height: 1.4;

}

/* HEADER WRAPPER */

.pedisonusa-header {

  width: 100%;

}



/* TOPBAR LAYOUT */

.pedisonusa-topbar {

  display: flex;

  align-items: stretch;

  width: 100%;

}



/* LEFT 35% AREA */

.pedisonusa-topbar-left {

  flex: 0 0 35%;

  background: #ffffff;

  padding: 10px 50px;

  display: flex;

  align-items: center;

}



/* RIGHT AREA WITH DIAGONAL */

.pedisonusa-topbar-right {

  position: relative;

  flex: 1 0 45%;

  border-bottom: 2px solid rgb(180, 180, 180);

  background: #00aae8;

  padding: 10px 20px 10px 50px;

  display: flex;

  align-items: center;

  justify-content: space-evenly;

  gap: 20px;

}



.pedisonusa-topbar-right::before {

  content: "";

  position: absolute;

  left: -39px;

  top: 0;

  width: 40px;

  height: 100%;

  background: #00aae8;

  clip-path: polygon(0 0, 100% 0, 100% 100%);

}



/* LOGO */

.pedisonusa-logo {

  color: #ffffff;

  text-decoration: none;

  font-size: 1.4rem;

  font-weight: 700;

}

.pedisonusa-logo img {

  max-width: 300px;

}



/* CONTACT INFO */

.pedisonusa-contact-item {

  display: flex;

  align-items: center;

  gap: 6px;

  font-size: 20px;

  color: #ffffff;

  white-space: nowrap;

}



.pedisonusa-contact-icon {

  color: #ffffff;

}



/* SOCIAL ICONS */

.pedisonusa-social-icons {

  display: flex;

  align-items: center;

  gap: 10px;

}



.pedisonusa-social-link {

  width: 28px;

  height: 28px;

  border-radius: 50%;

  background: #ffffff;

  color: #3d82a1;

  display: inline-flex;

  align-items: center;

  justify-content: center;

  font-size: 0.8rem;

  text-decoration: none;

  transition: background 0.2s ease, transform 0.2s ease;

}



.pedisonusa-social-link:hover {

  background: #00aae8e8;

  transform: translateY(-1px);

}

/* NAVBAR */

.pedisonusa-navbar {

  background: #ffffff;

  border-top: 1px solid #e0e0e0;

  border-bottom: 1px solid #e0e0e0;

}



.pedisonusa-navbar-inner {

  max-width: 1400px;

  margin: 0 auto;

  padding: 0 20px;

  display: flex;

  align-items: center;

  justify-content: center;

  position: relative;

  min-height: 48px;

}



/* HAMBURGER (MOBILE) */

.pedisonusa-nav-toggle-checkbox {

  display: none;

}



.pedisonusa-nav-toggle {

  border: none;

  background: none;

  font-size: 1.4rem;

  cursor: pointer;

  display: none;              /* shown only on mobile */

  position: absolute;

  right: 20px;                /* move to right side */

  top: 50%;

  transform: translateY(-50%);

  color: #333333;

  z-index: 110;

}



/* NAV MENU */

.pedisonusa-nav-menu {

  list-style: none;

  display: flex;

  align-items: center;

  gap: 60px;

  padding: 10px 0;

}



.pedisonusa-nav-item {

  position: relative;

}



.pedisonusa-nav-link {

  text-decoration: none;

  color: #333333;

  font-size: 14px;

  font-weight: 500;

  padding: 8px 4px;

  display: inline-flex;

  align-items: center;

  gap: 6px;

  transition: color 0.2s ease, border-color 0.2s ease;

  border-bottom: 2px solid transparent;

}



.pedisonusa-nav-link:hover,

.pedisonusa-active {

  color: #0056b3;

  border-bottom-color: #0056b3;

}



/* SUBMENU TOGGLE CHEVRON LABEL */

.pedisonusa-sub-toggle {

  display: none;

}



.pedisonusa-sub-toggle-btn {

  display: inline-flex;

  align-items: center;

  cursor: pointer;

}



/* DROPDOWN (DESKTOP) */

.pedisonusa-has-dropdown .pedisonusa-dropdown-icon {

  font-size: 0.7rem;

}



.pedisonusa-dropdown-menu {

  position: absolute;

  top: 100%;

  left: 50%;

  transform: translateX(-50%);

  min-width: 180px;

  background: #ffffff;

  border-radius: 4px;

  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08);

  padding: 8px 0;

  list-style: none;

  opacity: 0;

  visibility: hidden;

  transform-origin: top;

  transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s ease;

  z-index: 10;

}



.pedisonusa-has-dropdown:hover > .pedisonusa-dropdown-menu {

  opacity: 1;

  visibility: visible;

  transform: translate(-50%, 4px);

}



.pedisonusa-dropdown-link {

  display: block;

  padding: 8px 16px;

  font-size: 0.9rem;

  color: #333333;

  text-decoration: none;

  white-space: nowrap;

  transition: background 0.2s ease, color 0.2s ease;

}



.pedisonusa-dropdown-link:hover {

  background: #f5f5f5;

  color: #0056b3;

}



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



@media (max-width: 992px) {

  .pedisonusa-topbar {

    flex-direction: column;

  }



  .pedisonusa-topbar-left,

  .pedisonusa-topbar-right {

    flex: 1 0 auto;

    width: 100%;

  }



  .pedisonusa-topbar-right {

    padding-left: 20px;

    justify-content: flex-start;

    flex-wrap: wrap;

    gap: 12px;

  }



  .pedisonusa-topbar-right::before {

    display: none;

  }

}



@media (max-width: 768px) {

  /* Hide social icons on small screens */

  .pedisonusa-social-icons {

    display: none;

  }



  .pedisonusa-navbar-inner {

    justify-content: flex-start;

  }



  .pedisonusa-nav-toggle {

    display: block;

  }



  .pedisonusa-nav-menu {

    position: absolute;

    top: 100%;

    left: 0;

    right: 0;

    flex-direction: column;

    background: #ffffff;

    border-bottom: 1px solid #e0e0e0;

    padding: 10px 20px 15px;

    gap: 10px;

    display: none;

    z-index: 100;

  }



  /* MAIN NAV OPEN VIA CHECKBOX (id from input) */

  #pedisonusa-nav-toggle:checked ~ .pedisonusa-nav-menu {

    display: flex;

  }



  .pedisonusa-nav-item {

    width: 100%;

  }



  .pedisonusa-nav-link {

    width: 100%;

    justify-content: space-between;

    border-bottom: none;

  }



  /* MOBILE DROPDOWN BEHAVIOUR: USE CHECKBOX */

  .pedisonusa-dropdown-menu {

    position: static;

    transform: none;

    box-shadow: none;

    border-radius: 0;

    padding-left: 14px;

    opacity: 1;

    visibility: visible;

    display: none;

  }



  .pedisonusa-sub-toggle:checked ~ .pedisonusa-dropdown-menu {

    display: block;

  }



  .pedisonusa-dropdown-link {

    padding: 6px 0;

  }



  /* Avoid hover triggers on touch devices */

  .pedisonusa-has-dropdown:hover > .pedisonusa-dropdown-menu {

    transform: none;

  }

}







/* Video  */

.pedison-usa-video-bg {

  position: relative;

  width: 100vw;

  height: 850px;

  overflow: hidden;

  display: flex;

  align-items: center;

  justify-content: center;

}



.pedison-usa-video {

  position: absolute;

  top: 0;

  left: 0;

  width: 100vw;

  height: 850px;

  object-fit: cover;

  z-index: 1;

}



/* Responsive video height */

@media (max-width: 768px) {

  .pedison-usa-video-bg,

  .pedison-usa-video {

    height: 500px;

  }

}



@media (max-width: 480px) {

  .pedison-usa-video-bg,

  .pedison-usa-video {

    height: 400px;

  }

}



/* Overlay content container (centered) */

.pedison-usa-video-overlay {

  position: relative;

  z-index: 2;

  width: 100%;

  height: 100%;

  display: flex;

  flex-direction: column;

  justify-content: center;

  color: #fff;

  text-align: center;

  /* Optional: dim overlay for contrast */

  background: rgba(0,0,0,0.22);

  padding: 40px 20px;

  box-sizing: border-box;

}



.pedison-usa-video-overlay h1 {



  font-size: 64px;

  font-weight: 700;

  margin-bottom: 35px;

  line-height: 1;

  margin-left: 400px;

  max-width: 800px;

  text-align: left;

}



.pedison-usa-video-overlay p {

  font-size: 25px;

  max-width: 650px;

  text-align: left;

  margin-left: 400px;

}



/* Responsive for video overlay */

@media (max-width: 1200px) {

  .pedison-usa-video-overlay h1 {

    font-size: 48px;

    margin-left: 200px;

    max-width: 600px;

  }

  .pedison-usa-video-overlay p {

    font-size: 20px;

    margin-left: 200px;

    max-width: 500px;

  }

}



@media (max-width: 768px) {

  .pedison-usa-video-overlay h1 {

    font-size: 32px;

    margin-left: 20px;

    margin-right: 20px;

    text-align: center;

    max-width: none;

  }

  .pedison-usa-video-overlay p {

    font-size: 18px;

    margin-left: 20px;

    margin-right: 20px;

    text-align: center;

    max-width: none;

  }

}



@media (max-width: 480px) {

  .pedison-usa-video-overlay h1 {

    font-size: 28px;

  }

  .pedison-usa-video-overlay p {

    font-size: 16px;

  }

}



/* Container fixed to right side (intent preserved) */

.floating-menu {

  position: fixed;

  top: 40%;

  right: 0;

  display: flex;

  flex-direction: column;

  align-items: flex-end; /* Keep items aligned to right edge */

  z-index: 999;

}



/* Items */

.menu-item {

  width: 50px;

  height: 50px;

  background: #ddd;

  color: #fff;

  display: flex;

  align-items: center;

  gap: 10px;

  padding: 10px 10px;

  text-decoration: none;

  font-family: Arial;

  font-size: 16px;

  overflow: hidden;

  white-space: nowrap;

  transition: width 0.4s ease, border-radius 0.3s;

  /* Add box-sizing for smoother padding */

  box-sizing: border-box;

}



/* Icon */

.menu-item .icon {

  font-size: 22px;

}



/* Hidden text initially */

.menu-item span {

  opacity: 0;

  transition: opacity 0.3s;

}



/* Only hovered item expands */

.menu-item:hover {

  width: 180px;

}



.menu-item:hover span {

  opacity: 1;

}



/* Colors */

.login-item {

  background-color: #00aae8;

  display: flex;

  align-items: center;

  gap: 10px; /* space between image and text */

}



.login-item span {

  flex-grow: 1;           /* span takes all remaining space */

  text-align: center;     /* center the text inside the span */

}



.register-item {

  background: #72b853;

} 







/* Left image right content section */

  .pedison-usa-features {

  display: flex;

  justify-content: center;

  align-items: stretch;

  gap: 60px;

  margin: 60px 0;

  width: 100%;

}



.pedison-usa-feature-img {

  /* width: 532px; */

  width: 500px;

  height: 938px;

  /* height: 738px; */

  overflow: hidden;

  flex-shrink: 0;

  box-shadow: 0 4px 16px rgba(0,0,0,0.07);

  background: #f3f3f3;

  display: flex;

  align-items: center;

  justify-content: center;

}



.pedison-usa-feature-img img {

  width: 100%;

  height: 100%;

  object-fit: cover;

  display: block;

}



.pedison-usa-feature-content {

  flex: 1;

  display: flex;

  flex-direction: column;

  justify-content: center;

  max-width: 600px;

}



.pedison-usa-feature-content h2 {

  font-size: 60px;

  margin-bottom: 24px;

  color: #212121;

  line-height: 0.9;

}



.pedison-usa-feature-content p {

  margin-bottom: 26px;

  color: #363636;

  font-size: 1.08rem;

  line-height: 1.7;

}



.pedison-usa-feature-content ul {

  list-style: none;

  margin: 0 0 0 5px;

  padding: 0;

}



.pedison-usa-feature-content ul li {

  font-size: 1.05rem;

  margin-bottom: 14px;

  padding-left: 0;

  color: #226d3d;

  display: flex;

  align-items: center;

  gap: 10px;

}



/* Responsive */

@media (max-width: 1200px) {

  .pedison-usa-features {

    flex-direction: column;

    align-items: center;

    gap: 32px;

  }

  .pedison-usa-feature-img,

  .pedison-usa-feature-content {

    width: 95vw;

    max-width: 532px;

    height: auto;

  }

  .pedison-usa-feature-content {

    max-width: 95vw;

  }

}



@media (max-width: 768px) {

  .pedison-usa-features {

    gap: 20px;

    margin: 40px 0;

  }

  .pedison-usa-feature-content h2 {

    font-size: 1.8rem;

  }

  .pedison-usa-feature-content p {

    font-size: 1rem;

  }

  .pedison-usa-feature-content ul li {

    font-size: 0.95rem;

    margin-bottom: 12px;

  }

}





/* SECTION WRAPPER */

.pedison-pathways {

  padding: 60px 0;

  background-color: #ffffff; /* or whatever your page bg is */

}



/* CENTERED CONTAINER */

.pedison-pathways-container {

  max-width: 1200px;

  margin: 0 auto;

  padding: 0 20px;

}



/* HEADING + SUBTEXT (LEFT ALIGNED INSIDE CENTERED CONTAINER) */

.pedison-pathways-title {

  font-size: 38px;

  font-weight: 500;

  color: #000000;

  line-height: 1;

}



.pedison-pathways-subtitle {

  font-size: 18px;

  margin: 10px 0 20px;

  color: #414141;

}



/* GRID OF 4 IMAGES */

.pedison-pathways-grid {

  display: grid;

  grid-template-columns: repeat(4, 1fr);

  gap: 40px;

  justify-items: center;

}



/* SINGLE ITEM */

.pedison-pathways-item {

  display: flex;

  align-items: center;

  justify-content: center;

}



/* IMAGE SIZE 200x200 */

.pedison-pathways-image {

  width: 250px;

  object-fit: contain; /* keeps diamond shape undistorted */

  display: block;

}



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



/* tablets: 2 per row */

@media (max-width: 992px) {

  .pedison-pathways-grid {

    grid-template-columns: repeat(2, 1fr);

  }

}



/* mobiles: 1 per row (one by one) */

@media (max-width: 576px) {

  .pedison-pathways-grid {

    grid-template-columns: 1fr;

  }



  .pedison-pathways-container {

    padding: 0 16px;

  }

}





/*Image Slider*/

.pedison-usa-fullwidth-slider {

  width: 100vw;

  padding: 60px 0 40px 0;

  background: #000000;

  overflow: hidden;

  box-sizing: border-box;

}

.slider-title-group {

  text-align: left;

  margin-bottom: 20px;

  max-width: 1200px;

  margin: 0 auto 20px auto;

}

.slider-title-group h2 {

  font-size: 42px;

  font-weight: 700;

  color: #ffffff;

  margin-bottom: 10px;

  line-height: 1.1;

}

.slider-title-group p {

  color: #afafaf;

  font-size: 18px;

  padding-bottom: 10px;

}



.slider-container {

  width: 100vw;

  max-width: 100vw;

  position: relative;

  height: 750px;

  display: flex;

  align-items: center;

  justify-content: center;

  overflow: hidden;

}



.slider-track {

  display: flex;

  transition: transform 0.68s cubic-bezier(.7,.2,.32,1);

  width: 100vw;

  height: 750px;

}



.slide {

  flex: 0 0 100vw;

  max-width: 100vw;

  height: 750px;

  position: relative;

  overflow: hidden;

}



.slide img {

  width:100vw;

  height: 750px;

  object-fit: cover;

  display: flex;

  margin: 0 auto;

  border-radius: 0;

}



.slide-info {

  position: absolute;

  left: 50%;

  bottom: 0;

  background: linear-gradient(0deg, rgba(0,0,0,0.82) 30%,rgba(34, 44, 38, 0.22) 85%, rgba(255,255,255,0.01) 0%);

  color: #fff;

  padding: 80px 5vw 26px 4vw;

  box-sizing: border-box;

}



.slide-sub {

  font-size: 1.01rem;

  font-weight: 500;

  opacity: 0.85;

  margin-bottom: 2px;

}

.slide-main {

  font-size: 40px;

  font-weight: 700;

  margin-bottom: 8px;

  letter-spacing: 1px;

}

.slide-desc {

  font-size: 1.15rem;

  opacity: 0.95;

}



/* Slider buttons */

.slider-btn {

  position: absolute;

  top: 50%;

  transform: translateY(-50%);

  background: rgba(199, 199, 199, 0.92);

  color: #000000;

  border: none;

  border-radius: 100px;

  width: 52px; height: 52px;

  font-size: 2.15rem;

  z-index: 10;

  cursor: pointer;

  box-shadow: 0 2px 20px rgba(34,109,61,0.1);

  transition: background 0.18s, box-shadow 0.18s, transform 0.13s;

}

.slider-btn:hover {

  background: #22b67b;

  box-shadow: 0 8px 22px rgba(34,139,34,0.13);

  transform: scale(1.09) translateY(-50%);

}

.prev-btn { left: 18px; }

.next-btn { right: 18px; }



/* Responsive */

@media (max-width: 900px) {

  .slider-container, .slider-track, .slide, .slide img {

    height: 280px;

  }

  .slide-info {

    padding: 14px 5vw 12px 4vw;

  }

  .slide-main { font-size: 1.18rem; }

}

@media (max-width: 520px) {

  .slider-title-group h2 { font-size: 1.32rem; }

  .slider-title-group p { font-size: 0.99rem; }

  .slide-desc { font-size: 0.93rem; }

}



.quick-easy {

  width: 100%;

  display: flex;

  justify-content: center;

  padding: 40px 0;

}



.quick-easy img {

  max-width: 100%;

  height: auto;

}



/* Responsive for quick-easy */

@media (max-width: 768px) {

  .quick-easy {

    padding: 15px 10px;

  }

}







    /* Customer Testimonials Section */

    .pedison-usa-client-testimonials {

  width: 100vw;

  padding: 48px 0 32px 0;

  position: relative;

  background-color: #f9f9f9;

}

.pedison-usa-testimonial-header {

  text-align: center;

  margin-bottom: 24px;

  color: #fff;

  text-shadow: 0 2px 14px rgba(40,70,40,0.22);

}

.pedison-usa-testimonial-header h4 {

  font-size: 1.08rem;

  font-weight: 600;

  opacity: 0.92;

  margin-bottom: 4px;

  color: #000000;

}

.pedison-usa-testimonial-header h2 {

  font-size: 2.08rem;

  font-weight: 700;

  letter-spacing: 1px;

  margin-bottom: 2px;

  color: black;

}

.testimonial-row {

  display: grid;

  grid-template-columns: repeat(3, 1fr);

  gap: 22px;

  justify-content: center;

  align-items: stretch;

  width: 97vw;

  max-width: 1200px;

  margin: 0 auto;

}

.testimonial-card {

  background: #fff;

  border-radius: 14px;

  box-shadow: 0 6px 22px rgba(34,109,61,0.08);

  min-width: 210px;

  max-width: 360px;

  width: 100%;

  display: flex;

  flex-direction: column;

  align-items: center;

  padding: 18px 18px 22px 18px;

  position: relative;

  margin-bottom: 0;

}

.testimonial-quote-mark {

  color: #2697b7;

  font-size: 2rem;

  font-weight: 900;

  text-align: center;

  margin-bottom: 2px;

}

.testimonial-text {

  text-align: center;

  font-size: 1.05rem;

  color: #242424;

  margin-bottom: 15px;

  line-height: 1.5;

  min-height: 78px;

  font-family: 'Georgia', serif;

}



.testimonial-person {

  display: flex;

  flex-direction: column;

  align-items: center;

  margin-top: 4px;

}

.testimonial-person img {

  width: 100px;

  height: 100px;

  border-radius: 50%;

  object-fit: cover;

  margin-bottom: 7px;

  border: 2px solid #cde7da;

}

.person-info { text-align: center; }

.testimonial-stars {

  color: #ffca3a;

  font-size: 1.05rem;

  margin-bottom: 2px;

}

.person-name {

  font-size: 1rem;

  color: #2697b7;

  font-weight: 700;

  margin-bottom: 1px;

}

.person-role {

  font-size: 0.88rem;

  color: #585858;

  opacity: 0.8;

}



/* Responsive for 2 columns at mid-size */

@media (max-width: 980px) {

  .testimonial-row { grid-template-columns: repeat(2, 1fr); }

}

/* 1 per line for mobile */

@media (max-width: 700px) {

  .testimonial-row { grid-template-columns: 1fr; }

  .testimonial-card { max-width: 94vw; }

  .testimonial-header h2 { font-size: 1.3rem; }

}





/* Final Index Section */

h4.pedison-finance {

  padding-left: 10px;

  color: #ffffff;

  font-size: 32px;

  background-color: #2697b7;

  width: 420px;

    font-weight: 500;

}



.view-all-btn {

  text-decoration: none;

  display: block;

  margin: 0 auto;

  font-size: 1.15rem;

  color: #fff;

  background: #56a9da;

  border: none;

  border-radius: 40px;

  padding: 15px 44px;

  cursor: pointer;

  box-shadow: 0 4px 20px rgba(36,122,19,0.09);

  transition: background 0.22s, transform 0.22s;

}





.view-all-btn:hover {

    background: #1c6b81;

    transform: scale(1.07);

}





/* Footer  */

.pedison-new-footer {

  background: #000000;

  color: #fff;

  font-family: Arial, sans-serif;

  font-size: 1rem;

  padding-top: 38px;

}

.footer-logo-row {

  text-align: center;

  margin-bottom: 15px;

}

.footer-logo {

  width: 250px;

  height: auto;

}

.footer-columns {

  display: flex;

  justify-content: center;

  align-items: flex-start;

  flex-wrap: wrap;

  gap: 50px;

  max-width: 1350px;

  margin: 0 auto 20px auto;

}

.footer-col {

  min-width: 160px;

  max-width: 250px;

  

}

.footer-col h4 {

  color: #4889e0;

  margin: 15px 0 8px 0;

  font-size: 1.13rem;

  font-weight: 600;

  letter-spacing: 1px;

}

.footer-col ul {

  list-style: none;

  padding: 0;

}

.footer-col ul li {

  margin-bottom: 6px;

  font-size: 1rem;

  opacity: 0.97;

  

}

.footer-col ul li a {

  color: #ffffff;

  text-decoration: none;

  transition: color 0.2s;

}

.col-contact .footer-social {

  margin: 8px 0 14px 0;

  display: flex;

  gap: 13px;

}

.footer-social a {

  display: inline-block;

 

  padding: 8px;

  border-radius: 10%;

  transition: background 0.2s;

}

.footer-social a:hover {

  background: #488ae000;

   transform: translateY(-1px);

}

.footer-social img {

  width: 40px;

  height: 40px;

  

}



.footer-bottom-row {

  width: 100%;

  text-align: center;

  padding: 10px 10px 15px 10px;

  background: #444;

  font-size: 1rem;

  color: #fff;

}

.footer-bottom-row span {

  margin-right: 15px;

}

.footer-bottom-row a {

  margin: 0 9px;

  color: #20ac66;

  text-decoration: none;

  padding: 3px 15px;

  border-radius: 5px;

  transition: background 0.2s;

  background: transparent;

}

.footer-link:hover {

  background: #152c18;

  color: #fff;

}

.footer-policy {

  background: #8a8a8a;

  color: #fff;

}

.footer-policy:hover {

  background: #4889e0;

  color: #fff;

}



/* Responsive styles */

@media (max-width: 1200px) {

  .footer-columns { flex-wrap: wrap; }

  .footer-col { max-width: 41vw; }

}

@media (max-width: 800px) {

  .footer-columns { flex-direction: column; align-items: center; }

  .footer-col { max-width: 99vw; min-width: 120px; }

}









/* WRAPPER */

.pedison-contact {

  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  color: #0f172a;

}



/* HERO / BANNER */

.pedison-contact-hero {

  position: relative;

  width: 100%;

  height: 600px;

  background-image: url("https://images.pexels.com/photos/1181406/pexels-photo-1181406.jpeg");

  background-size: cover;

  background-position: center;

  background-repeat: no-repeat;

}



/* HERO */

.pedison-contact-hero {

  width: 100%;

  height: 600px;

  background: url("https://images.pexels.com/photos/1181406/pexels-photo-1181406.jpeg") center/cover no-repeat;

  position: relative;

}



.pedison-contact-hero-overlay {

  position: absolute;

  inset: 0;

  background: rgba(0, 0, 0, 0.55);

  display: flex;

  align-items: center;

  justify-content: center;

  padding: 0 20px;

}



.pedison-contact-hero-content {

  color: #fff;

  text-align: center;

  max-width: 900px;

}



.pedison-contact-hero-content h1 {

  font-size: 2.5rem;

  font-weight: 700;

}



.pedison-contact-hero-content h2 {

  font-size: 1.3rem;

  font-weight: 400;

  margin-top: 10px;

}





/* NEW: DESCRIPTION BELOW IMAGE */

.pedison-contact-description {

  max-width: 1100px;

  margin: 50px auto 20px;

  padding: 0 20px;

}



.pedison-contact-description p {

  font-size: 18px;

  line-height: 1.7;

  color: #000000;

  margin-bottom: 15px;

}





/* MAIN CONTENT (cards + form) */

.pedison-contact-main {

  max-width: 1200px;

  margin: 30px auto;

  display: grid;

  grid-template-columns: 1fr 1fr;

  gap: 40px;

  padding: 0 20px;

}



/* MAP */

.pedison-contact-map {

  width: 100%;

  height: 600px;

  margin-top: 40px;

}



.pedison-contact-map iframe {

  width: 100%;

  height: 100%;

}





/* RESPONSIVE */

@media (max-width: 900px) {

  .pedison-contact-main {

    grid-template-columns: 1fr;

  }

}



@media (max-width: 600px) {

  .pedison-contact-hero-content h1 {

    font-size: 1.8rem;

  }

  .pedison-contact-hero-content h2 {

    font-size: 1rem;

  }

}





.pedison-contact-hero-overlay {

  position: absolute;

  inset: 0;

  background: linear-gradient(

    120deg,

    rgba(15, 23, 42, 0.85),

    rgba(15, 23, 42, 0.6),

    rgba(15, 23, 42, 0.4)

  );

  display: flex;

  align-items: left;

  justify-content: left;

  padding: 0 24px;

}



.pedison-contact-hero-content {

  max-width: 900px;

  line-height: 1.1;

  margin-left: 400px;

  text-align: left;

  color: #f9fafb;

}



.pedison-contact-hero-content h1 {

  font-size: clamp(2.2rem, 3vw, 2.8rem);

  font-weight: 700;

  margin-bottom: 0.4rem;

}



.pedison-contact-hero-content h2 {

  font-size: clamp(1.4rem, 2.3vw, 1.8rem);

  font-weight: 500;

  margin-bottom: 1.5rem;

  color: #e5e7eb;

}



.pedison-contact-hero-content p {

  font-size: 0.98rem;

  line-height: 1.7;

  margin-bottom: 0.8rem;

  color: #e5e7eb;

}



/* MAIN CONTENT (INFO + FORM) */

.pedison-contact-main {

  max-width: 1200px;

  margin: 0 auto;

  padding: 48px 16px;

  display: grid;

  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);

  gap: 32px;

}



/* INFO CARD */

.pedison-contact-info-card {

  background: #ffffff;

  padding: 24px 24px 20px;

  box-shadow: 0 14px 40px rgba(15, 23, 42, 0.08);

  border: 1px solid rgba(148, 163, 184, 0.35);

}



.pedison-contact-info-card h3 {

  font-size: 1.1rem;

  font-weight: 600;

  margin-bottom: 16px;

  color: #111827;

}



.pedison-contact-info-card ul {

  list-style: none;

  margin: 0;

  padding: 0;

}



.pedison-contact-info-card li {

  padding: 10px 0;

  border-bottom: 1px dashed rgba(148, 163, 184, 0.5);

}



.pedison-contact-info-card li:last-child {

  border-bottom: none;

}



.pedison-contact-info-label {

  display: block;

  font-size: 0.9rem;

  font-weight: 500;

  color: #111827;

  margin-bottom: 2px;

}



.pedison-contact-info-card a {

  font-size: 0.9rem;

  text-decoration: none;

  color: #00aae8;

  word-break: break-all;

}



.pedison-contact-info-card a:hover {

  text-decoration: underline;

}



/* FORM CARD */

.pedison-contact-form-card {

  background: #f9fafb;

  padding: 24px 24px 22px;

  border: 1px solid rgba(148, 163, 184, 0.4);

}



.pedison-contact-form-card h3 {

  font-size: 1.1rem;

  font-weight: 600;

  margin-bottom: 18px;

  color: #111827;

}



.pedison-contact-form {

  display: flex;

  flex-direction: column;

  gap: 14px;

}



.pedison-contact-form-group {

  display: flex;

  flex-direction: column;

  gap: 6px;

}



.pedison-contact-form-group label {

  font-size: 0.85rem;

  font-weight: 500;

  color: #4b5563;

}



.pedison-contact-form-group input,

.pedison-contact-form-group textarea {

  width: 100%;

  font-size: 0.9rem;

  padding: 9px 11px;

  border-radius: 8px;

  border: 1px solid #cbd5f1;

  background-color: #ffffff;

  outline: none;

  transition: border-color 0.18s ease, box-shadow 0.18s ease, background-color 0.18s ease;

}



.pedison-contact-form-group textarea {

  resize: vertical;

  min-height: 120px;

}



.pedison-contact-form-group input::placeholder,

.pedison-contact-form-group textarea::placeholder {

  color: #9ca3af;

}



.pedison-contact-form-group input:focus,

.pedison-contact-form-group textarea:focus {

  border-color: #00aae8;

  box-shadow: 0 0 0 1px rgba(37, 99, 235, 0.25);

  background-color: #f9fafb;

}



/* SUBMIT BUTTON - MINIMAL / AESTHETIC */

.pedison-contact-submit-btn {

  margin-top: 8px;

  align-self: flex-start;

  padding: 10px 20px;

  font-size: 0.9rem;

  font-weight: 500;

  border-radius: 999px;

  border: none;

  background: linear-gradient(135deg, #1d4ed8, #0ea5e9);

  color: #f9fafb;

  cursor: pointer;

  letter-spacing: 0.02em;

  transition: transform 0.15s ease, box-shadow 0.15s ease, opacity 0.15s ease;

}



.pedison-contact-submit-btn:hover {

  transform: translateY(-1px);

  box-shadow: 0 14px 30px rgba(37, 99, 235, 0.35);

  opacity: 0.97;

}



.pedison-contact-submit-btn:active {

  transform: translateY(0);

  box-shadow: 0 6px 20px rgba(37, 99, 235, 0.28);

}



/* MAP SECTION */

.pedison-contact-map {

  width: 100%;

  height: 450px;

  margin-top: 16px;

}



.pedison-contact-map-iframe {

  width: 100%;

  height: 100%;

}



/* RESPONSIVE */

@media (max-width: 992px) {

  .pedison-contact-main {

    max-width: 100%;

    padding: 40px 16px;

    grid-template-columns: 1fr;

  }



  .pedison-contact-info-card,

  .pedison-contact-form-card {

    border-radius: 14px;

  }

}



@media (max-width: 768px) {

  .pedison-contact-hero {

    height: 520px;

  }



  .pedison-contact-hero-overlay {

    padding: 0 16px;

  }



  .pedison-contact-hero-content {

    text-align: left;

  }



  .pedison-contact-hero-content h1 {

    font-size: 1.8rem;

  }



  .pedison-contact-hero-content h2 {

    font-size: 1.1rem;

  }



  .pedison-contact-main {

    padding: 32px 14px;

  }



  .pedison-contact-map {

    height: 450px;

  }

}



@media (max-width: 480px) {

  .pedison-contact-hero {

    height: 480px;

  }



  .pedison-contact-hero-content p {

    font-size: 0.9rem;

  }



  .pedison-contact-submit-btn {

    width: 100%;

    text-align: center;

    justify-content: center;

  }

}



.pedison-section {

  width: 100%;

  padding: 60px 20px;

  box-sizing: border-box;

}



.pedison-container {

  max-width: 1200px;

  margin: 0 auto;

  text-align: left;

}



.pedison-heading {

  font-size: 42px;

  font-weight: 500;

  line-height: 1;

}



.pedison-tagline {

  font-size: 22px;

  color: #555;

  margin-bottom: 30px;

}



.pedison-image-wrap {

  width: 100%;

  text-align: center; /* keeps image centered */

}



.pedison-image-wrap img {



  max-width: 100%;

  height: auto;

  border-radius: 10px; /* optional – remove if you want sharp edges */

}







 .container-vision-mission {

      display: flex;

      justify-content: center;

      align-items: stretch;

      gap: 20px;

      padding-top: 40px;

      padding-left: 40px;

      padding-right: 40px;

      padding-bottom: 40px;

      flex-wrap: wrap;

    }



    .vision-mission  {

      flex: 1;

      background-color: #f0eded; 

      padding: 20px;

      

    

      text-align: center;

      max-width: 400px;

      min-width: 280px;

    }



    .vision-mission  h2 {

      margin-bottom: 15px;

      font-size: 24px;

      color: #333;

      font-weight: 500;



    }



    .vision-mission  p {

      font-size: 16px;

      line-height: 1.5;

      color: #444;

            text-align: left;

    }



    /* Responsive: stack on small devices */

    @media (max-width: 768px) {

      .container-vision-mission  {

        flex-direction: column;

        align-items: center;

      }



      .vision-mission  {

        max-width: 90%;

      }

    }





    .pedison-review-section {

  background: #f4f6fb;

  padding: 20px 20px;

  padding-top: 60px;

}



.pedison-review-container {

  max-width: 1200px;

  margin: auto;

  text-align: center;

}



.pedison-review-subtitle {

  color: #2a7be4;

  font-size: 14px;

  font-weight: 600;

}



.pedison-review-title {

  font-size: 34px;

  font-weight: 700;

  margin-bottom: 40px;

}



/* SLIDER CORE */

.pedison-review-slider {

  position: relative;

  overflow: hidden;

  min-height: 380px;

}



.pedison-review-slide {

  position: absolute;

  width: 100%;

  top: 0;

  opacity: 0;

  transform: translateX(30px);

  transition: opacity 0.6s ease, transform 0.6s ease;

}



.pedison-review-slide.active {

  opacity: 1;

  transform: translateX(0);

  position: relative;

}



/* CARDS */

.pedison-review-cards {

  display: flex;

  gap: 30px;

  flex-wrap: wrap;

  justify-content: center;

}



.pedison-review-card {

  background: #fff;

  width: 48%;

  border-radius: 14px;

  padding: 30px;

  box-shadow: 0 10px 30px rgba(0,0,0,0.08);

  text-align: left;

}



.pedison-review-header {

  display: flex;

  justify-content: space-between;

  align-items: center;

}



.pedison-review-client {

  display: flex;

  align-items: center;

  gap: 12px;

}



.pedison-review-client img {

  width: 60px;

  height: 60px;

  border-radius: 10px;

  object-fit: cover;

}



.pedison-review-client h3 {

  margin: 0;

  font-size: 18px;

  font-weight: 700;

}



.pedison-review-client span {

  font-size: 14px;

  color: #2a7be4;

}



.pedison-review-message {

  margin-top: 15px;

  color: #555;

  font-style: italic;

  line-height: 1.7;

}



/* DOTS */

.pedison-review-dots {

  margin-top: 30px;

}



.pedison-review-dot {

  width: 10px;

  height: 10px;

  background: #d8d8d8;

  display: inline-block;

  border-radius: 50%;

  margin: 0 6px;

  cursor: pointer;

}



.pedison-review-dot.active {

  background: #2a7be4;

  width: 12px;

  height: 12px;

}







/* BIC */

/* Outer section */

.pedison-bic-section {

  padding: 40px 20px;

}



.pedison-bic-container {

  max-width: 1100px;

  margin: 0 auto;

}



/* Each line */

.pedison-bic-row {

  display: flex;

  align-items: center;

  justify-content: center;  /* center content, texts stretch left/right */

  margin: 8px 0;

}



/* Text */

.pedison-bic-text {

  font-size: 18px;

  flex: 1 1 0;              /* texts take remaining space on both sides */

}



.pedison-bic-text-left {

  text-align: right;

  padding-right: 16px;       /* small gap between left text and left icon */

}



.pedison-bic-text-right {

  text-align: left;

  padding-left: 16px;        /* small gap between right icon and right text */

}



/* Icons (your PNGs already have circles) */

.pedison-bic-icon {

  flex: 0 0 auto;

}



.pedison-bic-icon img {

  width: 100px;

  display: block;

}



/* ONLY increase space between the two icons */

.pedison-bic-row .pedison-bic-icon + .pedison-bic-icon {

  margin-left: 40px;         /* icon-to-icon gap = 40px */

}





/* Responsive (stack on small screens) */

@media (max-width: 768px) {

  .pedison-bic-row {

    flex-wrap: wrap;

    justify-content: center;

    text-align: center;

  }



  .pedison-bic-text {

    flex: 1 1 100%;

    text-align: center;

  }

}







.pedison-roadmap {

  max-width: 1200px;

  margin: 0 auto;

  padding: 40px 20px;

  font-family: Arial, sans-serif;

}



/* grid for each step: left side, center arrow, right side */

.pedison-roadmap-row {

  display: grid;

  grid-template-columns: 1fr 80px 1fr;

  align-items: center;

  column-gap: 40px;

  margin: 30px 0;

}



/* SIDES */

.pedison-r-side {

  position: relative;

  min-height: 80px;

}



/* text sides */

.pedison-r-side-text {

  font-size: 14px;

  line-height: 1.7;

}

.pedison-r-title {

  font-size: 15px;

  font-weight: 700;

  letter-spacing: 0.03em;

  text-transform: uppercase;

  margin-bottom: 8px;

}



/* color palette (close to your screenshot) */

.pedison-color-1 { color: #f2992a; } /* orange */

.pedison-color-2 { color: #e15b54; } /* red */

.pedison-color-3 { color: #7a58a5; } /* purple */

.pedison-color-4 { color: #13a4e2; } /* blue */

.pedison-color-5 { color: #78b843; } /* green */

.pedison-color-6 { color: #d5d51b; } /* yellow */



/* TOWER COLORS PER ROW */

.pedison-roadmap-row-1 .pedison-r-arrow { color: #f2992a; } /* orange  */

.pedison-roadmap-row-2 .pedison-r-arrow { color: #e15b54; } /* red     */

.pedison-roadmap-row-3 .pedison-r-arrow { color: #7a58a5; } /* purple  */

.pedison-roadmap-row-4 .pedison-r-arrow { color: #13a4e2; } /* blue    */

.pedison-roadmap-row-5 .pedison-r-arrow { color: #78b843; } /* green   */

.pedison-roadmap-row-6 .pedison-r-arrow { color: #d5d51b; } /* yellow  */





/* CENTER COLUMN */

.pedison-r-center {

  position: relative;

  display: flex;

  justify-content: center;

}



/* arrow block – looks like tall hexagon/arrow */

/* CENTER TOWER ARROW */

.pedison-r-arrow {

  position: relative;

  width: 45px;

  height: 160px;

  color: inherit;        /* takes the step color */

}



/* Arrow shape using clip-path (like your snippet) */

.pedison-r-arrow::before {

  content: "";

  position: absolute;

  top: 0;

  left: 0;

  right: 0;

  bottom: 0;

  background: currentColor;

  clip-path: polygon(

    50% 0%,

    100% 12%,

    100% 100%,

    50% 85%,

    0% 100%,

    0% 12%

  );

}



/* make arrows touch/overlap like one tall tower */

.pedison-roadmap-row + .pedison-roadmap-row .pedison-r-arrow {

  margin-top: 10px;   /* adjust overlap amount if needed */

}



/* NUMBER CIRCLES */

.pedison-r-circle {

  width: 56px;

  height: 56px;

  border-radius: 50%;

  background: #fff;

  border: 4px solid currentColor;

  display: flex;

  align-items: center;

  justify-content: center;

  font-weight: 700;

  font-size: 20px;

  position: relative;

  z-index: 2;

}



/* circle wrapper – handles dashed line side */

.pedison-r-side-circle {

  display: flex;

  align-items: center;

}



/* circle left of center */

.pedison-r-circle-left {

  justify-content: flex-end;

}

.pedison-r-circle-left::after {

  content: "";

  position: absolute;

  right: -60px;

  top: 50%;

  transform: translateY(-50%);

  width: 60px;

  border-bottom: 1px dashed #555;

}



/* circle right of center */

.pedison-r-circle-right {

  justify-content: flex-start;

}

.pedison-r-circle-right::after {

  content: "";

  position: absolute;

  left: -60px;

  top: 50%;

  transform: translateY(-50%);

  width: 60px;

  border-bottom: 1px dashed #555;

}



/* small alignment helpers */

.pedison-r-text-right {

  text-align: left;

  margin-left: -30px;   /* pull right-content 30px towards tower */

}



.pedison-r-text-left {

  text-align: right;

  margin-right: -30px;  /* pull left-content 30px towards tower */

}





/* right lists */

.pedison-r-side-text ul {

  margin: 0;

  padding-left: 18px;

}



/* RESPONSIVE */

@media (max-width: 900px) {

  .pedison-roadmap-row {

    grid-template-columns: 1fr;

    row-gap: 20px;

  }



  .pedison-r-text-left,

  .pedison-r-text-right {

    text-align: left;

  }



  .pedison-r-center {

    order: -1;

  }



  .pedison-r-circle-left::after,

  .pedison-r-circle-right::after {

    display: none;   /* hide dashed lines on small screens */

  }



  .pedison-r-side-circle {

    justify-content: center;

  }

}





/* container */

.bic-sectors-wrap {

  display: flex;

  align-items: start;

  justify-content: flex-start;

  gap: 14px;

  font-family: Arial, Helvetica, sans-serif;

}



/* left side text */

.bic-sectors-left {

  display: flex;

  flex-direction: column;

  gap: 4px;

}



.bic-sectors-title {

  font-family: 'Anton';

  font-size: 90px;          /* adjust if needed */

  font-weight: 500;

  letter-spacing: 8px;

  color: #818181;           /* light grey like in image */

  text-transform: uppercase;

  line-height: 1;

}



.bic-sectors-subtitle {

  font-size: 18px;

  letter-spacing: 3px;

  color: #000;

  text-transform: uppercase;

}



/* right side colored dots */

.bic-sectors-dots {

  display: flex;

  flex-direction: column;

  gap: 6px;

}



.bic-dot {

  width: 10px;

  height: 10px;

  border-radius: 50%;

  display: block;

}



/* colors (top to bottom) */

.bic-dot-1 { background: #f5a623; } /* orange */

.bic-dot-2 { background: #f15b40; } /* reddish */

.bic-dot-3 { background: #8f5ea7; } /* purple */

.bic-dot-4 { background: #27c1c9; } /* teal */

.bic-dot-5 { background: #7ac143; } /* green */



.pedison-points {

  max-width: 600px;

  margin-top: 0px !important;

  margin: 20px auto;

  padding: 10px 20px;

  font-family: Arial, sans-serif;

}



/* each row */

.pedison-point {

  display: flex;

  align-items: center;

  gap: 16px;

  margin: 18px 0;

}



/* PERFECT FIXED ROUND CIRCLE */

.pedison-num {

  width: 70px;              /* circle width */

  height: 70px;             /* circle height */

  border-radius: 50%;

  border: 4px solid currentColor;

  background: #f2f2f2;

  display: flex;

  align-items: center;

  justify-content: center;

  flex-shrink: 0;           /* prevents stretching */

}



/* number inside circle */

.pedison-num span {

  font-size: 22px;          /* change freely */

  font-weight: 700;

  line-height: 1;           /* avoids stretching */

}



/* text */

.pedison-point p {

  margin: 0;

  font-size: 22px;          /* change freely */

  line-height: 1.5;

  color: currentColor;

}



/* COLORS */

.pedison-point-1 { color: #f2992a; }

.pedison-point-2 { color: #e15b54; }

.pedison-point-3 { color: #7a58a5; }

.pedison-point-4 { color: #13a4e2; }

.pedison-point-5 { color: #78b843; }

.pedison-point-6 { color: #d5d51b; }









/* ========== BASIC LAYOUT ========== */

body {

  margin: 0;

  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  background: #f5f6fb;

  color: #141414;

}



.faq-section {

  padding-top: 0px !important;

  padding: 40px 20px;

}



.faq-wrapper {

  max-width: 1200px;

  margin: 0 auto;

  display: grid;

  grid-template-columns: 2fr 1fr;

  gap: 30px;

}



/* Stack on small screens */

@media (max-width: 900px) {

  .faq-wrapper {

    grid-template-columns: 1fr;

  }

}



/* ========== LEFT: FAQ LIST ========== */



.faq-left {

  display: flex;

  flex-direction: column;

  gap: 10px;

}



.faq-item {

  background: #ffffff;

  border-radius: 4px;

  border: 1px solid #e5e7f1;

  overflow: hidden;

  transition: box-shadow 0.2s ease, border-color 0.2s ease;

}



.faq-item.active {

  box-shadow: 0 4px 10px rgba(15, 23, 42, 0.08);

  border-color: #00aae8; /* blue */

}



.faq-question {

  width: 100%;

  display: flex;

  justify-content: space-between;

  align-items: center;

  padding: 18px 24px;

  background: transparent;

  border: none;

  cursor: pointer;

  font-size: 18px;

  font-weight: 500;

  text-align: left;

}



.faq-question span:first-child {

  flex: 1;

}



.faq-toggle-icon {

  display: inline-flex;

  align-items: center;

  justify-content: center;

  width: 28px;

  height: 28px;

  border-radius: 4px;

  border: 1px solid #d4d7e5;

  font-size: 18px;

  line-height: 1;

}



/* Answer area */

.faq-answer {

  padding: 0 24px 18px;

  font-size: 16px;

  line-height: 1.7;

  color: #4b5563;

  border-top: 1px solid #eef0fb;

  display: none;

}



/* show when active */

.faq-item.active .faq-answer {

  display: block;

}



/* bottom blue line like screenshot */

.faq-item.active::after {

  content: "";

  display: block;

  height: 3px;

  background: #00aae8;

  margin-top: -1px;

}



/* ========== RIGHT: SEARCH + AD ========== */



.faq-right {

  display: flex;

  flex-direction: column;

  gap: 24px;

}



/* Search card */

.faq-search-card {

  background: #ffffff;

  border-radius: 4px;

  border: 1px solid #bbbbbb;

  padding: 20px;

}



.faq-search-group {

  display: flex;

  border-radius: 4px;

  overflow: hidden;

  border: 1px solid #d4d7e5;

  background: #ffffff;

}



.faq-search-input {

  flex: 1;

  padding: 10px 12px;

  border: none;

  outline: none;

  font-size: 14px;

}



.faq-search-input::placeholder {

  color: #9ca3af;

}



.faq-search-btn {

  border: none;

  padding: 0 18px;

  font-size: 16px;

  cursor: pointer;

  background: #00aae8;

  color: #ffffff;

}



/* Ad card */

.faq-ad-card {

  background: #ffffff;

  border-radius: 4px;

  border: 1px solid #e5e7f1;

  overflow: hidden;

}



.faq-ad-image {

  position: relative;

}



.faq-ad-image img {

  display: block;

  width: 100%;

  height: auto;

}



.faq-ad-label {

  position: absolute;

  top: 16px;

  left: 16px;

  font-size: 13px;

  letter-spacing: 0.08em;

  text-transform: uppercase;

  color: #ffffff;

}



.faq-ad-footer {

  padding: 14px 18px;

  background: #00aae8;

  color: #ffffff;

  font-weight: 500;

  text-align: center;

  font-size: 14px;

}







.ped-bic-section {

  padding: 50px 20px;

  background: #b8b8b8;

}



.ped-bic-container {

  max-width: 800px;

  margin: 0 auto;

  display: flex;

  flex-direction: column;

  gap: 25px;

}



/* Each card box */

.ped-bic-box {

  background: #fff;

  padding: 25px 20px;

  border-left: 2px solid; /* color changes by class */

  box-shadow: 0 4px 12px rgba(0,0,0,0.08);

}



/* Heading colors */

.ped-bic-color-1 { border-left-color: #f2992a; } 

.ped-bic-color-2 { border-left-color: #E15854; } 

.ped-bic-color-3 { border-left-color: #7a58a5; } 

.ped-bic-color-4 { border-left-color: #13a4e2; } 



.ped-bic-box-title {

  margin: 0 0 12px;

  font-size: 18px;

  font-weight: 600;

  color: #111827;

}



/* List styling */

.ped-bic-list {

  list-style: none;

  padding: 0;

  margin: 0;

  display: flex;

  flex-direction: column;

  gap: 12px;

}



.ped-bic-list li {

  display: flex;

  gap: 10px;

  align-items: flex-start;

  font-size: 16px;

  color: #374151;

  line-height: 1.6;

}



.ped-bic-list li span {

  width: 26px;

  height: 26px;

  border-radius: 50%;

  background: #eef2ff;

  color: #f2992a;

  display: flex;

  justify-content: center;

  align-items: center;

  font-size: 13px;

  font-weight: 600;

  flex-shrink: 0;

  border: 1px solid #f2992a;

}



/* For different box colors, update number color automatically */

.ped-bic-color-2 .ped-bic-list li span {

  background: #eef2ff;

  color: #E15854;

  border-color: #E15854;

}



.ped-bic-color-3 .ped-bic-list li span {

  background: #eef2ff;

  color: #7a58a5;

  border-color: #7a58a5;

}



.ped-bic-color-4 .ped-bic-list li span {

  background: #eef2ff;

  color: #13a4e2;

  border-color: #13a4e2;

}





.ped-bic-intro {

  padding-bottom: 30px !important;

  padding: 60px 20px;

  background: #ffffff;

}



.ped-bic-intro-container {

  max-width: 1100px;

  margin: 0 auto;

}



/* Dots row */

.ped-bic-intro-dots {

  display: flex;

  gap: 8px;

  margin-bottom: 10px;

}



.ped-bic-dot {

  width: 15px;

  height: 15px;

  border-radius: 50%;

  display: inline-block;

}



/* Dot colors */

.ped-bic-dot-1 { background: #f5a623; } /* orange */

.ped-bic-dot-2 { background: #f15b40; } /* red */

.ped-bic-dot-3 { background: #8f5ea7; } /* blue */

.ped-bic-dot-4 { background: #27c1c9; } /* green */

.ped-bic-dot-5 { background: #7ac143; } /* light green */



/* Heading */

.ped-bic-intro-title {

  margin: 0 0 10px;

  font-size: 38px;

  line-height: 1.1;

  font-weight: 400;

  color: #0072a8; /* teal/blue similar to sample */

}



/* Description */

.ped-bic-intro-text {

  margin: 0;

  font-size: 18px;

  line-height: 1.3;

  color: #313131;

}



  



.ped-bic-bbc-section {

  padding-top: 30px !important;

  padding: 60px 20px;

  background: #daf4ff;

}



.ped-bic-bbc-container {

  max-width: 1100px;

  margin: 0 auto;

  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",

    sans-serif;

}



/* Logo */

.ped-bic-bbc-logo-wrap {

  text-align: center;

  margin-bottom: 30px;

}



.ped-bic-bbc-logo {

  max-width: 220px;

  height: auto;

}



/* Text content */

.ped-bic-bbc-content p {

  font-size: 18px;

  line-height: 1.4;

  color: #222222;

  margin: 0 0 16px;

  text-align: justify;

}



/* Dots row at bottom */

.ped-bic-bbc-dots {

  margin-top: 16px;

  display: flex;

  gap: 8px;

}



.ped-bic-bbc-dot {

  width: 12px;

  height: 12px;

  border-radius: 50%;

  display: inline-block;

}



/* Dot colors (same order as sample) */

.ped-bic-bbc-dot-1 {

  background: #f5a623; /* orange */

}

.ped-bic-bbc-dot-2 {

  background: #f15b40; /* red */

}

.ped-bic-bbc-dot-3 {

  background: #8f5ea7; /* blue */

}

.ped-bic-bbc-dot-4 {

  background: #27c1c9; /* green */

}

.ped-bic-bbc-dot-5 {

  background: #7ac143; /* light green */

}









/* Section wrapper */

.bic-vis-section {

  width: 100%;

  padding: 60px 0;

  display: flex;

  justify-content: center;

}



/* Centered container with max 1100px */

.bic-vis-container {

  width: 100%;

  max-width: 1100px;

  text-align: left;

}



/* Heading */

.bic-vis-heading {

  line-height: 0.9;

  margin: auto;

  font-size: 38px;

  font-weight: 400;

  color: #0072a8;

  max-width: 800px;

}



/* Caption under heading */

.bic-vis-caption {

  max-width: 800px;

  margin: auto;

  font-size: 18px;

  color: #555;

  margin-bottom: 20px;

}



/* Grey background box */

.bic-vis-box {

  background: #e1f6ff;

  padding: 40px;

  width: 100%;

  max-width: 800px;

  margin: auto;

  text-align: center;

}

.bic-vis-box p,li{

  text-align: left;

}

.bic-vis-box ul{

  padding-left: 30px;

}





/* Icon */

.bic-vis-icon {

  height: 80px;

  margin-bottom: 20px;

  object-fit: contain;

}



/* Paragraph inside box */

.bic-vis-text {

  font-size: 16px;

  color: #333;

  line-height: 1.5;

}









 .stories-hero{

  position:relative;

  width:100%;

  height:100vh;

  min-height:450px;

  max-height:800px;

  overflow:hidden;

  color:#fff;

  font-family:"Source Sans 3", sans-serif;

}



/* background slides */

.stories-bg{

  position:absolute;

  inset:0;

  z-index:0;

}

.story-slide{

  position:absolute;

  inset:0;

  background-size:cover;

  background-position:center center;

  opacity:0;

  transition:opacity .9s ease-in-out; /* smoother fade */

}

.story-slide.active{

  opacity:1;

}



/* softer gradient overlay (no black bar) */

.stories-hero::after{

  content:"";

  position:absolute;

  inset:0;

  background:linear-gradient(

    90deg,

    rgba(0,0,0,0.70) 0%,

    rgba(0,0,0,0.25) 40%,

    rgba(0,0,0,0.60) 100%

  );

  z-index:1;

}



/* overlay container */

.stories-overlay{ 

  position:relative;

  z-index:2;

  display:flex;

  flex-direction:column;

  height:100%;

}



/* nav columns */

.stories-nav{

  display:flex;

  padding:0px 5vw 0;   /* a bit more breathing room top */

  flex:1 0 auto;

}



.story-tab{

  flex:1 1 0;

  border:0;

  background:transparent;

  color:inherit;

  text-align:left;

  padding:50px 1.4vw 40px;

  cursor:pointer;

  position:relative;

  font-family:inherit;

  display:flex;

  flex-direction:column;

  justify-content:space-between;

  align-items:flex-start;

  outline:none;

}



/* vertical divider */

.story-tab + .story-tab::before{

  content:"";

  position:absolute;

  left:0;

  top:16px;

  bottom:16px;

  width:1px;

  background:rgba(0, 0, 0, 0.18);

}



/* highlight / hover area – softer & smoother */

.story-tab::after{

  content:"";

  position:absolute;

  inset:18px 0 18px 0;

  background:rgba(255, 0, 0, 0);

  box-shadow:0 0 0 rgba(255,255,255,0);

  border-radius:2px;

  transition:

    background .1s ease,

    box-shadow .1s ease,

    transform .1s ease;

  pointer-events:none;

}

.story-tab:hover::after,

.story-tab.active::after{

  background:linear-gradient(

    to bottom,

    rgba(255,255,255,0.10),

    rgba(255,255,255,0.00)

  );

  box-shadow:0 0 32px rgba(0,0,0,0.45);

  transform:translateY(-2px); /* tiny lift */

}



/* top labels */

.tab-top{

  position:relative;

  z-index:3;

}

/* .tab-top:hover ::after{

  content:"";

  position:absolute;

  inset:18px 0 18px 0;

  background:rgba(255, 0, 0, 0.986);

  box-shadow:0 0 0 rgba(240, 0, 0, 0.938);

  border-radius:2px;

  transition:

    background .1s ease,

    box-shadow .1s ease,

    transform .1s ease;

  pointer-events:none;

} */



.tab-eyebrow{

  display:block;

  font-size:10px;

  letter-spacing:3px;

  text-transform:uppercase;

  opacity:0.78;

}

.tab-title{

  display:block;

  margin-top:10px;

  font-size:18px;

  font-weight:700;

  letter-spacing:0.5px;

  white-space:nowrap;

}

.story-tab.active .tab-title{

  text-decoration:none;

  

}

.story-tab.active .tab-eyebrow{

  opacity:1;

}



/* bottom quote inside each tab */

.tab-bottom{

  position:relative;

  z-index:3;

  margin-top:auto;

  max-width:260px;

  padding-top:22px;

  font-size:16px;

  line-height:1.7;

  opacity:0;

  transform:translateY(12px);

  transition:

    opacity .15s cubic-bezier(.23,1,.32,1),

    transform .15s cubic-bezier(.23,1,.32,1);

  text-decoration: none   ;  

  color: #ffffff;

}

.tab-bottom h4{

  margin:0 0 8px;

  font-size:16px;

  color: #ffffff;

  text-decoration: none !important;

}

.tab-bottom p{

  margin:0;

  font-size:15px;

  color: #ffffff;

  text-decoration: none !important;

}

.story-tab:hover .tab-bottom,

.story-tab.active .tab-bottom{

  opacity:1;

  transform:translateY(0);

  

}

.story-tab:hover .a {

  text-decoration: none;}



/* responsive */

@media (max-width:900px){

  .stories-nav{padding-inline:3vw;}

  .tab-title{font-size:14px; white-space:normal;}

}

@media (max-width:700px){

  .stories-nav{

    flex-wrap:wrap;

    row-gap:10px;

  }

  .story-tab{

    flex:1 1 50%;

    padding:16px 1vw 24px;

  }

  .story-tab + .story-tab::before{

    top:10px; bottom:10px;

  }

}



a:-webkit-any-link {

  text-decoration: none;

}



.about-logo {

  display: flex;

  justify-content: center; /* centers horizontally */

  align-items: center;     /* centers vertically (optional) */

  margin: 30px 0;          /* add some spacing */

}



.about-logo img {

  max-width: 350px;  /* optional: limit image width */

  height: auto;

}



       .about-p p{

        font-size: 18px;

        color: #000000;

        font-weight: 400;

        text-align: left;

        margin-left: 20px;

        margin-right: 20px;

        margin-top: 10px;

        margin-bottom: 10px;

    }





    

.about-img {

  width: 100%;

  max-width: 1200px;

  margin: 50px auto;

  text-align: center;

  padding: 20px 0;

}



.about-img img {

  width: 100%;   /* fully responsive */

  max-width: 700px; /* max size on large screens */

  height: auto;

  object-fit: contain;

  display: block;

  margin: 0 auto;

}



/* RESPONSIVE CHANGE BELOW 800PX */

@media (max-width: 800px) {

  .about-img img {

    max-width: 100%; /* allow image to shrink */

  }

}







.footer-newsletter {

  max-width: 320px;

}



.fn-title {

  color: var(--heading-green, #ffffff);

  font-size: 16px;

  margin-bottom: 6px;

  font-weight: 600;

}



/* form container */

.fn-form {

  display: flex;

  align-items: center;

  width: 100%;

}



/* input style */

.fn-form input {

  flex: 1;

  padding: 10px 14px;

  font-size: 14px;

  border: none;

  outline: none;

  border-radius: 4px 0 0 4px;

  background: #ffffff;

  color: #000;

}



/* button style */

.fn-form button {

  width: 50px;

  height: 40px;

  background: #5e5e5e;

  border: none;

  border-radius: 0 4px 4px 0;

  cursor: pointer;

  display: flex;

  align-items: center;

  justify-content: center;

}



/* icon inside button */

.fn-icon {

  color: #fff;

  font-size: 18px;

}



/* optional hover */

.fn-form button:hover {

  opacity: 0.85;

}







/* ---------- Video container ---------- */

.pedison-usa-video-bg {

  position: relative;

  width: 100vw;

  height: 850px;

  overflow: hidden;

  display: flex;

  align-items: center;

  justify-content: center;

  z-index: 0;

  background: #000;

}



/* Video element */

.pedison-usa-video {

  position: absolute;

  top: 0;

  left: 50%;

  transform: translateX(-50%);

  width: 100vw;

  height: 850px;

  object-fit: cover;

  z-index: 0;

  pointer-events: none; /* don't block interactions */

}



/* make sure video covers on very large screens */

@media (min-width: 1600px) {

  .pedison-usa-video { width: 140vw; }

}



/* Responsive video height */

@media (max-width: 1200px) {

  .pedison-usa-video-bg,

  .pedison-usa-video { height: 700px; }

}

@media (max-width: 768px) {

  .pedison-usa-video-bg,

  .pedison-usa-video { height: 500px; }

}

@media (max-width: 480px) {

  .pedison-usa-video-bg,

  .pedison-usa-video { height: 400px; }

}



/* ---------- Overlay that sits above the video ---------- */

.pedison-usa-video-overlay {

  position: absolute; /* fill the video container */

  inset: 0; /* top:0; right:0; bottom:0; left:0; */

  z-index: 2;

  color: #fff;

  text-align: left;

  box-sizing: border-box;

  pointer-events: none; /* let page scrolling / interactions pass through by default */

  -webkit-user-select: none;

  user-select: none;

  touch-action: pan-y;

  /* subtle darkener so text shows on bright frames */

  background: linear-gradient(180deg, rgba(0,0,0,0.22) 0%, rgba(0,0,0,0.26) 100%);

  padding: clamp(24px, 4vw, 40px);

  display: block;

}



/* subtle extra layer (optional) to increase contrast on bright video frames */

.pedison-usa-video-overlay::before{

  content: "";

  position: absolute;

  inset: 0;

  z-index: 1;

  pointer-events: none;

  background: linear-gradient(180deg, rgba(0,0,0,0.12) 0%, rgba(0,0,0,0.35) 100%);

}



/* ---------- Slides (stacked absolute) ---------- */

.pedison-usa-video-overlay .ped-slide {

  position: absolute;

  inset: 0;

  z-index: 2;

  display: flex;

  flex-direction: column;

  justify-content: center;

  align-items: flex-start;

  box-sizing: border-box;



  /* responsive left offset instead of fixed margin-left */

  padding-left: clamp(20px, 12vw, 420px);

  padding-right: clamp(20px, 4vw, 80px);

  padding-top: 40px;

  padding-bottom: 40px;



  /* start hidden with a gentle fade/translate */

  opacity: 0;

  visibility: hidden;

  transform: translateY(10px);

  transition: opacity 0.6s ease, visibility 0.6s ease, transform 0.45s cubic-bezier(.2,.9,.2,1);

  pointer-events: none; /* don't intercept clicks when hidden */

}



/* Active slide visible and interactive */

.pedison-usa-video-overlay .ped-slide.active {

  opacity: 1;

  visibility: visible;

  transform: translateY(0);

  pointer-events: auto;   /* allow links/buttons inside active slide to work */

  user-select: text;

}



/* Reset internal text spacing */

.pedison-usa-video-overlay .ped-slide h1,

.pedison-usa-video-overlay .ped-slide p {

  margin: 0;

}



/* Headline responsive sizing */

.pedison-usa-video-overlay h1 {

  /* clamp(min, preferred, max) - scales smoothly */

  font-size: clamp(22px, 4.2vw, 64px);

  font-weight: 700;

  line-height: 1.02;

  margin-bottom: 20px;

  text-align: left;

  max-width: 1200px;

  z-index: 3;

}



/* Paragraph sizing */

.pedison-usa-video-overlay p {

  font-size: clamp(14px, 1.6vw, 25px);

  max-width: 680px;

  text-align: left;

  line-height: 1.4;

  z-index: 3;

}



/* If you used inline style for a particular H1 size (like one slide), let it remain but be bounded */

.pedison-usa-video-overlay .ped-slide h1[style] {

  max-width: 100%;

  word-break: break-word;

}



/* ---------- Responsive adjustments ---------- */

@media (max-width: 1200px) {

  .pedison-usa-video-overlay .ped-slide {

    padding-left: clamp(20px, 8vw, 200px);

    padding-right: 40px;

  }

  .pedison-usa-video-overlay p { max-width: 520px; }

}



@media (max-width: 768px) {

  .pedison-usa-video-overlay {

    padding-left: 20px;

    padding-right: 20px;

    touch-action: auto; /* allow normal touch interaction for overlay on small screens */

    text-align: center;

  }

  .pedison-usa-video-overlay .ped-slide {

    align-items: center;

    padding-left: 20px;

    padding-right: 20px;

  }

  .pedison-usa-video-overlay h1,

  .pedison-usa-video-overlay p {

    text-align: center;

    margin-left: 0;

    margin-right: 0;

    max-width: none;

  }

  .pedison-usa-video-overlay h1 { font-size: clamp(20px, 6vw, 36px); }

  .pedison-usa-video-overlay p { font-size: clamp(14px, 3.6vw, 18px); }

}



/* very small phones */

@media (max-width: 480px) {

  .pedison-usa-video-overlay h1 { font-size: 22px !important; text-align: left; }

  .pedison-usa-video-overlay p { font-size: 16px; text-align: left; }

  .ped-slide.active { padding-left: 16px; padding-right: 16px; }

}



/* ---------- Safety: ensure hidden slides never capture pointer events ---------- */

.pedison-usa-video-overlay .ped-slide:not(.active) { pointer-events: none; }

.pedison-usa-video-overlay .ped-slide.active { pointer-events: auto; }



/* ---------- Optional: small decorative rule for consistency ---------- */

.pedison-usa-tagline { margin-top: 12px; opacity: 0.95; }



/* ---------- Helpful utility if you add controls later ---------- */

.pedison-controls { position: absolute; z-index: 5; right: 24px; bottom: 24px; pointer-events: auto; }



/* =========================

   Accessibility + small helpers

   ========================= */

/* If you have interactive controls inside slides (buttons/links),

   ensure they are visible to keyboard users. */

.pedison-usa-video-overlay .ped-slide.active a,

.pedison-usa-video-overlay .ped-slide.active button {

  pointer-events: auto;

  cursor: pointer;

}



/* Optional: if you experience double-tap issues on iOS, you can add:

   -webkit-tap-highlight-color: rgba(0,0,0,0);

   but keep commented unless needed.

*/





    .hero-dashboard {

      position: relative;

      background: url('https://images.unsplash.com/photo-1521737604893-d14cc237f11d?auto=format&fit=crop&w=1500&q=80') center/cover no-repeat;

      height: 580px;

      display: flex;

      flex-direction: column;

      justify-content: center;

      align-items: center;

      text-align: center;

      color: #fff;

      overflow: hidden;

    }



    .overlay-dashboard {

      position: absolute;

      inset: 0;

      background: rgba(0, 0, 0, 0.55);

    }



    .hero-content-dashboard {

      position: relative;

      z-index: 2;

      max-width: 900px;

      animation: fadeUp 1.2s ease forwards;

      padding: 2rem;

    }



    .hero-dashboard h1 {

      font-size: 2.2rem;

      line-height: 1.4;

      font-weight: 600;

      margin-bottom: 2.5rem;

      color: #fff;

    }





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

    .stats-dashboard {

      display: flex;

      justify-content: center;

      align-items: center;

      flex-wrap: wrap;

      gap: 3rem;

    }



    .stat-box-dashboard {

      background: rgba(255, 255, 255, 0.15);

      border: 1px solid rgba(255, 255, 255, 0.3);

      padding: 1.2rem 2rem;

      min-width: 200px;

      text-align: center;

      backdrop-filter: blur(6px);

      transition: transform 0.4s ease, background 0.3s;

    }



    .stat-box-dashboard:hover {

      transform: translateY(-6px);

      background: rgba(255, 255, 255, 0.25);

    }



    .stat-number-dashboard {

      font-size: 2rem;

      font-weight: 700;

      color: #1da8e0;

      margin-bottom: 0.3rem;

    }



    .stat-label-dashboard {

      font-size: 1rem;

      font-weight: 400;

      color: #e9e9e9;

    }



    /* ====== ANIMATIONS ====== */

    @keyframes fadeUp {

      from {

        opacity: 0;

        transform: translateY(25px);

      }

      to {

        opacity: 1;

        transform: translateY(0);

      }

    }



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

    @media (max-width: 768px) {

      .hero-dashboard {

        height: auto;

        padding: 3rem 1rem;

      }



      .hero-dashboard h1 {

        font-size: 1.8rem;

      }



      .stat-box-dashboard {

        min-width: 160px;

        padding: 1rem;

      }

    }





    

.ped-loan-section {

  padding: 50px 20px;

  background: #f8f9fb;

}



.ped-loan-container {

  max-width: 1100px;

  margin: auto;

  text-align: left;

}



.ped-loan-title {

  font-size: 32px;

  font-weight: 500;

}



.ped-loan-desc {

  font-size: 18px;

  color: #363636;

  margin-bottom: 30px;

  max-width: 1100px;

  margin-right: auto;

}



.ped-loan-image-box {

  margin-bottom: 30px;

}



.ped-loan-image-box img {

  width: 100%;

  border-radius: 12px;

  object-fit: cover;

}