:root {
	--theme-primary-color     : #381F0F;
	--theme-accent-color      : #F4F1E8;
	--theme-dark-bg-color     : #EAE7DE;
	--theme-light-text-color  : #f4f1e8;

	--theme-grid-gutter-width : 1.5rem;
}

*, ::after, ::before {
	box-sizing                  : border-box;
	-webkit-tap-highlight-color : transparent;
}

html {
	font-size                : 16px;
	line-height              : 1.7;
	-webkit-text-size-adjust : 100%;
}

html,
:has(:target) {
	scroll-behavior : smooth;
}


body {
	height                  : 100%;
	background              : var(--theme-dark-bg-color);
	padding                 : 0;
	margin                  : 0;
	font-family             : "Lunasima", sans-serif;
	font-size               : 1em;
	font-weight             : 400;
	font-style              : normal;
	font-optical-sizing     : auto;
	font-variation-settings : "wdth" 100;
}

h1, h2, h3, h4, h5, h6 {
	font-weight : 700;
	line-height : 1.3;
}

h1 {
	margin    : 0 0 2rem;
	font-size : 2.8em;
}

h2, h3, h4, h5, h6 {margin : 1.5rem 0;}

img {
	max-width      : 100%;
	height         : auto;
	vertical-align : middle;
	border-style   : none;
}

svg {
	height         : auto;
	overflow       : hidden;
	vertical-align : middle;
}

audio, video, iframe {
	display   : block;
	max-width : 100%;
}

p, ul, ol, dl, pre, blockquote, audio, video, iframe {
	margin : 0 0 1.5rem;

	&:empty {margin : 0;}
}

ol, ul {
	padding-left : 1rem;

	ol, ul {margin-bottom : 0;}
}

a {
	text-decoration : none;
	transition      : all 0.2s;

	/*&:hover, &:focus-visible {outline : 0;}*/
}

/*-----------------------------------------------------------------------------------*/

.text {
	> *:first-child {margin-top : 0 !important;}

	> *:last-child {margin-bottom : 0 !important;}
}

.uppercase-text {text-transform : uppercase;}

.screen-reader-response,
.screen-reader-text,
.sr-only {
	position          : absolute;
	width             : 1px;
	height            : 1px;
	padding           : 0;
	overflow          : hidden;
	clip              : rect(0, 0, 0, 0);
	white-space       : nowrap;
	-webkit-clip-path : inset(50%);
	clip-path         : inset(50%);
	border            : 0;
}

/*-------------------------------------------------------------------------------------*/

.container {
	width        : 94%;
	max-width    : 1200px;
	margin-right : auto;
	margin-left  : auto;

	&.container-sm {max-width : 1000px;}

	&.container-lg {max-width : 1400px;}

	&.container-xl {max-width : 1600px;}

	&.container-fluid {max-width : none;}
}

.row {
	margin-left  : calc(var(--theme-grid-gutter-width) / -2);
	margin-right : calc(var(--theme-grid-gutter-width) / -2);
	display      : flex;
	flex-wrap    : wrap;

	&.no-gutters {
		margin-right : 0;
		margin-left  : 0;

		> .col,
		> [class*="col-"] {
			padding-right : 0;
			padding-left  : 0;
		}
	}

	.col {
		flex-basis    : 0;
		flex-grow     : 1;
		max-width     : 100%;
		padding-left  : calc(var(--theme-grid-gutter-width) / 2);
		padding-right : calc(var(--theme-grid-gutter-width) / 2);
	}

	.col-auto {
		flex          : 0 0 auto;
		width         : auto;
		padding-left  : calc(var(--theme-grid-gutter-width) / 2);
		padding-right : calc(var(--theme-grid-gutter-width) / 2);
	}

	.col-md-6, .col-lg-6 {
		width         : 100%;
		min-height    : 1px;
		padding-left  : calc(var(--theme-grid-gutter-width) / 2);
		padding-right : calc(var(--theme-grid-gutter-width) / 2);
		position      : relative;
	}
}

.section-title {
	margin      : 0 0 2rem;
	color       : var(--theme-primary-color);
	font-size   : 2rem;
	font-weight : 700;
}

/*-------------------------------------------------------------------------------------*/

.site-header {
	padding : 15px 0;
	background : var(--theme-accent-color);
	border-bottom : 1px solid var(--theme-primary-color);
}

