@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:ital,wght@0,200..800;1,200..800&display=swap');

:root {
 --font-body: 'Plus Jakarta Sans', sans-serif;
 --h1-size: 48px;
 --h1-line: 56px;
 --h2-size: 40px;
 --h2-line: 48px;
 --h3-size: 30px;
 --h3-line: 42px;
 --h4-size: 24px;
 --h4-line: 32px;
 --h5-size: 22px;
 --h5-line: 32px;
 --h6-size: 18px;
 --h6-line: 25px;
 --paragraph-size: 16px;
 --paragraph-line: 24px;
 --link-size: 16px;
 --link-line: 24px;
 --link-weight: 600;
 --btn-large-size: 18px;
 --btn-large-line: 28px;
 --btn-small-size: 14px;
 --btn-small-line: 24px;
 --bs-primary: #0f3164;
 --bs-secondary: #00bdf2;
 --bs-heading: #0f2a53;
 --bs-black-paragraph: #1e1e1e;
 --bs-light-bg: #d9d9d9;
 --bs-light: #c8c8c8;
 --bs-success: #26951a;
 --bs-danger: #ce2326;
 --bs-warning: #cb7b20;
 --bs-link: #1713f3;

 --bs-linear-gradient: linear-gradient(270deg, rgba(217, 217, 217, 0) 0%, rgba(15, 49, 100, 0.5) 43.72%, #0f3164 100%);

 --shadow-primary: 0px 12px 56px rgba(0, 0, 0, 0.12);
 --shadow-inset: -2px -2px 4px #000000, inset 1px 1px 1px rgba(0, 0, 0, 0.56);
}

.text-primary {
 color: var(--bs-primary) !important;
}

.text-secondary {
 color: var(--bs-secondary) !important;
}

.text-heading {
 color: var(--bs-heading) !important;
}

.text-black-paragraph {
 color: var(--bs-black-paragraph) !important;
}

.text-light-bg {
 color: var(--bs-light-bg) !important;
}

.text-light {
 color: var(--bs-light) !important;
}

.text-success {
 color: var(--bs-success) !important;
}

.text-danger {
 color: var(--bs-danger) !important;
}

.text-warning {
 color: var(--bs-warning) !important;
}

.text-link {
 color: var(--bs-link) !important;
}

.bg-primary {
 background: var(--bs-primary);
}

.bg-secondary {
 background: var(--bs-secondary);
}

.bg-heading {
 background: var(--bs-heading);
}

.bg-black-paragraph {
 background: var(--bs-black-paragraph);
}

.bg-light-bg {
 background: var(--bs-light-bg);
}

.bg-light {
 background: var(--bs-light);
}

.bg-success {
 background: var(--bs-success);
}

.bg-danger {
 background: var(--bs-danger);
}

.bg-warning {
 background: var(--bs-warning);
}

.bg-link {
 background: var(--bs-link);
}

body,
html {
 overflow-x: hidden;
}

body {
 font-family: var(--font-body);
 font-size: var(--paragraph-size);
 line-height: var(--paragraph-line);
 color: var(--bs-black-paragraph);
}

::-webkit-scrollbar {
 width: 8px;
}

::-webkit-scrollbar-track {
 background: transparent;
}

::-webkit-scrollbar-thumb {
 background: var(--bs-primary);
 border-radius: 10px;
}

::-webkit-scrollbar-thumb:hover {
 background: var(--bs-secondary);
}

::selection {
 background: var(--bs-secondary);
 color: var(--bs-white);
 text-shadow: none;
}

::-moz-selection {
 background: var(--bs-secondary);
 color: var(--bs-white);
 text-shadow: none;
}

::-webkit-selection {
 background: var(--bs-secondary);
 color: var(--bs-white);
 text-shadow: none;
}

h1 {
 font-family: var(--font-body);
 font-size: var(--h1-size);
 line-height: var(--h1-line);
}

h2 {
 font-family: var(--font-body);
 font-size: var(--h2-size);
 line-height: var(--h2-line);
 font-weight: 600;
}

h3 {
 font-family: var(--font-body);
 font-size: var(--h3-size);
 line-height: var(--h3-line);
}

h4 {
 font-family: var(--font-body);
 font-size: var(--h4-size);
 line-height: var(--h4-line);
}

h5 {
 font-family: var(--font-body);
 font-size: var(--h5-size);
 line-height: var(--h5-line);
}

h6 {
 font-family: var(--font-body);
 font-size: var(--h6-size);
 line-height: var(--h6-line);
}

p {
 font-family: var(--font-body);
 font-size: var(--paragraph-size);
 line-height: var(--paragraph-line);
 color: var(--bs-black-paragraph);
}

b,
strong {
 font-weight: 700;
}

a {
 font-family: var(--font-body);
 font-size: var(--link-size);
 line-height: var(--link-line);
 font-weight: var(--link-weight);
 color: var(--bs-primary);
}

a,
button,
.btn {
 transition: all 0.5s ease;
}

a {
 text-decoration: none;
 color: var(--bs-primary);
}

a:hover {
 color: var(--bs-secondary);
}

.heading h2 {
 letter-spacing: -0.025em;
 color: var(--bs-primary);
 margin-bottom: 20px;
}

ul,
ol {
 list-style: none;
 margin: 0;
 padding: 0;
}

button,
.btn,
.btn:focus,
.btn:active {
 border: 0 !important;
}

.btn-gradient {
 background: linear-gradient(90deg, var(--bs-primary), var(--bs-secondary));
 color: var(--bs-white) !important;
 padding: 12px 30px;
 border-radius: 30px;
 font-weight: 600;
 transition: 0.5s ease;
}

.btn-gradient img {
 margin-left: 10px;
 filter: brightness(0) saturate(100%) invert(100%) sepia(100%) saturate(0%) hue-rotate(200deg) brightness(103%) contrast(102%);
}

.btn-gradient:hover {
 color: var(--bs-white) !important;
 background: linear-gradient(180deg, var(--bs-primary), var(--bs-primary));
}

.btn-primary {
 font-family: var(--font-body);
 background: var(--bs-primary);
 color: var(--bs-white);
 display: inline-flex;
 align-items: center;
 justify-content: center;
 border: 0;
 padding: 12px 35px;
 border-radius: 15px;
 font-weight: 400;
 position: relative;
 overflow: hidden;
 z-index: 9;
 font-size: var(--btn-small-size);
 letter-spacing: -0.025em;
}

.btn-primary:before {
 background-color: var(--bs-secondary);
 content: '';
 height: 100%;
 left: -100%;
 position: absolute;
 top: 0;
 width: 0;
 z-index: -1;
 transform: skew(50deg);
 -webkit-transition: 0.4s;
 -moz-transition: 0.4s;
 -o-transition: 0.4s;
 transition: 0.4s;
 transform-origin: top left;
 -ms-transition: 0.4s;
}

.btn-primary img {
 margin-right: 6px;
}

.btn-primary:hover {
 color: var(--bs-white);
}

.btn-primary:hover:before {
 height: 100%;
 width: 200%;
}

.btn-secondary {
 font-family: var(--font-body);
 background: var(--bs-secondary);
 color: var(--bs-primary);
 display: inline-flex;
 align-items: center;
 justify-content: center;
 border: 0;
 padding: 9px 24px 10px;
 line-height: 21px;
 border-radius: 10px;
 position: relative;
 overflow: hidden;
 z-index: 9;
 font-size: var(--btn-small-size);
 letter-spacing: -0.025em;
}

.btn-secondary img {
 filter: brightness(0) saturate(100%) invert(100%) sepia(0%) saturate(7486%) hue-rotate(357deg) brightness(106%) contrast(99%);
 transition: 0.3s;
}

.btn-secondary:before {
 background-color: var(--bs-white);
 content: '';
 height: 100%;
 left: -100%;
 position: absolute;
 top: 0;
 width: 0;
 z-index: -1;
 transform: skew(50deg);
 -webkit-transition: 0.4s;
 -moz-transition: 0.4s;
 -o-transition: 0.4s;
 transition: 0.4s;
 transform-origin: top left;
 -ms-transition: 0.4s;
}

.btn-secondary:hover {
 color: var(--bs-secondary);
 background: inherit;
}

.btn-secondary:hover:before {
 height: 100%;
 width: 200%;
}

.btn-check:checked + .btn,
.btn.active,
.btn.show,
.btn:first-child:active,
:not(.btn-check) + .btn:active {
 background: var(--bs-primary);
 color: var(--bs-secondary);
}

.btn-secondary:hover img,
.btn-check:checked + .btn img,
.btn.active img,
.btn.show img,
.btn:first-child:active img,
:not(.btn-check) + .btn:active img {
 filter: brightness(0) saturate(100%) invert(29%) sepia(85%) saturate(3555%) hue-rotate(3deg) brightness(103%) contrast(104%);
}

.btn-danger {
 background: var(--bs-danger);
 color: var(--bs-white);
 display: inline-flex;
 align-items: center;
 justify-content: center;
 border: 0 !important;
 position: relative;
 overflow: hidden;
 z-index: 9;
 padding: 11px 27px;
 border-radius: 8px;
 font-family: var(--font-body);
 font-weight: 400;
 font-size: var(--btn-small-size);
}

.btn-danger:before {
 background-color: var(--bs-primary);
 content: '';
 height: 100%;
 left: -100%;
 position: absolute;
 top: 0;
 width: 0;
 z-index: -1;
 transform: skew(50deg);
 -webkit-transition: 0.4s;
 -moz-transition: 0.4s;
 -o-transition: 0.4s;
 transition: 0.4s;
 transform-origin: top left;
 -ms-transition: 0.4s;
}

.btn-danger img {
 margin-right: 6px;
 filter: brightness(0) saturate(100%) invert(9%) sepia(11%) saturate(7498%) hue-rotate(179deg) brightness(104%) contrast(104%);
 transition: all 0.5s ease;
}

.btn-danger:hover img {
 filter: brightness(0) saturate(100%) invert(100%) sepia(0%) saturate(1%) hue-rotate(123deg) brightness(106%) contrast(101%);
}

.btn-danger:hover {
 color: var(--bs-white);
}

.btn-danger:hover:before {
 height: 200%;
 width: 200%;
 left: -70%;
 top: -70%;
}

.btn-lg {
 font-family: var(--font-body);
 font-size: var(--btn-large-size);
 line-height: var(--btn-large-line);
 padding: 12px 28px;
 border-radius: 8px;
}

.btn-sm {
 font-family: var(--font-body);
 font-size: var(--btn-small-size);
 line-height: var(--btn-small-line);
 padding: 8px 20px;
 border-radius: 8px;
}

.rounded8 {
 border-radius: 8px !important;
}

.rounded10 {
 border-radius: 10px !important;
}

.rounded12 {
 border-radius: 12px !important;
}

.rounded15 {
 border-radius: 15px !important;
}

.rounded18 {
 border-radius: 18px !important;
}

.rounded20 {
 border-radius: 20px !important;
}

.rounded25 {
 border-radius: 25px !important;
}

.rounded30 {
 border-radius: 30px !important;
}

.ptb-60 {
 padding-top: 60px;
 padding-bottom: 60px;
}

.pt-60 {
 padding-top: 60px;
}

.pb-60 {
 padding-bottom: 60px;
}

.mtb-60 {
 margin-top: 60px;
 margin-bottom: 60px;
}

.mt-60 {
 margin-top: 60px;
}

.mb-60 {
 margin-bottom: 60px;
}

.ptb-40 {
 padding-top: 40px;
 padding-bottom: 40px;
}

.pt-40 {
 padding-top: 40px;
}

.pb-40 {
 padding-bottom: 40px;
}

.ptb-30 {
 padding-top: 30px;
 padding-bottom: 30px;
}

.pt-30 {
 padding-top: 30px;
}

.pb-30 {
 padding-bottom: 30px;
}

.container {
 max-width: 1364px;
}

/* ==============================
   NAVBAR
============================== */
.main-header {
 background: var(--bs-white);
 border-bottom: 1px solid var(--bs-black);
}

.custom-navbar {
 background: transparent;
 padding: 15px 0;
 transition: background 0.3s ease;
 z-index: 1055;
}

.custom-navbar .nav-link {
 font-family: var(--font-body);
 font-size: var(--btn-small-size);
 color: var(--bs-primary);
 margin: 0 4px;
 transition: 0.3s;
 letter-spacing: -0.025em;
 padding: 4px 12px 5px;
 border-radius: 5px;
 line-height: 21px;
}

.custom-navbar .nav-link:hover,
.custom-navbar .nav-link:focus,
.custom-navbar .nav-link.active {
 color: var(--bs-white);
 background: var(--bs-primary);
}

.custom-navbar.scrolled {
 background: rgba(255, 255, 255, 0.7);
 box-shadow: var(--shadow-primary, 0 2px 8px rgba(0, 0, 0, 0.1));
 backdrop-filter: blur(10px);
 position: fixed;
 top: 0;
 width: 100%;
}

.logo-header {
 height: 70px;
 transition: height 0.3s;
}

.scrolled .logo-header {
 height: 50px;
}

.scrolled.custom-navbar {
 padding: 5px 0;
}

.custom-navbar {
 background: transparent;
 z-index: 1040;
}

.custom-navbar .navbar-toggler {
 border: none;
 box-shadow: none;
 padding: 0.375rem 0.75rem;
}

.custom-navbar .navbar-toggler-icon {
 background-image: url("data:image/svg+xml;utf8,<svg fill='white' viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'><rect y='6' width='32' height='2'/><rect y='15' width='32' height='2'/><rect y='24' width='32' height='2'/></svg>");
}

.btn-login {
 background: var(--bs-primary);
 color: var(--bs-white);
 padding: 9px 22px 10px;
 border-radius: 10px;
 font-size: var(--btn-small-size);
 font-weight: 400;
 letter-spacing: -0.025em;
}

.btn-login:hover {
 background: var(--bs-secondary);
 color: var(--bs-primary);
}

/* ==============================
   HERO BANNER
============================== */
.hero-section {
 padding: 30px 0;
}

.hero-banner {
 position: relative;
 overflow: hidden;
 border-radius: 22px;
}

.hero-bg {
 width: 100%;
 height: 500px;
 object-fit: cover;
}

.hero-overlay {
 position: absolute;
 left: 0;
 top: 0;
 width: 100%;
 height: 100%;
 background: linear-gradient(270deg, rgba(217, 217, 217, 0) 0%, rgba(15, 49, 100, 0.5) 43.72%, #0f3164 100%);
 border-radius: 25px;
}

.hero-content {
 position: absolute;
 left: 50px;
 bottom: 0;
 transform: translateY(-20%);
 color: var(--bs-white);
 max-width: 675px;
}

.hero-content h1 {
 font-size: var(--h1-size);
 line-height: var(--h1-line);
 font-weight: 600;
 margin-bottom: 20px;
 letter-spacing: -0.025em;
}

.hero-content p {
 font-size: var(--paragraph-size);
 line-height: var(--paragraph-line);
 margin-bottom: 30px;
 color: var(--bs-white);
}

.services-section .heading {
 margin-bottom: 50px;
}

.services-section .heading p {
 max-width: 570px;
 margin: 0 auto;
}

.service-card {
 position: relative;
 border-radius: 25px;
 overflow: hidden;
 height: 300px;
 transition: 0.3s;
}

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

.service-overlay {
 position: absolute;
 inset: 0;
 background: var(--bs-primary);
 opacity: 0.5;
 transition: 0.8s;
}

.service-card:hover {
 border-radius: 40px;
}

.service-card:hover .service-overlay {
 opacity: 0.9;
}

.service-content {
 position: absolute;
 left: 30px;
 bottom: 30px;
 max-width: 390px;
 color: var(--bs-white);
}

.service-content h3 {
 margin-bottom: 10px;
 color: var(--bs-white);
 font-weight: 600;
 letter-spacing: -0.025em;
}

.service-content p {
 color: var(--bs-white);
 margin-bottom: 20px;
}

.news-section .heading {
 margin-bottom: 40px;
}

.news-card {
 transition: 0.5s;
}

.news-card:hover {
 transform: translateY(-10px) scale(1.01);
}

.news-img {
 border-radius: 25px;
 overflow: hidden;
 margin-bottom: 30px;
}

.news-content h4 {
 color: var(--bs-black);
 margin-bottom: 10px;
 letter-spacing: -0.025em;
}

.news-date {
 font-size: var(--btn-small-size);
 font-weight: 600;
 color: var(--bs-secondary);
 display: block;
 margin-bottom: 25px;
 letter-spacing: -0.025em;
}

.news-content p {
 margin-bottom: 30px;
}

.news-card .btn-secondary:before {
 background-color: var(--bs-primary);
}

.news-card .btn-secondary:hover {
 color: var(--bs-white);
}

/*  fooet  */
.footer {
 padding: 50px 0;
 border-top: 1px solid var(--bs-black);
 margin: 50px 0;
}

.footer-links {
 list-style: none;
 padding: 0;
 margin: 0;
}

.footer-links li {
 margin-bottom: 10px;
}

.footer-links li:last-child {
 margin-bottom: 0;
}

.footer-links a {
 color: var(--bs-black-paragraph);
 text-decoration: none;
 transition: 0.3s;
 font-weight: 400;
 letter-spacing: -0.025em;
}

.footer-links a:hover {
 color: var(--bs-secondary);
 padding-left: 8px;
}

.footer-address {
 height: 100%;
 display: flex;
 flex-direction: column;
 justify-content: space-between;
}

.copyright {
 color: var(--bs-black);
 font-weight: 400;
 font-size: 12px;
 line-height: 24px;
 letter-spacing: -0.025em;
}

/* Home page End */


@media (max-width: 1281px) {
 :root {
  --h1-size: 42px;
  --h1-line: 52px;
  --h2-size: 28px;
  --h2-line: 36px;
  --h3-size: 24px;
  --h3-line: 30px;
  --h4-size: 20px;
  --h4-line: 28px;
  --h5-size: 18px;
  --h5-line: 25px;
  --h6-size: 16px;
  --h6-line: 23px;
  --paragraph-size: 15px;
  --paragraph-line: 22px;
  --link-size: 15px;
  --link-line: 22px;
  --btn-large-size: 16px;
  --btn-large-line: 26px;
  --btn-small-size: 15px;
  --btn-small-line: 24px;
 }

 /* Home page End */
}

@media (max-width: 1199px) {
 .custom-navbar .nav-link {
  margin: 0 5px;
  font-size: 15px;
 }

 .ptb-50 {
  padding: 30px 0;
 }

 .pt-50 {
  padding-top: 30px;
 }

 .pb-50 {
  padding-bottom: 30px;
 }

 .pt-80 {
  padding-top: 50px;
 }

 .pb-80 {
  padding-bottom: 50px;
 }

 .mtb-80 {
  margin-top: 50px;
  margin-bottom: 50px;
 }

 .mt-80 {
  margin-top: 50px;
 }

 .mb-80 {
  margin-bottom: 50px;
 }
}

@media (max-width: 992px) {
 .custom-navbar {
  background: var(--black-heading) !important;
  padding: 10px 0;
 }

 .custom-navbar .container {
  padding-left: 12px;
  padding-right: 12px;
 }

 .custom-navbar .navbar-collapse {
  background: var(--black-heading);
  position: absolute;
  top: 100%;
  left: 0;
  width: 100vw;
  border-radius: 0 0 16px 16px;
 }

 .custom-navbar .navbar-nav {
  flex-direction: column;
  align-items: flex-start;
  padding: 10px 0;
 }

 .custom-navbar .nav-item {
  width: 100%;
 }

 .custom-navbar .nav-link {
  width: 100%;
  padding: 14px 22px;
  color: var(--bs-white) !important;
  font-size: 17px;
  margin: 0;
  border-radius: 7px;
  text-align: left;
 }

 .custom-navbar .nav-link:hover,
 .custom-navbar .nav-link:focus {
  background: var(--black-heading);
  color: var(--orange-button) !important;
 }

 .custom-navbar .btn-orange-light {
  display: block;
  width: 90%;
  margin: 15px auto 0;
  font-size: 17px;
  padding: 10px 0;
  border-radius: 7px;
  font-weight: 700;
 }

 .logo-header {
  height: 46px;
 }
}

@media (min-width: 992px) {
 .custom-navbar {
  padding-top: 30px;
  padding-bottom: 22px;
 }

 .custom-navbar .navbar-nav .nav-link {
  font-size: var(--btn-small-size);
  text-align: center;
  letter-spacing: -0.025em;
  padding: 4px 12px 5px;
  border-radius: 5px;
  line-height: 21px;
 }

 /* Home page End */
}

@media (max-width: 767px) {
 .container {
  max-width: 90%;
 }

 :root {
  --h1-size: 32px;
  --h1-line: 40px;
  --h2-size: 24px;
  --h2-line: 32px;
  --h3-size: 22px;
  --h3-line: 30px;
  --h4-size: 18px;
  --h4-line: 26px;
  --h5-size: 17px;
  --h5-line: 24px;
  --h6-size: 15px;
  --h6-line: 21px;
  --paragraph-size: 14px;
  --paragraph-line: 20px;
  --link-size: 14px;
  --link-line: 20px;
  --btn-large-size: 15px;
  --btn-large-line: 22px;
  --btn-small-size: 14px;
  --btn-small-line: 21px;
 }

 body {
  font-size: 14px;
  line-height: 1.4;
 }

 .ptb-80 {
  padding: 30px 0;
 }

 .ptb-50 {
  padding: 10px 0;
 }

 .pt-50 {
  padding-top: 10px;
 }

 .pb-50 {
  padding-bottom: 10px;
 }

 .pt-80 {
  padding-top: 30px;
 }

 .pb-80 {
  padding-bottom: 30px;
 }

 .mtb-80 {
  margin-top: 30px;
  margin-bottom: 30px;
 }

 .mt-80 {
  margin-top: 30px;
 }

 .mb-80 {
  margin-bottom: 30px;
 }

 /* Home page End */
}

@media (max-width: 667px) {
}

@media (max-width: 575px) {
 .container {
  max-width: 98%;
 }

 :root {
  --h1-size: 28px;
  --h1-line: 35px;
  --h2-size: 22px;
  --h2-line: 30px;
  --h3-size: 20px;
  --h3-line: 27px;
  --h4-size: 17px;
  --h4-line: 25px;
  --h5-size: 16px;
  --h5-line: 22px;
  --h6-size: 14px;
  --h6-line: 20px;
  --paragraph-size: 14px;
  --paragraph-line: 20px;
  --link-size: 14px;
  --link-line: 20px;
  --btn-large-size: 14px;
  --btn-large-line: 20px;
  --btn-small-size: 14px;
  --btn-small-line: 21px;
 }
}

@media (max-width: 479px) {
 :root {
  --h1-size: 24px;
  --h1-line: 32px;
  --h2-size: 20px;
  --h2-line: 28px;
  --h3-size: 18px;
  --h3-line: 25px;
  --h4-size: 15px;
  --h4-line: 23px;
  --h5-size: 15px;
  --h5-line: 20px;
  --h6-size: 13px;
  --h6-line: 18px;
  --paragraph-size: 13px;
  --paragraph-line: 18px;
  --link-size: 13px;
  --link-line: 18px;
  --btn-large-size: 13px;
  --btn-large-line: 18px;
  --btn-small-size: 13px;
  --btn-small-line: 19px;
 }
}