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

/* -----------------------------
   Global Reset & Base
------------------------------ */
* {
  font-family: "Poppins", sans-serif;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  outline: none;
  border: none;
  text-decoration: none;
  text-transform: capitalize;
  transition: all 0.2s linear;
}

html {
  font-size: 62.5%;
  overflow-x: hidden;
  scroll-behavior: smooth;
}

/* Scrollbar */
html::-webkit-scrollbar {
  width: 0.6rem;
}
html::-webkit-scrollbar-track {
  background: #111;
}
html::-webkit-scrollbar-thumb {
  background: #1abc9c;
  border-radius: 5rem;
}

/* -----------------------------
   Theme Variables
------------------------------ */
:root {
  background: black;
  --theme-bg-color: rgba(16, 18, 27, 0.4);
  --border-color: rgba(113, 119, 144, 0.25);
  --theme-color: #f9fafb;
  --inactive-color: rgba(113, 119, 144, 0.78);
  --body-font: "Poppins", sans-serif;
  --hover-menu-bg: rgba(12, 15, 25, 0.3);
  --content-title-color: #999ba5;
  --content-bg: rgba(146, 151, 179, 0.13);
  --button-inactive: rgba(249, 250, 251, 0.55);
  --dropdown-bg: #21242d;
  --dropdown-hover: #2a2e3c;
  --popup-bg: #161925;
  --search-bg: #14162b;
  --overlay-bg: rgba(36, 39, 59, 0.3);
  --scrollbar-bg: rgba(1, 2, 3, 0.4);
}

/* Dark Mode */
body.dark-mode {
  background-color: #000;
}

/* Light Mode */
.light-mode {
  --theme-bg-color: rgba(255, 255, 255, 0.31);
  --theme-color: #3c3a3a;
  --inactive-color: #333;
  --button-inactive: #3c3a3a;
  --search-bg: rgba(255, 255, 255, 0.31);
  --dropdown-bg: #f7f7f7;
  --dropdown-hover: #ececec;
  --border-color: rgba(255, 255, 255, 0.35);
  --popup-bg: #fff;
  --hover-menu-bg: rgba(255, 255, 255, 0.35);
  --overlay-bg: rgba(255, 255, 255, 0.3);
  --scrollbar-bg: rgba(255, 253, 253, 0.57);
  --content-title-color: var(--theme-color);
}

/* -----------------------------
   Body & Layout
------------------------------ */
body {
  font-family: var(--body-font);
  background: url("https://wallpapershome.com/images/wallpapers/macos-big-sur-1280x720-dark-wwdc-2020-22655.jpg")
    center/cover no-repeat;
  display: block;
  width: 100%;
  padding: 1em;
  text-transform: lowercase;
  overflow: hidden;
}

/* -----------------------------
   Video Background
------------------------------ */
#videoBg {
  display: none; /* Hidden by default */
}


.light-mode .dark-light svg {
  fill: transparent;
  stroke: var(--theme-color);
}
.light-mode .profile-img {
  border: 2px solid var(--theme-bg-color);
}
.light-mode .content-section ul {
  background-color: var(--theme-bg-color);
}
.light-mode .pop-up__title {
  border-color: var(--theme-color);
}
.light-mode .dropdown.is-active ul {
  background-color: rgba(255, 255, 255, 0.94);
}

body.light-mode:before,
body.light-mode .video-bg:before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.72) 0%, rgba(255, 255, 255, 0.45) 100%);
  -webkit-backdrop-filter: saturate(3);
          backdrop-filter: saturate(3);
}

/* -----------------------------
   Responsive - Profile Section
------------------------------ */
@media (max-width: 768px) {
  .profile-header {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  .profile-info {
    flex-direction: column;
    align-items: center;
    margin-bottom: 15px;
  }

  .profile-actions {
    justify-content: center;
  }
}

/* -----------------------------
   Portfolio Container
------------------------------ */
.portfolio {
  background-color: var(--theme-bg-color);
  width: 100%;
  height: auto;
  display: flex;
  flex-direction: column;
  position: relative;
  border-radius: 14px;
  font-size: 15px;
  font-weight: 500;
  /*backdrop-filter: blur(20px);*/
  -webkit-backdrop-filter: blur(20px);
}

/* -----------------------------
   Video Background
------------------------------ */
.video-bg {
  position: fixed;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
  opacity: 0.3;  
  pointer-events: none;
}
.video-bg video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* -----------------------------
   Elements
------------------------------ */
img {
  max-width: 100%;
}

section {
  padding: 3rem 0;
}

.heading {
  text-align: center;
  margin-bottom: 2rem;
}
.heading span {
  color: #1abc9c;
  font-size: 4rem;
}
.heading h1 {
  font-size: 2rem;
  color: #fff;
  margin-top: -2px;
}

#text {
  width: 70%;
  margin-top: -70px;
  padding: 10px 0 10px 50px;
}

/* -----------------------------
   Buttons
------------------------------ */
.btn {
  display: inline-block;
  margin: 1rem 0 0 10px;
  padding: 0.7rem 1.6rem;
  font-size: 14px;
  font-weight: 300;
  color: #fff;
  background: none;
  border: 0.2rem solid #1abc9c;
  border-radius: 5rem;
  cursor: pointer;
  transition: all 0.3s ease;
}
.btn:hover {
  background: #1abc9c;
  color: #fff;
  transform: scale(1.1);
  border: 2px solid #1abc9c;
}

#login-btn {
  padding: 0.2rem 0.8rem;
  font-size: 14px;
  font-weight: 300;
  color: #fff;
  background: none;
  border: 0.2rem solid #1abc9c;
  border-radius: 5rem;
  cursor: pointer;
  transition: all 0.3s ease;
}

#login-btn:hover {
  background-color: #1abc9c;
  color: #fff;
  transform: scale(1.1);
  border: 2px solid #1abc9c;
}


/* -----------------------------
   Header
------------------------------ */
.header {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.5rem 1rem;
}

.header .navbar a {
  margin: 0 1rem;
  font-size: 1.7rem;
  font-weight: normal;
  line-height: 2;
  color: #aaa;
}
.header .navbar a:hover {
  color: #1abc9c;
  cursor: pointer;
}

.header .btn {
  margin-top: 0;
}

/* Logo */
.logo {
  font-size: 2rem;
  font-weight: normal;
  letter-spacing: 3px;
  line-height: 2;
  color: #1abc9c;
}
.logo i {
  padding-right: 0.5rem;
  color: #1abc9c;
}

/* Navbar Icons */
.navbar i {
  font-size: 22px;
  color: #1abc9c;
  transition: color 0.3s;
}
.navbar i:hover {
  color: #fff;
}

/* Menu Button */
#menu-btn {
  font-size: 2.5rem;
  color: #fff;
  cursor: pointer;
  display: none;
}

/* Hidden Actions */
.action__btn {
  display: none;
}

/* -----------------------------
   Typewriter Effect
------------------------------ */
.typewrite {
  font-size: 30px;
  font-weight: bold;
  font-style: oblique;
  color: transparent;
  -webkit-text-stroke: 0.1rem white;
  text-decoration: none;
  text-transform: none;
}
.typewrite:hover {
  color: white;
}

/* Headings */
h1 {
  margin: 50px 0 30px;
}


