@font-face {
  font-family: SST;
  src: url(../font/SSTSTD-LIGHT.OTF);
}

@font-face {
  font-family: PS-MONT-CAPS;
  src: url(../font/PSMONTCAPSBOLD.OTF);
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  /* border: 1px solid purple; */
}

html,
body {
  width: 100vw;
  background-color: #000000;
  max-width:100%;
}

@media only screen and (min-width: 600px) {
  .container {
    height: 332vw;
    width: 100vw;
    max-width:100%;
    display: grid;
    grid-template-columns: 160fr 572fr 88fr 482fr 160fr;
    grid-template-rows: 238fr 128fr 191fr 42fr 599fr 242fr 204fr 179fr 382fr 52fr 215fr 408fr 226fr 452fr 243fr 411fr 600fr 100fr;
    grid-column-gap: 0px;
    grid-row-gap: 0px;
  }

  .section-1 {
    grid-area: 1 / 1 / 5 / 6;
    background-image: url("../img/PS5PRO_ARTE_PRINCIPAL_4K_RGB.png");
    background-size: 100% auto;
  }

  .section-2 {
    grid-area: 2 / 2 / 3 / 3;
    background-image: url("../img/Logo.png");
    background-size: 100% auto;
    background-repeat: no-repeat;
    background-position: center;
    z-index: 2;
  }

  .section-3 {
    grid-area: 4 / 1 / 5 / 3;
    display: flex;
    align-items: center;
    justify-content: flex-start;
  }

  .section-3 p {
    font-size: 1vw;
    padding-left: 2vw;
    font-family: SST;
    text-align: left;
    color: #ffffff;
  }

  .section-4 {
    grid-area: 5 / 1 / 6 / 6;
    background-color: #1d1d1d;
  }

  .section-4 video {
    width: 100%;
    height: 100%;
    border: none;
    object-fit: cover;
  }

  .section-5 {
    grid-area: 6 / 2 / 7 / 5;
    padding: 0 10%;
    display: flex;
    justify-content: center;
    align-items: flex-end;
  }

  .section-5 h1 {
    font-size: 4vw;
    font-family: PS-MONT-CAPS;
    text-align: center;
    color: #ffffff;
  }

  .section-6 {
    grid-area: 7 / 2 / 8 / 5;
    display: flex;
    justify-content: center;
    align-items: flex-start;
  }

  .section-6 p {
    font-size: 1.8vw;
    font-family: SST;
    text-align: center;
    color: #ffffff;
  }

  .section-7 {
    grid-area: 8 / 1 / 11 / 6;
    background-image: url("../img/ps5-pro-blue-rift-background.png");
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
  }

  .section-8 {
    grid-area: 9 / 2 / 10 / 3;
    background-image: url("../img/super-resolucao\ 1.png");
    background-size: auto 100% ;
    background-repeat: no-repeat;
    background-position: center;
  }

  .section-9 {
    grid-area: 9 / 4 / 10 / 5;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    align-items: flex-start;
    text-align: left;
    color: #ffffff;
    font-family: SST;
  }

  .section-9 h3 {
    font-size: 2.7vw;
    font-weight: 700;
  }

  .section-9 p {
    font-size: 1.7vw;
    font-weight: 400;
  }

  .section-9 img {
    width: 4.3vw;
  }

  .section-10 {
    grid-area: 11 / 1 / 13 / 6;
    background-image: url("../img/ps5-pro-purple-rift-background.png");
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
  }

  .section-11 {
    grid-area: 12 / 2 / 13 / 3;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    align-items: flex-start;
    text-align: left;
    color: #ffffff;
    font-family: SST;
    padding-right: 16%;
  }

  .section-11 h3 {
    font-size: 2.7vw;
    font-weight: 700;
  }

  .section-11 p {
    font-size: 1.7vw;
    font-weight: 400;
  }

  .section-11 img {
    width: 5vw;
  }

  .section-12 {
    grid-area: 12 / 3 / 13 / 5;
    background-image: url("../img/super-resolucao\ 2.png");
    background-size: 100% auto;
    background-repeat: no-repeat;
    background-position: center;
  }

  .section-13 {
    grid-area: 13 / 1 / 15 / 6;
    background-image: url("../img/ps5-pro-orange-rift-background.png");
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
  }

  .section-14 {
    grid-area: 14 / 2 / 15 / 3;
    background-image: url("../img/super-resolucao\ 1\ \(1\).png");
    background-size: 100% auto;
    background-repeat: no-repeat;
    background-position: center;
  }

  .section-15 {
    grid-area: 14 / 4 / 15 / 5;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    align-items: flex-start;
    text-align: left;
    color: #ffffff;
    font-family: SST;
  }

  .section-15 h3 {
    font-size: 2.7vw;
    font-weight: 700;
  }

  .section-15 p {
    font-size: 1.7vw;
    font-weight: 400;
  }

  .section-15 img {
    width: 5vw;
  }

  .section-16 {
    grid-area: 15 / 2 / 16 / 5;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    align-items: center;
    padding: 0 1%;
  }

  .section-16 h1 {
    font-size: 3.8vw;
    font-family: PS-MONT-CAPS;
    text-align: center;
    color: #ffffff;
    margin: 0;
  }

  .section-16 p {
    font-size: 1.8vw;
    font-family: SST;
    text-align: center;
    color: #ffffff;
    margin: 0;
  }

  .section-17-a {
    grid-area: 16 / 2 / 17 / 3;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    align-items: flex-start;
    text-align: left;
    color: #ffffff;
    font-family: SST;
  }

  .section-17-a img {
    width: 5vw;
  }

  .section-17-a h3 {
    font-size: 2.5vw;
    font-weight: 700;
  }

  .section-17-a p {
    font-size: 1.7vw;
    font-weight: 400;
  }

  .section-17-b {
    grid-area: 16 / 2 / 17 / 3;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    padding: 5%;
    color: #ffffff;
    font-family: SST;
    text-align: center;
    font-size: 1.4vw;
  }

  .section-17-b img {
    height: 5vw;
    margin-bottom: 5%;
  }

  .section-17-b h3 {
    margin-bottom: 5%;
    padding: 0 30%;
    font-size: 1.8vw;
  }

  .section-17-b p {
    font-size: 1.6vw;
    line-height: 1.5;
  }

  .section-17-c {
    grid-area: 16 / 2 / 17 / 5;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 5%;
    color: #ffffff;
    font-family: SST;
    text-align: center;
    font-size: 1.4vw;
    padding: 0 18%;
  }

  .section-17-c img {
    height: 4.4vw;
    margin-bottom: 5%;
  }

  .section-17-c h3 {
    margin-bottom: 5%;
    font-size: 2.5vw;
  }

  
  .section-17-c p {
    font-size: 1.6vw;
    line-height: 1.5;
  }

  .section-18-a {
    grid-area: 16 / 4 / 17 / 5;
    background-image: url("../img/super-resolucao.png");
    background-size: 100% auto;
    background-repeat: no-repeat;
    background-position: center;
  }

  .section-18-b {
    grid-area: 16 / 3 / 17 / 5;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    padding: 5%;
    color: #ffffff;
    font-family: SST;
    text-align: center;
    font-size: 1.4vw;
  }

  .section-18-b img {
    height: 5vw;
    margin-bottom: 5%;
  }

  .section-18-b h3 {
    margin-bottom: 5%;
    padding: 0 20%;
  }

  .section-18-b p {
    font-size: 1.6vw;
    line-height: 1.5;
  }

  .section-18-c {
    grid-area: 16 / 3 / 17 / 5;
    z-index: -2;
  }

  .section-19-a {
    grid-area: 17 / 1 / 19 / 5;
    background-image: url("../img/ps5-pro-dualsense-background.png");
    background-size: 80% auto;
    background-repeat: no-repeat;
    background-position: left center;
    z-index: 2;
  }

  .section-19-b {
    grid-area: 17 / 2 / 19 / 3;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    padding: 5%;
    color: #ffffff;
    font-family: SST;
    text-align: center;
    z-index: 5;
    font-size: 1.4vw;
  }

  .section-19-b img {
    margin-top: 18%;
    height: 4vw;
    margin-bottom: 5%;
  }

  .section-19-b h3 {
    margin-bottom: 5%;
  }

  .section-19-b p {
    font-size: 1.6vw;
    line-height: 1.5;
}

  .section-20 {
    grid-area: 17 / 1 / 19 / 6;
    background-image: url("../img/bg-dual\ 1.png");
    background-size: cover;
    background-repeat: no-repeat;
    background-position: left center;
  }

  .section-21-a {
    grid-area: 17 / 4 / 19 / 5;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    text-align: left;
    color: #ffffff;
    font-family: SST;
  }

  .section-21-a h3 {
    font-size: 2.5vw;
    font-weight: 700;
    padding-bottom: 1.6vw;
    z-index: 3;
  }

  .section-21-a p {
    font-size: 1.7vw;
    font-weight: 400;
    line-height: 1.5;
    z-index: 3;
  }

  .section-21-b {
    grid-area: 17 / 3 / 19 / 5;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    padding: 5%;
    color: #ffffff;
    font-family: SST;
    text-align: center;
    z-index: 5;
    font-size: 1.4vw;
  }

  .section-21-b p {
    font-size: 1.6vw;
    line-height: 1.5;
}

  .section-21-b img {
    margin-top: 15%;
    height: 5vw;
    margin-bottom: 5%;
  }

  .section-21-b h3 {
    margin-bottom: 5%;
  }

  .section-22 {
    grid-area: 18 / 1 / 19 / 6;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    text-align: left;
    color: #ffffff;
    font-family: SST;
    padding: 0 5%;
    line-height: 1.5;
    z-index: 3;
  }

  .section-22 p {
    font-size: 0.8vw;
    font-weight: 400;
  }

  .section-23 {
    grid-area: 16 / 1 / 17 / 2;
  }

  .section-24 {
    grid-area: 16 / 5 / 17 / 6;
  }

  .section-25 {
    grid-area: 17 / 1 / 18 / 2;
  }

  .section-26 {
    grid-area: 17 / 5 / 18 / 6;
  }

  .section-23,
  .section-24,
  .section-25,
  .section-26 {
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 5;
  }

  .section-9-mobile, .section-10-mobile, .section-11-mobile, .section-12-mobile, .section-13-mobile, .section-14-mobile {
    display: none;
  }
}

