body {
    opacity: 1 !important;
}

.header .container.--wide,
.header .columns {
    height: 100%;
}

.header .brand img {
    width: 100%;
    height: auto;
    display: block;
}

.sky {
    height: 100% !important;
}

.sky .cloud {
    top: auto;
    bottom: -30%;
}

.component--herofulltext .title {
    line-height: 0.8 !important;
}

.component--herofulltext .title span {
    margin-top: 40px;
}

.component--textblocklarge.custom-secondblock,
.component--gridnumbers.vertical {
    padding-top: 80px !important;
}

.discover-block {
    background-color: #f7f7f7;
}

.discover-block .item {
    padding-left: 15px;
    padding-right: 15px;
}

.discover-block .advance-box {
    background-color: #fff;
}

.component--teams .draggable {
  margin-top: 80px !important;
}

.link.text-block-center {
    display: flex;
    justify-content: center;
}

@media(max-width:1200px) {
    .sky .cloud {
        bottom: -15%;
    }

    .component--herofulltext .title span {
        margin-top: 25px;
    }

    .logo-wrap,
    .logo-wrap svg {
        width: 300px !important;
        height: 540px !important;
    }
}

@media(max-width:1100px) {
    .header .brand {
        width: 100px;
    }
    
    .header .menu-header {
        width: 100%;
        justify-content: center;
    }

    .component--herofulltext .title {
        left: min(8.611vw,34.1775px);
        padding-top: 0;
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        width: min(76.111vw,302.08500000000004px);
        line-height: 1 !important;
    }

    .component--herofulltext .title span {
        margin-top: 10px;
    }
}

@media(max-width:1100px) {
    .loader img {
        width: 130px !important;
        height: auto !important;
    }

    .header {
        height: 9vw !important;
    }

    .header .menu-header > li a {
        font-size: 14px;
    }

    .sky .cloud {
        bottom: -5%;
    }

    .component--gridnumbers.vertical .columns .item:first-child .text-block-left {
        width: 100% !important;
        padding: 0 15px !important;
    }

    .about-group .columns .item .text-block-left {
        width: 100% !important;
        padding: 0 15px !important;
    }

    .about-group .columns .item {
        text-align: center;
    }
    
    .about-group .text-block-left.--small .actions {
        justify-content: center;
        margin-top: 20px;
    }
    
    .about-group .item .content {
        width: 45%;
    }

    .chairman-message .display.--3xlarge span {
        margin-left: 8px;
    }

    .chairman-message .display.--3xlarge br {
        display: none;
    }

    .chairman-message .columns {
        gap: 50px !important;
    }

    .component.component--gridnumbers.vertical .content.content-0 {
        height: auto !important;
    }

    .component.component--gridnumbers.vertical .content.content-0 img {
        right: 0 !important;
        position: static !important;
        transform: none;
        height: auto !important;
    }

    .component--contentscrollcenter .content .image img {
        transform: none !important;
    }

    .industries-list {
        background-color: #fff !important;
    }

    .industries-list .content .info {
        transform: none !important;
    }

    .industries-list .content .info .title {
        opacity: 1 !important;
    }

    .industries-list .display.--3xlarge {
        /* top: 100px !important; */
        text-align: center !important;
    }

    .component--contentscrollcenter.industries-list .content .info .title .line--1 {
        text-align: center !important;
    }

    .industries-list .info .details {
        width: 30vw !important;
    }

    .component--map .text-block-center {
        width: 70%;
    }

    .component--teams .container {
        width: 100% !important;
    }

    #leadershipteampg .card-team {
        height: 350px !important;
    }

    #leadershipteampg .card-team.--large .image {
        height: 170px !important;
    }

    #leadershipteampg .card-team.--large .group {
        padding-left: 15px !important;
        padding-right: 15px !important;
    }

    #leadershipteampg .card-team .text.--medium {
        font-size: min(3.5vw, 12.435px) !important;
    }

    .news-grid {
        gap: 15px !important;
        padding-left: 15px !important;
        padding-right: 15px !important;
    }

    .site-footer::after {
        display: none !important;
    }
}

