/* Template: Tivo - SaaS App HTML Landing Page Template
   Author: Inovatik
   Created: Sep 2019
   Description: Master CSS file
*/

/*****************************************
Table Of Contents:

01. General Styles
02. Preloader
03. Navigation
04. Header
05. Customers
06. Description
07. Features
08. Features Lightboxes
09. Details
10. Video
11. Pricing
12. Testimonials
13. Newsletter
14. Footer
15. Copyright
16. Back To Top Button
17. Extra Pages
18. Sign Up and Log In Pages
19. Media Queries
******************************************/

/*****************************************
Colors:
- Backgrounds, buttons, bullets, icons - blue  #FFDB58
- Backgrounds, light button, light body text - light gray #f3f7fd
- Headings text - black #333
- Body text - dark gray #555
******************************************/


/******************************/
/*     01. General Styles     */
/******************************/
body,
html {
    width: 100%;
	height: 100%;
}

body, p {
	color: #555; 
	font: 400 1rem/1.625rem "Open Sans", sans-serif;;
}

.p-large {
	font: 400 1.125rem/1.75rem "Open Sans", sans-serif;
}

.p-small {
	font: 400 0.875rem/1.5rem "Open Sans", sans-serif;
}

h1 {
	color: #333;
	font: 700 2.5rem/3.125rem "Open Sans", sans-serif;
	letter-spacing: -0.2px;
}

h2 {
	color: #333;
	font: 700 2rem/2.625rem "Open Sans", sans-serif;
	letter-spacing: -0.2px;
}

h3 {
	color: #333;
	font: 700 1.625rem/2.125rem "Open Sans", sans-serif;
	letter-spacing: -0.2px;
}

h4 {
	color: #333;
	font: 700 1.375rem/1.75rem "Open Sans", sans-serif;
	letter-spacing: -0.1px;
}

h5 {
	color: #333;
	font: 700 1.125rem/1.5rem "Open Sans", sans-serif;
	letter-spacing: -0.1px;
}

h6 {
	color: #333;
	font: 700 1rem/1.375rem "Open Sans", sans-serif;
	letter-spacing: -0.1px;
}

.above-heading {
	color:  #FFDB58;
	font: 700 0.75rem/0.875rem "Open Sans", sans-serif;
	text-align: center;
}

.p-heading {
	margin-bottom: 3.25rem;
}

.testimonial-text {
	font: italic 400 1rem/1.625rem "Open Sans", sans-serif;
}
/* Media Query for Mobile Phones */
@media screen and (max-width: 768px) {
	.testimonial-text {
		font: italic 400 1rem/1.625rem "Open Sans", sans-serif;
		text-align: left; /* Align text to the left instead of center */
	}
	}

.testimonial-author {
	font: 700 1rem/1.625rem "Open Sans", sans-serif;
	letter-spacing: -0.1px;
}

.li-space-lg li {
	margin-bottom: 0.375rem;
}

.indent {
	padding-left: 1.25rem;
}

a {
	color: #555;
	text-decoration: underline;
}

a:hover {
	color: #555;
	text-decoration: underline;
}

a.white {
	color: #000000;
}

.decorative-line {
	display: block;
	width: 5rem;
	height: 0.5rem;
	margin-right: auto;
	margin-left: auto;
}

.blue {
	color:  #FFDB58;
}

.btn-solid-reg {
	display: inline-block;
	padding: 1.1875rem 2.125rem 1.1875rem 2.125rem;
	border: 0.125rem solid  #FFDB58;
	border-radius: 2rem;
	background-color: #ffffff;
	color:  #FFDB58;
	font: 700 0.875rem/0 "Open Sans", sans-serif;
	text-decoration: none;
	transition: all 0.2s;
}

.btn-solid-reg:hover {
	background-color: transparent;
	color: #ffffff;
	text-decoration: none;
}

.btn-solid-lg {
	display: inline-block;
	padding: 1.375rem 2.625rem 1.375rem 2.625rem;
	border: 0.125rem solid  #FFDB58;
	border-radius: 2rem;
	background-color:  #FFDB58;
	color: #fff;
	font: 700 0.875rem/0 "Open Sans", sans-serif;
	text-decoration: none;
	transition: all 0.2s;
}

.btn-solid-lg:hover {
	background-color: transparent;
	color:  #FFDB58;
	text-decoration: none;
}

.btn-outline-reg {
	display: inline-block;
	padding: 1.1875rem 2.125rem 1.1875rem 2.125rem;
	border: 0.125rem solid  #FFDB58;
	border-radius: 2rem;
	background-color: transparent;
	color:  #FFDB58;
	font: 700 0.875rem/0 "Open Sans", sans-serif;
	text-decoration: none;
	transition: all 0.2s;
}

.btn-outline-reg:hover {
	background-color:  #FFDB58;
	color: #fff;
	text-decoration: none;
}

.btn-outline-lg {
	display: inline-block;
	padding: 1.375rem 2.625rem 1.375rem 2.625rem;
	border: 0.125rem solid  #FFDB58;
	border-radius: 2rem;
	background-color: transparent;
	color:  #FFDB58;
	font: 700 0.875rem/0 "Open Sans", sans-serif;
	text-decoration: none;
	transition: all 0.2s;
}

.btn-outline-lg:hover {
	background-color:  #FFDB58;
	color: #fff;
	text-decoration: none;
}

.btn-outline-sm {
	display: inline-block;
	padding: 0.875rem 1.5rem 0.875rem 1.5rem;
	border: 0.125rem solid  #FFDB58;
	border-radius: 2rem;
	background-color: transparent;
	color:  #FFDB58;
	font: 700 0.875rem/0 "Open Sans", sans-serif;
	text-decoration: none;
	transition: all 0.2s;
}

.btn-outline-sm:hover {
	background-color:  #FFDB58;
	color: #fff;
	text-decoration: none;
}

.form-group {
	position: relative;
	margin-bottom: 1.25rem;
}

.form-group.has-error.has-danger {
	margin-bottom: 0.625rem;
}

.form-group.has-error.has-danger .help-block.with-errors ul {
	margin-top: 0.375rem;
}

.label-control {
	position: absolute;
	top: 0.87rem;
	left: 1.25rem;
	color: #555;
	opacity: 1;
	font: 400 0.875rem/1.375rem "Open Sans", sans-serif;
	cursor: text;
	transition: all 0.2s ease;
}

/* IE10+ hack to solve lower label text position compared to the rest of the browsers */
@media screen and (-ms-high-contrast: active), screen and (-ms-high-contrast: none) {  
	.label-control {
		top: 0.9375rem;
	}
}

.form-control-input:focus + .label-control,
.form-control-input.notEmpty + .label-control,
.form-control-textarea:focus + .label-control,
.form-control-textarea.notEmpty + .label-control {
	top: 0.125rem;
	opacity: 1;
	font-size: 0.75rem;
	font-weight: 700;
}

.form-control-input,
.form-control-select {
	display: block; /* needed for proper display of the label in Firefox, IE, Edge */
	width: 100%;
	padding-top: 1.0625rem;
	padding-bottom: 0.0625rem;
	padding-left: 1.25rem;
	border: 1px solid #c4d8dc;
	border-radius: 0.25rem;
	background-color: #fff;
	color: #555;
	font: 400 0.875rem/1.875rem "Open Sans", sans-serif;
	transition: all 0.2s;
   /* add (-webkit-appearance: none;) i removed it beacuse it was yellow marked */
}

.form-control-select {
	padding-top: 0.5rem;
	padding-bottom: 0.5rem;
	height: 3rem;
}

/* IE10+ hack to solve lower label text position compared to the rest of the browsers */
@media screen and (-ms-high-contrast: active), screen and (-ms-high-contrast: none) {  
	.form-control-input {
		padding-top: 1.25rem;
		padding-bottom: 0.75rem;
		line-height: 1.75rem;
	}

	.form-control-select {
		padding-top: 0.875rem;
		padding-bottom: 0.75rem;
		height: 3.125rem;
		line-height: 2.125rem;
	}
}

