/*============= FIXED BUTTON CONTACT US ============= */

* {
  padding: 0;
  margin: 0;
}

.fabs {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 3;
  
}

.action {
  background: #b99855;
  height: 50px;
  width: 50px;
  border-radius: 50%;
  box-shadow: 0 5px 7px 0px gray;
  transition: background-color 0.4s ease-in-out;
}

.action i {
  position: absolute;
  color: white;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  font-size: 25px;
  cursor: pointer;
}

.action:hover {
  background-color: #e7d88a;
}

.btns .btn {
  position: absolute;
  height: 35px;
  width: 35px;
  border-radius: 50%;
}

.btns .btn i {
  position: absolute;
  font-size: 18px;
  color: white;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

.btns {
  position: absolute;
  bottom: 0px;
  margin-bottom: 5px;
  height: 35px;
  width: 35px;
  transition: 0.3s ease-in-out;
  left: 50%;
  transform: translateX(-50%);
  z-index: -1;
}
.btns.open {
  bottom: 50px;
}





/*============= RESETS ============= */

@font-face {
  font-family:"Britannic Bold";
  src: url('../fonts/BritannicBoldRegular.ttf') format("truetype");
}

h1, h2, h3{
   font-family: 'Britannic Bold', sans-serif;
   font-weight:500;
}

/*-- iPhone X Remove Gutters --*/
html {
   padding: env(safe-area-inset);
   
}
.container {
    max-width:1100px;
}



.title{
 margin-top: -50px;  
}

/*-- Prevent Horizontal Scrolling & Font Style --*/


 html, body {

   overflow-x: hidden;
 
   
    font-family: 'Libre Franklin', sans-serif;
   color: #666666;
   
   
}



*{
  margin: 0;
  padding: 0;
}
.loader{
  position: fixed;
  top: 0;
  left: 0;
  background: white;
  height: 100%;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index:99999;
}

.disppear{
  animation: vanish 1s forwards;
}
@keyframes vanish {
  100%{
    opacity: 0;
    visibility: hidden;
  }
}




h3.heading {
   
   font-weight: 700;
   font-size: 1.9rem;
   text-align: center;
   margin-bottom: 1.9rem;
   color:#505962;
}


h2.heading {
   text-transform: uppercase;
   font-weight: 500;
   font-size: 1.5rem;
   text-align: center;
   margin-bottom: 1.9rem;
   color:#505962;
   margin-top: -25px;
   margin-bottom: -25px;
}
.heading-underline {
   width: 3rem;
   height: .2rem;
   color:rgba(255,244,234,1);
   margin: 0 auto 2rem;
}





.hidden-text{
   color: rgba(0, 0, 0, 0);
}
.hawaii-text{
   
   background-image: linear-gradient(rgb(193,163,94) 28%, 
   rgb(246,237,155) 40%,
   rgb(202,176,105) 54%);
   -webkit-background-clip:text;
   -webkit-text-fill-color: transparent;
   text-shadow:none;
}
.hawaii-text-tours{
   
   color:#e7d88a;
}
  

 a.box {
  color: black;
  text-decoration: none;
 
 }
 a.box:hover {
   color: black;
   text-decoration: none;
  }




/*============= NAVIGATION =============*/
.navbar-brand img {
    padding-top:10px;
   height: 100px;
}

.img-nav.img-min {
    padding-top:0px;
    height: 70px;
    transition: height 1s ease;
}

.navbar {
   padding: .7rem 1rem;
   background-color: transparent;
   font-weight: 700;
  
   font-size: .9rem;
   transition: background-color .5s ease;
}
.navbar-nav li {
   padding-right: .8rem;
}
.navbar-nav .nav-link {
    color: white;
   padding-top: .8rem;
   text-shadow: .1rem .1rem .8rem black;
}
.navbar-nav .nav-link.active,
.navbar-nav .nav-link:hover {
   color: #e7d88a;
}
.custom-toggler-icon {
    color: white;
   font-size: 1.6rem;
   text-shadow: .1rem .1rem .8rem black;
}
.navbar.solid,
.navbar.solid-toggle {
   background: rgba(0, 0, 0, .7)!important;
   transition: background-color 1s ease;
}
.navbar.solid {
   background: rgba(0, 0, 0, .7)!important;
   transition: background-color 1s ease;
}


.flag img{
   max-height:20px;
}

/*-- Remove Button Outline --*/
button:focus, a:focus, a.btn:focus {
   outline: 0;
   -webkit-appearance: none;
   box-shadow: none;
   transition: all .6s ease;
}
button, a, a.btn,
.svg-inline--fa {
   transition: all .6s ease;
}
 
  


/*============= LANDING PAGE =============*/

/*--- Fixed Landing Page Section --*/
.landing {
   position: relative;
   width: 100%;
   height: 100vh;
   display: table;
   
}
.home-wrap {
   clip: rect(0, auto, auto, 0);
   position: absolute;
   height: 100%;
   width: 100%;
   top: 0;
   left: 0;
}
.home-elements {
   background-image: url('../img/hawaii_boat_tours_kotor_background_8_2025.jpg');
    height: 100%;
   width: 100%;
   background-size: cover;
   background-position: center center;
  
  
   top: 0;
   left: 0;
   display: table;
}
#home-blue-cave .home-elements {
   background-image: url('../img/pozadina_blue_cave.jpg');
    
}

