@font-face {
	  font-family: NotoSansJP;
	  src: url(fonts/NotoSansJP-VariableFont_wght.ttf);
	}
	
	@font-face {
	  font-family: Commissioner;
	  src: url(fonts/Commissioner-VariableFont_FLAR,VOLM,slnt,wght.ttf);
	}
	
	@font-face {
	  font-family: DMSans;
	  src: url(fonts/DMSans-VariableFont_opsz,wght.ttf);
	}
	
	body {
		font-family: NotoSansJP;
	}
	
	.nav-logo {
		height: 70px;
	}
	
	.fixed-top {
	  /*background-color: #61676A;*/
	  background-color: transparent;
	  position: fixed;
	  left: 0;
	  right: 0;
	}
	
	.navbar-collapse {
		/* Extra small devices (phones, 600px and down) */
		@media only screen and (max-width: 600px) {
			background-color: transparent; padding: 0 0.5em;
		}

		/* Small devices (portrait tablets and large phones, 600px and up) */
		@media only screen and (min-width: 600px) {
			background-color: transparent; padding: 0 0.5em;
		}

		/* Medium devices (landscape tablets, 768px and up) */
		@media only screen and (min-width: 768px) {
			background-color: transparent; padding: 0 0.5em;
		}
	}
	
        .hero {
            background-image: url('path-to-your-image.jpg'); /* Replace with the path to your image */
            background-size: cover;
            background-position: center;
            height: 100vh;
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            text-align: center;
            position: relative;
			padding-top: 4em;
        }
		
		.hero-div-bga {
			  display: block;
			  position: absolute;
			  top: 0;
			  bottom: 0;
			  left: 0;
			  right: 0;
			  width: -moz-available;
			  width: -webkit-fill-available;
			  height: 100vh;
			  z-index: -99999;
			  background-image: url('images/1-clean.png');
			  background-repeat: no-repeat;
			  background-position: top;
			  background-size: cover;
			  z-index: 2;
		}
		
		.hero-bga {
			display: block;
			  position: absolute;
			  top: 0;
			  bottom: 0;
			  left: 0;
			  right: 0;
			  width: -moz-available;
			  width: -webkit-fill-available;
			  height: 100vh;
			  z-index: -99999;
			
			/* Extra small devices (phones, 600px and down) */
			@media only screen and (max-width: 600px) {
				width: 100%;
			}

			/* Small devices (portrait tablets and large phones, 600px and up) */
			@media only screen and (min-width: 600px) {
				width: 100%;
			}

			/* Medium devices (landscape tablets, 768px and up) */
			@media only screen and (min-width: 768px) {
				width: -moz-available;
				width: -webkit-fill-available;
			}
		}
        .overlay {
          position: absolute;
		  top: 0;
		  left: 0;
		  background: rgba(0, 0, 0, 0.5);
		  right: 0;
		  bottom: 0;
		  z-index: 3;
        }
        .content {
		  position: absolute;
		  text-align: center;
		  padding: 0 1em;
		  width: 100%;
		  z-index: 3;
		  bottom: 0;
		  display: block;
        }
        .logo {
            position: absolute;
            top: 20px;
            left: 20px;
        }
        .menu {
            position: absolute;
            top: 20px;
            right: 20px;
        }
		
		#WelcomeTitle {
			font-size: 34pt;
			/*! max-width: 480px; */
			/*! margin-bottom: 1em; */
		}
		
		.full-bg {
		  display: block;
		  position: absolute;
		  top: 0;
		  bottom: 0;
		  left: 0;
		  right: 0;
		  width: -moz-available;
		}
		
		.btn-ownstyle {			
            border: none;
            color: white;
			padding: 1em 3em;
			border-radius: 2.5em;
			font-weight: normal;
			background-color: #2C6489;
		}
		
		.color-ownstyle {
			color: #2C6489;
		}
		
		.color-ownstyle-light {
			color: #35A8F2;
		}

/** PAGE 2 **/
		.services-section {
            background-color: #1b688b;
            color: white;
            padding: 50px 0;
			font-family: DMSans;
			min-height: 100vh;
        }
        .services-section h2 {
            font-size: 2.5rem;
        }
        .services-section .service-item {
            margin-bottom: 30px;
        }
        .services-section .service-item img {
            max-width: 100%;
            height: auto;
            border-radius: 5px;
        }
        .services-section .service-text {
            padding-left: 30px;
			font-family: DMSans;
        }
        .services-section .service-text h3 {
            font-size: 1.5rem;
			font-family: DMSans;
        }		
		.services-section .service-item p {
			color: #fff;
			font-family: DMSans;
		}

li {
	font-size: 13.5pt;
	text-align: unset;
	text-justify: inter-word;
}

.bold {
	font-weight: bold;
}

h3 {
	/*margin-top: 2.7em;*/
	margin-bottom: 1.7em;
}

.img-fluid {
	/*height: 100vh;*/
}

.vertical-top {
    display: flex;
    align-items: flex-start; /* Align items to the top */
}

.full-height {
	@media only screen and (max-width: 600px) {
		
	}

	/* Small devices (portrait tablets and large phones, 600px and up) */
	@media only screen and (min-width: 600px) {
		
	}

	/* Medium devices (landscape tablets, 768px and up) */
	@media only screen and (min-width: 768px) {
		height: 100vh;
	}
}

