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

body {
  font-family: "Anybody", sans-serif;
  background: #fff;
  color: #000;
}

.container {
  width: 90%;
  max-width: 1140px;
  margin: auto;
}

#preloader {
  position: fixed;
  inset: 0;

  background: #fff;

  display: flex;
  justify-content: center;
  align-items: center;

  z-index: 99999;

  transition: 0.8s;
}

.loader-content {
  text-align: center;
  width: 320px;
}

.loader-content img {
  width: 180px;
  margin-bottom: 30px;
}

.loader-content p {
  font-family: "Anybody", sans-serif;
  font-size: 13px;
  color: #777;
  margin-bottom: 20px;
}

.progress {
  height: 2px;
  background: #e5e5e5;
  overflow: hidden;
}

.progress-bar {
  width: 0;
  height: 100%;
  background: #000;

  animation: loading 2.6s ease forwards;
}

@keyframes loading {
  from {
    width: 0;
  }

  to {
    width: 100%;
  }
}

#preloader.hide {
  opacity: 0;
  visibility: hidden;
}

/* =========================
HEADER
========================= */

.header {
  height: 82px;
  border-bottom: 1px solid #000;
}

.header .container {
  height: 100%;

  display: flex;

  justify-content: space-between;

  align-items: center;
}

.logo img {
  height: 50px;
}

nav ul {
  display: flex;
  align-items: center;
  gap: 38px;

  list-style: none;
}

nav a {
  color: #111;
  text-decoration: none;
  font-size: 13px;
  font-weight: 500;
}

.btn {
  background: #000;
  color: #fff;

  padding: 12px 24px;

  border-radius: 4px;

  transition: 0.3s;
}

.btn:hover {
  background: #222;
}

/* =======================
Hero
======================= */

.hero {
  /* border-bottom: 1px solid #000; */
  padding-top: 38px;
}

.hero-inner {
  text-align: center;
}

.tagline {
  display: block;

  color: #bdbdbd;

  font-size: 12px;

  margin-bottom: 14px;
}

.hero h1 {
  font-size: 60px;
  font-weight: 600;
}

/* =======================
Ship Area
======================= */

.ship-area {
  position: relative;
  /* height: 280px; */
  /* margin-bottom: 100px; */
}

.ship {
  width: 520px;
  max-width: 90%;

  position: absolute;

  left: 50%;
  bottom: 0;

  transform: translateX(-50%);
}

.circle-btn {
  position: absolute;

  left: 180px;
  top: 40px;

  width: 44px;
  height: 44px;

  border-radius: 50%;

  border: none;

  background: #7186a7;

  color: #fff;

  font-size: 20px;

  cursor: pointer;

  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
}

/* =====================
Responsive
===================== */

@media (max-width: 991px) {
  .hero h1 {
    font-size: 48px;
  }

  .ship-area {
    height: 320px;
  }

  .circle-btn {
    left: 80px;
  }
}

@media (max-width: 768px) {
  .header {
    height: auto;
    padding: 18px 0;
  }

  .header .container {
    flex-direction: column;
    gap: 18px;
  }

  nav ul {
    gap: 18px;
    flex-wrap: wrap;
    justify-content: center;
  }

  .hero {
    padding-top: 35px;
  }

  .hero h1 {
    font-size: 42px;
  }

  .ship {
    width: 95%;
  }

  .ship-area {
    height: 260px;
  }

  .circle-btn {
    width: 40px;
    height: 40px;

    left: 20px;
    top: 20px;
  }
}

@media (max-width: 480px) {
  .hero h1 {
    font-size: 34px;
  }

  .tagline {
    font-size: 11px;
  }

  .ship-area {
    height: 210px;
  }

  nav ul {
    gap: 12px;
  }

  .btn {
    padding: 10px 18px;
  }
}

.ship-section {
  position: relative;
  height: 420px;
}

.ship {
  position: absolute;
  left: 50%;
  /* bottom: 40px; */
  bottom: -36px;
  transform: translateX(-50%);
  width: 520px;
  z-index: 2;
}

