.hero-banner,
.thehills-section {
    padding-left: 16px;
    padding-right: 16px;
    width: 100%;
}
.hero-text-container,
.thehills-container{
    max-width: 1200px;
    margin: auto;
}
.grid{
    display: grid !important;
}
.flex{
    display: flex !important;
}
.block{
    display: block !important;
}
/*grid items*/
.grid-cols-1{
        grid-template-columns: repeat(1, minmax(0, 1fr)) !important;
}
.grid-cols-2{
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}
.grid-cols-3{
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}
.grid-cols-4{
        grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
}
.grid-cols-auto-1\/3{
    grid-template-columns: auto 33.333333% !important;
}
 /*flex items*/
.flex-full{
    flex: 0 0 100% !important;
    max-width: 100% !important;
}
.flex-1\/3{
        flex: 0 0 31.333333% !important;
        max-width: 33.333333% !important;
}
.flex-2\/3{
    flex: 0 0 66.666667% !important;
    max-width: 66.666667% !important;
}
.flex-1\/2{
    flex: 0 0 48% !important;
    max-width: 48% !important;
}
.flex-1\/4{
    flex: 0 0 25% !important;
    max-width: 25% !important;
}
.flex-3\/4{
    flex: 0 0 75% !important;
    max-width: 75% !important;
}
.flex-1\/5{
    flex: 0 0 20% !important;
    max-width: 20% !important;
}
.flex-2\/5{
    flex: 0 0 40% !important;
    max-width: 40% !important;
}
.flex-3\/5{
    flex: 0 0 60% !important;
    max-width: 60% !important;
}
.flex-4\/5{
    flex: 0 0 80% !important;
    max-width: 80% !important;
}
.flex-1\/6{
    flex: 0 0 16.666667% !important;
    max-width: 16.666667% !important;
}
.flex-5\/6{
    flex: 0 0 83.333333% !important;
    max-width: 83.333333% !important;
}
.flex-2\/6{
    flex: 0 0 33.333333% !important;
    max-width: 33.333333% !important;
}
.flex-4\/6{
    flex: 0 0 66.666667% !important;
    max-width: 66.666667% !important;
}


