@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@200..800&display=swap');

@font-face {
    font-family: 'ModGroteskStandardRegular';
    src: url('assets/fonts/ModGroteskStandard-Regular.otf') format('opentype');
}

@font-face {
    font-family: 'ModGroteskStandardMedium';
    src: url('assets/fonts/ModGroteskStandard-Medium.otf') format('opentype');
}
 
@font-face {
    font-family: 'ModGroteskStandardBold';
    src: url('assets/fonts/ModGroteskStandard-Bold.otf') format('opentype');
}

:root {
    --primary: #0018eb;
    --accent: #00AF66;
    --timologioBlue: #0018eb;
    --timologioYellow: #F9DA01;
    --timologioGreen: #44B648;

}

.font-bold-custom{
    font-family: 'ModGroteskStandardBold';
}

body,
html {
    scroll-behavior: smooth;
    scroll-padding-top: 120px;
}

body {
    /* font-family: "Didact Gothic", sans-serif; */
    font-family: 'ModGroteskStandardRegular';
    /* font-family: "Manrope", sans-serif; */
    /*background: #f6f7ff;*/
    background: var(--bodybg);
}

/* .programm-details-menu{
        position: absolute;
    left: 50%;
    top: 0;
    transform: translateX(-50%);
    width: 500px;
    border-radius: 1.4rem;
    padding: 2rem;
    background: white;
    z-index: 2;
    border: 1px solid rgba(0 0 0 /10%);
    display: none;
} */


nav.menu {

    >ul {

        >li.menu-item-has-children:has(.show-menu) {
            >a:after {
                transform: rotate(180deg);
            }
        }

        >li.menu-item-has-children {
            >a:after {
                content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' class='ionicon' viewBox='0 0 512 512'%3E%3Cpath fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='48' d='M112 184l144 144 144-144'/%3E%3C/svg%3E");
                width: 17px;
                height: 17px;
                line-height: 0;
                transition: all 0.3s ease-out;
            }

            /* &:hover{
                >ul{
                    opacity: 1;
                    pointer-events: all;
                }
            } */

        }


        >li {
            >a {
                display: flex;
                min-height: 120px;
                gap: 0.4rem;
                transition: all 0.3s ease-out;
                align-items: center;
                z-index: 1;
                position: relative;
                font-size: 1.3rem;


                &:before {
                    content: "";
                    position: absolute;
                    bottom: calc(50% - 18px);
                    left: 0;
                    background: black;
                    transition: all 0.3s ease-out;
                    width: 0;
                    height: 1px;
                }


            }

            &:hover>a:before {
                width: 100%;
            }

        }
    }
}

.sticky-header .dropdown-menu {
    height: calc(100vh - 180px);
}


.dropdown-menu.show-menu {
    display: flex;
}