select {
    /* you should keep these first rules in place to maintain cross-browser behavior */
    -webkit-appearance: none;
	-moz-appearance: none;
	-ms-appearance: none;
    -o-appearance: none;
    appearance: none;
    background-image: url('../images/down-arrow.png');
    background-position: 96% 50%;
    background-repeat: no-repeat;
    outline: none;
}

select::-ms-expand {
    display: none; /* removes the ugly default down arrow on select form field in IE11 */
}

.form-control-textarea {
	display: block; /* used to eliminate a bottom gap difference between Chrome and IE/FF */
	width: 100%;
	height: 8rem; /* used instead of html rows to normalize height between Chrome and IE/FF */
	padding-top: 1.25rem;
	padding-left: 1.3125rem;
	border: 1px solid #c4d8dc;
	border-radius: 0.25rem;
	background-color: #fff;
	color: #555;
	font: 400 0.875rem/1.75rem "Open Sans", sans-serif;
	transition: all 0.2s;
}

.form-control-input:focus,
.form-control-select:focus,
.form-control-textarea:focus {
	border: 1px solid #a1a1a1;
	outline: none; /* Removes blue border on focus */
}

.form-control-input:hover,
.form-control-select:hover,
.form-control-textarea:hover {
	border: 1px solid #a1a1a1;
}

.checkbox {
	font: 400 0.75rem/1.25rem "Open Sans", sans-serif;
}

input[type='checkbox'] {
	vertical-align: -15%;
	margin-right: 0.375rem;
}

/* IE10+ hack to raise checkbox field position compared to the rest of the browsers */
@media screen and (-ms-high-contrast: active), screen and (-ms-high-contrast: none) {  
	input[type='checkbox'] {
		vertical-align: -9%;
	}
}

.form-control-submit-button {
	display: inline-block;
	width: 100%;
	height: 3.125rem;
	border: 1px solid  #FFDB58;
	border-radius: 1.5rem;
	background-color:  #FFDB58;
	color: #fff;
	font: 700 0.875rem/0 "Open Sans", sans-serif;
	cursor: pointer;
	transition: all 0.2s;
}

.form-control-submit-button:hover {
	background-color: transparent;
	color:  #FFDB58;
}

/* Form Success And Error Message Formatting */
#smsgSubmit.h3.text-center.tada.animated,
#lmsgSubmit.h3.text-center.tada.animated,
#nmsgSubmit.h3.text-center.tada.animated,
#pmsgSubmit.h3.text-center.tada.animated,
#smsgSubmit.h3.text-center,
#lmsgSubmit.h3.text-center,
#nmsgSubmit.h3.text-center,
#pmsgSubmit.h3.text-center {
	display: block;
	margin-bottom: 0;
	color: #555;
	font-size: 1.125rem;
	line-height: 1rem;
}

.help-block.with-errors .list-unstyled {
	color: #555;
	font-size: 0.75rem;
	line-height: 1.125rem;
	text-align: left;
}

.help-block.with-errors ul {
	margin-bottom: 0;
}
/* end of form success and error message formatting */

/* Form Success And Error Message Animation - Animate.css */
@-webkit-keyframes tada {
	from {
		-webkit-transform: scale3d(1, 1, 1);
		-ms-transform: scale3d(1, 1, 1);
		transform: scale3d(1, 1, 1);
	}
	10%, 20% {
		-webkit-transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg);
		-ms-transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg);
		transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg);
	}
	30%, 50%, 70%, 90% {
		-webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
		-ms-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
		transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
	}
	40%, 60%, 80% {
		-webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
		-ms-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
		transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
	}
	to {
		-webkit-transform: scale3d(1, 1, 1);
		-ms-transform: scale3d(1, 1, 1);
		transform: scale3d(1, 1, 1);
	}
}

@keyframes tada {
	from {
		-webkit-transform: scale3d(1, 1, 1);
		-ms-transform: scale3d(1, 1, 1);
		transform: scale3d(1, 1, 1);
	}
	10%, 20% {
		-webkit-transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg);
		-ms-transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg);
		transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg);
	}
	30%, 50%, 70%, 90% {
		-webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
		-ms-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
		transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
	}
	40%, 60%, 80% {
		-webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
		-ms-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
		transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
	}
	to {
		-webkit-transform: scale3d(1, 1, 1);
		-ms-transform: scale3d(1, 1, 1);
		transform: scale3d(1, 1, 1);
	}
}

.tada {
	-webkit-animation-name: tada;
	animation-name: tada;
}

.animated {
	-webkit-animation-duration: 1s;
	animation-duration: 1s;
	-webkit-animation-fill-mode: both;
	animation-fill-mode: both;
}
/* end of form success and error message animation - Animate.css */

/* Fade-move Animation For Details Lightbox - Magnific Popup */
/* at start */
.my-mfp-slide-bottom .zoom-anim-dialog {
	opacity: 0;
	transition: all 0.2s ease-out;
	-webkit-transform: translateY(-1.25rem) perspective(37.5rem) rotateX(10deg);
	-ms-transform: translateY(-1.25rem) perspective(37.5rem) rotateX(10deg);
	transform: translateY(-1.25rem) perspective(37.5rem) rotateX(10deg);
}

/* animate in */
.my-mfp-slide-bottom.mfp-ready .zoom-anim-dialog {
	opacity: 1;
	-webkit-transform: translateY(0) perspective(37.5rem) rotateX(0); 
	-ms-transform: translateY(0) perspective(37.5rem) rotateX(0); 
	transform: translateY(0) perspective(37.5rem) rotateX(0); 
}

/* animate out */
.my-mfp-slide-bottom.mfp-removing .zoom-anim-dialog {
	opacity: 0;
	-webkit-transform: translateY(-0.625rem) perspective(37.5rem) rotateX(10deg); 
	-ms-transform: translateY(-0.625rem) perspective(37.5rem) rotateX(10deg); 
	transform: translateY(-0.625rem) perspective(37.5rem) rotateX(10deg); 
}

/* dark overlay, start state */
.my-mfp-slide-bottom.mfp-bg {
	opacity: 0;
	transition: opacity 0.2s ease-out;
}

/* animate in */
.my-mfp-slide-bottom.mfp-ready.mfp-bg {
	opacity: 0.8;
}
/* animate out */
.my-mfp-slide-bottom.mfp-removing.mfp-bg {
	opacity: 0;
}
/* end of fade-move animation for details lightbox - magnific popup */

/* Fade Animation For Image Lightbox - Magnific Popup */
@-webkit-keyframes fadeIn {
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}

@keyframes fadeIn {
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}

.fadeIn {
	-webkit-animation: fadeIn 0.6s;
	animation: fadeIn 0.6s;
}

@-webkit-keyframes fadeOut {
	from {
		opacity: 1;
	}
	to {
		opacity: 0;
	}
}

@keyframes fadeOut {
	from {
		opacity: 1;
	}
	to {
		opacity: 0;
	}
}

.fadeOut {
	-webkit-animation: fadeOut 0.8s;
	animation: fadeOut 0.8s;
}
/* end of fade animation for image lightbox - magnific popup */
.download-buttons {
  display: flex;
}

.btn-solid-lg {
  /* Your button styling here */
  background-color:  #FFDB58;
  color: white;
  padding: 20px 40px;
  text-decoration: none;
  border-radius: 20px;
  font-weight: bold;
}

.btn-solid-lg:hover {
  background-color:  #FFDB58;
}


/*************************/
/*     02. Preloader     */
/*************************/
.spinner-wrapper {
	position: fixed;
	z-index: 999999;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	background: #fff;
}

.spinner {
	position: absolute;
	top: 50%; /* centers the loading animation vertically one the screen */
	left: 50%; /* centers the loading animation horizontally one the screen */
	width: 3.75rem;
	height: 1.25rem;
	margin: -0.625rem 0 0 -1.875rem; /* is width and height divided by two */ 
	text-align: center;
}

