/*
 Theme Name:   Bluepath Robotics Wordpress Theme
 Theme URI:    https://www.bluepathrobotics.com
 Description:  Custom built WordPress Theme for Bluepath Robotics.
 Author:       Acca Digital
 Author URI:   https://www.accadigital.com
 Text Domain:  br-theme
 Version: 0.1
*/

/* REGISTER FONTS  */

/* Red Hat Display */

@font-face {
    font-family: 'RedHatDisplay';
    src: url('fonts/RedHatDisplay-Light.woff2') format('woff2'), url('fonts/RedHatDisplay-Light.woff') format('woff');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'RedHatDisplay';
    src: url('fonts/RedHatDisplay-Regular.woff2') format('woff2'), url('fonts/RedHatDisplay-Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'RedHatDisplay';
    src: url('fonts/RedHatDisplay-Medium.woff2') format('woff2'), url('fonts/RedHatDisplay-Medium.woff') format('woff');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'RedHatDisplay';
    src: url('fonts/RedHatDisplay-ExtraBold.woff2') format('woff2'), url('fonts/RedHatDisplay-ExtraBold.woff') format('woff');
    font-weight: 800;
    font-style: normal;
    font-display: swap;
}

/* VARIABLES  */

:root {

    color-scheme: light;


    /* Ready to use */

    --redhat-display: "RedHatDisplay", -apple-system, sans-serif;
    --color-background: #fff;
    --color-primary: #070e17;
    --accent-gray-almost-white: #d4d1d1;
    --off-white: #F7F7F7;
    --color-text: #070e17;

    /* Usable Colors */

    --color-secondary: #0D2856;
    --color-secondary-light: #1B54A3;
    --color-blue-light: #E8F3FF;
    --accent-gray: #b2b2b2;
    --accent-gray-subtle: #B2B2B2;

    --light-gradient: linear-gradient(to right bottom, #FFFFFF, #E8F3FF);
    --light-gradient-reverse: linear-gradient(to right bottom, #E8F3FF, #FFFFFF);
    --dark-gradient: linear-gradient(to right bottom, #070707, #213368);
    --dark-gradient-reverse: linear-gradient(to right bottom, #213368, #070707);
    --alternative-linear-gradient: linear-gradient(to right bottom, #060E24, #185d81);
    --alternative-linear-gradient-reverse: linear-gradient(to right bottom, #185d81, #060E24);

    --st-vertical-padding: 6rem;
    --mobile-vertical-padding: 3rem;
    --site-width: 88.33333%;
    --article-width: 85rem;

    --header-height: 10.185rem;
    --post-font-size: 2rem;
    --post-line-height: 1.67;
    --mobile-margin-top-xl: 4.2rem;
    --site-padding: 2.4rem;

    /* Old Variables that will change */



}


/* RESETS */

*,
*::before,
*::after {
    box-sizing: border-box;
}

* {
    margin: 0;
    padding: 0;
}

html {
    font-size: 62.5%;
    scroll-behavior: smooth;
}

html,
body {
    scroll-behavior: smooth;
    height: 100%;
}

body {
    position: relative;
    font-family: var(--redhat-display);
    font-size: 1.6rem;

}

body a {
    color: var(--color-secondary);
    transition: color .2s cubic-bezier(0.455, 0.03, 0.515, 0.955);
    text-decoration: none;
    cursor: pointer;
}

body a:hover {
    color: var(--color-primary);
}

/* Wordpress overrides */

.inner-container {
    width: var(--site-width);
    margin: 0 auto;
}

.site-container .alignwide {
    margin-left: calc(25% - 25vw);
    width: calc(50vw + 50%);
    max-width: calc(50vw + 50%);
}

.site-container .alignfull {
    margin-left: calc(50% - 50vw);
    width: 100vw !important;
    max-width: 100vw;
}

.site-container .wp-block-embed.is-type-video.is-provider-youtube {
    margin: 3.6rem 0;
}

.site-container .wp-block-embed.is-type-video.is-provider-youtube iframe {
    border-radius: 1.6rem;
}

.single-post-container .alignwide {
    margin-left: calc(25% - 25vw);
    width: calc(50vw + 50%);
    max-width: calc(50vw + 50%);
}

.single-post-container .alignfull {
    margin-left: calc(50% - 50vw);
    width: 100vw;
    max-width: 100vw;
}

.alignfull {
    width: 100%;
}

.wp-block-cover__inner-container:has(.alignfull) {
    width: 100% !important;
}

.wp-block-embed iframe {
    width: 100%;
    height: 100%;
    aspect-ratio: 16 / 9;
}


.wp-block-button a.wp-block-button__link {
    border-radius: 1.6rem;
    padding: 1.2rem 2.4rem;
    font-size: 1.7rem;
    font-weight: 400;
    font-family: var(--redhat-display);
    background-color: var(--color-secondary);
    transition: all 0.3s ease-in-out;
}

.wp-block-button a.wp-block-button__link:hover {
    background-color: var(--color-secondary-light);
    color: white;
}

/* Global */

.site-container {
    width: var(--site-width);
    margin: 0 auto;
    padding-top: calc(var(--header-height) + var(--site-padding));
    padding-bottom: var(--site-padding);
}

.ac-text-container {
    width: var(--box-width);
    margin: 0 auto;
    padding-top: calc(var(--header-height) + var(--site-padding));
    padding-bottom: var(--site-padding);
}


.site-container h1 {
    font-size: 3.6rem;
    font-weight: 300;
    font-family: var(--redhat-display);
    margin-bottom: 2rem;
}

.site-container h2 {
    font-size: 2.9rem;
    font-weight: 400;
    font-family: var(--redhat-display);
    margin-bottom: 1.6rem;
}

.site-container h3 {
    font-size: 2.3rem;
    font-weight: 500;
    font-family: var(--redhat-display);
    margin-bottom: 1.2rem;
}

.site-container h4 {
    font-size: 1.8rem;
    font-weight: 500;
    font-family: var(--redhat-display);
    margin-bottom: 1.2rem;
}

.site-container h5 {
    font-size: 1.6rem;
    font-weight: 600;
    font-family: var(--redhat-display);
    margin-bottom: 1rem;
}

.site-container p {
    font-size: 1.8rem;
    font-weight: 400;
    font-family: var(--redhat-display);
    margin-bottom: 1.6rem;
    color: var(--color-text);
    line-height: 1.6;
}

.site-container strong {
    font-size: inherit;
    font-weight: bold;
}

.site-container em {
    font-style: italic;
}


.site-container ul,
.site-container ol {
    margin-left: 4rem;
    padding-left: 0;
    font-size: inherit;
    line-height: 1.6;
}



.site-container ul li,
.site-container ol li {
    margin-bottom: 0.8rem;
    font-size: inherit;
}

.site-container blockquote {
    font-size: 1.8rem;
    font-style: italic;
    margin: 2rem 0;
    padding-left: 2rem;
    border-left: 4px solid var(--color-accent);
    color: var(--color-muted);
}

.site-container table {
    width: 100%;
    border-collapse: collapse;
    font-size: 1.8rem;
    margin-bottom: 2rem;
}

.site-container th,
.site-container td {
    padding: 1rem;
    border: 1px solid #ddd;
    text-align: left;
}

.site-container figcaption,
.site-container .caption,
.site-container small {
    font-size: 1.6rem;
    color: var(--color-secondary);
    margin-bottom: 2.6rem;
    font-family: var(--redhat-display);
    font-style: italic;
    line-height: 1.4;
}

.site-container .wp-block-table table thead {
    border: none !important;
}

.site-container .wp-block-table table th {
    background-color: var(--color-secondary);
    color: var(--off-white);
    font-size: 1.8rem;
    font-weight: 400;
    font-family: var(--redhat-display);
}

h2.large-title {
    font-size: 4.2rem;
}

h2.hero-title {
    font-size: 4.8rem;
    font-weight: 600;
}

h2.thin-title {
    font-weight: 300 !important;
}

.gradient-text {
    background: -webkit-linear-gradient(var(--color-secondary-light), var(--color-secondary));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* Global Responsive */

@media screen and (max-width: 1450px) {

    h2.hero-title {
        font-size: 3.6rem;
    }
}

@media screen and (max-width: 1000px) {
    .site-container h1 {
        font-size: 2.4rem;
    }

    .site-container h2 {
        font-size: 2.4rem;
    }

    .site-container h3 {
        font-size: 2rem;
    }

    h2.hero-title {
        font-size: 3.6rem;
    }

}

.site-container h4 {
    font-size: 1.6rem;
}

.site-container h5 {
    font-size: 1.4rem;
}

/* HEADER */

header.site-header {
    height: var(--header-height);
    width: 100%;
    z-index: 99;
    background-color: var(--color-background);
    position: fixed;
    transition: position 0.3s ease, box-shadow 0.3s ease;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);

}

header.scrolled {
    background-color: var(--color-background);
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}

.header-content {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    width: var(--site-width);
    margin: 0 auto;
    height: 100%;
    font-family: var(--redhat-display);
}

.header-elements {
    display: flex;
    align-items: center;
}

.header-items {
    display: flex;
    align-items: center;
}

.language-switcher {
    font-size: 1.8rem;
    margin-left: 3.6rem;
}

.language-switcher a {
    text-decoration: none;
    display: flex;
    align-items: center;
    color: var(--color-secondary);
    line-height: 1;

}

.language-switcher a:hover {
    text-decoration: none;
    color: var(--accent-color);
}

.language-switcher a img {
    width: 2rem;
    height: auto;
    margin-right: 0.8rem;
    vertical-align: middle;
}


.logo-area {
    margin-top: 0;
    margin-right: auto;
    margin-bottom: 0;
}

.logo-area a {
    margin-right: 0;
    display: inline-flex;
    align-items: center;
}

.logo {
    width: 20rem;
    margin-top: 4px;
}

.header-cta-button {
    margin-left: 3.6rem;

}

.header-cta-button a {
    border-radius: 1.6rem;
    color: var(--color-background);
    font-weight: 300;
    font-family: var(--redhat-display);
    font-size: 1.6rem;
    text-decoration: none;
    background-color: var(--color-secondary);
    padding: 1.2rem 2.4rem;
}

.header-cta-button a:hover {
    color: var(--color-background);
    filter: brightness(.9);
}

#main-navigation .main-navigation__list {
    display: flex;
    font-size: 1.8rem;
    color: var(--color-secondary);
    list-style: none;
    font-family: var(--main-font);
    gap: 3.6rem;
    margin-bottom: 0;

}

#main-navigation .main-navigation__list li:last-child {
    margin-right: unset;
}

#main-navigation .main-navigation__list li a:hover {
    color: var(--color-secondary-light);
}


.responsive-menu__checkbox {
    display: none;
}

.navigation-button {
    display: none;
    width: 4rem;
    height: 100%;
    align-items: center;
    cursor: pointer;
    z-index: 9999;
}

input[type="checkbox"].navigation-button {
    display: none;
}


.navigation__icon {
    display: inline-block;
    position: relative;
    width: 2rem;
    height: 3px;
    background-color: var(--color-secondary);
    border-radius: 3px;
    transition: all .2s;
    z-index: 3000;
}

.navigation__icon::before {
    top: -.6rem;
    content: attr(data-before);
    position: absolute;
    left: 0;
    width: 2rem;
    height: 3px;
    background-color: var(--color-secondary);
    display: inline-block;
    border-radius: 3px;
    transition: all .2s;
}

.navigation__icon::after {
    content: attr(data-after);
    position: absolute;
    top: .6rem;
    left: 0;
    width: 2rem;
    height: 3px;
    background-color: var(--color-secondary);
    display: inline-block;
    transition: all .2s;
    border-radius: 3px;
}

.responsive-menu__checkbox:checked+.navigation-button .navigation__icon {
    background-color: rgba(0, 0, 0, 0);
    transform: translate(15vw, 0);
}

.responsive-menu__checkbox:checked+.navigation-button .navigation__icon::before {
    top: 0;
    z-index: 2000;
    transform: rotate(135deg);
}

.responsive-menu__checkbox:checked+.navigation-button .navigation__icon::after {
    top: 0;
    z-index: 2000;
    transform: rotate(-135deg);
}


.responsive-menu__navigation {
    position: absolute;
    right: 0;
    top: -3.3rem;
    background-color: var(--color-background);
    height: 130vh;
    padding: 0 2rem;
    overflow: hidden;
    visibility: hidden;
    width: 0vw;
    transition: width .3s, visibility .001s;
    font-family: var(--main-font);

}

.responsive-menu__checkbox:checked~.responsive-menu__navigation {
    display: flex;
    width: 100vw;
    flex-direction: column;
    visibility: visible;
    transition: all .2s;
    justify-content: flex-start;
    align-items: flex-start;
    z-index: 1999;
    box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.2);
}

.responsive-menu__navigation__list {
    list-style: none;
    margin-top: 12rem;
    font-size: 2rem;
    padding-left: 0;
    user-select: none;
    width: 100%;
    margin-bottom: 0;
}

.responsive-menu__navigation__list ul {
    list-style: none;
}


.responsive-menu__navigation__list li a {
    color: var(--color-secondary);
    font-weight: 400;
    border-bottom: 1px solid var(--color-secondary);
    font-family: var(--content-font);
    text-decoration: none;
    display: flex;
    align-items: center;
    margin-bottom: 1.6rem;
    padding-bottom: 1.6rem;
}

.responsive-menu__navigation__list li ul {
    display: none;
    opacity: 0;
    transform: translateY(-10%);
    position: absolute;
}

.responsive-menu__navigation__list li ul.is-visible {
    display: block;
    position: unset;
    opacity: 100%;
    transform: translateY(0);
    animation: menu_fade_in 0.5s
}

.responsive-menu__navigation__list li ul.fade-out {
    animation: menu_fade_out 0.3s;
    transform: translateY(-10%);

}

#main-navigation li {
    position: relative;
}

#main-navigation .main-navigation__list .sub-menu {
    display: none;
    position: absolute;
    top: calc(100% + 15px);
    left: 0%;
    background-color: var(--color-background);
    padding-top: 10px;
    padding-left: 0;
    min-width: 200px;
    border-radius: 4px;
    z-index: 1000;
    font-size: 1.8rem;
    list-style: none;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

/* Create invisible hover bridge between parent and submenu */
#main-navigation .main-navigation__list li:hover::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    height: 15px;
    background: transparent;
    z-index: 999;
}


/* Add triangle indicator for submenus */
#main-navigation .main-navigation__list li:has(.sub-menu)>a::after {
    content: '';
    display: inline-block;
    width: 0;
    height: 0;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-top: 4px solid var(--color-secondary);
    margin-left: 8px;
    vertical-align: middle;
    padding-bottom: 3px;
}


