*{margin: 0; padding: 0; box-sizing: border-box;}
#wrapper {max-width: 100%; margin: auto;}
p{
  margin-top: 1px;
  letter-spacing: 1px;
  text-align: justify;
  font-size: 16px;
  color: grey;
}

.containerz {
  position: relative;
  width: 100%;
  margin: 0 auto;
}

/* Container and Image Styles */
.containerz {
  position: relative;
  width: 100%;
  max-width: 100%;
  margin: 0 auto;
  overflow: hidden;
}

.containerz img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
  object-position: center;
}

/* Desktop specific styles */
@media (min-width: 769px) {
  .containerz img {
    max-height: 450px; /* Limit height on desktop */
    min-height: 300px; /* Ensure minimum height */
  }
}

/* Mobile specific styles */
@media (max-width: 768px) {
  .containerz img {
    max-height: 300px; /* Adjust for mobile */
    min-height: 200px; /* Ensure minimum height */
  }
}

/* For high-resolution displays */
@media 
only screen and (-webkit-min-device-pixel-ratio: 2), 
only screen and (min--moz-device-pixel-ratio: 2),
only screen and (-o-min-device-pixel-ratio: 2/1),
only screen and (min-device-pixel-ratio: 2),
only screen and (min-resolution: 192dpi),
only screen and (min-resolution: 2dppx) {
  .containerz img {
    /* Optional: Use higher resolution image if available */
    /* content: url('images/adobo-housing-about-us-page@2x.webp'); */
  }
}
/*starting of new header*/

header{
  position: absolute;
  top: 0; left: 0; right: 0;
  /*background: #ffffff ;*/
  box-shadow: 0 5px 10px rgba(0,0,0,.1);
  padding: 0px 3%;
  display: flex;
  align-items: center;
  justify-content: space-between ;
  font-family: monospace;
  text-transform: capitalize;
  /*text-decoration: none;*/
  margin: 10px auto;
  z-index: 100;
}

header .logo{
  text-decoration: none;
  font-weight: bolder;
  font-size: 30px;
  font-family: monospace;
  color: white;
}

@media all and (max-width: 768px), only screen and (-webkit-min-device-pixel-ratio: 2) and (max-width: 1024px), only screen and (min--moz-device-pixel-ratio: 2) and (max-width: 1024px), only screen and (-o-min-device-pixel-ratio: 2/1) and (max-width: 1024px), only screen and (min-device-pixel-ratio: 2) and (max-width: 1024px), only screen and (min-resolution: 192dpi) and (max-width: 1024px), only screen and (min-resolution: 2dppx) and (max-width: 1024px) {
header .logo{
font-size: 24px;
color: white;
margin-left: 20px;
      }
    }

header .logo img{}
header .navbar ul{
list-style: none;
}

header .navbar ul li{
  position: relative;
  float: left;
}

header .navbar ul li a{
font-size: 15px;
font-weight: bolder;
padding: 17px;
color: #333;
text-decoration: none;
display: block;
}

header .navbar ul li a:hover{
background: #eff1f1;
color: #34495E;
}

header .navbar ul li ul{
  position: absolute;
  left: 0;
  width: 180px;
  background: #fff;
  display: none;
}

header .navbar ul li ul li{
  width: 100%;
  border-top: 1px solid rgba(0,0,0,.1);
}

header .navbar ul li ul li ul{
  left: 200px;
  top: 0 ;
}

header .navbar ul li:focus-within > ul,
header .navbar ul li:hover > ul{
  display: initial;
}


#menu-bar{
  display: none;
}

header label{
  font-size: 22px;
  color: #333;
  cursor: pointer;
  display: none;
}

@media(max-width: 991px){

  header{
    padding: 1px;
  }
    
    header label{
      display: initial;
      font-weight: bold;
      color: white;
      padding-right: 15px;
    } 

    header .navbar{
      position: absolute;
      top: 100%; left: 0; right: 0;
      background: #fff;
      border-top: 1px solid rgba(0,0,0,.1);
      display: none;

    }
    header .navbar ul li{
      width: 100%;
    }

    header .navbar ul li ul{
      position: relative;
      width: 100%;
    }

    header .navbar ul li ul li{
      background: #eee;
    }

     header .navbar ul li ul li ul{
     width: 100%;
     left: 0;
     }

     #menu-bar:checked ~ .navbar{
      display: initial;
     }
}


/*ending of new header*/
/*ending of new header*/

.hydra{
  width: 95%;
  color: grey;
  margin: 5px auto;
  border: 1px solid grey;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-gap: 15px;
  grid-template-columns: repeat(auto-fit, minmax(380px, 1fr));
  align-items: center;
  justify-content: center;
    }
@media all and (max-width: 768px), only screen and (-webkit-min-device-pixel-ratio: 2) and (max-width: 1024px), only screen and (min--moz-device-pixel-ratio: 2) and (max-width: 1024px), only screen and (-o-min-device-pixel-ratio: 2/1) and (max-width: 1024px), only screen and (min-device-pixel-ratio: 2) and (max-width: 1024px), only screen and (min-resolution: 192dpi) and (max-width: 1024px), only screen and (min-resolution: 2dppx) and (max-width: 1024px) {
.hydra{
width: 95%;
margin-left: auto;
margin-right: auto;
display: block;
      }
}
.hydra1{background-color: ;
      border-radius: 20px;}
.hydra1 p{
  color: grey;
  text-align: justify;
  justify-content: center;
  font-size: 16px;
  font-family: goudy old style;}

.hydra2{background-color: ;
        border-radius: 20px;
  }
.hydra2 iframe{
  border-radius: 20px;
  width: 95%;
  height: 350px;
  margin-left: 20px;
  display: block;
  margin-left: auto;
  margin-right: auto;
  }
  @media all and (max-width: 768px), only screen and (-webkit-min-device-pixel-ratio: 2) and (max-width: 1024px), only screen and (min--moz-device-pixel-ratio: 2) and (max-width: 1024px), only screen and (-o-min-device-pixel-ratio: 2/1) and (max-width: 1024px), only screen and (min-device-pixel-ratio: 2) and (max-width: 1024px), only screen and (min-resolution: 192dpi) and (max-width: 1024px), only screen and (min-resolution: 2dppx) and (max-width: 1024px) {
.hydra2 iframe{
  border-radius: 20px;
  width: 95%;
  height: 235px;
  margin-left: 20px;
  display: block;
  margin-left: auto;
  margin-right: auto;
  }
      }

.hydra2 p{
  text-align: center;
    font-size: 20px;
    font-family: goudy old style;
    text-decoration: underline;

        }
 /* css of rohini detail-DivTable.com */

.divTableCell p{font-size: 15px; 
	            margin-left: 10px;
	             vertical-align: middle;
             }
.divTable{
  display: table;
  width: 100%;
}
.divTableRow {
  display: table-row;
}
.divTableHeading {
  background-color: #EEE;
  display: table-header-group;
}
.divTableCell, .divTableHead {
  border: 1px solid grey;
  /*border-radius: 5px;*/
  display: table-cell;
  padding: 2px 10px;
}
.divTableHeading {
  background-color: #EEE;
  display: table-header-group;
  font-weight: bold;
}
.divTableFoot {
  background-color: #EEE;
  display: table-footer-group;
  font-weight: bold;
}
.divTableBody {
  display: table-row-group;
}
/* end of css of rohini detail-DivTable.com */


