/*-----------------------------------*\
  #CUSTOM PROPERTY
\*-----------------------------------*/

:root {

  /**
   * colors
   */

  /* gradient colors */
  
  --bg-gradient-onyx: linear-gradient(
    to bottom right, 
    hsl(240, 1%, 25%) 3%,  /* Dark shade */
    hsl(0, 0%, 19%) 97%    /* Lighter shade */
  );
  --bg-gradient-jet: linear-gradient(
    to bottom right, 
    hsla(240, 1%, 18%, 0.251) 0%, /* Transparent dark shade */
    hsla(240, 2%, 11%, 0) 100%    /* Fading to transparent */
  ), hsl(240, 2%, 13%);            /* Solid dark shade */
  --bg-gradient-yellow-1: linear-gradient(
    to bottom right, 
    hsl(45, 100%, 71%) 0%,        /* Bright yellow */
    hsla(36, 100%, 69%, 0) 50%    /* Fading yellow */
  );
  --bg-gradient-yellow-2: linear-gradient(
    135deg, 
    hsla(45, 100%, 71%, 0.251) 0%, /* Transparent yellow */
    hsla(35, 100%, 68%, 0) 59.86%  /* Fading yellow */
  ), hsl(240, 2%, 13%);            /* Dark background shade */
  --border-gradient-onyx: linear-gradient(
    to bottom right, 
    hsl(0, 0%, 25%) 0%,  /* Dark border shade */
    hsla(0, 0%, 25%, 0) 50% /* Fading transparent border */
  );
  --text-gradient-yellow: linear-gradient(
    to right, 
    hsl(45, 100%, 72%), /* Bright yellow */
    hsl(35, 100%, 68%)  /* Warm yellow */
  );

  /* solid colors */

  --jet: hsl(0, 0%, 22%);           /* Very dark gray */
  --onyx: hsl(240, 1%, 17%);        /* Dark gray with blueish tint */
  --eerie-black-1: hsl(240, 2%, 13%);/* Very dark gray, close to black */
  --eerie-black-2: hsl(240, 2%, 12%);/* Slightly darker than eerie-black-1 */
  --smoky-black: hsl(0, 0%, 7%);    /* Almost black */
  --white-1: hsl(0, 0%, 100%);      /* Pure white */
  --white-2: hsl(0, 0%, 98%);       /* Slightly off-white */
  --orange-yellow-crayola: hsl(45, 100%, 72%); /* Bright yellow-orange */
  --vegas-gold: hsl(45, 54%, 58%);  /* Gold tone */
  --light-gray: hsl(0, 0%, 84%);    /* Light gray */
  --light-gray-70: hsla(0, 0%, 84%, 0.7); /* Light gray with transparency */
  --bittersweet-shimmer: hsl(0, 43%, 51%); /* Warm reddish shimmer */

  /**
   * typography
   */

  /* font-family */
  --ff-poppins: 'Poppins', sans-serif; /* Primary font family */

  /* font-size for various text elements */
  --fs-1: 24px;  /* Large text size */
  --fs-2: 18px;  /* Medium text size */
  --fs-3: 17px;  /* Regular text size */
  --fs-4: 16px;  /* Small text size */
  --fs-5: 15px;  /* Smaller text size */
  --fs-6: 14px;  /* Smallest text size */
  --fs-7: 13px;  /* Tiny text size */
  --fs-8: 11px;  /* Micro text size */

  /* font-weight values */
  --fw-300: 300; /* Light weight */
  --fw-400: 400; /* Normal weight */
  --fw-500: 500; /* Medium weight */
  --fw-600: 600; /* Bold weight */

  /**
   * shadow
   */
  
  --shadow-1: -4px 8px 24px hsla(0, 0%, 0%, 0.25); /* Subtle shadow */
  --shadow-2: 0 16px 30px hsla(0, 0%, 0%, 0.25);  /* Medium shadow */
  --shadow-3: 0 16px 40px hsla(0, 0%, 0%, 0.25);  /* Stronger shadow */
  --shadow-4: 0 25px 50px hsla(0, 0%, 0%, 0.15);  /* Large shadow */
  --shadow-5: 0 24px 80px hsla(0, 0%, 0%, 0.25);  /* Deep shadow */

  /**
   * transition
   */

  --transition-1: 0.25s ease; /* Quick transition */
  --transition-2: 0.5s ease-in-out; /* Smooth, slow transition */
}

/*-----------------------------------*\
  #RESET
\*-----------------------------------*/

*, *::before, *::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box; /* Reset margin, padding, and box-sizing for all elements */
}

a { text-decoration: none; } /* Remove text decoration (underlines) from links */

li { list-style: none; } /* Remove default bullet points from list items */

img, ion-icon, a, button, time, span { display: block; } /* Ensure these elements are block-level */

button {
  font: inherit; /* Inherit font from parent */
  background: none; /* Remove background */
  border: none; /* Remove border */
  text-align: left; /* Align text to the left */
  cursor: pointer; /* Set cursor to pointer for clickable buttons */
}

input, textarea {
  display: block; /* Make input and textarea elements block-level */
  width: 100%; /* Ensure inputs take full width */
  background: none; /* Remove background */
  font: inherit; /* Inherit font from parent */
}

::selection {
  background: var(--orange-yellow-crayola); /* Set background color when text is selected */
  color: var(--smoky-black); /* Set text color when selected */
}

:focus { outline-color: var(--orange-yellow-crayola); } /* Change outline color when an element is focused */

html { font-family: var(--ff-poppins); } /* Set base font for the entire page */

body { background: var(--smoky-black); } /* Set background color for the body */

/*-----------------------------------*\
  #REUSED STYLE
\*-----------------------------------*/

.sidebar,
article {
  background: var(--eerie-black-2); /* Set background color */
  border: 1px solid var(--jet); /* Add border color */
  border-radius: 20px; /* Round corners */
  padding: 15px; /* Add padding inside the element */
  box-shadow: var(--shadow-1); /* Apply shadow */
  z-index: 1; /* Ensure the element is on top of other content */
}

.separator {
  width: 100%; /* Set the separator width to 100% */
  height: 1px; /* Set separator height to 1px */
  background: var(--jet); /* Set background color */
  margin: 16px 0; /* Add vertical margin */
}