.dropdown-menu.white-boxes {
    color: black;

    .drop-level-1 {
        background: white;
    }

    .drop-level-2 {
        background: white;
        border-left: 1px solid #eee;
        border-right: 1px solid #eee;
    }

    ul {
        >li.menu-item-has-children {
            color: black;
        }

        >li.active-item.menu-item-has-children {
            color: var(--primary);
        }

        >li.menu-item-has-children {
            &:after {
                content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' class='ionicon' viewBox='0 0 512 512'%3E%3Cpath fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='48' d='M112 184l144 144 144-144'/%3E%3C/svg%3E");
            }
        }

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

.Yellow-line {
            a {
                justify-content: flex-start;
                gap: 1rem;
                display: flex;
                align-items: center;

                &:before {
                    content: "";
                    width: 10px;
                    height: 5px;
                    background: #FBDB00;
                }
            }
        }

        .Green-line {
            a {
                justify-content: flex-start;
                gap: 1rem;
                display: flex;
                align-items: center;

                &:before {
                    content: "";
                    width: 10px;
                    height: 5px;
                    background: #27C416;
                }
            }
        }

        .Blue-line {
            a {
                justify-content: flex-start;
                gap: 1rem;
                display: flex;
                align-items: center;

                &:before {
                    content: "";
                    width: 10px;
                    height: 5px;
                    background: #0018eb;
                }
            }
        }

.dropdown-menu {
    position: absolute;
    top: calc(100% + 30px);
    height: calc(100vh - 234px);
    width: min(100%, 1250px);
    left: 30px;
    color: white;
    gap: 0.5rem;
    font-size: 1.4rem;
    display: none;

    .programm-list-details{
        ul{
            >li:not(:first-of-type) {
            margin-top: 0.5rem;
        } 
        }
    }

    .small-distance{
        ul{
             >li:not(:first-of-type) {
            margin-top: 1rem;
        } 
        }
    }

    ul {

        >li.active-item.menu-item-has-children {
            color: var(--primary);
        }

        >li:not(:first-of-type) {
            margin-top: 1.5rem;
        }

        >li {
            >a {
                transition: all 0.3s ease-out;
                display: flex;
                align-items: center;
                justify-content: space-between;

                &:hover {
                    color: var(--primary);
                }
            }
        }

        >li.Yellow-line {
            a {
                justify-content: flex-start;
                gap: 1rem;

                &:before {
                    content: "";
                    width: 10px;
                    height: 5px;
                    background: #FBDB00;
                }
            }
        }

        >li.Green-line {
            a {
                justify-content: flex-start;
                gap: 1rem;

                &:before {
                    content: "";
                    width: 10px;
                    height: 5px;
                    background: #27C416;
                }
            }
        }

        >li.Blue-line {
            a {
                justify-content: flex-start;
                gap: 1rem;

                &:before {
                    content: "";
                    width: 10px;
                    height: 5px;
                    background: #0018eb;
                }
            }



            


        }


        
        >li.menu-item-has-children {

            display: flex;
            align-items: center;
            justify-content: space-between;
            cursor: default;
            transition: all 0.3s ease-out;

            &:hover {
                color: var(--primary);
            }

            &:after {
                content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' class='ionicon' viewBox='0 0 512 512'%3E%3Cpath fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='48' d='M112 184l144 144 144-144'/%3E%3C/svg%3E");
                width: 25px;
                height: 25px;
                transform: rotate(-90deg);
                line-height: 0;
                display: block;
                transition: all 0.3s ease-out;
            }
        }

    }

    >div {
        height: 100%;
        overflow: auto;
        padding: 3rem;
        color: black;
        border-radius: 1rem;
    }

    .drop-level-1 {
        width: 400px;
        background: #eee;
    }

    .drop-level-2 {
        width: 400px;
        background: #eee;
        position: relative;

        ul {
            position: absolute;
            inset-inline: 3rem;
            top: 3rem;
            display: none;
        }

    }

              

    .drop-level-3 {
        flex: 1;
        background: var(--primary);
        color: white;
    }

}

.help-num {
    writing-mode: vertical-lr;
    position: relative;

    &:hover:before {
        opacity: 1;
    }

    &:before {
        content: "";
        inset: 0;
        position: absolute;
        background: white;
        z-index: -1;
        opacity: 0;
        transition: all 0.3s ease-out;
        border-radius: 60px;
    }
}

  .main-btn {
    position: relative;
    z-index: 1;
    overflow: hidden;

    &:before {
        content: "";
        position: absolute;
        left: 0;
        width: 0;
        display: block;
    will-change: transform;
        height: 100%;
        z-index: -1;
        top: 0;
        background: linear-gradient(90deg, var(--primary) 70%, var(--accent));
        border-radius: 60px;
        transition: all 0.4s ease-out;
    }

    &:hover:before {
        width: 100%;
    }
}

.main-btn-wrapper:hover .main-btn:not(.main-btn-no-hover):before {
    width: 100%;
}


    .mobile-header{
        .main-btn:before{
            display: none;
        }
    }



@media (hover: hover){


    .support-component {
    &:hover {
        img {
            filter: brightness(0) saturate(100%) invert(99%) sepia(1%) saturate(6%) hue-rotate(31deg) brightness(103%) contrast(102%);
        }
    }
}


}

.main-btn.main-white {
    &:before {
        background: white;
    }
}

.main-btn.secondary {
    &:before {
        background: linear-gradient(90deg, #007b48, var(--accent));
    }
}

.support-component {
    &:hover {
        .main-btn:before {
            width: 100%;
        }
    }
}

.help-component {
    &:before {
        content: "";
        position: absolute;
        inset-inline: 0;
        background: var(--accent);
        bottom: 0;
        top: 50px;
        border-radius: 1rem;
        z-index: -1;
    }
}

.hover-white:hover img {
    filter: brightness(0) saturate(100%) invert(100%) sepia(100%) saturate(2%) hue-rotate(235deg) brightness(108%) contrast(101%);
}

.support-component {
    img {
        transition: all 0.3s ease-out;
        filter: brightness(0) saturate(100%) invert(11%) sepia(87%) saturate(5695%) hue-rotate(239deg) brightness(89%) contrast(127%);
    }
}

.plain-drodown-menu {
    >li {
        position: relative;

        &:hover {
            >ul {
                pointer-events: all;
                opacity: 1;
                transform: translateY(0);
            }
        }

        >ul {
            background: var(--bgcolor);
            position: absolute;
            top: 100%;
            left: 0;
            width: max-content;
            border: 1px solid rgba(0 0 0 /10%);
            transition: all 0.3s ease-out;
            transform: translateY(10px);
            opacity: 0;
            pointer-events: none;
            font-weight: normal;

            a {
                transition: all 0.3s ease-out;
                padding: 1rem;
                display: block;
                line-height: 1;
                font-size: 0.9rem;
                border-bottom: 1px solid rgba(0 0 0 / 10%);

                &:hover {
                    color: var(--primary);
                }
            }
        }
    }
}

.hero {
    position: relative;
    z-index: 1;

    &:before {
        content: "";
        width: 100%;
        /* background: linear-gradient(180deg,var(--primary),var(--accent)); */
        background: #F5F5F5;
        height: 80%;
        position: absolute;
        left: 0;
        top: 0;
        z-index: -1;
    }
}

.box {
    display: none;
}

.active-box {
    display: block;
}

.side-programms {

    .splide__arrow{
        background: var(--primary);
        color: white;
    }

    .programms {

        button {

             position: relative;
            overflow: hidden;

            &:hover {
                background: white;
                color: var(--primary);

                img {
                    filter: brightness(0) saturate(100%) invert(47%) sepia(61%) saturate(2659%) hue-rotate(125deg) brightness(92%) contrast(102%);
                }
            }

            &:after{
                    content: "";
                    width: 120px;
                    aspect-ratio: 1;
                   /* border-radius: 100%;*/
                    position: absolute;
                    top: 50%;
                    transform: translateY(-50%) scale(0);
                    transform-origin: right;
                    z-index: -1;
                    right: -32px;
                    transition: all 0.3s ease-out;
                    background: var(--accent);
                    clip-path: polygon(20% 0, 100% 0, 90% 100%, 0 100%);
            }

             @media (max-width: 1024px) {
                &:after {
                    width: 104px;
                }
            }
        }

        button.active {
            background: white;
            color: var(--primary);
           
            z-index: 1;

            &:hover{
                img{
                    filter: brightness(0) saturate(100%) invert(100%) sepia(100%) saturate(2%) hue-rotate(235deg) brightness(108%) contrast(101%);
                }
            }

            &:after{
                    transform: translateY(-50%) scale(1);
            }

            

        }
    }
}

.programms.white-layout{

    button{
         &:hover{
            background: var(--accent);
            color: white; 
         }
    }

    button.active{
        background: var(--accent);
        color: white;
       
    }

    
}

.programms {
    button {
        transition: all 0.3s ease-out;

        &:hover {
            background: rgba(0 24 235/10%);
            color: var(--primary);
        }

    }

    button.active {
        background: rgba(0 24 235/10%);
        color: var(--primary);
    }
}

.white-images img {
    filter: brightness(0) saturate(100%) invert(100%) sepia(100%) saturate(2%) hue-rotate(235deg) brightness(108%) contrast(101%);
}

.green-icon{
    filter: brightness(0) saturate(100%) invert(51%) sepia(87%) saturate(2415%) hue-rotate(121deg) brightness(89%) contrast(101%);
}

.payment-title {

    img {
        filter: brightness(0) saturate(100%) invert(10%) sepia(100%) saturate(7446%) hue-rotate(241deg) brightness(84%) contrast(124%);
    }

    &:hover {

        img {
            filter: brightness(0) saturate(100%) invert(100%) sepia(21%) saturate(0%) hue-rotate(350deg) brightness(110%) contrast(102%);
        }

    }

}

.my-on-popup {
    &:before {
        content: "";
        background: white;
        border-radius: 1rem;
        z-index: -1;
        position: absolute;
        inset-inline: 0;
        top: 50px;
        bottom: 0;
        border: 1px solid rgba(0 0 0 /10%);
    }
}

.card-image:after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    border-width: 0 15px 15px 0;
    border-style: solid;
    z-index: 2;
}

.card-image.yellow:after {
    border-color: #fbdb00;
}

.card-image.green:after {
    border-color: #27c416;
}

.clip-image {
    clip-path: polygon(0 0, 100% 0%, 92% 100%, 0% 100%);
}

.clip-image-left {
    clip-path: polygon(8% 0, 100% 0%, 100% 100%, 0 100%);

}

.product-box {
    transition: all 0.3s ease-out;

    &:before,
    &:after {
        transition: all 0.3s ease-out;
    }

    &:hover {
        &:before {
            top: 10px;
            left: 10px;
        }

        &:after {
            bottom: 10px;
            right: 10px;
        }

        transform: translateY(-30px);
    }
}

.side {
    .product-box {
        &:hover {
            &:before {
                top: 0px;
                left: 0px;
                height: 60px;
            }

            transform: translateY(0px);

        }
    }
}

.no-hover {
    .product-box {
        &:hover {
            transform: translateY(0px);
            
        }
    }
}

.gradient-color {
    background: linear-gradient(234deg, #00af66, #0018eb, #00af66);
    background-size: 180% 180%;
    animation: gradient-animation 10s ease infinite;
}

@keyframes gradient-animation {
    0% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0% 50%;
    }
}

/*
.mesh-2 {
    background-color: hsla(198, 94%, 79%, 1);
    background-image:
        radial-gradient(at 100% 0%, hsla(25, 100%, 100%, 1) 0px, transparent 50%),
        radial-gradient(at 91% 17%, hsla(79, 0%, 100%, 1) 0px, transparent 50%),
        radial-gradient(at 89% 67%, hsla(49, 100%, 86%, 1) 0px, transparent 50%),
        radial-gradient(at 100% 100%, hsla(50, 100%, 86%, 1) 0px, transparent 50%);
}
*/

.mesh-2 {
    background-color: hsla(198, 94%, 79%, 1);
    background-image:
        radial-gradient(at 100% 0%, hsla(25, 100%, 100%, 1) 0px, transparent 50%),
        radial-gradient(at 91% 17%, hsla(79, 0%, 100%, 1) 0px, transparent 50%),
        radial-gradient(at 89% 67%, hsla(79, 100%, 100%, 1) 0px, transparent 50%),
        radial-gradient(at 100% 100%, hsla(25, 100%, 100%, 1) 0px, transparent 50%);
}

.mesh-3 {
    background-color: hsla(195, 88%, 86%, 1);
    background-image:
        radial-gradient(at 4% 95%, hsla(138, 64%, 75%, 0.64) 0px, transparent 50%),
        radial-gradient(at 0% 100%, hsla(138, 64%, 75%, 1) 0px, transparent 50%),
        radial-gradient(at 0% 0%, hsla(189, 0%, 100%, 1) 0px, transparent 50%);
}

.boxes-triangle {




    div {
        position: relative;

        &:before {
            content: "";
            position: absolute;
            top: 28px;
            left: -28px;
            width: 80px;
            /* aspect-ratio: 1; */
            height: 40px;
            background: linear-gradient(to bottom right, var(--primary), var(--accent));
            clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
            transform: rotate(-45deg);
            transform-origin: left top;
        }
    }
}

.page-navigation {
    background: white;
    padding: 1.5rem 1.3rem;
    border-radius: 60px;
    position: fixed;
    z-index: 20;
    top: 50%;
    transform: translateY(-50%);
    right: 2.5rem;
    box-shadow: 0 0 10px 0 rgba(0 0 0 /10%);

    ul {
        display: grid;
        gap: 10px;

        a {
            position: relative;
            width: 15px;
            height: 15px;
            display: block;
            background: rgba(0 0 0 /10%);
            border-radius: 100%;
            transition: all 0.3s ease-out;

            &:hover {
                background: var(--primary);

                span {
                    right: calc(100% + 30px);
                    opacity: 1;
                }
            }

            span {
                position: absolute;
                top: 50%;
                transform: translateY(-50%);
                right: calc(100% + 50px);
                background: white;
                border-radius: 60px;
                line-height: 1;
                padding: 0.7rem;
                font-size: 0.9rem;
                white-space: nowrap;
                box-shadow: 0 0 10px 0 rgba(0 0 0 /10%);
                transition: all 0.3s ease-out;
                opacity: 0;
            }
        }
    }
}

.main-options {
    >li {
        position: relative;

        &:after {
            content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' class='ionicon' viewBox='0 0 512 512'%3E%3Cpath fill='none' stroke='%23001fe6' stroke-linecap='round' stroke-linejoin='round' stroke-width='32' d='M416 128L192 384l-96-96'/%3E%3C/svg%3E");
            position: absolute;
            top: 0;
            height: 100%;
            left: 0;
            width: 50px;
            padding: 10px 15px 10px 8px;

            justify-content: center;
            background: #d2d9ff;
            content: center;
            align-content: center;
            clip-path: polygon(0 0, 100% 0%, 60% 100%, 0% 100%);
        }
    }
}


.single-program-content, .entry-content {
    table {
        width: 100%;
        text-align: center; 
        font-size: 1.1rem;
        border-left: 1px solid rgba(0 0 0 /10%);
        border-top: 1px solid rgba(0 0 0 /10%);
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05);

        td {
            border-right: 1px solid rgba(0 0 0 /10%);
            border-bottom: 1px solid rgba(0 0 0 /10%);
            padding: 1rem;background-color: #fff;
        }
                td pre {
                    font-weight: 700;
                    font-size: 1.25rem; 
                    color: #0018eb;
                    font-family: inherit; 
                    white-space: pre-wrap; 
                }

        th {
            padding: 1rem;
            border-right: 1px solid rgb(255 255 255 /40%);
         
        }

        thead tr:first-of-type {
            background: var(--primary);
            color: white;
            border-right: 1px solid rgba(0 0 0 /10%);
            border-bottom: 1px solid rgba(0 0 0 /10%);
        }

        thead tr:not(:first-of-type){
           border-right: 1px solid rgba(0 0 0 /10%);
            border-bottom: 1px solid rgba(0 0 0 /10%); 

            th{
                border-right: 1px solid rgba(0 0 0 /10%);
            border-bottom: 1px solid rgba(0 0 0 /10%);
            }
        }

    }

   
}

.entry-content{
      ul{
        list-style-type: disc;
        margin-left: 2.3rem;
    }
    ol{
        list-style-type: decimal;
        margin-left: 2.3rem;
    }
}

.single-program-content .table-gray{
    table{
        thead tr:first-of-type {
            background: #D1D1D1;
            color: var(--primary);
        }

        th{
            border:1px solid #c0c0c0;
        }
    }
}

.single-program-content .table-green{
    table{
        thead tr:first-of-type {
            background: var(--accent);
            color: white;
        }

        th{
            border:1px solid #c0c0c0;
        }
    }
}

.single-program-content .table-plain{
    table{
        thead tr:first-of-type {
            background: #d8d8d8;
            color: var(--primary);
        }

        th{
            border:1px solid #c0c0c0;
        }

        td{
            background: #d8d8d8;
        }
    }
}

.program-list {
    li {
        padding-left: 45px;
        position: relative;

        &:before {
            content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' class='ionicon' viewBox='0 0 512 512'%3E%3Cpath d='M448 256c0-106-86-192-192-192S64 150 64 256s86 192 192 192 192-86 192-192z' fill='none' stroke='%23fff' stroke-miterlimit='10' stroke-width='32'/%3E%3Cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='32' d='M352 176L217.6 336 160 272'/%3E%3C/svg%3E");
            width: 30px;
            height: 30px;
            line-height: 0;
            display: block;
            position: absolute;
            top: -3px;
            left: 0;
        }
    }
}

.program-list.blue{
    li:before{
        content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' class='ionicon' viewBox='0 0 512 512'%3E%3Cpath d='M448 256c0-106-86-192-192-192S64 150 64 256s86 192 192 192 192-86 192-192z' fill='none' stroke='%230018eb' stroke-miterlimit='10' stroke-width='32'/%3E%3Cpath fill='none' stroke='%230018eb' stroke-linecap='round' stroke-linejoin='round' stroke-width='32' d='M352 176L217.6 336 160 272'/%3E%3C/svg%3E");
    }
}

.check-list{
    li{
        position: relative;
        padding-left: 2.25rem;

         &:before {
            content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' class='ionicon' viewBox='0 0 512 512'%3E%3Cpath fill='none' stroke='%230018EB' stroke-linecap='round' stroke-linejoin='round' stroke-width='32' d='M416 128L192 384l-96-96'/%3E%3C/svg%3E");
            width: 16px;
            height: 16px;
            line-height: 0;
            display: block;
            position: absolute;
            top: 4px;
            /*
            top: 50%;
            transform: translateY(-50%);
            */
            left: 0;
        }
    }
}

.check-list.white-list{
    li{
        &:before {
            content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' class='ionicon' viewBox='0 0 512 512'%3E%3Cpath fill='none' stroke='%23ffffff' stroke-linecap='round' stroke-linejoin='round' stroke-width='32' d='M416 128L192 384l-96-96'/%3E%3C/svg%3E");
           
        }
    }
}
.accordion {
    .accordion-content {
            
    background: white;
    padding: 25px;
    border-bottom-left-radius: 1.1rem;
    width: calc(100% - 65px);
    margin-inline: auto;
    border-bottom-right-radius: 1.1rem;

        a:not(.file){
            border-bottom: 1px solid var(--primary);
            font-weight: 600;
        }

        ol{
            list-style: decimal;
            list-style-position: inside;
        }
        ul{
            list-style-type: disc;
            list-style-position: inside;
        }

    }

    .accordion-title {
        background: white;
        border-radius: 0.6rem;
        box-shadow: 0 5px 20px 0 rgba(0 0 0 /10%);
        padding: 1.3rem;
        padding-right: 3.3rem;
        font-size: 1.1rem;
        font-weight: 600;
        width: 100%;
        text-align: left;
        position: relative;
        transition: all 0.3s ease-out;
        display: flex;
        align-items: center;
        gap: 20px;

        img {
            max-height: 60px;
        }

        &:hover {
            color: var(--primary);
        }

        .toggle {
            position: absolute;
            transform: translateY(-50%);
            top: 50%;
            right: 20px;
            width: 30px;
            aspect-ratio: 1;
            border-radius: 100%;
            border: 2px solid var(--primary);

            &:before {
                content: "";
                width: 50%;
                height: 2px;
                background: var(--primary);
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);
            }

            &:after {
                content: "";
                width: 2px;
                height: 50%;
                background: var(--primary);
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);
                transition: all 0.3s ease-out;
            }
        }
    }
}

