@charset "UTF-8";

body{
	font-family: "area-normal", sans-serif;
}



/* Custom Styles */




.nav-link{
	font-family: "area-normal", sans-serif;
	font-weight: 700;
	letter-spacing: 2px;
	font-style: normal;
	text-transform: lowercase;
	color: #C0590C;
	
	
}


.navbar{
	padding-top: 50px;
}


.navbar-brand{
	max-width: 250px;
	
}

.header-text{
	
	font-family: "area-normal", sans-serif;
	color: #6A6A6A;
	text-align: center;
	text-transform:lowercase;
	text-size: 12px;
	font-weight: 100px;
	padding-top: 20px;
	padding-bottom: 20px;
}




.header-text{
	
	font-family: "area-normal", sans-serif;
	color: #6A6A6A;
	text-align: center;
	text-transform:lowercase;
	text-size: 12px;
	font-weight: 100px;
	padding-top: 20px;
	padding-bottom: 20px;
}


.header-text2{
	
	font-family: "area-normal", sans-serif;
	color: #6A6A6A;
	text-align: left;
	text-size: 12px;
	font-weight: 100px;
	padding-top: 20px;
	}




        .back-button {
            display: flex;
            justify-content: center;
            align-items: center;
			font-family: "area-normal", sans-serif;
            background-color: transparent;
            color: #C0590C;
            border: none;
            padding: 10px 15px;
            font-size: 1rem;
            cursor: pointer;
         
            
            gap: 10px;
            transition: all 0.3s ease;
        }

        .back-button:hover {
            color: #6A6A6A;
            transform: translateX(-5px);
        }

        .arrow-left {
            font-size: 1.5rem;
        }

        .button-text {
            font-weight: 600;
        }







.mw-title-row { 
	justify-content: center; 
	text-align: center;
	display: flex; 
	align-items: baseline; 
	flex-wrap: wrap; 
	line-height: 0.88; }

.mw-title-sans { 
	font-family: 'area-normal', sans-serif; 
	font-size: 50px; 
	font-weight: 400; letter-spacing: -0.04em; 
	line-height: 0.88; 
	margin: 0; }

.mw-title-serif { 
	font-family: 'area-normal', sans-serif; 
	font-size: 50px; 
	font-weight: 400;  
	letter-spacing: -0.02em; 
	line-height: 0.88; 
	color: #C0590C; 
	margin: 0; }








.portfolio-images{
	padding-bottom:80px;
}



/* ── Contact: Section font base ── */
    
.contacts-bg{
	padding-top: 40px;
	padding-bottom:100px;
	
}



.contact-section {
      font-family: 'area-normal', sans-serif;
		padding-top:20px;
		padding-bottom:30px;
    }
 
    /* ── Contact: Display heading (h1) ── */
    .contact-h1 {
      font-family: 'the-seasons', sans-serif;
      font-size: 50px;
      line-height: 1;
      font-weight: 400;
      margin: 0 0 1.25rem;
    }
 
    /* ── Contact: Section heading (h3) — platform name ── */
    .contact-h3 {
		color: #C0590C;
      font-family: 'the-seasons', sans-serif;
      font-size: clamp(1.3rem, 2.5vw, 2rem);
      font-weight: 400;
      margin-bottom: 0.5rem;
    }


.contact-h3  a{
	color:#C0590C ;
	text-decoration: none;
      font-family: 'the-seasons', sans-serif;
      font-size: clamp(1.3rem, 2.5vw, 2rem);
      font-weight: 400;
      margin-bottom: 0.5rem;
    }


