/* Header Section Styling  */
marquee{
    color: black;
    background: rgb(189, 189, 11);
    box-shadow: 10px 10px 10px 0 lightsalmon;
}
*{
    margin: 0;
    padding: 0;
    font-family: 'Poppins', sans-serif;
}
.header{
    width: 100%;
    min-height: 100vh;
    overflow: hidden;
    position: relative;
    background-image: url(images/lapbackimage.gif);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    animation: change 10s infinite ease-in-out;
}
   .designlogo {
    /* Set the desired width and height for your logo */
    width: 200px;
    height: 200px; 
    
    /* Apply the animation */
    animation: rotate 2s linear infinite;
  }
  
  @keyframes rotate {
    from {
      transform: rotate(0deg);
    }
    to {
      transform: rotate(360deg);
    }
  }

  #calling {
    animation: rotating 2s linear infinite;
  }

  @keyframes rotating {
    0% {
      transform: rotate(0deg);
    }
    50% {
      transform: rotate(10deg);
      background-color: #f44336;
    }
    100% {
        transform: rotate(-10deg);
        background-color: aqua;
    }
  }
 
 .icons{
    border-radius: 10px;
    margin-top: -70px;
    margin-left: 235px;
    width: 220px;
    margin-bottom: 0px;
    display: flex;
    background: transparent;
    justify-content: center;   
    text-align: center;
}
 .icons:hover{
    background: transparent; 
}
.icons1{
    border-radius: 10px;
    margin-top: -190px;
    margin-left: 490px;
    width: 220px;
    margin-bottom: 0px;
    display: flex;
    background: black;
    justify-content: center;   
    text-align: center;
    background-color: transparent;
}
 .icons1:hover{
    background-color: transparent;
}

.active{
    border-radius: 20px;
    background-color: #f44336;
    
}
.hero-btn-1 {
    display: inline-block;
    text-decoration: none;
    color: black;
    border: 1px solid #fff;
    padding: 12px 34px;
    font-size: 13px;
    background: green;
    position: relative;
    cursor: pointer;
    border-radius: 10px;
}
.hero-btn-1:hover{
    border: 1px solid green;
    background: yellow;
    transition: 1s;
}
.hero-btn-2 {
    display: inline-block;
    color: black;
    border: 1px solid #fff;
    /* padding: 12px 34px; */
    font-size: 13px;
    background: yellow;
    /* position: relative; */
    cursor: pointer;
    border-radius: 10px;
    width: 100px;
    height: 20px;
    padding-left: 5px;
    padding-top: 2px;
    margin-top: 0px;
    margin-left: 180px;
    text-decoration: none;

}
.hero-btn-2:hover{
    border: 1px solid green;
    background: blanchedalmond;
    transition: 1s;
}
/* @keyframes change{
    0%
    {
        background-image: url(images/image1.jpg);
    }
    20%
    {
        background-image: url(images/image2.jpg);
    }
    40%
    {
        background-image: url(images/image3.jpg);
    }
    60%
    {
        background-image: url(images/image4.jpg);
    }
    80%
    {
        background-image: url(images/image5.jpg);
    }
    100%
    {
        background-image: url(images/image1.jpg);
    }
} */
nav{
    display: flex;
    padding: 1.5% 1.5%;
    justify-content: space-between;
    background: #2f2626;
    align-items: center; 
    height: 25px;
}

.nav-links{
    flex: 1;
    text-align: right;
}
.nav-links ul li {
    list-style: none;
    display: inline-block;
    padding: 8px 12px;
    position: relative;
    line-height: 20px;
}
.nav-links ul li a{
    color: #fff;
    text-decoration: none;
    font-size: 13px;
    padding: 10px;
    box-shadow: #f44336;
    font-size: 14px;
    font-style:italic;
    font-weight: bold;
    font-family: cursive;
}
 /* Drop-down styling in navbar */

ul li ul.submenu li {
    display: block;
}
ul li ul.submenu li a {
    font-size: small;
    color: black;  
}
ul li ul.submenu {
    width: 500%;
    height: 520%;
    background-color: lightskyblue;
    position: absolute;
    z-index: 999;
    display: none;
    padding: 5px;
    justify-content: center;
    text-align: center;
    border-radius: 10%;
    margin-left: -318px; 
    margin-top: 10px;   
}
ul li:hover ul.submenu{
    display: block;
}

