@charset "UTF-8";
@import url(../fonts/carlito-cufonfonts-webfont/style.css);
body {
  scroll-behavior: smooth !important;
  height: 100%;
  width: 100vw;
  overflow-x: hidden;
}

section {
  background-color: white !important;
}

header {
  border-bottom: 1px solid whitesmoke;
}

button {
  text-transform: uppercase;
}

.title {
  font-family: 'Carlito Bold';
  color: #03014C;
}

p, h1, h2, h3, h4, h5, h6, span, a, button, .options, table, th, tr, td {
  font-family: 'Carlito Regular';
}

button {
  position: relative;
  border: none;
  font-size: 1rem;
  -webkit-transition: color 0.5s, background-color 0.2s, -webkit-transform 0.2s;
  transition: color 0.5s, background-color 0.2s, -webkit-transform 0.2s;
  transition: color 0.5s, transform 0.2s, background-color 0.2s;
  transition: color 0.5s, transform 0.2s, background-color 0.2s, -webkit-transform 0.2s;
  outline: none;
  border-radius: 3px;
  margin: 0px;
  padding: 0.7rem 1.4rem;
  border: 3px solid transparent;
  font-family: 'Carlito Regular';
}

button:active {
  -webkit-transform: translateY(3px);
          transform: translateY(3px);
}

button::after, button::before {
  border-radius: 3px;
}

.blogYear, .blogMonth {
  color: #414088 !important;
}

.selectedYear, .selectedMonth {
  color: #03014C !important;
}

.material-bubble {
  background-color: transparent;
  color: #01001a;
  border: none;
  overflow: hidden;
  -webkit-box-shadow: none;
          box-shadow: none;
}

.material-bubble:hover {
  color: #e6e6e6;
  z-index: 999;
}

.material-bubble::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 3px solid #03014C;
  -webkit-transition: opacity 0.3s, border 0.3s;
  transition: opacity 0.3s, border 0.3s;
}

.material-bubble:hover::before {
  opacity: 0;
}

.material-bubble::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 400px;
  height: 200px;
  background-color: #05027e;
  border-color: transparent;
  border-radius: 50%;
  -webkit-transform: translate(-10px, -70px) scale(0.1);
          transform: translate(-10px, -70px) scale(0.1);
  opacity: 0;
  z-index: -1;
  -webkit-transition: opacity 0.3s, background-color 0.3s, -webkit-transform 0.3s;
  transition: opacity 0.3s, background-color 0.3s, -webkit-transform 0.3s;
  transition: transform 0.3s, opacity 0.3s, background-color 0.3s;
  transition: transform 0.3s, opacity 0.3s, background-color 0.3s, -webkit-transform 0.3s;
}

.material-bubble:hover::after {
  opacity: 1;
  -webkit-transform-origin: 100px 100px;
          transform-origin: 100px 100px;
  -webkit-transform: scale(1) translate(-10px, -70px);
          transform: scale(1) translate(-10px, -70px);
}

.hideScreen {
  display: none;
}

.showScreen {
  display: block;
  opacity: 1;
  visibility: visible;
}

@-webkit-keyframes slide {
  0% {
    opacity: 0;
    right: -100px;
  }
  50% {
    opacity: 0.5;
    right: -50px;
  }
  100% {
    opacity: 1;
    right: 0px;
  }
}

@keyframes slide {
  0% {
    opacity: 0;
    right: -100px;
  }
  50% {
    opacity: 0.5s;
    right: -50px;
  }
  100% {
    opacity: 1;
    right: 0px;
  }
}

@font-face {
  font-family: 'jungle-adventurer';
  src: url("./../assets/fonts/jungle-adventurer.regular.ttf") format("truetype");
  /* Chrome 4+, Firefox 3.5, Opera 10+, Safari 3—5 */
}