.logo {
	max-width : 100%;
	height : auto;
	display : block;
}

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

.main-navigation {
	display : flex;
	align-items : center;
}

.nav-menu {
	display : flex;
	list-style : none;
	margin : 0;
	padding : 0;
	gap : 2rem;
	flex-wrap : wrap;
}

.nav-menu li {
	margin : 0;
}

.nav-menu a {
	color : var(--theme-primary-color);
	font-weight : 500;
	font-size : 15px;
	text-transform : uppercase;
	letter-spacing : 0.05em;
	transition : opacity 0.2s;
}

.nav-menu a:hover,
.nav-menu a:focus {
	opacity : 0.7;
}

.nav-donate {
	font-weight : 700 !important;
}

.nav-toggle {
	display : none;
	flex-direction : column;
	background : transparent;
	border : none;
	cursor : pointer;
	padding : 0.5rem;
	gap : 0.3rem;
}

.nav-toggle span {
	display : block;
	width : 25px;
	height : 2px;
	background : var(--theme-primary-color);
	transition : all 0.3s;
}

.site-footer {
	padding    : 1.5rem 0;
	text-align : center;
	font-size  : 0.9rem;
}

.section-hero {
	background : var(--theme-accent-color);
	padding    : 0 0;
	color      : var(--theme-primary-color);
border-bottom : 1px solid var(--theme-primary-color);
	.row {align-items : center;}
	
	.col-image img {
		width: auto;
		height: 775px;
		max-width: 100%;
	}
}

/* Hero heading */
.hero-title {
	margin : 0 0 0px !important;
	font-size : 40px; /* default */
	line-height : 1.2;
}

@media (max-width : 767px) {
	.hero-title {font-size : 20px;}
}

@media (min-width : 1200px) {
	.hero-title {font-size : 40px;}
}

.hero-since {
	margin : 0 0 0px !important;
	font-size : 70px; /* default */
	font-weight : 700;
	line-height : 1.1;
}

@media (max-width : 767px) {
	.hero-since {font-size : 30px;}
}

@media (min-width : 1200px) {
	.hero-since {font-size : 70px;}
}

.hero-furthur {
	margin : 0 0 1.25rem;
	font-size : 64px; /* default */
	font-weight : 700;
	line-height : 1.1;
}

@media (max-width : 767px) {
	.hero-furthur {font-size : 30px;}
}

@media (min-width : 1200px) {
	.hero-furthur {font-size : 64px;}
}

.text {
	font-size: 16px;
}

.section-about {
	background : var(--theme-dark-bg-color) url("../img/texture.png") right bottom no-repeat;
	padding    : 2rem 0;
	border-bottom: 1px solid var(--theme-primary-color);
	/* border-bottom : 1px solid var(--theme-primary-color); */
	.section-title {
		font-size: 36px; /* default */
		margin-bottom: 15px !important;
	}
}

@media (max-width : 767px) {
	.section-about .section-title {font-size : 24px;}
}

@media (min-width : 1200px) {
	.section-about .section-title {font-size : 36px;}
}

.section-understanding {
	background: var(--theme-dark-bg-color);
	position: relative;
	padding    : 2rem 0;
	border-bottom: 1px solid var(--theme-primary-color);
	/* border-bottom : 1px solid var(--theme-primary-color); */
	.row {align-items : center;}
	.section-title {
		font-size: 50px;
	}

	&::before {
		content: "";
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background-image: url("../img/texture.png");
		background-position: right bottom;
		background-repeat: no-repeat;
		transform: scaleX(-1);
		transform-origin: center;
		z-index: 0;
		pointer-events: none;
	}

	> * {
		position: relative;
		z-index: 1;
	}
}

.section-comprehensive {
	background : var(--theme-accent-color);
	padding    : 2rem 0;
	color      : var(--theme-primary-color);
	border-bottom : 1px solid var(--theme-primary-color);
	position : relative;
	overflow : hidden;
}

.section-comprehensive .cell-absolute {
	position : absolute;
	left: -250px;
	top: -150px;
	height : 120%;
	width : auto;
	max-width : 65%;
	object-fit : cover;
	z-index : 0;
	pointer-events : none;
}

.section-comprehensive .row {
	position : relative;
	z-index : 1;
}

.section-comprehensive .col-text {
	text-align : right;
}

.section-comprehensive .text {
	text-align : right;
}

