@import url('https://fonts.googleapis.com/css2?family=Dancing+Script:wght@400..700&family=Style+Script&display=swap');

@font-face {
    font-family: 'chantelli_antiquaregular';
    src: url('../fonts/chantelli_antiqua-webfont.woff2') format('woff2'),
         url('../fonts/chantelli_antiqua-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'foglihtenregular';
    src: url('../fonts/foglihten-068-webfont.woff2') format('woff2'),
         url('../fonts/foglihten-068-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}

/*@font-face {
	font-family: PoppinsLight;
	src: url(../fonts/Poppins-Light.ttf);
}

@font-face {
	font-family: PoppinsRegular;
	src: url(../fonts/Poppins-Regular.ttf);
}

@font-face {
	font-family: RalewayRegular;
	src: url(../fonts/Raleway-Regular.ttf);
}

@font-face {
	font-family: RalewayMedium;
	src: url(../fonts/Raleway-Medium.ttf);
}

@font-face {
	font-family: RalewayBold;
	src: url(../fonts/Raleway-Bold.ttf);
}

@font-face {
	font-family: MyriadproRegular;
	src: url(../fonts/Myriadpro-Regular.ttf);
}*/


.heroArea .box h1{font-weight: 400 !important;
    font-style: normal !important;
    font-family: 'foglihtenregular' !important;}

.heroArea .box p{font-weight: 400 !important;
    font-style: normal !important;
    font-family: 'foglihtenregular' !important;}

:root {
	--primary-color: #3a729a;
	--secondary-color: #000;
}

* {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
	background: transparent;
	border: none;
	font-family: 'foglihtenregular' !important;
	text-decoration: none !important;
	list-style: none;
	outline: none;
	resize: none !important;
	font-size:20px;
	line-height:28px;
/*	font: normal 20px/28px Dancing Script, 'Sans-serif';font-weight: 400 !important;*/
    font-style: normal !important;
    
}

/* Fix Font Awesome icons */
.fa, .fab, .fas, .far, .fal, .fad, .fa-brands {
  font-family: "Font Awesome 6 Brands", "Font Awesome 6 Free" !important;
  font-style: normal;
  font-weight: 400;
}

html,
body {
	overflow-x: hidden;
}

#mainContainer {
	max-width: 1920px;
	margin: 0 auto;
	padding: 0;
}

a {
	color: var(--secondary-color);
}




section {
	scroll-snap-align: start;
	scroll-padding-top: 50px;
	scroll-margin-top: 50px;
}

input,
textarea,
select {
	width: 100%;
	border: 2px solid #a4a6a5 !important;
	transition: 300ms ease-in;
	font: normal 16px/20px PoppinsLight, 'Sans-serif';

	&:focus {
		border-color: var(--primary-color) !important;
	}

	&:read-only {
		color: var(--secondary-color) !important;
	}
}

input[type="checkbox"] {
	scale: 1.2;
}

select {
	-moz-appearance: none;
	-webkit-appearance: none;

	&:invalid {
		color: gray;
	}
}

select::-ms-expand {
	display: none;
}

button {
	&:focus {
		outline: none !important;
		box-shadow: none !important;
	}
}

:is(ul, ol):not(:is(header, footer) :is(ul, ol)) {
	padding: 0 !important;
	margin: 0 !important;

	li {
		margin-bottom: 5px;
	}
}

img,
video,
svg {
	max-width: 100%;
	object-fit: cover;
}

.btn.btn-primary {
	background: var(--primary-color) !important;
	border-color: transparent !important;
	color: #fff !important;
	position: relative;
	overflow: hidden;
	padding: 12px 20px;
	min-width: 150px !important;
	transition: outline 300ms ease-in;font-weight: 400 !important;
    font-style: normal !important;
    font-family: 'foglihtenregular';

	&:hover {
		background: #1a1a1a !important;
	}

	&:focus {
		background: #1a1a1a !important;
	}
}

.btn.btn-secondary {
	background: var(--secondary-color) !important;
	border-color: transparent !important;
	color: #fff !important;
	position: relative;
	overflow: hidden;
	padding: 12px 20px;
	min-width: 150px !important;
	outline: 1px solid transparent !important;
	outline-offset: -5px;
	transition: outline 300ms ease-in;

	&:hover {
		outline: 1px solid #fff !important;
		background: #1a1a1a !important;
		border-radius: 0 !important;
	}

	&:focus {
		outline: 1px solid #fff !important;
		background: #1a1a1a !important;
		border-radius: 0 !important;
	}
}

/* ---------------------------------------------- */
/* --------------- Other Page ------------------- */
/* ---------------------------------------------- */

.social {
	a {
		width: 40px;
		height: 40px;
		place-items: center;
		transition: 300ms ease-in;
		border-color: var(--secondary-color) !important;

		i {
			font-size: 16px;
			color: var(--secondary-color) !important;
			transition: 300ms ease-in;
		}

		&:hover {
			scale: 1.1;
			border-color: var(--primary-color) !important;

			i {
				color: var(--primary-color) !important;
			}
		}
	}
}

#headerArea {
	width: 100vw;
	transition: 300ms ease-in;
	background-color: #e9e9e9;

	ul,
	ol {
		padding: 0 !important;
		margin: 0 !important;
	}

	li {
		padding: 0 16px 0 16px;

		a {
			display: flex;
			align-items: center;
			gap: 10px;
			color: var(--secondary-color) !important;
			transition: 300ms ease-in-out;
			line-height: 1 !important;
			font-size: 20px;

			&:hover,
			&.active {
				color: var(--primary-color) !important;
				font-weight: bold;
			}
		}

		&:last-child {
			padding: 0 0 0 16px;
		}
	}

	.topbar {
		.social {
			a {
				width: 35px;
				height: 35px;
			}
		}
	}
}

#footerArea {
	ul {
		li {
			a {
				color: #fff !important;
				transition: 300ms ease-in;

				&:hover,
				&:focus,
				&.active {
					color: var(--primary-color) !important;
				}
			}
		}
	}

	a {
		color: #fff !important;

		p {
			font: lighter 18px/28px PoppinsLight, 'Sans-serif';

			strong {
				font: bold 18px/28px MyriadproRegular, 'Sans-serif';
			}
		}

		&:focus p:not(:has(strong)),
		&:hover p:not(:has(strong)) {
			color: var(--primary-color) !important;
		}
	}

	.addBorder {
		position: relative;

		&::after,
		&::before {
			content: '';
			position: absolute;
			height: 50%;
			width: 1px;
			background-color: rgba(164, 166, 165, .3);
			transform: translateY(-50%);
		}

		&::after {
			inset: 50% 0 auto auto;
		}

		&::before {
			inset: 50% auto auto 0;
		}
	}

	p.copyright {
		/*font: normal 14px/16px Dancing Script, 'Sans-serif' !important;
		font-weight: 400 !important;*/
    font-style: normal !important;
    font-family: 'foglihtenregular';
	}
}

