@import "https://fonts.googleapis.com/css2?family=IBM+Plex+Sans+JP&display=swap";

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

body {
font-family:'IBM Plex Sans JP';
overflow-x:hidden
}

.fact-image {
width:20px;
height:20px
}

.navbar {
position:sticky;
top:0;
z-index:1000;
box-shadow:0 2px 4px rgba(0,0,0,0.1);
height:88px;
background-color:#fff;
display:flex;
justify-content:space-between;
align-items:center;
padding:1rem 3%;
width:100%
}

.logo img {
height:50px;
width:280px;
object-fit:contain
}

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

.nav-links {
font-family:'IBM Plex Sans JP';
display:flex;
list-style:none
}

.nav-links li {
margin:0 1.5rem;
position:relative
}

.nav-links a {
font-size:18px;
font-weight:700;
color:#be1800;
text-decoration:none;
position:relative
}

.nav-links a::after {
content:'';
position:absolute;
width:0;
height:3px;
bottom:-5px;
left:0;
background-color:#0056b3;
transition:width .3s ease-in-out
}

.nav-links a:hover::after {
width:100%
}

.services-dropdown {
border-radius:15px;
margin-top:6px;
width:400px;
display:none;
position:absolute;
background-color:#fff;
min-width:160px;
box-shadow:0 8px 16px 0 rgba(0,0,0,0.2);
z-index:1
}

.core-serv {
color:#000;
font-size:20px;
font-weight:700;
margin:8px 0 0 15px
}

.services-dropdown a {
font-size:16px;
color:#be1800;
padding:12px 16px;
text-decoration:none;
display:block
}

.services-dropdown a img {
margin-right:10px;
vertical-align:middle
}

.services-dropdown a:hover {
background-color:#e3ebf198
}

.nav-links li:hover .services-dropdown {
display:block
}

.cta-button {
display:inline-flex;
align-items:center;
justify-content:center;
text-decoration:none;
background-color:#005081;
font-size:18px;
height:50px;
width:130px;
color:#fff;
border:none;
padding:10px 20px;
border-radius:5px;
cursor:pointer;
transition:background-color .3s
}

.cta-button:hover {
background-color:#be1800;
color:#fff;
text-decoration:none
}

.hamburger {
display:none;
cursor:pointer;
width:30px;
height:30px;
position:relative;
z-index:1000
}

.hamburger span {
display:block;
position:absolute;
height:3px;
width:100%;
background:#005081;
border-radius:3px;
opacity:1;
left:0;
transform:rotate(0deg);
transition:.25s ease-in-out
}

.hamburger span:nth-child(1) {
top:0
}

.hamburger span:nth-child(2) {
top:10px
}

.hamburger span:nth-child(3) {
top:20px
}

.hamburger.open span:nth-child(1) {
top:10px;
transform:rotate(45deg)
}

.hamburger.open span:nth-child(2) {
opacity:0
}

.hamburger.open span:nth-child(3) {
top:10px;
transform:rotate(-45deg)
}

.mobile-nav {
display:none
}

@media screen and (min-width: 1024px) and (max-width: 1366px) {
.navbar {
padding:1rem 4%;
height:80px
}

.logo img {
height:40px;
width:220px
}

.nav-links li {
margin:0 1.2rem
}

.nav-links a {
font-size:17px
}

.services-dropdown {
width:380px
}

.cta-button {
font-size:17px;
height:45px;
width:120px
}
}

@media screen and (min-width: 820px) and (max-width: 1023px) {
.navbar {
padding:1rem 2%;
height:75px
}

.logo img {
height:35px;
width:200px
}

.nav-links li {
margin:0 .8rem
}

.nav-links a {
font-size:15px
}

.services-dropdown {
width:320px
}

.services-dropdown a {
font-size:15px;
padding:10px 14px
}

.core-serv {
font-size:18px
}

.cta-button {
font-size:16px;
height:42px;
width:110px;
padding:8px 16px
}
}

