/* ########################################################### */
/* #################  HEADER / NAVIGATION  ################# */
/* ########################################################### */

/* .header {
  position: fixed;
  width: 100vw;
  background-color: #fff;
} */

/* .header {
  height: 7.6rem;
} */

.navigation {
  display: flex;
  justify-content: space-between;
  height: 7.6rem;
  /* padding: 0 2rem; */
}

.navigation-list {
  display: flex;
  align-items: center;
  gap: 2.4rem;
  list-style: none;
}

.navigation-item {
  /* border: 1px solid cornflowerblue; */
}

.navigation-item-link:link,
.navigation-item-link:visited {
  padding: 6px 10px;
  color: #4a5568;
  font-weight: 600;
  font-size: 1.8rem;
  border-radius: 6px;
  /* letter-spacing: -0.5px; */
  /* letter-spacing: -0.2px; */
}

.logo {
  width: 9rem;
  height: 100%;
}

/* ############### */
/* ### MOBILE NAVIGATION ## */
/* ##############*/

.btn-mobile-nav {
  border: none;
  background: none;
  cursor: pointer;
  display: none;
}

.nav-icon {
  fill: #333;
  width: 4.8rem;
  height: 4.8rem;
}

.nav-icon--open {
  display: block;
  fill: #333;
}

.nav-icon--close {
  display: none;
  fill: #fff;
  stroke: #fff;
  stroke-width: 0.4px;
}



/* ########################################################### */
/* #################  SECTION HERO  ################# */
/* ########################################################### */

.section-hero {
  background-color: #eaf3fa66;
  box-shadow: inset 0 0 0.1rem 0 rgba(0, 0, 0, 0.01);

  /* padding: 8rem 0 9.6rem 0; */
  /* height: 90vh; */
}

.hero {
  display: flex;
  gap: 9rem;
  display: grid;
  grid-template-columns: 1fr 1fr;
  /* TODO Change this */
  /* padding: 0 2rem; */
  align-items: center;
  /* justify-content: space-between; */
  justify-content: center;
  gap: 7rem;
  /* padding: 7rem 1.2rem 5.6rem 1.2rem; */
  padding-top: 7rem;
  padding-bottom: 5.6rem;
  /* padding: 6.4rem 1.2rem 6.4rem 1.2rem; */
}

/* ###################################### */
/* ####  SECTION HERO ==> LEFT #### */
/* ###################################### */

.left {
  /* margin-right: 4.8rem; */
  flex-basis: 50%;
  align-self: center;
}

.delivered-products {
  display: inline-flex;
  align-items: center;
  gap: 1.6rem;
  margin-top: 3.2rem;
}

.delivered-imgs {
  display: flex;
}

.delivered-imgs img:not(:last-child) {
  margin-right: -1.6rem;
}

.delivered-imgs img {
  width: 4.8rem;
  height: 4.8rem;
  border-radius: 50%;
  border: 3px solid #eaf3fa;
}

.delivered-text {
  font-weight: 700;
  font-size: 1.8rem;
}

.delivered-text span {
  font-weight: 800;
  /* color: #3182ce; */
  color: #1d4e7c;
}

/* ###################################### */
/* ####  SECTION HERO ==>RIGHT #### */
/* ###################################### */

.right {
  text-align: right;
  align-self: flex-end;
  /* border: 4px solid orangered; */
}

.hero-img-box {
  position: relative;
}

.hero-img--bg {
  width: 85%;
  /* margin-bottom: -8.6rem; */
}

.hero-img--small-plane {
  width: 5.9rem;
  position: absolute;
  top: 45%;
  left: 0;
}

/* ########################################################### */
/* #################  SECTION SERVICES  ################# */
/* ########################################################### */

.section-services {
  /* margin: 12.8rem 0 5.6rem 0; */
  margin: 0 0 12.8rem 0;
  padding-top: 12.8rem;
}

.services-content {
  max-width: 90%;
  /* justify-self: flex-end; */
}

.services-paragraph {
  font-size: 1.8rem;
  line-height: 1.75;
  width: 96%;
}

.separator {
  display: block;
  margin-bottom: 1.6rem;
}

/* ########################################################### */
/* #################  SECTION SERVICES CARD ################# */
/* ########################################################### */

.section-services-card {
  background-color: #eaf3fa66;
  padding: 9.6rem 0;
  box-shadow: inset 0 0 1.2rem 0 rgba(0, 0, 0, 0.01);
}

/* .services-card {
  gap: 4.4rem;
} */

.card-icon {
  fill: #3182ce;
  width: 4.8rem;
  height: 4.8rem;
  margin-bottom: 2.8rem;
}

.card-title {
  font-size: 2rem;
  font-weight: 700;
  color: #3182ce;
  margin-bottom: 1.2rem;
  letter-spacing: 0.3px;
}

.card-text {
  font-size: 1.6rem;
  line-height: 1.3;
  letter-spacing: -0.5px;
}

/* ########################################################### */
/* #################  SECTION FEATURES ==>CONSULTATION ################# */
/* ########################################################### */

