/* LANDING PAGES */

.landing-page {
    margin-top: 15rem;
    margin-bottom: 20rem;
    display: grid;
    grid-template-columns: 1.5fr 1.5fr;
    grid-template-rows: 5fr;
    grid-template-areas: "left-part     right-part";
}

.left-part {
    height: 70vh;
    padding-left: 15rem;
    grid-area: left-part;
}
.right-part {
    grid-area: right-part;
}

.right-part img{
    padding: 3rem;
    width: 80%;
}

/* .left-part img{
    width: 50%;
    padding-bottom: 5rem;
} */

.left-part h1{
    font-size: 4.5rem;
    padding-bottom: 2rem;
}
.left-part em{
    font-style: normal;
    font-weight: 800;
    color: #f9d342;
    font-size: 5rem;
    text-transform: uppercase;
}

.left-part p{
    font-size: 2rem;
    letter-spacing: 0.18rem;
    line-height: 2.5rem;
    padding: 2rem 0 4rem 0;
}

.text-landing-page{
    z-index: 2;
}

.paragraph-landing-page{
    position: absolute;
    width: 85rem;
    height: 30rem;
    background-color: #fff;
    filter: blur(2px);
    opacity: 50%;
    z-index: 1;
    padding: 5rem;
}

.calltoaction-landing-pages{
    padding-top: 2rem;
}
.cta-contact--landing-pages{
    padding: 1.5rem;
    width: 18rem;
    border: transparent;
    background-color: #000;
    color: #f8de76;
    font-weight: 700;
    font-size: 1.7rem;
    letter-spacing: 0.2rem;
    text-decoration: none;
    box-shadow: 0 20px 20px rgb(0, 0, 0, 0.2);
    cursor: pointer;
}


.cards-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(25rem, 1fr)) !important;
    max-width: 100%;
    padding-top: 5%;
    margin: 0 auto;
}
.cards-grid-item {
    z-index: 1;
    width: 35rem;
    max-width: 100%;
    text-align: center;
    list-style: none;
    display: grid;
    justify-content: center;
}



/* GRAFIC DESIGN PRICES TABEL */


.tabel-grafic{
    padding: 8rem;
    
}

.tabel-grafic-ecommerce{
    padding-right: 8rem;
    padding-left: 8rem;
    padding-top: 1rem;
    margin-bottom: 35rem;
}

table{
    z-index: 1;
    width:100%;
    table-layout: fixed;
   
  }
  .tbl-header{
    background-color:rgba(249, 211, 66, 1);
   }
  .tbl-content{
    height:300px;
    overflow-x:auto;
    margin-top: 0px;
    border: 1px solid rgba(0,0,0,0.3);
  }

  .tbl-content-ecommerce{
    height:60rem;
    overflow-x:auto;
    margin-top: 0px;
    border: 1px solid rgba(0,0,0,0.3);
  }

  th{
    padding: 20px 15px;
    text-align: left;
    font-weight: 800;
    font-size: 2rem;
    color: #000;
    text-transform: uppercase;
  }
  td{
    background-color: white;
    opacity: 50%;
    padding: 15px;
    text-align: left;
    vertical-align:middle;
    font-weight: 500;
    font-size: 1.7rem;
    color: #000;
    border-bottom: solid 1px rgba(0,0,0,0.3);
  }
  

  /* SEARCH ENGINE OPTIMIZATION PAGE */


  .seo-proof{
    display: grid;
    margin-top: 20rem;
    grid-template-columns: 6fr;
    grid-template-rows: 3fr 3fr;
    grid-template-areas: "seo1 "
                         "seo2";
    margin: 0 auto;
  }

  .image-seo1{
    grid-area: seo1;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 1rem;
  }
  
  .image-seo2{
    grid-area: seo2;
    display: flex;
    justify-content: center;
    align-items: center;
    padding-top: 2rem;
    margin-right: 2rem;
   
  }



.sell{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding-bottom: 20rem;
}

.sell-wrapper{
   width: 35%;
   text-align: center;
}

.sell h1{
    font-size: 4rem;
    font-weight: 600;
}

.sell h2{
    padding-top: 2rem;
    font-size: 2.8rem;
    font-weight: 500;
}

.sell-wrapper2{
    width: 60%;
    text-align: center;
 }

#wrapper-web {
    width: 100%;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 100%;
    padding-bottom: 10rem;
}

#gallery {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
}
#gallery a {
    margin: 0 10px 10px;
}
#wrapper-web #gallery a{
    display: block;
    width: 40rem;
    height: 30rem;
    position: relative;
}
a:hover .frame .screen {
    background-position: 50% 100%;
}
.frame {
    position: absolute;
}
.frame.desktop {
    background: url(/img/svg/frame-web.svg);
    background-size: cover;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
.frame.desktop .screen {
    
    width: 93.75%;
    height: 70.833%;
    top: 7.5%;
    left: 3.125%;
    position: relative;
    transition: background-position 5s linear;
}
.screen-web-img1{
    background: url(/img/bg/bln.webp);
    background-size: cover;
    background-position: 50% 0%;
}
.screen-web-img2{
    background: url(/img/bg/fscweb.webp);
    background-size: cover;
    background-position: 50% 0%;
}
.screen-web-img3{
    background: url(/img/bg/kitweb.webp);
    background-size: cover;
    background-position: 50% 0%;
}


.frame.mobile {
    background: url(/img/svg/frame-mobile.svg);
    background-size: cover;
    bottom: 0;
    right: 0;
    width: 21.875%;
    height: 58.333%;
}
.frame.mobile .screen {
    width: 92.857%;
    height: 83.928%;
    position: relative;
    top: 6.071%;
    left: 3.571%;
    transition: background-position 5s linear;
}

.screen-mobile-img1{
    background: url(/img/bg/blnmob.webp);
    background-size: cover;
    background-position: 50% 0%;
}

.screen-mobile-img2{
    background: url(/img/bg/fscmob.webp);
    background-size: cover;
    background-position: 50% 0%;
}
.screen-mobile-img3{
    background: url(/img/bg/kitmob.webp);
    background-size: cover;
    background-position: 50% 0%;
}

.screen-web-img4{
    background: url(/img/bg/drhamidweb.webp);
    background-size: cover;
    background-position: 50% 0%;
}

.screen-mobile-img4{
    background: url(/img/bg/drhamidmob.webp);
    background-size: cover;
    background-position: 50% 0%;
}

@media (min-width: 720px) {
    #wrapper-web {
        width: 720px;
   }
}
@media (min-width: 1024px) {
    #wrapper-web {
        width: 1024px;
   }
}

