@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-image: url("/assets/images/hero-bg-pattern.svg"); */
    background-color    : var(--primary-red);
    background-size     : cover;
    background-position : center;
    min-height          : 100vh;
    display             : flex;
    align-items         : center;
    justify-content     : center;
}

.hero-bg-pattern{
    position: absolute;
    top: -30%
}
@media (max-width : 1510px) {
    .hero-bg-pattern{
        top: -5%;
    }
}

.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      : 64px;
    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;
}

@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_halfwaysplit.png");
    background-position : center;
    background-size     : cover;
}

.gazdasagos-mobile {
    color : white;
}
.gazdasagos-mobile .left-side {
    background-image    : url("/assets/images/divided-section-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   : -35px;
    right    : -20px;
}

@media only screen and (max-width : 1550px) {
    .gazdasagos .bottom-image {
        bottom   : -70px;
        right: -180px;
    }
    .gazdasagos {
        background-image    : url("/assets/images/hero2_halfwaysplit_laptop.png");
        background-position : center;
        background-size     : cover;
    }

}


.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-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 img{
    max-width: 125px;

}

.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;
    }
}


/** /////////////////////
------- section- texts - Siemens
 */

.white-box {
    overflow-x: hidden;
    color               : var(--secondary-gray);
    background-image    : url(/assets/images/white-box-bg-siemens.svg);
    background-position : center;
    padding             : 140px 0 140px 0;
    background-size   : cover;
    background-repeat : no-repeat;
    background-color: #F8F8F8;
}

@media only screen and (max-width: 1400px){
    .white-box {
        background-image    : url(/assets/images/white-box-bg-siemens-sm.svg);
    }
}

.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   : cover;
        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;
    }
}

/* 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;
    }
}