*{
    font-family: 'Roboto', sans-serif;
}

.footer-area{
    padding: 40px 0px;
    background-color: #13b5ea;
    color: #eee;
}
.footer-area a{
    text-decoration: none;
}
.footer-area .footer-heading{
    font-size: 24px;
    color: #eee;
}
.footer-area .footer-underline{
    height: 1px;
    width: 70px;
    background-color: #ddd;
    margin: 10px 0px;
}
.copyright-area{
    padding: 14px 0px;
    background-color: #183650;
}
.copyright-area p{
    margin-bottom: 0px;
    color: #eee;
}
.copyright-area .social-media{
    text-align: end;
}
.copyright-area .social-media a{
    margin: 0px 10px;
    color: #eee;
    width: 20px;
}
/*contact style*/
.section{
    padding-top: 34px;
    padding-bottom: 34px;
}

.underline{
    width: 100px;
    height: 4px;
    background-color: #2874f0;
    margin: auto;
}
.contact-heading {
    font-size: 24px;
    color: #000;
}
 .contact-underline{
    height: 2px;
    width: 70px;
    background-color: #2874f0;
    margin: 10px 0px;
}
.social-media{
   color:#2874f0;
}
 .message-heading{
    font-size: 24px;
    color: #000;
}
 .message-underline{
    height: 2px;
    width: 70px;
    background-color: #2874f0;
    margin: 10px 0px;
}
/* overview sytle */
.overview-heading{
    padding-top: 3px;
    font-size: 24px;
    color: #000;

}
.overview-underline{
    height: 2px;
    width: 70px;
    background-color: #2874f0;
    margin: 10px 0px;
}
.underline-stakehoder{
    height: 2px;
    width: 70px;
    background-color: #2874f0;
    margin: 10px 0px;
}

p{
    text-align: justify;
}

/* top navbar  style*/

.main-navbar{
    border-bottom: 1px solid #0088cc;
}

 .main-navbar .top-navbar{
    /* background-color: #183650; */
    background-color: #13b5ea;
    padding-top: 3px;
    padding-bottom: 3px;
}
.main-navbar .top-navbar .brand-name{
    color: #fff;
}
 .main-navbar .top-navbar .nav-link{
    color: #eee;
    font-size: 16px;
    font-weight: 400;
}
/* end of topnavbar */

.main-navbar .bottom-navbar .dropdown-menu{
    padding: 0px 0px;
    border-radius: 0px;

}
.main-navbar .bottom-navbar .dropdown-menu .dropdown-item{
    padding: 8px 16px;
    border-bottom: 1px solid #ccc;
    font-size: 16px;
}

 .main-navbar .bottom-navbar .dropdown-menu .dropdown-item i{
    width: 30px;
    text-align: center;
    color: #2874f0;
    font-size: 16px;
}
.main-navbar .navbar{
    padding: 0px;
    background-color: #fff;
}
.main-navbar .navbar .nav-item .nav-link{
    padding: 8px 15px;
    color: #000;
    font-size: 16px;
    font-weight: 400;

}
.dropdown .nav-link:hover {
    transition: border-bottom 0.1s ease-in-out;
}

.main-navbar .navbar .nav-item .nav-link {
    height: 45px;
}

.dropdown-item:hover {
    background: #34ccff;
    color: white;
}

.dropdown:hover .dropdown-menu{
    display: block;
    margin-top: 0;
}
.dropdown-menu{
    margin-top: 0px;
    background: #183650;
    border-radius: 0;
    color: white !important;
}

.dropdown-item {
    color: white !important;
}
.dropdown>.dropdown-toggle:active {
    /*Without this, clicking will make it sticky*/
      pointer-events: none;
  }
  .active{
    color:#0088cc !important;
}

@media only screen and (max-width: 500px) {
    .main-navbar .top-navbar .nav-link{
        font-size: 12px;
        padding: 8px 10px;

}
.navbar .nav-item .dropdown-menu{ display: none; }
	.navbar .nav-item:hover .dropdown-menu{ display: block; }
	.navbar .nav-item .dropdown-menu{ margin-top:0; }
}

/*slider style*/
.carousel-item .custom-carousel-content{
    width: 50%;
    transform: translate(0%, -10%);
}
.custom-carousel-content{
    text-align: start;
}
.custom-carousel-content h1{
    font-size: 40px;
    font-weight: 700;
    color: #fff;
    margin-bottom: 30px;
}
.custom-carousel-content h1 span{
    color: #fbff00;
}
.custom-carousel-content p{
    font-size: 18px;
    font-weight: 400;
    color: #fff;
    margin-bottom: 30px;
}
.custom-carousel-content .btn-slider{
    border: 1px solid #fff;
    border-radius: 0px;
    padding: 8px 26px;
    color: #fff;
    font-size: 18px;
    font-weight: 600;
    letter-spacing: 0.5px;
}
/* service style */
body {
    background-color: #f7f6f6;

}

.maincard {
    position: relative;
    width: 300px;
    height: 300px
}

