/*-----------------------------------*\
  #main.css
\*-----------------------------------*/

/**
 * copyright 2025 codewithosama03
 */
 
:root {

  /**
   * colors
   */

  --raisin-black: hsla(231, 10%, 14%, 1);
  --roman-silver: hsla(229, 10%, 57%, 1);
  --eerie-black: hsla(228, 9%, 10%, 1);
  --black: hsla(0, 0%, 0%, 1);
  --white: hsla(0, 0%, 100%, 1);
  --white_a10: hsla(0, 0%, 100%, 0.1);
  --white_a5: hsla(0, 0%, 100%, 0.05);

  /**
   * typography
   */

  --ff-syne: 'Syne', sans-serif;

  --fs-1: 4.8rem;
  --fs-2: 4.5rem;
  --fs-3: 4rem;
  --fs-4: 2.4rem;
  --fs-5: 2rem;
  --fs-6: 1.8rem;
  --fs-7: 1.4rem;
  --fs-8: 1.2rem;
  
  --fw-800: 800;
  --fw-700: 700;

  /**
   * spacing
   */

  --section-padding: 100px;

  /**
   * border radius
   */

  --radius-pill: 100px;
  --radius-circle: 50%;
  --blob-radius: 52% 48% 59% 41% / 53% 40% 60% 47%;

  /**
   * transition
   */

  --transition-1: 0.25s ease;
  --transition-2: 0.5s ease;
  --cubic-in: cubic-bezier(0.51, 0.03, 0.64, 0.28);
  --cubic-out: cubic-bezier(0.05, 0.83, 0.52, 0.97);
  --cubic-bounce: 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55);
  --cubic-ease-out: 700ms cubic-bezier(0.17, 0.67, 0, 1.01);

}

/*-----------------------------------*\
  # preload
\*-----------------------------------*/

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

li { list-style: none; }

a,
img,
span,
data,
button,
ion-icon { display: block; }

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

img { height: auto; }

button {
  background: none;
  border: none;
  font: inherit;
  cursor: pointer;
}

ion-icon { pointer-events: none; }

html {
  font-family: var(--ff-syne);
  font-size: 10px;
  scroll-behavior: smooth;
}

body {
  background-color: var(--eerie-black);
  color: var(--roman-silver);
  font-size: 1.6rem;
  line-height: 1.75;
  /* overflow: hidden; */
}

/*-----------------------------------*\
  #header and nav
\*-----------------------------------*/

header{
  height: 100px;
  width: 100%;
  /* background-color: whitesmoke; */
  display: flex;
  justify-content: center;
  align-items: center;
}

.navbar{
  height: 90px;
  width: 80%;
  /* background-color: antiquewhite; */
  display: flex;
  justify-content: center;
  align-items: center;
}

.nav1 {
  width: 30%;
  height: 70px;
  /* background-color: rgb(96, 96, 130);  */
  display: flex;
  justify-content: flex-start;
  align-items: center;
}