/* ===============================
   HOME SECTION
=================================*/
.home {
  margin: 0 auto;
  width: 100%;
  min-height: 80vh;
  border-radius: 1rem;
  background-size: cover;
  background-position: center;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-bottom: 5rem;
}

.home .column span {
  display: block;
  margin-top: 50px;
  font-size: 2.5vw;
  font-weight: 400;
  letter-spacing: 3px;
  color: transparent;
  -webkit-text-stroke: 0.1rem #fff;
}

.home .column h3 {
  margin: 20px 0 -20px;
  font-size: 2.5vw;
  font-weight: 300;
  letter-spacing: 3px;
  color: #fff;
  text-align: left;
}

.home .column p {
  max-width: 60rem;
  margin: 1rem auto;
  font-size: 1.4rem;
  color: #aaa;
  line-height: 2;
}

.dashboard__content span {
  display: block;
  margin-top: -50px;
  font-size: 2.3vw;
  font-weight: 600;
  letter-spacing: 6px;
  text-align: left;
  color: transparent;
  -webkit-text-stroke: 0.1rem #fff;
}


/* ===============================
   DASHBOARD / BOOK FORM
=================================*/
.book-form {
  width: 95%;
  border-radius: 1rem;
  box-shadow: 0 0.5rem 1rem rgba(17, 17, 17, 0.3);
}

.dashboard {
  display: flex;
  gap: 20px;
}

.dashboard__card {
  width: 120px;
  padding: 8px 20px;
  text-align: center;
  background: transparent;
  border: 1.5px solid #1abc9c;
  border-radius: 10px;
  box-shadow: 0 4px 6px rgba(0,0,0,0.1);
  transition: all 0.3s ease;
}

.dashboard__card .number {
  padding: 10px 0;
  margin: -15px 0 -30px 5px;
  font-size: 1.5rem;
  font-weight: bold;
  color: #fff;
}

.dashboard__card .label {
  margin: 20px 0 -10px;
  font-size: 1rem;
  padding-bottom: 5px;
  color: #fff;
}

.dashboard__card:hover {
  background: #1abc9c;
  box-shadow: 0 8px 16px rgba(255,255,255,0.2);
}



/* General Section Layout */
.about {
  padding: 60px 2%;
  text-align: center;
}

/* Header */
.section-header {
  margin-bottom: 40px;
}

/* Intro paragraph */
.about-intro {
  margin: 0 auto 50px;
  text-align: justify;
  line-height: 1.7;
  color: #ddd;
}

/* Row Layout */
.about-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-start;
  gap: 20px;
  margin-top: 30px;
}

/* Image Styling */
.about-image {
  flex: 1 1 50%;
  display: flex;
  justify-content: center;
}
.about-image img {
  width: 100%;
  height: 450px;
  object-fit: cover;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.4);
}

/* Content Styling */
.about-content {
  flex: 1 1 45%;
  text-align: left;
}
.highlight-title {
  color: #1abc9c;
  margin-bottom: 1rem;
  font-size: 2rem;
}
.about-list {
  list-style: decimal;
  margin-left: 1.5rem;
  line-height: 1.8;
  color: #ccc;
  margin-bottom: 2rem;
}
.about-list li strong {
  color: #1abc9c;
  line-height: 3
}


/* Responsive */
@media (max-width: 900px) {
  .about-row {
    flex-direction: column;
    align-items: center;
  }

  .highlight-title {
    margin-left: 10px
  }

  .about-list {
    list-style: none;
    padding: 0;
  }
}

/* ===============================
   ABOUT CARDS
=================================*/
.card {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f2f2f2;
  border-radius: 10px;
  box-shadow: 0 6px 14px #1abc9c;
  overflow: hidden;
  perspective: 1000px;
  transition: all 0.6s cubic-bezier(0.175,0.885,0.32,1.275);
}

#serv4 { height: 300px; }
#all-position { margin-top: 70px; }

.card:hover {
  transform: scale(1.05);
  box-shadow: 0 8px 16px rgba(255,255,255,0.2);
}

.card img { transition: transform 0.6s; }
.card:hover img { transform: scale(0); }

.card__content {
  position: absolute;
  inset: 0;
  padding: 20px;
  background: #f2f2f2;
  transform: rotateX(-90deg);
  transform-origin: bottom;
  transition: all 0.6s cubic-bezier(0.175,0.885,0.32,1.275);
}

.card:hover .card__content { transform: rotateX(0deg); }

.card__title {
  margin: 0;
  font-size: 15px;
  font-weight: 700;
  color: #333;
}

.card__description {
  margin: 10px 0;
  font-size: 12px;
  line-height: 1.4;
  color: #777;
}

.card__button {
  margin: 1rem 0 0 10px;
  padding: 0.7rem 0.5rem;
  font-size: 14px;
  font-weight: 300;
  color: #1abc9c;
  border: 0.2rem solid #1abc9c;
  border-radius: 5rem;
  background: none;
  cursor: pointer;
  transition: all 0.3s ease;
}

.card__button:hover {
  background: #1abc9c;
  color: #fff;
}


/* ===============================
   PROFILE HEADER
=================================*/
.profile-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
}

.profile-info {
  display: flex;
  align-items: center;
}

.profile-image {
  width: 70px;
  height: 70px;
  margin-right: 15px;
  object-fit: cover;
  border-radius: 50%;
}

