/*!
Theme Name: GraceEducational
Theme URI: http://underscores.me/
Author: Aviva
Author URI: http://avivanepal.com
Description: Description
Version: 1.0.0
Tested up to: 5.4
Requires PHP: 5.6
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: graceeducational
Tags: custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned.

GraceEducational is based on Underscores https://underscores.me/, (C) 2012-2020 Automattic, Inc.
Underscores is distributed under the terms of the GNU GPL v2 or later.

Normalizing styles have been helped along thanks to the fine work of
Nicolas Gallagher and Jonathan Neal https://necolas.github.io/normalize.css/
*/

* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
  }
  
  :root {
	--primary-color: #C80D6E;
	--transition-1: all 750ms ease;
	--font-1: "Kanit", sans-serif;
	--font-2: "Life Savers", serif;
  }
  
 

body {
	font-size: 18px;
	line-height: 27px;
	font-weight: 300;
	font-family: var(--font-1);
	color: #000;
	overflow-x: hidden;
  }
  
  button {
	border: 0;
	outline: 0;
	background: transparent;
	transition: var(--transition-1);
  }
  
  a:hover,
  a {
	text-decoration: none;
	color: inherit;
	transition: var(--transition-1);
  }
  
  .pointer-none {
	pointer-events: none;
  }
  
  .lh-28 {
	line-height: 28px;
  }
  
  .custom-gy-1 {
	--bs-gutter-y: 2.2rem;
  }
  
  input,
  textarea {
	border: 0;
	width: 100%;
	transition: all 500ms ease;
  }
  
  input:focus {
	border: 0;
	outline: 0;
  }
  
  input[type=radio],
  input[type=checkbox] {
	max-width: -moz-max-content;
	max-width: max-content;
  }
  
  select {
	width: 100%;
  }
  
  input {
	border-radius: 3px;
  }
  
  select {
	border: 0;
  }
  
  .font-2 {
	font-family: var(--font-2);
  }
  
  .container-inner {
	max-width: 1250px;
  }
  
  .container-padding {
	padding: 0 80px;
  }
  
  .container-header {
	max-width: 1340px;
  }
  
  .container-large {
	max-width: 1530px;
  }
  
  .container-smaller {
	max-width: 1100px;
  }
  
  .fw-300 {
	font-weight: 300 !important;
  }
  
  .fw-400 {
	font-weight: 400 !important;
  }
  
  .fw-500 {
	font-weight: 500 !important;
  }
  
  .fw-600 {
	font-weight: 600 !important;
  }
  
  .fw-700 {
	font-weight: 700 !important;
  }
  
  .fw-800 {
	font-weight: 800 !important;
  }
  
  .fw-900 {
	font-weight: 900 !important;
  }
  
  .bkg-white {
	background: #fff;
  }
  
  .fs-20 {
	font-size: 20px !important;
  }
  
  .fs-14 {
	font-size: 14px;
  }
  
  .fs-16 {
	font-size: 16px;
  }
  
  .fs-17 {
	font-size: 17px;
  }
  
  .fs-18 {
	font-size: 18px;
  }
  
  .fs-28 {
	font-size: 28px !important;
  }
  
  .text-333 {
	color: #333333;
  }
  
  .text-first {
	color: var(--primary-color);
  }
  
  .text-second {
	color: var(--secondary-color);
  }
  
  .text-4141 {
	color: #414141;
  }
  
  .text-999 {
	color: #999999;
  }
  
  .text-666 {
	color: #666666;
  }
  
  .top-showcase {
	position: relative;
	overflow: hidden;
  }
  .top-showcase::after {
	content: "";
	position: absolute;
	width: 100%;
	height: 100%;
	background: linear-gradient(180deg, rgba(0, 0, 0, 0.8) 17.5%, rgba(0, 0, 0, 0.0775758) 80.5%, #000000 100%);
	top: 0;
	left: 0;
	z-index: -1;
  }
  .top-showcase .bg-image {
	position: absolute;
	z-index: -1;
	width: 100%;
	height: 100%;
	top: 0;
  }
  .top-showcase .bg-image img {
	width: 100%;
	height: 100%;
	-o-object-fit: cover;
	   object-fit: cover;
  }
  .top-showcase .hero-text {
	padding-top: 250px;
	padding-bottom: 270px;
  }
  .top-showcase .hero-text a.popup-video:hover {
	color: var(--primary-color);
  }
  
  header {
	padding: 20px 0;
  }
  
  .button-style-1 {
	padding: 8px 28px;
	border: 2px solid var(--primary-color);
	color: var(--primary-color);
	border-radius: 2px;
  }
  .button-style-1:hover {
	background: var(--primary-color);
  color: #fff;
  }
  .button-style-1.blue {
	  border-radius: 4px;
  }
  .button-style-1.blue:hover {
	background: #0884C2;
	color: #fff;
  }
  .button-style-1.dark-outline {
	border-color: #333;
	color: #333;
	padding: 6px 45px;
  }
  .button-style-1.dark-outline:hover{
	color: #fff;
  }
  
  .hero-text h1 {
	font-size: 40px;
	margin-bottom: 15px;
  }
  .hero-text p {
	max-width: 700px;
	margin: auto;
  }
  .hero-text a.popup-video {
	font-size: 17px;
	font-weight: 300;
	display: flex;
	justify-content: center;
	align-items: center;
	padding: 30px 0;
	gap: 9px;
  }
  .hero-text a.popup-video svg, .hero-text a.popup-video i {
	font-size: 40px;
  }
  .hero-text a.popup-video span {
	text-decoration: underline;
  }
  
  .goals {
	margin-top: -100px;
	position: relative;
	z-index: 9;
  }
  
  .card-why {
	background: white;
	box-shadow: 0px 1px 1px 0px rgba(0, 0, 0, 0.1490196078);
	padding: 40px 30px;
	text-align: center;
	border-radius: 7px;
  }
  .card-why .icon {
	width: 78px;
	height: 78px;
	border-radius: 100px;
	display: flex;
	align-items: center;
	justify-content: center;
	margin: auto;
	margin-bottom: 10px;
	border: 2px solid transparent;
	transition: var(--transition-1);
  }
  .card-why .icon img {
	transition: var(--transition-1);
  }
  .card-why .icon.yellow {
	background: #F8DA22;
  }
  .card-why .icon.blue {
	background: #0884C2;
  }
  .card-why .icon.pink {
	background: var(--primary-color);
  }
  .card-why h3 {
	font-size: 22px;
	font-weight: 500;
  }
  .card-why p {
	margin: 0;
  }
  .card-why:hover .icon {
	background: #fff;
  }
  .card-why:hover .icon.yellow {
	border: 2px solid #F8DA22;
  }
  .card-why:hover .icon.yellow img {
	filter: brightness(0) saturate(100%) invert(90%) sepia(29%) saturate(1718%) hue-rotate(340deg) brightness(109%) contrast(94%);
  }
  .card-why:hover .icon.blue {
	border: 2px solid #0884C2;
  }
  .card-why:hover .icon.blue img {
	filter: brightness(0) saturate(100%) invert(37%) sepia(84%) saturate(2734%) hue-rotate(177deg) brightness(90%) contrast(94%);
  }
  .card-why:hover .icon.pink {
	border: 2px solid var(--primary-color);
  }
  .card-why:hover .icon.pink img {
	filter: brightness(0) saturate(100%) invert(9%) sepia(78%) saturate(7185%) hue-rotate(322deg) brightness(100%) contrast(90%);
  }
  .card-why:hover .icon img {
	transform: scaleX(-1);
  }
  
  .section-gap {
	padding-top: 80px;
  }
  
  .section-title span {
	color: var(--primary-color);
	font-weight: 400;
  }
  .section-title h2 {
	font-size: 38px;
	font-weight: 500;
  }
  
  .card-project .image {
	border-radius: 4px;
	overflow: hidden;
  }
  .card-project .image img {
	border-radius: 4px;
	transition: var(--transition-1);
	transform: scale(1);
  }
  .card-project .text-project {
	padding: 10px;
  }
  .card-project h3, .card-project h2 {
	font-size: 20px;
	font-weight: 400;
  }
  .card-project:hover a img {
	transform: scale(1.04);
  }
  .card-project:hover h3, .card-project:hover h2 {
	color: var(--primary-color);
  }
  
  .projects {
	position: relative;
	margin-top: 80px;
	padding-bottom: 50px;
  }
  .projects::before {
	content: "";
	position: absolute;
	width: 100%;
	height: 100%;
	background: url("./assets/images/stripes.webp");
	top: 0;
	left: 0;
	z-index: -1;
  }
  .projects .owl-nav {
	margin-top: 8px;
	position: absolute;
	left: 0;
	right: 0;
	overflow: hidden;
  }
  .projects .owl-nav button {
	min-width: 48px;
	height: 48px;
	border-radius: 100px;
	border: 1px solid #b7b7b7;
  }
  .projects .owl-nav button:hover {
	background: var(--primary-color);
	color: #fff;
  }
  .projects .owl-dots {
	position: relative;
	z-index: 2;
	max-width: -moz-max-content;
	max-width: max-content;
	left: 0;
	right: 0;
	margin: 27px auto;
  }
  .projects .owl-dots span {
	width: 11px;
	height: 11px;
	background: transparent;
	outline: 1px solid #b7b7b7;
	outline-offset: 2px;
  }
  .projects .owl-dots .owl-dot span {
	background: #fff !important;
  }
  .projects .owl-dots .owl-dot.active span {
	background: #869791 !important;
  }
  .projects .owl-next {
	margin-left: 125px !important;
  }
  .projects .owl-next, .projects .owl-prev {
	border: 1px solid #999999 !important;
	border-radius: 100px !important;
	background: #fff !important;
  }
  
  .card-side-blog span {
	color: #999999;
  }
  .card-side-blog .image {
	border-radius: 4px;
	overflow: hidden;
  }
  .card-side-blog a img {
	transition: var(--transition-1);
	border-radius: 4px;
  }
  .card-side-blog h3 {
	font-size: 22px;
	color: #333;
	font-weight: 400;
	line-height: 30px;
  }
  .card-side-blog img {
	border-radius: 4px;
  }
  .card-side-blog:hover a img {
	transform: scale(1.1);
  }
  .card-side-blog:hover h3 {
	color: var(--primary-color);
  }
  
  footer {
	position: relative;
	margin-top: 85px;
	overflow: hidden;
	padding-bottom: 25px;
  }
  footer .title {
	font-size: 30px;
	font-weight: 500;
	text-align: center;
	display: block;
	line-height: 40px;
  }
  footer .bg-image {
	position: absolute;
	width: 100%;
	height: 100%;
	z-index: -1;
	top: 0;
	left: 0;
  }
  footer .bg-image img {
	width: 100%;
	height: 100%;
	-o-object-fit: cover;
	   object-fit: cover;
  }
  footer::after {
	content: "";
	position: absolute;
	width: 100%;
	height: 100%;
	background: linear-gradient(180deg, rgba(0, 0, 0, 0.8) 17.5%, rgba(0, 0, 0, 0.0775758) 150.5%, #000000 100%);
	top: 0;
	left: 0;
	z-index: -1;
  }
  footer .footer-options ul li {
	margin: 10px 0;
  }
  footer .footer-options ul li:first-child {
	margin-top: 0;
  }
  footer .footer-options ul li a {
	color: #fff;
	font-size: 17px;
	font-weight: 300;
  }
  footer .footer-options ul li a:hover {
	color: var(--primary-color) !important;
  }
  footer .text-footer {
	line-height: 20px;
  }
  
  .bottom-social-links li a {
	border: 1px solid #fff;
	width: 38px;
	height: 38px;
	color: #333;
	border-radius: 100px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 17px;
	background: #fff;
	box-shadow: 0px 1px 0px 0px rgba(0, 0, 0, 0.2509803922);
  }
  .bottom-social-links li a:hover {
	background: var(--primary-color);
	color: #fff;
  }
  
  .mfp-with-zoom .mfp-container,
  .mfp-with-zoom.mfp-bg {
	opacity: 0;
	-webkit-backface-visibility: hidden;
	/* ideally, transition speed should match zoom duration */
	transition: all 0.3s ease-out;
  }
  
  .mfp-with-zoom.mfp-ready .mfp-container {
	opacity: 1;
  }
  
  .mfp-with-zoom.mfp-ready.mfp-bg {
	opacity: 0.8;
  }
  
  .mfp-with-zoom.mfp-removing .mfp-container,
  .mfp-with-zoom.mfp-removing.mfp-bg {
	opacity: 0;
  }
  
  .scroll-top {
	position: fixed;
	opacity: 0;
	visibility: hidden;
	right: 20px;
	bottom: 20px;
	z-index: 99999;
	transform: translateY(50%);
	transition: var(--transition-1);
  }
  .scroll-top button {
	color: #fff;
	background: var(--primary-color);
	border-radius: 100px;
	width: 50px;
	height: 50px;
	border: 2px solid #fff;
  }
  .scroll-top.active {
	visibility: visible;
	opacity: 1;
	transform: translateY(0);
	transition: var(--transition-1);
  }
  
  .inner-page-hero {
	padding-bottom: 30px !important;
  }
  
  .content-page.section-gap {
	padding-top: 50px;
  }
  
  .right-links, .toc {
	border: 2px solid #eee;
	padding: 25px 33px;
	background: #fcfcfc;
  }
  .toc{
	padding: 20px 25px !important;
  }
  .right-links ul li {
	margin: 10px 0;
	position: relative;
	padding-left: 25px;
  }
  .right-links ul li:last-child {
	margin-bottom: 0;
  }
  .right-links ul li::before {
	content: "";
	position: absolute;
	width: 15px;
	height: 2px;
	border-radius: 10px;
	background: var(--primary-color);
	left: 0;
	top: 0;
	bottom: 0;
	margin: auto;
	transition: var(--transition-1);
  }
  .right-links ul li a {
	display: block;
  }
  .right-links ul li:hover::before {
	background: #13a001;
	width: 25px;
  }
  .right-links ul li:hover a {
	color: #13a001;
	transform: translateX(10px);
  }
  .right-links .title {
	position: relative;
  }
  .right-links .title::after {
	content: "";
	width: 40px;
	height: 2px;
	background: #121212;
	display: block;
	margin-top: 10px;
	border-radius: 4px;
  }
  
  .right-side {
	position: sticky;
	top: 10px;
  }
  
  .inner-page-hero p {
	max-width: 100%;
	margin-bottom: 1rem;
  }
  
  .breadcrumb-custom {
	display: flex;
	align-items: center;
  }
  .breadcrumb-custom .current {
	font-weight: 500;
	color: #08ceeb;
  }
  .breadcrumb-custom li {
	position: relative;
	margin-right: 30px;
	position: relative;
	font-weight: 400;
	color: #fff;
	font-size: 17px;
  }
  .breadcrumb-custom li:last-child {
	margin-right: 0;
  }
  .breadcrumb-custom li a:hover {
	text-decoration: underline;
  }
  
  .has-line::after {
	content: "";
	position: absolute;
	right: -17px;
	top: 50%;
	transform: translateY(-50%);
	height: 10px;
	width: 2px;
	background-color: #eee;
	opacity: 0.5;
  }
  
  .contact-info {
	display: flex;
	gap: 12px;
	align-items: center;
  }
  .contact-info .icon {
	margin-top: 2px;
	background: #0884C2;
	width: 50px;
	height: 50px;
	border-radius: 100px;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #f9f9f9;
	font-size: 20px;
	transition: var(--transition-1);
  }
  .contact-info span.upper-text {
	color: #797979;
	font-weight: 400;
	font-size: 16px;
  }
  .contact-info .text {
	line-height: 22px;
  }
  .contact-info .text a, .contact-info .text p {
	font-weight: 400;
	color: #121212;
  }
  .contact-info:hover .icon {
	background: var(--primary-color);
  }
  .contact-info:hover a {
	color: var(--primary-color);
  }
  
  .contact-right {
	border: 1px solid #eee;
	padding: 30px;
  }
  
  .blog-page h1 {
	font-size: 36px;
  }
  .rounded-border{
	border-radius: 6px;
  }
  .card-side-project {
	margin-top: 20px;
	display: flex;
	gap: 12px;
	align-items: stretch;
  }
  .card-side-project img {
	min-width: 70px;
	height: 70px;
	-o-object-fit: cover;
	   object-fit: cover;
	border-radius: 7px;
	transition: var(--transition-1);
  }
  .card-side-project span {
	font-size: 15px;
  }
  .card-side-project h3 {
	font-size: 17px;
	font-weight: 400;
  }
  .card-side-project:hover h3 {
	color: var(--primary-color);
  }
  .card-side-project:hover img {
	filter: saturate(2);
  }
  
  .our-team .card-project:hover a {
	color: #0884C2 !important;
  }
  
  .content {
	line-height: 26px;
  }
  .content a {
	color: var(--primary-color);
	font-weight: 400;
  }
  .content a:hover {
	color: #004320;
  }
  .content p {
	color: #202020;
  }
  .content p:last-child {
	margin-bottom: 0;
  }
  .content ul:last-child {
	margin: 0;
  }
  .content h2, .content h3, .content h4, .content h5, .content h6 {
	font-weight: 500;
	color: #171717;
  }
  .content h2 {
	font-size: 28px;
  }
  .content h3 {
	font-size: 24px;
  }
  .content h4 {
	font-size: 22px;
  }
  .content h5 {
	font-size: 20px;
  }
  .content h6 {
	font-size: 19px;
  }
  .content img {
	max-width: 100%;
	height: auto;
	border-radius: 8px;
  }
  .content figure {
	max-width: 100%;
	height: auto;
  }
  .content figure figcaption {
	font-size: 15px;
	color: var(--primary-color);
	font-weight: 400;
	text-transform: capitalize;
  }/*# sourceMappingURL=style.css.map */


  .wpforms-container .wpforms-field-label, .wp-core-ui div.wpforms-container .wpforms-field-label {
	font-weight: 500 !important;
	}

.navigation ul{
	padding: 0;
	margin: 0;
	margin-top: 50px;
}
	.navigation li a,
.navigation li a:hover,
.navigation li.active a,
.navigation li.disabled {
    color: #fff;
    text-decoration:none;
}
  
.navigation li {
    display: inline;
}
  
.navigation li a,
.navigation li a:hover,
.navigation li.active a,
.navigation li.disabled {
    background-color: #0884C2;
    border-radius: 3px;
    cursor: pointer;
	padding: 4px 16px;
}
  
.navigation li a:hover,
.navigation li.active a {
    background-color: #3C8DC5;
}

.right-links.no-left ul li::before {
	all: unset;
}
.right-links.no-left ul li{
	padding-left: 0;
}

.right-donate {
background: #ffffff12;
padding: 30px;
border-radius: 5px;
box-shadow: 1px 1px 15px -4px #a4a4a4d6;
}

.shared-items {
  margin-top: -15px;
}

.sharing-items, .download {
  box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.2470588235);
  width: 100%;
}

.download {
  background: #fff;
  width: 50px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.sharing-items, .download {
	border-radius: 5px;
height: 43px;
}

.share-button {
  position: relative;
  z-index: 99;
}

.toggle {
  position: relative;
  z-index: 10;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
	width: 130px;
font-weight: 400;
height: 43px;
border-radius: 5px;
background: #0884C2;
color: #fff;
	transition: var(--transition-1);
  width: 100%;
}

.toggle:hover{
	background: #1E7099;
}

.toggle-input {
  display: none;
}

.toggle-input:checked + .toggle:after, .toggle-input:checked + .toggle:before {
  content: "";
  position: absolute;
  left: 14px;
  height: 2px;
  display: flex;
  align-items: center;
  justify-content: center;
	background-color: #fff;
top: 21px;
width: 18px;
}

.toggle-input:checked + .toggle img {
  display: none !important;
}

.toggle-input:checked + .toggle:after {
  transform: rotate(45deg);
  animation: bar1 0.3s forwards;
}

.toggle-input:checked + .toggle:before {
  transform: rotate(-45deg);
  animation: bar2 0.3s forwards;
}

.sharing-list {
  background: #fff;
}

.sharing-list li {
  position: absolute;
  top: 2px;
  left: 0;
  width: 45px;
  height: 45px;
  margin: 0;
  padding: 0;
  list-style-type: none;
  opacity: 0;
  transition: all 0.25s cubic-bezier(0.43, 1.17, 0.69, 1.24);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 100px;
  color: #fff;
}

.sharing-list a {
  position: relative;
  display: block;
  width: 45px;
  height: 45px;
  line-height: 50px;
  font-size: 25px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.sharing-list a:before {
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  position: absolute;
  width: 45px;
  height: 45px;
  border-radius: 25px;
  font-family: "FontAwesome";
  font-size: 18px;
  -webkit-font-smoothing: antialiased;
  text-align: center;
  line-height: 50px;
  text-indent: 0;
  box-shadow: inset 0 0 0 1px #c8c7c0;
}
.shared-items .button-style-1.blue{
width: 100%;
text-align: center;
	background: var(--primary-color);
	border: none;
	color: #fff;
	box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.2470588235);
	padding: 7px 15px !important;
height: 43px;
}

.shared-items .button-style-1.blue:hover{
background: #990954;
}

.sharing-list .twitter {
  background: #00ADE7;
}
.sharing-list .facebook {
  background: #1877F2;
}
.sharing-list .whatsapp {
  background: #25D366;
}
.sharing-list .instagram {
  background: #8134af;
}

input:checked ~ .sharing-list li {
  opacity: 1;
}

input:checked ~ .sharing-list li:nth-child(1) {
  top: 55px;
}

input:checked ~ .sharing-list li:nth-child(2) {
  top: 105px;
}

input:checked ~ .sharing-list li:nth-child(3) {
  top: 155px;
}

input:checked ~ .sharing-list li:nth-child(4) {
  top: 205px;
}
@keyframes bar1 {
  0% {
    width: 46px;
    height: 50px;
    background-color: transparent;
    transform: rotate(0deg) scale(1);
    top: 0;
    left: 0;
    opacity: 1;
  }
  50% {
    background-color: transparent;
    width: 46px;
    height: 50px;
    top: 0;
    left: 0;
    transform: rotate(0deg) scale(0.2);
    opacity: 0;
  }
  50.001% {
    background-color: #fff;
    left: 10px;
    top: 22px;
    height: 3px;
    width: 30px;
  }
  60% {
    transform: rotate(0deg) scale(1);
    opacity: 1;
  }
  100% {
    transform: rotate(45deg) scale(1);
  }
}
@keyframes bar2 {
  0% {
    background-color: transparent;
    transform: rotate(0deg) scale(0.2);
    opacity: 0;
  }
  50% {
    background-color: transparent;
    transform: rotate(0deg) scale(0.2);
    opacity: 0;
  }
  60% {
    transform: rotate(0deg) scale(1);
    opacity: 1;
  }
  100% {
    transform: rotate(-45deg) scale(1);
  }
}


/* Ensure the navbar toggle button is visible on mobile */
.navbar-toggler {
  border: none;
  background: none;
  padding: 0;
  cursor: pointer;
}


/* Hide collapsible menu by default on mobile */
.collapse {
  display: none;
}

/* Show collapsible menu when toggled */
.collapse.show {
  display: block;
}

/* Basic styles for the mobile menu */
.navbar-nav {
  background-color: #333; /* Adjust as needed */
  padding: 10px;
  margin-top: 10px;
}

.nav-item {
  margin: 10px 0;
}

.nav-link {
  color: #fff;
  max-width: max-content;
  text-decoration: none;
}

.nav-link:hover {
  text-decoration: underline;
  color: var(--primary-color);
}
#navbarToggle {
color: #fff;
font-size: 24px;
}

.nav-link.button-style-1:hover{
  color: #fff !important;
  text-decoration: none;
}

.collapse.show {
position: fixed;
z-index: 99999;
width: 100%;
right: 0;
left: 0;
padding: 0;
top: 20%;
}
.navbar-nav {
padding: 30px;
background: #222;
}

.cross{
  display: none;
}
.active .bar{
  display: none;
}
.active .cross{
  display: block;
}

.navbar-items a:hover{
  color: var(--primary-color);
}