/*? CSS Variables */
/*? global styles */
:root {
   --color-text: #ffffff;
   --color-primary: #576cbc;
   --color-secondary: #19376d;
   --color-dark: #04152d;
   --font-roboto: "Roboto", sans-serif;
}

* {
   margin: 0;
   padding: 0;
   box-sizing: border-box;
   scroll-behavior: smooth;
}

body {
   font-family: var(--font-roboto), Arial, sans-serif;
   background: linear-gradient(135deg, #0c0c0c 0%, #59599c 80%, #4966b6 100%) !important;
   min-height: 100vh;
   color: var(--color-text);
   line-height: 1.6;
   overflow-x: hidden;

}
.container-width{
   max-width: 1900px;
   margin: 0 auto;
   
}
.about-items p {
   margin-bottom: 10px;
}

/* Navbar Styles */
a:visited {
   color: var(--color-text);
}
a:hover {
   color: var(--color-primary);
}
.navbar_text p {
   color: var(--color-text);
}

.navbar_text p a:visited {

   color: var(--color-primary);
}

.navbar {
   position: relative;
   display: flex;
   align-items: center;
   justify-content: space-between;
   padding-top: 61px;
   z-index: 2;
   margin: 0 10%;
}

.navbar-title {
   font-size: 30px;
   font-weight: 600;
   text-decoration: none;
   color: var(--color-text);
   transition: color 0.3s ease;
}

.menu {
   display: flex;
}

.menu-items {
   display: flex;
   gap: 47px;
   list-style: none;
  
}

.menu-items a {
   font-size: 25px;
   color: var(--color-text);
   text-decoration: none;
   transition: color 0.3s ease;
}

.menu-items a:hover {
   color: var(--color-primary);
}

/* Hero Styles */
.hero-container {
   position: relative;
   display: flex;
   align-items: center;
   justify-content: space-between;
   margin-top: 49px;
   z-index: 1;
   margin-left: 10%;
   margin-right: 10%;
}

.hero-content {
   display: flex;
   flex-direction: column;
   align-items: flex-start;
   color: var(--color-text);
   z-index: 1;
   width: 60%;
}

.hero-container {
   .hero-title h1 {
      font-size: 72px;
      font-weight: 900;
      margin-bottom: 33px;
      font-family: var(--font-roboto);
      background: linear-gradient(90deg,
            rgba(255, 255, 255, 1) 70%,
            rgba(255, 255, 255, 0) 120%);
      -webkit-text-fill-color: transparent;
      -webkit-background-clip: text;
      background-clip: text;
   }

   .hero-description p {
      font-size: 30px;
      font-family: var(--font-roboto);
      margin-bottom: 52px;
   }

   .contact-btn {
      text-decoration: none;
      background-color: var(--color-primary);
      color: var(--color-text);
      border-radius: 100px;
      font-size: 30px;
      font-weight: 600;
      padding: 17px 26px;
      box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.25);
      transition: all 0.3s ease;
   }

   .contact-btn:hover {
      background-color: #6b7fd1;
      transform: translateY(-2px);
   }

   .hero-img img {
      border-radius: 50%;
      max-height: 400px;
      max-width: 400px;

      z-index: 1;
      animation: floating 3s ease-in-out infinite;
   }
}

@keyframes floating {
   0% {
      transform: translate(0, 0px);
   }

   50% {
      transform: translate(0, 10px);
   }

   100% {
      transform: translate(0, 0px);
   }
}

.top-blur {
   position: absolute;
   width: 50vw;
   height: 50vw;
   min-width: 350px;
   top: -128px;
   left: -10vw;
   border-radius: 764px;
   background: rgba(25, 55, 109, 0.7);
   filter: blur(100px);
   z-index: 0;
}

.bottom-blur {
   position: absolute;
   width: 70vw;
   height: 50vw;
   min-width: 350px;
   top: 246px;
   right: -25vw;
   border-radius: 764px;
   background: rgba(25, 55, 109, 0.7);
   filter: blur(100px);
   z-index: 0;
}

/* About Styles */
.about-container {
   position: relative;
   background-color: rgba(12, 12, 12, 0.6);
   border-radius: 15px;
   padding: 73px;
   margin-top: 129px;
   z-index: 1;
   margin-left: 10%;
   margin-right: 10%;
}

