/*
  Template Name: Template Name
  Author: Author Name
  Support: ahmedradwan052@gmail.com 
  Version: 1.0
*/

/* 
======Table of content=====
1.Theme default
2.Navbar  
3.Hero section
4.course search section
5.course section 
6.banner section 
7.program section
8.testmonial section  
*/



/* 1. Theme default css */
@import url('https://fonts.googleapis.com/css2?family=Nunito+Sans:wght@200;300;400;600;700;800;900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400;500;600;700;800;900&display=swap');


:root {
	--font-poppins:"Poppins", sans-serif;
	--font-nunito:'Nunito Sans', sans-serif;
 
	--primary-color-red: #fe4646;
	--primary-color-light-red: #dd0101;
	--anchor-color:rgba(29, 37, 45, .4);
	--text-color:#1d252d;

	--font-size:.75rem; //12px
	--body-font:.875rem; //14px
}

*,*::after,*::before{
	-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
	-moz-box-sizing: border-box;    /* Firefox, other Gecko */
	box-sizing: border-box;         /* Opera/IE 8+ */
}
 
body {
	padding: 0;
	margin: 0;
	font-family: var(--font-nunito);
	color: var(--primary-color-red);
	font-size: var(--body-font);
	font-weight: 400px;
}

h1,
h2,
h3,
h4,
h5,
h6 {
	font-family: var(--font-poppins);
	font-weight: normal;
	color: #313131;
	font-style: normal;
	font-weight: 400;
	text-transform: normal;
}

h1,
h2,
h3,
h4,
h5,
h6,p,a{
	margin: 0;
	padding: 0;
}

*:focus { 
	outline: 0 !important;
}
 
*:focus:not(.focus-visible) {
	outline: 0 !important;
	box-shadow: none !important;
}

a,
a:hover,
a:focus{

	color: var(--anchor-color);
	text-decoration: none;
}



.btn{
	font-size: 1rem;
	font-weight: 700;
	padding: 14px 30px;
	border-radius: 0px;
	border: 0;
	position: relative;
	z-index: 3;
	overflow: hidden;
	width: 100%;
	transition: .5s;
}
.form-select,.form-control{
	padding: 10px 30px;
	border: 0;
	border-radius: 0px;
}
/*===========
2.Navbar 
==============*/
.navbar {
	padding: 0;
	margin: 0;
	box-shadow: 0 0 4px 0 rgba(0, 0, 0, .1);
	.logo{
		border-right: 1px solid #ddd;
		margin: 0;
		padding: 2rem;
	}

	.navbar-menu{
		width: 100%;
	
		.navbar-social__list{
			display: flex;
			align-items: center;
			justify-content: space-between;
			flex-direction: row;
			margin: 0;
			padding: 0.625rem 0 0.625rem 0.625rem;
			border-bottom: 1px solid #ddd;
			width: 100%;
			li{
				list-style: none;
				display: inline-block;
				padding: 5px;

				a{
					color: var(--anchor-color);
					&:hover,
					&:focus{
						color: var(--primary-color-red);
					}
				}
			}
		}
		
		.navbar-menu--list{
			padding: 0.937rem 0 0.625rem 0.625rem;

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

			.custom-dropdown--menu{
				margin-top: 1.125rem !important;

				.dropdown-item:active,
				.dropdown-item:focus, 
				.dropdown-item:hover{
					background-color: transparent;

				}
			}
		}

		a{
			font-weight: 700;
			text-transform: uppercase;
			font-family: var(--font-nunito);
			font-size: var(--font-size);
			text-decoration: none;
			&:hover,
			&:focus{
				color: var(--primary-color-red);
			}
		}
		.nav-link:hover,
		.nav-link.active,
		.nav-link:focus{
			color: var(--primary-color-red);
		}
	
	}
}

