@import url('https://fonts.googleapis.com/css2?family=Roboto+Condensed:ital,wght@0,100..900;1,100..900&display=swap');

.main-wrapper {
    font-family: "Roboto Condensed", sans-serif;
    font-size: 18px;
    font-weight: 400;
    line-height: 1.6;
    text-align: center;
    color: #fff;
    background-color: #000;
    max-width: 1920px;
    margin: 0 auto;
}

.main-wrapper h2 {
    font-family: "Roboto Condensed", sans-serif;
    font-size: 66px;
    font-weight: 600;
    text-transform: uppercase;
    color: #fff;
    margin-bottom: 0;
}

.main-wrapper h3 {
    font-family: "Roboto Condensed", sans-serif;
    font-size: 36px;
    font-weight: 600;
    line-height: 1.4;
    text-transform: uppercase;
    color: #fff;
    margin-bottom: 12px;
}

.main-wrapper h4 {
    font-family: "Roboto Condensed", sans-serif;
    font-size: 24px;
    font-weight: 600;
    color: #fff;
    margin-bottom: 0;
}

.main-wrapper p {
    margin-bottom: 0;
}

.hero {
    background-image: url(../assets/hero-bg.png);
    background-repeat: no-repeat;
    background-position: top center;
    background-size: auto 100%;
    height: 672px;
    display: flex;
    align-items: center;
}

.hero .row {
    display: flex;
    align-items: center;
}

.hero .title {
    padding-top: 30%;
}

.hero .product {
    display: block;
    margin: 0 auto;
}

.mpg-text {
    background-image: url(../assets/msi-mpg-dark-bg.jpg);
    background-repeat: no-repeat;
    background-position: top center;
    background-size: 100%;
    padding: 80px 0;
}

.partners {
    background-image: url(../assets/partners-bg.png);
    background-repeat: no-repeat;
    background-position: top center;
    background-size: cover;
    display: flex;
    align-items: center;
    padding: 80px 0;
}

.logos {
    list-style: none;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-left: 0;
    margin-bottom: 24px;
}

.logos li {
    border-right: 1px solid #aaa;
}

.logos li:last-child {
    border-right: none;
}

.partners-text p {
    padding: 0 20%;
}

.esrb {
    margin-top: 24px;
}

.esrb p {
    font-size: 12px;
    margin-top: 12px;
}

.mpg {
    background-image: url(../assets/mpg-bg.png);
    background-repeat: no-repeat;
    background-position: top center;
    background-size: auto 100%;
    height: 400px;
    display: flex;
    align-items: center;
}

.mpg .row {
    display: flex;
    align-items: center;
}