.icon-box {
  position: relative; /* Set position relative for positioning child elements */
  background: var(--border-gradient-onyx); /* Set gradient background */
  width: 30px; /* Set width */
  height: 30px; /* Set height */
  border-radius: 8px; /* Round corners */
  display: flex; /* Use flexbox for layout */
  justify-content: center; /* Center content horizontally */
  align-items: center; /* Center content vertically */
  font-size: 16px; /* Set font size */
  color: var(--orange-yellow-crayola); /* Set text color */
  box-shadow: var(--shadow-1); /* Apply shadow */
  z-index: 1; /* Ensure the element is on top of other content */
}

.icon-box::before {
  content: ""; /* Create a pseudo-element */
  position: absolute; /* Position absolutely within the parent */
  inset: 1px; /* Set padding for the pseudo-element */
  background: var(--eerie-black-1); /* Set background color */
  border-radius: inherit; /* Inherit border-radius from parent */
  z-index: -1; /* Send pseudo-element behind the icon */
}

.icon-box ion-icon { --ionicon-stroke-width: 35px; } /* Set stroke width for ion-icon */

/*-----------------------------------*\
  #ARTICLE STYLES
\*-----------------------------------*/

article { display: none; } /* Hide article by default */

article.active {
  display: block; /* Show article when active */
  animation: fade 0.5s ease backwards; /* Apply fade-in animation */
}

@keyframes fade {
  0% { opacity: 0; } /* Start with opacity 0 */
  100% { opacity: 1; } /* End with full opacity */
}

.h2,
.h3,
.h4,
.h5 {
  color: var(--white-2); /* Set text color */
  text-transform: capitalize; /* Capitalize text */
}

.h2 { font-size: var(--fs-1); } /* Set font size for h2 */
.h3 { font-size: var(--fs-2); } /* Set font size for h3 */
.h4 { font-size: var(--fs-4); } /* Set font size for h4 */
.h5 {
  font-size: var(--fs-7); /* Set font size for h5 */
  font-weight: var(--fw-500); /* Set font weight */
}

/*-----------------------------------*\
  #ARTICLE TITLE STYLES
\*-----------------------------------*/

.article-title {
  position: relative; /* Position article title relative */
  padding-bottom: 7px; /* Add padding to bottom */
}

.article-title::after {
  content: ""; /* Create a pseudo-element */
  position: absolute; /* Position it absolutely */
  bottom: 0; /* Position at the bottom */
  left: 0; /* Align left */
  width: 30px; /* Set width */
  height: 3px; /* Set height */
  background: var(--text-gradient-yellow); /* Set gradient background */
  border-radius: 3px; /* Round corners */
}

/*-----------------------------------*\
  #SCROLLBAR STYLES
\*-----------------------------------*/

.has-scrollbar::-webkit-scrollbar {
  width: 5px; /* Set width for vertical scrollbar */
  height: 5px; /* Set height for horizontal scrollbar */
}

.has-scrollbar::-webkit-scrollbar-track {
  background: var(--onyx); /* Set track color */
  border-radius: 5px; /* Round track corners */
}

.has-scrollbar::-webkit-scrollbar-thumb {
  background: var(--orange-yellow-crayola); /* Set thumb color */
  border-radius: 5px; /* Round thumb corners */
}

.has-scrollbar::-webkit-scrollbar-button { width: 20px; } /* Set width for scrollbar button */

/*-----------------------------------*\
  #CONTENT CARD STYLES
\*-----------------------------------*/

.content-card {
  position: relative; /* Set position relative */
  background: var(--border-gradient-onyx); /* Set background gradient */
  padding: 15px; /* Add padding */
  padding-top: 45px; /* Add additional padding at the top */
  border-radius: 14px; /* Round corners */
  box-shadow: var(--shadow-2); /* Apply shadow */
  cursor: pointer; /* Change cursor to pointer when hovering */
  z-index: 1; /* Ensure the element is on top */
}

.content-card::before {
  content: ""; /* Create a pseudo-element */
  position: absolute; /* Position absolutely within the parent */
  inset: 1px; /* Set padding for the pseudo-element */
  background: var(--bg-gradient-jet); /* Set background gradient */
  border-radius: inherit; /* Inherit border-radius from parent */
  z-index: -1; /* Send pseudo-element behind the content */
}

/*-----------------------------------*\
  #MAIN
\*-----------------------------------*/

main {
  margin: 15px 12px; /* Sets margins for the main section */
  margin-bottom: 75px; /* Additional bottom margin */
  min-width: 259px; /* Minimum width for the main section */
}

/*-----------------------------------*\
  #SIDEBAR
\*-----------------------------------*/

.sidebar {
  margin-bottom: 15px; /* Bottom margin for the sidebar */
  max-height: 112px; /* Max height of the sidebar */
  overflow: hidden; /* Hides content that exceeds the max-height */
  transition: var(--transition-2); /* Smooth transition for changes */
}

.sidebar.active { 
  max-height: 405px; /* Increased height when sidebar is active */
}

.sidebar-info {
  position: relative; /* Allows absolute positioning of elements inside */
  display: flex; /* Use flexbox for layout */
  justify-content: flex-start; /* Align items to the start */
  align-items: center; /* Vertically center items */
  gap: 15px; /* Adds space between elements */
}

.avatar-box {
  background: var(--bg-gradient-onyx); /* Gradient background for the avatar box */
  border-radius: 20px; /* Rounded corners for avatar box */
}

.avatar {
  border-radius: 20px; /* Rounded corners for the avatar image */
}

.info-content .name {
  color: var(--white-2); /* Text color for name */
  font-size: var(--fs-3); /* Font size for name */
  font-weight: var(--fw-500); /* Font weight for name */
  letter-spacing: -0.25px; /* Slightly reduced letter spacing */
  margin-bottom: 10px; /* Bottom margin for spacing */
}

.info-content .title {
  color: var(--white-1); /* Text color for the title */
  background: var(--onyx); /* Background color for the title */
  font-size: var(--fs-8); /* Font size for the title */
  font-weight: var(--fw-300); /* Font weight for the title */
  width: max-content; /* Width adjusts to content size */
  padding: 3px 12px; /* Padding for title */
  border-radius: 8px; /* Rounded corners for title */
}

.info_more-btn {
  position: absolute; /* Positioned absolutely within the parent */
  top: -15px; /* Move up by 15px */
  right: -15px; /* Move right by 15px */
  border-radius: 0 15px; /* Rounded top-right corner */
  font-size: 13px; /* Font size for the button */
  color: var(--orange-yellow-crayola); /* Text color for the button */
  background: var(--border-gradient-onyx); /* Background gradient for button */
  padding: 10px; /* Padding for the button */
  box-shadow: var(--shadow-2); /* Shadow effect for the button */
  transition: var(--transition-1); /* Smooth transition for button hover */
  z-index: 1; /* Ensure button is above other elements */
}

