/* Global styles */
body {
    margin: 0;
    overflow-x: hidden;
    color: black;
    height: 100%;
}

body p {
    font-size: clamp(1.5rem, 1.3vw, 4vw); 
    line-height: 1.5;
}

body h1 {
    font-size: clamp(2.5rem, 2.5vw, 6vw); 
}

body h3 {
    font-size: clamp(2rem, 1.8vw, 5vw); 
}

.section {
    display: flex;
    align-items: center;
    width: 100%;
}

/* section-1 */
.section-1 div {
    width: 44%;
}

.section-1 h1 {
    margin-top: -2%;
    position: relative;
    width: clamp(95%, 5vw, 2rem); 
}

.section-1 p {
    width: 120%;
}
.section-1 img {
    width: clamp(60vw, 10vw, 2rem); 
    height: auto;
}

/* section-2 */
.section-2 {
    flex-direction: column;
}

.section-2 h1 {
    margin-top: 0%;
    margin-bottom: 1%;
}

.section-2 img {
    width: 100%;
}



/* section-3 */
.section-3 {
    position: relative;
    height: auto;
    margin-top: 5%;
    flex-direction: row-reverse;
    text-align: end;
    justify-content: center;
}

.section-3 img {
    position: relative;
    height: 40vw;
    margin-left: 2%;
    margin-right: 2%;
}

.section-3 div {
    width: 100%;
    display: flex;
    flex-direction: column;
    text-align: left;
    margin-right: 2%;
}

.section-3 h1 {
    margin-top: -5%;
    margin-bottom: 1.5%;
}

/* section-4 */
.section-4 {
    position: relative;
    margin-left: 5%;
}

.section-4 h1 {
    width: 22ch;
}

#img_section4 {
    position: relative;
    width: 100%;
    padding-bottom: 56.25%; /* for a 16:9 aspect ratio */
    background-position: center;
    background-repeat: no-repeat;
    background-size: 70%;
}

.dot {
    position: absolute;
    /* Replace these with your actual dot styles */
    border-radius: 50%;
    width: 30px;
    height: 30px;
    background-color: #00000033;
    border: 3px solid #FFFF;
    transform: scale(0.8);
}

#info-box {
    position: absolute;
    border-radius: 20px;
    background-color: #FFFF;
    border: 0.5px solid #00000033;
    max-width: 30vw;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

#info-box img {
    margin-top: -2vw;
    transform: scale(0.8);
}

#info-box p {
    width: 90%;
    margin-top: -0.5vw;
    margin-bottom: 0.5vw;
}

#info-box h2 {
    margin-top: 5%;
}

.mobile-section_4 {
    display: none;
}

/* section-5 */
.section-5 {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    text-align: center;
}
  
#acessorio1, #acessorio2, #acessorio3, #acessorio4 {
    display: flex;
    flex-direction: column;
    margin-left: 2%;
    margin-right: 2%;
    flex: 1 0 15%;
    min-width: 100px;  /* ajuste conforme necessário */
    max-width: 20vw;  /* ajuste conforme necessário */
}

.product-detail-gallery {
    height: 18vw;
    width: auto;
    min-width: 200px;
}