h1{text-align: center;
   /*margin: 5px auto;*/
   margin-top: 10px;
   font-size: 24px;
   color: #3CF;
   font-family: monospace;
 } 
h2{text-align: center;
   margin: 5px auto;
   font-size: 24px;
   color: #3CF;
   font-family: monospace;
 }
h3, h4, h5{text-align: center;
   font-size: 20px;
   text-decoration: underline;
   color: #3CF;
   font-family: monospace;
   margin:5px auto;
   margin-bottom: 10px;
   /*margin-top: 20px;*/
 }
h6{text-align: center;
   font-size: 20px;
   text-decoration: underline;
   color: #3CF;
   font-family: monospace;
   margin:15px auto;
   /*margin-top: 20px;*/}


/*-----------starting of all css of main (set-1)-(mission and two sale purchase divs)---------*/
.set-1{
  width: 100%;
  margin: 10px auto;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(330px, 1fr));
  grid-gap: 15px;
  /*border: 1px dotted grey;*/
}


.box-2, .set-2{
  width: 100%;
  margin: 0px auto;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(310px, 1fr));
  grid-gap: 15px;
}

.sheet-1, .class-a, .class-b, .class-c, .class-d{
  width: 100%;
  margin: 1px auto;
  display: grid;
  grid-template-rows: repeat(6, 32px);
  grid-template-columns: 45px 1fr;
  grid-gap: 5px;
  border: 1px dotted grey;
  border-radius: 5px;
}

.box-a{
    grid-row: 1/7;
    border: 1px dotted grey;
    border-radius: 5px;
    /*width: 100%;*/


  }
.box-a p{ 
      writing-mode: vertical-rl;
      transform: rotate(180deg);
      margin: auto;
      width: 60%;
      color: #3cf;
      font-weight: 500;
      margin-top: 45px;
      /*text-align: center;*/
      font-size: 24px;
      font-family: Courier;
    }

.box-b{border-radius: 5px; border: 1px dotted grey;}
.box-b p{
  margin: 7px auto;
  width: 85%; 
  font-size: 16px;
  color: grey;
        }

.box-c{border-radius: 5px; border: 1px dotted grey;}
.box-c p{
  margin: 7px auto;
  width: 85%; 
  font-size: 16px;
  color: grey;
        }
.box-d{border-radius: 5px; border: 1px dotted grey;}
.box-d p{
  margin: 7px auto;
  width: 85%; 
  font-size: 16px;
  color: grey;
        }
.box-e{border-radius: 5px; border: 1px dotted grey;}
.box-e p{
  margin: 7px auto;
  width: 85%; 
  font-size: 16px;
  color: grey;
        }
.box-f{border-radius: 5px; border: 1px dotted grey;}
.box-f p{
  margin: 7px auto;
  width: 85%; 
  font-size: 16px;
  color: grey;
        }
.box-g{border-radius: 5px; border: 1px dotted grey;}
.box-g p{
  margin: 7px auto;
  width: 85%; 
  font-size: 16px;
  color: grey;
        }

.sheet-2{
  width: 100%;
  margin: 1px auto;
  display: grid;
  grid-template-rows: repeat(6, 32px);
  grid-template-columns: 45px 1fr;
  grid-gap: 5px;
  border: 1px dotted grey;
  border-radius: 5px;
        }



/*starting of button css*/
/*.button {
  display: inline-block;
  border-radius: 4px;
  background-color: #3cf;
  border: none;
  color: #FFFFFF;
  text-align: center;
  font-size: 14px;
  padding: px;
  width: 60px;
  transition: all 0.2s;
  cursor: pointer;
  margin: 5px;
}
.button span {
  cursor: pointer;
  display: inline-block;
  position: relative;
  transition: 0.5s;
}
.button span:after {
  content: '\00bb';
  position: absolute;
  opacity: 0;
  top: 0;
  right: -20px;
  transition: 0.5s;
}
.button:hover span {
  padding-right: 25px;
}
.button:hover span:after {
  opacity: 1;
  right: 0;
}*/
/*ending of button css*/

.box-f .button {
  display: inline-block;
  border-radius: 4px;
  background-color: #3cf;
  border: none;
  color: #FFFFFF;
  text-align: center;
  font-size: 14px;
  padding: px;
  width: 80px;
  transition: all 0.2s;
  cursor: pointer;
  margin: 5px;
}

.box-1{
  width: 100%;
  margin: 0px auto;
  border: 1px dotted grey;
  border-radius: 5px;
  display: grid;
  /*grid-template-rows: repeat(6, 32px);*/
  grid-template-columns: 45px 1fr;
  grid-gap: 5px;
}

.box-1 p{
  width: 83%;
  color: grey;
  font-size: 13px;
  text-align: justify;
  align-items: center;
  margin-top: 35px;
  margin-left: auto;
  margin-right: auto;
  display: block;
}

.box-1 .box-a p{
   writing-mode: vertical-rl;
  transform: rotate(180deg);
  display: table;
  color: #3cf;
  width: 60%;
  font-weight: 500;
 align-items: center;
 justify-items: center;
  font-size: 24px;
 font-family: Courier;

}

 @media all and (max-width: 768px), only screen and (-webkit-min-device-pixel-ratio: 2) and (max-width: 1024px), only screen and (min--moz-device-pixel-ratio: 2) and (max-width: 1024px), only screen and (-o-min-device-pixel-ratio: 2/1) and (max-width: 1024px), only screen and (min-device-pixel-ratio: 2) and (max-width: 1024px), only screen and (min-resolution: 192dpi) and (max-width: 1024px), only screen and (min-resolution: 2dppx) and (max-width: 1024px) {
.rohini .div1 p{
  margin-top: 40px;
      }
}



.set-2{
  width: 100%;
  margin: 0px auto;
  /*border: 1px solid grey;*/
  display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  grid-gap: 15px;


}
.class-a{}
.class-b{}
.class-c{}
.class-d{}
/*-----------ending of all css of ( four sale/purchase divs + mission)---------*/

.div11{margin: 25px auto;}
.div11 p{width: 95%; text-align: justify;
      letter-spacing: 1px; margin-left: auto; margin-right: auto; display: block;}

.geo{
  width: 98%;
  /*border: 1px solid grey;*/
  display: grid;
  margin: 20px auto;
  grid-template-columns: repeat(auto-fit, minmax(310px, 1fr));
  grid-gap: 15px;
}
 @media all and (max-width: 768px), only screen and (-webkit-min-device-pixel-ratio: 2) and (max-width: 1024px), only screen and (min--moz-device-pixel-ratio: 2) and (max-width: 1024px), only screen and (-o-min-device-pixel-ratio: 2/1) and (max-width: 1024px), only screen and (min-device-pixel-ratio: 2) and (max-width: 1024px), only screen and (min-resolution: 192dpi) and (max-width: 1024px), only screen and (min-resolution: 2dppx) and (max-width: 1024px) {
.geo{
width: 98%;
      }
}