.designlogo {
    position: fixed;
    height: 85px;
    left: 0px;
    width: 85px;
    cursor: pointer;
    margin-top: -40px;
}

.logo {
    color: rgb(247, 179, 8);
    font-size: 15px;
    line-height: 80px;
    padding: 0px 60px 0px 0px;
    font-weight: bold;
    cursor: pointer;
    text-decoration: none;
    border-radius: 20px;
    margin-left: 60px; 
    font-family:cursive;  
    font-weight: bolder;
}
nav ul {
    float: right;
    margin-right: 20px;
    line-height: 10px;
}


nav ul li::after{
    content: '';
    width: 0%;
    height: 2px;
    background: #f44336;
    display: block;
    margin: auto;
    transition: 0.5s;
}
nav ul li:hover::after{
    width: 100%;
}
.text-box{
    width: 100%;
    height: 90%;
    color: white;
    position: absolute;
    top: 25%;
    left: 50%;
    transform: translate(-50%,-50%);
    text-align: center;
    /* background-color: white; */
    margin-top: 200px;
}
/* .text-box h1{
    font-size: 12px;
    background-color: #f44336;
    border-radius: 10px;
    display: inline-block;
    padding-left: 10px;
    padding-right: 10px;
    padding-top: 10px;
    padding-bottom: 10px;
    margin-top: 100px;
    font-style: italic;
    box-shadow: 10px 10px 10px 0 lightsalmon;

} */
.text-box p{
    margin: 10px 0 40px;
    font-size: 14px;
    color: white;
}

.hero-btn {
    display: inline-block;
    text-decoration: none;
    color: black;
    border: 1px solid #fff;
    padding: 12px 34px;
    font-size: 13px;
    background: yellow;
    position: relative;
    cursor: pointer;
}
.hero-btn:hover{
    border: 1px solid green;
    background: green;
    transition: 1s;
}
nav .fa-solid{
    display: none;
}
.popup {
    display: none;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    padding: 20px;
    background-color: #f1f1f1;
    border: 1px solid #ccc;
    z-index: 9999;
    border-radius: 10%;
    background-color: #99FF33;
    border: #f44336;
    border-style:double;

  }
  .popup p{
    color: black;
    font-weight: bold;
  }
  .popup h2{
    color: black;
    font-weight: bold;
  }
  /* Timer Styling block styling */
  .block {
    display: inline-block;
    margin: 10px;
    font-weight: bold;
    background-color: #f44336;
    border-radius: 10%;
    padding: 10px;
    color: white;
  }
  #closeBtn{
    margin-left: 500px;
    color: red;
    background-color: black;
    font-weight: bold;
    width: 30px;
  }
  

/* Services Section Styling  */
.services{
    width: 100%;
    margin: auto;
    text-align: center;
    padding-top: 50px;
    background: black;
}
.services h1{
    font-size: 36px;
    font-weight: 600;
    color: white;
}
.services p{
    color: white;
    font-size: 14px;
    font-weight: 300;
    line-height: 22px;
    padding: 10px;
}
.row{
    margin-top: 1%;
    margin-left: 8%;
    display: flex;
    justify-content: space-between;
    width: 80%;
}
.service-col{
         flex-basis: 31%;
         background: white;
         border-radius: 10px;
         margin-bottom: 5%;
         padding: 20px 12px;
         box-sizing: border-box;
         transition: 0.5s;
         box-shadow: 10px 10px 10px 0 silver;   
}
.service-col p {
    color: black;   
}
h3{
    text-align: center;
    font-weight: 600;
    margin: 10px 0;
}
.h3style{
    border-radius: 30%;
    background-color: lightblue;
    box-shadow: 10px 10px 10px 0 rgb(137, 137, 220);
    font-size: 15px;
    height: 20px;
}
strike{
    color: #f44336;
}
.service-col:hover{
    box-shadow: 0 0 40px 0px goldenrod;
}
.popularplan{
    border-radius: 50%;
    background-color: #f44336;
    margin-top: -642.5px;
    color: white;
    font-weight: bold;
    box-shadow: 10px 10px 10px 0 yellow;
}
#bplantext{
    color: blue;
}
/* Photo Galerry Styling Section  */
.photo-gallery{
    width: 100%;
    margin: auto;
    text-align: center;
    padding-top: 50px;
    background: black;
    color: white;
}
.photo-gallery p{
    margin-top: 20px;
}
.photo-gallery-col{
    flex-basis: 32%;
    border-radius: 10px;
    margin-bottom: 30px;
    position: relative;
    overflow: hidden;
    display: grid;
}
.photo-gallery-col img{
    width: 100%;
    height: 300px;
    display: block;
}
.layer{
    background: transparent;
    height: 100%;
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    transition: 0.5s;
}
.photo-gallery-col:hover{
    box-shadow: 0 0 40px 0px goldenrod;
    transform: scale(1.2);
    cursor: pointer;
}
.layer:hover{
    background: rgba(226, 0, 207, 0.2);
    
}
.layer h3{
    width: 100%;
    font-weight: 500;
    color: white;
    font-size: 26px;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    position: absolute;
    opacity: 0;
    transition: 0.5s;
}
.layer:hover h3{
    bottom: 49%;
    opacity: 1;
}