/*===========
3.Hero section 
==============*/
#hero-banner{
	background-image: url(../img/project/hero-bg.png);
	padding: 50px 0 0 0;
	margin: 0;
	background-repeat: no-repeat;
	background-position: 50% 100%;

	.hero__article-block{
      margin-top: 80px;
		.article__block--title{
         font-size: 4rem;
			font-weight: bold;
			text-transform: uppercase;
			line-height: 1.3;
			margin-bottom: 10px;
			font-family: var(--font-poppins);
		}
		.article__block--subtitle{
         font-size: 1rem;
			color: var(--text-color);
			font-weight: 600;
			line-height: 1.5;
			margin-bottom: 10px;
			text-transform: capitalize;
			font-family: var(--font-nunito);
		}

		.article__block--contact{
         font-size: 2rem;
			font-weight: bold;
			line-height: 2;
			text-transform: capitalize;
			color: var(--primary-color-red);
			font-family: var(--font-poppins);

		}
	}

	.hero__article-short-course-list{
		display: flex;
		justify-content: center;
		flex-direction: column;
		margin: 10rem 0 0 0;
		.course__list--item{
			padding: 1rem 0;
			&:not(:last-child) {
				border-bottom: 1px solid #dbdbdb;
		  }
			.course__duration--title{
				font-size: 1rem;
				font-weight: 700;
				line-height: 2;
				text-transform: capitalize;
				color: var(--primary-color-red);
				font-family: var(--font-poppins);
			}

			.course__title{
				font-size: 1rem;
				font-weight: 700;
				line-height: 2;
				text-transform: capitalize;
				font-family: var(--font-poppins);

				a{
					color: var(--text-color);
					text-decoration: none;
					transition: .5s;

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

			.course__description{
				font-size: var(--font-size);
				font-weight: 500;
				line-height: 2;
				text-transform: capitalize;
				color: var(--anchor-color);
				font-family: var(--font-poppins);
			}
		}
	}
			
	.course--btn {
		background-color: rgb(254, 72, 72);
		background: var(--primary-color-red);
	   background: linear-gradient(90deg, rgb(254, 72, 72) 0%, rgb(254, 72, 72) 100%);
		box-shadow: 12px 12px 24px rgba(255, 255, 255, 0.64);
		transition: all 0.3s ease-in-out 0s;
		position: relative;
	}
	 
	button::after {
		content: '';
		border-radius: 100%;
		border: 6px solid #ff0303;
		position: absolute;
		z-index: -1;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		animation: ring 1.5s infinite;
	}
	 
	button:hover::after, button:focus::after {
		animation: none;
		display: none;
	 }
	 
	 @keyframes ring {
		0% {
		  width: 30px;
		  height: 30px;
		  opacity: 1;
		}
		100% {
		  width: 300px;
		  height: 300px;
		  opacity: 0;
		}
	 }

}


/*===========
4.course search section 
==============*/
#find-your-course-by-search{
   background: #fff;

	.lms-courses-wrapper{
		.course-info{
			.course--details{
				h3{
					font-size: 2rem;
					line-height: 2.5rem;
					font-family: var(--font-poppins);
					span{
						font-weight: 700;
						color: var(--primary-color-red);
					}
				}
				p{
					font-size: var(--body-font);
					line-height: 1.5;
					color: #313131;
					opacity: .6;
					text-transform: capitalize;
					font-family: var(--font-nunito);
				}
				a{
					
					font-weight: 700;
					text-transform: capitalize;
					font-size: var(--body-font);
					color:var(--primary-color-red);
					font-family: var(--font-nunito);
					&:hover,&:focus{
						color:var(--primary-color-light-red);
					}
				}
			}
			.courses-description{
				i{
					font-size: 1.5rem;
					line-height: 1.3;
				}
				h5{
					font-size: var(--body-font);
					color: #313131;
					font-weight: 600;
				}
				p{
					color: var(--anchor-color);
					font-weight: 600;
				}
			}
		}
		.search-bgcolor {
			background-color: #fe4646;
			.course--searching{
				.course--details{
					h3{
						font-size: 2rem;
						line-height: 2.5rem;
						font-weight: 700;
						color: #fff;
						font-family: var(--font-poppins);
					}
					label{
						font-weight: 700;
						text-transform: capitalize;
						font-size: var(--body-font);
						color:#fff;
						font-family: var(--font-nunito);
					}

					.find__course--btn{
						background-color: var(--primary-color-red);
						border: 2px solid #ddd;
						transition: .5s;
						&:hover,&:focus{
							background-color: #313131;
							border: 2px solid #313131;
						}
					}
				}
			}
	  }

	}
}

