﻿/*
Description:
	1 - Including files (fonts, theme-colors, "reset.css" and others)
	2 - Tags styles and General styles
	3 - header
	4 - .content
	5 - footer
	* - @media rules
*/

/* 1 - BEGIN Including files (fonts, theme-colors, "reset.css" and others)) ---------------------------------------------------------- */

@font-face {
    font-family: 'mr-eaves-modern';
    src: url('fonts/MrEavesModern/mreavesxlmodot-book.woff2') format('woff2'),
         url('fonts/MrEavesModern/mreavesxlmodot-book.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'mr-eaves-modern';
    src: url('fonts/MrEavesModern/mreavesxlmodot-light.woff2') format('woff2'),
         url('fonts/MrEavesModern/mreavesxlmodot-light.woff') format('woff');
    font-weight: 300;
    font-style: normal;
}

@font-face {
    font-family: 'mr-eaves-modern';
    src: url('fonts/MrEavesModern/mreavesxlmodot-bold.woff2') format('woff2'),
         url('fonts/MrEavesModern/mreavesxlmodot-bold.woff') format('woff');
    font-weight: 700;
    font-style: normal;
}

/* THEME COLORS */

:root {
	--theme-color: #00bfba;
	--theme-color-secondary: #366b9e;
	--theme-color-light: #e5f8f8;
	--theme-color-light-lighter: rgba(0, 191, 186, 0.05);
	--theme-color-purple: #7171bb;
	--theme-color-violet: #BFA7E1;
	--theme-color-yellow: #FFBA00;
}

html body .bg-theme {
	background-color: var(--theme-color);
}

html body .bg-theme-secondary {
	background-color: var(--theme-color-secondary);
}

html body .bg-theme-light {
	background-color: var(--theme-color-light);
}

html body .bg-theme-light-lighter {
	background-color: var(--theme-color-light-lighter);
}

html body .bg-purple {
	background-color: var(--theme-color-purple);
	color: #ffffff;
}

html body .bg-violet {
	background-color: var(--theme-color-violet);
}

html body .bg-theme-yellow {
	background-color: var(--theme-color-yellow);
	color: #ffffff;
}

html body .bg-gray {
	background-color: #f1f1f1;
}

html body .bg-gray-light {
	background-color: rgba(0, 0, 0, 0.03);
}

html body .bg-theme-white {
	background-color: #ffffff;
}

html body .bg-dark {
	background-color: #363636;
	color: #ffffff;
}

html body .bg-lite {
	background-color: #fff !important;
  color:#444 !important;
}

html body .bg-gradient-semitransparent-dark {
	background: linear-gradient(180deg, rgba(217, 217, 217, 0) 0%, rgba(0, 0, 0, 0.30) 100%);
}

html body .bg-theme-gradient-vertical {
	background: linear-gradient(180deg, rgba(0, 191, 186, 0) 0%, rgba(0, 191, 186, 0.10) 23%);
}

/*  */

html body .color-theme, html body .box-wr .color-theme {
	color: var(--theme-color);
}

html body .color-theme-secondary {
	color: var(--theme-color-secondary);
}

html body .color-gray {
	color: #cccccc;
}

html body .color-white {
	color: #ffffff;
}

html body .color-purple {
	color: var(--theme-color-purple);
}

html body .color-violet {
	color: var(--theme-color-violet);
	color: #6E6EB9;
}

html body .color-theme-yellow {
	color: var(--theme-color-yellow);
}

/*  */

/* BEGIN of CSS RESET */
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}

/* HTML5 display-role reset for older browsers */

article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section {
	display: block;
}

* {
	box-sizing: border-box;
	font-family: inherit;
}

/* END of CSS RESET */

/* 1 - END of Including files ("fonts.css", "reset.css" and others) ---------------------------------------------------------- */
/* 2 - BEGIN of Tags and General styles ---------------------------------------------------------- */

html {
	scroll-behavior: smooth;
	scroll-padding-top: 0;
}

body {
	min-height: 500px;
	margin: 0 auto;
	font-family: 'mr-eaves-modern', sans-serif;
	font-size: 16px;
	line-height: 1.65;
	font-weight: normal;
	color: var(--theme-color-text);
}

