body{
    background-image: url(/photos/Background3.png);
}

#our-story {
    box-sizing: border-box;
    text-align: justify;
    background-color: rgba(255, 255, 255, 0.44);
    backdrop-filter: blur(1vw);
    padding: 3vw;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3vw;
}

#what-we-do{
    display: flex;
    flex-direction: row;
    gap: 1vw;
    margin-top: 2vw;
    height: 30vw;
}

.what-we-do {
    text-align: justify;
    background-color: rgba(83, 81, 81, 0.17);
    backdrop-filter: blur(1vw);
    padding: 3vw;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 3vw;
}

.outer-fill{
    background-color: rgba(255, 255, 255, 0.6);
    backdrop-filter: blur(1vw);
    padding: 1vw;
    display: flex;
    flex-direction: column;
    gap: 3vw;
}

.outer-fill:hover{
    .inner-fill{
        transition: 0.3s ease-in-out;
        background-color: rgba(255, 255, 255, 0.8);
    }
}

.inner-fill{
    transition: 0.3s ease-in-out;
    background-color: transparent;
    padding: 0.5vw;
    display: flex;
    flex-direction: column;
    gap: 3vw;
}

.where-we-invest{
    width: 80vw;
    box-sizing: border-box;
    text-align: justify;
    background-color: rgba(83, 81, 81, 0.17);
    backdrop-filter: blur(1vw);
    padding: 3vw;
    display: flex;
    flex-direction: row;
    align-items: left;
    gap: 3vw;
}

@media (max-width: 768px) {
    .yellow{
        color: rgba(254, 238, 125, 1); 
        text-shadow:-1px -1px 0 #000,1px -1px 0 rgba(52, 82, 108, 1),-1px  1px 0 rgba(52, 82, 108, 1),1px  1px 0 rgba(52, 82, 108, 1); 
        padding-left: 2vw; 
        text-align: left;
    }
    h2.yellow{
        font-size: 2.5vw;
    }
    .wwi{
        width:70vw;
    }

    .where-we-invest-content{
        flex-direction: column;
        gap: 1vw;
        align-items: center;
    }

    .pair{
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .pair h2{
        font-size: 2.5vw; 
        width: auto;
        font-weight: 600;
    }

    .pair h1{
        font-size: 4vw; 
        width: auto;
        font-weight: 600;
    }

    .where-we-invest{
        align-items: center;
    }

    #what-we-do{
        flex-direction: column;
        height: auto;
        align-items: center;
    }

    .what-we-do.rounded{
        width: 85%;
    }

    .outer-fill.rounded{
        padding: 0.2vw; 
        text-align: center; 
        align-items: center;
    }

    .inner-fill.rounded{ 
        font-weight: 600;
        text-align: center;
    }
}

@media (min-width: 768px) {
    .yellow{
        color: rgba(254, 238, 125, 1); 
        text-shadow:-1px -1px 0 #000,1px -1px 0 rgba(52, 82, 108, 1),-1px  1px 0 rgba(52, 82, 108, 1),1px  1px 0 rgba(52, 82, 108, 1); 
        padding-left: 2vw; 
        text-align: left;
    }

    .where-we-invest-content{
         gap: 3vw; 
         flex-direction: row; 
         display: flex; 
         padding: 1vw; 
         justify-content: space-between;
    }

    .pair{
        display:flex; 
        flex-direction: row; 
        gap: 1vw; 
        align-items: center;
    }

    .pair h2{
        font-size: 1vw; 
        width: auto;
        font-weight: 600;
    }

    .pair h1{
        font-size: 2vw; 
        width: auto;
        font-weight: 600;
    }

    #what-we-do{
        height: 30vw;
    }

    .what-we-do.rounded{
        width: 50%;
    }

    .inner-fill.rounded{
        font-size: 1vw; 
        width: 33vw;
        font-weight: 600;
        text-align: left;
    }

    .outer-fill.rounded{
        padding: 0.2vw; 
        width: 35vw; 
        text-align: center; 
        align-items: center;
    }
    .where-we-invest-content.outer-fill.rounded{
        width: fit-content;
    }
    
}