#home-private .home-elements {
   background-image: url('../img/private_tour_background_1.jpg');
    
}
#home-confirmation .home-elements {
   background-image: url('../img/pozadina_confirmation_1.jpg');
    
}

#home-lady .home-elements {
   background-image: url('../img/lady_back.jpg');
    
}

#home-montenegro .home-elements {
   background-image: url('../img/reviews_background_12.jpg');
    
}
#home-novi .home-elements {
   background-image: url('../img/reviews_background_12.jpg');
    
}
#home-about .home-elements {
   background-image: url('../img/reviews_background_12.jpg');
    
}
#home-boats .home-elements {
   background-image: url('../img/reviews_background_12.jpg');
    
}

#home-vip .home-elements {
   background-image: url('../img/pozadina_blue_cave.jpg');
    
}


/*-- Landing Page Caption --*/
.caption {
   z-index: 1;
   position: absolute;
   top: 15%;
   width: 100%;
   max-width: 100%;
}

#home-blue-cave .caption {
 
   top: 10%;
   padding-left:50px;
   padding-right:50px;
}
#home-private .caption {
 
   top: 10%;
   padding-left:50px;
   padding-right:50px;
}
#home-confirmation .caption {
 
   top: 8%;
   padding-left:50px;
   padding-right:50px;
}
#home-lady .caption {
 
   top: 10%;
   padding-left:50px;
   padding-right:50px;
}

#home-montenegro .caption {
 
   top: 10%;
   padding-left:50px;
   padding-right:50px;
}

#home-novi .caption {
 
   top: 10%;
   padding-left:50px;
   padding-right:50px;
}

#home-vip .caption {
 
   top: 10%;
   padding-left:50px;
   padding-right:50px;
}

.caption img{
   max-height:300px;
}
.caption h2 {
   font-size: 3rem;
   letter-spacing: .1rem;
   text-shadow: .1rem .1rem .8rem black;
   
   margin-top:50px;
}



.caption p{
   font-size: 1.5rem;
  
   
}
.caption .text-home{
   font-size: 1.2rem;
  
   
}


.caption ul {
  border: none; 
}
.caption h3 {
   font-size: 2.5rem;
   text-shadow: .1rem .1rem .5rem black;
   padding-bottom: 2rem;
}
.caption .btn{
   border: solid 2px white;
   border-width: medium;
   
   font-size: 1.1rem;
}






/*--- CATEGORY SALE --*/
.sale-category-column {
   
   height: 100%;
   width: 100%;
   border-radius:20px 20px 20px 20px;
   background-size: cover;
   background-position: center center;
   -webkit-transform: translateZ(0);
   transform: translateZ(0);
   will-change: transform;
   display: table;
   padding: 1.6rem;
   border-top: .25rem solid #e7d88a;
   box-shadow: 0 0 .8rem rgba(0, 0, 0, .075);
   transition: transform .7s ease;
   position: relative;
   overflow: hidden;
}
.sale-category-column:hover {
   transform: scale(1.1);;
}
.sale-category-column h3 {
   color:#e7d88a;
   text-shadow: .1rem .1rem .8rem black;
   font-size: 1.5rem;
   
}

.sale-category-column p {
   color:white;
   text-shadow: .1rem .1rem .8rem black;
   font-size: 1rem;
   
}
.price {
    font-size: 1.3rem !important;
}
#sale-category{
    
 
}

.container-down{
    
   z-index: 1;
   position: absolute;
   right:0 ;
   overflow: hidden;
   top: 45%;
   width: 100%;
   max-width: 100%; 
}

.container-down.blue-cave-details{
    
 
   top: 60%;
  
}

#sale-category a:hover{

   text-decoration: none;
}

#private{
   background-image: url('../img/private_tour_first_1.jpg');
}

