@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700&display=swap');

*{
     margin: 0;
     padding: 0;
     box-sizing: border-box;
}
:root{
     /* --main-color: #0e926b;
     --secondary-color: #ff9f0d; */
     --main-color: #0085c9;
     --semi-color: #0e926b; 
     --new-semicolor: #46a759;
     --secondary-color: #fac40b;
}
body{
     font-family: "Poppins";
     background: rgb(250, 250, 250);
}
body::-webkit-scrollbar {
    width: 6px; 
  }
  body::-webkit-scrollbar-track {
    background: rgba(250, 250, 250, 0.133);  
  }
  body::-webkit-scrollbar-thumb {
    background-color: var(--main-color); 
    border-radius: 20px;    
  }
ul{
     list-style: none;
}
a{
    text-decoration: none;
}
img{
     width: 100%;
     height: 100%;
     object-fit: cover;
}

/* Utilities */
.inner-row{
     width: 90%;
     margin: auto;
}

.landing{
     width: 100%;
     height: 150vh;
     position: relative;
     overflow: hidden;
     
}
header{
    height: 90px;
    position: fixed;
    width: 100%;
    z-index: 200;
}
header.onScroll{
     background: white;
     box-shadow: 0px 4px 4px -7px #111;  
}
.header-content,
header .inner-row{
     height: inherit;;
}
.header-content{
     display: flex;
     justify-content: space-between;
     align-items: center;
}
.logo{
    width: 180px;
    height: inherit;
}
.logo a{
     height: inherit;
     display: flex;  
     padding: 10px 0;
}
.logo .simple-logo{
    width: 100%;
    background: url("./img/logo2.png") no-repeat;
     background-size: contain; 
}
header.onScroll .logo .simple-logo{
      background: url("./img/logo.png") no-repeat;
      background-size: contain;
}
.logo img{
     object-fit: contain;
}

.header-content nav ul,
.header-content .quick-contact{
    display: flex;
    gap: 30px;
}
.header-content nav ul li a{
      font-size: 15px;
      font-weight: 400;
      color: #fff;
}
header.onScroll nav ul li a{
    color: #333;
}
.header-content nav ul li a:hover{
     color: var(--main-color);
}
.header-content ul li a:hover,
.header-content ul li.current a,
.sidebar-content ul li a:hover,
.sidebar-content ul li.current a{
      color:var(--main-color);
}
.header-content ul li::after{
      content:"";
      height:2px;
      background:var(--main-color);
      width:0;
      display:block;
      margin-top: 10px;
}
.header-content ul li:hover::after,
.header-content ul li.current::after{
      width:100%;
      transition: all 1s ease;
      -webkit-transition: all 1s ease;
      -moz-transition: all 1s ease;
      -ms-transition: all 1s ease;
      -o-transition: all 1s ease;
}
.header-content .quick-contact .number,
.sidebar-content .number{
      display: flex;
      align-items: center;
      gap: 5px;
}
.header-content .quick-contact .number span,
.sidebar-content .number span{
      font-size: 20px;
      color: var(--secondary-color);
      margin-top: 5px;
}
.header-content .quick-contact h3{
      font-weight: 300;
      color: white;
      font-size: 16px;
}
header.onScroll .quick-contact h3{
    color: #333;
}
.header-content .quick-contact button,
.sidebar-content button{
       width: 150px;
       height:50px;
       border-radius: 5px;
       font-family: "Poppins";
       background: var(--secondary-color);
       border: none;
       font-size: 14px;
       cursor: pointer;
       color: white;
}


.navTrigger{
    cursor: pointer;
    width:35px;
    height:25px;
    margin:auto;
    position:absolute;
    right:50px;
    top:30px;
    display:none;
}
.navTrigger i{
    background:#fff;
    width:100%;
    content: "";
    display:block;
    height:3px;
    border-radius: 2px;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    -ms-border-radius: 2px;
    -o-border-radius: 2px;
}
header.onScroll .navTrigger i{
     background-color: #111;
 }

.navTrigger i:nth-child(1){
    animation:outTp 0.8s backwards;
    -webkit-animation:outTp 0.8s backwards;
    animation-direction: reverse;
}
.navTrigger i:nth-child(2){
    margin:5px 0;
    animation:outMd 0.8s backwards;
    -webkit-animation:outMd 0.8s backwards;
    animation-direction: reverse;
}
.navTrigger i:nth-child(3){
    animation:outBtm 0.8s backwards;
    -webkit-animation:outBtm 0.8s backwards;
    animation-direction: reverse;
}
.navTrigger.active i:nth-child(1) {
    -webkit-animation: inTp 0.8s forwards;
    animation: inTp 0.8s forwards;
}

