@import url('https://fonts.googleapis.com/css2?family=Mulish:wght@200;400;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=DM+Serif+Text&display=swap');
/* font-family: 'DM Serif Text', serif; */
/* font-family: 'Mulish', sans-serif; */

/* common element start */
body{
  margin: 0;
  padding: 0;
  font-family: 'Mulish', sans-serif;
  font-size: 1rem;
  font-weight: 400;
}
a {
  color: #767676;
  outline: 0 none;
  text-decoration: none;
}a:hover {
  color: #000000;
  
}
h1,
h2,
h3,
h4,
h5,
h6{
  font-family: "Roboto", sans-serif;
}
p{
  font-family: 'Mulish', sans-serif;
  margin-bottom: 24px;
}
.bg-repeat{
  background-repeat: repeat;
}
.bg-black {
  background-color: #000;
}
.bg-light-black{
  background-color: #383838;
}
.bg-white{
  background-color: #ffffff !important;
}

.bg-gray{
  background-color: #f6f7f8 !important;
}
.bg-no-repeat {
  background-repeat: no-repeat;
}
.bg-cover {
  background-size: cover;
}
.overlay-wraper {
  position: relative;
}
.bg-parallax {
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}
.bg-parallax .container-fluid,
.bg-parallax .container{
position: relative;
z-index: 1;
}
.font-weight-300 {
  font-weight: 300;
}
.font-40 {
  font-size: 40px;
  line-height: 46px;
}
.font-50 {
  font-size: 50px;
  line-height: 56px;
  margin: 20px 0px;
}
.m-b20 {
  margin-bottom: 20px;
}
.font-weight-600{
font-weight: 600;
}
.p-tb100 {
  padding-bottom: 100px;
  padding-top: 100px;
}
.icon-box-wraper {
  position: relative;
}
.text-lowercase{
  text-transform: lowercase !important;
}
.text-uppercase{
  text-transform: uppercase !important;
}
.text-black{
  color: #000000;
}
.section-full{
  position: relative;
}
.coustWith{
  max-width: calc(min(95rem, 90%)) !important;
}

.content-section > div .spanHeader {
  text-transform: uppercase;
  letter-spacing: 1.5px;
  font-size: 1.1rem;
  color: #717171;
  position: relative;
  display: block;
  margin-bottom: 15px;
}
.content-section > div .spanHeader::after{
  content: "";
    width: 100px;
    height: 1px;
    display: inline-block;
    background: #06babf;
    margin: 4px 12px;
}
.text-template{
  color: #06babf !important;
}

.font30{
  font-size: 3rem !important;
}
.content-section > div h1{
  font-weight: 600;
  font-size: 3.5rem;
}
.content-section > div h2{
  font-weight: 600;
  font-size: 2.5rem;
}
.content-section > div h3{
  font-weight: 600;
  font-size: 1.8rem;
}
.content-section > div h4{
  font-weight: 600;
  font-size: 1.5rem;
}
.content-section > div h5{
  font-weight: 600;
  font-size: 1.2rem;
}
.page-contain{
  position: relative;
}
.opacity-seven{
  opacity: 0.7 !important;
}

.square_shape1, .square_shape2, .square_shape3, .square_shape4 {
  position: relative;
  overflow: hidden;
  z-index: 0;
}
.square_shape1:after, .square_shape2:before, .square_shape3:before, .square_shape4:after {
  width: 800px;
  height: 800px;
  position: absolute;
  content: "";
  border: 40px solid rgba(191,191,191,0.1);
  -moz-transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
  z-index: 0;
}

.square_shape2:before {
  right: -700px;
  bottom: -340px;
}
.square_shape1:after {
  left: -700px;
  top: 50px;
}
img {
  border-style: none;
  height: auto;
  max-width: 100%;
  vertical-align: middle;
}
.position-center{
  left: 50%;
  transform: translateX(-50%);
}
/* common element end  */



/*-------------------------------------
	1. Buttons 
--------------------------------------- */

/* 1.1 theme default button */
.btn {	padding-top:9px;	padding-bottom:9px;}

