/*
Theme Name: Uncode Child
Description: Child theme for Uncode theme
Author: Undsgn™
Author URI: http://www.undsgn.com
Template: uncode
Version: 1.0.0
Text Domain: uncode
*/

/***START ROOT STYLES***/

:root {
    /* Border Radius Variables */
    --radius-small: 16px;
    --radius-medium: 20px;
    --radius-large: 26px;

    /* Electric Violet Colors */
    --electric-violet: #6442FF;
    --electric-violet-lightest: #EFECFF;
    --electric-violet-lighter: #E0D9FF;
    --electric-violet-light: #927AFF;
    --electric-violet-dark: #5034CC;
    --electric-violet-darker: #281A66;
    --electric-violet-darkest: #1E134C;

    /* Radical Red Colors */
    --radical-red: #FE416F;
    --radical-red-lightest: #FEECF0;
    --radical-red-lighter: #FED9E2;
    --radical-red-light: #FE7A9A;
    --radical-red-dark: #CB3458;
    --radical-red-darker: #651A2C;
    --radical-red-darkest: #4C1321;

    /* Neutral Colors */
    --neutral-white: #FFFFFF;
    --neutral-lightest: #F2F2F2;
    --neutral-lighter: #D8D8D8;
    --neutral-light: #B2B2B2;
    --neutral: #7F7F7F;
    --neutral-dark: #4C4C4C;
    --neutral-darker: #191919;
    --neutral-darkest: #000000;
}

/***FINISH ROOT STYLES***/
/****************************************************************************************************************/

/***START COLOUR SCHEMES VARIABLES***/

/* Color Schemes */
.color-scheme-1 {
    --text-color: var(--neutral-darkest);
    --background-color: var(--neutral-white);
    --accent-color: var(--electric-violet);
    --foreground-color: var(--neutral-lightest);
    --border-color: rgba(0, 0, 0, 0.15);
    
    color: var(--text-color);
    background-color: var(--background-color);
}

.color-scheme-2 {
    --text-color: var(--neutral-darkest);
    --background-color: var(--neutral-lightest);
    --accent-color: var(--electric-violet);
    --foreground-color: var(--neutral-white);
    --border-color: rgba(0, 0, 0, 0.15);
    
    color: var(--text-color);
    background-color: var(--background-color);
}

.color-scheme-3 {
    --text-color: var(--neutral-darkest);
    --background-color: var(--electric-violet-lightest);
    --accent-color: var(--electric-violet);
    --foreground-color: var(--electric-violet-lighter);
    --border-color: rgba(0, 0, 0, 0.15);
    
    color: var(--text-color);
    background-color: var(--background-color);
}

.color-scheme-4 {
    --text-color: var(--neutral-white);
    --background-color: var(--neutral-darkest);
    --accent-color: var(--neutral-white);
    --foreground-color: var(--neutral-darker);
    --border-color: rgba(255, 255, 255, 0.2);
    
    color: var(--text-color);
    background-color: var(--background-color);
}

/***FINISH COLOUR SCHEMES VARIABLES***/
/****************************************************************************************************************/
/***START COLOUR SCHEMES MISC STYLES***/

/* Common styles for all color schemes */
[class*="color-scheme-"] {
    border-color: var(--border-color);
}

/****************************************************************************************************************/

/* Utility classes for color scheme elements */
[class*="color-scheme-"] .text {
    color: var(--text-color);
}

/****************************************************************************************************************/

[class*="color-scheme-"] .background {
    background-color: var(--background-color);
}

[class*="color-scheme-"] .accent {
    color: var(--accent-color);
}

[class*="color-scheme-"] .foreground {
    background-color: var(--foreground-color);
}

[class*="color-scheme-"] .border {
    border-color: var(--border-color);
}

/* Links within color schemes */
[class*="color-scheme-"] a {
    color: var(--accent-color);
}

[class*="color-scheme-"] a:hover {
    color: var(--text-color);
}

/****************************************************************************************************************/

/* Borders within color schemes */
[class*="color-scheme-"] .border-element {
    border: 1px solid var(--border-color);
}

/***FINISH COLOUR SCHEMES MISC STYLES***/
/****************************************************************************************************************/
/***START BUTTON STYLES***/

.btn,
.btn-link {
  font-size: inherit;
}

/* Base Button Styles */
a[class*="btn-"],
button[class*="btn-"],
.btn-container [class*="btn-"] {
    display: inline-block;
    padding: 12px 24px;
    border-radius: var(--radius-large);
    text-decoration: none;
    font-weight: 500;
    transition: all 0.3s ease;
}

/* Electric Violet Buttons */
.btn-electric-violet {
    background-color: var(--electric-violet);
    color: var(--neutral-white);
}
.btn-electric-violet:hover {
    background-color: var(--electric-violet-dark);
    color: var(--neutral-white);
}

.btn-electric-violet-light {
    background-color: var(--electric-violet-lighter);
    color: var(--electric-violet);
}
.btn-electric-violet-light:hover {
    background-color: var(--electric-violet);
    color: var(--neutral-white);
}