.contact-h3 a:hover {
      font-family: 'the-seasons', sans-serif;
      color: #000000;
        transform: translateY(-2px);
		text-decoration: none;
    }
 
    /* ── Contact: Eyebrow label ── */
    .contact-h3-eyebrow {
      font-family: 'area-normal', sans-serif;
      font-size: 0.72rem;
      font-weight: 600;
      letter-spacing: 0.2em;
      text-transform: uppercase;
      color: #999;
      margin-bottom: 1.5rem;
    }
 
    /* ── Contact: Large italic number ── */
    .contact-h3-number {
      font-family: 'the-seasons', sans-serif;
      font-size: clamp(3rem, 5vw, 4.5rem);
      font-style: italic;
      font-weight: 400;
      line-height: 1;
      margin: 0 0 0.25rem;
    }
 
    /* ── Contact: Availability heading ── */
    .contact-h3-availability {
      font-family: 'the-seasons', sans-serif;
      font-size: clamp(1.1rem, 2vw, 1.5rem);
      font-weight: 400;
      font-style: italic;
      margin-bottom: 0.5rem;
    }
 
    /* ── Contact: Intro paragraph ── */
    .contact-p-intro {
      font-family: 'area-normal', sans-serif;
      font-size: clamp(0.8rem, 1.4vw, 0.95rem);
      font-weight: 300;
      color: #555;
      margin: 0 0 0;
      line-height: 1.7;
    }
 
    /* ── Contact: Handle / URL ── */
    .contact-p-handle {
      font-family: 'area-normal', sans-serif;
      font-size: 0.95rem;
      font-weight: 400;
      margin-bottom: 0.25rem;
    }
 
    /* ── Contact: Descriptor note ── */
    .contact-p-note {
      font-family: 'area-normal', sans-serif;
      font-size: 0.8rem;
      font-weight: 300;
      color: #888;
      margin: 0;
    }
 
    /* ── Contact: Small muted ── */
    .contact-p-muted {
      font-family: 'area-normal', sans-serif;
      font-size: 0.78rem;
      font-weight: 300;
      color: #aaa;
      margin: 0;
      line-height: 1.6;
    }
 
    /* ── Contact: Location note ── */
    .contact-p-location {
      font-family: 'area-normal', sans-serif;
      font-size: 0.8rem;
      font-weight: 300;
      color: #888;
      margin: 0;
      line-height: 1.6;
    }
 
    /* ── Contact: Mobile adjustments ── */
    @media (max-width: 767px) {
      .contact-label-col {
        border-right: none !important;
        border-bottom: 1px solid #000 !important;
      }
      .contact-inner-col-border {
        border-right: none !important;
        border-bottom: 1px solid #000 !important;
      }
      .contact-cell {
        border-bottom: 1px solid #000 !important;
        border-right: none !important;
      }
    }




.hero-section {
           
          padding:80px;
        }
 
        .hero-wrapper {
            max-width: 1200px;
            margin: 0 auto;
            width: 100%;
        }
 
        .hero-content {
            text-align: center;
        }
 
        .main-text {
            font-family: "area-normal", sans-serif;
            font-size: 60px;
            font-weight: 400;
            line-height: 1.2;
            color: #1a1a1a;
            margin: 0;
			padding-bottom:40px;
        }
 
        .accent-text {
		font-family: "the-seasons", sans-serif;
            font-style: none;
            font-weight: 400;
            color: #C0590C;
        }
 
        
 



   /* ── Project Description: Section ── */
    .proj-desc-section {
      font-family: 'area-normal', Arial, sans-serif;
      padding-bottom: 80px;
    }
 
    /* ── Project Description: Eyebrow ── */
    .proj-desc-eyebrow {
      font-size: 0.68rem;
      font-weight: 600;
      letter-spacing: 0.24em;
      text-transform: uppercase;
      color: #C0590C;
      margin-bottom: 0.75rem;
    }
 
    /* ── Project Description: Title ── */
    .proj-desc-title {
      font-family: 'the-seasons', Georgia, serif;
      font-size: clamp(1.8rem, 3.5vw, 2.8rem);
      font-weight: 400;
      line-height: 1.05;
      letter-spacing: 2px;
      color: #1a1612;
      margin-bottom: 1.5rem;
    }
 
    /* ── Project Description: Body copy ── */
    .proj-desc-body {
      font-family: 'area-normal', Arial, sans-serif;
      font-size: clamp(0.82rem, 1.2vw, 0.92rem);
      font-weight: 300;
      line-height: 1.8;
      color: #444;
      margin: 0;
    }
 
    /* ── Project Description: Meta label ── */
    .proj-desc-meta-label {
      font-family: 'area-normal', Arial, sans-serif;
      font-size: 0.68rem;
      font-weight: 600;
      letter-spacing: 0.22em;
      text-transform: uppercase;
      color: #C0590C;
      margin-bottom: 0.5rem;
    }
 
    /* ── Project Description: Duration value ── */
    .proj-desc-duration {
      font-family: 'the-seasons', sans-serif;
      font-size: 1.3rem;
      font-weight: 400;
      font-style: none;
      color: #1a1612;
      line-height: 1;
      margin-bottom: 0;
    }
 
    /* ── Project Description: List item ── */
    .proj-desc-item {
      display: flex;
      align-items: flex-start;
      gap: 0.65rem;
      margin-bottom: 0.55rem;
    }
 
    /* ── Project Description: Orange dot ── */
    .proj-desc-item-dot {
      width: 5px;
      height: 5px;
      border-radius: 50%;
      background: #C0590C;
      flex-shrink: 0;
      margin-top: 0.45em;
    }
 
    /* ── Project Description: List text ── */
    .proj-desc-item-text {
      font-family: 'area-normal', Arial, sans-serif;
      font-size: clamp(0.78rem, 1.1vw, 0.88rem);
      font-weight: 400;
      color: #1a1612;
      line-height: 1.5;
    }
 
    /* ── Project Description: Programs block ── */
    .proj-desc-programs {
      margin-top: 1.6rem;
    }
 
    /* ── Project Description: 3-col grid ── */
    .proj-desc-grid {
      display: grid;
      grid-template-columns: 2fr 1.2fr 1fr;
      gap: 2.5rem;
      align-items: start;
    }
 
    /* ── Project Description: Right cols offset to align with paragraph ── */
    .proj-desc-col-right-offset {
      padding-top: 3.4rem;
    }
 
    /* ── Project Description: Mobile stack ── */
 @media (max-width: 767px) {
  .proj-desc-grid {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
  .proj-desc-col-right-offset {
    padding-top: 0;
  }
  .proj-desc-mobile-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
  }
}

