/*========================================================
THIS FILE'S INDEX (till 07th Dec 2025):
1. COLORS SCALES:
 - PRIMARY COLOR SCALE
 - ACCENT COLOR SCALE
 - GREY COLOR SCALE
 - OTHER REQUIRED COLORS
 - TEXT COLORS

2. BUTTONS: 
 - PRIMARY BUTTON COLORS
 - SECONDARY BUTTON COLORS
 - LINK BUTTON COLORS

3. BACKGROUND: 
 - BACKGROUND COLORS

4. FONT/TEXT: 
 - Font family
 - Font sizes
 - Font weights
 - Line height

5. 
========================================================*/

:root {
/* ---------------------------
       1. COLOR SCALE
--------------------------- */  

/* ----PRIMARY COLOR SCALE----*/
--color-primary-50:  #e6f0ff;
--color-primary-75:  #96c0ff;
--color-primary-100: #6ba6ff;  
--color-primary-200: #2b7fff;
--color-primary-300: #0065ff;   /* main color*/
--color-primary-400: #0047b3;
--color-primary-500: #003e9c;

/* ----ACCENT COLOR SCALE----*/
--color-accent-50:  #e8f8f6;
--color-accent-75:  #9fe2db;
--color-accent-100: #77d6cb;
--color-accent-200: #3cc4b5;
--color-accent-300: #14b8a6;   /* main color */
--color-accent-400: #0e8174;   
--color-accent-500: #05332e;

/* ----GREY COLOR SCALE----*/
--color-gray-50:  #FFFFFF;  
--color-gray-100: #E8E8E8;
--color-gray-200: #AFB6B6;
--color-gray-300: #868A8A;
--color-gray-400: #56565d;
--color-gray-500: #323434;
--color-gray-600: #1D1E1E;   
--color-gray-700: #101112;  
--color-gray-800: #000000;

/* ----OTHER REQUIRED COLORS----*/
--success: #22c55e;
--warning: #f59e0b;
--danger:  #ef4444;
--Black:   #000000;
--White:   #ffffff;  

/* -----------------------
      2. BUTTON
----------------------- */  

/* ----PRIMARY BUTTON COLORS----*/ 
--btn-primary-bg: var(--color-primary-300);
--btn-primary-bg-hover: var(--color-primary-500);
--btn-primary-text: var(--text-on-primary);
--btn-primary-border: none;

/* ----SECONDARY BUTTON COLORS----*/ 
--btn-secondary-bg: transparent;
--btn-secondary-border: #ffffff60;
--btn-secondary-text: var(--color-gray-50);
--btn-secondary-hover-bg: #ffffff20;

/* ----LINK BUTTON COLORS----*/ 
--btn-link-text: var(--color-gray-800);
--btn-link-hover-text: var(--color-primary-300);

/* -----------------------
  3. OTHER COLORS
----------------------- */  

/* ----BACKGROUND COLORS----*/  
--color-bg-main: var(--color-gray-50);        /* Pure black */
--color-bg-subtle: var(--color-gray-100);     /* Elevated surfaces */
--color-bg-glass: rgba(0, 0, 0, 0.35);         /* Glass panels */

/* ----BORDERS & DIVIDERS---- */
--border-subtle: var(--color-primary-100);
--border-hover: var(--color-primary-200);

--color-primary: var(--blue-500);
--color-primary-hover: var(--blue-600);
--color-primary-active: var(--blue-700);

--color-success: var(--green-500);
--color-error: var(--red-500);
--color-warning: var(--yellow-500);

/* ----TEXT COLORS---- */
--text-primary: var(--color-gray-50);         /* Main headings */
--text-secondary: var(--color-gray-300);      /* Body, nav links */
--text-tertiary: var(--color-gray-200);       /* Muted info */
--text-disabled: var(--color-gray-400);       /* Disabled text */

--text-on-primary: #ffffff;                    /* only used on primary button */
--text-on-secondary: var(--color-primary-300);   /* outlined button text */
--text-link: var(--color-primary-300);

/* ----INTERACTION STATES---- */
--hover-bg-light: rgba(255, 255, 255, 0.08);
--hover-bg-strong: rgba(255, 255, 255, 0.16);

/* ----ACCENT USAGE---- */
--accent-soft: var(--color-accent-200);
--accent-main: var(--color-accent-300);
--accent-strong: var(--color-accent-400);

/* -----------------------
     3. FONT/TEXT
----------------------- */  

/* ----FONT FAMILY----*/
--font-family-text: "Montserrat", Arial, sans-serif;
--font-family-heading: "Ubuntu", sans-serif;

/* ----FONT SIZES----*/
--font-size-12: clamp(0.65rem, 0.6vw + 0.4rem, 0.75rem);
--font-size-14: clamp(0.75rem, 0.7vw + 0.4rem, 0.875rem);
--font-size-16: clamp(0.9rem, 0.8vw + 0.5rem, 1rem);
--font-size-20: clamp(1.125rem, 1vw + 0.6rem, 1.25rem);
--font-size-24: clamp(1.25rem, 1.4vw + 0.6rem, 1.5rem);
--font-size-32: clamp(1.625rem, 2vw + 0.6rem, 2rem);
--font-size-40: clamp(1.75rem, 2.5vw + 0.8rem, 2.5rem);
--font-size-48: clamp(2rem, 3vw + 0.8rem, 3rem);
--font-size-56: clamp(2.125rem, 3.5vw + 1rem, 3.5rem);
--font-size-72: clamp(2.25rem, 4vw + 1rem, 4.5rem);
--font-size-80: clamp(2.25rem, 6vw + 0.5rem, 5rem);
--font-size-80: clamp(2.25rem, 6vw + 0.5rem, 5rem);

/* ----FONT WEIGHT----*/
--font-weight-regular: 400;
--font-weight-medium: 500;
--font-weight-semibold: 600;

/* ----LINE HEIGHTS----*/
--line-height-tight: 1.2;
--line-height-normal: 1.4;
--line-height-relaxed: 1.6;

/* ----SPACING SCALE (4px system)----*/
--spacing-0: 0px;
--spacing-4: 4px;
--spacing-8: 8px;
--spacing-12: 12px;
--spacing-16: 16px;
--spacing-20: 20px;
--spacing-24: 24px;
--spacing-32: 32px;
--spacing-40: 40px;
--spacing-48: 48px;
--spacing-56: 56px;
--spacing-64: 64px;
--spacing-72: 72px;

/* ----BORDER & RADIUS TOKENS----*/
--border-width-1: 1px;
--border-width-2: 2px;

--radius-none: 0px;
--radius-sm4: 4px;
--radius-md8: 8px;
--radius-lg12: 12px;
--radius-xl16: 16px;
--radius-rounded: 9999px;
}