.geo1{border: 1px solid grey; width: 98%; border: 1px dotted grey;}
.geo1 img{width: 90%; margin-left: auto; margin-right: auto; display: block;}
.geo1 p{width: 80%; text-align: center; margin: 5px auto;}


.geo2{border: 1px solid grey; width: 98%; border: 1px dotted grey;}
.geo2 img{width: 90%; margin-left: auto; margin-right: auto; display: block;}
.geo2 p{width: 80%; text-align: center; margin: 5px auto;}

.geo3{border: 1px solid grey; width: 98%; border: 1px dotted grey;}
.geo3 img{width: 90%; margin-left: auto; margin-right: auto; display: block;}
.geo3 p{width: 80%; text-align: center; margin: 5px auto;}

/*end of div11*/


.div12{margin: 20px auto;}
.div12 p{width: 95%; text-align: justify;
      letter-spacing: 1px; margin-left: auto; margin-right: auto; display: block;}

.col{
  width: 95%;
  /*border: 1px solid grey;*/
  display: grid;
  margin: 20px auto;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  grid-gap: 15px;
}

.col1{border: 1px solid grey;}
/*.col1 img{width: 95%; margin-left: auto; margin-right: auto; display: block;}*/
/*.col1 p{width: 100%; text-align: center; margin: 5px auto;}*/


.col2{border: 1px solid grey;}
.col2 img{width: 95%; margin-left: auto; margin-right: auto; display: block;}
.col2 p{width: 100%; text-align: center; margin: 5px auto;}

.col3{border: 1px solid grey;}
.col3 img{width: 95%; margin-left: auto; margin-right: auto; display: block;}
.col3 p{width: 100%; text-align: center; margin: 5px auto;}

/*futuristic div*/
.futuristic{width: 95%; margin: 5px auto;}
.futuristic p{text-align: justify;}

.future{
 width: 100%;
 margin: 10px auto;
}
.future img{width: 80%; margin-left: auto; margin-right: auto; display: block;}
.future p{text-align: center;}

@media all and (max-width: 768px), only screen and (-webkit-min-device-pixel-ratio: 2) and (max-width: 1024px), only screen and (min--moz-device-pixel-ratio: 2) and (max-width: 1024px), only screen and (-o-min-device-pixel-ratio: 2/1) and (max-width: 1024px), only screen and (min-device-pixel-ratio: 2) and (max-width: 1024px), only screen and (min-resolution: 192dpi) and (max-width: 1024px), only screen and (min-resolution: 2dppx) and (max-width: 1024px) {
.future img{
  width: 100%;
  margin-top: 5px;
  margin-bottom: 5px;
}
}

.futuristic-rohini{
  margin-top: 25px;
  /*border: 1px solid grey;*/
}
.futuristic-rohini .divTable{width: 35%; margin: 0px auto;}

@media all and (max-width: 768px), only screen and (-webkit-min-device-pixel-ratio: 2) and (max-width: 1024px), only screen and (min--moz-device-pixel-ratio: 2) and (max-width: 1024px), only screen and (-o-min-device-pixel-ratio: 2/1) and (max-width: 1024px), only screen and (min-device-pixel-ratio: 2) and (max-width: 1024px), only screen and (min-resolution: 192dpi) and (max-width: 1024px), only screen and (min-resolution: 2dppx) and (max-width: 1024px) {
.futuristic-rohini .divTable{
width: 90%;
}
}

.Urban{width: 95%; margin: 30px auto;}
.Urban .UR{
  width:40%; 
  float: left; 
  /*padding: 10px; */
  /*border-radius: 40px;*/
  /*margin-top: 30px;*/
  margin-right: 20px;
}

@media all and (max-width: 768px), only screen and (-webkit-min-device-pixel-ratio: 2) and (max-width: 1024px), only screen and (min--moz-device-pixel-ratio: 2) and (max-width: 1024px), only screen and (-o-min-device-pixel-ratio: 2/1) and (max-width: 1024px), only screen and (min-device-pixel-ratio: 2) and (max-width: 1024px), only screen and (min-resolution: 192dpi) and (max-width: 1024px), only screen and (min-resolution: 2dppx) and (max-width: 1024px) {
.Urban .UR{width: 98%;
  display: block;
  margin-left: auto;
  margin-right: auto;
      }
}
.Urban .UR img{
  width:100%;
  height: 290px;  
  /*padding: 10px; */
  border-radius: 10px;
  /*margin-top: 5px;*/
  margin-right: 20px;
  border: 1px dotted grey;
  /*margin-left: 10px;*/
}

@media all and (max-width: 768px), only screen and (-webkit-min-device-pixel-ratio: 2) and (max-width: 1024px), only screen and (min--moz-device-pixel-ratio: 2) and (max-width: 1024px), only screen and (-o-min-device-pixel-ratio: 2/1) and (max-width: 1024px), only screen and (min-device-pixel-ratio: 2) and (max-width: 1024px), only screen and (min-resolution: 192dpi) and (max-width: 1024px), only screen and (min-resolution: 2dppx) and (max-width: 1024px) {
.Urban .UR img{width: 100%;
  display: block;
  margin-left: auto;
  margin-right: auto;
      }
    }

.Urban p{
  margin-top: 1px;
  letter-spacing: 1px;
  text-align: justify;
  /*font-size: 16px;*/
  text-indent: 70px;
  letter-spacing: 1px;
      }

.silk{width: 95%; margin: 10px auto;}
.silk .ER{
  width:30%; 
  float: right; 
  /*padding: 10px; */
  /*border-radius: 40px;*/
  margin-left: 10px;
  /*margin-top: 5px;*/
  margin-right: 15px;
}

@media all and (max-width: 768px), only screen and (-webkit-min-device-pixel-ratio: 2) and (max-width: 1024px), only screen and (min--moz-device-pixel-ratio: 2) and (max-width: 1024px), only screen and (-o-min-device-pixel-ratio: 2/1) and (max-width: 1024px), only screen and (min-device-pixel-ratio: 2) and (max-width: 1024px), only screen and (min-resolution: 192dpi) and (max-width: 1024px), only screen and (min-resolution: 2dppx) and (max-width: 1024px) {
.silk .ER{width: 98%;
  display: block;
  margin-left: auto;
  margin-right: auto;
      }
}
.silk .ER img{
  width:100%;
  height: 175px;  
  /*padding: 10px; */
  border-radius: 10px;
  /*margin-top: 5px;*/
  margin-right: 20px;
  border: 1px dotted grey;
  margin-left: 10px;
}

@media all and (max-width: 768px), only screen and (-webkit-min-device-pixel-ratio: 2) and (max-width: 1024px), only screen and (min--moz-device-pixel-ratio: 2) and (max-width: 1024px), only screen and (-o-min-device-pixel-ratio: 2/1) and (max-width: 1024px), only screen and (min-device-pixel-ratio: 2) and (max-width: 1024px), only screen and (min-resolution: 192dpi) and (max-width: 1024px), only screen and (min-resolution: 2dppx) and (max-width: 1024px) {
.silk .ER img{width: 100%;
  display: block;
  margin-left: auto;
  margin-right: auto;
  height: 275px;
      }
    }

