/* General */
@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;700;900&family=Work+Sans:wght@100;300;400;700&display=swap");

* {
  margin: 0;
  padding: 0;
}

a {
  text-decoration: none;
}

p {
  font-family: "Work Sans", sans-serif;
}

h1,
h2,
h3,
h4 {
  font-family: "Montserrat", sans-serif;
}

/* 360 ------------------------- */
@media (min-width: 360px) {
  footer a{
    font-family: 'Work Sans';
    color: white;
    font-size: 12px;
  }
  .modal{
    display: none;
  }
  .promoflipa{
    display: none;
  }
  .newsletter{
    display: none;
  }
  .container-body {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-template-rows: auto;
    gap: 0px 20px;
    width: 100%;
    grid-template-areas:
      "navbar navbar navbar navbar"
      "banner banner banner banner"
      "main main main main"
      "footer footer footer footer";
  }

  /* -------------------------------------------- */
  main {
    grid-area: main;
  }



  .text_span {
    font-weight: 700;
    font-family: "Work Sans";
  }

  header {
    grid-area: navbar;
  }

  /* -------------------------------------------- */
  .banner {
    grid-area: banner;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 40px 16px;
    gap: 20px;
    width: auto;
    height: 578px;
    background-image: url(../images/banner_360.webp);
    background-size: cover;
  }
.banner_title_text_container{
  display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
padding: 0px;
gap: 32px;

width: 328px;
height: 299px;

filter: drop-shadow(0px 4px 6px rgba(250, 250, 250, 0.25));

}

.banner_title_container{

  width: 328px;
  height: 150px;
  
}
.banner_title_container h1{
  text-transform: uppercase;  
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 900;
  font-size: 64px;
  line-height: 78px;
  text-align: center;
  
  color: #FFFFFD;
}
.banner_text_container{
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  padding: 0px;
  
  width: 328px;
  height: 52px;
  
}
.banner_text_container p{
  width: 328px;
  height: 52px;
  font-family: 'Work Sans';
  font-style: normal;
  font-weight: 700;
  font-size: 16px;
  line-height: 26px;
  text-align: center;
  color: #FFFFFD;
}
  /* -------------------------------------------- */
  .aboutus {
    /*   grid-area: aboutus; */
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    padding: 60px 32px;
    justify-content: center;
    width: auto;
    height: auto;
  }

  .aboutus_container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    padding: 0px;
    gap: 40px;

    width: auto;
    height: auto;
    align-items: center;

  }

  .aboutus .aboutus_container_title {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 8px 16px;
    width: 265px;
    height: 30px;
    background: #fde801;
    box-shadow: 8px 8px 8px rgba(0, 0, 0, 0.25);
    transform: rotate(-2deg);
    margin-bottom: 40px;
  }

  .aboutus_container_title h2 {
    font-family: "Montserrat", sans-serif;
    display: contents;
    left: 0%;
    right: 8.33%;
    top: 29.88%;
    bottom: -23.92%;
    font-style: normal;
    font-weight: 700;
    font-size: 24px;
    line-height: 29px;
    letter-spacing: 0.05em;
    color: #0e0e0e;
    transform: rotate(-2deg);
    width: 264px;
    height: 30.84px;
  }

  .aboutus_container_text {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 0px;
    gap: 24px;

    width: 100%;
    height: auto;
  }

  .aboutus_first_text {
    width: 100%;
    height: auto;
    font-family: "Work Sans";
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    line-height: 26px;
    color: #000000;
  }

  .aboutus_second_text {
    width: 100%;
    height: auto;
    font-family: "Work Sans";
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    line-height: 26px;
    color: #000000;
  }

  .aboutus_button {
    text-align: -webkit-center;
  }

  .aboutus button {
    display: flex;
    align-items: center;
    justify-content: center;
    align-items: center;
    padding: 14px 48px;
    width: 279px;
    height: 52px;
    background: #0e0e0e;
    box-shadow: 8px 8px 8px rgba(0, 0, 0, 0.25);
    border-radius: 50px;
    border: none;
    margin-top: 32px;
  }

  .aboutus button a {
    width: 183px;
    height: auto;
    font-family: "Montserrat";
    font-style: normal;
    font-weight: 700;
    font-size: 16px;
    line-height: 24px;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: #fffffd;

  }

  .aboutus button a:hover {
    color: #FDE801;
  }

  .aboutus img {
    margin-top: 40px;
  }


  /* -------------------------------------------- */
  .services {
    /*  grid-area: services; */
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 60px 16px;
    gap: 32px;
    width: auto;
    height: auto;
    left: 0px;
    top: 1876px;
    background: #fde801;
  }

  .services_title_container {
    margin-bottom: 32px;
    width: 327.06px;
    height: 53.6px;
    left: -0.77px;
    top: 15.21px;
    background: #fffffd;
    box-shadow: 8px 8px 8px rgba(0, 0, 0, 0.25);
    transform: rotate(-1deg);
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .services_title_container h2 {
    font-family: "Montserrat";
    font-style: normal;
    font-weight: 700;
    font-size: 24px;
    line-height: 29px;
    display: flex;
    align-items: center;
    text-align: center;

    color: #000000;
    text-transform: uppercase;
    transform: rotate(-1deg);
  }

  .services_text_container {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 0px;
    gap: 32px;

    width: auto;
    height: auto;
  }

  .services_first_text {
    width: auto;
    height: auto;
    font-family: "Work Sans";
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    line-height: 26px;
    color: #0e0e0e;
  }

  .services_second_text {
    width: auto;
    height: auto;
    font-family: "Work Sans";
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    line-height: 26px;
    color: #0e0e0e;
  }

  .services_text_container button {
    display: flex;
    align-items: center;
    justify-content: center;
    align-items: center;
    padding: 10px 48px;
    width: auto;
    height: auto;
    background: #0e0e0e;
    box-shadow: 8px 8px 8px rgba(0, 0, 0, 0.25);
    border-radius: 50px;
    border: none;
    align-self: center;
  }

  .services button a:hover {
    color: #FDE801;
  }

  .services button a {
    width: 143px;
    height: 24px;
    font-family: "Montserrat";
    font-style: normal;
    font-weight: 700;
    font-size: 16px;
    line-height: 24px;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: #fffffd;
  }

  .services_img_container {
    display: flex;
    justify-content: center;
  }

  .services img {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 0px;
    margin-top: 48px;
  }

 

  .portfolio {
    /*  grid-area: portfolio; */
    background: black;
    flex-direction: column;
    display: flex;
    align-items: center;
    padding: 120px 0px;
    gap: 80px;
    width: auto;
    height: auto;
    left: 0px;
    top: 2879px;
  }

  iframe {
    width: 93vw;
    height: 100vw;
  }

  .portfolio p {
    width: 328px;
    height: 24px;
    font-family: "Work Sans";
    font-style: normal;
    font-weight: 700;
    font-size: 20px;
    line-height: 24px;
    text-align: center;
    color: #fffffd;
    text-transform: uppercase;
  }

  .portfolio button {
    border: none;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 14px 48px;
    width: 233px;
    height: 52px;
    background: #fde801;
    box-shadow: 8px 8px 8px rgba(0, 0, 0, 0.25);
    border-radius: 50px;
  }

  .portfolio button a {
    width: 148px;
    height: 24px;

    font-family: "Montserrat";
    font-style: normal;
    font-weight: 700;
    font-size: 16px;
    line-height: 24px;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: #000;
  }

  .portfolio button:hover {
    background-color: white;
  }

  /* -------------------------------------------- */
  .contact {
    /*   grid-area: contact; */
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 60px 16px;
    gap: 40px;
    width: auto;
    height: auto;
    left: 0px;
    background: #fffffd;

  }

  .contact_container {
    align-self: center;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 0px;
    gap: 40px;
    width: auto;
    height: auto;
  }

  .contact_title_container {
    flex-direction: column;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 8px 16px;
    width: 289px;
    height: 26px;
    background: #0e0e0e;
    box-shadow: 8px 8px 8px rgba(0, 0, 0, 0.25);
    transform: rotate(-2deg);
  }

  .contact_title_text_container {
    align-items: center;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 0px;
    gap: 44px;
    width: auto;
    height: auto;
  }

  .contact_title_container h2 {
    text-transform: uppercase;
    left: 0%;
    right: 1.6%;
    top: 18.9%;
    bottom: -27.71%;
    display: contents;
    font-family: "Montserrat";
    font-style: normal;
    font-weight: 700;
    font-size: 24px;
    line-height: 29px;
    color: #fffffd;
    transform: rotate(-2deg);
  }

  .contact_text_container {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 0px;
    gap: 44px;

    width: auto;
    height: auto;
  }

  .contact_first_text {
    width: auto;
    height: auto;

    font-family: "Work Sans";
    font-style: normal;
    font-weight: 700;
    font-size: 16px;
    line-height: 26px;
    color: #0e0e0e;
  }

  .contact_second_text {
    width: auto;
    height: auto;
    font-family: "Work Sans";
    font-style: normal;
    font-weight: 300;
    font-size: 16px;
    line-height: 26px;
    color: #0e0e0e;
  }

  .contact_third_text {
    width: auto;
    height: auto;
    font-family: "Work Sans";
    font-style: normal;
    font-weight: 300;
    font-size: 16px;
    line-height: 26px;
    color: #0e0e0e;
  }

  .contact button {
    align-self: center;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 14px 48px;
    width: 262px;
    height: 52px;
    background: #0e0e0e;
    box-shadow: 8px 8px 8px rgba(0, 0, 0, 0.25);
    border-radius: 50px;
    border: none;
  }

  .contact button a {
    display: contents;
    width: 162px;
    height: 24px;
    font-family: "Montserrat";
    font-style: normal;
    font-weight: 700;
    font-size: 16px;
    line-height: 24px;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: #fffffd;
  }

  .contact button a:hover {
    color: #FDE801;
  }

  .contact_img_container {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 0px;
    align-self: center;
  }

  .contact img {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 0px;
  }

  /* -------------------------------------------- */
  .footer {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    grid-area: footer;
    gap: 24px;
    width: auto;
    height: 464px;
    left: 0px;
    top: 0px;
    background: #0e0e0e;
  }

  .footer_container {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 40px 16px;
    gap: 24px;
    width: 328px;
    height: 384px;
    left: 0px;
    top: 0px;
  }

  .footer_banner_brokenleaf {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 0px;
    height: 70px;
    position: absolute;
    width: 360px;
    left: calc(50% - 360px / 2);
    top: 0%;
    bottom: 0%;
    left: 0px;
    top: 4693px;
  }

  .footer_logo_redes_container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    padding: 0px;
    gap: 16px;
    width: 328px;
    height: 144px;
  }

  .footer_logo {
    width: 299px;
    height: 82px;
  }

  .footer_redes_container {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding: 10px 0px;
    gap: 20px;
    width: 153px;
    height: 4px;
  }

  .footer_contact_container {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 0px;
    gap: 16px;

    width: 328px;
    height: 144px;
  }

  .footer_contact_text {
    width: 81px;
    height: 24px;
    font-family: "Work Sans";
    font-style: normal;
    font-weight: 700;
    font-size: 14px;
    line-height: 24px;
    letter-spacing: 0.05em;
    color: #fffffd;
    text-transform: uppercase;
  }

  .footer ul {
    display: flex;
    flex-direction: column;
    padding: 0px;
    gap: 16px;
    width: 328px;
    height: 24px;
  }

  .footer ul li {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    padding: 0px;
    gap: 8px;
    width: 302px;
    height: 24px;
  }

  .footer li p {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    padding: 0px;

    width: 302px;
    height: 24px;
    font-family: "Work Sans";
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    line-height: 24px;
    color: #fffffd;
  }

  .footer_legal_container {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 0px;

    width: 328px;
    height: 48px;
  }

  .footer_legal_container p {
    width: 328px;
    height: 24px;
    font-family: "Work Sans";
    font-style: normal;
    font-weight: 400;
    font-size: 12px;
    line-height: 24px;
    text-align: center;
    color: #fffffd;
    justify-self: center;
  }

  .footer_legal_container p a {
    color: white;
  }
}