/* --------------------------------
     16. COMMON CLASSES DEFINED
----------------------------------- */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-family-heading);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-normal);
  margin-bottom: var(--spacing-4);
  color: var(--color-gray-800);
}

h1 { font-size: var(--font-size-80); font-weight: var(--font-weight-semibold); }
h2 { font-size: var(--font-size-48); }
h3 { font-size: var(--font-size-40); }
h4 { font-size: var(--font-size-32); }
h5 { font-size: var(--font-size-24); }
h6 { font-size: var(--font-size-20); }

.p1 { font-size: var(--font-size-20); line-height: var(--line-height-normal); font-weight: var(--font-weight-semibold); color: var(--color-gray-600); }
.p2 { font-size: var(--font-size-16); line-height: var(--line-height-relaxed); font-weight: var(--font-weight-medium); color: var(--color-gray-500); }
.p3 { font-size: var(--font-size-14); line-height: var(--line-height-relaxed); font-weight: var(--font-weight-medium); color: var(--color-gray-400); }
.p4 { font-size: var(--font-size-12); line-height: var(--line-height-relaxed); font-weight: var(--font-weight-medium); color: var(--color-gray-400); }

.support-text {
  font-size: var(--font-size-18);
  color: var(--color-gray-300);
  font-family:var(--font-family-text) ;
  line-height: var(--line-height-relaxed);
}

.items-row {
  display: flex;
  align-items: center;
  gap: 12px;
}