.silk p{
  margin-top: 1px;
  letter-spacing: 1px;
  text-align: justify;
  /*font-size: 16px;*/
  text-indent: 70px;
  letter-spacing: 1px;
      }



.metro{width: 95%; margin: 15px auto;}
.metro .FR{
  width:33.5%; 
  float: right; 
  /*padding: 10px; */
  /*border-radius: 40px;*/
  margin-left: 10px;
  /*margin-top: 5px;*/
  margin-right: 15px;
}

@media all and (max-width: 768px), only screen and (-webkit-min-device-pixel-ratio: 2) and (max-width: 1024px), only screen and (min--moz-device-pixel-ratio: 2) and (max-width: 1024px), only screen and (-o-min-device-pixel-ratio: 2/1) and (max-width: 1024px), only screen and (min-device-pixel-ratio: 2) and (max-width: 1024px), only screen and (min-resolution: 192dpi) and (max-width: 1024px), only screen and (min-resolution: 2dppx) and (max-width: 1024px) {
.metro .FR{width: 98%;
  display: block;
  margin-left: auto;
  margin-right: auto;
      }
}
.metro .FR img{
  width:100%;
  height: 210px;  
  /*padding: 10px; */
  border-radius: 10px;
  margin-top: 5px;
  margin-right: 20px;
  border: 1px dotted grey;
  margin-left: 10px;
}

@media all and (max-width: 768px), only screen and (-webkit-min-device-pixel-ratio: 2) and (max-width: 1024px), only screen and (min--moz-device-pixel-ratio: 2) and (max-width: 1024px), only screen and (-o-min-device-pixel-ratio: 2/1) and (max-width: 1024px), only screen and (min-device-pixel-ratio: 2) and (max-width: 1024px), only screen and (min-resolution: 192dpi) and (max-width: 1024px), only screen and (min-resolution: 2dppx) and (max-width: 1024px) {
.metro .FR img{width: 100%;
  display: block;
  margin-left: auto;
  margin-right: auto;
  height: 275px;
      }
    }

.metro p{
  margin-top: 1px;
  letter-spacing: 1px;
  text-align: justify;
      }




.met{
  width: 85%;
  margin: 20px auto;
      }

@media all and (max-width: 768px), only screen and (-webkit-min-device-pixel-ratio: 2) and (max-width: 1024px), only screen and (min--moz-device-pixel-ratio: 2) and (max-width: 1024px), only screen and (-o-min-device-pixel-ratio: 2/1) and (max-width: 1024px), only screen and (min-device-pixel-ratio: 2) and (max-width: 1024px), only screen and (min-resolution: 192dpi) and (max-width: 1024px), only screen and (min-resolution: 2dppx) and (max-width: 1024px) {
.met{width: 100%;
  display: block;
  margin-left: auto;
  margin-right: auto;
      }
    }




.met iframe{width: 100%; height: 550px; margin-left: auto; margin-right: auto; display: block;}
@media all and (max-width: 768px), only screen and (-webkit-min-device-pixel-ratio: 2) and (max-width: 1024px), only screen and (min--moz-device-pixel-ratio: 2) and (max-width: 1024px), only screen and (-o-min-device-pixel-ratio: 2/1) and (max-width: 1024px), only screen and (min-device-pixel-ratio: 2) and (max-width: 1024px), only screen and (min-resolution: 192dpi) and (max-width: 1024px), only screen and (min-resolution: 2dppx) and (max-width: 1024px) {
.met iframe{
       width: 100%; 
       height: 350px; 
       margin-left: auto; 
       margin-right: auto; 
       display: block;
      }
    }
.zn{margin: 10px auto;}
.zn img{width: 80%; margin-left: auto; margin-right: auto; display: block;}
@media all and (max-width: 768px), only screen and (-webkit-min-device-pixel-ratio: 2) and (max-width: 1024px), only screen and (min--moz-device-pixel-ratio: 2) and (max-width: 1024px), only screen and (-o-min-device-pixel-ratio: 2/1) and (max-width: 1024px), only screen and (min-device-pixel-ratio: 2) and (max-width: 1024px), only screen and (min-resolution: 192dpi) and (max-width: 1024px), only screen and (min-resolution: 2dppx) and (max-width: 1024px) {
.zn img{width: 100%;
  display: block;
  margin-left: auto;
  margin-right: auto;
      }
    }
.zn p{text-align:center; margin: 20px;}



/*-----------------starting of DD-1 div---REal vs fake price analysis------------*/

.myth{width: 95%; margin: 0px auto;}
.myth p{text-align: justify;}
.DD-1{
 width: 75%;
 margin: 20px auto;
 /*border:1px dotted red;*/
 /*border-radius: 10px;*/
 display: grid;
 /*grid-template-rows: repeat(2, 150px);*/
 grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
 grid-gap: 10px;

}
@media all and (max-width: 768px), only screen and (-webkit-min-device-pixel-ratio: 2) and (max-width: 1024px), only screen and (min--moz-device-pixel-ratio: 2) and (max-width: 1024px), only screen and (-o-min-device-pixel-ratio: 2/1) and (max-width: 1024px), only screen and (min-device-pixel-ratio: 2) and (max-width: 1024px), only screen and (min-resolution: 192dpi) and (max-width: 1024px), only screen and (min-resolution: 2dppx) and (max-width: 1024px) {
.DD-1{ 
 width: 100%;
 margin: 20px auto;
 /*border:1px dotted grey;*/
 /*border-radius: 10px;*/
 display: grid;
 /*grid-template-rows: repeat(2, 150px);*/
 grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
 grid-gap: 10px;
       }
}

.z-1{
       border: 1px dotted grey;
       /*width: 90%;*/
       border-radius: 10px;
       padding: 5px;}

@media all and (max-width: 768px), only screen and (-webkit-min-device-pixel-ratio: 2) and (max-width: 1024px), only screen and (min--moz-device-pixel-ratio: 2) and (max-width: 1024px), only screen and (-o-min-device-pixel-ratio: 2/1) and (max-width: 1024px), only screen and (min-device-pixel-ratio: 2) and (max-width: 1024px), only screen and (min-resolution: 192dpi) and (max-width: 1024px), only screen and (min-resolution: 2dppx) and (max-width: 1024px) {
.DD-1 .z-1{
    /*width: 95%;*/
      }
    }

.DD-1 .z-1 img{
  width: 80%;
  margin-left: auto;
  margin-right: auto;
  display: block;
}

@media all and (max-width: 768px), only screen and (-webkit-min-device-pixel-ratio: 2) and (max-width: 1024px), only screen and (min--moz-device-pixel-ratio: 2) and (max-width: 1024px), only screen and (-o-min-device-pixel-ratio: 2/1) and (max-width: 1024px), only screen and (min-device-pixel-ratio: 2) and (max-width: 1024px), only screen and (min-resolution: 192dpi) and (max-width: 1024px), only screen and (min-resolution: 2dppx) and (max-width: 1024px) {
.DD-1 .z-1 img{
    width: 75;
      }
    }

.z-2{
       border: 1px dotted grey;
       /*width: 90%;*/
       border-radius: 10px;
       padding: 5px;}


.DD-1 .z-2 img{
  width: 80%;
  margin-left: auto;
  margin-right: auto;
  display: block;
}