.btn-electric-violet-border {
    border: 2px solid var(--electric-violet);
    color: var(--electric-violet);
    background: transparent;
}
.btn-electric-violet-border:hover {
    background-color: var(--electric-violet);
    color: var(--neutral-white);
}

/****************************************************************************************************************/

/* Radical Red Buttons */
.btn-radical-red {
    background-color: var(--radical-red);
    color: var(--neutral-white);
}
.btn-radical-red:hover {
    background-color: var(--radical-red-dark);
    color: var(--neutral-white);
}

.btn-radical-red-light {
    background-color: var(--radical-red-lighter);
    color: var(--radical-red);
}
.btn-radical-red-light:hover {
    background-color: var(--radical-red);
    color: var(--neutral-white);
}

.btn-radical-red-border {
    border: 2px solid var(--radical-red);
    color: var(--radical-red);
    background: transparent;
}
.btn-radical-red-border:hover {
    background-color: var(--radical-red);
    color: var(--neutral-white);
}

/****************************************************************************************************************/

/* Neutral Buttons */
.btn-neutral-dark {
    background-color: var(--neutral-darker)!important;
    color: var(--neutral-white)!important;
}
.btn-neutral-dark:hover {
    background-color: var(--neutral-dark)!important;
    color: var(--neutral-white)!important;
}

.btn-neutral-light {
    background-color: var(--neutral-lightest)!important;
    color: var(--neutral-darker)!important;
}
.btn-neutral-light:hover {
    background-color: var(--neutral-lighter)!important;
    color: var(--neutral-darker)!important;
}

.btn-white-border {
    border: 2px solid var(--neutral-white)!important;
    color: var(--neutral-white)!important;
    background: transparent;
}
.btn-white-border:hover {
    background-color: var(--neutral-white)!important;
    color: var(--neutral-darker)!important;
}

.btn-white {
    border: 2px solid var(--neutral-white)!important;
    color: var(--neutral-darker)!important;
    background-color: var(--neutral-white)!important;
}
.style-light .btn-white:hover,
.style-dark .btn-white:hover,
.style-light.btn-white:hover,
.style-dark.btn-white:hover,
.skin-links > .style-light .btn-white:hover,
.skin-links > .style-dark .btn-white:hover {
    border: 2px solid var(--neutral-white);
    color: var(--neutral-white) !important;
    background: transparent!important;
}
.btn-grey-black {
    border: 2px solid var(--neutral-lightest)!important;
    color: var(--neutral-darker)!important;
    background-color: var(--neutral-lightest)!important;
}
.style-light .btn-grey-black:hover,
.style-dark .btn-grey-black:hover,
.style-light.btn-grey-black:hover,
.style-dark.btn-grey-black:hover,
.skin-links > .style-light .btn-grey-black:hover,
.skin-links > .style-dark .btn-grey-black:hover {
    border: 2px solid var(--neutral-darkest);
    color: var(--neutral-white) !important;
    background: var(--neutral-darkest)!important;
}

.btn-black {
    border: 2px solid var(--neutral-darkest)!important;
    color: var(--neutral-white)!important;
    background-color: var(--neutral-darkest)!important;
}

.btn-black:hover {
    border: 2px solid var(--neutral-darkest)!important;
    color: var(--neutral-darkest)!important;
    background-color: transparent!important;
}

/* Gradient Button */
.gradient-btn {
    display: inline-block;
    background-color: rgba(255, 255, 255, 0.05); /* White 5% */
    color: var(--neutral-white) !important;
    padding: 12px 24px;
    border-radius: var(--radius-medium); /* 16px */
    text-decoration: none !important;
    font-weight: 600;
    transition: all 0.3s ease;
    position: relative;
    z-index: 1;
    border: none;
    margin: 20px 5px;
}

/* Gradient hover effect */
.gradient-btn:before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: linear-gradient(to right, var(--electric-violet), var(--radical-red));
    border-radius: var(--radius-medium); /* 16px */
    z-index: -1;
    transition: opacity 0.3s ease;
    opacity: 0;
}

.gradient-btn:hover:before {
    opacity: 1;
}

.gradient-btn:hover {
    color: var(--neutral-white) !important;
}

/***FINISH BUTTON STYLES***/
/****************************************************************************************************************/
/***START GENERAL STYLES***/
.footer-scroll-top {
    bottom: 100px;
}
a.scroll-top i {
    border-radius: 50% !important;
    width: 3em!important;
    height: 3em!important;
    line-height: 3em!important;
}
/* Scope by body page classes to raise specificity without being global */
.page .scroll-to-content-arrow.scroll-to-content-arrow {
  margin-top: 30px !important;
}

.page .scroll-to-content-arrow.scroll-to-content-arrow a {
  padding: 0 !important;
  background-color: rgba(255, 255, 255, 0.05) !important;
  border: 1px solid rgba(255, 255, 255, 0.05) !important;
}