.accordion.active {
    .accordion-title {
        color: var(--primary);

        .toggle:after {
            opacity: 0;
        }
    }
}

.parallax-image {
    object-fit: cover;
    transform: translateY(0);
    will-change: transform;
}

.splide__arrow {
    width: 50px;
    aspect-ratio: 1;
    background: white;
    height: auto;
    opacity: 1;

    svg {
        fill: var(--primary);
    }

}

.form-fields {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
}

.container-box {
    container-type: inline-size;
    container-name: container;
}

.is-client{
    input:checked + label{
        background: var(--accent);
    }
    label{
        cursor: pointer;
    }
}

@container container (max-width:310px) {
    .form-fields {
        grid-template-columns: 1fr;
    }
}

.programm-list {
    &:before {
        content: "";
        width: 660px;
        top: 0;
        left: 0;
        height: 100%;
        background: var(--primary);
        border-radius: 1.25rem;
        position: absolute;
    }

    @media (max-width: 1024px) {
        &:before {
            width: 100%;
        }
    }
}

.products-slider,.products-slider-2 {
    .splide__track {
        padding-top: 2.2rem;
    }
}

.cover-src {
    clip-path: circle(53%);
}

.blue-mesh {
    background-color: hsla(233, 100%, 46%, 1);
    background-image:
        radial-gradient(at 0% 100%, hsla(26, 0%, 100%, 1) 0px, transparent 50%),
        radial-gradient(at 80% 0%, hsla(189, 100%, 56%, 0) 0px, transparent 50%);
}


