/**
* Template Name: Flattern - v4.1.0
* Template URL: https://bootstrapmade.com/flattern-multipurpose-bootstrap-template/
* Author: BootstrapMade.com
* License: https://bootstrapmade.com/license/
*/

/*--------------------------------------------------------------
# General
--------------------------------------------------------------*/

/*--------------------------------------------------------------
# Back to top button
--------------------------------------------------------------*/
.back-to-top {
	position: fixed;
	visibility: hidden;
	opacity: 0;
	right: 15px;
	bottom: 15px;
	z-index: 996;
	background: #f03c02;
	width: 40px;
	height: 40px;
	border-radius: 4px;
	transition: all 0.4s;
}

	.back-to-top i {
		font-size: 28px;
		color: #fff;
		line-height: 0;
	}

	.back-to-top:hover {
		background: #fd541e;
		color: #fff;
	}

	.back-to-top.active {
		visibility: visible;
		opacity: 1;
	}

/*--------------------------------------------------------------
# Disable AOS delay on mobile
--------------------------------------------------------------*/
@media screen and (max-width: 768px) {
	[data-aos-delay] {
		transition-delay: 0 !important;
	}
}

/*--------------------------------------------------------------
# Top Bar
--------------------------------------------------------------*/
#topbar {
	background: #008066;
	padding: 10px 0;
	font-size: 25px;
}

	#topbar .contact-info i {
		font-style: normal;
		color: #fffefe;
		font-size: 22px;
		padding: 5px;
	}

		#topbar .contact-info i a, #topbar .contact-info i span {
			padding-left: 5px;
			color: #2b2320;
		}

		#topbar .contact-info i a {
			line-height: 0;
			transition: 0.3s;
		}

			#topbar .contact-info i a:hover {
				color: #1a202c;
			}

	#topbar .social-links a {
		color: #ffffff;
		line-height: 0;
		transition: 0.3s;
		margin-left: 15px;
	}

		#topbar .social-links a:hover {
			color: #1a202c;
		}

/*--------------------------------------------------------------
# Header
--------------------------------------------------------------*/
#header {
	height: 70px;
	transition: all 0.5s;
	z-index: 997;
	transition: all 0.5s;
	background: #fff;
	direction: rtl;
}

	#header.fixed-top {
		box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.1);
	}

	#header .logo h1 {
		font-size: 28px;
		margin: 0;
	padding-top:20px;
	padding-bottom:20px;
	padding-right:2px;
	padding-left:0px
		line-height: 1;
		font-weight: 400;
		letter-spacing: 1px;
		text-transform: uppercase;
	}

		#header .logo h1 a, #header .logo h1 a:hover {
			color: #2b2320;
			text-decoration: none;
		}

	#header .logo img {
		padding: 0;
		margin: 0;
		max-height: 40px;
	}

.scrolled-offset {
	margin-top: 70px;
}

/*--------------------------------------------------------------
# Navigation Menu
--------------------------------------------------------------*/

/*--------------------------------------------------------------
# Hero Section
--------------------------------------------------------------*/
#hero {
	width: 100%;
	height: 450px;
	/* overflow: hidden; */
	position: relative;
	padding-top: 10px;
}

	#hero .carousel, #hero .carousel-inner, #hero .carousel-item, #hero .carousel-item::before {
		 background-size: inherit;
		 background-position: center;
		 background-repeat: no-repeat;
		 position: absolute;
		 top: 0;
		 right: 0;
		 left: 0;
		 bottom: 0;
		 /* margin-left: -20px; */
	}

	#hero .carousel-container {
		display: flex;
		align-items: flex-end;
		justify-content: center;
		position: absolute;
		bottom: 60px;
		top: 110px;
		left: 50px;
		right: 50px;
	}

	#hero .carousel-content {
		background: rgba(28, 23, 21, 0.7);
		padding: 10px;
		color: #fff;
		-webkit-animation-duration: .5s;
		animation-duration: .5s;
		border-top: 5px solid #018066;
		width:100%;
	}

		#hero .carousel-content p {
			color: #fff;
			margin-bottom: 30px;
			font-size: 22px;
			font-weight: 700;
			line-height:2.0em
		}

	#hero .btn-get-started {
		font-family: "Muli", sans-serif;
		font-weight: 500;
		font-size: 14px;
		letter-spacing: 1px;
		display: inline-block;
		padding: 12px 32px;
		border-radius: 4px;
		transition: 0.5s;
		line-height: 1;
		margin: 10px;
		color: #fff;
		-webkit-animation-delay: 0.8s;
		animation-delay: 0.8s;
		border: 2px solid #f03c02;
	}

		#hero .btn-get-started:hover {
			background: #f03c02;
			color: #fff;
			text-decoration: none;
		}

	#hero .carousel-inner .carousel-item {
		transition-property: opacity;
	}

	#hero .carousel-inner .carousel-item,
	#hero .carousel-inner .active.carousel-item-start,
	#hero .carousel-inner .active.carousel-item-end {
		opacity: 0;
	}

	#hero .carousel-inner .active,
	#hero .carousel-inner .carousel-item-next.carousel-item-start,
	#hero .carousel-inner .carousel-item-prev.carousel-item-end {
		opacity: 1;
		transition: 0.5s;
	}

		#hero .carousel-inner .carousel-item-next,
		#hero .carousel-inner .carousel-item-prev,
		#hero .carousel-inner .active.carousel-item-start,
		#hero .carousel-inner .active.carousel-item-end {
			left: 0;
			transform: translate3d(0, 0, 0);
		}

	#hero .carousel-control-prev, #hero .carousel-control-next {
		width: 10%;
	}

	#hero .carousel-control-next-icon, #hero .carousel-control-prev-icon {
		background: none;
		font-size: 48px;
		line-height: 1;
		width: auto;
		height: auto;
	}

	#hero .carousel-indicators li {
		cursor: pointer;
		direction: rtl;
	}