.about-title h2 {
   color: var(--color-text);
   font-size: 35px;
   font-weight: 700;
   letter-spacing: 1.75px;
   text-transform: uppercase;
}

.about-title .widget {
   margin: 0 0 0em;
}

.about-content {
   display: flex;
   flex-direction: row;
   align-items: center;
   justify-content: space-between;
}

.about-image {
   width: 35%;
}

.about-items {
   color: var(--color-text);
   display: flex;
   flex-direction: column;
   gap: 50px;
   list-style: none;
}

.about-item {
   display: flex;
   flex-direction: row;
   align-items: center;
   border-radius: 20px;
   padding: 25px;
   background-image: linear-gradient(90deg,
         rgba(165, 215, 232, 0.42) 0%,
         rgba(255, 255, 255, 0) 100%);
   background-size: 0 100%;
   background-repeat: no-repeat;
   transition: 0.4s;
   max-width: 700px;
}

.about-item:hover {
   background-size: 100% 100%;
}

.about-item img {
   width: 50px;
   height: 50px;
   margin-right: 20px;
}

.about-item h3 {
   font-size: 25px;
   font-weight: 600;
}

.about-item p {
   font-size: 25px;
}

/* Experience Styles */
.experience-container {
   color: var(--color-text);
   margin-top: 79px;
   margin-left: 10%;
   margin-right: 10%;
   margin-bottom: 50px;
}

.experience-title h2 {
   color: var(--color-text);
   font-size: 35px;
   font-weight: 700;
   letter-spacing: 1.75px;
   text-transform: uppercase;
   margin-left: 70px;
}

.experience-title .widget {
   margin: 0 0 0em;
}

.experience-content {
   display: flex;
   flex-direction: row;
   justify-content: space-evenly;
   margin-top: 14px;
}

.skills {
   width: 40%;
   display: flex;
   flex-wrap: wrap;
   gap: 50px;
}

.skill {
   display: flex;
   flex-direction: column;
   align-items: center;
   gap: 11px;
}

.skill-image-container {
   background-color: var(--color-secondary);
   border-radius: 100%;
   display: flex;
   align-items: center;
   justify-content: center;
   width: 120px;
   height: 120px;
   transition: transform 0.3s ease;
}

.skill-image-container:hover {
   transform: scale(1.1);
}

.skill-image-container img {
   width: 75px;
}

.skill p {
   font-size: 25px;
   font-family: var(--font-roboto);
   font-weight: 500;
}

.history {
   width: 45%;
   display: flex;
   flex-direction: column;
   gap: 40px;
   list-style: none;
}

.history-item {
   display: flex;
   flex-direction: row;
   align-items: center;
   gap: 17px;
   background: linear-gradient(90deg,
         #19376d 0%,
         rgba(25, 55, 109, 0) 100%);
   border-radius: 10px;
   padding: 24px;
   transition: transform 0.3s ease;
}

.history-item:hover {
   transform: translateX(5px);
}

.history-item img {
   width: 50px;
}

.history-item-details {
   font-family: var(--font-roboto);
}

.history-item-details h3 {
   font-size: 30px;
   font-weight: 500;
}

.history-item-details p {
   font-size: 20px;
   font-weight: 300;
}

.history-item-details ul {
   margin-top: 6px;
   list-style-position: inside;
   font-size: 25px;
   list-style-type: disc;
   margin-left: 17px;
}

.history-item-details ul {
   font-size: 17.5px;
}

.about-container {
   padding-bottom: 50px;
}

.container {
   max-width: 1200px;
   margin: 0 auto;
   padding: 0 2rem;
}

.profile-header {
   text-align: center;
   margin-bottom: 3rem;
   color: var(--color-text);
}

.profile-avatar {
   width: 120px;
   height: 120px;
   border-radius: 50%;
   background: linear-gradient(45deg,
         var(--color-primary),
         var(--color-secondary));
   display: flex;
   align-items: center;
   justify-content: center;
   margin: 0 auto 1.5rem;
   font-size: 3rem;
   box-shadow: 0 8px 32px rgba(4, 21, 45, 0.4);
   animation: float 3s ease-in-out infinite;
}

@keyframes float {

   0%,
   100% {
      transform: translateY(0px);
   }

   50% {
      transform: translateY(-10px);
   }
}