.info_more-btn::before {
  content: ""; /* Empty content to create a background effect */
  position: absolute; /* Positioned absolutely inside the button */
  inset: 1px; /* Position it 1px from all sides */
  border-radius: inherit; /* Inherit the border-radius from the button */
  background: var(--bg-gradient-jet); /* Gradient background for the pseudo-element */
  transition: var(--transition-1); /* Smooth transition for hover effect */
  z-index: -1; /* Place this element behind the button */
}

.info_more-btn:hover,
.info_more-btn:focus { 
  background: var(--bg-gradient-yellow-1); /* Change background color on hover/focus */
}

.info_more-btn:hover::before,
.info_more-btn:focus::before { 
  background: var(--bg-gradient-yellow-2); /* Change background color of the pseudo-element on hover/focus */
}

.info_more-btn span { 
  display: none; /* Hide the span element inside the button */
}

.sidebar-info_more {
  opacity: 0; /* Initially hidden */
  visibility: hidden; /* Hidden by default */
  transition: var(--transition-2); /* Smooth transition for visibility */
}

.sidebar.active .sidebar-info_more {
  opacity: 1; /* Make visible when sidebar is active */
  visibility: visible; /* Make visible when sidebar is active */
}

.contacts-list {
  display: grid; /* Use grid layout for contacts */
  grid-template-columns: 1fr; /* Single column grid */
  gap: 16px; /* Space between each contact item */
}

.contact-item {
  min-width: 100%; /* Ensure each contact item takes full width */
  display: flex; /* Flexbox layout for contact items */
  align-items: center; /* Vertically center items */
  gap: 16px; /* Space between the avatar and contact info */
}

.contact-info {
  max-width: calc(100% - 46px); /* Set width based on parent size */
  width: calc(100% - 46px); /* Ensure contact info fills the available space */
}

.contact-title {
  color: var(--light-gray-70); /* Color for the contact title */
  font-size: var(--fs-8); /* Font size for the title */
  text-transform: uppercase; /* Uppercase text for the title */
  margin-bottom: 2px; /* Bottom margin for spacing */
}

.contact-info :is(.contact-link, time, address) {
  color: var(--white-2); /* Text color for links, time, and addresses */
  font-size: var(--fs-7); /* Font size for links, time, and addresses */
}

.contact-info address { 
  font-style: normal; /* Remove italic style for addresses */
}

.social-list {
  display: flex; /* Use flexbox for social media list */
  justify-content: flex-start; /* Align items to the left */
  align-items: center; /* Vertically center items */
  gap: 15px; /* Space between social media icons */
  padding-bottom: 4px; /* Padding at the bottom */
  padding-left: 7px; /* Padding on the left */
}

.social-item .social-link {
  color: var(--light-gray-70); /* Default color for social media links */
  font-size: 18px; /* Font size for social media icons */
}

.social-item .social-link:hover { 
  color: var(--light-gray); /* Change color on hover */
}

/*-----------------------------------*\
  #NAVBAR
\*-----------------------------------*/

.navbar {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  background: hsla(240, 1%, 17%, 0.75); /* Background color with transparency */
  backdrop-filter: blur(10px); /* Apply blur effect to the background */
  border: 1px solid var(--jet); /* Border color */
  border-radius: 12px 12px 0 0; /* Rounded corners at the top */
  box-shadow: var(--shadow-2); /* Apply shadow */
  z-index: 5; /* Ensure navbar is on top */
}

.navbar-list {
  display: flex; /* Flexbox layout for the navbar */
  flex-wrap: wrap; /* Allow items to wrap */
  justify-content: center; /* Center-align items */
  align-items: center; /* Vertically align items */
  padding: 0 10px; /* Padding around the list */
}

.navbar-link {
  color: var(--light-gray); /* Link color */
  font-size: var(--fs-8); /* Font size */
  padding: 20px 7px; /* Padding around the link */
  transition: color var(--transition-1); /* Smooth color transition on hover/focus */
}

.navbar-link:hover,
.navbar-link:focus { 
  color: var(--light-gray-70); /* Change color on hover or focus */
}

.navbar-link.active { 
  color: var(--orange-yellow-crayola); /* Active link color */
}


/*-----------------------------------*\
  #ABOUT
\*-----------------------------------*/

.home .article-title { 
  margin-bottom: 15px; /* Space below the title */
}

.home-text {
  color: var(--light-gray); /* Text color */
  font-size: var(--fs-6); /* Font size */
  font-weight: var(--fw-300); /* Font weight */
  line-height: 1.6; /* Line height for readability */
}

.home-text p { 
  margin-bottom: 15px; /* Space below each paragraph */
}


/**
 * #service 
 */

.service { 
  margin-bottom: 35px; /* Space below each service section */
}

.service-title { 
  margin-bottom: 20px; /* Space below the service title */
}

.service-list {
  display: grid; /* Grid layout for service items */
  grid-template-columns: 1fr; /* Single column layout */
  gap: 20px; /* Gap between items */
}

.service-item {
  position: relative; /* Position relative to create a stacking context */
  background: var(--border-gradient-onyx); /* Background gradient */
  padding: 20px; /* Padding inside the item */
  border-radius: 14px; /* Rounded corners */
  box-shadow: var(--shadow-2); /* Apply shadow */
  z-index: 1; /* Stack above pseudo-elements */
}

.service-item::before {
  content: ""; /* Empty content for pseudo-element */
  position: absolute;
  inset: 1px; /* Expand the inset area by 1px */
  background: var(--bg-gradient-jet); /* Background gradient */
  border-radius: inherit; /* Inherit the border radius */
  z-index: -1; /* Position behind the content */
}

.service-icon-box { 
  margin-bottom: 10px; /* Space below the icon */
}

.service-icon-box img { 
  margin: auto; /* Center the icon image */
}

.service-content-box { 
  text-align: center; /* Center the content */
}

.service-item-title { 
  margin-bottom: 7px; /* Space below the title */
}

.service-item-text {
  color: var(--light-gray); /* Text color */
  font-size: var(--fs-6); /* Font size */
  font-weight: var(--fw-3); /* Font weight */
  line-height: 1.6; /* Line height for readability */
}


