/* =========================================================
   SEA LICENSING — SERVICES V5
   REAL PHOTOGRAPHIC CARD TREATMENT
   ========================================================= */


/* =========================================================
   SERVICES — CARD FOUNDATION
   ========================================================= */

.sv5 .sv5-card{
  background:
    linear-gradient(
      145deg,
      rgba(255,255,255,.99) 0%,
      rgba(249,252,254,.98) 100%
    ) !important;

  isolation:isolate !important;
}


/*
   Very soft cyan light behind the photograph.
*/
.sv5 .sv5-card::before{
  content:"" !important;

  position:absolute !important;
  inset:0 !important;

  z-index:-2 !important;

  pointer-events:none !important;

  background:
    radial-gradient(
      circle at 93% 76%,
      rgba(49,180,224,.13),
      transparent 39%
    ),

    linear-gradient(
      135deg,
      transparent 45%,
      rgba(82,188,225,.055) 100%
    ) !important;
}


/*
   Real photographic image.
*/
.sv5 .sv5-card::after{
  content:"" !important;

  position:absolute !important;

  top:auto !important;
  left:auto !important;

  right:-2% !important;
  bottom:-2% !important;

  width:61% !important;
  height:74% !important;

  z-index:-1 !important;

  pointer-events:none !important;

  background-repeat:no-repeat !important;

  background-position:
    right bottom !important;

  background-size:
    cover !important;

  opacity:.38 !important;

  border-radius:
    38% 0 8px 0 !important;

  transform:
    scale(1.01) !important;

  transform-origin:
    right bottom !important;

  filter:
    saturate(.90)
    contrast(.96) !important;

  /*
     Photograph dissolves gently into the white text area.
  */
  -webkit-mask-image:
    linear-gradient(
      90deg,
      transparent 0%,
      rgba(0,0,0,.10) 11%,
      rgba(0,0,0,.48) 32%,
      #000 63%,
      #000 100%
    ) !important;

  mask-image:
    linear-gradient(
      90deg,
      transparent 0%,
      rgba(0,0,0,.10) 11%,
      rgba(0,0,0,.48) 32%,
      #000 63%,
      #000 100%
    ) !important;

  transition:
    transform .50s cubic-bezier(.22,1,.36,1),
    opacity .40s ease,
    filter .40s ease !important;
}


/* ---------------------------------------------------------
   01 — Vessel Registration
   --------------------------------------------------------- */

.sv5 .sv5-card.vessel::after{
  background-image:
    url("/assets/images/services/cards-photo/01-vessel-registration.jpg") !important;

  background-position:
    61% center !important;
}


/* ---------------------------------------------------------
   02 — Surveys & Certification
   --------------------------------------------------------- */

.sv5 .sv5-card.survey::after{
  background-image:
    url("/assets/images/services/cards-photo/02-surveys-certification.jpg") !important;

  background-position:
    center center !important;
}


/* ---------------------------------------------------------
   03 — Seafarer Licensing
   --------------------------------------------------------- */

.sv5 .sv5-card.licensing::after{
  background-image:
    url("/assets/images/services/cards-photo/03-seafarer-licensing.jpg") !important;

  background-position:
    center center !important;
}


/* ---------------------------------------------------------
   04 — Crew & Manning
   --------------------------------------------------------- */

.sv5 .sv5-card.crew::after{
  background-image:
    url("/assets/images/services/cards-photo/04-crew-manning.jpg") !important;

  background-position:
    center center !important;
}


/* ---------------------------------------------------------
   05 — Maritime Training
   --------------------------------------------------------- */

.sv5 .sv5-card.training::after{
  background-image:
    url("/assets/images/services/cards-photo/05-maritime-training.jpg") !important;

  background-position:
    58% center !important;
}


/* ---------------------------------------------------------
   06 — Advisory & Compliance
   --------------------------------------------------------- */

.sv5 .sv5-card.advisory::after{
  background-image:
    url("/assets/images/services/cards-photo/06-advisory-compliance.jpg") !important;

  background-position:
    center center !important;
}


/* ---------------------------------------------------------
   07 — Offshore Companies Formation
   --------------------------------------------------------- */

.sv5 .sv5-card.offshore::after{
  background-image:
    url("/assets/images/services/cards-photo/07-offshore-companies.jpg") !important;

  background-position:
    center center !important;
}


/* =========================================================
   SERVICES CARD TEXT
   ========================================================= */

.sv5 .sv5-card h3{
  max-width:
    205px !important;

  position:relative !important;

  z-index:4 !important;
}


.sv5 .sv5-card p{
  max-width:
    190px !important;

  position:relative !important;

  z-index:4 !important;
}


