/* === RESET AND BASE STYLES === */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Poppins', Helvetica, sans-serif;
}

html, body {
  width: 100%;
  min-height: 100vh; /* Use min-height to ensure it covers the full viewport */
  background-color: rgb(34, 33, 33);
  color: #202020; /* Default text color for light backgrounds */
  overflow-x: hidden; /* <--- REVERTED: Re-added this for general page overflow control.
                           The carousel fix is in the media query. */
}


h1 {
  font-size: 48px;
  color: #fff; /* White for header h1 */
}


h2 {
  font-size: 16px;
  color: #fff; /* Default to white for most sections */
}


/* === MAIN CONTAINER (container1) - Top section === */
.container1 {
  width: 100%;
  height: auto; /* Let content dictate height */
  padding: 50px 20px; /* Adjust padding for top content */
  display: flex;
  flex-direction: column; /* Stack children vertically */
  justify-content: center; /* Center children vertically */
  align-items: center; /* Center children horizontally */
  background-color: rgb(34, 33, 33);
}

.the-image {
    margin-bottom: 20px;
}

.the-image img {
    max-width: 100%;
    height: auto;
    display: block;
    border-radius: 50%;
    border: 4px solid #218ed7;
    box-shadow: 0 0 15px rgba(33, 142, 215, 0.6);
    width: 150px; /* Default image size */
    height: 150px; /* Default image size */
}

.main-text h2 {
  font-size: 24px;
  text-align: center;
  color: #fff;
  margin-top: 0; /* Remove top margin if container has padding */
  padding: 0 20px;
  max-width: 800px; /* Constrain width for better readability */
}


/* === MAIN SECTION (Section below container1) === */
.section {
  width: 100%;
  padding: 50px 40px 0 40px;
  text-align: center;
  color: #fff; /* Ensure text is white */
}

.main_text h1 { /* This style seems to be for a different h1, consider renaming/restructuring */
  margin-bottom: 24px;
}

.box1 .box-subtext { /* This is specific to box1 within the carousel */
  transform: translateY(-15px);
}

.button2 {
  display: flex;
  justify-content: center;
  margin-top: 16px;
}

.work {
  font-size: 16px;
  height: 48px;
  padding: 4px 24px;
  color: #121212;
  border-radius: 8px;
  border: none;
  background-color: #ffffff;
  cursor: pointer;
}

/* === BOXES SECTION (Carousel) === */
.box-container1 {
  margin: 20px; /* Base margin for desktop view */
  display: flex;
  justify-content: center; /* Centers the *group* of boxes if they don't fill the space */
  align-items: stretch; /* Makes boxes in a row same height */
  gap: 40px;
  flex-wrap: nowrap; /* Forces items onto a single line */
  
  /* max-width: 1400px; /* Keep this if you want max width on large screens */
  /* width: 100%; Removed this from global, specific for carousel */
  padding: 40px; /* Base padding for desktop view */
}

.box {
  background-color: #fff;
  width: 33.33%; /* Default for desktop (3 columns) */
  min-width: 200px;
  min-height: 280px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  border-radius: 12px;
  padding: 16px 20px;
  text-align: left;
  gap: 12px;
  position:relative;
  overflow:hidden;
  z-index:1; /* Ensure content is above circles */
}

.circle1, .circle2, .circle3 { /* Grouping circle styles */
  position:absolute;
  width:200px;
  height:200px;
  border-radius:50%;
  bottom:-50px;
  right:-50px;
  z-index:0;
}
.circle1 { background-color:rgb(179, 255, 255); }
.circle2 { background-color:rgb(223, 199, 255); }
.circle3 { background-color:rgb(244, 255, 179); }


/* Z-index for content inside boxes */
.box1 .biggest-text,
.box1 .box-subtext,
.dergree-name,
.institute1,
.skills-section h2, /* This targets h2 in skills-section, not in box */
.skills-list /* This targets skills-list, not in box */
{
  position: relative;
  z-index: 2;
}