a {
	color: inherit;
	text-decoration: none;
	outline: none;
	-webkit-transition: all .3s ease;
	-o-transition: all .3s ease;
	transition: all .3s ease;
}

a:hover {
	opacity: 0.7;
	text-decoration: none;
	color: inherit;
	outline: none;
}

a:active {
	opacity: 0.6;
	outline: none;
	color: inherit;
	text-decoration: none;
}

a:focus {
	outline: none;
	color: inherit;
	text-decoration: none;
}

button, input, textarea, select {
	-webkit-transition: all .3s ease;
	-o-transition: all .3s ease;
	transition: all .3s ease;
}

button:hover, input:hover, textarea:hover, select:hover {
	opacity: 0.8;
}

strong {
	font-weight: 700;
}

em {
	font-style: italic;
}

img {
	max-width: 100%;
}

h1, .h1 {
	margin: 0 0 0;
	padding: 0 0 15px;
	font-size: 40px;
	line-height: 1.2;
	font-weight: 700;
}

h2, .h2 {
	margin: 0 0 0;
	padding: 0 0 15px;
	font-size: 30px;
	line-height: 1.2;
	font-weight: 500;
}

h3, .h3 {
	margin: 0 0 0;
	padding: 0 0 15px;
	font-size: 25px;
	line-height: 1.2;
	font-weight: 400;
}

h4, .h4 {
	margin: 0 0 0;
	padding: 0 0 15px;
	font-size: 22px;
	line-height: 1.2;
	font-weight: 400;
}

h5, .h5 {
	margin: 0 0 0;
	padding: 0 0 15px;
	font-size: 18px;
}

h6, .h6 {
	margin: 0 0 0;
	padding: 0 0 15px;
	font-size: 13px;
}

blockquote {
	margin: 0 0 0;
	padding: 0 0 15px;
	font-size: 20px;
	display: block;
	position: relative;
}

p {
	padding: 0 0 15px;
}

ul, ol {
	padding: 0 0 15px 20px;
}

ul ol, ul ul, ol ul, ol ol {
	padding-bottom: 0;
}

h1:last-child,
h2:last-child,
h3:last-child,
h4:last-child,
h5:last-child,
h6:last-child,
ul:last-child,
ol:last-child,
p:last-child {
	padding-bottom: 0;
}

.clear:before, .clear:after {
	content: "";
	display: block;
	clear: both;
}

.hide, .hidden {
	display: none;
}

.content-wrapper {
	width: 1000px;
	height: 100%;
	margin: 0 auto;
	padding: 0 15px;
}

.alignleft, img.alignleft {
	float: left;
	display: block;
	margin: 0 5px 0 0;
}

.alignright, img.alignright {
	float: right;
	display: block;
	margin: 0 0 0 5px;
}

.aligncenter, img.aligncenter {
	float: none;
	display: block;
	margin: 0 auto 0;
}

.alignnone, img.alignnone {
	margin: 0 0 0;
	display: block;
}

/*  */

.text-center {
	text-align: center;
}

.text-left {
	text-align: left;
}

.text-right {
	text-align: right;
}

/*  */

.container, .container-fluid, .container-lg, .container-md, .container-sm, .container-xl, .container-xxl {
	padding-left: 15px;
	padding-right: 15px;
}

[class*="col-"] {
	padding-left: 15px;
	padding-right: 15px;
}

.row {
	margin-left: -15px;
	margin-right: -15px;
}

/* 2 - END of Tags styles and General styles ---------------------------------------------------------- */
/* 3 - BEGIN of header ---------------------------------------------------------- */

header {
	padding: 15px 0 15px;
	background: #ffffff;
    box-shadow: 0 0 10px 0 #efedf8;
	position: fixed;
	z-index: 60;
	left: 0;
	right: 0;
	top: 0;
}

header + * {
	padding-top: 0;
}

.navbar, header, .logo, header + * {
	-webkit-transition: all .3s ease;
	-o-transition: all .3s ease;
	transition: all .3s ease;
}

.header-fixed {
	position: fixed;
	z-index: 60;
	left: 0;
	right: 0;
	top: 0;
	box-shadow: 0px 1px 8px 0px rgba(0, 0, 0, .25);
}

