html{
    scroll-behavior: smooth;
}
*{
    box-sizing: border-box;
    margin:0;
}
body{
    margin:0 auto;
    width:100%;
    font-family: 'DM Sans', sans-serif;
    font-weight: 400;
    scroll-behavior: smooth;
    overflow-x: hidden;
    position:relative;
}

@font-face {
    font-family: 'Bebas Neue Pro Bold';
    src: url('Fonts/Bebas-Neue-Pro-Bold.woff2') format('woff2'), 
    url('Fonts/Bebas-Neue-Pro-Bold.woff') format('woff'), 
    url('Fonts/Bebas-Neue-Pro-Bold.ttf') format('truetype');
    font-weight: 800;
  }

:root{
    --red:#e83525;
    --darkRed:#881b12;
    --lightRed:#ec8e85;
    --blue:#005694;
    --white:#ffffff;
    --darkestGrey:#212121;
    --darkGrey:#444444;
    --mediumGrey:#888888;
    --lightestGrey:#f4f4f4;
    --desktopPadding:calc(100vw - 1464px);

    --red1:#FDBDB8;
    --red2:#FFDEDB;
    --red3:#FFEBEA;

    --blueInteractive:#0178CE;
    --blueInteractiveInverted:#71c4ff;
    --blueInteractiveInvertedHover:#54aded;
    --blueHover:#005694;

    --headerText:#001c2d;
    --copyText:#082838;

    --lightBlue:#edf7ff;

    --xsm-margin:0.5rem;
    --sm-margin:1rem;
    --med-margin:2rem;
    --lg-margin:3rem;
    --xlg-margin:4rem;
}

h1, h2, h3, h4{
    
}

h5{
    font-weight: bolder;
}

.light-grey-bg{
    background-color:#f4f4f4;
}
.medium-grey-bg{
    background-color:var(--darkGrey);
}
.dark-grey-bg{
    background-color:var(--darkestGrey);
}


.blue-bg{
    background-color:var(--blue);
}

.white-text{
    color:var(--white);
}




h1{
    font-size:3.052rem;
}
h2{
    font-size:2.441rem;
}
h3{
    font-size:1.953rem;
}
h4{
    font-size:1.563rem;
}
h5{
    font-size:1.25rem;
}
p{
    margin-bottom: 1.3em;
    color:var(--copyText);
    line-height: 1.6em;
}
.caption{
    font-size:0.8rem;
}
.eyebrow{
    text-transform: uppercase;
    font-size:0.8rem;
    color:var(--darkGrey);
}

h1, h2, h3, h4, h5{
    font-family: 'Poppins', sans-serif;
    font-weight: 400;
    line-height: 1em;
    color:var(--headerText)
}


@media screen and (max-width:767px){
    body{
        font-size:14px;
    }
    h1, h2, h3, h4, h5{
        margin-bottom: 0.2em;
    }

}
@media screen and (min-width:768px) {
    body{
        font-size:16px;
    }
    h1, h2, h3, h4, h5{
        margin-bottom: 0.3em;
    }
    p, ul, ol{
        margin-bottom: 1.75rem;
    }
    footer p, footer ul, footer ol{
        margin-bottom: 0.5rem;
    }

}


.light-blue-bg{
    background-color: var(--lightBlue);
}
.dark-blue-bg{
    background-color: var(--copyText);
}
@media screen and (max-width:767px) {
    .mobile-center{
        text-align: center;
    }
}






@media screen and (max-width:767px) {
    .section{
        width:100%;
        padding:0 5vw;
    }
    .container{
        margin:0 auto;
        padding:var(--lg-margin) 0;
    }
    
}
@media screen and (min-width:768px) and (max-width:1200px){
    .section{
        width:100%;
        padding:0 9.2vw;
    }
    .container{
        margin: 0 auto;
        padding:var(--lg-margin) 0;
    }
}
@media screen and (min-width:1201px) {
    
    .section{
        width:100%;
        padding:0 48px;
    }
    .container{
        max-width:1440px;
        margin: 0 auto;
        padding:var(--xlg-margin) 0;
    }
    
}






