/*
 * Template Name: Polix - Personal Portfolio HTML Template
 * Author: https://themeforest.net/user/apexels
 * Version: 1.0
 * License: ThemeForest Regular / Extended License
 */

/* ----------------------------------------------------------------
  [Table of Contents]

  01. General Styles
  02. Typography
  03. Preloader
  04. Buttons
  05. Menu and Panels
  06. Hero Section
  07. About Section
  08. Services Section
  09. Career Section
  10. Portfolio Section
  11. Client Section
  12. Contact Section
  13. Footer Section
  14. Responsive (Media Queries)
------------------------------------------------------------------- */


/* ===============================
   01. General Styles
================================== */

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

body {
  font-family: "Muli", sans-serif;
  background-image: url("../../assets/img/bg-body.png");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  color: #fff;
  transition: background-color 0.5s ease, color 0.5s ease;
  border-top: 0 solid transparent;
  transition: border-top 0.4s ease;
  position: relative;
}

body * {
  transition: background-color 0.5s ease, color 0.5s ease;
}

body.body-bg-1 {
  background: #01002a;
}

body.light-mode {
  background-image: none;
  background-color: #fff !important;
  color: #111;
  transition: color 0.5s ease;
}

body.light-mode h1,
body.light-mode h2,
body.light-mode h3,
body.light-mode h4,
body.light-mode h5,
body.light-mode h6 {
  color: #111 !important;
}

body.light-mode p {
  color: #777777 !important;
}

body.light-mode .back_btn {
  color: #111;
}

body.light-mode #siteLogo {
  transition: opacity 0.2s ease;
}

body.light-mode .hero_image h3 {
  color: #111;
}

body.light-mode button#themeToggle {
  background: linear-gradient(91deg, rgba(4, 16, 15, 0.75) 0.91%, rgba(0, 149, 71, 0.75) 192.09%);
  -webkit-backdrop-filter: blur(15px);
  backdrop-filter: blur(15px);
  color: #ffffff;
}

body.light-mode #menu-item {
  transition: left 0.5s ease-in-out;
}

body.light-mode .slide-panel {
  transition: right 0.5s ease-in-out;
}

body.light-mode #aboutPanel {
  border-top: 4px solid #FF7448;
}

body.light-mode #servicePanel {
  border-top: 4px solid #0F0264;
}

body.light-mode #careerPanel {
  border-top: 4px solid #FFD028;
}

body.light-mode #folioPanel {
  border-top: 4px solid #09A8DA;
}

body.light-mode #clientPanel {
  border-top: 4px solid #780EFF;
}

body.light-mode #contactPanel {
  border-top: 4px solid #0F0933;
}

.theme-switch {
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 999;
  width: 120px;
  height: 50px;
}

.theme-switch input[type=checkbox] {
  display: none;
}

.theme-switch .switch-label {
  background-color: rgb(255, 255, 255);
  border-radius: 30px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 15px;
  cursor: pointer;
  height: 100%;
  position: relative;
  transition: background-color 0.3s ease;
}

.theme-switch .icon {
  font-size: 18px;
  z-index: 1;
  color: #111;
}

.theme-switch .moon {
  color: #fff;
}