.page .scroll-to-content-arrow.scroll-to-content-arrow a:hover {
  background-color: var(--neutral-white) !important;
  border: 1px solid var(--neutral-white) !important;
}

.gradient-text {
    background: linear-gradient(to bottom, var(--electric-violet), var(--radical-red));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    color: transparent; /* Standard alternative to text-fill-color */
    display: inline-block; /* Needed for proper gradient rendering */
}
.text-block-rollover {
  background: var(--neutral-lightest);
  border-radius: 26px;
  color: var(--neutral-darkest); /* ensure a base color */
}

.text-block-rollover:hover {
    background: var(--neutral-darkest);
    color: var(--neutral-lightest);
    -moz-transition: all .4s ease-in-out!important;
    -o-transition: all .4s ease-in-out!important;
    -webkit-transition: all .4s ease-in-out!important;
    transition: all .4s ease-in-out!important;  
}

/* Force headings inside to switch color on hover */
.text-block-rollover:hover h1,
.text-block-rollover:hover h2,
.text-block-rollover:hover h3,
.text-block-rollover:hover h4,
.text-block-rollover:hover h5,
.text-block-rollover:hover h6 {
    color: var(--neutral-lightest) !important;
    -moz-transition: all .4s ease-in-out!important;
    -o-transition: all .4s ease-in-out!important;
    -webkit-transition: all .4s ease-in-out!important;
    transition: all .4s ease-in-out!important;  
}
.owl-dots .owl-dot:hover span, .owl-dots .owl-dot.active span  {
    background: var(--neutral-darker)!important;
}
.case-study-result-row .counter-item p span {
    background: linear-gradient(to bottom, var(--electric-violet), var(--radical-red));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    display: inline-block; /* Required for the gradient to show properly */
}
/***FINISH GENERAL STYLES***/
/****************************************************************************************************************/

/***START UTILITY STYLES***/

/* Utility classes for applying radius to other elements */
.radius-small , .radius-small img {
    border-radius: var(--radius-small);
}

.radius-medium, .radius-medium img {
    border-radius: var(--radius-medium);
}

.radius-large, .radius-large img {
    border-radius: var(--radius-large);
}

.radius-26, .radius-26 img {
    border-radius: var(--radius-large);
}
/* 1) Make the column chain provide a real height */
.media-height-full,
.media-height-full > .uncol,
.media-height-full > .uncol > .uncoltable,
.media-height-full > .uncol > .uncoltable > .uncell {
  height: 100%;
}

/* 2) Uncode content wrapper can collapse height – stretch it */
.media-height-full > .uncol > .uncoltable > .uncell > .uncont {
  height: 100%;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

/* 3) Stretch the media wrappers */
.media-height-full .uncode-single-media,
.media-height-full .uncode-single-media .single-wrapper,
.media-height-full .uncode-single-media .tmb,
.media-height-full .uncode-single-media .t-inside,
.media-height-full .uncode-single-media .t-entry-visual,
.media-height-full .uncode-single-media .t-entry-visual-tc,
.media-height-full .uncode-single-media .uncode-single-media-wrapper {
  height: 100%;
  min-height: 0;
}

/* 4) Make the image fill and crop */
.media-height-full .uncode-single-media .uncode-single-media-wrapper > img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center;
}

/* 5) Neutralize inline max-width on .single-wrapper */
.media-height-full .uncode-single-media .single-wrapper[style] {
  max-width: none !important;
}

/* 6) Keep overflow tidy */
.media-height-full .uncode-single-media,
.media-height-full .uncode-single-media .t-entry-visual,
.media-height-full .uncode-single-media .uncode-single-media-wrapper {
  overflow: hidden;
}

/***FINISH UTILITY STYLES***/
/****************************************************************************************************************/
/***START HEADER STYLES***/

/* Control initial logo size before any menu behaviors */
#main-logo .logo-customizer img {
    height: 36px !important;
    width: auto !important;
    max-height: 36px !important;
}

/****************************************************************************************************************/

ul#menu-cta-uncode-top-menu {
    padding: 0 !important;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
}
li.menu-cta-button {
    height: auto !important;
}
ul#menu-cta-uncode-top-menu li.menu-cta-button a {
    background-color: var(--neutral-darker) !important; /* #191919 */
    color: var(--neutral-white) !important; /* #FFFFFF */
    padding-top: 12px!important;
    padding-bottom: 12px!important;
    padding-left: 24px!important;
    padding-right: 24px!important;
    border-radius: var(--radius-medium) !important; /* 16px */
    border: 2px solid var(--neutral-darker) !important; /* Same as background */
    transition: all 0.3s ease !important;
}

ul#menu-cta-uncode-top-menu li.menu-cta-button a:hover {
    background-color: transparent !important;
    color: var(--neutral-darker) !important; /* #191919 */
    border: 2px solid var(--neutral-darker) !important;
}
/* Fix menu arrow position */
.mega-menu > a > i.menu-icon {
    float: right !important;
    margin-left: 5px !important;
    margin-right: 0 !important;
    order: 2 !important;
}