/*===========
5.course section 
==============*/

#courses-wrapper{
	.courses__list{
		.course--header{
			h3{
				font-size: 2rem;
				line-height: 2.5rem;
				font-family: var(--font-poppins);
				font-weight: 700;
				text-transform: capitalize;
				color: #313131;
			}
			p{
				font-weight: 500;
				text-transform: initial;
				font-size: var(--body-font);
				color:var(--anchor-color);
				font-family: var(--font-nunito);
			}
		}

		.courses{
			display: grid;
			grid-template-columns: repeat(6,1fr);
			.individual-courses{
				height: 200px;
				width: 100%;
				display: flex;
				align-items: center;
				justify-content: center;
				text-align: center;
				h1{
					font-size: 2rem;
					line-height: 2.5rem;
					font-family: var(--font-poppins);
					font-weight: 700;
					text-transform: capitalize;
					color: var(--primary-color-red);
					&:hover{
						color: #313131;
					}
				}
				&:nth-child(1){
					background-color: #FCB03Bff;
				}
				&:nth-child(2){
					background-color: #f8f9fa;
				}
				&:nth-child(3){
					background-color: #138D75;
				}
				&:nth-child(4){
					background-color: #f8f9fa;
				}
				&:nth-child(5){
					background-color: #28B463;
				}
				&:nth-child(6){
					background-color: #f8f9fa;
				}
				&:nth-child(7){
					background-color: #f8f9fa;
				}
				&:nth-child(8){
					background-color: #F15B26;
				}
				&:nth-child(9){
					background-color: #f8f9fa;
				}
				&:nth-child(10){
					background-color: #fe4646;
				}
				&:nth-child(11){
					background-color: #f8f9fa;	
				}
				&:nth-child(12){
					background-color: #2874A6;
				}
				&:nth-child(13){
					background-color: #6C3483;
				}
				&:nth-child(14){
					background-color: #f8f9fa;
				}
				&:nth-child(15){
					background-color: #F7DC6F;
				}
				&:nth-child(16){
					background-color: #f8f9fa;
				}
				&:nth-child(17){
					background-color: #C39BD3;
				}
				&:nth-child(18){
					background-color: #f8f9fa;	
				}
				img{
					height: 50%;
					margin: 0 auto;
				}
			}
		}
	}

}


/*===========
6.banner section 
==============*/

#banner-section{
	.banner-bg{
		background-image: linear-gradient(0deg, rgba(255, 234, 234, 0.863), rgba(255, 255, 255, 0.1)),url(../img/banner/banner.jpg);
		background-size: cover;
		background-position: center;
		background-repeat: no-repeat;
		height: 20rem;
		width: 100%;
		.banner-title{
			background-color: rgba(254, 72, 72,.8);
			display: flex;
			justify-content: center;
			flex-direction: column;
			height: 100%;
			width: 40%;
			h1{
				font-size: 2rem;
				line-height: 2.5rem;
				font-family: var(--font-poppins);
				font-weight: 700;
				text-transform: capitalize;
				color: #313131;
			}
			p{
				font-size: var(--body-font);
				color: #fff;
			}
		}

	}
}


/*===========
7.program section 
==============*/

