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

  html,
  body {
      font-family: 'Alexandria', sans-serif;
    height: 100vh;
  }
 
.bdy{
    height: 100vh;
    margin: 0;
  padding: 1rem 1rem 0 0;
    align-items: center;
    justify-content: center;
}
  .card {
    position: relative;
    height: 100%;
  }
  .menu {
     position: fixed;
    /* top: 100; */
    width: 67px;
    height:550px;
    background-color: #1F295A;
    border-radius: 10px;
    /* overflow: hidden; */
    transition: 0.5s ease;
    border: solid #dddddd 2px;
    z-index: 1;
    /* max-height: calc(100vh - 50px);  */
    overflow-y: auto;
    overflow-x: hidden;
  }
  /* when active */

  .menu.active {
    width:225px;
    margin-right: 50px;
    height: 550px;
    
  }
  .menu a{
    display: flex;
    /* flex-direction: row; */
    align-items: center
  }


  .menu::-webkit-scrollbar {
    width: 8px; 
   position: absolute;
   right: 0;
  }
  
  .menu::-webkit-scrollbar-track {
    background: transparent; 
  }
  
  .menu::-webkit-scrollbar-thumb {
    background-color: #999;
    border-radius: 10px;
    border: 2px solid transparent; 
  }
  
  .menu::-webkit-scrollbar-thumb:hover {
    background-color: #888;
  }
  

  ul {
    position: relative;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    /* align-items: baseline; */
    flex-wrap: nowrap;
  }

 ul li {
    position: relative;
    list-style: none;
    height: 60px;
    width: 100%;
    padding-right: 5px;
    display: flex;
    justify-content: space-between;

    align-items: center;
    cursor: pointer;
    /* margin-top:-14px; */
  }
  li:hover {
    background-color: #3a49947e;
    
  }

  .toggle {
    position: fixed;
    top: 55px;
    right: 53px;
    height: 42px;
    width: 42px;
    border-radius: 50%;
    z-index: 1000;
    background-color: #F07731;
    border: 4px solid #1F295A;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
   
  }
  .line-1,
  .line-2 {
    height: 2px;
    width: 15px;
    background-color: #ffffff;
    transition: 0.5s ease;
  }
  
  .line-1 {
    transform: rotate(142deg) translate(4px, 8px);
  }
  .line-2 {
    transform: rotate(45deg) translate(8px, -1px);
  }

  .menu.active .line-1 {
    transform: rotate(0deg) translate(-2px, 0px);
  }
  .menu.active .line-2 {
    transform: rotate(0deg) translate(2px, 0px);
  }

  .span {
    /* margin-right: 30px; */
    font-size: 16px;
    white-space: nowrap;
    visibility: hidden;
    opacity: 0;
    color:#dddddd;
    
  }
  .menu.active .span {
    visibility: visible;
    opacity: 1;
  }

  .dropdown-menu {
    /* padding: 0px 50px 14px 0px; */
    margin-top: -15px;
    font-size: 18px;
    /* white-space: nowrap; */
    /* visibility: hidden;
    opacity: 0; */
    display: none;
    z-index: 1;
    /* display: flex; */
    align-items: flex-end;
    flex-direction: column;
    flex-wrap: nowrap;
   
  }
  .dropdown-menu .span{
margin-right: 30px;
  }
  /* }
  .menu.active .sub-menu span {
    visibility: visible;
    opacity: 1;
  } */

  .dropdown-menu a {
    display: block;
    /* padding: 10px; */
    text-decoration: none;
    color: #ddd;
    align-items: center;
    justify-content: center;
    
  }
  .dropdown-menu li {
    list-style: none;
  margin: 0;
  padding: 10px 20px 0px 0px ; 
  font-size: 14px;
  height: 38px; 
  width: 150px;
  }

 
  .pos{
     top: 60px;
    margin-left: 1322px;
    position: fixed;
    z-index: 1000;
  }


 
.modalCallUs {
  display: none;
  position: fixed;
  top: 3%;
  right: 6%;
  /* transform: translate(-50%, -40%); */
  padding: 20px;
  background: #ffffff;
  border: 1px solid #eabde5;
  z-index: 1000;
  opacity: 0; 
  transition: opacity 0.5s ease; 
  /* max-width: 900px;  */
  width: 90%; 
  height: 80%; 
  overflow-y: none; 
  border-radius: 20px;
  
  
} 

.modalCallUs.active {
  opacity: 1; 
  display: block;
}

.bigsqrinfo {
  margin-top: 1% ;
  margin-right: 1% ;
  float: right;
  
width: 40%;
background-color: #1F295A;
height: 80%;
}

.bigsqrmap {
  margin-top: 1% ;
  margin-right: 1px ;
  margin-left: 1% ;
float: left;
width: 57.8%;
background-color: #dddddd;
height: 80%;
border: 1px black solid;
/* vertical-align: middle; */
}