/* Hide the redundant dropdown arrow */
.mega-menu > a > i.fa-angle-down.fa-dropdown {
    display: none !important;
}
ul#menu-base-footer-menu li a, div#footer-subscribe-privacy-text a {
    text-decoration: underline;
}

/***FINISH HEADER STYLES***/
/****************************************************************************************************************/
/***START FOOTER STYLES***/

footer .t-entry-visual {
    border-radius: 0!important;
}

ul#menu-base-footer-menu, .menu-smart > li a:first-child, ul#menu-services-footer-menu {
    padding-left: 0;
}
#footer-base > div:first-child {
    position: relative;
}
#footer-base > div:first-child::before {
    content: "";
    position: absolute;
    top: 0;
    left: 36px; /* Padding from left */
    right: 36px; /* Padding from right */
    height: 1px;
    background-color: rgba(255, 255, 255, 0.2) !important;
}

/* Email input field */
#gform_17 input[type=email] {
    background-color: rgba(255, 255, 255, 0.1) !important;
    border: none !important;
    border-radius: var(--radius-medium) !important; /* 16px */
    color: var(--neutral-white) !important;
    padding: 10px 15px !important;
    height: 48px !important;
    width: 100% !important;
}

/* Submit button */
#gform_17 input[type=submit] {
    background-color: rgba(255, 255, 255, 0.1) !important; /* Same as input */
    color: var(--neutral-white) !important;
    border: none !important;
    border-radius: var(--radius-medium) !important; /* 16px */
    padding: 10px 24px !important;
    height: 48px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    white-space: nowrap !important;
    margin-top: 0 !important;
}

/* Button hover state */
#gform_17 input[type=submit]:hover {
    background-color: rgba(255, 255, 255, 0.2) !important;
}

/* Placeholder styling */
::placeholder {
    color: rgba(255, 255, 255, 0.6) !important; /* 60% white */
    opacity: 1 !important;
}

/* For older browsers */
::-webkit-input-placeholder {
    color: rgba(255, 255, 255, 0.6) !important;
    opacity: 1 !important;
}

::-moz-placeholder {
    color: rgba(255, 255, 255, 0.6) !important;
    opacity: 1 !important;
}

:-ms-input-placeholder {
    color: rgba(255, 255, 255, 0.6) !important;
    opacity: 1 !important;
}

/* Fix alignment and width distribution */
#gform_fields_17 {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    width: 100% !important;
}

/* Make email field take more space */
#field_17_1 {
    flex: 3 !important; /* Take 3x space compared to button */
    margin-bottom: 0 !important;
    width: auto !important; /* Override Gravity Forms width */
}

#field_submit {
    flex: 1 !important; /* Take less space */
    margin-bottom: 0 !important;
    width: auto !important; /* Override Gravity Forms width */
}

/* Make sure fields are visible */
.gfield--width-half {
    display: inline-block !important;
    visibility: visible !important;
    opacity: 1 !important;
    width: auto !important; /* Override half width */
}

/* Fix container width */
.gform_body, .gform_fields {
    width: 100% !important;
}

/* Reduce space after form */
.gform-footer.gform_footer.top_label {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
}

#gform_wrapper_17 {
    margin-bottom: 0 !important;
}

/* Adjust spacing for privacy text */
.vc_custom_1758015001136 {
    margin-top: 8px !important; /* Adjust this value as needed */
}

/***FINISH FOOTER STYLES***/
/****************************************************************************************************************/
/***START HERO STYLES***/

.homepage-intro .gradient-text {
    background: linear-gradient(to bottom, var(--electric-violet), var(--radical-red));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    color: transparent; /* Standard alternative to text-fill-color */
    display: inline-block; /* Needed for proper gradient rendering */
    margin-top: 30px!important;
}

/***FINISH HERO STYLES***/
/****************************************************************************************************************/
/***START TESTIMONIAL CONTENT STYLES***/

div#testimonial-slider {
    padding-left: 25%!important;
    padding-right: 25%!important;
}

/* Reset the slider height */
#testimonial-slider .owl-stage-outer {
    height: auto !important;
    min-height: 400px !important;
}

/* Style the quote */
#testimonial-slider .uncode_text_column h2 {
    margin-bottom: 30px;
    font-style: italic;
}

/* Create a flex container for avatar and name */
#testimonial-slider .uncont {
    position: relative !important;
}

/* Wrap the avatar and name in a flex container */
#testimonial-slider .testimonail-avatar,
#testimonial-slider .testimonial-name-position {
    display: inline-block !important;
    vertical-align: middle !important;
}

#testimonial-slider .testimonail-avatar {
    width: 100px !important;
}

#testimonial-slider .testimonial-name-position {
    width: calc(100% - 110px) !important;
    padding-left: 10px !important;
}

/* Make the avatar circular and properly sized */
#testimonial-slider .testimonail-avatar img {
    width: 80px !important;
    height: 80px !important;
    border-radius: 50% !important;
    object-fit: cover !important;
}

