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


*{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

img.en {
  width: 37px;
  border-radius: 12px;
}

#all-images {
  position: relative;
  width: 100%;
  height: auto;
}

body{
    margin: 0 !important;
    padding: 0 !important;
}

video{
  width: 100%;
  height: 99.5vh;
  object-fit: cover;
}
.overlay-path {
  fill: rgba(255, 0, 0, 0.2);
  stroke: white;
}

.overlay-path:hover {
  fill: rgba(255, 0, 0, 0.8);
  cursor: pointer;
}


.headtitle{
  position: absolute;
  width: 100%;
  z-index: 1;
  top: 10%;
  text-align: center;
}

.headtitle h3{
  color: white;
  text-transform: uppercase;
  font-weight: 500;
  font-size: 40px;
  font-family: 'Cinzel', serif;
}


#playvids{
    position: relative;
    z-index: 0;
    width: 100%;
    height: 80%;
}

.navbuttons{
    position: absolute;
    z-index: 1;
    right: 0;
    padding: 20px;
    color: #fff;
}

.logo{
    position: absolute;
    z-index: 1;
    left: 10px;
    top: 10px;
    width: 16%;
}

.logo img{
    width: 80%;
}

.compass{
  position: absolute;
  z-index: 1;
  left: 35px;
  top: 20%;
}

.compass img{
  width: 12%;
}
   
a {
  text-decoration: none !important;
  vertical-align: middle;
  text-align: center;
  line-height: 2;
}

p.socialss {
  color: white;
  margin: 0px !important;
  padding: 10px;
}

.sidebar {
  height: auto;
  width: 0px;
  position: fixed;
  text-align: center;
  top: 65vh;
  padding: 10px;
  z-index: 1;
}

p i {
  left: 53px;
  position: relative;
  vertical-align: middle;
  text-align: center;
  font-size: 24px;
}

.social {
  margin-left: -200px;
  width: 230px;
  padding: 0;
  display: inline-table;
  height: 0px;
  background-color: rgba(128, 128, 128, 0.73);
  -moz-transition-property: margin-left;
  -moz-transition-duration: 0.2s;
  -moz-transition-delay: 0.2s;
  -ms-transition-property: margin-left;
  -ms-transition-duration: 0.2s;
  -ms-transition-delay: 0.2s;
  -o-transition-property: margin-left;
  -o-transition-duration: 0.2s;
  -o-transition-delay: 0.2s;
  -webkit-transition-property: margin-left;
  -webkit-transition-duration: 0.2s;
  -webkit-transition-delay: 0.2s;
  box-shadow: 0px 0px 6px 0px #3E3D3D;
  cursor: pointer;
}

.social:hover {
  margin-left: -30px;
  width: 230px;
}

.facebook {
  background-color: #3b5998;
}

.twitter {
  background-color: #4099FF;
}

.google {
  background-color: #DD4B39;
}

.linkedin p i {
  left: 20px;
}

.google p i {
  left: 57px;
}

.youtube p i {
  left: 18px;
}

.youtube:hover {
  background-color: #E52D27;
}

.linkedin:hover {
  background-color: #0976B4;
}

/* Google Fonts - Poppins */
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600&display=swap");

.containers {
  position: fixed;
  top: 40%;
  left: -7px;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column-reverse;
  align-items: center;
  z-index: 1;
}
.media-icons {
  display: flex;
  align-items: flex-start;
  flex-direction: column;
  justify-content: center;
  background-color: #fff;
  padding: 6px;
  border-radius: 6px;
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
  transform: translateX(-100%);
  transition: all 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}