@media screen and (max-width: 819px) {
.navbar {
height:70px;
padding:1rem 4%
}

.nav-links,.navbar .cta-button {
display:none
}

.logo img {
height:30px;
width:160px
}

.hamburger {
display:block
}

.mobile-nav {
overflow-y:scroll;
display:block;
position:fixed;
top:0;
left:-100%;
width:80%;
height:100vh;
background-color:#f8f9fa;
display:flex;
flex-direction:column;
align-items:center;
padding-top:50px;
transition:left .3s ease-in-out;
z-index:999
}

.mobile-nav.open {
left:0
}

.mobile-nav .logo {
margin-bottom:30px
}

.mobile-nav .nav-links {
margin-top:40px;
display:flex;
flex-direction:column;
align-items:center;
width:70%
}

.mobile-nav .nav-links li {
margin:15px 0;
width:100%;
text-align:center
}

.mobile-nav .services-dropdown {
position:static;
width:100%;
box-shadow:none;
display:none
}

.mobile-nav .nav-links li:hover .services-dropdown {
display:block
}

.mobile-nav .services-dropdown a {
padding:15px;
text-align:left
}

.mobile-nav .cta-button {
display:block;
margin-top:20px;
text-align:center;
padding-top:13px
}

.mobile-nav .services-dropdown a img {
max-width:20px;
height:auto
}
}

@media screen and (max-width: 480px) {
.navbar {
padding:1rem 3%
}

.logo img {
height:25px;
width:140px
}

.mobile-nav {
width:85%
}

.mobile-nav .services-dropdown a {
font-size:14px;
padding:12px
}

.core-serv {
font-size:18px
}
}

.carousel {
position:relative;
width:100%;
height:600px;
overflow:hidden;
box-shadow:0 4px 6px rgba(0,0,0,0.1)
}

.carousel-slide {
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
opacity:0;
transition:opacity .5s ease;
background-size:cover;
background-position:center;
animation:zoomIn 10s ease-in-out infinite
}

.carousel-slide.active {
opacity:1
}

.carousel-slide::before {
content:"";
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
background-color:rgba(0,0,0,0.4);
z-index:1
}

@keyframes zoomIn {
0%,100% {
transform:scale(1)
}

50% {
transform:scale(1.1)
}
}

.carousel-text {
position:absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%);
color:#fff;
font-weight:700;
text-align:center;
z-index:2;
text-shadow:2px 2px 4px rgba(0,0,0,0.5);
padding:0 20px
}

.carousel-text .static-text-top,.carousel-text .static-text-bottom,#typing-text {
font-size:1.8vw
}

.carousel-text .static-text-top {
display:block;
margin-bottom:.5em
}

.carousel-text .static-text-bottom {
display:block;
margin-top:.5em
}

#typing-text {
padding:0 .5em;
box-shadow:5px 5px 20px #be1800;
border-radius:10px
}

.carousel-nav {
position:absolute;
bottom:20px;
left:50%;
transform:translateX(-50%);
display:flex;
justify-content:center;
align-items:center;
z-index:3
}

.carousel-nav button {
width:12px;
height:12px;
border-radius:50%;
background-color:rgba(255,255,255,0.5);
border:none;
margin:0 5px;
cursor:pointer;
transition:background-color .3s
}

.carousel-nav button.active {
background-color:#fff
}

.carousel-btn {
position:absolute;
top:50%;
transform:translateY(-50%);
font-size:2.5rem;
color:#fff;
background-color:rgba(0,0,0,0.3);
border:none;
padding:1rem;
cursor:pointer;
transition:background-color .3s;
z-index:3
}

.carousel-btn:hover {
background-color:rgba(0,0,0,0.5)
}

.carousel-btn.prev {
left:20px
}

.carousel-btn.next {
right:20px
}

@media (max-width: 768px) {
.carousel {
height:400px
}

.carousel-text .static-text-top,.carousel-text .static-text-bottom {
white-space:wrap;
max-width:550px
}

.carousel-text .static-text-top,.carousel-text .static-text-bottom,#typing-text {
font-size:3.5vw
}