#apartments{
   background-image: url('../img/blue_cave.jpg');
}
#blue{
   background-image: url('../img/blue_cave_first.jpg');
}
#commercial{
   background-image: url('../img/blue_cave.jpg');
}
#investment{
   background-image: url('../img/blue_cave.jpg');
}
#yacht{
   background-image: url('../img/blue_cave.jpg');
}
#lady{
   background-image: url('../img/lady_1234.jpg');
}



/*============= ABOUT SECTION =============*/



.about {
       
   background:white;
  
}

.heading-underline-about {
   width: 3rem;
   height: .2rem;
   
    border-top:5px dotted black;
   margin: 0 auto 2rem;
}

.about-text{
  
}


/*============= SERVICES SECTION =============*/



.services{
    width:100%;
    color:black;
    margin-top:0px;
    background-color:white

}

.services a:href{
    text-decoration:none!important;
}


.services h2 {
 text-align:center;
 font-weight: 700;
 font-size:1.8rem;
 text-decoration:none;
 margin-bottom: 1.5rem;
 color:white;
 transition: transform .4s ease;
}


.service img {
 
  max-height:300px;
   
   
  
}
.services h2:hover {

   transform: scale(.95);
}


.centered-container {
  position: relative;
  text-align: center;
  color: white;
}

.centered {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}








/*============= WEBSITE PRICING SECTION =============*/



.website-pricing{
    width:100%;
    color:black;
    margin-top:0px;
    background-color:white;

}


.heading-underline-our-work {
   width: 3rem;
   height: .2rem;
   
    border-top:5px dotted #b99855;
   margin: 0 auto 2rem;
}

.website-pricing-text-section-two{

  
   text-align:right;
}
.website-pricing-text-section-two h2 {

  

   font-weight: 700;

   font-size: 1.8rem;

   margin-bottom: 1.5rem;

  
   
}

 

.website-pricing-text h2 {

  

   font-weight: 700;

   font-size: 1.8rem;

   margin-bottom: 1.5rem;

   color:#141414;

}



.website-pricing-slider h2 {

 

   font-weight: 700;

   font-size:1.8rem;

  color:#141414;

   margin-bottom: 1.5rem;

  

}



.website-pricing-text .btn{

   border: solid 2px #12bddb;

   border-width: medium;

   

   font-size: 1.1rem;

   color: #12bddb;

   

}




.website-pricing-underline {

      position: absolute;

   width: 3rem;

   height: .2rem;

   left:18px;

   background-color: #b99855 !important;

   

}



.website-pricing-underline-section-two {
position: absolute;
    right:15px;

   width: 3rem;
   height: .2rem;
   background-color:#b99855;
   display: block;margin-left: auto;
   

}

.website-pricing img {
  border-radius: 50%;
  max-height:300px;
  
}

.website-pricing .img-1  {
  display: block;margin-left: auto;
}

.website-pricing .img-3 {
  display: block;margin-left: auto;
}








/*============= TEAM SECTION FIXED BG IMG LIGHT =============*/

.team{
    background-color:#222222;
    border-top: 10px dotted white;
}
.heading-underline-our-team{
   height: .2rem;
   width: 3rem;
    border-top:5px dotted rgba(255,244,234,1);
   margin: 0 auto 2rem;
}
.owl-stage {
   display: flex;
}
.card {
   height: 100%;
   border-radius: 0;
   text-align: center;
   margin: 0 1rem;
   border: .1rem solid rgba(0, 0, 0, .075);
   box-shadow: 0 0 .8rem rgba(0, 0, 0, .075);
   transition: transform .4s ease;
}
.card:hover {
   transform: scale(.95);
}
button.owl-dot.active span,
button.owl-dot:hover span {
   background: #b99855!important;
}
ul.social {
   list-style: none;
   padding: 0;
   margin: 0;
   font-size: 1.5rem;
}
ul.social li {
   display: inline;
   padding-right: .8rem;
}
ul.social li a {
   color: white;
   transition: all .2s ease;
}
ul.social li a:hover {
   color: gray;
}











/*============= CLIENTS SECTION =============*/

#clients-carousel {
   max-width: 1200px;
   margin: 0 auto;
}
.clients img {
   border-radius: 50%;
   transition: transform .3s ease;
}
.clients img:hover {
   transform: scale(.95);
}
blockquote .svg-inline--fa {
   margin: 1rem;
   color: rgba(195,122,107,1);
}
.clients-hr {
   border-top: .1rem solid rgba(195,122,107,1);
}


.heading-underline-clients {
   width: 3rem;
   height: .2rem;
   
    border-top:5px dotted rgba(195,122,107,1);
   margin: 0 auto 2rem;
}


/*===== FIXED BACKGROUND IMG DARK =====*/


.feature{
    
    margin-top:100px !important;
    padding-left:0px !important;
	padding-right:0px !important;



 
}