.navTrigger.active i:nth-child(2) {
    -webkit-animation: inMd 0.8s forwards;
    animation: inMd 0.8s forwards;
}

.navTrigger.active i:nth-child(3) {
    -webkit-animation: inBtm 0.8s forwards;
    animation: inBtm 0.8s forwards;
}

#sidebar{
      position: fixed;
      left: 0;
      top:0;
      width: 500px;
      background: white;
      z-index: 400;
      bottom: 0;
      padding-top: 50px;
      transform: translateX(-100%);
      transition: transform 0.5s ease-in-out;
      box-shadow: 2px 0px 4px -5px #222;
}
#sidebar.active{
      transform: translateX(0);
}
.sidebar-content .close-btn{
      position: absolute;
      right: 30px;
      font-size: 30px;
      cursor: pointer;
}
.sidebar-content .logo a{
    text-align: left;
    margin-bottom: 20px;
    display: block;
}

.sidebar-content .quick-contact h3{
    font-weight: 300;
    color: #222;
}
.sidebar-content ul li{
     line-height:60px;
     position: relative;
}
.sidebar-content ul li a{
    position: relative;
    color: #333;
}
.sidebar-content ul li a::after{
    content:"";
    height:2px;
    background:var(--main-color);
    width:0;
    position: absolute;
    left: 0;
    display: inline-block;
    bottom: -10px;
}
.sidebar-content ul li a:hover::after,
.sidebar-content ul li.current a::after{
      width:100%;
      transition: all 1s ease;
      -webkit-transition: all 1s ease;
      -moz-transition: all 1s ease;
      -ms-transition: all 1s ease;
      -o-transition: all 1s ease;
}

.sidebar-content .quick-contact{
    margin-top: 30px;
    gap: 20px;
    display: flex;
    flex-direction: column;
}

.landing-slider, .landing-slide,
.landing-slide .inner-row{
     height: inherit;
}
.landing-slide .inner-row{
     display: flex;
     justify-content: center;
     align-items: center;
}
.landing-slide .slide-bg{
    width:100%;
    height:150vh;
    position:absolute;
    left:0;
    top:0;
    overflow: hidden;
    background: linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.3));
}
.landing-slide .slide-bg img{
    width:100%;
    height:150vh;
    position:absolute;
    left:0;
    top:0;
    animation:zoom-out 10s linear infinite;
    -webkit-animation:zoom-out 10s linear infinite;
    z-index:-1;
}
.landing-slide .landing-texts{
    text-align: center;
    position: relative;
    z-index: 10;
    margin-top: -15%;
}
.landing-texts h2{
    font-size: 18px;
    text-transform: uppercase;
    color: var(--main-color);
    font-weight: 300;
    animation:slideDown 1s ease-in;
}
.landing-texts h1{
    font-size: 60px;
    color: white;
    font-weight: 600;
    width: 75%;
    margin: auto;
    animation:zoomIn 1s ease-in;
      -webkit-animation:zoomIn 1s ease-in;
}
.landing-texts a{
     width: 200px;
     height: 55px;
     background: var(--secondary-color);
     align-items: center;
     border-radius: 5px;
     display: inline-flex;
     justify-content: center;
     margin-top: 20px;
     color: white;
     position: relative;
     z-index: 99;
     animation:slideUp 1s ease-in;
}
.custom-shape-divider-bottom-1668436892 {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    overflow: hidden;
    line-height: 0;
}

.custom-shape-divider-bottom-1668436892 svg {
    position: relative;
    display: block;
    width: calc(100% + 1.3px);
    height: 205px;
}

.custom-shape-divider-bottom-1668436892 .shape-fill {
    fill: #FAFAFA;
}


/* Nudge Section */
#nudge{
    padding: 50px 0 100px 0;
    overflow: hidden;
}
.nudge-content{
      display: grid;
      grid-template-columns: repeat(2,1fr);
      gap: 40px;
}