.carousel-btn {
font-size:2rem;
padding:.8rem
}
}

@media (max-width: 480px) {
.carousel {
height:300px
}

.carousel-text .static-text-top,.carousel-text .static-text-bottom,#typing-text {
font-size:3.8vw;
width:250px
}

.carousel-btn {
font-size:1.5rem;
padding:.5rem
}
}

#particles-js {
position:fixed;
width:100%;
height:100vh;
top:0;
left:0;
z-index:-1;
background:#fff
}

.container {
max-width:1200px;
margin:0 auto;
padding:2rem
}

.section-title {
text-align:center;
margin-bottom:2rem;
margin-top:4rem;
position:relative
}

.section-title h2 {
font-size:2.9rem;
color:#be1800;
font-weight:700;
margin-bottom:1rem;
position:relative;
display:inline-block
}

.section-title p {
margin-top:10px;
font-size:20px;
font-weight:600;
color:#005081
}

.cards-grid {
display:grid;
grid-template-columns:repeat(2,1fr);
gap:2rem;
padding:1rem
}

.card {
border:none;
position:relative;
height:400px;
border-radius:20px;
overflow:hidden;
box-shadow:0 20px 30px rgba(0,0,0,0.162);
background:#fff
}

.card-inner {
position:relative;
width:100%;
height:100%
}

.card-front,.card-back {
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
transition:opacity .3s ease,transform .3s ease
}

