@import url('https://fonts.googleapis.com/css2?family=Dancing+Script:wght@400;500;700&family=Oswald:wght@200;400;500;600;700&family=Roboto:wght@100;400;700&display=swap');





/* {

	font-family: 'Dancing Script', cursive;

	font-family: 'Oswald', sans-serif;

	font-family: 'Roboto', sans-serif;

} */



* {

	margin: 0;

	padding: 0;

	font-family: 'Oswald', sans-serif;

	text-decoration: none;

	box-sizing: border-box;

}	

body {

	background-color: #efefef;

}

nav {

	background-color: #531839;

}

header .navbar-brand{

	font-family: 'Dancing Script', cursive;

	font-weight: 700;

}

.hero-section .container-fluid {

    padding-right: 0px;

    padding-left: 0px;

    padding-bottom: 2px;

}

.event-section .container-fluid {

    padding-right: 0px;

    padding-left: 0px;

    padding-bottom: 2px;

}

.hero-section {

	height: 80vh;

}

.banner{

	background: linear-gradient(0deg, rgba(5, 135, 138, 0.35), rgba(5, 135, 138, 0.35)), url('img/couple.jpg');

	background-blend-mode: multiply, normal;

	background-size: cover;

	background-position: center;

    background-repeat: no-repeat;

	height: 90vh;

}

.event-section .banner{

  background: linear-gradient(0deg, rgba(5, 135, 138, 0.35), rgba(5, 135, 138, 0.35)), url('img/event_banner.jpg');

  background-blend-mode: multiply, normal;

  background-size: cover;

  background-position: center;

    background-repeat: no-repeat;

  height: 70vh;

}

.btn {

	background-color: #9E0050;

	border: none;

}

.btn:hover {

	background-color: #531839;

}



.our-process h1{

	font-family: 'Dancing Script', cursive;

	color: #531839;

	font-weight: 700;

}

.feature {

	color: #D0665A;

}

.padding {

	padding-bottom: 2rem;

	

}

.padding1 {

	

	padding-top: 9rem ;

	padding-bottom:2rem : 9rem ;

}

.About {

	margin-top: 10px;

}



.block {

	background-color: red;

	width: 300px;

	height: 400px;

	z-index: 9;



}

.about-img img {

	width: 300px;

	height: 400px;

	position: absolute;

	z-index: 10;

	top: -10px;

	left: -20px;

	

}

.card-img-top {

	height: 10rem;

	width: 10rem;

}

.card img {

	position: center;

}

.card1{

	max-width: 150px;

	max-height: 150px;



}

.card-img1{

	border-radius: 50%;

	width:100px;

	display: block;

    margin-left: auto;

    margin-right: auto;

    width: 50%;

}

.btn2 {

	background-color: #9E0050;

	border-radius:14px;

font-size: 10px;

}

.btn2-center{

margin: 0;

position: absolute;

top:50%;

left: 50%;

-ms-transform:translate(-50%,-50%);

transform: translate(-50%,-50%);

}





.carousel .card-img-top {

	height: 8rem;

	width: 8rem;

}



footer {

	background-color: #531839;

	color: #D0665A;

	padding-top: 2rem;

}

hr.light {

	border-top:  1px solid #d5d5d5;

	width: 75%;

	margin-top: .8rem;

	margin-bottom: 1rem;

}

footer a {

	color: #d5d5d5;

}

hr.light-100 {

	border-top:  1px solid #d5d5d5;

	width: 100%;

	margin-top: .8rem;

	margin-bottom: 1rem;

}



/* Full-width input fields */

input[type=text], input[type=password] {

  width: 100%;

  padding: 12px 20px;

  margin: 8px 0;

  display: inline-block;

  border: 1px solid #ccc;

  box-sizing: border-box;

}



/* Set a style for all buttons */

button .btn3 {

  background-color: #4CAF50;

  color: white;

  padding: 7px 7px;

  margin: 8px 0;

  border: none;

  cursor: pointer;

  width: 100%;

}



button:hover {

  opacity: 0.8;

}



/* Extra styles for the cancel button */

.cancelbtn {

  width: auto;

  padding: 10px 18px;

  background-color: #f44336;

}

.loginbtn2{

  width: 50px;

  padding: 10px 18px;

  background-color: #f44336;

}

/* Center the image and position the close button */

.imgcontainer {

  text-align: center;

  margin: 24px 0 12px 0;

  position: relative;

}



img.avatar {

  width: 40%;

  border-radius: 50%;

}



.container {

  padding: 16px;

}



span.psw {

  float: right;

  padding-top: 16px;

}



/* The Modal (background) */

.modal {

  display: none; /* Hidden by default */

  position: fixed; /* Stay in place */

  z-index: 1; /* Sit on top */

  left: 0;

  top: 0;

  width: 100%; /* Full width */

  height: 100%; /* Full height */

  overflow: auto; /* Enable scroll if needed */

  background-color: rgb(0,0,0); /* Fallback color */

  background-color: rgba(0,0,0,0.4); /* Black w/ opacity */

  padding-top: 60px;

}



/* Modal Content/Box */

.modal-content {

  background-color: #fefefe;

  margin: 5% auto 15% auto; /* 5% from the top, 15% from the bottom and centered */

  border: 1px solid #888;

  width: 80%; /* Could be more or less, depending on screen size */

}



/* The Close Button (x) */

.close {

  position: absolute;

  right: 25px;

  top: 0;

  color: #000;

  font-size: 35px;

  font-weight: bold;

}



.close:hover,

.close:focus {

  color: red;

  cursor: pointer;

}



/* Add Zoom Animation */

.animate {

  -webkit-animation: animatezoom 0.6s;

  animation: animatezoom 0.6s

}



@-webkit-keyframes animatezoom {

  from {-webkit-transform: scale(0)} 

  to {-webkit-transform: scale(1)}

}

  

@keyframes animatezoom {

  from {transform: scale(0)} 

  to {transform: scale(1)}

}



/* Change styles for span and cancel button on extra small screens */

@media screen and (max-width: 300px) {

  span.psw {

     display: block;

     float: none;

  }

  .cancelbtn {

     width: 100%;

  }





/* user details */

.slidecontainer {

  width: 100%;

}



.slider {

  -webkit-appearance: none;

  width: 100%;

  height: 25px;

  background: #d3d3d3;

  outline: none;

  opacity: 0.7;

  -webkit-transition: .2s;

  transition: opacity .2s;

}



.slider:hover {

  opacity: 1;

}



.slider::-webkit-slider-thumb {

  -webkit-appearance: none;

  appearance: none;

  width: 25px;

  height: 25px;

  background: #4CAF50;

  cursor: pointer;

}



.slider::-moz-range-thumb {

  width: 25px;

  height: 25px;

  background: #4CAF50;

  cursor: pointer;

}











/** media queries for home**/

@media only screen and (min-width: 992px) 

{

	.hero-section {

		height: 70vh;

}

}

@media only screen and (max-width: 768px) {

	.hero-section {

		height: 100vh;

}

}



@media only screen and (max-width: 600px) {

	.hero-section {

		height: 100vh;

}

@media only screen and (max-width: 375px) {

	.hero-section {

		height: 80vh;

}