a{
    color:var(--blueInteractive);
    font-weight: bolder;
    text-decoration: none;
    transition:all .3s ease;
}
a:hover{
    cursor: pointer;
}

a::after{
    transition:all .3s ease;
}


/*=============================*/
/*=============================*/
/*--------_BUTTONS_============*/
/*=============================*/
/*=============================*/

/*--------Primary CTA---------*/


/*--padding:12px 36px;--*/

a.btn{
    display:inline-block;
    padding:12px 12px 12px 36px;
    border-radius: 4px;
    font-weight: 400;
    cursor:pointer;
    position:relative;
}
a.btn:hover{
    padding:12px 24px 12px 24px;
}


a.btn > i{
    opacity: 0;
    transition:all .3s ease;
    margin-left:8px;
}
a.btn:hover > i{
    opacity: 1;  
}

a.btn.icon-front{
    padding:12px 24px;
}
a.btn.icon-front:hover{
    padding:12px 24px;
}
a.btn.icon-front > i{
    opacity: 1;
    margin-left:0;
    margin-right:8px;
}




a.btn.primary{
    background-color: var(--blueInteractive);
    border: solid 3px var(--blueInteractive);
    color:var(--white);
}
a.btn.primary:hover{
    background-color: var(--blueHover);
    border-color:var(--blueHover); 
}
a.btn.primary > i{
    color:var(--white);
}

a.btn.primary.inverted{
    background-color: var(--blueInteractiveInverted);
    border: solid 3px var(--blueInteractiveInverted);
    color:var(--copyText);
}
a.btn.primary.inverted:hover{
    background-color: var(--blueInteractiveInvertedHover);
    border-color:var(--blueInteractiveInvertedHover); 
}
a.btn.primary.inverted > i{
    color:var(--copyText);
}

a.btn.secondary{
    background-color: transparent;
    border: solid 3px var(--blueInteractive);
    color:var(--blueInteractive);
}
a.btn.secondary:hover{
    border-color: var(--blueHover);
    color:var(--blueHover);
}
a.btn.secondary > i{
    color:var(--blueInteractive);
}
a.btn.secondary:hover > i{
    color:var(--blueHover);
}

a.btn.secondary.inverted{
    border-color: var(--blueInteractiveInverted);
    color:var(--blueInteractiveInverted);
}
a.btn.secondary.inverted:hover{
    border-color: var(--blueInteractiveInvertedHover);
    color:var(--blueInteractiveInvertedHover);
}
a.btn.secondary.inverted > i{
    color:var(--blueInteractiveInverted);
}
a.btn.secondary.inverted:hover > i{
    color:var(--blueInteractiveInvertedHover);
}





@media screen and (max-width:430px) {
    a.btn.primary,a.btn.secondary{
        width:100%;
        text-align: center;
    }
}





i.phone::after{
    content: url('Images/phone_white.svg');
}
i.email::after{
    content: url('Images/email_white.svg');
}











 a.inline-link{
     text-decoration: none !important;
 }
 a.inline-link:hover, a.inline-link:focus{
    color:var(--blueInteractive);
}

 a.inline-link-inverted{
    text-decoration: none !important;
    color:var(--blueInteractiveInverted);
}
a.inline-link-inverted:hover, a.inline-link-inverted:focus{
    color: var(--blueInteractiveInvertedHover);
}


/*====Grid with Flexbox====*/

.flex-grid{
    display:flex;
    width:100%;
    flex-wrap: wrap;
    position: relative;
    align-items: stretch;
}
*[class*="flex-col"] {
    position:relative;
}
.no-padding{
    padding:0;
}