.headline {
  font-size: 20px;
  font-weight: 700;
  color: #218ed7;
  margin-bottom: 4px;
}

.biggest-text {
  font-size: 120px;
  font-weight: 600;
  line-height: 1.1;
  margin: 0 0 4px 0;
}

.box-subtext {
  font-size: 14px;
  font-weight: 400;
  margin: 0;
}

.dergree-name {
  font-weight: 700;
  font-size: 14px;
}

.institute1 {
  font-size: 14px;
  margin-bottom: 6px;
}

.degree1, .degree2 {
  margin-bottom: 8px;
}

/* === SKILLS SECTION === */
.skills-section {
  margin: 12px; /* Added margin to align with box-container1 */
  padding: 0;
  color: #fff; /* Changed to white for dark background */
}

.skills-section h2 {
  font-size: 18px;
  margin-bottom: 8px;
  color: #fff; /* Ensure h2 in skills is white */
}

.skills-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: 8px;
  transform: none;
}

.skills-list span {
  background-color: #2b2a2a;
  padding: 6px 12px;
  border-radius: 20px;
  font-size: 13px;
  color: #fff;
  white-space: nowrap;
}


/* === RESPONSIVE CAROUSEL STYLE === */
@media (max-width: 768px) {

  /* Main section below header */
  .section .main_text h1 { /* Specific target for h1 in section */
     font-size: 32px;
     line-height: 1.2; /* Adjust line-height for smaller font */
  }

  .box-container1 {
    overflow-x: scroll; /* <--- CHANGED: Set to scroll for explicit scrolling */
    display: flex;
    flex-wrap: nowrap; /* Keep items on a single line for carousel */
    width: 100%; /* Ensure container takes full width */
    gap: 16px;
    scroll-snap-type: x mandatory;
    padding: 0 20px; /* Only horizontal padding */
    align-items: stretch;
    scroll-padding-left: 20px; /* Match this to left padding of .box-container1 */
    margin: 40px 0; /* Vertical margin, no horizontal margin here */
    justify-content: flex-start; /* Ensure items start from the left */
  }

  .box1 .biggest-text{
    font-size:100px;
  }

  .box2 .degree1{
    padding-bottom:10px;
  }

  .box {
    flex: 0 0 calc(80vw - 8px); /* <--- CHANGED: Use calc to subtract half the gap */
    scroll-snap-align: start;
    min-width: 280px; /* Ensure a minimum size */
    min-height: unset; /* Let content dictate height primarily */
    height: auto; /* Allow height to expand with content */
    padding: 16px; /* Adjust padding for boxes */
    align-items: flex-start;
  }

  .headline {
    font-size: 18px;
    margin-bottom: 6px;
    padding-top: 0;
  }

  .biggest-text {
    font-size: 60px;
    line-height: 1.1;
    margin-top: 12px;
  }

  .box-subtext {
    font-size: 14px;
    margin: 0;
  }

  .skills-section { /* Also adjust margin for skills section */
    margin: 20px 20px; /* Consistent horizontal margin with carousel */
  }

  .skills-section h2 {
    font-size: 16px;
    margin-top: 12px;
  }

  .skills-list {
    gap: 8px;
  }

  .degree1, .degree2 {
    margin: 4px 0;
  }
}

@media (max-width: 480px) {
    .section .main_text h1 {
        font-size: 28px;
    }
    .box-container1 {
        padding: 0 15px; /* Only horizontal padding for smaller screens */
        scroll-padding-left: 15px;
        gap: 10px; /* Reduce gap */
    }
    .box {
        flex: 0 0 calc(90vw - 5px); /* <--- CHANGED: Use calc for gap, based on new gap */
        padding: 12px; /* Reduce box internal padding */
    }
    .biggest-text {
        font-size: 50px;
    }
    .headline {
        font-size: 16px;
    }
    .box-subtext, .dergree-name, .institute1, .degree1, .degree2 {
        font-size: 13px;
    }
    .skills-section {
        margin: 30px 15px;
    }
    .skills-list span {
        padding: 5px 10px;
        font-size: 12px;
    }
}