@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400&display=swap");

@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500&display=swap");

* {
    font-family              : "Montserrat", sans-serif;
    -webkit-text-size-adjust : 100%; /* 2 */
    margin                   : 0;
    line-height              : 1.4;
    padding                  : 0;
}

:root {
    --primary-red    : #ee2e25;
    --secondary-gray : #565656;
    --light-gray     : #f5f5f5;
    --gray           : #7D7D7D;
}

a {
    text-decoration : none;
    color           : white;

    font-style      : normal;
    font-weight     : 500;
    font-size       : 24.058px;
}

a:hover {
    color           : white;
    text-decoration : none;
}

h2 {
    margin-bottom : 2rem;
}

.container {
    max-width : 1790px;
}

/*p,
li {
  line-height: 170%;
  margin-bottom: 2rem;
  font-weight: 300;
}*/

/** /////////////////////
------- hero
 */
.hero {
    background-image    : url("/assets/images/hero-background.svg");
    background-color    : var(--primary-red);
    background-size     : cover;
    background-position : center;
    min-height          : 100vh;
    display             : flex;
    align-items         : center;
    justify-content     : center;
}

.hero .box {
    text-align : center;
    color      : white;
    padding    : 6rem 0 6rem 0;
}
.hero h1 {
    color : white;
}
.hero p {
    color         : white;
    margin-bottom : 3rem;
    font-size     : 25px;
}

#w-logo {
    width         : 378px;
    margin-bottom : 3rem;
}

#dali-logo {
    width : 167px;
}

h1 {
    font-weight    : 400;
    font-size      : 75.0252px;
    letter-spacing : 0.04em;
    margin-bottom  : 1rem;
}

@media (max-width : 768px) {
    .hero {
        min-height : 420px;
        height: 100vh;
    }
    h1 {
        font-size : 26px;
        margin-bottom: 2rem;
    }
    .hero p {
        font-size     : 13px;
        padding       : 0 2rem;

        margin-bottom : 2rem;
    }
    #w-logo {
        width         : 50vw;

        margin-bottom : 2rem;

    }
    #dali-logo {
        margin-top : 20px;
        width: 30vw;
    }
}

@media (max-width : 1510px) and (min-width : 1000px) {
    h1 {
        font-size     : 60px;
        margin-bottom : 2rem;
    }
    .hero p {
        font-size : 25px;
        padding   : 0 2rem;
    }
    #w-logo {
        width : 40vw;
    }
    #dali-logo {
        width : 15vh;
    }
}
/** /////////////////////
------- hero foot
 */
.hero-foot {
    padding          : 60px 0;
    background-color : var(--gray);
}

#hero-foot-left p {
    font-style  : normal;
    font-weight : 500;
    font-size   : 32px;
}

.hero-foot h2 {
    margin-bottom : 0;
    color         : white;

    font-style    : normal;
    font-weight   : 300;
    font-size     : 32px;

    align-self    : center;
}
.hero-foot p {
    margin-bottom : 0;
    color         : white;

    font-style    : normal;
    font-weight   : 300;
    font-size     : 22px;

    align-self    : center;
}
.hero-foot img {
    height : 87px;
    width  : 87px;
}

@media only screen and (max-width : 1450px) and (min-width : 1200px) {
    .hero-foot {
        background-position : left;
    }

    .hero-foot .box {
        flex-direction : column;
    }

    #hero-foot-left {
        flex-direction : column;
        margin-bottom  : 2rem;
    }

    .hero-foot img {
        margin-bottom : 2rem;
        height        : 50px;
        width         : 50px;
    }
}

@media (max-width : 768px) {
    .hero-foot {
    }
    #hero-foot-left {
        align-items    : flex-start;
        margin-bottom  : 2rem;
        flex-direction : column;
        margin-bottom  : 2rem;
    }
    #hero-foot-left p {
        font-size     : 25px;

        width         : auto;
        margin-bottom : 2rem;
    }
    .hero-foot .box {
        flex-direction : row;
    }
    .hero-foot {
        background-position : left;
    }
    .hero-foot img {
        margin-bottom : 2rem;
        height        : 80px;
        width         : 80px;
    }
}