/* Facilities Section Styling */

.facilities{
    width: 100%;
    background: black;
    color: white;
    margin: auto;
    text-align: center;
    padding-top: 30px;
}
.facilities-col{
    flex-basis: 32%;
    border-radius: 10px;
    margin-bottom: 5%;
    text-align: left;
}

.facilities-col img{
    width: 100%;
    height: 300px;
    border-radius: 10px;
    display: block;
   
}
.facilities-col img:hover{
    box-shadow: 0 0 40px 0px goldenrod;
    transform: scale(1.2);
    cursor: pointer;
}
.facilities-col p{
    padding: 0;
    
}
.facilities-col h3{
    margin-top: 16px;
    margin-left: 15px;
    text-align: left;
    
}

/* Testimonials Section Styling */
.testimonials{
    width: 100%;
    margin: auto;
    padding-top: 30px;
    text-align: center;
    background: black;
    color: white;
}
.testimonials p{
    margin-top: 1%;
}
.testimonials-col{
    flex-basis: 40%;
    border-radius: 10px;
    margin-top: 4%;
    text-align: left;
    background: white;
    padding: 25px;
    cursor: pointer;
    display: flex;
    color: black;
    height: 50%;
    margin-bottom: 2%;
    width: 200px;
    height: 200px;

}
.testcss{
    box-shadow: 10px 10px 10px 0px black;
    border-radius: 0 10px 10px 0px;
}
.testimonials-col img{
    width: 50%;
    height: 120px;
    margin-left: 5px;
    margin-right: 30px;
    border-radius: 50%;
}
.testimonials-col p{
    padding: 0;
    font-size: 11px;
    color: darkblue;

}
.testimonials-col h3{
    margin-top: 15px;
    text-align: left;
    
}
.testimonials-col .fa-solid , .fa-regular{
    color: green;
}
/* footer section styling */

.footer{
    width: 100%;
    text-align: center;
    padding: 30px 0 ;
    background: lightgoldenrodyellow;
}
.footer h4{
    margin-bottom: 5px;
    margin-top: 20px;
    font-weight: 600;
    margin-bottom: 50px;
}
.footer p{
    margin-bottom: 10px;
    margin-top: 20px;
    font-weight: 100;
}
.icons #facebook{
   color: blue;
   margin: 0 13px;
   cursor: pointer;
   padding: 10px 0;
}
.icons #instagram{
    color: red;
    margin: 0 13px;
   cursor: pointer;
   padding: 10px 0;
    
 }
 .icons #whatsapp{
    color: green;
    margin: 0 13px;
   cursor: pointer;
   padding: 10px 0;
 }
 .icons #youtube{
    color: red;
    margin: 0 13px;
   cursor: pointer;
   padding: 10px 0;
 }
 .icons #twitter{
    color: blue;
    margin: 0 13px;
   cursor: pointer;
   padding: 10px 0;
 }

 .icons1 #facebook{
    color: blue;
    margin: 0 13px;
    cursor: pointer;
    padding: 18px 0;
 }
 .icons1 #instagram{
     color: red;
     margin: 0 13px;
    cursor: pointer;
    padding: 18px 0;
     
  }
  .icons1 #whatsapp{
     color: green;
     margin: 0 13px;
    cursor: pointer;
    padding: 18px 0;
  }
  .icons1 #youtube{
     color: red;
     margin: 0 13px;
    cursor: pointer;
    padding: 18px 0;
  }
  .icons1 #twitter{
     color: blue;
     margin: 0 13px;
    cursor: pointer;
    padding: 18px 0;
  }

 #heart{
    color: red;
 }

 /* ------ About us Page (about.html)------ */