.sea-lines {
  position: absolute;
  left: 0;
  bottom: -56px;
  width: 100%;
  height: 80px;
  overflow: visible;
}

.sea-lines path {
  fill: none;
  stroke: #222;
  stroke-width: 2;
  stroke-linecap: round;

  stroke-dasharray: 700;
  stroke-dashoffset: 700;

  animation: drawLine 3s ease forwards infinite;
}

.sea-right {
  animation-delay: 0.3s;
}

@keyframes drawLine {
  0% {
    stroke-dashoffset: 700;
  }

  40% {
    stroke-dashoffset: 0;
  }

  70% {
    stroke-dashoffset: 0;
  }

  100% {
    stroke-dashoffset: -700;
  }
}

.sea-left,
.sea-right {
  stroke-dasharray: 14 10;

  animation: waveMove 2s linear infinite;
}

@keyframes waveMove {
  from {
    stroke-dashoffset: 0;
  }

  to {
    stroke-dashoffset: -48;
  }
}

.hero-bottom p {
  margin: auto;
  text-align: center;
  width: 70%;
  font-family: "Lato", sans-serif;
  font-size: 24px;
  line-height: 1.2;
}

section.hero-bottom {
  margin-top: 50px;
}

.hero-bottom img {
  width: 100%;
  margin: 80px auto 0px;
  display: block;
  text-align: center;
}

/*==========================
THE WHY
==========================*/

.why-section {
  padding: 120px 0;
  background: #fff;
}

/* .container {
  width: 90%;
  max-width: 1200px;
  margin: auto;
} */

.section-number {
  display: block;
  font-family: "Anybody", sans-serif;
  font-size: 11px;
  font-weight: 400;
  color: #6f6f6f;
  margin-bottom: 8px;
}

.section-title {
  font-family: "Anybody", sans-serif;
  font-size: 50px;
  font-weight: 600;
  line-height: 1;
  color: #111;
  margin-bottom: 35px;
  text-transform: uppercase;
}

.section-content {
  max-width: 80%;
}

.section-content p {
  font-family: "Lato", sans-serif;
  font-size: 20px;
  font-weight: 500;
  line-height: 1.45;
  color: #575757;
  margin-bottom: 32px;
}

.section-content p:last-child {
  margin-bottom: 0;
}

/*=========================
THE DATA
==========================*/

.data-section {
  padding: 30px 0;
  background: #fff;
}

/* .container {
  width: 90%;
  max-width: 1200px;
  margin: auto;
} */

.section-count {
  display: block;
  font-family: "Lato", sans-serif;
  font-size: 11px;
  color: #757575;
  margin-bottom: 8px;
}

.section-heading {
  font-family: "Anybody", sans-serif;
  font-size: 56px;
  font-weight: 600;
  color: #111;
  margin-bottom: 30px;
  line-height: 1;
}

.section-description {
  max-width: 980px;

  font-family: "Lato", sans-serif;
  font-size: 20px;
  font-weight: 500;
  line-height: 1.5;

  color: #575757;

  margin-bottom: 70px;
}

/*=========================
Statistics
==========================*/

.stats-wrapper {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 45px;
}

.stat-box {
  display: flex;
  flex-direction: column;
}

.line {
  width: 120px;
  height: 1px;
  background: #e7e7e7;
  margin-bottom: 22px;
}

.stat-box h3 {
  font-family: "Anybody", sans-serif;
  font-size: 42px;
  font-weight: 500;
  color: #222;

  margin-bottom: 12px;
  line-height: 1.2;
}

.stat-box span {
  font-family: "Lato", sans-serif;
  font-size: 14px;
  color: #9a9a9a;
  line-height: 1.5;
  text-transform: lowercase;
}

.method-output {
  padding: 120px 0;
  background: #fff;
}

.method-grid {
  display: grid;
  grid-template-columns: 55% 45%;
  align-items: center;
  gap: 80px;
  margin-bottom: 120px;
}

