/* ========================================
BASE (reset all basic html tags)
========================================== */
/* CSS */



body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,button,textarea,blockquote,th,td {
    margin: 0;
    padding: 0;
	line-height: 1.5em;
	text-decoration: none;
	border: none;
}
img { border: none; }

li {list-style: none;}

table {border-collapse: collapse; border-spacing: 0;}
address,caption,cite,code,dfn,em,strong,th,var, optgroup {font-style: inherit; font-weight: inherit;}
del, ins {text-decoration: none;}

abbr,acronym {border: 0; font-variant: normal;}
sup {vertical-align: baseline;}
sub {vertical-align: baseline;}
input,button,textarea,select,optgroup,option{font-family:inherit;font-size:inherit;font-style:inherit;font-weight:inherit;}

pre, code {
			font:100.1% Monaco,"Andale Mono","Lucida Console","Bitstream Vera Sans Mono","Courier New",monospace,serif;
}
blockquote, pre {
		padding:0.25em 40px;
}
em {font-style: italic;}

:root {
    --main-font: "Be Vietnam Pro", sans-serif;
    --second-font: "Plus Jakarta Sans", sans-serif;
    --Text-Medium: #858D97;
    --Text-Dark: #4A4D53;
}

h1,h2,h3,h4,h5,h6,p, .full_width_content {
    font-family: var(--main-font);
}

.tpad_60 {padding-top: 60px;}
.tpad_72 {padding-top: 72px;}
.bpad_20 {padding-bottom: 20px;}
.center {text-align: center;}
.mt-20 {margin-top: -20px;}
.mb0 {margin-bottom: 0;}

.clean, .clean:hover, .clean:visited {
        text-decoration: none;
        color: #fff;
    }

/* ========================================
STRUCTURE (position, width, height, margin, padding, etc.)
========================================== */


.portfolio-container {
    background-color: #fff;
    position: relative;
    display: flex;
    flex-direction: column;
}
.main-content {
    background-color: #f8f7f4;
    display: flex;
    flex-direction: column;
}
.hero-section {
    background: 
    /* Purple to transparent at top-left */
    radial-gradient(circle at -5% -10%,  
      rgba(128, 0, 128, 0.2) 0%, 
      rgba(0, 0, 0, 0) 50%
    ),
    /* Blue to transparent at bottom-right */
    radial-gradient(circle at 105% 110%,  
      rgba(0, 0, 255, 0.2) 0%, 
      rgba(0, 0, 0, 0) 50%
    ),
    /* Base black background */
    #000;
    
  background-repeat: no-repeat;
  background-size: cover;
    padding: 64px 222px 147px;
}
        @media (max-width: 991px) {
            .hero-section {
                padding: 100px 20px;
            }
        }
.intro-text-wrapper {
    font-size: 48px;
}
        @media (max-width: 991px) {
            .intro-text-wrapper {
                font-size: 40px;
            }
    }