/**
 * #testimonials 
 */

.testimonials { 
  margin-bottom: 30px; /* Space below the testimonials section */
}

.testimonials-title { 
  margin-bottom: 20px; /* Space below the title */
}

.testimonials-list {
  display: flex; /* Flexbox layout for testimonials */
  justify-content: flex-start; /* Align items to the left */
  align-items: flex-start; /* Align items to the top */
  gap: 15px; /* Space between items */
  margin: 0 -15px; /* Negative margin for the list */
  padding: 25px 15px; /* Padding inside the testimonials container */
  padding-bottom: 35px; /* Extra padding at the bottom */
  overflow-x: auto; /* Allow horizontal scrolling */
  scroll-behavior: smooth; /* Smooth scrolling effect */
  overscroll-behavior-inline: contain; /* Contain overscroll behavior */
  scroll-snap-type: inline mandatory; /* Snap items to the center */
}

.testimonials-item {
  min-width: 100%; /* Ensure each testimonial takes up full width */
  scroll-snap-align: center; /* Align each testimonial to the center */
}

.testimonials-avatar-box {
  position: absolute; /* Position the avatar absolutely */
  top: 0;
  left: 0;
  transform: translate(15px, -25px); /* Positioning adjustments */
  background: var(--bg-gradient-onyx); /* Background gradient */
  border-radius: 14px; /* Rounded corners */
  box-shadow: var(--shadow-1); /* Apply shadow */
}

.testimonials-item-title { 
  margin-bottom: 7px; /* Space below the title */
}

.testimonials-text {
  color: var(--light-gray); /* Text color */
  font-size: var(--fs-6); /* Font size */
  font-weight: var(--fw-300); /* Font weight */
  line-height: 1.6; /* Line height for readability */
  display: -webkit-box; /* Webkit box model for text truncation */
  line-clamp: 4; /* Limit to 4 lines */
  -webkit-line-clamp: 4; /* Webkit-specific for line clamping */
  -webkit-box-orient: vertical; /* Set box orientation to vertical */
  overflow: hidden; /* Hide overflowing text */
}


/**
 * #testimonials-modal
 */

.modal-container {
  position: fixed; /* Fixed positioning */
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex; /* Flexbox layout */
  justify-content: center; /* Center modal */
  align-items: center; /* Center modal */
  overflow-y: auto; /* Allow vertical scrolling */
  overscroll-behavior: contain; /* Contain overscroll */
  z-index: 20; /* Ensure modal is on top */
  pointer-events: none; /* Prevent interaction initially */
  visibility: hidden; /* Initially hide the modal */
}

.modal-container::-webkit-scrollbar { 
  display: none; /* Hide the scrollbar */
}

.modal-container.active {
  pointer-events: all; /* Enable interaction */
  visibility: visible; /* Make modal visible */
}

.overlay {
  position: fixed; /* Fixed position */
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh; /* Full viewport height */
  background: hsl(0, 0%, 5%); /* Overlay background */
  opacity: 0; /* Initially invisible */
  visibility: hidden; /* Initially hidden */
  pointer-events: none; /* Prevent interaction */
  z-index: 1; /* Layer below the modal */
  transition: var(--transition-1); /* Transition effect */
}

.overlay.active {
  opacity: 0.8; /* Visible overlay */
  visibility: visible; /* Make overlay visible */
  pointer-events: all; /* Enable interaction */
}

.testimonials-modal {
  background: var(--eerie-black-2); /* Modal background color */
  position: relative; /* Position relative to the container */
  padding: 15px; /* Padding inside the modal */
  margin: 15px 12px; /* Margin around the modal */
  border: 1px solid var(--jet); /* Border color */
  border-radius: 14px; /* Rounded corners */
  box-shadow: var(--shadow-5); /* Apply shadow */
  transform: scale(1.2); /* Scale up the modal */
  opacity: 0; /* Initially invisible */
  transition: var(--transition-1); /* Transition effect */
  z-index: 2; /* Above the overlay */
}

.modal-container.active .testimonials-modal {
  transform: scale(1); /* Scale back to normal size */
  opacity: 1; /* Make modal visible */
}

.modal-close-btn {
  position: absolute; /* Position close button at top-right */
  top: 15px;
  right: 15px;
  background: var(--onyx); /* Background color */
  border-radius: 8px; /* Rounded corners */
  width: 32px;
  height: 32px;
  display: flex; /* Flexbox layout */
  justify-content: center; /* Center icon */
  align-items: center; /* Center icon */
  color: var(--white-2); /* Icon color */
  font-size: 18px; /* Icon size */
  opacity: 0.7; /* Slightly transparent */
}

.modal-close-btn:hover,
.modal-close-btn:focus { 
  opacity: 1; /* Full opacity on hover/focus */
}

.modal-close-btn ion-icon { 
  --ionicon-stroke-width: 50px; /* Icon stroke width */
}

.modal-avatar-box {
  background: var(--bg-gradient-onyx); /* Avatar background gradient */
  width: max-content; /* Auto width */
  border-radius: 14px; /* Rounded corners */
  margin-bottom: 15px; /* Space below avatar */
  box-shadow: var(--shadow-2); /* Apply shadow */
}

.modal-img-wrapper > img { 
  display: none; /* Hide image in modal */
}

.modal-title { 
  margin-bottom: 4px; /* Space below the title */
}

.modal-content time {
  font-size: var(--fs-6); /* Font size */
  color: var(--light-gray-70); /* Date color */
  font-weight: var(--fw-300); /* Font weight */
  margin-bottom: 10px; /* Space below the date */
}

.modal-content p {
  color: var(--light-gray); /* Text color */
  font-size: var(--fs-6); /* Font size */
  font-weight: var(--fw-300); /* Font weight */
  line-height: 1.6; /* Line height for readability */
}

/**
 * #clients 
 */

 .clients { 
  margin-bottom: 15px; 
}

.clients-list {
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 15px;
  margin: 0 -15px;
  padding: 25px;
  padding-bottom: 25px;
  overflow-x: auto; /* Enables horizontal scrolling */
  scroll-behavior: smooth; /* Smooth scrolling for client list */
  overscroll-behavior-inline: contain; /* Prevents scrolling past boundaries */
  scroll-snap-type: inline mandatory; /* Enforces snapping of items */
  scroll-padding-inline: 25px; /* Adds padding to the scroll area */
}

.clients-item {
  min-width: 50%; /* Ensures each client item takes up at least 50% width */
  scroll-snap-align: start; /* Aligns each item to the start when snapping */
}