.section-no {
  font-family: "Lato", sans-serif;
  font-size: 11px;
  color: #8b8b8b;
}

.method-content h2,
.output h2 {
  font-family: "Anybody", sans-serif;
  font-size: 56px;
  font-weight: 600;
  margin: 8px 0 5px;
}

.method-content p,
.output > p {
  font-family: "Lato", sans-serif;
  font-size: 20px;
  line-height: 1.7;
  color: #575757;
  margin-bottom: 24px;
}

.method-graphic {
  text-align: center;
}

.method-graphic img {
  width: 100%;
  max-width: 420px;
}

.output-grid {
  margin-top: 50px;

  display: grid;
  grid-template-columns: repeat(1, 1fr);
  gap: 30px;
}

.card {
  /* border: 1px solid #ececec; */
  border-radius: 14px;
  overflow: hidden;
  background: #fff;

  transition: 0.35s;
}

.card:hover {
  transform: translateY(-6px);

  box-shadow: 0 18px 45px rgba(0, 0, 0, 0.08);
}

.card img {
  display: block;
  width: 100%;
}
@media (max-width: 992px) {
  .method-grid {
    grid-template-columns: 1fr;
    gap: 60px;
  }

  .method-graphic {
    order: -1;
  }

  .output-grid {
    grid-template-columns: 1fr;
  }

  .method-content h2,
  .output h2 {
    font-size: 42px;
  }
}

@media (max-width: 768px) {
  .method-output {
    padding: 80px 0;
  }

  .method-content h2,
  .output h2 {
    font-size: 34px;
  }

  .method-content p,
  .output > p {
    font-size: 18px;
  }
}

.method-output {
  position: relative;
}
.method-output::after {
  position: absolute;
  content: "";
  background: url(method-bg.svg);
  width: 378px;
  height: 655px;
  top: 0;
  right: 0;
  z-index: 999;
  background-repeat: no-repeat;
}

/*=========================
HUMAN SECTION
=========================*/

.human-section {
  padding: 90px 0 80px;
  background: #fff;
}

/* .container {
  width: 90%;
  max-width: 1200px;
  margin: auto;
} */

.content {
  max-width: 760px;
  /* margin-left: 130px; */
}

.content h2 {
  font-family: "Anybody", sans-serif;
  font-size: 36px;
  font-weight: 600;
  color: #111;
  margin-bottom: 18px;
  text-transform: uppercase;
}

.content p {
  font-family: "Lato", sans-serif;
  font-size: 20px;
  line-height: 1.6;
  color: #575757;
}

/*=========================
BLACK SECTION
=========================*/

.vision-section {
  background: #202020;
  color: #fff;
  overflow: hidden;
}

.vision-container {
  position: relative;
  max-width: 1440px;
  margin: auto;
  padding: 80px 60px 30px;
  min-height: 560px;
}

.quote {
  position: absolute;

  font-family: "Lato", sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: #d9d9d9;
}

.quote.left {
  left: 60px;
  top: 60px;
}

.quote.right {
  right: 60px;
  top: 60px;
  text-align: right;
}

.vision-container h1 {
  font-family: "Anybody", sans-serif;
  font-size: 190px;
  font-weight: 700;
  line-height: 0.9;
  text-align: center;
  color: #f2f2f2;

  margin-top: 120px;
  margin-bottom: 80px;

  letter-spacing: -8px;
}

.footer-menu {
  display: flex;
  justify-content: center;
  gap: 35px;
  flex-wrap: wrap;

  list-style: none;
}

.footer-menu a {
  color: #d8d8d8;
  text-decoration: none;

  font-family: "Lato", sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 1px;

  transition: 0.3s;
}

.footer-menu a:hover {
  color: #fff;
}

/* ======================================================
   RESPONSIVE FIXES
   Add this at the END of style.css
======================================================*/

/* Large Desktop */
@media (max-width: 1400px) {
  .container {
    width: 92%;
  }

  .vision-container h1 {
    font-size: 150px;
  }
}