#program-section{
	.program--header{
		h3{
			font-size: 2rem;
			line-height: 2.5rem;
			font-family: var(--font-poppins);
			font-weight: 700;
			text-transform: capitalize;
			color: #313131;
		}
		p{
			font-weight: 500;
			text-transform: initial;
			font-size: var(--body-font);
			color:var(--anchor-color);
			font-family: var(--font-nunito);
		}
	}
	.media.media-news {
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		position: relative;
		padding-bottom: 210px;
		.media-body {
			padding: 20px;
			box-shadow: 0 22px 28px 0 rgba(0, 0, 0, 0.06);
			background: #fff;
			position: absolute;
			width: 85%;
			right: 0;
			bottom: 0;
			.common-btn {
				margin-top: 10px;
			}
			h5 {
				font-size: 22px;
				padding-bottom: 15px;
				margin-bottom: 20px;
				.small {
					font-size: 16px;
				}
			}
			p {
				font-family: "Open Sans", sans-serif;
				color: #848484;
			}
			a{
				font-weight: 700;
				text-align: left;
				color: var(--primary-color-red);
				&:hover,
				&:focus{
					color: var(--primary-color-light-red);
				}
			}
			.media-date {
				font-family: "Open Sans", sans-serif;
				color: #848484;
				margin-bottom: 10px;
			}
		}
	}



	@media (min-width: 768px) {
		.media.media-news {
			 padding-bottom: 0;
			 margin-bottom: 0;
		}
	}
	@media (min-width: 1200px) {
		.media.media-news {
			 padding-bottom: 25px;
			 margin-bottom: 0;
		}
	}
	@media (min-width: 768px) {
		.media.media-news .media-body {
			 position: relative;
			 padding: 46.5px 35px;
			 right: 0;
		}
	}
	@media (min-width: 992px) {
		.media.media-news .media-body {
			 right: 40px;
			 bottom: 0;
		}
	}
	@media (min-width: 1200px) {
		.media.media-news .media-body {
			 position: absolute;
			 right: 35px;
			 width: 60%;
			 padding: 20px;
		}
	}
	
}


/*===========
8.testmonial section 
==============*/

#testmonial-section {
	.testmonial-wrapper{
		.testmonial--header{
			h3{
				font-size: 2rem;
				line-height: 2.5rem;
				font-family: var(--font-poppins);
				font-weight: 700;
				text-transform: capitalize;
				color: #313131;
			}
			p{
				font-weight: 500;
				text-transform: initial;
				font-size: var(--body-font);
				color:var(--anchor-color);
				font-family: var(--font-nunito);
			}
		}
	
	.swiper-container {
	  width: 100%;
	  height: 100%;
	
 
	.swiper-button {
	  &-next,
	  &-prev {
		 color: #313131;
		 font-size: 10px;
		 height: 10px;
	  }
	}
	.swiper-button-next:after, .swiper-container-rtl .swiper-button-prev:after {
		font-family: "Font Awesome 5 Free";
		content: "\f30b";
		display: inline-block;
		padding-right: 3px;
		vertical-align: middle;
		font-weight: 900;

   }
	.swiper-button-prev:after, .swiper-container-rtl .swiper-button-next:after {
		font-family: "Font Awesome 5 Free";
		content: "\f30a";
		display: inline-block;
		padding-right: 3px;
		vertical-align: middle;
		font-weight: 900;

   }

	.swiper-slide-duplicate,
	.swiper-slide {
	  background-position: center center;
	  background-size: cover;
	  text-align: center;
	  font-size: 18px;
	  background: #fff;
 
	  /* Center slide text vertically */
	  display: flex;
	  flex-flow: column nowrap;
	  justify-content: center;
	  //align-items: center;

	  .slider-content{
		  position: absolute;
		  width: 60%;
		  background-color: var(--primary-color-red);
		  height: 200px;
		  display: flex;
		  justify-content: center;
		  align-items: center;
		  padding:0 20px;
		  p{
			font-size: 1rem;
			font-family: var(--font-poppins);
			font-weight: 700;
			text-transform: capitalize;
			color: #fff;
		  }
	  }
	  
	}
 
	.swiper-progress-bar {
	  position: relative;
	  width: 80%;
	  display: block;
	  z-index: 1;
	  height: 2px;
	  margin: 0 auto;
	  .slide_progress-bar {
		 position: absolute;
		 height: 3px;
		 background: var(--primary-color-red);
		 width: auto;
		 clear: both;
		 opacity: 0;
		 bottom: 45px;
		 left: 0;
		 right: 0;
		 &:after {
			position: absolute;
			top: 0;
			left: 0;
			background: var(--primary-color-light-red);
			height: 100%;
			width: 0;
			content: '';
		 }
	  }
	  &.active {
		 .slide_progress-bar {
			opacity: 1;
		 }
	  }
	  &.animate {
		 .slide_progress-bar {
			&:after {
			  transition: width linear;
			  transition-delay: unset;
			  width: 100%;
			  transition-duration: 5s;
			}
		 }
	  }
	}
}
}