.spinner > div {
	display: inline-block;
	width: 1rem;
	height: 1rem;
	border-radius: 100%;
	background-color:  #FFDB58;
	-webkit-animation: sk-bouncedelay 1.4s infinite ease-in-out both;
	animation: sk-bouncedelay 1.4s infinite ease-in-out both;
}

.spinner .bounce1 {
	-webkit-animation-delay: -0.32s;
	animation-delay: -0.32s;
}

.spinner .bounce2 {
	-webkit-animation-delay: -0.16s;
	animation-delay: -0.16s;
}

@-webkit-keyframes sk-bouncedelay {
	0%, 80%, 100% { -webkit-transform: scale(0); }
	40% { -webkit-transform: scale(1.0); }
}

@keyframes sk-bouncedelay {
	0%, 80%, 100% { 
		-webkit-transform: scale(0);
		-ms-transform: scale(0);
		transform: scale(0);
	} 40% { 
		-webkit-transform: scale(1.0);
		-ms-transform: scale(1.0);
		transform: scale(1.0);
	}
}


/**************************/
/*     03. Navigation     */
/**************************/
.navbar-custom {
    background-color:  #FFDB58;
    box-shadow: 0 0.0625rem 0.375rem 0 rgba(0, 0, 0, 0.1);
    font: 700 0.875rem/0.875rem "Open Sans", sans-serif;
    transition: all 0.2s;
}

.navbar-custom .container {
    max-width: 87.5rem;
}

/* Default style for larger screens (like desktops) */
.navbar-custom .navbar-brand.logo-image img {
    width: 350px;
    height: auto;
}

/* Medium screens (tablets in landscape mode, small laptops) */
@media (max-width: 1024px) {
    .navbar-custom .navbar-brand.logo-image img {
        width: 400px; /* Adjust as needed */
    }
}

/* Smaller tablets (in portrait mode) and large phones */
@media (max-width: 768px) {
    .navbar-custom .navbar-brand.logo-image img {
        width: 250px; /* Adjust as needed */
    }
}

/* Small devices (phones in portrait mode) */
@media (max-width: 576px) {
    .navbar-custom .navbar-brand.logo-image img {
        width: 250px; /* Adjust as needed */
    }
}




.navbar-custom .navbar-brand.logo-text {
    font: 700 2rem/1.5rem "Open Sans", sans-serif;
    color: #fff;
    text-decoration: none;
}

/* Additional styles for navigation items */
.navbar-custom .navbar-nav {
    margin-top: 0.75rem;
    margin-bottom: 0.5rem;
}

.navbar-custom .nav-item .nav-link {
    padding: 0.625rem 0.75rem;
    color: #000000;
    opacity: 0.8;
    text-decoration: none;
    transition: all 0.2s ease;
}

.navbar-custom .nav-item .nav-link:hover,
.navbar-custom .nav-item .nav-link.active {
    color: #fff;
    opacity: 1;
}

/* Responsive adjustments can be made with media queries */


/* Dropdown Menu */
.navbar-custom .dropdown:hover > .dropdown-menu {
	display: block; /* this makes the dropdown menu stay open while hovering it */
	min-width: auto;
	animation: fadeDropdown 0.2s; /* required for the fade animation */
}

@keyframes fadeDropdown {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

.navbar-custom .dropdown-toggle:focus { /* removes dropdown outline on focus */
	outline: 0;
}

.navbar-custom .dropdown-menu {
	margin-top: 0;
	border: none;
	border-radius: 0.25rem;
	background-color:  #FFDB58;
}

.navbar-custom .dropdown-item {
	color: #f7f5f5;
	opacity: 0.8;
	font: 700 0.875rem/0.875rem "Open Sans", sans-serif;
	text-decoration: none;
}

.navbar-custom .dropdown-item:hover {
	background-color:  #FFDB58;
	color: #fff;
	opacity: 1;
}

.navbar-custom .dropdown-items-divide-hr {
	width: 100%;
	height: 1px;
	margin: 0.75rem auto 0.725rem auto;
	border: none;
	background-color: #c4d8dc;
	opacity: 0.2;
}
/* end of dropdown menu */

.navbar-custom .nav-item .btn-outline-sm {
	margin-top: 0.25rem;
	margin-bottom: 1.375rem;
	margin-left: 0.5rem;
	border: 0.125rem solid #fff;
	color: #fff;
}

.navbar-custom .nav-item .btn-outline-sm:hover {
	background-color: #fff;
	color:  #FFDB58;
}

.navbar-custom .navbar-toggler {
	padding: 0;
	border: none;
	color: #fff;
	font-size: 2rem;
}

.navbar-custom button[aria-expanded='false'] .navbar-toggler-awesome.fas.fa-times{
	display: none;
}

.navbar-custom button[aria-expanded='false'] .navbar-toggler-awesome.fas.fa-bars{
	display: inline-block;
}

.navbar-custom button[aria-expanded='true'] .navbar-toggler-awesome.fas.fa-bars{
	display: none;
}

.navbar-custom button[aria-expanded='true'] .navbar-toggler-awesome.fas.fa-times{
	display: inline-block;
	margin-right: 0.125rem;
}


/*********************/
/*    04. Header     */
/*********************/
.header {
	background-color:  #FFDB58;
}

.header .header-content {
	padding-top: 8rem;
	padding-bottom: 4rem;
	text-align: center;
}

.header .text-container {
	margin-bottom: 3rem;
}

.header h1 {
	margin-bottom: 1rem;
	color: #000000;
	font-size: 2.5rem;
	line-height: 3rem;
}

.header .p-large {
	margin-bottom: 2rem;
	color: #000000;
}

.header .btn-solid-lg {
	margin-right: 0.5rem;
	margin-bottom: 1.125rem;
	margin-left: 0.5rem;
	border-color: #f3f7fd;
	background-color: #f3f7fd;
	color:  #FFDB58;
}

.header .btn-solid-lg:hover {
	background: transparent;
	color: #f3f7fd;
}

.header .btn-outline-lg {
	border-color: #f3f7fd;
	color: #f3f7fd;
}

.header .btn-outline-lg:hover {
	background-color: #f3f7fd;
	color:  #FFDB58;
}

.header-frame {
	margin-top: -1px; /* To remove white margin in FF */
	width: 100%;
	height: 2.25rem;
}
/* Media Query for Mobile Phones */
@media screen and (max-width: 768px) {
    .header {
        /* Adjust overall header padding and text alignment if necessary */
        padding: 1rem;
        text-align: left; /* Align text to the left instead of center */
    }

    .header .header-content {
        padding-top: 6rem; /* Reduced top padding */
        padding-bottom: 1rem; /* Reduced bottom padding */
    }

    .header .text-container {
        /* Add padding inside the text container to create a box effect */
        padding: 1rem;
        background-color:  #FFDB58; /* Match the background color of the header */
        border-radius: 1px; /* Optional: Adds rounded corners to the box */
    }

    .header .text-container h1 {
        font-size: 1.75rem; /* Slightly larger font size for visibility */
        margin-bottom: 0.5rem; /* Reduce the margin to save space */
    }

    .header .text-container .p-large {
        font-size: 0.95rem; /* Smaller font size for paragraph */
        margin-bottom: 1rem; /* Adjust bottom margin for spacing */
		text-align: left; /* Align text to the left instead of center */
    }
}




/*************************/
/*     05. Customers     */
/*************************/
.slider-1 {
	padding-top: 5rem;
	padding-bottom: 3.25rem;
}

.slider-1 .slider-container {
	text-align: center;
}


/***************************/
/*     06. Description     */
/***************************/
.cards-1 {
	padding-top: 3.25rem;
	padding-bottom: 3rem;
	text-align: center;
}

.cards-1 .h2-heading {
	margin-bottom: 3.5rem;
}

.cards-1 .card {
	max-width: 21rem;
	margin-right: auto;
	margin-bottom: 3.5rem;
	margin-left: auto;
	padding: 0;
	border: none;
}

.cards-1 .card-image {
	max-width: 16rem;
	margin-right: auto;
	margin-bottom: 2rem;
	margin-left: auto;
}

.cards-1 .card-title {
	margin-bottom: 0.5rem;
}

.cards-1 .card-body {
	padding: 0;
}
/* Media Query for Mobile Phones */
@media screen and (max-width: 768px) {
	.cards-1 .card-body {
		padding: 0;
		text-align: left; /* Align text to the left instead of center */
	}
	}

/************************/
/*     06.5. blogg box     */
/************************/
.blog-container {
	max-width: 1200px; /* Bredd på container */
	margin: 40px auto; /* Centrerar containern och lägger till utrymme ovanför och nedan */
	padding: 20px;
	background-color:  #FFDB58; /* Bakgrundsfärg */
  }
  
  .blog-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr); /* Tre kolumner på större skärmar */
	grid-gap: 20px; /* Avstånd mellan inlägg */
  }
  
  .blog-post {
	background-color: #fff; /* Vit bakgrund för inlägg */
	border-radius: 8px; /* Rundade hörn */
	box-shadow: 0 2px 4px rgba(0,0,0,0.1); /* Skuggeffekt */
	overflow: hidden; /* Förhindrar innehåll från att spilla utanför */
  }
  
  .blog-image img {
	width: 100%;
	display: block; /* Ser till att bilden täcker hela bredden */
	height: 200px; /* Fast höjd för bilder */
	object-fit: cover; /* Beskär bilden för att passa behållaren */
  }
  
  .blog-content {
	padding: 15px; /* Inre utrymme för textinnehåll */
  }
  
  .blog-content h4, .blog-date, .read-more {
	margin-bottom: 10px; /* Utrymme mellan textelement */
  }
  
  .read-more {
	color: #007bff;
	text-decoration: none; /* Tar bort understrykning från länkar */
  }
  
  .read-more:hover {
	text-decoration: underline; /* Lägger till understrykning vid hover */
  }
  .pagination {
	  display: flex;
	  justify-content: center;
	  padding: 20px;
	}
	
	.pagination a {
	  color: black;
	  float: left;
	  padding: 8px 16px;
	  text-decoration: none;
	  transition: background-color .3s;
	  margin: 0 4px;
	  border-radius: 5px;
	  border: 1px solid #ddd;
	}
	
	.pagination a.active {
	  background-color:  #FFDB58;
	  color: white;
	  border: 1px solid  #FFDB58;
	}
	
	.pagination a:hover:not(.active) {background-color: #ddd;}
	
  
  /* Responsivitet */
  @media screen and (max-width: 768px) {
	.blog-grid {
	  grid-template-columns: repeat(2, 1fr); /* Två kolumner på mellanstora skärmar */
	}
  }
  
  @media screen and (max-width: 480px) {
	.blog-grid {
	  grid-template-columns: 1fr; /* En kolumn på små skärmar */
	}
  }
  
	
  /************************/
  /*     06.5. end blgg box     */
  /************************/
/************************/
/*     06.5. blogg     */
/************************/
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&family=Merriweather:wght@400;700&display=swap');

.breadcrumbs-container {
    background-color: #f8f9fa;
    padding: 15px 0;
    font-family: 'Roboto', sans-serif; /* Robust and modern sans-serif */
}

.breadcrumb {
    padding: 0;
    background: none;
    margin-bottom: 0;
    list-style: none;
}

.breadcrumb-item + .breadcrumb-item::before {
    content: ">";
    color: #6c757d;
    padding: 0 10px; /* Slightly more space for a cleaner look */
}

.breadcrumb-item a {
    color: #007bff;
    text-decoration: none;
    transition: color 0.3s ease; /* Smooth transition for hover effects */
}

.breadcrumb-item a:hover {
    color: #0056b3; /* Slightly darker blue on hover */
}

.breadcrumb-item.active {
    color: #6c757d;
}

.blog-post-section {
    padding: 40px 0;
    font-family: 'Merriweather', serif; /* Elegant and readable serif font */
}

.blog-post {
    background-color: #fff;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Enhanced shadow for depth */
    border-radius: 10px; /* Slightly more rounded corners */
    overflow: hidden;
    transition: box-shadow 0.3s ease; /* Smooth shadow transition on hover */
}

.blog-post:hover {
    box-shadow: 0 10px 15px rgba(0, 0, 0, 0.15); /* Deeper shadow on hover for a lifting effect */
}

.blog-media img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 10px 10px 0 0; /* Rounded top corners for the image */
}