.nudge-box{
    display: grid;
    grid-template-columns: repeat(2,1fr);
    background: var(--semi-color);
    height: 350px;
    border-radius: 0px 50px 0px 50px;
    overflow: hidden;
    transition: all 0.5s ease;
}
.nudge-box:hover{
    box-shadow: 0px 0px 8px -4px rgb(0, 30, 9);
}
.nudge-box .image-box{
     overflow: hidden;
}
.nudge-box .image-box,
.image-box img{
      border-radius: 0px 40px 0px 40px;
      transition: transform 1s ease;
}

.nudge-box .nudge-text{
     display: flex;
     justify-content: center;
     align-items: center;
     padding: 0 30px;
}
.nudge-text h1{
    font-weight: 500;
    line-height: 32px;
    color: whitesmoke;
}
.nudge-text p{
    font-size: 15px;
    margin: 10px 0;
    color: whitesmoke;
    font-weight: 300;
}
.nudge-text a{
      width: 150px;
      display: flex;
      gap: 5px;
      align-items: center;
      background: var(--secondary-color);
      justify-content: center;
      color: whitesmoke;
      font-size: 15px;
      height: 45px;
      border-radius: 5px;
}
.nudge-text a span{
    display: inline-flex;;
}

.nudge-box:hover .image-box img{
       transform: scale(1.2);
}

/* About Section */
#about{
     padding: 60px 0px 100px 0px;
     overflow: hidden;
}

.intro-section{
    text-align: center;
    width: 800px;
    margin: auto;
}
.intro-section h3{
    font-weight: 400;
    text-transform: uppercase;
    color: var(--main-color);
}
.intro-section h1{
    font-size: 45px;
    font-weight: 700;
    width: 90%;
    margin: 10px auto;
}
.intro-section h5{
     font-size: 20px;
     margin: 10px 0;
     font-weight: 500;
}
.intro-section p{
    font-size: 16px;
    line-height: 30px;
    font-weight: 300;
}

.features-row{
     display: grid;
     grid-template-columns: repeat(4,1fr);
     gap: 30px;
     margin-top: 50px;
}
.features-row .feature-icon{
    width: 70px;
    height: 70px;
    margin: auto;
}
.feature-icon img{
     object-fit: contain;
}
.feature-moja{
      text-align: center;
      background: white;
      padding: 70px 30px;
      border-radius: 0px 50px 0px 50px;
      transition: all 0.5s ease;
}
.feature-moja:hover{
     box-shadow: 0px 0px 30px -15px rgb(90, 90, 90);
}
.feature-moja h2{
     font-weight: 400;
     font-size: 20px;
     margin: 10px 0;
}
.feature-moja p{
    font-size: 15px;
    font-weight: 300;
}

.about-description-container{
     margin-top: 120px;
     display: grid;
     grid-template-columns: repeat(2,1fr);
     gap: 40px;
     background: white;
     border-radius: 40px 0px 40px 0px;
     overflow: hidden;
}
.about-description-texts{
     padding: 100px 10%;
}
.about-description-texts h1{
    font-weight: 400;
    margin-bottom: 20px;
}

.about-shift-links ul{
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
    gap: 20px;
}
.about-shift-links ul li{
      width: 150px;
      height: 45px;
      display: flex;
      justify-content: center;
      align-items: center;
      border-radius: 45px;
      color: #222;
      font-size: 14px;
      cursor: pointer;
}
.about-shift-links ul li.active,
.about-shift-links ul li:hover{
    background: var(--main-color);
    color: white;
}

.shift-container-moja{
     margin-top: 30px;
}
.shift-container-moja p{
    font-size: 16px;
    font-weight: 300;
    line-height: 30px;
    margin-bottom: 10px;
}
.shift-container-moja h3{
    font-size: 24px;
    text-transform: uppercase;
    font-weight: 500;
    margin-top: 20px;
    color: var(--main-color);
}

.shift-container-moja .value-moja h2{
    font-size: 20px;
    font-weight: 400;
    display: flex;
    gap: 5px;
    align-items: center;
}
.value-moja h2 span{
    display: inline-flex;
    margin-top: -3px;
    color: var(--main-color);
}
.about-image-side{
     background: url("./img/landing1.jpg") no-repeat;
     background-size: cover;
     position: relative;
     border-radius: 400px 0px 0px 260px;
}

