/*
Theme Name: walvis_bay
Author: Ramoletane Lekhanya
Author URI: https://ramoletane.me/
Description: Concrete CMS Theme for the Namibia Trade Information Portal
Version: 1.0.0
*/
@import url("https://fonts.googleapis.com/css2?family=Kanit:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap");
@import url("https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,100;0,9..40,200;0,9..40,300;0,9..40,400;0,9..40,500;0,9..40,600;0,9..40,700;0,9..40,800;0,9..40,900;0,9..40,1000;1,9..40,100;1,9..40,200;1,9..40,300;1,9..40,400;1,9..40,500;1,9..40,600;1,9..40,700;1,9..40,800;1,9..40,900;1,9..40,1000&display=swap");
:root {
  --body: #fff;
  --black: #000;
  --white: #fff;
  --theme: #265186;
  --theme2: #F7C600;
  --theme3: #1f425d;
  --header: #2a2833;
  --base: #00813D;
  --text: #767676;
  --text2: #bfbfbf;
  --border: #D9D9D9;
  --border2: #373737;
  --button: #1C2539;
  --button2: #030734;
  --ratting: #FF9F0D;
  --bg: #f5f5f8;
  --bg2: #DF0A0A0D;
  --color-gradient-1: linear-gradient(309deg, rgba(202,31,39,1) 17%, rgba(247,207,0,1) 70%);
  ---color-gradient-2: linear-gradient(309deg, rgba(247,207,0,1) 14%, rgba(202,31,39,1) 72%);
  ---box-shadow: 0px 0px 60px 0px rgba(4, 23, 26, 0.08);
}

body {
  font-family: Inter, "DM Sans", sans-serif;
}
h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: "Kanit", sans-serif;
}

