/*===================================== 
Font Family 
--------------
font-family: 'Montserrat', sans-serif;

======================================*/

/*======================================
1. GENERAL CSS Start
======================================*/

body {
	font-family: 'Montserrat', sans-serif;
	font-size:16px;	
	font-weight:400; 	
	color:#4d4949;	
	padding:0;	
	margin:0; 	
}  

a {color: #4d4949;  outline: 0 none;  text-decoration:none; transition: all 0.5s ease;}

a:hover,
a:focus {
  text-decoration:none;
  outline: 0 none;
}

a:active,
a:hover,
a:focus{
  color: #1c75bb;
  transition: all 0.5s ease;
}
a.text-primary:hover, a.text-primary:focus {
	color: #1c75bb !important;
}
button, button:hover{transition: all 0.5s ease;}
button, input, optgroup, select, textarea {
    outline: none !important;
}
img{
	max-width: 100%;
}
::selection {
	background: #1c75bb;
	color: #fff;
}

::-moz-selection {
	background: #1c75bb;
	color: #fff;
}

::-webkit-selection {
	 background:#1c75bb;
	 color: #fff;
}
ul, ol {
	margin-top: 0;
	margin-bottom: 0;
	padding: 0;
	list-style: none;
}


.scroltop {
	position: fixed;
	right: 10px;
	bottom: 10px;
	height: 45px;
	width: 45px;
	background: #1c75bb;
	border: 0;
	padding: 5px 12px;
	cursor: pointer;
	color: #fff;
	border-radius:50%;
	transition: all 0.2s linear;
	    z-index: 9999;
}
.scroltop:hover {
	bottom: 15px;
	transition: all 0.2s linear;

}
.bg-cover{
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center;
}

/*======================================
2. HEADING & TITLE 
======================================*/

h1, .h1, 
h2, .h2, 
h3, .h3, 
h4, .h4,
h5, .h5,
h6, .h6 {
	font-family: 'Montserrat', sans-serif;
  line-height: 1.1;
  margin: 0;
  font-weight: 700;
  vertical-align: middle; 
  color: #1c75bb;
}

h1, .h1 {font-size: 75px;}
h2, .h2 {font-size: 50px;}
h3, .h3 {font-size: 42px;}
h4, .h4 {font-size: 32px;}
h5, .h5 {font-size: 25px;}
h6, .h6 {font-size: 18px;}


b, strong {
	font-weight: 700;
}
/*-------------------------------------
 text size
------------------------------------ */




.text-uppercase{ text-transform: uppercase; }
.text-capitalize{ text-transform: capitalize; }
.text-lowecase{ text-transform: lowercase; }


/*-------------------------------------
	Color 
--------------------------------------- */
/*-------------------------------------
	1. text
-------------------------------------*/
.text-white{color:#fff !important;}
.text-primary{color:#1c75bb !important;}
/*-------------------------------------
	2. background color
-------------------------------------*/
.bg-transparent{background-color:transparent;}
.bg-primary{background-color:#1c75bb !important;}
.bg-dark{background-color:#335f81 !important;}

/*-------------------------------------
	 Buttons 
--------------------------------------- */
.btn {
	font-size: 16px;
	font-weight: 500;
	border: 0;
	padding: 10px 50px;
	transition: all 0.5s ease;
	font-family: 'Montserrat', sans-serif;
	position: relative;
	border-radius: 5px;
}
.btn:hover, .btn:focus, .btn.focus {
	text-decoration: none;
	transition: all 0.2s linear;
	box-shadow: none;
}
.btn-lg{
	width: 100%;
}

.btn-primary {
	background: #1c75bb;
	color: #fff;
	font-size: 18px;
	text-transform: uppercase;
	letter-spacing: 0.2em;
	font-weight: bold;
}
.btn-primary:hover, .btn-primary:focus, .btn-primary.focus {
	background: #000;
	color: #fff;
}

.overlay{
	position: relative;
}

.overlay .container{
	position: relative;
	z-index: 1;
}
.slick-dots {
	text-align: center;
}
.slick-dots li {
	display: inline-block;
	margin: 0 5px;
}
.slick-dots li button {
	background: #c4c4c4;
	border-radius: 20px;
	text-indent: -9999px;
	padding: 0;
	width: 18px;
	height: 18px;
	font-size: 0;
	cursor: pointer;
	border:0;
}
.slick-dots li.slick-active button {
	background: #2230FB;
	width: 22px;
	height: 22px;
}
.slick-arrow {
	border:0;
	position: absolute;
	top: 50%;
	cursor: pointer;
	z-index: 99;
	background-color: #333;
	background-position: center;
	background-repeat: no-repeat;
	background-size: 30px;
	color: #fff;
	padding: 0;
	width: 40px;
	height: 40px;
	font-size: 30px;
	border-radius: 5px;
}
.slick-prev {left: -45px;}
.slick-next {right: -45px;}
.scroll-bottom {
	position: absolute;
	bottom: 10px;
	width: 100%;
	z-index: 9;
	text-align: center;
}
.scroll-bottom a {color: #fff;}
.scroll-bottom a:hover {color: #dd8d18;}
/*======================================
1. GENERAL CSS End
======================================*/

/************************* 
YOU CAN WRIGHT CUSTOME CSS 
***************************/
/* Header CSS Start*/


.hero {
	display: flex;
	justify-content: center;
}
.hero .container{
	position: absolute;
}
.hero .video-fluid {
	width: 100%;
	float: left;
}
.video-btn {
	display: block;
	cursor: pointer;
	position: relative;
}
.video-btn::after {
	content: '';
	position: absolute;
	width: 70px;
	height: 70px;
	background: #fff;
	left: 50%;
	margin-left: -25px;
	top: 50%;
	margin-top: -25px;
	border-radius: 50px;
	box-shadow: 0 0 10px rgba(0,0,0,0.25);
}
.video-btn::before {
	content: '';
	border-left: 15px solid #1c75bb;
	border-top: 10px solid transparent;
	border-bottom: 10px solid transparent;
	position: absolute;
	left: 51%;
	top: 50%;
	z-index: 99;
}
#myModal .btn-close {
	position: absolute;
	right: -25px;
	top: -25px;
}
@media (min-width: 576px){
.modal-dialog {
  max-width: 900px;
}
}
@media(max-width: 767px){
h1, .h1 {font-size: 40px;}
h2, .h2 {font-size: 32px;}
h3, .h3 {font-size: 30px;}
h4, .h4 {font-size: 22px;}
h5, .h5 {font-size: 20px;}
h6, .h6 {font-size: 16px;}	
.hero {
	height: 70vh;
		text-align: center;
}

.hero .video-fluid {
    width: auto;
}
.hero .embed-responsive.embed-responsive-60by29.overlay {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    max-width: 100%;
    overflow: hidden;
}
.btn {
	padding: 10px 20px;
}
#myModal .btn-close {
	position: absolute;
	right: 5px;
	top: -25px;
}
}
@media(max-width: 480px){
.btn {
	width: 100%;
}
}