/* Make all text italic */
body, body * {
    font-style: italic !important;
    font-family:Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
}

.home,
.services,
.projects {
    background:rgb(0, 0, 0) ;
    color:bisque;
}

.home {
    padding-top: 100px;
    padding-bottom: 100px;
    display: flex;
    justify-content: space-around;
    align-items: center;
}

.edu , .Wrork_experience{
    background-color: rgb(41, 40, 40);
    padding: 100px 0 100px 15%;
    padding-right: 200px;
    color: bisque;
}

.projects h3,
.projects h4 {
    margin-bottom: 50px;
}

.home img {
    border-radius: 50%;
    width: 22%;
    box-shadow:  3px 0px 15px #a877e0;
}

.home .texto {
    width: 60%;
}

.home .icons {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    margin-left: 50px;
}

.edu img ,.Wrork_experience img{
    width: 100px;
    margin-bottom: 20px;
}

.ii i {
    color: #a877e0;
}

.home .icons i {
    color: #a877e0;
    margin: 10px;
    font-size: x-large;
    padding: 10px;
}

.services,
.projects {
    padding: 100px 30px 30px;
}

.cards {
    padding-top: 20px;
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    flex-wrap: wrap;
}

.card {
    background-color: black;
    color: bisque;
    margin: 15px;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 400px;
    transition: .5s ease;
    box-shadow: 0px 0px 4px wheat;
}
.services .card{
       height: 200px;
}

.ii i {
    transition: .5s ease;
}

.card:hover,
.icons {
    transform: scale(1.1);
}

.ii:hover {
    transform: scale(1.3);
}

.cards img {
    width: 50%;
}

span {
    color: #a877e0;
}

/*//////////////////////////////////////*/
.skills {
    background-color: black;
    padding: 40px 0;
}

.skills h3 {
    margin-left: 150px;
    color: bisque;
}

/* Apply your custom shadow */
.card.shadow {
    box-shadow: 0 2px 5px rgba(245, 222, 179, 0.7);
    border-radius: 10px;
    background-color: #111;
    /* darker card for contrast */
    color: white;
    /* text color */
    transition: 0.3s ease;
}

.card.shadow:hover {
    box-shadow: 0 10px 25px rgba(245, 222, 179, 0.9);
}

.tab-header {
    position: relative;
    width: 100%;
    /* always full width of card */
    min-height: 50px;
    /* consistent height */
    line-height: 50px;
    /* vertically center text */
    background: #ff7f27;
    color: white;
    font-weight: bold;
    font-size: 1rem;
    text-align: center;
    margin-bottom: 10px;
    border-radius: 6px 6px 0 0;
    /* smooth corners on top */
}

/* folded corners */
.tab-header::before,
.tab-header::after {
    content: "";
    position: absolute;
    bottom: -10px;
    border-style: solid;
}

.tab-header::before {
    left: 0;
    border-width: 10px 10px 0 0;
}

.tab-header::after {
    right: 0;
    border-width: 10px 0 0 10px;
}

/* 🎨 Colors */
.front {
    background: #491980;
}

.front::before,
.front::after {
    border-top-color: #2b0e4d;
}

.back {
    background: #6a3ce7;
}

.back::before,
.back::after {
    border-top-color: #47289b;
}

.db {
    background: rgb(116, 19, 99);
}

.db::before,
.db::after {
    border-top-color: rgb(71, 12, 60);
}

.vc {
    background: #0d0f74;
}