.sub-header{
    height: 50vh;
    width: 100%;
    background-image: linear-gradient(rgba(4,9,30,0.7),rgba(4,9,30,0.7)),url(images/imagecover.png);
    background-position: center;
    background-size: cover;
    text-align: center;
    color: white;
}
.sub-header h1{
    margin-top: 100px;
}
.about-us {
    width: 100%;
    margin: auto;
    padding-top: 80px;
    padding-bottom: 50px;
    background: black;
    color: white;
}
 
.about-col{
   flex-basis: 48%;
   padding: 30px 2px;
}
.about-col img{
    width: 100%;   
}
.about-col h1{
    
    padding-left: 0;

}
.about-col p{
    padding: 15px 0 25px;
}
#youtube-video1{
    margin-top: 20px;
    margin-bottom: 10px;

}

/* -----Contact us Section Styling ----- */

.location{
     width: 80%;
     margin: auto;
     padding: 80px 0;
     
}
.location iframe{
    width: 100%;
}
.contact-us{
    width: 80%;
    margin: auto;
    margin-left: 20px;
    
}
.contact-col{
    flex-basis: 40%;
    margin-bottom: 30px;
    
}
.contact-col div{
    display: flex;
    align-items: center;
    margin-bottom: 40px;
    
}
.contact-col div .fa-solid{
    font-size: 28px;
    color: orange;
    margin: 10px;
    margin-right: 30px;
}
.contact-col div h5{
    font-size: 15px;
    margin-bottom: 5px;
    color: black;
    font-weight: 400;
}
.contact-col input, .contact-col textarea{
    width: 100%;
    padding: 15px;
    margin-bottom: 17px;
    outline: none;
    border: 1px solid silver;
    box-sizing: border-box;

}
#msg{
    color: black;
    margin-top: 5px;
    display: block;
}
#Query{
    padding-bottom: 10px;
    padding-top: 10px;
    padding-left: 10px;
    padding-right: 120px;
    margin-left: -1px;
    margin-bottom: 20px;
    color: rgb(69, 71, 71);

}
.current-time {
    color: color-mix(in srgb-linear, yellow 80%, white 20%);
    margin-left: 78px;
    margin-top: -5px;
    font-size: 9.8px;
    font-weight: bold;
}
.ok {
    color: color-mix(in srgb-linear, yellow 80%, white 20%);
    margin-left: -73.4%;
}
.display{
    display: none;
}
.checkbox {
    margin-left: -150px;
}
.checkbox-label {
    display: flex;
    align-items: center;
    margin-top: -30px;
    margin-left: 30px;
    width: 100%;
    font-size: smaller;
  }
  .service-col {
    transition: background-color 0.1s, transform 0.5s;;
  }
  
  .service-col.active {
    background-color: lightskyblue;
    transform: scale(1.1);
  }
  .service-col.zoomed {
    animation: zoomEffect 1s alternate infinite;
  }
  @keyframes zoomEffect {
    from {
      transform: scale(1);
    }
    to {
      transform: scale(1.1);
    }
  }
  .col-footer{
    width: 99.5%;
    height: 100%;
    display: flex;
    align-items: center;
    background-color: silver;
    border: #f44336;
    border-style: dotted;
    margin-top: 120px;
  }
  .col-footer1{
    width: 30%;
    margin: 10px;
    border-radius: 10%;
    padding: 5px;
  }
  .col-footer2{ 
    width: 30%;
    margin: 10px;
    border-radius: 10%;
    padding: 5px;
  }
  .col-footer3{ 
    width: 30%;
    margin: 10px;
    border-radius: 10%;
    padding: 5px;
  }
  .col-footer1 ul li{
    list-style-type: none;
  }
  .col-footer2 ul li{
    list-style-type: none;
  }
  .col-footer3 ul li{
    list-style-type: none;
  }
  .col-footer1 ul li a{
    text-decoration: none;
    color: blue;
    font-weight: bold; 
    font-size: smaller;
    padding: 10px;
  }
  .col-footer2 ul li a{
    text-decoration: none;
    color: blue;
    font-weight: bold;
    font-size: smaller;
    padding: 10px;
  }
 .col-footer3 ul li a{
    text-decoration: none;
    color: blue;
    font-weight: bold;
    font-size: smaller;
    padding: 10px;
  }
  .referralHostinger{
    color: whitesmoke;
    background-color: purple;
    padding: 1%;
    cursor: pointer;
    font-size: smaller;
    border-radius: 2%;
    text-decoration: none;
    font-weight: bold;
  }
  .referralIntershala{
    color: whitesmoke;
    background-color: lightseagreen;
    padding: 1%;
    cursor: pointer;
    font-size: smaller;
    border-radius: 5%;
    text-decoration: none;
    font-weight: bold;
  }
  .refdiv {
    border: gray;
    box-sizing: border-box;
    border-style: dotted;
    margin-bottom: 10px;
    height: 500px;
    width: 500px;
  }
  .reftext{
    font-style: italic;
    font-size: smaller;
    padding: 5px;
    color: #99FF33;
    justify-content: center;
    text-align: center;
  }
  .refbtn{
    font-style: italic;
    font-size: smaller;
    margin-left:190px;
    margin-top: 10px;
    margin-bottom: 10px;
    padding: 10px;
    font-weight: bold;
    cursor: pointer;
    background-color: aqua;
  }
  .highlight {
    background-color: blue;
  }
  #searchInput  {
    padding: 2px;
    color: blue;
  }
  #searchBtn{
    padding: 2px;
    color: blue;
    font-weight: bold;
    cursor: pointer;
  }
  #searchBtnapp{
    width: 4%;
    height: 7.9%;
    font-size: small;
    font-weight: bold;
    color: blue;
    cursor: pointer;
  }
  .backmode{
    background-color: var(--bg-color);
    color: var(--text-color);
    transition: background-color 0.3s ease, color 0.3s ease;
    justify-content: center;
    text-align: center;
  }
  .mode-button {
    background-color: var(--button-bg-color);
    color: var(--button-text-color);
    padding: 10px 20px;
    margin: 10px;
    border: red;
    border-style: double;
    border-radius: 5px;
    width: 30%;
    cursor: pointer;
    font-size: smaller;
  }
  .dark-mode {
    --bg-color: #222;
    --text-color: #fff;
    --button-bg-color: #fff;
    --button-text-color: #222;
  }
  
  #lineseprator{
    width: 50%;
    margin-left: 25%;

  }

  #containermoving {
    position: absolute;
    overflow: hidden;
    width: 100%;
  }
  
  .moving-div {
    position: absolute;
    white-space: nowrap;
    animation: specialmoving 10s linear infinite;
  }
  
  @keyframes specialmoving {
    0% {
      right: 100%;
    }
    100% {
      right: 0;
    }
  }
  .message1and1, .message1and2, .message1and3{
    display: none;
    background-color: transparent;
    padding: 10px;
    color: purple;
    font-size: 16px;
    position: absolute;
    margin-top: -510px;
    margin-left: 215px;
    background-color: yellow;
    border-radius: 5%;
    font-style: italic;
    font-size: x-small;
    width: 10%;
    height: 10%;
  }
  .message1and11, .message1and22, .message1and33 {
    display: none;
    padding: 10px;
    color: purple;
    font-size: 16px;
    position: absolute;
    margin-top: -470px;
    margin-left: 215px;
    background-color: aqua;
    border-radius: 5%;
    font-style: italic;
    font-size: x-small;
    width: 10%;
    height: 10%;
  }
  .message1and111, .message1and222, .message1and333 {
    display: none;
    padding: 10px;
    color: purple;
    font-size: 16px;
    position: absolute; 
    margin-top: -380px;
    margin-left: 265px;
    background-color: silver;
    border-radius: 5%;
    font-style: italic;
    font-size: x-small;
    width: 10%;
    height: 10%;
  }
  
  .closeButtonmark{
    display: block;
    background-color: black;
    color: red;
    font-weight: bold;
    cursor:pointer;
    border-radius: 50%;
    width: 30px;
    height: 20%;
    margin-left: 90px;
  }
  .labelQuery{
    font-size: smaller;
  }
  .fa-circle-check {
    color: green;
  }
  .fa-circle-xmark{
    color: red;
  }
  
  
  

