html {
  scroll-behavior: smooth;
}

:root {
  --azul_tr_1: #003eab;
  --azul_tr_2: #003ca6;
  --azul_tr_3: #071d4a;
  --rojo_tr_1: #d34141;
  --rojo_tr_2: #ea0a2a;
  --rojo_tr_3: #c80000;
  --otro: #414247;
  --otro2: #7a7a7a;

  /* Variables de Bootstrap 5.3 */
  --bs-heading-color: #ea0a2a !important;
}

img {
  max-width: 100%;
  display: block;
}


/** Header **/
.header-full {
  /*background-image: url(../img/pexels-pixabay-262353.jpg);*/
  height: 100vh;
  width: 100%;
  /* display: flex;
    align-items: center;*/
  overflow: hidden;
}

.header-video {
  height: 100vh;
  width: 100%;
  overflow: hidden;
  position: absolute;
  top: 0;
  left: 0;
  background-size: cover;
  z-index: -9999;
}

.header-video video {
  min-height: 100%;
  min-width: 100%;
  background-size: cover;
}

header .overlay {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  background-color: var(--azul_tr_3);
  opacity: 0.4;
  z-index: -9998;
}

.header-content {
  display: flex;
  justify-content: center;
  align-self: center;
}

.header-content img {
  width: 350px;
  height: 300px;
  opacity: 0.85;
}

.bg-img-header {
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  height: 550px;
  filter: drop-shadow(.5);
}

.bg-img-header__history {
  background-image: url(../img/wheelhouse-g65cf653f6_1280.jpg);
}

.bg-img-header__ports {
  background-image: url(../img/francisco-g1511ec11e_1280.jpg);
}

.bg-img-header__contact {
  background-image: url(../img/rope-g43eb06bf3_1280.jpg);
}

.bg-img-header__services {
  background-image: url(../img/pexels-tom-fisk-3856433_mediano.jpg);
}

/** Navbar **/

nav a.bg-a {
  color: var(--azul_tr_2);
}

nav a.bg-a:hover {
  color: #fff;
  background-color: var(--rojo_tr_2);
}

nav a.bg-a:active {
  color: #fff;
  background-color: var(--azul_tr_2);
}


/** Footer **/
.footer-full {
  background-color: var(--azul_tr_2);
}


/** Text Content **/
h1 {
  color: var(--azul_tr_2);
  border-bottom: 4px solid var(--rojo_tr_2);
}

h5 {
  color: var(--rojo_tr_2) !important;
}


/** Buttons **/
.btn-design {
  color: #fff;
  background-color: var(--azul_tr_2);
}

.btn-design:hover {
  color: #fff;
  background-color: var(--rojo_tr_2);
}

/** Form **/
.bg-contact {
  background-image: url(../img/pexels-pixabay-262353.jpg);
  background-repeat: no-repeat;
  background-size: cover;
}

.bg-contact__form {
  background-color: rgba(255 255 255 / 0.5);
    /*background-color: rgba(224, 85, 149, 0.5);*/
}

/** Home Slide **/
.slide-rigth-carousel-home {
  background-image: linear-gradient(to right, transparent 50%, #003ca6 50%);
}

.slide-left-carousel-home {
  background-image: linear-gradient(to left, transparent 50%, #003ca6 50%);
}

/** Contact Icon **/
.icon-style {
  color: var(--rojo_tr_2);
  font-size: 5rem;
}

.bg-img-section {
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  max-width: 100%;
  display: block;
}

.bg-soft-gray {
  background-color: rgba(96, 150, 243 / 0.5);
}

.bg-grey {
  --bs-bg-opacity: 0.2;
  background-color: rgba(var(--bs-secondary-rgb),var(--bs-bg-opacity)) !important;
}


.bg-img-section-contact {
  background-image: url(../img/ships-grey-black.jpg);
}

.bg-card-port {
   background-color: rgba(255 255 255 / 0.60);
}

.div-border-radius {
  border-radius: .4rem;
}

.btn-scrolltop {
  position: fixed;
  bottom: 20px;
  right: 20px;
  padding: 10px 15px;
  background-color: var(--rojo_tr_2);
  opacity: .85;
  color: #fff;
  border: 1px solid var(--rojo_tr_2);
  border-radius: 100%;
  cursor: pointer;
  transform: translateY(100px);
  transition: 0.3s;
}

.btn-scrolltop-on {
  transform: translateY(0);
}

.bg-green {
  background-color: #39cc65;
  color: #fff;
  transform: scale(1);
}

a.bg-green:hover {
  background-color: #39cc4d;
  color: #fff;
  transform: scale(1.1);
}

i.icon-scale {
  color: #003ca6;
}

i.icon-scale:hover {
  color: #ea0a2a;
  transform: scale(2);
}

img.img-effect:hover {
  filter: opacity(0.5);
}

/*********************************************************************************************/
/* Modificaciones al CSS de Bootstrap 5.3 */
.bg-light {
  --bs-bg-opacity: 0.75;
}