/* Laptop */
@media (max-width: 1200px) {
  .hero h1 {
    font-size: 54px;
  }

  .section-title,
  .section-heading,
  .method-content h2,
  .output h2 {
    font-size: 48px;
  }

  .section-content,
  .section-description {
    max-width: 100%;
  }

  .stats-wrapper {
    grid-template-columns: repeat(2, 1fr);
    gap: 40px;
  }

  .method-grid {
    grid-template-columns: 1fr;
    gap: 60px;
  }

  .method-output::after {
    display: none;
  }

  .vision-container {
    padding: 70px 40px;
  }

  .vision-container h1 {
    font-size: 120px;
    letter-spacing: -4px;
  }
}

/* Tablet */
@media (max-width: 991px) {
  /* .container {
    width: 92%;
  } */

  .header {
    padding: 18px 0;
    height: auto;
  }

  .header .container {
    flex-direction: column;
    gap: 20px;
  }

  nav ul {
    flex-wrap: wrap;
    justify-content: center;
  }

  .hero {
    padding-top: 30px;
  }

  .hero h1 {
    font-size: 46px;
  }

  .ship-area {
    height: 280px;
  }

  .ship {
    width: 420px;
  }

  .hero-bottom p {
    width: 100%;
    font-size: 20px;
  }

  .section-title,
  .section-heading,
  .method-content h2,
  .output h2 {
    font-size: 42px;
  }

  .section-content p,
  .section-description,
  .method-content p,
  .output > p,
  .content p {
    font-size: 20px;
  }

  .stats-wrapper {
    grid-template-columns: repeat(2, 1fr);
  }

  .output-grid {
    grid-template-columns: 1fr;
  }

  .quote {
    position: static;
    display: block;
    text-align: center;
    margin-bottom: 20px;
  }

  .quote.right {
    text-align: center;
  }

  .vision-container {
    min-height: auto;
    padding: 60px 30px;
  }

  .vision-container h1 {
    margin: 50px 0;
    font-size: 90px;
  }

  .footer-menu {
    gap: 18px;
  }
}

/* Mobile */
@media (max-width: 767px) {
  section {
    overflow: hidden;
  }

  .hero h1 {
    font-size: 34px;
  }

  .tagline {
    font-size: 11px;
  }

  .ship-area {
    height: 220px;
  }

  .ship {
    width: 100%;
    max-width: 320px;
    bottom: -10px;
  }

  .hero-bottom {
    margin-top: 20px;
  }

  .hero-bottom p {
    font-size: 17px;
    line-height: 1.6;
  }

  .hero-bottom img {
    margin-top: 40px;
  }

  .why-section,
  .data-section,
  .method-output,
  .human-section {
    padding: 60px 0;
  }

  .section-title,
  .section-heading,
  .method-content h2,
  .output h2,
  .content h2 {
    font-size: 32px;
  }

  .section-content p,
  .section-description,
  .method-content p,
  .output > p,
  .content p {
    font-size: 18px;
    line-height: 1.7;
  }

  .stats-wrapper {
    grid-template-columns: 1fr;
    gap: 30px;
  }

  .line {
    width: 100%;
  }

  .stat-box h3 {
    font-size: 30px;
  }

  .output-grid {
    gap: 20px;
  }

  .card {
    border-radius: 10px;
  }

  .card img {
    width: 100%;
  }

  .vision-container {
    padding: 40px 20px;
  }

  .vision-container h1 {
    font-size: 58px;
    letter-spacing: -2px;
    margin: 30px 0;
  }

  .footer-menu {
    flex-direction: column;
    align-items: center;
    gap: 12px;
  }
}

/* Small Mobile */
@media (max-width: 480px) {
  .container {
    width: 94%;
  }

  .hero h1 {
    font-size: 28px;
  }

  .section-title,
  .section-heading,
  .method-content h2,
  .output h2,
  .content h2 {
    font-size: 28px;
  }

  .section-content p,
  .section-description,
  .method-content p,
  .output > p,
  .content p,
  .hero-bottom p {
    font-size: 16px;
  }

  .ship-area {
    height: 110px;
  }

  .ship {
    max-width: 100%;
  }

  .vision-container h1 {
    font-size: 42px;
  }

  .logo img {
    height: 42px;
  }

  nav ul {
    gap: 14px;
  }

  .btn {
    padding: 10px 18px;
  }
}
.hero h1 {
  font-size: clamp(34px, 6vw, 64px);
}