@media screen and (max-width:767px){
    .flex-grid{
        width:calc(100% + 16px);
        margin:0 auto 0 -8px;
    }
    *[class*="flex-col"] {
        padding-right:4px;
        padding-left:4px;
    }
    .flex-col-test::before{
        width:4px;
    }
    .flex-col-test::after{
        width:4px;
    }
}
@media screen and (min-width:768px) and (max-width:1200px){
    .flex-grid{
        width:calc(100% + 18px);
        margin:0 auto 0 -9px ;
    }
    *[class*="flex-col"] {
        padding-right:9px;
        padding-left:9px;
    }
    .flex-col-test::before{
        width:9px;
    }
    .flex-col-test::after{
        width:9px;
    }
}
@media screen and (min-width:1201px){
    .flex-grid{
        width:calc(100% + 24px);
        margin:0 auto 0 -12px;
    }
    *[class*="flex-col"] {
        padding-right:12px;
        padding-left:12px;
    }
    .flex-col-test::before{
        width:12px;
    }
    .flex-col-test::after{
        width:12px;
    }
    .flex-grid.align-center{
        align-items: center;
    }
}


.center-text{
    text-align: center;
}


@media screen and (max-width:1200px){
    .flex-col-1-mobile{
        -webkit-box-flex: 0;
        flex: 0 0 12.5%;
        max-width: 0 0 12.5%;
    }
    .flex-col-2-mobile{
        -webkit-box-flex: 0;
        flex: 0 0 25%;
        max-width: 0 0 25%;
    }
    .flex-col-3-mobile{
        -webkit-box-flex: 0;
        flex: 0 0 37.5%;
        max-width: 0 0 25%;
    }
    .flex-col-4-mobile{
        -webkit-box-flex: 0;
        flex: 0 0 50%;
        max-width: 0 0 50%;
    }
    .flex-col-5-mobile{
        -webkit-box-flex: 0;
        flex: 0 0 52.5%;
        max-width: 0 0 52.5%;
    }
    .flex-col-6-mobile{
        -webkit-box-flex: 0;
        flex: 0 0 75%;
        max-width: 0 0 75%;
    }
    .flex-col-7-mobile{
        -webkit-box-flex: 0;
        flex: 0 0 87.5%;
        max-width: 0 0 87.5%;
    }
    .flex-col-8-mobile{
        -webkit-box-flex: 0;
        flex: 0 0 100%;
        max-width: 0 0 100%;
    }
}
@media screen and (min-width:1201px){
    .flex-col-1{
        -webkit-box-flex: 0;
        flex: 0 0 8.333333333333333%;
        max-width: 0 0 8.333333333333333%;
    }
    .flex-col-2{
        -webkit-box-flex: 0;
        flex: 0 0 16.66666666666667%;
        max-width: 0 0 16.66666666666667%;
    }
    .flex-col-3{
        -webkit-box-flex: 0;
        flex: 0 0 25%;
        max-width: 0 0 25%;
    }
    .flex-col-4{
        -webkit-box-flex: 0;
        flex: 0 0 33.3333333333333%;
        max-width: 0 0 33.3333333333333%;
    }
    .flex-col-5{
        -webkit-box-flex: 0;
        flex: 0 0 41.66666666666667%;
        max-width: 0 0 41.66666666666667%;
    }
    .flex-col-6{
        -webkit-box-flex: 0;
        flex: 0 0 50%;
        max-width: 0 0 50%;
    }
    .flex-col-7{
        -webkit-box-flex: 0;
        flex: 0 0 58.33333333333333%;
        max-width: 0 0 58.33333333333333%;
    }
    .flex-col-8{
        -webkit-box-flex: 0;
        flex: 0 0 66.666666666666667%;
        max-width: 0 0 66.666666666666667%;
    }
    .flex-col-9{
        -webkit-box-flex: 0;
        flex: 0 0 75%;
        max-width: 0 0 75%;
    }
    .flex-col-10{
        -webkit-box-flex: 0;
        flex: 0 0 83.33333333333333%;
        max-width: 0 0 83.33333333333333%;
    }
    .flex-col-11{
        -webkit-box-flex: 0;
        flex: 0 0 91.66666666666667%;
        max-width: 0 0 91.66666666666667%;
    }
    .flex-col-12{
        -webkit-box-flex: 0;
        flex: 0 0 100%;
        flex: 0 0 100%;
    }
}

/*-=========================-*/
/*-=========================-*/
/*-====Back To Top Button===-*/
/*-=========================-*/
/*-=========================-*/