@media (min-width: 768px) {
  .proj-desc-mobile-grid {
    display: contents;
  }
}











 /* ── Skills Tags: Section ── */
    .skills-tags-section {
  padding-top:20px;
      padding-bottom: none;
      font-family: "area-normal", sans-serif;
    }
 
    /* ── Skills Tags: Row wrapper ── */
    .skills-tags-row {
      display: flex;
      flex-wrap: nowrap;
      justify-content: space-between;
      align-items: stretch;
      width: 100%;
      gap: 0.55rem;
    }
 
    /* ── Skills Tags: Offset — indent both sides equally ── */
    .skills-tags-row--offset {
      padding: 0 3.2rem;
    }
 
    /* ── Skills Tags: Base tag — flex-grow fills row perfectly ── */
    .skills-tag {
      flex: 1;
      display: inline-flex;
      align-items: center;
      justify-content: center;
		font-family: "area-normal", sans-serif;
      font-size: clamp(12px);
      font-weight: 500;
      border-radius: 999px;
      padding: 10px 5px;
      line-height: 1;
      white-space: nowrap;
      letter-spacing: 0.01em;
      text-align: center;
    }
 
    /* ── Skills Tags: Orange filled ── */
    .skills-tag--filled {
      background-color: #C0590C;
      color: #ffffff;
      border: none;
    }
 
    /* ── Skills Tags: Cream soft ── */
    .skills-tag--soft {
      color: #000000;
	
      border: 2px solid #C0590C;
    }


@media (max-width: 576px) {
  .skills-tags-row {
    flex-wrap: wrap;
    justify-content: center; /* or flex-start */
  }

  .skills-tags-row--offset {
    padding: 0;
  }

  .skills-tag {
    flex: 0 1 auto; 

	  /* stop forcing full stretch, let content size naturally */
  }
	
	
}

.skills-tag:hover {
  animation: tag-jump 0.4s ease;
}

@keyframes tag-jump {
  0%   { transform: translateY(0); }
  30%  { transform: translateY(-8px); }
  60%  { transform: translateY(-3px); }
  80%  { transform: translateY(-6px); }
  100% { transform: translateY(0); }
}


/* Headshot Color Block */

.orange-block {
    
    color: #C0590C;
    padding: 30px;
    border-radius: 12px;
    height: 100%;
}


.orange-block h3 {
	font-family: "the-seasons", sans-serif;
	letter-spacing: 3px;
	font-size: 35px;
	text-decoration: lowercase;
    font-weight: 500;
    margin-bottom: 20px;
}

.orange-block p {
	font-family: "area-normal", sans-serif;
    font-weight: 200;
	color:#000000;
}



.recent-work {

    color: #C0590C;
    padding: 0;
    border-radius: 12px;
    height: 100%;
}


.recent-work h3 {
	font-family: "area-normal", sans-serif;
	font-size:20px;
	text-decoration: italic;
	padding-top:10px;
	
    font-weight: 200;
}