.blog-content {
    padding: 25px; /* More padding for better readability */
}

.blog-content h1 {
    font-size: 28px; /* Larger font size for headlines */
    color: #333;
    font-weight: 700; /* Bolder for emphasis */
}

.blog-content p {
    color: #333; /* Darker grey for better readability */
    line-height: 1.8; /* Increased line height for readability */
    font-size: 18px; /* Increased font size for body text */
}

.testimonial blockquote {
    font-style: italic;
    color: #555;
    border-left: 4px solid #007bff;
    padding-left: 20px; /* More padding inside blockquote */
    margin-top: 20px; /* Space above the quote for separation */
}

/* Enhance social sharing icons */
.a2a_kit {
    display: flex;
    justify-content: center;
    margin-top: 20px;
}

.a2a_kit a {
    margin: 0 12px; /* More spacing between icons */
    opacity: 0.8;
    transition: opacity 0.3s ease; /* Fade effect on hover */
}

.a2a_kit a:hover {
    opacity: 1; /* Full color on hover */
}
  
/************************/
/*     06.5. end blgg     */
/************************/
/************************/
/*     07. Features     */
/************************/
.tabs {
	padding-top: 8rem;
	padding-bottom: 8.125rem;
	background-color: #f3f7fd;
}

.tabs .h2-heading,
.tabs .p-heading {
	text-align: center;
}
/* Media Query for Mobile Phones */
@media screen and (max-width: 768px) {
	.tabs .p-heading {
		text-align: left; /* Align text to the left instead of center */
	}
	}
.tabs .nav-tabs {
	display: block;
	margin-bottom: 2.25rem;
	border-bottom: none;
}

.tabs .nav-link {
	padding: 0.375rem 1rem 0.375rem 1rem;
	border: none;
	color: #86929b;
	font-weight: 700;
	font-size: 1.25rem;
	line-height: 1.75rem;
	text-align: center;
	text-decoration: none;
	transition: all 0.2s ease;
}

.tabs .nav-link:hover,
.tabs .nav-link.active {
	background: transparent;
	color:  #FFDB58;
}

.tabs .nav-link .fas {
	margin-right: 0.625rem;
}

.tabs .image-container {
	margin-bottom: 2.75rem;
}

.tabs .list-unstyled .fas {
	color:  #FFDB58;
	font-size: 0.5rem;
	line-height: 1.625rem;
}

.tabs .list-unstyled .media-body {
	margin-left: 0.625rem;
}

.tabs #tab-1 h3 {
	margin-bottom: 0.75rem;
}

.tabs #tab-1 .list-unstyled {
	margin-bottom: 1.5rem;
}

.tabs #tab-2 h3 {
	margin-bottom: 0.75rem;
}

.tabs #tab-2 .list-unstyled {
	margin-bottom: 1.5rem;
}

.tabs #tab-3 h3 {
	margin-bottom: 0.75rem;
}

.tabs #tab-3 .list-unstyled {
	margin-bottom: 1.5rem;
}


/***********************************/
/*     08. Features Lightboxes     */
/***********************************/
.lightbox-basic {
	margin: 2.5rem auto;
	padding: 2rem 1.5rem 2rem 1.5rem;
	border-radius: 0.25rem;
	background: #fff;
	text-align: left;
}

.lightbox-basic .container {
	padding-right: 0;
	padding-left: 0;
}