@media(max-width:767px) {
    .loader img {
        width: 100px !important;
        height: auto !important;
    }

    .header {
        height: auto !important;
    }
    
     .header .brand {
        width: 85px;
    }

    .logo-wrap,
    .logo-wrap svg {
        width: 170px !important;
        height: 300px !important;
    }

    .header .columns::after {
        top: 56px !important;
    }

    .header .columns:before {
        height: 56px !important;
    }

    .header .brand-wrap {
        padding-top: 3px;
    }

    .header .item .button {
        padding-top: 20px !important;
        height: auto !important;
    }

    .header .columns:before {
        right: 70px;
    }

    .component--herofulltext .title {
        left: min(3.611vw,34.1775px) !important;
        font-size: min(13vw,79.38px) !important;
        width: 60% !important;
    }

    .component--herofulltext .title .line--2 {
        transform: translate(50px) !important;
    }

    .component--herofulltext .title .line--3 {
        transform: translate(95px) !important;
    }

    .component--herofulltext .text-block-left {
        width: 90% !important;
        right: auto !important;
        left: 15px !important;
    }

    .component--herofulltext .text-block-left.--small .actions {
        margin-top: 20px !important;
    }

    .sky .cloud {
        bottom: 0;
    }

    .display.--large {
        line-height: 1.075 !important;
    }

    .custom-secondblock .title.display br {
        display: none;
    }

    .custom-secondblock .text-block-center {
        margin: 0 auto;
        width: 90%;
    }

    .text-block-center .label {
        margin-bottom: 20px;
    }

    .chairman-message .columns {
        gap: 30px !important;
    }

    .chairman-message .display.--3xlarge {
        font-size: min(12vw, 79.38px);
    }

    .component--textblocklarge.custom-secondblock,
    .component--gridnumbers.vertical,
    .site-footer-container {
        padding-top: 45px !important;
    }

    .section-compoment-space {
        padding: 45px 0 !important;
    }

    .text p br {
        display: none !important;
    }

    .discover-block {
        margin-top: -45px;
    }

    .discover-block .advance-box {
        padding: 10px;
    }

    .discover-block .advance-box {
        overflow: hidden;
        border-radius: 10px;
    }

    .industries-block .text-block-center {
        width: 90%;
        margin: 0 auto;
    }

    /* .industries-list .content .info-pattern {
        left: auto !important;
        right: 0 !important;
        top: 0 !important;
        transform: none !important;
    } */

    .industries-list .content .info-pattern svg {
        height: auto !important;
    }

    .industries-list .display.--3xlarge {
        /* top: 100px !important; */
        /* font-size: min(12vw, 79.38px); */
        text-align: center !important;
    }

    .component--contentscrollcenter.industries-list .content .info .title .line--1 {
        text-align: center !important;
    }

    .industries-list .info .text-block-left {
        left: 15px !important;
    }

    .industries-list .info .details {
        width: 35vw !important;
        right: 15px !important;
    }

    .industries-list .info .details .text.--xlarge {
        font-size: min(4vw, 19.845px) !important;
    }

    .component--teams.section-compoment-space {
        padding-bottom: 0 !important;
    }

    .component--teams .draggable {
        margin-top: 45px !important;
    }

    .news-section__title-spacing {
        margin-bottom: 45px !important;
    }

    .component--teams .text-block-center {
        margin: 0 !important;
        padding: 0 15px !important;
    }

    .component--teams .text-block-center .display.--large {
        font-size: min(6.889vw, 35.28px) !important;
    }

    .component--teams .text-block-center .display.--large br {
        display: none !important;
    }

    .news-grid .news-card .news-card__body {
        padding-bottom: 0 !important;
    }

    .site-footer-container .title .actions,
    .site-footer::after {
        display: none !important;
    }

    .footer-bottom {
        margin-top: 0 !important;
        padding-top: 45px !important;
    }

    .component--contentscrollcenter .content {
        clip-path: inherit !important;
    }

    .component--contentscrollcenter .sticky .info > div svg {
        width: 55px !important;
    }

    #leadershipteampg .card-team .text.--medium {
        font-size: min(3.5vw, 15.435px) !important;
    }

    .component--map .display.--large {
        font-size: min(6.5vw, 35.28px) !important;
    }

    .component--map .text-block-center {
        width: 100%;
        padding-left: 15px;
        padding-right: 15px;
    }

    .component--map .map {
        margin: -35% 0 !important;
    }

    .component--map .circle .group .name {
        display: none !important;
    }

    .component--map .circle .group .name .title.text {
        font-size: 14px;
        text-align: center;
    }

    .industries-list .content .info .text-block-left,
    .industries-list .content .info .details {
        bottom: 150px !important;
    }

    .industries-list .text-block-left.--small .actions {
        margin-top: 20px !important;
    }
}

@media(max-width:480px) {
    .cloud {
        width: 200% !important;
    }

    .banner-section .img-holder {
        display: flex;
        align-items: flex-end;
    }

    .banner-section .img-holder img {
        height: 76% !important;
        margin-bottom: 15%;
    }
}
/* ---------------------------------------------------------------------------
   "Our Business Units" brand circle - below 1100px
   --------------------------------------------------------------------------- */
