/*
 Theme Name:   GeneratePress Child
 Theme URI:    https://generatepress.com
 Description:  Default GeneratePress child theme
 Author:       Tom Usborne
 Author URI:   https://tomusborne.com
 Template:     generatepress
 Version:      0.1
*/


/* Base */

/* Default for big screens (> 1200px) */
html {
  font-size: 17px;
}

/* Large screens (990px - 1199px) */
@media screen and (max-width: 1199px) {
  html {
    font-size: 15px;
  }
}

/* Medium screens (440px - 989px) */
@media screen and (max-width: 989px) {
  html {
    font-size: 14px;
  }
}

/* Small screens (< 440px) */
@media screen and (max-width: 439px) {
  html {
    font-size: 12px;
  }
}

body {
	font-size:1rem;
}

.container.grid-container {
	max-width:1380px;
}

/* Typography System */
:root {
  /* Colors */
  --text-primary: #ffffff;
  --text-accent: #ff6f00;
  --bg-dark: #000000;
  
  /* Font families */
  --font-heading: 'Archivo', sans-serif;
  --font-body: 'Aeonik', sans-serif;
}

/* Base styles */
body {
  background-color: var(--bg-dark);
  color: var(--text-primary);
  font-family: var(--font-body);
  margin: 0;
  padding: 0;
}

/* Typography styles */
h1, h2, h3, h4 {
  font-family: var(--font-heading);
  font-weight: bold;
}

h1 {
  font-size: 4rem;
  line-height: 1.1;
}

h2 {
  font-size: 3rem;
  line-height: 1.1;
}

h3 {
  font-size: 2rem;
  font-weight: 600;
  line-height: 1.1;
}

h4 {
  font-size: 1.2rem;
  font-weight: 600;
  line-height: 1.1;
}

p {
  margin-bottom: 1em;
}

.p1 {
  font-size: 2.3rem;
  line-height: 1.4;
}

.p2 {
  font-size: 1.6rem;
  line-height: 1.5;
}

.p3 {
  font-size: 1.4rem;
  line-height: 1.6;
}

.p4 {
  font-size: 1.2rem;
  line-height: 1.6;
}

/* Accent text */
.accent {
  color: var(--text-accent);
}

/* Section dividers */
.section-divider {
  border-top: 1px solid rgba(255, 255, 255, 0.2);
  margin: 2em 0;
}

/* Blog typography */

/* Typography for WordPress Blog Posts */

/* Main Content Typography *//* Typography for WordPress Blog Posts */

/* CSS for WordPress Single Post Pages */
body.single-post .entry-content {
    font-size: 1rem;
    line-height: 1.78em;
}
body.single-post .entry-content p {
    margin-top: 0.01em;
    margin-bottom: 1.4em;
}
body.single-post .entry-content p:first-child {
    margin-top: 0;
}
/* Headings */
body.single-post .entry-content h1 {
    font-size: 2.25em;
    line-height: 1.2em;
    margin-bottom: 0.595em;
    margin-top: 1.4em;
}
body.single-post .entry-content h2 {
    font-size: 1.78em;
    line-height: 1.25em;
    margin-bottom: 0.74375em;
    margin-top: 1.4em;
}
body.single-post .entry-content h3 {
    font-size: 1.33em;
    line-height: 1.33em;
    margin-bottom: 0.9877em;
    margin-top: 1.862em;
}
body.single-post .entry-content h4 {
    font-size: 1.12em;
    line-height: 1.4em;
    margin-bottom: 0.595em;
    margin-top: 1.4em;
}
body.single-post .entry-content h5 {
    font-size: 1em;
    font-weight: 600;
    line-height: 1.5em;
    margin-bottom: 0.595em;
    margin-top: 1.4em;
}
body.single-post .entry-content h6 {
    font-size: 0.89em;
    font-weight: 600;
    line-height: 1.6em;
    margin-bottom: 0.595em;
    margin-top: 1.4em;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}



body.single-post .entry-content h1:first-of-type {
    margin-top: 0;
}
/* Entry Title (Post Title) */
body.single-post .entry-title,
body.single-post .page-title,
body.single-post .entry-content h1:first-of-type {
    font-size: 3.56em;
    line-height: 1.125em;
    margin-bottom: 0.75em;
    margin-top: 0;
}
/* Text Formatting */
body.single-post .entry-content b,
body.single-post .entry-content strong {
    font-weight: 600;
}
body.single-post .entry-content i,
body.single-post .entry-content em {
    font-style: italic;
}
/* Lists - Improved with marker styling */
body.single-post .entry-content ul {
    margin-top: 0.6em;
}
body.single-post .entry-content ul li {
    margin-top: 0.44em;
    position: relative;
    padding-inline-start: 1ch;
}
body.single-post .entry-content ul li::marker {
    content: "—";
    color: currentColor;
}
body.single-post .entry-content ul li ul {
    margin-top: 0.44em;
}
body.single-post .entry-content ul:first-child {
    margin-top: 0;
}
body.single-post .entry-content ol {
    margin-top: 1.78em;
    padding-left: 0.25em;
    counter-reset: item;
}
body.single-post .entry-content ol li {
    margin-top: 0.44em;
    position: relative;
    counter-increment: item;
}
body.single-post .entry-content ol li::marker {
    content: counters(item, ".") ". ";
    color: currentColor;
}
body.single-post .entry-content ol li ol {
    counter-reset: item 0;
    margin-top: 0.44em;
}
body.single-post .entry-content ol:first-child {
    margin-top: 0;
}
/* Fallback for browsers that don't fully support ::marker */
@supports not (selector(li::marker)) {
    body.single-post .entry-content ul li {
        padding-left: 1.78em;
    }
    
    body.single-post .entry-content ul li:before {
        content: "—";
        left: 0;
        position: absolute;
        top: 0;
    }
    
    body.single-post .entry-content ol {
        list-style: decimal;
    }
    
    body.single-post .entry-content ol ol {
        list-style: lower-alpha;
    }
    
    body.single-post .entry-content ol ol ol {
        list-style: lower-roman;
    }
}
/* Images */
body.single-post .entry-content .wp-block-image {
    border-radius: 4px;
    margin-top: 1.78em;
    overflow: hidden;
}
body.single-post .entry-content .wp-block-image img {
    display: block;
    max-width: 100%;
}
body.single-post .entry-content .wp-block-image:first-child {
    margin-top: 0;
}
/* Media Queries */
@media screen and (max-width: 1024px) {
    body.single-post .entry-content {
        grid-column: 3/span 8;
    }
}
@media screen and (max-width: 920px) {
    body.single-post .entry-title,
    body.single-post .page-title {
        font-size: 2em;
        line-height: 1.25em;
    }
    
    body.single-post .entry-content h1 {
        font-size: 1.75em;
        line-height: 1.28em;
    }
    
    body.single-post .entry-content h2 {
        font-size: 1.5em;
        line-height: 1.33em;
    }
    
    body.single-post .entry-content h3 {
        font-size: 1.25em;
        line-height: 1.2em;
    }
    
    body.single-post .entry-content h4 {
        font-size: 1.1em;
    }
}
@media screen and (max-width: 720px) {
    body.single-post .entry-content {
        font-size: 0.95rem;
    }
    
    body.single-post .entry-title,
    body.single-post .page-title {
        font-size: 1.75em;
        line-height: 1.3em;
    }
}