@media all and (max-width: 768px), only screen and (-webkit-min-device-pixel-ratio: 2) and (max-width: 1024px), only screen and (min--moz-device-pixel-ratio: 2) and (max-width: 1024px), only screen and (-o-min-device-pixel-ratio: 2/1) and (max-width: 1024px), only screen and (min-device-pixel-ratio: 2) and (max-width: 1024px), only screen and (min-resolution: 192dpi) and (max-width: 1024px), only screen and (min-resolution: 2dppx) and (max-width: 1024px) {
.DD-1 .z-2 img{
    width: 75;
      }
    }



/*-----------------ending of DD-1 div---REal vs fake price analysis------------*/

 /*starting of metro*/
 .rithala-metro{width: 95%; margin: 0px auto;}
 .rithala-metro p{text-align: justify;}


 


.font{width: 95%; margin: 20px auto;}
/*.font p{ font-size: 16px; letter-spacing: 1px; text-align: justify;}*/
.font img{width: 65%; margin-left: auto; margin-right: auto; display: block; margin-top: 25px;}
@media all and (max-width: 768px), only screen and (-webkit-min-device-pixel-ratio: 2) and (max-width: 1024px), only screen and (min--moz-device-pixel-ratio: 2) and (max-width: 1024px), only screen and (-o-min-device-pixel-ratio: 2/1) and (max-width: 1024px), only screen and (min-device-pixel-ratio: 2) and (max-width: 1024px), only screen and (min-resolution: 192dpi) and (max-width: 1024px), only screen and (min-resolution: 2dppx) and (max-width: 1024px) {
.font img{
  width: 100%;
      }
    }

.text p{line-height: 1.6;}



.registry{
  margin: 0px auto;
  width: 100%;
  color: grey;
}

.registry-charges{
 width: 95%;
 margin: 20px auto;
 /*border:2px solid blue;*/
 display: grid;
 color: grey;
 /*grid-template-rows: repeat(2, 150px);*/
 grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
 grid-gap: 20px;
}

@media all and (max-width: 768px), only screen and (-webkit-min-device-pixel-ratio: 2) and (max-width: 1024px), only screen and (min--moz-device-pixel-ratio: 2) and (max-width: 1024px), only screen and (-o-min-device-pixel-ratio: 2/1) and (max-width: 1024px), only screen and (min-device-pixel-ratio: 2) and (max-width: 1024px), only screen and (min-resolution: 192dpi) and (max-width: 1024px), only screen and (min-resolution: 2dppx) and (max-width: 1024px) {
.registry-charges{
  width: 98%;
      }
    }

.charges-1{
       border: 1px dotted grey;
       padding: 15px;
}
.charges-2{
       border: 1px dotted grey;
       padding: 15px;}
.registry-charges .divTable{ width: 100%; }

@media all and (max-width: 768px), only screen and (-webkit-min-device-pixel-ratio: 2) and (max-width: 1024px), only screen and (min--moz-device-pixel-ratio: 2) and (max-width: 1024px), only screen and (-o-min-device-pixel-ratio: 2/1) and (max-width: 1024px), only screen and (min-device-pixel-ratio: 2) and (max-width: 1024px), only screen and (min-resolution: 192dpi) and (max-width: 1024px), only screen and (min-resolution: 2dppx) and (max-width: 1024px) {
.registry-charges .divTable{
  width: 95%;
  margin: 0px auto;
      }
    }

.UER-Map{
  width: 95%;
  margin: 20px auto;
      }
@media all and (max-width: 768px), only screen and (-webkit-min-device-pixel-ratio: 2) and (max-width: 1024px), only screen and (min--moz-device-pixel-ratio: 2) and (max-width: 1024px), only screen and (-o-min-device-pixel-ratio: 2/1) and (max-width: 1024px), only screen and (min-device-pixel-ratio: 2) and (max-width: 1024px), only screen and (min-resolution: 192dpi) and (max-width: 1024px), only screen and (min-resolution: 2dppx) and (max-width: 1024px) {
.UER-Map{
       width: 100%; 
       margin-left: auto; 
       margin-right: auto; 
       display: block;
      }
    }


.UER-Map iframe{width: 90%; height: 550px; margin-left: auto; margin-right: auto; display: block;}
@media all and (max-width: 768px), only screen and (-webkit-min-device-pixel-ratio: 2) and (max-width: 1024px), only screen and (min--moz-device-pixel-ratio: 2) and (max-width: 1024px), only screen and (-o-min-device-pixel-ratio: 2/1) and (max-width: 1024px), only screen and (min-device-pixel-ratio: 2) and (max-width: 1024px), only screen and (min-resolution: 192dpi) and (max-width: 1024px), only screen and (min-resolution: 2dppx) and (max-width: 1024px) {
.UER-Map iframe{
       width: 100%; 
       height: 350px; 
       margin-left: auto; 
       margin-right: auto; 
       display: block;
      }
    }
.UER-Map img{width: 30%;
  margin-left: auto;
  margin-right: auto;
  display: block;
  margin-bottom: 15px;
}
@media all and (max-width: 768px), only screen and (-webkit-min-device-pixel-ratio: 2) and (max-width: 1024px), only screen and (min--moz-device-pixel-ratio: 2) and (max-width: 1024px), only screen and (-o-min-device-pixel-ratio: 2/1) and (max-width: 1024px), only screen and (min-device-pixel-ratio: 2) and (max-width: 1024px), only screen and (min-resolution: 192dpi) and (max-width: 1024px), only screen and (min-resolution: 2dppx) and (max-width: 1024px) {
.UER-Map img{
       width: 70%; 
       margin-left: auto; 
       margin-right: auto; 
       display: block;
      }
    }
.guide{
  width: 95%;
  margin:10px auto;

}
@media all and (max-width: 768px), only screen and (-webkit-min-device-pixel-ratio: 2) and (max-width: 1024px), only screen and (min--moz-device-pixel-ratio: 2) and (max-width: 1024px), only screen and (-o-min-device-pixel-ratio: 2/1) and (max-width: 1024px), only screen and (min-device-pixel-ratio: 2) and (max-width: 1024px), only screen and (min-resolution: 192dpi) and (max-width: 1024px), only screen and (min-resolution: 2dppx) and (max-width: 1024px) {
.guide{
width: 98%;
}
}
.guide p{
  letter-spacing: 1px;
  text-align: justify;
}
.guide img{
  width:75%;
  margin-left: auto;
  margin-right: auto;
  display: block;
  /*height: 600px;*/
  margin-top: 15px;
}
@media all and (max-width: 768px), only screen and (-webkit-min-device-pixel-ratio: 2) and (max-width: 1024px), only screen and (min--moz-device-pixel-ratio: 2) and (max-width: 1024px), only screen and (-o-min-device-pixel-ratio: 2/1) and (max-width: 1024px), only screen and (min-device-pixel-ratio: 2) and (max-width: 1024px), only screen and (min-resolution: 192dpi) and (max-width: 1024px), only screen and (min-resolution: 2dppx) and (max-width: 1024px) {
.guide img{
width: 100%;
/*height: 250px;*/

}
}

.guide .budget img{
width: 55%;
}

