/*Main Root*/
    
            :root {
            --input-bg-color: rgba(255, 255, 255, 0.4);
            --border-color: rgba(255, 255, 255, 0.5);
            --focus-shadow: 0 0 0 3px rgba(59, 130, 246, 0.4);
            --focus-border: rgba(59, 130, 246, 0.8);
        }

/*Header Section*/
header {
    margin-top: -1rem;
    width: 100%;
    display: flex;
    column-gap: 30rem;
    padding: 15px 30px 15px 50px;
    margin-bottom: 2rem;
    position: fixed;
    z-index: 1000;
    
    /* Liquid Glass Effect */
background: linear-gradient(
0deg,
rgba(246, 246, 244, 0.02) 0%,
rgba(246, 246, 244, 0.03) 25%,
rgba(246, 246, 244, 0.04) 50%,
rgba(246, 246, 244, 0.03) 75%,
rgba(246, 246, 244, 0.02) 100%
);
    
    /* Transition for scroll effects */
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Enhanced glass effect when scrolled */
header.scrolled {
    backdrop-filter: blur(25px);
    -webkit-backdrop-filter: blur(25px);
}

header::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-size: 200% 200%;
    animation: liquid-shimmer 8s ease-in-out infinite;
    pointer-events: none;
    border-radius: inherit;
}

/* Enhance the glass effect with more sophisticated gradients */
header.scrolled::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
}
        
         .logo {
			max-width: 6rem;
			padding: 1rem;
		}
		
		.logo-header {
			display: flex;
			align-items: center;
		}
		
.logotext {
    font-size: 2.3em!important;
	font-family: "Cal Sans", sans-serif;
	font-weight: 400;
	font-style: normal;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    transform-origin: center;
}

.logotext.blur-hidden {
    opacity: 0 !important;
    filter: blur(10px) !important;
    transform: translateY(-10px) !important;
}

.logotext.blur-visible {
    opacity: 1 !important;
    filter: blur(0px) !important;
    transform: translateY(0) !important;
}

		@media (max-width: 500px) {
    	.logo-header {
       		justify-content: left;
        width: 100%;
        position: relative;
        transition: transform 0.5s ease-in-out;
   		 }
    }
		
		@media (max-width: 500px) {
    	.logotext {
       		display: none;
       		transition: transform 0.5s ease-in-out;
   		 }
    }

		.sidepanel  {
			z-index: 1;
			top: 5.5rem;
			right: 1rem;
			background-color: #fff;
			border-radius: 15px;
			white-space: nowrap;
			display: flex;
			flex-flow: wrap;
			position: fixed;
			flex-direction: column;
			row-gap: 1rem;
		    padding-top: 30px;
		    padding-bottom: 40px;
		    padding-right: 20px;
		    transform: scaleY(0);
		    transform-origin: top;
		    transition: transform 0.5s ease-in-out;
		    font-family: "Manrope", sans-serif;
		}
		
		.sidepanel.open {
		    transform: scaleY(1);
		
		}
		
		.sidepanel a {
		    padding: 0px 8px 8px 30px;
		    text-decoration: none;
		    font-size: 18px;
		    color: #5e5e5e;
		    display: flex;
		    transition: 0.3s;
		}
		
		.sidepanel a:hover {
		  color: #b2bda7;
		  border-radius: 15px;
		  transform: translateY(-10px);
		  transform: translateX(10px);
		  transition-timing-function: ease-in-out;
		  transition: 0.6s;
		}
		
		.sidepanel .closebtn {
		  position: absolute;
		  top: 0;
		  right: 25px;
		  font-size: 36px;
		  text-align: left;
		}
		
		.openbtn {
		  font-size: 20px;
		  cursor: pointer;
		  background-color: #000;
		  color: white;
		  padding: 0.6rem 1rem;
			right: 1rem;
			position: absolute;
			border-radius: 15px;
			transition: all 0.2s ease-in-out;
		}
		
		.openbtn:hover {
		  background-color: #b2bda7;
		}
		
		.menu-height-1-line {
		  padding: 10px 0px 20px 0px;
		  height: 20px;
		}
		
		.menu-height-2-line {
			padding: 10px 0px 10px 0px;
			height: 40px;
		}
		
		
/*Fonts*/
		
		h1 {
            font-size: 2.25rem!important;
            margin: 0;
            font-weight:700!important;
            color: #232323!important;
        }
        
        h2 {
            font-size: 1.5rem!important;
            margin: 1rem!important;
            font-weight: 400!important;
            color: #232323!important;
        }
        
         .headingtext {
            padding-top:7rem;
        }
        
        .h1-v2 {
  		font-family: "Libre Caslon Text", serif;
  		font-optical-sizing: auto!important;
 		font-weight: 400!important;
  		font-style: normal!important;
  		font-size: 3.2rem!important;
  		  		line-height: 1.2!important;
        }
        
        .h2-v2 {
  		font-family: "Libre Caslon Text", serif;
  		font-optical-sizing: auto!important;
 		font-weight: 400!important;
  		font-style: normal!important;
  		font-size: 1.6rem!important;
        }
        
         .p-v2 {
	        font-family: "Manrope", sans-serif;
  		font-optical-sizing: auto!important;
 		font-weight: 300!important;
  		font-style: normal!important;
  		font-size: 1.2rem!important;

        }