.sv5 .sv5-num,
.sv5 .sv5-card-link{
  position:relative !important;

  z-index:4 !important;
}


.sv5 .sv5-card-link{
  position:absolute !important;
}


/* =========================================================
   SERVICES HOVER
   ========================================================= */

.sv5 .sv5-card:hover::after{
  opacity:.54 !important;

  transform:
    scale(1.065)
    translate3d(-3px,-2px,0) !important;

  filter:
    saturate(1.04)
    contrast(1.02) !important;
}


.sv5 .sv5-card:hover{
  background:
    linear-gradient(
      145deg,
      #ffffff 0%,
      #f7fcfe 100%
    ) !important;
}


/*
   Small cyan highlight along upper edge.
*/
.sv5 .sv5-card:hover{
  border-top-color:
    rgba(25,177,224,.63) !important;
}



/* =========================================================
   DIGITAL CARDS — PHOTOGRAPHIC VERSION
   ========================================================= */

.sv5 .sv5-digital-card{
  position:relative !important;

  overflow:hidden !important;

  isolation:isolate !important;

  background:
    linear-gradient(
      145deg,
      rgba(255,255,255,.985),
      rgba(242,250,253,.97)
    ) !important;
}


.sv5 .sv5-digital-card::before{
  content:"" !important;

  position:absolute !important;

  inset:0 !important;

  z-index:-2 !important;

  background:
    radial-gradient(
      circle at 91% 70%,
      rgba(52,180,223,.12),
      transparent 39%
    ) !important;

  pointer-events:none !important;
}


.sv5 .sv5-digital-card::after{
  content:"" !important;

  position:absolute !important;

  right:-2% !important;
  bottom:-3% !important;

  width:50% !important;
  height:79% !important;

  z-index:-1 !important;

  pointer-events:none !important;

  background-repeat:no-repeat !important;

  background-position:
    right bottom !important;

  background-size:
    cover !important;

  opacity:.31 !important;

  border-radius:
    42% 0 8px 0 !important;

  filter:
    saturate(.90)
    contrast(.97) !important;

  -webkit-mask-image:
    linear-gradient(
      90deg,
      transparent 0%,
      rgba(0,0,0,.15) 18%,
      rgba(0,0,0,.68) 47%,
      #000 75%
    ) !important;

  mask-image:
    linear-gradient(
      90deg,
      transparent 0%,
      rgba(0,0,0,.15) 18%,
      rgba(0,0,0,.68) 47%,
      #000 75%
    ) !important;

  transition:
    transform .48s cubic-bezier(.22,1,.36,1),
    opacity .38s ease,
    filter .38s ease !important;
}


/* Seafarers Portal */
.sv5 .sv5-digital-card:nth-child(1)::after{
  background-image:
    url("/assets/images/digital/cards-photo/01-seafarers-portal.jpg") !important;
}


/* Certificate Verification */
.sv5 .sv5-digital-card:nth-child(2)::after{
  background-image:
    url("/assets/images/digital/cards-photo/02-certificate-verification.jpg") !important;
}


/* Smart Service Request */
.sv5 .sv5-digital-card:nth-child(3)::after{
  background-image:
    url("/assets/images/digital/cards-photo/03-smart-service-request.jpg") !important;
}


/* Digital content width */
.sv5 .sv5-digital-card h3,
.sv5 .sv5-digital-card p,
.sv5 .sv5-digital-card a,
.sv5 .sv5-digital-label{
  position:relative !important;

  z-index:3 !important;
}


.sv5 .sv5-digital-card p{
  max-width:
    55% !important;
}


/* Digital hover */
.sv5 .sv5-digital-card:hover::after{
  opacity:.45 !important;

  transform:
    scale(1.055)
    translate3d(-3px,-2px,0) !important;

  filter:
    saturate(1.05)
    contrast(1.02) !important;
}


/* =========================================================
   MOBILE / TABLET
   ========================================================= */

@media(max-width:1250px){

  .sv5 .sv5-card::after{
    width:
      58% !important;

    opacity:
      .34 !important;
  }

}


@media(max-width:850px){

  .sv5 .sv5-card::after{
    width:
      57% !important;

    height:
      70% !important;
  }


  .sv5 .sv5-digital-card::after{
    width:
      47% !important;
  }

}


@media(max-width:560px){

  .sv5 .sv5-card::after{
    width:
      54% !important;

    opacity:
      .28 !important;
  }


  .sv5 .sv5-card h3,
  .sv5 .sv5-card p{
    max-width:
      58% !important;
  }


  .sv5 .sv5-digital-card::after{
    opacity:
      .25 !important;
  }

}