.close-btn.open ~ .media-icons {
  transform: translateX(0);
}
.media-icons a {
  text-decoration: none;
  position: relative;
  height: 35px;
  width: 35px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  margin: 6px;
}
.media-icons a i {
  color: #fff;
}
.media-icons a .tooltip {
  position: absolute;
  left: 55px;
  font-size: 14px;
  font-weight: 400;
  pointer-events: none;
  background-color: #fff;
  padding: 4px 8px;
  border-radius: 4px;
  transform: translateY(-25px);
  opacity: 0;
  transition: all 0.2s linear;
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.05);
}
a:hover .tooltip {
  opacity: 1;
  transform: translateY(0);
}
a .tooltip::before {
  content: "";
  position: absolute;
  height: 10px;
  width: 10px;
  top: 50%;
  left: -5px;
  transform: translateY(-50%) rotate(45deg);
  background-color: #fff;
}
.close-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 45px;
  width: 45px;
  border-radius: 50%;
  color: #fff;
  font-size: 20px;
  margin-top: 20px;
  background-color: #8e36ff;
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
  cursor: pointer;
  /* transform: rotate(45deg); */
  transition: all 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}
.close-btn.open {
  animation: rotation 2s infinite linear;
  background-color: #de0611;
}

@keyframes rotation {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(359deg);
  }
}

/* Style for path1 */
 .path1 {
    fill: transparent; /* Fill color */
    stroke: transparent; /* Stroke color */
  }
  
  /* Hover style for path1 */
  .path1:hover {
    fill:rgba(227, 206, 21, 0.641) !important;
    stroke: #fff; /* Hover fill color */
  }
  .path2{
    fill: transparent;
    stroke: transparent;
  }
  .path2:hover{
    fill:rgba(16, 172, 215, 0.475);
    stroke: white; /* Hover fill color */
  }

  .path4{
    fill: rgba(248, 15, 7, 0.648);
    stroke: transparent;
  }
  .path4:hover{
    fill:rgba(59, 58, 58, 0.648);
    stroke: white; /* Hover fill color */
  }


  
   /* Style for tooltip */
   .tooltip {
    position: absolute;
    background-color: rgba(0, 0, 0, 0.8);
    color: white;
    padding: 10px;
    border-radius: 5px;
    display: none;
    z-index: 999;
  }
  .path:hover + .tooltip {
    display: block;
  }

  /* Style for dialogue box */
  .dialog-box {
    left: 5px;
    bottom: 5px;
    width: 20%;
    height: auto;
    position: fixed;
    z-index: 1;
    padding: 15px;
    display: none;
    text-transform: uppercase;
    font-family: 'arial';
    font-weight: bold;
    font-size: 14px;
    border-radius: 1px;
    color: #fff;
    background-color: #0b3249;
  }
  .dialog-box h3 {
    margin-top: 0;
  }
  .dialog-boxx {
    left: 1%;
    bottom: 1%;
    width: 20%;
    height: auto;
    position: absolute;
    z-index: 1;
    padding: 15px;
    display: none;
    text-transform: uppercase;
    font-family: 'arial';
    font-weight: bold;
    font-size: 14px;
    border-radius: 1px;
    color: #fff;
    background-color: #0b3249;
  }
  .dialog-boxx h3 {
    margin-top: 0;
  }
  .dialog-box1 {
    right: 5%;
    bottom: 19%;
    width: 20%;
    height: auto;
    position: absolute;
    z-index: 1;
    padding: 15px;
    display: none;
    text-transform: uppercase;
    font-family: 'arial';
    font-weight: bold;
    font-size: 14px;
    border-radius: 1px;
    color: white;
    background-color: rgba(2, 6, 118, 0.63);
  }
  .dialog-box1 h3 {
    margin-top: 0;
  }
  svg {
    width: 100%;
    height: auto;
    margin: auto;
    position: fixed;
}

svg path {
    /* fill: rgba(238, 65, 65, 0.5); */
    fill:transparent;
    stroke: transparent;
}

svg path:hover {
    fill:rgba(16, 172, 215, 0.475);
    stroke: white; 
}

.fullimage {
    width: 100%;
    height: auto;
}
.fullimages {
    width: 100%;
    height: auto;
}
.fullimagess {
    width: 100%;
    height: auto;
}

.path-red {
    fill: rgb(37, 4, 171);
}

.button-container {
    position: absolute;
    z-index: 2;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    justify-content: center;
    background-color: rgba(0, 0, 0, 0.5); 
    padding: 10px;
    border-radius: 25px;
}