.vc::before,
.vc::after {
    border-top-color: #07083d;
}



  /* Preloader full screen */
  #preloader {
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: black;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    perspective: 800px;
    z-index: 9999;
  }

  /* Container for loops */
  .loop-container {
    position: relative;
    width: 160px;
    height: 160px;
    transform-style: preserve-3d;
    animation: rotateContainer 6s linear infinite;
  }

  /* Individual loops */
  .loop {
    position: absolute;
    width: 100px;
    height: 100px;
    border: 6px solid #a877e0;
    border-radius: 50%;
    top: 30px;
    left: 30px;
    box-shadow: 0 0 20px #a877e0;
    animation: rotateLoop 3s linear infinite;
    transform-origin: 50% 50%;
  }

  .loop1 { transform: rotateX(0deg) rotateY(0deg); animation-delay: 0s; }
  .loop2 { transform: rotateX(90deg) rotateY(0deg); animation-delay: 0.3s; }
  .loop3 { transform: rotateX(45deg) rotateY(45deg); animation-delay: 0.6s; }
  .loop4 { transform: rotateX(135deg) rotateY(45deg); animation-delay: 0.9s; }

  @keyframes rotateContainer {
    0% { transform: rotateX(0deg) rotateY(0deg); }
    100% { transform: rotateX(360deg) rotateY(360deg); }
  }

  @keyframes rotateLoop {
    0% { transform: rotateX(0deg) rotateY(0deg); }
    100% { transform: rotateX(360deg) rotateY(360deg); }
  }

  /* Artistic name */
  .preloader-name {
    margin-top: 40px;
    color: #a877e0;
    font-family: 'Dancing Script', cursive;
    font-size: 2.5rem;
    text-align: center;
    text-shadow: 0 0 10px #ff79c6;
    animation: pulseName 1.5s infinite alternate;
  }

  @keyframes pulseName {
    0% { transform: scale(1); opacity: 0.7; }
    100% { transform: scale(1.15); opacity: 1; }
  }

/*////////////////////////////*/
 h1, h2, h3, h4, h5, h6, p, a, span, li {
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.8s ease-out;
}

/* When element is visible */
.scroll-show {
    opacity: 1 !important;
    transform: translateY(0) !important;
}


.wave {
  display: inline-block;
  transform-origin: 70% 70%;
  animation: wave-animation 2s infinite;
}

@keyframes wave-animation {
  0% { transform: rotate(0deg); }
  15% { transform: rotate(14deg); }
  30% { transform: rotate(-8deg); }
  45% { transform: rotate(14deg); }
  60% { transform: rotate(-4deg); }
  75% { transform: rotate(10deg); }
  100% { transform: rotate(0deg); }
}
.pro,.projs{
    margin :50px ;
}


/*//////////////////////////////////*/
/* 🌞 Light mode */
body.light-mode {
  background: white !important;
  color: black !important;
}

body.light-mode .home,
body.light-mode .services,
body.light-mode .projects,
body.light-mode .edu,
body.light-mode .skills,
body.light-mode .Wrork_experience,
body.light-mode footer {
  background: #f8f9fa !important;
  color: #222 !important;
}

body.light-mode .card {
  background: white !important;
  color: black !important;
  box-shadow: 0 0 8px rgba(0,0,0,0.2) !important;
}

body.light-mode .navbar {
  background: #e9ecef !important;
}

body.light-mode .ii i {
  color: #491980 !important;
}

body.light-mode span {
  color: #6a3ce7 !important;
}

/* Force all navbar text to be dark in light mode */
body.light-mode .navbar,
body.light-mode .navbar .navbar-brand,
body.light-mode .navbar .nav-link,
body.light-mode .navbar a {
  color: #111 !important;
}

/* Force skills text to dark in light mode */
body.light-mode .skills,
body.light-mode .skills * {
  color: #111 !important;
  fill: #111 !important; /* also fix for svg/icons if any */
}


/* Ensure skills section text is dark in light mode */
body.light-mode .skills,
body.light-mode .skills * {
  color: #111 !important;
}
/* Light mode overrides */
body.light-mode {
  background-color: #f8f9fa;
  color: #111;
}

/* Navbar in light mode */
body.light-mode .navbar,
body.light-mode .navbar .navbar-brand,
body.light-mode .navbar .nav-link,
body.light-mode .navbar a {
  color: #111 !important;
}

/* Light mode toggler icon */
/* body.light-mode .navbar .navbar-toggler-icon {
  background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg viewBox='0 0 30 30'
   xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='%23111' stroke-width='2'
   stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");
} */

/* Light mode buttons (Download CV, etc.) */
body.light-mode .btn-outline-light {
  color: #111;
  border-color: #111;
}

body.light-mode .btn-outline-light:hover {
  background-color: #111;
  color: #fff;
}

/* Skills section text */
body.light-mode .skills,
body.light-mode .skills * {
  color: #111 !important;
}