.hide{
 Display: none;
}
/* font */
h2.h2{
 font-Size: 38px;
}


h5.pre-headingRed{
  color: #F62D21 !important;
  border: 1px solid #F62D21;
  border-radius: 25px;
  background-color: rgba(246, 45, 232, .15);
  font-size: 12px !important;
}

h5.pre-heading.pre-headingBlue{
  color: #385CE8 !important;
  border: 1px solid #385CE8;
  border-radius: 25px;
  background-color: rgb(56 92 232 / 15%);
  font-size: 12px !important;
}

h5.pre-heading.pre-headingGrey{
  color: #F62D21 !important;
  border: 1px solid #cccccc;
  border-radius: 25px;
  background-color: rgba(204, 204, 204, .15);
  font-size: 12px !important;
}


/* text-color */
.textGradent{
  background: linear-gradient(90deg,#888888,#ffffff,#444444);
  -webkit-text-fill-color: transparent; 
  background-clip: text;
}

.dark-text{
    color: #1a1a1a !important;
}

.light-text{
    color: #fafafa !important;
}
.gray-text{
color: rgba(205,205,205, 0.6) !important;
}

.row-reverse {
    flex-direction: row-reverse !important;
}

.content-text{
  font-size: 18px;
}

.content-list-quote-items{
  font-size: 16px;
}

/* btn options */
a.dark-solid-btn{
  background: #1a1a1a;
  color: #fafafa !important;
  border: 1px solid #1a1a1a;
  margin-top: 10px !important;

}
a.dark-outline-btn{
  background: unset;
  color: #1a1a1a !important;
  border: 1px solid #1a1a1a;
      margin-top: 10px !important;

}
a.light-outline-btn{
  background: unset;
  color: #fafafa !important;
  border: 1px solid #fafafa;
      margin-top: 10px !important;

}

a.light-solid-btn{
  background: #fafafa;
  color: #1a1a1a !important;
  border: 1px solid #fafafa;
      margin-top: 10px !important;

}

/* btn hover,active,focuse,visited */

a.dark-solid-btn:hover,
a.dark-solid-btn:active,
a.dark-solid-btn:focuse,
a.dark-solid-btn:visited,
a.dark-outline-btn:active,
a.dark-outline-btn:hover,
a.dark-outline-btn:focuse,
a.dark-outline-btn:visited{
  border: 3px solid #fafafa !important;
}

a.light-outline-btn:hover,
a.light-outline-btn:focuse,
a.light-outline-btn:active,
a.light-outline-btn:visited,
a.light-solid-btn:hover,
a.light-solid-btn:active,
a.light-solid-btn:focuse,
a.light-solid-btn:visited{
  border: 3px solid #1a1a1a !important;
}


/* icon bg */
.dark-icon-bg{background-color: #1a1a1a;}
.light-icon-bg{background-color: #fafafa;}
.gray-icon-bg{background-color: #838383}

/* section BG Colours */
.dark-dark-section-bg{background-color: #121212;}
.dark-section-bg{background-color: #1a1a1a;}
.light-section-bg{background-color: #fafafa;}
.gray-section-bg{background-color: #838383}
.no-section-bg{background-color: unset}

/*  og code*/

.image-mobile{
  display:none;
}

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

.list-item{
background-image: url(https://7791772.fs1.hubspotusercontent-na1.net/hubfs/7791772/Icons/2023-Icons/Red%20Icons/red-check.svg) !important;
}


/* Ensure page elements don't cause horizontal layout breaks/scrolling */
.section {
  overflow-x: hidden;
}

//* Ensure page elements don't cause horizontal layout breaks/scrolling */
.section {
  overflow-x: hidden;
}

/* 1. EXIT STATE (Slower, softer, and smoother when sliding out) */
.reveal {
  opacity: 0;
  /* A longer, gentler ease-in-out curve for a subtle fade-out */
  transition: opacity 1.6s ease-in-out, 
              transform 1.6s ease-in-out;
  will-change: transform, opacity;
}

/* Starting/Ending positions (250px out of frame) */
.reveal.slide-left {
  transform: translateX(-250px);
}

.reveal.slide-right {
  transform: translateX(250px);
}

/* 2. ENTRANCE STATE (Snappy and dramatic when sliding in) */
.reveal.active {
  opacity: 1;
  transform: translateX(0);
  /* A punchy cubic-bezier curve that starts fast and settles gracefully */
  transition: opacity 1.1s cubic-bezier(0.16, 1, 0.3, 1), 
              transform 1.1s cubic-bezier(0.16, 1, 0.3, 1);
}
/* .section {
  overflow-x: hidden;
} */

/* @media (max-width: 768px) {
  .reveal.slide-right {
    transform: translateX(60px);
  }
  .reveal.slide-left {
    transform: translateX(-60px);
  }
} */

/* video beem  */


.beam{
    background: radial-gradient(at 50% -50%, #f62d21, transparent, transparent) padding-box;
    bottom: -45px;
    height: 80px;
    left: 0;
    position: absolute;
    right: 0;
    z-index: 0;
    width: 100%;
    margin: 0 auto;
}

.show-beam{
display: block;
}
.hide-beam{ display: none}


@media (max-width: 1080px) {
  
  .text-col  {
    order: 1;
    width: 100% !important;
  }
  .video-col {
    order: 2;
    width: 100%;
    
  }
}
@media screen and (max-width: 821px) {
  .row-2.row-reverse.column-container {
    display: flex !important;
    flex-direction: column !important;
  }
}

@media (max-width: 500px) {
.image-mobile{
  display:block;
}
  .has-image-mobile{
    display:none;
  }
}