:root {
  --cosmic-purple: #3a0ca3;
  --spirit-pink: #f72585;
  --void-black: #0a0a12;
  --starlight: #e2e2e2;
  --angel-gold: #ffd700;
  --ethereal-blue: #4cc9f0;
  --transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

body {
  margin: 0;
  font-family: sans-serif; /* Ensure a default font */
  color: var(--starlight); /* Apply default text color */
  background-color: var(--void-black); /* Apply default background color */
}

.about {
  background: url("../images/Client-4.png") center / cover no-repeat fixed;
  background-repeat: no-repeat !important;
  object-fit: cover !important;
  overflow: hidden !important;
  position: relative;
  padding-left: 60px !important;
  padding-right: 60px !important;
  /* Added responsive padding for top/bottom */
  padding-top: 80px !important;
  padding-bottom: 80px !important;
}

.about:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(10, 10, 18, 0.9);
}

.about-content {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: clamp(30px, 5vw, 80px);
  position: relative;
  /* Center items when they wrap on smaller screens */
  justify-content: center;
}

.about-img {
  flex: 1;
  min-width: 300px;
  width: 300px;
  height: 800px;
  position: relative;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 30px 50px rgba(0, 0, 0, 0.5);
  transform: perspective(1000px) rotateY(10deg);
  transition: var(--transition);
  border: 3px solid var(--spirit-pink);
}

.Boksiz {
  width: 300px !important;
  height: 510px !important;
}

.about-img:hover {
  transform: perspective(1000px) rotateY(0deg);
  box-shadow: 0 40px 70px rgba(247, 37, 133, 0.3);
}

/* .about-img{
    background-image: url(../images/Authorpic.png) !important;
    background-repeat: no-repeat !important;
    object-fit: cover !important;
    overflow: hidden !important;} */
/* .about-img img {
    width: 100%;
    height: auto;
    display: block;
    transition: var(--transition);
} */

.about-text {
  flex: 1;
  min-width: 300px;
  position: relative;
}

.about-text h2 {
  font-size: clamp(2rem, 5vw, 3.5rem);
  margin-bottom: 30px;
  color: var(--ethereal-blue);
}

.about-text p {
  margin-bottom: 25px;
  font-size: clamp(1rem, 1.5vw, 1.2rem);
  position: relative;
  padding-left: 20px;
}

.about-text p:before {
  content: "✦";
  position: absolute;
  left: 0;
  top: 0;
  color: var(--spirit-pink);
}

.signature {
  margin-top: 40px;
  width: clamp(150px, 20vw, 250px);
  filter: drop-shadow(0 0 5px var(--angel-gold));
}

.section-title {
  font-size: clamp(2.5rem, 5vw, 4rem);
  margin-bottom: 80px;
  position: relative;
  text-align: center;
  color: var(--angel-gold);
  text-shadow: 0 0 10px rgba(255, 215, 0, 0.3);
}

.section-title:after {
  content: "";
  position: absolute;
  bottom: -20px;
  left: 50%;
  transform: translateX(-50%);
  width: 150px;
  height: 3px;
  background: linear-gradient(90deg, transparent, var(--spirit-pink), transparent);
}

/* --- Responsive Adjustments --- */

/* For screens smaller than 1024px (e.g., tablets and smaller desktops) */
@media (max-width: 1024px) {
  .about-img {
    height: 600px; /* Adjust height for medium screens */
    transform: perspective(800px) rotateY(5deg); /* Slightly less dramatic transform */
  }

  .Boksiz {
    width: 250px !important;
    height: 450px !important;
  }
}

/* For screens smaller than 768px (e.g., tablets in portrait, large phones) */
@media (max-width: 768px) {
  .about {
    padding-left: 20px !important;
    padding-right: 20px !important;
    padding-top: 60px !important;
    padding-bottom: 60px !important;
  }

  .about-img {
    width: 100%; /* Allow image to take full width on smaller screens */
    max-width: 400px; /* Limit max width to prevent it from being too large */
    height: 500px; /* Adjust height for tablets */
    transform: perspective(600px) rotateY(0deg); /* Reduce transform on smaller screens */
    margin: 0 auto; /* Center the image when it takes full width */
  }

  .Boksiz {
    width: 100% !important; /* Take full width */
    max-width: 300px !important; /* Limit max width */
    height: 400px !important; /* Adjust height */
  }

  .about-img:hover {
    transform: perspective(600px) rotateY(0deg); /* Adjust hover transform to match non-hover state */
    box-shadow: 0 20px 40px rgba(247, 37, 133, 0.3); /* Reduce hover shadow */
  }

  .about-text {
    min-width: unset; /* Allow text block to shrink below 300px */
    width: 100%; /* Take full width below image */
    text-align: center; /* Center text when it's a single column */
  }

  .about-text h2 {
    margin-bottom: 20px;
  }

  .about-text p {
    padding-left: 0; /* Remove padding-left to allow full width for centered text */
    text-align: center; /* Center text on smaller screens */
  }

  .about-text p:before {
    display: none; /* Hide the '✦' bullet when text is centered */
  }

  .signature {
    margin-top: 20px;
    margin-left: auto; /* Center signature */
    margin-right: auto; /* Center signature */
    display: block; /* Ensure it takes full width for centering */
  }

  .section-title {
    margin-bottom: 40px;
  }
}

/* For screens smaller than 480px (e.g., mobile phones) */
@media (max-width: 480px) {
  .about {
    padding-left: 15px !important;
    padding-right: 15px !important;
    padding-top: 40px !important;
    padding-bottom: 40px !important;
  }

  .about-img {
    height: 400px; /* Adjust height for mobile */
    min-width: unset; /* Allow it to shrink below 300px if needed */
    transform: none; /* Ensure no transform on very small screens */
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.5); /* Reduce shadow */
  }

  .Boksiz {
    height: 300px !important; /* Further adjust height for mobile */
  }

  .about-img:hover {
    transform: none; /* Disable transform on hover for very small screens */
    box-shadow: 0 15px 30px rgba(247, 37, 133, 0.3); /* Match non-hover shadow */
  }

  .about-text {
    padding-top: 20px; /* Add some space between image and text on mobile */
  }

  .section-title {
    margin-bottom: 30px;
  }
}