/* 360 -------------END------------ */
/* 720 ------------------------- */
@media (min-width: 720px) {
  footer a{
    font-family: 'Work Sans';
    color: white;
    font-size: 12px;
  }
  .modal{
    display: none;
  }
  .promoflipa{
    display: none;
  }
  .newsletter{
    display: none;
  }
  .containe-body {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
    grid-template-rows: 1fr 1fr 1fr 1fr;
    gap: 0px 0px;
    grid-auto-flow: row;
    grid-template-areas:
      "navbar navbar navbar navbar navbar navbar navbar navbar"
      "banner banner banner banner banner banner banner banner"
      "main main main main main main main main"
      "footer footer footer footer footer footer footer footer";
  }

  .header {
    grid-area: navbar;
  }

  /* -------- */

  .banner {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 80px 32px;
    gap: 42px;
    background: url(../images/banner_720.webp);
    width: auto;
    height: 226px;
    background-size: cover;

  }
  .banner_title_text_container{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 0px;
    gap: 16px;
    
    width: 656px;
    height: 98px;
    
    filter: drop-shadow(0px 4px 6px rgba(250, 250, 250, 0.25));
  }
  .banner_title_container{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 10px;
    gap: 10px;
    
    width: 656px;
    height: 58px;
    align-items: center;

  }
  .banner_title_container h1{
   
font-size: 48px;
line-height: 59px;
text-align: center;
color: #FFFFFD;
  }
  /* _------------ */
  .main {
    width: auto;
    height: auto;
    left: 0px;
    top: 430px;
    align-items: center;
  }

  .aboutus {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    padding: 30px 0px;
    width: auto;
    height: 1088px;
    left: 0px;
    top: 0px;
    background: #fffffd;

  }

  .aboutus_container {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 30px 32px;
    width: 656px;
    height: 993px;
  }

  .aboutus .aboutus_container_title {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 8px 16px;
    width: 387px;
    height: 44px;
    background: #FDE801;
    box-shadow: 8px 8px 8px rgba(0, 0, 0, 0.25);
    transform: rotate(-2deg);
  }

  .aboutus_container_title h2 {
    width: 373.27px;
    height: 44px;
    font-size: 36px;
    display: flex;
    transform: none;
    align-items: center;
    align-self: center;
  }

  .aboutus_container_text {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0px;
    gap: 40px;

    width: 656px;
    height: auto;
  }

  .aboutus_first_text {
    width: 656px;
    height: 130px;
    font-family: "Work Sans";
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    line-height: 26px;
    color: #000000;
  }

  .aboutus_second_text {
    width: 656px;
    height: 156px;
    font-family: "Work Sans";
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    line-height: 26px;
    color: #000000;
  }

  .aboutus_button {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 0px;
    width: 656px;
    height: 52px;
  }

  .aboutus button {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
    padding: 14px 48px;
    width: 277px;
    height: 52px;
    background: #0E0E0E;
    box-shadow: 8px 8px 8px rgba(0, 0, 0, 0.25);
    border-radius: 50px;

  }

  .aboutus_img_container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 0px;

    width: 656px;
    height: 437px;
  }

  .aboutus_img_container img {
    width: 407px;
    height: 334px;
  }

  /* ---------------------------- */
  .services {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 60px 32px;
    gap: 48px;
    width: auto;
    height: 850px;
    left: 1px;
    top: 1121px;
    background: #fde801;
  }

  .services_title_text_container {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 0px;
    gap: 32px;

    width: auto;
    height: auto;
  }

  .services_title_container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 0px;
    isolation: isolate;
    background-color: #fff;
    width: 393.68px;
    height: 53.6px;
  }

  .services_title_container h2 {
    font-family: "Montserrat";
    font-style: normal;
    font-weight: 700;
    font-size: 36px;
    line-height: 44px;
    display: flex;
    align-items: center;
    text-align: center;
    color: #000000;
    transform: rotate(-1deg);
  }

  .services_text_container {
    width: auto;
    height: auto;
  }

  .services_first_text {
    width: auto;
    height: auto;
    font-family: "Work Sans";
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    line-height: 26px;
  }

  .services_second_text {
    width: auto;
    height: auto;

    font-family: "Work Sans";
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    line-height: 26px;
  }

  .services_img_container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 0px;

    width: 655px;
    height: 312px;
  }

  .services_img_container img {
    width: 392px;
    height: 312px;
  }

  /* ------------ */
  .contact {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 0px;
    gap: 40px;
    padding: 60px 32px;
    width: auto;
    height: 769.25px;
  }

  .contact_title_text_container {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 0px;
    gap: 44px;

    width: 656px;
    height: 429.25px;
  }

  .contact_title_container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 8px 16px;
    width: 289px;
    height: 44px;
    background: #0e0e0e;
    box-shadow: 8px 8px 8px rgba(0, 0, 0, 0.25);
    transform: rotate(-2deg);
  }

  .contact_title_container h2 {
    left: 0%;
    right: 1.17%;
    top: 16.98%;
    bottom: -16.82%;
    font-family: "Montserrat";
    font-style: normal;
    font-weight: 700;
    font-size: 36px;
    line-height: 44px;
    color: #fffffd;
    transform: rotate(-2deg);
  }

  .contact_text_container {
    width: 656px;
    height: 218px;
  }

  .contact_first_text {
    width: 656px;
    height: 52px;

    font-family: "Work Sans";
    font-style: normal;
    font-weight: 300;
    font-size: 16px;
    line-height: 26px;
    color: #0e0e0e;
  }

  .contact_second_text {
    width: 656px;
    height: 52px;

    font-family: "Work Sans";
    font-style: normal;
    font-weight: 300;
    font-size: 16px;
    line-height: 26px;
    color: #0e0e0e;
    margin-bottom: 44px;
  }

  .contact_third_text {
    width: 656px;
    height: 52px;
    font-family: "Work Sans";
    font-style: normal;
    font-weight: 300;
    font-size: 16px;
    line-height: 26px;
    color: #0e0e0e;
  }

  .contact_img_container {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 0px;
    width: 656px;
    height: 300px;
  }

  .contact_img_container img {
    width: 390px;
    height: 300px;
  }

  /* ----------------- */
  .footer {
    grid-area: footer;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 80px 24px;
    gap: 24px;
    width: auto;
    height: 304px;
    left: 2px;
    top: 63px;
    background: #0e0e0e;
  }

  .footer_logo_contact_container {
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 0px;
    gap: 24px;

    width: 672px;
    height: 232px;
  }

  .footer_logo_redes_container {
    align-items: center;
  }

  .footer_legal_container {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0px;

    width: 672px;
    height: 48px;
  }
}

