/* TABLE OF CONTENT */
/* -----------------
1.General
2.Navbar
3.Banner
4.About
5.Story
6.Footer
---------------------*/
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400..900;1,400..900&family=Ubuntu:ital,wght@0,300;0,400;0,500;0,700;1,300;1,400;1,500;1,700&display=swap');
*{
-webkit-box-sizing:border-box;
box-sizing: border-box;
margin: 0;
padding: 0;
}
a{
text-decoration: none;
}
a:hover{
color:#FBD784 !important;
}
ul{
margin:0;
padding:0;
}
/* =========== Variable Define ========== */
:root{
  --font-main: "Playfair Display", sans-serif;
  --font-second: "Ubuntu", sans-serif;
}
/* 1 Custom Css */
html{
scroll-behavior: smooth;
}
body{
font-family: var(--font-main);
overflow-x: clip;
}
::-webkit-scrollbar{
width:.425rem;
}
::-webkit-scrollbar-track{
background: #0B1D26;
}
::-webkit-scrollbar-thumb{
background:#FBD784;
}
.sidebar {
	float: right;
	width: 26%;
	height: 100vh;
  margin-right: -248px;
  font-family: 'Nanum Gothic', sans-serif;

}

.sidebar-content {
	position: fixed;
	width: 25%;
	height: 100%;
	background: transparent;
	-webkit-transition: all 1s ease-in;
	   -moz-transition: all 1s ease-in;
	    -ms-transition: all 1s ease-in;
	     -o-transition: all 1s ease-in;
	        transition: all 1s ease-in;
}
.sidebar-list {
	position: absolute;
	top: 50%;
}
.sidebar-list-menu {
	position: relative;
	list-style: none;
	padding: 0;
}
.sidebar-list-menu::after {
	position: absolute;
	content: ' ';
	top: 0;
	bottom: 0;
	left:60px;
	width: 1.34px;
	height: 100%;
	background: #fff;
	z-index: 9;
}
.sidebar-list-menu li a {
	position: relative;
	display: inline-block;
	line-height: 50px;
	font-weight: 600;
	cursor: pointer;
	color: #fff;
	text-decoration: none;
}
.sidebar-list-menu li a.active {
	font-weight: 900;
  color: #FBD784;
}
/* social */
#social{
  position: fixed;
}

#social p {
  position: absolute;
  top: 270px;
  color: white;
  font-family: 'Nanum Gothic', sans-serif;
  width: 60px;
  height: 15px;
  transform: rotate(90deg);
  font-weight: 700;
  font-size: 12px;
  line-height: 15px;
}

#social a:nth-child(2) {
  position: absolute;
  width: 13.4px;
  height: 13.4px;
  left: 23px;
  top: 330px;
  display: flex;
  justify-content: center;
  align-items: center;
}

#social a:nth-child(3) {
  position: absolute;
  width: 13.4px;
  height: 13.4px;
  left: 23px;
  top: 360px;
  display: flex;
  justify-content: center;
  align-items: center;
}
/* heading lines */
.small-heading::before{
  position: absolute;
  width: 48px;
  display: inline-block;
  left:-4rem;
  top: 11px;
  content:'';
  height: 1.34px;
  background: #FBD784;
}
.small-heading{
position: relative;
display: inline-block;
margin-left: 3.875rem;
margin-bottom:0;
font-family:var(--font-second);
font-size: 18px;
font-weight: 800;
line-height: 22.05px;
letter-spacing: 2px;
color: #FBD784;
}
/* 2 Navbar */
.header_wrapper .navbar{
-webkit-transition: all .2s linear;
-o-transition: all .2s linear;
transition: all .2s linear;
padding:1rem 0;
align-items: center;
}
.header_wrapper .menu-navbar-nav{
width: 65%;
display: flex;
}   
.header_wrapper .nav-item{
margin:0 15px;
}
.header_wrapper .nav-item .nav-link{
font-size: 18px;
font-weight: 700;
font-family: var(--font-second);
line-height: 21.76px;
padding-bottom: 0;
color:#fff;
}
.nav-btn{
color: #fff;
font-family: var(--font-second);
font-size: 17px;
line-height: 20.55px;
}
.header-scrolled {
position: fixed;
margin-top: 0;
top: 0;
left: 0;
width: 100%;
backdrop-filter: blur(10px);
-webkit-box-shadow: 0 4px 6px 0 rgba(12, 0, 46, .05);
box-shadow: 0 4px 6px 0 rgba(12, 0, 46, .05);
}
/* 3 Top Banner */
.top-banner{
width: 100%;
height:1200px;
background:url(../images/Frame\ 2.png);
background-size:cover;
padding:10.875rem 0 5.375rem;
}
.top-banner h1{
font-size: 58px;
font-weight: 600;
line-height: 100px;
color: #fff;
}
.top-banner .scroll-btn{
font-family: var(--font-second);
font-size: 18px;
font-weight: 700;
line-height: 21.76px;
color: #fff;
}
/* cards */
.cards-sec{
background-color: #0B1D26;
}
.cards-sec .img img{
width: 100%;
height: 100%;
}
.numbres{
  width: 161px;
  height: 161px;
  font-weight: 700;
  position: absolute;
  font-size: 161px;
  line-height: 161px;
  transform: translateY(-80px) translateX(-83px);
  font-family: 'Nanum Gothic', sans-serif;
  color: white;
  opacity: 0.1;
}
.cards-sec .content h2{
font-family:var(--font-main);
font-size: 64px;
font-weight: 600;
line-height: 76.8px;
color: #fff;
}
.cards-sec .content .description{
font-family:var(--font-second);
font-size: 18px;
font-weight: 700;
line-height: 32px;
color: #fff;
}
.cards-sec .content .readmd-btn{
font-family:var(--font-second);
font-size: 18px;
line-height: 21.76px;
color: #FBD784;

}
.cards-sec .content .readmd-btn i{
vertical-align:-2.4px;
transition: all 1s ease-in-out;
}
.cards-sec .content .readmd-btn:hover{
text-decoration: underline !important;
}
.cards-sec .content .readmd-btn:hover i{
transform: translateX(10px);
}
/* footer */
footer{
padding:11.25rem 0 5rem;
background-color: #0B1D26;
}
footer .logo{
margin-bottom: 20px;
}
footer .company_details{
font-family:var(--font-second);
font-size: 18px;
font-weight: 700;
line-height: 32px;
color: #fff;
}
.footer__icons {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  margin-bottom: 1.875rem;
}
footer .copyright p{
font-family:var(--font-second);
font-size: 18px;
font-weight: 500;
line-height: 32px;
color: #FFFFFF;
opacity: 50%;
}
footer h5{
font-family:var(--font-second);
font-size: 24px;
font-weight: 700;
line-height: 32px;
color: #FBD784;
}
footer .link-widget li a{
font-family:var(--font-second);
font-size: 18px;
font-weight: 500;
line-height: 32px;
color: #FFFFFF;
margin-bottom: 16px;
}
footer .link-widget li {
list-style: none;
}