@import url(https://fonts.googleapis.com/css?family=Kanit&display=swap);
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700&display=swap');
@font-face {
	font-family: Montserrat;
	font-style: normal;
	font-weight: 500;
	src: url('../fonts/montserrat-v21-latin-500.eot');
	src: local(''), url('../fonts/montserrat-v21-latin-500.eot?#iefix') format('embedded-opentype'), url('../fonts/montserrat-v21-latin-500.woff2') format('woff2'), url('../fonts/montserrat-v21-latin-500.woff') format('woff'), url('../fonts/montserrat-v21-latin-500.ttf') format('truetype'), url('../fonts/montserrat-v21-latin-500.svg#Montserrat') format('svg')
}
@font-face {
	font-family: Montserrat;
	font-style: normal;
	font-weight: 800;
	src: url('../fonts/montserrat-v21-latin-800.eot');
	src: local(''), url('../fonts/montserrat-v21-latin-800.eot?#iefix') format('embedded-opentype'), url('../fonts/montserrat-v21-latin-800.woff2') format('woff2'), url('../fonts/montserrat-v21-latin-800.woff') format('woff'), url('../fonts/montserrat-v21-latin-800.ttf') format('truetype'), url('../fonts/montserrat-v21-latin-800.svg#Montserrat') format('svg')
}
 
body {
	font-family: montserrat;
	color: #4D4D4D;
	background-color: #F8F8F8;
	overflow-x: hidden;
	text-align: left;
	margin: 0;
	padding: 0;
}
.container {
	max-width: 1200px;
	margin: 0 auto;
	padding: 20px;
}

.contact_d .container {
	padding: 0;
}
hr {
	margin-top:1.2rem;
	margin-bottom:1.2rem;
	border: 0;
	border-top: 1px solid rgba(0,0,0,.1);
}
.top-bar {
	background: #fff;
	color: #fff;
	z-index:9999999;
	display: flex;
	justify-content: space-between;
	align-items: center;
	box-shadow: 0 0 20px 0 #D5D5D5;
	border-radius: 10px;
	padding: 6px 40px 0 15px;
}
.logo-light {
	width: 430px;
	margin: 0 0 0 5px;
}
.ico_st a {
	text-decoration:none;
	color: #000;
	transition: .2s ease-in;
	padding: 10px 15px 10px 30px;
	background:#f9c116;   
background: -webkit-linear-gradient(to right, #ffffff, #f9c116);  
background: linear-gradient(to right, #ffffff, #f9c116);  
-webkit-border-top-right-radius: 7px;
-webkit-border-bottom-right-radius: 7px;
-moz-border-radius-topright: 7px;
-moz-border-radius-bottomright: 7px;
border-top-right-radius: 7px;
border-bottom-right-radius:7px;
margin:0;
text-shadow:1px 1px 1px #fff;
}

.ico_st a:hover {
	margin:0 0 0 20px;
background: #8300b9;  /* fallback for old browsers */
background: -webkit-linear-gradient(to right, #ffffff, 8300b9);  /* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(to right, #ffffff, #8300b9); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
}
.hero {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	padding: 40px 50px 40px 37px;
	margin:0 0 30px 0;
	background: #fff;
	border-radius: 10px;	   
  justify-content: space-between;
  gap: 2rem;
  
  
}

 .hero-text h2 {
	font: 100 21px/26px Kanit;
	margin: 0;
	padding:0;
}
 
.hero-img iframe {
	background: #000;
	padding:20px 10px;
	border-radius: 10px;
	width: 100%;
	max-width: 100%;
}
.hero-text {
	flex: 1;
	margin: 0;
	text-align: justify;
}
.hero-text h1 {
	margin: 0 0 2px 0;
	padding: 0;
	font-size:30px;
}

.hero-text h2{ font-size:23px;}
.hero-text p {
	line-height: 30px;
 
}
.text_tit {
	font-size: 16px;
	color: #ff0000!important;
	margin: 0;
	padding: 0 0 0 5px;
}

.btn-orange {
	background-color: #f15a24;
	border: none;
	padding: 10px 20px;
	cursor: pointer;
	margin-top: 10px;
	border-radius: 5px;
	transition: .2s ease-in;
}
.btn-orange a {
	font-size: 14px;
	color: white;
	font-weight: bold;
	text-decoration: none;
}
.btn-orange:hover {
	background-color: #B42F00;
	padding: 10px 25px;
}
h1, h2, h3, h4, h5, h6 {
	color: #323232;
	font-family: Kanit;
}
.section-title {
	text-align: center;
	color: #ff0000;
	font-size: 40px;
	margin: 60px 0 20px;
}
.services {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: 20px;
	margin: 35px 0 0 0;
}
.service-box {
	border: 1px solid #E7E7E7;
	border-radius: 6px;
	overflow: hidden;
	background: #fff;
	text-align: center;
	transition: .2s ease-in;
}
.service-box:hover {
		border:1px solid #fff;
	box-shadow: 0px 0px 20px 0 #AAAAAA;
}
.service-box a {
	font-family: Kanit;
	text-decoration: none;
	font-size: 14px;
	transition: .2s ease-in;
	color: #001A51;
}
.service-box img {
	width: 100%;
	height: 220px;
	object-fit: cover;
}
.service-box h3 {
	padding: 0 5px;
	font-size: 22px;
	color: #333;
	margin: 25px 0 35px 0;
	transition: .2s ease-in;
}
.service-box h3:hover {
	color: #ff0000;
}
footer {
background: #21022e;  /* fallback for old browsers */
background: -webkit-linear-gradient(to right, #240b36, #21022e);  /* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(to right, #240b36, #21022e); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */

	color: #fff;
	text-align: center;
	padding: 20px 10px;
	margin-top: 60px;
	font-size: 14px;
}
footer a {
	color: #fff;
	margin: 0;
	text-decoration: none;
}
.social_bot {
	margin:5px 0 0 0;
}
footer a i {
	font-size: 25px;
	border-radius:5px;
	background: rgba(0,0,0,0.8);
	padding: 3px;
	transition: .2s ease-in;
	color: #f8bf17;
}
footer a:hover {
	color: #000;
 
}
footer a i:hover {
	background: #fff;
	color: #FF5555;
}
.top-bar i {
	color: #2E1703;
	font-size:14px	;
}
 
.ico_st .icon-whatsapp{ font-size:27px!important;}
.nova_site{
	color: #f8bf17!important;
}
.nova_site:hover {
	color: #FFFFFF!important;
}


/************hover css services**************/
 .services {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 20px;
  padding: 20px;
}

.card {
  perspective: 1000px;
  width: 100%;
 border-radius:7px;
border:1px solid #E4E4E4;
background:#fff;
}

 

.card-inner {
  position: relative;
  width: 100%;
  padding-top: 90%;  
  transform-style: preserve-3d;
  transition: transform 0.8s;
}

.card:hover .card-inner {
  transform: rotateY(180deg);
}

.card-front,
.card-back {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
   overflow: hidden; 
 height:240px;
}

.card-front img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  -webkit-border-top-left-radius: 7px;
-webkit-border-top-right-radius: 7px;
-moz-border-radius-topleft: 7px;
-moz-border-radius-topright: 7px;
border-top-left-radius: 7px;
border-top-right-radius: 7px;

 
}

.card-back {
background: #EEAECA;
background: radial-gradient(circle, rgba(238, 174, 202, 1) 0%, rgba(148, 187, 233, 1) 100%);
  transform: rotateY(180deg);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #333;
  padding: 15px;
  box-sizing: border-box;
  text-align: center;
 
 
font:100 16px/27px montserrat;
cursor:pointer;
-webkit-border-top-left-radius: 5px;
-webkit-border-top-right-radius: 5px;
-moz-border-radius-topleft: 5px;
-moz-border-radius-topright: 5px;
border-top-left-radius: 5px;
border-top-right-radius: 5px;

}

.card a {
  display: block;
  text-align: center;
  text-decoration: none;
padding:0 10px;
}

.card h3 {
  font-size:20px;
 padding:0 0 10px 0;
}


/***************video play*****************/

.hero-img {
	position: relative;
	display: inline-block;
	width: 520px;
}

.hero-img::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right:0;
	width: 100%;
	height: 100%;
	border-radius: 24px;
	background: linear-gradient(to bottom, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0));
	pointer-events: none; /* اجازه کلیک روی تصویر رو میده */
	z-index: 1;
}

.hero-img img {
	width: 495px;
	height: 340px;
	border-radius: 24px;
	box-shadow:5px 4px 3px rgba(0,0,0,0.5);
	display: block;
	position: relative;
	z-index: 0;
	background: #000;
	padding: 15px 15px;
}


 .video-placeholder{
	 	width: 510px;
	height: 340px;
	  position: relative; 
	  cursor: pointer; }
	  
.hero-img .icon-youtube-play {
  font-size:50px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
  pointer-events: none;  
  color:#f8c115; 
  text-shadow:10px 10px 10px #000000;

}
.text-yout {
	font-size: 15px;
	position: absolute;
	top: 89%;
	left: 17%;
	transform: translate(-50%, -50%);
	z-index: 2;
	pointer-events: none;
	color: #fff;
	background: rgba(0,0,0,0.5);
	padding: 10px 15px;
}

.sty_back{position:absolute;
 top:0; left:0; 
 width:100%;
  height:100%;
   align-items:center;
    justify-content:center;}
	
	.text-ston {
  position: absolute;
  top: 10px;
  left: 10px;
  color: white;
  background-color: rgba(0, 0, 0, 0.6);
  padding: 8px 12px;
  font-size: 16px;
  border-radius: 4px;
  z-index: 2;
  max-width: 90%;
  font-weight:100;
}
 
 
/****Floating action button******/
 
.whats-float, .tele-float, .call-float {
	position: fixed;
	text-align: left;
	transform: translate(108px, 0px);
	right: 0;
	padding:5px 0;
	width: 160px;
	overflow: hidden;
	color: #FFF;
	border-radius: 5px 0 0 5px;
	z-index: 10;
	transition: all 0.5s ease-in-out;
	vertical-align: middle
}
.whats-float {
	bottom:143px;
	background: #c31432;  /* fallback for old browsers */
background: -webkit-linear-gradient(to right, #240b36, #c31432);  /* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(to right, #240b36, #c31432); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */

}
.tele-float {
	bottom: 50px;
	background: #c31432;  /* fallback for old browsers */
background: -webkit-linear-gradient(to right, #240b36, #c31432);  /* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(to right, #240b36, #c31432); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */

}
.call-float {
	bottom:100px;
	background: #c31432;  /* fallback for old browsers */
background: -webkit-linear-gradient(to right, #240b36, #c31432);  /* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(to right, #240b36, #c31432); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */

}
.call-float a {
	line-height: 29px;
}
.whats-float a {
	line-height: 25px;
}
.tele-float a {
	line-height: 29px;
}
.whats-float a span, .call-float a span, .tele-float a span {
	color: white;
	font-size: 15px;
	position: absolute;
	line-height: 15px;
	font-weight: bolder;
}
.whats-float a span {
	padding: 0 0 0 9px;
}
.call-float a span {
	padding: 0 0 0 14px;
}
.tele-float a span {
	padding: 0 2px 0 13px;
}
.whats-float i, .call-float i, .tele-float i {
	color: white;
	text-align: center;
	transform: rotate(0deg);
	transition: all 0.5s ease-in-out;
}
.whats-float i {
	padding: 0 0 0 5px;
	font-size: 27px;
}
.tele-float i {
	padding: 0 5px;
	font-size: 20px;
}
.call-float i {
	padding: 0 0 0 10px;
	font-size: 20px;
}
.whats-float:hover, .call-float:hover, .tele-float:hover {
	color: #FFFFFF;
	transform: translate(0px, 0px);
}
.whats-float:hover i, .call-float:hover i, .tele-float:hover i {
	transform: rotate(360deg);
}

/****************************/
.contact_d {
background: #c31432;  /* fallback for old browsers */
background: -webkit-linear-gradient(to right, #240b36, #c31432);  /* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(to right, #240b36, #c31432); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */

	border-radius: 10px;
	color: #fff;
	margin: 50px auto;

	box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.4);
	padding: 20px 5px 20px 20px;
}

.con_str {
  display: flex;
  gap: 30px;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
}

.call_box {
	display: flex;
	align-items: center;
	background-color: rgba(0, 0, 0, 0.2);
	border-radius: 50px;
	padding: 0 25px 0 7px;
	width: fit-content;
	max-width: 100%;
	line-height:15px;
	transition: .2s ease-in;
}

.call_box:hover{background-color: rgba(0, 0, 0, 0.6);}

.call_box .icon-paper-plane {
	margin: 0 0 0 -35px !important;
}

.call_box i {
	color: #f9c116;
	font-size: 46px;
 
	margin: 0 0 0 -20px;
}
.call_box .icon-whatsapp {
  font-size: 50px;
}

.call_text {
  font-size: 15px;
  color: #fff;
  font-weight: normal;
  line-height: 1.5;
}

.call_kl {
  color: #f9c116;
  padding:0;
  text-decoration: none;
}
 /***************css hover*******************/
 ul {
  display: flex;
  position: absolute;
 
  left: 50%;
  transform: translate(-50%, -50%);
}

ul li {
  list-style: none;
}

ul li a {
  width: 80px;
  height: 80px;
  background-color: #fff;
  text-align: center;
  line-height: 80px;
  font-size: 35px;
  margin: 0 10px;
  display: block;
  border-radius: 50%;
  position: relative;
  overflow: hidden;
  border: 3px solid #fff;
  z-index: 1;
}

ul li a .icon {
  position: relative;
  color: #262626;
  transition: .5s;
  z-index: 3;
}

ul li a:hover .icon {
  color: #fff;
  transform: rotateY(360deg);
}

ul li a:before {
  content: "";
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  height: 100%;
  background: #f00;
  transition: .5s;
  z-index: 2;
}

ul li a:hover:before {
  top: 0;
}

ul li:nth-child(1) a:before{
  background: #3b5999;
}

ul li:nth-child(2) a:before{
  background: #55acee;
}

ul li:nth-child(3) a:before {
  background: #0077b5;
}

ul li:nth-child(4) a:before {
  background: #dd4b39;
}
 /********************************/

@media (max-width: 768px) {
	
.hero-text h1 {
	font-size: 25px;
	text-align: left;
}
.container {
	margin: 20px auto 60px auto;
	padding: 20px;
	text-align: justify;
}

.contact_d .container{margin: 20px auto;}

.hero {
	flex-direction: column;
}
.top-bar {
	margin: 0;
	padding: 0;
	border-radius: 0;
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
}
.hero-text {
	margin: 0;
	padding: 10px;
}
.hero-text h2 {
	font: 700 16px/29px Kanit;
	margin: 0 0 0 0;
	text-align: left;
}
.btn-orange {
	display: table;
	margin: 20px 0 45px 0;
}
.logo-light {
	width: 380px;
	margin: 5px 10px;
}
.ico_st {
	display: none;
}
.service-box img {
	height: 300px;
}
.hero-img {
	flex: 1;
	padding: 0;
	margin:  10px 0 ;
}
.hero-img::before {
	bottom: 0px;
}
.hero {
	display: block;
	padding: 10px;
	margin: 0;
}
.hero-img video {
	width: 100vw;
	height: auto;
	padding: 2px;
	background: #2b5272;
}
.whats-float, .tele-float, .call-float {
	width: 155px;
}
.hero-img iframe {
	padding: 0 0 30px 0;
}

.whats-float {
	  bottom:125px;
	
}
.call-float {
	 bottom: 82px;
}
 .tele-float {
	 bottom: 40px;
}
.top-bar a{ margin:0;}
.hero-text p {	line-height: 34px;}

 
.con_str {
	flex-direction: column;
	gap: 10px;
	margin: 0 10px;
	text-align:left;
}
  .call_box {
	min-width:85%;
	justify-content: flex-start;
	padding: 8px 20px 8px 20px;
}
  .call_text {
    font-size: 14px;
  }

  .call_box i {
    margin-right:2px;
  }
  
  .contact_d {
 	margin: 41px auto;
	padding:20px 5px 20px 7px;
 
}
  
 
   .hero-img {
    width: 100%;
    max-width: 100%;
  }

  .hero-img img {
    width: 100%;
    height: auto;
    padding: 0;
    border-radius: 10px;
  }

  .video-placeholder {
    width: 100%;
    height: auto;
  }

  .hero-img .icon-youtube-play {
    font-size: 48px;
  }

  .text-yout {
    font-size: 14px;
    top: 85%;
    left: 50%;
    transform: translate(-50%, -50%);
    padding: 6px 10px;
  }

.text-ston {
	font-size: 14px;
	padding: 5px 8px;
	top: 8px;
	left: 0;
	text-align: left;
}

  .hero-img::before {
    border-radius: 16px;
  }

  .sty_back {
    display: flex;
    align-items: center;
    justify-content: center;
  }
 
 .nova_site{
	display: block;
}

.card-inner {
 	padding-top: 69%;
	 
}
 
 .services {
		padding: 0;
}
 
}