/* 720 -------------END------------ */

/* 1024 ------------------------- */

@media (min-width: 1024px) {
  footer a{
    font-family: 'Work Sans';
    color: white;
    font-size: 12px;
  }
  .modal{
    display: none;
  }
  .promoflipa{

    display: none;
  }
  .newsletter{
    display: none;
  }
  .container-body {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
    grid-template-rows: auto;
    gap: 0px 20px;
    grid-auto-flow: row;
    grid-template-areas:
      "navbar navbar navbar navbar navbar navbar navbar navbar navbar navbar navbar navbar"
      "banner banner banner banner banner banner banner banner banner banner banner banner"
      "main main main main main main main main main main main main"
      "footer footer footer footer footer footer footer footer footer footer footer footer";
  }

  .header {
    grid-area: navbar;
  }

  /* --------------- */
  .banner {
    grid-area: banner;
   background: url(../images/banner_1024.webp);
   background-size: cover;
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
   padding: 0px 108px;
   gap: 42px;
   width: auto;
   height: 634px;
   
  }
.banner_title_text_container{
  display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
padding: 0px;
gap: 24px;
width: 808px;
height: 122px;
filter: drop-shadow(0px 4px 6px rgba(250, 250, 250, 0.25));
}
.banner_title_container {
  width: 808px;
height: 74px;

}
.banner_title_container h1{
font-size: 64px;
line-height: 78px;
text-align: center;
color: #FFFFFD;
}
.banner_text_container{
  display: flex;
flex-direction: row;
align-items: flex-start;
padding: 0px;

width: 808px;
height: 24px;
}
.banner_text_container p{
  width: 808px;
height: 24px;
font-size: 16px;
line-height: 24px;
text-align: center;
color: #FFFFFD;
}

  /* --------------- */
  .main {
    grid-area: main;
    width: auto;
    height: auto;
    align-items: center;
  }

  /* ------------ */
  .aboutus {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 120px 114px;

    width: auto;
    height: 966px;
    left: 0px;
    top: 750px;

    /* Blanco */

    background: #FFFFFD;
  }

  .aboutus_container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    padding: 0px;
    gap: 40px;

    width: 796px;
    height: 941.6px;
    align-self: center;
  }

  .aboutus_title_text_container {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0px;
    gap: 40px;

    width: 796px;
    height: auto;
  }

  .aboutus .aboutus_container_title {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 8px 16px;
    transform: rotate(-2deg);
    width: 387px;
    height: 44px;
    background: #FDE801;
    box-shadow: 8px 8px 8px rgba(0, 0, 0, 0.25);

    align-self: flex-start;
    margin-bottom: 40px;
  }

  .aboutus_container_title h2 {
    left: 0%;
    right: 2.75%;
    top: 29.61%;
    bottom: -29.61%;
    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 700;
    font-size: 36px;
    line-height: 44px;
    letter-spacing: 0.05em;
    color: #0E0E0E;
    transform: none;
  }

  .aboutus_container_text {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 0px;
    gap: 24px;

    width: 796px;
    height: 258px;

  }

  .aboutus_first_text {
    width: 796px;
    height: 104px;
    font-family: 'Work Sans';
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    line-height: 26px;
    color: #000000;
  }

  .aboutus_second_text {
    width: 796px;
    height: 130px;
    font-family: 'Work Sans';
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    line-height: 26px;
    color: #000000;
  }

  .aboutus button {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
    padding: 14px 48px;
    width: 277px;
    height: 52px;
    background: #0E0E0E;
    box-shadow: 8px 8px 8px rgba(0, 0, 0, 0.25);
    border-radius: 50px;
  }

  .aboutus button a {
    width: 182px;
    height: 24px;
    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 700;
    font-size: 16px;
    line-height: 24px;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: #FFFFFD;
  }

  .aboutus_img_container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 0px;
    width: 796px;
    height: 437px;
  }

  .aboutus_img_container img {
    width: 468px;
    height: 384px;
  }

  /* ----------- */
  .services {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 120px 108px;
    gap: 24px;
    width: auto;
    height: 546px;
    background: #FDE801;

  }

  .services_content_container {

    display: flex;
    flex-direction: row-reverse;
    align-items: center;
    padding: 0px;
    gap: 24px;
    width: auto;
    height: auto;
  }


  .services_img_container {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 0px;
    gap: 10px;

    width: 402px;
    height: 320px;
  }

  .services_img_container img {
    width: 402px;
    height: 320px;
  }

  .services_title_text_container {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 0px;
    gap: 32px;

    width: auto;
    height: auto;

  }

  .services_title_container {
    width: 380.87px;
    height: 53.6px;
    left: -0.77px;
    top: 15.21px;
    background: #FFFFFD;
    box-shadow: 8px 8px 8px rgba(0, 0, 0, 0.25);
    transform: rotate(-1deg);

  }

  .services_title_container h2 {
    left: 23.12%;
    right: 23.32%;
    top: 17%;
    bottom: 0.91%;
    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 700;
    font-size: 36px;
    line-height: 44px;
    display: flex;
    align-items: center;
    text-align: center;
    color: #000000;
    transform: rotate(-1deg);
  }

  .services_text_container {
    width: auto;
    height: auto;
  }

  .services_first_text {
    width: auto;
    height: auto;
    font-family: 'Work Sans';
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    line-height: 26px;
    color: #0E0E0E;
  }

  .services_second_text {
    width: auto;
    height: auto;
    font-family: 'Work Sans';
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    line-height: 26px;
    color: #0E0E0E;
  }

  .services button {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
    padding: 14px 48px;
    width: 235px;
    height: 52px;
    background: #0E0E0E;
    box-shadow: 8px 8px 8px rgba(0, 0, 0, 0.25);
    border-radius: 50px;
  }

  .services button a {
    width: 140px;
    height: 24px;

    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 700;
    font-size: 16px;
    line-height: 24px;
    /* identical to box height, or 150% */

    letter-spacing: 0.05em;
    text-transform: uppercase;

    /* Blanco */

    color: #FFFFFD;
  }

  .contact {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 120px 108px;
    gap: 56px;
    width: auto;
    height: 529px;
    background: #FFFFFD;
  }

  .contact_container {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    padding: 0px;
    gap: 24px;

    width: 808px;
    height: 529px;
  }

  .contact_title_text_container {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 0px;
    gap: 44px;

    width: 391px;
    height: 529px;
  }

  .contact_title_container {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 8px 16px;
    width: 214px;
    height: 44px;
    background: #0E0E0E;
    box-shadow: 8px 8px 8px rgba(0, 0, 0, 0.25);
    transform: rotate(-2deg);

  }

  .contact_title_container h2 {
    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 700;
    font-size: 36px;
    line-height: 44px;
    color: #FFFFFD;
  }

  .contact_text_container {
    width: 391px;
    height: 270px;
    display: flex;
    gap: 44px;
    flex-direction: column;
  }

  .contact_first_text {
    width: 391px;
    height: 26px;
    font-weight: 700;
    font-size: 16px;
    line-height: 26px;
  }

  .contact_second_text {
    width: 391px;
    height: 78px;

    font-weight: 300;
    font-size: 16px;
    line-height: 26px;
    margin-bottom: 0;
  }

  .contact_third_text {
    width: 391px;
    height: 78px;
    font-weight: 300;
    font-size: 16px;
    line-height: 26px;
  }

  .contact button {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 14px 48px;
    width: 258px;
    height: 52px;
    background: #0E0E0E;
    box-shadow: 8px 8px 8px rgba(0, 0, 0, 0.25);
    border-radius: 50px;
    align-self: flex-start;
  }

  .contact button a {
    width: 161px;
    height: 24px;
    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 700;
    font-size: 16px;
    line-height: 24px;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: #FFFFFD;
  }

  .contact_img_container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 0px;
    width: 393px;
    height: 529px;
  }

  .contact_img_container img {
    width: 383px;
    height: 294px;
  }

  /* --------------- */
  .footer {
    grid-area: footer;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 0px;
    gap: 10px;
    width: auto;
    height: auto;
  }

  .footer_container {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 80px 140px;
    gap: 24px;
    width: auto;
    height: 300px;
    background: #0E0E0E;
    align-self: center;

  }

  .footer_logo_contact_container {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding: 0px;
    gap: 68px;
    align-self: center;
    width: 744px;
    height: 228.88px;
  }

  .footer_legal_container {
    align-self: center;
  }
}