@media screen and (max-width: 1400px) {
    .landing-page {
        margin-top: 5rem;
        display: grid;
        grid-template-columns: 1.5fr;
        grid-template-rows: 4fr 2fr;
        grid-template-areas: "right-part"
                            "left-part";
    }
    .left-part {
        height: 40vh;
        padding: 3rem;
        grid-area: left-part;
    }
    .right-part img{
        padding: 3rem;
        width: 70%;
    }

    #gallery {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
    }
}

@media screen and (max-width: 1100px) {
    .image-seo1 img{
      width: 100%;
    }
    .image-seo2 img{
        width: 100%;
    }
}


@media screen and (max-width: 1000px) {
    .cards-grid {
        display: grid;
        grid-template-columns: repeat(2, minmax(25rem, 1fr)) !important;
        max-width: 100%;
        padding-top: 15%;
        margin: 0 auto;
    }
    .cards-grid-item {
        padding-bottom: 2rem;
    }

    .sell-wrapper{
        width: 70%;
        text-align: center;
     }

     .sell-wrapper2{
        width: 80%;
        text-align: center;
     }
}

@media screen and (max-width: 800px) {
    .tabel-grafic{
        margin-top: 5rem;
        padding: 2rem;
        
    }

    th{
        padding: 20px 15px;
        text-align: left;
        font-weight: 800;
        font-size: 1.8rem;
        color: #000;
        text-transform: uppercase;
      }
      td{
        background-color: white;
        opacity: 50%;
        padding: 15px;
        text-align: left;
        vertical-align:middle;
        font-weight: 500;
        font-size: 1.5rem;
        color: #000;
        border-bottom: solid 1px rgba(0,0,0,0.3);
      }
}

@media screen and (max-width: 600px) {
    .cards-grid {
        display: grid;
        grid-template-columns: repeat(1, minmax(25rem, 1fr)) !important;
        max-width: 100%;
    }
    .landing-page {
        margin-top: 3rem;
        margin-bottom: 15rem;
        display: grid;
        grid-template-columns: 1.5fr;
        grid-template-rows: 4fr 4fr;
        grid-template-areas: "right-part"
                            "left-part";
    }

    .right-part img{
        padding: 3rem;
        width: 80%;
    }

    .left-part {
        height: 40vh;
        padding: 3rem;
        margin-top: 2rem;
        grid-area: left-part;
    }


    .tabel-grafic{
        margin-top: 5rem;
        padding: 0;
        
    }

    .tabel-grafic-ecommerce{
        padding-right: 1rem;
        padding-left: 1rem;
        padding-top: 1rem;
        margin-bottom: 25rem;
    }

    th{
        padding: 20px 15px;
        text-align: left;
        font-weight: 800;
        font-size: 1.4rem;
        color: #000;
        text-transform: uppercase;
      }
      td{
        background-color: white;
        opacity: 50%;
        padding: 15px;
        text-align: left;
        vertical-align:middle;
        font-weight: 500;
        font-size: 1.3rem;
        color: #000;
        border-bottom: solid 1px rgba(0,0,0,0.3);
      }

      .image-seo1 img{
        width: 100%;
      }
      .image-seo2 img{
          width: 100%;
      }

    .sell h1{
        font-size: 2.5rem;
        font-weight: 600;
    }
    
    .sell h2{
        padding-top: 2rem;
        font-size: 2rem;
        font-weight: 500;
    }
}

@media screen and (max-width: 550px) {

    .landing-page {
        margin-top: 3rem;
        margin-bottom: 15rem;
        display: grid;
        grid-template-columns: 1.5fr;
        grid-template-rows: 4fr 4fr;
        grid-template-areas: "right-part"
                            "left-part";
    }

    .right-part img{
        padding: 3rem;
        width: 80%;
    }

    .left-part {
        height: 40vh;
        padding: 3rem;
        margin-top: 3rem;
        grid-area: left-part;
    }


    .left-part h1{
        font-size: 3.5rem;
        padding-bottom: 2rem;
    }
    .left-part em{
        font-style: normal;
        font-weight: 800;
        color: #f9d342;
        font-size: 4rem;
        text-transform: uppercase;
    }
    
    .left-part p{
        font-size: 1.7rem;
        letter-spacing: 0.18rem;
        line-height: 2.5rem;
        padding: 2rem 0 4rem 0;
    }
}

@media screen and (max-height: 600px) {
    .tbl-content-ecommerce{
        height:40rem;
        overflow-x:auto;
        margin-top: 0px;
        border: 1px solid rgba(0,0,0,0.3);
    }
}