﻿:root {
    --primary-blue: #0b1f56;
    --primary-red: #540803;
    --secondary-blue-1: #3D4481;
    --secondary-blue-2: #3A5BA0; /* ez jó */
    --secondary-blue-3: #6A6DAF;
    --secondary-blue-4: #ABA9BC;
    --secondary-blue-5: #0067BF; /* ez jó */
    --secondary-blue-6: #0069D2; /* ez jó */
    --secondary-blue-7: #59AEF7;
    --secondary-blue-8: #96AAE0;
    --secondary-blue-9: #6A7698;
    --secondary-blue-10: #8BAAF2;
    --secondary-blue-11: #465E8E; /* ez jó */
    --secondary-blue-12: #0881EF;
    --secondary-blue-13: #326DBD;
    --secondary-blue-14: #313F5B;
    --secondary-red-1: #A46668; /* ez jó */
    --secondary-red-2: #D19F9F;
    --secondary-red-3: #A04046; /* ez jó */
    --secondary-red-4: #B35D50; /* ez jó */
    --secondary-red-5: #873539; /* ez jó */
    --secondary-red-6: #E48979;
    --secondary-red-7: #D6717E;
    --secondary-red-8: #B65751; /* ez jó */
    --secondary-red-9: #E0998F;
    --secondary-red-10: #BC827A; /* ez jó */
    --secondary-red-11: #A96467;
    --secondary-red-12: #AF7075;
    --secondary-red-13: #9C3D4D;
    --secondary-red-14: #DE524A;
    --primary-black: #2a2a2a;
    --secondary-black: #D0D0D0;
    --font-family-1: 'Montserrat', sans-serif;
    --font-family-2: 'Roboto', sans-serif;
}

* {
    /* Ez kirajzolja az összes elemet */
    /*outline: 1px solid red;*/
    margin: 0;
    padding: 0;
    outline: none;
}

.row {
    margin: 0;
}

.nav-link, .nav-link:focus {
    color: white;
}

.topnav.sticky .nav-link,
.topnav.sticky .nav-link.active {
    color: var(--primary-blue);
}

.topnav.sticky .nav-item .nav-link::after {
    background-color: var(--primary-blue);
}

.topnav.sticky .nav-item .nav-link:hover,
.topnav.sticky .nav-item .nav-link.active:hover {
    color: var(--primary-blue);
}

.hero-title h1 {
    font-size: 3rem;
    font-weight: bold;
    text-align: center;
    padding-top: 4rem;
}

.section-cards, .section-services {
    display: flex;
    flex-direction: column;
    justify-content: start;
    align-items: center;
}

.card-title h1, .about-title h1, .partners-title h1, .contact-title h1 {
    color: var(--primary-blue);
    text-align: center;
}

a {
    text-decoration: none;
}

.rz-dropdown,
.rz-dropdown:not(:disabled):not(.rz-state-disabled) {
    width: 130px;
    max-width: 130px;
    background-color: transparent !important;
}

    .rz-dropdown:hover,
    .rz-dropdown:not(:disabled):not(.rz-state-disabled):hover {
        background-color: transparent !important;
    }

    .rz-dropdown .rz-dropdown-label {
        /*color: white;*/
        font-size: 0.9rem;
        text-transform: uppercase;
    }

.rz-dropdown-items li:hover .rz-dropdown,
.rz-dropdown-items li:hover .rz-dropdown:not(:disabled):not(.rz-state-disabled) {
    background-color: transparent;
}

.topnav.sticky .rz-dropdown .rz-dropdown-label,
.topnav.sticky .rz-dropdown-trigger .rzi {
    color: var(--primary-blue);
}


@media (max-width: 1700px) {

}

@media (max-width: 1400px) {
}

@media (max-width: 1200px) {
}

@media (max-width: 992px) {
    .hero-title h1 {
        font-size: 2.5rem;
        font-weight: bold;
        text-align: center;
        padding-top: 4rem;
    }

    .rz-dropdown:hover,
    .rz-dropdown:not(:disabled):not(.rz-state-disabled):hover {
        border: 1px solid white !important;
    }

    .rz-dropdown .rz-dropdown-label,
    .rz-dropdown-trigger .rzi {
        color: white;
    }
}

@media (max-width: 768px) {
    .hero-title h1 {
        font-size: 2rem;
        font-weight: bold;
        text-align: center;
        padding-top: 0;
    }

    .topnav.sticky .nav-link, .topnav.sticky .nav-link.active {
        color: white;
    }

    .topnav.sticky .nav-item .nav-link:hover,
    .topnav.sticky .nav-item .nav-link.active:hover {
        color: white;
    }

    .topnav.sticky .nav-item .nav-link:hover::after {
        background-color: white;
    }
}






