@import url('https://fonts.googleapis.com/css?family=Lato:400,700');

body {
	overflow-x:hidden;
	font-family: 'Lato', sans-serif;
	color: #505962;
}

/*--- Nav Scrolling Offset --*/
.offset:before {
	height: 62px;
	margin-top: -62px;
	content: "";
	display: block;
}

/*--- Extra Bootstrap Column Padding --*/
[class*="col-"] {
	padding: 1rem;
}

/*============= NAVIGATION =============*/

.navbar {
	padding: .6rem 1rem;
	text-transform: uppercase;
	font-size: .9rem;
	font-weight: 700;
	letter-spacing: .1rem;
	background-color: rgba(57, 63, 70, .9)!important;
}
.navbar-brand img {
	height: 2rem;
}
.navbar-nav .nav-link {
	color: white;
	padding-top: .8rem;
}
.navbar-nav .nav-link.active,
.navbar-nav .nav-link:hover {
	color: #09fe31;  /*=== was #00B3FF ====*/
}
.svg-inline--fa.fa-w-14 {
	color: white;
	font-size: 1.6rem;
}
.navbar-nav li {
	padding-right: .8rem;
}

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

.home-inner {
	background-image: url('../img/landing3.jpg');
}
.caption {
	width: 100%;
	max-width: 100%;
	position: absolute;
	top: 40%;
	z-index: 1;
}
.caption h3 {
	color: white;
	font-size: 4rem;
	text-transform: uppercase;
	padding-bottom: 2rem;
}
.btn {
	border-width: medium;
	border-radius: 0;
	padding: .5rem 1.1rem;
	font-size: .9rem;
	text-transform: uppercase;
}

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

.jumbotron {
	margin-bottom: 0;
	border-radius: 0;
	padding: 3rem 0 3rem;
}
.narrow {
	width: 85%;
	margin: 0 auto;
	padding-top: 1rem;
}
h3.heading {
	font-size: 1.9rem;
	font-weight: 700;
	text-align: center;
	text-transform: uppercase;
	margin-bottom: 1.9rem;
}
.heading-underline {
	width: 3rem;
	height: .2rem;
	background-color: #00B3FF;
	margin: 0 auto 2rem;
}
.about svg.svg-inline--fa {
	color: #00B3FF;
	margin: 1rem auto;
}
.about h3 {
	font-size: 1.4rem;
	text-transform: uppercase;
	padding-bottom: .4rem;
}
.about p {
	font-size: 1.1rem;
}

/*============= PORTFOLIO SECTION =============*/

.padding {
	padding: 2rem 0;
}
.no-padding [class*=col-] {
	padding: 0 2%;
}

img.example-image {
	width: 100%;
	height: auto;
	margin-bottom: 1.5rem;
}

.portfolio-item img {
	transition: transform .4s ease;
}
.portfolio-item img:hover {
	transform: scale(1.1);
	cursor: zoom-in;
}

.portfolio-item {
	overflow: hidden;
	margin-bottom: 20px;
	border-radius: 6px; 	
}

.portfolio-item h4 {
	text-align:center;
}

.portfolio-item img{
	border: 1px solid brown;
	border-radius: 6px; 	
}


.inscription {
	width: 80%; 
	height: auto; 
	margin-top: 7%;
	border: 1px grey solid; 
	border-radius: 5px; 
	box-shadow: 3px 3px 4px rgba(0, 0, 0, .5);
}


/*============= PRICES SECTION =============*/

.prices table {
	display: -webkit-flex;
	display: flex;
	max-width: 95%;
}
.prices th {
	background-color: rgba(0,110,255,.4);
	height: 40px;
	padding: 5px;
}
.prices tr:nth-of-type(odd) {
	height: 27px;
	background-color: rgba(255,255,255,.9);
}

.prices tr:nth-of-type(even) {
	height: 27px;
	background-color: rgba(0,110,255,.2);
}

.prices td {
	padding: 5px 8px 5px 8px;
}
 