.nav2 {
  width: 70%;
  height: 70px;
  /* background-color: green;  */
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

.nav2-ul {
  width: 90%;
  height: 70px;
  /* background-color: blueviolet; */
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 10%;
}

.menubtn {
  background-color: aliceblue;
  border-radius: 10px;
  display: none;
}

.nav2-item a {
  display: flex;
  justify-content: center;
  align-items: center; 
}

.nav2-item  :hover {
  border-bottom: 2px solid hsla(0, 0%, 100%, 1);;
 /* background-color: hsla(0, 0%, 100%, 1); */
}

/* sidebar */


 .sidebar {
    position: fixed;
    top: 0;
    right: 0;
    height: 100vh;
    width: 300px;
    z-index: 999;
    background-color: rgba(255, 255,255, 0.2);
    backdrop-filter: blur(10px);
    box-shadow: -10px 0 10px  rgba(0, 0, 0, 0.1); 
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;   
    display: none;
}


.sidebar-div{
  height: 500px;
  width: 80%;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  /* background-color: green; */
}

.side2-ul{
 height: 90%;
 /* background-color: blue; */
 width: 80%;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
gap: 10%;
}

.side2-ul :first-child {
  margin-bottom: 20%;
}

.closebtn {
  background-color: aliceblue;
  border-radius: 20px;
  height: 50px;
}

.side2-item :hover {
  background-color: aliceblue;
}

/* media queries for sidebar */

@media(max-width:636px){
 .nav2-item{
  display: none;
 }
 .menubtn {
  display: block;
 }

 .nav1 {
  width: 70%;
 }

 .nav2 {
  width: 30%;
}
 
}


/*-----------------------------------*\
  #main section
\*-----------------------------------*/
 
 .main-section {
  display: flex;
  height: 900px;
  width: 100%;
  /* background-color: rgb(84, 118, 147); */
  display: flex;
  justify-content: center;
  align-items: center;
}

 .main-container{
  height: 800px;
  width: 80%;
  /* background-color: rgb(95, 128, 128); */
  display: flex;
  justify-content: center;
  align-items: center;
 }

 .contain1 {
  height: 780px;
  width: 49%;
  /* background-color: bisque; */
   display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-direction: column;
  gap: 10px;
 }


 .profile-pic {
    border-radius: var(--blob-radius);
  overflow: hidden;
  animation: blobAnim 30s linear infinite;
 }

 .profile-pic img {
  height: 600px;
  width: 600px;
  object-fit: cover;
 } 

 
@keyframes blobAnim {

  0%,
  100% { border-radius: var(--blob-radius); }

  10% { border-radius: 33% 67% 50% 50% / 43% 39% 61% 57%; }

  20% { border-radius: 51% 49% 31% 69% / 65% 39% 61% 35%; }

  30% { border-radius: 51% 49% 56% 44% / 45% 39% 61% 55%; }

  40% { border-radius: 66% 34% 33% 67% / 48% 71% 39% 52%; }

  50% { border-radius: 46% 54% 33% 67% / 48% 30% 70% 52%; }

  60% { border-radius: 46% 54% 56% 44% / 48% 30% 70% 52%; }

  70% { border-radius: 46% 54% 56% 44% / 65% 53% 47% 35%; }

  80% { border-radius: 67% 33% 56% 44% / 37% 53% 47% 63%; }

  90% { border-radius: 46% 54% 32% 68% / 37% 53% 47% 63%; }

}


   /* donwload cv new */

   .download-cv {
  display: flex;
  align-items: center;
  gap: 15px;
  height: 100px;
  width: 220px;
  margin-top: 20px;
  padding: 0 15px;
  border: 2px solid hsla(229, 10%, 57%, 1);
  border-radius: 20px;
  text-decoration: none;
  cursor: pointer;
  transition: all 0.3s ease;
  overflow: hidden; /* ensures circle stays inside */
}

.down-circle {
  height: 60px;
  width: 70px;
  border: 2px solid hsla(229, 10%, 57%, 1);
  border-radius: 50%;
  transition: transform 0.4s ease;
}

.down-text {
  font-size: larger;
  color: hsla(229, 10%, 57%, 1);
  font-weight: 500;
}

.download-cv:hover .down-circle {
  transform: translateX(140px);
}

   /* conatiner 2  */
  .contain2{
  height: 780px;
  width: 49%;
  /* background-color: rgb(146, 91, 133); */
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
 }

   .intro-1 {
    height:200px;
    width: 100%;
    /* background-color: rgb(249, 181, 93); */
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    flex-direction: column;
    z-index: 20;
   }

    .intro-1 h1 {
      font-size: 5.5rem;
      color: hsla(0, 0%, 100%, 1);  ;
     
      
    }

    .intro-1 h3 {
      font-size: 3.1rem;
    }

    .intro-2 {
      height: 200px;
      width: 100%;
      /* background-color: rgb(95, 61, 10); */
      font-size: 2.6rem;
      z-index: 20;

    }

    .ewi {
      height: 1000px;
      width: 100%;
      background-color: aquamarine;
    }


/*-----------------------------------*\
  #languages and tools
\*-----------------------------------*/

.service{
  height: 670px;
  /* background-color: blue; */
}

/* Container width 80% */
.container {
  height: 400px;
  width: 80%;
  margin: auto;
  /* background-color: rgb(41, 59, 59); */
}

.title-wrapper {
  /* background-color: aquamarine; */
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
}

.section-subtitle {
  font-size: 14px;
  text-transform: uppercase;
  color: #aaa;
}

.section-title {
  font-size: 32px;
  margin: 5px 0;
}

.section-text {
  max-width: 500px;
  color: #ccc;
  line-height: 1.5;
}

/* Slider styles */
.slider {
  /* background-color: bisque; */
  height: 370px;
  position: relative;
  overflow: hidden;
  margin-top: 30px;
}

.slider-container {
  height: 360px;
  width: 100%;
  /* background-color: brown; */
  display: flex;
  gap: 20px;
  transition: transform 0.4s ease-in-out;
}

.slider-item {
  /* background-color: aqua; */
  height: 350px;
  min-width: calc(100% / 3); /* Show 3 cards at once */
  box-sizing: border-box;
  display: flex;
  justify-content: center;
  align-items: center;
}

.service-card {
  width: 80%;
  height: 340px;
  background: #ececec;
  padding: 20px;
  border-radius: 10px;
  text-align: center;
  position: relative;
}


.card-icon ion-icon {
  font-size: 40px;
  color: #333;
}
/* servuce img */

.service-img {
  display: flex;
  justify-content: center;
  align-items: center;
}
.service-img img {
   background: #ececec;
   height: 200px;
   border-radius: 20%;
}



.card-number {
  position: absolute;
  bottom: 10px;
  right: 15px;
  font-size: 50px;
  color: #aaa;
}

/* Arrows */
.slider-controls {
  position: absolute;
  top: 50%;
  width: 100%;
  display: flex;
  justify-content: space-between;
}

.slider-control {
  background: rgba(0, 0, 0, 0.6);
  border: none;
  color: #fff;
  padding: 10px;
  cursor: pointer;
  font-size: 24px;
}
/* Default: 3 cards */
.slider-item {
  min-width: calc(100% / 3);
  box-sizing: border-box;
}

/* Tablet: 2 cards */
@media (max-width: 1024px) {
  .slider-item {
    min-width: calc(100% / 2);
  }
}

/* Mobile: 1 card */
@media (max-width: 768px) {
  .slider-item {
    min-width: 100%;
  }
}


/*-----------------------------------*\
  #projects and portfolio
\*-----------------------------------*/
 

    .portfolio {
      padding: 10px 20px;
      /* background-color: rgb(105, 138, 105); */
      margin-bottom: 50px;
      height: 660px;
      display: flex;
      justify-content: flex-start;
      align-items: center;
      flex-direction: column;
    }

     .project-head{
        font-size: 4.2rem; 
        margin-bottom: 10px;
     }
     
    .slider-wrapper {
      width: 100%;
      overflow: hidden;
      margin: 0 auto;
      height: 450px;
      /* background-color: antiquewhite; */
    }

    .slider-track {
      --gap: 24px;
      display: flex;
      gap: var(--gap);
      transition: transform 0.45s ease;
      padding: 0 24px;
      list-style: none;
      margin: 0;
      
    }

    .slide {
      flex: 0 0 calc((100% - var(--gap) * 2) / 3);
      height: 400px;
      /* background-color: antiquewhite; */

    }

    @media (max-width: 1024px) {
      .slide { flex: 0 0 calc((100% - var(--gap)) / 2); }
    }
    @media (max-width: 768px) {
      .slide { flex: 0 0 100%; }
    }

    .portfolio-card {
      position: relative;
      height: 400px;
      border-radius: 12px;
      overflow: hidden;
      background-color: rgb(63, 65, 72);
    }

    .img {
      width: 98%;
      height: 100%;
      object-fit: contain;
      transition: 0.35s ease;
      /* margin: 100px; */
      padding: 20px;
      
    }

    .card-content {
      position: absolute;
      inset: 0;
      display: grid;
      place-content: center;
      text-align: center;
      color: #fff;
      opacity: 0;
      transform: translateY(8px);
      transition: 0.35s ease;
    }

    .portfolio-card:hover .img {
      transform: scale(0.96);
      opacity: 0.12;
    }
    .portfolio-card:hover .card-content {
      opacity: 1;
      transform: translateY(0);
    }

    .layer-link { position: absolute; inset: 0; }

    .controls {
      display: flex;
      justify-content: center;
      gap: 16px;
    }

    .ctrl {
      border: 0;
      border-radius: 999px;
      padding: 10px 18px;
      background: #fff;
      color: #111;
      font-size: 20px;
      cursor: pointer;
      box-shadow: 0 6px 20px rgba(0,0,0,.2);
      transition: transform .15s ease, background .2s ease;
    }
    .ctrl:hover { transform: translateY(-2px); }


/*-----------------------------------*\
  #FOOTER
\*-----------------------------------*/

.footer {
  background-color: var(--raisin-black);
  padding-block: 76px;
  height: 200px;
  /* background-color: rgb(72, 94, 94); */
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
}

.container2 {
   height: 100px;;
   width: 80%;
   /* background-color: #333; */
   display: flex;
   justify-content: space-evenly;
   align-items: center;
}

.social-list {
  display: flex;
  gap: 8px;
}

.social-link {
  width: 45px;
  height: 45px;
  display: grid;
  place-items: center;
  border: 2px solid var(--white_a10);
  border-radius: var(--radius-circle);
  color: var(--white);
  transition: var(--transition-1);
}

.social-link:is(:hover, :focus-visible) { border-color: var(--white); }


/*-----------------------------------*\
  #MEDIA QUERIES
\*-----------------------------------*/


/* media queries for hero section only */


  @media(max-width:1302px){
    .intro-1 {
      height:300px;
      gap: 10px;
    }
    
    .intro-2 {
      height:300px;
    }
  }


  @media (max-width:1051px) {
     .main-section {
       height: 1200px;
     }

     .main-container {
      height: 1100px;
      flex-direction: column-reverse;
     }

     .contain1 {
      width: 100%;
      height: 620px;
     }

     .profile-pic img {
      height: 500px;
      width:500px;
     }

      .contain2 {
        width: 100%;
        height: 400px;
        justify-content: flex-start;
        align-items: flex-start; 
      }

      .intro-1{
        justify-content: center;
        align-items: center;
        height: 200px ;
      }


      .intro-2 {
        height: 190px;
        display: flex;
        justify-content: center;
        align-items: center;
      }

      .intro-2 h4 {
        display: flex;
        justify-content: center;
        align-items: center;
      }


  }

 @media(max-width:637px){
  .main-section{
    height: 1200px;
  }

  .main-container {
    height: 1100px;
  }
   
  .contain1 {
   height: 550px;
  }
 
  .profile-pic img {
      height: 400px;
      width:400px;
     }

     .contain2 {
      height: 500px;
     }

     .intro-1{
      height: 300px;
     }
      .intro-1 h1 {
      font-size: 4.2rem;
      }
      .intro-1 h3 {
      font-size: 2.6rem;
    }

     .intro-2 {
      height: 250px;
     }

     .intro-2 H4 {
      font-size: 2rem;

     }

  
 }

 @media (max-width:509px) {
   .profile-pic img {
      height: 300px;
      width:300px;
     }

    .contain1 {
      height: 420px;
    }

    .main-section {
      height: 1100px;
    }

     .main-container{
      height: 1000px;
     }
 }
  
  



 /* media queries for service/languages section */


 @media(max-width: 842px){
   .service {
    height: 740px;
   }
 }


  @media(max-width: 584px){
   .service {
    height: 780px;
   }
 }

   @media(max-width: 498px){
   .service {
    height: 860px;
   }
 }

 
    @media(max-width: 384px){
   .service {
    height: 950px;
   }
 }


 /* for footer */

 

 @media(max-width:1162px){
  .footer{
    height: 500px;
  }

  .container2 {
    height:400px;
    align-items: flex-start;
    flex-direction: column;
  }
 }


 @media(max-width:348px){
    .container2 {
      width: 99%;
    }
 }


 /* media queries for  prtfolio card */

 @media(max-width:459px){
  
    .portfolio {
     height: 500px;
     display: flex;
     justify-content: center;
     align-items: center;
    }

   .slide{
    height: 300px;
    display: flex;
    justify-content: center;
    align-items: center;
   }
  
  .portfolio-card {
    height: 200px;
  }
 }