@font-face {
  font-family: 'GorgaGrotesque-Bold';
  src: url("./../assets/fonts/GorgaGrotesque-Bold.ttf") format("truetype");
  /* Chrome 4+, Firefox 3.5, Opera 10+, Safari 3—5 */
}

.achievement_back {
  position: absolute;
  top: 8%;
  left: 5%;
  width: 10rem;
  font-size: 2rem;
  cursor: pointer;
}

#portgallery {
  line-height: 0;
  -webkit-column-count: 5;
  -webkit-column-gap: 0px;
  -moz-column-count: 5;
  -moz-column-gap: 0px;
  column-count: 5;
  column-gap: 0px;
  width: 95%;
  margin: 2% auto;
}

#portgallery img {
  /* Just in case there are inline attributes */
  width: 100% !important;
  height: auto !important;
  border: 1px solid #f3f3f3;
}

@media (max-width: 1200px) {
  #portgallery {
    -webkit-column-count: 4;
    column-count: 4;
  }
}

@media (max-width: 1000px) {
  #portgallery {
    -webkit-column-count: 3;
    column-count: 3;
  }
}

@media (max-width: 800px) {
  #portgallery {
    -webkit-column-count: 2;
    column-count: 2;
  }
}

@media (max-width: 400px) {
  #portgallery {
    -webkit-column-count: 1;
    column-count: 1;
  }
}

.app-image-shadow {
  background-color: #ececec;
  border-radius: 0.4rem;
  -webkit-box-shadow: 2.8px 2.8px 2.2px rgba(0, 0, 0, 0.02), 6.7px 6.7px 5.3px rgba(0, 0, 0, 0.028), 12.5px 12.5px 10px rgba(0, 0, 0, 0.035), 22.3px 22.3px 17.9px rgba(0, 0, 0, 0.042), 41.8px 41.8px 33.4px rgba(0, 0, 0, 0.05), 100px 100px 80px rgba(0, 0, 0, 0.07);
          box-shadow: 2.8px 2.8px 2.2px rgba(0, 0, 0, 0.02), 6.7px 6.7px 5.3px rgba(0, 0, 0, 0.028), 12.5px 12.5px 10px rgba(0, 0, 0, 0.035), 22.3px 22.3px 17.9px rgba(0, 0, 0, 0.042), 41.8px 41.8px 33.4px rgba(0, 0, 0, 0.05), 100px 100px 80px rgba(0, 0, 0, 0.07);
}

.app-shadow-img {
  -webkit-box-shadow: 2.8px 2.8px 2.2px rgba(0, 0, 0, 0.02), 6.7px 6.7px 5.3px rgba(0, 0, 0, 0.028), 12.5px 12.5px 10px rgba(0, 0, 0, 0.035), 22.3px 22.3px 17.9px rgba(0, 0, 0, 0.042), 41.8px 41.8px 33.4px rgba(0, 0, 0, 0.05), 100px 100px 80px rgba(0, 0, 0, 0.07);
          box-shadow: 2.8px 2.8px 2.2px rgba(0, 0, 0, 0.02), 6.7px 6.7px 5.3px rgba(0, 0, 0, 0.028), 12.5px 12.5px 10px rgba(0, 0, 0, 0.035), 22.3px 22.3px 17.9px rgba(0, 0, 0, 0.042), 41.8px 41.8px 33.4px rgba(0, 0, 0, 0.05), 100px 100px 80px rgba(0, 0, 0, 0.07);
}

.app-shadow {
  -webkit-box-shadow: 14.5px 15.6px 17.9px rgba(0, 0, 0, 0.042), 27.2px 29.2px 33.4px rgba(0, 0, 0, 0.05), 65px 70px 80px rgba(0, 0, 0, 0.07);
          box-shadow: 14.5px 15.6px 17.9px rgba(0, 0, 0, 0.042), 27.2px 29.2px 33.4px rgba(0, 0, 0, 0.05), 65px 70px 80px rgba(0, 0, 0, 0.07);
}