.social-media{
    padding-left:  30px !important;
    padding-right:  30px !important;
    
    background-color:rgba(245,140,113,1);
}

.feature .box{
    
    border-radius: 15px;
    box-shadow: 0 0 .8rem rgba(0, 0, 0, .075);
    color: rgba(250, 209, 155,1);
    background-color: rgba(255, 244, 234,1);
    
    position: relative;

	
 
}

.feature .curved-text-instagram{
      position:absolute;
         left: 0; 
  right: 0; 
  margin-left: auto; 
  margin-right: auto; 
  

       top:-6rem;
    } 
    
    .feature .curved-text-facebook{
      position:absolute;
        left: 0; 
  right: 0; 
  margin-left: auto; 
  margin-right: auto; 
       top:-6rem;
    } 

 .feature .curved-text-tiktok{
      position:absolute;
        left: 0; 
  right: 0; 
  margin-left: auto; 
  margin-right: auto; 
       top:-6rem;
    } 
    
    .feature .curved-text{
     
        margin-left: auto; 
        margin-right: auto; 
       
    }

.ribbon {
    font-weight: 700;
  position: absolute;
  left: 0; 
  right: 0; 
  margin-left: auto; 
  margin-right: auto; 
  width: 200px; /* Need a specific value to work */
  top:-50px;
  font-size:3rem !important;
}

.ribbon span{
    font-size:3.5rem
}

.feature-content{
    padding-left:  30px !important;
    padding-right:  30px !important;
    color:black;
}

.feature-content{
    margin-top:50px;
    
}


/*--- BOOKING --*/

.booking h3{
   margin-top:30px;
   color:#b99855;
}

.booking {
   background: url('../img/pozadina_booking_2.jpg') no-repeat;
   background-size: cover;
   color: black;
   /* background-color: #505962; */
}
.booking .row.outer {
   background-color: transparent;
   padding: 1rem 2rem 3rem;
}

.booking .box {
   background-color: white;
   border-radius:20px;
}

.caption .box {
   background-color: white;
   border-radius:20px;
  
}
.caption .box p{
   font-size: 1.1rem;
  
}
.caption .h4 {
   color: #b99855 !important;
  
  
} 

/*--- iOS Fixed Background Image --*/
.fixed {
   position: relative;
   width: 100%;
}
.fixed-wrap {
   clip: rect(0, auto, auto, 0);
   position: absolute;
   height: 100%;
   width: 100%;
   top: 0;
   left: 0;
   z-index: -9999;
}
.fixed-dark {
   background-image: url('../img/umbrella_4.jpg');
   position: fixed;
   height: 100%;
   width: 100%;
   background-size: cover;
   background-position: center center;
   -webkit-transform: translateZ(0);
   transform: translateZ(0);
   will-change: transform;
   z-index: -1;
   top: 0;
   left: 0;
   display: table;
}
.dark {
   background-color: rgba(255, 255, 255, .5);
   padding: 7rem 0;
   z-index: 1000;
}





/*============= PRICING =============*/

.jumbotron{
    background-color: transparent !important;
}



.btn-secondary{
    color: rgba(195,122,107,1) !important;
    background-color: rgba(245,186,107,0.6) !important;
    border-color: rgba(245,186,107,0.6)  !important; 
   
    
}




.pricing-column {
    background-color: white;
    
    padding: 1.6rem;
    border-radius:20px;
    box-shadow: 0 0 .8rem rgba(0, 0, 0, .075);
    transition: transform .7s ease;
    
    
}


.hidden-text{
   color: rgba(0, 0, 0, 0);
}



p.pricing-info  {
    margin-bottom:8px;
    font-size: 0.9rem;
    text-align: left !important;
    color:#505962;
    padding-left:10px;
    
}

p.pricing-desc {
    font-size: 1.1rem;
}

p.pricing-price {
    font-size: 2.5rem;
    font-weight: 700;
    color:#12bddb;
}

.pricing-column h3 {
    font-size: 1.4rem;
    color:#12bddb;
    font-weight: 500;
}



.img-pricing {
    max-height:300px;
}

/*============= MANAGMENT ============= */
.text-managment{
   
    
    padding:20px;
}




/*============= MARKETING ============= */

.marketing {
    background-image: url('../img/team_back.jpg');
    height: auto;
    width: 100%;
    background-size: cover;
    background-position: center center;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    will-change: transform;
    display: table;
    padding-bottom:40px;
}



.marketing .caption {
    z-index: 1;
}

.marketing .caption h3 {
    text-shadow:none;
    font-size: 2rem;
    padding-bottom:0px;
    color:white;
}

.marketing .caption p{
    font-size: 1.1rem;
}