.theme-switch .switch-ball {
  position: absolute;
  top: 5px;
  left: 5px;
  width: 40px;
  height: 40px;
  background: linear-gradient(270deg, #B3FF7C 0%, #31FF92 100%);
  border-radius: 50%;
  transition: left 0.3s ease, background-color 0.3s ease;
  z-index: 0;
}

.theme-switch.style2 .switch-ball {
  background: #000840;
}

.theme-switch input:checked+.switch-label {
  background: linear-gradient(270deg, #B3FF7C 0%, #31FF92 100%);
}

.theme-switch.style2 input:checked+.switch-label {
  background: #000840;
}

.theme-switch input:checked+.switch-label .sun {
  color: #111;
}

.theme-switch input:checked+.switch-label .moon {
  color: #fff;
}

.theme-switch input:checked+.switch-label .switch-ball {
  left: 75px;
  background: #fff;
}


/* Background Circles */
.circles {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  z-index: -1;
}

.circles li {
  position: absolute;
  display: block;
  list-style: none;
  width: 20px;
  height: 20px;
  animation: animate 25s linear infinite;
  bottom: -150px;
}

.circles li:nth-child(1) {
  left: 25%;
  width: 80px;
  height: 80px;
  animation-delay: 0s;
}

.circles li:nth-child(2) {
  left: 10%;
  width: 20px;
  height: 20px;
  animation-delay: 2s;
  animation-duration: 12s;
}

.circles li:nth-child(3) {
  left: 70%;
  width: 20px;
  height: 20px;
  animation-delay: 4s;
}

.circles li:nth-child(4) {
  left: 40%;
  width: 60px;
  height: 60px;
  animation-delay: 0s;
  animation-duration: 18s;
}

.circles li:nth-child(5) {
  left: 65%;
  width: 20px;
  height: 20px;
  animation-delay: 0s;
}

.circles li:nth-child(6) {
  left: 75%;
  width: 110px;
  height: 110px;
  animation-delay: 3s;
}

.circles li:nth-child(7) {
  left: 35%;
  width: 150px;
  height: 150px;
  animation-delay: 7s;
}

.circles li:nth-child(8) {
  left: 50%;
  width: 25px;
  height: 25px;
  animation-delay: 15s;
  animation-duration: 45s;
}

.circles li:nth-child(9) {
  left: 20%;
  width: 15px;
  height: 15px;
  animation-delay: 2s;
  animation-duration: 35s;
}

.circles li:nth-child(10) {
  left: 85%;
  width: 150px;
  height: 150px;
  animation-delay: 0s;
  animation-duration: 11s;
}

.circles li:nth-child(1) {
  background-color: rgba(49, 255, 146, 0.18);
  /* Mint Green */
}

.circles li:nth-child(2) {
  background-color: rgba(255, 116, 72, 0.18);
  /* Soft Orange */
}

.circles li:nth-child(3) {
  background-color: rgba(120, 14, 255, 0.15);
  /* Soft Purple */
}

.circles li:nth-child(4) {
  background-color: rgba(9, 168, 218, 0.16);
  /* Sky Blue */
}

.circles li:nth-child(5) {
  background-color: rgba(255, 208, 40, 0.16);
  /* Pastel Yellow */
}

.circles li:nth-child(6) {
  background-color: rgba(0, 255, 136, 0.15);
  /* Aqua Green */
}

.circles li:nth-child(7) {
  background-color: rgba(255, 255, 255, 0.10);
  /* White */
}

.circles li:nth-child(8) {
  background-color: rgba(0, 8, 64, 0.13);
  /* Deep Blue */
}

.circles li:nth-child(9) {
  background-color: rgba(179, 255, 124, 0.16);
  /* Light Green */
}

.circles li:nth-child(10) {
  background-color: rgba(255, 116, 72, 0.13);
  /* Soft Orange */
}

@keyframes animate {
  0% {
    transform: translateY(0) rotate(0deg);
    opacity: 1;
    border-radius: 0;
  }

  100% {
    transform: translateY(-1000px) rotate(720deg);
    opacity: 0;
    border-radius: 50%;
  }
}


/* ===============================
   02. Typography
================================== */

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: "Poppins", sans-serif;
  font-weight: 600;
}

li {
  list-style: none;
}

img {
  max-width: 100% !important;
}

a {
  text-decoration: none;
  color: inherit;
}


/* ===============================
   03. Preloader
================================== */

.preloader {
  bottom: 0;
  left: 0;
  position: fixed;
  right: 0;
  top: 0;
  background: linear-gradient(270deg, #B3FF7C 0%, #31FF92 100%);
  z-index: 99999;
}

.spinner {
  width: 50px;
  height: 50px;
  position: absolute;
  top: 50%;
  left: 50%;
  margin: -25px 0 0 -25px;
  font-size: 10px;
  text-indent: -12345px;
  z-index: 10000;
}

.double-bounce1,
.double-bounce2 {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background-color: #fff;
  opacity: 0.6;
  position: absolute;
  top: 0;
  left: 0;
  animation: sk-bounce 2s infinite ease-in-out;
}

.double-bounce2 {
  animation-delay: -1s;
}

@keyframes sk-bounce {

  0%,
  100% {
    transform: scale(0);
    -webkit-transform: scale(0);
  }

  50% {
    transform: scale(1);
    -webkit-transform: scale(1);
  }
}


/* ===============================
   04. Buttons
================================== */
.main_btn {
  margin-top: 20px;
  background: linear-gradient(270deg, #B3FF7C 0%, #31FF92 100%);
  background-size: 200% 100%;
  background-position: right center;
  border: none;
  font-size: 16px;
  line-height: 19px;
  color: #000;
  font-weight: bold;
  padding: 12px 40px;
  display: inline-block;
  border-radius: 30px;
  transition: background-position 0.4s ease-in-out;
}

.ct_btn {
  width: 100%;
}

.main_btn:hover {
  background-position: left center;
}

.main_btn span {
  display: inline-block;
  position: relative;
  overflow: hidden;
}

.main_btn span .text-1,
.main_btn span .text-2 {
  display: block;
  transition: transform 0.3s ease;
}

.main_btn span .text-1 {
  transform: translateY(0);
}

.main_btn span .text-2 {
  position: absolute;
  top: 100%;
  left: 0;
  transform: translateY(0);
}

.main_btn:hover span .text-1 {
  transform: translateY(-150%);
}

.main_btn:hover span .text-2 {
  top: 50%;
  transform: translateY(-50%);
}

.secondary_btn {
  border: 1px solid #B3FF7C;
  color: #fff;
  background: transparent;
  transition: all 0.3s ease !important;
}

.secondary_btn:hover {
  background: linear-gradient(270deg, #B3FF7C 0%, #31FF92 100%);
  color: #000;
}

.light-mode .secondary_btn {
  color: #000;
}


/* ===============================
   05. Menu and Panels
================================== */

#menu-item {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  transition: left 0.5s ease-in-out;
}

/* Hide menu by sliding it out to the left */
#menu-item.hide {
  left: -100%;
}

/* Panel default position: off-screen to the right */
.slide-panel {
  position: absolute;
  top: 0;
  right: -100%;
  width: 100%;
  height: 100%;
  transition: right 0.5s ease-in-out;
  z-index: 2;
  overflow-y: auto;
}

.slide-panel.active {
  right: 0;
}

.menu_list_item {
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.menu_list_item span {
  display: inline-block;
  position: relative;
  overflow: hidden;
}

.menu_list_item span .text-1,
.menu_list_item span .text-2 {
  display: block;
  transition: transform 0.3s ease;
}

.menu_list_item span .text-1 {
  transform: translateY(0);
}

.menu_list_item span .text-2 {
  position: absolute;
  top: 100%;
  left: 0;
  transform: translateY(0);
}

.menu_list_item:hover span .text-1 {
  transform: translateY(-150%);
}

.menu_list_item:hover span .text-2 {
  top: 50%;
  transform: translateY(-50%);
}

.bg-1 {
  background: #FF7448;
}

.bg-2 {
  background: #0F0264;
}

.bg-3 {
  background: #FFD028;
}

.bg-4 {
  background: #09A8DA;
}

.bg-5 {
  background: #780EFF;
}

.bg-6 {
  background: #0F0933;
}

/* Responsive fix for menu buttons */
#menu-item>div {
  padding: 20px;
  min-height: 120px;
}

.back_btn {
  font-family: "Muli", sans-serif;
  font-size: 16px;
  font-weight: 600;
}

/* Headings */
.slide-panel h4,
.slide-panel h5 {
  font-weight: 700;
  letter-spacing: 1px;
}

/* Back link */
#closeAbout {
  font-size: 14px;
  transition: color 0.3s ease;
}

#closeAbout:hover {
  color: #28c76f;
}