.profile-name {
   font-size: 2.5rem;
   font-weight: 700;
   margin-bottom: 0.5rem;
   text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
}

.profile-title {
   font-size: 1.2rem;
   opacity: 0.9;
   font-weight: 300;
}

/* Projects  */
.projects-section {
   background: var(--color-dark);
   border-radius: 24px;
   padding: 3rem;
   box-shadow: none;
   border: none;
   margin-bottom: 120px;
}

.projects-section {
   .section-title h2 {
      font-size: 2.2rem;
      font-weight: 700;
      color: var(--color-text);
      margin-bottom: 1rem;
      text-align: center;
   }

   .section-subtitle {
      text-align: center;
      color: var(--color-text);
      margin-bottom: 2.5rem;
      font-size: 1.1rem;
      opacity: 0.8;
   }


   .filter-buttons {
      display: flex;
      justify-content: center;
      gap: 1rem;
      margin-bottom: 3rem;
      flex-wrap: wrap;
   }

   .filter-btn {
      padding: 0.75rem 1.5rem;
      border: 2px solid rgba(87, 108, 188, 0.3);
      background: transparent;
      color: var(--color-text);
      border-radius: 50px;
      cursor: pointer;
      transition: all 0.3s ease;
      font-weight: 500;
      position: relative;
      overflow: hidden;
   }

   .filter-btn:hover,
   .filter-btn.active {
      background: var(--color-primary);
      color: var(--color-text);
      border-color: var(--color-primary);
      transform: translateY(-2px);
      box-shadow: 0 8px 25px rgba(87, 108, 188, 0.4);
   }

   .projects-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 2rem;
      margin-top: 2rem;
   }

   .project-card {
      background: var(--color-primary);
      border-radius: 16px;
      overflow: hidden;
      box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
      transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
      border: none;
      position: relative;
   }

   .project-card::before {
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      height: 4px;
      background: linear-gradient(90deg, #ff6b6b, #4ecdc4, #45b7d1, #96ceb4);
      transform: scaleX(0);
      transition: transform 0.4s ease;
   }

   .project-card:hover {
      transform: translateY(-8px) scale(1.02);
      box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
   }

   .project-card:hover::before {
      transform: scaleX(1);
   }

   .project-image {
      height: 200px;
      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
      position: relative;
      overflow: hidden;
   }

   .project-image img {
      width: 100%;
      object-fit: cover;
   }

   /* .project-image::after {
      content: "";
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 60px;
      height: 60px;
      background: rgba(255, 255, 255, 0.2);
      border-radius: 50%;
      border: 2px solid rgba(255, 255, 255, 0.3);
   } */

   .project-content {
      padding: 1.5rem;
   }

   .project-category {
      display: inline-block;
      background: var(--color-dark);
      color: var(--color-text);
      padding: 0.25rem 0.75rem;
      border-radius: 20px;
      font-size: 0.8rem;
      font-weight: 500;
      margin-bottom: 1rem;
      text-transform: uppercase;
      letter-spacing: 0.5px;
   }

   .project-title {
      font-size: 1.3rem;
      font-weight: 700;
      color: var(--color-text);
      margin-bottom: 0.75rem;
      line-height: 1.3;
   }

   .project-description {
      color: var(--color-text);
      opacity: 0.9;
      line-height: 1.6;
      margin-bottom: 1.5rem;
      font-size: 0.95rem;
   }

   .project-tech {
      display: flex;
      flex-wrap: wrap;
      gap: 0.5rem;
      margin-bottom: 1.5rem;
   }
}

@media screen and (max-width: 950px) {
   .projects-section {
      .projects-grid {

         grid-template-columns: repeat(2, 1fr);

      }
   }

}

@media screen and (max-width: 950px) {
   .projects-section {
      .projects-grid {

         grid-template-columns: repeat(2, 1fr);

      }
   }

}

@media screen and (max-width: 650px) {
   .navbar-title {
      font-size: 16px;

   }

   .projects-section {
      .projects-grid {

         grid-template-columns: repeat(1, 1fr);

      }
   }

   .hero-content {
      .contact-btn {
         font-size: 20px;
      }
   }

   .about-container {
      .about-content p {
         font-size: 20px;
      }
   }

   .experience-title h2 {
      margin-left: 0px;
   }

}