/* 1024 -------------END------------ */

/* 1336 ------------------------- */

@media (min-width: 1336px) {
  footer a{
    font-family: 'Work Sans';
    color: white;
    font-size: 12px;
  }
  .container-body {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
    grid-template-rows: auto;
    gap: 0px 20px;
    grid-auto-flow: row;
    grid-template-areas:
      "navbar navbar navbar navbar navbar navbar navbar navbar navbar navbar navbar navbar"
      "banner banner banner banner banner banner banner banner banner banner banner banner"
      "main main main main main main main main main main main main"
      "footer footer footer footer footer footer footer footer footer footer footer footer";
  }

  .header {
    grid-area: navbar;
  }
.modal{
  display: flex;
flex-direction: column;
align-items: flex-end;
justify-self: center;
background: url(../images/Promo-Wordpress.png);
width: 1196px;
height: 572px;
position: absolute;
z-index: 3;
background-position: center;
background-repeat: no-repeat;
background-size: cover;

position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
 
  padding: 20px;
  display: none;
}
.modal button{
  display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
padding: 14px 60px;
border: none;
width: 350px;
height: 70px;
background: #FDE801;
box-shadow: 8px 8px 8px rgba(0, 0, 0, 0.25);
border-radius: 50px;
margin-top: auto;

}  
.modal button:hover{
  background-color: white;
}
.modal button a{
  width: 139px;
height: 24px;
font-family: 'Montserrat';
font-style: normal;
font-weight: 700;
font-size: 20px;
line-height: 24px;
letter-spacing: 0.05em;
text-transform: uppercase;
color: #0E0E0E;
}
.close{
  display: flex;
flex-direction: row;
align-items: flex-start;
padding: 10px;
gap: 10px;

width: 52px;
height: 52px;
margin-left: 1145px;
 
}



/*#fondo-gris {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.55);
  opacity: 0.5;
  z-index: 0;
}*/



.banner {
    grid-area: banner;
   background: url(../images/banner_1336.webp);
   background-size: cover;
   display: flex;
   flex-direction: row;
   align-items: center;
   padding: 80px 70px;
   gap: 124px;
   width: auto;
   height: 661px;
   left: 0px;
   top: 0px;
   
  }
.banner_title_text_container{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  padding: 0px;
  gap: 32px;
  width: 1196px;
  height: 161px;
  filter: drop-shadow(0px 4px 6px rgba(250, 250, 250, 0.25));
}
.banner_title_container {
  width: 1196px;
  height: 105px;

}
.banner_title_container h1{
  font-size: 96px;
  line-height: 117px;
  text-align: center;
  color: #FFFFFD;
}
.banner_text_container{
  width: 1196px;
height: 24px;
}
.banner_text_container p{
  width: 1196px;
height: 24px;
font-size: 24px;
line-height: 24px;
text-align: center;
color: #FFFFFD;
}


  /* MAIN */
  .main {
    grid-area: main;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 0px;
    width: auto;
    height: auto;
    align-items: center;
  }
.promoflipa{

  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 40px 0px;
  gap: 100px;
  
  width: 100%;
  height: 1217px;
  background: #EC1B84;
}
.promoflipa_content{
  display: flex;
flex-direction: column;
align-items: center;
padding: 0px;
gap: 32px;

width: 1168px;
height: 152px;

}
.promoflipa h2{
width: 393.68px;
height: 53.6px;
background: #FFFFFD;
box-shadow: 8px 8px 8px rgba(0, 0, 0, 0.25);
display: flex;
align-items: center;
justify-content: center;
font-family: 'Montserrat';
font-style: normal;
font-weight: 700;
font-size: 36px;
line-height: 44px;
}
.promoflipa p{
  width: auto;
height: 24px;
font-family: 'Work Sans';
font-style: normal;
font-weight: 400;
font-size: 18px;
line-height: 24px;
letter-spacing: 0.05em;
color: #000000;
display: flex;
flex-direction: row;
align-items: flex-start;
padding: 8px 12px;
width: 1168px;
height: 80px;
background: #FFFFFD;
box-shadow: 8px 8px 8px rgba(0, 0, 0, 0.25);
align-items: center;
justify-content: center;
}
.promoflipa_card_container{
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: flex-start;
  padding: 0px;
  gap: 20px;
  
  width: auto;
  height: auto;
}
.promoflipa_card_social{
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
padding: 24px;
gap: 60px;
width: 337px;
height: 830px;
background: #FDE801;
}
.promoflipa_card_social button:hover{
  color: #FDE801;
}
.promoflipa_card_social h2{
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 700;
  font-size: 36px;
  line-height: 44px;
  display: flex;
  align-items: center;
  text-align: center;
  color: #FFFFFF;
  width: 329px;
height: 54px;
background: #000000;
box-shadow: 8px 8px 8px rgba(0, 0, 0, 0.25);
}
.promoflipa_card_social p{
width: 337px;
height: 100px;
font-family: 'Work Sans';
font-style: normal;
font-weight: 400;
font-size: 18px;
line-height: 32px;
color: #0E0E0E;
box-shadow: none;
background: #FDE801;
}
.promoflipa_card{
  display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
padding: 24px;
gap: 60px;
width: 337px;
height: 830px;
background: #FFFFFD;

}
.promoflipa_card button:hover{
  color: #FDE801;
}
.promoflipa_card h2{
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 700;
  font-size: 36px;
  line-height: 44px;
  display: flex;
  align-items: center;
  text-align: center;
  color: #000000;
  width: 329px;
height: 54px;
background: #FDE801;
box-shadow: 8px 8px 8px rgba(0, 0, 0, 0.25);
}
.promoflipa_card_social ul{
  display: flex;
  flex-direction: column;
  align-items: flex-start;
 
  gap: 10px;
  
  width: 321px;
  height: 100px;
  
}
.promoflipa_card_social ul li{
  width: auto;
height: auto;
font-family: 'Work Sans';
font-style: normal;
font-weight: 400;
font-size: 18px;
line-height: 32px;
color: #0E0E0E;
}
.promoflipa_card ul{
  display: flex;
  flex-direction: column;
  align-items: flex-start;
 
  gap: 10px;
  
  width: 321px;
  height: 100px;
  
}
.promoflipa_card ul li{
  width: auto;
height: auto;
font-family: 'Work Sans';
font-style: normal;
font-weight: 400;
font-size: 18px;
line-height: 32px;
color: #0E0E0E;
}
.promoflipa_card p{
  width: 337px;
height: 100px;
font-family: 'Work Sans';
font-style: normal;
font-weight: 400;
font-size: 18px;
line-height: 32px;
color: #0E0E0E;
box-shadow: none;
}
.promoflipa_price_container{
  display: flex;
flex-direction: column;
align-items: flex-start;
padding: 0px;
gap: 8px;

width: 337px;
height: 100px;
}

.promoflipa_button{
  display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
padding: 14px 60px;
width: 350px;
height: 70px;
background: #0E0E0E;
box-shadow: 8px 8px 8px rgba(0, 0, 0, 0.25);
border-radius: 50px;
border: none;
color: white;
}
.promoflipa_button:hover{
  color: #FDE801;
}
.promoflipa_button:hover a{
  color: #FDE801;
}
.promoflipa_button a{
  width: 139px;
height: 24px;
font-family: 'Montserrat';
font-style: normal;
font-weight: 700;
font-size: 20px;
line-height: 24px;
letter-spacing: 0.05em;
text-transform: uppercase;
color: #FFFFFD;
}
.promoflipa_duration{
  width: 337px;
height: 32px;
font-family: 'Work Sans';
font-style: normal;
font-weight: 700;
font-size: 16px;
line-height: 32px;
text-align: center;
color: #0E0E0E;
}
.promoflipa .promoflipa_price{
  width: 337px;
  height: 32px;
  
  font-family: 'Work Sans';
  font-style: normal;
  font-weight: 700;
  font-size: 64px;
  line-height: 32px;
  text-align: center;
  color: #0E0E0E;
}
/* ------------------------------------------------------------ */
  .aboutus {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 180px 170px;
    gap: 24px;
    width: auto;

    height: 614px;
  }

  .aboutus_container {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 24px;
    width: 996px;
    height: 614px;
  }

  .aboutus_container_title {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 8px 16px;
    width: 419.27px;
    height: 60px;
    box-shadow: 8px 8px 8px rgba(0, 0, 0, 0.25);
    transform: rotate(-2deg);
  }

  .aboutus_container_title h2 {
    font-size: 36px;
    line-height: 44px;
    letter-spacing: 0.05em;
    transform: rotate(0deg);
  }

  .aboutus_title_text_container {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0px;
    gap: 40px;

    width: 487px;
    height: 614px;

  }

  .aboutus_container_text {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 0px;
    gap: 24px;
    width: 487px;
    height: 388px;
    margin-bottom: 47px;
  }

  .aboutus_first_text {
    width: 487px;
    height: 196px;

    font-size: 18px;
    line-height: 28px;
  }

  .aboutus_second_text {
    width: 487px;
    height: 252px;
    font-size: 18px;

  }

  .aboutus_img_container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 0px;
    width: 489px;
    height: 614px;
  }

  .aboutus_img_container img {
    width: 461px;
    height: 378px;
  }

  .aboutus_button {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
    padding: 0px;
    width: 996px;
    height: 52px;
    padding-left: 521px;
    padding-top: 48px;
  }

  .aboutus button {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
    padding: 14px 48px;
    width: 283px;
    height: 52px;
    box-shadow: 8px 8px 8px rgba(0, 0, 0, 0.25);
    border-radius: 50px;
  }

  iframe {
    height: 40vh;
    width: 94vw;
  }

  .portfolio p {
    width: 342px;
    height: 24px;
    font-family: "Work Sans";
    font-style: normal;
    font-weight: 700;
    font-size: 24px;
    line-height: 24px;
    text-align: center;
    color: #fffffd;
    text-transform: uppercase;
    margin-bottom: 34px;
  }

  .portfolio button {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 14px 48px;

    width: 284px;
    height: 52px;
  }

  .portfolio button a {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    padding: 0px;

    width: 148px;
    height: 24px;
  }


  /* services */
  .services {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 180px 171px;
    gap: 20px;
    width: auto;
    height: 547px;
  }

  .services_content_container {
    display: flex;
    flex-direction: row-reverse;
    justify-content: space-between;
    align-items: center;
    padding: 0px;
    gap: 20px;
    width: auto;
    height: auto;
  }

  .services_title_text_container {

    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 0px;
    gap: 32px;

    width: auto;
    height: auto;

  }

  .services_title_container {
    width: 393.68px;
    height: 53.6px;
    background: #FFFFFD;
    box-shadow: 8px 8px 8px rgba(0, 0, 0, 0.25);
    transform: rotate(-1deg);
  }

  .services_title_container h2 {

    font-size: 36px;
    line-height: 44px;
    display: flex;
    align-items: center;
    text-align: center;
    color: #000000;
    transform: rotate(-1deg);
  }

  .services_text_container {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 8px 0px;

    width: auto;
    height: auto;

  }

  .services_first_text {
    width: auto;
    height: auto;
    font-size: 18px;
    line-height: 26px;
  }

  .services_second_text {
    width: auto;
    height: auto;
    font-size: 18px;
    line-height: 26px;
  }

  .services_img_container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 0px;
    width: 487px;
    height: 547px;
  }

  .services_img_container img {
    width: 462px;
    height: 368px;
  }

  .services button {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
    padding: 14px 48px;
    width: 284px;
    height: 52px;
    box-shadow: 8px 8px 8px rgba(0, 0, 0, 0.25);
    border-radius: 50px;
  }

  /* Portfolio */
  .portfolio {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    padding: 120px 0px;
    gap: 13px;

    width: 100vw;
    height: auto;
  }

  /* contact */
  .contact {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 180px 170px;
    gap: 56px;
    width: 66.5vw;
    height: 547px;
  }

  .contact_container {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    padding: 0px;
    gap: 20px;
    width: 996px;
    height: 409px;
  }

  .contact_title_text_container {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 0px;
    gap: 44px;

    width: 486px;
    height: 409px;
  }

  .contact_title_container {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 8px 16px;
    width: 246.5px;
    height: 60.07px;
    box-shadow: 8px 8px 8px rgba(0, 0, 0, 0.25);
    transform: rotate(-2deg);
  }

  .contact_title_container h2 {
    display: flex;
    align-self: center;
    justify-content: center;
    transform: none;
  }

  .contact_text_container {

    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 0px;
    gap: 44px;

    width: 486px;
    height: 409px;
  }

  .contact_img_container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 0px;

    width: 490px;
    height: 409px;

  }

  .contact_img_container img {
    width: 490px;
    height: 377px;
  }

  .contact button {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 14px 48px;
    width: 284px;
    height: 52px;
    box-shadow: 8px 8px 8px rgba(0, 0, 0, 0.25);
    border-radius: 50px;
  }


