@media (-webkit-max-device-pixel-ratio: 1) {
  body {
    zoom: 1;
  }
}

@media (-webkit-device-pixel-ratio: 1.25) {
  body {
    zoom: 1;
  }
}
@font-face {
  font-family: "a Agreement Signature";
  src: url("../fonts/aAgreementSignature.woff2") format("woff2"),
    url("../fonts/aAgreementSignature.woff") format("woff");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}
.menu-item:hover {
  transform: scale(1.05); /* Adjust the scale on hover */
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.3); /* Adjust the box shadow on hover */
}

#bg-image {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url("../images/bg-home.jpg") center/cover no-repeat;
  z-index: -1;
}

#logo {
  position: absolute;
  top: 6%;
  left: 4%;
  width: 360px;
  height: 180px;
  background: url("../images/black-logo-1x.png") center/contain no-repeat;
  animation: fadeLogo 2s ease forwards;
}

.menu-item {
  position: absolute;
  border-radius: 50%;
  overflow: hidden;
  cursor: pointer;
  opacity: 0;
}

.menu-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

#southIndia {
  top: 35%;
  left: 6%;
  width: 360px;
  height: 360px;
  border: 8px solid #f93f44;
  animation: fadeInFromBottom 0.8s ease forwards;
}

#southIndia .imgmenu-text {
  height: 100px;
  width: 100%;
  background-color: #f64146c7;
  position: absolute;
  bottom: 0;
  z-index: 10;
  text-align: center;
  color: #fff;
  text-shadow: 2px 2px 2px #000;
}

#southIndia .imgmenu-text h2 {
  position: absolute;
  bottom: 20px;
  text-align: center;
  width: 100%;
  color: #fff;
  text-shadow: 2px 2px 2px #000;
}

#whoAmI {
  top: 12%;
  left: 30%;
  width: 250px;
  height: 250px;
  border: 8px solid #dc6932;
  animation: fadeInFromTop 0.8s ease forwards;
}

#whoAmI .imgmenu-text {
  height: 100px;
  width: 100%;
  background-color: #dc6d38b2;
  position: absolute;
  bottom: 0;
  z-index: 10;
  text-align: center;
  color: #fff;
  text-shadow: 2px 2px 2px #000;
}

#whoAmI .imgmenu-text h2 {
  position: absolute;
  bottom: 20px;
  text-align: center;
  width: 100%;
  color: #fff;
  text-shadow: 2px 2px 2px #000;
}

#connectWithMe {
  top: 50%;
  left: 40%;
  width: 280px;
  height: 280px;
  border: 8px solid #1b9d83;
  animation: fadeInFromBottom 0.8s ease forwards;
}

#connectWithMe .imgmenu-text {
  height: 100px;
  width: 100%;
  background-color: #208a72b2;
  position: absolute;
  bottom: 0;
  z-index: 10;
  text-align: center;
  color: #fff;
  text-shadow: 2px 2px 2px #000;
}

#connectWithMe .imgmenu-text h2 {
  position: absolute;
  bottom: 8px;
  text-align: center;
  width: 100%;
  color: #fff;
  text-shadow: 2px 2px 2px #000;
}

#myBooks {
  top: 14%;
  left: 56%;
  width: 340px;
  height: 340px;
  border: 8px solid #e8ba5a;
  animation: fadeInFromTop 0.8s ease forwards;
}

#myBooks .imgmenu-text {
  height: 100px;
  width: 100%;
  background-color: #d7a53dbf;
  position: absolute;
  bottom: 0;
  z-index: 10;
  text-align: center;
}

#myBooks .imgmenu-text h2 {
  position: absolute;
  bottom: 20px;
  text-align: center;
  width: 100%;
  color: #fff;
  text-shadow: 2px 2px 2px #000;
}

#blog {
  top: 10%;
  left: 80%;
  width: 220px;
  height: 220px;
  border: 8px solid #c7518e;
  animation: fadeInFromBottom 0.8s ease forwards;
}