.btt::after{
content:'\21E7';
color:var(--blueInteractive);
background-color:var(--white);
padding:5px;
border-radius: 50em;
outline:solid 3px var(--blueInteractive);
font-size:1.4em;
font-weight: bold;
width:44px;
height:44px;
position: fixed;
bottom:24px;
display:flex;
justify-content: center;
align-items: center;
right:24px;
box-shadow: 2px 2px 10px rgba(8, 40, 56, .4);
}
@media screen and (max-width:1200px){
    .btt{
        position: fixed;
        z-index: 8;
        bottom:24px;
        right:24px;
        width:100%;
        display: block;
    }
}
@media screen and (min-width:1201px){
    .btt{
        position: fixed;
        z-index: 8;
        bottom:24px;
        right:24px;
        width:100%;
        max-width:50px;
        display: block;
    }
}
/*-=========================-*/
/*-=========================-*/
/*-=========Header==========-*/
/*-=========================-*/
/*-=========================-*/



header div a img{
    display:inline-block;
    width:100%;
}

@media screen and (max-width:767px){
   header {
    padding:0.8rem 5vw;
    background-color: var(--copyText);
   }
   header > div{
    display:flex;
    justify-content: space-between;
   }
   header div a img{
    max-width:175px;
    margin:0 auto;
    
   }
   

   header div div:last-child a{
    width:30px;
    height:30px;
    position:relative;
    display:flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    transition:all .3s ease-out;
    right:5vw;
    position: absolute;

   }
   header.active div div:last-child a{
    position:fixed;
    z-index: 15;
    right:5vw;
    transform: rotate(180deg);
   }
   header div div:last-child a span{
    display:block;
    width:30px;
    height:2px;
    background-color: var(--blueInteractiveInverted);
    border-radius: 2000em;
    position:absolute;
    -webkit-transition:all .3s ease-out;
    transition:all .3s ease-out;
   }

   header.active div div:last-child a span{
    background-color: var(--headerText);
   }
   
   header div div:last-child a span:first-child{
    -webkit-transform: translate(0, 5px);
   }
   header div div:last-child a span:nth-child(2){
    -webkit-transform: translate(0, -5px);
   }

   header.active div div:last-child a span:first-child{
    -webkit-transform: translate(0, 0)rotate(45deg);
   }
   header.active div div:last-child a span:nth-child(2){
    -webkit-transform: translate(0, 0)rotate(-45deg);
   }


   header div div.menu-links{
    position:fixed;
    z-index: 10;
    width:100%;
    height:100vh;
    background-color:var(--lightBlue);
    display:flex;
    flex-direction: column;
    align-items: flex-start;
    left:100vw;
    top:0;
    opacity: 0;
    transition:all .3s ease-out;
    -webkit-transition:all .3s ease-out;
    padding-top:calc(1.4rem + 30px);
   }
   header.active div div.menu-links{
    left:0vw;
    opacity:1;
   }
   header div div.menu-links a{
    position:relative;
    width:100%;
    padding:0px 5vw;
    margin-top:1.4rem;
    font-size:1rem;
    color: var(--headerText);
   }
   header div div.menu-links a::after{
    position:relative;
    margin-top:1.4rem;
    content: '';
    border-bottom: solid 1px rgba(8, 40, 56, .1);
    display:block;
   }
   header div div.menu-links a i{
    position: absolute;
    right:5vw;

    font-size:1rem;
    color:var(--blueInteractive);
   }
}
@media screen and (min-width:768px) and (max-width:1200px){
    header{
        background-color: var(--copyText);
    }
    header > div{
        display:flex;
        padding:1.2rem 9.2vw;
        justify-content: space-between;
       }
       header div a img{
        max-width:175px;
        margin:0 auto;
        
       }
       
    
       header div div:last-child a{
        width:30px;
        height:30px;
        position:relative;
        display:flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        transition:all .3s ease-out;
    
       }
       header.active div div:last-child a{
        position:fixed;
        z-index: 15;
        right:9.2vw;
        transform: rotate(180deg);
       }
       header div div:last-child a span{
        display:block;
        width:30px;
        height:2px;
        background-color: var(--blueInteractiveInverted);
        border-radius: 2000em;
        position:absolute;
        transition:all .3s ease-out;
       }
       header.active div div:last-child a span{
        background-color: var(--copyText);
       }
       
       header div div:last-child a span:first-child{
        -webkit-transform: translate(0, 5px);
       }
       header div div:last-child a span:nth-child(2){
        -webkit-transform: translate(0, -5px);
       }
    
       header.active div div:last-child a span:first-child{
        -webkit-transform: translate(0, 0)rotate(45deg);
       }
       header.active div div:last-child a span:nth-child(2){
        -webkit-transform: translate(0, 0)rotate(-45deg);
       }
    
    
       header div div.menu-links{
        position:fixed;
        z-index: 10;
        width:100%;
        max-width: 400px;
        height:100vh;
        background-color:var(--lightBlue);
        display:flex;
        flex-direction: column;
        right:-400px;
        top:0;
        opacity: 0;
        transition:all .3s ease-out;
        padding-top:calc(1.4rem + 30px);
        
       }
       header.active div div.menu-links{
        right:0vw;
        opacity:1;
        
       }
       header div div.menu-links a{
        position:relative;
        width:100%;
        padding:0px 9.2vw 0 5vw;
        margin-top:1.4rem;
        font-size:1rem;
        color: var(--headerText);
       }
       header div div.menu-links a::after{
        position:relative;
        margin-top:1.4rem;
        content: '';
        border-bottom: solid 1px rgba(8, 40, 56, .1);
        display:block;
       }
       header div div.menu-links a i{
        position: absolute;
        right:9.2vw;
    
        font-size:1rem;
        color:var(--blueInteractive);
       }
}