.profile-text { text-align: left; }
.profile-name { font-size: 1.5em; font-weight: bold; margin-bottom: 5px; }
.profile-title { font-size: 0.9em; color: #888; }

.profile-actions {
  display: flex;
  gap: 10px;
}

.profile-actions button {
  font-size: 0.9em;
  padding: 10px 15px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  transition: all 0.3s;
}

.hire-me-btn {
  background: #f4f4f4;
  border: 1px solid #ddd;
  color: #333;
}

.hire-me-btn:hover { background: #ddd; }
.download-cv-btn { background: #007bff; color: #fff; }
.download-cv-btn:hover { background: #0056b3; }


/* ===============================
   PRODUCT CARDS
=================================*/
.product-container {
  display: flex;
  gap: 20px;
  padding: 20px;
  width: 100%;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
}

.product-container::-webkit-scrollbar { height: 5px; }
.product-container::-webkit-scrollbar-thumb {
  background: #1abc9c;
  border-radius: 5px;
}
.product-container::-webkit-scrollbar-track { background: #f0f0f0; }

.product-card {
  flex: 0 0 auto;
  width: 300px;
  text-align: center;
  border: 3px solid #1abc9c;
  border-radius: 60% 74% 26% 40% / 63% 37% 47% 53%;
  background: transparent;
  box-shadow: 0 4px 8px rgba(0,0,0,0.5);
  scroll-snap-align: center;
  cursor: pointer;
  transition: transform 1.1s;
}

.product-card:hover { transform: scale(1.09); }

.product-title {
  margin: 20px 0 -15px;
  font-size: 18px;
  color: #1abc9c;
}

.product-price {
  margin: 0 0 15px;
  padding: 15px;
  font-size: 17px;
  font-weight: 300;
  line-height: 1.5;
  color: #fff;
  text-align: left;
  text-transform: lowercase;
}


/* ===============================
   LOGO & ABOUT SECTIONS
=================================*/
.logo-container { text-align: center; }
.logo-container p {
  padding: 1.5% 20%;
  font-size: 16px;
  font-weight: 300;
  line-height: 1.5;
  text-transform: lowercase;
  color: #fff;
  text-align: center;
}

.line {
  width: 70px;
  height: 3px;
  margin: 0 10px;
  background: #fff;
  display: inline-block;
  vertical-align: middle;
}

.text {
  font-size: 24px;
  font-weight: bold;
  letter-spacing: 3px;
  line-height: 2;
  color: #00bfa6;
  display: inline-block;
  vertical-align: middle;
}

#about1,
#about p {
  margin-top: 15px;
  line-height: 1.5;
  text-align: justify;
  color: #fff;
  font-size: 14px;
}

#about p {
  font-size: 15px;
  font-weight: 400;
  text-transform: lowercase;
}

#about2 { margin-top: 40px; font-size: 14px; }

.about__container {
  max-width: 1100px;
  margin: 80px auto;
  padding: 30px;
  border-radius: 15px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.1);
  animation: fadeIn 1.5s ease;
}

.about__header {
  padding: 25px 10px 20px;
  text-align: center;
  border-radius: 25px;
  border: 2px solid #1abc9c;
  background: linear-gradient(rgba(17,17,17,0.7), rgba(17,17,17,0.7)),
              url(https://res.cloudinary.com/daiyjykmj/image/upload/q_auto,f_png/v1757012357/portfolio_images/1.jpg) no-repeat;
  transform: scale(1.05);
  box-shadow: 0 8px 16px rgba(255,255,255,0.2);
}

.about__header img {
  width: 140px;
  height: 140px;
  border: 4px solid #1abc9c;
  border-radius: 50%;
  animation: bounce 2s infinite ease-in-out;
}

.about__header h1 {
  margin: 10px 0;
  font-size: 28px;
  font-weight: 400;
  background: linear-gradient(to right, #1abc9c, #1abc9c);
  -webkit-background-clip: text;
  color: transparent;
}

.about__header p { font-size: 18px; font-weight: 400; color: #fff; }

.about-me,
.job,
.degree {
  margin-top: 30px;
  padding: 15px;
  border: 2px solid #1abc9c;
  border-radius: 10px;
  transform: scale(1.05);
  box-shadow: 0 8px 16px rgba(255,255,255,0.2);
  transition: all 0.3s ease;
}

.about-me:hover,
.job:hover,
.degree:hover {
  transform: translateY(-5px);
  box-shadow: 0 6px 15px rgba(0,0,0,0.2);
}

.about-me h2,
.experience h2,
.education h2 {
  font-size: 22px;
  font-weight: 400;
  margin-bottom: 10px;
  color: #1abc9c;
}

.about-me p,
.job p,
.degree p {
  font-size: 14px;
  font-weight: lighter;
  line-height: 1.6;
  color: #fff;
  text-align: justify;
}

.job h3,
.degree h3 {
  font-size: 18px;
  font-weight: 400;
  margin: 0;
  color: #1abc9c;
}


/* ===============================
   SKILLS SECTION
=================================*/
.skills-header {
  text-align: center;
  padding-bottom: 20px;
  border-bottom: 2px solid #1abc9c;
}

.skills-header img {
  width: 140px;
  height: 140px;
  border: 4px solid #1abc9c;
  border-radius: 50%;
  animation: bounce 2s infinite ease-in-out;
}

.skills-header h1 {
  margin: 10px 0;
  font-size: 28px;
  font-weight: 400;
  background: linear-gradient(to right, #1abc9c, #1abc9c);
  -webkit-background-clip: text;
  color: transparent;
}

.skills-header p { font-size: 18px; color: #fff; }

#tools, #skills, h2 {
  font-size: 22px;
  font-weight: 400;
  margin-bottom: 20px;
  color: #fff;
}

.skills-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px,1fr));
  gap: 30px;
  margin: 0 -20px;
}

.skills-card {
  padding: 5px;
  text-align: center;
  border: 2px solid #1abc9c;
  border-radius: 10px;
  transform: scale(1.05);
  box-shadow: 0 8px 16px rgba(255,255,255,0.2);
  transition: all 0.3s ease;
}

.skills-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 6px 15px rgba(0,0,0,0.2);
}

.skills-card h3 {
  margin: 10px 0;
  font-size: 18px;
  font-weight: 400;
  color: #1abc9c;
}

.skills-card p { font-size: 14px; color: #666; }


/* ===============================
   ANIMATIONS
=================================*/
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(50px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes bounce {
  0%,100% { transform: translateY(0); }
  50%     { transform: translateY(-10px); }
}



 /*services*/

 .services-row {
   display: flex;
   flex-wrap: wrap;
   gap: 20px;
   margin-top: 10px;
   margin-bottom: 20px
 }

 .service-card {
   background: #222;
   border-radius: 20px;
   overflow: hidden;
   text-align:  justify;
   text-align: center;
   cursor: pointer;
   box-shadow: 0 4px 15px rgba(0,0,0,0.1);
 }

 .service-card:hover{
   transform: scale(1.05);
 }

 .service-card img {
   width: 100%;
   height: 200px;
   object-fit: cover;
   border-radius: 20px;
 }

 .service-card h3 {
   margin: 2px;
   font-size: 14px;
   font-weight: normal;
   color: white;
   text-align: left;
 }

 .service-card p {
   margin: 5px;
   color: #00bfa6;
   font-size: 13px;
   text-align: center;
   text-align: justify;
   text-justify: inter-word;
   text-transform: lowercase;
   font-weight: 300;
 }

 .service-btn{
   color:white
 }

 /* Columns per row */
 .row-3 .service-card { flex: 1 1 calc(33.33% - 20px); }
 .row-2 .service-card { flex: 1 1 calc(50% - 20px); }
 .row-4 .service-card { flex: 1 1 calc(25% - 20px); }

 /* Responsive */
 /* Tablet / landscape (max-width: 1024px) */
 @media screen and (max-width: 1024px) {
   .row-3 .service-card { flex: 1 1 calc(50% - 20px); }  /* first row 2 columns */
   .row-2 .service-card { flex: 1 1 calc(50% - 20px); }  /* second row 1 column */
   .row-4 .service-card { flex: 1 1 calc(50% - 20px); } /* third row 2 columns */
 }

 /* Mobile (max-width: 480px) */
 @media screen and (max-width: 480px) {
   .row-3 .service-card { flex: 1 1 100%; } /* all rows 1 column */
   .row-2 .service-card { flex: 1 1 100%; } /* all rows 1 column */
   .row-4 .service-card { flex: 1 1 100%; } /* all rows 1 column */
 }

  /*services*/


  /*projects*/*/
  #projects {
    padding: 50px 20px;
    text-align: center;
  }
  .projects-row {
    display: grid;
    gap: 20px;
    margin-top: 10px;
    margin-bottom: 20px;
  }
  .projects-row.two-cols { grid-template-columns: repeat(2, 1fr); }
  .projects-row.three-cols { grid-template-columns: repeat(3, 1fr); }
  .projects-row.four-cols { grid-template-columns: repeat(4, 1fr); }

  .project-card {
    position: relative;
    overflow: hidden;
    border-radius: 10px;
    box-shadow: 0 6px 12px rgba(0,0,0,0.1);
    background: #fff;
    transition: transform 0.3s ease;
  }
  .project-card img {
    width: 100%;
    object-fit: fill;
    height: 100%;
    display: block;
    transition: opacity 0.3s;
  }
  .card-content {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.92);
    color: #fff;
    padding: 20px;
    opacity: 0;
    transform: translateY(100%);
    transition: all 0.4s ease;
    text-align: left;
    overflow-y: auto;
  }
  .project-card:hover img { opacity: 0.2; }
  .project-card:hover .card-content {
    opacity: 1;
    transform: translateY(0);
  }
  .card-content h3 { margin: 0 0 10px; font-size: 1.5rem; }
  .card-content p { font-size: 1.2rem; line-height: 2; margin-bottom: 15px; }

  /* Responsive */
  @media (max-width: 1024px) {
    .projects-row.two-cols { grid-template-columns: 1fr; }
    .projects-row.three-cols { grid-template-columns: repeat(2, 1fr); }
    .projects-row.four-cols { grid-template-columns: repeat(2, 1fr); }
  }
  @media (max-width: 600px) {
    .projects-row.three-cols,
    .projects-row.four-cols { grid-template-columns: 1fr; }
  }

  /*projects



 /*blog starts

 /* Blog Grid */
 .blog-grid {
 display: grid;
 grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
 gap: 1.5rem;
 margin-top: 2rem;
 margin-bottom: 5rem
 }

 /* Blog Card */
 .blog-card {
 background: #222;
 border-radius: 12px;
 overflow: hidden;
 box-shadow: 0 4px 12px rgba(0,0,0,0.4);
 transition: transform 0.3s ease, box-shadow 0.3s ease;
 }
 .blog-card:hover {
 transform: translateY(-5px);
 box-shadow: 0 8px 16px rgba(0,0,0,0.6);
 }

 .blog-image img {
 width: 100%;
 height: 180px;
 display: block;
 object-fit: cover;
 }

 /* Content */
 .blog-content {
 padding: 1rem;
 }
 .blog-title {
 font-size: 1.5rem;
 color: #1abc9c;
 margin-bottom: 0.5rem;
 }
 .blog-excerpt {
 color: #ccc;
 font-size: 1.2rem;
 line-height: 1.5;
 }
 .read-more {
 color: #1abc9c;
 font-weight: bold;
 text-decoration: none;
 margin-left: 5px;
 }
 .read-more:hover {
 text-decoration: underline;
 }

 /* Special More Card */
 .more-card {
 text-align: center;
 background: transparent;
 box-shadow: none;
 }
 .more-card img {
 height: 350px;
 display: block;
 object-fit: cover;
 border-radius: 12px;
 transition: transform 0.3s ease;
 }
 .more-card img:hover {
 transform: scale(1.05);
 }

 /* No blogs text */
 .no-blogs {
 text-align: center;
 font-size: 1.1rem;
 color: #ccc;
 margin: 2rem 0;
 }

 /*blog end*/


 /*reviews start*/

 /* Section layout */
 .testimonial-section {
   padding: 20px 0;

 }

 /* Responsive grid */
 .testimonial-grid {
   display: grid;
   grid-template-columns: repeat(4, 1fr);
   gap: 25px;
   justify-content: center;
 }

 /* Card styling */
 .testimonial-card {
   background-color: #0b0b0b;
   border: 1px solid rgba(26, 188, 156, 0.3);
   border-radius: 15px;
   padding: 25px;
   color: #ccc;
   font-family: "Poppins", sans-serif;
   box-shadow: 0 0 25px rgba(26, 188, 156, 0.1);
   transition: transform 0.3s ease, box-shadow 0.3s ease;
 }

 .testimonial-card:hover {
   transform: translateY(-5px);
   box-shadow: 0 0 30px rgba(26, 188, 156, 0.2);
 }

 /* Header layout */
 .testimonial-header {
   display: flex;
   align-items: center;
   gap: 15px;
   margin-bottom: 15px;
 }

 /* Image */
 .testimonial-img {
   width: 60px;
   height: 60px;
   border-radius: 50%;
   object-fit: cover;
   border: 2px solid #1abc9c;
 }

 /* Text info */
 .testimonial-info h4 {
   color: #1abc9c;
   font-size: 1.1rem;
   margin: 0;
 }

 .testimonial-role {
   color: #bbb;
   font-size: 0.9rem;
   margin: 0;
 }

 /* Review text */
 .testimonial-text {
   font-size: 0.95rem;
   line-height: 1.7;
   text-align: justify;
   color: #9be6ce;
   text-transform: none;
 }


 /* ✅ Responsive breakpoints */

 /* 2 columns for tablets */
 @media (max-width: 1024px) {
   .testimonial-grid {
     grid-template-columns: repeat(2, 1fr);
   }
 }

 /* 1 column for phones */
 @media (max-width: 600px) {
   .testimonial-grid {
     grid-template-columns: 1fr;
   }

   .testimonial-card {
     padding: 20px;
   }

   .testimonial-text {
     font-size: 0.9rem;
   }
 }
 /*reviews end*/


  /* banner start */

  .banner {
    background: -webkit-gradient(linear, left top, left bottom, from(rgba(17, 17, 17, 0.7)), to(rgba(17, 17, 17, 0.7))), url(https://res.cloudinary.com/daiyjykmj/image/upload/q_auto,f_png/v1757012357/portfolio_images/banner-bg.jpg) no-repeat;
    background: linear-gradient(rgba(17, 17, 17, 0.7), rgba(17, 17, 17, 0.7)), url(https://res.cloudinary.com/daiyjykmj/image/upload/q_auto,f_png/v1757012357/portfolio_images/app.jpg) no-repeat;
    background-size: cover;
    background-position: center;
    padding: 3rem 2rem;
    border-radius: 20px;
    background-attachment: fixed;
    text-align: center;
  }

  .banner .content span {
    font-size: 2rem;
    color: #1abc9c;
  }

  .banner .content h3 {
    font-size: 4rem;
    color: #fff;
    margin-top: 1rem;
    text-align: center;
  }

  .banner .content p {
    max-width: 60rem;
    margin: 1rem auto;
    font-size: 1.4rem;
    color: #aaa;
    line-height: 2;
  }

  /* banner ends */


  /* app start */

  .app {
    background: -webkit-gradient(linear, left top, left bottom, from(rgba(17, 17, 17, 0.7)), to(rgba(17, 17, 17, 0.7))), url(https://res.cloudinary.com/daiyjykmj/image/upload/q_auto,f_png/v1757012357/portfolio_images/banner-bg.jpg) no-repeat;
    background: linear-gradient(rgba(17, 17, 17, 0.7), rgba(17, 17, 17, 0.7)), url(https://res.cloudinary.com/daiyjykmj/image/upload/q_auto,f_png/v1757012357/portfolio_images/app.jpg) no-repeat;
    background-size: cover;
    background-position: center;
    padding: 3rem 2rem;
    background-attachment: fixed;
    text-align: center;
    border-radius: 20px;
    margin-bottom: 5rem;
  }

  .badges {
    display: flex;
    flex-wrap: wrap;
    margin-top: 20px;
    gap: 20px; /* 👈 creates 20px space between links */
    justify-content: center; /* optional – centers badges */
    align-items: center;
  }

  .badges a {
    display: inline-block;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
  }

  .badges a:hover {
    transform: scale(1.1);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
  }


  .app .content span {
    font-size: 4rem;
    color: #1abc9c;
  }

  .app .content h3 {
    font-size: 2.5rem;
    color: #fff;
    margin-top: 1rem;
  }

  .app .content p {
    max-width: 60rem;
    margin: 1rem auto;
    font-size: 1.4rem;
    color: #aaa;
    line-height: 2;
  }

  /* app ends */



/*blog and testimonial*/

.column5 {
 float: left;
 width: 50%;
 margin-top: 6px;
 padding: 10px;
}

.column6 {
 float: left;
 width: 25%;
 margin-top: 6px;
 padding: 10px;
}

 .contact{
   font-size: 4rem;
   color: #000;
 }

 /* Style inputs */
  input[id=uploadsheet]{
   width: 90%;
   height: 40%;
   padding: 20%;
   border: 2px dashed #ccc;
   border-radius: 25px;
   border-color: #1abc9c;
   color: #1abc9c;
   margin-top: 10px
  }


 #all__form{
   margin-top: -80px
 }

 #all__form__owner{
   margin-top: -80px
 }

 #contact-two{
   margin-top: 50px
 }

 #contact-one{
   margin-top: 80px;
   margin-bottom: -50px
 }


 .column {
  float: left;
  width: 50%;
  margin-top: 50px;
  padding: 10px;
 }


 .contact{
   margin-top: 25px;
   font-size: 4rem;
   color: #1abc9c;
   text-align:center
 }

 .review{
   margin-top: -20px;
   margin-bottom: -20px;
   font-size: 4rem;
   color: #1abc9c;
   text-align:center
 }

 .review-inner{
   margin-top: 30px;
   margin-bottom: 5px;
 }


 .create{
    margin-bottom: -35px;
    font-size: 4rem;
    color: #1abc9c;
    text-align:center
  }


 #review-img{
   border-radius: 50%;
   position: absolute;

 }

 .review-text{
   position: relative;
   padding-left: 10%;
   text-align: center;
   margin-bottom: 15%
 }

  #review-title{
   padding-top: 5%;
   padding-bottom: 3%;
   color: #1abc9c;
 }


 /* Style inputs */
 input[class=contact2], select, textarea {
  width: 90%;
  padding: 10px;
  border: 2px solid #ccc;
  border-radius: 25px;
  border-color: #1abc9c;
  background-color: transparent;
  margin-top: 6px;
  margin-bottom: 10px;
  resize: vertical;
  color: #1abc9c;
 }



 #text2{
   width: 100%;
   padding: 10px;
   margin-top: 15px;
   border-radius: 25px;
 }


 /*input {
  background-color: #1abc9c;
  border-radius:  15px;
  color: white;
  padding: 12px 20px;
  border: none;
  cursor: pointer;
 }

 input:hover {
  background-color: #1abc9c;
 }*/

 /* Style the container/contact section */
 .container {
  border-radius: 5px;
  background-color: transparent;
 }


 /*testimonial and blogpost end*/




  /* contact start*/

  .contact__container {
  position: relative;
  width: 100%;
  min-height: 100vh;
  padding: 2rem;
  border-radius: 22px;
  background-color: #fafafa;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  }

  .form {
  width: 100%;
  max-width: 1000px;
  background-color: #fff;
  border-radius: 10px;
  box-shadow: 0 0 20px 1px rgba(0, 0, 0, 0.1);
  z-index: 1000;
  overflow: hidden;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  }

  .contact-form {
  background-color: #1abc9c;
  position: relative;
  }

  .circle {
  border-radius: 50%;
  background: linear-gradient(135deg, transparent 20%, #149279);
  position: absolute;
  }

  .circle.one {
  width: 130px;
  height: 130px;
  top: 130px;
  right: -40px;
  }

  .circle.two {
  width: 80px;
  height: 80px;
  top: 10px;
  right: 30px;
  }

  .contact-form:before {
  content: "";
  position: absolute;
  width: 26px;
  height: 26px;
  background-color: #1abc9c;
  transform: rotate(45deg);
  top: 50px;
  left: -13px;
  }

  form {
  padding: 2.3rem 2.2rem;
  z-index: 10;
  overflow: hidden;
  position: relative;
  }

  .contact__title {
  color: #fff;
  font-weight: 400;
  font-size: 2.3rem;
  line-height: 1;
  margin-bottom: 0.7rem;
  }

  .input-contact__container {
  position: relative;
  margin: 1rem 0;
  }

  .input {
  width: 100%;
  outline: none;
  border: 2px solid #fafafa;
  background: none;
  padding: 1.2rem 1.2rem;
  color: #fff;
  font-weight: 500;
  margin: 3px 0px;
  font-size: 1.3rem;
  letter-spacing: 0.5px;
  border-radius: 25px;
  transition: 0.3s;
  }

  textarea.input {
  padding: 1.2rem 1.2rem;
  min-height: 180px;
  border-radius: 22px;
  resize: none;
  overflow-y: auto;
  }

  .input-contact__container label {
  position: absolute;
  top: 50%;
  left: 15px;
  transform: translateY(-50%);
  padding: 0 0.4rem;
  color: #fafafa;
  font-size: 1.5rem;
  font-weight: 400;
  pointer-events: none;
  z-index: 1000;
  transition: 0.5s;
  }

  .input-contact__container.textarea label {
  top: 1rem;
  transform: translateY(0);
  }

  .contact__btn {
  padding: 0.9rem 2.3rem;
  background-color: #fff;
  border: 2px solid #fafafa;
  font-size: 1.4rem;
  color: #1abc9c;
  line-height: 1;
  border-radius: 25px;
  outline: none;
  cursor: pointer;
  transition: 0.3s;
  margin: 0;
  }

  .contact__btn:hover {
  background-color: transparent;
  color: #fff;
  }

  .input-contact__container span {
  position: absolute;
  top: 0;
  left: 25px;
  transform: translateY(-50%);
  font-size: 0.8rem;
  padding: 0 0.4rem;
  color: transparent;
  pointer-events: none;
  z-index: 500;
  }

  .input-contact__container span:before,
  .input-contact__container span:after {
  content: "";
  position: absolute;
  width: 10%;
  opacity: 0;
  transition: 0.3s;
  height: 5px;
  background-color: #1abc9c;
  top: 50%;
  transform: translateY(-50%);
  }

  .input-contact__container span:before {
  left: 50%;
  }

  .input-contact__container span:after {
  right: 50%;
  }

  .input-contact__container.focus label {
  top: 3px;
  background: #1abc9c;
  transform: translateY(-50%);
  left: 25px;
  font-size: 1.3rem;
  }

  .input-contact__container.focus span:before,
  .input-contact__container.focus span:after {
  width: 50%;
  opacity: 1;
  }

  .contact-info {
  padding: 2.3rem 2.2rem;
  position: relative;
  }

  .contact-info .contact__title {
  color: #1abc9c;
  }

  .contact__text {
  color: #333;
  margin: 1.5rem 0 2rem 0;
  font-weight: normal;
  width: 90%;
  text-align: justify;
  }

  .information {
  display: flex;
  color: #555;
  margin: 1.5rem 0;
  font-weight: normal;
  align-items: center;
  font-size: 1.4rem;
  }

  .information a {
  color: #555;
  }


  .icon {
  width: 28px;
  margin-right: 0.7rem;
  }

  .social-media {
  padding: 3rem 0 0 0;
  }

  .social-media p {
  color: #333;
  }

  .social-icons {
  display: flex;
  margin-top: 0.5rem;
  }

  .social-icons a {
  width: 35px;
  height: 35px;
  border-radius: 5px;
  background: linear-gradient(45deg, #1abc9c, #149279);
  color: #fff;
  text-align: center;
  line-height: 35px;
  margin-right: 0.5rem;
  transition: 0.3s;
  }

  .social-icons a:hover {
  transform: scale(1.05);
  }

  .contact-info:before {
  content: "";
  position: absolute;
  width: 110px;
  height: 100px;
  border: 22px solid #1abc9c;
  border-radius: 50%;
  bottom: -77px;
  right: 50px;
  opacity: 0.3;
  }

  .big-circle {
  position: absolute;
  width: 500px;
  height: 500px;
  border-radius: 50%;
  background: linear-gradient(to bottom, #1cd4af, #159b80);
  bottom: 50%;
  right: 50%;
  transform: translate(-40%, 38%);
  }

  .big-circle:after {
  content: "";
  position: absolute;
  width: 360px;
  height: 360px;
  background-color: #fafafa;
  border-radius: 50%;
  top: calc(50% - 180px);
  left: calc(50% - 180px);
  }

  .square {
  position: absolute;
  height: 400px;
  top: 50%;
  left: 53%;
  transform: translate(181%, 11%);
  opacity: 0.2;
  }


  /* Scroll to Top Button */
  #toTopBtn {
    position: fixed;
    bottom: 30px;
    right: 30px;
    background-color: #1abc9c;
    color: white;
    border: none;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    cursor: pointer;
    font-size: 1.5rem;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
    display: none;
    z-index: 1000;
    transition: background 0.3s, transform 0.3s;
  }

  #toTopBtn:hover {
    background-color: #1abc9c;
    transform: scale(1.1);
  }

  /*ToTop*/


   /* footer start */

   .footer{
     background: #222;
     border-radius: 20px;
     margin-top: 30px;
     margin-bottom: 10px
   }

   .footer .box-container {
     display: -ms-grid;
     display: grid;
     -ms-grid-columns: (minmax(25rem, 1fr))[auto-fit];
         grid-template-columns: repeat(auto-fit, minmax(25rem, 1fr));
     gap: 1.5rem;
   }

   .footer .box-container .box {
     text-align: center;
     padding: 1rem 0;
     font-weight: normal;
   }

   .footer .box-container .box .logo {
     padding-bottom: 1rem;
     color: #1abc9c;
     font-weight: normal;
   }

  .footer a{
     font-weight: normal;
     font-size: 4rem
   }

   .footer .box-container .box h3 {
     font-size: 2.2rem;
     color: #1abc9c;
     padding: 1rem 0;
     font-weight: normal;
   }

   .footer .box-container .box p {
     font-size: 1.4rem;
     color: #aaa;
     padding: 1rem 0;
     line-height: 2;
     font-weight: normal;
   }

   .footer .box-container .box p i {
     padding-right: .5rem;
     color: #1abc9c;
     font-weight: normal;
   }

   .footer .box-container .box .share {
     padding-top: 1rem;
   }

   .footer .box-container .box .share a {
     background: #111;
     height: 4.5rem;
     width: 4.5rem;
     line-height: 4rem;
     font-size: 2rem;
     border-radius: 5%;
     border: 0.2rem solid #111;
     color: #fff;
     margin-right: -.2rem;
     text-align: center;
     font-weight: normal;
   }

   .nonthing{
     margin-top: 140px;
     display: none;
   }

   .footer .box-container .box .links {
     font-size: 1.4rem;
     color: white;
     padding: 1rem 0;
     display: block;
     font-weight: normal;
   }

   .footer .box-container .box .links:hover {
     color: #1abc9c;
     font-weight: normal;
   }

   .footer .box-container .box .links:hover i {
     padding-right: 2rem;
   }

   .footer .box-container .box .links i {
     padding-right: .5rem;
     color: #1abc9c;
   }

   .footer .box-container .box form .email {
     width: 100%;
     border-radius: 5rem;
     border: 0.2rem solid #1abc9c;
     background: none;
     text-transform: none;
     color: #aaa;
     margin-bottom: 1rem;
     padding: 1.2rem 1.2rem;
     text-align: left;
   }

   .credit {
     background: #222;
     text-align: center;
     font-size: 1.8rem;
     color: #aaa;
   }

   .credit span {
     color: #1abc9c;
     font-weight: normal;
   }


   #contact{
     margin-top: 70px;
   }


   /* footer ends */













 @media screen and (max-width: 1024px) {

   section{
     width: 100%;
     margin-top: 0;

   }

   .heading__row {
   width: 100%;
   margin-top: 0;
   display: flex;
   flex-direction: column-reverse;
 }

 #all__form{
   margin: -10px;
 }

 #all__form .logo-container .text {
    margin-top: -70px
  }

  #all__form .logo-container .line {
     margin-top: -70px
   }


