/* =========================================================
   SUNBRIDGE GROUP
   TYPOGRAPHY + COLOR SYSTEM
   Responsive using CSS clamp()
========================================================= */


/* =========================================================
   01. COLOR VARIABLES
========================================================= */

:root {

    /* Brand Colors */
    --color-primary: #f36c25;
    --color-secondary: #448649;
    --color-text: #555352;

    /* Neutral Colors */
   
    --color-light: #f6f6f6;
    --color-black: #000000;
    --color-white: #ffffff;
}


/* =========================================================
   02. GLOBAL BODY
========================================================= */

body {
    font-family: "DM Sans", sans-serif;
    /* color: var(--color-text); */
    font-size: 18px;
    line-height: 1.6;
}


/* =========================================================
   03. HEADINGS
   Source Sans Pro
========================================================= */

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: "Source Sans Pro", sans-serif !important;
}


/* =========================================================
   04. H1
   34px → 64px
========================================================= */

.heading-h1 h1, .heading-h1 h1>span{
    font-family: "Source Sans Pro", sans-serif !important;
    font-size: clamp(34px, 4vw, 64px) !important;
    line-height: 1.1;
    font-weight: 700 !important;
    /* color: var(--color-black); */
    letter-spacing: -0.02em;
}


/* =========================================================
   05. H2
   30px → 48px
========================================================= */

.heading-h2 h2, .heading-h2 h2>span{
    font-family: "Source Sans Pro", sans-serif !important;
    font-size: clamp(30px, 3vw, 48px) !important;
    line-height: 1.15 !important;
    font-weight: 700 !important;
    /* color: var(--color-black); */
    letter-spacing: -0.02em;
}


/* =========================================================
   06. H3
   26px → 36px
========================================================= */

.heading-h3 h3, .heading-h3 h3>span{
    font-family: "Source Sans Pro", sans-serif !important;
    font-size: clamp(26px, 2.5vw, 36px) !important;
    line-height: 1.2;
    font-weight: 700 !important;
    /* color: var(--color-black); */
}


/* =========================================================
   07. H4
   22px → 28px
========================================================= */

.heading-h4 h4, .heading-h4 h4>span{
    font-family: "Source Sans Pro", sans-serif !important;
    font-size: clamp(22px, 2vw, 28px) !important;
    line-height: 1.25;
    font-weight: 700 !important;
    /* color: var(--color-black); */
}


/* =========================================================
   08. H5
   18px → 22px
========================================================= */

.heading-h5 h5, .heading-h5 h5>span{
    font-family: "Source Sans Pro", sans-serif !important;
    font-size: clamp(18px, 1.5vw, 22px) !important;
    line-height: 1.3;
    font-weight: 600 !important;
    /* color: var(--color-black); */
}


/* =========================================================
   09. H6
   16px → 18px
========================================================= */

.heading-h6 h6, .heading-h6 h6>span{
    font-family: "Source Sans Pro", sans-serif !important;
    font-size: clamp(16px, 1.25vw, 18px) !important;
    line-height: 1.35;
    font-weight: 600 !important;
    /* color: var(--color-black); */
}


/* =========================================================
   10. BODY / PARAGRAPH
   16px → 18px
========================================================= */

.body-text, .body-text p{
    font-family: "DM Sans", sans-serif !important;
    font-size: clamp(16px, 1.25vw, 18px) !important;
    line-height: 1.6 !important;
    letter-spacing: 0.5px !important;
    font-weight: 400 !important;
    /* color: var(--color-text); */
}


/* =========================================================
   11. SMALL TEXT
   13px → 15px
========================================================= */

.small-text {
    font-family: "DM Sans", sans-serif !important;
    font-size: clamp(13px, 1vw, 15px) !important;
    line-height: 1.5 !important;
    font-weight: 400 !important;
    /* color: var(--color-text); */
}


/* =========================================================
   12. CONTAINER PADDING
========================================================= */

.container_padding {
    padding-left: 5%;
    padding-right: 5%;
}


/* =========================================================
   13. COLOR UTILITY CLASSES
========================================================= */

/* Text Colors */

.text-primary {
    color: var(--color-primary);
}

.text-secondary {
    color: var(--color-secondary);
}

.text-dark {
    color: var(--color-black);
}

.text-light {
    color: var(--color-light);
}

.text-white {
    color: var(--color-white);
}


/* Background Colors */

.bg-primary {
    background-color: var(--color-primary);
}

.bg-secondary {
    background-color: var(--color-secondary);
}

.bg-light {
    background-color: var(--color-light);
}

.bg-black {
    background-color: var(--color-black);
}

.bg-white {
    background-color: var(--color-white);
}

.clickable-box{
    cursor: pointer;
}

.border_radius img{
  border-radius: 80px 0;
}


/* Hide all brand panels */

.brand-panel {
    display: none !important;
    border: 1px solid #ffffff;
    box-shadow: rgba(85, 83, 82, 0.15) 0px 1px 2px 0px !important;
}
.border_styling{
  box-shadow: rgba(85, 83, 82, 0.15) 0px 1px 2px 0px !important;
}


/* Show selected panel */

.brand-panel.active {
    display: flex !important;
}


/* =========================================
   BRAND CARD - DEFAULT
========================================= */

.brand-card {
    position: relative;
    cursor: pointer;
    /* background: #ffffff; */
    /* border: 3px solid #555352 !important; */
    /* border-radius: 20px; */
    overflow: hidden;
    box-sizing: border-box;
    filter: grayscale(100%) !important;
    transition:
        transform 0.35s ease,
        border-color 0.35s ease,
        filter 0.35s ease,
        box-shadow 0.35s ease;
}


/* =========================================
   HOVER
========================================= */

.brand-card:hover {  
    /* transform: translateY(-4px); */
    /* border-color: #f36c25 !important; */
    filter: grayscale(0%) !important;
    /* box-shadow: rgba(243, 108, 37, 0.15) 0px 5px 5px 0px !important; */
    transition: filter 0.4s ease, transform 0.3s ease;
}


/* =========================================
   ACTIVE
========================================= */

.brand-card.active {
    /* border-color: #f36c25 !important; */
    filter: grayscale(0%) !important;
    /* box-shadow: rgba(243, 108, 37, 0.15) 0px 5px 5px 0px !important; */
    /* transform: translateY(-4px); */
    transition: filter 0.4s ease, transform 0.3s ease;
}

/* .brand-card {
    filter: grayscale(100%);
    transition: filter 0.4s ease, transform 0.3s ease;
}

.brand-card.active {
    filter: grayscale(0%);
} */



/* =========================================
   HOVER / ACTIVE LOGO EFFECT
========================================= */