/** PAGE 3 **/
.section-title {
            text-align: center;
            margin-bottom: 50px;
        }
        .service-item {
            text-align: center;
            margin-bottom: 30px;
        }
        .service-item img {
            max-width: 100px;
            margin-bottom: 20px;
        }
        .service-item h3 {
            font-size: 1.25rem;
            margin-bottom: 10px;
        }
        .service-item p {
            font-size: 1rem;
        }

/** PAGE 4 **/
		.content-section {
            padding: 4em 2em;
			font-family: DMSans;
			min-height: 100vh;
        }
        .content-section h2 {
            font-size: 2.5rem;
            font-weight: bold;
            color: #333;
        }
        .content-section h2 span {
            color: #1b688b;
        }
        .content-section p {
            font-size: 1rem;
            margin-top: 20px;
            color: #202020;
        }
        .content-section a {
            display: inline-block;
            margin-top: 20px;
            color: #1b688b;
            text-decoration: none;
            font-weight: bold;
        }

/** PAGE 5 **/
/*.content-section {
            padding: 50px 0;
        }
        .content-section h2 {
            text-align: center;
            font-size: 2.5rem;
            font-weight: bold;
            margin-bottom: 40px;
        }*/
        .service-item {
            text-align: center;
            margin-bottom: 30px;
        }
        .service-item h3 {
            font-size: 2.5rem;
            margin-bottom: 15px;
            font-weight: bold;
        }
        .service-item p {
            font-size: 1rem;
            color: #202020;
            margin-bottom: 20px;
        }
        .service-item a {
            color: #202020;
            text-decoration: none;
            font-weight: bold;
        }
		
		.justify-own {
			text-align: justify;
			text-justify: inter-word;
		}

/** PAGE 6 **/
/*.content-section {
            padding: 50px 0;
        }
        .content-section h2 {
            font-size: 2.5rem;
            font-weight: bold;
            color: #333;
        }*/
        .content-section h3 {
            font-size: 1.5rem;
            font-weight: normal;
            color: #202020;
        }
        .content-section p {
            font-size: 1rem;
            margin-top: 20px;
            color: #202020;
        }
        /*.content-section a {
            display: inline-block;
            margin-top: 20px;
            color: #1b688b;
            text-decoration: none;
            font-weight: bold;
        }*/

/** PAGE 7 **/
.testimonial-section {
            padding: 50px 0;
        }
        .testimonial {
            background-color: #ffffff;
            border-radius: 10px;
            padding: 20px;
            box-shadow: 0 4px 8px rgba(0,0,0,0.1);
            margin: 20px 0;
        }
        .testimonial h3 {
            font-size: 1.25rem;
            font-weight: bold;
            color: #555;
        }
        .testimonial p {
            font-size: 1rem;
            color: #202020;
        }
        .stars {
            color: #f0c620;
        }

/** PAGE 8 **/
.hero-section {
            background-color: #1b688b;
            height: 100vh;
            position: relative;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        .hero-section img {
            width: 100%;
            height: auto;
        }
        .hero-logo {
            position: absolute;
            bottom: 20px;
            left: 20px;
        }

/** PAGE 9 **/
footer {
            font-family: Arial, sans-serif;
            background-color: #1b688b;
            color: white;
            display: flex;
            justify-content: center;
            align-items: center;
            /*height: 100vh;*/
            margin: 0;
			padding: 5em 2.5em;
        }
        .contact-section {
            text-align: left;
        }
        .contact-section h2 {
            font-size: 2.5rem;
        }
        .contact-details,
        .contact-email {
            margin-bottom: 20px;
        }
        .social-icons {
            display: flex;
            align-items: center;
        }
        .social-icons i {
            font-size: 1.5rem;
            margin-right: 15px;
        }
        
		.btn-custom {
			background-color: transparent;
			border: 1px solid white;
			padding: 1em 2.87em;
			color: white;
			border-radius: 1em;
			text-decoration: none;
        }
		
		 /* unvisited link */
		a.btn-custom:link {
		  color: #fff;
		  text-decoration: none;
		}

		/* visited link */
		a.btn-custom:visited {
		  color: #fff;
		  text-decoration: none;
		}

		/* mouse over link */
		a.btn-custom:hover {
		  color: #000;
		  background-color: #fff;
		  text-decoration: none;
		}

		/* selected link */
		a.btn-custom:active {
		  color: #fff;
		  text-decoration: none;
		}
		
		.btn-social {
			background-color: transparent;
			border: 0;
			padding: 0.1em;
			color: white;
			text-decoration: none;
        }
		
		 /* unvisited link */
		a.btn-social:link {
		  color: #fff;
		  text-decoration: none;
		}

		/* visited link */
		a.btn-social:visited {
		  color: #fff;
		  text-decoration: none;
		}

		/* mouse over link */
		a.btn-social:hover {
		  color: #000;
		  background-color: transparent;
		  text-decoration: none;
		}

		/* selected link */
		a.btn-social:active {
		  color: #fff;
		  text-decoration: none;
		}
		
		/* unvisited link */
		a.footer-link:link {
		  color: #fff;
		  text-decoration: none;
		}

		/* visited link */
		a.footer-link:visited {
		  color: #fff;
		  text-decoration: none;
		}

		/* mouse over link */
		a.footer-link:hover {
		  color: #fff;
		  background-color: transparent;
		  text-decoration: none;
		}

		/* selected link */
		a.footer-link:active {
		  color: #fff;
		  text-decoration: none;
		}