.mobi-img {
  display: none !important;
}
.desk-img {
  display: block;
}

.output-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 30px;
  margin-top: 60px;
}

.output-card {
  background: #fff;
  border: 1px solid #e8e8e8;
  border-radius: 18px;
  padding: 35px;
  transition: 0.3s;
}

.output-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 25px;
}

.card-header h3 {
  font-family: "Anybody", sans-serif;
  font-size: 30px;
  font-weight: 600;
  color: #1b1a18;
}

.card-header span {
  font-family: "Lato", sans-serif;
  font-size: 22px;
  color: #c6c2bc;
}

.card-text {
  font-family: "Lato", sans-serif;
  font-size: 20px;
  line-height: 1.6;
  color: #575757;
  margin-bottom: 35px;
}

.card-placeholder {
  border-top: 1px solid #ececec;
  padding-top: 25px;
}

.card-placeholder img {
  width: 100%;
  display: block;
}

@media (max-width: 991px) {
  .output-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 767px) {
  .output-card {
    padding: 25px;
  }

  .card-header h3 {
    font-size: 24px;
  }

  .card-text {
    font-size: 18px;
  }

  .card-header span {
    font-size: 18px;
  }
}
.output-grid-2 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 30px;
  margin-top: 30px;
}

.output-card {
  border: 1px solid #e8e8e8;
  border-radius: 20px;
  padding: 40px;
  background: #fff;
}

.card-header {
  display: flex;
  justify-content: space-between;
  margin-bottom: 20px;
}

.card-header h3 {
  font-family: "Anybody", sans-serif;
  font-size: 34px;
  font-weight: 600;
}

.card-header span {
  color: #c6c2bc;
  font-size: 22px;
}

.card-text {
  font-family: "Lato", sans-serif;
  font-size: 22px;
  color: #575757;
  line-height: 1.6;
  margin-bottom: 30px;
}

.card-image {
  border-top: 1px solid #ececec;
  padding-top: 30px;
}

.card-image img {
  width: 100%;
}

hr {
  border: none;
  border-top: 1px solid #ececec;
  margin: 30px 0;
}

.label {
  color: #999;
  letter-spacing: 2px;
  font-size: 14px;
  display: block;
  margin-bottom: 10px;
}

.green {
  color: #00a86b;
  font-size: 64px;
  font-family: "Anybody", sans-serif;
  margin-bottom: 10px;
}

.trend h3 {
  font-size: 48px;
  font-family: "Anybody", sans-serif;
}

.green-text {
  color: #00a86b;
  font-size: 22px;
  margin-top: 10px;
}

/* Fleet */

.fleet-card {
  grid-column: 1/-1;

  display: grid;
  grid-template-columns: 70% 30%;
  align-items: center;
  gap: 40px;
}

.fleet-content {
  padding-right: 20px;
}

.fleet-image img {
  width: 100%;
}
@media (max-width: 991px) {
  .output-grid-2 {
    grid-template-columns: 1fr;
  }

  .fleet-card {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 768px) {
  .output-card {
    padding: 25px;
  }

  .card-header h3 {
    font-size: 26px;
  }

  .card-text {
    font-size: 18px;
  }

  .green {
    font-size: 46px;
  }

  .trend h3 {
    font-size: 34px;
  }
}

@media screen and (max-width: 767px) {
  .mobi-img {
    display: block !important;
  }
  .desk-img {
    display: none !important;
  }
  .sea-lines {
    bottom: -39px;
  }
  .demo-content {
    display: block !important;
    margin: auto;
    text-align: center;
  }
  .demo-content p {
    margin-bottom: 10px;
  }
}

@media screen and (min-width: 1400px) {
  .vision-container h1 {
    font-size: 150px;
  }
}

@media screen and (min-width: 1500px) {
  .method-grid {
    grid-template-columns: 100% 0%;
  }
  .method-output::after {
    top: -4%;
  }
}

@media screen and (min-width: 1024px) {
  .ship-area {
    height: 500px;
    background-image: url("./banner-main.png");
    background-position: center;
    object-fit: cover;
    background-size: 100%;
    background-repeat: no-repeat;
  }
  .ship {
    display: none;
  }
  .hero-bottom img {
    border: 1px solid #000;
  }
}

/*====================================
Demo Banner
=====================================*/

.demo-banner {
  padding: 30px 0;
  background: #fff;
}

.demo-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 40px;
}

