:root {
  --primary-color: #00ed64; /* Soft Forest Green */
  --secondary-color: #21313c; /* Light Gold */
  --accent-color: #7d8b5a; /* Soft Olive Green */
  --background-color: #061621;
  --second-background-color: #001e2b;
  --border-color: #3b4e56; /* Dark Charcoal */
  --second-border-color: #3d4f58; /* Dark Charcoal */
  --text-color: #b8c4b9; /* Beige */
  --second-text-color: #001e45; /* Beige */
}

@media (min-width: 100px) and (max-width: 700px) {
  body {
    /* height: 100%;
    width: 100%; */
    overflow-x: hidden;
  }
  #wrapper {
    flex-direction: column;
    overflow: hidden;
    width: 100vw;
  }

  #main {
    height: auto;
    width: 100vw;
    overflow: hidden;
    background: var(--background-color);
  }
  #navbar {
    justify-content: space-between;

    width: 93%;
    margin-left: 0%;
    z-index: 10;
    position: fixed;
    color: white;
    /* top: 2vh; */

    display: flex;
    justify-content: space-between;
    padding: 1.5vh;
    transition: 0.5s ease-in;
  }

  .navwrap {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    height: 100%;
    width: 100%;
    transition: 1.5s;
    padding: 0.5vh;
  }

  #menuList {
    position: fixed;
    right: 0vh;
    top: 0;
    /* bottom: 0; */
    display: flex;
    flex-direction: column;
    z-index: -1;
    height: 100vh;
    display: flex;
    backdrop-filter: blur(10px);
    width: 0%;
    transition: 0.5s 1ms ease;
    align-items: center;
    justify-content: center;

    /* background: rgba(0, 0, 0, 0.859);s */
  }

  .bgcolor {
    animation: bgcolor 1s ease-in forwards;
  }
  @keyframes bgcolor {
    0% {
      background: rgba(0, 0, 0, 0);
    }
    100% {
      background: rgba(0, 0, 0, 0.588);
    }
  }

  .menus {
    background-image: url(/images/navbg.svg);
    background-size: calc(35vh);
    background-repeat: no-repeat;
    background-position: center;
    height: 99vh;
    width: 0vw;
    position: fixed;
    align-items: center;
    justify-content: center;
    align-self: center;
    justify-self: center;
    display: flex;
    flex-direction: column;
    top: 0vh;
    right: -20vh;
    transition: 0.3s ease;
  }
  .links {
    height: 8%;
  }
  #rightBar {
    display: flex;
    border: 1px solid var(--primary-color);
    height: 50%;
    width: 20%;

    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    padding: 1vh;
    gap: 0.3vh;
    border-radius: 2vh;
    font-size: 0.8rem;
  }
  .mediaBox {
    height: 100%;
    /* width: 5vh; */
    gap: 2vw;
    padding-left: 2vw;
    display: flex;
    align-items: center;
    justify-content: space-around;
    text-align: center;
  }
  .fa-brands {
    height: 100%;
    width: 100%;
    font-size: 3vh;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .links {
    height: 3vh;
    width: 20vh;
    background: var(--primary-color);
    color: var(--secondary-color);
    padding: 0.7vh;
    font-size: 2vh;
    font-weight: 900;
    text-align: center;
    border-radius: 1vh;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .lineBar {
    height: 80%;
    width: 70%;
    justify-content: space-between;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
  }
  .lines {
    height: 2px;
    width: 100%;
    background: var(--primary-color);
    transition: 0.5s ease;
  }

  .lineTwo {
    display: none;
  }
  .lineOne {
    transform: rotate(40deg);
    position: absolute;
    background: red;
    bottom: 0;
    bottom: 50%;
  }
  .lineThree {
    transform: rotate(-40deg);
    position: absolute;
    bottom: 50%;
  }

  #navBottom {
    display: flex;
    height: 7%;
    background: var(--second-background-color);
    border: 1px solid var(--primary-color);
    border-radius: 5vh;
    width: 90%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1vh;
  }

  .navTop {
    display: flex;
    height: 35%;

    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: 1vh;
  }

  .topImgBox {
    height: 15vh;
    width: 15vh;
    border-radius: 10vh;
    border: 2px solid var(--primary-color);
  }
  .topImgBox img {
    height: 100%;
    width: 100%;
    border-radius: 100%;
  }
  .sections1 {
    width: 100vw;
    height: auto;
  }
  .headContent {
    height: auto;
    width: 100%;
    position: relative;
    display: flex;
    flex-direction: row-reverse;

    justify-content: flex-end;
  }
  #head {
    height: 80vh;
    width: 100vw;

    display: flex;

    overflow: hidden;
  }

  .homeContent {
    position: absolute;
    top: 2vh;
    z-index: 3;
    width: 100vw;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 80%;
  }
  .sections2::before {
    display: none;
  }
  #head::after {
    display: none;
  }
  .homeContent h4 {
    height: 40vh;

    /* padding: 2.5vh; */
    font-size: 1.2rem;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
  }
  .homeContent h4 p {
    color: white;
    font-size: 2vh;
    width: 100%;
  }

  .frontName {
    height: 25%;
    width: 90%;
    object-fit: contain;
  }

  .frontName img {
    height: 100%;
    width: 100%;
    object-fit: contain;
  }

  .donateHead {
    height: 5vh;
    width: 16vh;

    border-radius: 5vh;
    /* position: relative; */
    display: flex;
    align-items: center;
    overflow: hidden;
    justify-content: center;
    cursor: pointer;
    z-index: 80;
    animation: appear 1s ease-in-out;

    animation: blur 3s ease-in-out;
  }

  .donateHead::before {
    content: "";

    align-self: center;
    justify-self: center;
    height: 30vh;
    width: 5vh;
    background: linear-gradient(blue, red, yellow);

    transform: translate(-30%);
    animation: rotating 5s ease-in-out infinite;
  }
  #donateTxt {
    height: 4vh;
    width: 15vh;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 1vw;
    position: absolute;

    background: var(--second-background-color);
    border: 1px solid var(--primary-color);
    /* border: none; */
    border-radius: 5vh;
    outline: none;
    color: yellow;

    font-size: 1.5vh;
    position: absolute;
  }
  #donateTxt:hover {
    background: red;
  }
  #donateTxt a {
    color: white;
    text-decoration: none;
    font-weight: 1000;
  }
  .headImg {
    height: 100%;
    width: 100%;
    right: 0;
    backdrop-filter: blur(5px);
    background: rgba(29, 28, 28, 0.536);

    /* position: absolute; */
  }

  .headDesign {
    width: 100%;
    height: 100%;
    z-index: 2;
    position: absolute;
    transform: rotate(0deg);
    background-image: url("./images/design/headdesign.svg");
    background-repeat: no-repeat;
    background-size: contain;
    background-position: bottom;

    top: 0.3vh;
    left: -0.1vh;
  }

  .headRight {
    display: none;
  }

  /* Section 2 */

  .sections2 {
    height: auto;
    margin-top: -0.2vh;
  }

  #glanceHead {
    width: 85%;
    height: auto;
    font-weight: 900;
    font-size: 0.8rem;
    /* padding-bottom: 3vh; */
  }

  .titleImage {
    height: 2vh;
    width: 80%;
  }

  .glanceContent {
    gap: 1vh;
    height: 80%;
    padding: 3vh;
    width: 60%;
  }

  .glanceBoxes {
    height: 25vh;
    width: 30vh;
    background-size: contain;
  }

  .glanceImgBox {
    height: 45%;
    width: 35%;
    padding-top: 1vh;
  }
  .glanceImg {
    height: 100%;
    width: 100%;
  }
  .glanceTextContent {
    height: 30%;
    width: 80%;
    display: flex;
    flex-direction: column;

    padding: 0.5vh;
    border-radius: 2vh;
    align-items: center;
    gap: 0.5vh;
  }
  .glanceTextContent h1 {
    font-size: 2vh;
  }
  .glanceTextContent p {
    font-size: 1.7vh;
  }

  .sections3 {
    height: auto;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
  }
  .aboutBox {
    padding: 1vh;
    width: 100%;
    height: 1vh;
    height: auto;

    display: flex;
    position: relative;
    top: 0;
    flex-direction: column;
    justify-content: flex-end;
  }
  .aboutBack {
    display: flex;
    justify-content: flex-end;
    flex-direction: column;
    height: auto;
    padding-top: 10vh;
    width: 100vw;

    bottom: 0;
  }
  .aboutImg {
    height: 100%;

    width: 108%;
  }
  .aboutTitle {
    height: auto;
    width: 70%;
    display: flex;
    flex-direction: column;
    align-items: left;
    justify-content: left;
    position: relative;
    color: #b8c4b9;
  }
  #info span {
    display: inline-block;
    font-size: 3vh;
  }
  .infoImgBox {
    height: 100%;
    width: 70%;
  }

  .aboutContent {
    position: absolute;
    width: 85%;
    height: 100%;

    padding-top: 13%;
    padding-left: 2vh;

    top: 0;
  }

  .para1 {
    width: 100%;

    font-size: 1.1rem;
  }
  .para2 {
    width: 60%;

    font-size: 1.1rem;
  }

  .sections4 {
    height: auto;
    width: 100%;
    position: relative;
    display: flex;
    flex-direction: row;
    overflow: hidden;
    position: relative;
  }

  .visualContainer {
    height: auto;
    width: 70%;

    display: flex;
    flex-direction: column;

    justify-content: flex-start;
    align-items: center;
  }

  .visualContainer .aboutTitle {
    color: var(--second-text-color);
    width: 5vh;
    width: 90%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: right;
    padding: 3vh;
  }

  .visualContainer .infoImgBox {
    height: 100%;
    width: 85%;
  }

  .visualImgBox {
    height: auto;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    overflow: hidden;
    padding-bottom: 1vh;
  }

  .visualTitle {
    height: 3vh;
    width: 90%;
  }

  .visualImg {
    height: 20vh;
    width: 80%;
    border-radius: 2vh;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
  }

  .imgBox {
    height: 100%;
    width: 98%;

    border-radius: 2vh;
  }
  .imgFirst {
    height: 90%;
    border-radius: 2vh;
    width: 98%;
  }

  .projectStatus {
    height: 2vh;
    background: var(--primary-color);
    z-index: 5;
    position: absolute;
    color: var(--second-text-color);
    right: 0;
    bottom: 0;
    padding: 1vh;
    animation: changeColor 1s infinite ease-in-out;
  }

  @keyframes changeColor {
    0% {
      color: red;
      padding: 1vh;
    }
    50% {
      color: blue;
    }
    100% {
      color: white;
      padding: 1.2vh;
    }
  }

  .graphicsContainer {
    height: 100%;
    justify-content: flex-start;
    width: 10%;
    display: flex;
    flex-direction: column;
    margin-top: 14vh;
  }

  .sections5 {
    height: auto;
    width: 100vw;
    display: flex;
    flex-direction: column;
    align-items: center;
    background: #001e2b;
    justify-content: center;
  }
  .topMosque {
    background-image: url("/images/mosque3.svg");
    height: auto;
    width: 100vw;
    object-fit: fill;
    background: var(--secondary-color);
    position: relative;
  }

  .blogHead {
    top: 17vh;
    position: absolute;
    width: 100%;
    color: var(--text-color);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 2;
  }
  .BloginfoImgBox {
    height: 50%;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    object-fit: cover;
  }
  .blogInfoImage {
    height: 100%;
    width: 63%;
    object-fit: cover;
  }
  .topMosque img {
    margin-bottom: -1vh;
  }

  .blogsContainer {
    width: 90%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    gap: 3vh;
  }

  .blogBox {
    width: 90%;

    display: flex;
    flex-direction: column;
    justify-content: center;
    height: auto;
    align-items: center;
    gap: 0.3vh;
    padding: 1vh;
    border-radius: 2vh;
    /* box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2); */
    z-index: 1;
    background: #21313c;
    border: 1px solid var(--border-color);
  }
  .blogBox:hover {
    gap: 1vh;
    border: 1px solid var(--primary-color);
    transition: 1s ease;
  }
  .blogImg {
    position: relative;
    height: 27vh;
    width: 40vh;
    display: flex;
    justify-content: center;
    align-items: center;
    object-fit: cover;
  }
  .imgPostBox {
    height: 100%;
    width: 100%;
  }

  .imgPost {
    height: 100%;
    width: 100%;
    object-fit: cover;
  }
  .maskBox {
    position: absolute;

    height: 100%;
    width: 100%;

    object-fit: cover;
  }
  .imgMask {
    height: 100%;
    width: 100%;
    object-fit: cover;
  }
  .blogTextBox {
    border-radius: 2vh;
    padding: 0.8vh;
    color: var(--text-color);
    display: flex;
    gap: 0.5vh;

    flex-direction: column;
  }
  .blogTextBox h3 {
    /* background: var(--primary-color); */
    padding: 0.8vh;
    width: auto;
    display: flex;
    align-items: center;
    /* font-size: 01rem; */
    color: var(--text-color);
    font-size: 2.5vh;
    border-radius: 1vh;
    justify-content: center;
  }

  .blogTextBox p {
    border: 1px solid var(--primary-color);
    background: #00ed64;
    color: var(--second-text-color);
    padding: 0.8vh;
    border-radius: 1vh;
    font-size: 2vh;
  }

  /* another section 5 for youtube // */

  .youtubeVideos {
    height: auto;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1vh;
    padding: 2vh;
  }
  .youtubeVideos h1 {
    color: white;
    text-align: center;
  }
  #medias {
    width: 90%;
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    color: #00ed64;

    align-items: center;
    justify-content: space-around;
    gap: 3vw;
  }

  .videoItem {
    padding: 1vw;
    height: auto;
    overflow: hidden;
    width: 40vh;
    display: flex;
    flex-direction: column;
    gap: 1vh;

    padding: 2vh;
  }
  .youtubeTitle {
    height: auto;
    width: 100%;
    font-size: 2vh;

    overflow: hidden;
    text-align: left;
  }
  .videoFarameBox {
    height: 35vh;
    width: 100%;
    border-radius: 3vw;
  }

  .videoFarameBox iframe {
    height: 100%;
    width: 99%;
    /* border: 1px solid var(--primary-color); */
    border-radius: 0.5vw;
    border-radius: 1vh;
  }

  .YoutubeDescription {
    color: var(--text-color);
    font-size: 2vh;
  }

  /* section 7 starts from header */
  .sections6 {
    padding-top: 5vh;
    height: auto;
    width: 100%;
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    border-bottom: 1px solid var(--primary-color);
  }

  .galleryHead {
    width: 102%;
    height: 19vh;
    transform: rotate(0deg);
    background-image: url(/images/topbr.svg);
    background-repeat: no-repeat;
    background-size: contain;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background-position: bottom;
  }

  .galleryInfoTitle {
    margin-top: 4vh;
    color: var(--primary-color);
  }
  .gallleryinfoImgBox {
    height: 5%;
    width: 50%;
  }
  .sections7 {
    height: auto;
    width: 100%;

    align-items: center;
    justify-content: center;
    background: var(--second-background-color);
  }

  .empolyesHead {
    height: 15vh;
  }

  .empolyesContainer {
    height: 40vh;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .empolyesHead {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 15vh;
    color: var(--text-color);
  }
  .empolyesinfoImgBox {
    height: 50%;
    width: 50%;
  }
  .slider {
    height: 100%;
    display: flex;
    overflow-x: auto;
    gap: 2vh;
    scroll-snap-type: x mandatory;
    overflow-y: hidden;
    width: 100vw;
    padding: 5vh;
  }

  .slide {
    height: 100%;
    flex-basis: 70vw;

    flex-shrink: 0;
    background-position: center;
    display: flex;
    flex-direction: column;
    border-radius: 2vh;
    align-items: center;
    justify-content: cover;
    overflow: hidden;
    border: 1px solid var(--border-color);
    object-fit: cover;
    position: relative;
  }

  .teacherImg {
    position: absolute;
    height: 75%;
    width: 100%;
    object-fit: contain;
    top: 2%;
    left: 0;
  }

  .teacherImg img {
    height: 100%;
    width: 100%;
  }

  .teacherMask {
    background-image: url("/images/design/teachermask.svg");
    background-repeat: no-repeat;
    background-size: cover;
    height: 75%;
    width: 100%;
    z-index: 1;
  }
  .teacherDetails {
    background: var(--secondary-color);
    width: 100%;
    height: 25%;
    z-index: 1;
    padding: 0.3vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    color: var(--text-color);
  }
  .teacherDetails h3 {
    color: var(--primary-color);
    text-align: left;
    padding: 1vh;
  }

  .teacherDetails p {
    text-align: center;
  }
  .viewMore {
    height: 10vh;
    width: 99%;

    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-direction: column;
  }

  .viewMore button {
    height: 50%;
    width: 30%;
    background: var(--primary-color);
    color: var(--second-text-color);
    border: 3px solid var(--second-text-color);
    outline: none;
    font-size: 1rem;
    font-weight: 500;
    border-radius: 1vh;
    z-index: 5;
  }
  .sections8 {
    height: auto;
    width: 100%;
    padding-top: 5vh;
    background: var(--second-background-color);
  }

  .messegeBox {
    height: 60vh;
    width: 100%;

    background-image: url(/images/design/msgbox.svg);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
  }

  .sections9 {
    height: auto;
    width: 100vw;
  }

  footer {
    height: auto;
    width: 100vw;
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  .footerSideImg {
    height: 25vh;
    width: 100%;
    display: flex;
    justify-content: space-between;
    background: var(--second-background-color);
    padding-top: 10vh;
  }

  .footerImgBox {
    height: 30vh;
    display: flex;
    object-fit: cover;
    flex-direction: column;
    margin-top: 2vw;
    justify-content: flex-end;
  }

  .inTouch {
    width: 70%;
    padding: 2vh;
    display: flex;
    flex-direction: column;
    gap: 2vh;
    justify-content: center;
    border-bottom: 1px solid var(--primary-color);
  }
  .inTouch h2 {
    display: flex;
    flex-direction: column;
    padding: 2vh;
  }
  .inTouch h2 img {
    width: 75%;
  }
  .emailDetail {
    height: auto;
    width: 60vw;
    display: flex;
    gap: 2vh;
    flex-direction: column;
  }
  .email {
    width: 100%;
    border: 1px solid var(--border-color);
    overflow: hidden;
    border-radius: 5vh;
    height: 5vh;
    background: var(--secondary-color);
  }
  .email input {
    height: 100%;
    width: 100%;
    background-color: transparent;
    border: none;
    color: var(--primary-color);
    font-size: 1.5rem;
    padding-left: 2vh;
  }

  .inTouch h2 {
    color: var(--primary-color);
  }

  .submit {
    width: 50%;
    padding: 1vh;
    border-radius: 6vh;
    border: none;
    outline: none;
    font-size: 1rem;
    font-weight: 800;
  }

  .footerSideImg img {
    height: 100%;
    width: 100%;
    justify-self: right;
  }

  .footerBottom {
    height: 70%;
    color: var(--text-color);
    width: 100vw;
    background: var(--background-color);
    /* border-top: 2px solid var(--primary-color); */

    display: flex;
    flex-direction: column;
    padding-bottom: 2vh;
  }

  .footerLinks {
    height: auto;
    width: auto;
    padding: 2vh 2vh 2vh 2vh;

    display: flex;
    flex-direction: row;
    gap: 1vh;
    background-image: url(/images/project/footerdesign.svg);
    background-repeat: no-repeat;
    background-position: right;
    background-size: calc(40%);
  }

  .leftLinks {
    display: flex;
    flex-direction: column;
    gap: 1.5vh;
    font-size: 1.5vh;
    width: 60%;
  }
  .leftLinks h2 a {
    text-decoration: none;
    color: var(--text-color);
  }
  .rightLinks {
    height: 100%;
    width: 40%;
    display: flex;
    flex-direction: column;
    gap: 1.5vh;
  }

  .rightLinks h3 {
    padding: 0.5vh;
    height: 4vh;

    width: 90%;
    background: var(--second-text-color);

    text-align: center;
    border-radius: 4vh;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .rightLinks h3 a {
    color: var(--primary-color);
    text-decoration: none;

    /* touch-action: cross-slide-y; */
  }
  .donateImg {
    height: 10vh;
    width: 100%;

    display: flex;

    flex-direction: row;
    justify-content: right;
  }
  .donateImg img {
    height: 100%;
    width: 100%;
  }
  .jaza {
    font-size: 1.6rem;
    font-weight: 1000;
    color: var(--primary-color);
  }
  .footerSocial {
    height: auto;
    width: 100%;
    padding-left: 2vh;
  }

  .media {
    height: auto;
    width: 60%;
    display: flex;
    flex-direction: row;
    align-items: center;
    padding-bottom: 2vh;
  }

  .fllow {
    width: 50vh;
    padding-right: 1vh;
    color: var(--primary-color);
  }
  .footerBranding {
    height: auto;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 2vh 0vh;
    border-top: 0.5px solid var(--border-color);
  }
}