/* FLUIDIKA CUSTOM STYLES & TYPOGRAPHY SYSTEM */

/* 1. REGISTER LOCAL FONTS */

/* Futura PT Medium */
@font-face {
    font-family: 'Futura PT Medium';
    src: url('../fonts/Futura-PT-Medium.woff2') format('woff2'), url('../fonts/Futura-PT-Medium.otf') format('opentype');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

/* Futura Futuris Light */
@font-face {
    font-family: 'Futura Futuris Light';
    src: url('../fonts/Futura-Futuris-Light.woff2') format('woff2'), url('../fonts/Futura-Futuris-Light.otf') format('opentype');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

/* Futura Futuris Medium */
@font-face {
    font-family: 'Futura Futuris Medium';
    src: url('../fonts/Futura-Futuris-Medium.woff2') format('woff2'), url('../fonts/Futura-Futuris-Medium.otf') format('opentype');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}


/*
    EASY FONT TOGGLE CONFIGURATION
To switch between font families instantly, just uncomment the block you want to use below inside :root.
*/
:root {
    /* ── OPTION A: FUTURA PT MEDIUM (Current Active Theme) ── */
    --font-body: 'Futura PT Medium', sans-serif;
    --font-heading: 'Futura Futuris Light', sans-serif;
    --font-menu: 'Futura Futuris Medium', sans-serif;
    /* ── OPTION B: FUTURA FUTURIS LIGHT ── */
    /* Uncomment below and comment out Option A to switch */
    /*
--font-body: 'Futura Futuris Light', sans-serif;
--font-heading: 'Futura Futuris Light', sans-serif;
        --font-menu: 'Futura PT Medium', sans-serif; / 
    */
}



/* 2. APPLY FONTS GLOBALLY USING VARIABLES */
body,
p,
a,
li,
span,
.custom-text-size-1 {
    font-family: var(--font-body) !important;
}

h1, h2, h3, h4, h5, h6,
.custom-font-secondary,
.font-weight-extra-bold,
.font-weight-bold,
.font-weight-semibold {
    font-family: var(--font-heading) !important;
    line-height: 1.25 !important; /* Forces a healthy amount of vertical space between lines */
}

/* 3. MAIN NAVIGATION MENU TYPOGRAPHY */
#header .header-nav-main nav > ul > li > a,
#header .header-nav-main nav > ul > li .dropdown-menu li a,
#mainNav a {
    font-family: var(--font-menu) !important;
    font-size: 20px !important;
    /* Optional: Uncomment below to slightly tweak the spacing of the menu links */
    letter-spacing: 0.1px !important; 
}

/* 4. OPTIONAL TYPOGRAPHIC TWEAKS */
h1, h2 {
    letter-spacing: -0.5px !important;
}

/* FLUIDIKA CUSTOM FONT SIZING */

/* 1. Increase standard body text and paragraphs */
body,
p,
.custom-text-size-1 {
    font-size: 1.3rem !important; /* Default is usually 1rem (16px). 1.1rem makes it ~10% larger */
    line-height: 1.6 !important; /* Adding a bit more breathing room between lines helps readability */
}

/* 2. Increase main navigation links if they are too small */
#mainNav .dropdown-item {
    font-size: 15px !important;
}

/* 3. Increase all buttons globally */
.btn {
    font-size: 0.95rem !important;
}



/* Product Page Tab Titles */

.tabs .nav-tabs .nav-link {
    font-family: 'Futura Futuris Light', sans-serif !important;
    /* Point to the new light font */ text-transform: uppercase !important;
    font-weight: 300 !important;
    /* Set to match the 300 weight  letter-spacing: 0.5px;*/
    /* 1. Remove Porto's default wide spacing on uppercase text */
    letter-spacing: -0.2px !important;
    /* 2. Reduce the empty space (padding) on the left and right of the text */
    padding-left: 12px !important;
    padding-right: 12px !important;
    /* 3. Slightly reduce the overall font size if needed (optional) */
    font-size: 0.9em !important;
}

.ecuacion-big {
    font-size: 150% !important;
}

.text-align-center, .text-center {
    text-align: center !important;
}

/* Sidebar Layout: Top Blue Strip */
.sidebar-blue-strip {
background-color: #0088cc; /* Match your Porto primary blue */
height: 70px;
width: 100%;
margin-bottom: -50px; /* Pulls the logo up into the blue strip */
}