.marketing img{
    max-height:250px;
    margin:auto;
}

.marketing .caption ul {
    border: none; 
}

.marketing .caption .btn{
    border: solid 2px #12bddb;
    border-width: medium;
    color:#12bddb;
    font-size: 1.1rem;
}





/*============= FOOTER SECTION =============*/




.footer a,
.footer .social  a {
   color: rgba(195, 122, 107, 1);
   font-size: 1.5rem;
   margin-left:19px;
}
.footer.social  a:hover {
   color: #357EFC;
   
}
.footer-nav a:hover {
   color: #357EFC;
   text-decoration: none;
   
}
hr.socket {
   border-top: .2rem solid #666b71;
   width: 100%;
 }
 
 .footer a,
.footer ul.social li a {
   color: white;
   font-size:1rem;
   padding-left:0 !important;
   margin-left:0 !important;
}
.footer ul.social li a:hover {
   color: white;
   
}
.footer-nav a:hover {
   color: white;
   text-decoration: none;
   
}
 
 
 
 /*============= CONTACT SECTION =============*/

.footer {
   background: url('../img/footer.webp') no-repeat;
   background-size: cover;
   color: #393838;
   /* background-color: #505962; */
}
.row.outer {
   background-color: #b99855;
   padding: 1rem 2rem 3rem;
}
.footer img {
   height: 2rem;
   margin: 1.5rem 0;
}
.footer a,
.footer ul.social li a {
   color: #393838;
   
}
.footer  a:hover {
   color: white;
}
.footer h3 {
  
   margin: 1.5rem 0;
   color: rgba(245, 140, 113, 1);
}


/*--- Contact Form --*/
.form-group {
   margin-bottom: 1.3rem;
}
.form-control {
   background-color: #53595f;
   border-radius: 0;
   border: .15rem solid #666b71;
   color: white!important;
   font-size: 1.1rem;
}
.form-control:focus {
   background-color: #53595f;
   border: .15rem solid #666b71;
}
.form-group input::placeholder,
.form-group textarea::placeholder {
   color: #b2b5b8!important;
}
hr.socket {
   border-top: .2rem solid; 
   color: rgba(255, 244, 234, 1);
   width: 100%;
}


 /*--- DETAILS PAGE--*/
#details{
   padding-top: 2rem; 
   padding-bottom: 2rem;
   color:#505962; 
   background-color:rgba(250, 209, 155, 1);
}

#details img{
   display: block; 
   margin-left: auto;
   margin-right: auto;
   
 
}
 

#details #submit-form{
   background-color:rgba(245, 140, 113, 1);
   padding-left:50px;
   padding-right:50px;
   padding-top:30px;
   padding-bottom:30px;
   border-radius:20px;
   margin-right:300px;
    margin-left:300px;
 
}
input:focus{
    outline: none;
}
::-webkit-input-placeholder { /* WebKit, Blink, Edge */
    color:    #909;
}
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
   color:    #909;
   opacity:  1;
}
::-moz-placeholder { /* Mozilla Firefox 19+ */
   color:    #909;
   opacity:  1;
}
:-ms-input-placeholder { /* Internet Explorer 10-11 */
   color:    #909;
}
::-ms-input-placeholder { /* Microsoft Edge */
   color:    #909;
}

::placeholder { /* Most modern browsers support this now. */
   color:    #909;
}

#title-heading {
  
   background-color: transparent !important;
   width: 100%;
   height:3.5rem ;
   background-size: cover;
   margin-top: 7rem;
   border-bottom: 4px solid rgba(255, 244, 234, 1);
 }
 #title-heading .row {
   width: 100%!important;
   padding: 1rem 2rem 2rem;
 }

 h1.title-heading {
   font-size: 1.9rem;
   font-weight: 700;
   
  
  margin-top: -10px;
   color:#b3914f;
 }
 .title-heading-underline {
   width: 5rem;
   height: .2rem;
   background-color: #357EFC;
   
 }
 
.details-content{
    padding-right:200px;
    padding-left:200px;
}

#details #title-heading{
  margin-top: 0px;
  
   height: auto;
  
     
}

#details #title-heading .row {
   width: 100%!important;
   padding: 1rem 1rem 0rem;
 }

#details h3.title-heading{
  font-weight: 500;
  color:rgba(255,244,234, 1);
     
}


#details h1.title-heading{
   
   font-weight: 500;
   color:rgba(255,244,234, 1);
  
      
 }
#details  .details-info {
 
   
   font-size: 1.2rem;
   

}
#details  .details-info p {
   margin-top: 1rem;
   padding-right: 1.2rem;
}
#details  .details-info a:hover {
    text-decoration: none;  
}