.brand-card img {
    transition: transform 0.35s ease;
}

.brand-card:hover img {
    transform: scale(1.04);
}

.brand-card.active img {
    transform: scale(1.03);
}







/* =====================================
   FLIP BOX ACTION LINKS
===================================== */

.flip-action {
    position: absolute;

    right: 30px;
    bottom: 25px;

    display: inline-flex;
    align-items: center;
    gap: 8px;

    padding: 8px 0;

    color: #448649;
    font-size: 16px;
    font-weight: 600;

    line-height: 1;

    text-decoration: none;

    /* border-bottom: 1px solid #448649; */

    cursor: pointer;

    /* transition:
        color 0.3s ease,
        border-color 0.3s ease,
        transform 0.3s ease; */
}


/* Hover */

.flip-action:hover {
    /* color: #2f6634; */
    /* border-color: #2f6634; */
}


/* Small movement */
/* 
.flip-know-more:hover {
    transform: translateX(3px);
}

.flip-back:hover {
    transform: translateX(-3px);
} */


.frooney-float-image {
    float: right;
    width: 200px;
    height: 200px;
    object-fit: contain;
    margin: 0 0 25px 40px;
}

/* Prevent the next section from being affected by the float */
.frooney-features {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
}

/* flipbox styling */

/* =========================================
   SUNBRIDGE FLIPBOX - FRONT ONLY
========================================= */

/* Front container */
.flipbox_styling .eael-elements-flip-box-front-container {
    height: 100% !important;
}

/* Front internal layout only */
.flipbox_styling .eael-elements-flip-box-front-container
.eael-elements-slider-display-table {
    display: flex !important;
    width: 100% !important;
    height: 100% !important;
}

.flipbox_styling .eael-elements-flip-box-front-container
.eael-elements-flip-box-vertical-align {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    height: 100% !important;
}

.flipbox_styling .eael-elements-flip-box-front-container
.eael-elements-flip-box-padding {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    height: 100% !important;
    padding: 25px !important;
}

/* Heading - TOP LEFT */
.flipbox_styling .eael-elements-flip-box-front-container
.eael-elements-flip-box-heading {
    order: 1;
    margin: 0 !important;
    text-align: left !important;
    align-self: flex-start;
}

/* Paragraph - BOTTOM RIGHT */
.flipbox_styling .eael-elements-flip-box-front-container
.eael-elements-flip-box-content {
    order: 2;
    margin-top: auto !important;
    margin-left: auto !important;
    text-align: right !important;
    align-self: flex-end;
}

/* Paragraph itself */
.flipbox_styling .eael-elements-flip-box-front-container
.eael-elements-flip-box-content p {
    margin: 0 !important;
    text-align: right !important;
}


.flipbox_styling .eael-elements-flip-box-front-container .eael-elements-flip-box-icon-image{
  display: none;
}







/* ==========================================
   CAREER STORIES SLICK SLIDER
   ========================================== */

.career_stories {
    position: relative;
}


/* ==========================================
   SLICK ARROWS
   ========================================== */

.career_stories .slick-prev,
.career_stories .slick-next {
    position: absolute;

    top: 50%;
    transform: translateY(-50%);

    width: 52px;
    height: 52px;

    padding: 0;
    margin: 0;

    border-radius: 50%;
    border: 1px solid #555352;

    background: #ffffff;

    z-index: 10;

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

    cursor: pointer;

    font-size: 0 !important;

    transition: all 0.3s ease;
    
}


/* ==========================================
   ARROW POSITION
   ========================================== */

.career_stories .slick-prev {
    left: -50px;
}

.career_stories .slick-next {
    right: -50px;
}


/* ==========================================
   REMOVE THE FONT AWESOME ICON
   THIS IS THE IMPORTANT PART
   ========================================== */

.career_stories .slick-prev i,
.career_stories .slick-next i {
    display: none !important;
}


/* ==========================================
   REMOVE SLICK DEFAULT ARROW
   AND ADD OUR CUSTOM ARROW
   ========================================== */

.career_stories .slick-prev::before {
    content: "\2039" !important;
    display: block !important;
    font-size: 23px !important;
    font-weight: 400 !important;
    line-height: 1 !important;

    color: #555352 !important;

    opacity: 1 !important;

    width: auto !important;
    height: auto !important;
    position: static !important;
    margin-top: -2px;
}


.career_stories .slick-next::before {
    content: "\203A" !important;
    display: block !important;
    font-family: Arial, sans-serif !important;
    font-size: 23px !important;
    font-weight: 400 !important;
    line-height: 1 !important;
    color: #555352 !important;
    opacity: 1 !important;
    width: auto !important;
    height: auto !important;
    position: static !important;
    margin-top: -2px;
}


/* ==========================================
   HOVER
   ========================================== */

.career_stories .slick-prev:hover,
.career_stories .slick-next:hover {
    background: #f36c25 !important;
    border-color: #f36c25 !important;
}


/* Keep our custom arrows on hover */

.career_stories .slick-prev:hover::before {
    content: "\2039" !important;
    color: #ffffff !important;
}

.career_stories .slick-next:hover::before {
    content: "\203A" !important;
    color: #ffffff !important;
}


/* ==========================================
   DISABLED ARROW
   ========================================== */

.career_stories .slick-prev.slick-disabled,
.career_stories .slick-next.slick-disabled {
    opacity: 0.4;
}


/* ==========================================
   TABLET
   ========================================== */

@media (max-width: 1024px) {

    .career_stories .slick-prev {
        left: -50px;
    }

    .career_stories .slick-next {
        right: -50px;
    }

    .career_stories .slick-prev,
    .career_stories .slick-next {
        width: 46px;
        height: 46px;
    }

    .career_stories .slick-prev::before,
    .career_stories .slick-next::before {
        font-size: 34px !important;
    }
}


/* ==========================================
   MOBILE
   ========================================== */

@media (max-width: 767px) {

    .career_stories .slick-prev {
        left: 10px;
    }

    .career_stories .slick-next {
        right: 10px;
    }

    .career_stories .slick-prev,
    .career_stories .slick-next {
        width: 42px;
        height: 42px;
    }

    .career_stories .slick-prev::before,
    .career_stories .slick-next::before {
        font-size: 30px !important;
    }
}



















#masthead {
  position: fixed !important;

  top: 0;

  left: 0;

  width: 100%;

  z-index: 9999;

  transition: all 0.3s ease;
}

 #masthead {
  background-color:var(--color-white) ;
  box-shadow: none ;
} 
 .hfe-nav-menu .menu-item a{
outline: none !important;
} 

.page-id-26248 .hfe-nav-menu .menu-item a, .page-id-26316  .hfe-nav-menu .menu-item a, .page-id-26285  .hfe-nav-menu .menu-item a{
  color: #000000 !important;
}

