.main-section{
    padding: 75px 0 0 0;
    display: flex;
}
.ms-col-1{
    width: 50%;
    padding: 0 5%;
    display: flex;
    align-items: center;
}
.ms-col-2{
    width: 50%;
}
.ms-col-1 h1{
    font-family: 'GilroyBold';
    font-size: 32px;
  margin: 0 0 15px 0;
  color: #05c;
}
.ms-col-1 p{
    font-family: 'GilroyMedium';
  font-size: 18px;
  color: #444;
  margin: 30px 0 30px 0;
  line-height: 1.6;
}
.ms-col-2 img{
    width: 100%;
}

.section-1{
    display: flex;
    height: auto;
}
.section-1-mt{
    margin: 2% 0 0 0;
}
.s1-col-1, .s1-col-2{
    width: 50%;
    position: relative;
}
.s1-col-1 img, .s1-col-2 img{
    width: 100%;
    height: auto;
}
.s1-col-1-overlay{
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    padding: 10%;
    background-color: rgb(0 0 0 / 25%);
    /*background-color: linear-gradient(0deg, rgb(0 55 133 / 75%) 0%, rgb(255 255 255 / 10%) 100%);*/
    display: flex;
    align-items: flex-end;
    transition: background-color 1.5s ease-in-out; 
}
.s1-col-1-overlay:hover{
    background-color: rgba(255, 255, 255, 0.1); /* rgb(0 56 133 / 30%) */
    /*background-color: linear-gradient(0deg, rgb(0 55 133) 0%, rgb(0 0 0 / 10%) 100%);*/
}
.s1-col-1-overlay h2{
    font-size: 18px;
  color: #05c;
  font-family: 'GilroyBold';
  margin: 0;
  padding: 7px;
  background: rgba(255, 255, 255, 0.75);
}
@media screen and (max-width: 992px) {
    .main-section {
        padding: 100px 0 0 0;
    }
    .ms-col-1 h1 {
        font-size: 28px;
    }
    .ms-col-1 p {
        font-size: 16px;
    }
    .s1-col-1-overlay h2 {
        font-size: 16px;
    }
}
@media screen and (max-width: 768px) {
    .main-section {
        padding: 100px 0 0 0;
        flex-wrap: wrap;
    }
    .ms-col-1, .ms-col-2 {
        width: 100%;
    }
    .ms-col-1{
        padding: 0 10%;
    }
    .ms-col-1 h1 {
        font-size: 28px;
    }
    .ms-col-1 p {
        font-size: 16px;
    }
    .section-1 {
        flex-wrap: wrap;
    }
    .s1-col-1, .s1-col-2 {
        width: 100%;
    }
    .s1-col-1-overlay h2 {
        font-size: 16px;
    }
}
@media screen and (max-width: 575px) {
    .main-section {
        padding: 100px 0 0 0;
        flex-wrap: wrap;
    }
    .ms-col-1, .ms-col-2 {
        width: 100%;
    }
    .ms-col-1{
        padding: 0 10%;
    }
    .ms-col-1 h1 {
        font-size: 28px;
    }
    .ms-col-1 p {
        font-size: 16px;
    }
    .section-1 {
        flex-wrap: wrap;
    }
    .s1-col-1, .s1-col-2 {
        width: 100%;
    }
    .s1-col-1-overlay h2 {
        font-size: 16px;
    }
}