#blog .imgmenu-text {
  height: 100px;
  width: 100%;
  background-color: #c95993bd;
  position: absolute;
  bottom: 0;
  z-index: 10;
  text-align: center;
  color: #fff;
  text-shadow: 2px 2px 2px #000;
}

#blog .imgmenu-text h2 {
  position: absolute;
  bottom: 20px;
  text-align: center;
  width: 100%;
  color: #fff;
  text-shadow: 2px 2px 2px #000;
}

#southIndia,
#whoAmI,
#connectWithMe,
#myBooks,
#blog {
  transition: 0.3s;
  box-shadow: 6px 6px 6px #0004;
}

#southIndia:hover,
#whoAmI:hover,
#connectWithMe:hover,
#myBooks:hover,
#blog:hover {
  margin-top: -16px;
  transition: 0.3s;
}

#copyright {
  position: fixed;
  bottom: 20px;
  width: 100%;
  text-align: center;
  color: #fff;
  animation: fadeIn 1s ease forwards;
  text-shadow: #0008 2px 2px 4px;
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes fadeInFromBottom {
  from {
    opacity: 0;
    transform: translateY(50%);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeInFromTop {
  from {
    opacity: 0;
    transform: translateY(-50%);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeLogo {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.menu-item h2 {
  font-family: "Segoe Script", "Comic Sans MS", Textile, "Textile Regular",
    Cursive;
  font-weight: bold;
  line-height: 100%;
}

/* Styles for screens 1200 to 1600 pixels wide */
/* Styles for screens 992 to 1200 pixels wide */
/* Styles for screens 768 to 992 pixels wide */
/* Styles for screens 572 to 768 pixels wide */
/* Styles for screens 350 to 576 pixels wide */

@media screen and (max-width: 1600px) {
  /* Styles for screens 1200 to 1600 pixels wide */

  #logo {
    position: absolute;
    width: 250px;
    height: 126px;
  }
  #southIndia {
    width: 300px;
    height: 300px;
  }
  #whoAmI {
    width: 220px;
    height: 220px;
  }
  #connectWithMe {
    width: 270px;
    height: 270px;
    top: 50%;
    left: 35%;
  }
  #myBooks {
    width: 260px;
    height: 260px;
    top: 14%;
    left: 52%;
  }
  #blog {
    width: 210px;
    height: 210px;
    top: 8%;
    left: 78%;
  }
}

@media screen and (max-width: 1200px) {
  /* Styles for screens 992 to 1200 pixels wide */

  #logo {
    position: absolute;
    width: 250px;
    height: 126px;
  }
  #southIndia {
    width: 260px;
    height: 260px;
    top: 32%;
    left: 6%;
  }
  #whoAmI {
    width: 180px;
    height: 180px;
    top: 14%;
    left: 32%;
  }
  #connectWithMe {
    width: 220px;
    height: 220px;
    top: 50%;
    left: 35%;
  }
  #myBooks {
    width: 220px;
    height: 220px;
    top: 20%;
    left: 54%;
  }
  #blog {
    width: 180px;
    height: 180px;
    top: 8%;
    left: 78%;
  }

  #southIndia .imgmenu-text {
    height: 65px;
  }
  #whoAmI .imgmenu-text {
    height: 65px;
  }
  #connectWithMe .imgmenu-text {
    height: 65px;
  }
  #myBooks .imgmenu-text {
    height: 65px;
  }
  #blog .imgmenu-text {
    height: 65px;
  }

  #southIndia .imgmenu-text h2 {
    bottom: 10px;
  }
  #whoAmI .imgmenu-text h2 {
    bottom: 10px;
  }
  #connectWithMe .imgmenu-text h2 {
    bottom: 0px;
  }
  #myBooks .imgmenu-text h2 {
    bottom: 10px;
  }
  #blog .imgmenu-text h2 {
    bottom: 10px;
  }

  .menu-item h2 {
    font-size: 21px;
  }
}