@media(min-width:1201px){
    header{
        padding:1rem 48px;
        background-color: var(--copyText);
    }
    header > div{
        display:flex;
        max-width: 1440px;
        justify-content: space-between;
        align-items: center;
        margin:0 auto;
    }

    header div div.menu-links{
        
        display:flex;
        height:100%;
        align-items: center;
    }

    header div div.menu-links a::after{
        content:'';
        display:block;
        position:absolute;
        width:0%;
        height:3px;
        background-color: var(--blueInteractiveInverted);
        opacity: 0;
        margin-top: 0;
        -webkit-transform-origin: center;
        margin-top: var(--xsm-margin);
    }
    header div div.menu-links a:hover::after{
        opacity: 1;
        background-color: var(--blueInteractiveInvertedHover);
        width:100%;
    }
    header div div.menu-links a:not(:first-child){
        margin-left: var(--med-margin);
    }
    header div div.menu-links a{
        color:var(--blueInteractiveInverted);
        position:relative
    }
    header div div.menu-links a:hover{
        color:var(--blueInteractiveInvertedHover);
    }
    header div div.menu-links a i{
        display:none;
    }
    header div div:last-child{
        display:none;
    }
}





/*-=========Footer==========-*/

footer{
    color:var(--white);
}
footer > .section:first-child{
    background:var(--headerText);
}
footer > .section:nth-child(2){
    background:var(--headerText);
    text-align: center;
}

@media screen and (max-width:767px){
    footer > .section:first-child > .container > .flex-grid > div:first-child > div > img{
        width:100%;
        max-width: 175px;
        display:block;
        margin-bottom:24px;
    }
    footer > .section:first-child > .container > .flex-grid > div:nth-child(2){
        padding:36px 0;
        border-bottom: solid 1px var(--lightBlue);
    }
    footer > .section:first-child > .container > .flex-grid > div:nth-child(3){
        padding:36px 0;
    }
}
@media screen and (min-width:768px) and (max-width:1200px){
    footer > .section:first-child > .container > .flex-grid > div:first-child > div > img{
        width:100%;
        max-width: 175px;
        display:block;
        margin-bottom:24px;
    }
    footer > .section:first-child > .container > .flex-grid > div:nth-child(2){
        padding:36px 0;
        border-bottom: solid 1px var(--lightBlue);
    }
    footer > .section:first-child > .container > .flex-grid > div:nth-child(3){
        padding:36px 0;
    }
}
@media screen and (min-width:1201px){
    footer > .section:first-child > .container > .flex-grid > div:first-child > div > img{
        width:100%;
        max-width: 200px;
        display:block;
        margin-bottom:36px;
    }

    footer > .section:nth-child(2) > .container{
        padding:16px 0 18px 0;
    }

}