.clients-item img {
  width: 100%; /* Makes the image fill the container */
  filter: grayscale(1); /* Applies grayscale effect */
  transition: var(--transition-1); /* Smooth transition for hover effect */
}

.clients-item img:hover { 
  filter: grayscale(0); /* Removes grayscale effect on hover */
}


/*-----------------------------------*\
  #RESUME
\*-----------------------------------*/

.article-title { 
  margin-bottom: 30px; /* Adds space below the article title */
}


/**
 * education and experience 
 */

.timeline { 
  margin-bottom: 30px; /* Adds space below the timeline */
}

.timeline .title-wrapper {
  display: flex;
  align-items: center;
  gap: 15px;
  margin-bottom: 25px; /* Adds space below the title wrapper */
}

.timeline-list {
  font-size: var(--fs-6); /* Sets font size for timeline list items */
  margin-left: 45px; /* Adds left margin for indentation */
}

.timeline-item { 
  position: relative; /* Ensures the timeline item can position elements absolutely */
}

.timeline-item:not(:last-child) { 
  margin-bottom: 20px; /* Adds margin below all items except the last one */
}

.timeline-item-title {
  font-size: var(--fs-6); /* Sets font size for timeline item title */
  line-height: 1.3; /* Adjusts line height for better readability */
  margin-bottom: 7px; /* Adds space below the title */
}

.timeline-list span {
  color: var(--vegas-gold); /* Sets color for the span inside the timeline list */
  font-weight: var(--fw-400); /* Sets font weight */
  line-height: 1.6; /* Sets line height for better readability */
}

.timeline-item:not(:last-child)::before {
  content: "";
  position: absolute;
  top: -25px;
  left: -30px;
  width: 1px;
  height: calc(100% + 50px); /* Creates a vertical line connecting items */
  background: var(--jet); /* Sets color for the line */
}

.timeline-item::after {
  content: "";
  position: absolute;
  top: 5px;
  left: -33px;
  height: 6px;
  width: 6px;
  background: var(--text-gradient-yellow); /* Circular indicator color */
  border-radius: 50%; /* Makes the indicator circular */
  box-shadow: 0 0 0 4px var(--jet); /* Adds shadow around the indicator */
}

.timeline-text {
  color: var(--light-gray); /* Sets text color */
  font-weight: var(--fw-300); /* Sets font weight */
  line-height: 1.6; /* Adjusts line height for readability */
}


/**
 * skills 
 */

.skills-title { 
  margin-bottom: 20px; /* Adds space below the skills title */
}

.skills-list { 
  padding: 20px; /* Adds padding inside the skills list */
}

.skills-item:not(:last-child) { 
  margin-bottom: 15px; /* Adds margin below skills items except the last one */
}

.skill { 
  margin-bottom: 30px; /* Adds space below each skill item */
}

.skill .title-wrapper {
  display: flex;
  align-items: center;
  gap: 5px; /* Adds space between elements in the title wrapper */
  margin-bottom: 8px; /* Adds space below the title wrapper */
}

.skill .title-wrapper data {
  color: var(--light-gray); /* Sets color for the data element inside title wrapper */
  font-size: var(--fs-7); /* Sets font size for the data element */
  font-weight: var(--fw-300); /* Sets font weight for the data element */
}

.skill-progress-bg {
  background: var(--jet); /* Background color for the progress bar */
  width: 100%; /* Makes the progress bar fill the container width */
  height: 8px; /* Sets height for the progress bar */
  border-radius: 10px; /* Rounds the corners of the progress bar */
}

.skill-progress-fill {
  background: var(--text-gradient-yellow); /* Color of the progress fill */
  height: 100%; /* Makes the fill take up 100% height of the progress bar */
  border-radius: inherit; /* Inherits border-radius from the background */
}

/*-----------------------------------*\
  #PORTFOLIO
\*-----------------------------------*/

/* Filter Select Styles */
.filter-select {
  background: var(--eerie-black-2); /* Background color */
  color: var(--light-gray); /* Text color */
  display: flex; /* Flexbox for alignment */
  justify-content: space-between; /* Space between items */
  align-items: center; /* Align items vertically */
  width: 100%; /* Full width */
  padding: 12px 16px; /* Padding */
  border: 1px solid var(--jet); /* Border color */
  border-radius: 14px; /* Rounded corners */
  font-size: var(--fs-6); /* Font size */
  font-weight: var(--fw-300); /* Font weight */
}

/* Rotate select icon when the filter is active */
.filter-select.active .select-icon { 
  transform: rotate(0.5turn); 
}

/* Select List Styles */
.select-list {
  background: var(--eerie-black-2); /* Background color */
  position: absolute; /* Absolute positioning */
  top: calc(100% + 6px); /* Positioning below the filter */
  width: 100%; /* Full width */
  padding: 6px; /* Padding */
  border: 1px solid var(--jet); /* Border color */
  border-radius: 14px; /* Rounded corners */
  z-index: 2; /* Ensure it's above other content */
  opacity: 0; /* Hidden by default */
  visibility: hidden; /* Hidden by default */
  pointer-events: none; /* Disable interactions when hidden */
  transition: 0.15s ease-in-out; /* Smooth transition */
}

/* Show the select list when active */
.filter-select.active + .select-list {
  opacity: 1; /* Make visible */
  visibility: visible; /* Make visible */
  pointer-events: all; /* Enable interactions */
}

/* Select Item Button Styles */
.select-item button {
  background: var(--eerie-black-2); /* Background color */
  color: var(--light-gray); /* Text color */
  font-size: var(--fs-6); /* Font size */
  font-weight: var(--fw-300); /* Font weight */
  text-transform: capitalize; /* Capitalize text */
  width: 100%; /* Full width */
  padding: 8px 10px; /* Padding */
  border-radius: 8px; /* Rounded corners */
}

/* Hover effect for select item button */
.select-item button:hover { 
  --eerie-black-2: hsl(240, 2%, 20%); 
}

/* Project List Styles */
.project-list {
  display: grid; /* Grid layout */
  grid-template-columns: 1fr; /* Single column */
  gap: 30px; /* Gap between items */
  margin-bottom: 10px; /* Margin at the bottom */
}

/* Project Item Styles */
.project-item { 
  display: none; /* Hidden by default */
}

/* Show project item when active */
.project-item.active {
  display: block; /* Show item */
  animation: scaleUp 0.25s ease forwards; /* Scale up animation */
}