/* ---------------------------------- Animations ---------------------------------- */
.animate {
    opacity: 0;
    will-change: opacity, transform;
}

.animated {
    animation-fill-mode: both;
    /*animation-timing-function: ease-out;*/
    animation-delay: 0.2s;
    transition: all 0.4s ease;
}

.animated-slow-1 {
    animation-duration: 1.25s;
}

.animated-slow-2 {
    animation-duration: 2s;
}

.animated-slow-25 {
    animation-duration: 2.5s;
}

.animated-slow-3 {
    animation-duration: 3s;
}

.animated-slow-4 {
    animation-duration: 4s;
}

.animated-slow-5 {
    animation-duration: 5s;
}

.animation-delay-03 {
    animation-delay: 0.3s;
}

.animation-delay-05 {
    animation-delay: 0.5s;
}

.animation-delay-07 {
    animation-delay: 0.7s;
}

.animation-delay-09 {
    animation-delay: 0.9s;
}

.animation-delay-1 {
    animation-delay: 1s;
}

.animation-delay-11 {
    animation-delay: 1.1s;
}

.animation-delay-13 {
    animation-delay: 1.3s;
}

.animation-delay-15 {
    animation-delay: 1.5s;
}

.animation-delay-17 {
    animation-delay: 1.7s;
}

.animation-delay-2 {
    animation-delay: 2s;
}

.animation-delay-25 {
    animation-delay: 2.5s;
}

.animation-delay-3 {
    animation-delay: 3s;
}

.animation-delay-35 {
    animation-delay: 3.5s;
}

.animation-delay-4 {
    animation-delay: 4s;
}

.animation-delay-45 {
    animation-delay: 4.5s;
}

.animation-delay-5 {
    animation-delay: 5s;
}

.animation-delay-6 {
    animation-delay: 6s;
}

.animation-delay-7 {
    animation-delay: 7s;
}

@keyframes zoomIn {
    from {
        opacity: 0;
        transform: scale3d(.3,.3,.3)
    }

    50% {
        opacity: 1
    }
}

.zoomIn {
    animation-name: zoomIn;
    animation-duration: 1s;
    animation-fill-mode: both;
}

.fade {
    animation-name: fade;
    animation-duration: 1s;
    animation-fill-mode: both;
}

@keyframes fade {
    from {
        opacity: .9
    }

    to {
        opacity: 1
    }
}

.fadeIn {
    animation-name: fadeIn;
    animation-duration: 1.5s;
    animation-fill-mode: both;
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        visibility: visible;
        opacity: 1;
    }
}

@keyframes fadeIn20 {
    from {
        opacity: 0;
        transform: translate3d(0, -20%, 0);
    }

    to {
        opacity: 1;
        /* transform: translate3d(0, 0, 0); */
        transform: none;
    }
}

.fadeIn3d {
    animation-name: fadeIn3d;
    animation-duration: 1s;
    animation-fill-mode: both;
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translate3d(0,100%,0);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

.fadeInUp {
    animation-name: fadeInUp;
    animation-duration: 2s;
    /*animation-delay: 3s;*/
    animation-fill-mode: both;
}

@keyframes fadeInDown {
    from {
        opacity: 0;
        transform: translate3d(0,-100%,0);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

.fadeInDown {
    animation-name: fadeInDown;
    animation-duration: 2s;
    /*animation-delay: 3s;*/
    animation-fill-mode: both;
}

@keyframes fadeInLeft {
    from {
        opacity: 0;
        transform: translate3d(-100%,0,0);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

.fadeInLeft {
    animation-name: fadeInLeft;
    animation-duration: 2s;
    /*animation-delay: 3s;*/
    animation-fill-mode: both;
}

@keyframes fadeInRight {
    from {
        opacity: 0;
        transform: translate3d(100%,0,0);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

.fadeInRight {
    animation-name: fadeInRight;
    animation-duration: 2s;
    /*animation-delay: 3s;*/
    animation-fill-mode: both;
}

@keyframes width30 {
    from {
        opacity: 0;
        width: 0;
        transform: translate3d(0,100%,0);
    }

    to {
        opacity: 1;
        width: 30%;
        transform: none;
    }
}

.width30 {
    animation-name: width30;
}

@keyframes width50 {
    from {
        opacity: 0;
        width: 0;
        transform: translate3d(0,100%,0);
    }

    to {
        opacity: 1;
        width: 50%;
        transform: none;
    }
}

.width50 {
    animation-name: width50;
}

@keyframes width90 {
    from {
        opacity: 0;
        width: 0;
        transform: translate3d(0,100%,0);
    }

    to {
        opacity: 1;
        width: 90%;
        transform: none;
    }
}

.width90 {
    animation-name: width90;
}



#components-reconnect-modal {
    display: none !important;
}