@media all and (max-width: 768px), only screen and (-webkit-min-device-pixel-ratio: 2) and (max-width: 1024px), only screen and (min--moz-device-pixel-ratio: 2) and (max-width: 1024px), only screen and (-o-min-device-pixel-ratio: 2/1) and (max-width: 1024px), only screen and (min-device-pixel-ratio: 2) and (max-width: 1024px), only screen and (min-resolution: 192dpi) and (max-width: 1024px), only screen and (min-resolution: 2dppx) and (max-width: 1024px) {
.guide .budget img{
width: 100%;
}
}

/*--------starting of css of FAQ -------------*/

.ques{
  width: 70%;
  margin: 10px auto;
  /*border: 1px dotted grey;*/
}

@media all and (max-width: 768px), only screen and (-webkit-min-device-pixel-ratio: 2) and (max-width: 1024px), only screen and (min--moz-device-pixel-ratio: 2) and (max-width: 1024px), only screen and (-o-min-device-pixel-ratio: 2/1) and (max-width: 1024px), only screen and (min-device-pixel-ratio: 2) and (max-width: 1024px), only screen and (min-resolution: 192dpi) and (max-width: 1024px), only screen and (min-resolution: 2dppx) and (max-width: 1024px) {
.ques{
    width: 90%;
      }
    }

 *::before, *::after {
   box-sizing: border-box;
}
 .questionbody {
  /*border: 1px dotted grey;*/
   margin: 0;
   padding: 0;
   color: #4d5974;
   display: flex;
   /*min-height: 100vh;*/
}
 .containerd {
   margin: 0 auto;
   /*padding: 2rem;*/
   width: 100%;
}

@media all and (max-width: 768px), only screen and (-webkit-min-device-pixel-ratio: 2) and (max-width: 1024px), only screen and (min--moz-device-pixel-ratio: 2) and (max-width: 1024px), only screen and (-o-min-device-pixel-ratio: 2/1) and (max-width: 1024px), only screen and (min-device-pixel-ratio: 2) and (max-width: 1024px), only screen and (min-resolution: 192dpi) and (max-width: 1024px), only screen and (min-resolution: 2dppx) and (max-width: 1024px) {
.containerd{
  width: 95%;
      }
}
 .accordion .accordion-item {
   border-bottom: 1px solid #e5e5e5;
}
 .accordion .accordion-item button[aria-expanded='true'] {
   border-bottom: 1px solid #03b5d2;
}
 .accordion button {
   position: relative;
   display: block;
   text-align: left;
   width: 100%;
   padding: 1em 0;
   color: #7288a2;
   font-size: 1rem;
   font-weight: 400;
   border: none;
   background: none;
   outline: none;
}
 .accordion button:hover, .accordion button:focus {
   cursor: pointer;
   color: #03b5d2;
}
 .accordion button:hover::after, .accordion button:focus::after {
   cursor: pointer;
   color: #03b5d2;
   border: 1px solid #03b5d2;
}
 .accordion button .accordion-title {
   /*padding: 1em 1.5em 1em 0;*/
   text-align: justify;
}

 .accordion button .accordion-title p {
   text-align: justify;
   width: 90%;

}


 .accordion button .icon {
   display: inline-block;
   position: absolute;
   top: 18px;
   right: 0;
   width: 22px;
   height: 22px;
   border: 1px solid;
   border-radius: 22px;
}
 .accordion button .icon::before {
   display: block;
   position: absolute;
   content: '';
   top: 9px;
   left: 5px;
   width: 10px;
   height: 2px;
   background: currentColor;
}
 .accordion button .icon::after {
   display: block;
   position: absolute;
   content: '';
   top: 5px;
   left: 9px;
   width: 2px;
   height: 10px;
   background: currentColor;
}
 .accordion button[aria-expanded='true'] {
   color: #03b5d2;
}
 .accordion button[aria-expanded='true'] .icon::after {
   width: 0;
}
 .accordion button[aria-expanded='true'] + .accordion-content {
   opacity: 1;
   max-height: 50em;
   transition: all 200ms linear;
   will-change: opacity, max-height;
   /*margin-left: 15px;*/
}
 .accordion .accordion-content {
   opacity: 0;
   max-height: 0;
   overflow: hidden;
   transition: opacity 200ms linear, max-height 200ms linear;
   will-change: opacity, max-height;
   /*margin-left: 15px;*/
}
 .accordion .accordion-content p {
   font-size: 17px;
   font-weight: 300;
   margin: 15px;
   padding: 5px;
   color: grey;
   text-align: justify;
}
.accordion-content img{ width: 80%;
    margin-left: auto;
    margin-right: auto;
    display: block;
 }
 @media all and (max-width: 768px), only screen and (-webkit-min-device-pixel-ratio: 2) and (max-width: 1024px), only screen and (min--moz-device-pixel-ratio: 2) and (max-width: 1024px), only screen and (-o-min-device-pixel-ratio: 2/1) and (max-width: 1024px), only screen and (min-device-pixel-ratio: 2) and (max-width: 1024px), only screen and (min-resolution: 192dpi) and (max-width: 1024px), only screen and (min-resolution: 2dppx) and (max-width: 1024px) {
.accordion-content img{
    width: 95%;
      }
    }
/*--------ending of css of FAQ -------------*/




.main-faq{
  width: 75%;
  border: 1px solid grey;
  margin: 5px auto;
  display: grid;
  grid-row-gap: 10px;
  margin-bottom: 60px;
}
@media all and (max-width: 768px), only screen and (-webkit-min-device-pixel-ratio: 2) and (max-width: 1024px), only screen and (min--moz-device-pixel-ratio: 2) and (max-width: 1024px), only screen and (-o-min-device-pixel-ratio: 2/1) and (max-width: 1024px), only screen and (min-device-pixel-ratio: 2) and (max-width: 1024px), only screen and (min-resolution: 192dpi) and (max-width: 1024px), only screen and (min-resolution: 2dppx) and (max-width: 1024px) {
.main-faq{
    width: 90%;
      }
    }

.inner-faq{
  width: 98%;
  border: 1px dotted grey;
  margin: 5px auto;
  display: grid;
   grid-template-rows: repeat(2);
  grid-template-columns: 50px 1fr;
  text-align: justify;
  padding: 8px;
           }
.Urban-Extention-Road{
 width: 98%;
 margin: 10px auto;
 border:1px solid black;
 display: grid;
 /*grid-template-rows: repeat(2, 150px);*/
 grid-template-columns: repeat(auto-fit, minmax(450px, 1fr));
 grid-gap: 20px;
 /*grid-auto-rows: 150px;*/
 /*align-items: center;*/
 /*justify-content: center;*/
 /*justify-items:center; start/end/strech*/
}

.UER-1{background-color: greenyellow;
       border: 1px dotted grey;
      }
.UER-1 img{width: 100%; margin-top: 0px;}
.UER-2{background-color: blueviolet;
       border: 1px dotted grey;
      }