.logo {
	float: none;
	display: block;
	margin: 0 auto 0;
	padding: 0 0 0;
    max-width: 160px;
}

.logo img {
	display: block;
	margin: 0 auto 0;
}

header a {
	color: inherit;
}

.spinner {
  border: 0.3em solid rgba(0, 0, 0, 0.2);
  border-top: 0.3em solid #007bff; /* Blue color */
  border-radius: 50%;
  width: 3rem;
  height: 3rem;
  animation: spin 0.8s linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}






/* 3 - END of header ---------------------------------------------------------- */
/* 4 - BEGIN of .content ---------------------------------------------------------- */

.content {
	background-color: #f8f9fa;
	position: relative;
}

.box-wr {
	padding: 80px 0 80px;
	position: relative;
	background-repeat: no-repeat;
	background-position: center center;
	-webkit-background-size: cover;
	background-size: cover;
}

/*  */

.img-wr {
	position: relative;
	background-repeat: no-repeat;
	background-position: center center;
	-webkit-background-size: cover;
	background-size: cover;
}

.img-wr img {
	display: block;
	margin: 0 auto 0;
	-webkit-transition: all .5s ease;
	transition: all .5s ease;
}

.img-wr > a {
	display: block;
	overflow: hidden;
	width: 100%;
	-webkit-backface-visibility: hidden;
	transform: translate3d(0, 0, 0);
	-webkit-transition: all .7s ease;
	transition: all .7s ease;
}

.img-wr:hover a img {
	-webkit-transform: scale(1.05);
	transform: scale(1.05);
}

/*  */

.display-inline-block {
	display: inline-block;
	vertical-align: middle;
}

.display-block {
	display: block;
}

.display-flex {
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.display-inline-flex {
	display: inline-flex;
	align-items: center;
}

.vertical-align-wrapper {
	display: table;
	width: 100%;
	height: 100%;
}

.vertical-align-middle {
	display: table-cell;
	vertical-align: middle;
}

.vertical-align-bottom {
	display: table-cell;
	vertical-align: bottom;
}

/*  */

.tdu {
	text-decoration: underline;
}

.ttu {
	text-transform: uppercase;
}

.ttn {
	text-transform: none;
}

/*  */

.slide-item {
	outline: none;
}

/*  */

.bordered-bottom {
	padding: 0 0 20px;
	margin: 0 0 20px;
	position: relative;
	border: none;
}

.bordered-bottom:after {
	width: 80px;
	border-bottom: 4px solid;
	left: 0;
	bottom: 0;
	margin: auto;
	content: "";
	display: block;
	position: absolute;
}

.text-center.bordered-bottom:after {
	right: 0;
}

body .text-left.bordered-bottom:after {
	right: auto;
}

/*  */

.columns-2 {
	-webkit-column-count: 2;
	-moz-column-count: 2;
	column-count: 2;
	-webkit-column-gap: 15px;
	-moz-column-gap: 15px;
	column-gap: 15px;
}

/*  */

body .gallery-thumb-item {
	margin: 0 0 15px;
	padding: 0 0 0;
	display: block;
	position: relative;
	overflow: hidden;
	background-repeat: no-repeat;
	background-position: center;
	-webkit-background-size: cover;
	background-size: cover;
}

.gallery-thumb-item img {
	display: block;
	width: 100%;
	margin: 0 auto;
}

.gallery-thumb-item:before {
	position: absolute;
	left: 0;
	right: 0;
	top: -100px;
	bottom: 100%;
	width: 30px;
	height: 30px;
	line-height: 1;
	font-size: 30px;
	color: #ffffff;
	margin: auto;
	text-shadow: 0px 1px 3px #222222;
	font-family: "FontAwesome";
	content: "\f00e";
	-webkit-transition: all .3s ease;
	-o-transition: all .3s ease;
	transition: all .3s ease;
}

.gallery-thumb-item[href*="youtube"]:before {
	content: "\f01d";
}

.gallery-thumb-item:hover:before {
	top: 0;
	bottom: 0;
}

/*  */

body .padding-0 {
	padding: 0;
}

body .padding-top-0 {
	padding-top: 0;
}

body .padding-bottom-0 {
	padding-bottom: 0;
}

body .margin-0 {
	margin: 0;
}

body .margin-top-0 {
	margin-top: 0;
}

body .margin-bottom-0 {
	margin-bottom: 0;
}

/*  */

.border-radius-5px {
	border-radius: 5px;
}

.border-radius-10px {
	border-radius: 10px;
}

.border-radius-15px {
	border-radius: 15px;
}

.border-radius-20px {
	border-radius: 20px;
}

.border-radius-25px {
	border-radius: 25px;
}

.border-radius-30px {
	border-radius: 30px;
}

.img-rounded,
.block-rounded {
	border-radius: 500px;
	border-radius: 50%;
}

.block-shadowed {
	box-shadow: 20px 15px 30px 20px rgba(0, 0, 0, 0.05);
}

.block-bordered {
	border: 1px solid var(--theme-color);
}

.block-bordered-bottom {
	border-bottom: 1px solid var(--theme-color);
}

/*  */

.columns-same-height > * {
	margin-bottom: 30px;
}

.columns-same-height > * > * {
	height: 100%;
	margin-bottom: 0;
}

/*  */

.justify-content-center,
.display-flex.text-center {
	gap: 30px;
	justify-content: center;
}

.justify-content-start {
	justify-content: flex-start;
}

.justify-content-end {
	justify-content: flex-end;
}

.align-items-center {
	align-items: center;
}

.align-items-start {
	align-items: flex-start;
}

.align-items-end {
	align-items: flex-end;
}

/*  */

.row-reverse {
	flex-direction: row-reverse;
}
















/*  */

body .btn-main {
	padding: 12px 30px 12px;
	margin: 0 auto 30px;
	font-size: 15px;
	line-height: 30px;
	min-width: 230px;
	gap: 10px;
	border-radius: 1px;
	letter-spacing: 0.05em;
	font-weight: 400;
	width: auto;
	font-style: normal;
	color: #ffffff;
	background: var(--theme-color);
	border: none;
	text-align: center;
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
    font-family: 'mr-eaves-modern', sans-serif;

	box-shadow: inset 0 0 20px rgba(0, 0, 0, 0);
	outline: 1px solid;
	outline-color: var(--theme-color);
	outline-offset: -1px;
	text-shadow: none;
	transition: all 1250ms cubic-bezier(0.19, 1, 0.22, 1);
}

html body .btn-main:hover {
	opacity: 1;
	box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.15), 0 0 20px -10px var(--theme-color);
	outline-color: rgba(0, 0, 0, 0);
	outline-offset: 15px;
}

