:root {
    --primary: #40748e;
    --secondary: #ff5964;
    --contentBg: #f1fbfe;
}

@import url("https://fonts.googleapis.com/css2?family=Roboto+Condensed:ital,wght@0,100..900;1,100..900&display=swap");

@font-face {
    font-family: "Galano Grotesque";
    src: url("/assets/fonts/GalanoGrotesqueMedium.woff2") format("woff2"),
        url("/assets/fonts/GalanoGrotesqueMedium.woff") format("woff");
    font-style: normal;
    font-weight: 500;
    font-display: swap;
}
.icon-container {
    width: 2rem; /* Fixed width */
    display: inline-flex;
    align-items: center; /* Aligns the icon vertically within the container */
    justify-content: center; /* Centers the icon horizontally */
  }



@font-face {
    font-family: "Galano Grotesque";
    src: url("/assets/fonts/GalanoGrotesqueBold.woff2") format("woff2"),
        url("/assets/fonts/GalanoGrotesqueBold.woff") format("woff");
    font-style: normal;
    font-weight: 700;
    font-display: swap;
}
h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: "Roboto Condensed", sans-serif !important;
    font-weight: bold;
}

body {
    font-family: "Galano Grotesque", sans-serif !important;
}

.logo2 {
    display: none;
}

.video-docker {
    background-image: url(images/hero-call.jpg); /* Background image */
    background-color: var(--primary); /* Initial background color */
    top: 40%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    animation: background-change 5s ease-in-out infinite alternate;
}

.video-docker::after {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: rgba(0, 0, 0, 0.7); /* Overlay for video content */
    z-index: 1;
}

.video-content {
    z-index: 2;
}

.call-to-action-button {
    position: relative;
    animation: download-button-animation 3s ease-in-out 8 alternate; /* Animation definition */
    display: inline-block;
    /* margin: 40px 0px;
  padding: 10px 20px;  */
    /* background-color: var(--secondary);  */
    color: white; /* Ensure clear text */
    border: none; /* Remove default border */
    cursor: pointer; /* Indicate clickable behavior */
    text-align: center; /* Center text for better visibility */
    border-radius: 5px; /* Add subtle rounding */
    font-weight: bold; /* Make text stand out */
    /* Optional: Add a subtle shadow for depth */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

@keyframes download-button-animation {
    0% {
        transform: scale(1); /* Start at normal size */
    }
    25% {
        transform: scale(1.1); /* Briefly enlarge for emphasis */
    }
    50% {
        transform: translateY(5px) scale(1); /* Slight bounce down */
    }
    75% {
        transform: translateY(-2px) scale(1); /* Slight bounce up */
    }
    100% {
        transform: scale(1); /* Return to normal size */
    }
}

@keyframes background-change {
    0% {
        background-image: url(images/hero-call.jpg); /* Start with image */
    }
    100% {
        /* background-image: none;
    background-color: var(--primary); */
        background-image: url(images/marketing.jpg);
    }
    /* 70% {
    background-image: none;
    background-color: var(--secondary);
  } */
}

header::after {
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    background-color: #060c0e;
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0.5;
    z-index: 0;
    transition: all 1s;
}

.nav-bg {
    background-color: white;
}
.nav-bg a {
    color: #333 !important;
}

.nav-bg .svg {
    color: #333;
}

.slider-img {
    max-width: 100%;
    height: 60px;
    object-fit: contain;

    transition: all 1s;
}
.slider-img:hover {
    filter: grayscale(100);
}
.swiper-slide {
    height: auto !important;
}

.toggle_dot {
    top: -0.25rem;
    transition: all 0.3s ease-in-out;
}

input:checked ~ .toggle_dot {
    transform: translateX(100%);
    background-color: white !important;
}

.bg-gradient {
    background-image: url(images/site-bg-3.png);
    background-color: #40748e;
}

.bg-gradient-base {
    background-color: #ff5964;
}

.font-work-sans {
    font-family: "Work Sans", sans-serif;
}

.swiper-pagination-bullet-active {
    background-color: white !important;
}

.service-menu {
    position: relative;
    display: inline-block;
    background-color: red !important;
}

.drop-down {
    position: absolute;
    background-color: white;
    min-width: 158px;
    z-index: 1;
}

[x-cloak] {
    display: none !important;
}

.services-hero {
    color: white;
    height: 48vh;
    position: relative;
    background-image: url("images/waves.jpg");
    width: 100%;

    background-size: cover;
}
.services-hero {
    position: relative;
}
.services-hero > * {
    z-index: 10;
    position: relative;
}
.image-section {
    padding: 2vh 0;
}
.contact {
    color: white !important;
}

.value-section {
    background-image: url(images/site-bg-2.png);
    background-size: cover;
    background-repeat: no-repeat;
}

.testimonials {
    background-image: url(images/site-bg-4.png);
    background-color: #40748e;
}

.proposal-bg {
    background-image: url(images/site-bg-1.png);
    background-color: #060c0e;
}
.proposal-bg::after {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: rgba(0, 0, 0, 0);
    z-index: 1;
}
.proposal-bg {
    position: relative;
}

.proposal-bg > * {
    z-index: 10;
    position: relative;
}

.get-quote-action {
    /* background-image: url(images/site-bg-1.png); */
    /* background-color: white; */
}
.get-quote-action::after {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: rgba(0, 0, 0, 0);
    z-index: 1;
}
.get-quote-action {
    position: relative;
}

.get-quote-action > * {
    z-index: 10;
    position: relative;
}

.cookie-container {
    position: fixed;
    bottom: -100%;
    left: 0;
    right: 0;
    background: #202124;
    color: #f5f6fa;
    transition: 40ms;
    z-index: 100;
}

.cookie-container.active {
    bottom: 0;
}

.cookie-btn {
    color: #f5f6fa;
}

.cookie-container a {
    color: #f5f6fa;
}

.testimonial-stats {
    background-color: #060c0e;
}
.testimonial-stats::after {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: rgba(0, 0, 0, 0);
    z-index: 1;
}
.testimonial-stats {
    position: relative;
}

.testimonial-stats > * {
    z-index: 10;
    position: relative;
}
.marketing-automation {
    background-image: url(images/site-bg-1.png);
}
.marketing-automation::after {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: rgba(248, 245, 245, 0.8);
    z-index: 1;
}
.marketing-automation {
    position: relative;
}

.marketing-automation > * {
    z-index: 10;
    position: relative;
}

.marketing-service {
    background-image: url(images/service-bg.png);
    background-color: #40748e;
}
.marketing-service::after {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    /* background: rgba(64, 116, 142, 0.8); */
    z-index: 1;
}
.marketing-service {
    position: relative;
}

.marketing-service > * {
    z-index: 10;
    position: relative;
}
.pillar-post-header-subtitle {
    font-size: 1rem;
    font-weight: 300;
    line-height: 1.75;
    margin: 0.5rem 0;
}

#blog-body h2 {
    font-size: 2rem;
    margin-top: 10px;
    margin-bottom: 10px;
    font-weight: 800;
}

