*,
*::after,
*::before {
  margin: 0;
  padding: 0;
}
:root {
  --color: #4973ff;
}
@font-face {
  font-family: "DubaiW23-Light";
  src: url(https://rsa.global/theme1/fonts/DubaiW23-Light.eot);
}
@font-face {
  font-family: "DubaiW23-Bold";
  src: url(https://rsa.global/theme1/fonts/DubaiW23-Bold.eot);
}
@font-face {
  font-family: "DubaiW23-Medium";
  src: url(https://rsa.global/theme1/fonts/DubaiW23-Medium.eot);
}

.header-content {
  max-width: 40%;
  margin: 50px;
  padding: 75px 30px;
  position: relative;
  z-index: 3;
}

.header-animate-hero {
  position: relative;
  background-image: url("/themes/custom/rsa_global/files/InternationalFreight/International Freight Banner.png");
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  color: #132659;
  height: 100vh;
  display: flex;
  align-items: center;
  overflow: hidden;
}

.header-animate-hero h2 {
  position: relative;
  z-index: 1;
  font-size: 46px;
  margin: 0 0 10px;
  line-height: 1;
  color: #132659;
  text-align: left;
  font-family: "DubaiW23-Bold", sans-serif;
  font-weight: 900;
}

.header-animate-hero p {
  position: relative;
  z-index: 1;
  color: #132659;
  text-align: left;
  font-size: 30px;
  line-height: 30px;
  font-family: "DubaiW23-Light", sans-serif;
  font-weight: 550;
  padding: 10px;
  font-weight: bold;
  padding-left: 0;
}
.mobile-view-image {
  display: none;
  width: 100%;
    position: relative;
    overflow: hidden;
    padding-bottom: 56.25%;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
}


@media (max-width: 1024px) {
  .header-animate-hero {
    height: 60vh;
  }
  .header-animate-hero h2 {
    font-size: 36px;
    line-height: 36px;
  }
  .header-animate-hero p {
    font-size: 30px;
    line-height: 30px;
  }
}

@media (max-width: 768px) {
  .header-animate-hero {
    height: 100%;
  }
  .header-content {
    max-width: 100%;
  }
  .header-animate-hero h2 {
    font-size: 34px;
    line-height: 34px;
  }
  .header-animate-hero p {
    font-size: 22px;
    line-height: 26px;
  }
}

@media (max-width: 425px) {
  .header-animate-hero h2 {
    font-size: 34px;
    line-height: 34px;
  }
  .header-animate-hero p {
    font-size: 18px;
    line-height: 22px;
  }
}

/*************xsxs************/

.storage-subtitle {
  font-family: "DubaiW23-Light", sans-serif;
  line-height: 35px;
  margin: 0 auto;
  text-align: center;
  max-width: 40%;
  font-size: 1.2vw;
  padding: 25px;
  font-weight: 500;
}

@media (max-width: 1024px) {
  .storage-subtitle {
    font-size: 24px;
    line-height: 32px;
    max-width: 90%;
  }
}

@media (max-width: 768px) {
  .storage-subtitle {
    font-size: 18px;
    line-height: 22px;
    max-width: 100%;
  }
}

.warehouse-title {
  text-align: center;
  margin-top: 60px;
  margin-bottom: 20px;
  color: #132659;
  text-align: center;
  font-family: "DubaiW23-Bold", sans-serif;
  font-weight: 600;
  font-size: 3rem;
}

.warehouse-des {
  height: 200px;
  width: 70%;
  background: rgb(0, 88, 131);
  background: linear-gradient(
    90deg,
    rgba(0, 88, 131, 1) 31%,
    rgba(1, 42, 80, 1) 65%,
    rgba(0, 12, 43, 1) 100%
  );
  margin: 0px 0px;
  display: flex;
}
.warehouse-des p {
  margin: 20px;
  padding: 25px;
  font-size: 1.2vw;
  color: #fff;
  font-family: "DubaiW23-Bold", sans-serif;
  font-weight: 500;
  line-height: 32px;
}

.img-des {
  width: 150;
  height: 150;
  align-self: center;
  padding-right: 20px;
}

.warehouse-des-right {
  height: 200px;
  width: 70%;
  background: rgb(0, 88, 131);
  background: linear-gradient(
    90deg,
    rgba(0, 88, 131, 1) 31%,
    rgba(1, 42, 80, 1) 65%,
    rgba(0, 12, 43, 1) 100%
  );
  margin: 40px 0px;
  display: flex;
  float: right;
}
.warehouse-des-right p {
  margin: 20px;
  padding: 25px;
  font-size: 1.2vw;
  color: #fff;
  font-family: "DubaiW23-Bold", sans-serif;
  font-weight: 500;
  line-height: 32px;
}

.row {
  display: flex;
  flex-wrap: wrap;
}
.warehouse-des-image {
  flex: 60%;
  padding: 40px;
  border-radius: 30px;
}
.warehouse-des-text {
  flex: 30%;
  padding: 40px;
  text-align: left;
}

/****blockquote****/
/* rsa page design */
.banner-section--with-white-gradient {
  position: relative;
  z-index: 1;
  min-height: 100vh;
  padding-bottom: 30px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  flex-wrap: nowrap;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
  /* background-attachment: fixed; */
}

.banner-section--with-white-gradient::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  width: 90%;
  height: 100%;
  opacity: 0.9;
  background: linear-gradient(
    to right,
    rgba(255, 255, 255, 1),
    rgba(255, 255, 255, 0)
  );
}

.rsa-banner-content {
  position: relative;
  background-image: url("road-banner.png");
  background-repeat: no-repeat;
  background-position: top center;
  background-size: cover;
  height: 900px;
  display: flex;
  align-items: flex-end;
  background-attachment: fixed;
}
.sea-banner-content {
  background-image: url("sea-banner.png");
  /* background-attachment: initial; */
}
.air-banner-content {
  background-image: url("air-banner.png");
  background-attachment: fixed;
}
.rsa-banner-content .rsa-banner-description {
  background-color: #132659;
  color: #fff;
  padding-bottom: 50px;
}
.rsa-banner-title {
  max-width: 85%;
  margin: 0 auto;
  width: 100%;
}
.rsa-banner-content .rsa-banner-description h2 {
  display: flex;
  align-items: flex-end;
  font-size: 3.5em;
  position: relative;
  top: -40px;
  font-family: "DubaiW23-Bold", sans-serif;
  font-weight: bold;
  text-align: center;
  /* justify-content: center; */
  margin-bottom: 15px;
}
.rsa-banner-content .rsa-banner-description h2 img {
  margin-bottom: -7px;
}
.rsa-banner-content .rsa-banner-description p {
  font-family: "DubaiW23-Regular", sans-serif;
  font-size: 24px;
  line-height: 120%;
}
.rsa-service-box {
  max-width: 85%;
  margin: 0 auto;
  padding: 50px 0;
}
.rsa-service-box .rsa-service-title {
  font-size: 2rem;
  margin-bottom: 25px;
  text-align: center;
  color: #cb0e20;
  /* color: #132659; */
  font-family: "DubaiW23-Bold", sans-serif;
  text-align: center;
}
@keyframes bartextanim {
  0% {
    background-position: 0% 50%;
  }
  100% {
    background-position: 100% 50%;
  }
}
.rsa-service-box .rsa-service-title span {
  color: #cb0e20;
}
.rsa-service-content {
  display: flex;
  align-items: center;
}
.rsa-service-img {
  width: 16%;
  z-index: 3;
  position: relative;
}
.rsa-service-list {
  display: flex;
  width: 75%;
  background-color: #132659;
  /* background-color: #cb0e20; */
  color: #fff;
  padding: 80px 35px 80px 70px;
  font-size: 20px;
  font-family: "DubaiW23-Light", sans-serif;
  font-weight: 400;
  flex-shrink: 0;
  z-index: 1;
  min-height: 370px;
  position: relative;
  align-items: center;
  overflow: hidden;
}

.rsa-service-list::after {
  content: "";
  position: absolute;
  background-image: url("Truck.png");
  background-repeat: no-repeat;
  background-position: right bottom;
  width: 400px;
  right: -80px;
  height: 400px;
  bottom: -44px;
  background-size: contain;
}
.sea-list.rsa-service-list::after {
  background-image: url("Ship.png");
  right: -50px;
  bottom: -4px;
}
.air-list.rsa-service-list::after {
  background-image: url("Plane.png");
  width: 550px;
  right: -120px;
  bottom: -125px;
}
.rsa-service-list ul {
  padding-left: 30%;
}
.rsa-service-list ul li {
  margin-bottom: 10px;
}
.enquire-content .button {
  font-size: 20px;
  font-weight: 500;
  display: block;
  position: relative;
  padding-left: 24px;
  /* margin-left: -8px; */
  line-height: 26px;
  transform: translateY(var(--span-y, 0));
  transition: transform 0.7s ease;
  font-weight: bold;
  /* width: 90%; */
}
/* .enquire-btn {flex: 30%;} */

.enquire-content {
  max-width: 100%;
  margin: 0 auto;
  display: flex;
  align-items: center;
  padding: 0px 40px;
  background-color: #efefef;
  margin-bottom: 20px;
  height: 135px;
  text-align: center;
  font-weight: bold;
  justify-content: center;
}
.enquire-title {
  /* flex: 70%; */
  margin-right: 50px;
}
.enquire-content h4 {
  color: #132659;
  font-family: "DubaiW23-Light", sans-serif;
  font-weight: 700;
  font-size: 2rem;
  font-weight: bold;
}

.enquire-content.requirement-content {
  margin-bottom: 0;
}
.enquire-content.requirement-content .enquire-title {
  margin-right: 0;
}

/* button animation */
.enquire-btn .button-animation,
.enquire-btn .button-animation-boat,
.enquire-btn .button-animation-air {
  --color: #fff;
  --background: #cb0e20;
  padding: 12px 0;
  width: 172px;
  cursor: pointer;
  text-align: center;
  position: relative;
  border: none;
  outline: none;
  color: var(--color);
  background: var(--background);
  border-radius: var(--br, 5px);
  -webkit-appearance: none;
  -webkit-tap-highlight-color: transparent;
  transform-style: preserve-3d;
  transform: rotateX(var(--rx, 0deg)) translateZ(0);
  transition: transform 0.5s, border-radius 0.3s linear var(--br-d, 0s);
  font-family: 'DubaiW23-Regular',sans-serif;
  display: inline-block;
}
.enquire-btn .button-animation .default,
.enquire-btn .button-animation .success,
.enquire-btn .button-animation-boat .default,
.enquire-btn .button-animation-boat .success,
.enquire-btn .button-animation-air .default,
.enquire-btn .button-animation-air .success {
  display: block;
  font-weight: 500;
  font-size: 14px;
  line-height: 24px;
  opacity: var(--o, 1);
  transition: opacity 0.3s;
}
.enquire-btn .button-animation .success,
.enquire-btn .button-animation-boat .success,
.enquire-btn .button-animation-air .success {
  --o: 0;
  position: absolute;
  top: 12px;
  left: 0;
  right: 0;
}
.enquire-btn .button-animation .rsa,
.enquire-btn .button-animation-boat .rsaboat,
.enquire-btn .button-animation-air .rsaair {
  position: absolute;
  width: 72px;
  height: 28px;
  transform: rotateX(90deg)
    translate3d(var(--rsa-x, 4px), calc(var(--rsa-y-n, -26) * 1px), 12px);
}
.enquire-btn .button-animation-boat .rsaboat {
  width: 100%;
}
.enquire-btn .button-animation.animation,
.enquire-btn .button-animation-boat.animation,
.enquire-btn .button-animation-air.animation {
  --rx: -90deg;
  --br: 0;
}
.enquire-btn .button-animation.animation .default,
.enquire-btn .button-animation-boat.animation .default,
.enquire-btn .button-animation-air.animation .default {
  --o: 0;
}
.enquire-btn .button-animation.animation.done,
.enquire-btn .button-animation-boat.animation.done,
.enquire-btn .button-animation-air.animation.done {
  --rx: 0deg;
  --br: 5px;
  --br-d: 0.2s;
}
.enquire-btn .button-animation.animation.done .success,
.enquire-btn .button-animation-boat.animation.done .success,
.enquire-btn .button-animation-air.animation.done .success {
  --o: 1;
  --offset: 0;
}

.enquire-btn .animation-wrapper {
  /* background: #ace5ee; */
  bottom: 0;
  left: 0;
  position: relative;
  display: flex;
  width: 100%;
  height: 70px;
  right: 0;
  top: 0;
}

.enquire-btn .boat {
  animation: ship 6s ease-in-out infinite;
  background-repeat: no-repeat;
  /* bottom: 15px; */
  height: 60px;
  left: 40px;
  position: absolute;
  width: 80px;
  background-size: contain;
}

@keyframes ship {
  0% {
    transform: translate(0, 0) rotate(-1.5deg);
  }
  50% {
    transform: translate(6px, 5px) rotate(0deg);
  }
  100% {
    transform: translate(0, 0) rotate(-1.5deg);
  }
}
.enquire-btn .boat-waves {
  width: 100%;
  position: absolute;
  bottom: 0px;
  height: 50px;
  background: url(ship-wave.png);
  background-size: contain;
  left: 0;
}
.enquire-btn .boat-waves img {
  width: 100%;
}
.enquire-btn .boat-waves {
  animation: bgscroll 60s infinite linear;
}

@keyframes bgscroll {
  from {
    background-position: 0 0;
  }
  to {
    background-position: -3390px 0px;
  }
}

@media screen and (max-width: 1500px) {
  .rsa-service-list ul {
    padding-left: 32%;
  }
}
@media screen and (max-width: 1400px) {
  .rsa-service-list ul {
    padding-left: 40%;
  }
}
@media screen and (max-width: 1200px) {
  .rsa-service-box {max-width: 95%;}
  .rsa-service-content {
    flex-direction: column;
  }
  .rsa-service-img {
    width: 100%;
    display: flex;
  }
  .rsa-service-img img {
    width: 85%;
    margin: auto;
  }
  .rsa-service-list ul {
    padding-left: 20px;
  }
}
@media screen and (max-width: 1200px) {
  .rsa-service-content {
    flex-direction: column;
  }
  .rsa-service-img {
    width: 100%;
    display: flex;
  }
  .rsa-service-img img {
    width: 100%;
    margin: auto;
  }
  .rsa-service-list {
    width: 100%;
  }
}
@media screen and (max-width: 992px) {
  .header-content {max-width: 80%;}
}
@media screen and (max-width: 768px) {
  .mobile-view-image {display: block;}
  .banner-section--with-white-gradient {
    background-image: none;
    display: block;
    min-height: 0;
    padding-top: 122px;
  }
  .banner-section--with-white-gradient::before {display: none;}
  .rsa-service-list {padding: 60px 12px;}
}
@media screen and (max-width: 680px) {
  .enquire-content {
    flex-direction: column;
    height: auto;
    padding: 40px;
  }
  .enquire-content h4 {
    margin-bottom: 20px;
    font-size: 1.5rem;
  }
  .rsa-banner-content .rsa-banner-description h2 {
    font-size: 1.8em;
  }
  .enquire-title {
    margin-right: 0;
  }
  .enquire-content.requirement-content h4 {
    margin-bottom: 0;
  }
  .header-content {
    padding: 30px;
    margin: 20px 15px;
    max-width: 100%;
  }
  .rsa-banner-content .rsa-banner-description h2 img {width: 80px;}
}