.demo-content p {
  max-width: 760px;
  font-family: "Lato", sans-serif;
  font-size: 22px;
  font-weight: 400;
  line-height: 1.35;
  color: #1b1a18;
}

.demo-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  min-width: 160px;
  height: 56px;

  background: #111;
  color: #fff;

  text-decoration: none;
  font-family: "Lato", sans-serif;
  font-size: 16px;
  font-weight: 600;

  border-radius: 6px;

  transition: 0.3s ease;
}

.demo-btn:hover {
  background: #333;
}

/* form */
/*==========================
Request Access Section
==========================*/

.request-access-section{
    padding:0px 0 80px;
    background:#ffffff;

}

.request-box{

    max-width:760px;
    border:1px solid #DDDDDD;
    border-radius:24px;
    padding:40px;
    background:#fff;

}

.request-title{

    display:block;
    margin-bottom:35px;
    font-family:"Lato",sans-serif;
    font-size:14px;
    font-weight:500;
    text-transform:uppercase;
    color:rgb(154, 151, 143);

}

.form-group{

    margin-bottom:32px;

}

.form-group label{

    display:block;
    margin-bottom:12px;
    font-family:"Anybody",sans-serif;
    font-size:18px;
    font-weight:500;
    color:#1B1A18;

}

.form-group input,
.form-group textarea{
    width:100%;
    border:1px solid #D9D9D9;
    border-radius:12px;
    padding:18px 20px;
    font-family:"Lato",sans-serif;
    font-size:18px;
    color:#1B1A18;

    outline:none;
    transition:.3s;

}

.form-group input{

    height:64px;

}

.form-group textarea{

    resize:vertical;
    min-height:160px;

}

.form-group input::placeholder,
.form-group textarea::placeholder{

    color:#B9B1A9;

}

.form-group input:focus,
.form-group textarea:focus{

    border-color:#000;

}

.request-btn{

    margin-top:10px;
    width:185px;
    height:56px;
    background:#1F1E1C;
    color:#fff;
    border:none;
    border-radius:10px;
    font-family:"Anybody",sans-serif;
    font-size:18px;
    font-weight:500;
    cursor:pointer;
    transition:.3s;

}

.request-btn:hover{

    background:#000;

}

.form-note{

    margin-top:35px;

}

.form-note p{
    font-family:"Lato",sans-serif;
    font-size:18px;
    line-height:1.6;
    color:#8B8B8B;
}

/*==========================
Responsive
==========================*/

@media (max-width:992px){

.request-box{

    padding:35px;

}

.form-group label{

    font-size:20px;

}

.form-group input,
.form-group textarea{

    font-size:20px;

}

}

@media (max-width:768px){

.request-access-section{

    padding:0px 0;

}

.request-box{

    padding:25px;
    border-radius:18px;

}

.request-title{

    font-size:14px;

}

.form-group{

    margin-bottom:24px;

}

.form-group label{

    font-size:18px;

}

.form-group input,
.form-group textarea{

    height:56px;
    font-size:16px;
    padding:15px 18px;

}

.form-group textarea{

    height:auto;
    min-height:140px;

}

.request-btn{

    width:100%;
    height:54px;
    font-size:18px;

}

.form-note p{

    font-size:16px;

}

}