/* Style the name and position */
#testimonial-slider .testimonial-name-position p {
    margin-bottom: 0 !important;
    line-height: 1.4 !important;
}

#testimonial-slider .testimonial-name-position p strong {
    font-size: 18px !important;
    font-weight: 600 !important;
}

.uncode-owl-nav .uncode-owl-nav-in {
    margin: 0 45px!important;
}
.uncode-single-media.testimonail-avatar.text-center, #testimonial-slider .testimonial-name-position {
    margin-bottom: 40px;
}

/***FINISH TESTIMONIAL CONTENT STYLES***/
/****************************************************************************************************************/
/***START HOME PAGE SERVICE BOX STYLES***/

/* Gradient Box Component for Text Blocks */
.gradient-box {
    position: relative;
    overflow: hidden;
    transition: all 0.3s ease;
    cursor: pointer;
    padding: 20px !important;
    background-color: rgba(255, 255, 255, 0.05) !important; /* 5% white */
    border-radius: var(--radius-medium, 16px);
    margin: 10px !important;
    display: block;
}

.gradient-box:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(to right, var(--electric-violet), var(--radical-red));
    z-index: 0;
    opacity: 0;
    transition: opacity 0.3s ease;
    border-radius: var(--radius-medium, 16px);
}

/* Make sure the text stays on top of the gradient */
.gradient-box > * {
    position: relative;
    z-index: 1;
}

/* Default text color */
.gradient-box * {
    transition: color 0.3s ease;
}

/* Hover effects */
.gradient-box:hover:before {
    opacity: 1;
}

.gradient-box:hover {
    transform: rotate(2deg);
}

.gradient-box:hover * {
    color: var(--neutral-white) !important;
}

/* SVG Icon Styling */
.gradient-box .gradient-icon {
    margin-bottom: 15px;
    display: block;
}

.gradient-box .gradient-icon .icon-path {
    fill: transparent;
    transition: fill 0.3s ease;
}

.gradient-box .gradient-icon .icon-path-gradient {
    transition: opacity 0.3s ease;
}

/* On hover, show white fill and hide gradient */
.gradient-box:hover .gradient-icon .icon-path {
    fill: white !important;
}

.gradient-box:hover .gradient-icon .icon-path-gradient {
    opacity: 0;
}
.icon-container {
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  margin-bottom: 15px;
}

.icon-container svg {
  max-height: 40px;
  width: auto;
}
/***FINISH HOME PAGE SERVICE BOX STYLES***/
/****************************************************************************************************************/
/***START LOGO SLIDER STYLES***/

/* Apply border radius to the main carousel container */
.logo-slider .owl-carousel-container {
    border-radius: 50px !important;
}

/* Ensure the stage outer container respects the border radius */
.logo-slider .owl-stage-outer {
    border-radius: 50px !important;
}

/* Make sure overflow is properly handled */
.logo-slider .un-media-gallery {
    overflow: hidden !important;
    border-radius: 50px !important;
}

/* Target the row container as well */
.logo-slider.row-container {
    border-radius: 50px !important;
}
.logo-slider .owl-stage-outer {
    border-radius: 50px !important;
    padding-top: 20px !important;
    padding-bottom: 20px !important;
}
.logo-slider-wrapper {
    padding-left: 10%;
    padding-right: 10%;
}
.logo-slide-wrapper {
    padding-top: 30px;
    padding-bottom: 20px;
}
.logo-slider-wrapper, .logo-slide-wrapper, .logo-slider-column-wrapper {
    border-radius: 50px !important;
}

/***FINISH LOGO SLIDER STYLES***/
/****************************************************************************************************************/
/***START POST CARD STYLES***/

/* Rounded corners for post images and overlays */
.posts-row .t-entry-visual,
.posts-row .t-entry-visual .t-entry-visual-overlay,
.posts-row .t-entry-visual .t-entry-visual-overlay-in {
  border-radius: 26px !important;
  overflow: hidden;
}

/* Categories (left) + Reading time (right) in one row */
.posts-row .t-entry .t-entry-meta,
.posts-row .t-entry .t-entry-comments {
  display: contents;
}

.posts-row .t-entry .t-entry {
  display: flex;
  align-items: center; /* vertically center both groups */
  gap: 16px;
  flex-wrap: wrap;
}

.posts-row .t-entry .t-entry-meta { order: 1; }
.posts-row .t-entry .t-entry-comments { order: 2; margin-left: auto; }

/* Ensure inner items align vertically */
.posts-row .t-entry .t-entry-meta,
.posts-row .t-entry .t-entry-comments,
.posts-row .t-entry .t-entry-comments .extras-wrap,
.posts-row .t-entry .t-entry-category,
.posts-row .t-entry .t-entry-category a {
  display: inline-flex;
  align-items: center; /* vertical centering */
}

/* Reading-time spacing (icon + text) */
.posts-row .t-entry .t-entry-comments .extras-wrap {
  gap: 6px;
}