.tech-tag {
   background: var(--color-dark);
   color: var(--color-text);
   padding: 0.25rem 0.75rem;
   border-radius: 12px;
   font-size: 0.8rem;
   font-weight: 500;
   border: none;
}

.project-links {
   display: flex;
   gap: 1rem;
}

.project-link {
   padding: 0.75rem 1.5rem;
   border-radius: 8px;
   text-decoration: none;
   font-weight: 500;
   transition: all 0.3s ease;
   font-size: 0.9rem;
}

.link-primary {
   background: var(--color-secondary);
   color: var(--color-text);
}

.link-secondary {
   background: transparent;
   color: var(--color-text);
   border: 2px solid var(--color-text);
}

.project-link:hover {
   transform: translateY(-2px);
   box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
}

.hidden {
   display: none;
}

/* Contact Styles */
footer {
   background-color: var(--color-secondary);
   margin-bottom: -25px;
}

.privacy-policy {
   text-align: center;
}

.privacy-policy a {
   color: #cec9c960;
}

.privacy-policy a:hover {
   color: var(--color-primary);
}


.contact-container {
   color: var(--color-text);
   display: flex;
   flex-direction: row;
   justify-content: space-evenly;
   width: 100vw;
   padding: 58px 10%;
   gap: 10px;

}

.contact-text h2 {
   font-size: 80px;
   font-weight: 700;
   letter-spacing: 4px;
}

.contact-text p {
   font-size: 40px;
   font-weight: 400;
   letter-spacing: 2px;
}

.contact-links {
   display: flex;
   flex-direction: column;
   align-items: flex-start;
   list-style: none;
   gap: 26px;
}

.contact-link {
   display: flex;
   align-items: center;
   gap: 25px;
   transition: transform 0.3s ease;
}

.contact-link:hover {
   transform: translateX(10px);
}

.contact-link img {
   width: 30px;
   height: 30px;
}

.contact-link a {
   color: var(--color-text);
   text-decoration: none;
   font-size: 30px;
   font-weight: 400;
   letter-spacing: 1.5px;
}

.menu-btn {
   display: none;
   cursor: pointer;
   width: 30px;
   height: 30px;
}

/*NOTE Contact form */



.rez-main-contact {
   background: var(--color-secondary);
   border-radius: 20px;
   padding: 60px 50px;
   box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
   border: 1px solid rgba(87, 108, 188, 0.2);
   max-width: 700px;
   margin: 0 auto;
   position: relative;
   margin-bottom: 50px;
   color: white !important;

   .wpforms-field-label .wpforms-required-label {
      display: none !important;
      color: var(--color-text);
   }


   .heading {
      text-align: center;
      font-size: 25px;
   }

   .wpforms-field-label {
      color: var(--color-text) !important;
   }

   input {
      background: var(--color-primary) !important;
      border: 1px solid var(--color-text);
      color: var(--color-text) !important;
      padding: 20px;
      border-radius: 10px !important;
      height: 55px !important;
      font-size: 22px;
   }

   div.wpforms-container-full .wpforms-form textarea {
      background: var(--color-primary) !important;
      color: var(--color-text) !important;
      border-radius: 10px !important;
      height: 100px !important;
      resize: none;
   }

   .wpforms-container input.wpforms-field-medium,
   .wpforms-container select.wpforms-field-medium,
   .wpforms-container .wpforms-field-row.wpforms-field-medium,
   .wp-core-ui div.wpforms-container input.wpforms-field-medium,
   .wp-core-ui div.wpforms-container select.wpforms-field-medium,
   .wp-core-ui div.wpforms-container .wpforms-field-row.wpforms-field-medium {
      max-width: 100%;
   }

   #wpforms-submit-122 {
      width: 100%;
      height: 60px;
      border-radius: 5px;
   }
}

/* Mobile Responsive */
@media (max-width: 500px) {
   .hero-container {
      .hero-title h1 {
         margin-bottom: -40px;
      }

      .hero-img img {
         max-height: 300px;
         max-width: 300px;
      }

      .hero-description p {
         font-size: 15px;
      }
   }

   .about-container {
      margin-top: 0px;
   }

   .experience-container {
      margin-top: 0px;
   }

   .rez-main-contact {
      padding: 30px 20px;
      margin: 10px;
   }
}

