﻿/*---------------------------------------------------------------------------------------------------------------------------------------------*/
/*---------------------------------------------------------------------------------------------------------------------------------------------*/

:root {
    --container-padding-top-large: 55px;
    --container-padding-bottom-large: 75px;
    --container-padding-tb-small: 35px;
}

@media (max-width: 430px) {
    .container-index-top {flex-direction:column; gap:20px; padding: var(--container-padding-tb-small) 0px var(--container-padding-tb-small) 0px;}
    .container-index-top-child-left {width: 100%;} 
    .container-index-top-child-right {width: 100%; flex-direction:column; gap:40px;}
    .container-index-top-child-right-child { text-align:center; }
    .div-right-border {border-right: 0px solid black;}
    .container-heard {flex-direction: column; padding: var(--container-padding-tb-small) 0px var(--container-padding-tb-small) 0px;}
    .container-immune {padding: 10px 0px 0px 0px;}
    .container-founder {flex-direction: column; padding: var(--container-padding-tb-small) 0px var(--container-padding-tb-small) 0px;}
    .container-steps-outer { padding: var(--container-padding-tb-small) 0px var(--container-padding-tb-small) 0px;}
    .container-steps {flex-direction: column; row-gap:25px;}
    .container-services {flex-direction: column;}
    .container-mainstream { padding: var(--container-padding-tb-small) 0px var(--container-padding-tb-small) 0px;}
    .home-image { background-image: url(../images/Digital-shield-banner_mobile.jpg); }
    .services-background-wide-grey { height: 1025px;}
}

@media (min-width:431px) {
    .container-index-top {flex-direction:column; gap:20px; padding: var(--container-padding-tb-small) 0px var(--container-padding-tb-small) 0px;}
    .container-index-top-child-left {width: 100% }
    .container-index-top-child-right {width: 100%; flex-direction:column-reverse; gap:50px;}
    .container-index-top-child-right-child { text-align:center;}
    .div-right-border {border-right: 0px solid black;}
    .container-heard {flex-direction: column; padding: var(--container-padding-tb-small) 0px var(--container-padding-tb-small) 0px;}
    .container-immune {padding: 20px 5px 0px 5px;}
    .container-founder {flex-direction: column; padding: var(--container-padding-tb-small) 0px var(--container-padding-tb-small) 0px;}
    .container-steps-outer { padding: var(--container-padding-tb-small) 0px var(--container-padding-tb-small) 0px;}
    .container-steps {flex-direction: column; row-gap:25px;}
    .container-services {flex-direction: column;}
    .container-mainstream { padding: var(--container-padding-tb-small) 0px var(--container-padding-tb-small) 0px;}
    .home-image { background-image: url(../images/b60e518d-e411-4e76-9eb1-d877b46fcf77.png);}
    .services-background-wide-grey { height: 1025px; }
}
@media (min-width:1000px) {
    .container-index-top {flex-direction:row; padding: var(--container-padding-tb-small) 0px var(--container-padding-bottom-large) 0px;}
    .container-index-top-child-left {width: 40%; padding: 35px 0px 35px 0px;}
    .container-index-top-child-right {width: 60%; padding-left:50px; flex-direction:row;}
    .div-right-border {border-right: 1px solid rgba(80,80,80,1);;}
    .container-heard {flex-direction: row; padding: var(--container-padding-top-large) 0px var(--container-padding-bottom-large) 0px;}
    .container-immune {padding: var(--container-padding-top-large) 0px var(--container-padding-bottom-large) 0px;}
    .container-founder {flex-direction: row; padding:var(--container-padding-top-large) 0px var(--container-padding-bottom-large) 0px;}
    .container-steps-outer { padding: var(--container-padding-top-large) 0px var(--container-padding-bottom-large) 0px;}
    .container-steps {flex-direction: row;}
    .container-services {flex-direction: row;}
    .container-mainstream { padding: var(--container-padding-top-large) 0px var(--container-padding-bottom-large) 0px;}
    .home-image { background-image: url(../images/b60e518d-e411-4e76-9eb1-d877b46fcf77.png);}
    .services-background-wide-grey { height: 325px;}
}

/*---------------------------------------------------------------------------------------------------------------------------------------------*/
/*---------------------------------------------------------------------------------------------------------------------------------------------*/

.container-home-banner {
    align-items: flex-start;
    display: flex;
    flex-flow: column nowrap;
    gap: 20px;
    height: 230px;
    justify-content: center;
}

.container-home-banner-child {
}

.container-index-top {
    display:flex;
}
.container-index-top-child-left, container-index-top-child-right {
    align-content:center;
    text-align:center;
}

.container-index-top-child-right {
    display: flex;
    align-items:center;
}

.container-index-top-ce-image {
    width:100%;

}

.container-heard {
    align-items: center;
    display: flex;
    flex-wrap: nowrap;
    column-gap: 50px;
}

.container-heard-child {
}

.container-immune {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
}

.container-founder {
    align-items: center;
    align-content: center;
    display: flex;
    flex-wrap: nowrap;
    column-gap: 100px;
    justify-content: space-between;
}

.container-founder-child {
}

.container-steps-outer {
}

.container-steps {
    align-items: center;
    align-content: center;
    display: flex;
    flex-wrap: nowrap;
    justify-content: center;
}

.container-steps-child1 {
    text-align: center;
}

.container-steps-child2 {
}

.container-steps-link {
    padding-top: 10px;
    text-align: center;
}

.container-services {
    align-items: center;
    align-content: center;
    display: flex;
    flex-wrap: nowrap;
    gap: 20px;
    justify-content: center;
    padding-top: 10px;
    padding-bottom: 20px;
}

.container-services-child {
    background: rgb(255,255,255);
    height: 350px;
    text-align: center;
    width: 300px;
}

.container-mainstream {
}

.content-narrow {
    padding-left: 4rem;
}

.header-large {
    color: #434549;
    font-weight: 600;
    text-align: center;
}

.header-medium {
    color: #434549;
    font-weight: 600;
    text-align: center;
}

.home-image {
    background-color: rgb(2,112,135);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    height: 230px;
}

.image-canoe {
    width: 66%;
    height: auto;
}

.image-founder {
    width: auto;
    height: auto;
}

.image-icon {
    width: 100px;
    height: auto;
}

.image-lock {
    height:auto;
    width:auto;
}

.services-background-wide-blue {
    background-color: rgb(177,224,230);
    height: 175px;
    width: 100%;
}

.services-background-wide-white {
    background-color: rgb(255,255,255);
    height: 20px;
    width: 100%;
}

.services-background-wide-grey {
    background-color: rgb(230,231,232);
    width: 100%;
}