/* newsletter */
.newsletter{
  display: flex;
flex-direction: row;
align-items: center;
padding:  0px;
gap: 122px;
width: 100%;
height: 427px;
background: #FDE801;
}
.news_img{
  width: 455px;
height: auto;
}
.news_content{
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 0px;
  gap: 40px;
  
  width: 689px;
  height: 308px;
  

}
.news_text{
  display: flex;
flex-direction: column;
align-items: flex-start;
padding: 0px;
gap: 24px;

width: 689px;
height: auto;
}
.news_text h2{
  width: 393.68px;
  height: 53.6px;
  background: #FFFFFD;
  box-shadow: 8px 8px 8px rgba(0, 0, 0, 0.25);
font-family: 'Montserrat';
font-style: normal;
font-weight: 700;
font-size: 36px;
line-height: 44px;
display: flex;
align-items: center;
text-align: center;
color: #000000;
transform: rotate(-1deg);
justify-content: center;
}
.news_text p{
  width: 689px;
height: 24px;
font-family: 'Work Sans';
font-style: normal;
font-weight: 300;
font-size: 18px;
line-height: 24px;
letter-spacing: 0.05em;
color: #000000;
margin-top: 24px;
}
.newsletter .input {
  display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
padding: 4px 8px 4px 20px;
gap: 135px;

width: 661px;
height: 44px;
background: #FFFFFD;
border-radius: 50px;
border:none;
}
.newsletter input[type=text]{
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  padding: 4px 8px 4px 20px;
  gap: 135px;
  
  width: 661px;
  height: 44px;
  background: #FFFFFD;
  border-radius: 50px;
  border:none;
}
.newsletter input::placeholder{
  width: 122px;
height: 24px;
font-family: 'Work Sans';
font-style: normal;
font-weight: 300;
font-size: 16px;
line-height: 24px;
letter-spacing: 0.05em;
color: #000000;
}
.label_text{
  width: 642px;
height: 48px;

font-family: 'Work Sans';
font-style: normal;
font-weight: 300;
font-size: 14px;
line-height: 24px;
letter-spacing: 0.05em;
color: #000000;

}




  /* FOOTER */
  .footer {
    grid-area: footer;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 0px;

    width: auto;
    height: 460.88px;
    left: 0px;
    top: 4240px;

  }