.prices p {
	font-family:Verdana, Geneva, Tahoma, sans-serif;
	font-size: 1.1em;
	padding: 0;
}

/*============= TESTIMONIALS SECTION =============*/

.card {
	margin: 0 1rem;
	border-radius: 0;
}
.card-img-top {
	border-radius: 5px;
	border: 2px solid gray;
}
.card h4 {
	font-weight: 700;
}
.card h5 {
	color: #00B3FF;
}
.card p {
	border-top: 1px solid rgba(0, 0, 0, 0.1);
	padding: 1rem;
	margin: 1rem 0 1.5rem;
}

/*============= CONTACT SECTION =============*/

.footer .row {
	background-color: rgba(57, 63, 70, .85);
	padding: 1rem 2rem 3rem;
	color: white;
}
.footer img {
	height: 2rem;
	margin: 1.5rem 0;
}
.footer a {
	color: white;
}
.footer svg.svg-inline--fa {
	margin: 1.2rem .5rem 0 0;
}
.footer svg.svg-inline--fa:hover {
	color: #00B3FF!important;
}
.footer h3 {
	text-transform: uppercase;
	margin: 1.5rem 0;
}

/*--- Contact Form --*/
.form-group {
	margin-bottom: 0.5 rem;
}
.form-control {
	background: #53595f;
	border-radius: 0;
	border: .15rem solid #666b71;
	color: white!important;
}
.form-control:focus {
	background: #53595f;
	border: .15rem solid #666b71;
}
.form-group input::placeholder,
.form-group textarea::placeholder {
	color: #b2b5b8!important;
}
input.btn {
	cursor: pointer;
}
hr.socket {
	width: 100%;
	border-top: .2rem solid #666b71;
}

iframe.noScrolling{
  width: 100%; /*or any other size*/
  height: 650px; /*or any other size*/
  overflow: hidden;
}

/*============= RESULTS ===================*/

.results {
	width:95%; 
	min-width: 300px;
}

.results thead {
	background-color: #3333cc;
	height: 40px;
	padding: 5px;
	font-weight:bold;
	color: #fff;
}
.results tr:nth-of-type(1n+1) {
	height: 27px;
	background-color: rgba(255,255,255,.9);
}

.results tr:nth-of-type(2n+1) {
	height: 27px;
	background-color: rgba(0,110,255,.2);
}

.results td {
	padding: 5px 8px 5px 8px;
	text-align:center;
}



/*============= PRICES TABLE ==============*/
.prices table {
	display: -webkit-flex;
	display: flex;
}
.prices th {
	background-color: rgba(0,110,255,.4);
	height: 40px;
	padding: 5px;
}
.prices tr:nth-of-type(odd) {
	height: 27px;
	background-color: rgba(255,255,255,.9);
}

.prices tr:nth-of-type(even) {
	height: 27px;
	background-color: rgba(0,110,255,.2);
}

.prices td {
	padding: 5px 8px 5px 8px;
}

.days5, days10 {
	width: 15%;
	max-width: 25px;
}

.bike_type {
	width: 70%;
	min-width: 290px;
}

/*============= FOOTER COPYRIGHT ===========*/
.footer .copyright {
  -webkit-flex: 2 1 500px;
	flex: 2 1 500px;
	margin-right: 30px;
}

.copyright, h3 {
	text-align: center;
}


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

/* Medium (md) devices (tablets, 768px and under) */

@media (max-width: 768px) {
	.caption {
		top: 35%;
	}
	.caption h3 {
		font-size: 1.8rem;
		padding-bottom: 1.2rem;
	}
}

/* Mobile Navigation Force Display */
@media screen and (max-width: 1024px) {
  nav, 
  nav div, 
  nav ul {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    visibility: visible !important;
    opacity: 1 !important;
    height: auto !important;
  }

  nav ul li {
    display: inline-block !important;
    margin: 5px 10px !important;
  }

  nav ul li a {
    color: #ffffff !important;
    font-size: 16px !important;
    padding: 8px 12px !important;
    display: block !important;
  }
}
/* End Mobile Navigation Force Display */


