* {
  box-sizing: content-box !important;
}
body:before {
  /* content: url("./images/Slider1_0.png") url("./images/Slider2_0.png") url("./images/Slider3_0.png"); */
  display: none;
}
a {
  color: white;
}

html,
body {
  width: 100%;
  margin: 0px;
  padding: 0px;
  overflow-x: hidden;
}

html {
  scroll-behavior: smooth;
}

body {
  width: 100%;
  background-color: transparent;
  margin: 0;
  padding: 0;
  font-family: 'Galano Grotesque', sans-serif !important;
  font-size: 14px;
  justify-content: center;
  overflow-y: hidden;
}

 /* Layout for the content */
 .content-wrapper {
  display: flex;
  justify-content: space-between;
  /* align-items: center; */
  padding: 20px;
  flex-direction: column;
  gap: 20px;
}

#text-content {
  width: 70%;
}

/* .al-text {
  text-align: right;
  width: 30%;
} */

/* Read more button styling */
.read-more {
  cursor: pointer;
    /* text-decoration: underline; */
    /* color: #5a5a5e; */
    /* background: transparent; */
    font-style: normal;
    font-weight: bold;
    /* font-size: 20px; */
    line-height: 22px;
    width: fit-content;
    padding: 15px;
    border-radius: 28px;
    border: 2px solid white;
    height: 20px !important;
}
.card-name{
  cursor: default !important;
  font-size: 23px;
  text-decoration: none;
}
.card-des{
  cursor: default !important;
  font-size: 22px;
}
/* Modal styling */
.modal {
  display: none; /* Hidden by default */
  position: fixed;
  z-index: 1; /* Sit on top */
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgba(0,0,0,0.4); /* Black with opacity */
}

.modal-content {
  border-radius: 27px !important;
    color: #EBEBEB !important;
    font-size: 15px;
    font-weight: 500;
    padding: 50px !important;
    width: 50% !important;
    /* padding: 0 5% !important; */
    height: Auto;
    background-color: #767676 !important;
    /* background-color: #fefefe; */
    margin: 15% auto;
    padding: 20px;
}
.support-about-card:hover {
  transform: scale(1.05); /* Slightly enlarges the card */
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3), 0 4px 8px rgba(0, 0, 0, 0.2); /* Adds a shadow for depth */
}
.close {
  position: relative;
  bottom: 20px;
  /* left: 2px; */
  font-size: 37px !important;
  font-weight: 700;
  line-height: 1;
  color: #000;
  text-shadow: 0 1px 0 #fff;
  filter: alpha(opacity = 20);
  opacity: .2;
}

.close:hover,
.close:focus {
  color: black;
  text-decoration: none;
  cursor: pointer;
}