.lightbox-basic .image-container {
	max-width: 33.75rem;
	margin-right: auto;
	margin-bottom: 3rem;
	margin-left: auto;
}

.lightbox-basic h3 {
	margin-bottom: 0.5rem;
}

.lightbox-basic hr {
	width: 2.5rem;
	height: 0.125rem;
	margin-top: 0;
	margin-bottom: 0.875rem;
	margin-left: 0;
	border: 0;
	background-color:  #FFDB58;
	text-align: left;
}

.lightbox-basic h4 {
	margin-bottom: 1rem;
}

.lightbox-basic .list-unstyled .fas {
	color: #FFDB58;
	font-size: 0.5rem;
	line-height: 1.625rem;
}

.lightbox-basic .list-unstyled .media-body {
	margin-left: 0.625rem;
}

.lightbox-basic .btn-outline-reg,
.lightbox-basic .btn-solid-reg {
	margin-top: 0.75rem;
}

/* Signup Button */
.lightbox-basic .btn-solid-reg.mfp-close {
	position: relative;
	width: auto;
	height: auto;
	color: #fff;
	opacity: 1;
}

.lightbox-basic .btn-solid-reg.mfp-close:hover {
	color:  #FFDB58;
}
/* end of signup Button */

/* Back Button */
.lightbox-basic a.mfp-close.as-button {
	position: relative;
	width: auto;
	height: auto;
	margin-left: 0.375rem;
	color:  #FFDB58;
	opacity: 1;
}

.lightbox-basic a.mfp-close.as-button:hover {
	color: #fff;
}
/* end of back button */

.lightbox-basic button.mfp-close.x-button {
	position: absolute;
	top: -0.125rem;
	right: -0.125rem;
	width: 2.75rem;
	height: 2.75rem;
	color: #707984;
}


/***********************/
/*     09. Details     */
/***********************/
.basic-1 {
	padding-top: 7.5rem;
	padding-bottom: 8rem;
}

.basic-1 .text-container {
	margin-bottom: 3.75rem;
}

.basic-1 .list-unstyled {
	margin-bottom: 1.375rem;
}

.basic-1 .list-unstyled .fas {
	color:  #FFDB58;
	font-size: 0.5rem;
	line-height: 1.625rem;
}

.basic-1 .list-unstyled .media-body {
	margin-left: 0.625rem;
}


/*********************/
/*     10. Video     */
/*********************/
.basic-2 {
	padding-top: 8rem;
	padding-bottom: 6.75rem;
	background-color: #f3f7fd;
	text-align: center;
}

.basic-2 .image-container {
	margin-bottom: 2rem;
}

.basic-2 .image-container img {
	border-radius: 0.75rem;
}

.basic-2 .video-wrapper {
	position: relative;
}

/* Video Play Button */
.basic-2 .video-play-button {
	position: absolute;
	z-index: 10;
	top: 50%;
	left: 50%;
	display: block;
	box-sizing: content-box;
	width: 2rem;
	height: 2.75rem;
	padding: 1.125rem 1.25rem 1.125rem 1.75rem;
	border-radius: 50%;
	-webkit-transform: translateX(-50%) translateY(-50%);
	-ms-transform: translateX(-50%) translateY(-50%);
	transform: translateX(-50%) translateY(-50%);
}
  
.basic-2 .video-play-button:before {
	content: "";
	position: absolute;
	z-index: 0;
	top: 50%;
	left: 50%;
	display: block;
	width: 4.75rem;
	height: 4.75rem;
	border-radius: 50%;
	background:  #FFDB58;
	animation: pulse-border 1500ms ease-out infinite;
	-webkit-transform: translateX(-50%) translateY(-50%);
	-ms-transform: translateX(-50%) translateY(-50%);
	transform: translateX(-50%) translateY(-50%);
}
  
.basic-2 .video-play-button:after {
	content: "";
	position: absolute;
	z-index: 1;
	top: 50%;
	left: 50%;
	display: block;
	width: 4.375rem;
	height: 4.375rem;
	border-radius: 50%;
	background:  #FFDB58;
	transition: all 200ms;
	-webkit-transform: translateX(-50%) translateY(-50%);
	-ms-transform: translateX(-50%) translateY(-50%);
	transform: translateX(-50%) translateY(-50%);
}
  
.basic-2 .video-play-button span {
	position: relative;
	display: block;
	z-index: 3;
	top: 0.375rem;
	left: 0.25rem;
	width: 0;
	height: 0;
	border-left: 1.625rem solid #fff;
	border-top: 1rem solid transparent;
	border-bottom: 1rem solid transparent;
}
  
@keyframes pulse-border {
	0% {
		transform: translateX(-50%) translateY(-50%) translateZ(0) scale(1);
		opacity: 1;
	}
	100% {
		transform: translateX(-50%) translateY(-50%) translateZ(0) scale(1.5);
		opacity: 0;
	}
}
/* end of video play button */  

.basic-2 .p-heading {
	margin-bottom: 1rem;
}
/* Media Query for Mobile Phones */
@media screen and (max-width: 768px) {
	.basic-2 .p-heading {
		margin-bottom: 1rem;
		text-align: left; /* Align text to the left instead of center */
	}
	}


/***********************/
/*     11. Pricing     */
/***********************/
.cards-2 {
	padding-top: 7.875rem;
	padding-bottom: 2.25rem;
	text-align: center;
}

.cards-2 .h2-heading {
	margin-bottom: 3.75rem;
}

.cards-2 .card {
	display: block;
	max-width: 19rem;
	margin-right: auto;
	margin-bottom: 3rem;
	margin-left: auto;
	border: 1px solid #ccd3df;
	border-radius: 0.375rem;
}

.cards-2 .card .card-body {
	padding: 2.5rem 2rem 2.75rem 2em;
}

.cards-2 .card .card-title {
	margin-bottom: 0.5rem;
	color:  #FFDB58;
	font: 700 1.125rem/1.5rem "Open Sans", sans-serif;
}

.cards-2 .card .price .currency {
	margin-right: 0.25rem;
	color: #434c54;
	font-weight: 700;
	font-size: 1.5rem;
	vertical-align: 40%;
}

.cards-2 .card .price .value {
	color: #434c54;
	font: 700 3.25rem/3.5rem "Open Sans", sans-serif;
	text-align: center;
}

.cards-2 .card .frequency {
	font-size: 0.875rem;
}

.cards-2 .card .divider {
	height: 1px;
	margin-top: 1.75rem;
	margin-bottom: 2rem;
	border: none;
	background-color: #ccd3df;
}

.cards-2 .card .list-unstyled {
	margin-top: 1.875rem;
	margin-bottom: 1.625rem;
	text-align: left;
}

.cards-2 .card .list-unstyled .media {
	margin-bottom: 0.5rem;
}

.cards-2 .card .list-unstyled .fas {
	color:  #FFDB58;
	font-size: 0.875rem;
	line-height: 1.625rem;
}

.cards-2 .card .list-unstyled .fas.fa-times {
	margin-left: 0.1875rem;
	margin-right: 0.125rem;
	color: #555;
}

.cards-2 .card .list-unstyled .media-body {
	margin-left: 0.625rem;
}


/****************************/
/*     12. Testimonials     */
/****************************/
.slider-2 {
	padding-top: 2.75rem;
	padding-bottom: 4rem;
}

.slider-2 .slider-container {
	position: relative;
}

.slider-2 .swiper-container {
	position: static;
	width: 82%;
	text-align: center;
}

.slider-2 .image-wrapper {
	width: 6rem;
	margin-right: auto;
	margin-bottom: 1rem;
	margin-left: auto;
}

.slider-2 .image-wrapper img {
	border-radius: 50%;
}

.slider-2 .testimonial-text {
	margin-bottom: 0.5rem;
}

.slider-2 .testimonial-author {
	color: #333;
}

.slider-2 .swiper-button-prev,
.slider-2 .swiper-button-next {
	width: 1.125rem;
}