.num {
    font-size: 100px;
    font-weight: 900;
    line-height: 1;
    transform: translateY(-5px);
}

.custom-select {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' class='ionicon' viewBox='0 0 512 512'%3E%3Cpath fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='48' d='M112 184l144 144 144-144'/%3E%3C/svg%3E");
    background-size: 15px;
    background-position: center right 1.1rem;
    background-repeat: no-repeat;
}


#map .gm-ui-hover-effect {
    position: absolute !important;
    top: 0;
    right: 0;
}

#map .gm-style-iw-c {
    padding: 20px !important;
    padding-bottom: 0 !important;
    max-height: none !important;
}

#map .gm-style-iw-d {
    padding: 0 !important;
    font-family: "Manrope", sans-serif !important;
    overflow: unset !important;
    max-height: none !important;
}

.similar-news {
    .splide__pagination {
        position: static;
        margin-top: 3rem;
    }
}

#whr_embed_hook {
    h2 {
        font-size: 1.5rem;
        font-weight: 800;
        color: white;
    }

    .whr-info {
        span {
            font-weight: 600;
        }
    }

    .whr-item {
        position: relative;

        &:before {
            content: "";
            background: url('assets/images/Logo-vertical-black.svg') no-repeat center center / 100%;
            position: absolute;
            top: 2rem;
            left: 2rem;
            width: 30px;
            height: 30px;
            filter: brightness(0) saturate(100%) invert(10%) sepia(100%) saturate(7497%) hue-rotate(241deg) brightness(84%) contrast(123%);
        }
    }
}

