.elementor-kit-5{--e-global-color-primary:#6EC1E4;--e-global-color-secondary:#54595F;--e-global-color-text:#7A7A7A;--e-global-color-accent:#61CE70;--e-global-typography-primary-font-family:"Roboto";--e-global-typography-primary-font-weight:600;--e-global-typography-secondary-font-family:"Roboto Slab";--e-global-typography-secondary-font-weight:400;--e-global-typography-text-font-family:"Roboto";--e-global-typography-text-font-weight:400;--e-global-typography-accent-font-family:"Roboto";--e-global-typography-accent-font-weight:500;color:#000000;font-family:"League Spartan", Sans-serif;font-size:clamp(14px, 1vw + 8px, 18px);font-weight:300;line-height:1.8rem;letter-spacing:clamp(0.28px, 0.1vw, 0.36px);}.elementor-kit-5 e-page-transition{background-color:#FFBC7D;}.elementor-kit-5 h1{color:#000000;font-family:"League Spartan", Sans-serif;font-size:clamp(40px, 5vw + 16px, 72px);text-transform:capitalize;line-height:4.95rem;letter-spacing:clamp(6px, 1.5vw, 11px);}.elementor-kit-5 h2{color:#000000;font-family:"League Spartan", Sans-serif;font-size:clamp(28px, 4vw + 16px, 48px);line-height:4.2rem;letter-spacing:clamp(3px, 1.5vw, 3px);}.elementor-kit-5 h3{color:#000000;font-family:"League Spartan", Sans-serif;font-size:clamp(24px, 4vw + 16px, 24px);font-weight:500;line-height:4.3rem;letter-spacing:clamp(2px, 1.5vw, 2.5px);}.elementor-kit-5 h4{color:#000000;font-family:"League Spartan", Sans-serif;font-size:clamp(20px, 2vw + 8px, 28px);font-weight:500;line-height:2.3rem;letter-spacing:clamp(2px, 0.5vw, 3px);}.elementor-kit-5 h5{color:#000000;font-family:"League Spartan", Sans-serif;font-size:clamp(16px, 1.5vw + 4px, 20px);line-height:1.75rem;letter-spacing:clamp(1.5px, 0.4vw, 2px);}.elementor-kit-5 h6{color:#000000;font-family:"League Spartan", Sans-serif;font-size:clamp(14px, 1.2vw + 1.6px, 16px);line-height:1.5rem;letter-spacing:clamp(1.4px, 0.3vw, 1.6px);}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1140px;}.e-con{--container-max-width:1140px;}.elementor-widget:not(:last-child){--kit-widget-spacing:20px;}.elementor-element{--widgets-spacing:20px 20px;--widgets-spacing-row:20px;--widgets-spacing-column:20px;}{}h1.entry-title{display:var(--page-title-display);}.elementor-lightbox{--lightbox-header-icons-size:16px;}@media(max-width:1024px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:1024px;}.e-con{--container-max-width:1024px;}}@media(max-width:767px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:767px;}.e-con{--container-max-width:767px;}}:root { --color-plum-950:#190927; --color-plum-900:#1C0C29; --button-p-color:#ffffff00; --font-primary:League Spartan; --colour-yellow:#E3BB49; --eyebrow-color:#E3BB49; --pd-lr-rt-mobile:20px; --pd-tp-bt:60px; --pd-lr-rt:60px; --color-brand-orange:#f28500; --color-icon:#f28500; --color-gd-start:#f28500; --color-gd-end:#3a1329; --text-light:#f4f4f5; --color-text-dark:#110b29; --color-heading-light:#ffffff; --color-heading-dark:#110b29; --divider-color:#E3BB49; --secondry-border-color:#e3e3e3; --ttm-brand-yellow:#f7ce45; --color-black:#000; }
/* Start custom CSS */a {
    color: inherit;
    text-decoration: inherit;
}
 
 ::-webkit-scrollbar-track {
                -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
                background-color: #ffffff;
            }

            ::-webkit-scrollbar {
                width: 6px;
                background-color: #ffffff;
            }

            ::-webkit-scrollbar-thumb {
                border-radius: 5px;
                background-color:#1C0C29;
            }
            
            
            
            .underline-class {
    
    width: 100%;
    background-repeat: no-repeat;
    background-image: linear-gradient(transparent calc(100% - 2px), currentColor 2px);
    transition: .9s 
cubic-bezier(.32, .32, .15, 1.17);
    background-size: 0% 100%; }
    
    .underline-class:hover {
        background-size: 100% 100%
    }
    
    /* 1. Ensure the SVG is a normal button size (override the 800px) */
.btn-s-svg {
  width: 24px !important;  /* Change this number if you want it bigger/smaller */
  height: 24px !important;
  display: inline-block;   /* Required for the animation to work */
}

/* 2. Smooth color transition for text and SVG paths */
.btn-container .btn-s-con,
.btn-container .btn-s-svg path {
  transition: all 0.3s ease;
}

/* 3. Change Text Color on Parent Hover */
.btn-container:hover .btn-s-con {
  color: #E3BB49 !important; 
}

/* 4. Change SVG Color on Parent Hover */
/* This targets your specific paths to override the hardcoded fill="#fff" */
.btn-container:hover .btn-s-svg path {
  fill: #E3BB49 !important;
}

/* 5. Trigger the Animation on Parent Hover */
.btn-container:hover .btn-s-svg {
  animation: shootArrow 0.5s ease-in-out forwards;
}

/* 6. The Shooting Arrow Animation */
@keyframes shootArrow {
  0% {
    transform: translate(0, 0);
    opacity: 1;
  }
  40% {
    transform: translate(15px, -15px); /* Shoots up and right */
    opacity: 0;                        /* Fades out */
  }
  50% {
    transform: translate(-15px, 15px); /* Instantly moves to bottom-left while invisible */
    opacity: 0;
  }
  100% {
    transform: translate(0, 0);        /* Glides back to original position */
    opacity: 1;                        /* Fades back in */
  }
}





/* Target your specific Elementor flexbox container */
.elementor-element-f97d3a5 {
    position: relative;
    overflow: visible !important;
    z-index: 1; /* Establishes a stacking context */
}

/* Default (Desktop): Create the offset wireframe border */
/* FIXED: Removed the space before ::after */
.elementor-element-f97d3a5::after {
    content: "";
    position: absolute;
    top: -30px;    /* Vertical offset */
    right: -30px;  /* Horizontal offset */
    width: 90%;
    height: 90%;
    border: 1px solid #cca35e; /* Gold color */
    z-index: -1; /* Puts the border strictly behind the container's content */
    pointer-events: none;
    transition: all 0.3s ease-in-out;
}

/* Ensure the image sits above the border */
.elementor-element-f97d3a5 img.img-special {
    position: relative;
    z-index: 2;
}

/* TABLET (Screens up to 1024px wide) */
@media (max-width: 1024px) {
    .elementor-element-f97d3a5::after {
        top: -20px;   
        right: -20px; 
        width: 95%;   
        height: 95%;
    }
}

/* MOBILE (Screens up to 767px wide) */
@media (max-width: 767px) {
    .elementor-element-f97d3a5::after {
        top: -10px;   
        right: -10px; 
        width: 100%;  
        height: 100%; 
    }
}

.founder-gradient-border {
    border: 2px solid transparent !important;  /* Adjust thickness here */
    
    /* Change the hex codes and angle (135deg) to match your branding */
    border-image: linear-gradient(135deg, #cca35e 0%, #8c4314 100%) !important;
    
    /* Required property to make the gradient stretch across the border */
    border-image-slice: 1 !important; 
}


/* Desktop & Tablet: Fading gradient border on the right */
.flex-border {
    border-right: 2px solid transparent; 
    
    /* Fades from transparent at the top, to gold in the middle, to transparent at the bottom */
    border-image: linear-gradient(to bottom, transparent 0%, #cca35e 50%, transparent 100%);
    border-image-slice: 1;
}

/* Mobile: Fading gradient border moves to the bottom */
@media (max-width: 800px) {
    .flex-border {
        border-right: none; /* Removes the desktop right border */
        border-bottom: 2px solid transparent; /* Adds the mobile bottom border */
        
        /* Fades from transparent on the left, to gold in the middle, to transparent on the right */
        border-image: linear-gradient(to right, transparent 0%, #cca35e 50%, transparent 100%);
        border-image-slice: 1;
        
        /* Add spacing so the elements don't touch the border */
        padding-bottom: 30px;
        margin-bottom: 30px;
    }
}


/* DESKTOP (Default) */
.chevron-grid > .e-con {
    position: relative;
    padding-right: 25px; /* Creates physical space for the right-pointing arrow */
}

.chevron-grid > .e-con:not(:last-child)::after {
    content: "";
    position: absolute;
    right: 0;
    top: 50%;
    width: 10px;
    height: 10px;
    border-top: 2px solid #E3BB49;
    border-right: 2px solid #E3BB49;
    transform: translateY(-50%) rotate(45deg); /* Arrow points right */
}

/* TABLET (Screens up to 1024px) */
@media (max-width: 1024px) {
    .chevron-grid > .e-con {
        padding-right: 0; /* Remove desktop right padding */
        padding-bottom: 35px; /* Add bottom padding to stop content from overlapping */
    }

    .chevron-grid > .e-con:not(:last-child)::after {
        right: 50%;
        top: auto;
        bottom: 5px; /* Pushes the arrow slightly up from the container edge */
        transform: translateX(50%) rotate(135deg); /* Arrow points down */
    }
}

/* MOBILE (Screens up to 767px) */
@media (max-width: 767px) {
    .chevron-grid > .e-con {
        padding-bottom: 25px; /* Tighter bottom spacing for smaller mobile screens */
    }

    .chevron-grid > .e-con:not(:last-child)::after {
        width: 8px;  /* Slightly smaller arrow for mobile */
        height: 8px;
        bottom: 0;   /* Sits flush at the bottom */
        /* The downward rotation is inherited from the Tablet breakpoint */
    }
}/* End custom CSS */