.description{
   margin-top:0px;
   
}

#details  h3.heading {
   margin-top: 20px; 
}


.slider{
   padding-right: 100px !important; 
   padding-left: 100px !important;
}
.description{
   padding-right: 100px !important; 
   padding-left: 100px !important;
}
.carousel-caption{
  
   text-shadow: .1rem .1rem .8rem black;
  
}





/*============= ABOUT US Contact =============*/

.map-container {
   overflow: hidden;
   position: relative;
   width:100%;
  
}

.map-container::after {
   padding-top: 56.25%;
   display: block;
   content: '';
}

.map-container iframe {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   padding-right: 20px;
   padding-left: 20px;
   padding-bottom: 50px;
}



/*============= MEDIA QUERIES =============*/

/* Devices under 992px (lg) */
@media (max-width: 991.98px) {
    
    
  .container-down{
    

   top: 45%;
   
}  
    
    
  .caption h2 {

      font-size: 2rem;

   }
.caption p {

      font-size: 1.1rem;

   }
   .caption h3 {

      font-size: 2.2rem;

      padding-bottom: 1.7rem;

   }

   .caption .btn-lg {

      padding: .7rem 1.2rem;

      font-size: 1rem;

   }
   
   
    .caption h2 {

      font-size: 1.8rem;

   }
   
  
    
 /*============= Marketing section =============*/
 
   .marketing .caption h3 {
        font-size: 2.2rem;
        padding-bottom: 1.7rem;
    }

   .marketing .caption .btn-lg {
        padding: .7rem 1.2rem;
        font-size: 1rem;
    }

    .marketing .sale-btn .btn-lg {
        padding: .7rem 1.2rem;
        font-size: 1rem;
    }

   #details h3.title-heading{
      
      font-size: 1.5rem;
         
    }

    .card h4{
      font-size: 1.3rem;
   }
   .card h5{
      font-size: 1.1rem;
   }
  
   
   
}

/* Devices under 768px (md) */
@media (max-width: 767.98px) {
    
    
    
    .navbar-brand  img{

    height: 80px;

   

    left: 52%;

   

  

 

}
.navbar-brand-text  img{

 max-height:40px;  

}
    
    
    .caption h2 {

      font-size: 1.5rem;

      letter-spacing: .15rem;

      padding-bottom: .5rem;

    

   }

   .caption h3 {

      font-size: 1.7rem;

      padding-bottom: 1.2rem;

   }
   
   
   .home-elements {
   background-image: url('../img/hawaii_boat_tours_kotor_mobile_background_8_2025_1.jpg');

}
#home-blue-cave .home-elements {
   background-image: url('../img/pozadina_mob_blue_cave.jpg');

}
#home-private .home-elements {
   background-image: url('../img/private_tour_mobile_background_1.jpg');

}
#home-confirmation .home-elements {
   background-image: url('../img/pozadina_confirmation_1.jpg');

}
#home-lady .home-elements {
   background-image: url('../img/pozadina_mob_lady.jpg');

}

#home-montenegro .home-elements {
   background-image: url('../img/reviews_background.jpg');

}

#home-novi .home-elements {
   background-image: url('../img/reviews_background.jpg');

}
#home-boats .home-elements {
   background-image: url('../img/reviews_background.jpg');

}
#home-about .home-elements {
   background-image: url('../img/reviews_background.jpg');

}

#home-vip.home-elements {
   background-image: url('../img/pozadina_mob_blue_cave.jpg');

}
   
   
   #home-blue-cave .caption {
 
   top: 8%;
   padding-left:10px;
   padding-right:10px;
}
  #home-lady .caption {
 
   top: 8%;
   padding-left:10px;
   padding-right:10px;
}


#home-montenegro .caption {
 
   top: 8%;
   padding-left:10px;
   padding-right:10px;
}
#home-novi .caption {
 
   top: 8%;
   padding-left:10px;
   padding-right:10px;
}

#home-vip .caption {
 
   top: 8%;
   padding-left:10px;
   padding-right:10px;
}
#home-private .caption {
 
   top: 8%;
   padding-left:10px;
   padding-right:10px;
}
 #home-confirmation .caption {
 
   top: 6%;
   padding-left:10px;
   padding-right:10px;
}  
   

   .caption .btn-lg {

      padding: .6rem 1.1rem;

   }

 
   
   
     .caption {
 
  
   top: 13%;
  
}
.caption h1 {
  
   font-size: 3rem;
   
}
   .landing-elements{

      

      text-align: center;

   }

  .landing img{

      max-height:380px;
      margin-bottom:100px;

   }
   .container-down.blue-cave-details{
    
 
   top: 65%;
  
}
 
   
 /*============= Services section =============*/   
   