.offcanvas {
	.btn-close:focus {
		box-shadow: none !important;
	}

	.menu-item {
		padding: 8px 16px;

		a {
			margin-bottom: 10px;
			border-left: 2px solid transparent;
			transition: 300ms ease-in;
			color: #666 !important;

			&.active,
			&:focus,
			&:hover {
				padding: 8px 20px;
				border-left: 2px solid var(--primary-color) !important;
				color: var(--primary-color) !important;
			}
		}
	}
}

.scrollToTop {
	content: " ";
	width: 50px;
	height: 50px;
	background: var(--primary-color) !important;
	position: fixed;
	inset: auto 20px 20px auto;
	display: none;
	z-index: 3;
	place-items: center;
	transition: 300ms ease-in;
	box-shadow: 0 0 10px -5px rgba(255, 255, 255, 0.25);

	svg {
		fill: #fff !important;
		transition: 300ms ease-in;
		max-width: 32px;
	}

	&:hover {
		background: #fff !important;
		border: 2px solid var(--primary-color) !important;

		svg {
			fill: var(--primary-color) !important;
		}
	}
}

/* ---------------------------------------------- */
/* --------------- Other Page ------------------- */
/* ---------------------------------------------- */

.sectionTitle {
	font: normal 52px/64px RalewayBold, 'Sans-serif';
	color: var(--primary-color);
	margin-block: 0;
}
.sectionTitle{font-weight: 400 !important;
    font-style: normal !important;
    font-family: 'foglihtenregular';}
.sectionSubTitle {
	font: normal 20px/28px RalewayRegular, 'Sans-serif';
	color: var(--secondary-color);
}

.sectionSubTitle{font-weight: 400 !important;
    font-style: normal !important;
    font-family: 'foglihtenregular';}

.home {
	.box {
		max-width: 560px;

		h1 {
			font: normal 78px/84px RalewayBold, 'Sans-serif';
		}

		h3 {
			font: normal 36px/44px RalewayBold, 'Sans-serif';
		}

		p {
			font: normal 24px/32px RalewayRegular, 'Sans-serif';
		}
	}
}

#about {
	img {
		width: 95%;
	}
}

#service {
	.cardBox {
		h5 {
			font: normal 24px/24px RalewayRegular, 'Sans-serif';
			color: var(--primary-color);line-height: 36px;
		}

		a {
			font: 500 18px/24px RalewayMedium, 'Sans-serif';
			color: var(--primary-color);

			&:hover {
				color: var(--secondary-color);
			}
		}

		.imgBox {
			width: 150px;
			height: 150px;
			aspect-ratio: 1;
			margin: auto;
			place-items: center;
			border-color: var(--primary-color) !important;
			border-width: 6px !important;

			img {
				width: 60%;
			}
		}
	}
}