@media screen and (max-width:767px){
    header .flex-col-8-mobile{
        display: flex;
        justify-content: center;
       
    }
    .hero-banner{
        color:var(--white);
        background-color: var(--darkestGrey);
        display:flex;
        flex-direction: column;
        align-items: center;
    }
    .hero-banner .hero-bg{
        width:100%;
        min-height: 40vh;
        background-image: url('Images/Red-Buildings.webp');
        background-size: cover;
        background-position: left bottom;
        mask: url('Images/SBRG-Logo_White.svg') 30 repeat;
        
    }
    .hero-banner .section .container {
    }
    .hero-banner .section .container > .content h1{
        font-size:4em;
        
    }
    .hero-banner .section .container .content{
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: center;
        overflow-x: visible;
        position: relative;
        z-index: 2;
    
    }
    .leasing-icon{
        max-width: 150px;
        margin-bottom: 18px ;
    }
}
@media screen and (min-width:768px) and (max-width:1200px){
  
    .hero-banner{
        color:var(--white);
        background-color: var(--darkestGrey);
        
        min-height:90vh;
        display:flex;
        align-items: center;
    }
    .hero-banner .section .container{
        display:flex;
        height:100%;
    }
    .hero-banner .section .container > .content h1{
        font-size:6em;
        width: 100vw;
        max-width:550px;
        min-width:551px;
    }
    .hero-banner .section .container .content{
        padding:120px 48px 48px 0;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: center;
        overflow-x: visible;
        position: relative;
        z-index: 2;
        width:50%;
        max-width:490px;
        min-width: 320px;
    }

    .hero-banner .hero-bg{
        width:50%;
        background-image: url('Images/Red-Buildings.webp');
        background-size: cover;
        background-position: left bottom;
        min-height: 90vh;
        overflow:hidden;
        padding:48px;
        position: absolute;
        right:0;
        z-index: 1;
        top:0;
    }
    .leasing-icon{
        max-width: 200px;
        margin-bottom: 24px;
    }
    
}
@media screen and (min-width:1201px){


}

.hero-banner-2{
    overflow: hidden;
}

.hero-banner-2 .container .content .flex-grid .flex-col-8-mobile{
    justify-content: center;
    align-items: center;
}

@media screen and (max-width:767px){
    .hero-banner-2 .flex-grid .flex-col-6:first-child{
        padding:0 0 36px 0;
        
    }
    .hero-banner-2 .flex-grid .flex-col-6:first-child div:nth-child(2){
        width:200px;
        height:200px;
        
    }

    .hero-banner-2 .flex-grid .flex-col-6:first-child div:nth-child(3){
        width:150px;
        height:150px;
        
    }

    .hero-banner-2 .flex-grid .flex-col-6:first-child div:nth-child(4){
        width:100px;
        height:100px;
        
    }
    .hero-banner-2 .flex-grid .flex-col-6:first-child img{
        max-width: 200px;

    }

}
@media screen and (min-width:768px) and (max-width:1200px){
    .hero-banner-2 .flex-grid .flex-col-6:first-child{
        padding:0 0 36px 0;
        
    }
    .hero-banner-2 .flex-grid .flex-col-6:first-child div:nth-child(2){
        width:200px;
        height:200px;
        
    }

    .hero-banner-2 .flex-grid .flex-col-6:first-child div:nth-child(3){
        width:150px;
        height:150px;
        
    }

    .hero-banner-2 .flex-grid .flex-col-6:first-child div:nth-child(4){
        width:100px;
        height:100px;
        
    }
    .hero-banner-2 .flex-grid .flex-col-6:first-child img{
        max-width: 200px;

    }
}
@media screen and (min-width:1201px){
    .hero-banner-2{
        min-height:calc(90vh - 100px);
        display:flex;
    }
    .hero-banner-2 .container{
        align-items: center;
        display:flex;
    }
    .hero-banner-2 .container .content{
        align-items: center;
    }
    .hero-banner-2 .flex-grid{
        flex-direction: row-reverse;
    }
    .hero-banner-2 .container .content .flex-grid .flex-col-6:nth-child(2){
        display:flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: center;
    }
    .hero-banner-2 .flex-grid .flex-col-6:first-child div:nth-child(2){
        width:400px;
        height:400px;
    }

    .hero-banner-2 .flex-grid .flex-col-6:first-child div:nth-child(3){
        width:350px;
        height:350px;
    }

    .hero-banner-2 .flex-grid .flex-col-6:first-child div:nth-child(4){
        width:200px;
        height:200px;
    }
    .hero-banner-2 .flex-grid .flex-col-6:first-child img{
        max-width: 500px;

    }
}