#main-navigation .main-navigation__list li:hover>.sub-menu {
    display: block;
    animation: menu_fade_in 0.3s ease;
}

#main-navigation .main-navigation__list .sub-menu li {
    margin: 1.2rem 0;
    padding: .5rem 1.6rem;
}


#main-navigation .main-navigation__list .sub-menu li a {
    color: var(--color-secondary);
    text-decoration: none;
    display: block;
    padding: 0.5rem;
    white-space: nowrap;
    cursor: pointer;
}

#main-navigation .main-navigation__list .sub-menu li a:hover {
    border-bottom: 3px solid;
    border-image: linear-gradient(to right, var(--color-secondary), var(--color-secondary-light)) 1;
    padding-bottom: calc(0.5rem - 3px);
}

/* Third level submenu (sub-submenu) styling */
#main-navigation .main-navigation__list .sub-menu .sub-menu {
    display: none;
    position: absolute;
    top: 0;
    left: 100%;
    background-color: var(--color-background);
    padding-top: 10px;
    padding-left: 0;
    min-width: 200px;
    border-radius: 4px;
    z-index: 1001;
    font-size: 1.8rem;
    list-style: none;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

/* Show third level submenu on hover */
#main-navigation .main-navigation__list .sub-menu li:hover>.sub-menu {
    display: block;
    animation: menu_fade_in 0.3s ease;
}

/* Third level submenu items */
#main-navigation .main-navigation__list .sub-menu .sub-menu li {
    margin: 1.2rem 0;
    padding: .5rem 1.6rem;
}


#main-navigation .main-navigation__list .sub-menu .sub-menu li a {
    color: var(--color-secondary);
    text-decoration: none;
    display: block;
    padding: 0.5rem;
    cursor: pointer;
}

#main-navigation .main-navigation__list .sub-menu .sub-menu li a:hover {
    border-bottom: 3px solid;
    border-image: linear-gradient(to right, var(--color-secondary), var(--color-secondary-light)) 1;
    padding-bottom: calc(0.5rem - 3px);
}

/* Add triangle indicator for third level submenus */
#main-navigation .main-navigation__list .sub-menu li:has(.sub-menu)>a::after {
    content: '';
    display: inline-block;
    width: 0;
    height: 0;
    border-top: 4px solid transparent;
    border-bottom: 4px solid transparent;
    border-left: 4px solid var(--color-secondary);
    margin-left: 8px;
    vertical-align: middle;
    padding-bottom: 3px;
}

.responsive-menu__navigation__list ul li a:after {
    display: none;
}


.responsive-menu__navigation__list li.menu-item-has-children>a {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    pointer-events: none;
}

.responsive-menu__navigation__list li.menu-item-has-children a::after {
    content: url('images/down-arrow.svg');
    height: 24px;
    width: 24px;
    transform: rotate(-90deg);
    filter: invert(1);
    transition: transform .2s;
}

.responsive-menu__navigation__list li.menu-item-has-children a.is-active::after {
    transform: rotate(0deg);
}

.responsive-menu__navigation__list .sub-menu {
    padding-left: 1.4rem;
    font-size: 1rem;
    list-style: none;
}

/* Sub-submenu styles for responsive menu */
.responsive-menu__navigation__list .sub-menu .sub-menu {
    padding-left: 1.4rem;
    font-size: 0.9rem;
    list-style: none;
    margin-top: 0.5rem;
}

/* Ensure sub-submenus are properly styled in responsive menu */
.responsive-menu__navigation__list .sub-menu .sub-menu li {
    margin: 0.8rem 0;
    padding: 0.3rem 0;
}

.responsive-menu__navigation__list .sub-menu .sub-menu li a {
    color: var(--color-secondary);
    font-weight: 400;
    text-decoration: none;
    display: block;
    padding: 0.5rem 0;
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0.5rem;
}


.responsive-cta-button {
    margin-top: 3.6rem;
    width: 100%;
    margin-left: 0;
}

.responsive-cta-button a {
    display: block;
    text-align: center;
    width: 100%;
}

.responsive-menu-bottom-social-media {
    margin-top: 18svh;
    width: 100%;
    margin-left: 0;
    display: flex;
    flex-direction: row;
    justify-content: center;
    gap: 2.4rem;
}


.animation-enter {
    -webkit-animation: tracking-in-expand 0.7s cubic-bezier(0.215, 0.610, 0.355, 1.000) both;
    animation: tracking-in-expand 0.7s cubic-bezier(0.215, 0.610, 0.355, 1.000) both;
}



/* Header responsive */

@media screen and (max-width: 1025px) {

    .navigation-button {
        display: flex;
    }

    .header-desktop,
    .language-switcher-desktop {
        display: none
    }

    .language-switcher-mobile {
        font-size: 2rem;
        margin-left: 0;
    }

    #main-navigation {
        display: none;
    }

    .responsive-menu__checkbox:checked+.navigation-button .navigation__icon {
        transform: translate(100%, 0);
    }

    ul.sub-menu.is-visible li {
        font-size: 1.6rem;
    }

    .logo {
        width: 15rem;
    }



}

/* Search Icon and Functionality on Header */

.search-icon {
    cursor: pointer;
}

.search-icon img {
    width: 20px;
    height: 20px;
    filter: invert(1);
    padding-top: 2px;
}

.search-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: var(--header-height);
    background: var(--color-primary);
    display: none;
    justify-content: center;
    align-items: center;
    z-index: 9999;
}

.search-overlay.active {
    display: flex;
}

.search-form {
    width: 100%;
    position: relative;
    display: flex;
    align-items: center;
}

.search-input {
    width: 100%;
    padding: 15px 50px 15px 20px;
    background: transparent;
    font-size: 24px;
    border: none;
    color: white;

    outline: none;
}

.search-submit {
    padding: 5px 10px;
    background-color: white;
    font-family: var(--typing-font);
    font-size: 1.6rem;
    border-radius: 5px;
}

.search-close {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 32px;
    color: white;
    padding: 0 15px;
}

/* Optional: Animation for smooth transition */
.search-overlay {
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s, visibility 0.3s;
}

.search-overlay.active {
    opacity: 1;
    visibility: visible;
}

.search-input::-webkit-search-cancel-button {
    -webkit-appearance: none;
    appearance: none;
}

/* Header Search */

.search-icon {
    cursor: pointer;
    margin: 0 2.4rem;
}

.search-icon img {
    width: 20px;
    height: 20px;
    filter: invert(1);

}

.search-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: var(--header-height);
    background: var(--color-primary);
    display: none;
    justify-content: center;
    align-items: center;
    z-index: 9999;
}

.search-overlay.active {
    display: flex;
}

.search-form {
    width: 100%;
    position: relative;
    display: flex;
    align-items: center;
}

.search-input {
    width: 100%;
    padding: 15px 50px 15px 20px;
    background: transparent;
    font-size: 24px;
    border: none;
    color: white;

    outline: none;
}

.search-submit {
    padding: 5px 10px;
    background-color: white;
    font-family: var(--typing-font);
    font-size: 1.6rem;
    border-radius: 5px;
}

.search-close {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 32px;
    color: white;
    padding: 0 15px;
}

.search-overlay {
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s, visibility 0.3s;
}

.search-overlay.active {
    opacity: 1;
    visibility: visible;
}

.search-input::-webkit-search-cancel-button {
    -webkit-appearance: none;
    appearance: none;
}

/* Header search responsive */

@media screen and (max-width: 1000px) {

    .search-input {
        font-size: 1.6rem;
    }

}

/* Homepage Styles */

/* Hero Section */

h1.hp-hero-top-heading {
    font-size: 2.4rem;
    font-weight: 300;
}

h2.hp-hero-heading {
    font-size: 6.2rem;
    font-weight: 600;
    line-height: 1.2;
    font-family: var(--redhat-display);
}

h3.hp-hero-subtitle {
    font-size: 3.2rem;
    font-weight: 300;
    font-family: var(--redhat-display);
}

p.hp-hero-text {
    font-size: 2.2rem;
    font-weight: 400;
    line-height: 1.67;
    margin-bottom: 4.2rem !important;
}

.hp-hero hr {
    margin: 4.2rem 0 !important;
}


.hero-button-secondary {
    margin-left: 1.6rem !important;
}

.hero-button-secondary a {
    background-color: var(--color-background) !important;
    color: var(--color-primary);
}

.hero-button-secondary a:hover {
    background-color: var(--color-secondary-light) !important;
    color: var(--color-background) !important;
}

/* Logo Swiper */

.logo-swiper {
    overflow: hidden;
}

.logo-swiper .swiper-slide img {
    max-width: 12rem;
    height: auto;
}

/* Tabbed Section  */

.hp-tab-area {
    padding: 4.2rem 0;
    background-image: var(--alternative-linear-gradient);
    color: var(--off-white);
    height: 60vh;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}

.tab-area-container {
    gap: 1.6rem !important;
}

.hp-tab-buttons {
    border: 1px solid var(--off-white);
    border-radius: 11px;
    width: 100%;
    display: flex;
    justify-content: space-between;
    position: relative;
    overflow: hidden;
}

.hp-tab-button {
    display: flex;
    align-items: center;
    gap: 1rem;
    cursor: pointer;
    font-size: 1.8rem;
    user-select: none;
    font-weight: 300;
    padding: 1rem;
    position: relative;
    z-index: 3;
}

.hp-tab-button p {
    color: var(--off-white);
}

.hp-tab-button.active p {
    color: var(--color-primary);
}

.hp-tab-button.active {
    color: var(--color-primary);
    position: relative;
    z-index: 2;
}

.hp-tab-button.active img {
    filter: brightness(0) invert(0);
}

.hp-tab-button p {
    margin-bottom: 0;
    pointer-events: none;
}

.hp-tab-button img {
    width: 3.2rem;
    height: 3.2rem;
    filter: brightness(0) invert(1);
    pointer-events: none;
}

.hp-tab-content {
    height: 45vh;
    border: 1px solid var(--off-white);
    border-radius: 11px;
    padding: 0 1.6rem;
    width: 100%;
    display: flex;
    align-items: center;
    min-height: 90%;
    /* Set a minimum height to prevent jumping */
    transition: height 0.3s ease-in-out;
}

.hp-tab-content p {
    font-size: 2.4rem;
    font-weight: 300;
    color: var(--off-white);

}


.hp-tab-content .hide {
    display: none;
}

.hp-tab-content>div {
    transition: opacity 0.2s ease-in-out;
    opacity: 1;
}

/* Sliding background animation */
.sliding-bg {
    position: absolute;
    top: 0;
    height: 100%;
    background-color: var(--off-white);
    border-radius: 10px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 1;
    pointer-events: none;
}

/* In the homepage, we probably won't have enough room on all devices to display the whole overlay. */

.hp-products .product-overlay .overlay-intro {
    display: none;
}

/* Homepage Blog  */

section.hp-blog {
    width: 100%;
}

.hp-blog ul {
    display: flex;
    gap: 2.4rem !important;
    margin-left: 0 !important;
    align-items: Şch !important;
}

.hp-blog ul li img {
    width: 100%;
    object-fit: cover;
    aspect-ratio: 1.63 / 1;
    border-bottom: 1px solid var(--accent-gray-almost-white);
}

.hp-blog ul li .recent-post {
    width: 100%;
    height: 100%;
}

.hp-blog ul .wp-block-post-title a {
    font-size: 2rem;
    font-weight: 800;
    color: var(--color-secondary);
    -webkit-line-clamp: 2;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
    padding: 0 1.6rem;

}

.hp-blog ul .wp-block-post-date {
    color: var(--color-secondary-light);
    font-size: 1.8rem;
    margin: 2.4rem 0;
    padding: 0 1.6rem;
    font-family: var(--redhat-display);

}

.hp-blog ul .wp-block-post-excerpt p {
    font-size: 1.8rem;
    -webkit-line-clamp: 3;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
    padding: 0 1.6rem;
    font-weight: 300 !important;
}

.hp-blog-link {
    display: block;
    align-self: flex-start;
    font-weight: 400;
    margin-top: 2.4rem;
    font-family: var(--redhat-display);
    font-size: 1.6rem;
    letter-spacing: 0.05em;
    color: var(--color-secondary);
    transition: all .3s ease-in-out;
    margin-bottom: 1.6rem;
    padding: 0 1.6rem;
}

.hp-blog-link:hover {
    color: var(--color-primary);
}

.hp-blog-link.has-arrow::after {
    font-size: 1.1rem;
    padding: 2px 0 0 2px;
    width: 1.6rem;
    height: 1.6rem;
    transform: translateX(-6px);
}

/* Homepage Products, Hp products  */

/* Homepage Software */

.use-case-row h4.background-title,
.hw-products-software h4.background-title,
.hp-software-content h4.background-title {
    background-color: var(--color-secondary-light);
    font-size: 1.8rem;
    font-weight: 300;
    width: fit-content;
    padding: 1.2rem 2.4rem;
    border-radius: 8px;
    color: var(--off-white);

}


/* Homepage Icons Area */

.hp-industries {
    background-image: var(--alternative-linear-gradient-reverse);
    padding: 10rem 0;
}

.hp-industries-header {
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    padding: 1rem 0 8rem 0;
    align-items: flex-start !important;
}