.slider-2 .swiper-button-prev:focus,
.slider-2 .swiper-button-next:focus {
	/* even if you can't see it chrome you can see it on mobile device */
	outline: none;
}

.slider-2 .swiper-button-prev {
	left: -0.375rem;
	background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2028%2044'%3E%3Cpath%20d%3D'M0%2C22L22%2C0l2.1%2C2.1L4.2%2C22l19.9%2C19.9L22%2C44L0%2C22L0%2C22L0%2C22z'%20fill%3D'%23505c67'%2F%3E%3C%2Fsvg%3E");
	background-size: 1.125rem 1.75rem;
}

.slider-2 .swiper-button-next {
	right: -0.375rem;
	background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2028%2044'%3E%3Cpath%20d%3D'M27%2C22L27%2C22L5%2C44l-2.1-2.1L22.8%2C22L2.9%2C2.1L5%2C0L27%2C22L27%2C22z'%20fill%3D'%23505c67'%2F%3E%3C%2Fsvg%3E");
	background-size: 1.125rem 1.75rem;
}


/**************************/
/*     13. Newsletter     */
/**************************/
.form {
	padding-top: 4rem;
	padding-bottom: 6rem;
}

.form .text-container {
	margin-bottom: 3.5rem;
	padding: 3.5rem 1rem 2.5rem 1rem;
	border-radius: 0.5rem;
	background-color: #f3f7fd;
}

.form h2 {
	margin-bottom: 2.75rem;
	text-align: center;
}

.form .icon-container {
	text-align: center;
}

.form .fa-stack {
	width: 2em;
	margin-bottom: 0.75rem;
	margin-right: 0.375rem;
	font-size: 1.5rem;
}

.form .fa-stack .fa-stack-1x {
    color: #fff;
	transition: all 0.2s ease;
}

.form .fa-stack .fa-stack-2x {
	color:  #FFDB58;
	transition: all 0.2s ease;
}

.form .fa-stack:hover .fa-stack-1x {
	color:  #FFDB58;
}

.form .fa-stack:hover .fa-stack-2x {
    color: #f3f7fd;
}

/**************************/
/*     13.5. Contact     */
/**************************/
/* Base styling for contact section */
.contact-us-section {
    background-color: #ffffff; /* Lighter background for a fresher look */
    padding: 80px 0;
    border-radius: 12px;
    box-shadow: 0 15px 35px rgba(0,0,0,0.2); /* Softer shadow for depth */
    margin: 100px auto;
    width: 85%;
    max-width: 850px;
}

.contact-us-section h3 {
    text-align: center;
    margin-bottom: 60px;
    font-size: 30px;
    color:  #FFDB58; /* More vibrant heading color */
    font-weight: 600;
}

/* Enhancing form inputs and labels for a sleek design */
.form-group {
    position: relative;
    margin-bottom: 35px;
    overflow: hidden; /* Clip the background of label when input is focused */
    border-radius: 0px; /* Rounded borders for inputs */
}

.form-group input,
.form-group textarea {
    width: 100%;
    padding: 20px;
    border-radius: 25px; /* Consistent rounded borders */
    border: 1px solid #ced4da; /* Lighter border */
    font-size: 16px;
    background-color: #f8f9fa; /* Slightly off-white background */
    transition: border-color 0.3s ease-in-out, box-shadow 0.3s ease-in-out; /* Smooth transitions */
}

.form-group input:focus,
.form-group textarea:focus {
    border-color:  #FFDB58; /* Highlight focus */
    box-shadow: 0 0 0 3px rgba(2, 133, 161, 0.25); /* Subtle glow effect */
}

.form-group label {
    position: absolute;
    top: -5px;
    left: 25px;
    background-color: #ffffff; /* Match the background for a seamless look */
    padding: 0 15px;
    font-size: 15px;
    color: #495057; /* Darker label color for contrast */
    transition: all 0.3s ease-in-out; /* Smooth transition for label */
}

/* Elevated button styling for prominence */
.submit-btn {
    width: 200px; /* Fixed width for consistency */
    margin: 30px auto;
    display: block;
    padding: 12px 0;
    font-size: 18px;
    border-radius: 30px;
    background-color:  #FFDB58; /* Softer blue for the button */
    color: white;
    border: none;
    cursor: pointer;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1); /* Subtle shadow for depth */
    transition: background-color 0.3s ease-in-out, transform 0.2s ease-in-out; /* Animated feedback */
}

.submit-btn:hover {
    background-color: #138496; /* Darken on hover for interaction */
    transform: translateY(-3px); /* Lift effect */
}

/* Maintaining responsiveness with adjustments for smaller screens */
@media (max-width: 768px) {
    .contact-us-section {
        padding: 60px 0;
        margin: 80px auto;
    }

    .submit-btn {
        width: 60%; /* Adapt button width for smaller screens */
    }
}

/**************************/
/*     13.5. Contact end     */
/**************************/
.boka-transport-section {
    background-color: #f9f9f9;
    padding: 80px 0;
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    margin: 100px auto;
    width: 85%;
    max-width: 850px;
}

.boka-transport-section h3 {
    text-align: center;
    margin-bottom: 50px;
    font-size: 30px;
    color:  #FFDB58;
    font-weight: 600;
}

.form-group {
    position: relative;
    margin-bottom: 30px;
}

.form-group input,
.form-group textarea,
.form-group select {
    width: 100%;
    padding: 15px;
    border-radius: 8px;
    border: 1px solid #ced4da;
    font-size: 16px;
    background-color: #f8f9fa;
    transition: border-color 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
}

.form-group input[type="file"] {
    padding: 0;
    font-size: 16px;
    border: none;
}

.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus {
    border-color:  #FFDB58;
    box-shadow: 0 0 0 3px rgba(2, 133, 161, 0.25);
}

.form-group label {
    position: absolute;
    top: -8px;
    left: 20px;
    background-color: #f9f9f9;
    padding: 0 10px;
    font-size: 15px;
    color: #495057;
    transition: all 0.3s ease-in-out;
}

.submit-btn {
    width: 200px;
    margin: 30px auto;
    display: block;
    padding: 12px 0;
    font-size: 18px;
    border-radius: 30px;
    background-color:  #FFDB58;
    color: white;
    border: none;
    cursor: pointer;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
    transition: background-color 0.3s ease-in-out, transform 0.2s ease-in-out;
}

.submit-btn:hover {
    background-color: #138496;
    transform: translateY(-3px);
}
/* Hide default file input */
.form-group input[type="file"] {
    display: none;
}
/* Hide default file input */
.form-group input[type="file"] {
    display: none;
}

/* Wrapper for custom file upload */
.file-upload-wrapper {
    display: flex;
    align-items: center;
    gap: 15px; /* Space between button and file name */
    margin-top: 20px;
}

/* Custom button style for file upload */
.file-upload-label {
    display: inline-block;
    padding: 12px 20px;
    border-radius: 25px;
    font-size: 16px;
    font-weight: 500;
    color: #ffffff;
    background-color: #0275d8; /* Blue button */
    cursor: pointer;
    text-align: center;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    transition: background-color 0.3s ease, transform 0.2s ease;
    white-space: nowrap; /* Keeps the button text on one line */
}

.file-upload-label:hover {
    background-color: #0056b3;
    transform: translateY(-2px);
}

.file-upload-label:active {
    background-color: #004080;
    transform: translateY(0);
}

/* Style for file name display */
.file-upload-name {
    font-size: 15px;
    color: #333333;
    background-color: #ffffff; /* Yellow background for filename */
    padding: 8px 12px;
    border-radius: 12px;
    font-weight: 500;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
    min-width: 150px;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis; /* Adds "..." if the file name is too long */
}

@media (max-width: 768px) {
    .boka-transport-section {
        padding: 60px 0;
        margin: 80px auto;
    }

    .submit-btn {
        width: 60%;
    }
}

/**********************/
/*     14. Footer     */
/**********************/
.footer-frame {
	width: 100%;
	height: 1.5rem;
}