/* Slider Styles */
.slider-container {
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.slider-wrapper {
  display: flex;
  transition: transform 0.5s ease-in-out;
  width: 90%;
  height: 31em;

}

.slider-slide {
  flex: 0 0 100%;
  width: 100%;
  box-sizing: border-box;
}

.slider-dots {
  text-align: center;
  margin-top: 20px;
}

.dot {
  height: 12px;
  width: 12px;
  margin: 0 5px;
  background-color: #bbb;
  border-radius: 50%;
  display: inline-block;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.dot.active {
  background-color: #717171;
}
.onemap-button{
  /* width: 30%; */
  display: flex;
  justify-content: center;
  margin: 20px 0;
}
.hr-line {
  color: #9A9A9A !important;
  
}


a:hover {
  text-decoration: underline !important;
}
.imgemob{
  height: 400px;
}
/* tablet screen */
/* Portrait and Landscape */
@media only screen 
  and (min-device-width: 1200px) 
  and (max-device-width: 1600px) {

    .dropdown-content {
      top: 43px !important;
    }
    .slider-wrapper{
      height: 25em !important;
    }
    .dot{
      height: 10px  !important;
      width: 10px !important;
      margin: 10px 2px !important;
    }

    .slider-slide{
      padding-bottom: 20px !important;

    }
    .hea{
      font-size: 34px !important;
      line-height: 47px !important;
    }
    .onemap-button{
      margin: 8px !important;
    }
    .onemap-button button{
      height: 38px !important;
      font-size: 16px !important;
    }
    .insider{
      font-size: 20px !important;
    line-height: 38px !important;
    }
    .feature{
      font-size: 18px !important;
    line-height: 35px !important;
    }
    .feature-img{
      width: 32px !important;
    height: 32px !important;
    }
    .feature-item span {
      font-size: 14px !important;
    }
    .intro-container span{
      font-size: 20px !important;
      justify-items: center;
      text-align: justify;
      width: 85%;;
    }
    .navbar-light .navbar-nav .nav-link{
      font-size: 18px !important;
    }
    .citizen-button button{
    font-size: 18px !important;
    line-height: 26px !important;
    padding: 5px 10px !important;
    font-weight: 600 !important;
    }
    .div-min{
    height: 21em !important;
    margin: 25px 0 0 0 !important;
    }
    .cardimg{
      height: 250px;
      padding: 2%;
    }
    .read-more{
      padding: 10px !important;
    }
    .intro-container{
      padding: 0 5%;
    }
    

}
/* tablet screen */
/* Portrait and Landscape */
@media only screen 
  and (min-device-width: 768px) 
  and (max-device-width: 1200px) 
  and (-webkit-min-device-pixel-ratio: 1) {
    .imgemob{
      height: 400px;
    }
    .slider-wrapper{
      height: 21em !important;
    }
    .dot{
      height: 10px  !important;
      width: 10px !important;
      margin: 10px 2px !important;
    }

    .slider-slide{
      padding-bottom: 20px !important;

    }
    .hea{
      font-size: 34px !important;
      line-height: 47px !important;
    }
    .onemap-button{
      margin: 8px !important;
    }
    .onemap-button button{
      height: 38px !important;
      font-size: 16px !important;
    }
    .insider{
      font-size: 20px !important;
    line-height: 38px !important;
    }
    .feature{
      font-size: 18px !important;
    line-height: 35px !important;
    }
    .feature-img{
      width: 32px !important;
    height: 32px !important;
    }
    .feature-item span {
      font-size: 14px !important;
    }
    .intro-container span{
      font-size: 20px !important;
      justify-items: center;
      text-align: justify;
      width: 85%;;
    }
    .navbar-light .navbar-nav .nav-link{
      font-size: 18px !important;
    }
    .citizen-button button{
    font-size: 18px !important;
    line-height: 26px !important;
    padding: 0 10px !important;
    font-weight: 600 !important;
    }
    .div-min{
    height: auto !important;
    margin: 25px 0 0 0 !important;
    }
    .cardimg{
      height: 250px;
      padding: 2%;
    }
    .read-more{
      padding: 10px !important;
    }
    .intro-container{
      padding: 0 5%;
    }
    
}



@media only screen and (max-width: 500px) {
  .modal-content{
    max-height: 80vh;
    margin: 5px !important;
    padding: 20px !important;
    overflow-y: auto;
    width: auto !important;
    padding-top: 30px !important;
  }
  .div-min{
      height: 22em !important;
      margin: 18px 20px !important;
      padding: 10px 15px !important;
      padding-bottom: 0 !important;
      flex-direction: column !important ;
}
.content-wrapper{
  gap: 10px;
    padding: 10px 0 !important;
}
#text-content{
  font-size: 12px !important;
  line-height: 20px !important;

}
.card-name{
  cursor: default !important;
  font-size: 15px !important;
  text-decoration: none;
}
.card-des{
  cursor: default !important;
  font-size: 14px !important;
}
.read-more{
  height: 22px !important;
  font-size: 9px;
  /* line-height: 14px; */
  width: 20%;
  padding: 0px 5px !important;

}
.onemap-button{
  width: 90%;
 }

  .cardimg{
    height: 110px !important;
  }
  .slider-wrapper{
    height: 25em;
    width: 100%;
  }
  .introhead{
    width: 100% !important;
  }
  .col-lg-12{
    padding: 0 !important;
  }
  .col-lg-6{
    padding: 12px 17px !important;
  
  }
  .address1{
    text-align: start;
  }
  .fa-bars, .fa-close ,.cancel,.hambugarmenu{
    display: inline-block;
    font-size: 25px !important;
}
  .servicesHolder{
    display: none !important;
  }
  .mobNavOpto{
    position: absolute;
    right: 20px;
  }
  .mobNavOpt {
    position: absolute;
    right: 20px;
    
  }
  .footer-main{
    gap: 10px !important;
    justify-content: flex-start !important;
    padding: 0 0 0 13px !important;

  }
  .footer-header{
    font-size: 16px;
    line-height: 21px;
  }
  .youtube-link-button{
    padding-top: 15px !important;
    margin-bottom: 16px !important;
  }
  .header-top-area {
    display: flex;
    flex-direction: column;
  } 
header img{
  height: 28px !important;

}
.headerspan {
  font-size: 18px !important;
  margin-top: 8% !important;

}
  .gov-link{
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 10px;
  }
  .dropbtn{
    padding: 0px !important;
  }
  .gov-first-link{
    border: none !important;
    width: 100%;
    align-items: flex-end;
    gap: 10px;
  }
  .goagov{
         margin-left: 0 !important;
  }
  .gov-img{
    height: 45px !important;
  }
  .header-top{
    justify-content: center !important;
    padding-right: 0px !important; 
    flex-wrap: wrap;
  }
  .header-top-gov{
    justify-content: flex-start !important;
    width: 90% !important;

  }
.footer-bottom {
  padding:15px 0px !important;
}
.support-about-card{
  margin-bottom: 15px !important;
}

.header-social {
    flex-direction: column;
    align-items: flex-start;
}

.header-info {
  flex-direction: row;
  margin-top: 10px;
  font-size: 9px;
  width: 100%;
}
.dropbtn {
  font-size: 10px !important;
    padding: 0 10px;
}
.header-links{
  font-size: 10px !important;
}
.gov{
  font-size: 8px !important;
}
.popup-link{
  flex-direction: column !important;
  font-size: 9px !important;
}


  .email-footer {
    gap: 15px !important;
  }

  .footer-extras {
    margin: 0px !important;
  }


  .logincitizen {
    gap: 10px !important;
  }

  .citizen-button button {
    width: fit-content !important;
    padding: 0 30px;
  }

  .department-button button {
    height: 40px !important;
    width: 80px !important;
    padding: 0 30px;
  }

  header {
    height: 80px ;
    width: 99% !important;
    z-index: 10;
    justify-content: space-between !important;
    display: flex !important;
    align-items: center !important;
    border-bottom: rgba(238, 236, 236, 0.3) solid 3px;
  }

  .header img {
    height: 70px !important;

  }

  .portalbuttonscontainer {
    gap: 0 !important;
    padding: 0 !important;
  }

  .introhead h3 {
    margin: 9px !important;
    font-size: 18px  !important;
    font-weight: bolder;
  }


  .intro-container span {
            font-size: 18px !important;
        line-height: 26px !important;
        text-align: center !important;
        font-weight: 600;
        padding: 0 !important;
        margin: 0px !important;
 }
 

  .onemap-button button {
    height: 40px !important;
    margin: 1px !important;
    font-size: 18px !important;
    width: 100% !important;
    padding: 0 10px !important;
  }

  .intro-container {
    align-items: center;
    align-content: center;
    justify-content: center;
    margin: 0px 20px !important;
    padding-top: 15px !important;
  }

  .citizen {
    display: flex !important;
    flex-direction: column;
    align-items: center;
    width: auto !important;
    font-size: 18px !important;
    line-height: 18px !important;
    margin-top: 2px;
  }

  .login-text {
    display: flex !important;
    flex-direction: column;
    line-height: 14px !important;
    align-items: center;
    font-size: 11px !important;
    width: auto !important;
    text-align: center;
    padding: 8px 0 !important;
  }

  .citizenport {
    flex-direction: column;
    align-items: center;
    padding: 2px !important;
  }

  .citizen-button button {
    font-size: 16px !important;
    padding: 0 11px;

  }

  .department-button button {
    font-size: 16px !important;
    padding: 0 11px;
   
  }
  /* .portal-buttons-container {
    margin: 0 !important;
    width: 80% !important;
    gap: 16px !important;
  } */

  .department-button{
    margin: 0 !important;
  }
  .feature{
  font-size: 20px !important;
  align-self: center !important;
  }
}

@media only screen and (max-width: 775px) {
  .onemap-button
  .intro-container span {
    font-size: 17px  !important;
    line-height: 34px !important;
    padding: 5px !important;
    text-align: center !important;

  }
  .hea {
    font-size: 28px  !important;
    font-weight: 600 !important;
    line-height: 37px !important;
    text-align: center !important;
}
  .feature-img{
    width: 20px !important;
    height: 20px !important;
  }
.crown{
  width: 15px !important;
    height: 15px !important;
}
.feature-item {
  padding: 5px !important;
}
.portal-buttons-container{
  padding: 0 !important;
  width: 90% !important;
}

  .portal-buttons-container {
    margin-top: 0 !important;
  }

  .feature{
    font-size: 16px !important;
  }
  .feature-item span {
    margin-top: 4px !important;
    font-size: 13px !important;
  }
}



header {
  height: 70px;
  width: 99%;
  /* min-width: 100%; */
  z-index: 10;
  justify-content: space-between;
  display: flex !important;
  /* align-items: flex-end; */
  align-items: center;
  border-bottom: rgba(136 136 136 / 30%) solid 3px;
  background-color: #eee3;
}

header img {
  height: 85px;
  margin-left: 10px;
  transition-duration: 0.3s;
  cursor: pointer;
  top: 20px;
  left: 6%;
  /* transform: scale(2.8); */
}

/* header img:hover{
    height:50px;
    transition-duration: 0.8s;
} */

li {
  list-style-type: none;
  float: left;
}


.headerspan{
  flex-direction: column;
                      color: white;
                      font-size: 22px;
                      font-weight: bold;
                      /* margin-left: 30px; */
                      display: flex;
                      text-decoration: none !important;
}
.navbar{
  margin-bottom: 0px !important;
}
.navBar {
  /* height: auto;
    width: max-content;
    margin: 0 auto;
    padding: 20px 0;
    font-size: 20px;
     font-size: 14px;
    margin-left: 50%; */
  font-style: normal;
  font-weight: 500;
  font-size: 16px;
  display: flex;
  justify-content: center;
  gap: 60px;

  margin-top: 35px;
  align-items: end;
}

.navBar li {
  /* margin: 8px 50px; */
  color: white;
  font-weight: 600;
  /* font-size: 14px; */
}

.navBar li:hover {
  color: #7ee7dd;
}
.mobNav0 li,
.mobNav li {
  float: none;
  font-size: 22px;
  padding: 5px 20px;
  list-style: none;
  text-decoration: none;
  color: white !important;
}
.mobNav0 li:hover,
.mobNav li:hover {
  text-underline-offset: 4px;
  text-decoration: underline;
  text-decoration-thickness: 1px;
}
.mobNavOpto,
.mobNavOpt {
  position: absolute;
  right: 20px;
  
}

.fa-bars ,.hambugarmenu{
  font-size: 45px !important;
  padding: 10px 0;
  color: white;
  display: none;
  transition-duration: 0.3s;
}

.fa-bars:hover,.hambugarmenu:hover,
.cancel:hover,
.fa-close:hover {
  transition-duration: 0.8s;
  cursor: pointer;
  color: black;
}

.fa-close {
  font-size: 45px !important;
  padding: 10px 0;
  color: white;
  display: none;
  opacity: 0;
}
.mobNav0,
.mobNav {
  background-color: rgba(38, 50, 69, 0.90);
  top: -400px;
  position: absolute;
  height: auto;
  width: fit-content;
  right: 4px;
  /* padding: 0px 50px 0px 10px; */
  color: white;
}
.mobNav0{
  background-color: rgba(38, 50, 69, 0.90);
  top: -400px;
  position: absolute;
  height: auto;
  width: fit-content;
  right: 4px;
  /* padding: 0px 50px 0px 10px; */
  color: white;
}
.bannerImg {
  height: 800px;
  width: 100%;
  display: flex;
  background-color: grey;
  background: url("./images/bg.png") no-repeat fixed center;
  background-size: cover;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-start;
}

.introhead {
  background: #2c3a40 !important;
  color: #fff !important;
  width: 29em;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 10px;

}



.introhead h3 {
  margin: 0;
  font-weight: 600;
  font-size: 22px ;
}
@media (min-width: 768px) {
  .navbar-light .navbar-nav .nav-link {
    margin-left: 12px;
  }
  .citizen-button button {
    padding: 5px 9px;
    font-size: 18px;
  }



}
.about-cards:hover {
  transform: scale(1.1); /* Slightly enlarges the tile */
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2); /* Adds a shadow effect */
}
.card-item:hover {
  transform: scale(1.1); /* Slightly enlarges the tile */
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2); /* Adds a shadow effect */
}
.nav-item :hover {
  transform: scale(1.1); /* Slightly enlarges the tile */
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2); /* Adds a shadow effect */
}
.nav-link :hover {
  transform: scale(1.1); /* Slightly enlarges the tile */
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2); /* Adds a shadow effect */
}
.navbar-light .navbar-nav .nav-link {
  color: #fff !important;
  margin-left: 30px;
  font-size: 20px;
  font-weight: 600;
  display: flex;
  align-items: center;


}
.navbar-nav {
  float: left;
  margin: 0;
  display: flex;
  align-items: center;
}

.introBox {
  position: absolute;
  height: 160px;
  width: 300px;
  font-size: 20px;
  color: white;
  background-color: #38888bb8;
  z-index: 1000;
  padding: 0px 30px 30px 30px;
  top: 150px;
  left: 10%;
}

.introBox p {
  font-size: 19px;
  font-style: italic;
  font-weight: bolder;
}

.portalContainer {
  width: 80%;
  position: relative;
  height: 280px;
  z-index: 1000;
  margin: 10px 10% 0 10%;
  float: left;
  top: 400px;
}