.team-section{
    margin-top: 100px;
}
.team-section h1{
     font-size: 45px;
     text-align: center;
}
.team-section p{
      text-align: center;
      text-transform: uppercase;
      color: var(--main-color);
}
.leaders{
     display: flex;
     justify-content: center;
     gap: 50px;
     flex-wrap: wrap;
     margin-top: 60px
}
.leader-moja .image-section{
    width: 300px;
    height: 300px;
    border-radius: 50%;
}
.leader-moja .image-section img{
    border-radius: inherit;
}
.leader-moja h2{
    font-weight: 400;
    font-size: 18px;
    text-align: center;
    margin-top: 30px;
}
.leader-moja h4{
    font-weight: 400;
    text-align: center;
    color: gray;
    font-size: 14px;
}

.leader-moja .social-links ul{
    display: flex;
    justify-content: center;
    gap: 15px;
    margin-top: 10px
}

.leader-moja .social-links ul li a{
    font-size: 20px;
}
.leader-moja .social-links ul li:nth-child(1) a{
    color: rgb(31, 108, 202);
}
.leader-moja .social-links ul li:nth-child(2) a{
    color: rgb(32, 177, 255);
}
.leader-moja .social-links ul li:nth-child(3) a{
    color: rgb(202, 31, 114);
}
.other-team-members{
    margin-top: 80px;
}
.other-team-members h1{
     font-weight: 600;
     font-size: 40px;
     text-align: center;
     margin-bottom: 50px;
}
.members{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 50px;
}
.leader-moja.version2 .image-section{
      width: 250px;
      height: 250px;
      margin: auto
}
#sectors{
     padding-bottom: 80px;
}
.sectors-container-row{
     display: grid;
     grid-template-columns: repeat(3,1fr);
     gap: 50px;
     margin-top: 50px;
}
.sector-moja{
    height: 500px;
    width: 100%;
    position: relative;
    display: flex;
    align-items: flex-end;
    padding: 40px 40px 60px;
    border-radius: 0px 40px 0px 40px;
    overflow: hidden;
    transition: transform 0.5s ease;
}
.sector-moja:hover{
     transform:scale(1.015);
}
.sector-image-body{
     position: absolute;
     top: 0;
     bottom: 0;
     left: 0;
     right: 0;
}
.sector-moja .sector-image-overlay{
     position: relative;
     background: linear-gradient(rgba(60, 55, 46, 0.35), rgba(2, 1, 1, 0.75));
     bottom: 0;
     height: 500px;
     z-index: 3;
}
.sector-image img{
     filter: blur(0.6px);
     z-index: 2;
     position: absolute;
     top: 0;
}
.sector-moja .icon-section{
    width: 80px;
    height: 80px;
}

.sector-content{
     position:relative;
    z-index: 5;
}
.sector-texts h3{
    font-size: 18px;
    font-weight: 300;
    color:white;
    margin-top: 20px;
}

#achievements{
     padding: 50px 0px 100px 0;
}

.achievement-row{
    display: grid;
    grid-template-columns: repeat(2,1fr);
    gap: 40px;
    width: 90%;
    margin: 50px auto 0 auto;
}
.achievement-moja{
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 30px;
}
.achievement-moja .achievement-image{
    width: 100px;
    height: 100px;
    border-radius: 50%;
    overflow: hidden;
    flex-shrink: 0;
}
#call-to-action{
    margin: 40px 0px 80px 0px;
}
.call-to-action-content{
     background: linear-gradient(to right, rgb(0, 12, 7), transparent), url("./img/volunter-bg.jpg") no-repeat;
     padding: 100px 6%;
     background-size: cover;
     height: 500px;
     background-position: center;
     border-radius: 0px 50px 0px 50px;
     display: flex;
     align-items: center;
     justify-content: space-between;
}
.call-to-action-content .description{
    width: 450px;
}
.call-to-action-content .description h1{
    font-size: 35px;
    font-weight: 600;
    color: white;
}
.call-to-action-content .description h2{
    font-size: 16px;
    font-weight: 400;
    color: var(--main-color);
    text-transform: uppercase;
}

.call-to-action-content a{
     display: flex;
     width: 200px;
     height: 55px;
     background: var(--secondary-color);
     justify-content: center;
     align-items: center;
     border-radius: 5px;
     color: white;
     gap: 5px;
     text-transform: capitalize;
}

#gallery{
     margin: 100px 0;
}
#gallery .intro-section{
     margin: 20px auto;
}
.grid-images-container{
    display: grid;
    grid-gap: 5px;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    grid-auto-rows: 250px;
    grid-auto-flow: dense;
    margin-top: 40px;
}
.grid-images-container > .grid-image{
        position: relative;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 2em;
        overflow: hidden;
}