@font-face {
  font-family: 'Arial Regular';
  font-style: normal;
  font-weight: normal;
  src: local("Arial Regular"), url("../fonts/arial/Arial.woff") format("woff");
}

.vector {
  /* Vector 1 */
  width: 3rem;
  height: 2px;
  background-color: #03014C;
}

.im_raghu {
  /* I’M MR RAGHU */
  font-style: normal;
  font-weight: bold;
  line-height: 25px;
  letter-spacing: 8.5px;
  color: #03014C;
  -webkit-animation: slidein ease 3s;
          animation: slidein ease 3s;
}

.ceo-statement {
  font-style: normal;
  font-weight: bold;
  line-height: 65px;
  color: #03014C;
}

.ceo-contents {
  font-family: 'Carlito Medium';
  letter-spacing: 0.03em;
  color: #0f0c5c;
  font-family: 'Carlito Regular';
  line-height: 4.5rem;
  font-weight: 700;
}

.ceo-contents a {
  color: black;
  font-size: 1rem;
  font-family: 'Carlito Light';
  text-decoration: underline;
  cursor: pointer;
}

@media screen and (min-width: 350px) and (max-width: 768px) {
  .ceo-contents {
    line-height: 3rem;
  }
}

.all-ceo-contents {
  line-height: 38px;
  font-family: 'Carlito Medium';
  letter-spacing: 0.03em;
  color: #0f0c5c;
  font-weight: 500;
  font-size: 1rem;
}

.about-raghu {
  background-color: #414a51;
}

.about-raghu .divider {
  width: 0.3rem;
  background-color: white;
  border-radius: 0.3rem;
}

.about-raghu .other-works {
  font-size: 1.5rem;
  padding: 8% 0%;
  text-transform: capitalize;
  color: white;
}

.about-raghu .container {
  -webkit-clip-path: polygon(0% 0%, 100% 0%, 100% 75%, 41% 76%, 31% 90%, 21% 76%, 0% 75%);
          clip-path: polygon(0% 0%, 100% 0%, 100% 75%, 41% 76%, 31% 90%, 21% 76%, 0% 75%);
}

.about-raghu .sh-bg {
  background-color: #f1928c;
}

.about-raghu .sk-bg {
  background-color: #bdcc66;
}

.about-raghu .pe-sg {
  background-color: #96b1c1;
}

.about-raghu .ho-bg {
  background-color: #efa845;
}

.user-img-container {
  position: relative;
}

@media screen and (min-width: 1024px) and (max-width: 1800px) {
  .user-img-container {
    height: 32.5rem;
  }
}

@media screen and (min-width: 1801px) {
  .user-img-container {
    height: 33rem;
  }
}