/* Scale Up Animation */
@keyframes scaleUp {
  0% { transform: scale(0.5); } /* Start smaller */
  100% { transform: scale(1); } /* End at normal size */
}

/* Project Item Link Styles */
.project-item > a { 
  width: 100%; /* Full width */
}

/* Project Image Styles */
.project-img {
  position: relative; /* Relative positioning for overlay */
  width: 100%; /* Full width */
  height: 200px; /* Set height */
  border-radius: 16px; /* Rounded corners */
  overflow: hidden; /* Hide overflow */
  margin-bottom: 15px; /* Margin at the bottom */
}

/* Overlay Effect on Hover */
.project-img::before {
  content: ""; /* Empty content for the overlay */
  position: absolute; /* Absolute positioning */
  top: 0; /* Align to top */
  left: 0; /* Align to left */
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  background: transparent; /* Transparent by default */
  z-index: 1; /* Overlay above image */
  transition: var(--transition-1); /* Smooth transition */
}

/* Darken image on hover */
.project-item > a:hover .project-img::before { 
  background: hsla(0, 0%, 0%, 0.5); /* Semi-transparent black */
}

/* Project Item Icon Box Styles */
.project-item-icon-box {
  --scale: 0.8; /* Initial scale */
  background: var(--jet); /* Background color */
  color: var(--orange-yellow-crayola); /* Icon color */
  position: absolute; /* Absolute positioning */
  top: 50%; /* Center vertically */
  left: 50%; /* Center horizontally */
  transform: translate(-50%, -50%) scale(var(--scale)); /* Center and scale */
  font-size: 20px; /* Icon size */
  padding: 18px; /* Padding */
  border-radius: 12px; /* Rounded corners */
  opacity: 0; /* Hidden by default */
  z-index: 1; /* Above image */
  transition: var(--transition-1); /* Smooth transition */
}

/* Show icon box on hover */
.project-item > a:hover .project-item-icon-box {
  --scale: 1; /* Reset scale */
  opacity: 1; /* Show icon box */
}

/* Icon inside the icon box */
.project-item-icon-box ion-icon { 
  --ionicon-stroke-width: 50px; /* Adjust stroke width */
}

/* Project Image Styles */
.project-img img {
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  object-fit: cover; /* Cover the image area */
  transition: var(--transition-1); /* Smooth transition */
}

/* Zoom image on hover */
.project-item > a:hover img { 
  transform: scale(1.1); /* Slight zoom effect */
}

/* Project Title and Category Styles */
.project-title,
.project-category { 
  margin-left: 10px; /* Margin to the left */
}

/* Project Title Styles */
.project-title {
  color: var(--white-2); /* Text color */
  font-size: var(--fs-5); /* Font size */
  font-weight: var(--fw-400); /* Font weight */
  text-transform: capitalize; /* Capitalize title */
  line-height: 1.3; /* Line height */
}

/* Project Category Styles */
.project-category {
  color: var(--light-gray-70); /* Text color */
  font-size: var(--fs-6); /* Font size */
  font-weight: var(--fw-300); /* Font weight */
}

/*-----------------------------------*\
  #BLOG
\*-----------------------------------*/

/* Styling for the individual blog posts container */
.blog-posts {
  margin-bottom: 10px;
}

/* Grid layout for the list of blog posts */
.blog-posts-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
}

/* Styling for each blog post item link */
.blog-post-item > a {
  position: relative;
  background: var(--border-gradient-onyx);
  height: 100%;
  box-shadow: var(--shadow-4);
  border-radius: 16px;
  z-index: 1;
}

/* Background effect for the blog post item link */
.blog-post-item > a::before {
  content: "";
  position: absolute;
  inset: 1px;
  border-radius: inherit;
  background: var(--eerie-black-1);
  z-index: -1;
}

/* Styling for the blog banner box (image container) */
.blog-banner-box {
  width: 100%;
  height: 200px;
  border-radius: 12px;
  overflow: hidden;
}

/* Ensuring the image fits within the banner box */
.blog-banner-box img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: var(--transition-1);
}

/* Hover effect on the blog image to slightly zoom */
.blog-post-item > a:hover .blog-banner-box img {
  transform: scale(1.1);
}

/* Padding for the content area of the blog post */
.blog-content {
  padding: 15px;
}

/* Styling for the meta information (category, date) */
.blog-meta {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 7px;
  margin-bottom: 10px;
}

/* Styling for category and date within the blog meta */
.blog-meta :is(.blog-category, time) {
  color: var(--light-gray-70);
  font-size: var(--fs-6);
  font-weight: var(--fw-300);
}

/* Dot separator between meta items */
.blog-meta .dot {
  background: var(--light-gray-70);
  width: 4px;
  height: 4px;
  border-radius: 4px;
}

/* Styling for the blog post title */
.blog-item-title {
  margin-bottom: 10px;
  line-height: 1.3;
  transition: var(--transition-1);
}

/* Hover effect for the blog post title */
.blog-post-item > a:hover .blog-item-title {
  color: var(--orange-yellow-crayola);
}

/* Styling for the blog post text */
.blog-text {
  color: var(--light-gray);
  font-size: var(--fs-6);
  font-weight: var(--fw-300);
  line-height: 1.6;
}

/*-----------------------------------*\
  #CONTACT
\*-----------------------------------*/

/* Mapbox container for the embedded map */
.mapbox {
  position: relative;
  height: 250px;
  width: 100%;
  border-radius: 16px;
  margin-bottom: 30px;
  border: 1px solid var(--jet);
  overflow: hidden;
}

/* Ensures the figure element inside .mapbox takes up full height */
.mapbox figure { height: 100%; }

/* Styling for the iframe inside .mapbox, including grayscale and invert effects */
.mapbox iframe {
  width: 100%;
  height: 100%;
  border: none;
  filter: grayscale(1) invert(1);
}

/* Contact form container */
.contact-form { margin-bottom: 10px; }

/* Title of the form */
.form-title { margin-bottom: 20px; }

/* Grid container for form inputs */
.input-wrapper {
  display: grid;
  grid-template-columns: 1fr;
  gap: 25px;
  margin-bottom: 25px;
}

/* Styling for individual form input fields */
.form-input {
  color: var(--white-2);
  font-size: var(--fs-6);
  font-weight: var(--fw-400);
  padding: 13px 20px;
  border: 1px solid var(--jet);
  border-radius: 14px;
  outline: none;
}