.product-box:has(.power-bg) {
    *:not(.power-bg) {
        position: relative;
        z-index: 2;
    }
}

.product-box:has(.gas-bg) {
    *:not(.gas-bg) {
        position: relative;
        z-index: 2;
    }
}

.power-bg {

    background-image: url('https://volton.gr/wp-content/uploads/2025/07/Energy.svg');
    background-position: center center;
    background-size: auto 240px;
    background-repeat: no-repeat;
    position: absolute;
    inset: 0;
    opacity: 0.1;
    pointer-events: none;


}

.gas-bg {

    background-image: url('https://volton.gr/wp-content/uploads/2025/07/Gas.svg');
    background-position: center center;
background-size: auto 240px;
    background-repeat: no-repeat;
    position: absolute;
    inset: 0;
    opacity: 0.1;


}

.filter-yellow {
    filter: brightness(0) saturate(100%) invert(87%) sepia(27%) saturate(3217%) hue-rotate(1deg) brightness(103%) contrast(101%);
}

.filter-green {
filter: brightness(0) saturate(100%) invert(51%) sepia(87%) saturate(2415%) hue-rotate(121deg) brightness(89%) contrast(101%);
}

.filter-blue {
    filter: brightness(0) saturate(100%) invert(10%) sepia(100%) saturate(7071%) hue-rotate(240deg) brightness(84%) contrast(125%);
}