.site-button,
.site-button-secondry {
	padding: 10px 20px; 
	display: inline-block; 
	font-size: 14px; 
	outline: none; 
	cursor: pointer; 
	outline: none; 
	border-width:0;
	border-style:solid;
	border-color:transparent;
	line-height:1.42857;
	margin-left:-1px; 
	text-decoration: none !important;
}
.site-button{color: #fff; }
.site-button-secondry {color: #000; }

.site-button {background-color:#000; }
.site-button:active,
.site-button:hover,
.site-button:focus,
.active > .site-button { background-color: #000;color: #fff;}
.site-button:hover{ 	background-color: #efefef;	color: #000;}
.site-button-secondry {	background-color:#efefef; }

.site-button-secondry:active,
.site-button-secondry:hover,
.site-button-secondry:focus,
.active > .site-button-secondry {background-color:#000;	color: #fff; }

.video-play-btn{position:absolute; 	top:50%;	left:50%;	width:40px;	height:40px;	line-height:40px;	border:1px solid #fff;	text-align:center;	margin:-25px;	color:#fff;	display:block;	z-index:10;	font-size:14px;}
.video-play-btn:hover{background-color:#000;	color:#fff;	border:1px solid transparent;}
.video-play-btn i{margin-right:-5px;}

/* 1.2 button text uppercase */
.site-button.text-uppercase {text-transform:uppercase;}

/* 1.3 button size */
.button-sm {padding: 5px 10px; 	font-size: 12px;}
.button-lg {padding:20px 35px; 	font-size: 16px;}
.button-xl {padding:30px 50px; 	font-size:24px;}

/* 1.4 button rounded */
.radius-no {border-radius:0;	-webkit-border-radius:0;	-moz-border-radius:0;}
.radius-sm {border-radius:3px;	-webkit-border-radius:3px; 	-moz-border-radius:3px;}
.radius-xl {border-radius:100px;	-webkit-border-radius:100px; -moz-border-radius:100px;}
.radius-bx {border-radius:100%;	-webkit-border-radius:100%; 	-moz-border-radius:100%;}

/* 1.6 white */
.site-button.white {background-color:#fff;	color:#777;}
.site-button.white:hover,
.site-button.white:active,
.site-button.white:focus {background-color:#F4F4F4;	color:#555;}

/* 1.7 black */
.site-button.black {background-color:#000;	color:#fff;}
.site-button.black:hover,
.site-button.black:active,
.site-button.black:focus {background-color:#171717;	color:#fff;}

/* 1.8 Gray */
.site-button.gray {background-color:#666666;	color:#fff;}
.site-button.gray:hover,
.site-button.gray:active,
.site-button.gray:focus {background-color:#555555;color:#fff;}

/* 1.9 pink */
.site-button.pink {background-color:#e63f75;	color:#fff;}
.site-button.pink:hover,
.site-button.pink:active,
.site-button.pink:focus { 
	background-color:#d22b61;
	color:#fff;
}

/* 1.10 Blue */
.site-button.blue {background-color:#42B8D4;	color:#fff;}
.site-button.blue:hover,
.site-button.blue:active,
.site-button.blue:focus {background-color:#2ca2be;	color:#fff;}

/* 1.11 Green */
.site-button.green {background-color:#35B494;	color:#fff;}
.site-button.green:hover,
.site-button.green:active,
.site-button.green:focus { 
	background-color:#26a585;
	color:#fff;
}

/* 1.12 Orange */
.site-button.orange {background-color:#E56713;	color:#fff;}
.site-button.orange:hover,
.site-button.orange:active,
.site-button.orange:focus {	background-color:#d55703;	color:#fff;}

/* 1.13 Red */
.site-button.red {	background-color:#D93223;	color:#fff;}
.site-button.red:hover,
.site-button.red:active,
.site-button.red:focus {background-color:#c51e0f;	color:#fff;}

/*1.14 Brown */
.site-button.brown {	background-color:#69441F;	color:#fff;}
.site-button.brown:hover,
.site-button.brown:active,
.site-button.brown:focus {	background-color:#5f3a15;	color:#fff;}

/* 1.15 Yellow */
.site-button.yellow {	background-color:#ecc731;	color:#fff;}
.site-button.yellow:hover,
.site-button.yellow:active,
.site-button.yellow:focus {background-color:#d4af19;	color:#fff;}

/* 1.16 purple */
.site-button.purple { 	background-color:#AE1AF7;	color:#fff;}
.site-button.purple:hover,
.site-button.purple:active,
.site-button.purple:focus {background-color:#9804e1;	color:#fff;}

/* 1.17 Graphical */
.site-button.graphical { 
	color: #fff; 
	text-shadow: 0 -1px rgba(0,0,0,0.4); 
	box-shadow: inset 0 1px 1px rgba(255,255,255,0.3), 0 1px 3px -1px rgba(45,60,72,0.5);
	-webkit-box-shadow: inset 0 1px 1px rgba(255,255,255,0.3), 0 1px 3px -1px rgba(45,60,72,0.5);
	-moz-box-shadow: inset 0 1px 1px rgba(255,255,255,0.3), 0 1px 3px -1px rgba(45,60,72,0.5); 
	border: 1px solid rgba(0,0,0,0.15); 
}
.site-button.graphical:active { 
	box-shadow: 0 2px 2px rgba(0,0,0,.25) inset;
	-webkit-box-shadow: 0 2px 2px rgba(0,0,0,.25) inset;
	-moz-box-shadow: 0 2px 2px rgba(0,0,0,.25) inset;
}

/* 1.19 Outline */
.site-button.outline {color: #888; 	background: none; 	border-width:2px; 	border-style:solid; 	border-color:#eee; }

/* 1.20 Outline white  */
.site-button.outline.white {color: #e7e7e7; 	border-color:#e7e7e7; }
.site-button.outline.white:hover { color: #666666; }

/* 1.21 Outline black */
.site-button.outline.black {color: #171717;border-color:#171717; }

/* 1.22 Outline gray */
.site-button.outline.gray {color: #666666;border-color:#666666; }

/* 1.23 Outline pink */
.site-button.outline.pink {color: #e63f75;border-color:#e63f75; }

/* 1.24 Outline blue */
.site-button.outline.blue {color: #42b8d4;border-color:#42b8d4; }

/* 1.25 Outline green */
.site-button.outline.green {color: #35b494;border-color:#35b494; }

/* 1.26 Outline orange */
.site-button.outline.orange {color: #e56713;border-color:#e56713; }

/* 1.27 Outline red */
.site-button.outline.red {color: #d93223;border-color:#d93223; }

/* 1.28 Outline brown */
.site-button.outline.brown {color: #69441f;border-color:#69441f; }

/* 1.29 Outline yellow */
.site-button.outline.yellow {color: #ffbc13;border-color:#ffbc13; }

/* 1.30 Outline purple */
.site-button.outline.purple {color: #ae1af7;border-color:#ae1af7; }

/* 1.31 Outline hover */
.site-button.outline:hover {border-color:rgba(0,0,0,0);	color:#fff;}

/* 1.32 button text link */
.site-button-link {	display:inline-block;	font-weight:600;}

/* 1.33 text link white */
.site-button-link.white {color:#e7e7e7;}
.site-button-link.white:hover,
.site-button-link.white:active,
.site-button-link.white:focus {color:#CCC;}

/* 1.34 text link black */
.site-button-link.black {	color:#171717;}
.site-button-link.black:hover,
.site-button-link.black:active,
.site-button-link.black:focus { 	color:#000;}

/* 1.35 text link Gray */
.site-button-link.gray { 	color:#666666;}
.site-button-link.gray:hover,
.site-button-link.gray:active,
.site-button-link.gray:focus {color:#555555;}

/* 1.36 text link pink */
.site-button-link.pink {color:#e63f75;}
.site-button-link.pink:hover,
.site-button-link.pink:active,
.site-button-link.pink:focus {color:#2ca2be;}

/* 1.37 text link Blue */
.site-button-link.blue {color:#42B8D4;}
.site-button-link.blue:hover,
.site-button-link.blue:active,
.site-button-link.blue:focus {color:#2ca2be;}

/* 1.38 text link Green */
.site-button-link.green {	color:#35B494;}
.site-button-link.green:hover,
.site-button-link.green:active,
.site-button-link.green:focus {	color:#26a585;}

/* 1.39 text link Orange */
.site-button-link.orange {color:#E56713;}
.site-button-link.orange:hover,
.site-button-link.orange:active,
.site-button-link.orange:focus {color:#d55703;}

/* 1.40 text link Red */
.site-button-link.red {color:#D93223;}
.site-button-link.red:hover,
.site-button-link.red:active,
.site-button-link.red:focus {color:#c51e0f;}

/* 1.41 text link Brown */
.site-button-link.brown {color:#69441F;}
.site-button-link.brown:hover,
.site-button-link.brown:active,
.site-button-link.brown:focus {color:#5f3a15;}

/* 1.42 text link Yellow */
.site-button-link.yellow {color:#ecc731;}
.site-button-link.yellow:hover,
.site-button-link.yellow:active,
.site-button-link.yellow:focus {color:#d4af19;}

/* 1.43 text link purple */
.site-button-link.purple {color:#ae1af7;}
.site-button-link.purple:hover,
.site-button-link.purple:active,
.site-button-link.purple:focus {color:#9804e1;}

/* 1.44 app strore */
.site-button.button-app {text-align:left;	padding:15px 25px;}
.site-button.button-app i { 	display:inline-block;	font-size:45px;	float:left;margin-right:15px;}
.site-button.button-app strong {display:block;	font-size:16px;}

/* 1.45 filter buttons css */
.masonry-filter { display:table;	margin-bottom:0;}
.masonry-filter > li {display: inline-block;	margin-right:30px;	position:relative;}

.masonry-filter > li a {color: #000;    font-size: 14px;	font-weight:500;    }

.masonry-filter > li.active a,
.masonry-filter > li a:hover,
.masonry-filter > li a:active,
.masonry-filter > li a:focus {color: #a0a0a0;}

@media only screen and (max-width: 600px) {
.masonry-filter > li {	margin-bottom:10px;}
.masonry-filter > li a{font-size:14px !important;}
}	
/* 1.45(1) Masonry filter alignment [Left-Right-Center] */
.filter-wrap.right > .masonry-filter {	float:right;}
@media only screen and (max-width:991px) {
.filter-wrap.right > .masonry-filter {	float:none;}
}
.filter-wrap.center > .masonry-filter {margin-left:auto;	margin-right:auto;}
/* 1.45(2) Masonry filter link style */
.masonry-filter.link-style > li a {font-size:15px;}
.masonry-filter.link-style > li:after {	content:"/";	position:relative;	right:-18px;	opacity:0.3;}
.masonry-filter.link-style.white > li:after {	color:#fff;}
.masonry-filter.link-style > li:last-child:after {	display:none;}
.masonry-filter.link-style.white > li.active a,
.masonry-filter.link-style.white > li a:hover,
.masonry-filter.link-style.white > li a:active,
.masonry-filter.link-style.white > li a:focus {color: #f7c20a;}
.masonry-filter.has-bg > li a {	color: #fff;}
.masonry-filter.link-style.has-bg > li.active a,
.masonry-filter.link-style.has-bg > li:hover a,
.masonry-filter.link-style.has-bg > li:active a,
.masonry-filter.link-style.has-bg > li:focus a {	color: #FFBC13;}

/* 1.45(3) Masonry filter button style */
.masonry-filter.button-style > li {	margin-right:10px;}
@media only screen and (max-width: 767px) {
.masonry-filter.button-style > li {	margin-bottom:10px;}	
}
.masonry-filter.button-style > li a {	background-color:#666666;	color:#fff;	padding:10px 20px;	font-weight:600;	display:inline-block;}
.masonry-filter.button-style > li.active a,
.masonry-filter.button-style > li a:hover,
.masonry-filter.button-style > li a:active,
.masonry-filter.button-style > li a:focus {background-color:#000;	color:#fff;}
.masonry-filter.button-style.has-bg > li a {	background-color: #fff;	color: #666;}
.masonry-filter.button-style.has-bg  > li.active a,
.masonry-filter.button-style.has-bg  > li a:hover,
.masonry-filter.button-style.has-bg  > li a:active,
.masonry-filter.button-style.has-bg  > li a:focus {background-color:#000;	color:#fff;}

/* 1.45(4) Masonry filter button outline style */
.masonry-filter.outline-style > li {	margin-right:10px;}
.masonry-filter.outline-style > li a {	border-width:2px; 	border-style:solid; 	border-color:#666666;	color:#666666;	padding:10px 20px;	font-weight:600;	display:inline-block;}
.masonry-filter.outline-style.rounded-corner > li a {	border-radius:100px;	 -webkit-border-radius:100px;	-moz-border-radius:100px;}

.masonry-filter.outline-style > li.active a,
.masonry-filter.outline-style > li a:hover,
.masonry-filter.outline-style > li a:active,
.masonry-filter.outline-style > li a:focus {	border-color:#000;	color:#000;}
.masonry-filter.outline-style.has-bg > li a {border-color:#fff;	color:#fff;}
.masonry-filter.outline-style.has-bg > li.active a,
.masonry-filter.outline-style.has-bg > li a:hover,
.masonry-filter.outline-style.has-bg > li a:active,
.masonry-filter.outline-style.has-bg > li a:focus {border-color:#000;	color:#000;}

@media only screen and (max-width:768px){
.masonry-item{width:100%;}	
}


/* 1.45(5) half effect button outline style */
.btn-half{cursor: pointer;  background-color: #000;  z-index: 0;  display:inline-block;  position:relative;}
  
.btn-half span {color: #fff;  display: block;  padding-left: 0%; padding-right: 25px;  text-transform: uppercase; font-size:12px; letter-spacing:5px; transform: scaleX(0.9);  transform-origin: center left;  transition: color 0.3s ease;
  position: relative;  z-index: 1;}
  
.btn-half em {  position: absolute;  height: 1px;  background: #fff;  width: 22%;  right: 23px;  top: 50%;  transform: scaleX(0.25);  transform-origin: center right;  transition: all 0.3s ease;  z-index: 1;}

.btn-half:before,
.btn-half:after {  content: '';  background-color:rgba(255,255,255,0.2);  height: 50%;  width: 0;  position: absolute;  transition: 0.3s cubic-bezier(0.785, 0.135, 0.15, 0.86);}

.btn-half:before {  top: 0;  left: 0;  right: auto;}
.btn-half:after {  bottom: 0;  right: 0;  left: auto;}

.btn-half.site-button:hover{ background-color: #000; }
.btn-half:hover:before {  width: 100%;  right: 0;  left: auto;}
.btn-half:hover:after {  width: 100%;  left: 0;  right: auto;}

.btn-half:hover span {  color: #fff;}
.btn-half:hover em {  background: #fff;  transform: scaleX(1);}


/* Button end */


/* responsive start */
@media screen and (max-width: 720px) {
  body {
    margin: 0;
    padding: 0;
    font-family: 'Mulish', sans-serif;
    font-size: 14px;
    font-weight: 400;
}
  .font30 {
    font-size: 1.5rem !important;
  }
  .content-section > div h1{
    font-weight: 600;
    font-size: 3rem;
  }
  .content-section > div h2{
    font-weight: 600;
    font-size: 2rem;
  }
  .content-section > div h3{
    font-weight: 600;
    font-size: 1.5rem;
  }
  .content-section > div h4{
    font-weight: 600;
    font-size: 1.2rem;
  }
  .content-section > div h5{
    font-weight: 600;
    font-size: 1rem;
  }
}

.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 100;
}


.like_comment_button_container{
  cursor: default;
  list-style: none;
  padding: 0;
}

.like_comment_button_container li{
  border-left: solid 1px rgba(160, 160, 160, 0.3);
  display: inline-block;
  font-family: "Raleway", Helvetica, sans-serif;
  font-size: 0.6em;
  font-weight: 400;
  letter-spacing: 0.25em;
  line-height: 1;
  margin: 0 0 0 2em;
  padding: 0 0 0 2em;
  text-transform: uppercase;
}

.likeReplay {
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

.likeReplay .comntLike {
  display: inline-block;
  width: 50px;
  padding: 0 4px;
  font-size: 0.7em;
  margin-right: 6px;
}

.comntLike .icon::before {
  margin-right: 4px;
  color: #e2e2e2;
}

.hideTags {
  display: none !important;
} 



.comntReply {
  display: inline-block;
  width: 65px;
  padding: 0 8px;
  font-size: 0.7em;
  letter-spacing: 0.5px;
  margin-right: 6px;
  color: #b5b5b5;
  text-align: center;
  cursor: pointer;
  line-height: 10px;
  border-left: 1px solid #e2e2e2;
}

.replyForm {
  width: 100%;
}

.replyForm form {
  margin: 0 0 1em 0;
}

.replyForm .row {
  --bs-gutter-x: 0px;
}

.replyForm .col-12,
.replyForm .col-6 {
  padding-left: 0px;
  padding-right: 0px;
}



.replyForm .customInput {
  height: 28px;
  width: calc(100% - 10px);
  padding: 6px;
  margin: 5px;
  font-size: 12px;
  line-height: 14px;
  border-radius: 3px;
}

.replyForm textarea.customInput {
  min-height: 80px;
}

.replyForm .cReplyBtn {
  float: right;
  margin-right: 5px;
  height: 34px;
  line-height: 16px;
  font-size: 12px;
  padding: 6px 18px;
  font-weight: 500;
  border-radius: 4px;
  background-color: #000;
  color: #fff !important;
}

.centered-container {
  position: relative;
  background-color: white;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
}

.close-button {
  position: absolute;
  top: 10px;
  right: 10px;
  background: none;
  border: none;
  cursor: pointer;
  font-size: 14px;
  color: #333;
  width: 30px;
  height: 30px;
  padding: 0;
  border-radius: 50%;
}

.close-button .fa-times {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.input-field {
  display: block;
  width: 100%;
  padding: 10px;
  margin-bottom: 10px;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-size: 14px;
}


@-webkit-keyframes blinker {
  from {
      opacity: 1;
  }

  to {
      opacity: 0;
  }
}

.blink {
  text-decoration: blink;
  -webkit-animation-name: blinker;
  -webkit-animation-duration: 0.4s;
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-timing-function: ease-in-out;
  -webkit-animation-direction: alternate;
}


.liked{
}

a.fa-thumbs-up.liked::before {
  color: red;
}
/* responsive start */