.horizontal {
    grid-column: span 2;
  }
  
  .vertical {
    grid-row: span 2;
  }
  
  .big {
    grid-column: span 2;
    grid-row: span 2;
  }

#projects{
      padding: 40px 0px 80px 0px;
}
.project-content-row{
     display: flex;
     gap: 40px;
     margin-top: 50px;
     place-items: center;
     justify-content: center;
}
.project-moja{
     border-radius: 0px 50px 0px 50px;
     background: white;
     padding-bottom: 50px;
     position: relative;
     transition: all 0.5s ease;
     width: 500px
}
.project-moja:hover{
      box-shadow: 0px 0px 30px -20px #222;;
}
.project-moja .project-image{
      height: 300px;
      position: relative;
      border-radius: 0px 50px 0px 50px;
      overflow:hidden;
}
.project-moja .project-image .state{
      position: absolute;
      top: 20px;
      left: 20px;
      background: var(--secondary-color);
      padding: 8px 10px;
      font-size: 14px;
      color: white;
      border-radius: 20px;
}
.project-moja .state.completed{
     background: var(--main-color)
}
.intro-description{
    display: flex;
    justify-content: space-between;
    padding: 20px 20px 10px 20px;
    align-items: center;
    border-bottom: 1px solid gainsboro
}
.intro-description p{
      text-align: center;
      color: gray;
      font-size: 14px
}
.intro-description h2{
    font-size: 18px;
    font-weight: 400;
}
.intro-description h1{
     border-right: 1px solid gainsboro;
     border-left: 1px solid gainsboro;
     padding: 0px 20px;
     font-size:35px;
     font-weight: 600;
}
.intro-description .percentage h1{
    display: flex;
}
.intro-description .percentage span{
    font-size: 20px;
}
.project-moja-inner{
    margin: 0 30px;
}
.project-description{
     margin: 20px 0;
}
.project-description h2{
    font-weight: 500;
    margin-bottom: 10px;
    font-size: 20px;
}
.project-description p{
     font-weight: 300;
}

.project-moja a{
     position: absolute;
     bottom: 0;
     right: 0px;
     border: 1px solid;;
     width: 80px;
     height: 60px;
     border-radius: 40px 0px 0px;
     display: flex;
     justify-content: center;
     align-items: center;
     color: white;
     background: var(--secondary-color);
     font-size: 20px;
}

#partners{
     padding: 40px 0px 100px 0px;
     overflow: hidden;
}
.partners-image-row{
     width: 100%;
     position: relative;
     margin-top: 50px;
}
.log-images{
     display: flex;
}
.partner-moja img{
      width: 200px;
      height: 120px;
      margin: auto;
      display: block;
      object-fit: contain;
}
.swiper-pagination{
     padding-top: 50px;
     bottom: -50px !important;
     position: absolute;
}
.swiper-pagination-bullet-active{
     background: var(--main-color) !important;
}

#contact{
    padding: 80px 0 0;
}

.form-section{
     width: 900px;
     margin:40px auto;
     position: relative;
     z-index: 10;
}
.form-row{
     margin-bottom: 20px;
}
.form-row label{
     font-size: 15px;
     display: block;
     font-weight: 400;
     margin-bottom: 5px;
}
.form-row.split{
     display: grid;
     grid-template-columns: repeat(2,1fr);
     gap: 20px;
     
}
.form-row .form-control{
     width: 100%;
     height: 60px;
     padding-left: 10px;;
    border-radius: 5px;
    border: 1px solid gainsboro;
    background: rgba(250, 255, 253, 0.3);
    outline: none;
    font-family: "Poppins";
    font-size: 16px;
}
.form-row ::placeholder{
    font-weight: 300;
    font-size: 14px;
}
.form-row textarea{
     padding: 10px;
     border-radius: 5px;
     font-family: "Poppins";
     outline: none;
     border: 1px solid gainsboro;
     width: 100%;
     background: rgba(250, 255, 253, 0.3);
     font-size: 16px;
}

.btn button{
     width: 150px;
     height: 50px;
     border-radius: 5px;
     border: none;
     background: var(--secondary-color);
     font-family: "Poppins";
     color: white;
     font-weight: 500;
     margin: 20px auto;
     display: block;
     cursor: pointer;
}