.citizenPortal,
.departmentPortal {
  position: relative;
  height: 250px;
  float: left;
  width: 32%;
  color: black;
  margin: 0 8%;
  z-index: 1000;
  background-color: #ffffffb8;
}

.citizenPortal {
  margin: 0 0 0 18%;
}

.departmentPortal {
  margin: 0 0 0 3%;
}

.citizenPortal p,
.departmentPortal p {
  position: absolute;
  left: 30px;
  padding: 50px 0;
  width: 46%;
  font-size: 20px;
  text-align: left;
  color: #3e5554;
  font-weight: bolder;
}

.departmentPortal p {
  right: 30px;
  left: auto;
}

.ctznDiv,
.deptDiv {
  width: fit-content;
  padding: 20px 0 20px 60px !important;
  height: auto;
  float: right;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  align-items: center;
}

.ctznDiv {
  padding: 20px 60px 20px 0px !important;
}

.deptDiv {
  float: left;
}

.ctznDiv a {
  width: 100%;
}

.deptDiv a {
  width: 100%;
}

.citizenPortal img,
.departmentPortal img {
  float: left;
  height: 150px;
  box-shadow: 10px 0 60px #c0d4dd;
  border-radius: 50%;
}

.deptBtn,
.ctznBtn {
  background-color: #295450;
  height: 20px;
  width: 100%;
  text-align: center;
  color: white;
  padding: 0 20px;
  border-radius: 12px;
  margin: 10px 0;
  border: 2px solid transparent;
  transition-duration: 0.8s;
  cursor: pointer;
  padding: 10px 0;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.deptBtn:hover,
.ctznBtn:hover {
  background-color: white;
  color: #295450;
  border: 2px solid #295450;
  transition-duration: 0.3s;
  font-weight: bold;
}


/* --------------------------------------------------------------------about section----------------------------------------------- */
.aboutHolder {
  /* height: 70vh;*/
  width: 100%;
  float: left;
  background-color: #44968d;
  background-image: url("./images/About Us_Bkg.png");
  background-size: cover;
  padding: 1% 0;
  color: #ffffff;
  display: flex;
  flex-direction: column;
  gap: 20px;
  align-items: center;
  border-top: 3px solid;
  border-image: linear-gradient(to right, #51716d, #f29f05)1;

}

.aboutHolder div {
  margin: 10px 20px;
}

.aboutImg {
  width: 20%;
  float: left;
  height: 500px;
  background: url(./images/abtimg.png) no-repeat;
  background-size: 124%;
  background-position-x: -37px;
  margin: 10px 0 0 15% !important;
  border-bottom-left-radius: 270px;
  box-shadow: 10px 10px 10px 5px #c4c4c4;
}



.mvv {
  width: 70%;
  padding: 0;
}

.mvv h2 {
  padding: 0;
  margin: 0;
}

.mvv ul {
  padding: 0;
}

.mvv li {
  padding: 0;
  margin: 0;
  float: left;
}

.mvv p {
  text-align: left;
  padding: 0px 5% 30px 0;
  margin: 0;
}

.mvv .fa-check-circle {
  color: #38888b;
}

.videoHolder {
  width: 100%;
  /* height: 95vh;*/
  position: relative;
  background-color: #DDEBFF;
  background-image: url("images/Watch Tutorials - bkg.png");
  background-repeat: no-repeat;
  background-size: cover;
  float: left;
  padding: 1% 0;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  gap: 20px;
}
.contentHolder {
  width: 100%;
  /* position: relative; */
  background-color: #DDEBFF;
  background-image: url("images/Watch Tutorials - bkg.png");
  background-repeat: no-repeat;
  background-size: cover;
  float: left;
  padding: 1% 0;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  gap: 20px;
}
.contentHolder > * {
  width: 80%; /* Example: make the inner content responsive */
  max-width: 1200px; /* Example: max width */
  margin: 0 auto;
  padding: 10px;
  box-sizing: border-box;
}


@media (max-width: 1200px) {
  .navbar-light .navbar-nav .nav-link{
    margin-left: 10px;
    display: flex;
    align-items: end;


  }
  .flex-adj{
    flex-direction: column;
  }

  .contentHolder > * {
    width: 90%;
  }
 

}



@media (max-width: 370px) {
  .videoHolder .service-heading,
  .FAQHolder .service-heading{

    padding: 2% 20px !important; 
    }
}


@media (max-width: 480px) {
  .panel-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .aboutHolder div {
    margin: 0px 5px;
}

  .accordion-toggle {
      width: 100%;
      display: flex;
      justify-content: space-between;
      align-items: center;
      text-decoration: none;
  }

  .accordion-text {
      flex-grow: 1;
      width: 80%; /* Fixed width for the text */
      padding-right: 10px; /* Optional spacing between text and icon */
  }

  .contentHolder > * {
    width: 100%;
    font-size: 9px;

 
  }
  .flexyrow{
    flex-wrap: wrap !important;
  }
  .insider {
    font-size: 16px !important;
    margin-left: 10px !important;


  }
  .feature-item {
    padding: 3px 2px !important;
}

}

.card-container {
  overflow-x: hidden;
  white-space: nowrap;
  width: 100%;
}

.card {
  display: inline-block;
  margin-right: 20px;
  vertical-align: top;
}

.scroll-right-icon {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  cursor: pointer;
}

/* ----------------------------------------------------------------------services Section ---------------------------------------- */

.servicesHolder {
  width: 100%;
  /* height: 95vh; */
  position: relative;
  background-color: #dfe8e6;
  float: left;
  color: #333 !important;
  padding: 1% 0;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  /* padding-top: 20px; */
  gap: 20px;
}



@media only screen and (max-width: 600px) {
  .contact-address {
    width: fit-content !important;
  }

  .services-container {
    gap: 48px !important;
  }

}

.servicesHolder h3 {
  height: auto;
  width: fit-content;
  margin: 0 auto;
  font-size: 35px;
}

.servicesContainerOne,
.servicesContainerTwo {
  height: auto;
  /* background-color: brown; */
  display: flex;
  justify-content: center;
  flex-direction: row;
  margin: 5px 0;
  padding: 20px 0 0 0;
  align-content: flex-end;
  flex-wrap: wrap;
}

.servicesContainerOne p,
.servicesContainerTwo p {
  position: relative;
  bottom: 0;
  top: 170px;
  width: fit-content !important;
  text-transform: uppercase;
  margin: 80px auto 0 auto !important;
}

.servicesHolder p {
  height: auto;
  width: 60%;
  margin: 0 auto;
  text-align: center;
  font-size: 20px;
  letter-spacing: 1px;
}

.urbanPlanning {
  background: url("./images/urbanPlanning.png") no-repeat center;
}

.infrastructure {
  background: url("./images/infrastructure.png") no-repeat center;
}

.landGovernance {
  background: url("./images/landGovernance.png") no-repeat center;
}

.urbanEnvironment {
  background: url("./images/urbanEnvironment.png") no-repeat center;
}

.properties {
  background: url("./images/properties.png") no-repeat center;
}

.urbanServices {
  background: url("./images/urbanServices.png") no-repeat center;
}

.services {
  height: 300px;
  width: 300px;
  float: left;
  background-color: #e6e6e6;
  border-radius: 12px;
  box-shadow: 4px 4px 6px #c3c3c3;
  margin: 40px 5% 0px 5%;
  color: #424343;
  cursor: pointer;
  transition-duration: 0.8s;
}

/* .services:hover {
    background-color: #79d8c1;
    transition-duration: 0.3s;
    color: white;
} */

/* ---------------------------------------------------------Contact section-------------------------------------------------------------- */
.contactHolder {
  width: 100%;
  padding: 20px 0;
  display: flex;
  background-color: rgba(223, 232, 230, 1);
  flex-direction: column;
  align-items: center;
  border-top: 3px solid;
  border-image: linear-gradient(to right, #51716d, #f29f05) 1;
  justify-content: space-around;
}

.contactHolder h3 {
  margin: 0 auto 30px auto;
  width: fit-content;
  font-size: 35px;
}

.info {
  height: auto;
  float: left;
  width: 38%;
  padding: 0 6%;
  text-transform: uppercase;
  position: relative;
}

.info img {
  text-align: center;
  width: 6%;
  margin: 0 47%;
  color: #38888b;
}

.mailInfo h3 {
  font-size: 30px;
  letter-spacing: 1px;
  /* margin: 0 auto !important; */
}

.address h3 {
  margin: 0 auto;
}

.address p {
  text-align: center;
  padding: 0;
  font-size: 20px;
}

.mailInfo p {
  width: 100%;
  margin: 0;
  text-align: center;
  font-size: 24px;
  text-transform: lowercase;
  letter-spacing: 1px;
}

.pdf-container {
  text-align: -webkit-center;
  display: flex;
  flex-direction: row;
  gap: 20px;
  margin: 10px 10%;
}

.embed-responsive {
  position: relative;
  overflow: hidden;
  border-radius: 30px 30px 0 0;
  height: auto !important;
  width: 100%;
}

.embed-responsive-16by9 {
  padding-bottom: 0 !important;
}

.sr-only {
  /* position: absolute; */
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}

/* Style the embedded PDF */
.embed-pdf {
  width: 80%;
  /* Adjust the width as needed */
  height: 80vh;
  /* Adjust the height as needed */
  border: 2px solid #ddd;
  /* Add a border */
  border-radius: 8px;
  /* Optional: Add border radius */
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  /* Optional: Add box shadow */
  margin-bottom: 20px;
  /* Add some spacing between PDFs */
}

/* ---------------------------------------------------------footer-------------------------------------------------------------- */



.footer-menu-main {
  background-color: black;
  height: 50px;
  width: 100%;
}

.labs{
  min-width: 60px;
}
/* a {
  display: flex;
  flex-direction: row;
  gap: 10px;
  color: white;
  text-decoration: none;
} */

/* Change to blue with underline on hover */
a:hover {
  color: blue;
  text-decoration: underline;
}

.footer-ul {
  display: flex;
  /* align-items: center; */
  flex-wrap: wrap;
  /* justify-content: center; */
  gap: 10px;
  font-size: 16px;
  margin: 0px !important;
  padding: 0 !important;
  flex-direction: column;
}

.footer-logo {
  display: flex;
  flex-direction: column;
  justify-content: center;
  flex-wrap: wrap;
}

.footer-main {
  background-color: #44968d;
  background-image: url(./images/footerbg.png);
  background-size: cover;
  /* width: 80%; */
  padding: 40px 0;
  display: flex;
  justify-content: space-evenly;
  align-items: flex-start;
  flex-wrap: wrap;
  align-content: center;
  gap: 50px;
  padding-bottom: 10px !important;
}



.visitor-count {
  padding: 10px;
  background-color: white;
  color: black;
}

.visitor-div {
  display: flex;
  align-items: center;
}

.visitor-text {
  font-size: 16px;
  font-weight: 400;
  line-height: 27.2px;
  color: white;

}

#visitorCount {
  background: #FFFFFF;
  color: black;
  padding: 0 10px;
}

.copyright-text {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: center;

  font-size: 12px;
  font-weight: 600;
  line-height: 21.6px;
  text-align: center;
  color: #FFFFFF;

}

@media only screen and (max-width: 800px) {


  .footer-extras {
    display: flex;
    /* align-items: center; */
    /* justify-content: center; */
    margin: 0 !important;
    gap: 10px !important;
    /* width: 90%; */
    /* margin-bottom: 30px !important; */
    flex-direction: column;
  }

  .footer-quick,
  .footer-more,
  .footer-contact {
    width: auto !important;
  }
}

.goTop {
  position: fixed;
  right: 50px;
  bottom: 50px;
  color: #39706b;
}

.fa-arrow-circle-up {
  font-size: 50px !important;
}

.quickLinks,
.ContactLinks {
  width: 48%;
  display: flex;
  float: left;
  height: 100%;
  margin: 0 1%;
  color: white;
}

.quickLinks {
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  align-items: flex-start;
}

.quickLinks a,
.ContactLinks a {
  color: white;
}

.quickLinks a:hover,
.ContactLinks a:hover {
  color: #7ee7dd;
}

.quickLinks h4,
.ContactLinks h4 {
  color: white;
  float: left;
  text-align: left;
  margin: 10px 0;
  font-size: 30px;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 5px;
}

.quickLinks li,
.ContactLinks li {
  width: 100%;
  float: left;
  margin: 5px 0;
  font-size: 23px;
}

.contactPhno {
  width: 50%;
  float: left;
  background-color: brown;
  height: 100%;
}

.foot {
  height: 20px;
  width: 100%;
  background-color: #39706b;
  float: left;
  color: white;
  text-align: center;
}

/* ---------------------------------------------------SLIDER CONTAINER ---------------- */

.containera {
  width: 100%;
}

.bg0 {
  height: 180vh;
  width: 100%;
  /* background-size: cover; */
}

.bg1 {
  height: 64em;
  width: 100%;
  background: url("./images/Slider1_0.webp") no-repeat center;
  background-size: cover;
  transition: opacity 1.5s ease-in-out !important;

}

.bg2 {
  height: 64em;
  width: 100%;
  background: url("./images/Slider2_0.webp") no-repeat center;
  background-size: cover;
  transition: opacity 1.5s ease-in-out !important;

}

.bg3 {
  background: url("./images/Slider3_0.webp") no-repeat center;
  background-size: cover;
  height: 64em;
  width: 100%;
}

.slideshow-container {
  overflow: hidden;
  display: flex;
  align-items: center;
  flex-direction: column;  
  background: rgb(126 77 59 / 60%);
background-size: cover;
  height: 64em;
  width: 100%;
}

/* Hide the images by default */
.mySlides {
 display: none;
}

.mySlides video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  object-fit: cover;
}

.carousel-control {
  width: 0 !important;
}

.custom-carousel-container {
  overflow: hidden;
  width: 80%;
  max-width: 1300px;
  position: relative;
  margin: auto;
}

.custom-carousel {
  /* width: 30% !important;
  gap: 20%; */
  display: flex;
  transition: transform 0.5s ease-in-out !important;
}

.custom-carousel-item {
  /* min-width: calc(100% / 3); Change to 2 for showing 2 images fully
  box-sizing: border-box; */
  flex: 0 0 auto;
  width: calc(100% / 3 - 20px);
  /* Show 3 images at a time and adjust for gap */
  box-sizing: border-box;
  margin-right: 20px;
  cursor: pointer;

}

.custom-carousel-item img {
  width: 150px;
  border-radius: 10px;
  height: 90px;
}

/* Next & previous buttons */
.prev,
.next {
  cursor: pointer;
  position: absolute;
  top: 40%;
  width: auto;
  margin-top: -22px;
  padding: 16px;
  color: white;
  font-weight: bold;
  font-size: 18px;
  transition: 0.6s ease;
  border-radius: 0 3px 3px 0;
  user-select: none;
  background: #b9d6ea36;
}

/* Position the "next button" to the right */
.next {
  right: 0;
  border-radius: 3px 0 0 3px;
}

/* On hover, add a black background color with a little bit see-through */
.prev:hover,
.next:hover {
  background-color: #0f6eaf;
}

/* Caption text */
.text {
  position: absolute;
  top: 20%;
  color: #2b4451;
  font-size: 12px;
  padding: 8px 12px;
  left: 300px;
  text-align: left;
  letter-spacing: 2px;
  width: 45%;
  letter-spacing: 6px;
}

.rite {
  text-align: right;
  right: 5%;
  left: auto;
  width: 45%;
  letter-spacing: 6px;
}

.text b {
  font-size: 50px;
  color: #649cb7;
  /* -webkit-text-stroke-width:0.1mm; */
  -webkit-text-stroke-color: #fff;
  text-transform: uppercase;
}

/* Number text (1/3 etc) */
.numbertext {
  color: #f2f2f2;
  font-size: 12px;
  padding: 8px 12px;
  position: absolute;
  top: 0;
}

/* The dots/bullets/indicators */
.dot {
  cursor: pointer;
  height: 15px;
  width: 15px;
  margin: 15px 2px;
  background-color: #bbb;
  border-radius: 50%;
  display: inline-block;
  transition: background-color 0.6s ease-in-out;
}

.active,
.dot:hover {
  background-color: #717171;
}

/* Fading animation */
.fade {
  -webkit-animation-name: fade;
  -webkit-animation-duration: 5s;
  animation-name: fade;
  animation-duration: 5s;
}

@-webkit-keyframes fade {
  from {
    opacity: 1;
  }

  to {
    opacity: 1;
  }
}

@keyframes fade {
  from {
    opacity: 1;
  }

  to {
    opacity: 1;
  }
}

/* -----------------------------------FAQ Section ------------------------------------------------------------------------ */
.panel-heading .accordion-toggle:after {
  content: "";
  background-image: url(images/ArrowDown.png);
  background-repeat: no-repeat;
  background-size: contain;
  display: inline-block;
  float: right;
  width: 35px;
  height: 38px;
  /* No rotation for default open */
}


.panel-heading .accordion-toggle.collapsed:after {
  content: "";
  background-image: url(images/ArrowDown.png);
  background-repeat: no-repeat;
  background-size: contain;
  display: inline-block;
  width: 35px;
  height: 38px;
  transform: rotate(180deg); /* Rotates for closed */
  float: right;
}


.panel-heading.blue {
  background-color: #E6F7FF8F !important;
  /* Change to desired color */
  color: white;
  /* Change to desired text color */
  cursor: pointer;
}

.panel-heading.white {
  background-color: white !important;
  /* Change to desired color */
  color: black;
  /* Change to desired text color */
}

.FAQHolder {
  width: 100%;
  float: left;
  background-image: url("images/FAQ Bkg.png");
  background-repeat: no-repeat;
  background-size: cover;
  background-color: white;
  padding: 30px 0;
  display: flex;
  flex-direction: column;
  gap: 20px;
  align-items: center;
}

.support {
  width: 100%;
  float: left;
  background-image: url('images/Support Bkg_01_PNG.png');
  background-repeat: no-repeat;
  background-size: cover;
  background-color: rgba(227, 234, 226, 1);
  padding: 1% 0;
  display: flex;
  flex-direction: column;
  gap: 20px;
  border-top: 3px solid;
  border-image: linear-gradient(to right, #51716d, #f29f05) 1;
  align-items: center;
}

#AccordianContainer {
  border: 1px solid #808080;
  border-radius: 30px;
  background-color: white;
  margin: 0 40px;
  margin-bottom: 10px;
  width: 80%;


}

.panel-group {
  margin: 20px !important;
}

.panel-group .panel {
  margin-bottom: 0;
  border-radius: 18px;
  border: none;
  /* background-color: #E6F7FF8F; */
}

.panel-default>.panel-heading {
  color: #333;
  background-color: white !important;
  /* border-color: #ddd; */
  border: none;
}

.panel-default>.panel-heading+.panel-collapse>.panel-body {
  font-size: 16px;
  font-weight: 400;
  line-height: 27px;
  background-color: #E6F7FF8F;
  border-radius: 18px;
  border: none !important;
}

.panel-group .panel {
  margin-bottom: 0;
  border-radius: 0px !important;
  border-bottom: 1px solid #D9D9D9 !important;
  padding-bottom: 8px;
}


.panel-title {
  margin-top: 0;
  margin-bottom: 0;
  font-size: 18px;
  color: black;
  line-height: 28px;
  font-weight: 400;
  font-family: 'Galano Grotesque', sans-serif;
}

.accordion-link {
  color: #1C4F9C;
  cursor: pointer;
}

.pdfHolder {
  width: 100%;
  /* height: 95vh; */
  position: relative;
  background-image: url("images/FAQ Bkg.png");
  background-color: #DDEBFF;
  float: left;
  padding: 1% 0;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  gap: 20px;
}

.downloadButton {
  background-color: rgba(0, 0, 0, 0.5);
  box-shadow: rgba(0, 0, 0, 0.5) 0 0 0 30000px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding-top: 50px;
  padding-bottom: 70px;
}
.imgcard{
  /* background-color: rgba(0, 0, 0, 0.5); */
  /* box-shadow: rgba(0, 0, 0, 0.5) 0 0 0 30000px; */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

/* -------------------------------------------------------slideShow----------------------------------------------------------------- */
.eventHolder {
  width: 100%;
  margin: 0 auto;
  position: relative;
  float: left;
}

.eventHolder h1 {
  text-align: center;
  text-transform: uppercase;
  padding: 20px 0;
  font-size: 35px;
}

.carousel-inner {
  display: flex;
  justify-content: center;
  /* height: 400px !important; */
  position: relative;
  overflow: hidden;
  margin: 0 10%;
  width: 90% !important;
  gap: 20px;
}

.card-item {
  background-color: #5E7E7BB0;
  border-radius: 36px;
  width: 100%;
  /* width  66.3 %  */
}

.card-description {
  /* color: #EBEBEB; */
  font-size: 14px;
  /* padding: 0 20px; */
  font-weight: 400;
  /* margin-bottom: 20px; */
  letter-spacing: 2%;
  margin: 0;
  padding: 20px;
  text-align: left;
  /* margin: 0; */
  /* padding: 20px; */

}

.card-title {
  color: #EBEBEB;
  font-size: 16px;
  text-decoration: underline;
  font-weight: 600;
  cursor: pointer;
  text-transform: uppercase;
  float: left;
  padding-left: 20px;
  padding-top: 20px;
  margin: 0;
}

.carousel-inner iframe {
  width: 100%;
  border-radius: 30px 30px 0 0;

}

.card-caption {
  position: unset !important;
  padding: 0 !important;
  color: #fff;
  text-align: center;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .6);
  background: rgba(94, 126, 123, 0.69);
  border-radius: 36px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  height: 100%;

}
.pdf3{
  background-image: url('images/surveythumnail.jpeg'); 
  background-size: cover;
}
.pdf2{
  background-image: url('images/deptthumnail.jpeg'); 
  background-size: cover;
}
.pdf1{
  background-image: url('images/citizenthumnail.jpeg');
   background-size: cover;
}



.panel-body {
  font-size: 16px;
}

/* Styling for the arrow icons */
.fa-chevron-down:before {
  content: "\f078";
  /* Unicode for the down arrow */
}

.fa-chevron-up:before {
  content: "\f077";
  /* Unicode for the up arrow */
}

.item {
  border-radius: 2px;
}

.item p {
  color: white;
  width: 35%;
  position: absolute;
  display: inline-block;
  flex-direction: column;
  right: 6%;
  padding: 100px 5%;
  font-size: 25px;
}

.item:nth-child(1) {
  background: url(images/iffi.jpg) no-repeat center;
  background-size: 50%;
  background-position-x: 10px;
  animation-name: itemimgs;
  animation-fill-mode: both;
  transition-duration: 0.5s !important;
}

.item:nth-child(2) {
  background: url(images/event.png) no-repeat center;
  background-size: 50%;
  background-position-x: 10px;
  animation-name: itemimgs;
  animation-fill-mode: both;
  transition-duration: 0.5s !important;
}

.item:nth-child(3) {
  background: url(images/event.png) no-repeat center;
  background-size: 50%;
  background-position-x: 10px;
  animation-name: itemimgs;
  animation-fill-mode: both;
  transition-duration: 0.5s !important;
}

@keyframes itemimgs {
  0% {
    height: 10%;
  }

  100% {
    height: 100%;
    width: 100%;
    margin: 0;
  }
}

.carousel-control {
  background-image: none !important;
  background-color: red;
}

.carousel-control.right {
  right: 20px !important;
  opacity: 1;
  color: #347f7b;
}

.carousel-control.left {
  left: 20px;
  opacity: 1;
  color: #347f7b;
}

.carousel-indicators {
  display: none;
}
.mobNavOpto{
  display: none ;
}

.mobNavOptoo{
  display: none ;
  position: absolute;
  right: 20px;
}

@media (max-width: 900px) {
  .mobNavOptoo {
    display: block;
  }
}
/* -----------------------------------------------------media ------------------------------------------------------------ */
@media screen and (min-width: 900px) {
  .mobNavOpto{
    display: none !important;
  }

}

@media screen and (max-width: 900px) {
  .custom-carousel-item{
    padding: 10px !important;
  }
  .custom-carousel-item img{
    width: 80px;
    height: 50px;
  }

  .text,
  .rite {
    width: auto;
  }

  .navHolder {
    display: none;
  }
  .imgupdate{
    display: none;
  }
  

}

@media screen and (max-width: 1370px) {
  .portalContainer {
    width: 100%;
    margin: 10px 0;
    background-color: transparent;
  }
}

@media screen and (max-width: 1800px) {

  .citizenPortal,
  .departmentPortal {
    width: 40%;
    margin: 0 5%;
  }

  .slideshow-container {
    display: flex;
    flex-wrap: wrap;
  }

}

@media screen and (max-width: 1500px) {

  .citizenPortal,
  .departmentPortal {
    width: 42%;
    margin: 0 4%;
  }
}

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

  .fa-bars,.cancel,
  .fa-close ,.hambugarmenu{
    display: none !important;
  }
}
@media screen and (max-width: 899px) {

  .fa-bars,.hambugarmenu,.cancel
  .fa-close {
    display: inline-block ;
    font-size: 25px !important;
  }
  header{
    height: 50px !important;
  }
}