.hero-banner-2 .flex-grid .flex-col-6:first-child{
    display: flex;
    justify-content: center;
}

.hero-banner-2 .flex-grid .flex-col-6:first-child img{
    width:100%;
    position: relative;
    z-index: 2;

    margin:0;
    animation:rotateImg infinite 10s linear;
}
@keyframes rotateImg {
    0%{
        transform: rotate(0deg);
    }
    100%{
        transform: rotate(360deg);
    }
}

.hero-banner-2 .flex-grid .flex-col-6:first-child div{
    clip-path: polygon(50% 0, 92% 25%, 93% 75%, 50% 100%, 8% 75%, 8% 25%);
    position:absolute;
    z-index: 1;
    background-color: var(--blue);
}
.hero-banner-2 .flex-grid .flex-col-6:first-child div:nth-child(2){
    opacity:0.4;
    animation: leftRight 6s infinite ease-in-out;
    background-color: var(--blue);
}
.hero-banner-2 .flex-grid .flex-col-6:first-child div:nth-child(3){
    opacity:0.3;
    animation: upDown 4s infinite ease-in-out;
    background-color: var(--lightBlue);
}
.hero-banner-2 .flex-grid .flex-col-6:first-child div:nth-child(4){
    opacity:0.2;
    animation: diagonal 8s infinite ease-in-out;
    background-color: var(--lightBlue);
}

@keyframes upDown {
    0%{
       
        transform: rotate(0deg);
    }
    50%{
   
        
    }
    100%{
 
        transform: rotate(-360deg);
    }
}
@keyframes diagonal {
    0%{
       
        transform: rotate(0deg);
    }
    50%{
        
        
    }
    100%{
 
        transform: rotate(360deg);
    }
}

@keyframes leftRight {
    0%{
     
        transform: rotate(0deg);
    }
    50%{
        
    }
    100%{
     
        transform: rotate(360deg);
    }
}


/*-=========================-*/
/*-=========================-*/
/*-=========Icons==========-*/
/*-=========================-*/
/*-=========================-*/


@media screen and (max-width:767px){
    .icon{
        width:100%;
        max-width:64px;
        margin-bottom:16px;
    }
}
@media screen and (min-width:767px){
    .icon{
        width:100%;
        max-width:64px;
        margin-bottom:16px;
    }
}

.border-card-blue{
    border:solid 2px var(--lightBlue);
}

.card{
    width:100%;
    border-radius: 10px;
    
}
.card :last-child{
    margin-bottom:0;
}
.card :last-child :last-child{
    margin-bottom:0;
}
@media screen and (max-width:1200px){
  .card{
    padding:24px;
  }  
  .cards .card:first-of-type{
    margin-bottom:var(--sm-margin);
}
    
}
@media screen and (min-width:1201px){
    .card{
        padding:36px;
        display:flex;
        align-items: flex-start;
        height:100%;
      }  
    .card .icon{
        max-width:80px;
        margin-right:36px;
    }
    
}


.flex-grid *[class*="flex-col"]:last-child{
    margin-bottom:0;
}

.white-bg{
    background-color:var(--white);
}

.xsm-margin{
    margin-bottom:var(--xsm-margin);
}
.sm-margin{
    margin-bottom:var(--sm-margin);
}
.med-margin{
    margin-bottom:var(--med-margin);
}
.lg-margin{
    margin-bottom:var(--lg-margin);
}
.xlg-margin{
    margin-bottom:var(--xlg-margin);
}