@import url('https://fonts.googleapis.com/css2?family=Unna:ital,wght@0,400;0,700;1,400;1,700&display=swap');
/* ### */
html {
    scroll-behavior: smooth;
}
body{
    color: #656d78;
    background-color: #f8f8f6;
}
.accordion-button:not(.collapsed) {
    background-color: white;
    color: #000;
}
.bg-gray{
    background-color: #f7f7f7;
}
.bg-whites{
    background-color: #f8f8f6;
}
.bg-columns-pattern{    
    background: url(../assets/pattern-30-body.png), #f8f8f6;
    background-repeat: repeat;
    background-attachment: none;
    background-size: 75%;
    background-position: center;
}
.bg-columns-pattern-hero{    
    background: url(../assets/Background-website-off-white.png), #f8f8f6;
    background-repeat: repeat;
    background-size: 100%;
    background-position: center;    
}
.bg-columns-pattern-hwch{    
    background: url(../assets/Background-howwecanhelp.png), #f8f8f6;
    background-repeat: repeat;
    background-size: 100%;
    background-position: center;    
}
.card-project{
    display: block;
    cursor: pointer;
    background-color: white;

    transition:all ease .3s
}
.card-project:hover{
    background-color: #DEDED2;
    color:#111;
}

.color-gray{
    color: #656d78!important;
}
.custom-height{
    height: calc(100vh - 90px);
}
.custom-list{
    list-style-type: none; 
    padding-left: 0; 
}
.custom-list li {
    background-image: url('../assets/Vector-1.svg'); 
    background-size: 0.5em;
    background-position: 0 8px;
    background-repeat: no-repeat;
    padding-left: 1rem;
    margin-bottom: 10px;
}
.font-unna{
    font-family: 'Unna', serif;
}
.nav-link{
    font-weight: 600;
}
.text-justify {
    text-align: justify;
}
.rotated-lg-wrapper {
    position: relative;
  }

@media (min-width: 992px) {
    .pt-lg-8{
        padding-top: 8rem!important;        
    }
    .pb-lg-8{       
        padding-bottom: 8rem!important;
    } 
    .rotated-lg {
      transform: rotate(-90deg);
      white-space: nowrap;
    }
    .rotated-lg-wrapper::before {
        content: "";
        position: absolute;
        top: 70px;
        bottom: 0;
        left: 50%;
        width: 3px;
        height: 190vh;
        background-color: #000;
        transform: translateX(-50%);
    }
    .top-lg-5rem{
        top: 5rem!important;
    }
    .top-lg-7rem {
        top: 7rem!important;
    }
    .top-lg-12rem{
        top: 12rem!important;
    }
    .top-lg-25rem{
        top: 25rem!important;
    }
    .op-lg-35rem{
        top: 3.5rem!important;
    }
  }