/* Scrollbar (optional for cleaner scroll) */
.slide-panel::-webkit-scrollbar {
  width: 6px;
}

.slide-panel::-webkit-scrollbar-thumb {
  background: #444;
  border-radius: 10px;
}

.logo {
  margin-bottom: 50px !important;
  margin-left: 30px;
}


/* ===============================
   06. Hero Section
================================== */

.hero_image {
  position: relative;
}

.hero_image p {
  color: #00ff99;
  font-size: 18px;
}

.blob {
    width: 330px;
    height: 330px;
    background: linear-gradient(270deg, #B3FF7C 0%, #31FF92 100%);
    border-radius: 50%;
    animation: blob 8s infinite ease-in-out;
    filter: blur(20px);
    position: absolute;
    left: 25%;
    top: 42%;
}

@keyframes blob {
  0% {
    border-radius: 42% 58% 70% 30% / 30% 40% 60% 70%;
    transform: scale(1) rotate(0deg);
  }

  33% {
    border-radius: 58% 42% 40% 60% / 60% 30% 40% 70%;
    transform: scale(1.05) rotate(10deg);
  }

  66% {
    border-radius: 40% 60% 58% 42% / 50% 60% 40% 50%;
    transform: scale(0.95) rotate(-10deg);
  }

  100% {
    border-radius: 42% 58% 70% 30% / 30% 40% 60% 70%;
    transform: scale(1) rotate(0deg);
  }
}

.social_icon_area {
  position: relative;
}

.social_icon_area:after {
    position: absolute;
    content: "";
    top: -150%;
    left: 18px;
    width: 2px;
    height: 140%;
    background: #00ff99;
}

.social_icon {
  position: absolute;
  left: 25px;
  top: 50%;
}

.social_icon a {
  width: 45px;
  height: 45px;
  color: #fff;
  font-size: 14px;
  line-height: 45px;
  text-align: center;
  display: inline-block;
  margin-bottom: 0;
  transition: color 0.3s ease;
}

.light-mode .social_icon a {
  color: #111;
}

.social_icon a:hover {
  color: #00ff99;
}


/* ===============================
   07. About Section
================================== */

.slide-panel p {
  color: rgb(255 255 255 / 80%);
  font-size: 16px;
  line-height: 1.8;
}

.about_content {
  padding-top: 30px;
}

.slide-panel strong {
  color: rgb(255 255 255 / 80%);
  font-weight: 600;
}

.slide-panel .skills_icon img {
  transition: transform 0.2s ease;
  margin-right: 10px;
  max-height: 50px;
  margin-top: 10px;
}

.slide-panel .skills_icon img:hover {
  transform: scale(1.1);
}

.light-mode .slide-panel strong {
  color: #111;
}


/* ===============================
   08. Service Section
================================== */
.service_area {
  padding-top: 30px;
}

.single_service {
  background: linear-gradient(91deg, rgba(4, 16, 15, 0.75) 0.91%, rgba(0, 149, 71, 0.75) 192.09%);
  -webkit-backdrop-filter: blur(25px);
  backdrop-filter: blur(25px);
}

.service_bg1 {
  background: #000840;
}

.bg_border1,
.bg_border2,
.bg_border3,
.bg_border4 {
  position: relative;
  transition: all 0.3s ease-in-out;
}

.bg_border1::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 50%;
  height: 3px;
  opacity: 0;
  background: #FF7448;
  transition: all 0.3s ease-in-out;
}