.bigsqrinfo h2{
color: #F07731;
 margin: 6% 10%
}
.bigsqrinfo img{
  height: 40px;
  width: 40px;
  margin-right: 10%;
  margin-top: 6%;
  margin-left: 10%;
  display: inline-block;
}
.bigsqrinfo .tit{
  color: #F07731;
  display: inline-block;
  margin-top: 6%;
  font-size: 16px;
  vertical-align: top;
}
.bigsqrinfo .subtit{
  display: inline-block;
  color: white;
  margin-top: 12%;
  font-size: 16px;
  vertical-align: top;
  margin-right: -25%;
}

.bigsqrinfo .location{
  margin-right:28%;
   margin-top:2%;
}

.bigsqrinfo .mailIcon{
  width:30px; height:20px;
}

.bigsqrinfo .mail{
  margin-right:28%; margin-top:2%
}

 /* laptop */
 @media (max-width:1024px) {
  .menu{
    width: 60px;
    height:350px;
    z-index: 1;
  }

  .menu.active {
    width:180px;
    margin-right: 60px;
    height: 350px;
    
  }
  ul li {
    height: 50px;
    width: 80%;
  }
  li img {
    height: 40px;
    width: 40px;
  }
  .dropdown-menu li {
    font-size: 12px;
  }
  .footer{
   display: none;
  }
 .span {
    font-size: 14px;
    margin-right: 5px;
  }

  .bodymodal {
    margin-right: 0;
    font-size: 10px;
  }

  .modal {
    width: 90%;
    height: auto;
    border-radius: 20px;
  }
   .img40 {
    width: 30px;
    height: 30px;
  }

  .bigsqrinfo{
    margin: 2px 9px;
    width: 100%;
  }

  .bigsqrinfo h2{
    font-size: 17px;
    margin: 2% 8%;}

  .bigsqrmap{
    width: 100%;
    margin-left: 0px;
  }
 
}    

/* tablet */
@media (max-width: 768px) {
  
  .modalCallUs {
    width: 95%;
    height: 90%;
  }

  .modalCallUs.active {

    overflow-y: auto;
  }
  @media (max-width:768px) {
    .menu{
      width: 60px;
      height:350px;
      z-index: 1;
    }
  
    .menu.active {
      width:180px;
      margin-right: 60px;
      height: 350px;
      
    }
    ul li {
      height: 50px;
      width: 80%;
    }
    li img {
      height: 40px;
      width: 40px;
    }
    .dropdown-menu li {
      font-size: 12px;
    }
    .footer{
     display: none;
    }
  .span {
      font-size: 14px;
      margin-right: 5px;
    }
  
    .bodymodal {
      margin-right: 0;
      font-size: 10px;
    }
  
    .modal {
      width: 90%;
      height: auto;
      border-radius: 20px;
    }
    .img40 {
        width: 30px;
        height: 30px;
      }


      .bigsqrinfo .subtit {
      display: inline-block;
      color: white;
      margin-top: 10%;
      font-size: 16px;
      vertical-align: top;
      margin-right: -15%;
  
  }

  .bigsqrinfo img {
    height: 35px;
    width: 35px;
    margin-right: 9%;
    margin-top: 3%;
    margin-left: 6%;
    display: inline-block;
}

.marg{
  margin-right: 19%;
}


.bigsqrinfo .location {
  margin-right: 20%;
} 
.email{
  margin-top: 8px;
    margin-right: 22%;
}

}


 /* mobile */
    @media (max-width: 480px) {
        
        .modalCallUs {
    width: 88%;
    height: 100%;
    border-radius: 0; /* Remove border-radius on very small screens */
    overflow-y: auto;
  }
  .bigsqrinfo{
  margin-top: 6%;
    margin-right: -1%;
    width: 102%;
    height: 69%;
}
.bigsqrinfo h2{
 font-size: 16px;
   margin: 4% 10%
  }
  .bigsqrinfo .tit {
font-size: 14px;
padding-bottom: 10px;
  }
  .bigsqrinfo .subtit {
    font-size: 14px; 
  }

  .bigsqrinfo {
  
    width: 102%;
   
  }
  
 

.space{
/* height: 40px; */
/* width: 40px; */
/* display: inline-block; */
margin-right: 27%;
}

.headermodal span{
  font-size: 30px;
  float: right;
  cursor: pointer;
  margin-top: -2%;
  margin-left: 5%;
  margin-right: 5%;

}

.footer{

  width: 100%;
  position: static;
padding-bottom: 15px;
      color: white;
  }
  
  .img40 {
  width: 40px;
  height: 40px;
}
      .menu{
        width: 60px;
        height:350px;
        z-index: 1;
      }
    
      .menu.active {
        width:160px;
        margin-right: 50px;
        height: 350px;
        
      }
      ul li {
        height: 50px;
        width: 80%;
      }
      li img {
        height: 40px;
        width: 40px;
      }
      .dropdown-menu li {
        font-size: 12px;
      }
      .footer{
       display: none;
      }
    .span {
        font-size: 14px;
      }
    
      .bodymodal {
        margin-right: 0;
        font-size: 10px;
      }
    
      .modal {
        width: 90%;
        height: auto;
        border-radius: 20px;
      }
      .img40 {
          width: 30px;
          height: 30px;
        }
    }
    
/* print btn attribute*/
@media print {
    .no_print{
        display: none;
    }

}