@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Clicker+Script&display=swap');

:root {
      --bg-black-900: #1c1c1e; /* Very Dark Gray (Almost Black) */
      --bg-black-100: #262629; /* Dark Gray */
      --bg-black-50: #2e2e33; /* Medium Dark Gray */
      --text-black-900: #e5e5e5; /* Light Gray (for text contrast) */
      --text-black-700: #eee; /* Vibrant Red */
  }
  
  

body 
{
      
      line-height: 1.5;
      font-size: 16px;
      font-family: 'Poppins', sans-serif;
}

*{
      margin: 0 ; 
      padding : 0 ; 
      outline : none;
      text-decoration: none;
      box-sizing: border-box;

}

::before, ::after {
      box-sizing: border-box;
}

ul {
      list-style: none;
}

.section {
      background: var(--bg-black-900);
      min-height: 100vh;
      display: block ;
     
      padding: 0 30px;  
      top : 0;
      right : 0 ;
      z-index: 0;
      opacity: 1;
      position: fixed;
      left: 270px;
      right: 0;
      top: 0;
      bottom: 0;
      overflow-y: auto;
      overflow-x : hidden;
}

.section.active{
      z-index: 2;
      opacity: 1;
      animation: slideSection 0.7s ease  ;

}

.section.back-section{
      z-index: 1;
}

@keyframes slideSection {
      0% {
            transform: translate(100%);
      }
      100% {
            transform: translate(0%);
      }
      
}
/* 
.hidden {
      display: none !important;
} */

.padd-15{
      padding-left: 15px;
      padding-right: 15px;
}

.container{
      max-width: 1100px;
      width: 100%;
      margin: auto;
}



.row{
      display: flex;
      flex-wrap: wrap;
      margin-left: -15px;
      margin-right: -15px;
      position: relative;
}

.btn {
      font-size: 16px;
      font-weight: 500;
      padding: 12px 35px;
      color: white;
      border-radius: 40px;
      border: none;
      display: inline-block;
      white-space: nowrap;
      background: var(--skin-color);
      transition : all 0.3s ease
}

.btn:hover{
      transform: scale(1.05);
}

/* aside */
.aside { 

      width: 270px ;
      background: var(--bg-black-100);
      position : fixed;
      left: 0;
      top : 0;
      padding: 30px;
      display: flex;
      justify-content: center;
      align-items: center;
      z-index: 10;
      height: 100%;
      border-right: 1px solid var(--bg-black-50);
      transition: all 0.7s ease;

}

.social-media-links {
      display: flex;
      gap: 10px;
      margin-top: 20px;
}

.social-media-links img{
      
      width: 30px;
      height: 30px;
}


.aside .nav-toggler
{
      height: 40px;
      width: 45px;
      border: 1px solid var(--bg-black-50);
      cursor: pointer;
      position: fixed;
      left: 300px;
      top: 20px;
      border-radius: 5px;
      background: var(--bg-black-100);
      display: none;
      align-items: center;
      justify-content: center;
}


.aside .nav-toggler span {
      height: 2px;
      width: 18px;
      background: var(--skin-color);
      display: inline-block;
      position: relative;
}

.aside .nav-toggler span::before {
      content: '';
      height: 2px;
      width: 18px;
      background: var(--skin-color);
      position: absolute;
      top: -6px;
      left: 0;
}

.aside .nav-toggler span::after {
      content: '';
      height: 2px;
      width: 18px;
      background: var(--skin-color);
      position: absolute;
      top: 6px;
      left: 0;
}



.aside .logo {
      position: absolute;
      top: 50px;
      font-size: 30px;
      text-transform: capitalize;
}



.aside .logo a {
      color: var(--text-black-900);
      font-weight: 700;
      padding: 15px 20px;
      font-size: 52px;
      letter-spacing: 5px;
      position: relative;
      font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;

}







.aside .logo a::before{
      content: '';
      position: absolute;
      width: 20px;
      height: 20px;
      border-bottom: 5px solid var(--skin-color);
      border-left: 5px solid var(--skin-color);
      bottom: 0;
      left: 0;
}


.aside .logo a::after{
      content: '';
      position: absolute;
      width: 20px;
      height: 20px;
      border-top: 5px solid var(--skin-color);
      border-right: 5px solid var(--skin-color);
      top: 0;
      right: 0;
}

.aside .logo a span {
      font-size: 52px;
      color: var(--skin-color);
}




