main{
    background-color:#e1e2e6;
}

.hero{
    padding:150px 0px 150px;
    --s: 82px; /* control the size */
    --c1: #eeeeee;
    --c2: #f4f4f4;
    --c3: #f1f1f1;
    
    --_g: var(--c3) 0 120deg,#0000 0;
    background:
        conic-gradient(from -60deg at 50% calc(100%/3),var(--_g)),
        conic-gradient(from 120deg at 50% calc(200%/3),var(--_g)),
        conic-gradient(from  60deg at calc(200%/3),var(--c3) 60deg,var(--c2) 0 120deg,#0000 0),
        conic-gradient(from 180deg at calc(100%/3),var(--c1) 60deg,var(--_g)),
        linear-gradient(90deg,var(--c1)   calc(100%/6),var(--c2) 0 50%,
                            var(--c1) 0 calc(500%/6),var(--c2) 0);
    background-size: calc(1.732*var(--s)) var(--s);
    background-attachment: fixed !important;

    --index:1;
}

@keyframes slideInFromTop {
    0% {
      transform: translateY(-100%);
    }
    100% {
      transform: translateY(0);
    }
}

/* @media only screen and (max-width: 768px) {
    h1{
        font-size:15px;
    }
}
@media (min-width: 769px) {
    h1{
        font-size: 20px;
    }
} */

/* .mobile-container {
    margin: auto;
    border-radius: 10px;
  }
  
  .topnav {
        position: absolute;
      width: 50%;
      height:100%;
      right: 0;
  }
  
  .topnav #myLinks {
    display: none;
    position:absolute;
    background-color:#e1e2e6;
    right: 0;
    text-align: right;
    padding-top: 50px;
  }
  
  .topnav a {
    color: #1b1b1b;
    padding: 14px 16px;
    text-decoration: none;
    font-size: 30px;
    display: block;
  }
  
  .topnav a.icon {
    background: transparent;
    display: block;
    position: absolute;
    right: 0;
    top: 0;
  }
  
  .topnav a:hover {
    background-color: #e1e2e6;
    color: #1b1b1b;
  }
  
  .active {
    color: #1b1b1b;
  } */

h1{
    font-size:40px;
    font-family: "Roboto", sans-serif;
    font-weight: 300;
    font-style: normal;
    animation: 1s ease-out 0s 1 slideInFromTop;
    margin-bottom:25px;
    /* color:#FFF; */
    .mcc{
        font-size: 50px;
    } 
    .key{
        font-size: 50px;
    }
}

h2{
    text-align: left;
    font-size:30px;
    animation: 1s ease-out 0s 1 slideInFromTop;
}

h3{
    font-size: 20px;
    font-family: "Roboto", sans-serif;
    font-weight: 300;
    font-style: normal;
    text-align: left;
    /* color:#FFF; */
}

h5{    
    cursor: pointer;
}

.roboto-light {
    font-family: "Roboto", sans-serif;
    font-weight: 300;
    font-style: normal;
  }
  
  .roboto-regular {
    font-family: "Roboto", sans-serif;
    font-weight: 400;
    font-style: normal;
  }
.pov{
    padding-left:15px;
    padding-top:5px;
}

.icon{
    width:70px;
    height:70px;
    padding:10px;
}

p{
    font-family: "Roboto", sans-serif;
    font-weight: 300;
    font-style: normal;
    text-align: left;
    /* color:#FFF; */
}

.mcc{
    color:#595959;
    /* text-shadow: 1px 1px #777586; */
    font-family: "Roboto", sans-serif;
    font-weight: 300;
    font-style: normal;
}

.key{
    color:#1b3b7b;
    /* text-shadow: 1px 1px #2e4e8e; */
    font-family: "Roboto", sans-serif;
    font-weight: 300;
    font-style: normal;
}

.hero{
    button{
        width:250px;
    }
}

.card{
    button{
        width:340px;
    }
}


button{
    color: #1b1b1b;
    background-color: #e1e2e6;
    /* width:250px; */
    border-radius:25px;
    /*margin:25px;*/
    animation: 1s ease-out 0s 1 slideInFromTop;
    font-family: "Roboto", sans-serif;
    font-weight: 300;
    font-style: normal;
    border:none;
    padding:15px;
    a{
        color: #1b1b1b;
    }
}

.top{
    margin:25px;
}

/* .accordion-button:not(.collapsed) {
    color:white;
    background-color: #1b3b7b;
    box-shadow: inset 0 calc(-1* var(--bs-accordion-border-width)) 0 var(--bs-accordion-border-color);
} */

.accordion-button{
    color:white;
    background-color:#1b3b7b;
    border-radius:10px !important;
    border:none;
    margin-bottom:15px;
}

.accordion-body{
    padding-top:0px
}

.accordion-button:hover{
    background-color:#1b3b7b;
    color:white;
    opacity: .75;
    transition: 0.3s;
}

.accordion-button::after {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23FFFFFF'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
}

.accordion-button:not(.collapsed) {
    color: white;
    background-color: #1b3b7b;
    border:none;
}

.accordion-button:not(.collapsed)::after {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23FFFFFF'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
}

.accordion-button:focus {
    border:none;
    box-shadow:none;
}

button:hover {
    background-color:#cacbcf;
    opacity: .75;
    transition: 0.3s;
}

.container{
    padding-top:60px;
    padding-bottom:50px;
    width: 100%;
    text-align: left;
}

.page{
    margin-top:60px;
    margin-bottom:50px;
    h1{
        text-align: center;
        font-size:40px;
        padding-left:0px;
        font-family: "Roboto", sans-serif;
    font-weight: 300;
    font-style: normal;
        animation: 1s ease-out 0s 1 slideInFromTop;
    }
}

section{
    width: 100%;
    top: 70px;
    display: inline-block;
    padding: 10px;
    box-sizing: border-box;
    border-top:10px solid #1b3b7b;
    a{
        color: #e1e2e6;
    }
}

.about{
    border-top:10px solid #1b3b7b;
    position: relative;
    z-index: 99;
}

.contact{
    position: relative;
    z-index: 99;
    background-color: #e1e2e6;
}

.section:nth-child(2) {
    z-index: 2;
}
.section:nth-child(3) {
    z-index: 3;
}
.section:nth-child(4) {
    z-index: 4;
}

section:nth-of-type(even) {
    background-color:#e1e2e6;
    color:#1b1b1b;
}

section:nth-of-type(odd) {
    background-color:#f4f4f4;
    color: #1b1b1b;
}

.nav-link{
    color:#1b1b1b;
    font-family: "Roboto", sans-serif;
    font-weight: 300;
    font-style: normal;
}

.navbar{
    background-color: #e1e2e6;
    border-bottom:10px solid #1b3b7b;
    height:70px
}


.navbar-toggler{
    margin:10px;
    border:none;
    width:50px;
    box-shadow: none;
    right: 0;
    position: absolute;
}

.navbar-toggler:focus{
    border:none;
    box-shadow: none;
}

.inner{
    width: 300px;
    height: 100%;
    margin-top: 90px;
    right: 0;
    position: absolute;
}

.offcanvas.offcanvas-end {
    width: 300px !important;
    background-color: #eeeeee;
}

a{
    text-decoration: none;
    scroll-behavior: smooth;
    font-family: "Roboto", sans-serif;
    font-weight: 300;
    font-style: normal;
}
svg{
    width:25px;
    padding-bottom:15px;
}

.footer{
    position: relative;
    background-color:#e1e2e6;
    padding:15px;
    a{
        color:#1b1b1b;
    }
    a:hover{
        color:#1b1b1b;
        text-decoration: underline;
    }

    p{
        text-align: center;
    }

    /* .links{
        padding:10px 25px 25px 20px;
    }

    .copyright{
        font-size: 15px;
        color:#1b1b1b;
        position:absolute;
        right:0;
        padding-right:10px;
        margin-top: -25px;
    } */
}

.category{
    font-size:30px;
    text-align: left;
    padding-bottom: 15px;
    font-family: "Roboto", sans-serif;
    font-weight: 300;
    font-style: normal;
}

[data-toggle="collapse"] h5:after {  
    content: "\f139";
  }
  
  [data-toggle="collapse"].collapsed h5:after {
    content: "\f13a";
  }
  
.accordion-item {
    border:none;
    background-color:transparent;
    color: #1b1b1b;

}

.card{
    background-color:transparent;
    border:none;
    .btn{
        margin: 0px;
        padding: 0px;
        text-align: left;
        text-decoration: none;
        color:white;
    }
}

.card-header{
    background-color:#1b3b7b;
    border-radius:10px !important;
    border-bottom:none;
    text-decoration: none;
    margin:5px 0px;
    font-family: "Roboto", sans-serif;
    font-weight: 300;
    font-style: normal;
}

.card-body{
    font-family: "Roboto", sans-serif;
    font-weight: 300;
    font-style: normal;
}
  .wrapper .static-txt{
    color: #1b1b1b;
    font-size: 40px;
  }
  .wrapper .dynamic-txts{
    height: 90px;
    line-height: 90px;
    overflow: hidden;
  }

  @media (min-width: 577px) {
    /* section{
        position: sticky;
        height: 90vh;
    } */
    .hero{
        height:100vh;
    }
    .options{
        margin-left:15%;
      }
    .wrapper{
        display: flex;
      }
    .wrapper .dynamic-txts{
        margin-top: -20px;
        padding-left:0px;
        margin-left:-5px;
    }
    .brian{
        padding:0px 15px 15px 0px;
        float:left;
        width: 300px;
        height: 300px;
    }
    .contact{
        padding:70px;
    }
  }
  
  @media (max-width: 576px) {
    section{
        position: static;
        height: 100%;
    }
    .wrapper{
        display: block;
        margin-bottom:30px;
      }
    .wrapper .dynamic-txts{
        line-height:50px;
        margin-left: -5px;
    }
    .brian{
        padding-bottom:15px;
        width: 300px;
    }
    .slide{
        width:70%;
        padding-bottom:25px;
    }
    .contact{
        padding:50px;
        h2{
           padding-left:0px; 
        }
    }
    .options{
        margin-left:10%;
      }

    .navbar-toggler{
        display:none;
    }
  }

  .fadeIn{
	display: inline;
	text-indent: 8px;
}
.fadeIn span{
	animation: fadeEffect 6s linear infinite 0s;
	-ms-animation: fadeEffect 6s linear infinite 0s;
	-webkit-animation: fadeEffect 6s linear infinite 0s;
	color: #1b3b7b;
	opacity: 0;
	overflow: hidden;
	position: absolute;
    font-size: 40px;
}
.fadeIn span:nth-child(2){
	animation-delay: 2s;
	-ms-animation-delay: 2s;
	-webkit-animation-delay: 2s;
}
.fadeIn span:nth-child(3){
	animation-delay: 4s;
	-ms-animation-delay: 4s;
	-webkit-animation-delay: 4s;
}
.fadeIn span:nth-child(4){
	animation-delay: 6s;
	-ms-animation-delay: 6s;
	-webkit-animation-delay: 6s;
}

/*FadeIn Animation*/
@-moz-keyframes fadeEffect{
	0% { opacity: 0; }
	5% { opacity: 0; -moz-transform: translateY(0px); }
	10% { opacity: 1; -moz-transform: translateY(0px); }
	25% { opacity: 1; -moz-transform: translateY(0px); }
	30% { opacity: 0; -moz-transform: translateY(0px); }
	80% { opacity: 0; }
	100% { opacity: 0; }
}
@-webkit-keyframes fadeEffect{
	0% { opacity: 0; }
	5% { opacity: 0; -moz-transform: translateY(0px); }
	10% { opacity: 1; -moz-transform: translateY(0px); }
	25% { opacity: 1; -moz-transform: translateY(0px); }
	30% { opacity: 0; -moz-transform: translateY(0px); }
	80% { opacity: 0; }
	100% { opacity: 0; }
}
@-ms-keyframes fadeEffect{
	0% { opacity: 0; }
	5% { opacity: 0; -ms-transform: translateY(0px); }
	10% { opacity: 1; -ms-transform: translateY(0px); }
	25% { opacity: 1; -ms-transform: translateY(0px); }
	30% { opacity: 0; -ms-transform: translateY(0px); }
	80% { opacity: 0; }
	100% { opacity: 0; }
}
  .dynamic-txts li span{
    position: relative;
    margin: 5px 0;
    line-height: 90px;
  }
  .dynamic-txts li span::after{
    content: "";
    position: absolute;
    left: 0;
    height: 100%;
    width: 100%;
    /* animation: typing 3s steps(10) infinite; */
  }