@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Roboto+Mono&display=swap');


:root{
     --main: #343b41;
}

*{
     margin: 0;
     padding: 0;
     box-sizing: border-box;

}

html{
     scroll-behavior: smooth;
}

body{
     font-family: 'DM Sans', sans-serif;
     background: rgb(247, 247, 247);
}

.navbar{
     background: #343b41;
}

.nav-link{
     color: gainsboro;
}

.nav-link:hover{
     color: steelblue;
}

.navbar-brand>img{
     border-radius: 5px;
     position: absolute;
     top: 8px;
     left: 1.25rem;
}

.navbar-toggler{
     color: rgba(255, 255, 255, 0.55);
     border-color: rgba(255, 255, 255, 0.1);
}

.navbar-toggler-icon{
     background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 0.55%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

.hero-wrapper{
     background: url(./images/herobg2.png) rgba(0, 0, 0, 0.2);
     background-repeat: no-repeat;
     background-size: cover;
     background-blend-mode: multiply;
	background-position: center;
     height: 72vh;
}



.welcome{
     padding-top: 15rem;
     font-family: 'Roboto Mono', monospace;
     color: gainsboro;
}


.article-container{
     background: white;
     color: rgb(20, 20, 20);
     padding: 1rem;
     border-radius: 10px;
}

.article-container img{
     border-radius: 10px;
}

.sub-container{
     gap: 2.5rem;
}

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

.btn-outline-custom{
     border-color: steelblue;
     color: steelblue;
}

.btn-outline-custom:hover{
     background: steelblue;
     color: white;
}


.footer-container{
     background: var(--main);
     padding: 4rem 3rem;
}



footer .site-links a{
     font-size: 14px;
     color: gainsboro;
     text-decoration: none;
}
footer .site-links a:hover{
     color: steelblue;
}

footer .icon-links a{
     font-size: 14px;
     color: grey;
}

.brand{
     font-family: 'Roboto Mono', monospace;
}

.btn-outline-custom2:hover{
     border-color: steelblue;
     color: steelblue;
     background: white;
}

.btn-outline-custom2{
     background: steelblue;
     color: white;
}

.footer-container>div:first-child{
     border-right: 1px solid grey;
}

footer h5{
     color: gainsboro;
}

@media(max-width: 767px){
     .footer-container>div:first-child{
          border-right: 0;
          align-self: center;
     }
     .mobile-no-border{
          border-right: 0!important;
     }

     :root footer input{
          width:100%!important;
     }

     :root footer button{
          width: 100px;
          align-self: center;
          padding: 5px;
          font-size: 1rem;
          
     }

     .icon{
          display: none;
     }

     .reference{
          display: none;
     }

     
}

@media(max-width: 991px){
     .mobile-no-border{
          border-right: 0!important;
     }
}

.form-control{
     width: 350px!important;
}

@media(min-width: 768px){
     .icon-links{
          margin-left: 13rem;
     }

     

}

@media(min-width:768px) and (max-width:1555px){
     .icon{
         display: none;
     }
}

.text-muted{
     font-family: 'Roboto Mono', monospace;
     background: rgb(194, 194, 194);
     font-size: 13px;
}

.icon{
     height: 30px;
     -webkit-filter: invert(100%);
     position: absolute;
     right: 3rem;
     bottom: -32rem;
     cursor: pointer;
}


@media(max-height:800px){
     .welcome{
          padding-top: 10rem;    
     }
}


.container{
     background: rgb(247, 247, 247);
}


body::-webkit-scrollbar {
     width: 5px;
     background: var(--main);
   }
   
   body::-webkit-scrollbar-thumb {
     background: #55a8fb;
     border-radius: 100px;
   }
   
   body::-webkit-scrollbar-thumb:hover {
     background: #70b7ff;
   }


.bg-info{
     background-color: steelblue!important;
}

.pills-margin{
     max-width: 800px;
     margin: 1rem auto;
     border: 1px gainsboro solid;
     border-radius: 5px;
}

.bg-custom3{
     background-color: rgba(93, 180, 252, 0.562)!important;
     border-color: rgba(85, 158, 218, 0.699);
}

.container-fluid-white{
     background-color: white!important;
     border: 1px solid rgba(233, 233, 233, 0.884);
     border-radius: 5px;
}


.container-fluid{
     padding-left: 0;
     padding-right: 0;
}

.list-group a{
     text-decoration: none;
     border-radius: 3px;
}

.list-group a li:hover{
     background-color: rgb(235, 235, 235)!important;
}

.img-fluid{
     border-radius: 5px 5px 0 0;
}

.img-fix{
     width: 100%;
}

.text-custom{
     color: steelblue!important;
}

.white-no-border-top{
     background-color: white!important;
     border-radius: 5px;
     border-bottom: 1px solid rgba(233, 233, 233, 0.884);
     border-right: 1px solid rgba(233, 233, 233, 0.884);
     border-left: 1px solid rgba(233, 233, 233, 0.884);
}

.white-no-border2{
     padding-left: 0;
     padding-right: 0;
}

.white-no-border3{
     padding-left: 0;
     padding-right: 0;
     background-color: white!important;
     border: 0;
     border-radius: 5px;
}

.nav-tabs{
     border: 1px solid rgba(233, 233, 233, 0.884);
    
}

.img-strategy{
     border-radius: 10px;
     height: 400px;
     width: 600px;
}

.custom-margin{
     min-height: 500px;
}


.font-title{
     font-family: 'Roboto Mono', monospace;
}

.text-muted-custom{
     color: #6c757d !important;
   }

::placeholder {
     color: rgb(212, 212, 212)!important;
     font-size: 14px;
}

.contact-icons a{
     color: grey;
}

.reference{
     color: grey;
     font-size: 12px;
}