@media (min-width:782px) {
    .md\:flex{
        display: flex !important;     
    }
    .md\:block{
        display: block !important;     
    }
    .md\:grid{
        display: grid !important;     
    }

    /*grid items*/
    .md\:grid-cols-1{
        grid-template-columns: repeat(1, minmax(0, 1fr)) !important;
    }
    .md\:grid-cols-2{
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
    .md\:grid-cols-3{
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }
    .md\:grid-cols-4{
        grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    }
    .md\:grid-cols-auto-1\/3{
        grid-template-columns: auto 33.333333% !important;
    }
    /*flex items*/
    .md\:flex-full{
        flex: 0 0 100% !important;
        max-width: 100% !important;
    }

    .md\:flex-1\/3{
        flex: 0 0 31.333333% !important;
        max-width: 33.333333% !important;
    }
    .md\:flex-2\/3{
        flex: 0 0 66.666667% !important;
        max-width: 66.666667% !important;
    }
    .md\:flex-1\/2{
        flex: 0 0 48% !important;
        max-width: 48% !important;
    }
    .md\:flex-1\/4{
        flex: 0 0 25% !important;
        max-width: 25% !important;
    }
    .md\:flex-3\/4{
        flex: 0 0 75% !important;
        max-width: 75% !important;
    }
    .md\:flex-1\/5{
        flex: 0 0 20% !important;
        max-width: 20% !important;
    }
    .md\:flex-2\/5{
        flex: 0 0 40% !important;
        max-width: 40% !important;
    }
    .md\:flex-3\/5{
        flex: 0 0 60% !important;
        max-width: 60% !important;
    }
    .md\:flex-4\/5{
        flex: 0 0 80% !important;
        max-width: 80% !important;
    }
    .md\:flex-1\/6{
        flex: 0 0 16.666667% !important;
        max-width: 16.666667% !important;
    }
    .md\:flex-5\/6{
        flex: 0 0 83.333333% !important;
        max-width: 83.333333% !important;
    }
    .md\:flex-2\/6{
        flex: 0 0 33.333333% !important;
        max-width: 33.333333% !important;
    }
    .md\:flex-4\/6{
        flex: 0 0 66.666667% !important;
        max-width: 66.666667% !important;
    }

    
}
@media (min-width:922px) {
    .lg\:flex{
        display: flex !important;     
    }
    .lg\:block{
        display: block !important;     
    }
    .lg\:grid{
        display: grid !important;     
    }

     /*grid items*/
    .lg\:grid-cols-2{
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
    .lg\:grid-cols-3{
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }
    .lg\:grid-cols-4{
        grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    }
      .lg\:grid-cols-5{
        grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    }
    .lg\:grid-cols-auto-1\/3{
        grid-template-columns: auto 33.333333% !important;
    }
    /*flex items*/
    .lg\:flex-full{
        flex: 0 0 100% !important;
        max-width: 100% !important;
    }
    .lg\:flex-1\/3{
        flex: 0 0 31.333333% !important;
        max-width: 33.333333% !important;
    }
    .lg\:flex-2\/3{
        flex: 0 0 66.666667% !important;
        max-width: 66.666667% !important;
    }
    .lg\:flex-1\/2{
        flex: 0 0 48% !important;
        max-width: 48% !important;
    }
    .lg\:flex-1\/4{
        flex: 0 0 25% !important;
        max-width: 25% !important;
    }
    .lg\:flex-3\/4{
        flex: 0 0 75% !important;
        max-width: 75% !important;
    }
    .lg\:flex-1\/5{
        flex: 0 0 20% !important;
        max-width: 20% !important;
    }
    .lg\:flex-2\/5{
        flex: 0 0 40% !important;
        max-width: 40% !important;
    }
    .lg\:flex-3\/5{
        flex: 0 0 60% !important;
        max-width: 60% !important;
    }
    .lg\:flex-4\/5{
        flex: 0 0 80% !important;
        max-width: 80% !important;
    }
    .lg\:flex-1\/6{
        flex: 0 0 16.666667% !important;
        max-width: 16.666667% !important;
    }
    .lg\:flex-5\/6{
        flex: 0 0 83.333333% !important;
        max-width: 83.333333% !important;
    }
    .lg\:flex-2\/6{
        flex: 0 0 33.333333% !important;
        max-width: 33.333333% !important;
    }
    .lg\:flex-4\/6{
        flex: 0 0 66.666667% !important;
        max-width: 66.666667% !important;
    }
}
@media (min-width:1200px) {
    .xl\:flex{
        display: flex !important;     
    }
    .xl\:block{
        display: block !important;     
    }
    .xl\:grid{
        display: grid !important;     
    }
    .xl\:grid-cols-5{
        grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    }

      /*grid items*/
    .xl\:grid-cols-2{
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
    .xl\:grid-cols-3{
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }
    .xl\:grid-cols-4{
        grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    }
    .xl\:grid-cols-auto-1\/3{
        grid-template-columns: auto 33.333333% !important;
    }
     .xl\:grid-cols-auto-1\/4{
        grid-template-columns: auto 25% !important;
    }
    /*flex items*/
    .xl\:flex-full{
        flex: 0 0 100% !important;
        max-width: 100% !important;
    }
    .xl\:flex-1\/3{
        flex: 0 0 31.333333% !important;
        max-width: 33.333333% !important;
    }
    .xl\:flex-2\/3{
        flex: 0 0 66.666667% !important;
        max-width: 66.666667% !important;
    }
    .xl\:flex-1\/2{
        flex: 0 0 48% !important;
        max-width: 48% !important;
    }
    .xl\:flex-1\/4{
        flex: 0 0 25% !important;
        max-width: 25% !important;
    }
    .xl\:flex-3\/4{
        flex: 0 0 75% !important;
        max-width: 75% !important;
    }
    .xl\:flex-1\/5{
        flex: 0 0 20% !important;
        max-width: 20% !important;
    }
    .xl\:flex-2\/5{
        flex: 0 0 40% !important;
        max-width: 40% !important;
    }
    .xl\:flex-3\/5{
        flex: 0 0 60% !important;
        max-width: 60% !important;
    }
    .xl\:flex-4\/5{
        flex: 0 0 80% !important;
        max-width: 80% !important;
    }
    .xl\:flex-1\/6{
        flex: 0 0 16.666667% !important;
        max-width: 16.666667% !important;
    }
    .xl\:flex-5\/6{
        flex: 0 0 83.333333% !important;
        max-width: 83.333333% !important;
    }
    .xl\:flex-2\/6{
        flex: 0 0 33.333333% !important;
        max-width: 33.333333% !important;
    }
    .xl\:flex-4\/6{
        flex: 0 0 66.666667% !important;
        max-width: 66.666667% !important;
    }
}