.header {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 1312px;
    height: 136px;
    border: 1px solid #000;
    margin-top: 10px;
}
body {
    display: flex;
    flex-direction: column; 
    justify-content: center;
    align-items: center;
    color: #000000;
    margin: 0;
}
.main {
    display: flex;
    flex-direction: row;
}
.left {
    border: 1px solid #000;
    width: 656px;
    height: 760px;
    position: relative;
}
.right {
    position: relative;
    border: 1px solid #000;
    width: 656px;
    height: 760px;
}
.text-primary {

    
    display: flex;
    flex-direction: column;
    width: 541px;
    height: 666px;  
    gap: 24px;
    position: absolute;
    left: 58px;
    top: 47px;
}
h1 {

    margin: 0;
    padding: 0;
    font-size: 48px;
    font-family: "lato", serif;
    font-weight: 400;
}
.parrafo p {
    width: 525px;
    height: 102px;
    font-size: 24px;
    margin: 0 ;
}
.title-primary {
    width: 541px;
    height: 122px;
    font-family: 'poppins' serif;
}
.bottom a {


    width: 301px;         
    height: 66px;         
    background: #000000;    
    border-radius: 40px;   
    padding:0px 16px;       
    color: #ffffff;
    font-size: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
}


.card {


    display: flex;
    justify-content: center;
    align-items: center;
    width: 458px;
    height: 264px;
    position: absolute;
    left: 58px;
    top: 452px;
    border: 1px solid#000;
    border-radius: 32px;
}
.content {
    display: flex;
    flex-direction: row;
    gap: 56px;
    width: 386px;
    height: 216px;
}
.content-left, .content-rigth {
    display: flex;
    flex-direction: column;
    gap: 24px;
    width: 165px;
    height: 216px;
}
.content-top h2,p{
    margin: 0;
}
.contentleft-left {
    position: relative;
}
.star {
    position: absolute;
    left: 39px;
    top: 13px;
}
.img-star {
    position: relative;
}
.p-star {

    position: absolute;
    left: 80px;
    top: 80px;
    width: 113px;
    height: 96px;
    font-size: 22px;
}
.imgleft {

    position: absolute;
    left: 0;
    top: 261px;
    width: 326px;
    height: 499px;
}
.contentleft-rigth {

    display: flex;
    flex-direction: column;
    gap: 25px;
    position: absolute;
    left: 350px;
}
.imgrigth1 {
    width: 306px;
    height: 237px;
}
.imgrigth2 {
    width: 306px;
    height: 237px;
}
.imgrigth3 {
    width: 306px;
    height: 237px;
}

 
@media (max-width: 768px) {
    .header, .left,  .right, .card, .text-primary, .title-primary,  
    .parrafo p, .bottom a, .content, .content-left,
    .content-rigth, .contentleft-rigth,
    .imgrigth1, .imgrigth2, 
    .imgrigth3, .imgleft {
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        position: relative !important;
        left: 0 !important;
        top: 0 !important;
    }

    img {
        max-width: 100%;
        height: auto;
    }

    .main {
        flex-direction: column;
        align-items: center;
    }

    h1 {
        font-size: 28px;
        text-align: center;
    }

    .parrafo p {
        font-size: 18px;
        text-align: center;
    }

    .bottom a {
        font-size: 18px;
    }
}