:root
{
    --txt-clr:rgb(0, 0, 0);
    --bg-clr:#fff;
    --accent-color:#ffd800;
}
html{scroll-behavior: smooth;}
body{  margin-top:0; font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;    overflow-x:hidden;}

/* change the background color */
.navbar-custom {z-index:2000; background-color: rgba(255,255,255,0);}

@media screen and (max-width:768px)
{  
    .navbar-custom {z-index:2000; background-color: rgba(255,255,255,1);}

}

/* change the brand and text color */
.navbar-custom .navbar-brand,
.navbar-custom .navbar-text { letter-spacing: 1px; color: #333;}
/* change the link color */
.navbar-custom .navbar-nav .nav-link { color: #333;font-size:1.125rem}

/* change the color of active or hovered links */
.navbar-custom .nav-item.active .nav-link,
.navbar-custom .nav-item:hover .nav-link { color: #555;}

.btn-warning{ background-color:#ffd800 !important;}


h1,h2,h3{ letter-spacing: 1px;}    
h4{padding:0 0 0.5rem 0;margin:0;font-size:1.25rem;  }

a, a:hover{color:#333;text-decoration:none;}

.badge {
    font-weight: 100;
}
.tours-bg, .badge-primary{background-color:#0d81d7}
p{text-align:left;}

    p.payments {
        font-size: 3.5rem;  color:#0d81d7
    }

ol{margin:1rem 3rem}
ol li{margin:0.5rem 0;font-weight:bold;}

.hero-section {
    background-image: url('/assets/media/169.jpg'); /* Replace 'background-image-url.jpg' with your image path */
    height: 100vh; /* 100% of the viewport height */
    background-size: cover;
    background-position: center;
    display: flex;
    justify-content: start;
    align-items: center;
    color: #fff; /* White text color */
 }
.hero-section-content{border-radius: 0.25rem;
    /* background-color: rgba(255,255,255,1); */
    color: #fff;
    margin: 0 10vw;
padding: 2rem;   text-align: left;
    max-width: 720px;  
}

@media screen and (max-width:1200px)
{  
    .hero-section {background-image: url('/assets/media/169-sm.jpg');    }
}

h1.hero-heading{font-size:clamp(32px,5vw,50px);}
p.lead{font-size:clamp(16px,3vw,32px);}

section{padding:4rem 0;}


img.left-image{margin-top:3.75rem;width:100%;height:auto;}

#about a,a:hover{color:#333;text-decoration:none;}    
#business,#cruise {background-color:#f1f1f1;border-top:#ffd800 0.35rem solid;}    


img.car{width:100%;margin:1rem; max-width:11rem;height:auto;flex:auto; border: 1px solid #aaa;}
img.car-lg{width:100%;max-width:28rem;height:auto;flex:auto; margin:0}

.card-link {
  position: relative;z-index:1000
}

p.card-text{   white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;}

.jumbotron{background-color:#f1f1f1 !important;padding-top: 8rem;}
.card-body{background-color:rgba(0,0,0,.03);}

p.section-intro {  margin: 0 auto;     padding:1rem 1rem 1rem 1rem;    max-width: 48rem;    text-align: left;}
p.additional-cost{  margin: 3rem auto 0 auto;     padding:1rem 1rem 1rem 1rem;    max-width: 48rem;    text-align: left;font-weight:bold;background-color:#f1f1f1}

ul.tour-list {  margin: 0 auto;     padding:1rem 1rem 1rem 1rem;    max-width: 48rem;    text-align: left;}
ul.tour-list li {  padding: 3rem 0;border-bottom:1px solid #ccc;clear:both;min-height:10rem;list-style:none;}
ul.tour-list li.blue {  padding: 3rem 0;border-bottom:1px solid #999;clear:both;min-height:10rem}
ul.tour-list li:first-child {padding: 1rem 0 3rem 0;border-bottom:1px solid #ccc;clear:both;min-height:10rem}
ul.tour-list li:last-child {  padding: 3rem 0 0 0;border-bottom:0 solid #1c97d5;clear:both;min-height:10rem}
ul.tour-list li .image-cropper { float: left;  margin: 0 2rem 0 0;width:8rem;height:7rem; position: relative;  overflow: hidden;  border: 0 #999 solid;}
ul.tour-list li img { width:13rem;height:auto; margin:0; }  
ul.tour-list li .details {  overflow: hidden;font-weight:normal;font-size: 1rem;text-align:left;  line-height: 125%;}
ul.tour-list li .details h3{padding:0 0 0.5rem 0;margin:0;font-size:1.25rem;line-height:100%}
ul.tour-list li .details h4{padding:1rem 0 0 0;}
ul.tour-list li .details .spacer{padding:0.5rem 0;}
ul.tour-list li .details .text {margin:0 0 1rem 0;}
ul.tour-list li .details .text p{margin:0 0 1rem 0; line-height:150%}
ul.tour-list li .details .price {font-weight:bold;margin: 0 0 1rem 0;}
ul.tour-list li .details .duration {font-weight:bold}
ul.tour-list li .details a.contact-button{text-decoration:none;margin:1rem 0 0 0; border-radius: 0.15rem;background-color: #ffd800 ;color:#000;font-weight:normal; display: inline-table; font-size:1rem;padding: 0.5rem 1rem;font-family: Arial, serif;}

#booking a, a:hover {   color: #333;    text-decoration: none;}

/*profile*/
.card-profile {
    margin-bottom: 1.5rem;
    transition: .5s;
    border: 0;
    display: inline-block;
    position: relative;
    width: 100%;
    box-shadow: none;
}

.card-profile .body {          padding: 1rem;    }

.card-profile .profile-image img {        border-radius: 50%;        width: 7rem;        border: 0 solid #fff;    }

footer{  padding:2rem;color:#fff;background-color:#000;}
footer a,a:hover{color:#fff;}

@media print { 
    #nav, a.more { display: none !important; } 

    #services{background-color:#fff;} 
    #about-en{background-color:#fff;} 
}

@media screen and (max-width:320px)
{  
    html {font-size: 14px;}

    img.car-lg{width:100%;max-width:28rem;height:auto;flex:auto; margin:2rem 0 0 0}
   
    ul.tour-list li {  padding: 3rem 0;border-bottom:0 solid #ccc;clear:both;min-height:10rem}
    ul.tour-list li.blue {  padding: 3rem 0;border-bottom:0 solid #999;clear:both;min-height:10rem}
    ul.tour-list li .image-cropper { float: left;  margin:0 0 1rem 0;width:100%;height:auto; position: relative;  overflow: initial;  border: 0 #999 solid;}
    ul.tour-list li img { width:100%;height:auto; }  
    ul.tour-list li .details { width:100%; overflow: hidden;font-weight:normal;font-size: 1rem;text-align:left; line-height: 125%;}
}
@media screen and (min-width: 320px) and (max-width:480px)
{  
    html {font-size: 14px;}
   
    img.car-lg{width:100%;max-width:28rem;height:auto;flex:auto; margin:2rem 0 0 0}
    
    ul.tour-list li {  padding: 3rem 0;border-bottom:0 solid #ccc;clear:both;min-height:10rem}
    ul.tour-list li.blue {  padding: 3rem 0;border-bottom:0 solid #999;clear:both;min-height:10rem}
    ul.tour-list li .image-cropper { float: left;  margin:0 0 1rem 0;width:100%;height:auto; position: relative;  overflow: initial;  border: 0 #999 solid;}
    ul.tour-list li img { width:100%;height:auto; }  
    ul.tour-list li .details { width:100%; overflow: hidden;font-weight:normal;font-size: 1rem;text-align:left; line-height: 125%;}
}
@media screen  and (min-width:480px) and (max-width:640px)
{  
    html {font-size: 14px;}
   
    img.car-lg{width:100%;max-width:28rem;height:auto;flex:auto; margin:2rem 0 0 0}

    ul.tour-list li {  padding: 3rem 0;border-bottom:0 solid #ccc;clear:both;min-height:10rem}
    ul.tour-list li.blue {  padding: 3rem 0;border-bottom:0 solid #999;clear:both;min-height:10rem}
    ul.tour-list li .image-cropper { float: left;  margin:0 0 1rem 0;width:100%;height:auto; position: relative;  overflow: initial;  border: 0 #999 solid;}
    ul.tour-list li img { width:100%;height:auto; }  
    ul.tour-list li .details { width:100%; overflow: hidden;font-weight:normal;font-size: 1rem;text-align:left; line-height: 125%;}
}

@media screen and (min-width: 640px) and (max-width:1024px)
{  
    html {font-size: 15px;}
}

@media screen and (min-width: 1024px) and (max-width:1280px)
{  
    html {font-size: 16px;}
}

@media screen and (min-width: 1280px) and (max-width:1440px)
{  
    html {font-size: 17px;}
}

@media screen and (min-width: 1440px)
{  
    html {font-size: 18px;}
}







/*gdpr poppup start*/
.cookieConsentContainer 
{
	border:1px solid var(--txt-clr);	
	z-index: 999;
	width: 350px;
	min-height: 20px;	
	box-sizing: border-box;
	padding: 30px 30px 30px 30px;	
	background: var(--bg-clr);
	overflow: hidden;
	position: fixed;
	bottom: 30px;
	right: 30px;
	display: none;
}

.cookieConsentContainer .cookieTitle
{
	border:none !important;
	font-family: OpenSans, arial, "sans-serif";
	font-size: 22px;
	line-height: 20px;
    color: var(--txt-clr);    
}

.cookieConsentContainer .cookieDesc 
{
	margin: 20px 0 0 0;
	padding: 0;
    font-size:14px;
	font-family: OpenSans, arial, "sans-serif";
	display: block;
	line-height:150%;
    color: var(--txt-clr);    
}

.cookieConsentContainer .cookieDesc a
{
	border:none !important;	
    font-family: OpenSans, arial, "sans-serif";
    color: var(--txt-clr);
    text-decoration: underline;
}

.cookieConsentContainer .cookieDesc a:hover
{
	border:none !important;	
    font-family: OpenSans, arial, "sans-serif";
    color: var(--txt-clr);    
    text-decoration: underline;
}


.cookieConsentContainer .cookieButton a
{
	display: inline-block;
	font-family: OpenSans, arial, "sans-serif";
	color: var(--bg-clr);	
	font-size: 14px;
	font-weight: bold;
	margin-top: 14px;
	background: var(--txt-clr);;	
	box-sizing: border-box; 
	padding: 15px 24px;	
	text-align: center;	
	transition: background 0.3s;
}

.cookieConsentContainer .cookieButton a:hover
{
	cursor: pointer;	
    color: var(--txt-clr);    
    background-color: var(--accent-color);    

}

@media (max-width: 640px)
{
	.cookieConsentContainer
	{
		bottom: 1px !important;
		left: 0px !important;
		width: 100%  !important;
	}
}
/*gdpr popup finish*/