.dark-form{
    .form-layout{
        input[type="text"],
        input[type="email"],
        select,
        textarea{
            color: black;
            font-weight: 900;
        }
        label{
            color: black;
        }
    }
}

.light-form{
    .form-layout{
        select{
            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' class='ionicon' viewBox='0 0 512 512'%3E%3Cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='48' d='M112 184l144 144 144-144'/%3E%3C/svg%3E");
        }

        option{
            color: black;
        }

        .acceptance{
            a{
                text-decoration-color: white;

                &:hover{
                    color: var(--accent);
                }
            }
        }
    }
}

.form-layout{
    .telephone-input {
            label {
                &:before {
                    content: "+30";
                    position: absolute;
                    bottom: -22px;
                    left: 0;
                    color: rgb(0 0 0 / 30%);
                    font-size: 0.9rem;
                    opacity: 0;
                    pointer-events: none;
                    transition: all 0.3s ease-out;
                }
            }
    
            input[type="text"] {
                padding-left: 3rem;
            }
    
            input[type="text"]:not(:placeholder-shown)+label:not(.plain-label),
            input[type="text"]:focus+label:not(.plain-label) {
                &:before {
                    opacity: 1;
                }
            }
        }
    
        input[type="text"],
    input[type="email"]{
        width: 100%;
        min-height: 52px;
        background: white;
        border-radius: 60px;
        padding-inline: 1.3rem;
        padding-top: 23px;
    }
    textarea{
        width: 100%;
        background: white;
        border-radius: 1rem;
        padding: 1.8rem 1.2rem;
        padding-top: 2rem;
        color: white;
    }
    select{
        width: 100%;
        min-height: 55px;
        background: white;
        border-radius: 60px;
        padding-inline: 1rem;
        padding-right: 3rem;
        font-weight: 900;
        appearance: none;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' class='ionicon' viewBox='0 0 512 512'%3E%3Cpath fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='48' d='M112 184l144 144 144-144'/%3E%3C/svg%3E");
        background-repeat: no-repeat;
        background-size: 17px;
        background-position: center right 20px;
        overflow: hidden !important;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    textarea + label{
        transform: none;
        top: 22px;
    }
     label:not(.plain-label){
        position: absolute;
        left: 1.2rem;
        top: 50%;
        pointer-events: none;
        transform: translateY(-50%);
        transition: all 0.3s ease-out;
        line-height: 1;
    }

    label.message{
        top: 20px;
        transform: none;
    }

    label.plain-label{
        position: static;
        transform: none;
        margin-bottom: 0.5rem;
        padding-left: 1rem;
        
    }

    input[type="text"]:focus + label:not(.plain-label),
    input[type="text"]:not(:placeholder-shown) + label:not(.plain-label),
    input[type="email"]:focus + label:not(.plain-label),
    input[type="email"]:not(:placeholder-shown) + label:not(.plain-label),
    textarea:focus + label:not(.plain-label),
    textarea:not(:placeholder-shown) + label:not(.plain-label)
    {
        color: var(--primary);
        top: 12px !important;
        transform: none;
        font-size: 0.75rem;
    }
    input[type="text"]:-webkit-autofill{
        background: transparent;
    }

    .acceptance{
        input{
            position: absolute;
            opacity: 0;
            pointer-events: none;
        }

        input:checked + label:before{
            content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' class='ionicon' viewBox='0 0 512 512'%3E%3Cpath fill='none' stroke='%230018EB' stroke-linecap='round' stroke-linejoin='round' stroke-width='32' d='M416 128L192 384l-96-96'/%3E%3C/svg%3E");
        }
        label{
            margin:0 !important;
            padding:0;

            &:before{
                content: "";
                width: 20px;
                height: 20px;
                background: white;
                border-radius: 0.3rem;
                position: absolute;
                top: 0;
                transition: all 0.3s ease-out;
                left: 0;    
            }

        }
        a{
            font-size: 0.875rem;
            font-weight: 900;
            text-decoration: underline;
            transition: color 0.3s ease-out;
            text-decoration-color: var(--primary);
            text-underline-offset: 5px;

            &:hover{
                color: var(--primary);
            }
            
        }
        display: flex;
        padding-left: 2rem;
        flex-wrap: wrap;
        position: relative;
    }
   
}

.sidebar-form .form-layout{
    input[type="text"]:focus + label,
    input[type="text"]:not(:placeholder-shown) + label,
    input[type="email"]:focus + label,
    input[type="email"]:not(:placeholder-shown) + label,
    textarea:focus + label,
    textarea:not(:placeholder-shown) + label
    {
        color: white;
    }
}

.post-content h2 {
    font-size: 22px;
    font-weight: bold;
    margin-bottom: 10px;
}

.programm-list-details{
    li {
        padding-left: 30px;
        position: relative;

        &:before {
            content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' class='ionicon' viewBox='0 0 512 512'%3E%3Cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='32' d='M416 128L192 384l-96-96'/%3E%3C/svg%3E");
            width: 25px;
            height: 25px;
            line-height: 0;
            display: block;
            position: absolute;
            top: 4px;
            left: 0;
        }
    }
}

.sidebar-img{
    filter: brightness(0) saturate(100%) invert(12%) sepia(97%) saturate(6101%) hue-rotate(239deg) brightness(83%) contrast(129%);
}

@media(max-width:1024px){
    .products-slider,.products-slider-2 {
    .splide__track {
        padding: 0;
    }
}
}

.options-slider{
    .splide__arrow{
        transform: none;
        top: -80px;
    }
    .splide__arrow--next{
        right: 0rem;
    }
    .splide__arrow--prev{
        right: 3.6rem;
        left: auto;
    }
}

.about-boxes{
    >div{
        transition: all 0.3s ease-out;

        img{
            transition: all 0.3s ease-out;
        }

        &:hover{
            transform: translateY(-20px);

            img{
                transform: scale(1.1);
            }
        }
    }
}

.prices-table{
    color: var(--primary);

    td{
        border-right: 1px solid #ccc;
        border-bottom: 1px solid #ccc;
    }
}

.blue-box{
    overflow: hidden;
    z-index: 1;

    &:before{
    content: "";
    position: absolute;
    height: 100%;
    width: 100%;
    left: -45px;
    top: 0;
    background: var(--primary);
    transform: skewX(-10deg);
    z-index: -1;
    };
}
.blue-box.reversed{
 

    &:before{
    content: "";
    position: absolute;
    height: 100%;
    width: 100%;
    right: -45px;
    left: auto;
    top: 0;
    background: var(--primary);
    transform: skewX(-10deg);
    z-index: -1;
    };
}

#pay-form {
    height: auto !important;
    width: 100% !important;
    align-items: center;
}