.recent-work p {
	font-family: "area-normal", sans-serif;
    font-weight: 200;
	color:#000000;
}






 /* ── Works Section: Layout ── */
    .works-section {
    
      font-family: "area-normal", sans-serif;
      display: flex;
      align-items: center;
      justify-content: center;
      min-height: 100vh;
      padding: 2rem;
    }
 
    /* ── Works Section: Row wrapper ── */
    .works-row {
      width: 100%;
      max-width: 1400px;
      padding: 1.4rem 0;
    }
 
    /* ── Works Section: Heading ── */
    .works-label {
      font-family:  "area-normal", sans-serif;
      font-size:20px;
      letter-spacing: 0.06em;
      color: #0e0e0e;
      line-height: 1;
      margin: 0;
    }
 
    .works-label__accent {
      color: #C0590C;
    }
 
    /* ── Works Section: Button ── */
    .works-btn {
       background-color: #B0B0B0;
        color: #ffffff;
		font-family: "area-normal", sans-serif;
        font-size: 1.1rem;
        letter-spacing: 1px;
  		 padding:10px 15px;
        border-radius: 50px;
        border: none;
        transition: all 0.3s ease;
		text-decoration: none;
    }

    .works-btn:hover {
        background-color: #000000;
        color: #C0590C;
        transform: translateY(-2px);
		text-decoration: none;

    }
 




.contact-block {
        padding: 20px;
	padding-top: 0px;
	padding-bottom: 150px;
    border-radius: 12px;
	border-color: #C0590C;
    height: 100%;
	
}


.contact-block h3 {
	font-family: "area-normal", sans-serif;
    font-weight: 500;
    margin-bottom: 15px;
}



.contact-block p {
	font-family: "area-normal", sans-serif;
    font-weight: 200;
	color:#000000;
}

.contact-block a {
	color: #C0590C;
	hover: #000000;
    text-decoration: none;
}






.custom-block {
	background-color: transparent;
	border:4px solid #C0590C;
    padding: 10px;
    border-radius: 12px;
    height: 100%;
	
}

.custom-block p{
	font-family: "area-normal", sans-serif;
	font-size: 24px;
    font-weight: 400;
	 text-align: center;
     padding-top:10px;
	
}




.img-fluid {

	padding: 7px;
}


/*squiggly line */

body {
            margin: 0;
            background-color: #f0f0f0;
        }

        .scrolling-container {
            overflow: hidden;
            height: 100px;
            position: relative;
        }

        .squiggly-line {
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            width: 200%;
            animation: scroll 10s linear infinite;
            display: flex;
        }

        .squiggly-line svg {
            width: 50%;
            height: 100%;
            flex-shrink: 0;
        }

        @keyframes scroll {
            0% { transform: translateY(-50%) translateX(0); }
            100% { transform: translateY(-50%) translateX(-50%); }
        }

/*squiggly line end */
	
.orange-block{
	padding-bottom :50px;
}

.orange-block p{
	padding-bottom :20px;
}

.orange-block li{
	font-family: "area-normal", sans-serif;
	font-size: 16px;
    font-weight: 200;
	
}


/* Block with stats */

.stats-box{
	
	padding-bottom: none;
	padding-top:20px;
}

      .stats-card {
            border-radius: 10px;
            border: none;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
            overflow: hidden;
		  	background-color: #C0590C;
			font-family: "area-normal", sans-serif;
		  
		  
		  	
        }

        .stat-item {
            text-align: center;
            padding: 30px 20px;
            border-right: 1px solid rgba(0, 0, 0, 0.1);
			
        }

        .stat-item:last-child {
            border-right: none;
        }

        .stat-number {
            font-size: 36px;
            font-weight: 700;
            color: #FFFFFF;
            margin-bottom: 10px;
        }

        .stat-label {
            font-size: 13px;
            color: #FFFFFF;
            text-transform: uppercase;
            letter-spacing: 1px;
			font-weight: 100;
        }

        .stat-icon {
            font-size: 2rem;
            margin-bottom: 5px;
			color: #FFFFFF;
        }

        @media (max-width: 768px) {
            .stat-item {
                border-right: none;
                border-bottom: 1px solid rgba(0, 0, 0, 0.1);
            }
            
            .stat-item:last-child {
                border-bottom: none;
            }
        }

/* Button */

.resume-btn {
        background-color: #B0B0B0;
        color: #ffffff;
		font-family: "area-normal", sans-serif;
        font-size: 1.1rem;
        letter-spacing: 1px;
        padding: 10px 20px;
        border-radius: 50px;
        border: none;
        transition: all 0.3s ease;
		text-decoration: none;
    }

    .resume-btn:hover {
        background-color: #000000;
        color: #C0590C;
        transform: translateY(-2px);
		text-decoration: none;

    }