@media (max-width: 768px) {
   .hero-container {
      .hero-title h1 {
         font-size: 50px;
      }

      .hero-description p {
         font-size: 20px;
      }
   }


   .container {
      padding: 0 1rem;
   }

   /* project section  */
   .projects-section {
      padding: 2rem;
      border-radius: 16px;
   }

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

   .profile-name {
      font-size: 2rem;
   }

   .filter-buttons {
      gap: 0.5rem;
   }

   .filter-btn {
      padding: 0.5rem 1rem;
      font-size: 0.9rem;
   }

   .history-item-details h3 {
      font-size: 20px;
   }

   .history-item-details p {
      font-size: 14px;
   }



   .history-item-details ul li {
      font-size: 15px;
   }

   .project-link {

      padding: 0.75rem 1rem;
   }

   .project-links a {
      font-size: 10px;
   }

   .experience-title {
      margin-left: 0px;
   }

   footer {
      overflow-x: hidden;

      .contact-links {
         li a {
            font-size: 12px;
         }
      }
   }
}

@media screen and (max-width: 830px) {
   .navbar {
      flex-direction: column;
      align-items: flex-start;
   }

   .menu {
      position: absolute;
      right: 0;
      margin-right: 10%;
      flex-direction: column;
      align-items: flex-end;
      gap: 11px;
      z-index: 3;
   }

   .menu-btn {
      display: block;
   }

   .menu-items {
      display: none;
      flex-direction: column;
      align-items: center;
      gap: 13px;
      border-radius: 10px;
      background: linear-gradient(0deg,
            rgba(25, 55, 109, 0.2) 0%,
            rgba(25, 55, 109, 1) 100%);
      padding: 24px 33px;
      box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.25);
   }

   .menu-open {
      display: flex !important;
      z-index: 1;
   }

   .hero-container {
      flex-direction: column-reverse;
   }

   .hero-content {
      align-items: center;
      text-align: center;
   }

   .hero-title {
      font-size: 48px;
   }

   .hero-description {
      font-size: 24px;
   }

   .about-container {
      background-color: transparent;
      padding-left: 0;
      padding-right: 0;
   }

   .about-content {
      flex-direction: column;
   }

   .about-image {
      display: none;
   }

   .about-items {
      margin-top: 29px;
   }

   .about-item {
      padding-left: 0;
      padding-right: 0;
   }

   .experience-content {
      flex-direction: column;
      align-items: center;
      gap: 34px;
   }

   .skills {
      width: 100%;
      flex-direction: row;
      justify-content: center;
   }

   .history {
      width: 100%;
      gap: 9px;
   }

   .contact-container {
      flex-direction: column;
      gap: 23px;
   }

   .contact-text {
      display: flex;
      flex-direction: column;
      align-items: center;
      text-align: center;
   }

   .contact-text h2 {
      font-size: 60px;
   }

   .contact-text p {
      font-size: 30px;
   }

   .contact-links {
      margin: 0 auto;
   }
}

@media (max-width: 450px) {
   .hero-container {
      .hero-title h1 {
         font-size: 30px;
      }

      .hero-img img {
         max-height: 150px;
         max-width: 150px;
      }

      .hero-description p {
         font-size: 15px;
      }

   }

   .about-title h2,
   .experience-title h2,
   .projects-section .section-title h2 {
      font-size: 25px;
   }

   .about-item h3,
   .skill p {
      font-size: 20px;
   }

   .about-container {
      & .about-content p {
         font-size: 14px;
      }
   }

   .history-item-details h3 {
      font-size: 15px;
   }

   .history-item-details ul li {
      font-size: 12px;
   }

   .hero-content {

      width: 100%;
   }

   .about-title h2,
   .experience-title h2 {
      text-align: center;
   }

   .about-item {
      flex-direction: column;
      padding: 10px;
      margin-bottom: 15px;
   }

   .about-items {

      gap: 10px;
   }

   ul,
   ol {
      margin: 0 0 0em 0em;
      margin-top: 0px;
   }

   .history-item {
      flex-direction: column;
   }

   .hero-container {
      .hero-description p {
         margin-bottom: 5px;
      }
   }
}