.closing-image{
     background:linear-gradient(rgba(250,250,250), transparent), url("./img/contact-bg.jpg") no-repeat;
     background-size: cover;
     background-position: center;
     height: 500px;
     margin-top: -150px;
     position: relative;
     z-index:4;
}
#modal{
     position: fixed;
     top: 0;
     left: 0;
     right: 0;
     bottom: 0;
     background:rgba(0, 12, 7, 0.75);
     z-index: 999;
     display: none;
     justify-content: center;
     align-items: center;
}
.modal-box{
      width: 500px;
      background: white;
      height: auto;
      padding: 50px;
      border-radius: 5px;
      position: relative;
}
.modal-box span{
     cursor: pointer;
     position: absolute;
     right: 20px;
     top: 20px;
     font-size: 24px;
     width: 30px;
     height: 30px;
     display: flex;
     justify-content: center;
     align-items: center;
}
.modal-box h1{
    text-transform: uppercase;
    font-weight: 500;
    text-align: center;
    margin-bottom: 20px;
}

.modal-box .donations h2{
      font-size: 20px;
      font-weight: 600;
      font-weight: 24px;
}
.modal-box .donations h4{
    font-weight: 500;
    font-size: 18px;
    margin-bottom: 20px;
}
.modal-box .donations p{
     font-weight: 300;
}
footer{
    background: rgb(0, 20, 25);
    padding: 80px 0;
}
.footer-logo{
    width: 180px;
    margin: 20px auto;
}
.footer-content p{
     color: whitesmoke;
     font-weight: 300;
     width: 600px;
     text-align: center;
     margin: auto;
}
.footer-content .contacts{
    color: whitesmoke;
    width: 400px;
    margin:auto;
    margin: 20px auto;
}
.footer-content .contacts h3{
    font-weight: 400;
    font-size: 16px;
    display: flex;
    align-items: center;
    margin-bottom: 10px;
    gap: 5px;
    justify-content: center;
}
.footer-content .contacts span{
     font-size: 25px;
     display: inline-flex;
     color: var(--secondary-color);
}

.footer-social-links{
     color: whitesmoke;
     text-align: center;
     margin-top: 20px;
}
.footer-social-links h3{
    font-size:  18px;
    font-weight: 400;
    text-transform: uppercase;
}
.footer-social-links ul{
    display: flex;
    justify-content: center;
    gap: 30px;
    margin-top: 20px;
}
.footer-social-links ul li a{
      font-size: 20px;
      color:whitesmoke;
}

.copyright{
     background: rgb(0, 20, 25);
     color: white;
     padding: 30px 50px;
     display: flex;
     justify-content: center;
     position: relative;
}
.copyright::before{
    width: 90%;
    position:absolute;
    top: 0;
    content:"";
    height: 1px;
    background: rgba(220, 220, 220, 0.2);
    left: 50%;
    transform: translate(-50%)
}
.copyright p{
     font-weight: 200;
     font-size: 12px;
}
.copyright a{
     color: rgb(0, 165, 149);
}

@media(max-width: 1200px){
      header .inner-row{
        width: 95%;
      }
      .header-content nav{
            display: none;
      }
      .header-content .quick-contact{
            display: none;
      }
      .navTrigger{
        display: block;
      }
      .features-row{
           grid-template-columns: repeat(2,1fr);
           align-items: center;
      }
      .project-content-row{
           grid-template-columns: repeat(1,1fr);
      }
      .project-moja{
            width: 600px;
            margin:auto;
      }
}
@media(max-width: 1000px){
     .about-description-container{
        grid-template-columns: repeat(1,1fr);
     }
     .about-image-side{
         height: 500px;
         border-radius: 0px;
     }
     .intro-section{
          width: 90%;
     }
     .nudge-content{
          grid-template-columns: repeat(1,1fr);
     }
     .sectors-container-row,
     .achievement-row{
           grid-template-columns: repeat(1,1fr);
     }
     .call-to-action-content{
        flex-direction: column;
        justify-content: center;
        gap: 40px;
     }
     .call-to-action-content .description{
          text-align: center;
          width: 100%;;
     }
     .form-row.split{
         grid-template-columns: repeat(1,1fr);
     }
}
@media(max-width: 850px){
     .landing-texts h1{
        font-size: 45px;
        width: 100%;
     }
     .project-moja{
        width: 90%;
  }
  .footer-content p{
      width: 100%
  }
}