header.scrolled {
  background: #fff !important;
  color: #000 !important;
  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08);
}

header.scrolled .hfe-nav-menu .menu-item a{

  color: #000 !important;

}
header.scrolled .hfe-nav-menu .current-menu-item a{

  color: #f36c25 !important;

}





.ehf-header header#masthead{
    background-color: #9c919100;
    box-shadow: none;
    border-style: none;
}



/* Headings */
/* h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: "Source Sans Pro", sans-serif !important;
} */

/* Body text and all other elements */
body,
p,
span,
a,
li,
button,
input,
textarea,
select,
label {
  font-family: "DM Sans", sans-serif !important;
}

h2 span {
  font-family: "Source Sans Pro", sans-serif !important;
}

.dual_heading_color {
  color: var(--color-primary);
}






.subs .forminator-row:not(.forminator-row.forminator-row-last) {
  width: 100%;
}

.subs_frm form#forminator-module-8 {
  margin-top: 0px;
  position: relative;
  display: flex;
}

.subs_frm form#forminator-module-8 .forminator-row:first-child {
  width: 100%;
  margin-right: 10px !important;
}

.subs_frm form input.forminator-email--field {
  border-radius: 30px !important;
  padding: 10px 25px !important;
  font-size: 20px !important;
  border: 1.35px solid #727272 !important;
}

.subs button.news_submit {
  position: absolute !important;
  right: 25px !important;
  border-radius: 30px !important;
  top: 0;
  background: #727272 !important;
  padding: 10px 5px !important;
  width: 70px !important;
}

.news_email input[type="email"] {
  width: 95% !important;
  background-color: #fff !important;
}

@font-face {
  font-family: "Hand Of Sean";
  src: url("../fonts/Hand_Of_Sean_Demo.ttf") format("truetype");
  font-style: normal;
  font-weight: normal;
}

.subs_frm .forminator-ui.forminator-custom-form[data-design="default"] .forminator-button {
  width: auto;
  min-width: 70px !important;
}

.subs_frm .forminator-ui.forminator-custom-form:not(.forminator-size--small)[data-grid="open"] .forminator-row:not(:last-child) {
  margin-bottom: 10px !important;
}



.tel,
.mailto {
  font-size: 16px;
  color: #727272;
  font-family: "Source Sans Pro", Sans-serif;
  font-weight: 500;
}

.tel:hover,
.mailto:hover {
  color: #727272;
}

.lu_style li {
  font-size: 20px;
  color: #58595b;
  font-family: "Source Sans Pro", Sans-serif;
  font-weight: 400;
}

.lu_style {
  margin: 10px 0px;
  line-height: 36px;
  list-style: none;
}

.lu_style li {
  position: relative;
  padding-left: 25px;
}

.lu_style strong {
  font-weight: 700;
}

.lu_style li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 15px;
  width: 10px;
  height: 10px;
  background: #a1a3a3;
  border-radius: 50%;
  clip-path: inset(0 0 50% 0);
}

.page-id-474 .entry-content ul,
.page-id-474 .entry-content ol {
  padding-left: 0px;
}

button img.en_cls {
  width: 60%;
}

.subs_frm input::placeholder {
  color: #727272 !important;
  opacity: 1;
}

.sun_blogs .rt-detail {
  /* background-image: linear-gradient(70deg, #EB7723 30%, #F89D31 100%)!important; */
  background-image: linear-gradient(70deg,
      var(--color-white) 30%,
      var(--color-white) 100%) !important;
  padding: 10px !important;
  display: flex;
  position: absolute;
  bottom: 35px;
  left: 53px;
  right: 53px;
  border-radius: 20px;
}

.sun_blogs .entry-title {
  width: 25%;
  text-align: end;
  border-right: 1.5px solid #808184;
  padding-right: 20px;
}

.sun_blogs .rt-detail .post-meta.center {
  text-align: left !important;
}

.sun_blogs .rt-detail .post-meta.center .read-more {
  margin-top: 10px;
  display: inline-block;
}

.sun_blogs .read-more a {
  padding: 0px 15px !important;
  font-size: 16px !important;
}

/* .sun_blogs .eael-cta-heading,
.sun_blogs p,
.sun_blogs a,
.sun_blogs .tpg-excerpt {
  font-family: "DM Sans", Sans-serif !important;
} */
/* h3.entry-title > a,
body.single h1 {
  font-family: "Geist" !important;
} */
#loadMore span {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
  font-family: "DM Sans", sans-serif;
}

.sun_blogs h3.entry-title {
  text-align: right !important;
  line-height: 36px !important;
  display: grid;
  align-items: center;
}

.sun_blogs .entry-title a {
  font-weight: 700 !important;
  line-height: 40px !important;
  text-align: right !important;
  display: inline-block;
}

.page-id-1244 .sun_blogs .entry-title a,
.page-id-1244 .sun_blogs h3.entry-title {
  text-align: left !important;
}

.page-id-1244 .sun_blogs .entry-title {
  padding: 0px 20px;
}

.sun_blogs.ors_brnd h3.entry-title a {
  line-height: 25px !important;
  font-size: 19px !important;
}

.sun_blogs.ors_brnd h3.entry-title {
  line-height: 0px !important;
}

.sun_blogs .tpg-excerpt {
  line-height: 26px;
  padding-left: 20px;
  margin: 10px 0px !important;
  width: 75%;
}

.sun_blogs.ors_brnd h3.entry-title img {
  width: 12rem;
  margin-bottom: 10px;
}

.page-id-3616 .sun_blogs h3.entry-title img {
  width: 12rem;
  margin-bottom: 10px;
}

.page-id-3616 .sun_blogs h3.entry-title img+a {
  line-height: 25px !important;
  font-size: 19px !important;
  text-align: left !important;
}

.page-id-3616 .sun_blogs .entry-title {
  width: 27%;
}

.sun_blogs {
  padding: 0px;
}

.sun_blogs.ab_blogs h3.entry-title {
  padding: 15px 20px !important;
  margin-bottom: unset !important;
  padding-left: unset !important;
  display: grid;
  place-items: center;
}

.load_more {
  cursor: pointer;
  font-size: 16px;
  color: #808184;
}

.single-post.ehf-header #masthead {
  background-color: var(--color-white)
}
.single-post #content{
  padding-top:90px ;
}

.single-post.ehf-header #masthead  .menu-item a.hfe-menu-item{
  color: #000000 !important;
}

/* .single-post img {
  width: 100%;
} */