/* Meta information styling */
.single-post .entry-meta,
.single-post .post-meta {
  color: rgba(248, 57, 147, 1);
  text-transform: uppercase;
}


/* Gradient for Blog Posts */


/* Gradient headings for single posts */
.single-post .entry-content h2,
.single-post .entry-content h3,
.single-post .entry-content h4,
.single-post .entry-content h5,
.single-post .entry-content h6,
.text-didgeheads-gradient {
  background: linear-gradient(270deg, #ED3792 2.65%, #F37B34 95.58%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  display: inline-block; /* Needed for the gradient to work properly */
}

/* Button Style */
a.wp-block-button__link:not(.has-background),
a.gb-text {
    background: transparent !important; /* Force transparent background */
    color: white !important;
    border: none !important;
    border-radius: 0 !important; /* Reset border-radius */
    font-size: 1rem;
    text-transform: uppercase;
    letter-spacing: 2px;
    padding: 20px 40px;
    transition: all 0.3s ease;
    position: relative;
    display: inline-flex;
    align-items: center;
    text-decoration: none;
    z-index: 1; /* Ensure text stays above the pseudo-elements */
}
/* This creates a container with both the gradient border and rounded corners */
a.wp-block-button__link:not(.has-background)::before,
a.gb-text::before {
    content: "";
    position: absolute;
    top: -3px;
    left: -3px;
    right: -3px;
    bottom: -3px;
    background: linear-gradient(180deg, #87ceeb, #a681ba, #e88b97, #f4b183, #f76c94);
    border-radius: 9999px; /* Adjust this value as needed */
    z-index: -2;
    
    /* Add subtle hue-rotation animation */
    animation: subtleHueShift 8s ease-in-out infinite;
}
/* This creates the inner black background */
a.wp-block-button__link:not(.has-background)::after,
a.gb-text::after {
    content: "";
    position: absolute;
    top: -1px; /* Thickness of the border */
    left: -1px;
    right: -1px;
    bottom: -1px;
    background: black; /* Match your site background */
    border-radius: 9999px; /* Slightly smaller than outer radius */
    z-index: -1;
}

/* Override for light-purple-button */
a.wp-block-button__link.light-purple-button:not(.has-background),
a.gb-text.light-purple-button {
    background-color: #EADAFF !important; /* Light purple background */
    color: #121212 !important; /* Dark text color */
}

/* Adjust the inner background for light-purple-button */
a.wp-block-button__link.light-purple-button:not(.has-background)::after,
a.gb-text.light-purple-button::after {
    background: #EADAFF !important; /* Match the button background */
}

a.wp-block-button__link:not(.has-background):hover, a.gb-text:hover {
	box-shadow:none;
}


/* Define the subtle hue rotation animation */
@keyframes subtleHueShift {
    0% {
        filter: hue-rotate(0deg);
    }
    50% {
        filter: hue-rotate(15deg);
    }
    100% {
        filter: hue-rotate(0deg);
    }
}

/* Tablet devices */
@media only screen and (max-width: 768px) {
    a.wp-block-button__link:not(.has-background),
    a.gb-text {
        padding: 16px 32px;
    }
}

/* Mobile devices */
@media only screen and (max-width: 480px) {
    a.wp-block-button__link:not(.has-background),
    a.gb-text {
        padding: 12px 24px;
    }
}

/* Arrow icon setup */
.button-arrow::after {
    content: "→";
    display: inline-block;
    margin-left: 15px;
    transition: transform 0.3s ease;
}

a.wp-block-button__link:not(.has-background):hover,
a.gb-text:hover {
    transform: translateY(-3px);
}

.button-arrow:hover::after {
    transform: translateX(5px);
}


/* Text Effects */

.gradient-underline { 
  position: relative;
  display: inline-block;
  padding-bottom: 14px;
}

.gradient-underline::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 36px; /* Fixed width of 30px */
  height: 1px;
  background: linear-gradient(to right, #3CBDED, #F83993);
}

/* Highight Bars */

.highlight-bar-pink-1 {
  position: relative;
  display: inline-block;
  z-index:2;
}

.highlight-bar-pink-1::after {
 content: "";
    position: absolute;
    background-color: #ff5b9e;
    height: 35px;
    width: 60%;
    bottom: 37%;
    right: 0.5%;
    z-index: -1;
}

.highlight-bar-pink-2 {
  position: relative;
  display: inline-block;
z-index:2;
}

.highlight-bar-pink-2::after {
       content: "";
    position: absolute;
    background-color: #ff5b9e;
    height: 35px;
    width: 67%;
    bottom: 7%;
    left: -3%;
    z-index: -1;
}

.highlight-bar-pink-3 {
  position: relative;
  display: inline-block;
z-index:2;
}

.highlight-bar-pink-3::after {
     content: "";
    position: absolute;
    background-color: #ff5b9e;
    height: 35px;
    width: 60%;
    bottom: 37%;
    right: 0.5%;
    z-index: -1;
}


.highlight-bar-pink-4 {
  position: relative;
  display: inline-block;
z-index:2;
}

.highlight-bar-pink-4::after {
     content: "";
    position: absolute;
    background-color: #ff5b9e;
    height: 35px;
    width: 60%;
    bottom: 37%;
    right: 0.5%;
    z-index: -1;
}
.highlight-bar-pink-5 {
  position: relative;
  display: inline-block;
z-index:2;
}

.highlight-bar-pink-5::after {
     content: "";
    position: absolute;
    background-color: #ff5b9e;
    height: 35px;
    width: 60%;
    bottom: 37%;
    right: 0.5%;
    z-index: -1;
}
/* Text Gradients */
mark.has-accent-color {
  background: linear-gradient(91.11deg, #F83993 1.43%, #6253A2 98.58%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  text-fill-color: transparent;
}


/* Splide Slider - Brand Section */

.splide-home-slider-wrap {
  /* Main wrapper with radiant gradient background */
  background: linear-gradient(
    to right,
    rgba(43, 33, 45, 0.5) 1%,
    rgba(43, 33, 45, 0.9) 15%,
    rgba(43, 33, 45, 1) 50%,
    rgba(43, 33, 45, 0.9) 85%,
    rgba(43, 33, 45, 0.5) 100%
  );
  position: relative;
}

.splide-home-slider-wrap .splide__slide {
border-left: 1px solid rgba(120, 114, 114, 0.5);
  justify-content: center;
  align-items: center;
  padding: 20px 30px !important;
}



/* Top fading border */
.splide-home-slider-wrap::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(
    to right,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.2) 15%,
    rgba(255, 255, 255, 0.6) 50%,
    rgba(255, 255, 255, 0.2) 85%,
    rgba(255, 255, 255, 0) 100%
  );
}

/* Bottom fading border */
.splide-home-slider-wrap::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(
    to right,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.2) 15%,
    rgba(255, 255, 255, 0.6) 50%,
    rgba(255, 255, 255, 0.2) 85%,
    rgba(255, 255, 255, 0) 100%
  );
}