@media (max-width : 1200px) and (min-width : 768px) {
    .hero-foot {
        background-position : left;
    }
    .hero-foot .box {
        flex-direction : column;
    }
    #hero-foot-left {
        flex-direction : column;
        margin-bottom  : 2rem;
    }
    .hero-foot img {
        margin-right  : 0rem;
        margin-bottom : 2rem;
        height        : 50px;
        width         : 50px;
    }
}

/** /////////////////////
------- second
 */
.section-2 {
    background-color : var(--light-gray);
    color            : var(--secondary-gray);

    padding          : 120px 0 180px 0;
}
.section-2 h2 {
    font-family : "Montserrat";
    font-style  : normal;
    font-weight : 500;
    font-size   : 54px;
}
.section-2 .box h3 {
    margin-bottom : 2rem;

    font-style    : normal;
    font-weight   : 500;
    font-size     : 24px;
}
.section-2 p {
    font-style  : normal;
    font-weight : 300;
    font-size   : 22px;
}
/** /////////////////////
------- circle
 */
.circles-container {
    display       : flex;
    align-items   : center;
    margin-top    : 98px;
    margin-bottom : 2rem;
}
.text-left-circles {
    color          : var(--secondary-gray);
    font-style     : normal;
    font-weight    : 500;
    font-size      : 32px;
    text-transform : uppercase;
}
#line {
    width            : 196px;
    height           : 1px;
    background-color : #7d7d7d;
    transform        : rotate(-55deg);
}
.circles {
    display         : flex;
    justify-content : center;
    align-items     : center;
}
.circle {
    display          : flex;
    flex-direction   : column;
    justify-content  : center;
    align-items      : center;

    width            : 259.71px;
    height           : 259.71px;

    border-radius    : 50%;
    background-color : #ffffff;
    margin-right     : 49px;
    position         : relative;
}
.circles-container .icon {
    position : absolute;
    top      : 60px;
    right    : 50px;

    width    : 61px;
    height   : 61px;
}
.circle p {
    font-family    : "Montserrat";
    font-style     : normal;
    font-weight    : 500;
    font-size      : 18px;
    text-transform : uppercase;
    margin         : 0;

    position       : absolute;
    top            : 130px;
    right          : 160px;
    width          : 30px;
    height         : 30px;
}
@media (max-width : 768px) {
    .section-2{
        padding-top: 60px;
        padding-bottom: 60px;
    }
    .section-2 .box {
    }
    .section-2 h2 {
        margin-bottom : 0;
        font-size     : 42px;
    }
    .section-2 p {
        font-size : 18px;
    }
    .text-left {
        margin-bottom : 3rem;
    }
    .circles-container {
        flex-direction  : column;
        justify-content : center;
        margin-bottom   : 0;
    }
    .circles {
        flex-direction : column;
    }
    #line {
        display : none;
    }
    .circle {
        margin-bottom : 2rem;
        margin-right  : 2rem;
        margin-left   : 3rem;
    }
    .circle p {
        font-size : 12px;
    }
}

@media (max-width : 1510px) and (min-width : 769px) {
    .text-left {
        color         : var(--secondary-gray);
        margin-bottom : 3rem;
        margin-top    : 3rem;

        font-size     : 200px;
    }
    #line {
        display : none;
    }
    .circle {
        display          : flex;
        justify-content  : center;
        align-items      : center;
        margin-left      : 0;
        margin-bottom    : 0;
        width            : 200px;
        height           : 200px;

        border-radius    : 50%;
        background-color : #ffffff;
        position         : relative;
    }

    .circles-container {
        margin-top     : 2rem;
        flex-direction : column;
    }

    .circles-container .icon {
        position : absolute;
        top      : 50px;
        right    : 40px;

        width    : 51px;
        height   : 51px;
    }

    .circle p {
        font-family    : "Montserrat";
        font-style     : normal;
        font-weight    : 500;
        font-size      : 13px;
        text-transform : uppercase;
        margin         : 0;

        position       : absolute;
        top            : 100px;
        right          : 135px;
        width          : 30px;
        height         : 30px;
    }
    .circles {
        margin-bottom : 0;
    }
}