.greeting {
    color: #a5a6a8;
    font-weight: 400;
    font-family: var(--main-font);
}
.name {
    color: #d1d1d1;
    font-size: 2.5em;
    font-weight: 600;
    font-family: var(--main-font);
}
.name span{color: #a5a6a8;}

.bio-text {
    color: #a5a6a8;
    font-size: 22px;
    line-height: 38px;
    margin-top: 22px;
    font-family: var(--main-font);
}
.work-section {
    display: flex;
    align-items: center;
    padding: 0 10px;
    color: #1a1b1f;
    font: 700 1rem var(--main-font);
}
.work-container {
    max-width: 1200px;
    width: 100%;
    padding: 60px 32px 100px;
    margin: auto;
}
.section-title {
    font-size: 24px;
    font-weight: 400;
    text-align: center;
}
.project-grid {
    display: flex;
    margin-top: 92px;
    gap: 92px 72px;
    flex-wrap: wrap;
    flex-direction: row;
}
.project {
    display: flex; 
    gap: 72px;
}
        @media (max-width: 991px) {
            .project-grid {
                margin-top: 40px;
                flex-direction: column;
            }
            .project{
                flex-direction: column;
                gap: 16px;
            }
        }
.project-image {
    width: 100%;
    max-width: 588px;
    height: auto;
    border-radius: 16px;
    box-shadow: 0 48px 34px -39px rgba(0, 0, 0, 0.15);
}
.no-shadow {box-shadow: none;}
.project-content {
    width: 100%;
    max-width: 540px;
    padding: 32px 0;
}
.project-title {
    font-size: 32px;
    font-weight: 300;
    line-height: 1.5em;
}
.project-description {
    font-weight: 300;
    margin-top: 20px;
}
.project-link {
    margin-top: 20px;
    color: #050505;
    font-weight: 500;
    position: relative;
    text-decoration: none;
    cursor: pointer;
    display: inline-flex; /* Aligns text and arrow in a row */
    align-items: baseline; /* Ensures proper alignment */
    gap: 5px; /* Adds spacing between text and arrow */
}
    .project-link.bold{
        font-size: 22px;
        font-weight: 600;
    }
    .project-link_text {
        background-image: linear-gradient(to bottom, #D4C5FD 0%, #D4C5FD 100%);
        background-repeat: no-repeat;
        background-size: 100% 2px;
        background-position: 0 100%;
        transition: all  0.3s ease;
        padding: .2rem;
    }
    .project-link_text:hover {
        background-image: linear-gradient(to bottom, #D4C5FD 0%, #D4C5FD 100%);
        background-size: 100% 50%;
    }

    span.arrow {
        display: inline-block;
        width: 14px;
        height: 12px; 
        background: url('img/link_icon_arrow.svg') no-repeat center center;
        background-size: contain;
        position: relative;
        top: 0;
    }
    span.pdf {
        display: inline-block;
        width: 32px;
        height: 16px; 
        background: url('img/link_icon_arrow_pdf.svg') no-repeat center center;
        background-size: contain;
        position: relative;
        top: 0;
    }
    

.divider {
    width: 100%;
    max-width: 996px;
    border-top: 1px solid #858c95;
    margin: 0 auto;
}    .divider.two {
        padding: 32px 0;
    }

.contact-section {
    padding: 64px 0;
    font-family: var(--main-font);
}
.contact-container {
   margin: 0 auto;
    padding: 0 24px;
    max-width: 996px
}
.contact-heading {
    font-size: 15px;
    font-weight: 300;
    line-height: 29px;
}
.contact-text {
    font-size: 21px;
    line-height: 40px;
    margin-top: 16px;
}
.contact-info {
    margin-top: 16px;
    color: #646b74;
    font: 20px var(--main-font);
    line-height: 40px
}
.contact-link {
    margin-top: 16px;
}
.site_header {
    background: #000;
    color: #fff;
    box-shadow: -3.215px 8.727px 17.914px 0 rgba(88, 89, 92, 0.3);
    position: sticky;
    top: 0;
    display: flex;
    justify-content: center; /* Center the inner container horizontally */
    padding: 16px 0;
    /*padding: 16px 120px;*/
    font: 600 18px var(--main-font);
    z-index: 9999; /* Ensure it appears above other content */
}
    .site_header_inner{
        display: flex;
        align-items: center;
        justify-content: space-between;
        max-width: 1120px; 
        width: 100%;
        /* Optional: add some default padding */
        padding: 0; 
        box-sizing: border-box;
        

    }
.site-footer {
    background-color: #000;
    min-height: 64px;
    width: 100%;
}
@media (max-width: 991px) {
    .site-header {
        padding: 0 20px;
    }
    .project-image,
    .project-content,
    .contact-container {
        max-width: 100%;
    }
}

/* Portfolio Page ----------------------------------------------------*/
.clipper {
    overflow: clip;
}
.bigImage {
    max-width: 100%; height: auto; display: block; position: relative;
    top: -400px;
}

        /* Images -----------------------------------------------------------*/

        .hero_logo img {
          max-width: 200px; height: auto;
        }.hero_logo.planb img {
          max-width: 143px; height: auto;
        }
        .hero_image, .spacer1x100 {
          text-align: center;
        }
        .hero_image img {
          max-width: 100%; height: auto;
          display: inline-block;
        }
        .spacer1x100 img {
          width: 100%; height: auto;
          display: inline-block;
        }
        .full_width_image{
          width: 100%; height: auto;
          max-width: 1120px;
          display: inline-block;
          position: relative;
        }


.projectPage .main-content {
    background-color: #ffffff;
}
.portfolio_container {
    max-width: 1280px;
    display: flex;
    flex-direction: column;
    margin: 0 auto;
    overflow: hidden; /* This can help prevent scrollbars if needed */
    box-sizing: border-box;
}

.hero_header_wrapper {
  max-width: 1120px;
  margin: 32px auto 40px;  /*Centers the hero_header within portfolio_container*/
    width: 100%;
}

.hero_header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  flex-wrap: wrap; /* Allows wrapping on smaller screens */
  margin-bottom: 20px;
  width: 100%;
}
.full_width_section {
  width: 100%; /* Spans the full width of the page */
  box-sizing: border-box; /* Ensures padding is included in width */
}

.full_width_content {
  max-width: 1120px; /* Centers content and constrains its width */
  margin: 0 auto; /* Centers the content horizontally */
    padding: 3rem 20px;
}
.planb_hero_content {
  max-width: 1120px; /* Centers content and constrains its width */
  margin: 0 auto; /* Centers the content horizontally */
}
.lwpbc_gradient {
    
    background: 
        radial-gradient(73% 52% at 69% 7%, rgba(255, 255, 255, 0.30) 0%, rgba(255, 255, 255, 0.00) 100%),
        radial-gradient(133.76% 100.12% at 5.78% 9.86%, #BEE7EC -43%, rgba(236, 245, 246, 0.20) 100%),    
        radial-gradient(101.55% 67.77% at 24.66% 44.26%, rgba(236, 245, 246, 0.00) 0%, #FDF6EC 100%),
        #FFF;
    background-repeat: no-repeat;
    background-size: cover;
    
}
.planb_gradient {
    position: relative;
    width: 100vw; /* Full viewport width */
    background: linear-gradient(90deg, #FFF 42.97%, #F5F3FF 99.27%);
    display: flex; /* Flexbox for alignment */
    justify-content: center; /* Center the image horizontally */
}   
.planb_fill {
    background: #F2F0FC;
}    
.planbheroImage{
   margin-top: -50px;
  width: 100%; /* Make the image responsive */
  max-width: 1120px; /* Cap the image width */
  height: auto; /* Maintain aspect ratio */
}

.hero_text h1 {
  font-size: clamp(1.8rem, 5vw, 2rem);
  margin: 0;
  font-weight: 600;
  line-height: 1.2;
}

.hero_text h2 {
  font-size: clamp(1.5rem, 5vw, 1.75rem);
  margin: 0;
  font-weight: 400;
}

/*Flex Containers -------------------------------*/
/* 60/35 */
.project_summary {
  background-color: #fff;
  padding: 40px 20px; /* Padding on all sides */
  box-sizing: border-box;
}
.summary_container {
  max-width: 1120px; 
  margin: 0 auto; /* Centers horizontally */
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 32px; /* Adds spacing between columns */
}

.summary_left {
  flex: 1 1 60%; /* Take 60% of the space */
  min-width: 300px; /* Ensures it doesn’t collapse too small */
}
.summary_right {
  flex: 1 1 35%; /* Take 35% of the space */
  min-width: 250px; /* Prevent it from collapsing */
    max-width: 310px;
}

/* 50/50 */
.two_verticle_container {
  display: flex;
  justify-content: space-between; /* Push columns to edges */
  align-items: center; /* Align images vertically */
  gap: 5%; /* Add a gap that shrinks responsively */
  width: 100%; /* Full width */
  max-width: 1120px; /* Limit maximum width */
  margin: 0 auto; /* Center the container */
}
/* Columns */
.image_column {
  flex: 1 1 auto; /* Columns can shrink and grow */
}
.two_verticle_left img {
  max-width: 531px; /* Constrain max width for the left image */
  width: 100%; /* Shrink proportionally */
  height: auto; /* Maintain aspect ratio */
}
.two_verticle_right img {
  max-width: 545px; /* Constrain max width for the right image */
  width: 100%; /* Shrink proportionally */
  height: auto; /* Maintain aspect ratio */
}
    /* Responsive Behavior */
    @media (max-width: 768px) {
      .image_container {
        gap: 2%; /* Reduce the gap for smaller screens */
      }

      .left_column img {
        max-width: 100%; /* Allow the image to shrink further */
      }

      .right_column img {
        max-width: 100%; /* Allow the image to shrink further */
      }
    }

    /* Flex container for stats --------------------*/
    .stats_container {
      display: flex;
      justify-content: space-around; /* Evenly space items */
      align-items: center; /* Center vertically */
      gap: 40px; /* Add spacing between items */
      padding: 40px 20px; /* Add padding for spacing */
        color: var(--Text-Dark);
    }
        .stat_item {
          text-align: center; 
        }
        .percentage {
          font-size: 48px; font-weight: bold;
        }
        .percentage span {
          font-size: 24px; 
        }
        .sub_text {
          font-size: 16px; font-weight: 300; 
        }
        .description {
          font-size: 22px; font-weight: 500; margin-top: 8px; 
        }

/* Content --------------------------------------*/

.summary_heading {
    font-size: 18px;
    font-weight: 700;
    color: var(--Text-Medium);
}
.summary_container p,
.full_width_content p{
    margin-top: 10px;
  font-size: 18px;
  line-height: 1.5;
  color: var(--Text-Dark);
  margin-bottom: 20px;
    font-weight: 300;
}


/* playing aroudn with hovers*/

.styled_link {
  text-decoration: none; /* Removes the default underline */
  color: #050505;
  font-weight: 500;
  position: relative; /* Required for positioning the pseudo-element */
  transition: color 400ms ease; /* Smooth transition for the font color */
  display: inline-flex; /* Aligns text and arrow in a row */
  align-items: baseline; /* Ensures proper alignment */
  gap: 5px; /* Adds spacing between text and arrow */
}
.link_text {position: relative;}

.link_text::after {
  content: ""; /* Creates an empty pseudo-element */
  position: absolute;
  left: 0;
  bottom: -3px; /* Position the underline below the text */
  width: 100%;
  height: 2px;
  background-color: #D4C5FD; /* Color of the underline */
  transition: transform 400ms ease, background-color 400ms ease; /* Smooth movement animation */
}

.styled_link:hover {
  color: #800080; /* Changes font color to purple on hover */
}

.link_text:hover::after {
  background-color: #800080; /* Color of the underline */
  transform: translateY(-1.5rem); /* Moves the underline above the text */
}

.project-link2 {
    margin-top: 20px;
    color: #050505;
    font-weight: 500;
    position: relative;
    display: inline-block;
    text-decoration: none;
    cursor: pointer;
}