@media (orientation: portrait) {
    .button-container {
    position: absolute;
    z-index: 2;
    bottom: 400px;
    left:240px;
    transform: translateX(-50%);
    display: flex;
    justify-content: center;
    background-color: rgba(0, 0, 0, 0.5); 
    padding: 10px;
    border-radius: 25px;
    }
}

/* Styles for landscape orientation */
@media (orientation: landscape) {
    .button-container {
    position: absolute;
    z-index: 1;
    bottom:0;
    left:500px;
    transform: translateX(-50%);
    display: flex;
    justify-content: center;
    background-color: rgba(0, 0, 0, 0.5); 
    padding: 10px;
    border-radius: 25px;
    }
}
/* Styles for the laptop view (769px to 1200px width) */
@media (min-width: 769px) and (max-width: 1200px) {
    .button-container {
    position: absolute;
    z-index: 2;
    bottom: 20%;
    left:500px;
    transform: translateX(-50%);
    display: flex;
    justify-content: center;
    background-color: rgba(0, 0, 0, 0.5); 
    padding: 10px;
    border-radius: 25px;
    }
}

/* Styles for the desktop view (1201px and above width) */
@media (min-width: 1201px) {
    .button-container {
    position: absolute;
    z-index: 2;
    bottom: 10px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    justify-content: center;
    background-color: rgba(0, 0, 0, 0.5); 
    padding: 10px;
    border-radius: 25px;
    }
}

.button {
    background-color: rgba(0, 0, 0, 0.5); 
    color: #fff; 
    border: none;
    padding: 10px 20px;
    margin: 0 5px; 
    cursor: pointer;
    border-radius: 50%; 
    box-shadow: 0px 0px 5px white;
}

.button:hover {
    background-color: rgba(255, 255, 255, 0.5); 
    color: #030303; 
    border: none;
    padding: 10px 20px; 
    margin: 0 5px; 
    cursor: pointer;
    border-radius: 50%; 
    box-shadow: 0px 0px 10px rgb(2, 2, 2);
}

#displayText {
  position: absolute;
  top: 50px;
  left: 15%;
  transform: translateX(-50%);
  color: white;
  padding: 10px;
  border-radius: 5px;
  display: none;
  line-height: 100px; 
  font-size: 38px; 
  
}
.main-image {
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
/* object-fit: contain; */
}

#lang:is(
:nth-of-type(2),
:nth-of-type(3),
:nth-of-type(4),
:nth-of-type(5),
:nth-of-type(6)
) #b {
opacity: var(--active, 0);
}

#lang:is(
:nth-of-type(2),
:nth-of-type(3),
:nth-of-type(4),
:nth-of-type(5),
:nth-of-type(6)
) #languuagelist:is(:hover, :focus) {
background: var(--gray-0);
color: var(--gray-12);
}

#languuagelist:focus-visible {
outline-color: transparent;
}

#languages:is(:focus-within, :hover) {
--active: 1;
}
.fas{
  position: absolute;
  z-index: 5;
  right: 6px;
  bottom: 36%;
  color: #fff;
}
.fass{
  position: absolute ;
  z-index: 5;
  left: 6px !important;
  bottom: 36%;
  color: #fff;
}
.hidden {
  display: none;
  height: 20%;

}
#flattext{
  position: absolute;
  padding: 1px;
  overflow: auto; 
  color: #fff;
  top: 19%;
  left: 21px;
  z-index: 2;
  opacity: 1;
  background-color: #2524243f;
  /* display: ruby;
  flex-direction: row;
  align-items: center; */
  /* background-attachment: scroll 100px; */
}
#toggle-btn{
  border-style: none;
  background-color: rgb(70 48 42);
  position: fixed;
  top: 54%;
  
  right: 21px;
  z-index: 2;
  color: rgb(255, 255, 255);
  border-radius: 50%;
  overflow: auto; 
  width: 40px;
  height: 40px;
}

.material-symbols-outlined {
font-variation-settings:
'FILL' 0,
'wght' 400,
'GRAD' 0,
'opsz' 48
}