.tag-item1{
  display: flex;
  padding: 8px 20px;
  gap: 8px;
  justify-content: center;
  align-items: center;
  font-size: var(--font-size-14);
  font-weight: var(--font-weight-medium);
  color: var(--color-gray-500);
  font-family: var(--font-family-text);
  line-height: var(--line-height-normal);
  border-radius: var(--radius-rounded);
  background: #0f3a3b1d;
  -webkit-backdrop-filter: blur(1.5px);
  -webkit-user-select: none; /* Safari / iOS */
  -ms-user-select: none;     /* Old Edge */
  user-select: none;         /* Modern browsers */    
}

.tag-item2 {
  display: flex;
  padding: 8px 20px;
  justify-content: center;
  align-items: center;
  gap: 10px;
  font-size: var(--font-size-12);
  color: var(--color-gray-100);
  font-family:var(--font-family-text) ;
  line-height: var(--line-height-normal);
  border-radius: var(--radius-rounded);
  border: 1px solid rgba(255, 255, 255, 0.20);
  background: #00000050;
  backdrop-filter: blur(1.5px);
  -webkit-backdrop-filter: blur(1.5px);
  -webkit-user-select: none; /* Safari / iOS */
  -ms-user-select: none;     /* Old Edge */
  user-select: none;         /* Modern browsers */
}



.tag-item3 {
  display: flex;
  padding: 6px 12px;
  justify-content: center;
  align-items: center;
  font-size: var(--font-size-12);
  font-weight: var(--font-weight-medium);
  color: var(--color-gray-300);
  font-family: var(--font-family-text);
  line-height: var(--line-height-normal);
  border-radius: var(--radius-rounded);
  background: #00000050;
  -webkit-backdrop-filter: blur(1.5px);
  -webkit-user-select: none; /* Safari / iOS */
  -ms-user-select: none;     /* Old Edge */
  user-select: none;         /* Modern browsers */ 
}

/* --------------------------------
         HEADER CSS CLASSES
----------------------------------- */
.header-wrapper {
  position: fixed;
  padding: 20px 180px 0;
  display: flex;
  justify-content: center;
  width: 100%;
  z-index: 999;
}
.header {
  font-size: var(--font-size-14);
  display: flex;
  align-items: center;
  gap: var(--spacing-40);
  padding: 8px;
  background: #fff;
  border: var(--border-width-1) solid #00000012;
  border-radius: var(--radius-lg12);
}
.logo {
  margin-left: var(--spacing-12);
  font-size: var(--font-size-16);
  font-weight: var(--font-weight-semibold);
  color: #000;
  letter-spacing: 0.8px;
  background: none;
}
.nav-links {
  display: flex;
  align-items: center;
  gap: var(--spacing-24);
  list-style: none;
}
.nav-links a {
  text-decoration: none;
  color: var(--text-secondary);
  font-weight: var(--font-weight-medium);
  transition: 0.2s;
  border-radius: var(--radius-rounded);
  background: none;  
}
.nav-links a.active {
  color: #000;
}
.resume-btn {
  padding: 8px 18px;
  border-radius: var(--radius-md8);
  font-weight: var(--font-weight-medium);
  text-decoration: none;
  color: var(--text-on-primary);
  background: var(--btn-primary-bg);
  transition: 0.2s ease;
}
.menu-icon {
  display: none;
}
.mobileheader{
  display: none;
}