#loader {
  display: none;
  border: 4px solid #f3f3f3;
  border-top: 4px solid #ff6600;
  border-radius: 50%;
  width: 28px;
  height: 28px;
  animation: spin 1s linear infinite;
  margin: 12px auto;
}

@keyframes spin {
  0% {
    transform: rotate(0);
  }

  100% {
    transform: rotate(360deg);
  }
}

.sun_blogs .rt-grid-item {
  margin-bottom: 100px;
}


.prt_blogs .sun_blogs .entry-title {
  width: 35%;
  margin: 0px !important;
}

.sun_blogs.ab_blogs .entry-title,
.sun_blogs.ors_brnd .entry-title {
  width: 27%;
}

.sun_blogs.ors_brnd .rt-detail {
  bottom: 25px;
  left: 60px;
  right: 60px;
}

.sun_blogs.ab_blogs .rt-detail {
  bottom: 30px;
  left: 60px;
  right: 60px;
}

input[type="email"],
.entry-meta,
.entry-content p {
  font-family: "DM Sans", Sans-serif !important;
}

.link_styling a {
  text-decoration: none !important;
}

/* ---------------------- Testimonial Slider Start ---------------------- */

.testimonial {
  position: relative;
  padding-bottom: 70px;
}

/* ==================== Arrows ==================== */

.testimonial .slick-prev,
.testimonial .slick-next {
  background: #808184;
  display: flex !important;
  justify-content: center;
  align-items: center;
  z-index: 10;
  transition: all 0.3s ease;
}

.testimonial .slick-prev:hover,
.testimonial .slick-next:hover {
  background: #5f6062;
}

.testimonial .slick-prev {
  left: -60px;
}

.testimonial .slick-next {
  right: -60px;
}

/* Hide default Slick arrow icons */
.testimonial .slick-prev:before,
.testimonial .slick-next:before {
  font-size: 20px;
  color: #fff;
  opacity: 1;
}

/* ==================== Dots ==================== */

.testimonial .slick-dots {
  position: relative;
  bottom: 35px;
  display: flex !important;
  justify-content: center;
  align-items: center;
  gap: 12px;
  list-style: none;
  padding: 0;
  margin: 0;
}

.testimonial .slick-dots li {
  width: 10px;
  height: 10px;
  margin: 0;
}

.testimonial .slick-dots li button {
  width: 10px;
  height: 10px;
  padding: 0;
  border: none;
  background: transparent;
  font-size: 0;
  /* Hide numbers */
  line-height: 0;
  cursor: pointer;
}

.testimonial .slick-dots li button:before {
  content: "";
  width: 10px;
  height: 10px;
  border-radius: 50%;
  display: block;
  background: rgba(128, 129, 132, 0.25);
  transition: all 0.3s ease;
  opacity: 1;
}

.testimonial .slick-dots li.slick-active button:before {
  background: #808184;
  transform: scale(1.25);
}

/* ==================== Slide Spacing ==================== */

.testimonial .slick-slide {
  padding: 0 15px;
  box-sizing: border-box;
}

.testimonial .slick-list {
  margin: 0 -15px;
}

/* ---------------------- Testimonial Slider End ---------------------- */

/* ----------------------30-07-2026---------------------- */


.hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  background:
    radial-gradient(1100px 700px at 78% -8%,
      rgba(234, 199, 126, 0.35),
      transparent 60%),
    radial-gradient(900px 600px at 10% 110%,
      rgba(94, 110, 73, 0.5),
      transparent 60%),
    linear-gradient(160deg, #16311f 0%, #0f2216 60%, #0b1a10 100%);
  overflow: hidden;
  padding-top: 120px;
}