#all__form__owner{
margin: -20px;
}

#all__form__owner #uploadsheet{
margin-top: -10px
}


 .action__btn{
   position: absolute;
   display: block;
   right: 6px
 }

 .action__btn:hover a {
   color: #aaa;
 }

 .navbar i {
   display: none;
 }


 .action__btn a {
   font-size: 22px;
   color: #1abc9c;
   display: inline-block;
   margin: 0 1.4rem;
   font-weight: normal;
   line-height: 2;
 }


 .logo {
   font-size: 1.8rem;
   color: #fff;
   font-weight: normal;
   letter-spacing: 3px;
   line-height: 2;
   color: #1abc9c;
   position: absolute;
   left: 70px
 }

 .home .column span {
   font-weight: bolder;
   color: transparent;
   -webkit-text-stroke: 0.1rem #fff;
   font-size: 5vw;
   display: block;
   letter-spacing: 3px;
   font-weight: 400;
   margin-top: -20px
 }

 .home .column h3 {
   font-size: 5vw;
   color: #fff;
   text-align: left;
   margin-top: 20px;
   margin-bottom: -20px;
   letter-spacing: 3px;
   font-weight: 400;
 }


 .about__header .dashboard {
  display: none;
}


 .dashboard__content span {
  font-weight: bolder;
  color: transparent;
  -webkit-text-stroke: 0.1rem #fff;
  font-size: 3vw;
  display: block;
  text-align: left;
  position: relative;
  margin-top: -20px;
  margin-bottom: 10px;
  letter-spacing: 6px;
 }


 .text {
     font-size: 24px;
     font-weight: bold;
     letter-spacing: 3px;
     line-height: 2;
     color: #00bfa6;
     display: inline-block;
     vertical-align: middle;
 }

 .logo-container p{
   padding: 0 5%;
   margin-bottom: 20px;
   color: #fff;
   text-align: center;
   font-size: 16px;
 }


 .skills-container {
     grid-template-columns: repeat(3, 1fr);
     gap: 30px;
 }

 .product-container {
   display: flex;
   gap: 20px;
   overflow-x: auto;
   scroll-snap-type: x mandatory;
   -webkit-overflow-scrolling: touch;
   padding: 20px;
   width: 100%;
 }

 .product-card {
   background: transparent;
   border-radius: 60% 74% 26% 40% / 63% 37% 47% 53%;
   border: 3px solid #1abc9c;
   box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5);
   overflow: hidden;
   width: 250px;
   height: 180px;
   flex: 0 0 auto;
   text-align: center;
   transition: transform 1.1s;
   scroll-snap-align: center;
   cursor: pointer;
 }

 .product-card:hover {
   transform: scale(1.09);
 }

 .product-title {
   font-size: 15px;
   margin-top: 10px;
   margin-bottom: -15px;
   color: #1abc9c;
 }

 .product-price {
   font-size: 15px;
   margin: 0 0 15px;
   color: #fff;
   text-align: center;
   margin-top: 15px;
   padding: 5px 25px;
 }


 .product-container::-webkit-scrollbar {
   height: 5px;
 }

 .product-container::-webkit-scrollbar-thumb {
   background-color: #1abc9c;
   border-radius: 5px;
   cursor: pointer;
   margin-bottom: 20px
 }

 .product-container::-webkit-scrollbar-track {
   background-color: #f0f0f0;
 }

 #about2  {
  margin-bottom: -30px
 }

 #about1 p {
  text-align: justify;
  color: #fff;
  line-height: 2;
  font-size: 14px
 }

 #serv4{
   height: 250px
 }

   .column9, .column2, .column3 {
     width: 50%;
     margin-top: 0;
   }

   .column7 {
     width: 50%;
     margin-top: 0;
   }

   .column1 {
     width: 50%;
     margin-top: 0;
   }

   .column8 {
     text-align: center;
     width: 30%;
     margin-top: 0;
   }

   #about1{
     text-align: justify;
     margin-top: 15px;
     color: black;
   }

   .column6 {
     width: 50%;
     margin-top: 0;
   }

  .column5 {
    width: 50%;
    margin-top: 0;
  }

  #about3{
    text-align: justify;
    margin-top: 10px;
    color: white;
    margin-left: -30px;
    font-size: 1.2rem
  }

  #about2{
    margin-top: 40px;
    margin-left: -20px;
  }

 #about2 img {
  width: 100%;
  height: 100%;
  object-fit: cover;
 }


  .column {
    width: 100%;
    margin-top: 0;
  }


  #text{
   width: 70%;
   margin-top: -20px;
   border-radius: 25px;
   resize: vertical;
   margin-left: 120px
  }

  .column {
    width: 100%;
    margin-top: 0;
  }


  .footer .box-container .box p {
    font-size: 1.4rem;
    color: #aaa;
    margin-top: 35px;
    line-height: 2;
  }

  .create{
    margin-top: 20px;
    margin-bottom: 15px;
    font-size: 4rem;
    color: #1abc9c;
    text-align:center
  }

  .review-inner{
    margin-top: -30px;
    margin-bottom: 5px;
  }


  .header {
    padding: 1.5rem 1rem;
  }
  section {
    padding: 3rem 1rem;
  }

  #text2{
    width: 100%;
    padding: 10px;
    margin-top: -25px;
    border-radius: 25px;
    margin-left: 15px
  }



  #menu-btn {
    display: inline-block;
  }
  .typewrite {
    font-size: 6vw;
  }
  .header .navbar {
    position: absolute;
    top: 99%;
    left: 0;
    right: 0;
    border-radius: 20px;
    background: #222;
    -webkit-clip-path: polygon(0 0, 100% 0, 100% 0, 0 0);
            clip-path: polygon(0 0, 100% 0, 100% 0, 0 0);
  }
  .header .navbar.active {
    -webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
            clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
  }
  .header .navbar a {
    margin: 2rem;
    font-size: 2rem;
    display: block;
  }


  .form {
    grid-template-columns: 1fr;
  }

  .contact-info:before {
    bottom: initial;
    top: -75px;
    right: 65px;
    transform: scale(0.95);
  }

  .contact-form:before {
    top: -13px;
    left: initial;
    right: 70px;
  }

  .square {
    transform: translate(140%, 43%);
    height: 350px;
  }

  .big-circle {
    bottom: 75%;
    transform: scale(0.9) translate(-40%, 30%);
    right: 50%;
  }

  .contact__text {
    margin: 1rem 0 1.5rem 0;
  }

  .social-media {
    padding: 1.8rem 0 0 0;
  }


 }



















 @media screen and (max-width: 480px) {
   html {
     font-size: 50%;
   }
   .about .content h3 {
     font-size: 3.5rem;
   }
   .banner .content h3 {
     font-size: 2.7rem;
   }

   .action__btn{
     position: absolute;
     display: block;
     right: 6px
   }

   .header{
     margin-top: 1.5rem;
   }

   .action__btn:hover a {

     color: #aaa;
   }

   .navbar i {
     display: none;
   }


   .action__btn a {
     font-size: 22px;
     color: #1abc9c;
     display: inline-block;
     margin: 0 1.4rem;
     font-weight: normal;
     line-height: 2;
   }


   .logo{
     display: none;
   }

   .home .column span {
     font-weight: bolder;
     color: transparent;
     -webkit-text-stroke: 0.1rem #fff;
     font-size: 5vw;
     display: block;
     letter-spacing: 3px;
     font-weight: bolder;
     margin-top: -20px
   }

   .home .column h3 {
     font-size: 5vw;
     color: #fff;
     text-align: left;
     margin-top: 20px;
     margin-bottom: -20px;
     letter-spacing: 3px;
     font-weight: bolder;
   }

   #hireme{
     display: none;
   }

   .skills-container {
       grid-template-columns: repeat(2, 1fr);
       gap: 20px;
   }


   .about__container {
       width: 100%;
       margin: 80px auto;
       border-radius: 15px;
       box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
       animation: fadeIn 1.5s ease;
       padding: 0.5em;
   }


   .about__header .dashboard {
    display: none;
  }

   .dashboard__content span {
    font-weight: bolder;
    color: transparent;
    -webkit-text-stroke: 0.1rem #fff;
    font-size: 5vw;
    display: block;
    text-align: left;
    position: relative;
    margin-top: -10px;
    margin-bottom: 10px;
    letter-spacing: 6px;
    font-weight: bolder;
   }


   .book-form {
     overflow-x: auto;
     scroll-snap-type: x mandatory;
     -webkit-overflow-scrolling: touch;
     width: 100%;
     margin: 1rem auto;
     border-radius: 1rem;
     -webkit-box-shadow: 0 0.5rem 1rem rgba(17, 17, 17, 0.3);
             box-shadow: 0 0.5rem 1rem rgba(17, 17, 17, 0.3);
     padding: 1rem 2rem;
   }


   .dashboard__card {
       background: transparent;
       border-radius: 10px;
       box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
       padding: 16px 30px;
       text-align: center;
       width: 120px;
   }

   .dashboard__card .number {
     padding: 10px 0;
     margin: -15px 0 -30px 5px;
     font-size: 1.5rem;
     font-weight: bold;
     color: #fff;
   }

   .dashboard__card .label {
     margin: 20px 0 -10px;
     font-size: 1rem;
     padding-bottom: 5px;
     color: #fff;
   }


   .dashboard__card:hover {
     color: #1abc9c;
     transform: scale(1.05);
     box-shadow: 0 8px 16px rgba(255, 255, 255, 0.2);
   }


   .product-container {
     display: flex;
     gap: 20px;
     overflow-x: auto;
     scroll-snap-type: x mandatory;
     -webkit-overflow-scrolling: touch;
     padding: 20px;
     width: 100%;
   }

   .product-card {
     background: transparent;
     border-radius: 60% 74% 26% 40% / 63% 37% 47% 53%;
     border: 3px solid #1abc9c;
     box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5);
     overflow: hidden;
     width: 250px;
     height: 180px;
     flex: 0 0 auto;
     text-align: center;
     transition: transform 1.1s;
     scroll-snap-align: center;
     cursor: pointer;
   }

   .product-card:hover {
     transform: scale(1.09);
   }

   .product-title {
     font-size: 15px;
     margin-top: 20px;
     margin-bottom: -15px;
     color: #1abc9c;
   }

   .product-price {
     font-size: 14px;
     margin: 0 0 15px;
     color: #fff;
     text-align: center;
     margin-top: 10px;
     padding: 5px 25px;
   }


   .product-container::-webkit-scrollbar {
     height: 5px;
   }

   .product-container::-webkit-scrollbar-thumb {
     background-color: #1abc9c;
     border-radius: 5px;
     cursor: pointer;
     margin-bottom: 20px
   }

   .product-container::-webkit-scrollbar-track {
     background-color: #f0f0f0;
   }


   #text{
    width: 100%;
    margin-top: -20px;
    border-radius: 25px;
    resize: vertical;
    margin-left: -10px
   }

   .text {
       margin-bottom: 5px
   }

   #text2{
     width: 100%;
     margin-bottom: -25px
   }

  .logo-container .line {
     display: none;
   }

   .logo-container p {
      display: none;
    }

   #about1{
    text-align: justify;
    margin-top: 15px;
    color: #fff;
    line-height: 2;
    font-size: 16px
   }

   .heading__row {
   width: 100%;
   margin-top: 0;
   display: flex;
   flex-direction: column-reverse;
 }


 #text{
   margin-top: -30px;
 }

 #serv4{
   height: 250px
 }

   .column9, .column2, .column3 {
     width: 100%;
     margin-top: 0;
   }

   .column7 {
     width: 100%;
     margin-top: 0;
   }

   .column1 {
     width: 100%;
     margin-top: 0;
   }

   .column8 {
     text-align: center;
     width: 30%;
     margin-top: 0;
   }

   #about1{
     text-align: justify;
     margin-top: 15px;
     color: black;
   }

   .column6 {
     width: 100%;
     margin-top: 0;
   }

  .column5 {
    width: 100%;
    margin-top: 0;
  }


   #menu-btn {
     display: inline-block;
     font-size: 3rem;
   }
   .typewrite {
     font-size: 6vw;
   }
   .header .navbar {
     position: absolute;
     top: 99%;
     left: 0;
     right: 0;
     background: #222;
     border-radius: 20px;
     -webkit-clip-path: polygon(0 0, 100% 0, 100% 0, 0 0);
             clip-path: polygon(0 0, 100% 0, 100% 0, 0 0);
   }
   .header .navbar.active {
     -webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
             clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
   }
   .header .navbar a {
     margin: 2rem;
     font-size: 2rem;
     display: block;
   }


   .form {
     grid-template-columns: 1fr;
   }

   .contact-info:before {
     bottom: initial;
     top: -75px;
     right: 65px;
     transform: scale(0.95);
   }

   .contact-form:before {
     top: -13px;
     left: initial;
     right: 70px;
   }

   .square {
     transform: translate(140%, 43%);
     height: 350px;
   }

   .big-circle {
     bottom: 75%;
     transform: scale(0.9) translate(-40%, 30%);
     right: 50%;
   }

   .contact__text {
     margin: 1rem 0 1.5rem 0;
   }

   .social-media {
     padding: 1.8rem 0 0 0;
   }

   .input {
   width: 100%;
   outline: none;
   border: 2px solid #fafafa;
   background: none;
   padding: 1.5rem 1.2rem;
   color: #fff;
   font-weight: 500;
   margin: 3px 0px;
   font-size: 1.8rem;
   letter-spacing: 0.5px;
   border-radius: 25px;
   transition: 0.3s;
   }

   .input-contact__container label {
   position: absolute;
   top: 50%;
   left: 15px;
   transform: translateY(-50%);
   padding: 0 0.4rem;
   color: #fafafa;
   font-size: 2rem;
   font-weight: 400;
   pointer-events: none;
   z-index: 1000;
   transition: 0.5s;
   }

   .input-contact__container.focus label {
   top: 3px;
   background: #1abc9c;
   transform: translateY(-50%);
   left: 25px;
   font-size: 1.8rem;
   }

   .information {
   display: flex;
   color: #555;
   margin: 1.5rem 0;
   font-weight: normal;
   align-items: center;
   font-size: 2rem;
   }

   .contact__btn {
   padding: 1.3rem 2.5rem;
   background-color: #fff;
   border: 2px solid #fafafa;
   font-size: 2.3rem;
   color: #1abc9c;
   line-height: 1;
   border-radius: 25px;
   outline: none;
   cursor: pointer;
   transition: 0.3s;
   margin: 0;
   }

   .contact__btn:hover {
   background-color: transparent;
   color: #fff;
   }



   /* Style inputs */
   input[class=contact2], select, textarea {
    width: 100%;
    padding: 10px;
    border: 2px solid #ccc;
    border-radius: 25px;
    border-color: #1abc9c;
    background-color: transparent;
    margin-top: 6px;
    margin-bottom: 10px;
    resize: vertical;
    color: #1abc9c;
   }


   /* Style inputs */
    input[id=uploadsheet]{
     width: 100%;
     height: 40%;
     border: 2px dashed #ccc;
     border-radius: 25px;
     border-color: #1abc9c;
     color: #1abc9c;
     margin-top: 50px
    }

    #all__form .logo-container .text {
       margin-top: -60px
     }

    #all__form{
      margin: -20px;
    }

  #all__form__owner{
  margin: -20px;
}