@media screen and (max-width: 992px) {
  /* Styles for screens 577 to 992 pixels wide */

  #logo {
    position: absolute;
    width: 200px;
    height: 101px;
    top: 10px;
    left: 4%;
  }
  #southIndia {
    width: 140px;
    height: 140px;
    top: 120px;
    left: 5%;
  }
  #whoAmI {
    width: 140px;
    height: 140px;
    top: 120px;
    left: 35%;
  }
  #connectWithMe {
    width: 140px;
    height: 140px;
    top: 120px;
    left: 65%;
  }
  #myBooks {
    width: 140px;
    height: 140px;
    top: 300px;
    left: 20%;
  }
  #blog {
    width: 140px;
    height: 140px;
    top: 300px;
    left: 50%;
  }

  #southIndia .imgmenu-text {
    height: 55px;
  }
  #whoAmI .imgmenu-text {
    height: 55px;
  }
  #connectWithMe .imgmenu-text {
    height: 55px;
  }
  #myBooks .imgmenu-text {
    height: 55px;
  }
  #blog .imgmenu-text {
    height: 55px;
  }

  #southIndia .imgmenu-text h2 {
    bottom: 10px;
  }
  #whoAmI .imgmenu-text h2 {
    bottom: 10px;
  }
  #connectWithMe .imgmenu-text h2 {
    bottom: 0px;
  }
  #myBooks .imgmenu-text h2 {
    bottom: 10px;
  }
  #blog .imgmenu-text h2 {
    bottom: 10px;
  }

  .menu-item h2 {
    font-size: 16px;
  }

  #southIndia {
    border-width: 4px;
    border-style: solid;
  }
  #whoAmI {
    border-width: 4px;
    border-style: solid;
  }
  #connectWithMe {
    border-width: 4px;
    border-style: solid;
  }
  #myBooks {
    border-width: 4px;
    border-style: solid;
  }
  #blog {
    border-width: 4px;
    border-style: solid;
  }

  #bg-image {
    position: fixed;
    background: url("../images/bg-home.jpg") no-repeat;
    background-position: right bottom;
    background-size: cover;
    z-index: -1;
  }
}