.villaspecifications{
  height: 22px;
  z-index: 1;
  position: relative;
  padding: 0px;


}
.navbuttons{
  position: absolute;
  z-index: 1;
  right: 0;
  padding: 20px;
  color: #fff;
}
.navbuttons {
  font-size: 16px;
  cursor: pointer;
  position: fixed;
  bottom: 6px;
  left: 47%;
  border: none;
  background-color: rgb(71 41 32 / 76%);
  color: #fff;
  border-radius: 50%;
  width: 70px;
  height: 70px;
  display: flex;
    z-index: 2;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: center;
}


/* Change button background color on hover */
.navbuttons:hover {
  background-color: rgb(71 41 32 / 76%);
}

.sidenav {
  position: fixed;
  z-index: 1;
  bottom: -90%; /* Initially hidden */
  left: 0;
  height: 100%; /* Adjust as needed */
  overflow-x: hidden;
  transition: 0.5s; /* Adjust transition time */
  display: flex;
  flex-direction: row;
  justify-content: space-evenly;
  align-items: center; /* Center items vertically */
  padding: 20px;
  box-sizing: border-box;
  align-items: flex-end;
  background-image: linear-gradient(0deg, rgba(0, 0, 0, 0.405), rgba(120, 120, 120, 0));
}

/* Style the links inside the menu */
.sidenav a {
  text-decoration: none;
  font-size: 16px;
  color: #fff;
  margin: 0 15px;
  animation: bounceUp 0.5s ease-in-out; /* Adjust spacing between links */
}
@keyframes bounceUp {
  0% {
      transform: translateY(100%);
      opacity: 0;
  }
  100% {
      transform: translateY(0%);
      opacity: 1;
  }
}
#thirdpagecontainer{
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: black;
  z-index: 9999;
  display: flex;
  justify-content: center;
  align-items: center;
}
#floorvideo {
  width: 100%;
  height: auto;
  position: absolute;
}
/* Style the separators */
.sidenav a:not(:last-child)::after {
  /* content: "|"; */
  margin-left: 10px;
  color: #fff;
}

/* Change color on hover */
.sidenav a:hover {
  color: #ffffff; /* Change text color on hover */
}
i.fas.fa-times {
    position: static;
}
.language-selector {
  position: fixed;
  bottom: 2%;

  right: 20px;
  z-index: 999;
}

.bro {
  position: fixed;
  bottom: 100px;
  right: 20px;
  bottom: 10%;
  z-index: 999;
}
.bro a{
  color: #fff;
}
.floating {
  background-color: rgb(70 48 42);
  color: #fff;
  border: none;
  border-radius: 50%;
  width: 40px;
  height: 40px;
  font-size: 16px;
  cursor: pointer;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  display: flex;
  justify-content: center;
  align-items: center;
  transition: background-color 0.3s ease;
}
.floating-button {
  background-color: rgb(70 48 42);
  color: #fff;
  border: none;
  border-radius: 50%;
  width: 40px;
  height: 40px;
  font-size: 16px;
  cursor: pointer;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  display: flex;
  justify-content: center;
  align-items: center;
  transition: background-color 0.3s ease;
}

.floating-button:hover {
  background-color: rgb(71 41 32 / 76%);
}

.languages {
  display: none;
  position: absolute;
  z-index: 999;
  bottom: 6px;
  right: 61px;
  border-radius: 5px;
  padding: 5px;
}

.languages.active {
  display: flex;
  flex-wrap: nowrap;
  z-index: 2;
}

.language {
  margin-right: 10px;
  padding: 5px;
  cursor: pointer;
  color: #fff;
}

.language:hover {
  background-color: transparent;
  color: #fff;
}
i.fas.fa-microphone {
  position: static;
}
.gbutton{
  background-color: rgb(71 41 32 / 76%);
  color: #fff;
  border: none;
  border-radius: 50%;
  width: 50px;
  height: 50px;
  bottom: 175px;
  right: 21px;
  font-size: 24px;
  cursor: pointer;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  display: flex;
  justify-content: center;
  align-items: center;
  transition: background-color 0.3s ease;
  position: fixed;
  z-index: 2;
}
.gbuttonn{
  color: #fff;
  font-family: arial bold;
}
.tooltiptext{
  visibility: hidden;
  left: -62px;      
  bottom: 9px;
  font-size: 13px;
  background-color:  rgb(71 41 32 / 76%);
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 5px 0;

  /* Position the tooltip */
  position: absolute;
  z-index: 5;
}
.tooltiptextt{
  visibility: hidden;
  left: -81px;      
  bottom: 9px;
  font-size: 13px;
  background-color:  rgb(71 41 32 / 76%);
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 5px 0;

  /* Position the tooltip */
  position: absolute;
  z-index: 5;
}
.floating:hover .tooltiptext{
  visibility: visible;
}
.gbutton:hover .tooltiptextt{
  visibility: visible;
}
table {
  font-family: arial, sans-serif;
  border-collapse: collapse;
  width: 100%;
  }