.btn-main.bg-white {
	color: var(--theme-color-text);
}

body .btn-main:last-child {
	margin-bottom: 0;
}

/*  */

*::-webkit-input-placeholder {
	text-indent: 0;
	transition: all .5s ease;
}

*:-moz-placeholder {
	text-indent: 0;
	transition: all .5s ease;
}

*::-moz-placeholder {
	text-indent: 0;
	transition: all .5s ease;
}

*:-ms-input-placeholder {
	text-indent: 0;
	transition: all .5s ease;
}

*:focus::-webkit-input-placeholder {
	text-indent: 220px;
	opacity: 0;
}

*:focus::-moz-placeholder {
	text-indent: 220px;
	opacity: 0;
}

*:focus:-moz-placeholder {
	text-indent: 220px;
	opacity: 0;
}

*:focus:-ms-input-placeholder {
	text-indent: 220px;
	opacity: 0;
}

/*  */

.box-logs {
	padding: 120px 0 20px;
	margin: 0 auto 0;
	position: relative;
}

.box-logs form {
	padding: 0 0 0;
	margin: 0 auto 0;
	position: relative;
}

.box-logs .form-item {
	padding: 0 0 0;
	margin: 0 auto 20px;
	position: relative;
}

body .box-logs input,
body .box-logs select,
body .box-logs textarea {
	padding: 13px 20px;
	font-size: 22px;
	line-height: 25px;
	margin: 0 0 0;
	display: block;
	width: 100%;
	border-radius: 6px;
	background: #ededef;
	font-style: normal;
	letter-spacing: 0;
}

body .box-logs textarea {
	min-height: 145px;
}

body .box-logs input[type="file"] {
	cursor: pointer;
}