/* Category list polish */
.posts-row .t-entry .t-entry-category a { white-space: nowrap; }
.posts-row .t-entry .cat-comma { margin: 0 4px; }

/* Small screens — stack time below */
@media (max-width: 600px) {
 .posts-row .t-entry .t-entry-comments { margin-left: 0; order: 3; }
}

/* If any extra right-padding sneaks in from theme */
.posts-row .t-entry .t-entry-comments .extras { padding-left: 10px; }

/* Category pills with gradient hover (no lift/movement) */
.posts-row .t-entry .t-entry-category a {
  position: relative;
  z-index: 1;
  background-color: rgba(255, 255, 255, 0.05);
  color: var(--neutral-white) !important;
  padding: 8px 16px;
  border-radius: var(--radius-large); /* 26px pill */
  text-decoration: none !important;
  font-weight: 600;
  font-size: 13px;
  line-height: 1; /* keep compact height */
  border: none;
  transition: color .3s ease, background-color .3s ease, opacity .3s ease;
  overflow: hidden; /* contain the overlay */
}

/* Gradient overlay */
.posts-row .t-entry .t-entry-category a::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to right, var(--electric-violet), var(--radical-red));
  border-radius: inherit;
  z-index: -1;
  opacity: 0;
  transition: opacity .3s ease;
}

.posts-row .t-entry .t-entry-category a:hover::before,
.posts-row .t-entry .t-entry-category a:focus::before {
  opacity: 1;
}

.posts-row .t-entry .t-entry-category a:hover,
.posts-row .t-entry .t-entry-category a:focus {
  color: var(--neutral-white) !important;
  /* removed translateY lift to prevent movement */
}

/* Remove commas between categories now that pills are used */
.posts-row .t-entry .cat-comma { display: none !important; }

/* Horizontal spacing between pills */
.posts-row .t-entry .t-entry-category {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 8px;
}

/* Light skin adjustments (ghost look) */
.posts-row .style-light .t-entry .t-entry-category a {
  background: rgba(0, 0, 0, 0.05);
  color: var(--neutral-darker);
}

.posts-row .style-light .t-entry .t-entry-category a:hover {
  background: linear-gradient(90deg, var(--electric-violet), var(--radical-red));
  color: var(--neutral-white);
}

/* Spacing from reading-time row */
.posts-row .t-entry .t-entry-meta { gap: 8px; }


/***FINISH POST CARD STYLES***/
/****************************************************************************************************************/
/***START ACCORDION STYLES***/

.panel-title > a > span {
    font-size: 26px;
    font-weight: 600;
    line-height: 100%;
}
body .panel-group .panel.has-active-bg:not(.active-group) {
    margin: 30px 0;
    background: var(--neutral-lightest)!important;
    border-radius: 26px !important;
}
.plus-signed.sign-size-md .panel-title > a > span:after {
    font-size: 1em;
}

/***FINISH ACCORDION STYLES***/
/****************************************************************************************************************/
/***START CTA ROW STYLES***/
/* Main row positioning context */
.ct-row-wrapper, .cta-column-right {
    position: relative !important;
    overflow: visible !important;
}

/* Phone positioning */
/* Desktop default */
.cta-column-right .uncode-single-media {
    position: absolute !important;
    right: 0;
    bottom: -233px;
    width: 80% !important;
    z-index: 999;
}

.page-id-131160 .cta-column-right .uncode-single-media {
    bottom: -270px;
    width: 90% !important;
}

/* Tablet Landscape */
@media (max-width: 1024px) {
    .cta-column-right .uncode-single-media {
        bottom: -300px;
        width: 60% !important;
        right: 40px;
    }
}

/* Tablet Portrait */
@media (max-width: 768px) {
    .cta-column-right .uncode-single-media {
        bottom: -250px;
        width: 50% !important;
        right: 30px;
    }
}

/* Mobile */
@media (max-width: 480px) {
    .cta-column-right .uncode-single-media {
        bottom: -200px;
        width: 45% !important;
        right: 25px;
    }
}

.cta-column-right .uncode-single-media img {
    width: 100% !important;
    height: auto !important;
}

/* Keep containers stable */
.cta-column-right .uncol,
.cta-column-right .uncoltable,
.cta-column-right .uncell,
.cta-column-right .uncont,
.cta-column-right .single-wrapper,
.cta-column-right .tmb,
.cta-column-right .t-inside,
.cta-column-right .t-entry-visual,
.cta-column-right .t-entry-visual-tc,
.cta-column-right .uncode-single-media-wrapper {
    height: auto !important;
    width: 100% !important;
    line-height: normal !important;
}

/***FINISH CTA ROW STYLES***/
/****************************************************************************************************************/
/***START CLIENT LOGOS STYLES***/

/* Round the visual container and the image so corners clip consistently */

.clients-block .tmb .t-entry-visual,
.clients-block .tmb .t-entry-visual-cont,
.clients-block .tmb .t-entry-visual-cont > a,
.clients-block .tmb .t-entry-visual-cont > a > img {
  border-radius: 26px; /* adjust radius */
  overflow: hidden;    /* ensure overlay + image clip to radius */
  padding: 20px;
}