#all__form__owner #uploadsheet{
  margin-top: -10px
}


.column .uploadsheet{
  margin-top: -10px
}


    .footer .box-container .box {
      text-align: left;
      padding: 1rem 0;
      font-weight: normal;
    }

    .footer .box-container .box h3 {
      font-size: 3rem;
      color: #1abc9c;
      padding: 1rem 0;
      font-weight: normal;
    }


    .footer #box a{
      padding-right: .5rem;
      color: #fff;
      font-weight: normal;
      font-size: 2rem
    }

    .footer .box-container .box .links {
      font-size: 2rem;
      color: white;
      padding: 1rem 0;
      display: block;
      font-weight: normal;
    }

    #sub-form{
      text-align: left;
      margin-left: -20px
    }


    .portfolio {
      width: 100%;
    }




    .form {
      grid-template-columns: 1fr;
    }

    .contact-info:before {
      bottom: initial;
      top: -75px;
      right: 65px;
      transform: scale(0.95);
    }

    .contact-form:before {
      top: -13px;
      left: initial;
      right: 70px;
    }

    .square {
      transform: translate(140%, 43%);
      height: 350px;
    }

    .big-circle {
      bottom: 75%;
      transform: scale(0.9) translate(-40%, 30%);
      right: 50%;
    }

    .contact__text {
      margin: 1rem 0 1.5rem 0;
    }

    .social-media {
      padding: 1.8rem 0 0 0;
    }

    #login-btn {
      width: 50px;
      padding: 0.2rem 0.8rem;
      font-size: 14px;
      font-weight: 300;
      color: #fff;
      background: none;
      border: 0.2rem solid #1abc9c;
      border-radius: 5rem;
      cursor: pointer;
      transition: all 0.3s ease;
    }

}