/* Container for the actual slider */
.splide-home-slider-wrap .splide-home-slider {
  width: 100%;
  margin: 0 auto;
}

/* Style for the slider track */
.splide-home-slider-wrap .splide__track {
  overflow: visible;
}

/* Style for individual slides */
.splide-home-slider-wrap .splide__slide {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 10px;
}

/* Logo styling */


/* Main Menu */

@media screen and (min-width:999px) {

/* Main menu 1st level links */

.main-navigation .main-nav>ul {
    gap: 12px;
}

#menu-main-menu > li > a {
    color: white;
    border: none;
    position: relative;
    z-index: 1;
    transition: all 0.3s ease;
    margin: 0px;
}

.main-navigation .main-nav ul li a {
    line-height: 35px;
}

/* Gradient border - only for active items */
#menu-main-menu > li.current-menu-item > a::before,
#menu-main-menu > li.current_page_item > a::before {
    content: "";
    position: absolute;
    top: -1px;
    left: -1px;
    right: -1px;
    bottom: -1px;
    background: linear-gradient(180deg, #87ceeb, #a681ba, #e88b97, #f4b183, #f76c94);
    border-radius: 99px;
    z-index: -2;
}

/* Background for all items */
#menu-main-menu > li > a::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: #463949;
    border-radius: 99px;
    z-index: -1;
	    transition: background-color 0.2s ease; /* Add transition for smooth hover effect */

}

/* Non-active items - no gradient border */
#menu-main-menu > li:not(.current-menu-item):not(.current_page_item) > a::before {
    display: none;
}

/* Hover effect - darker background */
#menu-main-menu > li > a:hover::after {
    background: #322a33;
}
}

@media screen and (max-width: 749px) {
/* Mobile Main Menu Styles */
#menu-main-menu {
    background-color: rgba(36, 36, 36, 0.7);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border-radius: 4px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.18);
}
}

/* Links */

footer a {
	text-decoration:none;
	color:#fff;
	transition: all 1s;
}
footer a:hover {
	text-decoration:underline;
}



/* Clean Dark Form Styling for Contact Form 7 */
/* Clean Dark Form Styling for Contact Form 7 */
.dh-form {
    max-width: 100%;
    margin: 0 auto;
}