.about-btn {
        background-color: #B0B0B0;
        color: #ffffff;
	font-family: "area-normal", sans-serif;
        font-size: 1.1rem;
        letter-spacing: 1px;
        padding: 12px;
        border-radius: 50px;
        border: none;
        transition: all 0.3s ease;
		text-decoration: none;
    }

    .about-btn:hover {
        background-color: #000000;
        color: #C0590C;
        transform: translateY(-2px);
		text-decoration: none;

    }






  .title-section {
            text-align: center;
            margin-bottom: 100px;
        }

        .main-title {
            font-size: 7rem;
            font-weight: 900;
            color: #333;
            line-height: 1.1;
            margin: 0;
        }

        .folders-container {
            max-width: 1400px;
            margin: 0 auto;
            padding: 0 40px;
        }

        .folder-item {
            text-align: center;
            cursor: pointer;
            position: relative;
        }

        .folder-icon {
            width: 150px;
            height: 120px;
            background: linear-gradient(180deg, #ff8c33 0%, #C0590C 100%);
            border-radius: 0 8px 8px 8px;
            position: relative;
            margin: 100px auto 20px;
            box-shadow: 0 8px 20px rgba(255, 102, 0, 0.4);
            transition: box-shadow 0.3s ease;
        }

        .folder-item:hover .folder-icon {
            box-shadow: 0 12px 30px rgba(255, 102, 0, 0.5);
        }

        .folder-tab {
            width: 60px;
            height: 20px;
            background: linear-gradient(180deg, #ffa64d 0%, #ff8c33 100%);
            border-radius: 8px 8px 0 0;
            position: absolute;
            top: -20px;
            left: 0;
            box-shadow: 0 -2px 5px rgba(255, 102, 0, 0.2);
        }

        .folder-shine {
            width: 100%;
            height: 30%;
            background: linear-gradient(180deg, rgba(255, 255, 255, 0.3) 0%, rgba(255, 255, 255, 0) 100%);
            border-radius: 0 8px 0 0;
            position: absolute;
            top: 0;
            left: 0;
        }

        .folder-preview {
            position: absolute;
            bottom: 100%;
            left: 50%;
            transform: translateX(-50%) translateY(60px);
            opacity: 0;
            transition: all 0.4s ease;
            width: 180px;
            height: 130px;
            border-radius: 10px;
            overflow: hidden;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
            pointer-events: none;
            border: 3px solid white;
        }

        .folder-preview img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        .folder-item:hover .folder-preview {
            transform: translateX(-50%) translateY(-30px);
            opacity: 1;
        }

        .folder-label {
            font-size: 1rem;
            font-weight: 600;
            color: #333;
            margin-top: 5px;
        }

        @media (max-width: 1200px) {
            .main-title {
                font-size: 5rem;
            }
            
            .folder-icon {
                width: 120px;
                height: 100px;
            }
        }

        @media (max-width: 768px) {
            .main-title {
                font-size: 3rem;
            }
            
            .folder-icon {
                width: 100px;
                height: 85px;
            }
            
            .folder-label {
                font-size: 0.9rem;
            }
        }






/* Hover Blur Effect */
.hover-white {
    color: #fff;
    text-transform: uppercase;
	font-family: "area-normal", sans-serif;
    text-shadow: 2px 2px 8px #000000;
}

.hover-blur a {
    display: block;
    position: relative;
    overflow: hidden;
}

.hover-blur img {
    width: 100%;
    height: auto;
    transition: all 0.5s ease-in-out;
}

.hover-blur:hover img {
    transform: scale(1.2);
    filter:  blur(4px);
}


.hover-blur a h2 {
    display: block;
    position: absolute;
    bottom: 0;              /* move text to bottom */
    left: 0;
    height: auto;           /* let it shrink naturally */
    width: 100%;
    padding: 8px 15px;      /* smaller padding */
    font-size: 15px;      /* smaller text */
    text-align: center;
    
    opacity: 0;
    transition: all 0.5s linear;
}

.hover-blur:hover a h2 {
    opacity: 1;
}

/* Text scaling effect */
.hover-blur .text-white {
    transform: scale(0);
    transition: all 0.5s linear;
    opacity: 0;
}

.hover-blur:hover .text-white {
    transform: scale(1);
    opacity: 1;
}


.bi_clr:hover {
    color: #000000;;
}







    






/* Footer */

 .footer {
		
        background-color: #C0590C;
        color: #fff;
    }


    .footer a {
        color: #fff;
        text-decoration: none;
    }

  
.footer-icon {
        font-size: 24px;
        color: white;
        transition: color 0.3s ease;
		padding-left:10px;
    }
    
    .footer-icon:hover {
        color: #000000;
    }
    
    .btn-outline-light {
		font-family: "area-normal", sans-serif;
		padding-botom:9px;
		padding-top: 5px;
        border: 2px solid white;
        color: white;
        border-radius: 25px;
        font-weight: 600;
        transition: all 0.3s ease;
		text-transform: lowercase;

    }
    
    .btn-outline-light:hover {
        background-color: white;
        color: #333;
		
    }