@media only screen and (max-width: 800px) {

  .citizenPortal p,
  .departmentPortal p {
    width: 25%;
    font-size: 17px;
    left: 300px;
    /* right: 300px; */
  }
}
@media only screen and (max-width: 1200px) {
  .imgupdate{
    display: none;  
  }
  .horizontal-line{
    display: none;
  }
  .bord {
    border-right: none !important;
}
.cen{
  text-align-last:center !important;
}


}

@media only screen and (max-width: 1250px) {
  .hea {
    margin: 0px;
}
.imgupdate{
  height: 20vh;
}


}

.portalbuttonscontainer {
  position: absolute;
  display: flex;
  z-index: 2;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  /* flex-wrap: wrap; */
  /* gap: 34px; */
  /* padding-top: 180px; */
}

@media only screen and (max-width: 900px) and (min-width: 600px) {
  .about-statement {
    width: 84%;
  }
  .servicesHolder {
    height: auto !important;
    overflow: scroll;
  }

  .citizen-button button {
    font-size: 20px !important;
    /* min-width: 100px !important; */

  }


  .department-button button {
    font-size: 22px !important;
    min-width: 100px !important;

  }
}

.long {
  display: flex;
  gap: 10px;
  align-self: center;

}

.short {
  display: flex;
  gap: 10px;
}