.counter-wrapper{
	position: relative;
	.counter-item{
		display: flex;
		justify-content: space-between;
		flex-direction: row;
		text-align: left;
		margin-top: 5rem;
		span{
			font-weight: 700;
			font-size: 2rem;
			color: #313131;
			filter: brightness(200%);
			font-family: var(--font-poppins);
			transition: 30s;
		}
		p{
			font-size: 1rem;
			line-height: 2.5rem;
			font-family: var(--font-poppins);
			font-weight: 700;
			text-transform: capitalize;
			color: var(--primary-color-red);
		}

	}
	#short-info-counter{
		position: absolute;
		left: 0;
		right: 0;
		bottom: 0;
		top: 7rem;
	}
  }
}


// events

#events-section{
	.events--header{
		h3{
			font-size: 2rem;
			line-height: 2.5rem;
			font-family: var(--font-poppins);
			font-weight: 700;
			text-transform: capitalize;
			color: #313131;
		}
		p{
			font-weight: 500;
			text-transform: initial;
			font-size: var(--body-font);
			color:var(--anchor-color);
			font-family: var(--font-nunito);
		}
	}

	.events-date {
		text-align: center;
		position: absolute;
		right: 30px;
		top: 30px;
		background-color: var(--primary-color-red);
		color: #fff;
		padding: 12px 20px 8px 20px;
		text-transform: uppercase
	}
	.event-block {
		img{
			height: 100%;
			width: 100%;
		}
	}
	.event-card{
		h5{
			font-size: 1.5rem;
			line-height: 2.5rem;
			font-family: var(--font-poppins);
			font-weight: 700;
			text-transform: capitalize;
			a{
				color: var(--primary-color-red);
			}

		}
		p{
			color: var(--anchor-color);
		}
		.event-time{
			margin: 0;
			padding: 0;
			li {
				display: inline-block;
				margin-right: 20px;
				color: var(--anchor-color);
			}
		}	
	}

}



// admission
#admission-course-details{
	.admission--header{
		h3{
			font-size: 2rem;
			line-height: 2.5rem;
			font-family: var(--font-poppins);
			font-weight: 700;
			text-transform: capitalize;
			color: #313131;
		}
		p{
			font-weight: 500;
			text-transform: initial;
			font-size: var(--body-font);
			color:var(--anchor-color);
			font-family: var(--font-nunito);
		}
	}
	.about-text {
		color: var(--anchor-color);
		h3 {
			font-size: 3rem;
			font-weight: 700;
			margin: 0 0 6px;
		}
		h6 {
			font-weight: 600;
			margin-bottom: 15px;
		}
		p {
			font-size: 1rem;
			max-width: 450px;
			mark {
				font-weight: 600;
				color: var(--primary-color-red);
			}
		}
	}
	.about-avatar{
		img{
			height: 100%;
		   width: 100%;
		}
	}
	.about-list {
		padding-top: 10px;
		.media {
			padding: 5px 0;
		}
		label {
			color: var(--primary-color-red);
			font-weight: 600;
			width: 88px;
			margin: 0;
			position: relative;
			&:after {
				content: "";
				position: absolute;
				top: 0;
				bottom: 0;
				right: 11px;
				width: 1px;
				height: 12px;
				background: #20247b;
				-moz-transform: rotate(15deg);
				-o-transform: rotate(15deg);
				-ms-transform: rotate(15deg);
				-webkit-transform: rotate(15deg);
				transform: rotate(15deg);
				margin: auto;
				opacity: 0.5;
			}
		}
		p {
			margin: 0;
			font-size: 15px;
		}
	}
		.admission-student-counter {
			padding: 30px 20px;
			background: #ffffff;
			border-radius: 5px;
			box-shadow: 0 0 30px rgba(31, 45, 61, 0.125);
			.count-data {
				margin-top: 10px;
				margin-bottom: 10px;
			}
			.count {
				font-weight: 700;
				color: var(--primary-color-red);
				margin: 0 0 5px;
			}
			p {
				font-weight: 600;
				margin: 0;
				color: var(--anchor-color);
			}
		}

	mark {
		background-image: linear-gradient(rgba(252, 83, 86, 0.6), rgba(252, 83, 86, 0.6));
		background-size: 100% 3px;
		background-repeat: no-repeat;
		background-position: 0 bottom;
		background-color: transparent;
		padding: 0;
		color: currentColor;
	}
	.theme-color {
		color: var(--anchor-color);
	}
	.dark-color {
		color: var(--primary-color-red);
	}
	@media (max-width: 767px) {
		.about-text {
			h3 {
				font-size: 35px;
			}
			h6 {
				font-size: 18px;
			}
		}
	}
	@media (max-width: 991px) {
		.about-avatar {
			margin-top: 30px;
		}
	}	
}



