@import url(roots.css);
 @media all and (min-width:1360px) {
     /*section 2*/
     .section-2 div {
         height: 550px;
         place-content: center;
     }
     /*section 2*/
     /*section 3*/
     .section-3 div {
         height: 550px;
         place-content: center;
     }
     /*section 3*/
 }
 
 @media all and (max-width:430px) and (max-height: 600px) {
     .section-2,
     .section-3 {
         height: max-content !important;
         row-gap: 10vh;
     }
     .section-2 div,
     .section-3 div {
         /* height: 100vh; */
         height: auto;
     }
     .section-3 div .sec-3-2 {
         position: relative;
         margin-top: 100px;
         background-color: pink;
     }
     /* .section-3>* {
        margin-top: 1vh; } */

       

 }
 
 @media all and (max-width: 1250px) {
     /*section 4*/
     .sec-4-1 {
         /* display: flex;
            gap: 2em; */
         flex-wrap: wrap;
     }
     /*section 4*/
     /*section 5*/
     .sec-5-1 {
         justify-content: flex-start;
     }
     /*section 5*/
     /*MEMBERS*/
     /*member section 3*/
     .members3-2 {
         flex-wrap: wrap;
         gap: 1em;
         /* justify-content: center; */
     }
     /*member section 3*/
     /*MEMBERS*/
 }
 
 @media all and (max-width: 900px) {
     /*generic investment*/
     .gi-1 {
         display: grid;
         grid-template-columns: 1fr 1fr;
         width: 100vw;
         margin: 50px auto 0;
     }
     .gi-2 {
         display: grid;
         grid-template-columns: 1fr 1fr;
         width: 100vw;
         margin: 0 auto 100px;
     }
     .gi-card-image {
         width: 50vw;
         height: 40vw;
     }
     .gi-1 .gi-card:nth-child(2),
     .gi-1 .gi-card:nth-child(3) {
         background-color: rgba(190, 220, 203, 0.15);
     }
     .gi-1 .gi-card:nth-child(1),
     .gi-1 .gi-card:nth-child(4) {
         background-color: transparent;
     }
     .gi-2 .gi-card:nth-child(2),
     .gi-2 .gi-card:nth-child(3) {
         background-color: rgba(190, 220, 203, 0.15);
     }
     .gi-2 .gi-card:nth-child(1),
     .gi-2 .gi-card:nth-child(4) {
         background-color: transparent;
     }
     /*generic investment*/
 }
 
 @media all and (max-width: 800px) {
     /*UNIVERSAL CLASSES*/
     .h1-type-one {
         font-size: 35px;
         
     }
     .p-type-one {
         font-size: 15px;
         padding-top: 5px !important;
        color: rgb(249, 249, 230);
     }
     
     .kasese-hero{
         font-size:25px !important;
     }
     /*UNIVERSAL CLASSES*/
     /*HEADER*/
     header {
         grid-template-columns: 1fr 3fr;
         position: relative;
         z-index: 1;
         align-items: center;
     }
     /* header>* {
        border: 1px dashed pink;
    } */
     header nav {
         background-color: rgba(0, 0, 0, 0.8);
         position: absolute;
         height: 100svh;
         height: 100vh;
         right: 0;
         top: 0;
         display: none;
         width: 100vw;
         /* visibility: hidden; */
     }
     /* header nav::before {
        content: "";
        background-color: rgba(0, 0, 0, 0.8);
        width: 200vw;
        height: 100vh;
        position: fixed;
        left: -50vw;
        right: 0;
        z-index: -1;
    } */
     header nav ul {
         display: inline-block;
         position: relative;
         margin: 0 5vw;
         /* background-color: blue; */
         /* height: 30px; */
     }
     header nav ul li {
         margin: 40px;
         text-align: center;
     }
     header nav ul li a {
         font-size: 18px;
         font-weight: 100;
         color: snow;
     }
     .wild-card-1 {
         display: none;
     }
     .wild-card-2,
     .wild-card-3,
     .wild-card-4,
     .menu-icon {
         display: block;
     }
     .wild-card-2 button {
         width: 40px;
         aspect-ratio: 1/1;
         font-size: 1.5em;
         font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
         font-weight: 100;
         border-radius: 50%;
         border: none;
         background-color: transparent;
         box-shadow: inset 0 -1px 3px rgba(128, 128, 128, 0.5), 0 0 5px rgba(128, 128, 128, 0.5);
         cursor: pointer;
         display: flex;
         place-items: center;
         justify-content: center;
         margin: auto;
         color: snow;
     }
     .wild-card-2 button:hover {
         animation-name: rotater1;
         animation-duration: 30s;
         animation-timing-function: linear;
         animation-iteration-count: infinite;
         animation-direction: alternate;
         animation-delay: 1s;
     }
     /*HEADER*/
     /*section hero*/
     .hero .content {
         padding: 0 5vw;
     }
     /*section hero*/
     /*section 2*/
     .section-type-two {
         grid-template-columns: 1fr;
     }
     .sec-2-2 h3 {
         width: 80%;
         margin: 5px auto 20px;
     }
     .sec-2-2 h4 {
         width: 80%;
         margin: 35px auto 0;
     }
     /*section 2*/
     /*section 5*/
     .sec-5-1 {
         justify-content: flex-start;
     }
     /*section 5*/
     /*section 7*/
     .section-7-1 {
         display: grid;
         grid-template-columns: 1fr 1fr;
     }
     .section-7-1-1:nth-child(1) {
         grid-column-start: 1;
         grid-column-end: 3;
     }
     .section-7-1-1 {
         display: grid;
         place-content: center;
     }
     /*footer alignment fix*/
     .section-7-1-1:nth-child(3),
     .section-7-1-1:nth-child(5) {
         align-content: start;
         /* /* place-items: end; */
         width: 100%;
     }
     .section-7-1-1:nth-child(4) {
         align-content: baseline;
     }
     /*footer alignment fix*/
     /*section 7*/
     /*MEMBERS */
     /*member section 2*/
     .members2-1 {
         grid-template-columns: 100%;
         width: auto;
         column-gap: 0;
         row-gap: 3em;
         margin: auto;
     }
     /* .members2-1>* {
        border: 1px dashed pink;
    } */
     .members2-1-1 {
         grid-column-start: 1;
         grid-column-end: 2;
     }
     .members2-1-2 p {
         width: 95%;
     }
     .members2-1-3 figure img {
         width: 100%;
     }
     /*member section 2*/
     /*member section 3*/
     .members3-2 div {
         text-align: center;
         width: min-content;
     }
     .members3-2 div img {
         background-color: var(--color-10);
         width: 230px;
         aspect-ratio: 1/1;
     }
     /*member section 3*/
     /*member section 4*/
     .members4-2 {
         display: flex;
         flex-wrap: wrap;
         gap: 10%;
         /* justify-content: space-evenly; */
     }
     .members4-2 div {
         text-align: center;
         width: 45%;
     }
     /*member section 4*/
     /*member section 6*/
     .members6 {
         grid-template-columns: 1fr;
     }
     /*member section 6*/
     /*MEMBERS */
     /*principles part*/
     .principles-heading {
         padding: 50px;
         width: 100%;
     }
     .principles {
         /* background-color: pink; */
         width: 90vw;
         margin: auto auto 55px auto;
         display: grid;
         gap: 3vw;
         grid-template-columns: 1fr 1fr;
     }
     .priciple-article {
         /* background-color: bisque; */
         width: 100%;
         position: relative;
         text-align: center;
         padding: 1vh 2vw;
         max-height: 350px;
     }
     .pa-image {
         width: 100px;
         aspect-ratio: 1 /1.5;
         /* margin: auto; */
         /* background-color: green; */
     }
     .principles_button {
         width: 100%;
         text-align: center;
         margin: 50px auto;
     }
     /*principles part*/
     /*gen investment*/
     .gen-investments .h2-type-two {
         max-width: min-content;
     }
     /*gen investment*/
 }
 
 @media all and (max-height:595px) {
     header {
         min-height: 100px;
     }
     header nav {
         height: auto;
     }
     /*section 3 and section 3*/
     .section-2 .sec-2-2,
     .section-3 .sec-3-2 {
         height: max-content !important;
     }
     /*section 3 and section 3*/
 }
 
 @media all and (max-width:600px) {
    .hero {
        height: 250px;
    }
    .hero-p{
transform: translateY(-20px);
margin-top: 20px;
    }

    .hero::before {
        
        background-image: linear-gradient(180deg, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 1));
    }
    .h1-type-one {
        font-size: 20px;
        /* font-weight: 200; */
    }
    .p-type-one{
        font-size: 12px;
        font-weight: 200;
    }

    .sec-2-1, .sec-3-1 {
        height: 400px !important;
    }
    .sec-4-1 {
        gap: 4vw;
    }
    .sec-4-1 div{
        width: 40vw;
        height: 35vw;
    }
    .sec-4-1 div h3 {
       font-size: 20px;
    }

    .gallery-2-images{
        width: 150px;
        height: auto;
    }
    .section-4 h2{
        width: min-content;
    }
 }

 @media all and (max-width: 500px) {
     .h2-type-three {
         width: auto;
     }
     /* .members2 {
        width: 50%;
    } */
     .h2-type-five {
         /* text-align: center; */
         margin: auto;
         font-size: 28px;
         margin-bottom: 25px;
         /* font-weight: 400; */
     }
     .members3-2 {
         justify-content: center;
     }
     /*section 7*/
     .section-7-1-1:nth-child(3) {
         width: 100%;
         /* background-color: purple; */
         padding: 0;
         margin: 0;
         text-align: left;
         place-content: start;
     }
     .section-7-1-1:nth-child(5) {
         width: 100%;
         /* background-color: yellowgreen; */
     }
     /*section 7*/
     /*generic investment*/
     .gi-1 {
         display: grid;
         grid-template-columns: 100%;
         width: 100vw;
     }
     .gi-2 {
         display: grid;
         grid-template-columns: 100%;
         width: 100vw;
         margin: 0 auto 100px;
     }
     .gi-card-image {
         width: 100vw;
         height: 60vw;
     }
     .gi-1 .gi-card:nth-child(even),
     .gi-2 .gi-card:nth-child(even) {
         background-color: rgba(190, 220, 203, 0.15);
     }
     .gi-1 .gi-card:nth-child(odd),
     .gi-2 .gi-card:nth-child(odd) {
         background-color: transparent;
     }
     /*generic investment*/
     /*principles of the organisation*/
     .principles {
         /* background-color: pink; */
         width: 90vw;
         margin: auto auto 55px auto;
         display: grid;
         gap: 3vw;
         grid-template-columns: 1fr;
     }
     /*principles of the organisation*/
     /*h2 headings*/
     .h2-type-two,
     .h2-type-one {
         font-size: var(--font-size-8);
     }
     /*h2 headings*/
     /*section 3 and section 3*/
     .section-2 .sec-2-2,
     .section-3 .sec-3-2 {
         height: max-content !important;
     }
     /*section 3 and section 3*/
 }
 
 @media all and (max-width:395px) {
     /*MEMBERS*/
     /*municipalities*/
     .sec-4_0-1 div {
         min-width: min-content;
         width: 40vw;
     }
     /*municipalities*/
     /*MEMBERS*/
 }
 
 @media all and (max-width: 450px) {
     /*section 4*/
     /* .section-4 {
         margin-top: 70px;
     } */
     /*section 4*/

     .story-1-1 {
         
        display: grid ;
            grid-template-columns: 1fr;
            gap: 3em;
            align-items: center;
    }
 }
 
 @keyframes rotater1 {
     25% {
         transform: rotate(90deg);
     }
     50% {
         transform: rotate(180deg);
     }
     75% {
         transform: rotate(270deg);
     }
     100% {
         transform: rotate(360deg);
     }
 }
 /* header nav {
    display: grid;
} */
 
 .display_grid {
     display: grid;
 }