@charset "utf-8";
/* CSS Document */
:root {
  --primary-bg-color: #407DBC;
}
html,body{
 font-family: "Instrument Sans", sans-serif;
  font-optical-sizing: auto;

  font-style: normal;
  font-variation-settings:
    "wdth" 100;
}
.btn-primary{background-color: var(--primary-bg-color);border:1px solid var(--primary-bg-color)}
em{ font-family: "Instrument Serif", serif;font-weight: 400;  font-style: italic;}
h1{font-weight: 500; letter-spacing: -2px;font-size:60px}
h3{font-weight: 500; letter-spacing: -1px;}
.sliderHome{padding-top: 5rem}
.sustain-home .text-black-gray{color: rgba(0,0,0,0.60) !important}
#navbar a:hover{color:var(--primary-bg-color); text-decoration: underline}
.navbar-nav .nav-link.active{color: var(--bs-black)}
#navbar {transition: box-shadow 0.3s ease-in-out; /* Smooth transition for the shadow */}
.shadow-active {box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Your desired shadow style */}
.section-image, .carousel-item img{width:625px; height: 625px; object-fit: cover}

@media (max-width: 576px) { 
    .sustain-home section .container{width: 100%}
    h1{font-size: 38px !important}
    .join-list input,.join-list button{width: 100%}
    .container .row .pt-5{padding-top: unset !important;}
}