body{
    width: 100% !important;
    height: 100% !important;
}  
.info-header{
    background: linear-gradient(90deg, var(--main-color-dark2) 0%, var(--main-color-dark) 100%);
    transition: 0.5s;
    position: relative;
    top: 100px;
    height: 200px;
    width: 100%;
    position: relative;
    margin-bottom: 130px;
}
h1 {
    position: relative;
    color:rgb(255, 255, 255);
    text-align: center;
    font-size: 70px !important;
    top: 70px;
    text-transform: uppercase;
    font-family: 'Kanit', sans-serif;
}
h2{
    color: var(--main-color-dark);
}

.grid-wrapper{
    display: flex;
  justify-content: center;
    display: grid;
    grid-template-columns: 580px 580px;
}
.text {
    padding-right: 30px;
}
.text, .img1{
    padding-bottom: 35px;
}
.text, .img2{

}
#text-image{
    overflow: hidden;
    height: 367px;
width: 550px;
border-radius: 10px;
}
.text{
font-size: 17.5px;
}
.container{
    max-width: 1140px !important;
    margin-bottom: 15px;
}

@media only screen and (max-width: 1480px) {
    .content {
        position: relative;
      top: -10px !important;
    }
    h1 {
        font-size: 55px !important;
    }
  }
  @media only screen and (max-width: 1270px) {
    .grid-wrapper{
        grid-template-columns: 400px 400px;
    }
    #text-image{
        height: 280px;
        width: 370px;
    }
    .text{
        font-size: 12.5px;
    }
  }
  @media only screen and (max-width: 880px) {
    .grid-wrapper{
        padding: 10px;
        grid-template-columns: 50% 50%;
    }
    #text-image{
        height: 280px;
        width: 370px;
    }
    .text{
        grid-column: span 2;
        font-size: 16.5px;
    }
    .img2{padding-bottom: 30px;}
  }
  @media only screen and (max-width: 780px) {
    #text-image{
        height: 240px;
        width: 340px;
    }
  }
  @media only screen and (max-width: 710px) {
    #text-image{
        height: 200px;
        width: 300px;
    }
  }
  @media only screen and (max-width: 640px) {
    .grid-wrapper{
        grid-template-columns: 100%;
    }
    #text-image{
        width: 100%;
        height: 100%;
    }
    .text{
        grid-column: span 1;
    }
    .img2{padding-bottom: 30px;}
  }
  
  @media only screen and (max-width: 500px) {
    h1 {
        font-size: 35px !important;
        top: 30px;
    }
    .info-header{
        height: 100px;
        width: 100%;
    }
  }