#admission-section{
	.admission--header{
		h3{
			font-size: 2rem;
			line-height: 2.5rem;
			font-family: var(--font-poppins);
			font-weight: 700;
			text-transform: capitalize;
			color: #313131;
		}
		p{
			font-weight: 500;
			text-transform: initial;
			font-size: var(--body-font);
			color:var(--anchor-color);
			font-family: var(--font-nunito);
		}
	}
	.apply-details{
		h3{
			font-size: 1.5rem;
			line-height: 2.5rem;
			font-family: var(--font-poppins);
			font-weight: 700;
			text-transform: capitalize;
			color: #313131;
		}
		p{
			color: var(--anchor-color);
			font-size: 1rem;
		}
		ul{
			margin: 0 0;
			padding: 0;
			li{
				list-style: none;
				color: var(--anchor-color);
				font-size: 1rem;
			}
		}
	}

	.related-course{
		figcaption{
			font-size: 1.5rem;
			line-height: 2.5rem;
			font-family: var(--font-poppins);
			font-weight: 700;
			text-transform: capitalize;
			color: #313131;
		}
	}
}

#who-we-are-section{
	.social-link {
		width: 30px;
		height: 30px;
		border: 1px solid #ddd;
		display: flex;
		align-items: center;
		justify-content: center;
		color: #666;
		border-radius: 50%;
		transition: all 0.3s;
		font-size: 0.9rem;
	 }
	 
	 .social-link:hover,
	 .social-link:focus {
		background: #ddd;
		text-decoration: none;
		color: #555;
	 }
	 h1{
		font-family: var(--font-poppins);
		font-weight: 700;
		text-transform: capitalize;
		color: var(--primary-color-red);
	 }
	 h2{
		font-size: 2rem;
		line-height: 2.5rem;
		font-family: var(--font-poppins);
		font-weight: 700;
		text-transform: capitalize;
		color: var(--primary-color-red);
	 }
}


#team-section{
	h2{
		font-size: 2rem;
		line-height: 2.5rem;
		font-family: var(--font-poppins);
		font-weight: 700;
		text-transform: capitalize;
		color: var(--primary-color-red);
	 }
}


#contactus-section{
.contact-name {
	margin-bottom: 30px;
	h5 {
		font-size: 22px;
		color: var(--primary-color-red);
		margin-bottom: 5px;
		font-weight: 600;
	}
	p {
		font-size: 18px;
		margin: 0;
		color: var(--anchor-color);
	}
}

.contact-form {
	.form-control {
		border: none;
		border-bottom: 1px solid #20247b;
		background: transparent;
		border-radius: 0;
		padding-left: 0;
		box-shadow: none !important;
		&:focus {
			border-bottom: 1px solid #fc5356;
		}
	}
	.form-control.invalid {
		border-bottom: 1px solid #ff0000;
	}
	.send {
		margin-top: 20px;
		margin-top: 20px;
	}
}
.section-title {
	h2 {
		font-weight: 700;
		color: var(--primary-color-red);
		font-size: 45px;
		margin: 0 0 15px;
		border-left: 5px solid #fc5356;
		padding-left: 15px;
	}
	p{
		color: var(--anchor-color);
	}
	padding-bottom: 45px;
}
.lms-btn {
	padding: 0 50px 0 20px;
	line-height: 60px;
	position: relative;
	display: inline-block;
	color: var(--primary-color-red);
	background: none;
	border: none;
	font-weight: 700;
	&:before {
		content: "";
		position: absolute;
		top: 0;
		left: 0;
		display: block;
		border-radius: 30px;
		background: transparent;
		border: 1px solid var(--primary-color-red);
		border-right: 1px solid transparent;
		-moz-transition: ease all 0.35s;
		-o-transition: ease all 0.35s;
		-webkit-transition: ease all 0.35s;
		transition: ease all 0.35s;
		width: 60px;
		height: 60px;
	}
	.arrow {
		width: 13px;
		height: 2px;
		background: currentColor;
		display: inline-block;
		position: absolute;
		top: 0;
		bottom: 0;
		margin: auto;
		right: 25px;
		&:after {
			width: 8px;
			height: 8px;
			border-right: 2px solid currentColor;
			border-top: 2px solid currentColor;
			content: "";
			position: absolute;
			top: -3px;
			right: 0;
			display: inline-block;
			-moz-transform: rotate(45deg);
			-o-transform: rotate(45deg);
			-ms-transform: rotate(45deg);
			-webkit-transform: rotate(45deg);
			transform: rotate(45deg);
		}
	}
}
@media (max-width: 767px) {
	.contact-form {
		.send {
			margin-bottom: 20px;
		}
	}
}

}