.intro-container {
  display: flex;
    flex-direction: column;
    text-align: left;
    align-items: self-start;
    /* margin-left: 80px; */
    flex-wrap: wrap;
    margin-top: 25px;
    /* width: 90%; */
    justify-content: space-between;
    gap: 20px;
}


@media only screen and (max-width: 1400px) {
  .navbar-nav{
    display: block;
  }
}



@media only screen and (max-width: 768px) {
  .about-missions {
    grid-gap: 6px;
    flex-direction: column;
  }

  .about-card2 {
    display: flex;
    flex-direction: row !important;
    margin: 0 !important;
    gap: 14px;
    justify-content: center;
    place-content: space-around;
  }

  .about-cards {
    height: auto !important;
    width: 100% !important;
  }

  .about-card {
    width: auto !important;
  }

  .support-missions {
    flex-wrap: wrap;
    gap: 15px;
  }
  .intro-container {
    /* width: max-content; */
    /* width: 292%; */
    /* height: 61px; */
    display: flex;
    align-items: center;
    margin: 20px 0px !important;
  }
  .pdf-container {
      flex-direction: column;
      justify-content: center;
      align-items: center;
      margin: 20px 10%;
    }
  .contentHolder > * {
      width: 95%;
    }
  
  .youtube-link-button {
      width: auto !important;
      padding: 0px 30px;
      font-size: 80%;
    }
  
  #card-section {
      flex-direction: column !important;
      justify-content: center;
      align-items: center;
      margin: 20px 10%;
    }
  
  .carousel-inner {
      flex-direction: column;
      justify-content: center;
      align-items: center;
      margin: 20px 10%;
    }
  
  .card-item {
      width: 100% !important;
    }

}