#payForm {
    min-height: 390px;
    width: min(100%, 460px);
}

.steps.short input[type="text"] {
    border: 1px solid var(--bordercolor);
    min-height: 45px;
    padding-inline: 15px;
    border-radius: 6px;
}

.steps:not(.short) input[type="text"],
.steps input[type="email"] {
    width: 100%;
    border: 1px solid var(--bordercolor);
    min-height: 45px;
    padding-inline: 15px;
    border-radius: 6px;
}

.steps input[type="number"]::-webkit-inner-spin-button,
.steps input[type="number"]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.steps input[type="number"] {
    -moz-appearance: textfield;
}

.steps select {
    width: 100%;
    border: 1px solid var(--bordercolor);
    min-height: 45px;
    padding-inline: 15px;
    border-radius: 6px;
    appearance: none;
    -webkit-appearance: none;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' class='ionicon' viewBox='0 0 512 512'%3E%3Cpath fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='48' d='M112 184l144 144 144-144'/%3E%3C/svg%3E");
    background-size: 18px;
    background-repeat: no-repeat;
    background-position: right 10px center;
}

.steps input[type="text"]:focus,
.steps select:focus,
.steps input[type="email"]:focus {
    border-color: var(--primary_blue);
    outline: none;
}

.cta-button{
    position: relative;
    z-index: 1;
    &:before{
        content: "";
        width: 0;
        height: 100%;
        position: absolute;
        left: 0;
        top: 0;
        transition: all 0.3s ease-out;
        z-index: -1;
    }
    &:hover:before{
        width: 100%;
    }
}