/* Placeholder text styling inside the form input fields */
.form-input::placeholder { font-weight: var(--fw-500); }

/* Focus effect for form input fields */
.form-input:focus { border-color: var(--orange-yellow-crayola); }

/* Styling for textarea form inputs */
textarea.form-input {
  min-height: 100px;
  height: 120px;
  max-height: 200px;
  resize: vertical;
  margin-bottom: 25px;
}

/* Hides the resize handle for the textarea */
textarea.form-input::-webkit-resizer { display: none; }

/* Invalid state focus effect for form input fields */
.form-input:focus:invalid { border-color: var(--bittersweet-shimmer); }

/* Styling for the submit button */
.form-btn {
  position: relative;
  width: 100%;
  background: var(--border-gradient-onyx);
  color: var(--orange-yellow-crayola);
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  padding: 13px 20px;
  border-radius: 14px;
  font-size: var(--fs-6);
  text-transform: capitalize;
  box-shadow: var(--shadow-3);
  z-index: 1;
  transition: var(--transition-1);
}

/* Styling for the submit button's background effect */
.form-btn::before {
  content: "";
  position: absolute;
  inset: 1px;
  background: var(--bg-gradient-jet);
  border-radius: inherit;
  z-index: -1;
  transition: var(--transition-1);
}

/* Icon inside the submit button */
.form-btn ion-icon { font-size: 16px; }

/* Hover effect for the submit button */
.form-btn:hover { background: var(--bg-gradient-yellow-1); }

/* Hover effect for the background of the submit button */
.form-btn:hover::before { background: var(--bg-gradient-yellow-2); }

/* Disabled state for the submit button */
.form-btn:disabled {
  opacity: 0.7;
  cursor: not-allowed;
}

/* Hover effect for the disabled state */
.form-btn:disabled:hover { background: var(--border-gradient-onyx); }

/* Background effect for the disabled button */
.form-btn:disabled:hover::before { background: var(--bg-gradient-jet); }

/*-----------------------------------*\
  #RESPONSIVE
\*-----------------------------------*/

/**
 * Responsive styling for screens larger than 450px
 */

 @media (min-width: 450px) {

  /**
   * Clients section styling
   */
  .clients-item { 
    min-width: calc(33.33% - 10px); 
  }

  /**
   * Portfolio and Blog section adjustments
   */
  .project-img,
  .blog-banner-box { 
    height: auto; 
  }
}

/**
 * Responsive styling for screens larger than 580px
 */

@media (min-width: 580px) {

  /**
   * Custom properties for typography
   */
  :root {
    --fs-1: 32px;
    --fs-2: 24px;
    --fs-3: 26px;
    --fs-4: 18px;
    --fs-6: 15px;
    --fs-7: 15px;
    --fs-8: 12px;
  }

  /**
   * Reused styles for sidebar and articles
   */
  .sidebar, article {
    width: 520px;
    margin-inline: auto;
    padding: 30px;
  }

  .article-title {
    font-weight: var(--fw-600);
    padding-bottom: 15px;
  }

  .article-title::after {
    width: 40px;
    height: 5px;
  }

  .icon-box {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    font-size: 18px;
  }

  /**
   * Main content adjustments
   */
  main {
    margin-top: 60px;
    margin-bottom: 100px;
  }

  /**
   * Sidebar specific styling
   */
  .sidebar {
    max-height: 180px;
    margin-bottom: 30px;
  }

  .sidebar.active { 
    max-height: 584px; 
  }

  .sidebar-info { 
    gap: 25px; 
  }

  .avatar-box { 
    border-radius: 30px; 
  }

  .avatar-box img { 
    width: 120px; 
    border-radius: 30px; 
  }

  .info-content .name { 
    margin-bottom: 10px; 
  }

  .info-content .title { 
    padding: 5px 18px; 
  }

  .info_more-btn {
    top: -30px;
    right: -30px;
    padding: 10px 15px;
  }

  .info_more-btn span {
    display: block;
    font-size: var(--fs-8);
  }

  .info_more-btn ion-icon { 
    display: none; 
  }

  .separator { 
    margin: 32px 0; 
  }

  .contacts-list { 
    gap: 20px; 
  }

  .contact-info {
    max-width: calc(100% - 64px);
    width: calc(100% - 64px);
  }

  /**
   * Navbar styling
   */
  .navbar { 
    border-radius: 20px 20px 0 0; 
  }

  .navbar-list { 
    gap: 20px; 
  }

  .navbar-link { 
    --fs-8: 14px; 
  }

  /**
   * About section styling
   */
  .home .article-title { 
    margin-bottom: 20px; 
  }

  .home-text { 
    margin-bottom: 40px; 
  }

  /* Service section styling */
  .service-item {
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 18px;
    padding: 30px;
  }

  .service-icon-box {
    margin-bottom: 0;
    margin-top: 5px;
  }

  .service-content-box { 
    text-align: left; 
  }

  /* Testimonials section styling */
  .testimonials-title { 
    margin-bottom: 25px; 
  }

  .testimonials-list {
    gap: 30px;
    margin: 0 -30px;
    padding: 30px;
    padding-bottom: 35px;
  }

  .content-card {
    padding: 30px;
    padding-top: 25px;
  }

  .testimonials-avatar-box {
    transform: translate(30px, -30px);
    border-radius: 20px;
  }

  .testimonials-avatar-box img { 
    width: 80px; 
  }

  .testimonials-item-title {
    margin-bottom: 10px;
    margin-left: 95px;
  }

  .testimonials-text {
    line-clamp: 2;
    -webkit-line-clamp: 2;
  }

  /* Testimonials modal styling */
  .modal-container { 
    padding: 20px; 
  }

  .testimonials-modal {
    display: flex;
    justify-content: flex-start;
    align-items: stretch;
    gap: 25px;
    padding: 30px;
    border-radius: 20px;
  }

  .modal-img-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .modal-avatar-box {
    border-radius: 18px;
    margin-bottom: 0;
  }

  .modal-avatar-box img { 
    width: 65px; 
  }

  .modal-img-wrapper > img {
    display: block;
    flex-grow: 1;
    width: 35px;
  }

  /* Clients section styling */
  .clients-list {
    gap: 50px;
    margin: 0 -30px;
    padding: 45px;
    scroll-padding-inline: 45px;
  }

  .clients-item { 
    min-width: calc(33.33% - 35px); 
  }

  /**
   * Resume section styling
   */
  .timeline-list { 
    margin-left: 65px; 
  }

  .timeline-item:not(:last-child)::before { 
    left: -40px; 
  }

  .timeline-item::after {
    height: 8px;
    width: 8px;
    left: -43px;
  }

  .skills-item:not(:last-child) { 
    margin-bottom: 25px; 
  }

  /**
   * Portfolio and Blog styling
   */
  .project-img, .blog-banner-box { 
    border-radius: 16px; 
  }

  .blog-posts-list { 
    gap: 30px; 
  }

  .blog-content { 
    padding: 25px; 
  }

  /**
   * Contact section styling
   */
  .mapbox {
    height: 380px;
    border-radius: 18px;
  }

  .input-wrapper {
    gap: 30px;
    margin-bottom: 30px;
  }

  .form-input { 
    padding: 15px 20px; 
  }

  textarea.form-input { 
    margin-bottom: 30px; 
  }

  .form-btn {
    --fs-6: 16px;
    padding: 16px 20px;
  }

  .form-btn ion-icon { 
    font-size: 18px; 
  }
}