td, th {
    font-size: 13px;
  border: 1px solid #dddddd;
  text-align: left;
  padding: 5px;
}
.twod{
  position: fixed;
  bottom: 122px;
  right: 20px;
  z-index: 999;
  color: #fff;
}
.two a{
  color: #fff;
}
.two {
    background-color: rgb(70 48 42);
    color: #fff;
    border: none;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    font-size: 16px;
    cursor: pointer;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    display: flex;
    justify-content: center;
    align-items: center;
    transition: background-color 0.3s ease;
}
.threed{
  position: fixed;
  z-index: 1;
  bottom:240px;
  right: 21px;
  background-color: #f1f1f1;
  border-radius: 50%;
  height: 15px;
  width: 40px;
  align-items: center;
  justify-content: center;
  display: flex;
}
.three a{
  color: #fff;
}
.three {
    background-color: rgb(70 48 42);
    color: #fff;
    border: none;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    font-size: 16px;
    cursor: pointer;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    display: flex;
    justify-content: center;
    align-items: center;
    transition: background-color 0.3s ease;
}
#floorR8 {
  position: absolute;
  top: 55%;
  left: 11%;
  z-index:1;
  width: 16%;
  height: auto;
  transform: rotate(-15deg);
  opacity: 0;
}
td.living{
  font-weight: 800;
}
.container2{
  bottom:30%;
  left: 5px;
  position: fixed;
  z-index: 1;
  border-radius: 10px;
  display: none;
}
.container1{
  width: 3%;
  height: 15%;
  bottom:35%;
  left: 5px;
  position: absolute;
  z-index: 1;
  border-radius: 10px;
  display: none;
}
#landscapeAlert {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgb(34 57 87);
  color: white;
  z-index: 9999;
  text-align: center;
}
#landscapeAlert p {
  font-size: 24px;
  margin-top: 30%;
}

table {
  font-family: arial, sans-serif;
  border-collapse: collapse;
  width: 100%;
  }

  td, th {
    font-size: 13px;
    border: 1px solid #dddddd;
    text-align: left;
    padding: 5px;
  }

  .hotspot1 {
    position: relative;
    cursor: pointer;
  }
  .hotspot1:hover {
      background-color: transparent; /* Change background color on hover */
  }
  #hotspot1{
      position: absolute;
      display: none;
      z-index: 2;
      width: 2%;
      top: 54%;
      left: 53%;
      animation: jumpInfinite 2s infinite;
  }
  #hotspot1:after {
    transform: rotateZ(45deg);
  }
  
  .hotspot2 {
    position: relative;
    cursor: pointer;
  }
  .hotspot2:hover {
      background-color: transparent; /* Change background color on hover */
  }
  #hotspot2 {
      position: absolute;
      display: none;
      z-index: 2;
      width: 2%;
      top: 49%;
      left: 45%;
      animation: jumpInfinite 2s infinite;
  }
  #hotspot2:after {
    transform: rotateZ(45deg);
  }
  @keyframes jumpInfinite {
    0% {
      margin-top: 0;
    }
    50% {
      margin-top: 20px;
    }
    100% {
      margin-top: 0;
    }
  }
 @import url(https://fonts.bunny.net/css?family=amita:700);

body {
    min-height: 100vh;
    display: -webkit-flex;
    display: flex;
    flex-direction: column;
}

h1 {
    color: #fefae0;
    font-family: Amita;
    margin: 20px auto;
    width: 450px;
    font-size: 3rem;
    text-align: center;
    border-bottom: 10px double #bc6c25;
}

.container img {
    width: 450px;
    height: 300px;
    margin: 10px;
    border: 10px solid #fefae0;
    transition-duration: 1s;
}

.container :hover {
    border: 5px solid #fff;
    -webkit-transform: scale(1.1);
    -ms-transform: scale(1.1);
    transform: scale(1.1);
    -webkit-filter: none;
    filter: none;
}

footer {
    background-color: #bc6c25;
    display: -webkit-flex;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 50px;
    min-width: 100vw;
}
.container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
}
.bun{
  cursor: pointer;
  text-transform: uppercase;
}
.btn{
  position: fixed;
  top: 40px;
  right: 24px;
  z-index: 999;
  color: #fff;
}
.back a{
  color: #fff;

}
.back{
  
    background-color: rgb(70 48 42);
    color: #fff;
    border: none;
    border-radius: 50%;
    width: 50px;
    height: 50px;
    font-size: 25px;
    margin-left: 120px;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: background-color 0.3s ease;

}
.menu-container {
  position: relative;
  z-index: 999;
}