.thecard {
    position: absolute;
    width: 100%;
    height: 100%;
    transform-style: preserve-3d;
    transition: all 0.8s ease

}

.thecard:hover {
    transform: rotateY(180deg)
}

.thefront {
    position: absolute;
    width: 100%;
    height: 100%;
    color: #fff;
    cursor: pointer;
    border: 1px solid #eee;
    box-shadow: 5px 6px 6px 2px #e9ecef;
    padding: 10px;
    backface-visibility: hidden;
}
.agency
{
    background-image:url("/frontend/images/cargo.png");


}
.passenger
{
    background-image:url("/frontend/images/mapinduzi.jpg");
}
.boat
{
    background-image:url("/frontend/images/boat.jpg");
}
.tanker
{
    background-image:url("/frontend/images/ukombozi.jpg");
}
.theback {
    position: absolute;
    width: 100%;
    height: 100%;
    cursor: pointer;
    background-color: hidden;
    background: #144b9d;
    color: #fff;
    transform: rotateY(180deg);
    border: 1px solid #eee;
    box-shadow: 5px 6px 6px 2px #e9ecef;
    padding: 10px;
    backface-visibility: hidden;
    text-align: center;
}

.name {
    color: #eee;
    background-color: #0088cc;
    font-size: 16px;
    margin-top: 0px;
    margin-left: -10px;
    padding: 8px;
    bottom: -8px;
    position: absolute;
    width: 100%;
}

.about {
    font-size: 12px
}
.app-auth {
    position: relative;
    width: 100%;
    min-height: 100vh;
    margin: 0 auto;
    left: 0;
    background-color: #3A4651;
    -webkit-box-shadow: 0 0 3px #ccc;
    box-shadow: 0 0 3px #ccc;
}
.post-news
{
    background-color: #144b9d;
    color: #eee;
    font-size: 16px;
    font-weight: 400;
    width: auto;
}

.whatsapp-chat{
    bottom: 10px;
    left: 10px;
    position:fixed;
}
.latest-post a{
    color: #144b9d;
    margin: 3px 8px;
    display: block;
    font-size: 14px;

}
a{
    text-decoration: none;
font-family: 'Poppins', sans-serif;
}
.post_underline{
    height: 3px;
    width: 60px;
    background-color: #183650;
    margin-bottom: 10px;
}


.gallery-item {
  position: relative;
  width: 280px;
  height: 250px;
  border-radius: 6px;
  overflow: hidden;
  cursor: pointer;
}
.gallery-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display:block;
  transition: transform 0.3s;
}
.gallery-item:hover img {
  transform: scale(1.05);
}
.gallery-item .overlay {
  position: absolute;
  top:0; left:0; right:0; bottom:0;
  background: rgba(0,0,0,0.4);
  opacity: 0;
  display:flex;
  justify-content:center;
  align-items:center;
  transition: opacity 0.3s;
}
.gallery-item:hover .overlay {
  opacity: 1;
}
.zoom-icon {
  font-size: 42px;
  color: #fff;
}

/* Modal styling */
.modal {
  display:none;
  position:fixed;
  z-index:1000;
  left:0; top:0;
  width:100%; height:100%;
  background:rgba(0,0,0,0.9);
  padding-top:60px;
}
.modal-content {
  margin:auto;
  display:block;
  max-width:90%;
  max-height:80vh;
  border-radius:10px;
}
.close {
  position:absolute;
  top:20px;
  right:35px;
  color:#fff;
  font-size:40px;
  font-weight:bold;
  cursor:pointer;
}
#caption {
  text-align:center;
  color:#fff;
  padding:10px;
  font-size:18px;
}

.scroll-to-top{
	position:fixed;
	bottom:15px;
	right:15px;
	width:60px;
	height:60px;
	color:#ffffff;
	font-size:24px;
	text-transform:uppercase;
	line-height:60px;
	text-align:center;
	z-index:100;
	cursor:pointer;
	background:#0a0a0a;
	border: 1px solid white;
	display:none;
	-webkit-transition:all 300ms ease;
	-ms-transition:all 300ms ease;
	-o-transition:all 300ms ease;
	-moz-transition:all 300ms ease;
	transition:all 300ms ease;
}

.scroll-to-top:hover{
	color:#ffffff;
	background:#1f8ceb;
}

@media (max-width: 767px) {
  /* .row.align-items-center {
    text-align: center;
  }

  .row.align-items-center img {
    margin: 10px auto;
  }

  .row.align-items-center h2,
  .row.align-items-center p {
    display: block;
  } */

  #shipcoLogo {
    display: none;
  }

  #smzLogo {
    display: none;
  }
}

#btn-back-to-top {
    position: fixed;
    bottom: 40px;
    right: 30px;
    display: none;
    z-index: 9999;
    width: 50px;
    height: 50px;
    font-size: 22px;
    border-radius: 50%;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
}

#btn-back-to-top {
  opacity: 0;
}
#btn-back-to-top.show {
  opacity: 1;
}

.carousel > .carousel-inner > .carousel-item > img{
    width:1200px; /* Yeap you can change the width and height*/
    height:700px;
}