@media only screen and (max-width: 600px) {
  .container {
    height: 750vw;
    width: 100vw;
    max-width:100%;
    display: grid;
    grid-template-columns: 67fr 156fr 307fr 67fr;
    grid-template-rows: 144fr 68fr 199fr 39fr 450fr 195fr 202fr 67fr 215fr 31fr 94fr 156fr 22fr 212fr 35fr 83fr 20fr 135fr 32fr 212fr 32fr 78fr 20fr 194fr 33fr 99fr 24fr 46fr 40fr 20fr 22fr 112fr 20fr 22fr 28fr 26fr 20fr 163fr 101fr 47fr 40fr 55fr 28fr 154fr 46fr 79fr 160fr 80fr;
    grid-column-gap: 0px;
    grid-row-gap: 0px;
  }

  .section-1 {
    grid-area: 1 / 1 / 5 / 5;
    background-image: url("../img/hero\ 1.png");
    background-size: auto 100%;
    background-repeat: no-repeat;
  }

  .section-2 {
    grid-area: 2 / 3 / 3 / 4;
    background-image: url("../img/Logo.png");
    background-size: 100% auto;
    background-repeat: no-repeat;
    background-position: center;
    z-index: 2;
  }

  .section-4 {
    grid-area: 5 / 1 / 6 / 5;
    background-color: #1d1d1d;
  }

  .section-4 video {
    width: 100%;
    height: 100%;
    border: none;
    object-fit: cover;
  }

  .section-5 {
    grid-area: 6 / 2 / 7 / 4;
    display: flex;
    justify-content: center;
    align-items: flex-end;
  }

  .section-5 h1 {
    font-size: 7vw;
    font-family: PS-MONT-CAPS;
    text-align: center;
    color: #ffffff;
  }

  .section-6 {
    grid-area: 7 / 2 / 8 / 4;
    display: flex;
    justify-content: center;
    align-items: flex-start;
  }

  .section-6 p {
    font-size: 3.8vw;
    font-family: SST;
    text-align: center;
    color: #ffffff;
    line-height: 1.5;
  }

  .section-7 {
    grid-area: 8 / 1 / 11 / 5;
    background-image: url("../img/ps5-pro-blue-rift-background.png");
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
  }

  .section-8{
    grid-area: 9 / 2 / 10/ 4;
    background-image: url("../img/PS5PRO_KEYART_PSSR_4K_RGB\ copy\ 2\ 1.png");
    background-size: 100% auto ;
    background-repeat: no-repeat;
    background-position: center;
  }

  .section-9-mobile{
    grid-area: 11 / 2 / 12 / 4;
    display: flex;
    flex-direction: row;
    color: #ffffff;
    align-items: center;
    justify-content: space-evenly;
  }

  .section-9-mobile img{
    width: 15%;
  }

  .section-9-mobile h3{
    width: 80%;
    font-size: 4.6vw;
    font-family: SST;
    text-align: center;
    color: #ffffff;
    line-height: 1.5;
    font-weight: 700;
  }

  .section-10-mobile{
    grid-area: 12 / 2 / 13 / 4;
    display: flex;
    color: #ffffff;
    align-items: center;
    justify-content: center;
  }

  .section-10-mobile p{
    font-size: 4vw;
    font-family: SST;
    text-align: center;
    color: #ffffff;
    line-height: 1.5;
  }

  .section-11-mobile{
    grid-area: 16 / 2 / 17 / 4;
    display: flex;
    flex-direction: row;
    color: #ffffff;
    align-items: center;
    justify-content: space-evenly;
  }

  .section-11-mobile img{
    width: 15%;
    margin-right: -4%;
  }

  .section-11-mobile h3{
    width: 80%;
    font-size: 4.6vw;
    font-family: SST;
    text-align: center;
    color: #ffffff;
    line-height: 1.5;
    font-weight: 700;
  }


  .section-12 {
    grid-area: 14 / 2 / 15/ 4;
    background-image: url("../img/PS5PRO_KEYART_OCP_4K_RGB\ copy\ 2\ 1.png");
    background-size: 100% auto  ;
    background-repeat: no-repeat;
    background-position: center;
  }

  .section-12-mobile {
    grid-area: 24 / 2 / 25 / 4;
    font-size: 4vw;
    font-family: SST;
    text-align: center;
    color: #ffffff;
    line-height: 1.5;
  }

  .section-13-mobile{
    grid-area: 22 / 2 / 23 / 4;
    display: flex;
    flex-direction: row;
    color: #ffffff;
    align-items: center;
    justify-content: space-evenly;
  }

  .section-13-mobile img{
    width: 15%;
    margin-right: -2%;
  }

  .section-13-mobile h3{
    width: 80%;
    font-size: 4.6vw;
    font-family: SST;
    text-align: center;
    color: #ffffff;
    line-height: 1.5;
    font-weight: 700;
  }

  .section-14 {
    grid-area: 20 / 2 / 21 / 4;
    background-image: url("../img/PS5PRO_KEYART_RAY_4K_RGB\ copy\ 2\ 1.png");
    background-size: 100% auto ;
    background-repeat: no-repeat;
    background-position: center;
  }

  .section-14-mobile {
    grid-area: 18 / 2 / 19 / 4;
  }

  .section-14-mobile p{
    font-size: 4vw;
    font-family: SST;
    text-align: center;
    color: #ffffff;
    line-height: 1.5;
  }

  .section-16{
    grid-area: 26 / 1 / 27 / 5;
    font-size: 3.6vw;
    font-family: PS-MONT-CAPS;
    text-align: center;
    color: #ffffff;
    padding: 0 5%;
  }

  .section-16 h1{
    margin: 0px;
  }

  .section-16 p{
    display: none;
  }

  .section-17-a {
    grid-area: 28 / 2 / 40 / 4;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    color: #ffffff;
    font-family: SST; 
  }

  .section-17-a img {
    width: 12vw;
    margin-bottom: 5vw;
  }

  .section-17-a h3 {
    font-size: 4vw;
    font-weight: 700;
    text-align: center;
    margin-bottom: 5vw;
  }

  .section-17-a p {
    font-size: 4vw;
    font-weight: 400;
    text-align: center;
    line-height: 1.5;
  }
  

  .section-17-b  {
    grid-area: 29 / 2 / 33 / 4;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    color: #ffffff;
    font-family: SST;
  }

  .section-17-b img {
    width: 8vw;
    margin-bottom: 5vw;
    display: none;
  }

  .section-17-b h3 {
    font-size: 4.8vw;
    font-weight: 700;
    text-align: center;
    margin-bottom: 5vw;

  }

  .section-17-b h3::before {
    content: url('../icon/PS5PRO - 2TB.png');
    display: inline-block; 
    margin-right: 2vw;
    vertical-align: middle; /* Isso não é mais necessário */
  }

  .section-17-b p {
    font-size: 3.6vw;
    font-weight: 400;
    text-align: center;
  }

  .section-18-b {
    grid-area: 34 / 2 / 41 / 4;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    color: #ffffff;
    font-family: SST;
  }

  .section-18-b img {
    width: 10vw;
    display: none;
  } 

  .section-18-b h3 {
    font-size: 4vw;
    font-weight: 700;
    text-align: center; /* Alinha o texto à esquerda */
    margin-bottom: 5vw;
    display: flex; /* Usar flexbox */
    align-items: flex-start; 
    padding: 0 10%;
  }

  .section-18-b h3::before {
    content: url('../icon/PS5PRO\ -\ Conectividade.png');
    display: inline-block; 
    margin-right: 2vw;
    align-self: flex-start; /* Garante que o ícone se alinha ao topo */
    margin-top: -3%;
  }

  .section-18-b p {
    font-size: 3.6vw;
    font-weight: 400;
    text-align: center;
  }

    
  .section-17-c {
    grid-area: 28 / 2 / 40 / 4;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    color: #ffffff;
    font-family: SST; 
  }

  .section-17-c img {
    width: 12vw;
    margin-bottom: 5vw;
  }

  .section-17-c h3 {
    font-size: 4vw;
    font-weight: 700;
    text-align: center;
    margin-bottom: 5vw;
  }

  .section-17-c p {
    font-size: 4vw;
    font-weight: 400;
    text-align: center;
    line-height: 1.5;
  }

  .section-18-a {
    display: none !important;
  }

  .section-19-a {
    grid-area: 44 / 1 / 49 / 5;
    background-image: url("../img/ps5-pro-dualsense-background-m.png");
    background-size: auto 100%  ;
    background-repeat: no-repeat;
    background-position: bottom center;
    z-index: 2;
  }

  
  .section-19-b {
    grid-area: 41 / 2 / 46 / 4;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    color: #ffffff;
    font-family: SST;
    z-index: 10;
  }

  
  .section-19-b h3 {
    font-size: 4.6vw;
    font-weight: 700;
    text-align: center;
    margin-bottom: 3%;
    margin-top: 3%;
  }

  .section-19-b p {
    font-size: 3.6vw;
    font-weight: 400;
    text-align: center;
  }

  .section-20 {
    grid-area: 45 / 1 / 49 / 5;
    background-image: url("../img/bg-dual\ 1.png");
    background-size: cover;
    background-repeat: no-repeat;
    background-position: left center;
  }

  .section-21-a {
    grid-area: 42 / 2 / 45 / 4;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    text-align: center;
    color: #ffffff;
    font-family: SST;
    z-index: 10;
  }

  .section-21-a h3 {
    font-size: 5vw;
    font-weight: 700;
    text-align: center;
    margin-bottom: 6%;
  }

  .section-21-a p {
    font-size: 4vw;
    font-weight: 400;
    text-align: center;
  }

  .section-21-b {
    grid-area: 46 / 2 / 48 / 4;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    color: #ffffff;
    font-family: SST;
    z-index: 10;
  }

  .section-21-b h3 {
    font-size: 4.6vw;
    font-weight: 700;
    text-align: center;
    margin-bottom: 3%;
    margin-top: 3%;
  }

  .section-21-b p {
    font-size: 3.6vw;
    font-weight: 400;
    text-align: center;
  }

  .section-22 {
    grid-area: 48 / 1 / 49 / 5;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    text-align: center;
    color: #ffffff;
    font-family: SST;
    padding: 0 5%;
    line-height: 1.5;
    z-index: 3;
  }

  .section-22 p {
    font-size: 1vw;
    font-weight: 400;
  }

  .section-23 {
    grid-area: 28 / 1 / 41 / 2;
  }

  .section-24 {
    grid-area: 28 / 4 /41 / 5;
  }

  .section-25 {
    grid-area: 41 / 1 / 48 / 2;
  }

  .section-26 {
    grid-area: 41 / 4 / 48 / 5;
  }

  .section-23,
  .section-24,
  .section-25,
  .section-26 {
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 30;
  }

  .section-3,
  .section-9,
  .section-10,
  .section-11,
  .section-13,
  .section-15,
  .section-19-b,
  .section-21-b {
    display: none;
  }
}

.section-carroussel {
  display: none; /* Todas as seções começam escondidas */
}

.section-17-a,
.section-18-a,
.section-19-a,
.section-21-a {
  display: flex; /* Grupo 1 e Grupo 2 começam com A visível */
}