.hp-industries-header__text {
    transform: translateY(20%);
}

.hp-industries-header__text a {
    cursor: pointer;
    color: var(--off-white);
}

.hp-industries-header__text a:hover {
    color: var(--color-secondary-light);
}


.hp-industries-header__text,
.hp-industries-header__titles {
    flex-basis: 50% !important;
    flex-shrink: 0 !important;
}

.hp-industries h2 {
    color: var(--off-white);
    font-size: 4.6rem;
    line-height: 5.2rem;
    font-weight: 800;
}

.hp-industries h4 {
    font-size: 1.6rem;
    font-weight: 800;
    color: var(--off-white);
}

.hp-icon-row h3 {
    color: var(--off-white);
    font-size: 2rem;
    font-weight: 800;
    margin-bottom: 0 !important;
}

.hp-industries p {
    color: var(--off-white);
    font-size: 1.8rem;
    line-height: 1.7;
}

.hp-industries figure {
    flex-shrink: 0;
    width: 7rem;
}

.hp-industries img {
    width: 100%;
    height: auto;
}

.hp-industries__icon-container {
    margin-top: 7rem !important;
}

.hp-icon-row {
    margin-bottom: 6rem;
}

.hp-icon-row .wp-block-group__inner-container {
    display: flex;
    align-items: center;
    gap: 2rem;
}

/* Containers of the icon row content, heading and title */
.hp-icon-row .icon-row-content .wp-block-group__inner-container {
    flex-direction: column;
    align-items: flex-start;
    gap: .3rem;
    transform: translateY(1rem);
    flex-grow: 0;
}

.hp-industries hr {
    width: 100%;
    height: 1px;
}

.hp-icon-row h3,
.hp-icon-row p {
    margin-bottom: 0;
}

/* Video */

p.transparent-text {
    font-size: 7vw;
    text-align: center;
    -webkit-text-fill-color: transparent !important;
    -webkit-background-clip: text;
    -webkit-text-stroke: 2px #f8f8f8;
    color: transparent !important;
    background-clip: text;
    font-weight: 800;
    font-family: var(--redhat-display);
    line-height: 1.2;
    letter-spacing: 0.05em;
    margin-bottom: 0 !important;
    border-bottom: 1px solid #f8f8f8;
    border-top: 1px solid #f8f8f8;
    padding: 30vh 0;
}

.fades-out {
    animation: fadeOut 1s ease-out forwards;
    animation-delay: 4s;
}

@keyframes fadeOut {
    0% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}


/* Homepage Responsive */
@media screen and (max-width: 1450px) {

    h2.hp-hero-heading {
        font-size: 5rem;
    }

    h3.hp-hero-subtitle {
        font-size: 2.6rem;
    }

    p.hp-hero-text {
        font-size: 2rem;
    }

    .hp-tab-content {
        height: 40vh;
    }

    .hp-tab-content p {
        font-size: 2rem;
    }

    .hp-industries-header__text {
        transform: translateY(18%);
    }
}

@media screen and (max-width: 1400px) {

    .hp-tab-content {
        height: 37vh;
    }

}

@media screen and (max-width: 1250px) {

    h1.hp-hero-top-heading {
        font-size: 2rem;
        margin-bottom: 1.6rem !important;
    }

    h2.hp-hero-heading {
        font-size: 4.2rem;
    }

    h3.hp-hero-subtitle {
        font-size: 2rem;
    }

    .hp-hero hr{
        margin: 2.4rem 0 !important;
    }

    p.hp-hero-text {
        font-size: 1.8rem;
    }

}

@media screen and (max-width: 1000px) {

    .hp-hero {
        height: 50vh !important;
        min-height: unset !important;
    }

    .hp-hero img {
        object-position: right 20% top 50% !important;
    }

    h1.hp-hero-top-heading {
        font-size: 2rem;
    }

    h2.hp-hero-heading {
        font-size: 4.2rem;
        text-align: center;

    }

    h3.hp-hero-subtitle {
        font-size: 2.2rem;

    }

    p.hp-hero-text {
        font-size: 1.8rem;
        text-align: center;
    }

    .hp-entry-text {
        font-size: 1.8rem !important;
    }

    .hp-tab-buttons {
        width: 100%;
        overflow: scroll;
        /* Hide scrollbars */
        scrollbar-width: none;
        -ms-overflow-style: none;
        justify-content: flex-start;
        gap: 2.4rem;
    }

    .hp-tab-button {
        width: max-content;
        font-size: 1.6rem;
        white-space: nowrap;
        min-width: fit-content;
        flex-shrink: 0;
    }

    .hp-tab-button figure {
        flex-shrink: 0;
    }

    .products-swiper .swiper-slide .product-item {}

    .products-swiper .swiper-slide .product-item img {
        height: auto;
    }


    .hp-tab-buttons::-webkit-scrollbar {
        display: none;
    }

    .hp-tab-content p {
        font-size: 1.8rem;
    }

    /* Hide sliding background on mobile */
    .sliding-bg {
        display: none !important;
    }


    /* Add white background for active state on mobile */
    .hp-tab-button.active {
        background-color: var(--off-white);
        border-radius: 10px;
    }

    .hp-industries-header {
        flex-direction: column;
        font-size: 2.8rem !important;
    }

    .hp-industries-header h2 {
        font-size: 3.2rem !important;
        line-height: 1.2;
    }

    .hp-industries-header__titles,
    .hp-industries-header__titles {
        flex-basis: 100% !important;
    }

    .hp-industries-header__text {
        transform: translateY(0);
    }

    .hp-icon-row .wp-block-group__inner-container {
        align-items: flex-start;
    }

    .events-swiper-container {
        height: fit-content !important;
    }

    .events-swiper .swiper-wrapper {
        margin-bottom: 4rem;
    }

    .mobile-hp-title {
        font-size: 2.8rem !important;
        font-weight: 800 !important;
        letter-spacing: 0.05em;
        font-family: var(--redhat-display);
        color: var(--color-secondary);
    }

    /* Ensure proper spacing for mobile tab buttons */
    .hp-tab-button {
        padding: 1.2rem 2rem;
        margin-right: 0.8rem;
    }

    .hp-tab-button:last-child {
        margin-right: 0;
    }

    .hp-blog ul {
        flex-direction: column;
    }

    .hp-blog ul .recent-post {
        width: 100% !important;
    }

    .hp-blog ul .recent-post .wp-block-post-excerpt {
        padding-bottom: 2.4rem;
    }

    .hp-blog-link.has-arrow {
        display: none;
    }
}

@media screen and (max-width: 1280px) {
    .hp-tab-area{
        height: 65vh;
    }

}

@media screen and (max-width: 600px) {
    .hp-hero {
        height: 80vh !important;
        min-height: unset !important;
    }

    .hp-hero img {
        object-position: right 20% top 50% !important;
    }

    h1.hp-hero-top-heading {
        font-size: 2rem;

    }

    h2.hp-hero-heading {
        font-size: 3.6rem;
        text-align: left;
    }

    h2.hp-hero-heading br {
        display: none;
    }

    h3.hp-hero-subtitle {
        font-size: 2.2rem;
    }
    .hp-tab-button img{
        width: 2.4rem;
        height: 2.4rem;
    }
    .hp-tab-button{
        font-size: 1.5rem;
        padding: 1rem 1.6rem;
    }

    p.hp-hero-text {
        font-size: 1.8rem;
        text-align: left;
    }
}

@media screen and (max-width: 350px) {
    .hp-hero {
        height: 100vh !important;
    }

    .hp-tab-area{
        height: auto;
    }


    .hp-tab-content{
        height: unset !important;
    }
    
    .hp-tab-content p{
        font-size: 1.4rem !important;
    }

}

/* Single Page Styles */

.page-ft-image img {
    width: 100%;
    max-height: 60rem;
    object-fit: cover;
    object-position: center;
    border-radius: 1.6rem;
    margin: 0 0 6rem 0;
}

.page-entry-text {
    max-width: 75%;
    margin: 0 auto;
}

.page-entry-text h4 {
    font-size: 1.8rem;
    letter-spacing: 0.05em;
    margin-bottom: 1rem;
    font-weight: 500;
    color: var(--color-secondary-light);
}

.page-entry-text p {
    font-size: 1.8rem;
    line-height: 1.85;
    font-weight: 300;
    letter-spacing: 0.05em;
    font-family: var(--redhat-display);
}


/* TODO: Move these somewhere else, maybe components */

.wp-block-columns.br-box-columns {
    column-gap: 0;
    row-gap: 2rem;
    box-sizing: border-box;
    align-items: stretch;
}

.br-box-grid {
    gap: 2.4rem;
}

.br-box-grid-smaller-titles h3 {
    font-size: 2.4rem !important;
}

.br-box-item {
    padding: 2.7vh 1.9vw 5.6vh 1.9vw;
    border-radius: 35px;
    align-items: flex-start;
    gap: 0;
    justify-content: flex-start;
}

.br-box-item-relative,
.br-box-item__has-icon {
    position: relative;
}

.br-box-item__white {
    background-color: white;
    border: 1px solid var(--color-secondary-light);
}