@media (min-width: 1024px) {
	#hero .carousel-content {
		width: 80%;
	}

	#hero .carousel-control-prev, #hero .carousel-control-next {
		width: 5%;
	}
}



@media (max-width: 992px) {
	#hero {
		/* width: 700px; */
		/* height: 360px; */
		/* margin-left: 100px; */
	}

		#hero .carousel-content h2 {
			margin-bottom: 10px;
			font-size: 22px;
		}

		#hero .carousel-content p {
			font-size: 17px;
		}
}

@media (max-height: 500px) {
	#hero {
		/* width:700px; */
		/* height: 360px; */
}


}







#hero1 {
    width: 100%;
    height: 450px;
    /* overflow: hidden; */
    position: relative;
    padding-top: 10px;
}

    #hero1 .carousel, #hero1 .carousel-inner, #hero1 .carousel-item, #hero1 .carousel-item::before {
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
        position: absolute;
        top: 0;
        right: 0;
        left: 0;
        bottom: 0;
        /* margin-left: -20px; */
    }

    #hero1 .carousel-container {
        display: flex;
        align-items: flex-end;
        justify-content: center;
        position: absolute;
        bottom: 60px;
        top: 110px;
        left: 50px;
        right: 50px;
    }

    #hero1 .carousel-content {
        background: rgba(28, 23, 21, 0.7);
        padding: 10px;
        color: #fff;
        -webkit-animation-duration: .5s;
        animation-duration: .5s;
        border-top: 5px solid #018066;
        width: 100%;
    }

        #hero1 .carousel-content p {
            color: #fff;
            margin-bottom: 30px;
            font-size: 22px;
            font-weight: 700;
            line-height: 2.0em
        }

    #hero1 .btn-get-started {
        font-family: "Muli", sans-serif;
        font-weight: 500;
        font-size: 14px;
        letter-spacing: 1px;
        display: inline-block;
        padding: 12px 32px;
        border-radius: 4px;
        transition: 0.5s;
        line-height: 1;
        margin: 10px;
        color: #fff;
        -webkit-animation-delay: 0.8s;
        animation-delay: 0.8s;
        border: 2px solid #f03c02;
    }

        #hero1 .btn-get-started:hover {
            background: #f03c02;
            color: #fff;
            text-decoration: none;
        }

    #hero1 .carousel-inner .carousel-item {
        transition-property: opacity;
    }

    #hero1 .carousel-inner .carousel-item,
    #hero1 .carousel-inner .active.carousel-item-start,
    #hero1 .carousel-inner .active.carousel-item-end {
        opacity: 0;
    }

    #hero1 .carousel-inner .active,
    #hero1 .carousel-inner .carousel-item-next.carousel-item-start,
    #hero1 .carousel-inner .carousel-item-prev.carousel-item-end {
        opacity: 1;
        transition: 0.5s;
    }

        #hero1 .carousel-inner .carousel-item-next,
        #hero1 .carousel-inner .carousel-item-prev,
        #hero1 .carousel-inner .active.carousel-item-start,
        #hero1 .carousel-inner .active.carousel-item-end {
            left: 0;
            transform: translate3d(0, 0, 0);
        }

    #hero1 .carousel-control-prev, #hero1 .carousel-control-next {
        width: 10%;
    }

    #hero1 .carousel-control-next-icon, #hero1 .carousel-control-prev-icon {
        background: none;
        font-size: 48px;
        line-height: 1;
        width: auto;
        height: auto;
    }

    #hero1 .carousel-indicators li {
        cursor: pointer;
        direction: rtl;
    }




@media (min-width: 1024px) {
    #hero1 .carousel-content {
        width: 80%;
    }

    #hero1 .carousel-control-prev, #hero1 .carousel-control-next {
        width: 5%;
    }
}



@media (max-width: 992px) {
    #hero1 {
        /* width: 700px; */
        /* height: 360px; */
        /* margin-left: 100px; */
    }

        #hero1 .carousel-content h2 {
            margin-bottom: 10px;
            font-size: 22px;
        }

        #hero1 .carousel-content p {
            font-size: 17px;
        }
}

@media (max-height: 500px) {
    #hero1 {
        /* width:700px; */
        /* height: 360px; */
    }
}