footer a{
  font-family: 'Work Sans';
  color: white;
  font-size: 12px;
}
  .footer_logo_contact_container {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding: 0px;
    gap: 68px;

    width: 1056px;
    height: 228.88px;
  }


}


/* 1336 -------------END------------ */

@media (min-width: 1920px) {
  footer a{
    font-family: 'Work Sans';
    color: white;
    font-size: 12px;
  }
  .container-body {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
    grid-template-rows: auto;

    gap: 0px 20px;
    grid-auto-flow: row;
    grid-template-areas:
      "navbar navbar navbar navbar navbar navbar navbar navbar navbar navbar navbar navbar"
      "banner banner banner banner banner banner banner banner banner banner banner banner"
      "main main main main main main main main main main main main"
      "footer footer footer footer footer footer footer footer footer footer footer footer";
  }

.modal{
  display: flex;
flex-direction: column;
align-items: flex-end;
padding: 24px 32px;
gap: 542px;

width: 1480px;
height: 707px;
}
.close{
  margin-left: 291px;
}




  .header {
    grid-area: navbar;
  }

  .banner {
    grid-area: banner;
    background-image: url(../images/banner_1920.png);
    background-size: cover;
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 80px 220px;
    gap: 124px;
    width:auto;
    height: 1024px;
    left: 0px;
    top: 56px;
  }
.banner_title_text_container{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 0px;
  gap: 32px;
  
  width: 1480px;
  height: 218px;

}

.banner_title_container{

  width: 1480px;
height: 152px;

  
}
.banner_title_container h1{
  
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 900;
  font-size: 120px;
  line-height: 146px;
  text-align: center;
  color: #FFFFFD;
}
.banner_text_container{
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  padding: 0px;
  
  width: 1480px;
  height: 34px;
  
  
}
.banner_text_container p{
  width: 1480px;
height: 24px;
font-family: 'Work Sans';
font-style: normal;
font-weight: 700;
font-size: 30px;
line-height: 24px;
text-align: center;
color: #FFFFFD;

}

  .main {
    grid-area: main;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 0px;
    width: auto;
    height: auto;
    align-items: center;

  }

  .aboutus {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 60px 220px;
    gap: 100px;
    width: auto;
    height: 929px;
    align-self: center;
  }

  .aboutus .aboutus_title_text_container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 0px;
    gap: 40px;

    width: 730px;
    height: 526px;

  }

  .aboutus .aboutus_container_title {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 8px 16px;

    width: 419.27px;
    height: 60px;
    align-self: center;
    box-shadow: 8px 8px 8px rgba(0, 0, 0, 0.25);
    transform: rotate(-2deg);
  }

  .aboutus .aboutus_container_title h2 {
    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 700;
    font-size: 36px;
    line-height: 44px;
    letter-spacing: 0.05em;
    transform: rotate(0deg);
  }

  .aboutus .aboutus_container_text {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 0px;
    gap: 24px;

    width: 730px;
    height: 384px;
  }

  .aboutus_first_text {
    width: 730px;
    height: 150px;

    font-family: 'Work Sans';
    font-style: normal;
    font-weight: 400;
    font-size: 20px;
    line-height: 30px;
  }

  .aboutus_second_text {

    width: 730px;
    height: 210px;

    font-family: 'Work Sans';
    font-style: normal;
    font-weight: 400;
    font-size: 20px;
    line-height: 30px;
  }

  .aboutus_button {

    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
    padding: 0px;

    width: 1480px;
    height: 52px;
  }

  .aboutus button {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 14px 48px;

    width: 280px;
    height: 52px;
    box-shadow: 8px 8px 8px rgba(0, 0, 0, 0.25);
    border-radius: 50px;
  }

  .aboutus_img_container {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 0px;
    gap: 10px;

    width: 641px;
    height: 526px;
  }

  .aboutus_img_container img {

    width: 641px;
    height: 526px;

  }

  .services {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 120px 220px;
    gap: 32px;

    width: auto;
    height: 840px;
  }

  .services_content_container {
    width: auto;
    height: auto;
  }

  .services_img_container {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 0px;
    gap: 10px;

    width: 706px;
    height: 562px;
  }

  .services_img_container img {
    width: 706px;
    height: 562px;
  }

  .services_title_text_container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 0px;
    gap: 32px;

    width: auto;
    height: auto;
  }

  .services_title_container {
    width: 393.68px;
    height: 53.6px;
    box-shadow: 8px 8px 8px rgba(0, 0, 0, 0.25);
    transform: rotate(-1deg);
  }

  .services_text_container {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 0px;
    gap: 32px;

    width: auto;
    height: auto;
  }

  .services_first_text {

    width: auto;
    height: auto;

    font-family: 'Work Sans';
    font-style: normal;
    font-weight: 400;
    font-size: 20px;
    line-height: 30px;

  }

  .services_second_text {
    width: auto;
    height: auto;

    font-family: 'Work Sans';
    font-style: normal;
    font-weight: 400;
    font-size: 20px;
    line-height: 30px;
  }

  .portfolio {
    width: 100vw;
    height: auto;
  }

  .contact {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 120px 220px;
    gap: 56px;

    width: auto;
    height: auto;
  }

  .contact_container {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    padding: 0px;
    gap: 24px;

    width: 1480px;
    height: 840px;
  }

  .contact_text_container {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 0px;
    gap: 44px;

    width: 730px;
    height: 238px;

  }

  .contact_title_text_container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    padding: 0px;
    gap: 44px;

    width: 730px;
    height: 840px;

  }

  .contact_first_text {
    width: 730px;
    height: 30px;

    font-family: 'Work Sans';
    font-style: normal;
    font-weight: 700;
    font-size: 20px;
    line-height: 30px;

  }

  .contact_second_text {
    width: 730px;
    height: 60px;

    font-family: 'Work Sans';
    font-style: normal;
    font-weight: 300;
    font-size: 20px;
    line-height: 30px;
    color: #0E0E0E;
  }

  .contact_third_text {
    width: 730px;
    height: 60px;

    font-family: 'Work Sans';
    font-style: normal;
    font-weight: 300;
    font-size: 20px;
    line-height: 30px;
  }

  .contact button {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 14px 48px;

    width: 280px;
    height: 52px;
    box-shadow: 8px 8px 8px rgba(0, 0, 0, 0.25);
    border-radius: 50px;
  }

  .contact_img_container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 0px;

    width: 726px;
    height: 840px;
  }

  .contact_img_container img {
    width: 698px;
    height: 536px;
  }
  .newsletter{
    display: flex;
flex-direction: row;
align-items: center;
padding: 0px;
gap: 149px;
width: 100%;
height: 630px;
background: #FDE801;
  }
  .news_img{
    width: 671.07px;
height: auto;
  }
  .news_content{
    display: flex;
flex-direction: column;
padding: 0px;
gap: 60px;

width: 1029.93px;
height: 304px;
    
  
  }
  .news_text{
    display: flex;
flex-direction: column;
align-items: flex-start;
padding: 0px;
gap: 24px;

width: 1029.93px;
height: 128px;

  }
  .news_text h2{
    width: 393.68px;
    height: 53.6px;
    background: #FFFFFD;
    box-shadow: 8px 8px 8px rgba(0, 0, 0, 0.25);
    transform: rotate(-1deg);
    font-family: 'Montserrat';
font-style: normal;
font-weight: 700;
font-size: 36px;
line-height: 44px;
display: flex;
align-items: center;
text-align: center;
color: #000000;

  }
  .news_text p{
    width: 1029.93px;
    height: 24px;
    font-family: 'Work Sans';
    font-style: normal;
    font-weight: 300;
    font-size: 24px;
    line-height: 24px;
    letter-spacing: 0.05em;
    color: #000000;
  }
  .newsletter .input {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding: 4px 8px 4px 20px;
    gap: 135px;
    width: 727px;
    height: 44px;
    background: #FFFFFD;
    border-radius: 50px;
  border:none;
  }
  .newsletter input[type=text]{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding: 4px 8px 4px 20px;
    gap: 135px;
    
    width: 661px;
    height: 44px;
    background: #FFFFFD;
    border-radius: 50px;
    border:none;
  }
  .newsletter input::placeholder{
    width: 122px;
  height: 24px;
  font-family: 'Work Sans';
  font-style: normal;
  font-weight: 300;
  font-size: 16px;
  line-height: 24px;
  letter-spacing: 0.05em;
  color: #000000;
  }
  .label_text{
    width: 982.93px;
height: 24px;

font-family: 'Work Sans';
font-style: normal;
font-weight: 300;
font-size: 16px;
line-height: 24px;
letter-spacing: 0.05em;

color: #000000;
  
  }
  
   input[type=checkbox]{
  background: blue;
  }
  

  /* FOOTER */
  .footer {
    grid-area: footer;

    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 80px 220px;
    gap: 24px;
    align-items: center;
    justify-content: center;
    width: auto;
    height: 300px;

  }

  .footer_logo_contact_container {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding: 0px;
    gap: 68px;

    width: 1479px;
    height: 228.88px;
  }

  .footer_logo_redes_container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    padding: 0px;
    gap: 16px;
    width: 299px;
    height: 228.88px;
    align-items: center;
  }

}