@media (max-width: 1100px) {

    /* Centering. The base rule already centers .circle with `margin: auto`,
       and the <=1100px rule then adds `left: 50%; transform: translateX(-50%)`
       on top of it. That pair only centers an element whose margins are zero,
       so the two stack and the ring is pushed right by half the leftover
       space - exactly +164px at a 1100px viewport. It goes unnoticed on a
       phone because there `.circle` (194.444vw) is wider than the container,
       auto margins collapse to 0, and the transform is doing the centering on
       its own. Zeroing the margins makes that true at every width. */
    .component--map .circle {
        margin-left: 0;
        margin-right: 0;
    }

    /* Chopped logos. The white overlay is meant to fade the bottom of the arc
       out before the stats text. Two things stopped it: `linear-gradient(-90deg,
       ...)` fades left-to-right, not top-to-bottom (an autoprefixer artifact -
       the -webkit- fallback above it means "to bottom" in the legacy syntax),
       and the band floats 99px clear of the container's bottom edge. So instead
       of a fade it painted a hard-edged white block across the middle of the
       lower logos while leaving everything below it untouched. Anchor it to the
       bottom and fade it vertically, the way the desktop rule does. */
    .component--map .gradient {
        bottom: 0;
        height: min(55vw, 218.295px);
        background: linear-gradient(180deg, hsla(0, 0%, 100%, 0) 29.56%, #fff 58.5%);
    }
}

@media (max-width: 767px) {

    /* Tighten the spacing between the brand logos.
       The vendor spaces them by orbit radius, not by any gap value:
       setCircle() places each item at `circle.offsetWidth/2 + item.offsetWidth/2`
       and steps them 360/13 = 27.7deg apart, so the distance between neighbours
       is fixed by the circle's width alone. Shrinking the circle while leaving
       .circle-item alone pulls the logos together without making them smaller -
       roughly 40px apart here, down from about 100px.
       This one value is the tuning knob: smaller closes the gap further. */
    .component--map .circle {
        width: min(150vw, 595px);
        height: min(150vw, 595px);
    }
}

/* ---------------------------------------------------------------------------
   Mobile navigation (767px and below)
   ---------------------------------------------------------------------------
   Self-contained on purpose. The vendor has its own mobile nav, but it looks
   for .navigation / .trigger / .bars inside the header - markup this page does
   not have - and its setup throws when they are missing. These class names are
   all prefixed so the vendor never picks them up and that path stays dormant. */

.pg-burger,
.pg-mobile-nav {
    display: none;
}

@media (max-width: 767px) {

    .pg-burger {
        display: flex;
        flex-direction: column;
        justify-content: center;
        gap: 5px;
        width: 40px;
        height: 40px;
        padding: 8px;
        margin-left: 14px;
        margin-right: 14px;
        border: 0;
        background: transparent;
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
    }

    .pg-burger span {
        display: block;
        width: 100%;
        height: 2px;
        border-radius: 2px;
        background-color: var(--darkest, #2b2d6f);
        transition: transform .3s ease, opacity .2s ease;
    }

    body.pg-nav-open .pg-burger span:nth-child(1) {
        transform: translateY(7px) rotate(45deg);
    }

    body.pg-nav-open .pg-burger span:nth-child(2) {
        opacity: 0;
    }

    body.pg-nav-open .pg-burger span:nth-child(3) {
        transform: translateY(-7px) rotate(-45deg);
    }

    body.pg-nav-open .header {
        transform: none !important;
    }

    .text-block-center .label {
        padding-top: 30px;
    }

    .pg-mobile-nav {
        display: block;
        position: fixed;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        /* --pg-header-h is measured in JS, so the panel clears the sticky
           header whatever height it ends up at. */
        padding: calc(var(--pg-header-h, 66px) + 24px) 24px
                 max(24px, env(safe-area-inset-bottom));
        background-color: #fff;
        /* the header is z-index 2000 - stay under it so the burger keeps working */
        z-index: 9;
        overflow-y: auto;
        overscroll-behavior: contain;
        opacity: 0;
        visibility: hidden;
        transform: translateY(-8px);
        transition: opacity .3s ease, visibility .3s ease, transform .3s ease;
    }

    body.pg-nav-open .pg-mobile-nav {
        opacity: 1;
        visibility: visible;
        transform: none;
    }

    .pg-mobile-nav__list {
        list-style: none;
        margin: 0;
        padding: 0;
    }

    .pg-mobile-nav__list li + li {
        border-top: 1px solid rgba(43, 43, 43, .12);
    }

    .pg-mobile-nav__list a {
        display: block;
        padding: 16px 2px;
        font-size: 14px;
        line-height: 1.4;
        color: var(--darkest, #2b2d6f);
        text-decoration: none;
    }
}

@media (max-width: 767px) {

    /* The burger replaces the horizontal menu here - the six items do not fit
       across a phone at a legible size. */
    .header .menu-header {
        display: none !important;
    }
}