.aside .nav {
    
      gap: 10px;;
      margin-top: 50px;
}

.aside .nav li{
      display: block;
      margin-bottom: 20px;
}

.aside .nav li a{
      font-size: 16px;
      font-weight: 600;
      border-bottom: 1px solid var(--bg-black-50);
      display: block;
      padding: 5px 15px;
      color: var(--text-black-900);
}

.aside .nav li a.active{
      color: var(--skin-color);
}

.aside .nav li a i {
      margin-right: 15px;
}


/* home */

.home {
      min-height: 100vh;
      display: flex;
      color: var(--text-black-900);
}

.home .home-info {
      flex : 0 0 60%;
      max-width: 60%;
}

h3.hello {
      font-size: 28px;
      
      letter-spacing: 1rem;
      
}

h3.hello.span{
      font-family: 'Clicker Script', cursive;
      font-size: 30px;
      font-weight: 700;
}


h3.my-profession {
      font-size: 62px;
      margin: 15px 0;
      
}

h3.desc span {
      font-size: 52px;
      font-weight: 700;
      display: inline-block;
}

.typing {
      display: inline-block;
      color: var(--skin-color);
}


.home-info p {
      color: var(--text-black-700);
      margin-bottom: 20px;
}

.home .home-img {
      flex: 0 0 40%;
      max-width: 80%;
      text-align: center;
      position: relative;
      
}

.home .home-img::after{
      content: '';
      position: absolute;
      height: 80px;
      width: 80px;
      border-bottom: 10px solid var(--skin-color);
      border-right: 10px solid var(--skin-color);

      right: 20px;
      bottom: 180px;


}

.home .home-img::before{
      content: '';
      position: absolute;
      height: 80px;
      width: 80px;
      border-top: 10px solid var(--skin-color);
      border-left: 10px solid var(--skin-color);

      left: 20px;
      top: -40px;


}


.home .home-img img {
      height: 400px;
      margin: auto;
      border-radius: 5px;
      
}


.about .container {
      padding-top: 100px;
}


.about-info {
      flex: 0 0 60%;
      max-width: 60%;
      color: var(--text-black-900);
     
  }
  
  .about-info p {
      font-size: 18px;
      color: var(--text-black-700);
      margin-bottom: 30px;
  }
  
  .services-list {
      list-style: none;
      margin: 20px 0;
      padding: 0;
  }
  
  .services-list li {
      font-size: 18px;
      margin-bottom: 10px;
      display: flex;
      align-items: center;
  }
  
  .about-img {
      flex: 0 0 40%;
      max-width: 40%;
      text-align: center;
  }
  
  .about-img img {
      width: 100%;
      border-radius: 5px;
  }
  
  .section-title {
      margin-bottom: 30px;
      position: relative;
  }
  
  .section-title h2 {
      font-size: 42px;
      color: var(--text-black-900);
      margin-bottom: 10px;
      position: relative;
  }
  
  .section-title h2::before {
      content: '';
      position: absolute;
      width: 50px;
      height: 4px;
      background: var(--skin-color);
      bottom: -10px;
      left: 0;
  }
  

  .services {
      padding: 60px 0;
  }
  
  .service-item {
      flex: 0 0 50%;
      max-width: 50%;
      padding: 30px;
      text-align: center;
      color: var(--text-black-900);
      transition: transform 0.3s ease;
  }
  
  .service-item .icon {
      font-size: 40px;
      margin-bottom: 20px;
      color: var(--skin-color);
  }
  
  .service-item h4 {
      font-size: 22px;
      margin-bottom: 15px;
  }
  
  .service-item p {
      font-size: 16px;
      color: var(--text-black-700);
  }
  
  .service-item:hover {
      transform: translateY(-10px);
  }
  
  @media (max-width: 768px) {
      
  }
   
 
 
  

  /* Contact Section Styles */