/*==========================
Contact Section
==========================*/

.contact-section{
    padding:30px 0 120px;
    background:#fff;

}

.contact-section .container{

    max-width:1200px;
    margin:0 auto;
    padding:0 20px;

}

.contact-label{

    display:block;

    margin-bottom:35px;

    font-family:"Lato",sans-serif;
    font-size:18px;
    font-weight:400;
    letter-spacing:4px;
    text-transform:uppercase;

    color:rgb(154, 151, 143);

}

.contact-email{

    margin-bottom:25px;

    font-family:"Anybody",sans-serif;
    font-size:20px;
    font-weight:500;
    line-height:1.2;

}

.contact-email a{

    color:#006E80;
    text-decoration:underline;
    text-underline-offset:8px;
    text-decoration-thickness:2px;

    transition:.3s;

}

.contact-email a:hover{

    color:#004E5C;

}

.contact-email span{

    color:#1B1A18;

}

.contact-note{

    font-family:"Lato",sans-serif;
    font-size:18px;
    font-style:italic;
    line-height:1.5;
    color:#8A8A8A;

}

.bann-hgt{min-height:300px;display: flex;border-bottom: 1px solid #ccc;padding:0;}


@media (max-width:767px){

    .header .container{
        display:flex;
        flex-direction:row;
        justify-content:space-between;
        align-items:center;
        position:relative;
    }

    .menu-toggle{
        display:block;
        background:none;
        border:none;
        font-size:30px;
        cursor:pointer;
        z-index:1001;
    }

    .nav-menu{
        display:none;
        position:absolute;
        top: 64px;
        left: -10px;
        width: 100vw;        
        background:#fff;
        border-top:1px solid #ddd;
        box-shadow:0 10px 30px rgba(0,0,0,.08);
        z-index:999;
    }

    .nav-menu.active{
        display:block;
    }

    .nav-menu li{
        list-style:none;
        border-bottom:1px solid #eee;
    }

    .nav-menu li a{
        display:block;
        padding:18px 20px;
    }

    .nav-menu .btn{
        display:block;
        margin:20px;
        text-align:center;
    }
}

@media screen and (min-width:768px)
{
button.menu-toggle {display: none;}

}

/* ==========================
Footer Bottom
========================== */

.footer-bottom{
    margin-top:60px;
    padding-top:30px;
    border-top:1px solid rgba(255,255,255,.15);

    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:30px;
}

.footer-copy{
    flex:1;
    font-family:"Lato",sans-serif;
    font-size:13px;
    color:#bdbdbd;
}

.footer-menu{
    flex:2;
    display:flex;
    justify-content:center;
    align-items:center;
    gap:20px;
    list-style:none;
    margin:0;
    padding:0;
}

.footer-menu a{
    color:#d8d8d8;
    text-decoration:none;
    font-family:"Lato",sans-serif;
    font-size:12px;
    transition:.3s;
}

.footer-menu a:hover{
    color:#fff;
}

.footer-social{
    flex:1;
    display:flex;
    justify-content:flex-end;
}

.linkedin-btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:12px 22px;
    border:1px solid rgba(255,255,255,.3);
    border-radius:6px;
    color:#fff;
    text-decoration:none;
    font-family:"Lato",sans-serif;
    font-size:13px;
    transition:.3s;
}

.linkedin-btn:hover{
    background:#fff;
    color:#202020;
}

/* Mobile */

@media (max-width:768px){

    .footer-bottom{
        display:flex;
        flex-direction:column;
        align-items:center;
        text-align:center;
        gap:20px;    
}

    .footer-copy,
    .footer-social{
        justify-content:center;
    }

    .footer-menu{
 order:1;
        flex-direction:column;
        gap:5px;
    }
/* LinkedIn button below menu */
    .footer-social{
        order:2;
        justify-content:center;
    }

    /* Copyright at the very bottom */
    .footer-copy{
        order:3;
        text-align:center;
    }
.footer-bottom {margin-top: 30px;}


}