/* Sidebar Layout: Purple/Blue Gradient Ring */
.logo-gradient-ring {
display: inline-block;
background: linear-gradient(to bottom, #870068, #2800c6); /* Purple to deep blue */
border-radius: 50%;
padding: 8px; /* Thickness of the ring */
position: relative;
z-index: 2;
}

/* Sidebar Layout: The Inner Logo Image */
.logo-gradient-ring img {
display: block;
border-radius: 50%;
background-color: #589bb7; /* The muted blue background from the image */
width: 160px;
height: 160px;
object-fit: contain;
border: 3px solid #ffffff; /* The small white gap between the image and the gradient ring */
}

/* STREAMING_CHUNK:Styling the Video Grid Cards... /
/ --------------------------------------------------- /
/ VIDEO GRID CARDS & PLAY BUTTON OVERLAY /
/ --------------------------------------------------- */
.custom-video-card {
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

    .custom-video-card:hover {
        transform: translateY(-4px);
        box-shadow: 0 10px 20px rgba(0,0,0,0.08) !important;
    }

/* Centers the play button perfectly over the image */
.custom-play-button-overlay {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 65px;
height: 65px;
background-color: #0088cc; /* Porto Primary Blue */
color: #ffffff;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 26px;
padding-left: 5px; /* Optically centers the play triangle */
box-shadow: 0 4px 15px rgba(0, 136, 204, 0.4);
transition: all 0.3s ease;
z-index: 5;
}

/* When the user hovers over the card, the play button expands slightly */
.custom-video-card:hover .custom-play-button-overlay {
transform: translate(-50%, -50%) scale(1.15);
background-color: #006699; /* Slightly darker blue on hover */
box-shadow: 0 6px 20px rgba(0, 136, 204, 0.6);
}

/* FLUIDIKA DISTINCT BOX STYLING */
/* --------------------------------------------------- */

/* 1. The Left-Hand Pricing Box */
.fluidika-pricing-box {
border: 1px solid #dcdcdc !important;
box-shadow: 0 12px 30px rgba(0,0,0,0.08) !important;
transition: box-shadow 0.3s ease;
}
.fluidika-pricing-box:hover {
box-shadow: 0 15px 40px rgba(0,0,0,0.12) !important;
}
.fluidika-pricing-box .card-body {
background-color: #f4f7f9 !important; /* A very subtle cool grey/blue tint */
}




/* STREAMING_CHUNK:Distinct Box Styling... */
/* 2. The Demo Request Form Box */
.fluidika-demo-box {
background-color: #fcfcfc !important;
border: 1px solid #777777 !important; /* Much darker, sharper outer border */
box-shadow: 0 10px 30px rgba(0,0,0,0.1) !important;
}

/* Ensure the input fields pop out with sharp dark borders */
.fluidika-demo-box .form-control {
background-color: #ffffff !important;
border: 3px solid #777777 !important; /* Dark, sharp border for inputs */
color: #222222 !important; /* Dark, obscure text when typing */
font-weight: 600 !important; /* Bolder font for inputs */
box-shadow: inset 0 2px 4px rgba(0,0,0,0.05);
border-radius: 0 !important;
}

/* Make the placeholder text (Full Name, etc) darker and sharper */
.fluidika-demo-box .form-control::placeholder {
    color: #555555 !important;
    font-weight: 500 !important;
}

/* Make radio and checkbox labels darker */
.fluidika-demo-box .form-check-label {
    color: #222222 !important;
    font-weight: 500 !important;
}

/* SUPPORT PAGE TYPOGRAPHY & TABLES */
.support-body h2 {
    font-size: 1.4rem;
    font-weight: 700;
    margin: 2rem 0 1rem;
    color: #16181d;
}

.support-body h3 {
    font-size: 1.1rem;
    font-weight: 700;
    margin: 1.5rem 0 .75rem;
    color: #16181d;
}

.support-body table {
    width: 100%;
    margin-bottom: 1.5rem;
    border-collapse: collapse;
}

.support-body th, .support-body td {
    border: 1px solid #e6e8ec;
    padding: .65rem .85rem;
    text-align: left;
    vertical-align: top;
}

.support-body th {
    background: #f4f5f7;
    font-weight: 700;
    color: #16181d;
}

.support-body code {
    background: #f4f5f7;
    padding: .15rem .4rem;
    border-radius: 3px;
    font-family: monospace;
    font-size: 0.9em;
    color: #d11b23;
}

.support-body ol, .support-body ul {
    margin-bottom: 1.25rem;
    padding-left: 1.5rem;
}

.support-body li {
    margin-bottom: .5rem;
}

/* FORCE SCROLL-TO-TOP BUTTON TO WORK */
.scroll-to-top, .back-to-top {
    pointer-events: auto !important;
    z-index: 999999 !important;
    cursor: pointer !important;
}