.user-img-container .left-outer-shape {
  background-color: #e7e7e7;
  border-radius: 34% 66% 67% 33% / 30% 37% 63% 70%;
  padding: 1rem;
  background-color: #8BC6EC;
  background-image: linear-gradient(135deg, #8BC6EC 0%, #9599E2 100%);
  position: absolute;
  top: 65%;
  left: 2%;
}

@media screen and (min-width: 345px) and (max-width: 1019px) {
  .user-img-container .left-outer-shape {
    top: 35%;
    left: 3%;
  }
}

@media screen and (min-width: 1024px) {
  .user-img-container .left-outer-shape {
    top: 75%;
    left: 0%;
  }
}

.user-img-container .right-outer-shape {
  background-color: #e7e7e7;
  border-radius: 31% 61% 48% 32% / 46% 61% 24% 34%;
  padding: 1rem;
  background-color: #8BC6EC;
  background-image: linear-gradient(135deg, #8BC6EC 0%, #9599E2 100%);
  position: absolute;
  top: 15%;
  right: 5%;
}

@media screen and (min-width: 345px) and (max-width: 1019px) {
  .user-img-container .right-outer-shape {
    top: 5%;
    right: 2%;
  }
}

@media screen and (min-width: 1024px) {
  .user-img-container .right-outer-shape {
    top: -4%;
  }
}

.user-img-container .user-image {
  border-radius: 50% 50% 49% 51% / 41% 41% 35% 36%;
  height: 100%;
}

.center {
  margin: auto;
  width: 85%;
  padding: 5rem 2rem;
}

@-webkit-keyframes translating {
  0% {
    -webkit-transform: translate(0, 0) rotate(0deg);
            transform: translate(0, 0) rotate(0deg);
  }
  25% {
    -webkit-transform: translate(0, 35px) rotate(90deg);
            transform: translate(0, 35px) rotate(90deg);
  }
  50% {
    -webkit-transform: translate(0, 70px) rotate(180deg);
            transform: translate(0, 70px) rotate(180deg);
  }
  75% {
    -webkit-transform: translate(0, 35px) rotate(90deg);
            transform: translate(0, 35px) rotate(90deg);
  }
  100% {
    -webkit-transform: translate(0, 0) rotate(0deg);
            transform: translate(0, 0) rotate(0deg);
  }
}

@keyframes translating {
  0% {
    -webkit-transform: translate(0, 0) rotate(0deg);
            transform: translate(0, 0) rotate(0deg);
  }
  25% {
    -webkit-transform: translate(0, 35px) rotate(90deg);
            transform: translate(0, 35px) rotate(90deg);
  }
  50% {
    -webkit-transform: translate(0, 70px) rotate(180deg);
            transform: translate(0, 70px) rotate(180deg);
  }
  75% {
    -webkit-transform: translate(0, 35px) rotate(90deg);
            transform: translate(0, 35px) rotate(90deg);
  }
  100% {
    -webkit-transform: translate(0, 0) rotate(0deg);
            transform: translate(0, 0) rotate(0deg);
  }
}

@-webkit-keyframes translatings {
  0% {
    -webkit-transform: translate(0, 0) rotate(0deg);
            transform: translate(0, 0) rotate(0deg);
  }
  25% {
    -webkit-transform: translate(0, -25px) rotate(90deg);
            transform: translate(0, -25px) rotate(90deg);
  }
  50% {
    -webkit-transform: translate(0, -50px) rotate(180deg);
            transform: translate(0, -50px) rotate(180deg);
  }
  75% {
    -webkit-transform: translate(0, -25px) rotate(90deg);
            transform: translate(0, -25px) rotate(90deg);
  }
  100% {
    -webkit-transform: translate(0, 0) rotate(0deg);
            transform: translate(0, 0) rotate(0deg);
  }
}

@keyframes translatings {
  0% {
    -webkit-transform: translate(0, 0) rotate(0deg);
            transform: translate(0, 0) rotate(0deg);
  }
  25% {
    -webkit-transform: translate(0, -25px) rotate(90deg);
            transform: translate(0, -25px) rotate(90deg);
  }
  50% {
    -webkit-transform: translate(0, -50px) rotate(180deg);
            transform: translate(0, -50px) rotate(180deg);
  }
  75% {
    -webkit-transform: translate(0, -25px) rotate(90deg);
            transform: translate(0, -25px) rotate(90deg);
  }
  100% {
    -webkit-transform: translate(0, 0) rotate(0deg);
            transform: translate(0, 0) rotate(0deg);
  }
}

.about-image-container {
  position: relative;
  margin: 0% auto;
}

.image_container {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.image_container .raghu_img
, .mbl_image_container div {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  visibility: hidden;
}

.raghu_img img {
  width: 100%;
  -o-object-fit: contain;
     object-fit: contain;
  height: 100%;
}

.mbl_raghu_img img {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

@media screen and (max-width: 320px) {
  .mbl_raghu_img img {
    top: 50%;
  }
}

.mbl_gif {
  position: absolute;
  top: 92%;
}

@media screen and (max-width: 320px) {
  .mbl_gif {
    top: 100%;
  }
}
/*# sourceMappingURL=homepage.css.map */