/* General Styles */
.contact {
      color: var(--text-black-900);
      padding: 60px 0;
  }
  
  .contact .section-title {
      margin-bottom: 40px;
  }
  
  
  
  .contact-info {
      display: flex;
      flex-wrap: wrap;
      gap: 30px;
      justify-content: center;
  }
  
  .contact-details,
  .contact-form {
      flex: 1;
      max-width: 100%;
      box-sizing: border-box;
  }
  
  .contact-details h3,
  .contact-form h3 {
      font-size: 28px;
      margin-bottom: 20px;
  }
  
  .contact-details p {
      font-size: 18px;
      margin-bottom: 20px;
  }
  
  .contact-details ul {
      list-style: none;
      padding: 0;
  }
  
  .contact-details ul li {
      font-size: 16px;
      margin-bottom: 10px;
  }
  
  .contact-details ul li i {
      margin-right: 10px;
      color: var(--skin-color);
  }
  
  .contact-form form {
      display: flex;
      flex-direction: column;
  }
  
  .contact-form .form-group {
      margin-bottom: 20px;
  }
  
  .contact-form .form-group label {
      display: block;
      font-size: 16px;
      margin-bottom: 5px;
  }
  
  .contact-form .form-group input,
  .contact-form .form-group textarea {
      width: 100%;
      padding: 10px;
      font-size: 16px;
      border: 1px solid var(--bg-black-50);
      border-radius: 5px;
  }
  
  .contact-form .form-group textarea {
      resize: vertical;
  }
  
  .contact-form .btn {
      background: var(--skin-color);
      border: none;
      padding: 15px;
      color: white;
      font-size: 16px;
      border-radius: 5px;
      cursor: pointer;
      transition: all 0.3s ease;
  }
  
  /* Responsive Styles */
  @media (max-width: 768px) {
      .contact .container {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
      }
      .contact-info {
          flex-direction: column;
          align-items: center;
      }
  
      .contact-details,
      .contact-form {
          max-width: 100%;
          margin: 0;
      }
  
      .contact-details ul li {
          font-size: 14px;
      }
  
      .contact-form .form-group input,
      .contact-form .form-group textarea {
          font-size: 14px;
      }
  }
  

  
  


      @media (max-width:1199px) {
            .aside {
                  left: -270px;
            }

            .aside.open {
                  left: 0;
            }
            .aside .nav-toggler {
                  display: flex;
                  left: 30px;
            }

            .aside .nav-toggler.open {
                  display: flex;
                  left: 300px;
            }


            .section {
                  left: 0;
            }

            .section.open{
                  left: 270px;
            }

          
      }

      @media (max-width: 764px) {
            .home .home-img {
                  display: none;
            }

            .home .home-info {
                  flex : 0 0 100%;
                  max-width: 100%;
                  padding: 20px;
                  text-align: center;
            }

            .home .home-info p {
                  display: none;
            }

            .home .social-media-links{
                  width: 100%;
                  display: flex;
                  justify-content: center;
                  align-items: center;
            }
            
            .services {
                  padding: 60px;
            }
            
            .services .service-item {
                  flex: 0 0 100%;
                  max-width: 100%;
              }


             

              .portfolio .portfolio-items {
                  margin-bottom: 100px;
              }

               .section-title {
                  padding-left: 40px;
              }

              .about .about-info{
                  flex: 0 0 100%;
                  max-width: 100%;
                  padding: 20px;
              }

              .about .about-img{
                  margin-bottom: 100px;

              }

              .contact .contact-info {
                  flex-direction: column;
                  align-items: center;
                  padding: 40px;
              }
         }

         @media (max-width: 460px) {
            .home  {
                  flex-direction: column;
                  align-items: center;
                  justify-content: center;
                  text-align: center;
              }
              
              .home .home-info h3 {
                  font-size: 24px;
              }
              
              .home .home-info h3.my-profession {
                  font-size: 42px;
              }
              
              .home .home-info h3.desc span {
                  font-size: 32px;
              }
              
              .home .home-info p {
                  font-size: 16px;
              }
              
              .home .home-img::after {
                  display: none;
              }
              
              .home .home-img::before {
                  display: none;
              }
              
              .home .home-img img {
                  height: 200px;
            }
            
         }

      
      
        
        
        
        .section-title h2 {
            font-size: 32px;
            color: var(--text-black-900);
            text-transform: uppercase;
            letter-spacing: 2px;
            font-weight: bold;
        }
        
        /* Portfolio Filter Styling */
        .portfolio-filter {
            text-align: center;
            margin-bottom: 30px;
        }

        
        
        .portfolio-filter button {
            background-color: var(--skin-color);
            color: var(--text-black-900);
            border: 2px solid var(--bg-black-900);
            padding: 10px 20px;
            margin: 5px;
            border-radius: 5px;
            cursor: pointer;
            font-size: 16px;
        }
        
        .portfolio-filter button.active {
            background-color: var(--bg-black-);
            color: #fff;
            transition: all 0.3s ease;
        }
        
        /* Portfolio Items Styling */
        
        
      .portfolio .section-title {
            margin-top: 60px;
        }
        
        .portfolio-info h3 {
            font-size: 18px;
            color: var(--text-black-900);
            margin-bottom: 10px;
        }
        
        .portfolio-lightbox {
            display: inline-block;
            background-color: var(--text-black-700);
            color: #fff;
            padding: 10px;
            border-radius: 5px;
            text-decoration: none;
        }
        
        .portfolio-lightbox i {
            font-size: 16px;
        }

        .portfolio-item {
            flex: 1 1 33%; 
            box-sizing: border-box; 
            padding: 15px; 
        }
        
        .portfolio-img {
            max-width: 100%; 
            height: auto; 
            display: block; 
            border-radius: 10px;
        }

        .portfolio-video {
            max-width: 100%;
            height: 100%;
            display: block;
        }

        .video-wrapper {
            position: relative;
            width: 100%;
            max-width: 560px;
            margin: 0 auto;
        }

        .portfolio-video {
            width: 100%;
            height: 315px;
            border-radius: 10px;
            display: block;
        }

        .video-link {
            text-align: center;
            margin-top: 15px;
        }

        .video-link a {
            background: linear-gradient(135deg, #ff0000 0%, #cc0000 100%);
            color: #ffffff;
            text-decoration: none;
            font-size: 14px;
            font-weight: 600;
            display: inline-flex;
            align-items: center;
            gap: 8px;
            padding: 10px 20px;
            border-radius: 25px;
            transition: all 0.3s ease;
            border: 2px solid transparent;
            box-shadow: 0 4px 15px rgba(255, 0, 0, 0.2);
            text-transform: uppercase;
            letter-spacing: 0.5px;
        }

        .video-link a:hover {
            background: linear-gradient(135deg, #cc0000 0%, #990000 100%);
            transform: translateY(-2px);
            box-shadow: 0 6px 20px rgba(255, 0, 0, 0.3);
            border-color: #ff0000;
        }

        .video-link a i {
            font-size: 12px;
            transition: transform 0.3s ease;
        }

        .video-link a:hover i {
            transform: translateX(3px);
        }

        /* Alternative YouTube link styling using site theme colors */
        .video-link.theme-style a {
            background: linear-gradient(135deg, var(--skin-color) 0%, #c91437 100%);
            color: #ffffff;
            text-decoration: none;
            font-size: 14px;
            font-weight: 600;
            display: inline-flex;
            align-items: center;
            gap: 8px;
            padding: 12px 24px;
            border-radius: 30px;
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            border: 2px solid transparent;
            box-shadow: 0 4px 15px rgba(236, 24, 57, 0.2);
            text-transform: capitalize;
            letter-spacing: 0.3px;
            font-family: 'Poppins', sans-serif;
        }

        .video-link.theme-style a:hover {
            background: linear-gradient(135deg, #c91437 0%, #a01130 100%);
            transform: translateY(-3px);
            box-shadow: 0 8px 25px rgba(236, 24, 57, 0.4);
            border-color: var(--skin-color);
        }

        .video-link.theme-style a:active {
            transform: translateY(-1px);
            box-shadow: 0 4px 15px rgba(236, 24, 57, 0.3);
        }

        /* Responsive video */
        @media (max-width: 768px) {
            .portfolio-video {
                height: 200px;
            }
        }

        @media (max-width: 480px) {
            .portfolio-video {
                height: 180px;
            }
        }

        
        
        .modal {
            display: none;
            position: fixed;
            z-index: 9999;
            padding-top: 100px;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            overflow: auto;
            background-color: rgba(0, 0, 0, 0.9);
        }
    
        .modal-content {
            margin: auto;
            display: block;
            max-width: 80%;
        }
    
        .close {
            position: absolute;
            top: 15px;
            right: 35px;
            color: #fff;
            font-size: 40px;
            font-weight: bold;
            cursor: pointer;
        }
    
        .close:hover,
        .close:focus {
            color: #bbb;
            text-decoration: none;
            cursor: pointer;
        }

        /* Responsive styling for video links */
        @media (max-width: 768px) {
            .video-link a,
            .video-link.theme-style a {
                font-size: 12px;
                padding: 10px 18px;
                gap: 6px;
            }
        }

        @media (max-width: 480px) {
            .video-link a,
            .video-link.theme-style a {
                font-size: 11px;
                padding: 8px 16px;
                border-radius: 20px;
            }
        }