.footer {
	padding-top: 3rem;
	padding-bottom: 0.5rem;
	background-color:  #FFDB58;
}

.footer .footer-col {
	margin-bottom: 2.25rem;
}

.footer h4 {
	margin-bottom: 0.625rem;
	color: #000000;
}

.footer .list-unstyled,
.footer p {
	color: #000000;
}

.footer .footer-col.middle .list-unstyled .fas {
	color: #fff;
	font-size: 0.5rem;
	line-height: 1.5rem;
}

.footer .footer-col.middle .list-unstyled .media-body {
	margin-left: 0.5rem;
}

.footer .footer-col.last .list-unstyled .fas {
	color: #fff;
	font-size: 0.875rem;
	line-height: 1.5rem;
}

.footer .footer-col.last .list-unstyled .media-body {
	margin-left: 0.625rem;
}

.footer .footer-col.last .list-unstyled .fas.fa-globe {
	margin-left: 1rem;
	margin-right: 0.625rem;
}


/*************************/
/*     15. Copyright     */
/*************************/
.copyright {
	padding-top: 1rem;
	padding-bottom: 0.375rem;
	background-color:  #FFDB58;
	text-align: center;
}

.copyright .p-small {
	padding-top: 1.375rem;
	border-top: 1px solid #718ad1;
	color: #000000;
}

.copyright a {
	color: #000000;
	text-decoration: none;
}


/**********************************/
/*     16. Back To Top Button     */
/**********************************/
a.back-to-top {
	position: fixed;
	z-index: 999;
	right: 0.75rem;
	bottom: 0.75rem;
	display: none;
	width: 2.625rem;
	height: 2.625rem;
	border-radius: 1.875rem;
	background:  #FFDB58 url("../images/up-arrow.png") no-repeat center 47%;
	background-size: 1.125rem 1.125rem;
	text-indent: -9999px;
}

a:hover.back-to-top {
	background-color:  #FFDB58; 
}


/***************************/
/*     17. Extra Pages     */
/***************************/
.ex-header {
	padding-top: 8rem;
	padding-bottom: 5rem;
	background-color:  #FFDB58;
	text-align: center;
}

.ex-header h1 {
	color: #fff;
}

.ex-basic-1 {
	padding-top: 2rem;
	padding-bottom: 0.875rem;
	background-color: #f3f7fd;
}

.ex-basic-1 .breadcrumbs {
	margin-bottom: 1.125rem;
}

.ex-basic-1 .breadcrumbs .fa {
	margin-right: 0.5rem;
	margin-left: 0.625rem;
}

.ex-basic-2 {
	padding-top: 4.75rem;
	padding-bottom: 4rem;
}

.ex-basic-2 h3 {
	margin-bottom: 1rem;
}

.ex-basic-2 .text-container {
	margin-bottom: 3.625rem;
}

.ex-basic-2 .text-container.last {
	margin-bottom: 0;
}

.ex-basic-2 .text-container.dark {
	padding: 1.625rem 1.5rem 0.75rem 2rem;
	background-color: #f3f7fd;
}

.ex-basic-2 .image-container-large {
	margin-bottom: 4rem;
}

.ex-basic-2 .image-container-large img {
	border-radius: 0.25rem;
}

.ex-basic-2 .image-container-small img {
	border-radius: 0.25rem;
}

.ex-basic-2 .list-unstyled .fas {
	color:  #FFDB58;
	font-size: 0.5rem;
	line-height: 1.625rem;
}

.ex-basic-2 .list-unstyled .media-body {
	margin-left: 0.625rem;
}

.ex-basic-2 .form-container {
	margin-top: 3rem;
}

.ex-basic-2 .btn-outline-reg {
	margin-top: 1.75rem;
}

.ex-footer-frame {
	width: 100%;
	height: 2.75rem;
	background-color: #f3f7fd;
}

/****************************************/
/*     17,5. Blogg                      */
/****************************************/

/****************************************/
/*     17,5. End Blogg                  */
/****************************************/

/****************************************/
/*     18. Sign Up and Log In Pages     */
/****************************************/
.ex-2-header {
	padding-top: 9rem;
	background-color:  #FFDB58;
	text-align: center;
	min-height: 100vh;
}

.ex-2-header h1,
.ex-2-header p {
	color: #fff;
}

.ex-2-header p {
	max-width: 24rem;
	margin-right: auto;
	margin-bottom: 2.5rem;
	margin-left: auto;
}

.ex-2-header .form-container {
	max-width: 26rem;
	margin-right: auto;
	margin-left: auto;
	padding: 2.25rem 1.25rem 1.25rem 1.25rem;
	border-radius: 0.5rem;
	background-color: #f3f7fd;
}

.ex-2-header .checkbox {
	text-align: left;
}


/*****************************/
/*     19. Media Queries     */
/*****************************/	
/* Min-width width 768px */
@media (min-width: 768px) {
	
	/* General Styles */
	.p-heading {
		width: 85%;
		margin-right: auto;
		margin-left: auto;
	}

	.h2-heading {
		width: 80%;
		margin-right: auto;
		margin-left: auto;
	}
	/* end of general styles */


	/* Header */
	.header .text-container {
		margin-bottom: 4rem;
	}

	.header h1 {
		font-size: 3.5rem;
		line-height: 4.125rem;
	}

	.header .btn-solid-lg {
		margin-bottom: 0;
		margin-left: 0;
	}

	.header-frame {
		height: 5.5rem;
	}
	/* end of header */


	/* Testimonials */
	.slider-2 .swiper-button-prev {
		width: 1.375rem;
		background-size: 1.375rem 2.125rem;
	}
	
	.slider-2 .swiper-button-next {
		width: 1.375rem;
		background-size: 1.375rem 2.125rem;
	}
	/* end of testimonials */


	/* Newsletter */
	.form .text-container {
		padding: 4rem 2.5rem 3rem 2.5rem;
	}

	.form form {
		margin-right: 4rem;
		margin-left: 4rem;
	}
	/* end of newsletter */


	/* Footer */
	.footer-frame {
		height: 5rem;
	}
	/* end of footer */


	/* Extra Pages */
	.ex-header {
		padding-top: 11rem;
		padding-bottom: 9rem;
	}

	.ex-basic-2 .text-container.dark {
		padding: 2.5rem 3rem 2rem 3rem;
	}

	.ex-basic-2 .form-container {
		margin-top: 0;
	}
	/* end of extra pages */


	/* Sign Up And Log In Pages */
	.ex-2-header {
		padding-top: 11rem;
	}

	.ex-2-header .form-container {
		padding: 2.25rem 1.75rem 1.25rem 1.75rem;
	}
	/* end of sign up and log in pages */
}
/* end of min-width width 768px */