.box-logs .btn-main {
	padding: 10px 20px 9px;
	min-width: 250px;
	font-size: 25px;
	line-height: 30px;
	font-weight: 600;
}

.box-logs h3 {
	font-size: 34px;
	line-height: 1.2;
}

.box-logs-mobile {
	max-width: 360px;
}

body .input-image-with-preview {
	height: 350px;
	display: block;
	position: relative;
	padding: 0 0 0;
	margin: 0 0 0;
	cursor: pointer;
	background: #ededef;
	border-radius: 6px;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	overflow: hidden;
}

body .input-image-with-preview input {
	opacity: 0;
	visibility: hidden;
	display: none;
}

body .input-image-with-preview h4 {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 32px;
	text-transform: none;
	letter-spacing: 0;
	padding: 0 0 0;
	margin: 0 0 0;
}

body .input-image-with-preview h4 i {
	font-size: 85%;
}

body .input-image-with-preview img {
	position: absolute;
	left: 0;
	top: 0;
	right: 0;
	bottom: 0;
	object-fit: cover;
}

/*  */

.block-logs-items {
	padding: 0 0 0;
	margin: 0 0 0;
}

.logs-items-wr {
	position: relative;
	padding: 0 0 20px;
	margin: 0 auto 0;
}

html body .logs-item {
	padding: 7px 50px 7px 25px;
	font-size: 21px;
	line-height: 1.4;
	margin: 0 0 15px;
	background: #fff;
	border-radius: 6px;
	box-shadow: 2px 2px 6px 0px rgba(0, 0, 0, .15);
	position: relative;
	display: flex;
	align-items: center;
	justify-content: space-between;
	color: inherit;
}

html body .logs-item:hover {
	box-shadow: 2px 2px 6px 0px rgba(0, 0, 0, .35);
}

html body .logs-item:after {
	content: "";
	position: absolute;
	right: 0;
	top: 0;
	bottom: 0;
	margin: auto 15px;
	width: 25px;
	height: 25px;
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='rgb(0, 191, 186)' class='bi bi-arrow-right' viewBox='0 0 16 16'><path fill-rule='evenodd' d='M1 8a.5.5 0 0 1 .5-.5h11.793l-3.147-3.146a.5.5 0 0 1 .708-.708l4 4a.5.5 0 0 1 0 .708l-4 4a.5.5 0 0 1-.708-.708L13.293 8.5H1.5A.5.5 0 0 1 1 8'/></svg>");
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
}

/*  */

.block-log-details {
	padding: 0 0 0;
	margin: 0 auto 0;
	position: relative;
}

.block-log-details h3 i {
	margin: 0 5px 0 0;
}

.block-log-details h3 a, 
.block-log-details h3 a:hover {
	color: inherit;
}

html .log-details h6 {
	padding: 0 0 0;
	margin: 0 0 15px;
	text-transform: none;
}

html .log-details .img-wr {
	margin: 0 auto 20px;
	border-radius: 6px;
	border: 1px solid var(--theme-color);
	padding: 0 0 0;
}

hr.display-block.bg-theme {
	margin: 50px 0 30px;
	border-color: var(--theme-color);
}





























/* 4 - END of .content ---------------------------------------------------------- */
/* 5 - BEGIN of footer ---------------------------------------------------------- */

footer {
	padding: 30px 0 30px;
}

/* 5 - END of footer ---------------------------------------------------------- */

/* * - BEGIN of @media ---------------------------------------------------------- */

@media screen and (max-width: 1199px) {
	



}

/* ----------------------------------------------------------------------------------- */

@media screen and (max-width: 991px) {
	



}

/* ----------------------------------------------------------------------------------- */

@media screen and (max-width: 767px) {

	.content-wrapper {
		width: 100%;
		padding: 0 10px; /* Adjust padding for smaller screens */
	}

	.logo {
		max-width: 120px; /* Reduce logo size for smaller screens */
	}


}

/* ----------------------------------------------------------------------------------- */

@media screen and (max-width: 550px) {

	.content-wrapper {
		padding: 0 5px;
	}

	.logo {
		max-width: 100px; /* Further reduce logo size on small devices */
	}


}

/* ----------------------------------------------------------------------------------- */
/* * - END of @media ---------------------------------------------------------- */