.section-consultation {
  margin: 12.8rem 0 9.6rem 0;
  /* margin-top: 18.4rem; */
}

.consultation-img {
  width: 100%;
}

/* ############################### */
/* ####  SECTION ONLINE SERVICES ==> CARDS ## */
/* ############################### */
/* 
.card{
  -moz-perspective: 150rem;
  perspective: 150rem;
  position: relative;
  height: 50rem;
}

.card__side{
  height: 50rem;  
  transition: all .8s ease;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  backface-visibility: hidden;
  border-radius: 3px;
  box-shadow: 0 1.5rem 4rem rgba(0, 0, 0, 0.15);
  overflow: hidden;
}

.card__side--front{
  background-color: white;
}

.card__side--back{
  transform: rotateY(180deg);
}

.card__side--back--1{
  background: linear-gradient(to right bottom, #ffb900, #ff7730);
  background: line;
}

.card:hover .card__side--front{
  transform: rotateY(-180deg);
}

.card:hover .card__side--back{
  transform: rotateY(0);
}

.card__picture{
  background-size: cover;
  height: 23rem;
  background-blend-mode: screen;
  -webkit-clip-path: polygon(0 0, 100% 0, 100% 85%, 0 100%);
  clip-path: polygon(0 0, 100% 0, 100% 85%, 0 100%);
}

.card__picture--1{
  background-image: linear-gradient(to right bottom, #ffb900, #ff7730), url(./Assets/boat.jpg);
}

.card__picture--2{

}

.card__picture--3{

}

.card__heading{
  
} */


/* ###################################### */
/* ####  SECTION CONSULTATION ==> BADGE #### */
/* ###################################### */

.badges {
  list-style: none;
  gap: 5.2rem;
}

.badge {
  display: flex;
  align-items: flex-start;
  gap: 1.8rem;
}

.badge-title {
  line-height: 1.25;
  font-size: 1.8rem;
  font-weight: 500;
  letter-spacing: -0.3px;
  color: #343a40;
  margin-top: 3px;
  margin-bottom: 1.2rem;
}

/* This is to fix a problem in small layouts which puts the text of adjacent card in 2 lines and breaks layout */
/* .badge:first-child .badge-title::after {
  content: " douaniers";
} */

.badge-description {
  font-size: 1.6rem;
  line-height: 1.3;
  letter-spacing: -0.7px;
}

.badge-icon-box {
  /* height: 3.3rem;
  width: 3.3rem; */
}

.badge-icon {
  height: 3.2rem;
  width: 3.3rem;
}

/* ########################################################### */
/* #################  SECTION FEATURES ==> OPERATIONS (IMPORT/EXPORT) ######## */
/* ########################################################### */

.section-operations {
  background-color: #eaf3fa66;
  /* margin: 12.8rem 0 9.6rem 0; */
  margin: 12.8rem 0 2.1rem 0;
  padding-top: 9.6rem;
  /* padding-bottom: 3.2rem;
  padding-bottom: 5.2rem; */
  padding-bottom: 7.2rem;
}

.operations-img {
  width: 85%;
  width: 90%;
  justify-self: center;
}

/* ########################################################### */
/* #################  SECTION CONTACTUS  ################# */
/* ########################################################### */

.section-contactus {
  /*  */
  padding-top: 6.4rem;
  margin-bottom: 12.8rem;
}