/* Bottom-only shadow via offset + negative spread */
.clients-block .tmb .t-entry-visual-cont > a > img {
  display: block;
  box-shadow: 0 14px 24px -16px rgba(0,0,0,0.4);
}
/***FINISH CLIENT LOGOS STYLES***/
/****************************************************************************************************************/
/***START STAFF CAROUSEL STYLES***/

/* Base image container */
.submerge-staff-slider-wrapper .tmb .t-entry-visual {
    position: relative;
    transition: transform 0.3s ease;
    will-change: transform;
    transform-origin: center center;
}

/* Twist effect on hover */
.submerge-staff-slider-wrapper .tmb:hover .t-entry-visual {
    transform: rotate(5deg) translateX(5px);
}

/* Overlay positioned exactly over the image */
.staff-quote-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
    z-index: 2;
}

/* Show overlay on hover */
.submerge-staff-slider-wrapper .tmb:hover .staff-quote-overlay {
    opacity: 1;
}

/* Overlay background with diagonal gradient */
.staff-quote-overlay__bg {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(45deg, var(--electric-violet), var(--radical-red) 100%);
    border-radius: inherit;
}

/* Quote text container */
.staff-quote-overlay__content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 80%;
    text-align: center;
    z-index: 3;
}

/* Quote text */
.staff-quote {
    color: var(--neutral-white) !important;
    font-size: 22px;
    line-height: 1.4;
    margin: 0;
}

/* Remove lightbox functionality */
.submerge-staff-slider-wrapper .tmb .t-entry-visual a {
    pointer-events: none;
}
/**
 * FORCED REORDERING of Staff Carousel Name and Title
 * This uses high specificity and !important to override theme styles.
 */
.submerge-staff-slider-wrapper .tmb .t-entry {
    display: flex !important;
    flex-direction: column-reverse !important; /* Force vertical stacking & reverse order */
    align-items: center !important;
}

/**
 * The theme uses 'transform' to position the text, which conflicts with Flexbox.
 * This rule resets that transform on both the name and title, allowing Flexbox to take control.
 */
.submerge-staff-slider-wrapper .tmb .t-entry > * {
    transform: none !important;
    position: static; /* Prevent absolute positioning conflicts */
}

/**
 * Optional: Re-add a small gap between the (now on top) job title and the name.
 */
.submerge-staff-slider-wrapper .tmb .t-entry-meta {
    margin-bottom: 0.5em;
}
/***FINISH STAFF CAROUSEL STYLES***/
/****************************************************************************************************************/
/***START CASE STUDIES PAGE STYLES***/

.case-study-result-row-quote-col-left, .case-study-result-row-quote-col-left img {
    border-top-left-radius: 26px;
    border-bottom-left-radius: 26px;
}
.case-study-result-row-quote-col-right {
    background-color: rgba(0, 0, 0, 0.5)!important;
    border-top-right-radius: 26px;
    border-bottom-right-radius: 26px;
}

/***FINISH CASE STUDIES PAGE STYLES***/
/****************************************************************************************************************/
/***START CASE STUDIES CARD STYLES***/

.case-studies-posts .t-entry-visual {
    border-radius: 26px;
}
.case-studies-title-off-grid {
    margin-bottom: calc(-1 * var(--off-grid-offset))!important;
    z-index: 10;
}

/* Media queries for responsive behavior */
@media (max-width: 959px) {
    .case-studies-title-off-grid {
        /* Reduce the negative margin by 30% on tablets */
        margin-bottom: calc(-0.7 * var(--off-grid-offset))!important;
        z-index: 10;
    }
}

@media (max-width: 569px) {
    .case-studies-title-off-grid {
        /* Reduce the negative margin by 50% on mobile */
        margin-bottom: calc(-0.5 * var(--off-grid-offset))!important;
        z-index: 10;
    }
}

/***FINISH CASE STUDIES CARD STYLES***/
/****************************************************************************************************************/
/***START CASE STUDIES FILTER STYLES***/

.grid-filters ul.menu-smart > li > span {
    padding: 0!important;
}

/* Gradient Button */
.grid-filters a {
    display: inline-block;
    background-color: rgba(0, 0, 0, 0.05)!important; /* White 5% */
    color: var(--neutral-darkest) !important;
    padding: 12px 24px!important;
    border-radius: var(--radius-medium); /* 16px */
    text-decoration: none !important;
    font-weight: 600;
    transition: all 0.4s ease;
    position: relative;
    z-index: 1;
    border: none;
    margin: 20px 5px;
}

/* Gradient hover effect */
.grid-filters a:before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: linear-gradient(to right, var(--electric-violet), var(--radical-red));
    border-radius: var(--radius-medium); /* 16px */
    z-index: -1;
    transition: opacity 0.4s ease;
    opacity: 0;
}

/* Apply gradient on hover */
.grid-filters a:hover:before {
    opacity: 1;
}