/*------------------------
    FOOTER SECTION CSS
------------------------*/
.wr_for_bo1 {
  padding: 80px 30px 0 30px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.ftr {
  max-width: 1000px;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--spacing-32);
  margin-bottom: 40px;
}
.ftr-head-content {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.support-text-02 {
  font-weight: 500;
  color: var(--color-gray-400);
  letter-spacing: 0.3px;  
  line-height: 1.6;
}
.support-text-01 {
  font-weight: 500;
  color: var(--color-gray-600);
  letter-spacing: 0.3px;
  line-height: 1.6;
}
/* EMAIL BUTTON */
.email-btn {
  background: var(--btn-primary-bg);
  color: var(--text-on-primary);
  border: none;
  padding: 16px 24px;
  text-decoration: none;
  font-family: var(--font-family-text);
  border-radius: var(--radius-md8);
  font-size: var(--font-size-14);
  font-weight: var(--font-weight-medium);
  cursor: pointer;
  transition: 0.2s;
}
/* FOOTER DIVIDER */
.footer-divider img {
  width: 200px;
  display: block;
}
/* FOOTER LINKS */
.footer-links {
  display: flex;
  justify-content: center;
  gap: var(--spacing-32);
  background: none;
}
.links {
  text-decoration: none;
  color: var(--btn-link-text);
  font-weight: var(--font-weight-medium);
  transition: 0.2s;
}

/*-----------------------
     HOVER EFFECTS
------------------------*/
@media (hover: hover) {
  /*-----------------------
     HEADER HOVER EFFECTS
  ------------------------*/
  .nav-links a:hover {
    color: var(--Black);
    background: var(--color-gray-100);
    padding: 8px 12px;
  }
  .nav-links a.active:hover {
    color: var(--White);
    background: var(--color-gray-800);
  } 
  .strip img:hover {
    transform: scale(0.9);
  }
  .resume-btn:hover {
    background: var(--btn-primary-bg-hover);
  }
  /*-----------------------
     FOOTER HOVER EFFECTS
  ------------------------*/
  .email-btn:hover {
    background: var(--btn-primary-bg-hover);
  }  
  .btn-sec:hover {
    background: var(--color-gray-600);
    box-shadow: inset 0 0 0 2px var(--color-primary-50);
  }
  .links:hover {
    color: var(--btn-link-hover-text);
    text-decoration: none;
  }
  .input-field:hover,
  .message-box:hover {
    border: 1px solid var(--color-accent-400);
    background: rgba(255, 255, 255, 0.18);
  }
  .submit-btn:hover {
    background: var(--btn-primary-bg-hover);
  }
  .secondary-btn:hover {
    background: var(--btn-secondary-hover-bg);
  }
}

/*-----------------------
  RESPONSIVE AFTER 768PX
------------------------*/
@media (max-width: 768px) {
  /* MOBILE HEADER */
  .header-wrapper {
    padding: 20px 20px;
  }
  .header {
    width: 100%;
    justify-content: space-between;
    padding: 20px 20px 20px 8px;
    border: var(--border-width-1) solid #00000024;
    border-radius: var(--radius-lg12);
  }
  .nav-links,
  .resume-btn {
    display: none;
  }
  .logo {
    font-size: var(--font-size-20);
  }
  .menu-icon {
    display: flex;
    align-items: center;
  }
  .mobileheader{
    display: contents;
  }
  /* Mobile Menu Fullscreen */
  .mobile-menu {
    position: fixed;
    top: 0;
    left: 0;
    display: flex;   
    flex-direction: column; 
    width: 100%;
    height: 100vh;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    background-color: #0b0b0b;
    z-index: 1000;
    transform: translateX(100%);
    transition: transform 0.3s ease-in-out;
  }
  .mobile-menu.active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateX(0);
  }
  /* Header */
  .menu-header {
    display: flex;
    padding: 40px;
    justify-content: space-between;
    align-items: center;
    align-self: stretch;
  }
  .menu-header .mobile-logo {
    font-size: var(--font-size-24);
    font-weight: var(--font-weight-semibold);
    color: var(--text-primary);
    letter-spacing: 0.8px;
    background: none;
  }
  .menu-close {
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
  }
  .resume-container {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px 40px 20px 40px;
  }
  .resume-btnn {
    padding: 20px;
    width: 100%;
    border-radius: var(--radius-xl16);
    font-weight: var(--font-weight-medium);
    text-decoration: none;
    text-align: center;
    color: var(--text-on-primary);
    background: var(--btn-primary-bg);
    transition: 0.2s ease;
  }
  .mobile-nav-links {
    display: flex;
    flex-direction: column;
    justify-content: top;
    align-items: center;
    height: auto;
    padding: 50px;
    gap: 50px;
    align-self: stretch;
  }
  .mobile-nav-links a {
    text-decoration: none;
    color: var(--text-secondary);
    font-size: var(--font-size-32);
    font-weight: var(--font-weight-medium);
    transition: 0.2s;
  }
  .mobile-nav-links a.active {
    color: var(--text-primary);
  }

  /* MOBILE FOOTER */
  .wr_for_bo1 {
    padding: 48px 20px 12px 20px;
  }
  .ftr-head-content h2 {
    font-size: var(--font-size-32);
  }
  .ftr-head-content p {
    text-align: center;
  }
}