/**
 * Responsive design for screens larger than 768px
 */
 @media (min-width: 768px) {

  /**
   * REUSED STYLE
   */
  .sidebar, article { width: 700px; }

  .has-scrollbar::-webkit-scrollbar-button { width: 100px; }

  /**
   * SIDEBAR
   */
  .contacts-list {
    grid-template-columns: 1fr 1fr;
    gap: 30px 15px;
  }

  /**
   * NAVBAR
   */
  .navbar-link { --fs-8: 15px; }

  /**
   * ABOUT
   */
  /* Testimonials modal */
  .testimonials-modal {
    gap: 35px;
    max-width: 680px;
  }

  .modal-avatar-box img { width: 80px; }

  /**
   * PORTFOLIO
   */
  .article-title { padding-bottom: 20px; }

  .filter-item button {
    color: var(--light-gray);
    font-size: var(--fs-5);
    transition: var(--transition-1);
  }

  .filter-item button:hover { color: var(--light-gray-70); }

  .filter-item button.active { color: var(--orange-yellow-crayola); }

  /* Portfolio and blog grid */
  .project-list, .blog-posts-list { grid-template-columns: 1fr 1fr; }

  /**
   * CONTACT
   */
  .input-wrapper { grid-template-columns: 1fr 1fr; }

  .form-btn {
    width: max-content;
    margin-left: auto;
  }
}

/**
 * Responsive design for screens larger than 1024px
 */
@media (min-width: 1024px) {

  /**
   * CUSTOM PROPERTY
   */
  :root {
    /**
     * Shadows for UI elements
     */
    --shadow-1: -4px 8px 24px hsla(0, 0%, 0%, 0.125);
    --shadow-2: 0 16px 30px hsla(0, 0%, 0%, 0.125);
    --shadow-3: 0 16px 40px hsla(0, 0%, 0%, 0.125);
  }

  /**
   * REUSED STYLE
   */
  .sidebar, article {
    width: 950px;
    box-shadow: var(--shadow-5);
  }

  /**
   * MAIN
   */
  main { margin-bottom: 60px; }

  .main-content {
    position: relative;
    width: max-content;
    margin: auto;
  }

  /**
   * NAVBAR
   */
  .navbar {
    position: absolute;
    bottom: auto;
    top: 0;
    left: auto;
    right: 0;
    width: max-content;
    border-radius: 0 20px;
    padding: 0 20px;
    box-shadow: none;
  }

  .navbar-list {
    gap: 30px;
    padding: 0 20px;
  }

  .navbar-link { font-weight: var(--fw-500); }

  /**
   * ABOUT
   */
  /* Service list */
  .service-list {
    grid-template-columns: 1fr 1fr;
    gap: 20px 25px;
  }

  /* Testimonials item */
  .testimonials-item { min-width: calc(50% - 15px); }

  /* Clients item */
  .clients-item { min-width: calc(25% - 38px); }

  /**
   * PORTFOLIO
   */
  .project-list { grid-template-columns: repeat(3, 1fr); }

  /**
   * BLOG
   */
  .blog-banner-box { height: 230px; }
}

/**
 * Responsive for screens larger than 1250px
 */

 @media (min-width: 1250px) {

  /**
   * RESET: Custom scrollbar styling
   */
  body::-webkit-scrollbar { width: 20px; }

  body::-webkit-scrollbar-track { background: var(--smoky-black); }

  body::-webkit-scrollbar-thumb {
    border: 5px solid var(--smoky-black);
    background: hsla(0, 0%, 100%, 0.1);
    border-radius: 20px;
    box-shadow: inset 1px 1px 0 hsla(0, 0%, 100%, 0.11),
                inset -1px -1px 0 hsla(0, 0%, 100%, 0.11);
  }

  body::-webkit-scrollbar-thumb:hover { background: hsla(0, 0%, 100%, 0.15); }

  body::-webkit-scrollbar-button { height: 60px; }

  /**
   * REUSED STYLE: Common layout adjustments
   */
  .sidebar, article { width: auto; }

  article { min-height: 100%; }

  /**
   * MAIN: Main content layout
   */
  main {
    max-width: 1200px;
    margin-inline: auto;
    display: flex;
    justify-content: center;
    align-items: stretch;
    gap: 25px;
  }

  .main-content {
    min-width: 75%;
    width: 75%;
    margin: 0;
  }

  /**
   * SIDEBAR: Sidebar layout and positioning
   */
  .sidebar {
    position: sticky;
    top: 60px;
    max-height: max-content;
    height: 100%;
    margin-bottom: 0;
    padding-top: 60px;
    z-index: 1;
  }

  .sidebar-info { flex-direction: column; }

  .avatar-box img { width: 150px; }

  .info-content .name {
    white-space: nowrap;
    text-align: center;
  }

  .info-content .title { margin: auto; }

  .info_more-btn { display: none; }

  .sidebar-info_more {
    opacity: 1;
    visibility: visible;
  }

  .contacts-list { grid-template-columns: 1fr; }

  .contact-info :is(.contact-link) {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .contact-info :is(.contact-link, time, address) {
    --fs-7: 14px;
    font-weight: var(--fw-300);
  }

  .separator:last-of-type {
    margin: 15px 0;
    opacity: 0;
  }

  .social-list { justify-content: center; }

  /**
   * RESUME: Styling for resume section
   */
  .timeline-text { max-width: 700px; }

}