.hey.hey.hey.hey.hey.hey@charset "UTF-8";
/* CSS Document */


/* ==========================================================
   TABLET
========================================================== */

  @media (max-width:991px){

	  /* ======== 2. HERO ======== */
	  .hero {
		  background: linear-gradient(90deg, rgba(246, 241, 238, .96) 0%, rgba(246, 241, 238, .9) 39%, rgba(246, 241, 238, .08) 70%)!important;
		  background-image: none!important;
      }
	  /* ======== 3. ABOUT ======== */


	  
     
	  .project-grid {
        grid-template-columns: repeat(2, 1fr);
        grid-auto-rows: 170px;
      }

      .project-card,
      .span-2,
      .span-3,
      .span-4,
      .row-2,
      .row-3 {
        grid-column: span 1;
        grid-row: span 1;
      }

      .projects-title {
        justify-content: center;
      }

      .project-overlay {
        position: relative;
        width: 100%;
        min-height: 260px;
        display: none;
      }

      .project-shell.is-filtered .project-overlay {display: flex;}
		
	  #skills .row {padding: 0px 20PX;}

      .contact {background-position: 60% top;}

    .project-carousel{flex-direction:column;}

    .project-overlay {background: linear-gradient(180deg, rgba(252,247,244,.97), rgba(255,255,255,.93));}

    .carousel{width:100%;}

    .carousel-inner{height:500px;}

    .carousel-item{height:500px;}

    .carousel-indicators{bottom:15px;}

    .carousel-indicators [data-bs-target]{width:70px;height:50px;}
	  
	  
	  .contact-section{padding:80px 0;}

.contact-subtitle{font-size:3rem;}

.contact-title{font-size:2.5rem;}

.portrait-image{ margin-top:60px; max-width:420px;}

.contact-item{margin-bottom:20px;}

  }

/* ==========================================================
   MOBILE
   ========================================================== */

  @media (max-width:768px){
	  	  
	  /* ======== 2. RESET ======== */
	  .nav-link {
      text-decoration: none;
	  text-shadow: none;	
		  font-weight: 600
	  }
	  
	  a:hover, a:active, a:focus, a:target {
		  color: var(--olive-dark)!important; 
		  text-decoration: none!important; 
		  text-shadow: none;
	  }

	  /* ======== 3. NAVBAR ======== */
	  .navbar {
		  background: var(--soft)!important;
		  height: 150px!important;
	  }
	  	  
	  /* -------- Logo -------- */
	  .navbar-brand {width: 15%!important;}
	  
	  /* -------- Toggler -------- */
	  .navbar-toggler { border: 0; box-shadow: none;}

	  .navbar .container{display: contents;}
		
      .nav-link {color: var(--ink)!important;}

      .navbar-nav {
		  padding: 20px 0;
		  font-size: 1.8rem;
		  text-align: center;
		  width:100%!important;
		  background: #fcf7f4;
		  margin:0;

	  }
	 
	  .navbar-brand {width: 15%;}
	  
	  .material-symbols-outlined {font-size: 50px!important;}
	  
	  /* ======== 4. HERO ======== */

      .hero {
		background-image: none!important;
		background: linear-gradient(45deg, rgba(194, 183, 176, 1) 0%, rgba(174, 166, 159, 1) 100%) !important;
        min-height: 650px;
        padding-top: 120px;
      }

      .hero p {
        font-size: 17px;
        margin-bottom: 30px;
      }

	  /* ======== 4. ABOUT ======== */
	  
	  .about {
		  display: block!important;
		  align-items:center;
		  justify-content: center;
	  }

  
	  .hey-container {width: 30%}

  
	  .text-container {width: 100%;}

  
	  .divider-line {
		  display: flex;
		  align-items: center;
		  gap: 32px;
		  color: var(--olive);
		  text-transform: uppercase;
		  font-size: 1.2rem;
		  justify-content: center;
		  padding: 28px 0;
      }

  .divider-line::before,
  .divider-line::after {
      content: "";
      height: 2px;
      flex: 1;
      background: var(--line);
  }

  .divider-dot {
      color: var(--olive);
      font-weight: 700;
  }
      .divider-line {
        gap: 14px;
        font-size: 15px;
      }

      .project-grid {
        grid-template-columns: 1fr;
      }

      .contact {
        min-height: 620px;
        align-items: flex-start;
        background-position: 68% bottom;
      }

      .contact-copy {
        width: auto;
        margin: 0 24px;
        padding-top: 10px;
      }

      .contact p,
      .contact a {
        font-size: 22px;
      }

    .project-overlay{padding:25px;}

    .project-info h3{font-size:2rem;}

    .project-info p{font-size:16px;}

    .carousel-inner{height:340px;}

    .carousel-item{height:340px;}

    .carousel-control-prev,
    .carousel-control-next{ width:45px;}

    .carousel-control-prev-icon,
    .carousel-control-next-icon{ width:40px;height:40px;}

    .carousel-indicators{
        position:relative;
        bottom:auto;
        margin-top:20px;
        flex-wrap:wrap;
    }

    .carousel-indicators [data-bs-target]{
        width:60px;
        height:45px;
    }
	  
	  
	  
	  .contact-subtitle{ font-size:2.3rem; text-align:center;}

.contact-title{text-align:center;}

.title-line{margin:20px auto 35px;}

.contact-text{text-align:center;}

.contact-info{ margin-top:40px;}

.contact-item{align-items:flex-start;}

.btn-contact{ width:100%;margin-top:40px;}

  }

/* ==========================================================
   SMALL MOBILE
========================================================== */

  @media (max-width:480px){
      .project-info{text-align:center;}
      .project-info .pill-btn{width:100%;}
      .project-details{margin-top:20px;}
      .carousel-inner{height:260px;}
      .carousel-item{height:260px;}
      .carousel-item img{object-fit:contain;}
  }