/** /////////////////////
------- gazdasagos
 */
.gazdasagos {
    background-image    : url("/assets/images/_hero2.jpg");
    background-position : center;
    background-size     : cover;
}
.gazdasagos-mobile {
    color : white;
}
.gazdasagos-mobile .left-side {
    background-image    : url("/assets/images/section3-left.png");
    background-position : center;
    background-size     : cover;
}
.gazdasagos-mobile .right-side {
    background-image    : url("/assets/images/divided-right.png");
    background-position : center;
    background-size     : cover;
}
.gazdasagos .bottom-image {
    position : absolute;
    bottom   : -17px;
    right    : -20px;
}
.gazdasagos .box {
    color : white;
}
.left-side {
    /*background-image    : url("/assets/images/section3-left.png");*/
    background-position : center;
    background-size     : cover;
    height              : 681px;
}
.left-side h1 {
    margin         : 0;
    font-style     : normal;
    font-weight    : 500;
    font-size      : 49px;
    text-align     : right;
    text-transform : uppercase;
}

.divided img {
    /*height        : 30px;*/
    /*width         : 150px;*/
    /*margin-bottom : 2rem;*/
}

.right-side {
    background-position : left;
    background-size     : cover;

    display             : flex;
    flex-direction      : column;
    justify-content     : center;
    align-items         : left;
    height              : 100%;
    font-weight         : 300;
    font-size           : 22px;
}

@media only screen and (max-width : 1150px) {
    .divided .box {
        flex-direction : column;
    }

    .left-side h1 {
        font-size      : 32px;
        font-weight    : 500;
        /*text-align     : right;*/
        text-align: left;
        padding-left: 25px;
        text-transform : uppercase;
    }

    .right-side {
        font-size : 18px;
        padding   : 50px 25px 140px 25px;
    }

    .right-side p {
    }

    .left-side {
    }
    .left-side h1 {
    }
}

@media (max-width : 1700px) {
    .left-side {
        padding-right : 2rem;
    }
}
/** /////////////////////
------- red section
 */

.red-block {
    /*background-color: var(--primary-red);*/
    /*background-image    : url(assets/images/red-bg.svg);*/
    background-color : var(--primary-red);
    color            : white;
    padding          : 120px 0 210px 0;
}

.red-block .icon {
    max-width : 86px;
}
.red-block .box {
    display         : flex;
    flex-wrap       : wrap;
    justify-content : center;
    align-items     : stretch;
    max-width       : 100rem;
    margin          : 0 auto;
    margin-bottom   : 210px;
}
.red-block .icon-dash {
    position : absolute;
    bottom   : -60px;
    right    : -80px;
}
.red-block h2 {
    font-style     : normal;
    font-weight    : 500;
    font-size      : 54px;
    text-transform : uppercase;
    padding        : 0;
    padding-bottom : 85px;
}

.red-block .box .cards {
    margin-bottom : 2rem;
    padding-right : 1.5rem;
}

.red-block .box .cards ul {
    padding-left : 1.1rem;

    font-style   : normal;
    font-weight  : 300;
    font-size    : 22px;
}

.red-block p, .red-block li {
    font-style  : normal;
    font-weight : 300;
    font-size   : 22px;
    max-width   : 95%;
}
.red-block li {
    list-style : none;
    position   : relative;
}
.red-block li:before {
    content       : '';
    width         : 3px;
    height        : 3px;
    position      : absolute;
    left          : -20px;
    top           : 11px;
    background    : white;
    border-radius : 25px;
}
.red-block .card-title-box {
    display        : flex;
    align-items    : center;
    margin-bottom  : 2rem;

    letter-spacing : 0.1rem;
}