.bg_border2::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 50%;
  height: 3px;
  opacity: 0;
  background: #0F0264;
  transition: all 0.3s ease-in-out;
}

.bg_border3::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 50%;
  height: 3px;
  opacity: 0;
  background: #FFD028;
  transition: all 0.3s ease-in-out;
}

.bg_border4::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 50%;
  height: 3px;
  opacity: 0;
  background: #09A8DA;
  transition: all 0.3s ease-in-out;
}

.bg_border1:hover::after,
.bg_border2:hover::after,
.bg_border3:hover::after,
.bg_border4:hover::after {
  width: 100%;
  opacity: 1;
}

.light-mode .single_service {
  background: #FFF;
  box-shadow: 0px 4px 20px 0px rgba(0, 0, 0, 0.1);
}

.service-number {
  border-top-right-radius: 20px;
  border-bottom-right-radius: 20px;
  width: 40px;
  height: 40px;
  font-size: 18px;
  position: absolute;
  left: 0;
}

.single_service span {
  color: #fff;
  margin-left: 20px;
  font-weight: 600;
  font-size: 18px;
}

.light-mode .single_service span {
  color: #111;
}


/* ===============================
   09. Career Section
================================== */

.timeline-wrapper {
  position: relative;
  overflow: hidden;
}

.timebg-1 {
  background: linear-gradient(91deg, rgba(4, 16, 15, 0.75) 0.91%, rgba(0, 149, 71, 0.75) 192.09%);
  -webkit-backdrop-filter: blur(15px);
  backdrop-filter: blur(15px);
  border-radius: 50px 10px;
}