.contactus {
  /* background: linear-gradient(
      105deg,
      rgba(255, 255, 255, 0.9) 0%,
      rgba(255, 255, 255, 0.9) 50%,
      transparent 50.2%
    ),
    linear-gradient(105deg, #3182ce44 0%, #6fa8dd6b 50%, #eaf3fa21 50%),
    url("./Assets/train.jpg"); */
  background: linear-gradient(
      105deg,
      rgba(255, 255, 255, 0.9) 0%,
      rgba(255, 255, 255, 0.9) 50%,
      transparent 50.2%
    ),
    linear-gradient(105deg, #3182ce44 0%, #6fa8dd6b 50%, #eaf3fa21 50%),
    url("../Assets/boat.jpg");
  /* background: linear-gradient(
      105deg,
      rgba(255, 255, 255, 0.9) 0%,
      rgba(255, 255, 255, 0.9) 50%,
      transparent 80.2%
    ),
    linear-gradient(105deg, #3182ce44 0%, #6fa8dd6b 50%, #eaf3fa21 50%),
    url("./Assets/train.jpg"); */
  background-size: cover;
  background-position: center;
  overflow: hidden;
  border-radius: 3px;
  /* box-shadow: 0 1.5rem 8rem 0.2rem rgba(0, 0, 0, 0.05); */
  box-shadow: 4px 1rem 3rem 1px rgba(0, 0, 0, 0.05);
  /* height: 55rem; */
}

.contact-form--heading {
  padding: 1.2rem 0;
  font-size: 3.5rem;
  text-transform: uppercase;
  font-weight: 700;
  /* text-align: center; */
  letter-spacing: 2px;
  color: #3182ce;
  color: #2c75b9;
}

.radio-buttons {
  width: 90%;
  display: flex;
  justify-content: space-between;
}

.contact-form {
  padding: 6rem;
}

.contact {
}



/* ################### */
/* ##### SERVICES CARD ####### */
/* ################### */
.section-online_services-cards{
  padding-top: 9.6rem;
}

/* ########################################################### */
/* #################  FOOTER ################# */
/* ########################################################### */

/* ############################### */
/* ####  SECTION GENERAL STYLING ## */
/* ############################### */

.footer {
  padding: 12rem 0 9.6rem 0;
  /* border-top: 1px solid #eee; */
  box-shadow: inset 0 0 1.6rem rgba(0, 0, 0, 0.03);
  background-color: #eaf3fa66;
}

.footer-heading {
  font-size: 1.8rem;
  font-weight: 600;
  color: #194167;
  margin-bottom: 2.4rem;
  margin-bottom: 3.2rem;
}

.footer .grid {
  gap: 4.4rem;
}

/* ############################################## */
/* ####  SECTION Logo / Social Links / copyright ## */
/* ############################################## */

.logo-col {
  /* align-self: end; */
  display: flex;
  flex-direction: column;
  /* justify-content: space-between; */
}

.footer .logo {
  height: auto;
  margin-bottom: 2.4rem;
}

/* First, let's improve those pages */
.social-links {
  display: none;
  list-style: none;
  display: flex;
  gap: 2.4rem;
}

.social-icon {
  width: 2.4rem;
  height: 2.4rem;
}

.copyright {
  margin-top: auto;
  max-width: 70%;
  letter-spacing: 0.4px;
  font-size: 1.4rem;
  color: #767676;
  line-height: 1.4;
}

/* ################################ */
/* ####  SECTION Contact INFOS #### */
/* ################################ */

.contact-col .footer-heading {
  /* Trying to align heading with text rather than icons */
  /* padding-left: 3.6rem; */
}

.contacts {
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
}

.contact-info {
  display: flex;
  align-items: center;
  gap: 1.2rem;
}

.contact-info p {
  letter-spacing: 0.2px;
  line-height: 1.6;
}

.contact-icon {
  width: 2.4rem;
  height: 2.4rem;
  fill: #3182ce;
  /* float: left;
  clear: left; */
}

.location-icon {
  align-self: flex-start;
  flex-shrink: 0;
}

.footer .contact-info a {
  color: #1d4e7c;
  /* border-bottom: 2px dotted #3182ce;
  padding-bottom: 3px; */
  font-weight: 500;
}

.contact-info--emails {
  align-items: flex-start;
}

.emails {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* ################################# */
/* ####  SECTION FOOTER NAVIGATION ## */
/* ################################# */

.menu-col {
  /* justify-self: end; */
}

.footer-nav {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 2.4rem;
}

.footer-nav__link:link,
.footer-nav__link:visited {
  text-decoration: none;
  font-size: 1.8rem;
  color: #555;
  color: #1d4e7c;
  /* color: #050d15; */
  transition: color 0.3s;
}

.footer-nav__link:hover,
.footer-nav__link:active {
  color: #050d15;
}

/* .contact-phones {
  display: flex;
  gap: 1rem;
} */

/* .contact-phones a:last-child {
  position: relative;
  margin-left: 6px;
}

.contact-phones a:last-child::before {
  content: "/";
  position: absolute;
  left: -8px;
  height: 2rem;
} */

/* ########################################################### */
/* .footer {
  height: 30rem;
  background-color: #194167;
}

.footer--inner {
  padding: 4.8rem 2.4rem;
} */

/* ###################################### */
/* ####  SECTION MENU #### */
/* ###################################### */
/* 
.footer-menu__heading {
  font-size: 2.4rem;
  display: inline;
  color: #fff;
}

.footer-menu {
  list-style: none;
  display: flex;
  gap: 1.8rem;
  justify-self: flex-start;
  padding-top: 1.2rem;
  border-top: 1.8px dashed #eaf3fa;
}

.footer__item:link,
.footer__item:visited {
  color: #eaf3fa;
  text-decoration: none;
  font-size: 2rem;
  font-weight: 600;
}

.footer__item:hover,
.footer__item:active {
  color: #fff;
  transition: all 0.3s;
}

.footer__item:hover::after,
.footer__item:active::after {
  content: "";
  display: block;
  width: 100%;
  height: 4px;
  background-color: #6fa8dd6b;
  border-radius: 6px;
  margin-top: 4px;
}

.copyright {
  font-size: 1.8rem;
  color: #eaf3fa;
  align-self: flex-end;
  justify-self: flex-end;
  letter-spacing: 1px;
  padding-top: 1.2rem;
  border-top: 1.8px dashed #eaf3fa;
}

.copyright a {
  color: #eaf3fa;
  font-size: 2rem;
  letter-spacing: 1.2px;
  padding-left: 4px;
  text-decoration: none;
} */ ;