.red-block .card-title-box h3 {
    margin-bottom : 0;

    font-style    : normal;
    font-weight   : 400;
    font-size     : 32px;
}

.red-block .red-block .icon {
    width        : 92px;
    height       : 92px;
    margin-right : 1rem;
}

@media only screen and (max-width : 768px) {
    .red-block {
        padding: 60px 0;
    }

    .red-block .box .cards {
        flex-basis    : 100%;
        padding-right : 0;
    }

    .red-block .box {
        margin-bottom : 2rem;
    }

    .red-block h3 {
        font-size : 20px;
    }

    .red-block p {
        font-size : 18px;
    }

    .red-block h2 {
        font-size     : 24px;
        margin-bottom : 2rem;
        /*margin-top    : 2rem;*/
        padding-bottom: 0;
    }
    .red-block .icon {
        width        : 72px;
        height       : 72px;
        margin-right : 1rem;
    }
    .red-block .box .cards ul {
        font-size : 18px;
    }
}

@media only screen and (max-width : 300px) {
    .red-block p {
        margin-right : 2rem;
    }

    .red-block .icon {
        margin-bottom : 2rem;
    }

    .red-block h3 {
        font-size : 16px;
    }
}

@media (max-width : 1700px) {
    .red-block {
        background-size : auto;
    }
}

/** /////////////////////
------- new circles block
 */

.new-circles{
    padding-top: 117px;
    padding-bottom: 199px;
    background-color: #F8F8F8;
}

.new-circles img {
    max-width: 100%;
    height: auto;
    width: 259px;
    height: 259px;
}

.new-circles .row.mx-auto {
    justify-content: center;
    text-align: center;
}
.new-circles .col-lg-3 {
    margin-bottom: 2rem;
}

.new-circles h2{
    color: #565656;
    margin-bottom: 87px;
    font-weight: 500;
    font-size: 54px;
    line-height: 66px;
    text-align: center;
}

@media (max-width: 1600px) and (min-width: 1000px) {
    .new-circles img{
        height: 230px;
        width: 230px;
    }
    .new-circles h2{
        font-size: 46px;
    }
}

@media (max-width: 999px) {
    .new-circles{
        padding-top: 3rem;
        padding-bottom: 3rem;
    }
    .new-circles h2 {
        font-size: 36px;
        margin-bottom: 40px;
        line-height: 150%;
    }

    .new-circles .row {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        align-items: center;
    }

    .new-circles .col-lg-3 {
        margin-bottom: 3rem;
        text-align: center;
    }
}


/** /////////////////////
------- options block
 */
.options-block {
    padding          : 150px 0 150px 0;
    /*background-color : var(--light-gray);*/
    background-color: white;
}

.options-block h2 {
    font-style  : normal;
    font-weight : 500;
    font-size   : 54px;
    text-align  : center;
    color       : var(--secondary-gray);
}

.options-block p {
    font-style  : normal;
    font-weight : 300;
    font-size   : 22px;
    color       : var(--secondary-gray);
}

.options-block .cards-container {
    display         : flex;
    flex-wrap       : wrap;
    justify-content : space-between;
    margin-top      : 64px;
}

.options-block .cards-container .cards {
    flex-basis : 30%;
}

.options-block .card-img {
    width           : 100%;
    object-fit      : cover;
    object-position : center;
    margin-bottom   : 2rem;
}

.options-block .cards-container .cards h3 {
    margin-bottom : 2rem;
    color         : var(--secondary-gray);

    font-style    : normal;
    font-weight   : 400;
    font-size     : 32px;
}

.options-block .cards-container .cards p {
    font-style  : normal;
    font-weight : 300;
    font-size   : 22px;
}

