:root {
      --light-bg: #EBF4EC;
      --accent:   #1A535C;
      --accent-hover: #124046;
      --danger:   #FE6B6B;
      --radius:   .5rem;
      }

body{
	font-family: "proxima-nova", sans-serif;
	-webkit-font-smoothing: antialiased;
}

main{
    padding: 80px 20px;
}

h2 {
    margin-top: 32px;
    font-weight: 600;
    margin-bottom: 16px;
}

p {
    line-height: 30px;
}

.red-text {
	color: red;
}
	  
.parallax {
	will-change: transform;
	transition: none !important;
}

   
    /* Accent button */
    .btn-accent{background:var(--accent);color:#fff;border:none;border-radius:var(--radius);} 
    .btn-accent:hover{background:var(--accent-hover);color:#fff;}

    /* Hero */
    .hero{background:var(--light-bg);} 

    /* Portfolio cards */
    .portfolio-card img{border-radius:var(--radius);}
    .portfolio-card{transition:transform .3s,box-shadow .3s;}
    .portfolio-card:hover{transform:translateY(-6px);box-shadow:0 6px 18px rgba(0,0,0,.08);} 
	  
	  .dropdown-menu { background: transparent; border: none; }
	  
	  .dropdown-menu li { height: 40px; }
	  
	  .dropdown-item { transition: transform .32s ease-in-out; }
	  
	  .dropdown-item:hover { transform: scale(1.032); background: transparent; }

    /* Footer */
    footer{background:#1a1a1a;color:#fff;} 
    footer a{color:var(--danger);}

    .navbar { background-color: transparent; backdrop-filter: saturate(180%) blur(20px); }
	  
	  .navbar-toggler { border: none; }
	  
	  @media (max-width: 767px) {
		.mobile-top-40 {
			margin-top: 40px;
			margin-bottom: 40px;
		  }
	  }
	  
	  .py-6 {
		padding-top: 6rem;
	  }
  

	.about-me-background h2 {
		font-size: calc(1.325rem + .9vw);	
	}
	.about-me-background {
  position: relative;
  padding: 20px;
  border-radius: 8px;
  overflow: hidden;
}

.about-me-background::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url('assets/image-3.webp');
  background-size: cover;
  background-position: top center;
  filter: blur(2px);
  transform: scale(1.05);
  z-index: 1;
}

/* 2) Overlay-laag */
.about-me-background::after {
  content: "";
  position: absolute;
  inset: 0;
  background-color: rgba(235,244,236, 0.8);
  border-radius: inherit;
  z-index: 2;
}

.about-me-background > * {
  position: relative;
  z-index: 3;
}


	@media (min-width: 769px){
        main {
            width: 640px;
            margin: 0 auto;
        }

    }