.dh-form .wpcf7-form {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* Input fields styling */
.dh-form input[type="text"],
.dh-form input[type="email"],
.dh-form input[type="url"],
.dh-form input[type="tel"],
.dh-form input[type="number"],
.dh-form input[type="date"],
.dh-form textarea,
.dh-form select {
    width: 100%;
    padding: 15px 20px;
    border-radius: 30px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background-color: rgba(0, 0, 0, 0.3);
    color: #fff;
    font-size: 16px;
    transition: all 0.3s ease;
    box-sizing: border-box;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
}

/* Textarea specific styling */
.dh-form textarea {
    border-radius: 20px;
    min-height: 100px;
    resize: vertical;
    padding: 20px;
}

/* Focus states with gradient border */
.dh-form input:focus,
.dh-form textarea:focus,
.dh-form select:focus {
    outline: none;
    border: double 1px transparent;
    background-image: linear-gradient(rgb(0, 0, 0), rgb(0, 0, 0)), 
                      linear-gradient(180deg, #87ceeb, #a681ba, #e88b97, #f4b183, #f76c94);
    background-origin: border-box;
    background-clip: padding-box, border-box;
    animation: subtleHueShift 8s ease-in-out infinite;
}

/* Adjust for textarea's different border-radius */
.dh-form textarea:focus {
    border-radius: 20px;
}

/* Placeholder styling */
.dh-form input::placeholder,
.dh-form textarea::placeholder {
    color: rgba(255, 255, 255, 0.5);
}

/* Submit button container styling */
.dh-form .submit-container {
    display: flex;
    justify-content: center;
    margin-top: 10px;
}

/* Submit button styling */
.dh-form input[type="submit"] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 12px 25px;
    background-color: rgba(0, 0, 0, 0.5);
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 30px;
    font-size: 14px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 1px;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
}

.dh-form input[type="submit"]:hover {
    background-color: rgba(255, 255, 255, 0.1);
}

/* Submit button arrow icon */
.dh-form .submit-btn-wrapper {
    position: relative;
    display: inline-block;
}

.dh-form .arrow-icon {
    position: absolute;
    right: 15px;
    top: 50%;
    transform: translateY(-50%);
    width: 24px;
    height: 24px;
    background-color: rgba(255, 255, 255, 0.1);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.dh-form .arrow-icon:after {
    content: '→';
    color: #fff;
    font-size: 14px;
}

/* Two-column form layout for desktop */
@media (min-width: 768px) {
    .dh-form .two-columns {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 20px;
    }
    
    .dh-form .full-width {
        grid-column: 1 / -1;
    }
}

/* Error messages */
.dh-form .wpcf7-not-valid-tip {
    color: #ff5555;
    font-size: 14px;
    margin-top: 5px;
    margin-left: 10px;
}

.dh-form .wpcf7-response-output {
    border-radius: 10px;
    padding: 15px;
    margin-top: 20px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: #fff;
    font-size: 14px;
    background-color: rgba(0, 0, 0, 0.4);
}

/* Background gradient if needed */
.dh-form-container {
    background: linear-gradient(to bottom, #000000, #1a0a1c);
    padding: 40px 20px;
    border-radius: 8px;
}
.dh-form .wpcf7-response-output {
    border-radius: 10px;
    padding: 15px;
    margin-top: 20px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: #fff;
    font-size: 14px;
    background-color: rgba(0, 0, 0, 0.4);
}

/* Keep your existing CSS and add these new rules for the focus elements */

/* Focus states with gradient border */
.dh-form input:focus,
.dh-form textarea:focus,
.dh-form select:focus {
    outline: none;
    border-color: transparent;
    background-color: rgba(0, 0, 0, 0.4);
    position: relative;
}

/* Create gradient border effect using pseudo-elements */
.dh-form input:focus::before,
.dh-form textarea:focus::before,
.dh-form select:focus::before {
    content: "";
    position: absolute;
    top: -2px;
    left: -2px;
    right: -2px;
    bottom: -2px;
    background: linear-gradient(180deg, #87ceeb, #a681ba, #e88b97, #f4b183, #f76c94);
    border-radius: 32px; /* Slightly larger than your input border-radius */
    z-index: -2;
    animation: subtleHueShift 8s ease-in-out infinite;
}

.dh-form input:focus::after,
.dh-form textarea:focus::after,
.dh-form select:focus::after {
    content: "";
    position: absolute;
    top: 1px; /* Border thickness */
    left: 1px;
    right: 1px;
    bottom: 1px;
    background-color: rgba(0, 0, 0, 0.4); /* Match the background color */
    border-radius: 29px; /* Slightly smaller than outer radius */
    z-index: -1;
}

/* Adjust for textarea's different border-radius */
.dh-form textarea:focus::before {
    border-radius: 22px;
}

.dh-form textarea:focus::after {
    border-radius: 19px;
}
/* Keep your animation keyframes */
@keyframes subtleHueShift {
    0% {
        filter: hue-rotate(0deg);
    }
    50% {
        filter: hue-rotate(28deg);
    }
    100% {
        filter: hue-rotate(0deg);
    }
}

.dh-form .wpcf7-not-valid-tip {
	    color: #f2c6c6;
}




/* Clean Dark Form Styling for Contact Form 7 */
.dh-form {
    max-width: 100%;
    margin: 0 auto;
}

.dh-form .wpcf7-form {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* Input fields styling with gradient border */
.dh-form input[type="text"],
.dh-form input[type="email"],
.dh-form input[type="url"],
.dh-form input[type="tel"],
.dh-form input[type="number"],
.dh-form input[type="date"],
.dh-form textarea,
.dh-form select {
    width: 100%;
    padding: 15px 20px;
    border-radius: 30px;
    border: none; /* Remove original border */
    background-color: rgba(0, 0, 0, 0.3);
    color: #fff;
    font-size: 16px;
    box-sizing: border-box;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
    position: relative;
    /* Use background-image for the gradient border effect */
    background-image: linear-gradient(rgb(0, 0, 0), rgb(0, 0, 0)), linear-gradient(180deg, rgb(255 255 255 / 58%), rgb(116 116 116 / 40%));
    background-origin: border-box;
    background-clip: padding-box, border-box;
    border: double 1px transparent;
}

/* Textarea specific styling */
.dh-form textarea {
    border-radius: 20px;
    min-height: 100px;
    resize: vertical;
    padding: 20px;
}

/* Focus states with gradient border - more vibrant */
.dh-form input:focus,
.dh-form textarea:focus,
.dh-form select:focus {
    outline: none;
    border: double 1px transparent;
    background-image: linear-gradient(rgb(0, 0, 0), rgb(0, 0, 0)), 
                      linear-gradient(180deg, #87ceeb, #a681ba, #e88b97, #f4b183, #f76c94);
    background-origin: border-box;
    background-clip: padding-box, border-box;
    animation: subtleHueShift 8s ease-in-out infinite;
}

/* Adjust for textarea's different border-radius */
.dh-form textarea:focus {
    border-radius: 20px;
}

/* Placeholder styling */
.dh-form input::placeholder,
.dh-form textarea::placeholder {
    color: rgba(255, 255, 255, 0.5);
}

/* Two-column form layout for desktop */
@media (min-width: 768px) {
    .dh-form .two-columns {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 20px;
    }
    
    .dh-form .full-width {
        grid-column: 1 / -1;
    }
}

/* Error messages */
.dh-form .wpcf7-not-valid-tip {
    color: #f2c6c6;
    font-size: 14px;
    margin-top: 5px;
    margin-left: 10px;
}

.dh-form .wpcf7-response-output {
    border-radius: 10px;
    padding: 15px;
    margin-top: 20px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: #fff;
    font-size: 14px;
    background-color: rgba(0, 0, 0, 0.4);
}

/* Background gradient if needed */
.dh-form-container {
    background: linear-gradient(to bottom, #000000, #1a0a1c);
    padding: 40px 20px;
    border-radius: 8px;
}

/* Animation for focus state */
@keyframes subtleHueShift {
    0% {
        filter: hue-rotate(0deg);
    }
    50% {
        filter: hue-rotate(28deg);
    }
    100% {
        filter: hue-rotate(0deg);
    }
}


/* Submit Button Style */
/* Submit Button Style */
.dh-form .wpcf7-form-control.wpcf7-submit {
    background: transparent !important; /* Force transparent background */
    color: white !important;
    border: none !important;
    border-radius: 0 !important; /* Reset border-radius */
    font-size: 1rem;
    text-transform: uppercase;
    letter-spacing: 2px;
    padding: 20px 40px;
    transition: all 0.3s ease;
    position: relative;
    display: inline-flex;
    align-items: center;
    text-decoration: none;
    z-index: 1; /* Ensure text stays above the pseudo-elements */
}

/* This creates a container with both the gradient border and rounded corners */
.dh-form .wpcf7-form-control.wpcf7-submit::before {
    content: "";
    position: absolute;
    top: -3px;
    left: -3px;
    right: -3px;
    bottom: -3px;
    background: linear-gradient(180deg, #87ceeb, #a681ba, #e88b97, #f4b183, #f76c94);
    border-radius: 9999px; /* Adjust this value as needed */
    z-index: -2;
    
    /* Add subtle hue-rotation animation */
    animation: subtleHueShift 8s ease-in-out infinite;
}

/* This creates the inner black background */
.dh-form .wpcf7-form-control.wpcf7-submit::after {
    content: "";
    position: absolute;
    top: -1px; /* Thickness of the border */
    left: -1px;
    right: -1px;
    bottom: -1px;
    background: black; /* Match your site background */
    border-radius: 9999px; /* Slightly smaller than outer radius */
    z-index: -1;
}



/** RADIAL GRID EFFECT **/

        :root {
            /* Define the base color as a CSS variable with prefix */
            --radialgrid-primary-color: #6200ea; /* Default is purple */
        }
        
        .radialgrid-background {
            position: relative;
            margin: 0 auto;
			width:100%;
			height:100%;
        }
        
        /* Using CSS grid for the layout */
        .radialgrid-container {
            display: grid;
            grid-template-columns: repeat(15, 1fr);
            grid-template-rows: repeat(15, 1fr);
            width: 100%;
            height: 100%;
/*             gap: 1px; /* This creates the visible grid effect */ 
/*             background-color: rgba(255, 255, 255, 0.1); /* Grid line color */ 
        }
        
        /* Each grid item has the same color but will get varying opacity */
        .radialgrid-item {
            background-color: var(--radialgrid-primary-color);
/* 			    background: linear-gradient(53deg,
color-mix(in srgb, var(--radialgrid-primary-color) 80%, #010101) 0%, var(--radialgrid-primary-color) 50%, 
color-mix(in srgb, var(--radialgrid-primary-color) 70%, #919191) 100%); */
            width: 100%;
            height: 100%;
            transition: opacity 0.3s ease, transform 0.3s ease;
        }
        
        /* Define center grid items and their opacity */
        .radialgrid-center {
            opacity: 1;
        }
        
        .radialgrid-ring1 {
            opacity: 0.9;
        }
        
        .radialgrid-ring2 {
            opacity: 0.8;
        }
        
        .radialgrid-ring3 {
            opacity: 0.7;
        }
        
        .radialgrid-ring4 {
            opacity: 0.6;
        }
        
        .radialgrid-ring5 {
            opacity: 0.5;
        }
        
        .radialgrid-ring6 {
            opacity: 0.4;
        }
        
        .radialgrid-ring7 {
            opacity: 0.3;
        }
        
        .radialgrid-ring8 {
            opacity: 0.2;
        }
        
        .radialgrid-ring9 {
            opacity: 0.1;
        }
   .radialgrid-ring10 {
            opacity: 0;
        }
        
        /* Color theme classes for changing the color scheme */
        .radialgrid-theme-orange {
            --radialgrid-primary-color: #9e5308;
        }
        
        .radialgrid-theme-red {
            --radialgrid-primary-color: #f44336;
        }
        
        .radialgrid-theme-blue {
            --radialgrid-primary-color: #2196f3;
        }
   .radialgrid-theme-turquoise {
            --radialgrid-primary-color: #07d9ef;
        }
        
        .radialgrid-theme-green {
            --radialgrid-primary-color: #4caf50;
        }
       .radialgrid-theme-purple {
		 --radialgrid-primary-color: #8836C4;
        }
  .radialgrid-theme-pink {
		 --radialgrid-primary-color: #E0378B;
        }

/* Hide Splide Arrows */

.splide__arrows.splide__arrows--ltr {
	display:none;
}


/* Radial Gradients Utility */
.radialgrid-ring0 { opacity: 0; }
.radialgrid-ring1 { opacity: 0.01; }
.radialgrid-ring2 { opacity: 0.02; }
.radialgrid-ring3 { opacity: 0.03; }
.radialgrid-ring4 { opacity: 0.04; }
.radialgrid-ring5 { opacity: 0.05; }
.radialgrid-ring6 { opacity: 0.06; }
.radialgrid-ring7 { opacity: 0.07; }
.radialgrid-ring8 { opacity: 0.08; }
.radialgrid-ring9 { opacity: 0.09; }
.radialgrid-ring10 { opacity: 0.1; }
.radialgrid-ring11 { opacity: 0.11; }
.radialgrid-ring12 { opacity: 0.12; }
.radialgrid-ring13 { opacity: 0.13; }
.radialgrid-ring14 { opacity: 0.14; }
.radialgrid-ring15 { opacity: 0.15; }
.radialgrid-ring16 { opacity: 0.16; }
.radialgrid-ring17 { opacity: 0.17; }
.radialgrid-ring18 { opacity: 0.18; }
.radialgrid-ring19 { opacity: 0.19; }
.radialgrid-ring20 { opacity: 0.2; }
.radialgrid-ring21 { opacity: 0.21; }
.radialgrid-ring22 { opacity: 0.22; }
.radialgrid-ring23 { opacity: 0.23; }
.radialgrid-ring24 { opacity: 0.24; }
.radialgrid-ring25 { opacity: 0.25; }
.radialgrid-ring26 { opacity: 0.26; }
.radialgrid-ring27 { opacity: 0.27; }
.radialgrid-ring28 { opacity: 0.28; }
.radialgrid-ring29 { opacity: 0.29; }
.radialgrid-ring30 { opacity: 0.3; }
.radialgrid-ring31 { opacity: 0.31; }
.radialgrid-ring32 { opacity: 0.32; }
.radialgrid-ring33 { opacity: 0.33; }
.radialgrid-ring34 { opacity: 0.34; }
.radialgrid-ring35 { opacity: 0.35; }
.radialgrid-ring36 { opacity: 0.36; }
.radialgrid-ring37 { opacity: 0.37; }
.radialgrid-ring38 { opacity: 0.38; }
.radialgrid-ring39 { opacity: 0.39; }
.radialgrid-ring40 { opacity: 0.4; }
.radialgrid-ring41 { opacity: 0.41; }
.radialgrid-ring42 { opacity: 0.42; }
.radialgrid-ring43 { opacity: 0.43; }
.radialgrid-ring44 { opacity: 0.44; }
.radialgrid-ring45 { opacity: 0.45; }
.radialgrid-ring46 { opacity: 0.46; }
.radialgrid-ring47 { opacity: 0.47; }
.radialgrid-ring48 { opacity: 0.48; }
.radialgrid-ring49 { opacity: 0.49; }
.radialgrid-ring50 { opacity: 0.5; }
.radialgrid-ring51 { opacity: 0.51; }
.radialgrid-ring52 { opacity: 0.52; }
.radialgrid-ring53 { opacity: 0.53; }
.radialgrid-ring54 { opacity: 0.54; }
.radialgrid-ring55 { opacity: 0.55; }
.radialgrid-ring56 { opacity: 0.56; }
.radialgrid-ring57 { opacity: 0.57; }
.radialgrid-ring58 { opacity: 0.58; }
.radialgrid-ring59 { opacity: 0.59; }
.radialgrid-ring60 { opacity: 0.6; }
.radialgrid-ring61 { opacity: 0.61; }
.radialgrid-ring62 { opacity: 0.62; }
.radialgrid-ring63 { opacity: 0.63; }
.radialgrid-ring64 { opacity: 0.64; }
.radialgrid-ring65 { opacity: 0.65; }
.radialgrid-ring66 { opacity: 0.66; }
.radialgrid-ring67 { opacity: 0.67; }
.radialgrid-ring68 { opacity: 0.68; }
.radialgrid-ring69 { opacity: 0.69; }
.radialgrid-ring70 { opacity: 0.7; }
.radialgrid-ring71 { opacity: 0.71; }
.radialgrid-ring72 { opacity: 0.72; }
.radialgrid-ring73 { opacity: 0.73; }
.radialgrid-ring74 { opacity: 0.74; }
.radialgrid-ring75 { opacity: 0.75; }
.radialgrid-ring76 { opacity: 0.76; }
.radialgrid-ring77 { opacity: 0.77; }
.radialgrid-ring78 { opacity: 0.78; }
.radialgrid-ring79 { opacity: 0.79; }
.radialgrid-ring80 { opacity: 0.8; }
.radialgrid-ring81 { opacity: 0.81; }
.radialgrid-ring82 { opacity: 0.82; }
.radialgrid-ring83 { opacity: 0.83; }
.radialgrid-ring84 { opacity: 0.84; }
.radialgrid-ring85 { opacity: 0.85; }
.radialgrid-ring86 { opacity: 0.86; }
.radialgrid-ring87 { opacity: 0.87; }
.radialgrid-ring88 { opacity: 0.88; }
.radialgrid-ring89 { opacity: 0.89; }
.radialgrid-ring90 { opacity: 0.9; }
.radialgrid-ring91 { opacity: 0.91; }
.radialgrid-ring92 { opacity: 0.92; }
.radialgrid-ring93 { opacity: 0.93; }
.radialgrid-ring94 { opacity: 0.94; }
.radialgrid-ring95 { opacity: 0.95; }
.radialgrid-ring96 { opacity: 0.96; }
.radialgrid-ring97 { opacity: 0.97; }
.radialgrid-ring98 { opacity: 0.98; }
.radialgrid-ring99 { opacity: 0.99; }
.radialgrid-ring100 { opacity: 1; }



/* Background Colour Utility */

.dh-gradient-purple-orange-bg {
  background: linear-gradient(
    135deg,
    #5696DC,
    #6E6FCB, 
    #8050BC,
    #A55594,
    #DB7054
  );
}




 .services-container {
        margin: 0 auto;
        padding: 20px;
        background-color: #1a1a1a;
        color: white;
    }
    
    /* Default panel styles (closed state) */
    .service-panel {
        position: relative;
        margin-bottom: 20px;
        overflow: hidden;
        border-radius: 10px;
        transition: all 0.4s ease;
        background: #2a2a2a;
        display: grid;
        grid-template-columns: auto 1fr auto;
        align-items: center;
        padding: 20px;
        cursor: pointer;
    }
    
    /* Closed state styling */
    .service-header-closed {
        display: flex;
        align-items: center;
    }
    
    .service-number {
        font-size: 60px;
        opacity: 0.3;
        margin-right: 20px;
        font-weight: bold;
        -webkit-text-stroke: thin black;
        -webkit-text-fill-color: transparent;
    }
    
    .service-title {
        font-size: 24px;
        font-weight: bold;
    }
    
    .service-preview-text {
        padding: 0 20px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    
    .service-arrow {
        width: 40px;
        height: 40px;
        background-color: rgba(255,255,255,0.2);
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    
    .service-arrow svg {
        width: 20px;
        height: 20px;
        fill: white;
        transform: rotate(180deg);
        transition: transform 0.3s ease;
    }
    
    /* Open state styling */
    .service-panel.active {
        background: linear-gradient(
    135deg,
    #5696DC,
    #6E6FCB, 
    #8050BC,
    #A55594,
    #DB7054
  );
        grid-template-columns: 1fr 1fr 2fr;
        grid-template-rows: auto 1fr;
        gap: 20px;
        padding: 30px;
    }
    
    .service-panel.active .service-header-closed {
        display: none;
    }
    
    .service-panel.active .service-preview-text {
        display: none;
    }
    
    .service-panel.active .service-arrow {
        display: none;
    }
    
    .service-header-open {
        display: none;
        grid-column: 1;
        grid-row: 1;
    }
    
    .service-panel.active .service-header-open {
        display: flex;
        flex-direction: column;
    }
    
    .service-icon {
        margin-bottom: 15px;
    }
    
    .service-icon img {
        width: 40px;
        height: 40px;
    }
    
    .service-open-title {
        font-size: 32px;
        font-weight: 400;
        margin-bottom: 20px;
    }
    
    .service-open-number {
        font-size: 90px;
        opacity: 0.3;
        margin-top: auto;
        -webkit-text-stroke: thin black;
        -webkit-text-fill-color: transparent;
    }
    
    .service-image {
        display: none;
        grid-column: 2;
        grid-row: 1 / span 2;
    }
    
    .service-panel.active .service-image {
        display: block;
        height: 100%;
    }
    
    .service-image img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        border-radius: 16px;
    }
    
    .service-text {
        display: none;
        grid-column: 3;
        grid-row: 1 / span 2;
        padding-left: 20px;
    }
    
    .service-panel.active .service-text {
        display: block;
    }
    
    .service-text p {
        margin-bottom: 20px;
        line-height: 1.6;
        opacity: 0;
        transform: translateY(20px);
        transition: opacity 0.5s ease, transform 0.5s ease;
    }
    
    .service-panel.active .service-text p {
        opacity: 1;
        transform: translateY(0);
    }
    
    /* Adding delay for each paragraph to create a staggered effect */
    .service-panel.active .service-text p:nth-child(1) {
        transition-delay: 0.1s;
    }
    
    .service-panel.active .service-text p:nth-child(2) {
        transition-delay: 0.2s;
    }
    
    .service-panel.active .service-text p:nth-child(3) {
        transition-delay: 0.3s;
    }
    
    /* Contact Us button */
    .contact-button {
        display: inline-block;
        background: transparent;
        color: white;
      
		    padding: 16px 30px;
    border: 1px solid white;
    border-radius: 9999px;
    text-transform: uppercase;
    letter-spacing: 0.01em;
        text-decoration: none;
        transition: background 0.3s ease;
        margin-top: 10px;
        opacity: 0;
        transform: translateY(20px);
        transition: opacity 0.5s ease, transform 0.5s ease, background 0.3s ease;
        transition-delay: 0.4s;
    }
    
    .service-panel.active .contact-button {
        opacity: 1;
        transform: translateY(0);
    }
    
    .contact-button:hover {
        background: rgba(255,255,255,0.3);
    }
    
    /* Direct hover styles for desktop */
    @media (min-width: 769px) {
        .service-panel:hover {
  background: linear-gradient(
    135deg,
    #5696DC,
    #6E6FCB, 
    #8050BC,
    #A55594,
    #DB7054
  );            grid-template-columns: 1fr 1fr 2fr;
            grid-template-rows: auto 1fr;
            gap: 20px;
            padding: 30px;
        }
        
        .service-panel:hover .service-header-closed {
            display: none;
        }
        
        .service-panel:hover .service-preview-text {
            display: none;
        }
        
        .service-panel:hover .service-arrow {
            display: none;
        }
        
        .service-panel:hover .service-header-open {
            display: flex;
            flex-direction: column;
        }
        
        .service-panel:hover .service-image {
            display: block;
            height: 100%;
        }
        
        .service-panel:hover .service-text {
            display: block;
        }
        
        .service-panel:hover .service-text p {
            opacity: 1;
            transform: translateY(0);
        }
        
        .service-panel:hover .contact-button {
            opacity: 1;
            transform: translateY(0);
        }
    }
    
    /* Mobile styles */
    @media (max-width: 768px) {
        .service-panel {
            grid-template-columns: 1fr;
            grid-template-rows: auto auto auto;
        }
        
        .service-panel.active {
            grid-template-columns: 1fr;
            grid-template-rows: auto auto auto;
        }
        
        .service-header-closed {
            display: none;
        }
        
        .service-preview-text {
            display: none;
        }
        
        .service-arrow {
            display: none;
        }
        
        .service-header-open {
            display: flex;
            grid-column: 1;
            grid-row: 1;
        }
        
        .service-image {
            display: block;
            grid-column: 1;
            grid-row: 2;
            margin: 20px 0;
        }
        
        .service-text {
            display: block;
            grid-column: 1;
            grid-row: 3;
            padding-left: 0;
        }
        
        /* For mobile, no fade-in animation */
        .service-text p {
            opacity: 1;
            transform: translateY(0);
        }
        
        .contact-button {
            opacity: 1;
            transform: translateY(0);
        }
    }





/* Utility for Normal Pages */

body:not(.full-width-content):not(.contained-content) .site.container {
    max-width: 820px !important;
    margin-left: auto;
    margin-right: auto;
}


/* Meta information styling */
.single-post .entry-meta,
.single-post .post-meta {
  color: rgba(248, 57, 147, 1);
  text-transform: uppercase;
}

/* Author Box Styling */
/* Author Box Styling - Specifically targeting boxed layout */
.pp-multiple-authors-boxes-wrapper.pp-multiple-authors-layout-boxed .pp-multiple-authors-boxes-li {
  position: relative;
  padding: 1.5rem;
  color: white;
  z-index: 1;
  margin-bottom: 2rem;
}

/* Title styling */
.pp-multiple-authors-boxes-wrapper.pp-multiple-authors-layout-boxed h2.widget-title {
  margin-bottom: 0.3rem;
  color: white;
  position: relative;
  z-index: 2;
}

/* Create gradient border effect */
.pp-multiple-authors-boxes-wrapper.pp-multiple-authors-layout-boxed .pp-multiple-authors-boxes-li::before {
  content: "";
  position: absolute;
  top: -3px;
  left: -3px;
  right: -3px;
  bottom: -3px;
  background: linear-gradient(180deg, #87ceeb, #a681ba, #e88b97, #f4b183, #f76c94);
  border-radius: 12px;
  z-index: -2;
  animation: subtleHueShift 8s ease-in-out infinite;
}

/* Create inner background */
.pp-multiple-authors-boxes-wrapper.pp-multiple-authors-layout-boxed .pp-multiple-authors-boxes-li::after {
  content: "";
  position: absolute;
  top: -1px;
  left: -1px;
  right: -1px;
  bottom: -1px;
  background: black;
  border-radius: 12px;
  z-index: -1;
}

/* Adjust padding and ensure all content is visible */
.pp-multiple-authors-boxes-wrapper.pp-multiple-authors-layout-boxed .pp-author-boxes-avatar-details {
  padding: 0.5rem 0;
}

/* Style the icons */
.pp-multiple-authors-boxes-wrapper.pp-multiple-authors-layout-boxed .dashicons {
  color: #e0e0e0;
  background-color: rgba(50, 50, 50, 0.7);
  border-radius: 50%;
  padding: 5px;
  transition: all 0.3s ease;
	justify-content: center;
    align-items: center;
	display:flex;
}

.pp-multiple-authors-boxes-wrapper.pp-multiple-authors-layout-boxed .dashicons:hover {
  color: white;
  background-color: rgba(80, 80, 80, 0.8);
}

/* Ensure bio text is white */
.pp-multiple-authors-boxes-wrapper.pp-multiple-authors-layout-boxed .pp-author-boxes-description {
  color: white;
}

/* Style author name link */
.pp-multiple-authors-boxes-wrapper.pp-multiple-authors-layout-boxed .pp-author-boxes-name a {
  color: white;
  text-decoration: none;
  font-weight: bold;
}

.pp-multiple-authors-boxes-wrapper.pp-multiple-authors-layout-boxed .pp-author-boxes-name a:hover {
  text-decoration: underline;
}


.single-post .pp-multiple-authors-boxes-wrapper.pp-multiple-authors-layout-boxed.multiple-authors-target-the-content .pp-multiple-authors-boxes-li {
	border:none !important;
}



/* Subscribe Form */

.subscribe-form, .subscribe-form-email {
	z-index:3;
}
@media screen and (max-width:749px) {
.subscribe-form-email {
	display:inline-block;
	width:200px;
}
}




/* Image Z Index */

img {
	z-index:2;
	position:relative;
}

.orange-red-text-gradient {
	    background: linear-gradient(271.75deg, #F37B34 20.84%, #F83993 72.49%);
}

/* Blue Gradient Border Line */

.blue-gradient-border {
    position: relative;
    z-index: 1;
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
}

.blue-gradient-border::before {
    content: "";
    position: absolute;
    top: -2px;
    left: -2px;
    right: -2px;
    bottom: -2px;
    background: linear-gradient(180deg, #FFFFFF 0%, #3CBDED 100%);
    border-radius: 25px;
    z-index: -2;
}

.blue-gradient-border::after {
    content: "";
    position: absolute;
    top: -1px;
    left: -1px;
    right: -1px;
    bottom: -1px;
    background: black; /* Change this to match your site background */
    border-radius: 24px;
    z-index: -1;
}

/* Header Links */
h1 a, h2 a, h3 a, h4 a, h5 a, h6 a {
	color: currentColor;
	text-decoration:none;
}
/* Header Links - maintain appearance on hover */
h1 a:hover, h2 a:hover, h3 a:hover, h4 a:hover, h5 a:hover, h6 a:hover {
    color: currentColor;
}

.subscribe-form {
    display: flex;
    max-width: 600px;
    overflow: hidden;
	position:relative;
	z-index:3;
}

/* Email input styling */
.subscribe-form input[type="email"] {
    flex-grow: 1;
    padding: 16px 25px;
    border: none;
    font-size: 16px;
    background: white;
    color: #333;
    border-radius: 40px 0 0 40px;
	    height: 64px;
}

/* Button styling */
.subscribe-form input[type="submit"] {
	    padding: 0px 32px;
    border: none;
    background: linear-gradient(257.12deg, #F83993 13.45%, rgba(248, 57, 147, 0) 100.63%);
    color: white;
    text-transform: uppercase;
    cursor: pointer;
    border-radius: 0 40px 40px 0;
    font-size: 0.9rem;
    letter-spacing: .04em;
    height: 64px;
}

.subscribe-form input[type="submit"]:hover {
    background: linear-gradient(to right, #c62073, #d52e7b);
}





/* HIGHLIGHT PINK BARS - MOBILE */

@media only screen and (max-width: 749px) {
  .highlight-bar-pink-2::after {
        content: "";
        position: absolute;
        background-color: #ff5b9e;

        bottom: unset;
        left: -5%;
        z-index: -1;
	  
	  height: 50%;
        width: 110%;
        top: 50%;
        left: -5%;
  }
  
  .highlight-bar-pink-3::after {
      content: "";
        position: absolute;
        background-color: #ff5b9e;
        z-index: -1;
        height: 30%;
        width: 58%;
        top: 75%;
        left: -2%;
  }
	
	 .highlight-bar-pink-4::after {
        content: "";
        position: absolute;
        background-color: #ff5b9e;
        bottom: unset;
        height: 25%;
        width: 66%;
        top: 75%;
        left: -2%;
        z-index: -1;
  }
  
  .highlight-bar-pink-5::after {
    content: "";
    position: absolute;
    background-color: #ff5b9e;

    bottom: unset;
    right: unset;
    z-index: -1;
	  height: 50%;
        width: 110%;
        top: 50%;
        left: -5%;
  }

}


/* MAKE ANCHOR LINKS SMOOTH */
html {
  scroll-behavior: smooth;
}


/* Case Study Nav Buttons */

.dh-cs-nav-buttons {
display: flex;
gap:15px;
}
/* Styling for Splide custom navigation buttons */
.cs-splide__arrow--prev,
.cs-splide__arrow--next {
  position: relative;
  width: 70px;
  height: 70px;
  border-radius: 50%;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  background: transparent;
  transition: all 0.3s ease;
  z-index: 1;
}

/* Gradient border */
.cs-splide__arrow--prev::before,
.cs-splide__arrow--next::before {
  content: "";
  position: absolute;
  top: -2px;
  left: -2px;
  right: -2px;
  bottom: -2px;
  background: linear-gradient(180deg, #87ceeb, #a681ba, #e88b97, #f4b183, #f76c94);
  border-radius: 9999px;
  z-index: -2;
}

/* Inner background */
.cs-splide__arrow--prev::after,
.cs-splide__arrow--next::after {
  content: "";
  position: absolute;
  top: -1px;
  left: -1px;
  right: -1px;
  bottom: -1px;
  border-radius: 9999px;
  z-index: -1;
}

/* Left button (white) */
.cs-splide__arrow--prev::after {
  background: white;
}

/* Right button (gray) */
.cs-splide__arrow--next::after {
  background: #666;
}

.cs-splide__arrow--prev {
  color: #333;
}

.cs-splide__arrow--next {
  color: white;
}

/* Hover effect */
.cs-splide__arrow--prev:hover,
.cs-splide__arrow--next:hover {
  transform: scale(1.05);
}

.cs-splide__arrow--prev:active,
.cs-splide__arrow--next:active {
  transform: scale(0.95);
}

@media screen and (max-width:749px) {
.cs-splide__arrow--prev,
.cs-splide__arrow--next {
  position: relative;
  width: 36px;
  height: 36px;
}
}


/* CF7 - Response Form Styles */
.wpcf7 form .wpcf7-response-output {
    padding: 0.4em;
    text-align: center;
}

.wpcf7 form.sent .wpcf7-response-output {
    border-color: #9ee6a4;
}