/* Description: Master CSS file */

/*****************************************
Table Of Contents:
- General Styles
- Navigation
- Home
- Information
- Button
- Services
- Plans
- Testimonials
- Newsletter
- Back To Top Button
- Extra Pages
- Media Queries
******************************************/

/*
    Copyright © Inovatik

    Permission is hereby granted, free of charge, to any person obtaining a copy
    of this software and associated documentation files (the "Software"), to deal
    in the Software without restriction, including without limitation the rights
    to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
    copies of the Software, and to permit persons to whom the Software is
    furnished to do so, subject to the following conditions:

    The above copyright notice and this permission notice shall be included in all
    copies or substantial portions of the Software.

    THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
    IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
    FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
    AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
    LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
    OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
    SOFTWARE.
 */


/**************************/
/*     General Styles     */
/**************************/
:root {
	--primary: #1c262f;
	--primary-light: #212d37;
	--secondary: #58ACFA;
	--tertiary: #eee;
	--gradient: linear-gradient(to right, #eee, #eee);
}

h1,
h2,
h3,
h4,
h5,
h6 {
	font-family: "Poppins", sans-serif;
}

h1 {
	font-size: 60px;
	font-weight: 500;
}

button {
	font-family: sans-serif;
}

p,
ul,
h4 {
	margin: 0;
	padding: 0;
}

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

li {
  	list-style-type: none;
}

/* Section Background */
.home,
.about,
.services,
.plans,
.work,
.contact {
	height: 110vh;
	position: relative;
}

.services,
.work,
.contact,
.testimonial,
.footer {
  	background-color: var(--primary);
}

.about,
.plans,
.company,
.newsletter,
.location {
  	background-color: var(--primary-light);
}

.bottom {
  	background-color: black;
}

/* Gradient Border And Background On Icons */
.home_text,
.home .fas,
.plans .far,
.information .fas,
.work .fas,
.services .fas,
.location .far,
.location .fas {
	padding: 15px 0;
	background: -webkit-gradient(
		linear,
		left top,
		left bottom,
		from(#81BEF7),
		to(#58ACFA)
	);
	background-clip: text;
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}

.navbar-nav a:hover,
.footer a:hover,
.footer .fab:hover {
	cursor: pointer;
	background: var(--gradient);
	background-clip: text;
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}


/**********************/
/*     Navigation     */
/**********************/
.navbar {
	font-weight: 500;
	font-size: 0.875rem;
	line-height: 0.875rem;
	background-color: var(--primary);
	box-shadow: 0 1px 6px 0 rgba(0, 0, 0, 0.025);
}

.navbar .navbar-brand {
	padding-top: 0.25rem;
	padding-bottom: 0.25rem;
}

.navbar .logo-image img {
	display: block;
	width: 126px;
	height: auto;
}

@media (max-width: 575px) {
	.navbar .logo-image img {
		width: 112px;
	}
}

.navbar .logo-text {
	color: #fff;
	font-weight: 500;
	line-height: 1rem;
	font-size: 1.575rem;
	text-decoration: none;
}

.offcanvas-collapse {
	position: fixed;
	top: 2.75rem; /* adjusts the height between the top of the page and the offcanvas menu */
	bottom: 0;
	left: 100%;
	width: 100%;
	overflow-y: auto;
	visibility: hidden;
	padding-right: 1rem;
	padding-left: 1rem;
	background-color: var(--primary);
	transition: transform 0.2s ease-in-out, visibility 0.2s ease-in-out;
}

.offcanvas-collapse.open {
	visibility: visible;
	transform: translateX(-100%);
}

.navbar .navbar-nav {
	margin-top: 0.75rem;
	margin-bottom: 0.5rem;
}

.navbar .dropdown-menu {
	border: none;
	margin-top: 0.25rem;
	margin-bottom: 0.25rem;
	background-color: var(--primary);
}

.navbar .dropdown-item {
	color: #eee;
	font-weight: 500;
	font-size: 0.875rem;
	line-height: 0.875rem;
	padding-top: 0.625rem;
	text-decoration: none;
	padding-bottom: 0.625rem;
}

.navbar .dropdown-item:hover {
  	background-color: var(--primary);
}

.navbar .dropdown-divider {
	width: 100%;
	height: 1px;
	border: none;
	margin: 0.5rem auto 0.5rem auto;
	background-color: var(--primary-light);
}

.navbar .nav-item .nav-link {
	color: #eee;
	text-decoration: none;
	padding-top: 0.625rem;
	padding-bottom: 0.625rem;
	transition: all 0.2s ease;
}

.navbar .fa-stack {
	width: 2em;
	font-size: 0.75rem;
	margin-right: 0.25rem;
}

.navbar .fa-stack-2x {
	background: -webkit-gradient(
		linear,
		left top,
		left bottom,
		from(#0ee951),
		to(#00dabf)
	);
	background-clip: text;
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	transition: all 0.2s ease;
}

.navbar .fa-stack-1x {
	color: #ffffff;
	transition: all 0.2s ease;
}

.navbar .fa-stack:hover .fa-stack-2x {
  	color: var(--primary);
}

.navbar .fa-stack:hover .fa-stack-1x {
  	color: var(--primary);
}

.navbar .navbar-toggler {
	padding: 0;
	border: none;
	font-size: 1.25rem;
}


/****************/
/*     Home     */
/****************/
.home {
	background-image: url(../assets/images/home.jpg);
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	background-attachment: fixed;
}

.para {
  	width: 50%;
}

.para-light {
  	opacity: 0.7;
}


/***********************/
/*     Information     */
/***********************/
.information .container-fluid .row div:first-child {
  	background-color: var(--primary);
}

.information .container-fluid .row div:last-child {
	background-color: var(--primary);
}

.information .container-fluid .row div:nth-child(2) {
  	background-color: var(--primary-light);
}


/******************/
/*     Button     */
/******************/
.btn {
	color: white;
	border-radius: 0;
	border-width: 2px;
	padding: 10px 30px;
	border-image-slice: 1;
	background-image: none;
	background: transparent;
	border-image-source: var(--gradient);
	box-shadow: 5px 5px 0px 0px var(--secondary);
}

.btn:hover {
	color: white;
	box-shadow: none;
	border-radius: 0;
	padding: 10px 30px;
	transform: translate(5px, 5px);
}

/* Email - Newsletter Button */
.btn-secondary {
	color: black;
	border-width: 2px;
	padding: 10px 30px;
	border-image-slice: 1;
	background-image: none;
	background: transparent;
	border-image-source: var(--gradient);
}

.btn-secondary:hover {
	color: black;
	padding: 10px 30px;
	background-image: var(--gradient);
}

/* Other Pages Button */
.btn-tertiary {
	color: black;
	border-radius: 0;
	border-width: 2px;
	padding: 10px 30px;
	border-image-slice: 1;
	background-image: none;
	background: transparent;
	border-image-source: var(--gradient);
	box-shadow: 5px 5px 0px 0px var(--secondary);
}

.btn-tertiary:hover {
	color: black;
	box-shadow: none;
	border-radius: 0;
	padding: 10px 30px;
	transform: translate(5px, 5px);
}


/********************/
/*     Services     */
/********************/
.services .card {
	padding: 20px;
	border-radius: 0;
	border: 2px solid white;
}

.services .card:hover {
	border: 10px solid;
	transform: scale(1.01);
	border-image-slice: 1;
	border-width: 2px;
	border-image-source: var(--gradient);
	box-shadow: 5px 5px 0px 0px #0a58ca;
}


/*****************/
/*     Plans     */
/*****************/
.plans .card {
	padding: 20px;
	border: 2px solid white;
}


/************************/
/*     Testimonials     */
/************************/
.slider-1 {
	padding-top: 14.25rem;
	padding-bottom: 8.5rem;
}

.slider-1 .section-title {
  	text-align: center;
}

.slider-1 .h2-heading {
	text-align: center;
	margin-bottom: 3rem;
}

.testimonial-card {
	border: 10px solid;
	border-image-slice: 1;
	border-width: 3px;
	border-image-source: var(--gradient);
}

.slider-1 .slider-container {
  	position: relative;
}

.slider-1 .swiper-container {
	width: 86%;
	position: static;
}

.slider-1 .swiper-button-prev,
.slider-1 .swiper-button-next {
  	color: var(--primary);
}

.slider-1 .swiper-button-prev:focus,
.slider-1 .swiper-button-next:focus {
	/* even if you can't see it chrome you can see it on mobile device */
	outline: none;
}

.slider-1 .swiper-button-prev {
	left: -14px;
	background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2028%2044'%3E%3Cpath%20d%3D'M0%2C22L22%2C0l2.1%2C2.1L4.2%2C22l19.9%2C19.9L22%2C44L0%2C22L0%2C22L0%2C22z'%20fill%3D'%23707375'%2F%3E%3C%2Fsvg%3E");
	background-size: 18px 28px;
}

.slider-1 .swiper-button-next {
	right: -14px;
	background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2028%2044'%3E%3Cpath%20d%3D'M27%2C22L27%2C22L5%2C44l-2.1-2.1L22.8%2C22L2.9%2C2.1L5%2C0L27%2C22L27%2C22z'%20fill%3D'%23707375'%2F%3E%3C%2Fsvg%3E");
	background-size: 18px 28px;
}

.slider-1 .card {
	border: none;
	position: relative;
	background-color: transparent;
}

.slider-1 .card-image {
	width: 80px;
	height: 80px;
	margin-left: auto;
	margin-right: auto;
	border-radius: 50%;
	margin-bottom: 1.25rem;
}

.slider-1 .card-body {
  	padding: 0;
}

.slider-1 .testimonial-text {
  	margin-bottom: 0.75rem;
}

.slider-1 .testimonial-author {
	margin-bottom: 0;
	color: #252c38;
}

.slider-1 .avatar {
	width: 70px;
	height: 70px;
	border-radius: 50%;
}

/* Dropdown Menu */
.navbar .dropdown .dropdown-menu {
  	animation: fadeDropdown 0.2s; /* required for the fade animation */
}

@-webkit-keyframes fadeDropdown {
	0% {
		opacity: 0;
	}

	100% {
		opacity: 1;
	}
}

@keyframes fadeDropdown {
	0% {
		opacity: 0;
	}

	100% {
		opacity: 1;
	}
}


/**********************/
/*     Newsletter     */
/**********************/
.form-control-input,
.form-control-textarea {
	width: 100%;
	appearance: none;
	border-radius: 4px;
	font-size: 0.875rem;
	line-height: 1.5rem;
	padding-left: 1.5rem;
	padding-top: 0.775rem;
	padding-bottom: 0.775rem;
}


/******************************/
/*     Back To Top Button     */
/******************************/
#myBtn {
	z-index: 99;
	right: 20px;
	width: 52px;
	height: 52px;
	bottom: 20px;
	border: none;
	outline: none;
	display: none;
	position: fixed;
	cursor: pointer;
	border-radius: 50%;
	background-color: #323137;
}

#myBtn:hover {
  	background-color: #0f0f11;
}

#myBtn img {
	width: 18px;
	margin-left: 0.125rem;
	margin-bottom: 0.25rem;
}


/***********************/
/*     Extra Pages     */
/***********************/
.ex-header {
	padding-top: 8.5rem;
	padding-bottom: 4rem;
	background-color: var(--primary);
}

.ex-header h1 {
  	color: #fff;
}

.ex-basic-1 .list-unstyled .fas {
	font-size: 0.375rem;
	line-height: 1.625rem;
}

.ex-basic-1 .list-unstyled .flex-grow-1 {
  	margin-left: 0.5rem;
}

.ex-basic-1 .text-box {
	padding: 1.25rem 1.25rem 0.5rem 1.25rem;
	background-color: #f7f9fd;
}

.ex-cards-1 .card {
	border: none;
	background-color: transparent;
}

.ex-cards-1 .card .fa-stack {
	width: 2em;
	font-size: 1.125rem;
}

.ex-cards-1 .card .fa-stack-2x {
  	color: var(--secondary);
}

.ex-cards-1 .card .fa-stack-1x {
	width: 2em;
	color: #ffffff;
	font-weight: 700;
	line-height: 2.125rem;
}

.ex-cards-1 .card .list-unstyled .flex-grow-1 {
  	margin-left: 2.25rem;
}

.ex-cards-1 .card .list-unstyled .flex-grow-1 h5 {
	margin-top: 0.125rem;
	margin-bottom: 0.5rem;
}


/*************************/
/*     Media Queries     */
/*************************/
@media only screen and (max-width: 1024px) {
	.services,
	.work,
	.testimonial,
	.about,
	.contact,
	.plans {
		height: 100%;
	}
}

@media (min-width: 992px) {
	.slider-1 .swiper-container {
		width: 92%;
	}

	.slider-1 .swiper-button-prev {
		left: -16px;
		width: 22px;
		background-size: 22px 34px;
	}

	.slider-1 .swiper-button-next {
		right: -16px;
		width: 22px;
		background-size: 22px 34px;
	}

	/* Navigation */
	.navbar {
		box-shadow: none;
		transition: all 0.2s;
		padding-top: 1.75rem;
		background-color: transparent;
	}

	.navbar.top-nav-collapse {
		padding-top: 0.5rem;
		padding-bottom: 0.5rem;
		background-color: var(--primary);
		box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.025);
	}

	.offcanvas-collapse {
		position: static;
		top: auto;
		bottom: auto;
		left: auto;
		width: auto;
		padding-right: 0;
		padding-left: 0;
		background-color: transparent;
		overflow-y: visible;
		visibility: visible;
	}

	.offcanvas-collapse.open {
		transform: none;
	}

	.navbar .navbar-nav {
		margin-top: 0;
		margin-bottom: 0;
	}

	.navbar .nav-item .nav-link {
		padding-right: 0.75rem;
		padding-left: 0.75rem;
	}

	.navbar .dropdown-menu {
		padding-top: 0.75rem;
		padding-bottom: 0.875rem;
		box-shadow: 0 3px 3px 1px rgba(0, 0, 0, 0.08);
	}

	.navbar .dropdown-divider {
		width: 90%;
	}

	.navbar .social-icons {
		margin-left: 0.5rem;
	}

	.navbar .fa-stack {
		margin-right: 0;
		margin-left: 0.25rem;
	}
}

@media only screen and (max-width: 540px) {
	h1 {
		font-size: 30px;
	}

	.para {
		width: 100%;
	}

	.swiper-container {
		width: 92%;
	}

	.swiper-button-prev {
		left: -16px;
		width: 22px;
		background-size: 22px 34px;
	}

	.swiper-button-next {
		right: -16px;
		width: 22px;
		background-size: 22px 34px;
	}
}

/* Bright HelloSoft redesign */
:root {
	--primary: #ffffff;
	--primary-light: #f4f8fc;
	--secondary: #176bff;
	--tertiary: #e8f0f8;
	--gradient: linear-gradient(135deg, #176bff, #17b8a6);
	--ink: #18334a;
	--muted: #617487;
	--line: #dbe6ef;
}

body {
	background: #ffffff;
	color: var(--ink);
}

a {
	color: #176bff;
}

.home,
.about,
.services,
.plans,
.work,
.contact {
	height: auto;
	min-height: 720px;
}

.home {
	min-height: 100vh;
	background-position: center center;
	background-attachment: scroll;
}

.home::before {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(90deg, rgba(255, 255, 255, 0.98) 0%, rgba(255, 255, 255, 0.88) 37%, rgba(255, 255, 255, 0.12) 68%, transparent 100%);
}

.home .container {
	position: relative;
	z-index: 1;
}

.home .text-light,
.home.text-light,
.home .container.text-light,
.about.text-light,
.about .text-light,
.services .text-light,
.testimonial.text-light,
.contact .text-light,
.location.text-light,
.footer.text-light,
.bottom.text-light {
	color: var(--ink) !important;
}

.headline {
	max-width: 720px;
	font-weight: 700;
	line-height: 1.22;
	letter-spacing: -0.04em;
}

.sessionTitle,
.service-label {
	color: #158b80;
	font-size: 0.78rem;
	font-weight: 700;
	letter-spacing: 0.12em;
}

.home_text,
.home .fas,
.services .fas,
.information .fas,
.location .far,
.location .fas {
	background: var(--gradient);
	background-clip: text;
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}

.para-light {
	opacity: 1;
	color: var(--muted);
}

.navbar,
.navbar.top-nav-collapse {
	background-color: #ffffff;
	box-shadow: 0 8px 30px rgba(25, 61, 91, 0.08);
}

.navbar .nav-item .nav-link,
.navbar .dropdown-item,
.navbar .logo-text {
	color: var(--ink);
}

.navbar .nav-item .nav-link.active,
.navbar .nav-item .nav-link[aria-current="page"] {
	color: #176bff !important;
	background: #eaf3ff;
	border-radius: 999px;
}

.navbar .dropdown-menu,
.offcanvas-collapse {
	background-color: #ffffff;
}

.navbar .dropdown-item:hover {
	background-color: #f0f6fb;
}

.navbar .navbar-toggler {
	color: var(--ink);
}

.btn,
.btn-tertiary,
.form-control-submit-button {
	border: 0;
	border-radius: 999px;
	padding: 12px 30px;
	background: var(--gradient);
	box-shadow: 0 10px 24px rgba(23, 107, 255, 0.22);
	color: #fff;
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}

/* 문의 버튼의 문구와 스피너를 가운데 정렬한다. */
.form-control-submit-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 9px;
	min-width: 126px;
}

/* 문의 전송 중에는 버튼의 추가 클릭을 막고 상태를 구분한다. */
.form-control-submit-button:disabled,
.form-control-submit-button:disabled:hover {
	cursor: wait;
	opacity: 0.72;
	transform: none;
	box-shadow: 0 10px 24px rgba(23, 107, 255, 0.18);
}

/* 문의 요청이 시작되기 전에는 스피너를 숨긴다. */
.qna-button-spinner {
	display: none;
	width: 16px;
	height: 16px;
	border: 2px solid rgba(255, 255, 255, 0.45);
	border-top-color: #fff;
	border-radius: 50%;
}

/* 문의 요청 중에만 스피너를 회전시킨다. */
.form-control-submit-button.is-loading .qna-button-spinner {
	display: inline-block;
	animation: qna-spinner 0.75s linear infinite;
}

/* 문의 버튼 스피너를 한 바퀴 회전시킨다. */
@keyframes qna-spinner {
	to {
		transform: rotate(360deg);
	}
}

.btn:hover,
.btn-tertiary:hover,
.form-control-submit-button:hover {
	padding: 12px 30px;
	border-radius: 999px;
	transform: translateY(-2px);
	box-shadow: 0 14px 28px rgba(23, 107, 255, 0.28);
	color: #fff;
}

.btn-secondary {
	border: 0;
	border-radius: 0 12px 12px 0;
	background: var(--gradient);
	color: #fff !important;
}

.about,
.plans,
.company,
.newsletter,
.location,
.testimonial {
	background: #f4f8fc;
}

.services,
.work,
.contact,
.footer {
	background: #ffffff;
}

.about,
.services,
.contact {
	padding-top: 7rem !important;
	padding-bottom: 7rem !important;
}

/* About 섹션은 콘텐츠 높이에 맞춰 불필요한 공백을 제거한다. */
.about {
	min-height: auto;
	padding-top: 4.5rem !important;
	padding-bottom: 4.5rem !important;
}

.about .about-visual {
	display: block;
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
}

.about img,
.contact img {
	border-radius: 28px;
	box-shadow: 0 24px 60px rgba(29, 68, 98, 0.14);
}

.services .card.bg-transparent {
	display: flex;
	flex-direction: column;
	height: 100%;
	padding: 0;
	border: 1px solid var(--line);
	border-radius: 22px;
	background: #ffffff !important;
	box-shadow: 0 12px 34px rgba(30, 68, 96, 0.07);
	transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.service-card-image {
	display: block;
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	border-radius: 21px 21px 0 0;
}

.service-card-body {
	display: flex;
	flex: 1;
	flex-direction: column;
	padding: 1.6rem 1.6rem 1.75rem;
	text-align: center;
}

.service-card-body .para-light {
	margin-bottom: 1.25rem;
	line-height: 1.75;
}

.services .card:hover {
	transform: translateY(-8px);
	border: 1px solid #b9d5ed;
	border-image: none;
	box-shadow: 0 20px 44px rgba(30, 68, 96, 0.13);
}

.service-link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	align-self: center;
	margin-top: auto;
	padding: 0.48rem 0.85rem;
	border-radius: 999px;
	background: #eaf3ff;
	color: #176bff;
	font-size: 0.82rem;
	font-weight: 700;
	text-align: center;
	transition: background 0.2s ease, transform 0.2s ease;
}

.service-link:hover {
	background: #dceaff;
	color: #0c55d5;
	transform: translateX(3px);
}

.testimonial {
	min-height: auto;
}

.slider-1 {
	padding-top: 7rem;
	padding-bottom: 7rem;
}

.testimonial-card {
	position: relative;
	overflow: hidden;
	height: 100%;
	padding: 2rem !important;
	border: 1px solid var(--line);
	border-image: none;
	border-radius: 20px;
	background: linear-gradient(145deg, #ffffff 15%, #eef7ff 100%);
	box-shadow: 0 18px 38px rgba(30, 68, 96, 0.11);
}

.testimonial-card::after {
	content: "";
	position: absolute;
	top: -55px;
	right: -55px;
	width: 140px;
	height: 140px;
	border-radius: 50%;
	background: linear-gradient(135deg, rgba(23, 107, 255, 0.14), rgba(23, 184, 166, 0.12));
}

.swiper-slide:nth-child(2) .testimonial-card {
	background: linear-gradient(145deg, #ffffff 15%, #ecfbf7 100%);
}

.swiper-slide:nth-child(3) .testimonial-card {
	background: linear-gradient(145deg, #ffffff 15%, #fff5ee 100%);
}

.principle-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 52px;
	height: 52px;
	margin-bottom: 1.3rem;
	border-radius: 16px;
	background: var(--gradient);
	box-shadow: 0 10px 22px rgba(23, 107, 255, 0.2);
	color: #ffffff;
	font-size: 1.2rem;
}

.testimonial-card > p:first-of-type {
	font-size: 1.08rem;
	font-weight: 600;
	color: var(--ink);
}

.testimonial-card h6,
.slider-1 .testimonial-author {
	color: var(--ink);
}

.contact .border-secondary {
	border-color: var(--line) !important;
	background: #f7fafc;
}

.contact-visual img {
	width: 100%;
	height: 760px;
	object-fit: cover;
	object-position: center;
}

.form-control,
.form-select,
.form-control-input,
.form-control-textarea {
	border: 1px solid var(--line);
	border-radius: 12px;
	background-color: #ffffff;
	color: var(--ink);
}

.form-control:focus,
.form-select:focus,
.form-control-input:focus {
	border-color: #4b9cff;
	box-shadow: 0 0 0 0.2rem rgba(23, 107, 255, 0.12);
}

.location {
	border-top: 1px solid var(--line);
	border-bottom: 1px solid var(--line);
}

.footer {
	background: #eaf4fb;
	color: var(--ink);
	border-top: 1px solid #d5e5f0;
}

.footer a,
.footer .para-light {
	color: var(--muted);
}

.footer a:hover {
	color: #176bff;
	-webkit-text-fill-color: #176bff;
}

.bottom {
	background: #dcecf6;
}

.bottom.text-light,
.bottom a {
	color: #38566d !important;
}

#myBtn {
	background: var(--gradient);
	box-shadow: 0 10px 24px rgba(23, 107, 255, 0.25);
}

@media (min-width: 992px) {
	.navbar {
		padding-top: 0.8rem;
		padding-bottom: 0.8rem;
		background-color: #ffffff;
	}

	/* 데스크톱 메뉴가 헤더와 다른 흰색 면으로 분리되지 않도록 한다. */
	.navbar .navbar-collapse,
	.navbar .navbar-nav {
		background-color: inherit;
	}
}

@media (max-width: 991px) {
	.home {
		min-height: 820px;
		background-position: 60% center;
	}

	.home::before {
		background: rgba(255, 255, 255, 0.86);
	}

	.home .para {
		width: 80%;
	}
}

@media (max-width: 540px) {
	.home {
		min-height: 720px;
		background-position: 64% center;
	}

	.home .para {
		width: 100%;
	}

	.about,
	.services,
	.contact {
		padding-top: 5rem !important;
		padding-bottom: 5rem !important;
	}

	/* 모바일에서는 텍스트와 이미지 사이의 흐름을 조밀하게 유지한다. */
	.about {
		padding-top: 3rem !important;
		padding-bottom: 3rem !important;
	}

	.about h1 {
		font-size: 2rem;
		line-height: 1.28;
	}

	.about .about-visual {
		margin-top: 0.5rem;
		border-radius: 20px;
	}
}

/* Static How We Work cards */
.how-we-work {
	padding: 7rem 0;
	background: linear-gradient(180deg, #f4f8fc 0%, #eef6fb 100%);
	color: var(--ink) !important;
}

.how-we-work-heading {
	max-width: 760px;
	margin: 0 auto 3rem;
}

.how-we-work-grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 1.25rem;
}

.work-principle-card {
	overflow: hidden;
	min-height: 520px;
	border: 1px solid #d9e6ef;
	border-radius: 24px;
	background: #ffffff;
	box-shadow: 0 16px 38px rgba(34, 72, 101, 0.09);
	transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.work-principle-card:hover {
	transform: translateY(-8px);
	box-shadow: 0 24px 48px rgba(34, 72, 101, 0.15);
}

.work-principle-card img {
	display: block;
	width: 100%;
	aspect-ratio: 1 / 1;
	object-fit: cover;
}

.work-principle-body {
	padding: 1.5rem 1.35rem 1.75rem;
}

.work-principle-body span {
	display: block;
	margin-bottom: 0.7rem;
	color: #16877d;
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.08em;
}

.work-principle-body h3 {
	margin-bottom: 0.7rem;
	color: var(--ink);
	font-size: 1.25rem;
	font-weight: 700;
}

.work-principle-body p {
	color: var(--muted);
	font-size: 0.94rem;
	line-height: 1.75;
}

@media (max-width: 991px) {
	.how-we-work-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 575px) {
	.how-we-work {
		padding: 5rem 0;
	}

	.how-we-work-grid {
		grid-template-columns: 1fr;
	}

	.work-principle-card {
		min-height: 0;
	}
}