@media only screen and (max-width : 768px) {
    .options-block {
        padding: 5rem 0;
    }

    .options-block h2 {
        text-align : left;
        font-size  : 28px;
    }

    .options-block p {
        /*margin-bottom : 2rem;*/
        font-size     : 18px;
    }

    .options-block .cards-container .cards {
        flex-basis : 100%;
    }

    .options-block .cards-container .cards p {
        font-size : 18px;
    }
    .options-block .cards-container .cards ul {
        font-size : 18px;
    }

    .options-block #section-4-main {
        text-align : left;
        padding    : 0;
        margin-bottom: 0;
    }
}

@media only screen and (max-width : 1150px) {
    .cards-container .cards {
        flex-basis : 100%;
    }
}

/** /////////////////////
------- 25 block
 */
.white-box {
    overflow-x: hidden;
    color               : var(--secondary-gray);
    background-image    : url(/assets/images/25-bg-new.svg);
    background-position : top right;
    padding             : 140px 0 140px 0;
    background-size   : contain;
    background-repeat : no-repeat;
    background-color: #F8F8F8;
}
.white-box img {
    margin-bottom : 2rem;
    width         : 310px;
}
.white-box h3 {
    margin-bottom  : 2rem;
    font-style     : normal;
    font-weight    : 500;
    font-size      : 32px;
    text-transform : uppercase;
}
.white-box h2 {
    font-style  : normal;
    font-weight : 500;
    font-size   : 54px;
}
.white-box p {
    font-style    : normal;
    font-weight   : 300;
    font-size     : 25px;

    /*margin-bottom : 2rem;*/
}

.white-box .button {
    /*border           : none;
    border-radius    : 40px;
    cursor           : pointer;
    font-size        : 24px;
    padding          : 25px 70px;
    font-weight      : 500;
    background-color : var(--primary-red);*/

    /*margin-top: 2rem;*/

    width            : 433.16px;
    height           : 83px;
    border           : none;
    padding          : 25px 70px;

    border-radius    : 40px;
    cursor           : pointer;

    font-weight      : 500;
    background-color: var(--primary-red);

    text-align: center;
    justify-content: center;
}

@media only screen and (max-width : 768px) {
    .mt-5, .my-5 {
        margin-top: 10px !important;
    }
    .white-box img{
        margin-bottom: 1rem;
    }
    .white-box {
        background-size   : contain;
        background-repeat : no-repeat;
        padding-top: 60px;
        padding-bottom: 70px;
    }
    a {
        font-size  : 16px;
        text-align : center;
    }
    .section-6 {
    }

    .section-6 .box {
        padding : 0;
    }

    .section-6 img {
        height : 60px;
        width  : auto;
    }

    .white-box .button {
        height        : 60px;
        width         : 300px;
        margin-bottom : 2rem;
        margin-top: 60px;
    }

    .section-6 h2 {
        font-size : 26px;
    }

    .section-6 h3 {
        font-size : 20px;
    }

    .section-6 p {
        font-size : 18px;
    }
}
@media only screen and (max-width: 300px){
    .white-box .button {
        width: 200px;
    }
}


/** /////////////////////
------- swiper
 */
.swiper {
    width    : 100%;
    height   : 887px;
    overflow : hidden;
    position : relative;
}

.swiper-slide {
    text-align      : center;
    font-size       : 18px;
    background      : #fff;
    display         : flex;
    justify-content : center;
    width           : 100%;
    align-items     : center;
}

.swiper-slide img {
    display    : block;
    width      : 100%;
    object-fit : fill;
    position   : absolute;
    height     : 887px;
}
.swiper-slide > div {
    display         : flex;
    flex-direction  : row;
    flex-wrap       : nowrap;
    justify-content : center;
    align-items     : center;
}
.swiper-slide img + div {
    position : relative;
    color    : white;
}
.swiper-slide h2 {
    font-size : 70px;
}
.swiper-slide h3 {
    margin-bottom : 2rem;
    font-style    : normal;
    font-weight   : 400;
    font-size     : 40px;
}