.vgreen.cta-button{
    &:before{
        background: linear-gradient(90deg, #007b48, var(--accent));
    }
}

.vblue.cta-button{
    &:before{
        background: linear-gradient(90deg, #02118f, var(--primary));
    }
}


.vgray.cta-button{
    &:before{
        background: linear-gradient(90deg, #d9d9d9, white);
    }
}

.blue-secondary{
    .main-btn.secondary{
        &:before{
            background: linear-gradient(90deg, #02118f, var(--primary));
        }
    }
}

.stripes-pattern{
    position: relative;

    &:before{
        content: "";
        width: 60%;
        height: 100%;
        position: absolute;
        right: 0;
        top: 0;
       background-image: url('https://volton.gr/wp-content/uploads/2025/11/Blue-Stripes.svg');
       background-repeat: repeat-y;
       background-size: 100%;
    }
}

.stripes-pattern.stripes-full{
    &:before{
        width: 100%;
        height: 60%;
        top: auto;
        bottom: 0;
    }
}

.contact_form_errors{
        background: #cf2828;
    color: white;
    font-size: 0.9rem;
    padding: 5px 15px;
    display: inline-block;
    border-radius: 60px;
    margin-left: 1rem;
    position: relative;
    margin-top: 12px;

    &:before{
        content: "";
        position: absolute;
        left: 1.5rem;
        top: -9px;
        width: 0;
        border-right: 10px solid transparent;
        border-left: 10px solid transparent;
        border-bottom: 10px solid #cf2828;
    }
}

.label-box{

    background: white;
    display: inline-block;
    position: relative;
    z-index: 1;
    padding: 1.5rem;
    border-bottom-left-radius: 100%;
    border-bottom-right-radius: 100%;

    
    p{
        color: var(--primary);
        font-weight: 900;
        font-size: 1.325rem;
        text-align: center;

        span{
            display: block;
            color: black;
            font-weight: 400;
            font-size: 1rem;
        }
    }
}

.blue-label.label-box{
    background: var(--primary);
    p{
        color: white;

        span{
            color: white;
        }
    }
}

.green-label.label-box{
    background: var(--accent);

    p{
        color: white;

        span{
            color: white;
        }
    }
}

.main-tabs{
    button{
        position: relative;
        padding-bottom: 0.8rem;

        &:after{
            content: "";
            position: absolute;
            bottom: 0;
            left: 50%;
            transform: translateX(-50%);
            height: 4px;
            /* background: var(--accent); */
            transition: all 0.3s ease-out;
            width: 0;
        }

        &:hover:after{
            width: 100%;
        }
    }

    button.active{
        &:after{
            width: 100%;
        }
    }
}

.program-tabs{
    button{
        display: flex;
        align-items: center;
        gap: 1rem;

        &:before{
            content: "";
            width: 8px;
            height: 8px;
            border-radius: 100%;
        }
    }
}

.similar-news{
    .splide__arrow--next{
        right: -70px;
    }
    .splide__arrow--prev{
        left: -70px;
    }
}

#breadcrumbs{
    a{
        &:hover{
            text-decoration: underline;
        }
    }
}

.form-tab{
    display: none;
    margin-top: 1.5rem;
}

.form-nav-tabs{

    button{
        span{
            transition: all 0.3s ease-out;
        }
    }

    button.active{
        &:before{
            width: 100%;
        }

        span{
            transform: rotate(180deg);
        }
    }
}

.contact-widget{
    a{
       

        &:hover{
            img{
                filter: brightness(0) saturate(100%) invert(13%) sepia(85%) saturate(6277%) hue-rotate(239deg) brightness(82%) contrast(131%);
            }
        }
    }
}

.hints-links a{
    border: 1px solid #e5e7eb;
    padding:1.5rem;
    display: grid;
    grid-template-columns: 80% 1fr;
    font-weight: 800;
    align-items: center;
    transition: all 0.3s ease-out;
}
.hints-links a ion-icon{
    margin-left: auto;
    padding-right: 15px;
    transition: all 0.3s ease-out;
}
.hints-links a:hover{
    border-color: var(--primary);
    color: var(--primary);
}
.hints-links a:hover ion-icon{
    padding-right: 0;
}
.faqs-bg:before {
    background-image: url('https://volton.gr/wp-content/uploads/2025/12/grigori-voithia-1000-x-1000.jpg');
}


.entry-content{
    a{
        color: var(--primary);
        text-decoration: underline;
    }
}

.links-list{
    max-width: max-content;
    line-height: 1;

    > li:has(a){

        a{
            background: white;
            border-radius: 0.3rem;
            padding:1rem;
            display: flex;
            align-items: center;
            gap: 1.5rem;
            justify-content: space-between;
            transition: all 0.3s ease-out;

            &:hover{
                background: var(--primary);
                color: white;

                &:after{
                    content:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' class='ionicon' viewBox='0 0 512 512'%3E%3Cpath fill='none' stroke='%23ffffff' stroke-linecap='round' stroke-linejoin='round' stroke-width='48' d='M268 112l144 144-144 144M392 256H100'/%3E%3C/svg%3E");
                }
            }

            &:after{
                content:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' class='ionicon' viewBox='0 0 512 512'%3E%3Cpath fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='48' d='M268 112l144 144-144 144M392 256H100'/%3E%3C/svg%3E");
                display: block;
                width: 19px;
                height: 19px;
                line-height: 0;
                transform: rotate(-45deg);
            }
        }
         
    }

    > li:not(:has(a)){
        background: white;
        border-radius: 0.3rem;
        padding:1rem;
    }
}

.products-popup-body{
    position: relative;
    overflow: hidden;
    z-index: 1;

    &:before{
            content: "";
            background: var(--accent);
            position: absolute;
            left: -57px;
            top: 0;
            width: 50%;
            height: 100%;
            transform: skewX(-10deg);
            z-index: -1;
        }
}
.text-block-section:has(table){
    max-width: 100%;
    overflow-x: auto;
}

.simple-mobile-slider{

    .splide__arrows{
        position: absolute;
        bottom: -60px;
        left: 0;
        width: 100%;
        display: flex;
        gap: 1rem;
    }

    .splide__arrow{
        position: static;
        transform: none;
    }
}

.left-clip{
    clip-path:polygon(0 0, 100% 0%, 96% 100%, 0% 100%)
}
.right-clip{
    clip-path:polygon(20px 0, 100% 0%, 100% 100%, 0% 100%)
}

.programm-list-details{
    > ul + *{
        font-size: 0.95rem;
        margin-top: 1rem;
        line-height: 1.3;
    }
}

.programm-bullets{
    > ul + *{
        font-size: 0.95rem;
        margin-top: 1rem;
        line-height: 1.3;
    }
}

@media(max-width:1280px){
    .left-clip,.right-clip{
        clip-path: none;
    }
    .blue-box{
        &:before{
            display: none;
        }
    }
}
@media(max-width:1024px){
    .stores-slider{
        margin-bottom: 70px;
        .splide__arrow{
            position: static;
            transform: none;
        }
        .splide__arrows{
            position: absolute;
            bottom: -60px;
            display: flex;
            gap: 0.5rem;
        }
    }
}
@media(max-width:768px){
    .no-hover {
        .product-box {
            &:hover {
                transform: translateY(0px);

                 &:before {
                    top: 0;
                    left: 0;
                }

                &:after {
                    bottom: 0;
                    right: 0;
                }

                
            }
        }
    }

    .options-slider{
        margin-bottom: 60px;
        .splide__arrows{
            display: flex;
            gap: 1rem;
            position: absolute;
            bottom: -60px;
            left: 0;
            width: 100%;
        }
        .splide__arrow{
            position: static;
            transform: none;
        }
    }
}

@media(max-width:620px){
    .form-fields{
        grid-template-columns: 1fr;
    }

    .accordion{
        .accordion-content{
            width: 100%;
            border-radius: 1.1rem;
            margin-top: 1rem;
            padding: 1rem;
        }
    }
    
}