.br-box-item__color {
    background-image: linear-gradient(to right bottom, #070707, #213368);
    color: var(--off-white);
}

.br-box-item__light {
    background-color: var(--color-blue-light);
}

.br-box-item__color-light {
    background-image: var(--light-gradient);
    color: var(--color-primary);
}

.br-box-item__color p {
    color: var(--off-white);

}

p.has-icon {
    display: flex;
    gap: 1.6rem;
    align-items: flex-start;
    margin: 2.4rem 0 !important
}

p.has-icon::before {
    content: "";
    width: 2.4rem;
    height: 3.2rem;
    background-image: url("./images/logo/site-icon-marker.png");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    flex-shrink: 0;
    padding-top: 5px;
}

.br-box-item__large-image .br-box-item__text-content {
    width: 55%;
}

.br-box-item__large-image .br-box-image__img-container {
    width: 45%;
    height: 100%;
    position: absolute;
    top: 0%;
    right: 15px;
}

.br-box-item__large-image .br-box-image__img-container:has(.limited-width) {
    width: 35%;
}

.br-box-item__large-image .br-box-image__img-container:has(.limited-width-small) {
    width: 30%;
}

.br-box-item__large-image .br-box-image__img-container img {
    max-width: 100% !important;
    width: 100% !important;
    position: unset !important;

}

.br-box-item__ft-image {
    background: var(--light-gradient);
    padding: 0 !important;
}

.br-box-item__ft-image img {
    width: 100% !important;
    height: 100% !important;
    object-fit: fill !important;
}

.br-box-item__color p.has-icon::before {
    background-image: url("./images/logo/site-icon-white.png");

}

.br-box-item h4 {
    font-size: 1.8rem;
    font-weight: 400;
}

.br-box-item h3 {
    font-size: 3.6rem;
    font-weight: 800;
}

.br-box-item p {
    font-size: 1.8rem;
    font-weight: 400;
    line-height: 1.4;
    font-weight: 300;
}

.br-box-item p:last-of-type {
    margin-bottom: 0;
}

.br-box-image__text-container {
    flex-basis: 75%;
}

/* The main image for the card */

.br-box-item__image .br-box-image__main img {
    position: absolute;
    width: 28rem;
    object-fit: cover;
    height: auto;
    right: -10%;
    top: 5%;
    ;
    opacity: .9;
}

/* A BR Box made out of a single image */

.br-box-single-image,
.br-box-single-image figure,
.br-box-single-image img {
    height: 100%;
    width: 100%;
    object-fit: cover;
}

.br-box-single-image__bordered {
    border: 1px solid var(--color-secondary-light);
    border-radius: 45px;
    padding: 0 !important;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 6rem;
}


.br-box-single-image__bordered figure {
    width: 50%;
    margin: 0 auto;
}

.br-box-single-image__bordered img {
    object-fit: contain !important;
    width: 100% !important;
    height: 100% !important;
}

.br-box-single-image img {
    border-radius: 45px;
}

.br-box-single-image .fill-image img {
    object-fit: fill !important;
}

/* For Icon Boxes that have an icon in the lower left. */

.br-box-item__icon {
    position: absolute;
    bottom: 0;
    right: 0;
    background-color: white;
    border-top-left-radius: 45px;
    padding: 2.2rem;
    width: 21%;
    height: 25%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.br-box-item__icon-container {
    background-color: #1B54A3;
    padding: 1.6rem;
    border-radius: 100%;
}


.br-box-item .br-box-item__icon img {
    width: 3.6rem;
    height: auto;
}

.br-box-item__color .br-box-item__icon img {
    filter: brightness(0) invert(1);
}

/* Alternative for a larger icon. Ironic - but use it in smaller boxes. */

.br-box-item__icon-large {
    padding: 1.6rem .3rem 1.6rem 1.2rem;
    width: 24%;
    height: 22%;
}


.br-box-item__icon-large .br-box-item__icon-container {
    background-color: #1B54A3;
    padding: 1.6rem;
    border-radius: 100%;
}


.br-box-item .br-box-item__icon-large img {
    width: 5rem;
    height: auto;
}

.br-box-icon-link {
    transition: all .3s ease-in-out;
    background-image: var(--dark-gradient);
    cursor: pointer;
}

.br-box-icon-link:hover {
    background-image: var(--dark-gradient-reverse);
}

/* BR Box Helpers */

.br-box-item__has-minor-padding-bottom {
    padding-bottom: 1.2vh;
}

.br-box-item__spaced-between {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-start;
    gap: 4.2rem;
}

.br-box-single-image h3.positioned-title,
.br-box-single-image h3.positioned-title a,
.br-box-item h3.positioned-title a,
.br-box-item h3.positioned-title {
    position: absolute;
    bottom: 0;
    right: 25%;
    font-size: 2.4rem;
    font-weight: 400;
    font-family: var(--redhat-display);
    color: var(--off-white);
}

.br-box-single-image h4.positioned-small-title,
.br-box-item h4.positioned-small-title,
.br-box-single-image h4.positioned-small-title a,
.br-box-item h4.positioned-small-title a {
    position: absolute;
    bottom: 0;
    right: 25%;
    font-size: 1.8rem;
    white-space: nowrap;
    color: var(--off-white);
    font-weight: 400;
    font-family: var(--redhat-display);

}

.br-box-single-image h3.background-title,
.br-box-item h3.background-title {
    background-color: var(--color-background);
    position: absolute;
    bottom: 0;
    right: 0;
    border-top-left-radius: 85px;
    text-align: right;
    font-size: 1.8rem;
    width: fit-content;
    white-space: nowrap;
    color: var(--color-secondary);
    font-weight: 800;
    text-transform: uppercase;
    font-family: var(--redhat-display);
    padding: 3.2rem 0 1.2rem 2.4rem;
    margin-bottom: 0 !important;
}

h2.br-box-item__box-title {
    background: #17479E;
    color: var(--off-white);
    border-radius: 45px;
    padding: 1.6rem 2.4rem;
    font-size: 2.4rem;
    font-weight: 800;
    font-family: var(--redhat-display);
    text-align: center;
    margin-bottom: 4.2rem;
}

/* BR Box Responsive */

@media screen and (max-width: 1450px) {


    .br-box-item {
        padding: 2.7vh 1.9vw 3.6vh 1.9vw;
    }

    .br-box-item h3 {
        font-size: 2.4rem;
    }

    .br-box-item h4 {
        font-size: 1.8rem;
    }

    .br-box-item p {
        font-size: 1.6rem;

    }

    .br-box-item__image .br-box-image__main img {
        width: 45%;
    }

    .br-box-item__icon {
        padding: 1rem;
        height: 20%;
    }

    .br-box-item__icon-container {
        padding: 1rem;
    }

    .br-box-item .br-box-item__icon img {
        width: 3.2rem;
        height: auto;
    }


    .br-box-item__icon-large .br-box-item__icon-container {
        padding: 1rem;
    }

}

@media screen and (max-width: 1000px) {

    .br-box-grid,
    .br-box-columns {
        display: flex !important;
        flex-direction: column;
        gap: 1.6rem !important;
    }




    .br-box-item {
        padding: 2.4rem 2.4rem;
    }

    .br-box-item__image .br-box-image__main img {
        width: 45%;
    }

    h2.br-box-item__box-title {
        font-size: 2rem;
        padding: 1.2rem 1.6rem;
        margin: 2rem 0;
    }

    .br-box-single-image h3.positioned-title,
    .br-box-single-image h3.positioned-title a,
    .br-box-item h3.positioned-title a,
    .br-box-item h3.positioned-title {
        font-size: 1.6rem;
        right: 10%;
        white-space: nowrap;
    }

    .br-box-item__icon {
        top: -65%;
        right: 2%;
        background-color: transparent;
        width: 15%;
        height: auto;

    }

    .br-box-item__icon-container,
    .br-box-item__icon-large .br-box-item__icon-container {
        background-color: transparent;
        background-image: unset;
    }

    .br-box-item .br-box-item__icon img,
    .br-box-item__icon-large .br-box-item__icon img {
        width: 100%;
        height: auto;
    }

    .br-box-single-image h3.background-title,
    .br-box-item h3.background-title {
        bottom: 0%;
        right: 0;
        border-top-left-radius: 85px;
        text-align: right;
        font-size: 1.4rem;
        width: fit-content;
        white-space: nowrap;
        color: var(--color-secondary);
        font-weight: 800;
        text-transform: uppercase;
        font-family: var(--redhat-display);
        padding: 3.2rem 0 1.2rem 2.4rem;
        margin-bottom: 0 !important;
    }
}


@media screen and (max-width: 600px) {
    .br-box-single-image h3.background-title {
        font-size: 1.2rem;
    }
}


/* Page specific responsive fixes for the br-boxes */

@media screen and (max-width: 500px){
    .product-content-container .br-box-item__image{
        flex-direction: column-reverse !important;
    }

    .product-content-container .br-box-item__image .br-box-item__text-content{
        width: 100%;
        text-align: left;
    }

    .product-content-container .br-box-item__image .br-box-image__img-container{
        width: 75%;
        margin: 0 auto 1rem;
        height: 100%;
        position: static;
        opacity: 1;

    }
    
    
}



/* End BR Box, TODO: Move somewhere else */


.has-arrow {
    display: flex;
    align-items: center;
    gap: 1.2rem;
}

.has-arrow::after {
    content: '\2192';
    font-weight: 800;
    font-size: 1.6rem;
    width: 2rem;
    height: 2rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.3s ease;
    flex-shrink: 0;
    border-radius: 50%;
    background-color: var(--color-secondary);
    color: var(--off-white);
}




/* Grids */

.software-text-grid {
    gap: 3.6rem !important;
}

.software-text-grid.align-start {
    align-items: flex-start
}

.background-icon {
    background-image: var(--dark-gradient);
    border-radius: 50%;
    width: 8rem;
    height: 8rem;
    margin-right: 16rem !important;
    display: flex;
    align-items: center;
    justify-content: center;
}

.background-icon img {
    width: 75%;
    height: auto;
    filter: brightness(0) invert(1);
}

/* Grids Responsive */

@media screen and (max-width: 1000px) {
    .software-text-grid {
        display: flex !important;
        flex-direction: column;
        gap: 2.4rem !important;
    }

    .background-icon {
        margin-right: 0 !important;
    }
}


/* Page Decors */

.has-circular-decor-left {
    position: relative;
    width: 100%;
}

.has-circular-decor-right {
    position: relative;
    width: 100%;
}

.has-circular-decor-left::before {
    content: url('./images/decors/software-page-decor.svg');
    position: absolute;
    top: -100%;
    left: 0;
    width: 50%;
    height: auto;
    z-index: -1;
    opacity: 1;
}

.has-circular-decor-right::after {
    content: url('./images/decors/software-page-decor-right.svg');
    position: absolute;
    top: -50%;
    right: 0;
    width: 65%;
    height: auto;
    z-index: -1;
    opacity: 1;
    overflow: hidden;
}

.has-product-decor-left {
    position: relative;
}

.has-product-decor-left::before {
    content: '';
    position: absolute;
    top: -25%;
    left: 0;
    width: 25%;
    height: 100%;
    background-image: url('./images/decors/left-product-decor.svg');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: left top;
    z-index: -1;
}

.has-product-decor-right {
    position: relative;
}

.has-product-decor-right::after {
    content: '';
}

.has-product-decor-right::after {
    content: '';
    position: absolute;
    bottom: -45%;
    right: 0;
    width: 25%;
    height: 100%;
    background-image: url('./images/decors/rigth-product-decor.svg');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: right bottom;
    z-index: -1;
}

.decors-high::before {
    top: 0;
    z-index: 1;
}

.decors-high::after {
    bottom: 0;
    z-index: 1;
}

.has-dark-linear-gradient-background {
    background-image: var(--dark-gradient);
    border-top-left-radius: 88px;
    border-top-right-radius: 88px;

}

/* Decors Responsive */

@media screen and (max-width: 1000px) {
    .page-entry-text {
        max-width: 100%;
    }

    .has-circular-decor-left::before {
        display: none;
    }

    .has-product-decor-left::before,
    .has-product-decor-right::after {
        display: none;
    }
}

/* BLOG ARCHIVE - GENERAL */

h2.section-title {
    font-size: 3.6rem;
    font-weight: 400;
    font-family: var(--redhat-display);
    color: var(--color-secondary);
    margin-bottom: 1.6rem;
}

.recent-posts-grid {
    display: flex;
    justify-content: space-evenly;
    gap: 2.4rem;
}

.recent-post {
    width: 33.33333%;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
    border-radius: 4px;
    cursor: pointer;
    transition: all .3s ease-in-out;
}

.recent-post:hover {
    transform: translateY(-0.5rem);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
}

.recent-post-thumbnail {
    display: block;
    text-decoration: none;
}

.recent-post-thumbnail img {
    width: 100%;
    height: 35.1rem;
    object-fit: cover;
    margin-bottom: 2.4rem;
    border-bottom: 1px solid var(--accent-gray-subtle);
}

.recent-post-content {
    padding: 0 2.4rem;
}

.recent-post-meta {
    height: 12rem;
    margin-bottom: 1.6rem;
}

.recent-post-title-link {
    text-decoration: none;
    display: block;
}

h3.recent-post-title {
    font-size: 2.4rem;
    font-weight: 400;
    font-family: var(--redhat-display);
    color: var(--color-secondary);
    margin-bottom: .4rem;
}

.recent-post-date {
    font-size: 1.4rem;
    font-weight: 400;
    font-family: var(--redhat-display);
    color: var(--accent-gray);
}

.recent-post-excerpt p {
    font-size: 1.6rem;
    font-weight: 400;
    font-family: var(--redhat-display);
    color: var(--color-secondary);
    margin-bottom: 3.6rem;
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: normal;
}

button.read-more-btn,
a.read-more-btn {
    text-decoration: none;
    color: var(--color-background);
    font-size: 1.6rem;
    font-weight: 400;
    font-family: var(--redhat-display);
    margin-bottom: 3.6rem;
    display: block;
    background-image: linear-gradient(to right bottom, var(--color-secondary-light), var(--color-secondary));
    padding: 1.2rem 2.4rem;
    border-radius: 8px;
    border: 2px solid var(--color-secondary-light);
    width: fit-content;
    transition: all 0.3s ease-in-out;
}

button.read-more-btn:hover,
a.read-more-btn:hover {
    background-color: var(--color-secondary-light);
    color: white;
}

.featured-post {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 2.4rem;
    margin: 12rem 0;
}

.featured-post-content {
    flex-basis: 40%;
}

.featured-post-thumbnail {
    flex-basis: 60%;
    max-height: 60vh;

}


h3.featured-post-title {
    font-size: 3.6rem;
    font-weight: 600;
    font-family: var(--redhat-display);
    color: var(--color-secondary);
    margin-bottom: 3.6rem;
}

.featured-post-date {
    font-size: 1.6rem;
    font-weight: 400;
    font-family: var(--redhat-display);
    color: var(--accent-gray);
    margin-bottom: 3.6rem;
}

.featured-post-excerpt p {
    font-size: 1.8rem;
    font-weight: 400;
    font-family: var(--redhat-display);
    color: var(--color-secondary);
    margin-bottom: 4.8rem;
    ;
}

.featured-post-thumbnail img {
    width: 100%;
    height: 100%;
    max-height: 60vh;
    border-radius: 16px;
    object-fit: cover;
    object-position: 50% 50%;
}



.posts-grid-container {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    align-items: Şch;
    gap: 4.8rem;
    row-gap: 6.2rem;
}

.grid-post-thumbnail {
    display: block;
    text-decoration: none;
}

.grid-post-thumbnail img {
    width: 100%;
    height: 45rem;
    object-fit: cover;
    border-radius: 16px;
    margin-bottom: 2.4rem;
}

.grid-post-title-link {
    text-decoration: none;
    display: block;
}

h3.grid-post-title {
    font-size: 2.4rem;
    font-weight: 400;
    font-family: var(--redhat-display);
    color: var(--color-secondary);
    margin-bottom: .4rem;
    text-transform: capitalize;
}

.grid-post-date {
    font-size: 1.6rem;
    font-weight: 400;
    font-family: var(--redhat-display);
    color: var(--accent-gray);
    margin-bottom: 1.6rem;
}

.grid-post-excerpt {
    font-size: 1.6rem;
    line-height: 1.6;
    font-weight: 400;
    font-family: var(--redhat-display);
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: normal;
    margin-bottom: 1.6rem;
}

.grid-post-read-more {
    display: inline-block;
    font-size: 1.6rem;
    font-weight: 500;
    font-family: var(--redhat-display);
    color: var(--color-secondary);
    text-decoration: none;
    padding-bottom: 0.2rem;
    transition: color 0.3s ease;
}

.grid-post-read-more:hover {
    color: var(--accent-gray);
    border-bottom-color: var(--accent-gray);
}

.load-more-section {
    margin-top: var(--st-vertical-padding);
    width: 100%;
}

.load-more-btn {
    width: fit-content;
    margin: 0 auto;
}


/* Blog Archive Responsive */

@media screen and (max-width: 1000px) {

    .recent-posts-grid {
        justify-content: flex-start;
        overflow: scroll;
        -ms-overflow-style: none;
        scrollbar-width: none;
        margin-bottom: 3.6rem;

        &::-webkit-scrollbar {
            display: none;
        }

    }

    h2.section-title {
        font-size: 3rem;
        margin-bottom: 3.6rem;
    }

    .recent-post {
        width: 75% !important;
        flex: 0 0 75vw;
    }

    .recent-post-thumbnail img {
        height: 25rem;
    }


    .featured-post {
        flex-direction: column-reverse;

    }

    .featured-post-thumbnail {
        flex-basis: 100%;
        width: 100%;
    }

    .featured-post-thumbnail img {
        height: auto;
        width: 100%;
    }


    h3.featured-post-title {
        font-size: 2.4rem;
    }

    .featured-post-date {
        font-size: 1.4rem;
    }

    .featured-post-excerpt p {
        font-size: 1.6rem;
    }

    .posts-grid-container {
        grid-template-columns: repeat(1, 1fr);
    }

    h3.grid-post-title {
        font-size: 2rem;
    }

    .grid-post-date {
        font-size: 1.4rem;
    }

    .grid-post-excerpt {
        font-size: 1.6rem;
    }

    .grid-post-read-more {
        font-size: 1.6rem;
    }
}





/* 

SINGLE BLOG POST
POSTS (AND PAGES) CONTENT AND CONTENT TYPE MODIFICATIONS 

*/

.single-post__area {
    max-width: var(--article-width);
    margin: 4rem auto;
    font-family: var(--redhat-display);
}

.post-categories {
    margin-bottom: 1rem;
    color: var(--color-secondary);
    font-size: 1.8rem;
    font-weight: 500;
}

.post-metas {
    margin-bottom: 1.6rem;
    font-size: 1.6rem;
    font-weight: 400;
    font-family: var(--redhat-display);
    color: var(--accent-gray);
}

.ft-image img {
    margin: 4rem 0;
    max-height: 60rem;
    width: 100%;
    object-fit: cover;
    object-position: center;
}

.single-post__area h1.post-title {
    letter-spacing: -0.011em;
    line-height: 52px;

    font-size: 4.2rem;
    font-weight: 700;
    font-family: var(--redhat-display);
    color: var(--color-secondary);
}

.single-post-container__content p {
    font-family: var(--redhat-display);
    font-size: 2rem;
    margin: 2rem 0;
    line-height: 1.67;
    letter-spacing: -0.003em;
    overflow-wrap: break-word;
}

.single-post-container__content h2 {
    letter-spacing: -0.016em;
    line-height: 30px;
    margin-bottom: 3.2rem;
    margin-top: 1.5em;
    /* consider */
    font-size: 2.4rem;
    font-weight: 600
}


.single-post-container a {
    color: var(--color-secondary-light);
}

.single-post-container li,
.single-post-container ol,
.single-post-container ul {
    font-size: 2rem;
}

.single-post-container__content a>img {
    cursor: zoom-in;
}

.single-post-container__content img {
    max-width: 100%;
    width: 100%;
    height: auto;
    margin: 3.2rem 0;
}

.single-post-container__content img.aligncenter {
    display: block;
    margin-left: auto;
    margin-right: auto;
    margin: 2rem auto;
}

.single-post-container__content img.alignleft {
    float: left;
    margin-right: 1rem;
}


.single-post-container__content img.alignright {
    float: right;
    margin-left: 1rem;
}


.single-post-container__content a:has(img.aligncenter) {
    margin: 4rem auto;
    width: 100%;
}

/* Related Posts Area */

aside.related_posts {
    padding: 7.2rem 0;
    background-color: #f7f7f7;
}

.related_posts .site-container {
    padding-top: unset;
}

.related-posts-container {
    max-width: var(--article-width);
    margin: 0 auto;
}

h3.related-posts-title {
    letter-spacing: -0.016em;
    line-height: 30px;
    margin-bottom: 4.8rem;
    margin-top: 1.5em;
    /* consider */
    font-size: 2.4rem;
    font-weight: 600;
    font-family: var(--redhat-display);
    color: var(--color-primary) !important;
}

.related-posts-grid {
    display: flex;
    flex-wrap: wrap;
    column-gap: 4.2rem;
    row-gap: 4.2rem;
    align-items: Şch;
}

.related-post {
    width: calc(50% - 2.1rem);
    flex-basis: calc(50% - 2.1rem);
}

.related-post__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 50%;
    margin-bottom: 2.4rem;
    aspect-ratio: 2/1;
}

h3.related-post__content-title {
    max-height: 5rem;
    letter-spacing: 0;
    font-size: 2rem;
    font-weight: 700;
    --webkit-line-clamp: 2;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: normal;
    margin-bottom: 2.4rem;
    font-family: var(--redhat-display);
}

.related-post-meta .date {
    font-size: 1.4rem;
    font-weight: 400;
    font-family: var(--redhat-display);
    color: var(--accent-gray);
}

.all-posts-link {
    font-size: 2rem;
    font-family: var(--redhat-display);
    color: var(--color-primary);
    text-decoration: none;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: .6rem;
    margin-top: 4.8rem;
    cursor: pointer;
    text-align: center;
    font-weight: 500;
}

.all-posts-link::after {
    content: '→';
    font-family: var(--redhat-display);
    font-size: 2rem;
    font-weight: 500;
    display: block;
    transition: all 0.3s ease-in-out;
    margin-top: 0.3rem;
}

.all-posts-link:hover::after {
    transform: translateX(0.3rem);
}

/* Share Buttons */

.share-toolbar {
    position: fixed;
    width: 2vw;
    top: 45%;
    left: 0;
    display: flex;
    align-items: flex-start;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    opacity: 1;
    transform: scale(1);
}

.share-toolbar--static {
    position: static !important;
    width: 100% !important;
    top: auto !important;
    left: auto !important;
    display: block !important;
    align-items: Şch !important;
    opacity: 0.95;
    transform: scale(0.98);
}

.share-toolbar--disappearing {
    opacity: 0;
    transform: scale(0.9) translateX(-20px);
    transition: all 0.3s ease-out;
}

.share-buttons {
    padding-left: 1.6rem;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 2.4rem;
    cursor: pointer;
}

.share-toolbar--static .share-buttons {
    flex-direction: row;
    align-items: center;
    justify-content: center;
    padding-left: 0;
    gap: 1.6rem;
    transition: all 0.3s ease-out;
}

.share-buttons a img,
.share-buttons button img {
    transition: all .3s ease-in-out;
    filter: brightness(0) saturate(100%) invert(15%) sepia(100%) saturate(1000%) hue-rotate(200deg) brightness(0.2) contrast(1.5);
}

.share-buttons a img:hover,
.share-buttons button img:hover {
    transform: scale(1.1);
    filter: brightness(0) saturate(100%) invert(15%) sepia(100%) saturate(1000%) hue-rotate(200deg) brightness(0.2) contrast(1.5);
}

.share-title {
    display: none;
}

.share-area {
    display: block;
}

.wp-block-post-terms__separator {
    color: var(--color-secondary);
}

/* Share Toolbar Responsive */

@media screen and (max-width: 1000px) {

    .share-title {
        display: block;
        font-size: 2.4rem !important;
        margin-bottom: 1.6rem;
    }

    .share-area {
        display: block;
        width: 100svw;
    }

    .share-area .share-toolbar {
        display: block;

        position: static;
        width: 100%;
    }

    .share-area .share-toolbar .share-buttons {
        flex-direction: row;
        align-items: baseline;
        padding-left: 0;
        margin-bottom: .2rem;
    }

    .share-buttons a,
    .share-buttons button {
        background-color: var(--color-secondary);
        width: 4.2rem;
        height: 4rem;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 8px;
        padding: 0.6rem;
        transition: all 0.3s ease;
    }

    .share-buttons a:hover,
    .share-buttons button:hover {
        background-color: var(--color-secondary-light);
    }

    .share-area .share-toolbar .share-buttons img {
        width: 1.6rem;
        height: auto;
        filter: brightness(0) invert(1);
    }

    .share-toolbar {
        display: none;
    }
}


/* Use Cases; Archive Use Case */

.use-case-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 2.4rem;
}