.tiv{width: 100%; margin: 15px auto;}
.tiv .divTable{width: 95%;}
@media all and (max-width: 768px), only screen and (-webkit-min-device-pixel-ratio: 2) and (max-width: 1024px), only screen and (min--moz-device-pixel-ratio: 2) and (max-width: 1024px), only screen and (-o-min-device-pixel-ratio: 2/1) and (max-width: 1024px), only screen and (min-device-pixel-ratio: 2) and (max-width: 1024px), only screen and (min-resolution: 192dpi) and (max-width: 1024px), only screen and (min-resolution: 2dppx) and (max-width: 1024px) {
.tiv .divTable{
    width: 100%;
      }
    }
.nino{
 width: 95%;
 margin: 20px auto;
 /*border:1px solid black;*/
 display: grid;
 /*grid-template-rows: repeat(2, 150px);*/
 grid-template-columns: repeat(auto-fit, minmax(450px, 1fr));
 grid-gap: 20px;
 /*grid-auto-rows: 150px;*/
 /*align-items: center;*/
 justify-content: center;
 /*justify-items:center; start/end/strech*/
}

.nino-1{
       border: 1px dotted grey; 
       border-radius: 5px;
       }
.nino-1 img{width: 100%;}
.nino-2{
       border: 1px dotted grey;
       border-radius: 5px;
       }
.nino-2 img{width: 100%;}


.contact{
 width: 85%;
 margin: 50px auto;
 /*border:1px solid black;*/
 display: grid;
 grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
 grid-gap: 20px;
}
@media all and (max-width: 768px), only screen and (-webkit-min-device-pixel-ratio: 2) and (max-width: 1024px), only screen and (min--moz-device-pixel-ratio: 2) and (max-width: 1024px), only screen and (-o-min-device-pixel-ratio: 2/1) and (max-width: 1024px), only screen and (min-device-pixel-ratio: 2) and (max-width: 1024px), only screen and (min-resolution: 192dpi) and (max-width: 1024px), only screen and (min-resolution: 2dppx) and (max-width: 1024px) {
.contact{
  width: 90%;
      }
    }
.contact-1{
       /*border: 1px dotted grey;*/
       }
.contact-1 p{font-size: 22px;}
.contact-1 img{width: 100%;
border: 1px solid grey;}


.contact-2{
       /*border: 1px dotted grey;*/
      }



/*---------About us page------------*/
.Abot{width: 80%; margin: 1px auto; text-align: justify;}
.Abot p{color: grey; font-size: 16px;}
.layout {
  width: 100%; 
  /*border : 2px solid #000; */
  overflow:hidden;
  margin: 10px auto;
}

#one {
  /*background-color: white;*/
  float:left; 
  /*margin-right:15px;*/
  width:350px;
  /*border:2px dashed #3cf;*/
  /*border-radius: 0px 70px;*/
}
#one img{
  margin-left: auto;
  margin-right: auto;
  display: block;
  width: 60%;
  height: auto;
  border-radius: 50%;
  margin:10px auto;
}
#two { 
  /*background-color: white;*/
  overflow:hidden;
  margin:10px;
  border:2px dashed #ccc;
  min-height:170px;
  /*border-radius: 0px 70px;*/
}
#two p{width: 85%; text-align: justify; margin: 10px auto;}


@media screen and (max-width: 600px) {
   #one { 
    float: none;
    margin-right:0;
    width:auto;
    border:0;
       
  }
}
/*-------ending of css of layout div------------*/


/*---------About us page end------------*/

/* for desktop what's up */
.whatsapp_float {
  position:fixed;
  width:60px;
  height:60px;
  bottom:40px;
  right:40px;
  background-color:#25d366;
  color:#FFF;
  border-radius:50px;
  text-align:center;
        font-size:30px;
  box-shadow: 2px 2px 3px #999;
        z-index:100;
}

.whatsapp-icon {
  margin-top:16px;
}
/* for mobile */
@media screen and (max-width: 767px){
     .whatsapp-icon {
   margin-top:10px;
     }
    .whatsapp_float {
        width: 40px;
        height: 40px;
        bottom: 20px;
        right: 10px;
        font-size: 22px;
    }
}


/*social media*/

.middle{
  position: unset;
  top: 50%;
  /*transform: translateY(-50%);*/
  width: 100%;
  text-align: center;
}
.btn{
  display: inline-block;
  width: 40px;
  height: 40px;
  background: #f1f1f1;
  margin: 10px;
  border-radius: 30%;
  box-shadow: 0 5px 15px -5px #00000070;
  color: #3498db;
  overflow: hidden;
  position: relative;
}
.btn i{
  line-height: 40px;
  font-size: 23px;
  transition: 0.2s linear;
}
.btn:hover i{
  transform: scale(1.3);
  color: #f1f1f1;
}
.btn::before{
  content: "";
  position: absolute;
  width: 120%;
  height: 120%;
  background: #3498db;
  transform: rotate(45deg);
  left: -110%;
  top: 90%;
}
.btn:hover::before{
  animation: aaa 0.7s 1;
  top: -10%;
  left: -10%;
}
@keyframes aaa {
  0%{
    left: -110%;
    top: 90%;
  }50%{
    left: 10%;
    top: -30%;
  }100%{
    top: -10%;
    left: -10%;
  }
}

/*end of social media*/



.error{
 width: 85%;
 margin: 15px auto;
 /*border:1px solid black;*/
 display: grid;
 /*grid-template-rows: repeat(2, 150px);*/
 grid-template-columns: repeat(auto-fit, minmax(225px, 1fr));
 grid-gap: 20px;
 /*grid-auto-rows: 150px;*/
 align-items: center;
 /*justify-content: center;*/
 /*justify-items:center; start/end/strech*/
 /*margin-bottom: 75px;*/
}


@media all and (max-width: 768px), only screen and (-webkit-min-device-pixel-ratio: 2) and (max-width: 1024px), only screen and (min--moz-device-pixel-ratio: 2) and (max-width: 1024px), only screen and (-o-min-device-pixel-ratio: 2/1) and (max-width: 1024px), only screen and (min-device-pixel-ratio: 2) and (max-width: 1024px), only screen and (min-resolution: 192dpi) and (max-width: 1024px), only screen and (min-resolution: 2dppx) and (max-width: 1024px) {
.error{
  width: 90%;
  margin: 15px auto;
  /*grid-gap: 30px;*/
      }
    }

.zone-n1{
       width: 100%;
       }
.zone-n1 .oops p{
  text-align: center;
  font-size: 75px;
  margin: 30px auto;
}
.zone-n1 .sorry p{
  text-align: center;
  font-size: 18px;
  text-decoration: underline;
}
.zone-n1 .sorre p{font-size: 18px; text-align: center; width: 90%; margin: 15px;}
@media all and (max-width: 768px), only screen and (-webkit-min-device-pixel-ratio: 2) and (max-width: 1024px), only screen and (min--moz-device-pixel-ratio: 2) and (max-width: 1024px), only screen and (-o-min-device-pixel-ratio: 2/1) and (max-width: 1024px), only screen and (min-device-pixel-ratio: 2) and (max-width: 1024px), only screen and (min-resolution: 192dpi) and (max-width: 1024px), only screen and (min-resolution: 2dppx) and (max-width: 1024px) {
.zone-n1 .sorre p{
  width: 90%;
  margin: 15px auto;
  /*text-align: justify;*/
      }
    }

.zone-n2{
       width: 100%;
      }
