@media screen and (min-width: 0px) {

  html{
    scroll-behavior: smooth;
  }
  body{
    margin: 0;
    overflow-x: hidden;
    font-family: sans-serif;
    background: black;
  }
  a{
    color: white;
    font-size: 1vw;
  }
  h1{
    font-size: 2vw;
    /* color: #ffcdd2; */
  }
  h2{
    font-size: 1.7vw;
    /* color: #85d926;; */
  }
  h3{
    font-size: 1.4vw;
  }
  h4{
    font-size: 1.2vw;
  }
  h5{
    font-size: 1vw;
  }
  h6{
    font-size: 0.8vw;
  }
  p{
    font-size: 1.2vw;
    color: azure;
  }
  select{
    font-size: 1vw;
  }
  /* form {
    font-size: 1vw;
  } */
  /* ***************************** Auto Scroll ************************************** */
  .autoscrollA{
    z-index:100;
    position:fixed;
    display: flex;
    flex-direction: column;
    bottom:0;
    right:0;
    text-align: center;
  }
  .autoscrollA a{
    border-radius: 0.4vh;
    margin: 0.5vh;
    padding: 0.5vh 1vh;
    /* font-size: 2vh; */
    text-decoration: none;
    color:white;
  }
  .btn1A {
    background-color: #55efc4aa;
  }
  .btn2A {
    background-color: #fd79a8aa;
  }
  .btn3A {
    background-color: #ffeaa7aa;
  }
  .btn4A {
    background-color: #a29bfeaa;
  }
  .btn5A {
    background-color: #ea3b3baa;
  }
  .btnFA {
    background-color: #8c908faa;
  }
  .autoscrollA a:hover{
    background-color: #81ececdd;
    color: Black;
  }
  /* ******************************* Pagination ******************************** */
  .pagination{
    display:flex;
    margin: 1vh 1vw 5vh;
  }
  .pagi{
    padding: 1vh;
    text-decoration: none;
    padding: 1vh;
    margin: 1vh;
    min-width: 7vw;
    text-align: center;
    height: fit-content;
    border-radius: 1vw;
  }
  /* **************************** Button Color ******************************* */
  .btn_S1{
    text-decoration: none;
    min-width: 8vw;
    font-weight:bold;
    padding: 1.5vh;
    background-color: rgba(0,0,0,0);
    color: white;
    border: 0.4vh solid #14c1d7e0;
    border-radius: 5.5vh;
    cursor: pointer;
    transition: 0.5s;
    z-index:1;
    text-align: center;
    margin: 1vh 1vw;
  }
  .btn_S1:hover {
    content: '';
    background-color: #14c1d7e0;
    z-index:0;
  }
  .btn_color_red {
    border: 0.4vh solid #f65e75e0;
  }
  .btn_color_red:hover {
    content: '';
    background-color: #f65e75e0;
  }
  .btn_color_deepred{
    border: 0.4vh solid #ff0000cb;
  }
  .btn_color_deepred:hover {
    content: '';
    background-color: #ff0000cb;
  }
  .btn_color_yellow {
    border: 0.4vh solid #aa9a32e0;
  }
  .btn_color_yellow:hover {
    content: '';
    background-color: #aa9a32e0;
  }
  .btn_color_green {
    border: 0.4vh solid #5bbc47e0;
  }
  .btn_color_green:hover {
    content: '';
    background-color: #5bbc47e0;
  }
  .btn_color_blue {
    border: 0.4vh solid #2f62e6e0;
  }
  .btn_color_blue:hover {
    content: '';
    background-color: #2f62e6e0;
  }
  /************************* Navigation bar ********************************/
  nav{
    display: flex;
    position:fixed;
    text-align: center;
    justify-content:center;
    align-items: center;
    width: 100%;
    flex-direction: column-reverse;
    padding: 2vh 0 0 0;
    transition: 1s;
    z-index: 1;
  }
  nav img{
    width: 40%;
    transition: 1.5s;
    padding: 2vh 0;
  }
  .sticky{
    position: fixed;
    top: 0;
    padding: 0;
    height: 10vh;
    flex-direction: row;
    justify-content:space-between;
    width: -webkit-fill-available;
    background: rgba(0,0,0,0.5);
    z-index: 10;
  }
  .sticky img{
    width: 10%;
    padding: 0 1vw;
  }
  .phone_menu img{
    display: none;
  }
  nav li{
    list-style:none;
    display: inline-block;
    margin: 0 0.8vw 0 0;
    position:relative;
    transition:1s;
    }
  nav li a{
    text-decoration: none;
    color: white;
    text-transform: uppercase;
  }
  .YRH{
    color:#00ffff;
    font-weight: bold;
  }
  nav li::after{
    content: '';
    height: 0.18vw;
    width: 0;
    background: #00ffff;
    position: absolute;
    left: 0;
    bottom: -0.4vh;
    transition: 0.5s;
  }
  nav li:hover::after{
    width: 100%;
  }

  /**************************** Footer ******************************/
  footer{
    background-color: black;
    margin: 0;
    padding:0.1vh;
    z-index:2;
    height: 12.7vh;
  }
  .footer_contact{
    display: flex;
    color: white;
  }
  .footer_contact ul{
    display: flex;
  }
  .footer_contact li{
    display: flex;
  }
  .footer_details{
    display: flex;
    color: white;
  }
  .unismize{
    padding: 2vh;
    display:flex;
    align-items: center;
    flex-direction: column;
    background: #00000075;
    color: white;
  }
  .unismize a{
    font-family: monospace;
    text-decoration: none;
    font-size: large;
    font-weight: bold;
  }
  .unismize img{
    height: 4vw;
  }
  /*************************** General Page design *************************/
  .page {
    display: flex;
    position:relative;
    height:90vh;
    justify-content: center;
    background-color: black;
    margin:0;
    color: white;
    overflow-x: hidden;
  }
  /************************** Home Page page1 *****************************/
  .home_page {
    background-attachment: fixed;
    background-size: cover;
    background-position: center;
  }
  .intro {
    display:flex;
    position:absolute;
    top: 40%;
    justify-content: center;
    text-align: justify;
    /* width: 70%; */
    padding: 0 10%;
    color: white;
    /* font-size: 1.5vw; */
  }
  .slide-track{
    display: flex;
    position: absolute;
    bottom: 1vh;
    left: 0;
    height: fit-content;
    animation: scroll 30s linear infinite;
  }
  .slide-track:hover{
    animation-play-state: paused;
    cursor: pointer;
  }
  @keyframes scroll {
    0% {
      transform: translateX(0);
    }
    100% {
      transform: translateX(-33.333333%);
    }
  }
  .slide{
    perspective: 100px;
  }
  .slide h4 {
    margin: 0;
    color: white;
    text-align: center;
  }
  .slide img{
    width: 30vh;
    height: 20vh;
    padding: 0 2vh;
    transition: 1s;
  }
  .slide img:hover{
    transform:translateZ(20px);
  }
  .h_page1 {
    justify-content: flex-end;
    height: 100vh;
  }
  .h_page3 {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    padding: 10vh 1vw 2vh 1vw;
  }

  /* ************************************ Home Page About us ************************** */
  .h_page2 {
    display: flex;
    flex-direction: column;
    padding: 10vh 0 0 0;
    justify-content: flex-start;
    align-items: center;
  }
  .aboutus_buttons{
    display: flex;
    position: absolute;
    bottom: 4vh;
    flex-wrap: wrap;
    justify-content: space-around;
    width: 100%;
  }
  .home_About_circle{
    display: flex;
    width: 15vw;
    height: 15vw;
    border-radius: 10vw;
    align-items: flex-end;
    justify-content: center;
    box-shadow: 0 0 1vw 0.2vw wheat;
    background-size: cover;
    background-position: top;
  }
  .btn_display{
    margin: 1vh 1vw 5vh;
  }
  /* ************************************ Home Page Art Gallery ********************* */
  .h_page4 {
    display: flex;
    flex-direction: column;
    padding: 10vh 0 0 0;
    justify-content: flex-start;
    align-items: center;
  }
  .home_art_details{
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    z-index: 2;
    margin: 0 4vw;
    height: 90vh;
    background: linear-gradient(#00000000, #00000066, #00000000);
  }
  .home_art_images{
    position: absolute;
    width: 100%;
  }
  .art_img{
    position: absolute;
  }
  .art_img1{
    border-radius: 1vw;
    border: 0.2vw solid #efe793b5;
    box-shadow: 0.1vw 0.1vw 3vw 0.5vw #efe793b5;
    top: 1vh;
    left: 1vw;
    width: 30vw;
    max-height: 100vh;
  }
  .art_img2{
    box-shadow: 0 0 1vw 0.3vw white;
    top: 40vh;
    left: 20vw;
    height: 48vh;
  }
  .art_img3{
    border-radius: 1vw;
    box-shadow: 0.5vw 0.5vw 3vw 0.5vw #ffff006e;
    right: 1vw;
    top:20vh;
    height: 50vh;
  }
  /* ************************************** Home Channel **************************** */
  .h_page5 {
    flex-direction: column;
    padding: 10vh 0 0 0;
    justify-content: flex-start;
    align-items: center;
    background-attachment: fixed;
    background-size: cover;
    background-position: center;
  }
  .video_box.home_channel{
    width: 85vw;
  }
  .h_page5 img{
    height: 3vw;
    margin: 1vh 3vw;
  }
  /* ************************************* Home Contact us ******************************* */
  .h_page6 {
    align-items: center;
    padding: 10vh 2vw 0 2vw;
    height: 76.3vh;
    flex-wrap: wrap;
    background: black;
    background-attachment: fixed;
    background-size: cover;
    background-position: center;
  }
  .contact_us{
    display: flex;
    width: 100%;
    flex-direction: column;
    align-items: center;
  }
  .quick_link{
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 50vw;
    margin: 0 40vw 0 0;
  }
  .quick_link_list{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;

  }
  .quick_link_list a{
    padding: 1vw;
  }
  .donate_us{
    display: flex;
    width: 30vw;
    /* margin: 0 2vw 0 8vw; */
    flex-direction: column;
    align-items: center;
    position: absolute;
    right: 5vw;
    bottom: 4vh;
  }
  .donate_us img {
    width: 15vw;
  }
  .connected_with_us{
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: flex-start;
  }
  .connected_with_us a{
    padding: 1vw;
  }
  .connected_with_us a img {
    height: 4vh;
  }
  .contact_us h3 img{
    height: 3vh;
  }
  /* * ********************************* Dashboard  *********************************** */
  .dashboard{
    display: flex;
    align-items: center;
    position: fixed;
    width: 14%;
    left: 0;
    margin-top: 10vh;
    padding: 0 0.5%;
    height: 100vh;
    background-color: #87ceeb61;
    flex-direction: column;
    background-repeat: no-repeat;
    background-size: cover;
  }
  .dashboard form{
    text-align: center;
  }
  .dash_icon{
    display: none;
  }
  /********************************* Event Page *********************************/
  .event_dashboard{
    color: #5fd964;
    text-shadow: 0.3vw 0.3vw 0.5vw green;
  }
  .event_dashboard form select{
    background: black;
    color: #36d349
  }
  .event_dashboard form input{
    background: black;
    color: #36d349
  }
  .event_dashboard a{
    color: #fff;
  }
  .event_dashboard h2, h4{
    text-align: center;
  }
  .events_page{
    width: 85%;
    left: 15%;
    height:auto;
    z-index: 0;
    background-attachment: fixed;
    background-repeat: no-repeat;
    background-size: cover;
  }
  .event_content{
    display: flex;
    flex-wrap: wrap;
    margin-top: 10vh;
    width: 100%;
    justify-content: space-evenly;
    min-height: 77vh;
  }
  .event_detail {
    display: flex;
    position: absolute;
    background: #00000090;
    text-align: center;
    bottom: 2%;
    width: 96%;
    height: 40%;
    flex-direction: column;
    justify-content: space-evenly;
  }
  .event_detail h3, h6, p, a{
    margin: 0;
    justify-content: center;
  }
  .event_detail p {
    /* font-size: 14px; */
    margin: 0.2vh 0.2vh 0 0.2vh;
  }
  .event_detail a {
    font-weight: bold;
    color: yellow;
  }
  .event_box{
    display: flex;
    position: relative;
    margin: 1vw 2vw 2vw;
    background: black;
    border-radius: 1.4vw;
  }
  .event_box::before  /* We can write "after" on place of "befor" here, same result*/
  {
    content: '';
    position: absolute;
    top:-2px;
    left:-2px;
    right:-2px;
    bottom:-2px;
    z-index: -1;  /*This is important not before/after */
    background: linear-gradient(135deg, #89ff00,black, #00ffff);
  }
  .event_box::after {
    content: '';
    position: absolute;
    top:-2px;
    left:-2px;
    right:-2px;
    bottom:-2px;
    background: linear-gradient(135deg, #89ff00,black, #00ffff);
    z-index: -2;
    filter: blur(40px);
  }
  .event{
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    height: 22vw;
    width: 33vw;
    margin: 2%;
    border-radius: 1.4vw;
  }
  .btn_event{
    font-weight: normal;
    padding: 0.2vw 1vw;
    width: auto;
    border: 0.12vw solid #18db91d1;
  }
  .btn_event:hover {
    content: '';
    background-color: #18db91a8;
    z-index:0;
  }
  /**********************************Event detail page*************************/
  .event_detail_page{
    padding: 18vh 0.5vw 1vh 0.5vw;
    width: 97.7vw;
    height: fit-content;
    display: flex;
    flex-direction: column;
    background-attachment: fixed;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    z-index:-5;
    justify-content: flex-start;
  }
  .full_content{
    display: flex;
    flex-direction: column;
    text-align: justify;
    background: #0000007d;
    z-index: -3;
    color: #79c379;
    align-items: center;
  }
  .full_content p{
    margin: 2vh;
    color: #76bfc1;
  }
  .full_content h2, h4, h5{
    margin: 2vh;
    text-align:center;
  }
  .all_images{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly;
  }
  .land img{
    width: 42vh;
    aspect-ratio: 1.5;
  }
  .port img{
    width: 28vh;
    aspect-ratio: 0.6667;
  }
  .event-track{
    top: 10vh;
    position: fixed;
    z-index: 1;
  }
  .event-slide img{
    width: 10vh;
    height: 6vh;
    padding: 1vh;
    transition: 1s;
  }

  /* ******************************** Art Gallery ***************************** */
  .block_area{
    position: fixed;
    width: 15%;
    height: 10vh;
    background: white;
  }
  .art_box{
    display: flex;
    align-items: flex-end;
    margin: 1vw 2vw 2vw;
    height: 22vw;
    width: 33vw;
    background-size: cover;
    background-position: center;
    box-shadow: 3px 4px 10px 2px black;
    border: 0.2vw solid #00ffcda6;
  }
  .artist_detail {
    display: flex;
    position: absolute;
    background: #00000090;
    width: 33vw;
    height: 4vw;
    padding: 0.5vw 0 0 0;
    transition: 3s;
  }
  .artist_detail img{
    position: absolute;
    top: 5%;
    left: 5%;
    height: 4vw;
    width: 4vw;
    border-radius: 3vw;
    transition: 3s;
  }
  .artist_detail h3, h6, p, a{
    margin: 0;
    justify-content: center;
  }
  .artist_detail p {
    margin: 3px 3px 0 3px;
  }
  .artist_detail a {
    font-weight: bold;
    color: yellow;
  }
  .title_of_art{
    display: flex;
    flex-direction: column;
    position: absolute;
    top: 10%;
    align-items: center;
    text-align: center;
    width: 100%
  }
  .art_detail{
    top: 0;
    z-index: -10;
    transition: 1s;
  }
  .art_box:hover .artist_detail {
    content: '';
    height: 21.5vw;
  }
  .art_box:hover .artist_detail img{
    height: 6vw;
    width: 6vw;
  }
  .art_box:hover .art_detail{
    top: 40%;
    z-index:1;
  }
  /* ********************************* Art Gallery details **************************** */
  .art_full_content{
    background: #ade5dae0;
    color: #d84315;
  }
  .art_full_content p{
    color: maroon;
  }
  .art_land img{
    height: 50vh;
  }
  .art_port img{
    height: 50vh;
  }
  .art_frame {
    display: flex;
    align-items: center;
    position: relative;
    margin: 3vh;
    background-color:#655a3c;
    border: solid 5px #b89023;
    border-radius: 2px;
    border-color: #ddd2b2e6 #5a5940e3 #7e7963 #c5c4b1fa;
    box-shadow: 5px 5px 15px 0px black;
  }
  .art_frame:before {
      content:'';
      position:absolute;
      top: 25px;
      left: 25px;
      right: 25px;
      bottom: 25px;
      border: solid 5px #b89023;
      border-color: #5b533ae6 #a6a47de3 #cdc5a6 #585745fa;
      box-shadow: inset 5px 5px 5px 0px black;
      background-color: #ece6c4;
  }
  .art_frame:after {
      content:'';
      position:absolute;
      border: solid 5px #b1987a;
      z-index: 2;
      top: -0.2px;
      left: -0.1px;
      right: 0px;
      bottom: 0px;
      box-shadow: inset 0px 0px 4px 5px #998466;
  }
  .art_frame img {
    border: solid 4px white;
    border-color: #9c9c92e6 #cfcfcbe3 #ffffff #b1b1b1fa;
    margin: 55px;
    z-index: 1;
  }
  /**********************************About us page ****************************/
  .about_us_page{
    width: 100%;
  }
  .aboutus_bashboard{
    display: flex;
    flex-direction: column;
    position: fixed;
    width: 15%;
    left: 0;
    margin-top: 10vh;
    height: 90vh;
    align-items: center;
    color: white;
  }
  .aboutus_page{
    display: flex;
    flex-direction: column;
    width: 85%;
    left: 15%;
    height:auto;
    z-index: 0;
    background-attachment: fixed;
    background-size: cover;
    background-position: center;
  }
  .aboutus_content{
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    margin-top: 10vh;
    width: 100%;
    align-items: center;
    min-height: 78vh;
  }
  .aboutus_content p{
    margin: 0 5vw;
  }
  .aboutus_content h1{
    margin: 0 5vw;
  }
  .aboutus_options{
    display: flex;
    padding: 1vw 1vw 30vh 1vw;
  }
  .btn_aboutus{
    margin: 1vw;
  }

  .aboutus_bashboard a{
    text-decoration: none;
    cursor: pointer;
    text-align: center;
    padding: 1vh;
  }
  .aboutus_bashboard a:hover{
    color:#00ffff;
    font-weight: bold;
  }
  /* ******************************* CORRESPONDENCE *********************************** */
  .corres_content{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    padding: 2vw;
    width: -webkit-fill-available;
  }
  .corres_box{
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    /* justify-content: center; */
    text-align: center;
    margin: 1vw;
    align-items: flex-end;
    justify-content: flex-end;
  }
  .corres_box img{
    height: 50vh;
    box-shadow:5px 5px 10px 0px #60c6a6;
    transition: 2s;
  }
  .corres {
    display: none;
    position: fixed;
    justify-content: flex-start;
    margin: 0.5% 5% 1%;
    padding: 0.4em;
    border: 0.2em solid red;
    box-shadow: 5px 5px 10px yellow;
    flex-direction: column;
    height: 84vh;
    overflow-y: scroll;
    max-width: 70%;
  }
  .corres img{
    width: 100%;
  }
  .corres button{
    position: sticky;
    bottom: 0;
    background: #ffee58ed;;
    border: 0;
    color: red;
    font-weight: bold;
    /* font-size: large; */
    margin: 0 28vw;
    padding: 0 4vw;
    border-radius: 5vw;
    cursor: pointer;
  }
  /* ******************************************** Member ************************************ */
  .member_content{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly;


  }
  .member_box{
    display: flex;
    background: #191917;
    width: 18vw;
    flex-direction: column;
    margin: 2vw;
  }
  .member_background{
    width: 100%;
    border: 1px solid yellow;
    box-shadow: 5px 5px 15px 5px #ffff0066;
  }
  .member_dp {
    position: absolute;
    width: 8vw;
    height: 8vw;
    margin: 1%;
    border-radius: 6vw;
  }
  .member_details{
    position:absolute;
    display: flex;
    flex-direction: column;
    width: 12vw;
    margin: 7vw 0 0 6vw;
  }
  .member_details h4, h5{
    padding: 0;
    margin: 0;
  }
  /* ############################################# RECOGNITION ############################# */
  .recognition_box{
    display: flex;
    flex-direction: row;
    height: fit-content;
    justify-content: flex-end;
    margin: 2vw;
    box-shadow: 5px 5px 15px 5px green;
    border: 0.15vw solid #00ffcda6;
    align-items: flex-end;
  }

  .recognition_box img{
    margin: 0;
    height: 50vh;
  }
  .triangle{
    display: flex;
    position: absolute;
    width: 12%;
    aspect-ratio: 1;
    background: linear-gradient(135deg, #00000000,transparent,#00000008, #000000c7, #000000);
    align-items: flex-end;
    justify-content: flex-end;
    flex-direction: column;
    color: #7dcdfc;
  }
  .triangle button{
    background: transparent;
    padding: 0 1vh;;
    border: 0;
    cursor: pointer;
  }
  .triangle img{
    height: 6vh;
    background: #00000000;
  }
  .zoom{
    display: none;
    position: fixed;
    justify-content: flex-end;
    margin: 1% 5%;
    padding: 0.4em;
    border: 0.2em solid green;
  }
  .recognition_details{
    display: flex;
    background: #000000cf;
    padding: 2%;
    flex-direction: column;
    align-items: center;
    /* width: inherit; */
    width: 35%;
    z-index:1;
  }
  .recognition_details button{
    position: absolute;
    bottom: 2vh;
    color: red;
    cursor: pointer;
  }
  .recognition_image{
    height: 84vh;
    width: 65%;
    overflow-y: scroll;
  }
  .recognition_image img{
    width: 100%;
  }
  /* ************************************** News ****************************** */
  .news_box{
    box-shadow: 3px 3px 18px 7px #008074;
    border: 0.15vw solid #00ffb3;
  }
  .news_zoom{
    flex-direction: column;
    height: 84vh;
  }
  .news_details{
    width: auto;
  }
  .news_details h3, h5, p{
    padding: 0;
    margin: 0;
  }
  .news_image{
    width: auto;
    overflow-y: scroll;
  }
  /* ************************************* Channel **************************** */
  .video_box{
    display: flex;
    flex-direction: row;
    width: 95%;
    height: fit-content;
    justify-content: space-between;
    margin: 2vw;
    box-shadow: 5px 5px 15px 5px green;
    border: 0.15vw solid #00ffcda6;
  }
  .reverse{
    flex-direction: row-reverse
  }
  .video_details{
    display: flex;
    display: flex;
    padding: 1vw;
    flex-direction: column;
    align-items: center;
    width: inherit;
  }
  .video_details h3, h5, p{
    padding: 0.2vw;
    margin: 0;
  }
  .video{
    display: flex;
  }
  /* *************************************** Announcement ******************** */
  .announcement_page{
    display: flex;
    padding: 15vh 0 5vh 0;
    background-attachment: fixed;
    background-size: cover;
    background-position: center;
    height: auto;
    min-height: 80vh;
  }
  .content{
    display: flex;
    width: 70%;
    flex-direction: column;
    align-items: center;
    background: #0000007d;
  }
  .announce_box{
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 90%;
    border-bottom: 0.2vh solid #ffffff69;
    text-align: justify;
  }
  .content form{
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 4vh;
    color: #a9ff00;
  }
  .content form p{
    display: flex;
    justify-content: space-between;
    flex-direction: column;
    padding: 1.3vh;
    color: wheat;
    width: fit-content;
    font-weight: bold;
    width: 35vw;
  }
  .content form p select, input, textarea{
    font-size: 15px;
    background: #456a6ea1;
    color: #00ff91;
  }
  /* ************************************* Academy **************************** */
  .academy_page{

  }
  .academy_page h1{
    text-transform: uppercase;
    margin-top: 15vh;
  }
  .login_box{
    width: 20vw;
    height: auto;
    background: #ffffffaa;
    position: absolute;
    top: 35vh;
    right: 0;
  }
  .signup_box{
    width: 80;
    display: flex;
    flex-direction: column;
    height: auto;
    position: absolute;
    margin-top: 10vh;
    color: white;
  }
  .phone_on{
    display: none;
  }
  /* ***************************** Our friendly Organizations ************************ */
  .friends_page{
    height: auto;
    padding: 1vw;
    min-height: 100vh;
    background-attachment: fixed;
    background-size: cover;
    background-position: center;
  }
  .friends_content{
    justify-content: space-around;
  }
  .friends_content a{
    text-decoration: none;
  }
  .organization_box {
    display: flex;
    /* width: 20vw; */
    height: 35vh;
    padding: 2vw;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    max-width: 80vw;
  }
  .organization_box img{
    height: 28vh;
    max-width: 75vw;
  }
  .organization_box img:hover{
    box-shadow: 0.1vw 0.1vw 1vw 0.5vw white;
    border: 0.2vw solid yellow;
  }
  .friends_detail_page{
    padding: 13vh 0.5vw 2vh 0.5vw;
    z-index: 0;
  }
  .connect_organization{
    justify-content: center;
  }
  .organization_video_box{
    width: fit-content;
  }
  .oragn_logo img{
    position: absolute;
    width: 5vw;
    left: 0.5vw;
    padding: 0.5vw;
  }
  /* ############################## official page ################################# */
  .offial_page{
    display: flex;
    padding: 13vh 0.5vw 2vh 0.5vw;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    height: 58vh;
  }
  .login_box_official{
    display: flex;
    flex-direction: column;
    height: fit-content;
    background: #56565685;
    padding: 2vw;
    border-radius: 1vw;
    align-items: center;
  }
  .official{
    display: flex;
    padding: 13vh 0.5vw 2vh 0.5vw;
    background: white;
    color: black;
    overflow-x: scroll;
    left: 12%;
    width: 87%;
  }
  .official_dash{
    width: 12%;
    background: #039be5e3;;
    z-index: 1;
  }
  table img{
    height: 9vh;
    /* aspect-ratio: 0.7; */
  }
}


/* ################### Mobile Landscape ############################# */
@media screen and (max-width: 1200px)  {
  p{
    font-size: 14px;
    color: azure;
  }
  a{
    color: white;
    font-size: 12px;
  }
  select{
    font-size: 12px;
  }

/* ########################## Mobile Portrait ################################# */
@media screen and (max-width: 600px) {
  a{
    color: white;
    font-size: 16px;
  }
  h1{
    font-size: 26px;
    color: bisque;
  }
  h2{
    font-size: 24px;
  }
  h3{
    font-size: 18px;
  }
  h4{
    font-size: 16px;
  }
  h5{
    font-size: 14px;
  }
  h6{
    font-size: 12px;
  }
  select{
    font-size: 12px;
  }
  nav{
    padding: 0
  }
  nav img{
    width: 80%;
    padding: 4vh 0 0 0;
  }
  nav li{
    display: flex;
    justify-content: center;
    padding: 1vh 0;
    }
  .phone_menu{
    position: absolute;
    display: flex;
    right: -41vw;
    top: 7vh;
    background: #000000a6;
    padding: 0 2vw;
    flex-direction: column;
    border-radius: 2vh;
    width: 40vw;
    transition: 1s;
  }
  .phone_menu img{
    display: block;
    position: absolute;
    top: 0;
    left: -6vw;
  }
  .sticky{
    background: #00000080;
    justify-content: center;
    flex-direction: column;
    height: 7vh;
  }
  .sticky img{
    width: 40%;
    padding: 0;
  }
  .autoscrollA{
    display: none;
  }
  .page{
    /* height: 93vh; */
  }
  .h_page1{
    height: 100vh;
  }
  .h_page2{
    padding: 7vh 4vw 0 4vw;
    height: 93vh;
  }
  .btn_S1{
    width: auto;
    min-width: 25vw;
    padding: 2vw;
    border-width: 0.4vw;
  }
  .aboutus_buttons{
    bottom: 1vh;
    flex-direction: column;
    height: 50vh;
    justify-content: space-around;
    align-content: space-around;
  }
  .home_About_circle{
    width: 20vh;
    height: 20vh;
    border-radius: 4vh;
    box-shadow: 0 0 1vh 0.3vh wheat;
  }
  .btn_display {
    margin: 1vh 1vw 2vh;
  }
  .h_page3 {
    padding: 7vh 4vw 0 4vw;
    text-align: center;
    height: 93vh;
  }
  .h_page4 {
    padding: 7vh 0 0 0;
    overflow-y: hidden;
    height: 93vh;
  }
  .art_img1{
    top: 20vh;
    width: 30vh;
    max-height: 80vh;
  }
  .art_img2 {
    box-shadow: 0 0 1vh 0.3vh white;
    top: 47vh;
    right: 0;
    height: 48vh;
    left: unset;
    height: unset;
    max-height: 48vh;
    max-width: 100%;
  }
  .art_img3{
    display: none;
  }
  .h_page5{
    padding: 7vh 4vw 0 4vw;
    text-align: center;
    justify-content: space-evenly;
    height: 93vh;
  }
  .video_box{
    flex-direction: column;
  }
  .h_page6{
    padding: 7vh 4vw 0 4vw;
    text-align: center;
    justify-content: space-evenly;
    align-content: space-between;
    height: 93vh;
  }
  .aboutus_page, .events_page{
    width: 100%;
    left: 0;
    justify-content: flex-start;
    height: 100vh;
  }
  .aboutus_bashboard, .event_dashboard, .art_dashboard{
    position: fixed;
    width: 80vw;
    z-index: 11;
    margin-top: 7vh;
    height: fit-content;
    transition: 1s;
    left: -81vw;
    border-radius: 0 0 6vw 0;
    padding: 1vw
  }
  .aboutus_content{
    text-align: center;
    margin-top: 7vh;
    flex-wrap: nowrap;
  }
  .aboutus_options{
    flex-wrap: wrap;
    justify-content: space-evenly;
  }
  .dash_icon{
    display: block;
    position: absolute;
    transform: rotate(90deg);
    right: -15vw;
    top: 3.6vh;
    background: #2e7d32;
    padding: 2vw;
    color: white;
  }
  .recognition_box img{
    height: unset;
    width: 85vw;
  }
  .triangle{
    display: none;
  }
  .triangle img{
    display: none;
  }
  .corres_box img{
    width: 85vw;
    height: unset;
  }
  .corres_content{
    justify-content: center;
  }
  .member_box{
    width: 85vw;
    margin: 4vw 2vw;
  }
  .member_dp{
    width: 40vw;
    height: 40vw;
    margin: 4%;
    border-radius: 24vw;
  }
  .member_details{
    width: 50vw;
    margin: 40vw 0 0 35vw;
  }
  .event{
    width: 92vw;
    height: 70vw;
  }
  .land img{
    width: 85vw;
  }
  .port img{
    width: 70vw;
  }
  .event_box{
    margin: 4vw 2vw;
  }
  .art_box{
    width: 85vw;
    height: 56.67vw;
  }
  .artist_detail{
    width: 85vw;
    height: 12vw;
  }
  .artist_detail img{
    height: 11vw;
    width: 11vw;
    border-radius: 8vw;
  }
  .art_box:hover .artist_detail {
    content: '';
    height: 56.2vw;
  }
  .art_box:hover .artist_detail img{
    height: 15.5vw;
    width: 15.5vw;
  }
  .art_box:hover .art_detail{
    top: 40%;
    z-index:1;
  }
  .event_detail_page{
    padding: 20vh 2vw 2vh 2vw;
    width: unset;
  }
  .art_land img, .art_port img{
    width: 60vw;
    height: unset;
  }
  .h_page5 img {
    height: 5vh;
  }
  .donate_us{
    right: 4vw;
    bottom: 21vh;
  }
  .donate_us img {
    width: 26vw;
  }
  .connected_with_us a img {
    height: 7vw;
  }
  .connected_with_us{
    justify-content: space-between;
  }
  .contact_us h3 img {
    height: 1.8vh;
  }
  .phone_on{
    display: flex;
  }
  .friends_detail_page{
    padding: 8vh 2vw 2vh 2vw;
  }
  .oragn_logo img{
    width: 8vw;
    left: 2vw;
    padding: 1vw;
  }
  .organization_video_box{
    max-width: 85vw;
  }
  .connect_organization{
    justify-content: center;
  }
  .content{
    width: 94%;
  }
  .announcement_page {
    padding: 9vh 0 3vh 0;
    min-height: 88vh;
  }
  .content form p{
    width: 77vw;
  }
  .unismize img {
    height: 5vh;
  }
}