h1, h4 { color: #00008b; }
h2, h5 { color: #daa520; }
h3, h6 { color: #2e8b57; }
h6.title { color: #08482a; min-width: 300px; }

header .sitename h3 { letter-spacing: 1px; }
header .sitename h4 {  }
header .top-bar a { text-decoration: none; color: #fff; }

footer a, .bg-dark a, .bg-secondary a {
  text-decoration: none;
  color: #fff;
}
footer a:hover, .bg-dark a:hover {
  color: #fcc;
}
footer ul a {
  font-size: smaller;
}
.logo img {
  width: auto;
  height: 8.5vw;
  min-height: 80px;
  border: solid #fff 1px;
  border-radius: 50%;
}
.bg-port {
  background-image: url("../img/port_bg.jpg");
  background-size: cover;
  background-repeat: no-repeat;
  background-attachment: fixed;
}
.opacity-90 {
  opacity: 0.9;
}
.spacing-3 {
  letter-spacing: 2px;
}
.spacing-6 {
  letter-spacing: 5.3px;
}
.h-50 {
  min-height: 50vh;
}
.h-75 {
  min-height: 75vh;
}
@keyframes ntip-slide-animation {
  from { background-size: 1512px 1008px; }
  to { background-size: 2000px 1333px }
}
.ntip-slide {
  width: 100%;
  min-height: 75vh;
  background-position: center;
  animation: ntip-slide-animation 4s infinite;
/*  animation-duration: 4s; */
}

.marquee {
    white-space: nowrap;
    overflow: hidden;
    box-sizing: border-box;
}
.marquee p {
    display: inline-block;
    padding-left: 100%;
    animation: marquee 30s linear infinite;
}
@keyframes marquee {
    0%   { transform: translate(0, 0); }
    100% { transform: translate(-100%, 0); }
}

.icon:hover {
  transform: scale(1.2);
}

div.ccm-block-top-navigation-bar .navbar {
  padding-bottom: 0px;
}
div.ccm-block-top-navigation-bar .navbar .navbar-brand {
  display: none;
}
div.ccm-block-top-navigation-bar .navbar-nav .nav-link {
  color: white;
  font-size: larger;
}
div.ccm-block-top-navigation-bar .navbar-nav .nav-link:hover {
  color: #ffc;
}
div.ccm-block-top-navigation-bar .navbar-nav .nav-link.active {
  background-color: #134b99;
  border-radius: 5px 5px 0px 0px;
  color: #fff;
}
div.ccm-block-top-navigation-bar .navbar-nav .nav-path-selected {
  background-color: #134b99;
  border-radius: 5px 5px 0px 0px;
  color: #fff;
}
div.ccm-block-top-navigation-bar .navbar-toggler {
  border-color: lightgrey;
}
.icon-bar {
  display: block;
  border-top: 1px solid #fff;
  margin: 2px 0px;
}

.top-nav ul {
  display: flex;
  flex-wrap: nowrap;
  margin-right: 12px;
}
.top-nav li a {
  padding: 0px 12px;
  border-right: solid 1px #000;
  text-decoration: none;
  text-wrap: nowrap;
}
.top-nav a {
  text-decoration: none;
  color: #08482a;
}
.top-nav a:hover {
  color: #171796;
}
.deco {
  background: linear-gradient(to bottom, #dce7cb, #c4d3d6, #bdced8);
}

.breadcrumb {
  padding: 12px 0px 0px 8px;
}
.breadcrumb li {
  margin-right: 12px;
}
.breadcrumb li a {
  text-decoration: none;
}

main section .container {
  max-width: unset;
  padding: 18px 36px;
  background: #fff;
}

.sidebar-nav p {
  margin: 6px auto 12px 6px;
}
.sidebar-nav ul {
  padding: 0px;
}
.sidebar-nav li {
  display: block;
  width: 100%;
  padding: 6px;
  border-bottom: 1px solid #ccc;
}
.sidebar-nav li:last-child {
  border-bottom: none;
}
.sidebar-nav li.side-link {
  background-color: #fff;
  padding: 6px;
  border-bottom: solid 1px lightgrey;
}
.sidebar-nav a {
  font-size: 12pt;
  text-decoration: none;
}
.sidebar-nav a:link {
  color: #08482a; !important;
}
.sidebar-nav a:visited {
  color: #08482a; !important;
}
.sidebar-nav a:active {
  color: #08482a; !important;
}
.sidebar-nav a:hover {
  color: #c99a00; !important;
}
.rslides h2 {
  font-size: calc(0.95vw + 1.3vh);
}
.rslides img {
  max-width: 100%;
  max-height: 600px;
}

.bg-darkblue {
  background-color: #265186;
}
.bg-sadc-blue {
  background-color: #171796;
}
.bg-sadc-blue-alt {
  background-color: #134b99;
}
.bg-sadc-blue-grad {
  background-color: #171796;
  background-image: repeating-linear-gradient(#171796, #134b99 10%);
}
.bg-sadc-gold {
  background-color: #c99a00;
  background-image: linear-gradient(to bottom, gold, #eeb211);
}
.bg-sadc-green {
  background-color: #08482a;
  background-image: linear-gradient(to top, green, #00b259);
}
.bg-sadc-green-grad {
  background-color: #08482a;
  background-image: repeating-linear-gradient(green, #00b259 10%);
}
/* ============ mobile view ============ */
@media(max-width: 768px) {
  .spacing-3 {
    letter-spacing: 1px;
  }
  .spacing-6 {
    letter-spacing: 1px;
  }
}
/* ============ mobile view .end// ============ */



.fix {
  overflow: hidden;
}
.choose-us-section .left-shape {
  position: relative;
  z-index: 10;
  top: 30%;
  left: 3%;
}
.choose-us-section .h-75 {
  margin-top: -20%;
}
@keyframes rippleOne {
  70% {
    box-shadow: 0 0 0 40px rgba(244, 68, 56, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(244, 68, 56, 0);
  }
}
@keyframes cir36 {
  100% {
    transform: rotate(360deg);
  }
}
@keyframes rounded {
  50% {
    transform: rotate(15deg);
  }
}
@keyframes rounded-2 {
  50% {
    transform: rotate(5deg);
  }
}
@keyframes rotate {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
.animation__rotate {
  animation: rotate 40s linear infinite;
}
@keyframes spinner {
  to {
    transform: rotateZ(360deg);
  }
}
@keyframes letters-loading {
  0%, 75%, 100% {
    opacity: 0;
    transform: rotateY(-90deg);
  }
  25%, 50% {
    opacity: 1;
    transform: rotateY(0deg);
  }
}
@keyframes loaderspin {
  0% {
    transform: translate(-50%, -50%) rotate(0deg);
  }
  100% {
    transform: translate(-50%, -50%) rotate(360deg);
  }
}
@keyframes tpswing {
  0% {
    transform: rotate(20deg);
  }
  100% {
    transform: rotate(0deg);
  }
}
@keyframes width {
  0% {
    width: 0%;
  }
  100% {
    width: 100%;
  }
}
@keyframes loaderpulse {
  0% {
    transform: scale(1);
  }
  100% {
    transform: scale(1.2);
  }
}
.float-bob-y {
  animation-name: float-bob-y;
  animation-duration: 3s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}
@keyframes float-bob-y {
  0% {
    transform: translateY(-30px);
  }
  50% {
    transform: translateY(-10px);
  }
  100% {
    transform: translateY(-30px);
  }
}
@keyframes top-image-bounce {
  0% {
    transform: translateX(-8px);
  }
  50% {
    transform: translateX(12px);
  }
  100% {
    transform: translateX(-8px);
  }
}
@keyframes top-image-bounce-2 {
  0% {
    transform: translatey(-8px);
  }
  50% {
    transform: translatey(12px);
  }
  100% {
    transform: translatey(-8px);
  }
}
@keyframes toggle {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes moveCursor1 {
  from {
    transform: scale(1);
  }
  to {
    transform: scale(0.8);
  }
}
@keyframes moveCursor2 {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.5);
  }
  100% {
    transform: scale(1);
    opacity: 0;
  }
}

@media (max-width: 991px) {
  .choose-wrapper {
    margin-bottom: 80px;
  }
}
@media (max-width: 575px) {
  .choose-wrapper {
    margin-bottom: -80px;
  }
}
.choose-wrapper .choose-content ul {
  margin-top: 30px;
}
.choose-wrapper .choose-content ul li {
  font-weight: 500;
  color: var(--header);
}
.choose-wrapper .choose-content ul li:not(:last-child) {
  margin-bottom: 10px;
}
.choose-wrapper .choose-content ul li i {
  color: var(--theme);
  margin-right: 5px;
}
.choose-wrapper .choose-content .icon-area {
  margin-top: 40px;
}
.choose-wrapper .choose-content .icon-area .icon-items {
  display: flex;
  align-items: center;
  gap: 30px;
}
@media (max-width: 575px) {
  .choose-wrapper .choose-content .icon-area .icon-items {
    gap: 15px;
  }
}
.choose-wrapper .choose-content .icon-area .icon-items:not(:last-child) {
  margin-bottom: 30px;
}
.choose-wrapper .choose-content .icon-area .icon-items .icon {
  width: 90px;
  height: 90px;
  border-radius: 50%;
  font-size: 42px;
  color: var(--white);
  background-color: var(--header);
  text-align: center;
  padding: 25px;
}
.choose-wrapper .choose-content .icon-area .icon-items .content {
  border-left: 2px solid var(--header);
  padding-left: 30px;
}
.choose-wrapper .choose-content .icon-area .icon-items .content h5 {
  margin-bottom: 5px;
}
.choose-wrapper .choose-content .icon-area .icon-items.style-2 .icon {
  background-color: var(--theme);
}
.choose-wrapper .choose-content .icon-area .icon-items.style-2 .content {
  border-left: 2px solid var(--border);
}
.choose-wrapper .choose-image-items {
  position: relative;
}
.choose-wrapper .choose-image-items .choose-image {
  height: 390px;
  max-width: 370px;
  position: relative;
  z-index: 9;
}
@media (max-width: 575px) {
  .choose-wrapper .choose-image-items .choose-image {
    max-width: 490px;
  }
}
.choose-wrapper .choose-image-items .choose-image-2 {
  max-width: 370px;
  position: absolute;
  bottom: -44%;
  right: 0;
}
@media (max-width: 991px) {
  .choose-wrapper .choose-image-items .choose-image-2 {
    bottom: -21%;
  }
}
.choose-wrapper .choose-image-items .choose-image-2 img {
  width: 100%;
}
@media (max-width: 575px) {
  .choose-wrapper .choose-image-items .choose-image-2 {
    width: 210px;
    height: 210px;
    bottom: 0;
  }
}
.choose-wrapper .choose-image-items .circle-shape {
  position: absolute;
  left: 5%;
  bottom: -40%;
  z-index: -1;
}
.choose-wrapper .choose-image-items .circle-shape .text-circle {
  animation: cir36 10s linear infinite;
}
@media (max-width: 1199px) {
  .choose-wrapper .choose-image-items .circle-shape {
    display: none;
  }
}
.choose-wrapper.style-2 .choose-image-items {
  position: relative;
}
.choose-wrapper.style-2 .choose-image-items .choose-image {
  height: 480px;
  max-width: 370px;
  z-index: initial;
  position: relative;
}
@media (max-width: 1199px) {
  .choose-wrapper.style-2 .choose-image-items .choose-image {
    height: 400px;
  }
}
@media (max-width: 991px) {
  .choose-wrapper.style-2 .choose-image-items .choose-image {
    height: 470px;
  }
}
@media (max-width: 575px) {
  .choose-wrapper.style-2 .choose-image-items .choose-image {
    max-width: 540px;
    height: 430px;
  }
}
.choose-wrapper.style-2 .choose-image-items .choose-image .box-shape {
  position: absolute;
  right: -33%;
  top: 24%;
}
@media (max-width: 1199px) {
  .choose-wrapper.style-2 .choose-image-items .choose-image .box-shape {
    display: none;
  }
}
.choose-wrapper.style-2 .choose-image-items .choose-image-2 {
  max-width: 300px;
  bottom: -41%;
  right: 10%;
}
@media (max-width: 991px) {
  .choose-wrapper.style-2 .choose-image-items .choose-image-2 {
    bottom: 10%;
    right: 10%;
  }
}
@media (max-width: 767px) {
  .choose-wrapper.style-2 .choose-image-items .choose-image-2 {
    max-width: 200px;
    bottom: -5%;
  }
}
.choose-wrapper.style-2 .choose-image-items .icon-box {
  width: 170px;
  height: 170px;
  line-height: 180px;
  border-radius: 50%;
  text-align: center;
  color: var(--theme);
  font-size: 28px;
  background-color: var(--white);
  box-shadow: var(---box-shadow);
  position: absolute;
  bottom: -25%;
  left: 40%;
  transform: translateX(-50%);
}
.choose-wrapper.style-2 .choose-image-items .icon-box .circle-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.choose-wrapper.style-2 .choose-image-items .icon-box .text-circle {
  animation: cir36 10s linear infinite;
}
.choose-wrapper.style-2 .choose-content .icon-area.style-2 .icon-items {
  background-color: var(--white);
  box-shadow: var(---box-shadow);
  padding: 30px;
  align-items: initial;
  transition: all 0.4s ease-in-out;
  border-bottom: 3px solid var(--white);
}
@media (max-width: 585px) {
  .choose-wrapper.style-2 .choose-content .icon-area.style-2 .icon-items {
    padding: 20px 15px;
  }
}
.choose-wrapper.style-2 .choose-content .icon-area.style-2 .icon-items:not(:last-child) {
  margin-bottom: 20px;
}
.choose-wrapper.style-2 .choose-content .icon-area.style-2 .icon-items .icon {
  width: initial;
  height: initial;
  border-radius: initial;
  font-size: 66px;
  color: var(--theme);
  background-color: initial;
  text-align: initial;
  padding: 0;
  transition: all 500ms ease;
}
@media (max-width: 575px) {
  .choose-wrapper.style-2 .choose-content .icon-area.style-2 .icon-items .icon {
    font-size: 48px;
  }
}
.choose-wrapper.style-2 .choose-content .icon-area.style-2 .icon-items .content {
  padding: 0;
  border: none;
}
.choose-wrapper.style-2 .choose-content .icon-area.style-2 .icon-items:hover {
  border-bottom: 3px solid var(--theme);
}
.choose-wrapper.style-2 .choose-content .icon-area.style-2 .icon-items:hover .icon {
  transform: scaleX(-1);
}
.choose-wrapper.style-2 .choose-content .icon-area.style-2 .icon-items.active {
  border-bottom: 3px solid var(--theme);
}
.choose-wrapper.style-2 .choose-content .about-author {
  display: flex;
  align-items: center;
  gap: 60px;
  margin-top: 50px;
}
@media (max-width: 1199px) {
  .choose-wrapper.style-2 .choose-content .about-author {
    gap: 30px;
  }
}
@media (max-width: 575px) {
  .choose-wrapper.style-2 .choose-content .about-author {
    gap: 30px;
    flex-wrap: wrap;
  }
}
.choose-wrapper.style-2 .choose-content .about-author .author-image {
  display: flex;
  align-items: center;
  gap: 20px;
}