#menu-button, #close-button{
  position: fixed;
  bottom: 2%;
  left: 49.4%;
  z-index: 999;
  font-size: 15px;
  cursor: pointer;
  background: none;
  border: none;
  color: white;
  width: 50px;
  height: 50px;
  background-color: rgb(71 41 32 / 76%);
  border-radius: 50%;
  align-items: center;
  justify-content: center;

}
#close-button {
  display: none;
}
#nav-menu {
  position: fixed;
  bottom: -170px;
  left: 32%;
  display:inline;
  flex-direction: column;
  transition: bottom 0.5s;
  
}
#nav-menu a {
  margin: 37px;
  text-decoration: none;
  color: rgb(252, 251, 251);
  font-size: 20px;
  opacity: 0;
  transition: opacity 0.5s;
  left: 100px;
}
#overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: linear-gradient(0deg, rgba(0, 0, 0, 0.405), rgba(120, 120, 120, 0));
  display: none;
}
.broo {
  position: fixed;
  bottom: 19%;
  right: 20px;
  z-index: 999;
}
.disclaimer{
  background-color: rgb(70 48 42);
  color: #fff;
  border: none;
  border-radius: 50%;
  width: 40px;
  height: 40px;
  font-size: 24px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  display: flex;
  justify-content: center;
  align-items: center;
  transition: background-color 0.3s ease;
}
.disclaimer:hover .tooltiptext {
  visibility: visible;

}
.dialog-box3 {
  right: 120px;
  top: 52%;
  width: 270px;
  height: auto;
  position: absolute;
  z-index: 1;
  padding: 15px;
  display: none;
  text-transform: uppercase;
  font-family: 'arial';
  font-weight: bold;
  font-size: 14px;
  border-radius: 1px;
  color: white;
  background-color: rgba(82 59 52/80%);
}

.dialog-box3 h3 {
  margin-top: 0;
}
.disclaimerr {
  position: absolute;
  color: #fff;
  font-size: 16px;
  background: transparent;
  border: none;
  top: -2px;
  right: 4px;
}
.brooo{
  position: fixed;
  bottom: 25%;
  right: 20px;
  z-index: 999;
}
.reset,.reset:focus{
  font-size: 17px;
  padding: 10px 25px;
  border-radius: 0.7rem;
  background-image: linear-gradient(rgb(251, 250, 252), rgb(241, 240, 244));
  border: 2px solid rgb(50, 50, 50);
  border-bottom: 5px solid rgb(50, 50, 50);
  box-shadow: 0px 1px 6px 0px rgb(62, 61, 63);
  transform: translate(0, -3px);
  cursor: pointer;
  transition: 0.2s;
  transition-timing-function: linear;
}