.light-mode .timebg-1 {
  background: #FFF;
  box-shadow: 0px 4px 20px 0px rgba(0, 0, 0, 0.1);
}

.timebg-2 {
  background: linear-gradient(91deg, rgba(0, 149, 71, 0.75) 0.84%, rgba(4, 16, 15, 0.75) 99.16%);
  -webkit-backdrop-filter: blur(15px);
  backdrop-filter: blur(15px);
  border-radius: 50px 10px;
}

.light-mode .timebg-2 {
  background: #FFF;
  box-shadow: 0px 4px 20px 0px rgba(0, 0, 0, 0.1);
}

.career_bg1 {
  background: #000840;
}

/* Center vertical line */
.timeline-wrapper::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  height: 76%;
  width: 2px;
  background: #00ff99;
  transform: translateX(-50%);
}

/* Timeline item structure */
.timeline-item {
  width: 100%;
  position: relative;
  margin-bottom: 60px;
  padding: 0 15px;
}

.timeline-item .content {
  max-width: 300px;
  padding: 20px;
}

.timeline-item .content p {
  color: #30FF93;
  font-size: 16px;
}

.timeline-item::after {
  content: "";
  position: absolute;
  top: 0;
  width: 14px;
  height: 14px;
  background: #00ff99;
  border-radius: 50%;
  border: 2px solid #003f2f;
  z-index: 1;
}

.light-mode .timeline-item::after {
  background: #00ff99;
  border: 2px solid rgba(0, 63, 47, 0.26);
}

/* Left item */
.timeline-item.left .content {
  position: relative;
  padding-left: 40px;
  margin-right: auto;
}

.timeline-item.left::after {
  left: 50%;
  transform: translateX(-50%);
}

/* Right item */
.timeline-item.right .content {
  position: relative;
  padding-left: 40px;
  margin-left: auto;
}

.timeline-item.right::after {
  left: 50%;
  transform: translateX(-50%);
}


/* ===============================
   10. Portfolio Section
================================== */
.portfolio_img {
  padding-top: 30px;
}

.image-overlay-wrapper img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
  transition: transform 0.5s ease;
}

.image-overlay-wrapper {
  position: relative;
  overflow: hidden;
  display: inline-block;
  width: 100%;
  height: 100%;
  border-radius: 12px;
  cursor: pointer;
}

.image-overlay-content {
  position: absolute;
  inset: 0;
  background: linear-gradient(270deg, rgba(179, 255, 124, 0.7) 0%, rgba(49, 255, 146, 0.7) 100%);
  display: flex;
  justify-content: center;
  align-items: center;
  color: #fff;
  font-family: Poppins, sans-serif;
  font-size: 40px;
  font-weight: 600;
  opacity: 0;
  transform: translateY(20px);
  transition: all 0.5s ease;
  flex-direction: column;
  /* gap: 73px; */
}

.image-overlay-content a {
  position: fixed;
  color: #fff;
}

.image-overlay-wrapper:hover img {
  transform: scale(1.1);
}

.image-overlay-wrapper:hover .image-overlay-content {
  opacity: 0.8;
  transform: translateY(0);
}

.portfolio_text {
  position: absolute;
  bottom: 60px;
}

.portfolio_text h3 {
  color: #FFF;
  text-align: center;
  font-size: 20px;
  font-style: normal;
  font-weight: 600;
  line-height: normal;
}

.portfolio_text p {
  color: #FFF;
  text-align: center;
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 26px;
}