#blog-body p {
    padding-bottom: 0;
    font-weight: normal;
}

.rich_editor {
    /* Paste your previously defined styles here */

    /* Headings */
    h1,
    h2,
    h3,
    h4,
    h5,
    h6 {
        margin-top: 0.5em; /* Top margin for headings */
        margin-bottom: 0.5em; /* Bottom margin for headings */
    }

    img{
        margin-bottom:10px !important;
    }

    h1 {
        font-size: 2.5em; /* Larger size for h1 */
        font-weight: 700;
    }
    .attachment__caption{
        display:none !important;
    }

    h2 {
        font-size: 2em; /* Slightly smaller size for h2 */
        font-weight: 700;
    }

    h3,
    h4,
    h5,
    h6 {
        font-size: 1.5em; /* Consistent size for smaller headings */
        font-weight: 700;
    }

    /* Paragraphs */
    p {
        margin-top: 1em; /* Top margin for paragraphs */
        margin-bottom: 1em; /* Bottom margin for paragraphs */
    }

    /* Inline elements */
    span,
    strong {
/*         margin: 0 0.25em;  */
    }

    /* Unordered list */
    ul {
        padding: 0; /* No default padding for list */
    }

    li {
        margin: 0.5em 0; /* Margin for list items */
    }

    /* Generic block element (div) */
    div {
        margin-top: 1em; /* Top margin for generic block elements */
        margin-bottom: 1em; /* Bottom margin for generic block elements */
    }

    p strong {
        display: block; /* Make strong element display as block-level */
        font-size: 1.8em; /* Adjust font size for emphasis */
        font-weight: bold; /* Maintain bold weight */
        margin-top: 0.5em; /* Add some top margin for separation */
        margin-bottom: 0.25em; /* Add some bottom margin */
    }
}

/* .image-scroll {
  width: 100%;
  height:200px;
  overflow: hidden;
  position: relative;
}
.image {
  width: 100%;
  height: 100%;
  transition: transform 0.8s ease;
}
.image-scroll:hover .image {
  transform: translateY(-80%);
} */

.marquee {
    overflow: hidden;
    width: 100%;
}

.images {
    display: flex;
    animation: marquee 20s alternate-reverse infinite;
}

.images img {
    margin-right: 50px; /* Adjust spacing between images */
}

@keyframes marquee {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-50%);
    }
}

.mobile-marquee {
    display: none;
}

@media only screen and (max-width: 768px) {
    #header a {
        color: #333;
    }

    .marquee {
        display: none;
    }
    .mobile-marquee {
        display: block;
    }
}