/*-----------------------------------*\
 #main.css
\*-----------------------------------*/

/**
* copyright 2023 AnupAdhikari
*/





/*-----------------------------------*\
 #CUSTOM PROPERTY
\*-----------------------------------*/

:root {

/**
  * colors
  */

--white: hsla(0, 0%, 100%, 1);
--white_a8: hsla(0, 0%, 100%, 0.08);
--white_a12: hsla(0, 0%, 100%, 0.12);
--cultured: hsla(220, 20%, 97%, 1);
--snow: hsla(345, 57%, 97%, 1);
--manatee: hsla(219, 10%, 62%, 1);
--black-coral: hsla(220, 12%, 43%, 1);
--cadet-blue-crayola_a20: hsla(222, 23%, 71%, 0.2);
--cinnamon-satin: hsla(344, 53%, 62%, 1);
--raisin-black: hsla(216, 14%, 14%, 1);
--raisin-black_a6: hsla(216, 14%, 14%, 0.06);
--gunmetal: hsla(214, 15%, 21%, 1);
--charcoal: hsla(219, 22%, 26%, 1);

/**
  * typography
  */

--ff-manrope: 'Manrope', sans-serif;

--fs-1: calc(2.7rem + 1.38vw);
--fs-2: calc(2.6rem + .66vw);
--fs-3: calc(2.6rem + .24vw);
--fs-4: 1.9rem;
--fs-5: 1.8rem;
--fs-6: 1.7rem;
--fs-7: 1.5rem;
--fs-8: 1.4rem;

--fw-700: 700;

/**
  * spacing
  */

--section-padding: 90px;

/**
  * box shadow
  */

--shadow-1: 0 0 20px hsla(216, 14%, 14%, 0.05);
--shadow-2: 0 4px 28px hsla(216, 14%, 14%, 0.07);

/**
  * border radius
  */

--radius-circle: 50%;
--radius-pill: 100px;
--radius-8: 8px;
--radius-6: 6px;

/**
  * transition
  */

--transition-1: 0.25s ease;
--transition-2: 0.5s ease;
--transition-3: 0.3s ease-in-out;

}





/*-----------------------------------*\
 #RESET
\*-----------------------------------*/

*,
*::before,
*::after {
margin: 0;
padding: 0;
box-sizing: border-box;
}

li { list-style: none; }

a,
img,
span,
button,
ion-icon { display: block; }

a {
color: inherit;
text-decoration: none;
}

img { height: auto; }

input,
button,
textarea {
background: none;
border: none;
font: inherit;
}

input,
textarea { width: 100%; }

button { cursor: pointer; }

ion-icon { pointer-events: none; }

html {
font-family: var(--ff-manrope);
font-size: 10px;
scroll-behavior: smooth;
}

body {
background-color: #DDE6ED;
color: var(--black-coral);
font-size: 1.6rem;
line-height: 1.7;
}

body.nav-active { overflow: hidden; }

::-webkit-scrollbar { width: 10px; }

::-webkit-scrollbar-track { background-color: hsl(0, 0%, 98%); }

::-webkit-scrollbar-thumb { background-color: hsl(0, 0%, 80%); }

::-webkit-scrollbar-thumb:hover { background-color: hsl(0, 0%, 70%); }





/*-----------------------------------*\
 #REUSED STYLE
\*-----------------------------------*/

.container { padding-inline: 16px; }

.social-list {
display: flex;
align-items: center;
gap: 12px;
}

.social-link {
font-size: 2rem;
transition: var(--transition-1);
}

.social-link:is(:hover, :focus-visible) { transform: translateY(-3px); }

.section { padding-block: var(--section-padding); }

.w-100 { width: 100%; }

.h1,
.h2,
.h3,
.h4 {
color: var(--charcoal);
line-height: 1.3;
}

.h1 { font-size: var(--fs-1); }

.h2 { font-size: var(--fs-2); }