/* ===============================
   11. Client Section
================================== */
.client_content {
  padding-top: 20px;
}

.client_content .client_cta {
  font-size: 24px;
}


/* ===============================
   12. Contact Section
================================== */

.contact-section {
  text-align: center;
  padding-top: 30px;
}

.contact-section .contact-title {
  font-size: 24px;
  font-weight: bold;
  margin-bottom: 40px;
  letter-spacing: 2px;
}

.contact-section .contact-form .form-row {
  display: flex;
  gap: 20px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}

.contact-section .contact-form input,
.contact-section .contact-form textarea {
  flex: 1;
  padding: 12px 15px;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.5);
  color: #fff;
  border-radius: 5px;
  outline: none;
}

.contact-section .contact-form textarea {
  width: 100%;
  height: 120px;
  resize: none;
}

.contact-section .contact-form .send-btn {
  margin-top: 20px;
  background: linear-gradient(270deg, #B3FF7C 0%, #31FF92 100%);
  background-size: 200% 100%;
  background-position: right center;
  border: none;
  color: #000;
  width: 100%;
  font-weight: bold;
  padding: 12px 40px;
  border-radius: 25px;
  cursor: pointer;
  transition: background-position 0.4s ease-in-out;
}

.contact-section .contact-form .send-btn:hover {
  background-position: left center;
}

.contact-section .contact-info-bar {
  display: flex;
  /* justify-content: center; */
  gap: 30px;
  margin-top: 100px;
  flex-wrap: wrap;
}

.contact-section .info-box {
  display: flex;
  align-items: center;
  color: #c0c0c0;
}

.contact-section .info-box i {
  font-size: 20px;
  float: left;
  margin-right: 10px;
  color: #00ff88;
  border: 1px solid rgba(0, 255, 136, 0.4);
  padding: 10px;
  border-radius: 8px;
}

.contact-section .info-box .info-text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.contact-section .info-box .info-text .label {
  font-size: 12px;
  letter-spacing: 1px;
  color: #00ff88;
  font-weight: 600;
  margin-bottom: 2px;
}

.contact-section .info-box .info-text .value {
  font-size: 14px;
  color: #c0c0c0;
}


/* ===============================
   13. Footer
================================== */
footer {
  padding-top: 15px;
  border-top: 1px solid rgba(255, 255, 255, 0.2);
  margin-top: 60px;
}

.light-mode footer {
  border-top: 1px solid rgba(0, 0, 0, 0.1);
}

.light-mode .contact-form input,
.light-mode .contact-form textarea {
  background: #fff;
  border: 1px solid rgba(78, 78, 78, 0.2);
  color: #111;
}

.light-mode .contact-info-bar .label {
  color: #111 !important;
}


/* ===============================
   14. Responsive (Media Queries)
================================== */


@media (min-width: 768px) and (max-width: 1024px) {
  .blob {
    left: 15%;
    top: 30%;
    width: 200px;
    height: 200px;
  }

  .hero_image h3 {
    font-size: 20px;
  }

  .hero_image p {
    font-size: 15px;
  }

  .timeline-item .content {
    margin-left: auto !important;
    margin-right: auto !important;
    text-align: center;
  }

  .timeline-item.left::after,
  .timeline-item.right::after {
    left: 50%;
    transform: translateX(-50%);
  }
}

@media only screen and (max-width: 767px) {
  .blob {
    width: 300px;
    height: 300px;
    background: linear-gradient(270deg, #B3FF7C 0%, #31FF92 100%);
    border-radius: 50%;
    animation: blob 8s infinite ease-in-out;
    filter: blur(20px);
    position: absolute;
    left: 45%;
    top: 32%;
  }

  .social_icon {
    top: 30%;
  }

  #menu-item {
    position: relative !important;
    top: 0;
    left: 0;
    width: 100% !important;
    height: 100% !important;
    z-index: 1 !important;
    transition: left 0.5s ease-in-out;
  }
}

@media only screen and (max-width: 480px) {
  .blob {
    display: none;
  }
}

/*# sourceMappingURL=style.css.map */