/* navbar */
nav{
  background: #EC1B84;
  height: 80px;
  width: 100%;
  
}
.plantillas:hover{
  color: #FDE801!important;
  background-color: #000!important;
}
.enlace{
  position: absolute;
  padding: 20px 50px;
}
.logo{
  height: 40px;
}
nav .ulnav{
  float: right;
  
}

nav .ulnav li{
  display: inline-block;
  line-height: 80px;
  margin: 0 44px 0 0;
}

nav .ulnav li a{
  
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 700;
  font-size: 16px;
  line-height: 24px;
  letter-spacing: 0.05em;
  color: #0E0E0E;
  text-transform: uppercase;
  text-decoration: none;
  list-style: none;
padding: 0px 16px;
width: 100px;
height: 24px;
JUSTIFY-CONTENT: CENTER;
background: #FFFFFD;

}
nav .ulnav li a:hover{
  background-color: #000;
  color: white;
}
.checkbtn{
  font-size: 30px;
  color: #fff;
  float: right;
  line-height: 80px;
  margin-right: 40px;
  cursor: pointer;
  display: none;
}
#check{
  display: none;
}
#cerrar{
  display: none;
}
@media (max-width: 952px){
  .enlace{
      padding-left: 20px;
  }
  nav .ulnav li a{
      font-size: 16px;
  }
}

@media (max-width: 1335px){
  .checkbtn{
      display: block;
  }
  .ulnav{
      position: absolute;
      
      background: black;
      top: 80px;
      left: 135%;
      text-align: center;
      transition: all .5s;
      overflow-x: auto;
width: -webkit-fill-available;
height: 100%;
z-index: 1;

  }

  nav .ulnav li{
      display: block;
      margin: 50px 0;
      line-height: 6px;
      text-align: end;

  }

  nav .ulnav li a{
      font-size: 20px;
      text-decoration: none;
      list-style: none;
      color: white;
      background: none;
  }

  li a:hover, li a.active{
      background: none;
  }
  
  #check:checked ~ ul{
    left: 21px;
    padding-right: 24px;
    padding-top: 116px;
  }
  .plantillas{
    color: black !important;
  }
}