.mpg p {
    border-image: linear-gradient(to right, transparent 20%, #e81f76 80%, #e81f76 96%, transparent 110%) 1;
    border-top: 3px;
    border-bottom: 3px;
    border-right: 0;
    border-left: 0;
    border-style: solid;
    background: linear-gradient(to right, transparent 0%, rgba(158, 37, 118, 0.5) 60%, rgba(97, 35, 124, 0.5) 90%, transparent);
    text-shadow: 0 0 15px #000;
    text-align: left;
    padding: 16px 0;
}

.mpg .col-lg-4 img {
    -webkit-filter: drop-shadow(0 0 6px #e81f76);
    filter: drop-shadow(0 0 6px #e81f76);
}

.key-features {
    background-image: url(../assets/key-features-bg.png);
    background-repeat: no-repeat;
    background-position: top center;
    background-size: 100%;
    background-color: #101010;
    display: flex;
    align-items: center;
    padding: 80px 0;
}

.key-features h3 {
    font-size: 28px;
    margin-bottom: 0;
}

.key-features h3 span {
    color: #e81f76;
}

.key-features-wrapper {
    display: grid;
    grid-template-rows: 1fr 1fr 1fr 1fr;
    grid-template-columns: 0.9fr 1.2fr 0.8fr 1.2fr;
    gap: 10px;
}

.key-features-item {
    border: 1px solid #bb1b60;
    border-radius: 15px;
    place-content: center;
    place-items: center;
    -webkit-box-flex: 0;
    -ms-flex: 0 0 40%;
    flex: 0 0 40%;
    overflow: hidden;
}

.key-features-item-div1 {
    grid-area: 1 / 1 / 3 / 3;
}

.key-features-item .pd-item {
    background: url(../assets/feature-pd-bg.jpg);
    background-size: cover;
    width: 100%;
    height: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    padding: 0 10px;
}

.key-features-item-div2 {
    grid-area: 1 / 3 / 2 / 5;
}

.key-features-item .oledcare {
    width: 100%;
    height: 100%;
    text-align: left;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    background: url(../assets/feature-oledcare-bg.jpg) right center;
    background-size: cover;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    gap: 20px;
}

.key-features-item-div3 {
    grid-area: 2 / 3 / 3 / 4;
}

.key-features-item .led {
    background: url(../assets/feature-qd-led-bg.jpg);
    background-size: cover;
    width: 100%;
    height: 100%;
    padding: 0.8em 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.key-features-item-div4 {
    grid-area: 2 / 4 / 3 / 5;
}

.key-features-item .ai-navigator {
    background: url(../assets/feature-ai-bg.jpg);
    background-size: cover;
    width: 100%;
    height: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: end;
    -ms-flex-pack: end;
    justify-content: end;
    min-height: 12em;
    padding: 0 20px;
}

.key-features-item .ai-navigator .ai-item {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    gap: 10px;
    height: 100%;
}

.key-features-item-div5 {
    grid-area: 3 / 1 / 4 / 2;
}

.key-features-item-div6 {
    grid-area: 3 / 2 / 4 / 4;
}

.key-features-item .comprehensively {
    width: 100%;
    height: 100%;
    text-align: left;
    background: url(../assets/feature-comprehensively-supported-bg.jpg) right center;
    background-size: cover;
    display: flex;
    align-items: center;
}

.key-features-item .comprehensively h3 {
    padding-left: 20px;
}

.key-features-item-div7 {
    grid-area: 3 / 4 / 4 / 5;
}

.key-features-item .gtg {
    background: url(../assets/feature-gtg-bg.jpg) right center;
    background-size: cover;
    width: 100%;
    height: 100%;
    padding: 0.8em 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.key-features-item-div8 {
    grid-area: 4 / 1 / 5 / 2;
}

.key-features-item .lag h3 {
    font-size: 24px;
    text-align: center;
}

.key-features-item .lag h3 span {
    font-size: 42px;
}

.key-features-item-div9 {
    grid-area: 4 / 2 / 5 / 4;
}

.key-features-item .display {
    background: url(../assets/feature-display-bg.jpg) bottom center;
    background-size: cover;
    padding: 0 20px;
    width: 100%;
    height: 100%;
    padding: 0.8em 10px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.key-features-item-div10 {
    grid-area: 4 / 4 / 5 / 5;
}

.key-features-item .warranty {
    background: url(../assets/feature-warranty-bg.jpg);
    background-size: cover;
    overflow: hidden;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.key-features .warranty h3 {
    font-size: 20px;
    text-align: left;
    padding-left: 20px;
}

.video {
    background-image: url(../assets/msi-mpg-dark-bg.jpg);
    background-repeat: no-repeat;
    background-position: top center;
    background-size: 100%;
    padding: 80px 0;
}

.video-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
}

.video-wrap iframe {
  width: 100%;
  height: 100%;
  display: block;
  border: 0;
  border-radius: 20px;
}

.refresh-rate {
    background-image: url(../assets/msi-mpg-dark-bg.jpg);
    background-repeat: no-repeat;
    background-position: top center;
    background-size: 100%;
    padding-bottom: 80px;
}

.refresh-rate p {
    padding: 0 10%;
    margin-bottom: 40px;
}

.aspect-ratio {
    background-image: url(../assets/aspect-ratio-bg.png);
    background-repeat: no-repeat;
    background-position: top center;
    background-size: cover;
    padding: 80px 0;
}

.aspect-ratio span {
    opacity: .6;
    display: block;
    margin: 12px 0 24px;
}

.aspect-ratio-icons {
    margin-top: 24px;
}
.aspect-ratio-icons img {
    margin-right: 24px;
}

.aspect-ratio-icons img:last-child {
    margin-right: 0;
}

.hdr-mode {
    background-image: url(../assets/msi-mpg-dark-bg.jpg);
    background-repeat: no-repeat;
    background-position: top center;
    background-size: 100%;
    padding: 80px 0;
}

.hdr-mode p {
    margin-bottom: 40px;
}

.hdr-mode img {
    border: 1px solid rgba(29, 213, 230, 0.7);
}

.hdr-mode .row p {
    margin-bottom: 0;
}

.low-input-lag p {
    padding: 0 10%;
    margin-bottom: 40px;
}

.wide-color {
    background-image: url(../assets/msi-mpg-dark-bg.jpg);
    background-repeat: no-repeat;
    background-position: top center;
    background-size: 100%;
    padding: 80px 0;
}

.wide-color p {
    padding: 0 10%;
    margin-bottom: 40px;
}

.oled-care {
    background-image: url(../assets/msi-mpg-dark-bg.jpg);
    background-repeat: no-repeat;
    background-position: top center;
    background-size: 100%;
}

.oled-care .title {
    background-image: url(../assets/oled-care-banner.png);
    background-repeat: no-repeat;
    background-position: left center;
    background-size: auto 100%;
    height: 300px;
    display: flex;
    align-items: center;
    margin-bottom: 30px;
}

.oled-care .title h2 {
    text-align: right;
    padding-right: 15%;
}

.slick-wrapper-1 .slick-dots {
    top: 0;
}

.slick-wrapper-1 .slick-dots li {
    margin-right: 120px;
    margin-left: 0;
}

.slick-wrapper-1 .slick-dots li:last-child {
    margin-right: 0;
}

.slick-wrapper-1 .slick-dots .nav-button {
    font-size: 24px;
    font-weight: 400;
    color: #fff;
}

.slick-wrapper-1 .slick-dots .slick-active .nav-button {
    font-weight: 600;
    color: #e81f76;
}

.slide-wrapper {
    margin-top: 60px;
}

.slide-content h3 {
    padding-top: 30px;
}

.slide-content p {
    padding: 0 10%;
    margin-bottom: 40px;
}

.slide-content video {
    border-radius: 20px;
}

.privacy {
    background-image: url(../assets/msi-mpg-dark-bg.jpg);
    background-repeat: no-repeat;
    background-position: top center;
    background-size: 100%;
    padding: 80px 0;
}

.privacy p {
    padding: 0 10%;
    margin-bottom: 40px;
}

.ai .title {
    background-image: url(../assets/ai-banner.png);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: auto 100%;
    height: 300px;
    display: flex;
    align-items: center;
    margin-bottom: 30px;
}

.ai .title h2 {
    text-align: right;
    padding-right: 15%;
}

.slick-wrapper-2 .slick-dots {
    top: 0;
}

.slick-wrapper-2 .slick-dots li {
    margin-right: 120px;
    margin-left: 0;
}

.slick-wrapper-2 .slick-dots li:last-child {
    margin-right: 0;
}

.slick-wrapper-2 .slick-dots .nav-button {
    font-size: 24px;
    font-weight: 400;
    color: #fff;
}

.slick-wrapper-2 .slick-dots .slick-active .nav-button {
    font-weight: 600;
    color: #e81f76;
}

.g-sync {
    background-image: url(../assets/msi-mpg-dark-bg.jpg);
    background-repeat: no-repeat;
    background-position: top center;
    background-size: 100%;
    padding: 80px 0;
}

.g-sync p {
    margin-bottom: 40px;
}

.amd-free-sync p {
    margin-bottom: 40px;
}

.display-port {
    background-image: url(../assets/msi-mpg-dark-bg.jpg);
    background-repeat: no-repeat;
    background-position: top center;
    background-size: 100%;
    padding: 80px 0;
}

.display-port h3 {
    margin-top: 24px;
}

.display-port p {
    margin-bottom: 40px;
}

.qd-oled {
    background-image: url(../assets/msi-mpg-dark-bg.jpg);
    background-repeat: no-repeat;
    background-position: top center;
    background-size: 100%;
}

@keyframes shinemag {
    0% {
        text-shadow: 1px 1px 2px #ff006f, 0 0 1em #ff006f, 0 0 0.2em #ff006f;
    }

    50% {
        text-shadow: 1px 1px 0px #ff006f, 0 0 0em #ff006f, 0 0 0.1em #ff006f;
    }

    100% {
        text-shadow: 1px 1px 2px #ff006f, 0 0 1em #ff006f, 0 0 0.2em #ff006f;
    }
}

.qd-oled h2 {
    text-align: center;
    margin-bottom: 80px;
    animation: shinemag 2.5s 0.2s linear infinite;
}

.slick-wrapper-3 .slick-dots {
    top: 0;
}

.slick-wrapper-3 .slick-dots li {
    margin-right: 120px;
    margin-left: 0;
}

.slick-wrapper-3 .slick-dots li:last-child {
    margin-right: 0;
}

.slick-wrapper-3 .slick-dots .nav-button {
    font-size: 24px;
    font-weight: 400;
    color: #fff;
}

.slick-wrapper-3 .slick-dots .slick-active .nav-button {
    font-weight: 600;
    color: #e81f76;
}

.slide-icons {
    padding: 30px 0;
    margin: 0 auto;
}

.gaming .title {
    background-image: url(../assets/gaming-intelligence-bg.png);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: auto 100%;
    height: 300px;
    display: flex;
    align-items: center;
    margin-bottom: 30px;
}

.gaming .title h2 {
    text-align: right;
    padding-right: 15%;
}

.slick-wrapper-4 .slick-dots {
    top: 0;
}

.slick-wrapper-4 .slick-dots li {
    margin-right: 120px;
    margin-left: 0;
}

.slick-wrapper-4 .slick-dots li:last-child {
    margin-right: 0;
}

.slick-wrapper-4 .slick-dots .nav-button {
    font-size: 24px;
    font-weight: 400;
    color: #fff;
}

.slick-wrapper-4 .slick-dots .slick-active .nav-button {
    font-weight: 600;
    color: #e81f76;
}

.gaming {
    background-image: url(../assets/msi-mpg-dark-bg.jpg);
    background-repeat: no-repeat;
    background-position: top center;
    background-size: 100%;
    padding: 80px 0;
}

.console-mode p {
    margin-bottom: 40px;
}

.dynamic-lighting {
    background-image: url(../assets/msi-mpg-dark-bg.jpg);
    background-repeat: no-repeat;
    background-position: top center;
    background-size: 100%;
    padding: 80px 0;
}

.dynamic-lighting p {
    margin-bottom: 40px;
}

.connectivity {
    padding-bottom: 80px;
}

.connectivity .title {
    background-image: url(../assets/connectivity-bg.png);
    background-repeat: no-repeat;
    background-position: top center;
    background-size: auto 100%;
    height: 424px;
    display: flex;
    align-items: center;
}

.connectivity .title h2 {
    text-align: right;
    padding-right: 22%;
}

.connectivity h4 {
    color: #ff006f;
    margin-bottom: 60px;
}

.connectivity img {
    margin-bottom: 30px;
}

.connectivity .col-lg-7 img {
    border-radius: 20px;
    margin-bottom: 0;
}

.connectivity .col-lg-5 {
    background-color: #d0d0d0;
    color: #222;
    text-align: left;
    border-radius: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.connectivity ul {
    list-style: none;
    font-size: 24px;
    padding: 0;
    margin: 0;
}

.connectivity ul li {
    margin-bottom: 16px;
}

.connectivityul li:last-child {
    margin-bottom: 0;
}

.connectivity ul li span {
    font-weight: 600;
}


@media (max-width: 768px) {
    .main-wrapper h2 {
        font-size: 36px;
    }

    .main-wrapper h3 {
        font-size: 24px;
    }

    .order {
        order: -1 !important;
    }

    .hero {
        height: 440px;
    }

    .hero .product {
        max-width: 60%;
        margin-bottom: 24px;
    }

    .hero .title {
        padding-top: 0;
    }

    .mpg-text {
        padding: 40px 0;
    }

    .partners {
        padding: 40px 0;
    }

    .partners p {
        padding: 0;
    }

    .mpg {
        height: auto;
        padding: 40px 0;
    }

    .mpg {
        height: auto;
        padding: 40px 0;
    }

    .mpg p {
        border-image: linear-gradient(to right, transparent 0%, #e81f76 30%, #e81f76 70%, transparent 100%) 1;
        text-align: center;
        margin: 24px 0;
    }

    .mpg .col-lg-3 img {
        max-width: 60%;
        display: block;
        margin: 0 auto;
    }

    .mpg .col-lg-4 img {
        max-width: 90%;
        display: block;
        margin: 0 auto;
    }

    .key-features {
        padding: 40px 0;
    }

    .key-features-wrapper {
        display: flex;
        flex-direction: column;
    }

    .key-features-item .pd-item {
        padding: 10px;
    }

    .key-features-item .oledcare {
        padding: 10px;
    }

    .key-features-item .oledcare img {
        max-width: 60%;
    }

    .key-features-item .comprehensively {
        padding: 10px;
    }

    .key-features-item .comprehensively h3 {
        padding-left: 0;
    }

    .key-features-item .lag {
        padding: 10px
    }

    .key-features-item .display {
        padding: 10px; 
    }

    .key-features-item .warranty {
        padding: 10px;
    }

    .key-features .warranty h3 {
        padding-left: 0;
    }

    .video {
        padding: 40px 0;
    }

    .refresh-rate {
        padding-bottom: 40px;
    }

    .refresh-rate p {
        padding: 0;
        margin-bottom: 20px;
    }

    .aspect-ratio {
        padding: 40px 0;
    }

    .aspect-ratio span {
        margin: 12px 0 20px;
    }

    .hdr-mode {
        padding: 60px 0;
    }

    .hdr-mode p {
        margin-bottom: 20px;
    }

    .hdr-mode .col-lg-6 {
        margin-bottom: 20px;
    }

    .hdr-mode .col-lg-6:last-child {
        margin-bottom: 0;
    }

    .low-input-lag p {
        padding: 0;
        margin-bottom: 20px;
    }

    .wide-color {
        padding: 60px 0;
    }

    .wide-color p {
        padding: 0;
        margin-bottom: 20px;
    }

    .oled-care .title {
        height: 80px;
        margin-bottom: 0;
    }

    .slick-wrapper-1 {
        margin-top: 40px;
    }

    .slick-wrapper-1 .slick-dots .nav-button {
        font-size: 18px;
    }

    .slick-wrapper-1 .slick-dots li {
        display: flex;
        justify-content: center;
        padding: 0;
        margin-right: 0;
        margin-bottom: 8px;
    }

    .slick-wrapper-1 .slick-dots li:last-child {
        margin-bottom: 0;
    }

    .slick-wrapper-1 .slide-wrapper {
        padding-top: 40px;
    }

    .slide-content p {
        padding: 0;
        margin-bottom: 20px;
    }

    .privacy {
        padding: 40px 0;
    }

    .privacy p {
        padding: 0;
        margin-bottom: 20px;
    }

    .ai .title {
        height: 200px;
        margin-bottom: 0;
    }

    .ai .title h2 {
        padding-right: 0;
    }

    .slick-wrapper-2 .slick-dots .nav-button {
        font-size: 18px;
    }

    .slick-wrapper-2 .slick-dots li {
        display: flex;
        justify-content: center;
        padding: 0;
        margin-right: 0;
        margin-bottom: 8px;
    }

    .slick-wrapper-2 .slick-dots li:last-child {
        margin-bottom: 0;
    }

    .slick-wrapper-2 .slide-wrapper {
        padding-top: 40px;
    }

    .g-sync {
        padding: 40px 0;
    }

    .g-sync p {
        margin-bottom: 20px;
    }

    .amd-free-sync {
        padding: 40px 0;
    }

    .amd-free-sync p {
        padding: 0;
        margin-bottom: 20px;
    }

    .display-port {
        padding: 40px 0;
    }

    .display-port p {
        margin-bottom: 20px;
    }

    .qd-oled h2 {
        margin-bottom: 40px;
    }

    .slick-wrapper-3 .slick-dots .nav-button {
        font-size: 18px;
    }

    .slick-wrapper-3 .slick-dots li {
        display: flex;
        justify-content: center;
        padding: 0;
        margin-right: 0;
        margin-bottom: 8px;
    }

    .slick-wrapper-3 .slick-dots li:last-child {
        margin-bottom: 0;
    }

    .slick-wrapper-3 .slide-wrapper {
        padding-top: 20px;
    }

    .gaming {
        padding: 40px 0;
    }

    .gaming .title {
        height: 150px;
    }

    .gaming .title h2 {
        padding-right: 0;
    }

    .slick-wrapper-4 .slick-dots .nav-button {
        font-size: 18px;
    }

    .slick-wrapper-4 .slick-dots li {
        display: flex;
        justify-content: center;
        padding: 0;
        margin-right: 0;
        margin-bottom: 8px;
    }

    .slick-wrapper-4 .slick-dots li:last-child {
        margin-bottom: 0;
    }

    .slick-wrapper-4 .slide-wrapper {
        padding-top: 70px;
    }

    .console-mode p {
        margin-bottom: 40px;
    }

    .dynamic-lighting {
        padding: 40px 0;
    }

    .connectivity {
        padding-bottom: 0;
    }

    .connectivity .title {
        height: 150px;
    }

    .connectivity .title h2 {
        text-align: center;
        padding-right: 0;
    }

    .connectivity h4 {
        margin-bottom: 40px;
    }

    .connectivity ul {
        font-size: 18px;
    }

    .connectivity .col-lg-5 {
        margin-top: 30px;
        padding: 20px;
        border-radius: 0;
    }
}