/*
Theme Name: Hello Boost
Description: Boost website developed by MAMBA MARKETING.
Author: Yeshwin Anil & Dijo Matthew
Author URI: https://www.mambamarketing.co.uk/
Template: hello-elementor
Version: 1.0.1
*/
@import url('https://fonts.googleapis.com/css2?family=Special+Gothic+Expanded+One&family=Syne:wght@400..800&display=swap');

body{
    background-color: black !important;
    font-family: 'Syne' !important;
}

.bounding-hero-img{
    width: 80% !important; /* Adjust width as needed */
}

h1, h2, h3, h4, h5, h6, p{
    font-family: 'Syne' !important;
    /* font-family: "Special Gothic Expanded One", sans-serif !important; */
}

/* gradient titles */
.gray-gradient-title{
    background: linear-gradient(90deg, #FFF 0%, #999 100%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-family: "Syne";
}

/* pill */
@keyframes breathing {
    0% { transform: scale(1); }
    50% { transform: scale(1.05); }
    100% { transform: scale(1); }
}

/* for getting a fixed padding for centered widgets */
.bounding-box{
    width: 85% !important; /* Adjust width as needed */
}

.pill {
    display: flex;
    opacity: 80%;
    font-family: "Syne" !important;
    width: max-content !important;
    padding: .2em 2em !important;
    justify-content: center;
    align-items: center;
    border-radius: .5em !important;
    background: linear-gradient(90deg, rgba(245, 245, 246, 0.10) 0%, rgba(148, 150, 156, 0.10) 100%);
    animation: breathing 10s infinite ease-in-out;
}


/* Partners Carousal */
.partners-carousal .swiper-wrapper{
    -webkit-transition-timing-function: linear !important;
    transition-timing-function: linear !important; 
}
  
.partners-carousal .swiper-slide-image{
      width: 50% !important;
}

.footer-bg {
    background: linear-gradient(150deg, black 50%, #161B26 50%);
    width: 100%;
}

/* platform card */
.platform-card {
    width: 8em;
    height: 12em;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-around;
    background: linear-gradient(180deg, #161B26 0%, #000 100%);
    border-radius: 20px;
    border: 0.5px solid #5C5C5C;
    padding: 1em;
    transition: border 0.3s ease;
}

.platform-card:hover {
    border-color: #cccccc;
}

.icon-wrapper {
    position: relative;
    width: 100px;
    height: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.rotating-border {
    position: absolute;
    top: 0;
    left: 0;
    animation: rotate 20s linear infinite;
    transform-origin: center center;
}

.platform-card:hover .rotating-border circle {
    stroke: #ffdf38; 
}

.platform-card:hover .rotating-border{
    animation: rotate 6s linear infinite;
}

.icon {
    width: 40px;
    height: 40px;
    position: relative;
    z-index: 2;
}

.platform-name {
    font-size: 1em;
    color: white;
    font-weight: 500;
    font-family: "Syne";
}

/* Animation for spin */
@keyframes rotate {
    0% {
    transform: rotate(0deg);
    }
    50% {
        transform: rotate(180deg);
        }
    100% {
    transform: rotate(360deg);
    }
}
.product-help-card:hover h1 {
    color: #E6C932 !important;
}
.meet-team:hover h1 {
    color: #E6C932 !important;
}
.meet-team:hover h2 {
    color: #FFFFFF !important;
}

/* stats / visionary section */
.widget {
    display: flex !important;
    flex-direction: column;
    position: relative;
    background: radial-gradient(circle, rgba(230, 201, 50, 0.3) 0%, rgba(0, 0, 0, 0.1) 50%);
    padding: 40px;
    border-radius: 20px;

}

.widget .row{
    display: flex !important;
    justify-content: center;
}

.stat-box {
    display: flex !important;
    flex-direction: column;
    align-items: center;
    width: 10em;
    height: 10em;
    padding-left: 3%;
}

.left{
    border-top: 1px solid rgba(168, 168, 168, 0.40);
    border-right: 1px solid rgba(168, 168, 168, 0.40);
    border-bottom: 1px solid rgba(168, 168, 168, 0.40);
    justify-content: start;
}

.right{
    border-top: 1px solid rgba(168, 168, 168, 0.40);
    border-left: 1px solid rgba(168, 168, 168, 0.40);
    border-bottom: 1px solid rgba(168, 168, 168, 0.40);
    justify-content: end;
}

.center{
    border-top: 1px solid rgba(168, 168, 168, 0.40);
    border-left: 1px solid rgba(168, 168, 168, 0.40);
    border-right: 1px solid rgba(168, 168, 168, 0.40);
    justify-content: center;
}

.stat-number {
    transition: all 0.3s ease-in-out;
}

.stat-number-span{
    display: flex !important;
    font-size: 1em;
    text-align: left;
    font-weight: bold;
    color: #E6C932;
    width:100%;
}

.stat-text {
    font-size: .8em;
    text-align: left;
    color: white;
    width:100%;
}

/* testimonials section styles */
.testimonials-wrapper {
    display: flex !important;
    justify-content: center;
    align-items: center;
    width: 100%;
    height:110%;
    scrollbar-width: thin; /* Makes scrollbar subtle */
    padding-bottom: 2%;
}

.testimonial-container {
    display: flex !important;
    gap: 1%;
    width: max-content; /* Ensures smooth scrolling for cards */
    overflow-x: auto; /* Enables horizontal scrolling */
    align-items: center;
    padding-top: 2%;
    justify-content: center;
}

.testimonial {
    flex: 0 0 auto; /* Prevents shrinking */
    width: 28%; /* Adjusted width */
    padding: 2%;
    border-radius: 10px;
    border: 0.5px solid #2B2B2B;
    background: linear-gradient(180deg, #161B26 0%, #000 100%);
    text-align: center;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    transition: 0.3s ease-in-out;
}

.testimonial img {
    border: 0.5px solid #2B2B2B !important;
    max-width: 80px !important;
    margin-top: -15% !important;
    margin-bottom: 2% !important;
    border-radius: 100% !important;
    display: block !important;
    margin-left: auto;
    margin-right: auto;
}

.testimonial .quote {
    font-size: .7em;
    font-style: italic;
    color: whitesmoke;
}

.testimonial .name {
    color: #E6C932;
    font-family: Syne;
    font-size: .7em;
    font-weight: 700;
}

.testimonial span {
    color: #94969C;
    font-family: "Syne";
    font-size: .8em;
    font-weight: 700;
}

.testimonial-container::-webkit-scrollbar {
    height: 8px; /* Makes scrollbar smaller */
}

.testimonial-container::-webkit-scrollbar-thumb {
    background: #444;
    border-radius: 10px;
}

.testimonial:not(.active) {
    opacity: 0.5;
    transform: scale(0.9);
}

.dots-container {
    display: flex;
    justify-content: center;
    margin-top: 1%;
}

.dot {
    height: 10px;
    width: 10px;
    margin: 0 5px;
    background-color: #888;
    border-radius: 50%;
    display: inline-block;
    transition: background-color 0.3s;
}

.dot.active {
    background-color: #E6C932;
}

/* expanded info cards styles */
.card {
    background-color: grey;
    margin-bottom: 0.7rem;
    padding: .2em 1rem;
    border-radius: 10px;
    border-radius: 10px;
    border: 0.5px solid #2B2B2B;
    background: linear-gradient(90deg, #161B26 0%, #000 100%);
    cursor: pointer;
    font-size: .7em;
}
  
.longText {
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 1; /* number of lines to show */
    line-clamp: 1; 
    -webkit-box-orient: vertical;
    line-height: normal;
}

.longText.expanded {
    display: initial;
}

.read-more, .click-more{
    color: #E6C932;
    font-family: Syne;
    font-size: 1em;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
}

.click-more:hover{
    color: #E6C932 !important;
    font-family: Syne !important;
    font-size: 1em !important;
    font-style: normal !important;
    font-weight: 500 !important;
    line-height: normal !important;
}

/* info section image and rounded borders */

/* Container setup */
.outer-container {
    width: 100%;
    display: flex;
    justify-content: center;
    padding: 2rem 0;
    box-sizing: border-box;
}
  
/* Card styles */
.image-card {
    position: relative;
    width: 100%;
    max-width: 600px;
    border-radius: 20px;
    overflow: visible; /* Allow SVG to overflow */
    display: flex;
    justify-content: center;
}
  
/* Main image */
.home1-image-preview,  .home2-image-preview{
    width: 100%;
    display: block;
    border-radius: 20px;
    z-index: 3;
    position: relative;
}

.wp1-image-preview, .wp2-image-preview, .sms1-image-preview, .sms2-image-preview{
    width: 1000%;
    display: block;
    border-radius: 20px;
    z-index: 3;
    position: relative;
    /* background-color: #000; */
}
  
/* Rotating SVG, centered */
.rotating-border-img {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 110%;
    height: 110%;
    transform: translate(-50%, -50%);
    animation: rotate-img 20s linear infinite;
    z-index: 1;
    pointer-events: none;
}

/* Rotating SVG, centered */
.rotating-border-img-ph {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 80%;
    height: 80%;
    transform: translate(-50%, -50%);
    animation: rotate-img 20s linear infinite;
    z-index: 1;
    pointer-events: none;
}
  
/* Hover effect for animation speed and color */
.image-card:hover .rotating-border-img, .image-card:hover .rotating-border-img-ph {
    animation-duration: 6s;
}
.image-card:hover .rotating-border-img circle, .image-card:hover .rotating-border-img-ph circle {
    stroke: #ffdf38;
}
  
/* Rotation animation */
@keyframes rotate-img {
    0% { transform: translate(-50%, -50%) rotate(0deg); }
    100% { transform: translate(-50%, -50%) rotate(360deg); }
}
.headline {
    color: white;
    font-size: 2em !important;
    font-weight: bold !important;
    font-family: sans-serif;
    line-height: 1.3;
    display: inline-block;
    position: relative;
    text-align: center;
    font-family: 'Syne', sans-serif !important;
}
@media (max-width: 1024px) and (min-width: 768px) {
    .headline  {
        font-size: 1.6em !important;
    }
  }
  
  /* Mobile (width less than 768px) */
  @media (max-width: 767px) {
    .headline  {
        font-size: 1.2em !important;
    }
  }
  
.icon-wrap {
    position: relative;
    display: inline-block;
}
  
.icon-overlay {
    position: absolute;
    right: -75px; /* move slightly off the end of the word */
    bottom: -20px; /* adjust to float under or over last letter */
    pointer-events: none;
}
.arrow-image {
    width: 100px; /* Start size */
    height: auto;
    transform-origin: center; /* Ensure the scaling happens from the center */
    animation: enlargeShrink 2s ease-in-out infinite; /* Smooth animation */
  }
  @media (max-width: 1024px) and (min-width: 768px) {
    .arrow-image  {
        width: 80px;
    }
  }
  
  
  @keyframes enlargeShrink {
    0% {
      transform: scale(1); /* Original size */
      opacity: 1; /* Fully visible */
    }
    50% {
      transform: scale(1.2); /* Enlarged */
      opacity: 1; /* Fully visible */
    }
    100% {
      transform: scale(1); /* Back to original size */
      opacity: 1; /* Fully visible */
    }
}
.why-boost-cont {
    background: radial-gradient(circle at left center, rgba(230, 201, 50, 0.3) 0%, rgba(0, 0, 0, 0.1) 30%);
}
.hero-section-cont {
    background: radial-gradient(circle at top center, rgba(230, 201, 50, 0.3) 0%, rgba(0, 0, 0, 0.1) 40%);

}

/* benefit cards section */
.benefit-name {
    font-size: .6em;
    color: white;
    font-weight: 700;
    font-family: "Syne";
    text-align: center;
}

.benefit-card {
    /*width: 7em;*/
    /*height: 12em;*/
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-around;
    padding: 1em;
    transition: border 0.3s ease;
}

.benefit-card:hover {
    border-color: #cccccc;
}

.benefit-card:hover .rotating-border circle {
    stroke: #ffdf38; 
}

.benefit-card:hover .rotating-border{
    animation: rotate 6s linear infinite;
}

/* accordian faq */
/* Target the accordion container */
.e-n-accordion {
    /*max-width: 1200px;*/
    margin: 0 auto;
    display:grid !important;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
}

/* Create a grid layout for FAQ items */
.e-n-accordion-item {
    background: #111111;
    border-radius: 10px;
    overflow: hidden;
    border: 1px solid #222;
    margin-bottom: 1rem;
}

/* Style the summary (question) section */
.e-n-accordion-item-title {
    width: 100%;
    text-align: left;
    padding: 1em;
    background: black !important;
    border-radius: 10px !important;
    border: none;
    color: white !important;
    font-size: .8em;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* Rotate the arrow when open */
.e-n-accordion-item[open] .e-n-accordion-item-title::after {
    transform: rotate(180deg);
}

/* Style the expanded content */
.e-n-accordion-item > div {
    max-height: 0;
    overflow: hidden;
    background-color: #1a1a1a;
    transition: max-height 0.3s ease;
    padding: 0;
}

/* Expand content when open */
.e-n-accordion-item[open] > div {
    max-height: 500px; /* Adjust as needed */
    padding: 1rem;
}

.contact-section-cont {
    background: radial-gradient(circle at 70% 0%, rgba(230, 201, 50, 0.3) 0%, rgba(0, 0, 0, 0.1) 35%);
}

.icon-text {
    font-size: 24px; 
    font-weight: bold; 
    text-align: center;
    font-family: 'Syne', sans-serif !important;
}

.hero-img-cont {
    background-color: black !important; /* Black background */
    position: relative !important; /* Required for pseudo-elements */
    border-radius: 25px !important; /* Rounded corners */
    overflow: hidden !important; /* Ensure pseudo-elements stay within the container */
}
  
.hero-img-cont::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    border-width: 15px 15px 0px 15px !important; /* No bottom border */
    border-style: solid !important;
    border-radius: 25px !important; /* Ensure corners are rounded */
    border-image: linear-gradient(
      to bottom,
      #161B26, /* Top border color */
      #675A18 /* Gradient transition to left and right */
    ) 1 !important;
    pointer-events: none !important; /* Ensure the pseudo-element doesn't affect interactions */
    z-index: 2 !important; /* Layer it above the inner border */
    clip-path: inset(0 0 0 0 round 25px) !important;
}
  
.hero-img-cont::after {
    content: '' !important;
    position: absolute !important;
    top: 15px !important; /* Inner border offset from outer border */
    left: 15px !important;
    right: 15px !important;
    bottom: 0 !important; /* No bottom border */
    border-top: 1px solid white !important; /* White top border */
    border-left: 1px solid white !important; /* White left border */
    border-right: 1px solid white !important; /* White right border */
    border-radius: 10px !important; /* Match rounded corners exactly */
    pointer-events: none !important; /* Ensure the pseudo-element doesn't affect interactions */
    z-index: 1 !important; /* Place it below the gradient border */
}
.company-page-cont {
    background: radial-gradient(circle at 0% 25%, rgba(230, 201, 50, 0.3) 0%, rgba(0, 0, 0, 0.1) 25%);
}

.careers-page-cont {
    background: radial-gradient(circle at 0% 25%, rgba(230, 201, 50, 0.3) 0%, rgba(0, 0, 0, 0.1) 20%),
    radial-gradient(circle at 100% 85%, rgba(230, 201, 50, 0.3) 0%, rgba(0, 0, 0, 0.1) 20%);
}

.results-page-cont, .wp-page-cont, .sms-page-cont {
    background: radial-gradient(circle at 0% 1%, rgba(230, 201, 50, 0.3) 0%, rgba(0, 0, 0, 0.1) 10%),
    radial-gradient(circle at 0% 85%, rgba(230, 201, 50, 0.3) 0%, rgba(0, 0, 0, 0.1) 20%),
    radial-gradient(circle at 100% 25%, rgba(230, 201, 50, 0.3) 0%, rgba(0, 0, 0, 0.1) 20%);
}

.home-cont {
    background: radial-gradient(circle at 50% 23%, rgba(230, 201, 50, 0.3) 0%, rgba(0, 0, 0, 0.1) 6%) !important;
}

@media (max-width: 1024px) and (min-width: 768px) {
    .bounding-box {
      width: 95% !important;
    }
    .bounding-hero-img{
        width: 95% !important; /* Adjust width as needed */
    }
    .e-n-accordion {
        grid-template-columns: 1fr !important;
    }
}

/* Mobile (width less than 768px) */
@media only screen and (max-width: 768px) {

    .partners-carousal .swiper-slide-image{
        width: 90% !important;
    } 

    .testimonial-container{
        flex-direction: column !important;
    }

    .testimonial{
        margin-top: 20px !important;
        width:90% !important;
    }

    .platform-card{
        width:6em !important;
        height:10em !important;
    }

    .platform-name{
        font-size: 0.8em !important;
    }

    .platforms-container{
        display:grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        place-items: center !important;
    }

    .arrow-image  {
        width: 50px !important;
        margin-right: 35px !important;
        margin-bottom: 10px !important;
    }
    
    .bounding-box {
      width: 100% !important;
    }

    .bounding-hero-img{
        width: 95% !important; /* Adjust width as needed */
    }

    .rotating-border-img {
        position: absolute;
        top: 50%;
        left: 50%;
        width: 90% !important;
        height: 90% !important;
        transform: translate(-50%, -50%);
        animation: rotate-img 20s linear infinite;
        z-index: 1;
        pointer-events: none;
    }

    /* Rotating SVG, centered */
    .rotating-border-img-ph {
        position: absolute;
        top: 50%;
        left: 50%;
        width: 80% !important;
        height: 80% !important;
        transform: translate(-50%, -50%);
        animation: rotate-img 20s linear infinite;
        z-index: 1;
        pointer-events: none;
    }

    .results-page-cont, .wp-page-cont, .sms-page-cont {
        background: 
            radial-gradient(circle at 0% 1%, rgba(230, 201, 50, 0.3) 0%, rgba(0, 0, 0, 0.1) 5%), 
            radial-gradient(circle at 0% 85%, rgba(230, 201, 50, 0.3) 0%, rgba(0, 0, 0, 0.1) 5%), 
            radial-gradient(circle at 100% 25%, rgba(230, 201, 50, 0.3) 0%, rgba(0, 0, 0, 0.1) 5%) 
        !important;
    }

    .company-page-cont {
        background: radial-gradient(circle at 0% 1%, rgba(230, 201, 50, 0.3) 0%, rgba(0, 0, 0, 0.1) 5%) !important;
    }

    .e-n-accordion {
        grid-template-columns: 1fr !important;
    }
}