.use-case-card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    border-radius: 16px;
    border: 2px solid var(--color-secondary-light);
    max-width: 100%;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
}

.use-case-card-top {
    display: flex;
    justify-content: center;
    align-items: center;
    border-top-left-radius: 14px;
    border-top-right-radius: 14px;
    width: 100%;
}

h2.use-case-card-title,
.use-case-card-description {
    font-family: var(--redhat-display);
}

h2.use-case-card-title {
    font-size: 2.8rem;
    font-weight: 500;
    font-family: var(--redhat-display);
    color: var(--color-secondary);
}

.use-case-card-description p {
    font-size: 1.8rem;
    font-weight: 400;
    font-family: var(--redhat-display);
    color: var(--color-secondary);
}

.use-case-card-image {
    width: 100%;
    height: 45rem;
    object-fit: cover;
    border-top-left-radius: 14px;
    border-top-right-radius: 14px;
}

.use-case-card-content {
    padding: 2rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: fit-content;
    width: 100%;
}

.use-case-bottom-row {
    margin-top: 2.4rem;
    padding-top: 2.4rem;
    border-top: 2px solid var(--color-secondary-light);
    margin-top: 2rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

a.use-case-card-button {
    text-decoration: none;
    color: var(--color-background);
    font-size: 1.6rem;
    font-weight: 400;
    font-family: var(--redhat-display);
    background-image: linear-gradient(to right bottom, var(--color-secondary-light), var(--color-secondary));
    padding: 1.2rem 2.4rem;
    border-radius: 8px;
    border: 2px solid var(--color-secondary-light);
    max-width: 100%;
    transition: all 0.3s ease;
}

a.use-case-card-button:hover {
    color: var(--color-background) !important;
    background-image: linear-gradient(to right bottom, var(--color-secondary), var(--color-secondary-light));
}

h4.use-case-card-products {
    font-size: 1.6rem;
    margin-bottom: 0;
    font-weight: 600;
    font-family: var(--redhat-display);
    color: var(--color-secondary);
}

.use-case-card-product {
    font-size: 1.6rem;
    font-weight: 400;
    font-family: var(--redhat-display);
    color: var(--color-secondary);
    text-decoration: none;
    transition: color 0.3s ease;
}

.use-case-card-product:hover {
    color: var(--color-secondary-light);
    text-decoration: underline;
}

.used-products {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.use-case-card-client {
    font-family: var(--redhat-display);
}


/* Archive Use Case Responsive */

@media screen and (max-width: 1440px) {
    h2.use-case-card-title {
        font-size: 2.4rem;
    }
    
    .use-case-card-description p {
        font-size: 1.6rem;
    }
}

@media screen and (max-width: 1000px) {
    .use-case-grid {
        padding: var(--mobile-vertical-padding) 0;
        grid-template-columns: repeat(1, 1fr);
    }

    .use-case-card-image {
        max-width: 100%;
    }

    h2.use-case-card-title {
        font-size: 2rem;
    }
    
    .use-case-card-description p {
        font-size: 1.4rem;
    }

    .use-case-bottom-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 1.6rem;
    }

    .use-case-card-button {
        width: 100%;
        text-align: center;
    }

}

/* Use Cases; Single Use Case */

.use-case-header {
    display: flex;
    align-items: center;
    padding: 12rem 0 15rem;
}

.use-case-top-title {
    margin-bottom: 0 !important;
}

h1.use-case-header-title {
    font-size: 4.8rem;
    font-weight: 800;
    font-family: var(--redhat-display);
    color: var(--color-secondary);
}

.use-case-header-description p {
    font-size: 2.2rem !important;
    font-weight: 400;
    font-family: var(--redhat-display);
}

.use-case-header-info {
    flex-basis: 50%;
    flex-shrink: 0;
    flex-grow: 0;
}

.use-case-swiper {
    flex-basis: 50%;
    flex-shrink: 0;
    flex-grow: 0;
    max-height: 50rem;
}

.product-slide-content {
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}



.use-case-swiper .swiper-pagination .swiper-pagination-bullet-active {
    background-color: var(--color-secondary);
    opacity: 1;
}

.use-case-swiper .swiper-slide img {
    max-height: 85% !important;
    margin: 0 auto;
    width: auto;
}

.use-case-swiper .swiper-slide h3.product-title {
    font-size: 2rem;
    font-weight: 400;
    font-family: var(--redhat-display);
    text-align: center;
    padding-bottom: 1.6rem;
}


.use-case-content__container {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 4.2rem;
}

section.use-case-section {
    flex-basis: 70%;
    flex-shrink: 0;
    flex-grow: 0;
}

section.use-case-section h2 {
    font-size: 2.9rem !important;
    font-weight: 400;
    font-family: var(--redhat-display);
    margin-bottom: 1.6rem;
}

section.use-case-section p {
    font-size: 2rem !important;
    font-weight: 400;
    line-height: 1.67;
    font-family: var(--redhat-display);
    margin-bottom: 2rem;
}

section.use-case-section ul,
section.use-case-section ol {
    font-size: 1.8rem !important;
}

aside.use-case-aside {
    flex-basis: 25%;
    flex-shrink: 0;
    flex-grow: 0;
    padding: 1.6rem 2.4rem;
    border: 4px solid var(--color-secondary-light);
    border-radius: 16px;
    background-color: var(--color-secondary);
}


.use-case-aside-content strong,
.use-case-aside-content p,
.use-case-aside-content h3 {
    color: var(--color-background) !important;
}

.use-case-aside-header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .3rem;
    font-size: 2.4rem;
    font-family: var(--redhat-display);
}

.use-case-aside-header::after {
    content: '';
    display: block;
    width: 100%;
    height: 4px;
    background-image: linear-gradient(to right, var(--color-secondary-light), var(--color-secondary));
    margin-bottom: 3.6rem;
}

.use-case-aside-header p {
    font-size: 2.4rem;
    font-weight: 400;
    margin-bottom: 0;
}

.use-case-aside-header strong {
    font-size: 2.4rem;
}

.use-case-aside-info {
    margin-bottom: 4rem;
}

.use-case-aside-info-title {
    font-size: 2rem;
    font-weight: 400;
    font-family: var(--redhat-display);
}

.use-case-aside-info-description {
    font-size: 1.6rem;
    line-height: 1.67;
    font-weight: 400;
    font-family: var(--redhat-display);
}

.use-case-related-products {
    padding: 6rem 0;
}

.use-case-related-products-title {
    font-size: 3.2rem;
    font-weight: 400;
    font-family: var(--redhat-display);
    color: var(--color-secondary);
    margin-bottom: 3.6rem !important;
}

.use-case-related-products-grid {
    display: flex;
    gap: 2.4rem;
}

.use-case-related-products-grid .product-item {
    flex-basis: calc(25% - 1.9rem);
}

/*  Use Case Single Responsive */

@media screen and (max-width: 1000px) {
    .use-case-header {
        flex-direction: column;
        padding: var(--mobile-vertical-padding) 0;

    }

    .use-case-header-info {
        flex-basis: 100%;
    }

    h1.use-case-header-title {
        font-size: 3.2rem;
    }

    .use-case-header-description p {
        font-size: 1.8rem !important;
    }

    .use-case-swiper {
        flex-basis: 100%;
        position: relative;
        height: 80svh !important;
        max-height: unset;
    }

    .use-case-swiper .swiper-slide img {
        max-height: 55svh !important;
    }

    .use-case-swiper .swiper-pagination {
        position: static;
        margin-top: 2.4rem;
        width: 100% !important;
        transform: translateX(0) !important;
    }

    .use-case-content__container {
        flex-direction: column-reverse;
    }

    .use-case-related-products {
        padding: var(--mobile-vertical-padding) 0;
    }

    .use-case-related-products-grid {
        flex-direction: column;
    }

}