.support-missions {
  display: flex;
  justify-content: center;
  gap: 20px;
  flex-wrap: wrap;

  margin-top: 18px !important;
}

.support-about-card {
  width: 348px;
  padding: 10px;
  color: white;
  display: flex;
  /* border: 1px solid white; */
  flex-direction: column;
  align-items: center;
  background: rgba(116, 146, 143, 0.5);

  /* box-shadow: 0 14px 28px rgba(255,255,255,0.25), 0 10px 10px rgba(255,255,255,0.22); */
  margin: 0 ;
  border-radius: 30px;
  transition: transform 0.3s ease, box-shadow 0.3s ease; /* Smooth animation */
}

.support-card-heading {
  font-style: normal;
  font-weight: 500;
  font-size: 16px;
  line-height: 30px;
  text-align: center;
  margin: 0 !important;
}

.support-plan-caption {
  width: 100%;
  margin: 0 !important;
  display: flex;
  justify-content: center;


}

.support-plan-caption span {
  font-style: normal;
  font-weight: 300;
  font-size: 16px;
  line-height: 22px;
  text-align: center;
}


.intro-container span {
  font-family: 'Galano Grotesque', sans-serif;
  font-style: normal;
  font-weight: 600;
  font-size: 24px;
  line-height: 40px;
  gap: 20px;
  color: white;
  margin: 0px;
 
}

.login-text {
  color: white;
  font-size: 16px;
  line-height: 32px;
  font-weight: 300;
  /* width: 700px; */
}

.portal-buttons-container {
  display: flex;
    flex-direction: column;
    padding: 10px 37px;
    gap: 40px;
    /* margin-top: 3%; */
    border-radius: 30px;
    background: rgba(59,29,19, 0.7);
    /* width: 90%; */
    /* padding: 30px 22px !important;
    margin: 0 20px; */
    margin: 0 5%;
}


.onemap-button button {
  font-style: normal;
  font-weight: 600;
  font-size: 20px;
  line-height: 30px;
  height: 48px;
  width: 340px;
  border-radius: 30px;
  border: 2px solid aliceblue;
  background: rgba(255, 255, 255, 0.3);
  padding:0 10px;
}

/* .regbut button{
  background: rgba(242, 159, 5, 0.2);
  font-style: normal;
  font-weight: 600;
  font-size: 20px;
  line-height: 30px;
  height: 30px;
  width: 110px;
  border-radius: 20px;
  border: 2px solid white;
} */
.logincitizen {

  display: flex;
  gap: 40px;
}

.citizenport {
  display: flex;
  justify-content: space-between;
}

.citizen {
  font-size: 24px;
  font-weight: 300;
  color: #f29f05;
  line-height: 27px;
  display: flex !important;
  flex-direction: column;

}

.feature {
  padding: 0;
  font-size: 22px;
  font-weight: 600;
  color: white;
}

.citizen-button button {
  background: transparent;
  font-style: normal;
  font-weight: bold;
  font-size: 20px;
  line-height: 30px;
  width: fit-content;
  padding: 5px 22px;
  border-radius: 30px;
  border: 2px solid white;
}

.department-button {
  display: flex;
  margin-left: auto;

}

.department-button button {
  font-style: normal;
  background: rgba(55, 74, 68, 0.7);
  font-weight: 600;
  font-size: 22px;
  line-height: 30px;
  height: 48px;
  width: 188px;
  border-radius: 30px;
  border: 2px solid white;
}

.mission {
  content: url("./images/mission.svg");
  margin: 0 !important;
  
}
.hambugarmenu{
  content: url("./images/HamburgerMenu.svg");
  margin: 0 !important;
  width: 40px;
  height: 50px;
  vertical-align: text-bottom;


}
.cancel{
  content: url("./images/crosswhite.svg");
  margin: 0 !important;
  width: 30px;
  height: 30px;
  vertical-align: text-bottom;
  display: none ;


}


.spatial {
  content: url("./images/Spatial Analysis.svg");
  margin: 0 !important;
}
.crown{
  content: url("./images/crown.png");
  /* position: fixed; */
  width: 20px;
  height: 20px ;
  /* align-self: center;
  margin-right: 50px; */

}
.crownup{
  position: absolute;
  top: 2px;
  left: 39px;
}

.field {
  content: url("./images/Field Data.svg");
  margin: 0 !important;
}

.geo {
  content: url("./images/Geo Spatial Data.svg");
  margin: 0 !important;
}

.plot {
  content: url("./images/Plot Info.svg");
  margin: 0 !important;
}

.egov {
  content: url("./images/Enhancing EGovernance.svg");
  margin: 0 !important;
}

.track {
  content: url("./images/Vehicle Tracking icon.svg");
  margin: 0 !important;
}

.urban {
  content: url("./images/urban planning.svg");
  margin: 0 !important;
}

.faq {
  content: url("./images/FAQ_icon.svg");
  margin: 0 !important;
}

.watchtut {
  content: url("./images/Watch Tutorials - icon.svg");
  margin: 0 !important;
}

.gotQ {
  content: url("./images/Got Questions__icon.svg");
  margin: 0 !important;
}

.plan {
  content: url("./images/plan.svg");
  margin: 0 !important;

}

.values {
  content: url("./images/value.svg");
  margin: 0 !important;

}

.about-missions {
  display: flex;

  justify-content: center;
  /* align-items: center; */
  margin-top: 18px !important;
}




/* two cards */
.about-card {
  width: 267px;
  display: flex;
  flex-wrap: wrap;
  flex: 0 1 calc(50% - 10px);
  /* Adjust the width to fit two cards in a row */
  border: 1px solid white;
  flex-direction: column;
  align-items: self-start;
  background: rgba(199, 199, 199, 0.42);
  box-shadow: 0 14px 28px rgba(255, 255, 255, 0.25), 0 10px 10px rgba(255, 255, 255, 0.22);
  margin: 0 !important;
  border-radius: 7px;
  /* height: 48%; */
}

.about-card2 {
  display: flex;
  flex-direction: column;
  margin-top: 0 !important;
  margin-bottom: 0px !important;
  gap: 14px;
  justify-content: space-between;
}

.tab {
  display: none;

  justify-content: center;
  /* align-items: center; */
  margin-top: 18px !important;
}

/* Media query for screens between 1210px and 768px */
@media screen and (min-width: 769px) and (max-width: 1210px) {
  .about-missions {
    display: none !important;
  }

  .tab {
    display: flex !important;
  }

  .about-card {
    width: auto;
  }

  .about-cards {
    width: auto;
  }

  .about-card2 {
    margin: 0px !important;
  }
}


.about-cards {
  /* 23width */
  width: 196px;
  border: 1px solid white;
  display: flex;
  flex-direction: column;
  align-items: self-start;
  background: rgba(199, 199, 199, 0.42);
  box-shadow: 0 14px 28px rgba(255, 255, 255, 0.25), 0 10px 10px rgba(255, 255, 255, 0.22);
  margin: 0 !important;
  border-radius: 7px;
}

.about-banner {
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: center;
  text-align: center;
  width: 180px;
  background: #2c3a40;
  color: white;
  height: 50px;
}

.about-banner div {
  font-style: normal;
  font-weight: 500;
  font-size: 24px;
  line-height: 36px;
  /* identical to box height */
  text-align: center;
  color: white;
  width: 180px;
  height: 50px;
}

.mission-caption {
  width: 100%;
  margin: 0 !important;
}

.mission-caption span {
  font-style: normal;
  font-weight: 300;
  font-size: 16px;
  line-height: 24px;
  text-align: left;
}

.plan-caption {
  width: 100%;
  margin: 0 !important;
}