.swiper-slide p {
    font-style  : normal;
    font-weight : 300;
    font-size   : 22px;
}

.swiper-pagination {
    position   : relative;
    visibility : visible;
    display    : block;
    transform  : none;
    bottom     : 70px !important;
    z-index    : 10;
}
.swiper-pagination .swiper-pagination-bullet {
    width      : 24px;
    height     : 24px;
    background : transparent;
    border     : 1px solid rgba(255, 255, 255, 1);
    position   : relative;
    opacity    : 1;
}
.swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active {
    width    : 35px;
    height   : 35px;
    top      : 4px;
    position : relative;
    border   : 6px solid rgba(255, 255, 255, 1);
}
.swiper-pagination .swiper-pagination-bullet:first-child:before {
    content    : "";
    position   : absolute;
    top        : 11px;
    left       : -100px;
    width      : 100px;
    height     : 1px;
    background : white;
}
.swiper-pagination
.swiper-pagination-bullet.swiper-pagination-bullet-active:first-child:before {
    content    : "";
    position   : absolute;
    top        : 13px;
    left       : -100px;
    width      : 100px;
    height     : 1px;
    background : white;
}
.swiper-pagination .swiper-pagination-bullet:last-child:before {
    content    : "";
    position   : absolute;
    top        : 11px;
    right      : -100px;
    width      : 100px;
    height     : 1px;
    background : white;
}
.swiper-pagination
.swiper-pagination-bullet.swiper-pagination-bullet-active:last-child:before {
    content    : "";
    position   : absolute;
    top        : 13px;
    right      : -100px;
    width      : 100px;
    height     : 1px;
    background : white;
}
.swiper-button-prev {
    width            : 59px;
    height           : 116px;
    background-size  : contain;
    background-image : url("data:image/svg+xml,%3Csvg width='61' height='119' viewBox='0 0 61 119' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1.00007 59.4485L60 0.999997' stroke='white' stroke-width='2'/%3E%3Cpath d='M1 58.897L59.4485 117.897' stroke='white' stroke-width='2'/%3E%3C/svg%3E");
    left             : 30px;
}
.swiper-button-next {
    width            : 59px;
    height           : 116px;
    background-size  : contain;
    background-image : url("data:image/svg+xml,%3Csvg width='61' height='119' viewBox='0 0 61 119' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M59.9999 59.4485L0.999994 0.999997' stroke='white' stroke-width='2'/%3E%3Cpath d='M60 58.897L1.55151 117.897' stroke='white' stroke-width='2'/%3E%3C/svg%3E");
    right            : 30px;
}

@media only screen and (max-width : 1300px) {
    .swiper-slide h2 {
        font-size : 30px;
    }
    .swiper-slide img{
        object-fit: cover;
    }
}
@media only screen and (max-width : 768px) {
    .swiper-slide {
    }

    .swiper-slide img{
        object-fit: cover;
    }
}
@media only screen and (max-width : 768px) {
    .swiper {
        height : 700px auto;
    }

    .swiper-button-prev {
        height : 50px;
    }

    .swiper-button-next {
        height : 50px;
    }
}

@media only screen and (max-width : 1300px) {
    .section-7 {

    }
}
/* footer */

footer {
    background-color : var(--primary-red);
    min-height       : 158px;

    display          : flex;
    justify-content  : center;
    align-items      : center;
}

footer img {
    height : 90px;
}
@media only screen and (max-width : 1300px) {
    h1 {
        font-size : 50px !important;
    }
}
@media only screen and (max-width : 768px) {
    h1 {
        font-size : 28px !important;
    }
    h2 {
        font-size : 25px !important;
    }
    h3 {
        font-size : 20px !important;
    }
    p, li {
        font-size : 16px !important;
    }
    .white-box .button {
        padding   : 20px 35px;
        font-size : 16px;
    }
}