/* Archive product grid styling */
.product-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
    margin: 2rem 0;
}

/* Single Product */

.product-header {
    background-image: var(--light-gradient);
    padding-top: var(--header-height);

}

.product-header-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 6rem 0;
}

.product-header-content {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: flex-start;
    max-width: 45%;
}

.product-header-image {}

.product-header-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

a.product-top-title {
    background-color: var(--color-secondary-light);
    font-size: 2rem;
    font-family: var(--redhat-display);
    font-weight: 300;
    width: fit-content;
    padding: 1.2rem 2.4rem;
    border-radius: 5rem;
    color: var(--off-white);
    margin-bottom: 4.2rem;
}

a.product-top-title__custom {
    background: var(--dark-gradient);
}


a.product-top-title:hover {
    background-color: var(--color-secondary);
    color: var(--color-background);
}

h3.product-header-subtitle {
    font-family: var(--redhat-display);
    font-size: 3.6rem;
    font-weight: 300;
    margin-bottom: 0
}

h1.product-header-title {
    font-family: var(--redhat-display);
    font-size: 4.8rem;
    font-weight: 800;
    margin-bottom: 4.2rem !important;
    text-align: right;
}

.product-header-description {
    font-family: var(--redhat-display);
    font-size: 2rem;
    line-height: 1.67;
    font-weight: 400;
    margin-bottom: 4.2rem !important;
    text-align: right;
}

a.product-header-link {
    padding: 1.2rem 2.4rem;
    border-radius: 1.6rem;
    font-family: var(--redhat-display);
    font-size: 1.67rem;
    font-weight: 400;
    text-decoration: none;
    transition: all .3s ease-in-out;
    border: 1px solid var(--color-secondary);
}

a.product-header-link:hover {
    background-color: var(--color-secondary);
    color: var(--color-background);
}

.product-header-features {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-family: var(--redhat-display);
    margin-bottom: 4.2rem;
    gap: 3.6rem;
}

.product-header-feature {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .6rem;
}

.product-header-feature-label {
    font-size: 1.6rem;
    font-weight: 300;
    font-family: var(--redhat-display);
    color: var(--color-secondary-light);
    text-align: center;
    white-space: nowrap;
}

.product-header-feature-value {
    white-space: nowrap;
}

/* 

Styles for the product view selector. Currently unused.

TODO: [On delivery] - Remove this if it's not needed.

.product-view-selector {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 4.2rem;
    width: 100%;
    transform: translateY(0);
}

.view-buttons-container {
    display: flex;
    background-color: var(--color-background);
    border-radius: 8px;
}

button.product-view-button {
    font-family: var(--redhat-display);
    font-size: 1.8rem;
    padding: 1.2rem 1.6rem;
    background-color: transparent;
    color: var(--color-secondary);
    cursor: pointer;
    transition: all .3s ease-in-out;
    border: none;
    outline: none;
    position: relative;
    z-index: 1;
}

button.product-view-button:first-child {
    border-top-left-radius: 8px;
    border-bottom-left-radius: 8px;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

button.product-view-button:last-child {
    border-top-right-radius: 8px;
    border-bottom-right-radius: 8px;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

button.product-view-button:not(:first-child):not(:last-child) {
    border-radius: 0;
}

button.product-view-button.active {
    background: var(--color-blue-light);
    color: var(--color-primary);
}
 */
.product-content-container {
    padding-top: 3rem;
}

section.introduction {
    display: block;
}

h2.product-intro-title {
    text-align: center;
    font-size: 4.2rem;
    font-weight: 800;
    font-family: var(--redhat-display);
    margin-bottom: 6rem;
}

.hw-products-software {
    padding: 12rem 0;
    background-image: var(--dark-gradient);
}



.hw-product-software-content,
.hw-products-software p,
.hw-products-software strong,
.hw-products-software h3,
.hw-products-software h4,
.hw-products-software h5,
.hw-products-software h6 {
    color: var(--off-white);
}

.hw-products-software .software-cta-buttons a {
    background-color: var(--color-secondary-light);
}

.hw-products-software .software-cta-buttons a:hover {
    background-color: var(--color-secondary);
}

.product-software-grid {
    gap: 9.6rem !important;
}

.product-software-grid img {
    width: 8rem !important;
    height: 8rem !important;
    object-fit: contain !important;
    filter: brightness(0) invert(1);

}

.product-software-grid .is-smaller img {
    width: 8rem !important;
    height: 8rem !important;
    object-position: left !important;
}

.use-case-row {
    background-image: var(--light-gradient);
    padding: 12rem 0;
}

.use-case-row h2.use-case-title {
    color: var(--color-secondary-light);
    font-size: 5.2rem;
    font-weight: 300;
    font-family: var(--redhat-display);
    margin-bottom: 6rem;
    max-width: 75%;
}

.use-case-row h2.use-case-title strong {
    font-weight: 800;
}

/* Product header action buttons */
.product-header-buttons {
    display: flex;
    flex-direction: row;
    gap: 1.6rem;
    margin-bottom: 3.6rem;
}

/* Single Product Responsive */

@media screen and (max-width: 1445px) {
    .product-header-description {
        font-size: 1.8rem;
    }

    .product-header-image-container {
        width: 40%;
    }
}

@media screen and (max-width: 1000px) {

    .product-header-container {
        display: flex;
        flex-direction: column;
        padding-top: 10rem;
    }

    .product-header-features {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 1.6rem;
        width: 100%;
        justify-content: space-between;
        justify-items: flex-start;
    }

    .product-header-feature {
        width: 100%;
        justify-content: flex-start;
        align-items: flex-start;
    }



    .product-header-content {
        align-items: flex-start;
        max-width: 100%;
    }

    .product-header-image-container {
        width: 75vw;
    }

    a.product-top-title {
        font-size: 1.4rem;
        padding: 1rem 1.6rem;
        margin-bottom: 1.6rem;
    }

    h3.product-header-subtitle {
        font-size: 2.4rem;
    }

    h1.product-header-title {
        font-size: 3.2rem;
        text-align: left;
        margin-bottom: 2rem !important;
    }

    .product-header-description {
        font-size: 1.6rem;
        margin-bottom: 1.6rem !important;
        text-align: left !important;
    }

    .product-header-image-container img {
        width: 100%;
        height: auto;
    }

    .product-header-buttons {
        display: flex;
        flex-direction: column;
        gap: 1.6rem;
        margin-bottom: 3.6rem;
    }

    a.product-header-link {
        font-size: 1.4rem;
        padding: 1rem 1.6rem;
    }

    .hw-products-software .hw-product-software-content {
        align-items: flex-start !important;
    }

    .hw-products-software .hw-product-software-content h2,
    .hw-products-software .hw-product-software-content p {
        text-align: left !important;
    }

    .hw-products-software .hw-product-software-content .software-cta-buttons {
        width: 100%;
        justify-content: center !important;
    }

    .product-software-grid {
        gap: 4.8rem !important;
    }

    .product-software-grid img {
        width: 8rem !important;
        height: 6rem !important;
    }

    .product-software-grid h3 {
        font-size: 1.6rem !important;
        margin-bottom: 1.6rem !important;
    }


    .use-case-row h2.use-case-title {
        max-width: 100%;
        font-size: 3.2rem !important;
        margin-bottom: 2rem !important;
    }

}

@media screen and (max-width: 450px) {

    .hp-icon-row .wp-block-group__inner-container{
        flex-direction: column;
        align-items: flex-start;
        gap: 1rem !important;
    }
    .product-software-grid .is-smaller img,
    .product-software-grid img {
        width: 8rem !important;
        height: 6rem !important;
    }

    .product-software-grid h3 {
        font-size: 1.5rem !important;
    }

}

/* Search Page */

header.search-header {
    display: flex;
    align-items: baseline;
    gap: .3rem;
    font-family: var(--typing-font);
}

.search-header span {
    font-size: 3.6rem;
    color: #070e17;
}

.search-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    column-gap: 2%;
    row-gap: 4rem;
}

.search-item {
    cursor: pointer;
}

section.search-section {
    margin: 6rem 0;
}

.search-item a {
    display: block;
}

.search-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    aspect-ratio: 4/3;
}

.search-item h3 {
    font-size: 2rem;
    margin-top: 1rem;
    margin-bottom: 0;
    font-weight: 300;
}

.search__no-results {
    min-height: 60vh;
}

/* Search Page Responsive */

@media screen and (max-width: 1000px) {
    .search-grid {
        grid-template-columns: repeat(2, 1fr);
        row-gap: 4rem;
    }

    .search-item h3 {
        font-size: 1.6rem;
    }
}

/* PRODUCTS, PRODUCTS ARCHIVE */

.product-archive-header {
    background-image: linear-gradient(rgba(33, 51, 104, 0.7), rgba(33, 51, 104, 0.5)), url(./images/header-images/bpth-bg.jpg) !important;

}

.product-archive-header-image {
    position: absolute;
    bottom: 2.4rem;
    right: calc((100vw - var(--site-width)) / 2);
    width: 50%;
    height: auto;

}


.archive-description-container {
    display: flex;
    align-items: flex-start;
    margin-bottom: 12.5rem;
}

.archive-description-title {
    width: 33.33333%;
    font-size: 2.9rem;
    font-weight: 400;
    font-family: var(--redhat-display);
    color: var(--color-secondary);
    margin-bottom: 1.6rem;
}

.archive-description-content {
    width: 66.66666%;
    font-size: 1.8rem;
    font-weight: 400;
    font-family: var(--redhat-display);
}

.product-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    column-gap: 2%;
    row-gap: 4rem;
}

.product-item {
    border: 1px solid var(--accent-gray-subtle);
    border-radius: 50px;
}

.product-item a {
    padding: 3.8rem 0 10rem;
    height: 100%;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    position: relative;
}

h2.product-title {
    font-size: 2.8rem;
    text-align: center;
    font-weight: 400;
    font-family: var(--redhat-display);
    color: var(--color-secondary);
    margin-bottom: 1.6rem;
    z-index: 4;

}


.product-item img {
    width: 75% !important;
    height: auto !important;
    margin: 0 auto;
    display: block;
    z-index: 1;
}

.product-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    opacity: 0;
    visibility: hidden;
    height: 0;
    border-top-left-radius: 50px;
    border-top-right-radius: 50px;
    border-radius: 50px;
    background-image: linear-gradient(to right bottom, rgba(10, 19, 47, 0.9), rgba(0, 0, 0, 0.95));
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-end;
    gap: 1.6rem;
    transition: all .3s ease-in-out;
    padding: 3.6rem 2.4rem;
}

p.overlay-intro {
    font-size: 1.5rem;
    font-weight: 400;
    color: var(--color-background);
    font-family: var(--redhat-display);
    margin-bottom: 1.6rem;
}


.overlay-item-title {
    color: var(--color-background);
    font-size: 1.5rem;
    font-weight: 800;
    font-family: var(--redhat-display);
    margin-right: .3rem;
}

.overlay-item-description {
    font-family: var(--redhat-display);
    color: var(--color-background);
    font-size: 1.5rem;
}

.product-item:hover .product-overlay {
    visibility: visible;
    height: 100%;
    opacity: 1;
}

.product-item:hover .product-title {
    color: var(--color-background);
}

.overlay-cta {
    color: var(--color-background);
    font-size: 1.6rem;
    font-weight: 800;
    font-family: var(--redhat-display);
    margin-top: 1.6rem;
}

/* /* PRODUCTS, PRODUCTS ARCHIVE RESPONSIVE  */


/* Product Arch Responsive */

@media screen and (max-width: 2000px) {
    .archive-description-container {
        gap: 4rem;
    }
}

@media screen and (max-width: 1000px) {

    .archive-description-container {
        flex-direction: column;
    }

    .product-archive-header-image {
        width: 85%;

    }

    .archive-description-title {
        width: 100%;
    }

    .archive-description-content {
        width: 100%;
    }

    .product-grid {
        display: flex;
        flex-direction: column;
    }


    .product-item a {
        padding: 3.8rem 0 3.8rem;
    }

}

/* Single Product Page */

.technical-information-grid {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    column-gap: 1%;
    grid-auto-flow: dense;
    row-gap: 3rem;
    margin-top: 3.6rem;
}


.technical-information-item {
    border: 1px solid var(--accent-gray-almost-white);
    border-radius: 4px;
    grid-column: span 3;
}

.technical-information-item.grid-item-large {
    grid-column: span 6;
}

.technical-information-item__header {
    display: flex;
    align-items: center;
    padding: .7rem 1.6rem;
    gap: 1.2rem;
    background-image: linear-gradient(to right bottom, var(--color-secondary-light), var(--color-secondary));
}

.technical-information-item__header svg {
    width: 3rem;
    height: 2.8rem;
    stroke: white !important;
    fill: white !important;
    stroke-width: 1px !important;
}

.technical-information-item__header h3 {
    font-size: 1.8rem !important;
    font-weight: 400;
    font-family: var(--redhat-display);
    margin-bottom: 0 !important;
    color: white;
    white-space: nowrap;
}

.technical-information-item p {
    font-size: 2rem;
    font-weight: 500;
    font-family: var(--redhat-display);
    padding: 1.6rem 1.6rem;
    text-align: center;
    white-space: nowrap;
    margin-bottom: 0 !important;
}

.datasheet-link-container {
    margin-top: 3.6rem;
    font-size: 1.8rem;
    font-family: var(--redhat-display);
}



.products-alt-cols .advantages-grid h3 {
    font-size: 2.4rem !important;
}

/* Single Product Page Responsive */

/* Technical Information Responsive */

@media screen and (max-width: 1000px) {
    .technical-information-grid {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        align-items: Şch;
        row-gap: 1.6rem;
        column-gap: 2%;
    }

    .technical-information-item {
        grid-column: span 1;
        display: flex;
        flex-direction: column;
        min-height: 0;
    }

    .technical-information-item.grid-item-large {
        grid-column: span 2;
    }

    .technical-information-item p {
        flex: 1;
        display: flex;
        align-items: center;
        justify-content: center;
        min-height: 0;
    }
}