/* Responsive Design  */
@media(max-width: 700px){
    .header{
        background-image: url(images/mobilecoverimage.gif);
        background-size: cover;
    }
    #calling{
        margin-top: 280px;
        cursor: pointer;
        animation: none;
        width: 120px;
        height: 30px;
        justify-content: center;
        text-align: center;
        padding-top: 10px;
        margin-left: -260px;
    }
    .display{
       display: block;
       color: black;
       width: 40%;
       margin-top: -7%;
       margin-left: 42px;
    } 
    .current-time {
        font-size: 12px;
        font-weight: bolder;
        padding: 10px;
        background: transparent;
        width: 200px;
        border-radius: 10%;
        margin-top: -1px;
        margin-left: 90px ;
        color: greenyellow;

      }
    .designlogo {
        position: fixed;
        height: 50px;
        left: 0px;
        width: 50px;
        margin-top: -25px;
        animation-duration: 2s;
    }
    .logo{
        font-size: 16px;
        font-weight: bolder; 
        margin-top: -35px;
        background-color: transparent;
        width: 200px;
        height: 50px;
        text-align: center;
        justify-content: center;
        margin-left: -50px;
        border-radius: 5%;
        color: rgb(247, 179, 6);
    }
    .hero-btn-2 {
        margin-left: -10px;
    }
    .hero-btn-2:hover{
        background-color: #99FF33;
    }
    .text-box h1{
        font-size: 25px;
        padding-left: 10px;
        padding-right: 10px;
        padding-top: 10px;
        padding-bottom: 10px;
    }
    .popup {
        width: 80%;
        height: 40%;
      }
      .popup h2{
        font-size: medium;
      }
      .popup p{
        font-size: small;
      }
    #closeBtn {
       margin-left: 280px;
    }
   ul li ul.submenu li {
    display: block;
}
ul li ul.submenu li a {
    font-size: small;
    color: aqua; 
    padding: 1px;
}
ul li ul.submenu {
    width: 100%;
    height: 900%;
    margin: 0px;
    background-color: black;
    position: absolute;
    z-index: 999;
    display: none;
    padding: 10px;
    justify-content: center;
    text-align: center;
    border-radius: 10%;
    
}
ul li:hover ul.submenu{
    display: block;
}
    .nav-links{
        position: fixed;
        background: goldenrod;
        height: 100vh;
        width: 200px;
        top: 0px;
        right: -200px;
        text-align: left;
        z-index: 2;
        transition: 1s;
        border-radius: 2px;
    }
    nav .fa-solid{
        display: block;
        color: white;
        margin: 0;
        font-size: 22px;
        cursor: pointer;
        background-color: transparent;
    }
    .nav-links ul{
        padding: 30px;

    }
    .hero-btn:hover{
        border: 1px solid green;
        background: green;
        transition: 1s;
    }
    .row{
        flex-direction: column;
    }
    .service-col{
        position: relative;
    }
    .popularplan{
        border-radius: 50%;
        background-color: #f44336;
        margin-top: -642px;
        color: white;
        font-weight: bold;
        position: absolute;
        margin-left: 85px;
        width: 120px;
        font-size: 11px;
        box-shadow: 2px 2px 2px 0 yellow;
    }
    .testimonials-col{
     height: 100px;
     width: 90%;
    }
    .testimonials-col img{
        margin-left: 0px;
        margin-right: 15px;   
    }
     .icons{
        background: color-mix(in srgb-linear, black 50%, white 50%);
        border-radius: 10px;
        margin-top: 10px;
        margin-left: 80px;
        width: 220px;
        padding-left: 5px;
        margin-bottom: 0px;
        padding-right: 5px;
        display: flex;
    }
    .icons:hover{
        background: transparent; 
    }
    .icons1{
        margin-left: 80px;
        margin-top: -422px;
    }
    .footer h4{
        margin-bottom: 80px;
    }
    .footer p{
        margin-bottom: 160px;
    }
    #Query{
        padding-bottom: 5px;
        padding-top: 5px;
        padding-left: 5px;
        padding-right: 50px;
        margin-left: 10px;
        margin-bottom: 30px;
        margin-top: 10px;
    }
    .checkbox {
        margin-left: -120px;
        
    }
    .checkbox-label {
        margin-top: -30px;
        margin-left: 30px;
        width: 100%;
        font-size: smaller;
      }
      .col-footer{
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        background-color: silver;
        border: #f44336;
        border-style: dotted;
        margin-top: 220px;
      }
      .col-footer1{
        width: 30%;
        margin: 10px;
        border-radius: 10%;
        padding: 5px;
        margin-top: -45px;
      }
      .col-footer2{ 
        width: 30%;
        margin: 10px;
        border-radius: 10%;
        padding: 5px;
        margin-top: 23px;
      }
      .col-footer3{ 
        width: 30%;
        margin: 10px;
        border-radius: 10%;
        padding: 5px;
        margin-top: 36px;
      }
      .col-footer1 ul li{
        list-style-type: none;
        padding: 5px;
      }
      .col-footer2 ul li{
        list-style-type: none;
        padding: 5px;
      }
      .col-footer3 ul li{
        list-style-type: none;
        padding: 5px;
      }
      .col-footer1 ul li a{
        text-decoration: none;
        color: blue;
        font-weight: bold; 
        font-size: smaller;
        padding: 10px;
      }
      .col-footer2 ul li a{
        text-decoration: none;
        color: blue;
        font-weight: bold;
        font-size: smaller;
        padding: 10px;
      }
     .col-footer3 ul li a{
        text-decoration: none;
        color: blue;
        font-weight: bold;
        font-size: smaller;
        padding: 10px;
      }
      .about-col iframe {
        width: 315px;
        height: 300px;
      }
      #searchBtn{
        color: blue;
        font-weight: bold;
        cursor: pointer;
      }
      #searchBtnapp{
        width: 12%;
        height: 4.9%;
        font-size: small;
        font-weight: bold;
        color: blue;
        cursor: pointer;
      }

      .refdiv {
        border: gray;
        box-sizing: border-box;
        border-style: dotted;
        margin-bottom: 10px;
        height: 500px;
        width: 300px;
      }
      .reftext{
        font-style: italic;
        font-size: smaller;
        padding: 5px;
        color: #99FF33;
        justify-content: center;
        text-align: center;
      }
      .refbtn{
        font-style: italic;
        font-size: 10px;
        margin-left:5px;
        margin-top: 10px;
        margin-bottom: 10px;
        padding: 10px;
        width: 200px;
        height: 50px;
        font-weight: bold;
        cursor: pointer;
        background-color: aqua;
      }
      #refresh-btn {
        /* This is only mobile responsive css & rest css is in quiz.css file */
        
         width: 20%;
         height: 20%;
         padding: 2%;
      }
      /* Plans Question mark styling */

      .message1and1, .message1and2, .message1and3 {
        display: none;
        background-color: transparent;
        padding: 10px;
        color: purple;
        font-size: 16px;
        position: absolute;
        margin-top: -515px;
        margin-left: 215px;
        background-color: yellow;
        border-radius: 5%;
        font-style: italic;
        font-size: x-small;
        width: 30%;
        height: 10%;
      }
      .message1and11, .message1and22, .message1and33 {
        display: none;
        padding: 10px;
        color: purple;
        font-size: 16px;
        position: absolute;
        margin-top: -480px;
        margin-left: 215px;
        background-color: aqua;
        border-radius: 5%;
        font-style: italic;
        font-size: x-small;
        width: 30%;
        height: 10%;
      }
      .message1and111, .message1and222, .message1and333{
        display: none;
        padding: 10px;
        color: purple;
        font-size: 16px;
        position: absolute;
        margin-top: -450px;
        margin-left: 215px;
        background-color: silver;
        border-radius: 5%;
        font-style: italic;
        font-size: x-small;
        width: 30%;
        height: 10%;
      }
      .closeButtonmark{
        display: block;
        background-color: black;
        color: red;
        font-weight: bold;
        cursor:pointer;
        border-radius: 50%;
        width: 30px;
        height: 20%;
        margin-left: 65px;
        margin-top: -8px;
      }
      .mode-button {
        background-color: var(--button-bg-color);
        color: var(--button-text-color);
        padding: 10px;
        margin: 10px;
        border: red;
        border-style: double;
        border-radius: 5px;
        width: 30%;
        cursor: pointer;
        font-size: 10px;
        justify-content: center;
        text-align: center;
      }
      
    
}