.hero-particles {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.particle {
  position: absolute;
  border-radius: 50%;
  background: radial-gradient(circle,
      rgba(234, 199, 126, 0.9),
      rgba(234, 199, 126, 0));
  opacity: 0.55;
  animation: drift linear infinite;
}

@keyframes drift {
  0% {
    transform: translateY(0) translateX(0);
  }

  100% {
    transform: translateY(-120vh) translateX(30px);
  }
}

/* ===== Businesses ===== */
.biz-panel {
  position: relative;
  border-radius: var(--r-xl);
  overflow: hidden;
  padding: min(6vw, 64px);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  align-items: center;
  min-height: 520px;
  margin-bottom: 26px;
  border-radius: 20px;

}

.biz-panel.solar {
  background: linear-gradient(135deg,
      #0e2a3a 0%,
      #14425a 45%,
      #e2a33d 130%);
}

.biz-panel.bio {
  background: linear-gradient(135deg,
      #1b3a28 0%,
      #3e5c33 55%,
      #a9bb6e 140%);
}

.biz-panel.consumer {
  background: linear-gradient(135deg,
      #7a3a1e 0%,
      #c9622c 55%,
      #efc581 140%);
  color: var(--forest-2);
}

.biz-panel::after {
  content: "";
  position: absolute;
  inset: 0;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/></filter><rect width='100%25' height='100%25' filter='url(%23n)' opacity='0.05'/></svg>");
  pointer-events: none;
}

.biz-visual {
  position: relative;
  height: 100%;
  min-height: 280px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.orb {
  border-radius: 50%;
  position: relative;
}

.biz-panel.solar .orb {
  width: 230px;
  height: 230px;
  background: radial-gradient(circle at 35% 30%,
      #ffe9ae,
      #e2a33d 55%,
      #14425a 100%);
  box-shadow: 0 0 90px rgba(255, 224, 150, 0.35);
}

.biz-panel.bio .orb {
  width: 230px;
  height: 230px;
  background: radial-gradient(circle at 35% 30%,
      #e8f0c8,
      #a9bb6e 55%,
      #1b3a28 100%);
  box-shadow: 0 0 90px rgba(190, 210, 140, 0.3);
}

.biz-panel.consumer .orb {
  width: 230px;
  height: 230px;
  background: radial-gradient(circle at 35% 30%,
      #fff3de,
      #efc581 55%,
      #c9622c 100%);
  box-shadow: 0 0 90px rgba(255, 220, 170, 0.35);
}

.orb-ring {
  position: absolute;
  inset: -24px;
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 50%;
  animation: spin 30s linear infinite;
}

.orb-ring.r2 {
  inset: -48px;
  border-color: rgba(255, 255, 255, 0.16);
  animation-duration: 46s;
  animation-direction: reverse;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

@media (max-width: 900px) {


  .biz-panel {
    grid-template-columns: 1fr;
  }

  .biz-visual {
    order: -1;
    min-height: 180px;
  }

  .orb {
    width: 150px;
    height: 150px;
  }
}

.icon_right ul li {
  display: flex;
  direction: rtl;
}




/* footer a.hfe-menu-item {
  padding: unset !important;
} */

/* footer .hfe-menu-item::before {
  content: ">";
  display: inline-block;
  position: relative !important;
  margin-right: 5px;
  color: var(--color-white);
  background-color: transparent !important;
  font-size: 35px;
  font-weight: 700;
  line-height: 1;
  opacity: 1 !important;
  transform: scale(0.5) !important;
  transition: color 0.3s ease;
}

footer .current-menu-item>.hfe-menu-item::before,
footer .menu-item:hover>.hfe-menu-item::before {
  color: var(--color-primary);
  transform: scale(0.5) !important;
} */



.button_style1 a {
  display: inline-block !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  text-decoration: none !important;
  padding: 12px 30px !important;
  border: 2px solid #fff !important;
  background: transparent !important;
  color: #fff !important;
  text-transform: uppercase !important;
  letter-spacing: 1px !important;
  border-radius: 50px !important;
  text-shadow: 5px 5px 20px #000;
}

.button_style1 a div>div {
  font-weight: 500;
}

/*
.button_style1 a:hover{
    border: 2px solid var(--color-secondary) !important;
    background: var(--color-secondary) !important;
} */

.button_style1 a {
  position: relative;
  overflow: hidden;
}

.button_style1 a>div>div {
  position: relative;
  display: inline-block;
}

/* Arrow */
.button_style1 a>div>div::after {
  content: "➜";
  /* Bold arrow */
  position: absolute;
  top: 50%;
  right: -35px;
  /* Hidden outside initially */
  transform: translateY(-50%);
  font-size: 20px;
  font-weight: 500;
  line-height: 1;
  opacity: 0;
  transition: right .4s ease, opacity .4s ease;
}

/* Hover */
.button_style1 a:hover {
  border-color: var(--color-secondary) !important;
  background: var(--color-secondary) !important;
}

.button_style1 a:hover>div>div::after {
  right: -24px;
  /* Slides in */
  opacity: 1;
}




.button_style2 a {
  display: inline-block !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  text-decoration: none !important;
  padding: 12px 30px !important;
  border: 2px solid #000 !important;
  background: #fff !important;
  color: #000 !important;
  text-transform: uppercase !important;
  letter-spacing: 1px !important;
  border-radius: 50px !important;
}

.button_style2 a {
  position: relative;
  overflow: hidden;
}

.button_style2 a>span>span {
  position: relative;
  display: inline-block;
}

/* Arrow */
.button_style2 a>span>span::after {
  content: "➜";
  /* Bold arrow */
  position: absolute;
  top: 50%;
  right: -35px;
  /* Hidden outside initially */
  transform: translateY(-50%);
  font-size: 20px;
  font-weight: 500;
  line-height: 1;
  opacity: 0;
  transition: right .4s ease, opacity .4s ease;
}

/* Hover */
.button_style2 a:hover {
  color: #fff !important;
  border-color: var(--color-secondary) !important;
  background: var(--color-secondary) !important;
}

.button_style2 a:hover>span>span::after {
  right: -24px;
  /* Slides in */
  opacity: 1;
}





.button_style3 a {
  display: inline-block !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  text-decoration: none !important;
  padding: 12px 30px !important;
  border: 2px solid #000 !important;
  background: #fff !important;
  color: #000 !important;
  text-transform: uppercase !important;
  letter-spacing: 1px !important;
  border-radius: 50px !important;
}

.button_style3 a {
  position: relative;
  overflow: hidden;
}

.button_style3 a>span>span {
  position: relative;
  display: inline-block;
}

/* Arrow */
.button_style3 a>span>span::after {
  content: "➜";
  /* Bold arrow */
  position: absolute;
  top: 50%;
  right: -35px;
  /* Hidden outside initially */
  transform: translateY(-50%);
  font-size: 20px;
  font-weight: 500;
  line-height: 1;
  opacity: 0;
  transition: right .4s ease, opacity .4s ease;
}

/* Hover */
.button_style3 a:hover {
  color: #fff !important;
  border-color: var(--color-primary) !important;
  background: var(--color-primary) !important;
}

.button_style3 a:hover>span>span::after {
  right: -24px;
  /* Slides in */
  opacity: 1;
}




.counter_style .elementor-counter-title {
  text-align: center;
}



.card_slider {
  position: relative;
}

.card_slider .slick-arrow {
  position: absolute;
  top: -15px;
  width: 36px;
  height: 36px;
  box-shadow: none !important;
  background: transparent;
  color: var(--color-secondary);
  display: flex !important;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 99;
  transition: all .3s ease;
  font-size: 14px;
}

.card_slider .slick-prev {
  right: 45px;
  left: auto;
}

.card_slider .slick-next {
  right: 0;
  left: auto;
}

.card_slider .slick-arrow:hover {

  color: var(--color-secondary);

}

/* Hide default Slick icons */
.card_slider .slick-prev:before,
.card_slider .slick-next:before {
  display: none;
}

.card_slider .slick-track {
  display: flex !important;
}

.card_slider .slick-slide {
  height: inherit !important;
}

.card_slider .slick-slide>div {
  height: 100%;
}

.card_slider .card {
  height: 100%;
  display: flex;
  flex-direction: column;
}

/* .sbc>div div:nth-child(odd) a {
  text-decoration: underline solid var(--color-primary) 4px !important;
}

.sbc>div div:nth-child(even) a {
  text-decoration: underline solid var(--color-secondary) 4px !important;
} */


.footer_bg {
  background: linear-gradient(180deg,
      #FBFCF8 0%,
      #F7FBF3 40%,
      #EEF6E8 100%);
}



/* Form Layout */
.newsletter_style form {
  display: flex;
  align-items: stretch;
  width: 100%;
}

/* Remove Forminator spacing */
.newsletter_style .forminator-row,
.newsletter_style .forminator-row-last,
.newsletter_style .forminator-field {
  margin: 0 !important;
  padding: 0 !important;
}

/* Email Field */
.newsletter_style .forminator-row {
  flex: 1;
}

/* Button Container */
.newsletter_style .forminator-row-last {
  flex: 0 0 55px;
  width: 55px;
}

/* Email Input */
.newsletter_style input[type="email"] {
  width: 100% !important;
  height: 38px !important;
  border: 1px solid #d9d9d9 !important;
  border-right: none !important;
  border-radius: 10px 0 0 10px !important;
  padding: 0 20px !important;
  font-size: 16px !important;
  color: #333;
  box-shadow: none !important;
  outline: none !important;
}

/* Placeholder */
.newsletter_style input[type="email"]::placeholder {
  color: #8b8b8b;
}

/* Submit Button */
.newsletter_style .forminator-button-submit {
  width: 55px !important;
  min-width: 55px !important;
  height: 38px !important;
  padding: 0 !important;
  margin: 0 !important;
  border: none !important;
  border-radius: 0 10px 10px 0 !important;
  background: var(--color-secondary) !important;
  color: transparent !important;
  font-size: 0 !important;
  position: relative;
  box-shadow: none !important;
}

/* Arrow Icon */
.newsletter_style .forminator-button-submit::before {
  content: "➜";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #fff;
  font-size: 28px;
  line-height: 1;
}

/* Hover */
.newsletter_style .forminator-button-submit:hover {
  background: #38753d !important;
}

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

  .single-post #content{
    padding-top: 45px;
  }

  .newsletter_style input[type="email"] {
    height: 50px;
    font-size: 16px !important;
  }

  .newsletter_style .forminator-row-last,
  .newsletter_style .forminator-button-submit {
    width: 50px !important;
    min-width: 50px !important;
    flex: 0 0 50px;
    height: 36px !important;
  }

  .newsletter_style .forminator-button-submit::before {
    font-size: 24px;
  }
}


.roadmap-section {

  position: relative;

  overflow: hidden;
  padding-bottom: 60px;

  /* padding:90px 0 80px; */

  background: transparent;

  /* background-image:url("../images/road-bg.webp");
    background-size:cover;
    background-position:center; */

}

/* .roadmap-section::before{
 
    content:"";
 
    position:absolute;
 
    inset:0;
 
    background:linear-gradient(
        rgba(255,255,255,.78),
        rgba(255,255,255,.78)
    );
 
}
  */
.roadmap-section .container {

  position: relative;

  z-index: 2;

  max-width: 1400px;

  margin: auto;

  padding: 0 40px;

}

/*====================================================
 
HEADING
 
====================================================*/

/* .roadmap-heading{
 
    text-align:center;
 
    margin-bottom:70px;
 
} */

.roadmap-heading h2 {

  font-size: 52px;

  font-weight: 700;

  line-height: 1.15;

  color: #2D2D2D;

}

.roadmap-heading span {

  color: var(--color-secondary);

}

.roadmap-heading p {

  margin-top: 18px;

  font-size: 18px;

  color: #666;

}

/*====================================================
 
ROAD WRAPPER
 
====================================================*/

.road-wrapper {

  position: relative;

  height: 470px;

}

/*====================================================
 
SVG ROAD
 
====================================================*/

.road-svg {

  position: absolute;

  left: 0;

  width: 100%;

  top: 100px;

  height: 220px;

}

.road-svg path {

  stroke: #D8D8D8;

  stroke-width: 7;

  fill: none;

  stroke-linecap: round;

}

/*====================================================
 
TIMELINE
 
====================================================*/

.timeline {

  display: flex;

  justify-content: space-between;

  align-items: flex-start;

  position: relative;

  z-index: 5;

}

/*====================================================
 
ITEM
 
====================================================*/

.timeline-item {

  width: 220px;

  text-align: center;

  position: relative;

}

/* different heights */

.timeline-item:nth-child(1) {

  margin-top: 150px;

}

.timeline-item:nth-child(2) {

  margin-top: 105px;

}

.timeline-item:nth-child(3) {

  margin-top: 70px;

}

.timeline-item:nth-child(4) {

  margin-top: 85px;

}

.timeline-item:nth-child(5) {

  margin-top: 20px;

}

/*====================================================
 
ICON
 
====================================================*/

.icon {

  width: 82px;

  height: 82px;

  border-radius: 50%;

  background: #fff;

  margin: auto;

  display: flex;

  align-items: center;

  justify-content: center;

  font-size: 34px;

  box-shadow:
    0 15px 40px rgba(0, 0, 0, .08);

  transition: .35s;

}

.green .icon {

  border: 3px solid var(--color-secondary);

  color: var(--color-secondary);

}

.orange .icon {

  border: 3px solid #F36C25;

  color: #F36C25;

}

/*====================================================
 
PIN
 
====================================================*/

.timeline-item::after {

  content: "";

  width: 16px;

  height: 16px;

  border-radius: 50%;

  position: absolute;

  left: 50%;

  transform: translateX(-50%);

  top: 88px;

}

.green::after {

  background: var(--color-secondary);

}

.orange::after {

  background: #F36C25;

}

/*====================================================
 
YEAR
 
====================================================*/

.year {

  display: block;

  margin-top: 28px;

  font-size: 22px;

  font-weight: 700;

}

.green .year {

  color: var(--color-secondary);

}

.orange .year {

  color: #F36C25;

}

/*====================================================
 
TITLE
 
====================================================*/

.timeline-item h4 {

  margin-top: 12px;

  font-size: 24px;

  font-weight: 700;

  line-height: 1.35;

  color: #2D2D2D;

}

/*====================================================
 
TEXT
 
====================================================*/

.timeline-item p {

  margin-top: 14px;

  color: #666;

  line-height: 1.75;

  font-size: 16px;

}

/*====================================================
 
BOTTOM BUTTON
 
====================================================*/

.road-bottom {
display: none;
  margin-top: 50px;

  text-align: center;

}

.road-bottom a {

  cursor: auto;
  display: inline-flex;

  align-items: center;

  gap: 14px;

  background: #fff;

  padding: 18px 38px;

  border-radius: 60px;

  text-decoration: none !important;

  color: var(--color-secondary);

  font-size: 18px;

  font-weight: 600;

  box-shadow:

    0 12px 35px rgba(0, 0, 0, .08);

  transition: .35s;

}

/*====================================================
 
HOVER
 
====================================================*/

.timeline-item:hover .icon {

  transform: translateY(-8px);

  box-shadow:

    0 25px 45px rgba(0, 0, 0, .14);

}

.timeline-item:hover h4 {

  color: var(--color-secondary);

}

.orange:hover h4 {

  color: #F36C25;

}

.road-bottom a:hover {

  transform: translateY(-4px);

  box-shadow:

    0 22px 45px rgba(0, 0, 0, .14);

}


.icon_styling .elementor-icon {
  background: radial-gradient(circle,
      var(--color-white) 0%,
      #eef7ec 45%,
      #d6ecd7 75%,
      var(--color-secondary) 100%);

  padding: 10px;
  border-radius: 50%;
  border: 2px solid var(--color-white) !important;
}


.icon_styling1 .elementor-icon {
  background: radial-gradient(circle,
      var(--color-white) 0%,
      #fef2ea 45%,
      #fbd1ba 75%,
      var(--color-primary) 100%);
  padding: 10px;
  border-radius: 50%;
  border: 2px solid var(--color-white) !important;
}

.icon_styling3 .elementor-icon {
  background-color: var(--color-secondary);
  padding: 10px;
  border-radius: 50%;
  border: 2px solid var(--color-white) !important;
}


.icon_styling4 .elementor-icon {
  background-color: var(--color-white);
  padding: 10px;
  border-radius: 50%;
  border: 2px solid var(--color-secondary) !important;
}


.testimonial_new {
  position: relative;
}

.testimonial_new .slick-prev,
.testimonial_new .slick-next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 40px;
  height: 40px;
  padding: 0px !important;
  border-radius: 50%;
  background: #fff;
  border: none;
  display: flex !important;
  align-items: center;
  justify-content: center;
  z-index: 999;
}

.testimonial_new .slick-prev {
  left: -30px !important;
}

.testimonial_new .slick-next {
  right: -30px !important;
}

.testimonial_new .slick-prev:before,
.testimonial_new .slick-next:before {
  display: none;
}

.testimonial_new .slick-prev i,
.testimonial_new .slick-next i {
  color: var(--color-primary);
  font-size: 18px;
}



/* Forminator Submit Button */
.fmtr_button_style {
  display: inline-block !important;
  position: relative !important;
  overflow: hidden !important;

  font-size: 14px !important;
  font-weight: 500 !important;
  font-family: inherit !important;
  text-decoration: none !important;
  text-transform: uppercase !important;
  letter-spacing: 1px !important;

  padding: 12px 55px 12px 30px !important;

  border: 2px solid #000 !important;
  background: #fff !important;
  color: #000 !important;

  border-radius: 50px !important;
  cursor: pointer !important;

  transition: all 0.4s ease !important;
}


/* Arrow */
.fmtr_button_style::after {
  content: "➜";
  position: absolute;
  top: 50%;
  right: -35px;

  transform: translateY(-50%);

  font-size: 20px;
  font-weight: 500;
  line-height: 1;

  opacity: 0;

  transition:
    right 0.4s ease,
    opacity 0.4s ease;
}


/* Hover */
.fmtr_button_style:hover {
  color: #fff !important;
  border-color: var(--color-primary) !important;
  background: var(--color-primary) !important;
}


/* Arrow slides in */
.fmtr_button_style:hover::after {
  right: 20px;
  opacity: 1;
}

.phone_number .phone-error {
  display: block;
  font-size: 12px;
  background-color: #F9E4E8;
  color: #333333;
  padding: 2px 10px;
  margin: 5px 0 0;
}
.phone_number .forminator-error-message{
  display: none !important;
}


.blog_card .rt-holder .rt-detail .read-more a{
  display: inline-block !important;
  position: relative !important;
  overflow: hidden !important;

  font-size: 14px !important;
  font-weight: 500 !important;
  font-family: inherit !important;
  text-decoration: none !important;
  text-transform: uppercase !important;
  letter-spacing: 1px !important;

  padding: 5px 50px 5px 15px !important;

  border: 2px solid #000 !important;
  background: #fff !important;
  color: #000 !important;

  border-radius: 50px !important;
  cursor: pointer !important;

  transition: all 0.4s ease !important;
}
/* Arrow */
.blog_card .rt-holder .rt-detail .read-more a::after {
  content: "➜";
  position: absolute;
  top: 50%;
  right: -35px;

  transform: translateY(-50%);

  font-size: 20px;
  font-weight: 500;
  line-height: 1;

  opacity: 0;

  transition:
    right 0.4s ease,
    opacity 0.4s ease;
}


/* Hover */
.blog_card .rt-holder .rt-detail .read-more a:hover {
  color: #fff !important;
  border-color: var(--color-primary) !important;
  background: var(--color-primary) !important;
}


/* Arrow slides in */
.blog_card .rt-holder .rt-detail .read-more a::after {
  right: 20px;
  opacity: 1;
}


.sbc .ha-ia-content-description{
  text-align: center;
}



/* =========================
   Common Button Style
========================= */

.sbc > div div:nth-child(odd) a,
.sbc > div div:nth-child(even) a {
    display: inline-block !important;
    position: relative;
    overflow: hidden;
    font-size: 14px !important;
    font-weight: 500 !important;
    text-decoration: none !important;
    padding: 12px 30px !important;
    background: transparent !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    border-radius: 50px !important;
}

/* Keep text above arrow */
.sbc > div div:nth-child(odd) a > span > span,
.sbc > div div:nth-child(even) a > span > span {
    position: relative;
    display: inline-block;
}

/* =========================
   ODD — Orange
========================= */


.sbc > div div:nth-child(odd) a {
    color: var(--color-white) !important;
    border: 2px solid var(--color-white) !important;
}

.sbc > div div:nth-child(odd) a:hover {
    color: #fff !important;
    background: var(--color-secondary) !important;
    border-color: var(--color-secondary) !important;
}

/* =========================
   EVEN — Green
========================= */

.sbc > div div:nth-child(even) a {
    color: var(--color-white) !important;
    border: 2px solid var(--color-white) !important;
}

.sbc > div div:nth-child(even) a:hover {
    color: #fff !important;
    background: var(--color-secondary) !important;
    border-color: var(--color-secondary) !important;
}

/* =========================
   Arrow
========================= */

.sbc > div div:nth-child(odd) a > span > span::after,
.sbc > div div:nth-child(even) a > span > span::after {
    content: "➜";
    position: absolute;
    top: 50%;
    right: -35px;
    transform: translateY(-50%);
    font-size: 20px;
    font-weight: 500;
    line-height: 1;
    opacity: 0;
    transition: right 0.4s ease, opacity 0.4s ease;
}

/* =========================
   Arrow Hover
========================= */

.sbc > div div:nth-child(odd) a:hover > span > span::after,
.sbc > div div:nth-child(even) a:hover > span > span::after {
    right: -24px;
    opacity: 1;
}


 .icon_container1 .icon_style1 {
    transition: margin-top 0.8s ease;
}

.icon_container1:hover .icon_style1 {
    margin-top: -80px;
}

.bussiness_btn {
 
}

.bussiness_btn a{
text-decoration: none !important;
border-radius: 80px 0px 80px 0px;
padding: 15px 100px 15px 100px;
margin: 10px 10px 10px 10px;
background-color: #d1d1d1 !important;
color: var(--color-black) !important;

}
.bussiness_btn a span{
  font-weight: 400 !important;
}
.bussiness_btn a:hover{
  background-color: var(--color-primary) !important;
  color: var(--color-white) !important;
}


#sunbridgeSolar, #sunbridgeBioenergy, #sunbridgeConsumers, #frooney, #lifejoy, #kidzola, #alphakid, #unirice  {
  scroll-margin-top: 92px;
}

.media_blogs .rt-holder{
  border-radius: 20px;
}




.bussiness_btn.active_business .eael-creative-button {
    background-color: var(--color-primary) !important;
    color: #fff !important;
}


.postid-16638 .ast-container{
  padding-top: 70px !important;
}

 .postid-16638 .hfe-nav-menu .menu-item a{
color: var(--color-black) !important;
} 




/* =========================================
   COMPANY TIMELINE
========================================= */

.company-timeline {
    width: 100%;
    max-width: 1100px;
    margin: 0 auto;
    padding: 60px 20px;
}


/* =========================================
   TIMELINE ROW
========================================= */

.timeline-row {
    display: grid;
    grid-template-columns: 1fr 60px 1fr;
    position: relative;
    min-height: 230px;
}


/* =========================================
   CENTER TIMELINE
========================================= */

.timeline-center {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 5;
}


/* =========================================
   VERTICAL TIMELINE LINE
========================================= */

.timeline-center::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    width: 1px;
    background: #d7ddd9;
    transform: translateX(-50%);
}


/* Small line above first dot */

.timeline-row:first-child .timeline-center::before {
    top: -25px;
}


/* Small line below last dot */

.timeline-row:last-child .timeline-center::before {
    bottom: -25px;
}


/* =========================================
   GREEN DOT
========================================= */

.timeline-dot {
    width: 13px;
    height: 13px;
    background: #198754;
    border: 3px solid var(--color-white);
    border-radius: 50%;
    position: relative;
    z-index: 10;
    box-shadow: 0 0 0 1px #198754;
}


/* =========================================
   HORIZONTAL CONNECTOR LINE
========================================= */

.timeline-row::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 7%;
    right: 7%;
    height: 1px;
    background: #d7ddd9;
    transform: translateY(-50%);
    z-index: 1;
}


/* =========================================
   TIMELINE SIDES
========================================= */

.timeline-side {
    position: relative;
    z-index: 3;
    display: flex;
    align-items: center;
}


/* Left side */

.timeline-left {
    justify-content: flex-start;
}


/* Right side */

.timeline-right {
    justify-content: flex-end;
}


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

.timeline-image {
    width: 82%;
    position: relative;
    z-index: 4;
}


.timeline-image img {
    width: 100%;
    height: 275px;
    object-fit: cover;
    display: block;
    border-radius: 0 45px 0 45px;
}


/* =========================================
   ALTERNATING IMAGE CORNERS
========================================= */

.timeline-row:nth-child(even) .timeline-image img {
    border-radius: 45px 0 45px 0;
}


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

.timeline-content {
    width: 82%;
    position: relative;
    z-index: 4;
    background: var(--color-white);
    padding: 20px 0;
}


/* Heading */

.timeline-content h3 {
    margin: 0 0 14px;
    font-size: 20px;
    font-weight: 700;
    line-height: 1.3;
    color: #111111;
}


/* Year */

.timeline-content h3 span {
    color: var(--color-primary);
}


/* Paragraph */

.timeline-content p {
    margin: 0;
    font-size: 16px;
    line-height: 1.7;
    color: var(--color-black);
}


/* =========================================
   TABLET
========================================= */

@media (max-width: 991px) {

    .company-timeline {
        padding: 45px 15px;
    }


    .timeline-row {
        grid-template-columns: 1fr 45px 1fr;
        min-height: 200px;
    }


    .timeline-image,
    .timeline-content {
        width: 90%;
    }


    .timeline-image img {
        height: 180px;
    }


    .timeline-content h3 {
        font-size: 17px;
    }


    .timeline-content p {
        font-size: 13px;
        line-height: 1.6;
    }


    .timeline-row::before {
        left: 4%;
        right: 4%;
    }
}


/* =========================================
   MOBILE
========================================= */

@media (max-width: 767px) {

    .company-timeline {
        width: 100%;
        padding: 30px 15px;
    }


    /* -----------------------------------------
       ROW
    ----------------------------------------- */

    .timeline-row {
        display: grid;
        grid-template-columns: 25px 1fr;
        position: relative;
        min-height: auto;
        padding-bottom: 50px;
    }


    /* -----------------------------------------
       REMOVE DESKTOP HORIZONTAL LINE
    ----------------------------------------- */

    .timeline-row::before {
        display: none;
    }


    /* -----------------------------------------
       TIMELINE COLUMN
    ----------------------------------------- */

    .timeline-center {
        grid-column: 1;
        grid-row: 1;
        align-items: flex-start;
        justify-content: center;
        width: 25px;
    }


    /* -----------------------------------------
       MOBILE VERTICAL LINE
    ----------------------------------------- */

    .timeline-center::before {
        top: 0;
        bottom: -50px;
        left: 50%;
        width: 1px;
    }


    /* First small edge */

    .timeline-row:first-child .timeline-center::before {
        top: -20px;
    }


    /* Last small edge */

    .timeline-row:last-child .timeline-center::before {
        bottom: -20px;
    }


    /* -----------------------------------------
       DOT
    ----------------------------------------- */

    .timeline-dot {
        width: 12px;
        height: 12px;
        min-width: 12px;
        margin-top: 8px;
        border-width: 2px;
    }


    /* -----------------------------------------
       CONTENT AREA
    ----------------------------------------- */

    .timeline-left,
    .timeline-right {
        grid-column: 2;
        grid-row: 1;
        width: 100%;
        display: flex;
        justify-content: flex-start;
        align-items: flex-start;
    }


    /* -----------------------------------------
       IMAGE
    ----------------------------------------- */

    .timeline-image {
        width: 100%;
        margin-bottom: 15px;
    }


    .timeline-image img {
        width: 100%;
        height: 210px;
        border-radius: 0 35px 0 35px !important;
    }


    /* -----------------------------------------
       CONTENT
    ----------------------------------------- */

    .timeline-content {
        width: 100%;
        background: transparent;
        padding: 5px 0 0;
    }


    .timeline-content h3 {
        font-size: 18px;
        line-height: 1.35;
        margin: 0 0 10px;
    }


    .timeline-content p {
        font-size: 13px;
        line-height: 1.6;
        margin: 0;
    }


    /* -----------------------------------------
       MOBILE ORDER
       
       Image first, then content
    ----------------------------------------- */

    .timeline-row:nth-child(odd) {
        display: grid;
    }


    .timeline-row:nth-child(even) {
        display: grid;
    }


.sbc > div div:nth-child(odd) a,
.sbc > div div:nth-child(even) a {
    font-size: 13px !important;
    font-weight: 500 !important;
    padding: 8px 20px !important;
    letter-spacing: 1px !important;
    border-radius: 50px !important;
}

.sbc .ha-ia-content-title{
  font-size: 18px !important;
}

.sbc .ha-ia-content-description{
  font-size: 13px !important;
}

}