/* Event Page */

.events-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2.4rem;
    margin-top: 3rem;
    margin-bottom: var(--st-vertical-padding);
}

.event-card {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--accent-gray-almost-white);
    border-radius: 16px;
    overflow: hidden;
    cursor: pointer;
}

.event-card-top {
    background-image: linear-gradient(to right bottom, #ffffff, #E8F6FB);
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 30rem;
    margin-bottom: 2.4rem;
    transition: all .3s ease-in-out;
    position: relative;
}

.event-card-top::after {
    content: "";
    background-image: url('./images/external-link.png');
    background-size: 5%;
    background-repeat: no-repeat;
    background-position: top 10% right 3%;
    position: absolute;
    width: 100%;
    height: 100%;
    opacity: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all .3s ease-in-out;
}

.event-card:hover .event-card-top {
    transform: translateY(-0.5rem);
    background-image: linear-gradient(to right bottom, var(--color-secondary), var(--color-secondary-light));
}

.event-card:hover .event-card-top::after {
    opacity: 1;
}

.event-card-image {
    width: 80%;
}

.event-card-content {
    padding: 0 2.4rem 2.4rem;
}

h3.event-card-title {
    font-size: 2.4rem;
    font-weight: 400;
    font-family: var(--redhat-display);
    color: var(--color-secondary);
    margin-bottom: 2.4rem;
}

.event-card-meta {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1.6rem;
}

.event-card-meta img {
    width: 2rem;
    height: 2rem;
}

.event-card-meta span {
    font-size: 1.6rem;
    font-weight: 400;
    font-family: var(--redhat-display);
}

/* Event Page Responsive */

@media screen and (max-width: 1000px) {
    .events-grid {
        grid-template-columns: repeat(1, 1fr);
    }
}


/* Contact page */

#bpth-head-office-map,
#bpth-factory-map {
    width: 100%;
    height: 60vh;
    border-radius: 16px;
    border-top: 2.4rem solid var(--color-secondary);

}

#bpth-head-office-map {
    margin-bottom: 4.8rem;
}

.bpth-contact-grid {
    align-items: flex-start !important;
    justify-content: space-between !important;
    gap: 2.4rem !important;
}

.bpth-contact-box {
    border-radius: 16px;
    padding: 1.2rem 2.4rem;
    border: 1px solid var(--accent-gray-almost-white);
    margin-bottom: 2.4rem !important;
    box-shadow: rgba(0, 0, 0, 0.145) 0px 1px 2px;
    gap: 4.8rem;
    cursor: pointer;
    transition: all .3s ease-in-out;
    width: 55rem;
}



.bpth-contact-box:hover {
    box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
    transform: scale(1.03);
}

.bpth-contact-box h4 {
    font-size: 1.6rem;
    font-weight: 800;
    margin-bottom: 0;
    font-family: var(--redhat-display);
}

.bpth-contact-box a {
    color: var(--color-primary);
}

.bpth-contact-box p {
    font-size: 1.5rem;
    font-weight: 400;
    margin-bottom: 0;
    font-family: var(--redhat-display);
}

.bpth-contact-box figure {
    width: 4.2rem;
    height: 4.2rem;
    background-color: var(--color-secondary);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 1.2rem;
}

.bpth-contact-box figure a {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
}

.bpth-contact-box figure img {
    width: 55% !important;
    height: auto;
    filter: brightness(0) invert(1);
}



.ac-contact-form {}

.ac-contact-form form {}

.ac-contact-form .wpforms-head-container .wpforms-title {}

.ac-contact-form label.wpforms-field-label {}

.ac-contact-form input {}

.ac-contact-form .wpforms-required-label {}

.ac-contact-form input:focus,
.ac-contact-form input:focus-visible,
.ac-contact-form input:focus-within {}

.ac-contact-form textarea {}

.ac-contact-form textarea:focus,
.ac-contact-form textarea:focus-visible,
.ac-contact-form textarea:focus-within {}


.ac-contact-form input::placeholder {}

.ac-submit-button {}

.wpforms-submit-container {}

/* Contact Page Responsive */

@media screen and (max-width: 1000px) {

    .bpth-contact-box {
        width: 100%;
    }

    .form-mobile.wpforms-container {}
}


/* Legal Notice Pages */

.legal-text-container {
    margin-top: 4rem;
    font-family: var(--redhat-display);
    font-size: 1.6rem;
    line-height: 1.56;
}

.legal-text-container h1 {
    font-size: 3.6rem;
    font-weight: 500;
    margin-bottom: 2.4rem;
    text-transform: uppercase;
    color: var(--color-secondary);
}

.legal-text-container p {
    text-align: justify;
}

/* Legal Text Responsive */

@media screen and (max-width: 1000px) {
    .legal-text-container h1 {
        font-size: 2.4rem;
    }
}

/* Components */

/* Service Cards */

.service-card {
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
    border-radius: 16px;
    overflow: hidden;
    cursor: pointer;
    font-family: var(--redhat-display);
    transition: all .3s ease-in-out;
}

.service-card:hover {
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
    transform: scale(1.05);
}

.service-card h2 {
    width: 100%;
    background-image: var(--dark-gradient);
    color: var(--off-white);
    padding: 1.2rem 2.4rem;
    font-size: 2.2rem;
    font-weight: 700;
    font-family: var(--redhat-display);
    margin-bottom: 0;
    text-transform: uppercase;
}

.service-card p {
    font-size: 1.8rem;
    font-weight: 400;
    font-family: var(--redhat-display);
    color: var(--color-secondary);
    padding: 1.2rem 2.4rem;
    margin-bottom: 2.4rem;
}


.service-card li {
    font-size: 1.8rem !important;
    font-weight: 400;
    font-family: var(--redhat-display);
    color: var(--color-secondary);
    display: flex;
    align-items: center;
    gap: 1.2rem;
    fill: var(--color-secondary);
    stroke: var(--color-secondary);
    list-style: none;
    position: relative;
}

.service-card li::before {
    content: '';
    background-image: url('./images/check-circle.png');
    background-size: 2.4rem 2.4rem;
    background-repeat: no-repeat;
    background-position: center;
    width: 2.4rem;
    height: 2.4rem;
    display: inline-block;
    flex-shrink: 0;
    margin-right: 1.2rem;
}

.service-card a {
    display: block;
    width: fit-content;
    margin: 0 auto;
    background-color: var(--color-secondary);
    font-size: 1.8rem;
    font-weight: 300;
    font-family: var(--redhat-display);
    color: var(--off-white);
    padding: 1.2rem 2.4rem;
    border-radius: 16px;
    text-decoration: none;
    transition: all .3s ease-in-out;
    margin: 2.4rem 0 1.6rem 0;
}

.service-card a:hover {
    background-color: var(--color-secondary-light);
    color: var(--color-background);
}

/* Page Headers */

header.page-header {
    padding-top: var(--header-height);
    background-image: linear-gradient(rgba(33, 51, 104, 0.7), rgba(33, 51, 104, 0.8)), url(./images/header-images/bpth-standard-2.jpg);
    background-blend-mode: multiply;
    padding-bottom: var(--site-padding);
    height: 70rem;
    background-size: cover;
    background-position: center bottom;
    background-repeat: no-repeat;
    background-attachment: fixed;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    position: relative;
}

.page-header-content {
    height: 50%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    position: relative;
}

h1.header-page-title {
    font-size: 4.6rem;
    line-height: 1.130;
    font-weight: 500;
    font-family: var(--redhat-display);
    color: var(--off-white);
    margin-bottom: 1.6rem;
}

p.header-page-description {
    font-size: 2rem;
    line-height: 1.5;
    max-width: 65%;
    white-space: break-word;
    font-weight: 400;
    font-family: var(--redhat-display);
    color: var(--off-white);
}

.page-header-buttons {
    display: flex;
    gap: 2.4rem;
    align-items: center;
    justify-content: flex-start;
}

.page-header-button {
    display: flex;
    align-items: center;
    gap: 1.2rem;
    border-radius: 5px;
    padding: 1.2rem 1.6rem;
    font-size: 1.7rem;
    font-weight: 400;
    font-family: var(--redhat-display);
    background-color: var(--color-background);
    color: var(--color-secondary);
    transition: all .3s ease-in-out;
}

.page-header-button.button-secondary {
    background-color: transparent;
    border: 1px solid var(--color-background);
    color: var(--color-background);
    backdrop-filter: blur(10px);
}

.page-header-button:hover {
    transform: scale(1.05);
}

.page-header-button:active {
    transform: scale(0.95);
}

.page-header-button img {
    width: 2.4rem;
    height: 2.4rem;
}

/* Pages and Page Headers Responsive */

/* Fix for iPad page headers */
@supports (-webkit-touch-callout: none) {
    /* Target iOS (WebKit) devices; constrain to common iPad dimensions */
    @media screen and (min-device-width: 768px) and (max-device-width: 1366px) {
        header.page-header {
            background-attachment: scroll;
        }
    }
}

@media screen and (max-width: 1000px) {
    header.page-header {
        background-attachment: scroll;
    }
}

/* FAQ Page */

.faq-categories {
    display: flex;
    gap: 1.6rem;
    align-items: center;
    justify-content: flex-start;
    width: 100%;
    overflow-x: scroll;

    &::-webkit-scrollbar {
        display: none;
    }

    &::-webkit-scrollbar-track {
        background: transparent;
    }

    &::-webkit-scrollbar-thumb {
        background: transparent;
    }
}

.faq-category-button {
    font-size: 1.6rem;
    font-weight: 400;
    font-family: var(--redhat-display);
    background-color: var(--color-background);
    color: var(--color-secondary);
    display: flex;
    align-items: center;
    gap: 1.2rem;
    border-radius: 16px;
    border: 1px solid var(--color-secondary-light);
    padding: 1rem 1.6rem;
    transition: all .3s cubic-bezier(0.77, 0, 0.175, 1);
    cursor: pointer;
    white-space: nowrap;
}

.faq-category-button img {
    width: 3.2rem;
    height: 3.2rem;
}

.faq-category-button:hover {
    background-color: var(--color-secondary-light);
    color: var(--color-background);
}

.faq-category-button:hover img {
    filter: brightness(0) invert(1);
}

.faq-category-button.selected-faq-category {
    background-color: var(--color-secondary-light);
    color: var(--color-background);
}

.faq-category-button.selected-faq-category img {
    filter: brightness(0) invert(1);
}


.faq-question::-webkit-details-marker {
    display: none;
}

.faq-question::marker {
    display: none;
}

.faq-question::after {
    content: '';
    background-image: url(./images/faq-down.png);
    background-size: 2rem 2rem;
    background-repeat: no-repeat;
    background-position: center;
    width: 2rem;
    height: 2rem;
    display: inline-block;
    transition: transform 0.3s ease;
    flex-shrink: 0;
}

.faq-item[open] .faq-question::after {
    transform: rotate(180deg);
}


.single-post__area details {
    background-color: #e8f3ff89;
}

.single-post__area details.faq-item[open],
.single-post__area details.faq-item[open] summary {
    background-color: var(--color-blue-light);
}

.single-post__area summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    transition: all 0.3s ease;
    position: relative;
    padding: 1.2rem 1.6rem;
    font-size: 2rem;
    color: #2f2f2f;
    font-weight: 300;
    font-family: var(--redhat-display);
    cursor: pointer;
    transition: all .3s cubic-bezier(0.77, 0, 0.175, 1);
    width: 100%;
}

.single-post__area summary:hover {
    background-color: var(--color-blue-light);
}

.single-post__area summary::marker {
    display: none;
}

.single-post__area details p {
    width: 100%;
    padding: 1.2rem 1.6rem;
}

.single-post__area details p:last-of-type {
    margin-bottom: 0;
}

/* FAQ Responsive */

@media screen and (max-width: 1000px) {
    .faq-categories {
        padding: 1.4rem 0;
    }
}

/* CTA Sections */

.ru-cta-template {}

.ru-cta-template h3,
.ru-cta-template h1,
.ru-cta-template p {
    color: var(--off-white);
}

.ru-cta-template h3 {
    font-size: 2.4rem;
    font-weight: 400;
    font-family: var(--redhat-display);
    margin-bottom: .3rem !important;
}

.ru-cta-template h1 {
    font-size: 5.4rem;
    font-weight: 300;
    font-family: var(--redhat-display);
    margin-bottom: 2.4rem;
    margin-top: 0 !important;
}

.ru-cta-template p {
    font-size: 2.2rem;
    font-weight: 300;
    font-family: var(--redhat-display);
    max-width: 75%;
    margin: 4.2rem auto 6.2rem auto;
}


.ru-cta-template .cta-buttons .cta-button-primary a {
    background-color: var(--color-secondary-light);
}

.ru-cta-template .cta-buttons .cta-button-primary a:hover {
    background-color: var(--color-secondary);
}


.ru-cta-template .cta-buttons .cta-button-secondary a {
    background-color: var(--color-background);
    color: var(--color-secondary-light);
}

.ru-cta-template .cta-buttons .cta-button-secondary a {
    background-color: var(--off-white);
}

/* Reusable CTA Sections Responsive */

@media screen and (max-width: 1450px) {

    .ru-cta-template h3 {
        margin-bottom: 1.6rem;
    }

    .ru-cta-template h1 {
        font-size: 4.8rem;
        margin-bottom: 0;
    }

    .ru-cta-template p {
        margin: 1.6rem auto 4.2rem auto;
    }
}

@media screen and (max-width: 1000px) {

    .ru-cta-template h3 {
        font-size: 2rem;
        margin-bottom: 1.6rem !important;
    }

    .ru-cta-template h1 {
        font-size: 3.2rem;
        margin-bottom: 1.6rem !important;
    }

    .ru-cta-template p {
        font-size: 1.8rem;
    }
}


