/*
Theme Name: JAF Theme
Author: Tharchen
Description: JAF Theme is a responsive clean WordPress Theme. Supports modern browsers and uses HTML5 and CSS3.
Version: 1.1
*/

@import url('css/bootstrap.min.css');
@import url('css/font-awesome.min.css');

body {
  font-family: "Roboto", "Helvetica Neue", Helvetica, Arial, sans-serif;
  background-color: #fff;
}

/* TOP HEADER */
header {
  padding: 20px;
}
.top-header {
  padding: 0 10px;
}

/* NAVIGATION */
.navbar {
  border-radius: 0;
  min-height: 30px;
}
.navbar-right {
  margin-right: 0;
}

.navbar-custom {
  background-color: #01517a;
  border-color: #013b59;
  background-image: linear-gradient(to bottom, #0173ad 0%, #01517a 100%);
  background-repeat: repeat-x;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff0173ad', endColorstr='#ff01517a', GradientType=0);
}

.navbar-custom .navbar-brand {
  color: #fff;
  padding: 12px 15px;
}
.navbar-custom .navbar-brand:hover,
.navbar-custom .navbar-brand:focus {
  color: #e6e6e6;
  background-color: transparent;
}

.navbar-custom .navbar-text,
.navbar-custom .navbar-link {
  color: #fff;
}
.navbar-custom .navbar-link:hover {
  color: #c0c0c0;
}

.navbar-custom .navbar-nav > li > a {
  color: #fff;
  border-left: 1px solid #013b59;
  padding-top: 10px;
  padding-bottom: 10px;
}
.navbar-custom .navbar-nav > li:last-child > a {
  border-right: 1px solid #013b59;
}
.navbar-custom .navbar-nav > li > a:hover,
.navbar-custom .navbar-nav > li > a:focus {
  color: #c0c0c0;
  background-color: transparent;
}
.navbar-custom .navbar-nav > .active > a,
.navbar-custom .navbar-nav > .active > a:hover,
.navbar-custom .navbar-nav > .active > a:focus {
  color: #c0c0c0;
  background-color: #013b59;
  background-image: linear-gradient(to bottom, #013b59 0%, #015d8c 100%);
  background-repeat: repeat-x;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff013b59', endColorstr='#ff015d8c', GradientType=0);
}
.navbar-custom .navbar-nav > .disabled > a,
.navbar-custom .navbar-nav > .disabled > a:hover,
.navbar-custom .navbar-nav > .disabled > a:focus {
  color: #ccc;
  background-color: transparent;
}

.navbar-custom .navbar-toggle {
  border-color: transparent;
}
.navbar-custom .navbar-toggle:hover,
.navbar-custom .navbar-toggle:focus {
  background-color: transparent;
}
.navbar-custom .navbar-toggle .icon-bar {
  background-color: #fff;
}

.navbar-custom .navbar-collapse,
.navbar-custom .navbar-form {
  border-color: #013957;
}

.navbar-custom .navbar-nav > .dropdown > a:hover .caret,
.navbar-custom .navbar-nav > .dropdown > a:focus .caret,
.navbar-custom .navbar-nav > .open > a .caret,
.navbar-custom .navbar-nav > .open > a:hover .caret,
.navbar-custom .navbar-nav > .open > a:focus .caret {
  border-top-color: #c0c0c0;
  border-bottom-color: #c0c0c0;
}

.navbar-custom .navbar-nav > .open > a,
.navbar-custom .navbar-nav > .open > a:hover,
.navbar-custom .navbar-nav > .open > a:focus {
  background-color: #013b59;
  color: #c0c0c0;
}

.navbar-custom .navbar-nav > .dropdown > a .caret {
  border-top-color: #fff;
  border-bottom-color: #fff;
}

@media (max-width: 767px) {
  .navbar-custom .navbar-nav .open .dropdown-menu > li > a {
    color: #fff;
  }
  .navbar-custom .navbar-nav .open .dropdown-menu > li > a:hover,
  .navbar-custom .navbar-nav .open .dropdown-menu > li > a:focus {
    color: #c0c0c0;
    background-color: transparent;
  }
  .navbar-custom .navbar-nav .open .dropdown-menu > .active > a,
  .navbar-custom .navbar-nav .open .dropdown-menu > .active > a:hover,
  .navbar-custom .navbar-nav .open .dropdown-menu > .active > a:focus {
    color: #c0c0c0;
    background-color: #013b59;
  }
  .navbar-custom .navbar-nav .open .dropdown-menu > .disabled > a,
  .navbar-custom .navbar-nav .open .dropdown-menu > .disabled > a:hover,
  .navbar-custom .navbar-nav .open .dropdown-menu > .disabled > a:focus {
    color: #ccc;
    background-color: transparent;
  }
}

/* Dropdown menus */
.navbar-custom .navbar-nav li .dropdown-menu {
  background: #013b59;
  border-radius: 0;
}

.dropdown-menu > li > a {
  color: #fff;
}
.dropdown-menu > li > a:hover,
.dropdown-menu > li > a:focus {
  background: transparent;
  color: #ddd;
}
.dropdown-menu > .active > a,
.dropdown-menu > .active > a:focus,
.dropdown-menu > .active > a:hover {
  color: #ddd;
  background-color: transparent;
}

ul.dropdown-menu li > ul.dropdown-menu {
  left: 100%;
  top: -2px;
  width: 100%;
}
ul.dropdown-menu li > ul.dropdown-menu li a {
  white-space: break-spaces;
}

/* Links */
a {
  color: #016ba1;
}
a:hover,
a:focus {
  text-decoration: none;
}

/* CONTENT */
.page-title h5 {
  font-family: Georgia, serif;
  font-size: 13px;
  line-height: 15px;
  font-style: italic;
  color: #5b5959;
  text-align: center;
}
.page-title h5 .line {
  width: 30px;
  height: 1px;
  background-color: #5b5959;
  display: inline-block;
  margin: 0 5px 3px;
}
.page-title h2 {
  font-family: "ff-din-web", sans-serif;
  font-style: normal;
  font-weight: 700;
  font-size: 16px;
  line-height: 27px;
  text-transform: uppercase;
  padding-top: 5px;
  letter-spacing: 1px;
  margin-top: 0;
}
.page-title hr {
  border-bottom: 3px solid #f7f7f7;
  margin: 0 0 25px 0;
}
.page-title h4 {
  font-weight: bold;
  margin-top: 20px;
}
.page-content h3:first-child {
  margin-top: 0;
}
.page-content h3 {
  font-size: 16px;
  font-weight: bold;
}
.page-content img {
  display: block;
  max-width: 100%;
  height: auto;
}

/* Slider */
.slider {
  margin-bottom: 10px;
}
h3.title {
  font-size: 16px;
  font-weight: bold;
  margin-bottom: 5px;
  color: #484848;
}

/* Notification */
.notification h3.title {
  background: #ddd;
  padding: 10px;
  margin: 30px 0 20px;
}
.notification .panel {
  border-radius: 0;
}
.notification .panel-footer {
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 0;
  padding: 10px 5px;
}
.notification .panel-footer a,
h4.post-title a {
  color: #333;
}
.notification .panel-footer a:hover,
.notification .panel-footer a:focus,
h4.post-title a:hover,
h4.post-title a:focus {
  color: #0088cc;
}
.notification .list-group-item {
  background-color: transparent;
  border: none;
  padding: 0;
}
.notification .list-group-item small {
  font-size: 80%;
}
.notification .list-group-item p {
  font-size: 13px;
}
.notification .panel-img {
  height: 100px;
  overflow: hidden;
}
.notification .panel-img img {
  display: block;
  max-width: 100%;
  height: auto;
}
h4.post-title {
  font-size: 14px;
  margin-bottom: 0;
  font-weight: bold;
}

/* HR */
hr {
  border-bottom: 1px solid #ddd;
  box-shadow: 0 1px 0 0 rgba(255, 255, 255, 0.57);
  margin: 15px 0;
}

/* Marquee */
.marquee {
  overflow: hidden;
  height: 390px;
}

/* SIDEBAR */
.search-form .form-control {
  border-radius: 0;
  border: 1px solid #d7d7d7;
}
.search-form .input-group-addon {
  background-color: #016da4;
  border: none;
  border-radius: 0;
  color: #fff;
}

.online-services h3.title {
  background: #ddd;
  padding: 10px;
  margin-bottom: 20px;
}

.online-services ul li {
  margin-bottom: 15px;
}
.online-services li .btn {
  text-align: left;
}
.online-services li a span {
  font-size: 16px;
  font-weight: normal;
}
.online-services .btn-warning {
  border-radius: 6px;
  background: linear-gradient(to bottom, #0173ad 0%, #01517a 100%);
  border-color: #f3f3f3;
}
.online-services .btn-warning:hover,
.online-services .btn-warning:focus {
  background: linear-gradient(to bottom, #05a9fd 0%, #00283b 100%);
  border-color: #f3f3f3;
}

.page-sidebar .page-children ul {
  margin-bottom: 30px;
}
.page-sidebar .page-children ul.list-unstyled li {
  border-bottom: 1px solid #ddd;
  box-shadow: 0 1px 0 0 rgba(255, 255, 255, 0.57);
  padding: 4px 0;
}
.page-sidebar .page-children ul.list-unstyled li a {
  color: #333;
}
.page-sidebar .page-children ul.list-unstyled li a:hover,
.page-sidebar .page-children ul.list-unstyled li a:focus {
  color: #337ab7;
  padding-left: 10px;
}
.page-sidebar .page-widget .panel-default .panel-heading {
  color: #333;
  background-color: #c6c5c5;
  border-color: #f3f3f3;
  font-size: 18px;
  font-weight: bold;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}
.page-sidebar .page-widget .panel {
  background-color: #c6c5c5;
  border-radius: 0;
}
.page-sidebar .notification h3.title:first-child {
  margin-top: 0;
}

/* Buttons and forms */
.btn,
.form-control,
.well {
  border-radius: 0;
}
.space-4 {
  max-height: 1px;
  min-height: 1px;
  overflow: hidden;
  margin: 4px 0 3px;
}

/* Contact */
.embed-responsive-16by9 {
  padding-bottom: 38%;
}

/* Search result */
.search-result .list-group-item {
  padding: 10px 0;
  background-color: #f3f3f3;
  border: 1px solid #f3f3f3;
}
.view-all {
  font-size: 13px;
  padding-top: 2px;
}

/* FOOTER */
footer {
  background: #015f8f;
  padding: 15px 0 0;
  border-top: 2px solid #cfb500;
  color: #fff;
  margin-top: 60px;
}
footer a {
  color: #fff;
}
footer a:hover,
footer a:focus {
  color: #ddd;
}
.footer-top h3.title {
  color: #fff;
  padding-bottom: 10px;
  margin-bottom: 10px;
  font-size: 18px;
  border-bottom: 1px solid #004365;
  box-shadow: 0 1px 0 0 rgba(255, 255, 255, 0.15);
}
.footer-top {
  margin-bottom: 20px;
}
.footer-bottom {
  padding: 10px 0;
  background: #00486d;
  font-size: 13px;
}
.footer-bottom a {
  color: #00ab0c;
}
.footer-top li {
  padding: 3px 0;
}

/* RESPONSIVE */
@media (max-width: 767px) {
  header {
    padding: 10px 0;
  }
}

@media (min-width: 767px) {
  .navbar-custom .navbar-collapse {
    padding-right: 0;
    padding-left: 0;
  }
}

/* Breadcrumbs */
.breadcrumbs {
  margin-top: 10px;
}

/* Accordion */
.accordion {
  background-color: #eee;
  color: #444;
  cursor: pointer;
  padding: 18px;
  width: 100%;
  text-align: left;
  border: none;
  outline: none;
  transition: 0.4s;
}
.accordion:hover,
.accordion-active {
  background-color: #ccc;
}
.accordion-active:after {
  content: "\2212";
}
.accordion:after {
  content: '\02795'; /* plus sign (+) */
  font-size: 13px;
  color: #777;
  float: right;
  margin-left: 5px;
}
.active:after {
  content: "\2796"; /* minus

/* Custom Slider Height */
.slideshow-container {
  position: relative;
  max-height: 350px; /* Adjust height */
  overflow: hidden;
}

.slideshow-container img,
.slider img,
.mySlides img {
  width: 100%;
  height: 350px;       /* Same as container */
  object-fit: cover;   /* Prevent stretching, crop instead */
  border-radius: 6px;  /* Optional */
}
/* Responsive Slider Height */
@media (max-width: 767px) {
  .slideshow-container,
  .slideshow-container img,
  .slider img,
  .mySlides img {
    height: 200px;      /* Shorter height on mobile */
    object-fit: cover;  /* Keep image proportion and crop */
  }
}

@media (min-width: 768px) and (max-width: 991px) {
  .slideshow-container,
  .slideshow-container img,
  .slider img,
  .mySlides img {
    height: 300px;      /* Medium height for tablets */
    object-fit: cover;
  }
}

@media (min-width: 992px) {
  .slideshow-container,
  .slideshow-container img,
  .slider img,
  .mySlides img {
    height: 350px;      /* Full height for desktops */
    object-fit: cover;
  }
}
/* Slider */
.slider {
  position: relative;
  max-width: 100%;
  margin: auto;
  overflow: hidden;
}

.mySlides {
  display: none;
}

.mySlides img {
  width: 100%;
  height: 350px; /* Adjust for desktop, or use the responsive heights I gave before */
  object-fit: cover;
  transition: all 1s ease;
}

/* Fade animation */
.fade {
  animation-name: fade;
  animation-duration: 1.5s;
}

@keyframes fade {
  from {opacity: 0.4;}
  to {opacity: 1;}
}