/*Body Section*/

        body {
	        font-family: "Manrope", sans-serif;
			background: #f6f6f4;
	        display: flex; 
	        flex-direction: column;
	        align-items: center;
	        padding: 1rem 2rem; 
	        margin: 0;
        }

        .main-container {
			width: 90%;
			margin-top: 2rem;
        }
        
        .content-bg {
            background: #fff;
            border-radius: 15px;
            padding: 3rem;
        }
        
    .page-footer {
      text-align: center;
      padding: 1.5rem 0;
      margin-top: auto;
      align-self: center;
    }
        
/*Input Forms*/

        .input-group {
            margin-bottom: 1.25rem;
        }

        .input-group label {
            display: block;
            margin-bottom: 0.5rem;
            font-weight: 800;
            color: #111;
        }

        input,
        textarea {
            width: 100%;
            padding: 12px!important;
            box-sizing: border-box;
            font-family: 'Inter', sans-serif;
            font-size: 1rem;
			background-color: #F9F9FB;
			border-radius: 15px;
        }

        input:focus,
        textarea:focus {
            outline: 1px solid #232323;!important;
            box-shadow: none!important;
        }
        
        textarea {
            resize: vertical;
            min-height: 120px;
        }

        .product-section {
            margin-bottom: 3rem;
            margin-top: 1.5rem;
        }
        
        /*buttons*/

        .btn {
            white-space: nowrap;
            background: transparent;
            font-weight: 400;
            font-size: 1rem;
            display: inline-flex;
            justify-content: center;
            align-items: center;
            text-align: center;
            transition: all 0.2s ease-in-out;
            border-radius: 15px;
            border: 1px solid #232323;
            padding: 10px 18px;
            color: #232323;
        }

        .btn:hover {
            background: #b2bda7;
            transform: translateY(-2px);
            cursor: pointer;
            color: #fff;
            border: 1px solid #C0B69C;
        }

        .btn-green { 
        	background: #b2bda7;
        	color: #fff;
        	border: none;
        	white-space: nowrap;
            font-weight: 400;
            font-size: 1rem;
            display: inline-flex;
            justify-content: center;
            align-items: center;
            text-align: center;
            transition: all 0.2s ease-in-out;
            border-radius: 15px;
            padding: 10px 18px;
        }

        .btn-green:hover { 
        	background: #b3b9b7;
        	border: none;
        	color: #fff;
        	transform: translateY(-2px);
        	cursor: pointer;
        }

        .btn-danger {
            background: rgba(239, 68, 68, 0.8);
            color: white;
            border: 1px solid rgba(239, 68, 68, 0.1);
        }

        .btn-danger:hover {
            background: rgba(220, 38, 38, 1);
            color: white;
        }
        
        .buttons-below {
            display: flex;
            justify-content: space-between;
            gap: 1rem;
        }
        
        .remove-button {
            position: absolute;
            top: 1rem;
            right: 1rem;
        }

        .output-box {
            white-space: pre-wrap;
            padding: 15px;
            margin-top: 0.5rem;
            border-radius: 8px;
            cursor: pointer;
            overflow-wrap: break-word;
            min-height: 150px;
        }


/*Selectors*/

         ::-moz-selection { 
 			 color: #fff;
  			background: #9BA397;
		}

		::selection {
 			 color: #fff;
 			 background: #9BA397;
		}
		
		
/*Bento Grids*/

         .bento-grid {
		      display: grid;
		      grid-template-columns: 1fr; 
		      gap: 1rem; 
		      width:100%;
    	}
		
		
/*Page Specific*/ 
  
    .main-container {
      margin-top: 7rem;
    }


    .interactive-card {
      display: flex;
      justify-content: center;
      align-items: center;
      padding: 1rem;
    }

    .interactive-card.link-card {
      flex-direction: row;
      gap: 0.5rem;
    }

    .link-favicon {
      width: 20px;
      height: 20px;
      object-fit: contain;
      flex-shrink: 0;
    }

    .profile-image {
      width: 6rem; 
      height: 6rem; 
      border-radius: 9999px;
      object-fit: cover;
      border: 3px solid #e5e7eb;
      margin-bottom: 1rem;
      display: block;
    }

    
    @media (min-width: 640px) { 
      .bento-grid {
        grid-template-columns: repeat(2, 1fr);
      }
      .intro-card-container {
        grid-column: span 2;
      }
    }