/* Footer */

footer.site-footer {
    color: var(--color-primary);
    font-family: var(--redhat-display);
    margin-top: 12rem;
    font-size: 1.4rem;
    background-color: var(--color-background);
}

.footer-container {
    padding: 2.215rem 0;
    width: var(--site-width);
    margin-left: auto;
    margin-right: auto;
}

footer a {
    color: var(--color-primary);
}

.footer-top {
    display: flex;
    justify-content: space-between;
}

.footer-logo {
    width: 20.2rem;
    margin-bottom: 2.4rem;
}

.footer-title {
    font-size: 1.6rem;
    font-weight: 800;
    margin: .5rem 0;
}

.footer-address {
    font-size: 1.6rem;
    font-weight: 400;
    margin-bottom: 1.6rem;
    max-width: 75%;
    line-height: 1.5;
}

.footer-address a {
    display: block;
    margin: 1rem 0;
}

.footer-box-container:first-of-type {
    margin-top: 2.4rem;
}

.footer-box-container {
    display: flex;
    align-items: center;
    gap: 2rem;
    background-color: var(--color-secondary);
    padding: 1.2rem 2.9rem;
    color: var(--color-background);
    box-shadow: 6px 6px 12px 0px rgba(0, 0, 0, 0.12);
    margin-bottom: 1.6rem;
    border-radius: 30px;
    width: 75%;
}

.footer-box-container:hover {
    background-color: var(color-primary);
    color: var(--color-background);
}

.footer-box-title {
    font-size: 1.6rem;
    line-height: 1.5;
    white-space: nowrap;
}

.footer-box-text {
    font-size: 1.4rem;
    line-height: 1.5;
    font-weight: 800;
    white-space: nowrap;
}

.footer-box-container img {
    filter: brightness(0) invert(1);
    width: 4.5rem;
    height: auto;
    display: block;
    flex: 0 0 4rem;
}

.footer-menu-list {
    display: flex;
    gap: 16rem;
}

.footer-menu-container {
    display: flex;
    flex-direction: column;
}

h4.footer-menu-title {
    font-size: 1.6rem;
    font-weight: 800;
    margin-bottom: 1.6rem;
}

ul.footer-menu__menu {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
    list-style: none;
    margin-bottom: 3.6rem;
    font-size: 1.6rem;

}

ul.footer-menu__menu li a {
    text-decoration: none;
    color: var(--color-primary);
}

ul.footer-menu__menu li a:hover {
    text-decoration: underline;
}

.footer-partnership {
    max-width: min-content;
}

.footer-partnership img {
    width: 15rem;
    height: auto;
}

.footer-partnership figcaption {
    font-size: 1rem;
    font-weight: 400;
    color: var(--color-primary);
}

/* The Footer Widget for Contact */

.footer-widget-container {
    position: fixed;
    bottom: 1.6rem;
    right: 1.6rem;
    z-index: 10000;
}

.footer-widget-background {
    width: 4rem;
    height: 4rem;
    border-radius: 50%;
    background-color: var(--color-secondary);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 10002;
    transition: transform 0.3s ease;
}

.footer-widget-background svg {
    width: 2rem;
    height: 2rem;
    fill: var(--color-background);
}

.footer-widget-container input {
    display: none;
}

.footer-widget-container ul {
    position: absolute;
    bottom: 4rem;
    right: 0;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    list-style: none;
    margin: 0;
    margin-bottom: 1rem;
    z-index: 10001;

    /* closed state */
    opacity: 0;
    visibility: hidden;
    transform: translateY(1rem);
    transition: opacity .2s ease, transform .2s ease, visibility .2s ease;
}

.footer-widget-container input:checked~ul {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.footer-widget-item {
    display: flex;
}

.footer-widget-item a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 4rem;
    height: 4rem;
    background-color: var(--color-secondary);
    border-radius: 50%;
    transition: background-color 0.3s ease;
}

.footer-widget-item a:hover {
    background-color: var(--color-secondary-light);
}

.footer-widget-item a img {
    width: 2rem;
    height: 2rem;
    filter: brightness(0) invert(1);
}

/* full-screen overlay to close on outside click */
.footer-widget-overlay {
    position: fixed;
    inset: 0;
    display: none;
    z-index: 9999;
}

.footer-widget-container input:checked~.footer-widget-overlay {
    display: block;
}

a.footer-scroll-to-top {
    display: block;
    color: var(--color-primary);
    font-family: var(--gidole);
    text-align: center;
    text-decoration: none;
    width: 100%;
    padding-bottom: 1rem;
}

.footer-bottom-social-media {
    display: flex;
    gap: 1.215rem;

    justify-content: flex-end;
}

a.footer-bottom-social-media-link {
    background-color: var(--color-secondary);
    padding: .8rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 4rem;
    height: 4rem;
}

a.footer-bottom-social-media-link img {
    width: 1.8rem;
    height: 1.8rem;
    filter: brightness(0) invert(1);
}

.footer-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 5rem;
    border-top: 1px solid var(--accent-gray-strong);
}

.footer-bottom-links {
    display: flex;
    align-items: center;
    gap: 1.6rem;
    font-size: 1.6rem;
}

.footer-copyright {
    font-size: 1.4rem;
    text-align: center;
    margin-top: 1.6rem;
}

.scroll-to-top {
    width: 2.2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 2.2rem;
    position: fixed;
    bottom: 1.5rem;
    right: 1.5rem;
    color: white;
    line-height: 0;
    font-size: .70rem;
    background-color: var(--color-primary);
    cursor: pointer;
    opacity: 85%;
    font-family: var(--content-font);
    transition: all .5s;

    visibility: hidden;
    z-index: -99;
    pointer-events: none;
}

.scroll-to-top:hover {
    background-color: #363636;

}

.scroll-to-top__active {
    visibility: visible !important;
    z-index: 99 !important;
    pointer-events: all !important;
}

/* Footer responsive */
@media screen and (max-width: 1480px) {
    .footer-menu-list {
        gap: 8rem;
    }
}

@media screen and (max-width: 1000px) {
    footer.site-footer {
        padding: 0
    }

    .footer-container {
        flex-direction: column;
        align-items: flex-start;
        gap: 1rem;
    }

    .footer-top {
        flex-direction: column;
    }

    .footer-address {
        max-width: unset;
    }

    .footer-box-container {
        width: unset;
    }

    .footer-box-container:last-of-type {
        margin-bottom: 4.8rem;
    }

    .footer-menu-list {
        position: relative;
        margin-bottom: 8rem;
    }

    .footer-partnership {
        position: absolute;
        left: 0;

    }

    .footer-bottom {
        margin: 4rem 0;
        flex-direction: column-reverse;
        align-items: center;
        gap: 1.6rem;
    }
}

/* 404 Page */

.not-found-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-family: var(--gidole);
    min-height: 75vh;
}

.not-found-image {
    opacity: 1;
    margin-bottom: 2rem;
    filter: drop-shadow(0px 0px 10px rgba(141, 5, 5, 0.2));
}

.not-found-title {
    text-align: center;
    font-size: 2rem !important;
    color: var(--color-primary);
    margin-bottom: 1rem;
}

.not-found-actions-container {
    display: flex;
    justify-content: center;
}

.not-found-actions-container form div {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 1rem;
}

.not-found-actions-container input {
    padding: .4rem;
    font-size: 1.2rem;
    border-radius: 6px;
    border: 2px solid var(--color-primary) !important;
    width: 90%;
}


.not-found-actions-container input[type="submit"] {
    background-color: var(--color-primary);
    color: white;
    cursor: pointer;
    width: 10%;
}

a.return-home {
    text-align: center;
    font-size: 1.2rem;
    color: var(--color-secondary);
    text-decoration: none;
    width: 100%;
    margin-top: 1.2rem !important;
    display: inline-block;
    cursor: pointer;
}

/* HELPERS AND UTILITIES */

.hidden {
    display: none !important;
}

.br-download-link {
    display: flex;
    width: 100%;
    box-shadow: rgba(0, 0, 0, 0.1) 0px 5px 15px;
    align-items: center;
    border: 1px solid var(--accent-gray-almost-white);
    border-radius: 1.6rem;
    padding: 1.2rem 1.6rem;
    transition: all .3s;
}

.br-download-link:hover {
    box-shadow: rgba(0, 0, 0, 0.3) 0px 5px 15px;
}

.white-link a {
    color: var(--color-background) !important;
}

.white-link a:hover {
    color: var(--color-background) !important;
}

p.no-margin {
    margin-bottom: 0 !important;
    margin-top: 0 !important
}

.link-hover-same a:hover {
    color: inherit !important;
}

.full-width-image,
.full-width-image img {
    width: 100%;
    max-height: 100%;
}

.match-site-padding {
    padding-left: calc((100% - var(--site-width)))
}

.round-rl {
    border-top-right-radius: 95px;
    border-bottom-right-radius: 95px;
}

.wp-block-columns.columns-no-gap {
    gap: 0 !important;
}

.wp-block-columns.align-Şch {
    align-items: Şch !important;
}

.no-margin-bottom {
    margin-bottom: 0 !important;
}

.no-margin-top {
    margin-top: 0 !important;
}

.line-height-top {
    line-height: .8 !important;
}

.no-padding-top {
    margin-top: calc((var(--header-height) + var(--site-padding)) * -1);
}

.no-padding-bottom {
    margin-bottom: calc(var(--site-padding) * -1);
}

.share-button {
    background: transparent;
    border: none;
}

hr.small-separator {
    margin-top: .3rem;
    margin-bottom: .6rem;
    height: 2px;
    background-color: var(--color-secondary);
    width: 5%;
    border: none;
}

hr.full-width-separator {
    width: 85%;
    margin: 2rem auto;
    height: 2px;
    background-color: var(--subtle-gray) !important;
}

.mobile-center-flex {
    display: flex;
    flex-direction: column;
    text-align: center;
    justify-content: center !important;
    align-items: center !important;
}

.has-small-padding-left {
    padding-left: 1.6rem;
}


.alignfull.has-small-horizontal-padding,
.has-small-horizontal-padding {
    padding-left: 1.83%;
    padding-right: 1.83%;
}

.large-rounded {
    border-radius: 24px;
}

.round-bordered,
.round-bordered img,
.round-bordered video {
    border-radius: 16px;
}

body .is-layout-flex.desktop-hidden,
.desktop-hidden {
    display: none;
}




@media screen and (max-width: 1000px) {

    .mobile-width-reset {
        width: 85% !important;
        margin: 0 auto;
    }

    .mobile-pl-small {
        padding-left: 1rem;
    }

    .mobile-16 {
        max-height: 16rem;
    }

    .mobile-8 {
        max-height: 8rem;
    }

    .mobile-4 {
        max-height: 4rem;
    }

    .mobile-order-1 {
        order: 1;
    }

    .mobile-order-2 {
        order: 2;
    }

    .mobile-order-3 {
        order: 3;
    }

    .mobile-order-4 {
        order: 4;
    }

    .mobile-order-5 {
        order: 5;
    }

    .mobile-order-6 {
        order: 6;
    }

    .mobile-order-7 {
        order: 7;
    }

    .mobile-order-8 {
        order: 8;
    }

    .mobile-order-9 {
        order: 9;
    }

    .mobile-order-10 {
        order: 10;
    }

    body .is-layout-flex.desktop-hidden {
        display: flex;
    }

    .desktop-hidden {
        display: block;
    }

    .mobile-reversed {
        flex-direction: column-reverse;
    }


    .centered-mobile {
        width: 100%;
        justify-content: center;
        text-align: centeR;
    }

    .mobile-full-width,
    .mobile-full-width>a {
        width: 100% !important;
    }

    .wp-block-columns.mobile-break-1000 {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .wp-block-columns.columns-no-gap {
        gap: 4rem;
    }

    .alignfull.has-small-horizontal-padding,
    .has-small-horizontal-padding {
        padding-left: 1.2rem;
        padding-right: 1.2rem
    }



    .has-mobile-margin-top {
        margin-top: var(--mobile-margin-top-xl);
    }

    body .is-layout-flex.mobile-hidden,
    .mobile-hidden {
        display: none;
    }

    .reset-mobile-padding {
        margin-top: calc(var(--mobile-vertical-padding) * -1);
    }

    .has-mobile-padding {
        padding-left: 1.6rem;
        padding-right: 1.6rem;

    }

    .mobile-full-width {
        width: 100% !important;
    }

    .mobile-h2 {
        font-size: 24px !important;
    }

}

/* Animations */

.animate-on-scroll {
    opacity: 0;
    transition: opacity 0.5s ease;
}


@keyframes menu_fade_in {
    0% {
        transform: translateY(-10%);
    }

    100% {
        transform: translateY(0);
    }
}

@keyframes menu_fade_out {
    0% {
        transform: translateY(0);
        opacity: 100%;
    }

    100% {
        opacity: 10%;
        transform: translateY(-10%);
    }
}


/* VENDORS  */

/* SWIPER */

.swiper {
    height: 100svh;
    width: 100%;
}

.swiper-slide img {
    object-fit: cover;
    width: 100%;
}

/* Editor Color Styles */
.has-color-secondary-color {
    color: var(--color-secondary) !important;
}

.has-color-secondary-background-color {
    background-color: var(--color-secondary) !important;
}

.has-color-secondary-light-color {
    color: var(--color-secondary-light) !important;
}

.has-color-secondary-light-background-color {
    background-color: var(--color-secondary-light) !important;
}

.has-color-blue-light-color {
    color: var(--color-blue-light) !important;
}

.has-color-blue-light-background-color {
    background-color: var(--color-blue-light) !important;
}

.has-accent-gray-color {
    color: var(--accent-gray) !important;
}

.has-accent-gray-background-color {
    background-color: var(--accent-gray) !important;
}

.has-accent-gray-subtle-color {
    color: var(--accent-gray-subtle) !important;
}

.has-accent-gray-subtle-background-color {
    background-color: var(--accent-gray-subtle) !important;
}