.plan-caption span {
  font-style: normal;
  font-weight: 300;
  font-size: 16px;
  line-height: 22px;
  text-align: center;
}

.values-caption {
  width: 100%;
  margin: 0 !important;
}

.values-caption span {
  font-style: normal;
  font-weight: 300;
  font-size: 16px;
  line-height: 22px;
  text-align: center;
}

.goTopButton {
  position: fixed;
  bottom: 20px;
  right: 20px;
  background-color: #020202;
  /* Change the background color as needed */
  color: white;
  width: 40px;
  z-index: 1;
  height: 40px;
  border-radius: 50%;
  text-align: center;
  line-height: 40px;
  cursor: pointer;
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
  /* Optional: Add a box shadow for visual effect */
  opacity: 0.5;
  display: none; 

}

.goTopButton:hover {
  background-color: #080808;
  /* Change the background color on hover as needed */
}


.about-statement {
  height: 20%;
  width: 85%;
  font-style: normal;
  font-weight: 400;
  font-size: 16px;
  line-height: 24px;
  text-align: center;
}


@media only screen and (max-width: 600px) {
  .about-statement {
    width: 86% !important;
    font-size: 13px;
  }
}

.prev,
.next {
  visibility: hidden !important;
}

.about-card-heading {
  font-style: normal;
  font-weight: 500;
  font-size: 16px;
  line-height: 30px;
  text-align: left;
  margin: 0 !important;
}

.about-cards div {
  /* position: relative; */
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: self-start;
  /* top: -10%; */
  text-align: center;
}

.services-container {
  display: flex;
  flex-wrap: wrap;
  /* align-content: center; */
  gap: 18px;
  text-align: center;
  padding: 62px 150px;
}

.services-tiles {
  flex: 1 1 20%;
}

.tile-inner-div:hover {
  transform: scale(1.1);
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);

}
.feature-item{
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.feature-item:hover {
  transform: scale(1.1); /* Slightly enlarges the tile */
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2); /* Adds a shadow effect */
}

.services-tiles div {
  display: flex;
  flex-direction: column;
  gap: 30px;
  text-align: center;
  align-items: center;
}

.tile-inner-div {
  height: 150px;
  width: 150px;
  display: flex;
  background: #ffff;
  align-items: center;
  justify-content: center;
  box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
  border-radius: 15px;
}

.nexts,
.prevs {
  background-color: transparent;
  /* width: 70px; */
  /* margin: 0px 25px; */
  /* height: 40px; */
  /* color: white; */
  border: none;
  /* font-weight: bolder; */
  /* font-size: 60px; */
  /* padding-bottom: 7px; */
  /* display: flex; */
  justify-content: center;
  align-items: center;
  /* height: 40px; */
  /* border: none; */
  /* cursor: pointer; */

}

#card-section {
  display: flex;
  flex-direction: row;
  gap: 20px;
  margin: 10px 10%;
}

.youtube-link-button {
  background-color: #d5d5d5;
  color: rgba(0, 0, 0, 1.25);
  height: 47px;
  width: 379px;
  text-align: center;
  border: 1px solid white;
  box-shadow: 0px 5.085912227630615px 5.085912227630615px 0px rgba(0, 0, 0, 0.25);
  /* margin: 10px 0; */
  border-radius: 30px;
  padding-top: 15px;
}

.youtube-link-text {
  color: rgba(0, 0, 0, 1);
  ;
  font-size: 22px;
  font-weight: 600;
  line-height: 30px;
  letter-spacing: 0em;
  text-align: center;
}

.service-heading {
  background: #2c3a40;
  color: white;
  text-align: center;
  /* width: 231px; */
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-style: normal;
  font-weight: 500;
  font-size: 24px;
  line-height: 36px;
  text-align: center;
  /* margin: 25px; */
  padding: 0 20px;
  margin: 20px 0;
  width: auto;

}


.service-block {
  display: flex;
  justify-content: center;
  align-items: center;
}

.contact-header {
  background: #2c3a40;
  color: white;
  width: 200px;
  text-align: center;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-style: normal;
  font-weight: 500;
  font-size: 24px;
  line-height: 36px;
  text-align: center;
  margin-bottom: 20px;
}


.contact-container {
  display: flex;
  background-image: url('images/RectangleContact.png');
  background-size: cover;
  background-repeat: no-repeat;
  /* align-items: baseline; */
  font-style: normal;
  font-weight: 400;
  font-size: 16px;
  line-height: 24px;
  text-transform: capitalize;
  flex-direction: column;
  /* margin-left: 3em; */
  /* justify-content: space-evenly; */
  /* align-content: center; */
  flex-wrap: wrap;
  width: 80%;
  /* height: 215px; */
  /* padding-left: 20px; */
  gap: 23px;
  border-radius: 24px 0px 0px 0px;
  border-radius: 24px;
  padding: 20px 30px;
}

@media only screen and (max-width: 900px) {
  .contact-container {
    flex-direction: column;
    margin: auto;
    gap: 5px;
    /* align-items: center; */
    margin: 0 20px;
    font-size: 90% !important;
    /* justify-content: center; */
  }

  .contactHolder {
    /*  height: 53vh;*/
    bottom: 0px;
  }
  .intro-container {
    margin-left: 10px;

  }
}

.contact-numbers {
  display: flex;
  /* flex-direction: column; */
  align-items: center;
  /* justify-content: center; */
  gap: 10px;
}

.contact-address {
  display: flex;
  /* flex-direction: column; */
  align-items: flex-start;
  /* width: 500px; */
  text-align: center;
  gap: 10px;
}

.contact-email {
  display: flex;
  /* flex-direction: column; */
  align-items: center;
  gap: 10px;
  text-transform: lowercase !important;
}

.map-logo {

  height: 100px;
  width: 100px;
  content: url("./images/oneMapGoaLogo1mb.gif");
  /* background-size: contain;
  height: 45px;
  margin: 0 20px;
  padding: 10px 0;
  transition-duration: 0.3s;
  transform: scale(2.2); */
  background-size: contain;
  /* height: 45px;
  margin-left: 20px;
  padding: 0px 0; */
  transition-duration: 0.3s;
  /* transform: scale(3.2); */
}

.phone-icon {
  content: url("./images/Call icon.svg");
}

.address-icon {
  content: url("./images/Location icon.svg");
}

.email-icon {
  content: url("./images/Mail icon.svg");

}

.footer-quick {
  display: flex;
  flex-direction: column;
  color: white;
  justify-content: center;
  gap: 10px;
  width: 50%;
}

.footer-bottom {
  display: flex;
  flex-direction: column;
  align-content: center;
  align-items: center;
  font-size: 10px;
  font-weight: 400;
  line-height: 15px;
  text-align: center;
  color: white;
  /* width: 100%; */
  border-top: 1px solid #9A9A9A;
  background: #385D58;
  padding: 20px;

}

.text-div {
  display: flex;
  flex-direction: row;
  gap: 5px;
  align-items: center;
  align-content: center;
  flex-wrap: wrap;
  justify-content: center;
}

/*  */

.footer-quick span:nth-child(2),
.footer-quick span:nth-child(3) {
  font-style: normal;
  font-weight: 500;
  font-size: 14px;
  /* line-height: 222%; */
  color: #ffffff !important;
  text-decoration: none;
}

.footer-more {
  display: flex;
  flex-direction: column;
  color: white;
  gap: 10px;
  justify-content: center;
  width: 30%;
}

.footer-more span:nth-child(1) {
  font-style: normal;
  font-weight: 600;
  font-size: 16px;
  line-height: 24px;
  /* text-align: center; */
}

.footer-more span:nth-child(2),
.footer-more span:nth-child(3) {
  font-style: normal;
  font-weight: 500;
  font-size: 14px;
  /* line-height: 222%; */
  color: #ffffff !important;
  text-decoration: none;
}

.number-footer-icon {
  content: url("./images/call.svg");
  width: 20px;
  height: 20px;
}

.email-footer-icon {
  content: url("./images/mail.svg");
  width: 20px;
  height: 20px;
}

.loc-footer-icon {
  content: url("./images/loc.svg");
  width: 20px;
  height: 20px;
}