@media (max-width: 576px) {
  /* Styles for screens 451 to 576 pixels wide */

  .mobiimgmenucontainer .imgmenu-text h2 {
    font-family: "Segoe Script", "Comic Sans MS", Textile, "Textile Regular",
      Cursive;
    font-weight: bold;
    line-height: 100%;
    font-size: 16px;
    color: #fff;
  }

  #logo {
    position: absolute;
    width: 200px;
    height: 101px;
    top: 10px;
    left: 4%;
  }

  .mobiimgmenucontainer {
    padding-top: 120px;
  }

  #mobileimg-southindia {
    width: 150px;
    height: 150px;
    margin: 0 auto;
    border: 4px solid #f93f44;
    position: relative;
    background-image: url("../images/img-menu-southindia-1x.jpg");
    background-position: center;
    background-size: cover;
    border-radius: 50%;
    overflow: hidden;
    cursor: pointer;
    animation: fadeInFromBottom 0.8s ease forwards;
    box-shadow: 4px 4px 4px #0003;
  }
  #mobileimg-whoami {
    width: 150px;
    height: 150px;
    margin: 0 auto;
    border: 4px solid #dc6932;
    position: relative;
    background-image: url("../images/img-menu-whoami-1x.jpg");
    background-position: center;
    background-size: cover;
    border-radius: 50%;
    overflow: hidden;
    cursor: pointer;
    animation: fadeInFromBottom 0.8s ease forwards;
    box-shadow: 4px 4px 4px #0003;
  }
  #mobileimg-connectwithme {
    width: 150px;
    height: 150px;
    margin: 0 auto;
    border: 4px solid #1b9d83;
    position: relative;
    background-image: url("../images/img-menu-connect-1x.jpg");
    background-position: center;
    background-size: cover;
    border-radius: 50%;
    overflow: hidden;
    cursor: pointer;
    animation: fadeInFromBottom 0.8s ease forwards;
    box-shadow: 4px 4px 4px #0003;
  }
  #mobileimg-mybooks {
    width: 150px;
    height: 150px;
    margin: 0 auto;
    border: 4px solid #e8ba5a;
    position: relative;
    background-image: url("../images/img-menu-mybooks-1x.jpg");
    background-position: center;
    background-size: cover;
    border-radius: 50%;
    overflow: hidden;
    cursor: pointer;
    animation: fadeInFromBottom 0.8s ease forwards;
    box-shadow: 4px 4px 4px #0003;
  }
  #mobileimg-blog {
    width: 150px;
    height: 150px;
    margin: 0 auto;
    border: 4px solid #c7518e;
    position: relative;
    background-image: url("../images/img-menu-blog-1x.jpg");
    background-position: center;
    background-size: cover;
    border-radius: 50%;
    overflow: hidden;
    cursor: pointer;
    animation: fadeInFromBottom 0.8s ease forwards;
    box-shadow: 4px 4px 4px #0003;
  }

  #mobileimg-southindia .imgmenu-text {
    height: 58px;
    width: 100%;
    background-color: #f64146c7;
    text-align: center;
    color: #fff;
    text-shadow: 2px 2px 2px #000;
    bottom: 0;
    position: absolute;
  }
  #mobileimg-southindia .imgmenu-text h2 {
    bottom: 0px;
    text-align: center;
    width: 100%;
  }

  #mobileimg-whoami .imgmenu-text {
    height: 50px;
    width: 100%;
    background-color: #dc6d38b2;
    text-align: center;
    color: #fff;
    text-shadow: 2px 2px 2px #000;
    bottom: 0;
    position: absolute;
  }
  #mobileimg-whoami .imgmenu-text h2 {
    bottom: 0px;
    text-align: center;
    width: 100%;
  }

  #mobileimg-connectwithme .imgmenu-text {
    height: 60px;
    width: 100%;
    background-color: #208a72b2;
    text-align: center;
    color: #fff;
    text-shadow: 2px 2px 2px #000;
    bottom: 0;
    position: absolute;
  }
  #mobileimg-connectwithme .imgmenu-text h2 {
    bottom: 0px;
    text-align: center;
    width: 100%;
  }

  #mobileimg-mybooks .imgmenu-text {
    height: 50px;
    width: 100%;
    background-color: #d7a53dbf;
    text-align: center;
    color: #fff;
    text-shadow: 2px 2px 2px #000;
    bottom: 0;
    position: absolute;
  }
  #mobileimg-mybooks .imgmenu-text h2 {
    bottom: 0px;
    text-align: center;
    width: 100%;
  }

  #mobileimg-blog .imgmenu-text {
    height: 50px;
    width: 100%;
    background-color: #c95993bd;
    text-align: center;
    color: #fff;
    text-shadow: 2px 2px 2px #000;
    bottom: 0;
    position: absolute;
  }
  #mobileimg-blog .imgmenu-text h2 {
    bottom: 0px;
    text-align: center;
    width: 100%;
  }

  #mobileimg-southindia,
  #mobileimg-whoami,
  #mobileimg-connectwithme,
  #mobileimg-mybooks,
  #mobileimg-blog {
    transition: 0.3s;
  }

  #mobileimg-southindia:hover,
  #mobileimg-whoami:hover,
  #mobileimg-connectwithme:hover,
  #mobileimg-mybooks:hover,
  #mobileimg-blog:hover {
    margin-top: -16px;
    transition: 0.3s;
  }

  #bg-image {
    background-image: url("../images/bg-home.jpg");
    background-repeat: no-repeat;
    background-position: right bottom;
    background-size: cover;
    z-index: -1;
  }
}

@media (max-width: 575px) {
  .mobihide {
    display: none !important;
  }
}
@media (min-width: 576px) and (max-width: 3000px) {
  .deskhide {
    display: none !important;
  }
}

@media (min-width: 320px) and (max-width: 575px) {
  .home-layout-mobile {
    padding: 20px 0;
    width: 49%;
    display: inline-block;
    text-align: center;
  }
}

@media (max-width: 319px) {
  .home-layout-mobile {
    padding: 20px 0;
    width: 100%;
    display: inline-block;
    text-align: center;
  }
}