.hero-comprehensive {
	margin : 0 0 1.25rem;
	font-size : 50px; /* default */
	font-weight : 700;
	line-height : 1.1;
}

@media (max-width : 767px) {
	.hero-comprehensive {font-size : 25px;}
}

@media (min-width : 1200px) {
	.hero-comprehensive {font-size : 50px;}
}

.section-shift {
	background : var(--theme-primary-color) url("../img/texture.png") left top no-repeat;
	padding    : 4rem 0;
	.section-title {
		color : var(--theme-light-text-color);
		text-align: center;
	}
}

.section-donate {
	background : var(--theme-accent-color);
	padding    : 3rem 0;
	border-top : 1px solid var(--theme-primary-color);
}

@media (max-width : 767px) {
	.header-content {
		flex-wrap : wrap;
	}

	.logo {
		max-width : 200px;
		flex : 0 0 auto;
		order : 1;
	}

	.nav-toggle {
		display : flex;
		order : 2;
		flex : 0 0 auto;
	}

	.main-navigation {
		order : 3;
		display : flex;
		align-items : center;
	}

	.nav-menu {
		display : none;
		flex-direction : column;
		width : 100%;
		gap : 1rem;
		padding-top : 1rem;
	}

	.nav-menu.active {
		display : flex;
	}

	.main-navigation:has(.nav-menu.active) {
		width : 100%;
		flex-basis : 100%;
	}

	.nav-toggle.active span:nth-child(1) {
		transform : rotate(45deg) translate(5px, 5px);
	}

	.nav-toggle.active span:nth-child(2) {
		opacity : 0;
	}

	.nav-toggle.active span:nth-child(3) {
		transform : rotate(-45deg) translate(7px, -6px);
	}

	.section-hero {
		padding : 3rem 1rem;

		.row {gap : 2rem;}

		.col-image {text-align : center;}
		
		.col-image img {
			height: 400px;
		}

		h1 {text-align : center;}
	}

	.section-comprehensive {
		padding : 2rem 0;
		overflow : visible;
		display : flex;
		flex-direction : column;
	}

	.section-comprehensive .cell-absolute {
		position : relative;
		left : auto;
		top : auto;
		height : auto;
		max-width : 100%;
		width : 100%;
		opacity : 1;
		transform : none;
		margin : 0 auto 2rem;
		order : -1;
		display : block;
		padding : 0 1rem;
		box-sizing : border-box;
	}

	.section-comprehensive .container {
		order : 1;
	}

	.section-comprehensive .row {
		flex-direction : column;
	}

	.section-comprehensive .col-spacer {
		display : none;
	}

	.section-comprehensive .col-text {
		text-align : left;
		width : 100%;
	}

	.section-comprehensive .text {
		text-align : left;
	}
}

@media (min-width : 768px) {
	.col-md-6 {
		flex      : 0 0 50%;
		max-width : 50%;
	}

	.col-md-8 {
		flex      : 0 0 70%;
		max-width : 70%;
		padding-left  : calc(var(--theme-grid-gutter-width) / 2);
		padding-right : calc(var(--theme-grid-gutter-width) / 2);
	}

	.col-md-4 {
		flex      : 0 0 30%;
		max-width : 30%;
		padding-left  : calc(var(--theme-grid-gutter-width) / 2);
		padding-right : calc(var(--theme-grid-gutter-width) / 2);
	}
}

@media (min-width : 768px) and (max-width : 1199px) {
	.section-hero .col-image img {
		height: 600px;
	}
}

@media (max-width : 1199px) {
	.section-understanding {
		padding : 3rem 0;

		.row {gap : 2.5rem;}

		.col-image {text-align : center;}
	}
}

@media (min-width : 1200px) {
	:root {
		--theme-grid-gutter-width : 3rem;
	}

	.col-lg-6 {
		flex      : 0 0 50%;
		max-width : 50%;
	}

	h1 {font-size : 3.5rem;}

	.nav-menu {
		gap : 2.5rem;
	}
}



.hero-further {
	margin : 0 0 1.25rem;
	font-size : 50px; /* default */
	font-weight : 700;
	line-height : 1.1;
	margin-bottom: 10px !important;
}

@media (max-width : 767px) {
	.hero-further {font-size : 25px;}
}

@media (min-width : 1200px) {
	.hero-further {font-size : 50px;}
}