#feature {
	ul {
		li {
			font: normal 18px/24px RalewayRegular, 'Sans-serif';
			margin-bottom: 16px;
			display: flex;
			align-items: center;
			gap: 12px;

			&::before {
				content: '';
                font-family: "Font Awesome 5 Free";
                font-size: 14px;
                color: #fff;
                width: 18px;
                height: 12px;
                background-color: var(--primary-color);
                border-radius: 50%;
                display: grid;
                place-items: center;
                top: -10px;
                position: relative;display: none;
			}
		}
	}
}

#image {
	.container-fluid {
		min-height: 326px;
        background-color: #000;
        background-position: center top;
        background-repeat: no-repeat;
        background-size: 100% 330px;
	}
}

#blog {
	.blogCard {
		h5 {
			font: bold 25px/32px RalewayBold, 'Sans-serif';
		}

		p {
			min-width: 100% !important;
			display: -webkit-box;
			line-clamp: 1;
			-webkit-line-clamp: 1;
			-webkit-box-orient: vertical;
			overflow: hidden;
			text-overflow: ellipsis;
			font: bold 18px/24px RalewayRegular, 'Sans-serif';
		}

		a {
			font: bold 18px/24px RalewayRegular, 'Sans-serif';
			color: var(--primary-color);

			&:hover,
			&:focus {
				color: var(--secondary-color);
			}
		}
	}

	.owl-carousel.owl-blog .owl-dots.disabled {
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 5px;
		padding-top: 15px !important;

		.owl-dot {
			button {
				width: 10px;
				height: 10px;
				aspect-ratio: 1;
				border-radius: 50%;
				background-color: var(--secondary-color);
				text-indent: 9999px;
			}

			&.active button {
				background-color: var(--primary-color);
			}
		}
	}
}

#contact {
	.sectionSubTitle {
		color: var(--primary-color);
		font: bold 22px/24px RalewayRegular, 'Sans-serif';
	}

	button {
		padding: 15px 20px;
	}
}

.team-member {
    background-color: #3a729a;
    margin-bottom: 3px;
    padding: 20px;
    color: #fff;
    min-height: 523px;
    border-radius: 21px;
}

    .team-image {
    width: 500px;
    object-fit: cover;
    height: 300px;
}

    .team-name {
    font-size: 35px;
    font-weight: bold;
    margin-top: 39px;
    margin-bottom: 26px;
}

    .team-description {
      font-size: 20px;
      line-height: 1.6;
    }

    .load-more-btn {
      font-size: 18px;
      background-color: #3a729a;
      color: #fff;
      border: none;
      padding: 10px 30px;
      border-radius: 5px;
      margin-top: 20px;
    }

    div#team-container .col-md-4 {
    padding-right: 3px;
    padding-left: 0;
}
img.innerbnr {
    width: 1400px;
    height: 495px;
    object-fit: cover;
}
.page-template-template-teams {
    & .box {
        h1 {
            font: normal 78px / 84px RalewayBold, 'Sans-serif';background-color: rgba(0, 0, 0, 0.47);
            width: auto;
            float: left;
            padding: 16px 22px;
        }
    }
}


  @media (max-width: 1440px) { 
    
  }

  @media (max-width: 1199px) { 

  }

  @media (max-width: 991px) { 
	.heroArea {
		img {
			height: 500px;
			object-fit: cover;
		}
		.box {
			h1 {
				font: normal 50px/64px RalewayBold, 'Sans-serif';
			}
		}
		.container {
			top: 58% !important;
		}
	}
  }
  @media (max-width: 767px) { 
	header {
		.menubar {
			justify-content: end !important;
			.topbar {
				width: 100%;
			}
		}
	}
	.sectionTitle {
    	font: normal 40px / 46px RalewayBold, 'Sans-serif';
	}
		footer .info a {
		display: flex;
		gap: 10px;
		justify-content: center;
	}
	#image {
		.container-fluid {
			min-height: 200px;
			background-size: cover;
		}
	}
  }
  @media (max-width: 576px) {
	.heroArea {
		img {
			height: 400px;
			object-fit: cover;
		}
		.box {
			h1 {
				font: normal 40px/44px RalewayBold, 'Sans-serif';
			}
		}
		.container {
			top: 58% !important;
		}
	}
	.sectionTitle {
        font: normal 33px / 40px RalewayBold, 'Sans-serif';
    }
	.btn.btn-primary {
    font-size: 16px;
    padding: 6px 20px !important;
    min-width: 100px !important;
	}

  }