.h3 { font-size: var(--fs-3); }

.h4 { font-size: var(--fs-4); }

.btn {
color: #817363;
font-size: var(--fs-6);
font-weight: var(--fw-700);
border: 2px solid #817363;
max-width: max-content;
padding: 12px 28px;
border-radius: var(--radius-pill);
transition: var(--transition-1);
will-change: transform;
}

.btn:is(:hover, :focus-visible) { transform: translateY(-4px); }

.btn-primary,
.btn-secondary:is(:hover, :focus-visible) {
background-color: #817363;
color: var(--white);
}

.section-text { 
font-size: var(--fs-5); 
text-align: justify;
}

.section-title { margin-block-end: 16px; }

.grid-list {
display: grid;
gap: 30px;
}

[data-reveal] {
opacity: 0;
transition: 0.75s ease;
}

[data-reveal="top"] { transform: translateY(-30px); }

[data-reveal="bottom"] { transform: translateY(30px); }

[data-reveal="left"] { transform: translateX(-30px); }

[data-reveal="right"] { transform: translateX(30px); }

[data-reveal].revealed {
transform: translate(0);
opacity: 1;
}





/*-----------------------------------*\
 #HEADER
\*-----------------------------------*/

.header {
position: absolute;
top: 0;
left: 0;
background-color: #F5EFE7;
width: 100%;
padding-block: 20px;
box-shadow: var(--shadow-1);
z-index: 4;
}

.header.active {
position: fixed;
animation: slideIn 0.5s ease forwards;
}

@keyframes slideIn {
0% { transform: translateY(-100%); }
100% { transform: translateY(0); }
}

.header .container {
display: flex;
justify-content: space-between;
align-items: center;
}

.nav-open-btn {
font-size: 3.5rem;
color: var(--gunmetal);
}

.navbar {
position: fixed;
top: 0;
left: -300px;
background-color: var(--raisin-black);
color: var(--white);
max-width: 300px;
width: 100%;
height: 100vh;
padding: 30px;
padding-block-end: 40px;
display: flex;
flex-direction: column;
gap: 30px;
z-index: 2;
visibility: hidden;
transition: var(--transition-3);
}

.navbar.active {
visibility: visible;
transform: translateX(300px);
}

.navbar-top {
display: flex;
justify-content: space-between;
align-items: center;
}

.nav-close-btn {
background-color: var(--white_a8);
color: var(--white);
font-size: 2rem;
padding: 6px;
border-radius: var(--radius-circle);
transition: var(--transition-1);
}

.nav-close-btn ion-icon { --ionicon-stroke-width: 50px; }

.nav-close-btn:is(:hover, :focus-visible) { background-color: var(--white_a12); }

.navbar-list { margin-block-end: auto; }

.navbar-link {
font-weight: var(--fw-700);
padding-block: 6px;
}

.contact-link { transition: var(--transition-1); }

.contact-link:is(:hover, :focus-visible) { color: var(--cinnamon-satin); }

.overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100vh;
background-color: var(--raisin-black);
pointer-events: none;
opacity: 0;
transition: var(--transition-1);
}

.overlay.active {
pointer-events: all;
opacity: 0.8;
}





/*-----------------------------------*\
 #HERO
\*-----------------------------------*/

.hero {
padding-block-start: calc(var(--section-padding) + 50px);
background-color: #C2DEDC;
min-height: 100vh;
}

.hero .container {
display: grid;
gap: 50px;
}

.hero-banner {
position: relative;
max-width: max-content;
margin-inline: auto;
}

.hero-banner .w-100 {
mask-image: url("../images/Blob.svg");
-webkit-mask-image: url("../images/Blog.svg");
mask-repeat: no-repeat;
-webkit-mask-repeat: no-repeat;
mask-position: center;
-webkit-mask-position: center;
mask-size: auto;
-webkit-mask-size: auto;
height: 560px;
  object-fit: contain;
}

.hero .shape {