/* Min-width width 992px */
@media (min-width: 992px) {
	
	/* Navigation */
	.navbar-custom {
		padding: 2.125rem 1.5rem 2.125rem 2rem;
        background: transparent;
		box-shadow: none;
	}

	.navbar-custom .navbar-nav {
		margin-top: 0;
		margin-bottom: 0;
	}

	.navbar-custom .nav-item .nav-link {
		padding: 0.25rem 0.75rem 0.25rem 0.75rem;
	}
	
	.navbar-custom .nav-item .nav-link:hover,
	.navbar-custom .nav-item .nav-link.active {
		opacity: 1;
	}

	.navbar-custom.top-nav-collapse {
        padding: 0.5rem 1.5rem 0.5rem 2rem;
		background-color:  #FFDB58;
		box-shadow: 0 0.0625rem 0.375rem 0 rgba(0, 0, 0, 0.1);
	}

	.navbar-custom.top-nav-collapse .nav-item .nav-link:hover,
	.navbar-custom.top-nav-collapse .nav-item .nav-link.active {
		color: #fff;
	}

	.navbar-custom .dropdown-menu {
		padding-top: 1rem;
		padding-bottom: 1rem;
		border-top: 0.25rem solid rgba(0, 0, 0, 0);
		border-radius: 0.25rem;
	}

	.navbar-custom.top-nav-collapse .dropdown-menu {
		border-top: 0.25rem solid rgba(0, 0, 0, 0);
		box-shadow: 0 0.375rem 0.375rem 0 rgba(0, 0, 0, 0.02);
	}

	.navbar-custom .dropdown-item {
		padding-top: 0.25rem;
		padding-bottom: 0.25rem;
	}

	.navbar-custom .dropdown-items-divide-hr {
		width: 84%;
	}

	.navbar-custom .nav-item .btn-outline-sm {
		margin-top: 0;
		margin-bottom: 0;
		margin-left: 1rem;
	}
	/* end of navigation */


	/* General Styles */
	.p-heading {
		width: 65%;
	}

	.h2-heading {
		width: 60%;
	}
	/* end of general styles */


	/* Header */
	.header .header-content {
		text-align: left;
	}

	.header .text-container {
		margin-top: 4rem;
		margin-bottom: 0;
	}

	.header .image-container {
		position: relative;
		margin-top: 3rem;
	}
	
	.header .image-container .img-wrapper {
		position: absolute;
		display: block;
		width: 470px;
	}

	.header-frame {
		height: 8rem;
	}
	/* end of header */


	/* Description */
	.cards-1 .card {
		display: inline-block;
		width: 17rem;
		max-width: 100%;
		margin-right: 1rem;
		margin-left: 1rem;
		vertical-align: top;
	}

	.cards-1 .card-image {
		width: 9rem;
	}
	/* end of description */


	/* Features */
	.tabs .nav-tabs {
		display: flex;
		justify-content: center;
		margin-bottom: 2.75rem;
	} 

	.tabs .nav-link {
		padding-right: 1.25rem;
		padding-left: 1.25rem;
		border-bottom: 2px solid rgb(202, 202, 202);
	}
	
	.tabs .nav-link:hover,
	.tabs .nav-link.active {
		border-bottom: 2px solid  #FFDB58;
	}

	.tabs .image-container {
		margin-bottom: 0;
	}
	/* end of features */


	/* Features Lightboxes */
	.lightbox-basic {
		max-width: 62.5rem;
		padding: 2.5rem 2.5rem 2.5rem 2.5rem;
	}

	.lightbox-basic .image-container {
		max-width: 100%;
		margin-right: 2rem;
		margin-bottom: 0;
		margin-left: 0.5rem;
	}
	
	.lightbox-basic h3 {
		margin-top: 0.5rem;
	}
	/* end of features lightboxes */


	/* Details */
	.basic-1 {
		padding-top: 8rem;
	}

	.basic-1 .text-container {
		margin-bottom: 0;
	}
	/* end of details */


	/* Video */
	.basic-2 .image-container {
		max-width: 53.125rem;
		margin-right: auto;
		margin-left: auto;
	}

	.basic-2 p {
		width: 65%;
		margin-right: auto;
		margin-left: auto;
	}
	/* end of video */


	/* Pricing */
	.cards-2 .card {
		display: inline-block;
		margin-right: 0.5rem;
		margin-left: 0.5rem;
		vertical-align: top;
	}
	/* end of pricing */


	/* Testimonials */
	.slider-2 .swiper-container {
		width: 92%;
		text-align: left;
	}

	.slider-2 .image-wrapper {
		float: left;
		width: 10rem;
		margin-bottom: 0;
	}

	.slider-2 .text-wrapper {
		max-width: 100%;
		margin-top: 1.25rem;
		margin-left: 13rem;
	}

	.slider-2 .swiper-button-prev {
		left: -0.75rem;
	}
	
	.slider-2 .swiper-button-next {
		right: -0.75rem;
	}
	/* end of testimonials */


	/* Newsletter */
	.form .text-container {
		width: 55rem;
		margin-right: auto;
		margin-left: auto;
		padding-top: 5rem;
		padding-bottom: 4.5rem;
	}

	.form h2 {
		margin-right: 7rem;
		margin-left: 7rem;
	}

	.form form {
		margin-right: 9rem;
		margin-left: 9rem;
	}
	/* end of newsletter */


	/* Extra Pages */
	.ex-header h1 {
		width: 80%;
		margin-right: auto;
		margin-left: auto;
	}

	.ex-basic-2 {
		padding-bottom: 5rem;
	}
	/* end of extra pages */
}
/* end of min-width width 992px */


/* Min-width width 1200px */
@media (min-width: 1200px) {
	
	/* General Styles */
	.h2-heading {
		width: 50%;
	}
	/* end of general styles */


	/* Header */
	.header .header-content {
		padding-top: 11rem;
		padding-bottom: 5rem;
	}

	.header .text-container {
		margin-top: 5.5rem;
		margin-right: 0.5rem;
	}

	.header .image-container {
		margin-top: 1rem;
		margin-left: 1.5rem;
	}

	.header .image-container .img-wrapper {
		width: 630px;
	}

	.header-frame {
		height: 9.375rem;
	}
	/* end of header */
	

	/* Customer */
	.slider-1 .slider-container {
		margin-right: 3rem;
		margin-left: 3rem;
	}
	/* end of customer */


	/* Description */
	.cards-1 .card {
		width: 18.875rem;
		margin-right: 2rem;
		margin-left: 2rem;
	}

	.cards-1 .card-image {
		width: 12.5rem;
	}
	/* end of description */


	/* Features */
	.tabs .image-container {
		margin-right: 1.5rem;
		margin-left: 1rem;
	}
	
	.tabs .text-container {
		margin-top: 1.5rem;
		margin-right: 1rem;
		margin-left: 1.5rem;
	}
	/* end of features */


	/* Details */
	.basic-1 .image-container {
		margin-right: 1rem;
		margin-left: 1.5rem;
	}
	
	.basic-1 .text-container {
		margin-top: 1rem;
		margin-right: 1.5rem;
		margin-left: 1rem;
	}

	.basic-1 h2 {
		margin-bottom: 1rem;
	}
	/* end of details */


	/* Pricing */
	.cards-2 .card {
		width: 19.375rem;
		max-width: 100%;
		margin-right: 1.75rem;
		margin-left: 1.75rem;
	}

	.cards-2 .card .card-body {
		padding-right: 2.25rem;
		padding-left: 2.25rem;
	}
	/* end of pricing */


	/* Testimonials */
	.slider-2 .slider-container {
		width: 64.125rem;
		margin-right: auto;
		margin-left: auto;
	}
	/* end of testimonials */


	/* Newsletter */
	.form .text-container {
		width: 64.75rem;
		padding-top: 6rem;
		padding-bottom: 5.5rem;
	}

	.form h2 {
		margin-right: 12rem;
		margin-left: 12rem;
	}

	.form form {
		margin-right: 15rem;
		margin-left: 15rem;
	}
	/* end of newsletter */


	/* Footer */
	.footer .footer-col.first {
		margin-right: 1.5rem;
	}

	.footer .footer-col.middle {
		margin-right: 0.75rem;
		margin-left: 0.75rem;
	}

	.footer .footer-col.last {
		margin-left: 1.5rem;
	}
	/* end of footer */


	/* Extra Pages */
	.ex-header h1 {
		width: 60%;
		margin-right: auto;
		margin-left: auto;
	}

	.ex-basic-2 .form-container {
		margin-left: 1.75rem;
	}

	.ex-basic-2 .image-container-small {
		margin-left: 1.75rem;
	}
	/* end of extra pages */
}
/* Base styling */
.app-icons {
    display: flex;
    align-items: center;
}

.vertical {
    width: 300px;
    flex-direction: column;
}

.android {
    width: 205px;
}

.apple {
    width: 164px;
}

/* Media query for smaller screens, like phones */
@media screen and (max-width: 768px) {
    .app-icons {
        width: 288px;
        flex-direction: column;
    }
	.android {
		width: 205px;
	}
	
	.apple {
		width: 180px;
	}
}

.team-image {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 10px; /* Optional: for rounded corners */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Optional: for a subtle shadow */
}