.footer-block {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.footer-contact {
  display: flex;
  flex-direction: column;
  gap: 20px;
  /* width: 80%; */
}

.links {
  display: flex;
  flex-direction: row;
  gap: 10px;
}

.footer-block {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  font-style: normal;
  font-weight: 400;
  font-size: 14px;
}

.email-footer {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 15px;
  color: white;
}

.number-footer {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 15px;
  flex-direction: row;
}

.address-footer {
  font-size: 12.8px;
  font-weight: 400;
  line-height: 19.2px;
  text-align: left;
  color: white;
  display: flex;
  flex-direction: row;
  gap: 15px;
}

.number-footer div {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  color: white;
}

.footer-extras {
  display: flex;
  margin: 0 !important;
  gap: 20px !important;
  flex-direction: column;

}

.footer-heading {
  color: #ffff;
  font-style: normal;
  font-weight: 600;
  font-size: 18px;
  line-height: 24px;
}

.goog-te-gadget .goog-te-combo {
  margin: 4px 0;
  width: 200px;
  height: 40px;
  border-radius: 8px;
}

@media only screen and (width<480px) and (orientation: portrait) {
  .about-cards {
    height: 19vh;
    width: 25%;
  }

  .intro-container {
    font-size: 20px;
  }
}

.header-top-area {
  background: #333333 none repeat scroll 0 0;
  padding: 5px 0;
}

.header-social {
  align-items: center;
  /* display: flex; */
  height: 100%;
  color: #fff;
  width: 100%;
}

.header-info.text-right {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  padding-top: 10px;
}

.row.gov-link {
  padding-top: 10px;
  font-size: 14px;
  display: flex;
  align-items: center;
  flex-wrap: nowrap !important;
}

.row {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  margin-right: -15px;
  margin-left: -15px;
}

.goagov {
  color: white;
  display: flex;
  flex-direction: column;
  margin-left: 10px;
}
.goagov:hover{
  color: white;
}

.dropdown-top {
  position: relative;
  display: inline-block;
}

/* Basic styles for the dropdown container */
.dropdown {
  position: relative;
  display: inline-block;
}

/* Styles for the dropdown content */
.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  z-index: 10;

  
}

/* Styles for the dropdown items */
.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  cursor: pointer;
}

/* Change color of dropdown items on hover */
.dropdown-content a:hover {
  background-color: #f1f1f1;
}

/* Show the dropdown content on hover */
.dropdown:hover .dropdown-content {
  display: block;

}

.search-container {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}

/* Optional: Style the dropdown button */
.dropbtn {
  /*background-color: #4CAF50;*/
  background-color: #333333;
  color: white;
  padding: 16px;
  font-size: 16px;
  border: none;
  cursor: pointer;
}

.gov:hover {
  color: white
}

.sitemap-div {
  font-size: 25px;
  align-self: self-start;
  padding: 20px;
  margin: 10px;
}

.header-info .mail-us {
  position: relative;
}

.header-info .mail-us .search-container {
  display: none;
  position: absolute;
  top: 30px;
  /* Adjust this value based on your icon size */
  left: 0;
  display: flex;
  align-items: center;
  background-color: white;
  padding: 5px;
  border: 1px solid #ccc;
  border-radius: 3px;
  z-index: 1000;
}

.header-info .mail-us .search-bar {
  padding: 5px;
  border: 1px solid #ccc;
  border-radius: 3px 0 0 3px;
  width: 150px;
  /* Adjust the width as needed */
}

.header-info .mail-us .search-btn {
  padding: 5px;
  border: 1px solid #ccc;
  border-left: none;
  border-radius: 0 3px 3px 0;
  background-color: white;
  cursor: pointer;
}

.header-info .mail-us .search-btn img {
  width: 16px;
  /* Adjust the icon size as needed */
  height: 16px;
}

.header-info .mail-us:hover .search-container {
  display: flex;
}
.ul1 {
  display: grid;
}
.linkext{
  color: black;
}
.linkext:hover{
  color: black;
}
.gov-first-link{
  text-align: center;
  margin-right: 15px;
  text-align: left;
  width: 250px; 
  display: flex;
}


.gov-link{
  font-size:14px; display: flex; align-items: center;

}
.horizontal-line {
  border: none;
  height: 2px; /* Height of the line */
  background-color: #fff; /* Line color */
  margin: 15px 15px; /* Spacing around the line */
  width: 50%; /* Full width line */
}
.bord{
  border-right: 2px solid rgb(241, 239, 239);

}
.flexyrow{
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: space-evenly;
}


.feature-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 5px;
  position: relative;
  cursor: pointer;
}

.feature-img {
  width: 40px;
  height: 40px;
}

.feature-item span {
  margin-top: 8px;
  font-size: 17px;
  color: #fff;
}

.hea{
  font-size: 40px;
  font-weight: 600;
  line-height: 59px;
  text-align: justify;
}
.containerspan{
font-size: 24px;
font-weight: 400;
line-height: 40px;
text-align: left;
color: white;
margin-left: 80px;
}
.cen{
  text-align-last:start;
}
.insider{
  color: white;
  font-family: 'Galano Grotesque', sans-serif;
font-size: 22px;
font-weight: 600;
line-height: 31.43px;
text-align: left;
margin: 0 5.5%;
text-transform: uppercase;
}
.imge{
  position: absolute;
  width: 90%;
  height: 520px;
}
.ico{
  width: 10px;
  height: 10px;
  margin-left: 5px;

}

/* login drop */
/* Basic styles for the dropdown button */
.dropdown-btn {
  background-color: transparent;
  border: 2px solid #fff;
  color: white;
  padding: 10px 20px;
  font-size: 16px;
  border-radius: 30px;
  cursor: pointer;
  outline: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* Arrow styling */
.arrow {
  margin-left: 10px;
}

/* Dropdown content, initially hidden */
.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1);
  z-index: 1;
  border-radius: 5px;
  top: 47px;
}

/* Links inside dropdown */
.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  border-bottom: 1px solid #ddd;
  font-size: 14px;
}

/* Last link has no border-bottom */
.dropdown-content a:last-child {
  border-bottom: none;
}

/* Hover effect for the dropdown links */
.dropdown-content a:hover {
  background-color: orange;
}

/* Display the dropdown on hover of the button */
.citizen-button:hover .dropdown-content {
  display: block;
}

/* Button hover effect */
.dropdown-btn:hover {
  background-color: rgba(255, 255, 255, 0.1);
}


/* Mobile Dropdown Button */
.dropdown-mobile {
  position: relative;
  color: white;
  cursor: pointer;
}

.dropdown-mobile:hover .dropdown-content-mobile {
  display: block;
}

.dropdown-content-mobile {
  display: none;
  position: relative;
  /* background-color: #f9f9f9; */
  box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1);
  z-index: 1;
  border-radius: 5px;
  padding: 10px;
}

.dropdown-content-mobile a {
  color: white;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  font-size: 14px;
}

.dropdown-content-mobile a:hover {
  background-color: #ddd;
}

/* Mobile Register Button Styling */
.arrow-mobile {
  margin-left: 10px;
  cursor: pointer;
}

/* Hamburger Menu Toggle */
.mobNavOpt .fa-bars, .mobNavOpt .fa-close {
  font-size: 30px;
  color: white;
  cursor: pointer;
}

.hamburger.active + .mobNav {
  display: flex;
}
.marg{
width: 100%;
    gap: 10px;
    display: flex;
    flex-direction: column;
}

.ministerflex{
  display: flex;
  flex-direction: row-reverse;
  justify-content: center;
  flex-wrap: wrap;
}
.res-min{
  margin: 5px 0px;
}
/* .mister-width{
  width: max-content;
} */
.flex-adj{
  display: flex;
    width: auto !important;
    margin: 0 10px;
    margin: 0 5%;
    gap: 20px;
}
.card-items {
  border-radius: 36px;
}
.card-captions {
  position: unset !important;
  padding: 0 !important;
  color: #fff;
  text-align: center;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .6);
  /* background: rgba(94, 126, 123, 0.69); */
  border-radius: 36px;
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 100%;
  margin: 15px;
  /* border: 2px #333 solid  ; */
}

.card-titles{
  /* color: #333; */
    font-size: 18px;
    text-decoration: underline;
    font-weight: 600;
    cursor: pointer;
    margin: 0;
    /* text-transform: uppercase; */
    /* float: left;
    padding-left: 20px;
    padding-top: 20px;
    margin: 0; */
}
.lefted{
  align-items: start !important;
}
.al-text{
  display: flex;
    flex-direction: column;
    /* align-self: center; */
    /* align-items: center; */
    gap: 5px;
    margin: 5px 0;
    align-items: flex-start;

}
#text-content{
  display: flex !important;
    flex-direction: column;
    /* align-items: flex-end; */
    text-align: justify;
    gap: 20px;
    /* border-radius: 8px; */
    /* font-size: 16px !important; */
    font-weight: 600 !important;
    width: 100%;
    font-size: 18px ;
    line-height: 26px;

}
.div-min{
  display: flex;
    align-items: center;
    border-radius: 36px;
    color: #EBEBEB !important;
    font-size: 15px;
    font-weight: 600;
    margin: 50px 20px;
    width: auto ;
    padding: 0 5% ;
    height: 25em;
    background: rgb(35 35 35 / 77%);
  
}

.profile-icon {
  content: url("../static/images/profile.png");
  width: 100%;
  height: 30px;
  width: 30px;
  margin: 0px !important;
}
.profile-info-screen {
  width: fit-content;
  /* height: 7em; */
  background: white;
  position: absolute;
  right: 1%;
  display: none;
  flex-direction: column;
  justify-content: space-evenly;
  align-items: center;
  border-radius: 8px;
  filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.25));
  top: 4em;

}

.profile-name span {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 400;
  font-size: 15px;
  line-height: 242%;
  color: #000000;
}

.profile-name {
  display: flex;
  flex-direction: column;
  padding: 10px 20px;
}