@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;
    }
    .hero h1 {
        font-size     : 24px !important;
        margin-bottom : 2rem;
    }
    .hero p {
        font-size     : 13px;
        padding       : 0 2rem;

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

        margin-bottom : 2rem;
    }
}

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

.section-2 ul {
    margin       : 10px 0;
    padding-left : 60px;
    font-size    : 22px;
}
.section-2 ul li {
    padding     : 5px 0;
    line-height : 230%;
}

.section-2 li {
    list-style : none;
    position   : relative;
}
.section-2 li:before {
    content       : "";
    width         : 3px;
    height        : 3px;
    position      : absolute;
    left          : -25px;
    top           : 30px;
    background    : var(--secondary-gray);
    border-radius : 25px;
}
@media (max-width : 768px) {
    .section-2 li:before {
        top : 25px;
    }
}

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

/** /////////////////////
------- tudatossag
 */
.tudatossag {
    background-image    : url("/assets/images/bg-left-right.jpg");
    background-position : center;
    background-size     : cover;
}
.tudatossag .content-right {
    padding : 100px 0;
}
.tudatossag-mobile {
    color : white;
}
/*.tudatossag-mobile .left-side {*/
/*  background-image: url("/assets/images/section3-left.png");*/
/*  background-position: center;*/
/*  background-size: cover;*/
/*}*/

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

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

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

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

@media only screen and (max-width : 1400px) {
    .tudatossag h2 {
        font-size : 35px;
    }
}

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

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

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

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

.tudatossag-mobile {

}
.tudatossag-mobile .image-left {
    background-image    : url("/assets/images/bg-left.jpg");
    background-position : center;
    background-size     : cover;
    min-height          : 90vh;
}
.tudatossag-mobile .right-side {
    background-image    : url("/assets/images/divided-right.png");
    background-position : center;
    background-size     : cover;
    padding             : 40px 40px 160px 40px;
}
/** /////////////////////
------- 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 160px 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 : 60px;
}

.red-block .box .cards {
    margin-bottom : 2rem;
    padding-right : 1.5rem;
}
.red-block p {
    color : white;
}
.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 : 100px 0; /*kitti mod*/
    }

    .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;
    }
}
@media (max-width : 768px) {
    .red-block h2 {
        font-size     : 20px;
        margin-bottom : 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     : 259.71px;
    height    : 259.71px;
}

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

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

.new-circles p {
    font-size   : 22px;
    font-style  : normal;
    font-weight : 500;
    font-size   : 22px;
    line-height : 32px;
    /* or 145% */
    color       : var(--secondary-gray);

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

/** /////////////////////
------- box grey 4
 */
.box-grey-4 {
    padding             : 150px 0;
    background          : url("/assets/images/bg-gray.svg") no-repeat;
    background-position : center;
    background-size     : cover;
}
.box-grey-4 h2 {
    padding-bottom : 60px; /*kitti mod*/
    font-size      : 54px;
    color          : var(--secondary-gray);
    line-height    : 66px;
}

.box-grey-4 p {
    font-size : 22px; /*kitti mod*/
}

@media (max-width : 1092px) {
    .box-grey-4 {
        padding : 100px 0;
    }
    .box-grey-4 h2 {
        font-size      : 46px;
        padding-bottom : 50px;
    }
    .box-grey-4 p {
        font-size : 18px; /*kitti mod*/
    }
    .col-auto > img {
        max-width : 60px;
    }
}
@media (max-width : 768px) {
    .box-grey-4 h2 {
        font-size      : 20px;
        line-height    : 170%;
        padding-bottom : 0;
    }
}

@media (max-width : 1500px) {
    .box-grey-4 p {
        font-size      : 18px;
        line-height    : 170%;
        padding-bottom : 0;
    }
}

/** /////////////////////
------- white box
 */
.white-box {
    overflow-x          : hidden;
    color               : var(--secondary-gray);
    background-image    : url(/assets/images/white-box-bg.svg);
    background-position : top right;
    padding             : 140px 0 140px 0;
    background-size     : contain;
    background-repeat   : no-repeat;
    background-color    : white;
}
.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;
    text-transform : uppercase;
}
.white-box p,
.white-box li {
    font-style  : normal;
    font-weight : 300;
    font-size   : 25px;

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

.white-box li {
    line-height : 230%;

    list-style  : none;
    position    : relative;
}

.white-box li:before {
    content       : "";
    width         : 3px;
    height        : 3px;
    position      : absolute;
    left          : -25px;
    top           : 30px;
    background    : var(--secondary-gray);
    border-radius : 25px;
}
@media (max-width : 768px) {
    .white-box li:before {
        top : 25px;
    }
}

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

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