/* Custom Blue Link for Header/Contact Section */
h3 a[href="cottages_enquiry.html"] {
  color: #004080;
  text-decoration: underline;
}

h3 a[href="cottages_enquiry.html"]:hover {
  color: #0066cc; /* Darkens slightly on mouse hover */
}

.contact-container {
  max-width: 600px;
  margin: 40px auto; /* Adds clean spacing top and bottom */
  padding: 20px;
}



/* Clean, Modern Pricing Table */
/* Ensure even column sizing */
/* ==========================================
   PRICING TABLE STYLES
   ========================================== */

.pricing-table {
  width: 100%;
  max-width: 900px;
  margin: 30px auto;
  border-collapse: collapse;
  background-color: #ffffff;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  table-layout: fixed; /* Holds strict column widths */
}

/* Base Header & Cell Formatting */
.pricing-table th,
.pricing-table td {
  padding: 14px 16px;
  font-size: 0.95rem;
  color: #333333;
  vertical-align: middle;
}

/* Header Specifics */
.pricing-table th {
  background-color: #2c3e50; /* Header accent color */
  color: #ffffff;
  font-weight: 600;
  text-transform: uppercase;
  font-size: 0.85rem;
  letter-spacing: 0.5px;
  border: none;
}

/* Alternating Row Stripes */
.pricing-table tbody tr {
  background-color: #ffffff;
  border-bottom: 1px solid #eef2f5;
}

.pricing-table tbody tr:nth-child(even) {
  background-color: #f8fafc !important; /* Soft light blue/grey stripe */
}

.pricing-table tbody tr:hover {
  background-color: #f1f5f9; /* Subtle hover effect */
}

/* ------------------------------------------
   COLUMN WIDTHS & ALIGNMENTS (5 Columns Total)
   ------------------------------------------ */

/* Col 1: Season Name (Left-aligned) */
.pricing-table th:nth-child(1),
.pricing-table td:nth-child(1) {
  width: 22%;
  text-align: left;
}

/* Col 2: Period / Dates (Left-aligned, pulled closer to prices) */
.pricing-table th:nth-child(2),
.pricing-table td:nth-child(2) {
  width: 33%;
  text-align: left;
}

/* Cols 3, 4, 5: The 3 Cottages (Right-aligned, equal 15% width each) */
.pricing-table th:nth-child(3),
.pricing-table td:nth-child(3),
.pricing-table th:nth-child(4),
.pricing-table td:nth-child(4),
.pricing-table th:nth-child(5),
.pricing-table td:nth-child(5) {
  width: 15%;
  text-align: right;
  font-weight: 600;
}

/* ------------------------------------------
   MOBILE RESPONSIVENESS
   ------------------------------------------ */
@media screen and (max-width: 650px) {
  .pricing-table {
    display: block;
    overflow-x: auto;
    white-space: nowrap;
  }
}

/* Inline Contact Line Alignment */
.contact-line {
  display: flex;
  align-items: center;
  flex-wrap: wrap; /* Prevents text breaking on small mobile screens */
  gap: 8px; /* Smooth spacing between text and button */
  font-size: 1.5rem;
  color: #ffffff;
}

/* Styled Inline Link Button */
.button-link {
  display: inline-block;
  background-color: #2c3e50; /* Matches your pricing table header accent */
  color: #ffffff;
  padding: 6px 14px;
  border-radius: 4px;
  text-decoration: none;
  font-weight: 600;
  font-size: 1.5rem;
  transition: background-color 0.2s ease, transform 0.1s ease;
  line-height: 1; /* Keeps button height tight to the text line */
}

/* Hover & Active States */
.button-link:hover {
  background-color: #1a252f; /* Darkens slightly on hover */
  color: #ffffff;
  text-decoration: none;
}

.button-link:active {
  transform: translateY(1px); /* Subtle press effect */
}

/*============ 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) { ... }

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