.grid-filters a:hover {
    color: var(--neutral-white) !important;
}

/* Active state - same as hover state */
.grid-filters a.active:before {
    opacity: 1;
}

.grid-filters a.active {
    color: var(--neutral-white) !important;
}

.case-studies-posts .t-entry-category a {
  display: inline-flex;
  align-items: center; /* vertical centering */
}
/* Remove commas between categories now that pills are used */
.case-studies-posts .t-entry .cat-comma { display: none !important; }

/* Category pills with gradient hover (no lift/movement) */
.case-studies-posts .t-entry .t-entry-category a {
  position: relative;
  z-index: 1;
  background-color: rgba(0, 0, 0, 0.05);
  color: var(--neutral-darkest) !important;
  padding: 8px 16px;
  border-radius: var(--radius-large); /* 26px pill */
  text-decoration: none !important;
  font-weight: 600;
  font-size: 13px;
  line-height: 1; /* keep compact height */
  border: none;
  transition: color .3s ease, background-color .3s ease, opacity .3s ease;
  overflow: hidden; /* contain the overlay */
  margin-right: 5px;
}

/* Gradient overlay */
.case-studies-posts .t-entry .t-entry-category a::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to right, var(--electric-violet), var(--radical-red));
  border-radius: inherit;
  z-index: -1;
  opacity: 0;
  transition: opacity .3s ease;
}

.case-studies-posts .t-entry .t-entry-category a:hover::before,
.case-studies-posts .t-entry .t-entry-category a:focus::before {
  opacity: 1;
}

.case-studies-posts .t-entry .t-entry-category a:hover,
.case-studies-posts .t-entry .t-entry-category a:focus {
  color: var(--neutral-white) !important;
  /* removed translateY lift to prevent movement */
}

/***FINISH CASE STUDIES FILTER STYLES***/
/****************************************************************************************************************/
/***START BOX ROW 4 COLUMN STYLES***/
/* Box styling */
.box-row-4-column-row-box-column .uncell {
    background-color: rgba(0, 0, 0, 0.05);
    padding: 40px !important;
    border-radius: 26px;
    transition: all 0.4s ease;
    position: relative;
    overflow: hidden;
    cursor: pointer;
    margin-bottom: 36px;
}

/* SVG icon styling */
.box-row-4-column-row-box-column .box-icon svg {
    width: 48px;
    height: 48px;
    color: #6442FF; /* Default gradient color (using the start color) */
    transition: all 0.4s ease;
    margin-bottom: 20px;
}

/* Hover state with gradient from bottom left to top right */
.box-row-4-column-row-box-column .uncell:hover {
    transform: rotate(1deg); /* Slight rotation */
    background: linear-gradient(to top right, #6442FF, #FE416F) !important; /* Changed to bottom left to top right */
}

/* Change SVG color on hover */
.box-row-4-column-row-box-column .uncell:hover .box-icon svg {
    color: #ffffff !important;
}

/* Change text color on hover */
.box-row-4-column-row-box-column .uncell:hover h4,
.box-row-4-column-row-box-column .uncell:hover p {
    color: #ffffff !important;
}
/***FINISH BOX ROW 4 COLUMN STYLES***/
/****************************************************************************************************************/

/***START SERVICES TABBED CONTENT STYLES***/

/* Button container styling */
.tab-btn-group-row {
    text-align: center;
    margin-bottom: 30px;
}

/* Make buttons display inline */
.tab-btn-group-column .btn-container {
    display: inline-block;
    margin: 5px !important;
}

/* Tab Button Styling */
.service-tab-btn {
    background-color: rgba(0, 0, 0, 0.05) !important;
    color: #000 !important;
    border-radius: 26px !important;
    transition: all 0.3s ease !important;
    padding: 12px 24px !important;
    text-decoration: none !important;
    cursor: pointer !important;
}

.service-tab-btn:hover,
.service-tab-btn.active {
    background: linear-gradient(to top right, #6442FF, #FE416F) !important;
    color: #fff !important;
}

/* Content Panel Styling */
.service-content-panel {
    background: transparent;
    border-radius: 26px !important;
    padding: 40px !important;
    margin-top: 20px;
    display: none; /* Hide all panels by default */
    overflow: hidden; /* Prevent content from spilling out */
}

/* Content Styling */
.service-content-panel h3,
.service-content-panel p,
.service-content-panel li {
    color: #fff !important;
}

/* Button styling inside panels */
.service-content-panel .btn {
    background-color: #fff !important;
    color: #000 !important;
    border-radius: 26px !important;
    transition: all 0.3s ease !important;
    padding: 12px 24px !important;
}

.service-content-panel .btn:hover {
    background: transparent !important;
    color: #fff !important;
    border: 2px solid #fff !important;
}

/* Image styling in right column */
.service-content-panel .column_right img {
    width: 100%;
    height: auto;
    border-radius: 16px;
}

/***FINISH SERVICES TABBED CONTENT STYLES***/


/****************************************************************************************************************/