html {
    min-height: 100vh;
}

body {
    box-sizing: border-box;
    height: 100%;
}

#main {
    margin-top: 0 !important;
}

#main-content {
    max-width: 100vw;
    width: 100%;
}

#main, #main-content {
    padding-left: 0;
    padding-right: 0;
    margin-left: 0;
    margin-right: 0;
}

.home-content {
    padding: 0;
    margin: 0;
}

footer {
    margin-top: 20px;
}

.image-header-main {
  min-height:350px;
  position:relative;
  overflow:hidden
}

@media(min-width:480px) {
  .image-header-main {
    min-height:400px;
    img {
        height: 400px;
    }
  }
}
@media(min-width:768px) {
  .image-header-main {
    min-height:500px;
    img {
        height: 500px;
    }
  }
}
@media(min-width:992px) {
  .image-header-main {
    min-height:640px;
    img {
        height: 640px;
    }
  }
}
@media(min-width:1600px) {
  .image-header-main {
    min-height:731px;
    img {
        height: 731px;
    }
  }
}

.image-header-main img {
    width: 100%;
    object-fit: cover;
    position:absolute;     
}

.image-header-main::before{
    content: "";
    width: 100%;
    height: 100%;
    max-height: 355px;
    position: absolute;
    top: 0;
    left: 0;
    background: linear-gradient(to bottom,#000,transparent);
    opacity: .2;
    z-index: 1;
}

.banner-text {
    padding-top: 8%;
    padding-bottom: 8%;
    padding-left: 10%;
    width: 100%;
    max-width: calc(1600px - 60px);
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;

    color: #fff;
    z-index: 2;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    h2 {
        color: white;
        font-weight: 700;
        color: #fff;
        line-height: 1.3;
        text-transform: uppercase;
        margin-bottom: 20px;
        text-shadow: 0 0 10px rgba(0,0,0,.63);
    }

    p {
        font-size: 25px;
        font-weight: 700;
        text-shadow: 0 0 10px rgba(0,0,0,.63);
    }
}



@media(min-width:480px) {
    .banner-text h2{
        font-size:36px
    }
}
@media(min-width:768px) {
    .banner-text h2{
        font-size:44px
    }    
    .banner-text {        
        padding-top: 4%;
        padding-bottom: 4%;        
        padding-left: 6%;
    }
}
@media(max-width:1300px) and (min-width:769px) {
  .banner-text h2{
    font-size:49px;
  }  
    .banner-text {        
        padding-top: 6%;
        padding-bottom: 6%;
        padding-left: 2%;
    }
}

h2 {
    font-size: 2.125em;
    font-weight: 700;
    color: inherit;
    margin: 20px 0 15px;
    padding: 0;
}

.greenText {
    color: var(--howick-green);
    font-size: 22px !important;
    font-weight: 700 !important;
}

.blueText {
    color: var(--howick-blue);    
    font-size: 22px !important;
    font-weight: 700 !important;
}

.blue-carat {
    background-color: var(--howick-blue);
    color: white;
    font-weight: 300;
    font-size: 20pt;
    text-align: center;
    display: inline-block;
    margin-right: .2em;
    line-height: .70em;
    width: .8em;
    height: .8em;
    border-radius: 50%;
}

.sectionOne{
    text-align: center;
    max-width: 920px;    
    padding-bottom: 4em;
    margin-left: auto;
    margin-right: auto;
    p {
        font-size: 17px !important;
    }
}

.sectionTwo {
    box-sizing:border-box;
    background-color: #e5eff7;
    padding-top: 5em;
    .card-container {        
        gap: 2%;
        width: 80%;
        margin-left: auto;
        margin-right: auto;
        align-items: stretch;
    }
    .card-title {
        font-size: 18px !important;
        color: var(--howick-blue) !important;
        font-weight: 800 !important;
    }    
    a {
        height: min-content;
        align-items: center;
        width: max-content;
        margin: 0 auto;
        color: var(--howick-blue);
        font-weight: 800;
        font-size: 0.85em;
    }
    a:hover {        
        cursor: pointer;
        .card-link{
            text-decoration: underline;
        }
    }
}

@media (min-width: 760px) and (max-width: 1225px){
    .sectionTwo {
        .card-container {
            width: 80%;
            margin-left: auto;
            margin-right: auto;
        }
    }
  .card-3 {        
    flex-basis: 32% !important;
  }
}

@media (min-width: 1225px){
    .sectionTwo {
        .card-container {
            width: 70%;
            margin-left: auto;
            margin-right: auto;
        }
    }
  .card-3 {        
    flex-basis: 23% !important;
  }
}


.home-header {
  flex-wrap: wrap;
  margin-top: 20px;
  gap: 10px;
  .home-row {    
    width: 100%;
    flex-direction: row;
    min-height: 428px;
    align-items: stretch;
  }
  .left-text {    
    background-color: #e5eff7;
    display: block;
    text-align: left;
    padding: 32px 3% 32px 5.8%;
    h2 {
        word-wrap: normal;
        width:fit-content;
    }
    p {
        margin-left: 0 !important;
    }

    a {
        font-size: 1em;
        text-decoration: none;
        display: block;
        text-align: center;
        font-weight: 700;
        margin-top: 20px;
        padding: 10px 30px;
        max-width: 100%;
        cursor: pointer;
        min-width: 20px;
        color: white;
        background-color: var(--howick-green);
    }
    a:hover {
        background-color: #035528;
    }
  }
  .right-image {
    align-items: stretch;
  }
  img {    
    position: relative;
    width: 100%;
    height: 100%;
    object-fit: cover;
    flex-grow: 1;
  }
}

@media (min-width: 925px)
{    
    .home-header{
        img {
            min-height: 622px;
        }
    }
}

@media (min-width: 1028px)
{
    .home-header{
        img {
            min-height: 596px;
        }
    }
}

@media (min-width: 1079px)
{    
    .home-header{
        img {
            min-height: 570px;
        }
    }
}

@media (min-width: 1210px)
{    
    .home-header{
        img {
            min-height: 544px;
        }
    }
}

@media (min-width: 1278px)
{    
    .home-header{
        img {
                min-height: 504px;
        }
    }
}

@media (min-width: 1448px){
    .home-header{
        img {
                min-height: 440px;
            }
        }
}

@media (min-width: 1792px){
    .home-header{
        img {                
                max-height: 478px !important;
        }
    }
}

.home-col-1 {
    flex-basis: calc(100% * (1/12)) ;
}

.home-col-2 {
    flex-basis: calc(100% * (2/12)) ;
}

.home-col-3 {
    flex-basis: calc(100% * (3/12)) ;
}

.home-col-4 {
    flex-basis: calc(100% * (4/12)) ;
}

.home-col-5 {
    flex-basis: calc(100% * (5/12)) ;
}


.home-col-6 {
    flex-basis: calc(100% * (6/12)) ;
}

.home-col-7 {    
    flex-basis: calc(100% * (7/12)) ;
}

.home-col-8 {    
    flex-basis: calc(100% * (8/12)) ;
}

.home-col-9 {
    flex-basis: calc(100% * (9/12)) ;
}

.home-col-10 {
    flex-basis: calc(100% * (10/12)) ;
}

.home-col-11 {
    flex-basis: calc(100% * (11/12)) ;
}

.home-col-12 {
    flex-basis: calc(100% * (12/12)) ;
}

.flex-force {    
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex; 
}

/* MOBILE STYLING */
@media (max-width: 992px)
{
    .home-header {
        img {
            min-height: 350px;
        }
        h2 {
            margin-left: auto;
            margin-right: auto;
        }
        .left-text {
            justify-content: center;
            text-align: center;
        }
        .home-row.flex-wrap {
                   
            flex-wrap: wrap;
        }

        .home-row.flex-reverse-wrap {                   
            flex-wrap: wrap-reverse;
        }

        .home-col-4, .home-col-8 {
            flex-basis: 100% !important;
        } 
    }
}