.reset:active {
  transform: translate(0, 0);
  border-bottom: 2px solid rgb(50, 50, 50);
}
.threedd{
  position: absolute;
  z-index: 1;
  bottom:217px;
  right: 21px;
  background-color: #f1f1f1;
  border-radius: 50%;
  height: 15px;
  width: 40px;
  align-items: center;
  justify-content: center;
  display: flex;
}
.text{
  color: #fff;
  background: #000000a1;
  position: fixed;
  left: 40%;
  top: 1%;
  font-size: 17px;
  border-radius: 10px;
  text-align: center;
  width: 30%;
  padding: 2px 2px;
}
.textt{
  color: #fff;
  background: #000000a1;
  position: absolute;
  left: 43%;
  top: 1%; 
  border-radius: 10px;
  text-align: center;
  width:15%;
  padding: 3px 2px;
}
.texttt{
  color: #fff;
  background: #000000a1;
  position: absolute;
  left: 40%;
  top: 1%; 
  border-radius: 10px;
  text-align: center;
  width:20%;
  padding: 3px 2px;
}
#circle{
  position: fixed;
  width: 40px;
  height: 40px;
  top: 10%;
  left: 30.3%;
  border-radius: 50%;
  background: #ed2024;
  animation: load-pulse 0.85s infinite linear;
  z-index: 1;
  border-style: double;
  border-color: black;
  display: none;
}
#circle2{
  position: fixed;
  width: 40px;
  height: 40px;
  top: 14.7%;
  left: 8.3%;
  border-radius: 50%;
  background: #ed2024;
  animation: load-pulse 0.85s infinite linear;
  z-index: 1;
  border-style: double;
  border-color: black;
  display: none;
}
#circle3{
  position: fixed;
  width: 40px;
  height: 40px;
  top: 17.2%;
  left: 39.9%;
  border-radius: 50%;
  background: #ed2024;
  animation: load-pulse 0.85s infinite linear;
  z-index: 1;
  border-style: double;
  border-color: black;
  display: none;
}
#circle4{
  position: fixed;
  width: 40px;
  height: 40px;
  top: 27.5%;
  left: 24.6%;
  border-radius: 50%;
  background: #ed2024;
  animation: load-pulse 0.85s infinite linear;
  z-index: 1;
  border-style: double;
  border-color: black;
  display: none;
}
#circle5{
  position: fixed;
  width: 40px;
  height: 40px;
  top: 35%;
  left: 24.5%;
  border-radius: 50%;
  background: #19b24b;
  animation: load-pulse 0.85s infinite linear;
  z-index: 1;
  border-style: double;
  border-color: black;
  display: none;
}
#circle6{
  position: fixed;
  width: 40px;
  height: 40px;
  top: 63.5%;
  left: 25.8%;
  border-radius: 50%;
  background: #ed2024;
  animation: load-pulse 0.85s infinite linear;
  z-index: 1;
  border-style: double;
  border-color: black;
  display: none;
}
#circle7{
  position: fixed;
  width: 40px;
  height: 40px;
  top: 71%;
  left: 19.7%;
  border-radius: 50%;
  background: #ed2024;
  animation: load-pulse 0.85s infinite linear;
  z-index: 1;
  border-style: double;
  border-color: black;
  display: none;
}
@keyframes load-pulse {
  0% {
    transform: scale(0.15);
    opacity: 0;
  }

  50% {
    opacity: 1;
  }

  100% {
    transform: scale(1);
    opacity: 0;
  }
}
#heading{
  position: absolute;
  z-index: 1;
  top: 3%;
  right: 2%;
  cursor: pointer;
}
#heading2{
  position: absolute;
  z-index: 1;
  top: 7%;
  right: 12%;
  cursor: pointer;
}
#heading3{
  position: absolute;
  z-index: 1;
  top: 11%;
  right: 8%;
  cursor: pointer;
}
#heading4{
  position: absolute;
  z-index: 1;
  top: 15%;
  right: 5.3%;
  cursor: pointer;
}
#heading5{
  position: absolute;
  z-index: 1;
  top: 19%;
  right: 9%;
  cursor: pointer;
}
#heading6{
  position: absolute;
  z-index: 1;
  top: 23%;
  right: 12.8%;
  cursor: pointer;
}
#heading7{
  position: absolute;
  z-index: 1;
  top: 27%;
  right: 8.8%;
  cursor: pointer;
}