.card-back {
opacity:0;
background:linear-gradient(135deg,#3b82f6,#2563eb);
transform:translateY(100%)
}

.card:hover .card-front {
opacity:0;
transform:translateY(-100%)
}

.card:hover .card-back {
opacity:1;
transform:translateY(0)
}

@media (hover: none) {
.card {
cursor:pointer
}

.card.active .card-front {
opacity:0;
transform:translateY(-100%)
}

.card.active .card-back {
opacity:1;
transform:translateY(0)
}
}

.card-image {
width:100%;
height:270px;
overflow:hidden
}

.card-image img {
width:100%;
height:100%;
object-fit:cover
}

.card-content {
padding:1.2rem;
background:#fff
}

.card-content h3 {
font-size:1.4rem;
color:#1a1a1a;
margin-bottom:.8rem;
position:relative;
padding-bottom:.8rem;
text-align:center
}

.card-content h3::after {
content:'';
position:absolute;
left:50%;
transform:translateX(-50%);
bottom:0;
width:40px;
height:2px;
background:linear-gradient(90deg,#3b82f6,#2563eb);
transition:width .3s ease
}

.card-content p {
text-align:center;
color:#666;
line-height:1.6;
font-size:.95rem
}

.back-content {
padding:2rem;
color:#fff;
height:100%;
display:flex;
flex-direction:column;
justify-content:center
}

.back-content h4 {
font-size:1.6rem;
margin-bottom:1rem;
text-align:center
}

.feature-list {
list-style:none;
margin-top:1rem
}

.feature-list li {
margin-bottom:.8rem;
display:flex;
align-items:center
}

.feature-list li::before {
content:'→';
margin-right:.5rem;
color:rgba(255,255,255,0.8)
}

@media (max-width: 768px) {
.cards-grid {
grid-template-columns:1fr;
gap:2rem
}

.section-title h2 {
font-size:2rem
}

.section-title p {
font-size:16px
}

.card {
height:auto;
min-height:400px
}
}

.container2 {
max-width:1200px;
margin:0 auto;
padding:2rem
}

.section-title h2::after {
content:'';
position:absolute;
bottom:-10px;
left:50%;
transform:translateX(-50%);
width:60px;
height:3px;
background:#005081
}

.services-grid {
display:grid;
grid-template-columns:repeat(3,1fr);
gap:2rem;
padding:1rem
}

.service-card {
background:#fff;
border-radius:15px;
padding:2rem;
position:relative;
overflow:hidden;
transition:all .3s ease;
box-shadow:0 8px 18px rgba(0,0,0,0.229)
}

.service-card.dark,.service-card:hover {
background:#1a1a1a;
color:#fff
}

.service-card.dark p,.service-card:hover p {
color:#ccc
}

.service-card::before {
content:'';
position:absolute;
top:0;
right:0;
width:100px;
height:100px;
background:#000;
border-radius:0 0 0 100%;
transform:translate(50%,-50%);
transition:background-color .3s ease
}

.service-card.dark::before,.service-card:hover::before {
background:#f33
}

.service-icon {
width:60px;
height:60px;
background:#000;
border-radius:10px;
display:flex;
align-items:center;
justify-content:center;
margin-bottom:1.5rem;
transition:background-color .3s ease
}

.service-card:hover .service-icon {
background:#f33
}

.service-icon img {
width:30px;
height:30px;
filter:invert(1)
}

.service-card h3 {
font-size:1.5rem;
margin-bottom:1rem;
color:inherit;
transition:color .3s ease
}

.service-card p {
color:#666;
line-height:1.6;
margin-bottom:1.5rem;
transition:color .3s ease
}

.service-card:hover {
transform:translateY(-10px);
box-shadow:0 10px 25px rgba(0,0,0,0.2)
}

.view-more-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  background-color: #000;
  color: white;
  border: none;
  border-radius: 6px;
  font-size: 0.875rem;
  cursor: pointer;
  transition: background-color 0.2s;
  text-decoration: none; /* Remove default link underline */
}

.view-more-link i {
  transition: transform 0.2s;
}

.view-more-link:hover i {
  transform: translateX(4px);
}

.service-card:hover .view-more-link{
  background:#f33
}

@media (max-width: 1024px) {
.services-grid {
grid-template-columns:repeat(2,1fr)
}
}

@media (max-width: 768px) {
.services-grid {
grid-template-columns:1fr
}

.section-title h2 {
font-size:2rem
}

.container {
padding:1rem
}
}

.vision-section {
padding:60px 0 100px;
background-color:#f9f9f9e7
}

.container-vision {
max-width:1200px;
margin:0 auto
}

.vision {
font-size:50px;
color:#be1800;
font-weight:700;
text-align:center;
margin-bottom:20px
}

.in-vision {
text-align:center;
color:#005081;
font-size:20px;
font-weight:600;
padding-bottom:30px
}

.vision-content {
display:flex;
flex-wrap:wrap;
justify-content:center;
align-items:center;
gap:40px;
margin-inline:15px
}

.vision-image {
flex:1 1 400px
}

.vision-image img {
width:100%;
height:auto;
border-radius:10px
}

.vision-text {
flex:1 1 400px
}

.mission {
font-size:35px;
font-weight:600;
color:#005081;
margin-bottom:15px
}

.in-mission {
font-size:20px;
line-height:1.6;
margin-bottom:20px
}

.img {
height:500px;
width:800px
}

@media (max-width: 768px) {
.vision {
font-size:40px
}

.in-vision {
font-size:20px
}

.mission {
text-align:center;
font-size:30px
}

.in-mission {
text-align:center;
font-size:.9rem
}
}

@media (max-width: 480px) {
.vision-content {
flex-direction:column
}
}

.cards-grid3 {
display:grid;
grid-template-columns:repeat(4,1fr);
gap:clamp(1rem,3vw,2rem)
}

.card3-container3 {
aspect-ratio:1/1.25;
min-height:300px;
animation:fadeUp .6s ease forwards;
opacity:0
}

.card3 {
position:relative;
width:100%;
height:100%;
border-radius:clamp(12px,2vw,20px);
overflow:hidden;
box-shadow:0 15px 33px rgba(0,0,0,0.1)
}

.card3-image {
width:100%;
height:100%;
object-fit:cover
}

.card3-content {
position:absolute;
bottom:0;
left:0;
right:0;
padding:clamp(1rem,3vw,1.5rem);
background:linear-gradient(to top,rgba(0,0,0,0.95),rgba(0,0,0,0.7),transparent);
color:#fff
}

.card3-title3 {
font-size:clamp(1.125rem,2.5vw,1.3rem);
margin-bottom:.75rem;
color:#fff
}

.card3-description {
color:rgba(255,255,255,0.9);
line-height:1.6;
font-size:clamp(0.875rem,2vw,1rem)
}

@keyframes fadeUp {
from {
opacity:0;
transform:translateY(20px)
}

to {
opacity:1;
transform:translateY(0)
}
}

@media screen and (max-width: 1200px) {
.cards-grid3 {
grid-template-columns:repeat(3,1fr)
}
}

@media screen and (max-width: 992px) {
.cards-grid3 {
grid-template-columns:repeat(2,1fr)
}
}

@media screen and (max-width: 576px) {
.cards-grid3 {
grid-template-columns:1fr
}

.card3-container3 {
min-height:250px
}
}

.container3 {
width:100%;
max-width:1300px;
margin:0 auto;
padding:clamp(1rem,4vw,4rem)
}

.view-more-container {
display:flex;
justify-content:center;
margin-top:2rem
}

.view-more-button a {
text-decoration:none;
color:#fff
}

.view-more-button {
display:inline-block;
padding:.8rem 2rem;
background-color:#0077b6;
border:none;
border-radius:30px;
font-size:1rem;
font-weight:700;
text-decoration:none;
overflow:hidden;
position:relative;
cursor:pointer;
transition:all .3s ease
}

.view-more-button:before {
content:"";
position:absolute;
top:0;
left:-100%;
width:100%;
height:100%;
background-color:rgba(255,255,255,0.3);
transition:left .3s ease
}

.view-more-button:hover {
transform:translateY(-3px);
box-shadow:0 5px 15px rgba(0,0,0,0.3)
}

.view-more-button:hover:before {
left:100%
}

.view-more-button span {
display:inline-block;
position:relative;
transition:transform .3s ease
}

.view-more-button:hover span {
transform:translateX(5px)
}

@keyframes fadeUp {
from {
opacity:0;
transform:translateY(20px)
}

to {
opacity:1;
transform:translateY(0)
}
}

.contact_details {
background-size:cover;
background-position:center;
display:flex;
justify-content:center;
align-items:center
}

.container_contact {
display:flex;
max-width:1200px;
background-color:rgba(255,255,255,0.9);
border-radius:10px;
overflow:hidden
}

.contact-info {
flex:1;
padding:20px;
background-color:#f0f0f0
}

.info-box {
background-color:#fff;
margin-bottom:20px;
padding:10px;
border-radius:5px
}

.info-box p {
color:#00264d;
font-weight:600
}

.icon {
font-size:24px;
margin-bottom:10px
}

.contact-form {
flex:2;
padding:40px;
background-color:#00264d;
color:#fff
}

.contact_tag,.contact_tag2 {
margin-bottom:20px;
color:#fff
}

.in_contact {
color:#be1800;
font-weight:600
}

form {
display:flex;
flex-direction:column
}

.form-row {
display:flex;
gap:20px;
margin-bottom:20px
}

input,textarea {
width:100%;
padding:10px;
margin-bottom:20px;
border:none;
background-color:rgba(255,255,255,0.1);
color:#fff
}

textarea {
height:150px
}

.submit_btn1 {
font-size:20px;
padding:10px 20px;
background-color:orange;
color:#fff;
border:none;
cursor:pointer;
align-self:flex-start
}

.submit_btn1:hover {
background-color:#e3ebf198
}

@media (max-width: 768px) {
.container_contact {
flex-direction:column
}

.form-row {
flex-direction:column
}

.contact_tag2 {
font-size:25px
}

.contact_tag {
font-weight:600
}
}

.map_body {
padding-bottom:80px
}

.map_tag {
text-align:center;
font-size:50px;
font-weight:700;
color:#be1800;
padding:60px 0 20px
}

.map-container {
width:100%;
max-width:1200px;
margin:20px auto;
box-shadow:0 0 10px rgba(0,0,0,0.1);
border-radius:10px;
overflow:hidden
}

iframe {
display:block
}