.service {
  padding-left:8px !important;
  padding-right:8px !important;
  
}
.service img {

  
}


.service h2 {
    font-size: 1.2rem;
       
  
}






/*============= Website Pricing section =============*/   
   
.row-website-pricing{
    display: flex;
    flex-flow: row wrap;
}

.website-pricing-slider{
    order:1;
}

.website-pricing-text{
    order:2;
    text-align:center;
}
.website-pricing-text-section-two{
    order:2;
    text-align:center;
}
.website-pricing-slider h2 {
     text-align: center;
}

.website-pricing-underline {
    margin: 0 auto 0rem;
    position:relative;
    left:0;
}

.website-pricing img {
  
  max-height:200px;
  
}
.website-pricing-content img{
        display:block;
        margin-top:20px; 
        margin-bottom:10px; 
        margin-left: auto;
        margin-right: auto;
    }


   
   /*============= Marketing section =============*/
   
    .marketing .caption h3 {
        font-size: 1.5rem;
       
        padding-bottom: .5rem;
        
    }

   .marketing .caption h3 {
        font-size: 1.7rem;
       
    }

   .marketing .caption .btn-lg {
        padding: .6rem 1.1rem;
    }

    .marketing .caption {
        margin-top: 0px;
        margin-bottom: 20px;
    }

    .marketing img{
        max-height:200px;
        margin-bottom:100px;
    }
   
   
   
   .text-dark h3{
        margin-top:50px;
   }
   
   .jumb {

   margin-top:-100px;

   }


   .sale-btn .btn-lg {

    padding: .6rem 1.1rem;

  }

   

   .landing-elements{

      text-align: center;

   }
   
   .down-arrow .svg-inline--fa {
  
   font-size: 2rem;
  
}

.details-content{
    padding-right:100px;
    padding-left:100px;
}
 #details #submit-form{

   margin-right:100px;
    margin-left:100px;
 
}
.slider{
   padding-right: 50px !important; 
   padding-left: 50px !important;
}

.description{
   padding-right: 50px !important; 
   padding-left: 50px !important;
}

.feature{
    
    margin-top:150px !important;

	
 
}
   
  
   h1.title-heading {
      font-size: 1.7rem;
      font-weight: 500;
   }

    #details h3.title-heading{
      
      font-size: 1.7rem;
         
    }

    .navbar-brand img {
      height: 80px;
   }

    
   
   
}

/* Devices under 576px (sm) */
@media (max-width: 575.98px) {
    
    
    /* NAVIGATION */
    
    
.navbar-brand  img{

    height: 80px;

   

    left: 52%;

   

  

 

}


.home-elements {
   background-image: url('../img/hawaii_boat_tours_kotor_mobile_background_8_2025_1.jpg');

}
#home-blue-cave .home-elements {
   background-image: url('../img/pozadina_mob_blue_cave.jpg');

}
#home-private .home-elements {
   background-image: url('../img/private_tour_mobile_background_1.jpg');

}
#home-confirmation .home-elements {
   background-image: url('../img/pozadina_confirmation_1.jpg');

}
#home-lady .home-elements {
   background-image: url('../img/pozadina_mob_lady.jpg');

}

#home-montenegro .home-elements {
   background-image: url('../img/reviews_background.jpg');

}

#home-novi .home-elements {
   background-image: url('../img/reviews_background.jpg');

}

#home-boats .home-elements {
   background-image: url('../img/reviews_background.jpg');

}
#home-about .home-elements {
   background-image: url('../img/reviews_background.jpg');

}

#home-vip.home-elements {
   background-image: url('../img/pozadina_mob_blue_cave.jpg');

}
   
  .navbar-brand-text  img{

 max-height:30px;  

} 
    .caption h2 {

      font-size: 1.2rem;

      letter-spacing: .1rem;

      padding-bottom: .4rem;

    

   }

  
   .caption p {

      font-size: 1.1rem;

     

   }
   
   .caption .text-home {

      font-size: 0.9rem;

     

   }
   .caption .btn-lg {

      padding: .4rem 0.9rem;
      font-size: 0.9rem;

   }
   .caption h2 {
  
   font-size: 2rem;
   
   }
   .caption h1 {
  
   font-size: 2.5rem;
   
   }

   .caption h3{

      font-size: 1.2rem;

      padding-bottom: 1rem;

   }
   
   .landing img{

      max-height:350px;

      

   }
   #home-blue-cave .caption {
 
   top: 8%;
   padding-left:10px;
   padding-right:10px;
}
  #home-lady .caption {
 
   top: 8%;
   padding-left:10px;
   padding-right:10px;
}