#footer {
	background: rgba(25, 47, 89, 0.8);
	padding: 0 0 30px 0;
	color: #fff;
	font-size: 14px;
	.footer-newsletter {
		padding: 50px 0;
		background: rgba(25, 47, 89, 0.4);
		h4 {
			font-size: 24px;
			margin: 0 0 20px 0;
			padding: 0;
			line-height: 1;
			font-weight: 600;
			color: var(--primary-color-red);
		}
		form {
			margin-top: 30px;
			background: #fff;
			padding: 6px 10px;
			position: relative;
			border-radius: 50px;
			input[type="email"] {
				border: 0;
				padding: 8px;
				width: calc(100% - 140px);
			}
			input[type="submit"] {
				position: absolute;
				top: 0;
				right: 0;
				bottom: 0;
				border: 0;
				background: none;
				font-size: 16px;
				padding: 0 30px;
				margin: 3px;
				background: var(--primary-color-red);
				color: #fff;
				transition: 0.3s;
				border-radius: 50px;
				&:hover {
					background: #e6573f;
				}
			}
		}
	}
	.footer-top {
		background: rgba(25, 47, 89, 0.4);
		border-top: 1px solid #474747;
		border-bottom: 1px solid #474747;
		padding: 60px 0 30px 0;
		.footer-info {
			margin-bottom: 30px;
			h3 {
				font-size: 18px;
				margin: 0 0 20px 0;
				padding: 2px 0 2px 0;
				line-height: 1;
				font-weight: 700;
				color: #fff;
			}
			p {
				font-size: 14px;
				line-height: 24px;
				margin-bottom: 0;
				font-family: "Raleway", sans-serif;
				color: #fff;
			}
		}
		.social-links {
			a {
				font-size: 18px;
				display: inline-block;
				background: var(--primary-color-red) ;
				color: #fff;
				line-height: 1;
				padding: 8px 0;
				margin-right: 4px;
				border-radius: 50%;
				text-align: center;
				width: 36px;
				height: 36px;
				transition: 0.3s;
				&:hover {
					background: var(--primary-color-light-red);
					color: #fff;
					text-decoration: none;
				}
			}
		}
		h4 {
			font-size: 16px;
			font-weight: bold;
			color: #fff;
			text-transform: uppercase;
			position: relative;
			padding-bottom: 12px;
		}
		.footer-links {
			margin-bottom: 30px;
			ul {
				list-style: none;
				padding: 0;
				margin: 0;
				i {
					padding-right: 2px;
					color: #ddd;
					font-size: var(--font-size);
					line-height: 1;
				}
				li {
					padding: 10px 0;
					display: flex;
					align-items: center;
					&:first-child {
						padding-top: 0;
					}
				}
				a {
					color: #fff;
					transition: 0.3s;
					display: inline-block;
					line-height: 1;
					&:hover {
						color: var(--primary-color-red);
					}
				}
			}
		}
		.footer-contact {
			margin-bottom: 30px;
			p {
				line-height: 26px;
			}
		}
	}
	.copyright {
		text-align: center;
		padding-top: 30px;
	}
	.credits {
		padding-top: 10px;
		text-align: center;
		font-size: 13px;
		color: #fff;
	}
}