.zone-n2 img{
  width: 65%;
}
@media all and (max-width: 768px), only screen and (-webkit-min-device-pixel-ratio: 2) and (max-width: 1024px), only screen and (min--moz-device-pixel-ratio: 2) and (max-width: 1024px), only screen and (-o-min-device-pixel-ratio: 2/1) and (max-width: 1024px), only screen and (min-device-pixel-ratio: 2) and (max-width: 1024px), only screen and (min-resolution: 192dpi) and (max-width: 1024px), only screen and (min-resolution: 2dppx) and (max-width: 1024px) {
.zone-n2 img{
  width: 80%;
  height: auto;
  margin-left: auto;
  margin-right: auto;
  display: block;
      }
    }
.tag-1 .divTable{
  width: 100%;
  margin: 3px auto;
}
.tag-1 .divTable .divTableCell{
  border-radius: 5px;
  color: grey;
}
.silk-road{width: 95%; margin: 0px auto;}
.silk-road img{
  width: 75%;
  margin-left: auto;
  margin-right: auto;
  display: block;
}
@media all and (max-width: 768px), only screen and (-webkit-min-device-pixel-ratio: 2) and (max-width: 1024px), only screen and (min--moz-device-pixel-ratio: 2) and (max-width: 1024px), only screen and (-o-min-device-pixel-ratio: 2/1) and (max-width: 1024px), only screen and (min-device-pixel-ratio: 2) and (max-width: 1024px), only screen and (min-resolution: 192dpi) and (max-width: 1024px), only screen and (min-resolution: 2dppx) and (max-width: 1024px) {
.silk-road img{
  width: 100%;
      }
    }
.silk-road p{
  text-indent: 70px;
  width: 100%;
}
.cell{width: 95%; margin: 0px auto;}

/*footer*/

.bg-footer {
    background-color: #33383c;
    padding: 50px 0 30px;
}
.footer-heading {
    letter-spacing: 2px;
}

.footer-link a {
    color: #acacac;
    line-height: 40px;
    font-size: 14px;
    transition: all 0.5s;
}

.footer-link a:hover {
    color: #1bbc9b;
}

.contact-info {
    color: #acacac;
    font-size: 14px;
}

.footer-social-icon {
    font-size: 15px;
    height: 34px;
    width: 34px;
    line-height: 34px;
    border-radius: 3px;
    text-align: center;
    display: inline-block;
}

.facebook {
    background-color: #4e71a8;
    color: #ffffff;
}

.twitter {
    background-color: #55acee;
    color: #ffffff;
}

.google {
    background-color: #d6492f;
    color: #ffffff;
}

.apple {
    background-color: #424041;
    color: #ffffff;
}

.footer-alt {
    color: #acacac;
}

.footer-heading {
    position: relative;
    padding-bottom: 12px;
}

.footer-heading:after {
    content: '';
    width: 25px;
    border-bottom: 1px solid #FFF;
    position: absolute;
    left: 0;
    bottom: 0;
    display: block;
    border-bottom: 1px solid #1bbc9b;
}

.container{
  max-width: 1170px;
  margin:auto;
}
.row{
  display: flex;
  flex-wrap: wrap;
}
ul{
  list-style: none;
}
.footer{
  background-color: #24262b;
    padding: 70px 0;
}
.footer-col{
   width: 25%;
   padding: 0 15px;
}
.footer-col p{
  font-size: 17px;
  color: #ffffff;
  text-transform: capitalize;
  margin-bottom: 22px;
  font-weight: 500;
  position: relative;
}
.footer-col p::before{
  content: '';
  position: absolute;
  left:0;
  bottom: -10px;
  background-color: #e91e63;
  height: 2px;
  box-sizing: border-box;
  width: 50px;
}
.footer-col ul li:not(:last-child){
  margin-bottom: 10px;
}
.footer-col ul li a{
  font-size: 16px;
  text-transform: capitalize;
  color: #ffffff;
  text-decoration: none;
  font-weight: 300;
  color: #bbbbbb;
  display: block;
  transition: all 0.3s ease;
}
.footer-col ul li a:hover{
  color: #ffffff;
  padding-left: 8px;
}
.footer-col .social-links a{
  display: inline-block;
  height: 38px;
  width: 38px;
  background-color: rgba(255,255,255,0.2);
  margin:0 10px 10px 0;
  text-align: center;
  line-height: 40px;
  border-radius: 50%;
  color: #ffffff;
  transition: all 0.5s ease;
}
.footer-col .social-links a:hover{
  color: #24262b;
  background-color: #ffffff;
}

/*responsive*/
@media(max-width: 767px){
  .footer-col{
    width: 50%;
    margin-bottom: 30px;
}
}
@media(max-width: 574px){
  .footer-col{
    width: 100%;
}
}
.social-links img{margin: 5px auto;}
.social-links p{color: #bbbbbb;}
.social-links img{width: 18%}

.footer-container {
  display: flex;
/*  justify-content: center;*/
}

.social-icons {
  list-style-type: none;
  display: flex;
  gap: 10px;
}

.social-icons li {
  display: inline-block;
}

.social-icon img {
  width: 40px;
  height: 40px;
  transition: transform 0.3s;
}

.social-icon img:hover {
  transform: scale(1.1); /* Slight enlarge effect on hover */
}

/* Responsive styles */
@media (max-width: 768px) {
  .social-icon img {
    width: 35px;
    height: 35px;
  }
}

@media (max-width: 480px) {
  .social-icon img {
    width: 30px;
    height: 30px;
  }
}


/*end of footer*/

/* WhatsApp Icon Styles */
.whatsapp-icon {
  position: fixed;
  bottom: 20px;
  right: 20px;
  width: 60px;
  height: 60px;
  z-index: 1000; /* Ensure it stays above other elements */
  transition: transform 0.3s ease;
}

.whatsapp-icon img {
  width: 100%;
  height: 100%;
}

.whatsapp-icon:hover {
  transform: scale(1.1); /* Enlarge the icon slightly on hover */
}

/* Responsive */
@media (max-width: 768px) {
  .whatsapp-icon {
    width: 50px;
    height: 50px;
    bottom: 15px;
    right: 15px;
  }
}

@media (max-width: 480px) {
  .whatsapp-icon {
    width: 45px;
    height: 45px;
    bottom: 10px;
    right: 10px;
  }
}

/*css of lyra div*/

  .parent {
  width: 80%;
  margin: 0 auto;
  overflow: hidden; /* Clear float */
}

.desktop-image {
  float: left;
  width: 35%;
  padding: 10px;
  box-sizing: border-box;
}

.desktop-image img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 8px;
}

.text-content {
  padding: 10px;
}

.mobile-image {
  display: none;
}

.para-1 p,
.para-2 p {
  text-indent: 50px;
  margin-bottom: 1em;
}

@media (max-width: 768px) {
  .desktop-image {
    display: none;
  }
  
  .mobile-image {
    display: block;
    width: 100%;
    padding: 10px 0;
    margin: 20px 0;
    text-align: center;
  }
  
  .mobile-image img {
    width: 100%;
    max-width: 400px;
    height: auto;
    display: inline-block;
    border-radius: 8px;
  }
  
  .para-1 p,
  .para-2 p {
    text-indent: 30px;
  }
}