@media(max-width: 600px){
      #sidebar{
          width: 100%;
      }
      .about-image-side{
        height: 300px;
      }
      .features-row{
           grid-template-columns: repeat(1,1fr);
      }
      .about-description-texts h1{
          text-align: center;
      }
      .about-description-texts{
            padding: 80px 10% 30px;
      }
      .achievement-moja{
          flex-direction: column;
          text-align: center;
      }
}

/*Keyframes*/
@keyframes inMd {
    50% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(45deg);
    }
}

@keyframes outMd {
    50% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(45deg);
    }
}

@keyframes inTp {
    0% {
        transform: translateY(0px) rotate(0deg);
    }
    50% {
        transform: translateY(9px) rotate(0deg);
    }
    100% {
        transform: translateY(9px) rotate(135deg);
    }
}

@keyframes outTp {
    0% {
        transform: translateY(0px) rotate(0deg);
    }
    50% {
        transform: translateY(9px) rotate(0deg);
    }
    100% {
        transform: translateY(9px) rotate(135deg);
    }
}


@keyframes inBtm {
    0% {
        transform: translateY(0px) rotate(0deg);
    }
    50% {
        transform: translateY(-9px) rotate(0deg);
    }
    100% {
        transform: translateY(-9px) rotate(135deg);
    }
}

@keyframes outBtm {
    0% {
        transform: translateY(0px) rotate(0deg);
    }
    50% {
        transform: translateY(-9px) rotate(0deg);
    }
    100% {
        transform: translateY(-9px) rotate(135deg);
    }
}
@keyframes zoom-out{
    100%{
          transform: scale3d(1.3,1.3,1.3);
          -webkit-transform: scale3d(1.3,1.3,1.3);
          -moz-transform: scale3d(1.3,1.3,1.3);
          -ms-transform: scale3d(1.3,1.3,1.3);
          -o-transform: scale3d(1.3,1.3,1.3);
}
}

@keyframes zoomIn {
	from {
		opacity: 0;
		-webkit-transform: scale3d(0.3, 0.3, 0.3);
		transform: scale3d(0.3, 0.3, 0.3);
	}

	100% {
		opacity: 1;
        transform: translate3d(0,0,0);
	}
}

@keyframes slideDown{
     0%{
          transform: translate3d(0, -50px, 0);
          opacity: 0;
     }
     100%{
         transform: translate3d(0,0,0);
     }
}
@keyframes slideUp {
      0%{
           transform: translate3d(0, 50px, 0);
           opacity: 0.3;
      }    
      100%{
         transform: translate3d(0,0,0);
         opacity: 1;
      }
}



/* Single Page */
.landing.special{
    height: auto
}
.landing-area{
      background: linear-gradient(rgba(0,0,0, 0.4), rgba(0,0,0,0.4)), url("./img/gallery-1.JPG") no-repeat;
      background-size: cover;
      height: 70vh;
      background-position: center;
      display: flex;
      justify-content: center;
      align-items: center;
}

.landing-area h2{
    font-size: 35px;
    color: white;
    width: 800px;
    margin: auto;
    text-align: center;
    font-weight: 400;
}
.project-description-pro{
    padding: 80px 0
}
.project-description-content h2{
    font-weight: 600;
    margin-bottom: 20px;
    font-size: 40px;
}
.project-description-content p{
     line-height: 30px;
     font-size: 18px;
     margin-bottom: 10px;
     font-weight: 300;
}
.two-images{
    display: grid;
    grid-template-columns: repeat(2,1fr);
    gap: 20px;
    margin: 20px 0;
}
.project-description-content h3{
    font-size: 20px;
    font-weight: 500;
    margin-bottom: 10px;
}
.project-description-content table{
    border: 1px solid gainsboro;
    width: 600px;
    margin-bottom: 20px;
}
table, th, td{
    border-collapse: collapse;
}
.project-description-content table th{
    border:1px solid gainsboro; 
    text-align: left;
    padding: 10px;
    font-weight: 500;
}
.project-description-content table td{
    padding: 10px;
     border: 1px solid gainsboro;
}
.project-description-content table tr td:nth-child(2){
      font-weight: 600;
}

@media(max-width: 850px){
     .project-description-content table,
     .landing-area h2{
        width: 100%;
        border: 1px solid black;
     }
}