/*Policy*/
.company
{
    width: 100%;
    height: auto;
    min-height: 94dvh;
    justify-content: start;
    align-items: flex-start;
    padding-top: 2rem;
    gap:2em;
    background-color: var(--light-grey);
}

.company-sidebar-desktop-container
{
    width: 30%;
    height: auto;
    position: relative;
    flex-direction: column;
}

.company-sidebar-desktop-container .policy-sidebar
{
    position: fixed;
    width: 20%;
    height: auto;
    justify-content: start;
    align-self:flex-end;
    top: 45dvh;
    border-radius: var(--border-radius);
    box-shadow: 0px 0px 10px -8px black;
    background-color: var(--white-color);
}

.company-sidebar-desktop-container .company-sidebar
{
    position: fixed;
    width: 20%;
    height: auto;
    align-self:flex-end;
    top: 17dvh;
    border-radius: var(--border-radius);
    box-shadow: 0px 0px 10px -8px black;
    background-color: var(--white-color);
}

.company-sidebar-desktop-container .company-sidebar-topics
{   width: 100%;
    flex-direction: column;
    align-items: flex-start;
}

.company-sidebar-desktop-container .sidebar-topic 
{
    width: 100%;
    display: block;
    position: relative;
    height: min-content;
    padding:0.5rem 2rem;
    text-align: left;
    font-family: 'Satoshi-Light';
    text-decoration: none;
    font-weight: 600;
    color: var(--primary-color);
    justify-content: flex-start;
    border-radius: var(--border-radius); 
    font-size: var(--fs-policy-explain);
    transition: all .35s;
}

.company-sidebar-desktop-container .sidebar-topic:after
{
    position: absolute;
    content: "";
    top: 0;
    left: 0;
    width: 0;
    height: 100%;
    background: var(--primary-color);
    border-radius: var(--border-radius);
    color: var(--white-color);
    transition: all .5s;
}
  
.company-sidebar-desktop-container .sidebar-topic:hover
{
    color: var(--white-color);
}

.company-sidebar-desktop-container .sidebar-topic:hover:after
{
    width: 100%;
}

.company-sidebar-desktop-container .sidebar-topic span
{
    position: relative;
    z-index: 2;
}

.company-sidebar-desktop-container .sidebar-topic-active
{
    background-color: var(--primary-color);
    color: var(--white-color);
}

.company-sidebar-mobile-container
{
    display: none;
    padding: 1em 0;
    gap: 0.5em;
    flex-direction: column;
    justify-content: baseline;
    align-items: baseline;
    font-family: 'Satoshi-Medium';
}

.company-sidebar-mobile
{
    display:none;
    height: min-content;
    background-color: var(--white-color);
    border-radius: var(--border-radius);
}

.company-sidebar-mobile .company-sidebar-topics
{
    flex-direction: column;
    padding: 3dvh 6dvw;
    justify-content: baseline;
    align-items: baseline;
    font-size: var(--fs-policy-explain);
    gap: 1em;
    color: var(--primary-color);
}
.company-sidebar-mobile .company-sidebar-topics a{
    border-bottom: 1px solid var(--accent-color);
    cursor: pointer;
    text-align: left;
}

.company-text-container
{
    width: 100%;
    height: auto;
    padding: 6dvh 6dvw;
    background-color: var(--white-color);
    flex-direction: column;
    justify-content: flex-start;
    border-radius: var(--border-radius);
}

.company-text
{
    display: none;
    justify-content: flex-start;
    align-items: flex-start;
}

.company-active
{
    display: flex;
}

table
{
    width: 100%;
    margin: 1em 0;
    font-size: var(--fs-policy-explain);
}

.company-text-container *
{
    flex-direction: column;
}

.company-text-container p
{
    margin: 0.4em 0;
}

.company-text-container p, li
{
    text-align: justify;
    font-size: var(--fs-policy-explain);
    color: darkslategray;
}

a
{
    text-align: left;
}

h1,h3,h4
{
    font-family: 'Satoshi-Medium';
}

h1
{
    font-size: var(--fs-policy-h1);
}

h3
{
    font-size: var(--fs-policy-h3);
}

h4
{
    font-size: var(--fs-policy-h4);
}


/*Features*/
#features
{
    flex-direction: column;
    width: 100%;
    gap: 1em;
    height: auto;
    align-items: center;
}

.features-container
{
    width: 90%;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 1em;
    aspect-ratio: 1;
}

.feature-title 
{
    font-weight: 600;
    font-size: var(--fs-policy-h1);
}

.features-text-container
{
    width:clamp(15rem,50%, 25rem);
    justify-content: center;
    align-items: center;
    aspect-ratio: 1;
    background-color: var(--accent-light-color);
     border-radius: var(--border-radius);
}

.features-text-container p
{
    text-align: center;
}


/*Vision and Mission*/
#vision
{
    flex-direction: row;
    scroll-margin-top: 7em;
    gap: 1em;
}


.vision-text
{
    text-align: center;
    border-radius: var(--border-radius);
}


.mission-text
{
    text-align: center;
    border-radius: var(--border-radius);

}

.vision-text h1, .mission-text h1
{
    color: var(--accent-color);
}

.vision-text p, .mission-text-p
{
    text-align: center;
}

/* Scroll Margin */
#privacyPolicy, #cookiePolicy, #customerClarification, #siteClarification, #customerPolicy, #cookiePolicy, #aboutUs, #vision, #features
{
    scroll-margin-top: 20rem;
    
}


 @media only screen and (max-width: 1430px)
{
    .company-sidebar-desktop-container .policy-sidebar 
    {
        width: 25%;
    }
    .company-sidebar-desktop-container .company-sidebar 
    {
        width: 25%;
    }
}


@media only screen and (max-width: 1024px)
{
    
    .company
    {
        flex-direction: column;
    }

    .company-sidebar-desktop-container
    {
        display: none;
    }

    .company-sidebar-mobile-container
    {
        display: flex;
    }

    .company-text-container
    {
        width: 100%;
        align-items: baseline;
    }

    .company-text-container p, li
    {
        text-align: left;
    }
}

@media only screen and (max-width: 620px)
{

    #vision
    {
        flex-direction: column;
    }

    .vision-text, .mission-text
    {
        width: 100%;
        padding: .5em;
    }

    .company-active
    {
        display: flex;
        padding: 0;
    }

}
   
 