#home-montenegro .caption {
 
   top: 8%;
   padding-left:10px;
   padding-right:10px;
}
#home-novi .caption {
 
   top: 8%;
   padding-left:10px;
   padding-right:10px;
}

#home-vip .caption {
 
   top: 8%;
   padding-left:10px;
   padding-right:10px;
}
  
   
   .about-text{
       font-size: 1.05rem !important;
   }
   
   
   .sale-category-column h3 {
  
   font-size: 1.5rem;
   
}
   
   
   
   /*============= Website Pricing section =============*/ 
   
   .website-pricing-content{
        margin-top:0px; 
        
    }
   
    .website-pricing-content img{
        display:block;
        margin-top:20px; 
        margin-bottom:10px; 
        margin-left: auto;
        margin-right: auto;
    }
 
   
   .website-pricing-text .btn{
        padding: .4rem .9rem;
        font-size: .9rem;
    }
    
    .website-pricing-text h2 {
        
        font-weight: 500;
        font-size: 1.2rem;
        text-align: center;
        margin-bottom: 1.2rem;
    }

    .website-pricing-slider h2 {
       
        font-weight: 500;
        font-size: 1.3rem;
        text-align: center;
        margin-bottom: 1.2rem;
        margin-top: 1.2rem;
    }

   .short-text-website-pricing{
        font-size: 0.9rem;
        text-align: center;
        margin-top: 0;
    }
    
    .website-pricing-underline {
        margin: 0 auto 0rem;
        position:relative;
        left:0;
    }
   
   
   
   
   
 
   
    /*============= FEATURES section =============*/ 
   .feature{
      margin-top:30px; 
    }
    
      .container-down{
    

   top: 45%;
   
}  
    .features{
       position:relative;
      top:-80px; 
    }
    .feature p{
    
     margin-right:10px;
    margin-left:10px;
    font-size:0.9rem;
  
   
}

.ribbon {
   
    
   
    
}

.feature-content{
    margin-top:50px;
}
   
  

    


 
    
   
  
    
   
   .about-text{
        margin-top:30px;
   }
   
 .description{
    margin-top: -50px;
   font-size: 0.9rem; 
 }
   h3.heading {
     
      font-weight: 600;
      font-size: 1.5rem;
      
      margin-bottom: 1.5rem;
   }

   h2.heading {
      margin-top: -20px;
      margin-bottom: 20px;
      font-weight: 400;
      font-size: 1.2rem;
   }

   .heading-underline {
 
      margin: 0 auto 0rem;
   }

   #sale-carousel{
      padding: 3rem 0;
   }

  

   .custom-toggler-icon {
      
      font-size: 1.3rem;
   }

   .sale-category-column h3 {
   
      font-size: 1.1rem;
      
   }
   
   .sale-category-column p {
      font-size: 0.9rem;
    
      
   }
   
   
   .img-pricing {
    max-height:250px;
    margin-top:50px;
}
   
   
   .card{
   scale(1.3);
   }

   .card h4{
      font-size: 1.1rem;
   }
   .card h5{
      font-size: 1rem;
   }
   .card p{
      font-size: 0.9rem;
   }
   .card p.price{
      font-size: 1.1rem;
   }

   .card p.size{
      font-size: 1.1rem;
   }

   
   h1.title-heading {
      font-size: 1.4rem;
      font-weight: 600;
      margin-top: -4px;
     
    }
    #details h3.title-heading{
      
      font-size: 1.4rem;
      font-weight: 400;   
    }

    #title-heading {
  
      margin-top: 5rem;
    }
    
    .details-content{
    padding-right:20px;
    padding-left:20px;
}

    #details  h3.heading {
      margin-top: 68px; 
   }
#details #submit-form{
padding-right:25px;
    padding-left:25px;
   margin-right:10px;
    margin-left:10px;
 
}

.slider{
   padding-right: 0px !important; 
   padding-left: 0px !important;
}
.description{
    margin-top:3rem;
   padding-right: 0px !important; 
   padding-left: 0px !important;
}
   .title{
      margin-bottom: 50px;
        
     }
     
  
    

   
}


/*============ BOOTSTRAP BREAK POINTS:

Extra small (xs) devices (portrait phones, less than 576px)
No media query since this is the default in Bootstrap

Small (sm) devices (landscape phones, 576px and up)
@media (min-width: 576px) { ... }

Medium (md) devices (tablets, 768px and up)
@media (min-width: 768px) { ... }

Large (lg) devices (desktops, 992px and up)
@media (min-width: 992px) { ... }

Extra (xl) large devices (large desktops, 1200px and up)
@media (min-width: 1200px) { ... }

=============*/