@import url("base.css");
@import url("fontawesome.css");

.block_main{
width:96%;
margin:3% auto;
display:block;
text-align:center}

.block_left{width: 48%;float: left}
.block_right{width: 48%;float: right}

.block_main_title{
margin: 2% auto 0px auto;
display:block;
font-size:20px;
font-weight:bold;
text-align:center}

.block_main_hr{margin: 0.5% auto 3% auto;display:block}

/**************************************** start loader ****************************************/
.no-js #loader {display: none}

.js #loader {
left: 100px;
top: 0;
display: block;
position: absolute}

.loader {
width: 100%;
height: 100%;
left: 0px;
top: 0px;
z-index: 9999;
position: fixed;
background: url(../img/loader.svg) center no-repeat var(--white2);
background-size: 30% auto}
/**************************************** end loader ****************************************/

/**************************************** start header ****************************************/
header {
width: 100%;
height: 40px;
padding:0% 2% 0% 2%;
display: block;
color: var(--white2);
background: linear-gradient(45deg, var(--black) 35%, var(--white2) 35%, var(--white2) 36%, var(--base) 36%)}

header .left {
width:40%;
float: left;
text-align: left}

header .left i {color: var(--white2);font-size: 20px}
.telegram, .instagram, .whatsapp  {display: inline-block;margin:2% 2% 0% 2%}
.telegram:hover i{color: #0088cc}
.instagram:hover i{color: #cd3099}
.whatsapp:hover i {color: #25d366}
.telegram i, .instagram i, .whatsapp i{transition:all 0.5s}
header .right p {color: var(--white);padding: 0.6% 0% 0% 0%}

nav {
width: 100%;
height:62px;
margin:0px auto;
padding:0% 2% 0% 2%;
display: block;
text-align:right;
background-color: var(--white)}

nav .item {
display: inline-block;
margin-top:15px;
margin-left:2%;
padding:5px;
text-align:center;
cursor: pointer;
color: var(--black);
border-bottom: 2px solid var(--white);
transition: all 0.5s}

nav .item:hover {color: var(--base);border-bottom: 2px solid var(--base)}

nav .logo {
float: left;
cursor: pointer;
text-align: center}
/**************************************** end header ****************************************/

/**************************************** start slide ****************************************/
.block_slide {
width: 100%;
height: 85vh;
background: linear-gradient(rgba(0,0,0,.7), rgba(0,0,0,.7)), url(../img/background.jpg);
background-position: center;
background-attachment: fixed;
background-repeat: no-repeat;
background-size: 100% 100%}

.block_slide_title{
display:block;
margin:0 auto;
padding-top:15%;
text-align:center;
font-size:28px;
font-weight:bold;
color:var(--white)}

.block_slide_des{
display:block;
margin:2% auto;
text-align:center;
font-size:20px;
font-weight:bold;
color:var(--white2)}

.block_slide p  {
margin: 0 auto;
text-align: center;
display: block}

.typed-cursor{
opacity: 1;
font-weight: 100;
animation: blink 0.7s infinite;}

@-keyframes blink{0% { opacity:1; }50% { opacity:0; }100% { opacity:1; }}
@-webkit-keyframes blink{0% { opacity:1; }50% { opacity:0;}100% { opacity:1;}}
@-moz-keyframes blink{0% { opacity:1; }50% { opacity:0; }100% { opacity:1; }}
@-ms-keyframes blink{0% { opacity:1; }50% { opacity:0; }100% { opacity:1; }}
@-o-keyframes blink{0% { opacity:1; }50% { opacity:0; }100% { opacity:1; }}
.typed-fade-out{opacity: 0;animation: 0;transition: opacity .25s}
/**************************************** end slide ****************************************/

/**************************************** start service ****************************************/
.block_service_item{
width:31%;
margin:0px 1% 3% 1%;
padding:1%;
display:inline-block;
color:var(--base);
background-color:var(--white);
border:1px solid var(--base);
border-radius:10px;
text-align:center;
box-shadow:var(--box_shadow);
transition: all 0.5s ease-in-out}

.block_service_item:hover {
color: var(--white2);
background-color: var(--base);
border: 1px solid var(--white);
box-shadow: unset;
transform: translateY(-10px)}

.block_service_item i {margin-top:5%;font-size:50px}
.block_service_item_title {font-weight:bold;margin:8px auto}
/**************************************** end service ****************************************/

/**************************************** start timeline ****************************************/
.block_timeline {
width:96%;
margin:3% auto;
position: relative;
direction:ltr}

.block_timeline:before {
width: 2px;
height: 100%;
left: 50%;
top: 0;
content: "";
position: absolute;
background: var(--base)}

.block_timeline:after {
width: 100%;
content: "";
display: table;
clear: both}

.block_timeline_item {margin-bottom: 3%;position: relative}

.block_timeline_item:after, .block_timeline_item:before {
width: 100%; 
content: "";
display: block;
clear: both}

.block_timeline_icon {
width: 50px;
height: 50px;
top: 0;
left: 50%;
margin-left: -23px;
position: absolute;
overflow: hidden;
background: var(--base);
color: var(--white2);
font-size:22px;
border-radius: 50%}

.block_timeline_icon i {top: 10px;left: 14px;position: relative}

.block_timeline_content {
width: 45%;
padding: 10px;
background-color:  var(--white);
box-shadow:var(--box_shadow);
border-radius: 10px}

.block_timeline_content:before {
width: 0;
height: 0;
left: 45%;
top: 15px;
content: "";
position: absolute;
border-top: 12px solid transparent;
border-bottom: 12px solid transparent;
border-left: 12px solid var(--base)}

.block_timeline_content.right {float: right}

.block_timeline_content.right:before {
right: 45%;
left: inherit;
content: "";
border-left: 0;
border-right:12px solid var(--base)}

.block_timeline_title {
margin: -20px -10px 0 -10px;
padding: 2%;
background-color: var(--base);
color: var(--white2);
font-size:18px; 
font-weight: bold;
direction:rtl;
border-radius: 10px 10px 0 0}

.block_timeline_content p {direction: rtl;margin-top: 8px}
/**************************************** end timeline ****************************************/

/**************************************** start comments ****************************************/
.blcok_comments {
width: 100%;
height:unset;
margin-top:5%;
position: relative}

.blcok_comments_item {
width:80%;
left: 0;
top: 0;
padding:0.5%;
display: block;
position: absolute;
opacity: 0;
z-index: 0;
border:2px solid var(--base);
border-radius: 10px;
background-color: var(--white);
justify-content: flex-start;
box-shadow: var(--box_shadow)}

.blcok_comments_title {
margin:2% auto;
display:block;position: relative;
text-align:center;
color: var(--black);
font-weight:bold}

.blcok_comments_item p {
padding:0px 10px 0px 10px;
display:block;
position: relative;
text-align:justify;
color: var(--black)}
/**************************************** end comments ****************************************/

/**************************************** start footer ****************************************/
footer {
width: 100%;
height: 280px;
margin:0 auto;
display: flex;
position:relative;
text-align:right;
background-color:var(--black);
color: var(--white2)}

.footer_block {width: 33.3%;margin: 20px 2%}

.footer_block_border {
width: 80%;
height: 2px; 
margin: 3% -2% 3% 0%;
background-color: var(--white)}

.footer_block_border:before {
width: 10px;
height: 10px;
content: '';
position: absolute;
margin-top: -4px;
background-color: var(--white2);
border-radius: 10px}

.footer_block section{margin:3% auto 3% 2%}

.footer_block section p{
direction:ltr;
display:unset;
line-height:unset}

.footer_block address{font-style:normal;display:unset}
section a{color:var(--white2)}
.footer_block i{margin-left:10px;transition: all 0.5s}
.footer_block .social a{font-size: 25px;color: var(--white2)}

.footer {
width: 100%;
height: 35px;
padding-top: 0.5%;
font-size: 12px;
display:block;
color: var(--white2);
text-align:center;
background: var(--base)}
/**************************************** end footer ****************************************/

/**************************************** start accordion ****************************************/
.block_accordion {
width: 100%;
height: auto;
text-align:right;
position: relative;
display: block}

.block_accordion li {
width: 100%;
height: auto;
margin: 0 auto 1% auto;
padding:1.5%;
position: relative;
display: block;
border: 1px solid var(--silver);
border-radius: 10px;
background-color: var(--white);
cursor: pointer}

.block_accordion_title {
width: 100%;
height: auto;
font-weight: bold;
position: relative;
display: block}

.block_accordion_title:after {
left: 0;
top: -10px;
font-family:Font Awesome 6 Free;
content: "\2b";
position: absolute;
color: var(--base);
font-size: 25px;
transition: all 0.3s ease-in-out}

.block_accordion li.active .block_accordion_title:after {transform: rotate(45deg)}
.block_accordion_title i{margin-left:0.5%;font-size: 18px}

.block_accordion_answer {
width: 100%;
height: auto;
margin: 0;
padding: 0;
position: relative;
display: block}

.block_accordion_answer p {margin-top:2%}
/**************************************** end accordion ****************************************/

/**************************************** start about us ****************************************/
.block_main_about_us{
width:100%;
margin: 2% auto 2% auto;
display:inline-block;
text-align:center}

.block_about_us_des {
width: 90%;
margin: 0 auto;
padding: 4%;
position: relative;
background-color: var(--white);
box-shadow: var(--box_shadow)}

.block_about_us_des:before, .block_about_us_des:after {
width: 100%;
height: 98%;
position: absolute;
content: "";
z-index: -1}

.block_about_us_des:before {
left: -5px;
top: 4px;
background: var(--white);
box-shadow: 0 0 8px rgba(0,0,0,0.2);
transform: rotate(-2.5deg)}

.block_about_us_des:after {
right: -3px;
top: 1px;
background: var(--white);
box-shadow: 0 0 3px rgba(0,0,0,0.2);
transform: rotate(1.4deg)}

.block_about_us_des p{text-align:right;line-height:2.5}
.team-section {padding: 50px 20px;text-align: center}
.team-section h3 {font-size: 2rem;margin-bottom: 40px;color: var(--black)}
.team-container {display: flex;flex-wrap: wrap;justify-content: center;gap: 30px}
.team-member {width: 260px;	background-color:var(--white);border-radius: 12px;box-shadow: var(--box_shadow);overflow: hidden;transition: transform 0.3s ease}
.team-member:hover {transform: translateY(-8px)}
.team-member img {width: 100%;height: 270px;object-fit: cover}
.member-info {padding: 20px}
.member-info h3 {margin: 10px 0 5px;font-size: 20px;color: #222}
.member-info p {font-size: 14px;color: #777;margin-bottom: 10px}
.social-icons a {margin: 0 8px;color: #555;text-decoration: none;font-size: 18px;transition: color 0.3s}
.social-icons a:hover {color: #0077ff}
/**************************************** end about us ****************************************/

/**************************************** start chat ****************************************/
.btn_support {
width:130px;
padding:5px 0px 5px 0px;
bottom: 30px;
left: 20px;
position: fixed;
border: none;
border-radius: 12px;
color:var(--white2);
cursor:pointer;
background-color: #9b59b6dc;
border: 1px solid #9b59b6dc;
animation: btn_support 1s infinite}

@keyframes btn_support {
0% {box-shadow: var(--base) 0 0 0 0}
80% {box-shadow: rgba(241, 196, 15, 0.00) 0 0 0 17px}}

.btn_support i, .btn_tel i{margin-left:7px}

.btn_tel {
width:130px;	
padding:5px 0px 5px 0px;
bottom: 100px;
left: 20px;
position: fixed;
border: none;
border-radius: 12px;
color:var(--white2);
cursor:pointer;
background-color: var(--green);
border: 1px solid var(--green);
animation: btn_tel 1s infinite}

@keyframes btn_tel {
0% {box-shadow: var(--green) 0 0 0 0}
80% {box-shadow: rgba(44, 62, 80, 0.00) 0 0 0 17px }}

.btn_tel i {animation: shake 0.5s infinite}

@keyframes shake {
0% { transform: rotate(0deg); }
25% { transform: rotate(15deg); }
50% { transform: rotate(-15deg); }
75% { transform: rotate(10deg); }
100% { transform: rotate(0deg); }}

.popup {
width: 100%;
height: 100%;
top: 0;
left: 0;
display: none;
position: fixed;
background-color: rgba(0, 0, 0, 0.8);
justify-content: center;
align-items: center;
opacity: 0;
transform: scale(0.8);
transition: opacity 0.3s ease, transform 0.3s ease}

.popup.show {opacity: 1;transform: scale(1)}

.popup_content {
width: 90%;
height: 90%;
position: relative;
border-radius: 15px;
overflow: hidden}

.popup_close {
top: 0px;
right: 15px;
position: absolute;
font-size: 30px;
cursor: pointer;
color: var(--red);
z-index: 1001}

.chat_container {
width: 100%;
margin: 10px auto;
background-color: rgba(255, 255, 255, 0.90);
backdrop-filter: blur(10px);
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
border-radius: 12px;
overflow: hidden}

.chat_header {padding: 15px;font-weight: bold}

.chat_body {
height:60vh;
padding:10px;
overflow-y: auto;
background: linear-gradient(rgba(0,0,0,.7), rgba(0,0,0,.7)), url(../img/chat-bg.jpg);
background-position: center;
background-attachment: fixed;
background-repeat: no-repeat;
background-size: 100% 100%}

.message {
width: fit-content;
max-width:90%;
margin-bottom: 10px;
padding:7px;
text-align:right;
color: var(--white2);
border-radius: 12px}

.message i{margin-left:10px}

.msg_user {
margin-right: auto;
background-color: var(--blue);
border-bottom-left-radius: 3px}

.msg_admin {background-color: var(--green);border-bottom-right-radius: 3px}

.chat_footer {padding: 10px;display: flex}

.chat_footer textarea {
height: 44px;
max-height: 200px;
flex: 1;
padding: 10px;
border: none;
background-color: transparent;
overflow-y: auto;
transition: height 0.7s ease-in-out}

.chat_footer button {
width: 45px;
height: 45px;
background-color: #0088cc;
color: white;
border: none;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.2)}

.chat_footer button i{font-size:19px}
/**************************************** end chat ****************************************/


/**************************************** start modal ****************************************/
.box_modal {
top: 0;
right: 0;
bottom: 0;
left: 0;
position: fixed;
opacity: 0; 
display: flex;
justify-content: center;
align-items: center;   
background-color: rgba(0, 0, 0, 0.5);   
pointer-events: none;
transition: opacity 0.3s ease}

.box_modal.active {opacity: 1;pointer-events: all;z-index: 2}

.modal {
width: 70%;
padding: 20px;
position: relative;
text-align:center;
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
transform: translateY(-30px);
opacity: 0;
background-color:var(--white2);
border-radius: 16px;
transition: all 0.3s ease}

.modal.show {transform: translateY(0);opacity: 1}
.modal.hide {transform: translateY(-30px);opacity: 0}

.modal_btn_close{
top: 0px;
left: 10px;
position: absolute;
transition: color 0.2s;
user-select: none;
font-size: 22px;
color:var(--red);
cursor: pointer}

.modal p{text-align: justify;padding: 10px}

.modal_phone {
margin: 20px auto;
font-size: 20px;
font-weight: bold;
text-align: center;
cursor: pointer}

.modal_social_ico {
padding-top:12px;
display: flex;
justify-content: space-around;
flex-wrap: wrap;
gap: 10px;
border-top:1px dashed var(--silver);
cursor: pointer}

.modal_social_ico_container {
width: 60px;
display: flex;
flex-direction: column;
align-items: center}

.modal_social_ico_container img {width: 40px;height: 40px;object-fit: contain}
.icon_label {font-size: 14px;margin-top: 5px;text-align: center}
	
.toast {
bottom: 30px;
right: 50%;
padding: 10px 20px;	 
position: fixed;
opacity: 0;
pointer-events: none;
transform: translateX(50%);
background-color: #323232;
color: #fff;
border-radius: 10px;
transition: opacity 0.4s ease;
z-index: 999}

.toast.show {opacity: 1}
/**************************************** end modal ****************************************/