body {
	background:#fff;
	font-family:Tahoma, Geneva, sans-serif;
	font-size:12px;
	overflow-x:hidden
}
dl, ol, ul {
  list-style: none;
}
a:hover, a:focus { text-decoration:none }
.centerilize_div img {
  margin: 0 auto !important;
  float: unset !important;
}
.displaynone {
	display:none
}
.clearfix { clear:both }

/* -------------------------------- 
  x sigin/signup popup 
  -------------------------------- */
 .cd-signin-modal { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(52, 54, 66, 0.9); z-index: 99999; overflow-y: auto; cursor: pointer; visibility: hidden; opacity: 0; -webkit-transition: opacity 0.3s, visibility 0.3s; transition: opacity 0.3s, visibility 0.3s; } .cd-signin-modal.cd-signin-modal--is-visible { visibility: visible; opacity: 1; } .cd-signin-modal__container { position: relative; width: 90%; max-width: 600px; background: #FFF; margin: 3em auto 4em; cursor: auto; border-radius: 0.25em; -webkit-transform: translateY(-30px); -ms-transform: translateY(-30px); transform: translateY(-30px); -webkit-transition: -webkit-transform 0.3s; transition: -webkit-transform 0.3s; transition: transform 0.3s; transition: transform 0.3s, -webkit-transform 0.3s; } .cd-signin-modal--is-visible .cd-signin-modal__container { -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); } .cd-signin-modal__switcher:after { /* clearfix */ content: ""; display: table; clear: both; } .cd-signin-modal__switcher li { width: 50%; float: left; text-align: center; } .cd-signin-modal__switcher li:first-child a { border-radius: .25em 0 0 0; } .cd-signin-modal__switcher li:last-child a { border-radius: 0 .25em 0 0; } .cd-signin-modal__switcher a { display: block; width: 100%; height: 50px; line-height: 50px; background: #d2d8d8; color: #809191; } .cd-signin-modal__switcher a.cd-selected { background: #FFF; color: #505260; } @media only screen and (min-width: 600px) { .cd-signin-modal__container { margin: 4em auto; } .cd-signin-modal__switcher a { height: 70px; line-height: 70px; } } .cd-signin-modal__form { padding: 0em 1.4em 3em; } .cd-signin-modal__fieldset { position: relative; margin: 0.4em 0; } .cd-signin-modal__fieldset:first-child { margin-top: 0; } .cd-signin-modal__fieldset:last-child { margin-bottom: 0; } .cd-signin-modal__label { font-size: 1.4rem; } .cd-signin-modal__label.cd-signin-modal__label--image-replace { /* replace text with an icon */ display: inline-block; position: absolute; left: 15px; top: 50%; bottom: auto; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); height: 20px; width: 20px; overflow: hidden; text-indent: 100%; white-space: nowrap; color: transparent; background-repeat: no-repeat; background-position: 50% 0; } .cd-signin-modal__label.cd-signin-modal__label--username { background-image: url("../img/cd-icon-username.svg"); } .cd-signin-modal__label.cd-signin-modal__label--email { background-image: url("../img/cd-icon-email.svg"); } .cd-signin-modal__label.cd-signin-modal__label--password { background-image: url("../img/cd-icon-password.svg"); } .cd-signin-modal__input { margin: 0; padding: 0; border-radius: 0.25em; } .cd-signin-modal__input.cd-signin-modal__input--full-width { width: 100%; } .cd-signin-modal__input.cd-signin-modal__input--has-padding { padding: 5px 20px 5px 70px; } .cd-signin-modal__input.cd-signin-modal__input--has-padding--nor { padding: 5px 20px 5px 20px; } .cd-signin-modal__input.cd-signin-modal__input--has-border { border: 1px solid #d2d8d8; -webkit-appearance: none; -moz-appearance: none; appearance: none; } .cd-signin-modal__input.cd-signin-modal__input--has-border:focus { border-color: #343642; -webkit-box-shadow: 0 0 5px rgba(52, 54, 66, 0.1); box-shadow: 0 0 5px rgba(52, 54, 66, 0.1); outline: none; } .cd-signin-modal__input.cd-signin-modal__input--has-error { border: 1px solid #d76666; } .cd-signin-modal__input[type=submit] { padding: 5px 0; cursor: pointer; background: #2f889a; color: #FFF; font-weight: bold; border: none; -webkit-appearance: none; -moz-appearance: none; appearance: none; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .cd-signin-modal__input[type=submit]:hover, .cd-signin-modal__input[type=submit]:focus { background: #3599ae; outline: none; } .cd-signin-modal__hide-password { display: inline-block; position: absolute; left: 0; top: 0; padding: 0px 15px; border-right: 1px solid #d2d8d8; top: 50%; bottom: auto; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); font-size: 1.4rem; color: #343642; } .cd-signin-modal__error { display: inline-block; position: absolute; left: -5px; bottom: -35px; background: rgba(215, 102, 102, 0.9); padding: .8em; z-index: 2; color: #FFF; font-size: 1.3rem; border-radius: 0.25em; /* prevent click and touch events */ pointer-events: none; visibility: hidden; opacity: 0; -webkit-transition: opacity 0.2s 0s, visibility 0s 0.2s; transition: opacity 0.2s 0s, visibility 0s 0.2s; } .cd-signin-modal__error::after { /* triangle */ content: ''; position: absolute; left: 22px; bottom: 100%; height: 0; width: 0; border-left: 8px solid transparent; border-right: 8px solid transparent; border-bottom: 8px solid rgba(215, 102, 102, 0.9); } .cd-signin-modal__error.cd-signin-modal__error--is-visible { opacity: 1; visibility: visible; -webkit-transition: opacity 0.2s 0s, visibility 0s 0s; transition: opacity 0.2s 0s, visibility 0s 0s; } @media only screen and (min-width: 600px) { .cd-signin-modal__form { padding: 0em 2em 3em; } .cd-signin-modal__fieldset { margin: 1em 0; } .cd-signin-modal__fieldset:first-child { margin-top: 0; } .cd-signin-modal__fieldset:last-child { margin-bottom: 0; } .cd-signin-modal__input.cd-signin-modal__input--has-padding { padding: 5px 20px 5px 50px; } .cd-signin-modal__input.cd-signin-modal__input--has-padding--nor { padding: 5px 20px 5px 20px; } .cd-signin-modal__input[type=submit] { padding: 16px 0; } } .cd-signin-modal__message { padding: 1.4em 1.4em 0; font-size: .7rem; line-height: 1.4; text-align: center; } @media only screen and (min-width: 600px) { .cd-signin-modal__message { padding: 2em 2em 0; } } .cd-signin-modal__bottom-message { position: absolute; width: 100%; left: 0; bottom: -10px;  text-align: center; font-size: 1.4rem; } .cd-signin-modal__bottom-message a { color: #2F889A; font-weight: bold;font-size:.8rem; text-align: right; } .cd-signin-modal__close { /* form X button on top right */ display: block; position: absolute; width: 40px; height: 40px; right: 0; top: -40px; background: url("../img/cd-icon-close.svg") no-repeat center center; color: transparent; text-indent: 100%; white-space: nowrap; overflow: hidden; } @media only screen and (min-width: 1170px) { .cd-signin-modal__close { display: none; } } .cd-signin-modal__block { display: none; } .cd-signin-modal__block.cd-signin-modal__block--is-selected { display: block; padding-top: 6em; } /* demo style */ .cd-nugget-info { text-align: center; position: absolute; width: 100%; height: 50px; line-height: 50px; bottom: 0; left: 0; } .cd-nugget-info a { position: relative; display: inline-block; padding: 0 2em; background-color: #da5067; border-radius: 50em; font-size: 14px; color: #fff; -webkit-transition: all 0.2s; -moz-transition: all 0.2s; transition: all 0.2s; } .cd-nugget-info a:hover { opacity: .8; } .cd-nugget-info span { vertical-align: middle; display: inline-block; } .cd-nugget-info span svg { display: block; } .cd-nugget-info .cd-nugget-info-arrow { fill: #fff; } .cd-intro { position: relative; height: 200px; line-height: 200px; text-align: center; } .cd-intro h1 { font-size: 2.2rem; color: rgba(52, 54, 66, 0.5); } @media only screen and (min-width: 600px) { .cd-intro { height: 300px; line-height: 300px; } } @media only screen and (min-width: 1170px) { .cd-intro h1 { font-size: 3.2rem; } }.js-signin-modal-trigger { float: left; width: 100%;}.cd-signin-modal__switcher.js-signin-modal-switcher.js-signin-modal-trigger { width: 100%;}input[type="checkbox"].cd-signin-modal__input { float: right; margin: 0 0 0 10px;}.cd-signin-modal__fieldset--nomarg { margin: 0em; float: right; width: 100%; } .cd-signin-modal__fieldset--nomarg label { margin: 0; line-height: 100%; width: 80%;}.cd-signin-modal__switcher.js-signin-modal-switcher.js-signin-modal-trigger {padding: 0;}
/*
 switch
*/
.switch-field {	display: flex;	margin-bottom: 36px;	overflow: hidden;	width: 100%;	direction: ltr;}.switch-field input {	position: absolute !important;	clip: rect(0, 0, 0, 0);	height: 1px;	width: 1px;	border: 0;	overflow: hidden;}.switch-field label { background-color: #FAFDFF; color: rgba(0, 0, 0, 0.6); font-size: 1.2rem; line-height: 1; text-align: center; padding: 8px 16px; border: 1px dashed #007BFF; transition: all 0.1s ease-in-out;  border-radius: 5px !important;}.switch-field label:hover {	cursor: pointer;}.switch-field input:checked + label {	background-color: #3949AB;	box-shadow: none;	color: #fff;}.switch-field-ocolor input:checked + label {    background-color: #2185F8;    box-shadow: none;    color: #fff;}.switch-field label:first-of-type {	border-radius: 4px 0 0 4px;}.switch-field label:last-of-type {	border-radius: 0 4px 4px 0;}.search_where.inbazar span {    width: 25%;    padding: 10px 0;    font-weight: bold;}
.switch-field.switch-field-ocolor.list_of_time {
	display:block !important;
	margin: 30px auto;
}
.switch-field.switch-field-ocolor.list_of_time label {
  width: 150px;
  margin: 7px;
  text-align: center;
  padding: 15px 0;
  font-size: .7rem;
  float: right;
}
.switch-field.switch-field-ocolor.list_of_time label span {
  font-size: 1.9rem;
  display: block;
  margin: 10px auto 0;
}
.displaynone {display: none;}

 
/**
 * jQuery toast plugin created by Kamran Ahmed copyright MIT license 2014
 * v0.1
 */
.jq-toast-wrap { display: block; position: fixed; width: 350px;  pointer-events: none !important; margin: 0; padding: 0; letter-spacing: normal; z-index:9999999999; }
.jq-toast-wrap * { margin: 0; padding: 0; }
.jq-toast-wrap.bottom-left { bottom: 20px; left: 20px; }
.jq-toast-wrap.bottom-right { bottom: 20px; right: 40px; }
.jq-toast-wrap.top-left { top: 20px; left: 20px; }
.jq-toast-wrap.top-right { top: 20px; right: 40px; }
.jq-toast-single { display: block; width: 100%; padding: 10px !important ; margin: 0px 0px 5px; border-radius: 4px; font-size: 12px;  line-height: 17px; position: relative;  pointer-events: all !important; background-color: #444444; color: white;text-align: right !important;
direction: ltr;
font-size: 11px; }
.jq-toast-single h2 {  font-size: 14px; margin: 0px 0px 7px; background: none; color: inherit; line-height: inherit; letter-spacing: normal;direction: ltr;text-align: right; }
.jq-toast-single a { color: #eee; text-decoration: none; font-weight: bold; border-bottom: 1px solid white; padding-bottom: 3px; font-size: 12px; }
.jq-toast-single ul { margin: 0px 0px 0px 15px; background: none; padding:0px; }
.jq-toast-single ul li { list-style-type: disc !important; line-height: 17px; background: none; margin: 0; padding: 0; letter-spacing: normal; }
.close-jq-toast-single { position: absolute; left: 7px; font-size: 14px; cursor: pointer;top: 50%;margin-top: -8px; }
.jq-has-icon { padding: 10px 10px 10px 10px; background-repeat: no-repeat; background-position: 10px; }
.jq-icon-info { background-color:rgba(0, 140, 209, 0.9); color: #d9edf7; border-color: #bce8f1; }
.jq-icon-warning { background-color: #FAF9C9; color:#A6782E !important; border:1px solid rgba(222, 182, 8, 1) !important; }
.jq-icon-error { background-color:rgba(233, 30, 26, 0.9); color: #f2dede; border: 1px solid #D8000C !important; }
.jq-icon-success { color: #dff0d8; background-color:rgba(48, 180, 51, 0.9); }
.top_login_btn_dr {
  float: left;
  margin: 5px 10px;
  font-weight: 900;
}
.top_login_btn_dr a {color: #46415C;}
.loggedinbtn {
  float: left;
  margin: 0 0 8px;
}
.gap {
  width: 100%;
  height: 20px;
}
/*
Profile
*/
.dw_profile1 .prof_sidebar {
	border: 1px solid #e3e3e3;
	border-radius: 5px;
	padding: 10px 0;
	box-shadow: 0 0 10px #eaeaea;
	margin: 0 auto 20px;
}
.dw_profile1 .tab-pane {
  padding: 20px 10px;
  border: 1px solid #DEE2E6;
  min-height:400px;
  line-height:200%;
  margin:0 auto 20px
  }
.dw_profile1 .prof_sidebar__abslbtn__topleft {
	position: absolute;
	left: 16px;
	top: 0;
	color: #fff;
	width: 50px;
	text-align: center;
	padding: 0;
	border-radius: 5px 0 20px 0;
	font-size: 1rem;
}
.dw_profile1 .prof_sidebar__abslbtn__topright {
	position: absolute;
	right: 16px;
	top: 0;
	color: #fff;
	width: 50px;
	text-align: center;
	padding: 0;
	border-radius: 0 5px 0 20px ;
	font-size: 1rem;
}
.prod_explain_title {
	background: #f7f8fa;
	border-top: 1px solid #eff0f2;
	border-bottom: 1px solid #e3e4e5;
	box-shadow: 0 1px 2px rgba(0,0,0,.12);
	-moz-box-shadow: 0 1px 2px rgba(0,0,0,.12);
	-webkit-box-shadow: 0 1px 2px rgba(0,0,0,.12);
	-ms-box-shadow: 0 1px 2px rgba(0,0,0,.12);
	-o-box-shadow: 0 1px 2px rgba(0,0,0,.12);
	border: 1px solid #e3e3e3;
	direction: ltr;
	padding: 10px;
	font-weight: bold;
	font-size: 18px;
	color: #00A195;
	margin: 10px auto 20px;
	border-radius:5px;
	color:#6C757D
}
.dw_profile1 .prof_sidebar .prof_userinfo_holder h2 {
	font-size: 14px;
	text-align: center;
	margin: 10px;
	font-weight: bold;
}
.dw_profile1 .prof_sidebar .prof_userinfo_holder h3 {
	font-size: 12px;
	text-align: center;
	margin: 10px;
	color: #ccc;
	letter-spacing: 2px;
}
.dw_profile1 .prof_sidebar ul {
	direction:ltr;
	margin:0;
	padding:0
}
.dw_profile1 .prof_sidebar ul li {
	height: 45px;
	line-height: 45px;
	font-size: 12px;
}

.dw_profile1 .prof_sidebar ul li a:hover, .dw_profile1 .prof_sidebar ul li.is-active a {
	border-right-color: #0067A0;
	color: #0067A0;
}
.dw_profile1 .prof_sidebar ul li a {
	color: #333;
	border-right: 3px solid transparent;
	border-right-color: transparent;
	padding: 0 35px 0 10px;
	display: block;
	-webkit-transition: border-color .3s;
	-moz-transition: border-color .3s;
	-ms-transition: border-color .3s;
	-o-transition: border-color .3s;
	transition: border-color .3s;
	position: relative;
}
.dw_profile1 .prof_sidebar ul li i {
	font-size: 16px;
	margin-left: 10px;
	position: absolute;
	top: 50%;
	right: 7px;
	-webkit-transform: translateY(-50%);
	-moz-transform: translateY(-50%);
	-ms-transform: translateY(-50%);
	-o-transform: translateY(-50%);
	transform: translateY(-50%);
}




/* Slider */
.slick-slider{position:relative;display:block;box-sizing:border-box;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-touch-callout:none;-khtml-user-select:none;-ms-touch-action:pan-y;touch-action:pan-y;-webkit-tap-highlight-color:transparent}.slick-list{position:relative;display:block;overflow:hidden;margin:0;padding:0}.slick-list:focus{outline:none}.slick-list.dragging{cursor:pointer;cursor:hand}.slick-slider .slick-track,.slick-slider .slick-list{-webkit-transform:translate3d(0,0,0);-moz-transform:translate3d(0,0,0);-ms-transform:translate3d(0,0,0);-o-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}.slick-track{position:relative;top:0;left:0;display:block;margin-left:auto;margin-right:auto}.slick-track:before,.slick-track:after{display:table;content:''}.slick-track:after{clear:both}.slick-loading .slick-track{visibility:hidden}.slick-slide{display:none;float:left;height:100%;min-height:1px}[dir='rtl'] .slick-slide{float:right}.slick-slide img{display:block}.slick-slide.slick-loading img{display:none}.slick-slide.dragging img{pointer-events:none}.slick-initialized .slick-slide{display:block}.slick-loading .slick-slide{visibility:hidden}.slick-vertical .slick-slide{display:block;height:auto;border:1px solid transparent}.slick-arrow.slick-hidden{display:none}
@charset 'UTF-8';.slick-loading .slick-list{background:#fff url(./ajax-loader.gif) center center no-repeat}@font-face{font-family:'slick';font-weight:400;font-style:normal;src:url(./fonts/slick.eot);src:url('./fonts/slick.eot?#iefix') format('embedded-opentype'),url(./fonts/slick.woff) format('woff'),url(./fonts/slick.ttf) format('truetype'),url('./fonts/slick.svg#slick') format('svg')}.slick-prev,.slick-next{font-size:0;line-height:0;position:absolute;top:50%;display:block;width:50px;height:50px;padding:0;-webkit-transform:translate(0,-50%);-ms-transform:translate(0,-50%);transform:translate(0,-50%);cursor:pointer;color:transparent;border:none;outline:none;background: #F9A25B;}

.slick-prev:hover,.slick-prev:focus,.slick-next:hover,.slick-next:focus{color:transparent;outline:none;background:#242f9b}

.slick-prev:hover:before,.slick-prev:focus:before,.slick-next:hover:before,.slick-next:focus:before{opacity:1}.slick-prev.slick-disabled:before,.slick-next.slick-disabled:before{opacity:.25}

.slick-prev:before,.slick-next:before{font-family:'slick';font-size:20px;line-height:1;opacity:.75;color:#fff;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.slick-prev {
  left: -40px;
  top: 36%;
  border-radius: 10px 0 0 0;
}[dir='rtl'] .slick-prev{right:-25px;left:auto}.slick-prev:before{content:'←'}[dir='rtl'] .slick-prev:before{content:'→'}
.slick-next {
  left: -40px;
  border-radius: 0 0 0 10px;
}[dir='rtl'] .slick-next{right:auto;left:-25px}.slick-next:before{content:'→'}[dir='rtl'] .slick-next:before{content:'←'}.slick-dotted.slick-slider{margin-bottom:10px}.slick-dots{position:absolute;bottom:-25px;display:block;width:100%;padding:0;margin:0;list-style:none;text-align:center}.slick-dots li{position:relative;display:inline-block;width:20px;height:20px;margin:0 5px;padding:0;cursor:pointer}.slick-dots li button{font-size:0;line-height:0;display:block;width:25px;height:25px;padding:5px;cursor:pointer;color:transparent;border:0;outline:none;background:transparent}.slick-dots li button:hover,.slick-dots li button:focus{outline:none}.slick-dots li button:hover:before,.slick-dots li button:focus:before{opacity:1}.slick-dots li button:before{line-height: 12px;font-family:'slick';font-size:35px;line-height:20px;position:absolute;top:0;left:0;width:20px;height:20px;content:'•';text-align:center;opacity:.25;color:#000;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.slick-dots li.slick-active button:before{opacity:.75;color:#000}
.ltr { direction:ltr }
.dw_wide_elemts_carousel__catalogue .slick-dots{width:auto; right: 0}
.dw_wide_elemts_carousel__catalogue .slick-dots li { margin: 0}
.dw_wide_elemts_carousel__catalogue .slick-dots li button{ padding: 0 }
.dw_wide_elemts_carousel__catalogue .slick-dots li.slick-active button::before {
  opacity: 1;
  color: #242f9b;
  content: "";
  width: 20px;
  background: #242f9b;
  border-radius: 50px;
  height: 9px;
  top: 8px;
}

/*HEADER*/


header {
    position: fixed !important;
    top: 0;
    transition: top 0.2s ease-in-out;
	z-index: 999;
}
.magicham {
  position: absolute;
  z-index: 9999 !important;
  top: 15px;
  left: 15px;
  font-size: 2rem;
  color: #F5821F;
  display:none
}

.nav-up {
    top: -170px;
}
.tg_to__nav {
  background: #DEE6EA;
  padding: 10px;
}
.tg_to__nav ul {
  float: left;
  width: 100%;
  padding: 0;
  margin: 0;
}
.tg_to__nav ul a {
  display: block;
  float: right;
  margin: 0 10px;
  color: #668B9D;
  font-weight: 400;
  font-size: 0.6rem;
}

.tg_header {
	position:relative;
	width:100%;
}

.tg_header .tg_header_inner {
	background:url(../images/tg_header_bg.png) center bottom no-repeat;
	height: 150px;
}
	
.inner .tg_header_inner {
  position: relative;
  width: 100%;
  background: url(../images/tg_header_bg-inner.png) center 0 no-repeat;
  height: 150px;
}

.tg_header .before {
  position: absolute;
  background: #fff;
  content: "";
  width: 100%;
  height: 56px;
  z-index: -1;
}
.inner .tg_header .before {
  background: #fff;
  height: 130px;
}
.tg_header .logo {
  background: url(../images/site-logo.png) center center no-repeat;
  width: 130px;
  height: 110px;
  background-size: contain;
  float: right;
  margin: 8px auto 0px;
}
.inner { background:#F3F4F6; padding-top: 130px;}
.inner .bg {
  position: absolute;
  top: 0;
  right: -15%;
  width: 130%;
  max-height: 450px;
  min-height: 450px;
  height: 450px;
  border-radius: 0px 0 80% 80%;
  background: linear-gradient(90deg, #e60f44 0%, #ff3266 100%);
  box-shadow: inset 0px -14px 30px 0px rgba(0,0,0,0.205);
  background: url(../images/IMG_0149.JPG);
    background-position-x: 0%;
    background-position-y: 0%;
    background-repeat: repeat;
    background-size: auto;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  z-index:-2
}
.main-breadcrumb {
  background: #fff;
  z-index: 99;
  position: relative;
  border-top: 1px solid #E7DDD4;
  color: #3d3630;
}
.main-breadcrumb .breadcrumb {
  background-color: transparent;
}
.main-breadcrumb .breadcrumb a {
  color: #3d3630;
}
.main-breadcrumb .breadcrumb * {
  font-size: 0.7rem;
}
.inner .tg_header {
  /*min-height: 600px;*/
  overflow: hidden;
  margin: 0px 0 -470px 0;
}
.content-wrapper {
  background: #fff;
  position: relative;
  border-radius: 10px 10px 0 0 ;
  padding: 20px 10px;
  min-height:450px;
  margin: 150px auto 0;
}
.content-wrapper:before {
  content: "";
  width: 85%;
  height: 20px;
  background-color: rgba(0,0,0,0.3);
  border-radius: 35px 35px 0 0;
  position: absolute;
  z-index: 0;
  left: 50%;
  transform: translateX(-50%);
  top: -10px;
  z-index: -1;
}
h1.text-center {
  font-weight: 900;
  margin: 0;
  color: #263A45;
  font-size: 1.7rem;
}
p.text-center.text-muted {
  font-weight: 100;
}

.main_menu {
  float: right;
  margin: 0;
}
.main_menu li {
  float: left;
  padding: 20px 0 5px;
}
.main_menu li a:hover {
  color: #242f9b;
  transition: all 0.2s ease;
  -webkit-transition: all 0.2s ease;
  -moz-transition: all 0.2s ease;
  -ms-transition: all 0.2s ease;
  padding: 2px 15px;
}
.main_menu li a {
  display: block;
  padding: 0px 10px;
  border-left: 1px solid #E7DDD4;
  color: #3d3630;
  font-weight: 700;
  font-size: .75rem;
  text-align: center;
  transition: all 0.2s ease;
  -webkit-transition: all 0.2s ease;
  -moz-transition: all 0.2s ease;
  -ms-transition: all 0.2s ease;
}
.main_menu li a:hover span {
  margin: 10px auto -10px;
  transition: all 0.2s ease;
  -webkit-transition: all 0.2s ease;
  -moz-transition: all 0.2s ease;
  -ms-transition: all 0.2s ease;
}
.icon {
  width: 46px;
  height: 46px;
  display: block;
  margin: 0 auto 5px;
  transition: all 0.2s ease;
  -webkit-transition: all 0.2s ease;
  -moz-transition: all 0.2s ease;
  -ms-transition: all 0.2s ease;
}
.icon img {
  width: 35px;
}

/*slider*/
.tg_slider img {
  width: 100%;
}
.tg_slider {
  margin: -150px auto 0;
  width: 100%;
  min-height: 450px;
  z-index: -2;
  position: relative;
  overflow: hidden;
  padding-top: 150px;
}
/*about*/
.tg_about {
	background:url(../images/tg_about_bg.jpg) left 0 no-repeat;
	width:100%;
	position:relative
}
.tg_about_jobs {
	background: #242f9b url(../images/tg_about_bg_ptr.png) repeat;
	width:100%;
	position:relative
}
.tg_about_jobs h5 {
  font-size: 3.5rem;
  color: #fff;
  direction: ltr;
  letter-spacing: -8px;
  font-weight: 900;
  margin: 0;
  padding: 0;
}
.tg_about_jobs h4 {
  font-size: 2rem;
  color: #fff;
  direction: ltr;
  font-weight: 700;
  margin: -15px 0 10px 0;
  padding: 0;
  letter-spacing: -3px;
}
.tg_about_jobs p {
  line-height: 200%;
  color: #fff;
  text-align: justify;
}
.tg_about .centerilize_div {
  margin: 50px auto !important;
  display: block;
}
.tg_about .tg_about_text_img img {
  margin: 120px auto;
}
.tg_about_jobs .centerilize_div img {
  width: 675px;
  margin: 0 !important;
}



/*products*/
.tg_products {
	background:url(../images/tg_products_bg.png) right 0 no-repeat;
	width:100%;
	position:relative;
	min-height:300px;
	padding:20px 0
}
.title_with_elements {
  position: relative;
  padding: 15px 0 0 60px;
  width: 100%;
  margin: 0 auto 20px;
}
.title_with_elements::before {
  background: url(../images/title_with_elements_bg.png) center center no-repeat;
  width: 55px;
  height: 55px;
  position: absolute;
  left: 0;
  top: 15px;
  content: "";
}
.title_with_elements h2 {
  font-weight: 900;
  margin: 0;
  color: #263A45;
  font-size: 1.7rem;
}
.title_with_elements h3 {
  font-size: .9rem;
  font-weight: 100;
  color: #263A45;
}
.tab-vertical .nav.nav-tabs {float: right; display: block; margin-right: 0px; border-bottom: 0}
.tab-vertical .nav.nav-tabs .nav-item {margin: 15px 0;}
.tab-vertical .nav-tabs .nav-link { border-right: 15px solid transparent; border-top-left-radius: .25rem; border-top-right-radius: .25rem; background: #fff;  padding: 10px 15px 10px 49px; color: #71748d;}
.vertical-tab-title.active { border-right: 15px solid #F08831 !important;}
.tab-vertical .tab-content {
    overflow: auto;
    border-radius: 15px;
    background: #fff;
    padding: 30px;
	box-shadow: 0 0 5px #c6c6c6;
	z-index:9;
	min-height:250px;
	position: relative;
}
.vertical-tab-title {
  font-size: 1.2rem;
  font-weight: 900;
  color: #263A45 !important;
  box-shadow: 0 0 5px #c6c6c6;
  border-radius: 0 15px 15px 0 !important;
  z-index:5;
	position: relative;
}
.dw_wide_elemts_carousel__catalogue {direction:ltr}
.dw_wide_elemts_carousel__catalogue_item {
	width:100%;
	
}
.dw_wide_elemts_carousel__catalogue_item a {
	display: flex;
	flex-wrap: wrap;direction: ltr;
}
.dw_wide_elemts_carousel__catalogue_item h1 {
  color: #F8A259;
  font-size: 1.5rem;
  font-weight: 900;
}
.dw_wide_elemts_carousel__catalogue_item h2 {
  font-size: 1.2rem;
  letter-spacing: 3px;
  color: #6A787E;
  margin: -9px 0 10px;
}
.item_text {
  float: right;
  flex: 0 0 70%;
}
.item_text .tg_cta_main {
  float: left;
  width: 145px;
  padding: 5px;
}
.dw_wide_elemts_carousel__catalogue_item .icon {
  float: left;
  flex: 0 0 20%;
  width: 100%;
  height: auto !important;
}
.dw_wide_elemts_carousel__catalogue_item .icon img {
  width: 190px;
}
.dw_wide_elemts_carousel__catalogue_item .intro {
  color: #6A787E;
  text-align: justify;
  line-height: 200%;
  font-weight: 100;
}
.tg_moreinfo_product {
  position: relative;
  margin: 0;
  padding: 25px 0 0;
  display: flex;
  flex-wrap: wrap;
}
.tg_mp_item {
  background: #242F9B;
  width: 33.333333%;
  float: right;
  text-align: center;
  margin: 5px;
  flex: 1 0 32.3333333%;
  font-weight: 400;
  overflow: hidden;
  border-radius: 15px;
  position: relative;
  color: #fff;
  border-right: 5px solid #F08831;
}
.tg_mp_item:hover { color:#F7A15A }
.tg_mp_item img {
  float: right;
  width: 128px;
}
.tg_mp_item h1 {
  font-size: 1.2rem;
  line-height: 81px;
  font-weight: 900;
  margin: 0;
}







/*index charts*/
.tg_indexcharts {
	width:100%;
	position:relative;
	min-height:300px;
	padding:20px 0
}
.tg_indexcharts .centerilize_div {
  float: left !important;
margin: 30px auto 0 !important;
}

/*index mag*/
.tg_mag {
	background:#F9F8FD url(../images/tg_mag_bg.png) right 0 no-repeat;
	width:100%;
	position:relative;
	min-height:300px;
	padding:20px 0
}
.tg_mag_box_category h2 {
  text-align: center;
  font-size: 1.5rem;
  font-weight: 900;
}
.tg_mag_box_category {
  background: #fff;
  padding: 10px;
  min-height: 250px;
  box-shadow: 0 0 5px #c6c6c6;
  border-radius: 10px;
}
.tg_mag_box_category__items {
  position: relative;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
}
.tg_mag_box_category__item {
  background: #FAFAFC;
  width: 50%;
  float: right;
  text-align: center;
  border-radius: 5px;
  margin: 5px;
  flex: 1 0 40%;
  font-weight: 400;
  padding:15px 0
}
.tg_mag_box_category__item span {
  background: #FDBE58;
  width: 32px;
  height: 32px;
  position: relative;
  display: block;
  margin: 10px auto 11px;
  overflow: hidden;
}
.tg_mag_box_category__item span img {
  width: 38px;
}
.tg_mag_box_category__item_logo {
  background: #fff url(../images/site-logo.png) center center no-repeat;
  width: 54px;
  height: 54px;
  position: absolute;
  right: 50%;
  margin-right: -27px;
  top: 50%;
  margin-top: -27px;
  border-radius: 50%;
  background-size: 45px;
}
.tg_cta_main {
  background: #F9A25B;
  padding: 10px 0;
  margin: 10px;
  display: block;
  text-align: center;
  border-radius: 15px;
  color: #fff;
  overflow: hidden;
  position: relative;
}
.tg_cta_main::before {
  content: " ";
  background: #242f9b;
  width: 30px;
  height: 45px;
  position: absolute;
  right: 0;
  top: 0;
  border-radius: 50px 0 0 0;
}
.dw_wide_elemts_carousel__indexposts {direction:ltr}
.dw_wide_elemts_carousel__indexposts_item {
  width: 33%;
  padding: 0 10px;
}
.post-item {
  background: #fff;
  border-radius: 10px;
  display: block;
  height: 340px;
  box-shadow: 0 0 5px #c6c6c6;
  margin: 0 0 10px 0;
  direction: ltr;
  position: relative;
padding-bottom: 45px;
}
.post-item h1 {
  font-size: .8rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: center;
  padding: 0 10px;
  color: #263A45;
  font-weight: 900;
}
.post-item .icon {
  width: 100%;
  height: 150px;
}
.post-item .icon img {
  width: 100%;
  height: 100%;
  border-radius: 10px 10px 0 0;
}
.post-item .intro {
  color: #263A45;
  padding: 0 10px;
  text-align: justify;
  font-size: .7rem;
  font-weight: 100;
  line-height: 200%;
}
.post-item .date {
  float: right;
  color: #ccc;
  padding: 5px;
}
.date small {
  font-size: 100%;
  float: left;
}
.post-item .newsno {
  float: right;
  color: #ccc;
  padding: 5px;
}
.post-item .readmore {
  background: #FFC80B;
  color: #fff !important;
  font-weight: 900;
  padding: 2px 15px 5px !important;
  border-radius: 15px !important;
  box-shadow: 0 0 10px #FFC80B;
  float: left;
  margin: 5px;
  position: absolute;
bottom: 10px;
left: 10px;
}


/*index multimedia*/
.tg_multimedia {
	background:#F9F8FD;
	width:100%;
	position:relative;
	min-height:300px;
	padding:20px 0
}
.dw_wide_elemts_carousel__multimedia {
  overflow: hidden;
  border-radius: 15px;
  max-height:450px
}
.dw_wide_elemts_carousel__multimedia img {
  width: 100%;
  height: 450px;
  object-fit: cover;
}
.dw_wide_elemts_carousel__indexbanner {
  width: 100%;
  direction:ltr
}
.dw_wide_elemts_carousel__module_item {
  width:33%;
}
.dw_wide_elemts_carousel__module_item p { margin:0; padding:0 }
.dw_wide_elemts_carousel__module_item * {
  text-align: center;
}
.dw_wide_elemts__multimedia {
  position: relative;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
}
.dw_wide_elemts__multimedia .image {
  background: #FAFAFC;
  width: 50%;
  float: right;
  text-align: center;
  margin: 5px;
  flex: 1 0 40%;
  font-weight: 400;
  overflow: hidden;
  border-radius: 15px;
  position:relative
}
.dw_wide_elemts__multimedia .image img {
  width: 100%;
  height: 217px;
  object-fit: cover;
}
.dw_wide_elemts__multimedia .item_text {
  position: absolute;
  bottom: 0;
  width: 100%;
  right: 0;
  height: 100%;
  background: linear-gradient(transparent, #3C3C3C);
}
.dw_wide_elemts__multimedia .item_text h1 {
  color: #fff;
  font-size: .8rem;
  position: absolute;
  bottom: 0;
  text-align: center;
  width: 100%;
  right: 0;
}



/*FOOTER*/
.dw_footer1 {
	border-top: 5px solid #242f9b;
	margin: 15px auto 0;
	width: 100%;
	margin: 0 auto;
	background: #4D4D4D;
	position: relative;
	padding: 10px 0;
}
.dw_footer1 .footer_item .footer_item_title {
	font-weight: 900;
	color: #fff;
	font-size: 1.1rem;
	text-align: center;
	margin: 20px auto 10px;
}
.dw_footer1 .footer_item .footer_item_text {
	color: #fff;
	font-size: .8rem;
	text-align: justify;
	font-weight: 100;
}
.footer_ul_link li a {
  color: #fff;
  margin: 10px;
  display: block;
  font-weight: 400;
  font-size: .7rem;
}
.footer_ul_link li a:hover { color:#FFC107 }
.footer_logo_social img {
  display: block;
  width: 100%;
  margin: 20px auto 10px;
}
.footer_honor_certificate svg {
  margin: 10px;
}
.footer_honor_certificate {
  display: flex;
}


.qrcode img {
  margin: 0 auto;
  display: block;
}
.qrcode {
  text-align: center;
  display: block;
}
@media print
{    
    .no-print, .no-print *
    {
        display: none !important;
    }
}
.dw_card__document .card-title {
  font-size: 0.7rem;
  font-weight: 900;
  color: #000;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.col-sm-6.col-md-2.specmarg {
  padding: 5px;
}
.dw_card__document p {
  text-align: justify;
  font-size: 0.6rem;
  color: #8c8c8c;
}
.dw_card__document .card-body {
  padding: 0.7rem;
}

.empty_container {
  padding: 50px 0;
  font-size: 1.5rem;
  font-weight: 900;
  text-align: center;
  width: 100%;
  color: #E9ECEF;
  min-height: 250px;
}
.card-horizontal {
    display: flex;
    flex: 1 1 auto;
}

.card-img-top.img-fluid.document_file i {
  font-size: 4rem;
  color: #636C75;
}
.card-img-top.img-fluid.document_file {
  height: 100px;
  background: #E9ECEF;
  text-align: center;
}
.virtual_link_btn {
  border: 1px solid #ED1846;
  padding: 5px 10px;
  margin: 0 auto 10px auto;
  display: block;
  width: 125px;
  border-radius: 10px;
  color: #ED1846;
  font-size: .7rem;
  text-align: center;
}
.dw_document__col .card-text {
  min-height: 50px;
}



.shadow {
	box-shadow: 0 2px 20px rgba(0, 0, 0, 0.1) !important;
}
.profile-card {
  padding: 10px !important;
}
.profile-card .profile-card_image img {
	width: 100px;
	height: 100px;
	border-radius: 100%;
	object-fit: cover;
	border: 4px solid #fff;
	z-index: 99;
position: relative;
}
.profile-card .profile-card_social {
	position: absolute;
	left: 0;
	bottom: 0;
	width: 100%;
}
.profile-card .profile-card_social img {
	width: 33px;
	margin: 5px 10px;
}
.profile-card_details .mb-0 {
  font-weight: 900;
  font-size: 1.1rem;
}
.profile-card_details .text {
  text-align: justify;
  direction: ltr;
  font-size: .7rem;
  line-height: 200%;
  color: #000;
  font-weight: 100;
  position: absolute;
  display: none;
}
.profile-card_image::after {
  background: url(../images/site-logo.png) center center no-repeat;
  background-size: 116px;
  background-position: right center;
  content: " ";
  position: absolute;
  width: 120px;
  height: 100%;
  right: -12px;
  top: -13px;
}
.profile-card {
  padding: 10px 110px 15px 0 !important;
  transition: all 0.4s ease;
  -webkit-transition: all 0.4s ease;
  -moz-transition: all 0.4s ease;
  -ms-transition: all 0.4s ease;
}
.profile-card_image {
  position: absolute;
  right: 5px;
  top: -10px;
}
.readmore_popup {
	display: none;
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  background: #242f9bA6;
  left: 0;
  border-radius: 5px 50px 50px 5px;
  padding: 28px 0;
  font-size: 1rem;
  font-weight: 900;
  color: #fff;
		direction: ltr;
}
.profile-popup_image img {
  width: 300px;
  height: 300px;
  border-radius: 15px;
  object-fit: cover;
  border: 4px solid #fff;
  position: relative;
  margin: 0 auto;
  display: block;
}
.text {
  font-size: 0.8rem;
  font-weight: 100;
  margin: 10px auto;
  line-height: 200%;
  text-align: justify;
  direction: ltr;
}
.modal-body h2 {
  font-size: 1.5rem;
  text-align: center;
  font-weight: 900;
  margin: 10px auto;
}
.profile-card:hover .readmore_popup {
	cursor: help;
	display: block;
  transition: all 0.4s ease;
  -webkit-transition: all 0.4s ease;
  -moz-transition: all 0.4s ease;
  -ms-transition: all 0.4s ease;}
.profile-card:hover .profile-card_details {
	filter: blur(5px);
	-webkit-filter: blur(5px);
}
.profile-card_details .mb-0 {
  font-weight: 900;
  font-size: 0.9rem;
  text-align: right;
	margin: 10px 0 0 0;
}
.profile-card_details .text-muted {
  color: #6c757d !important;
  text-align: right;
  margin: 5px;
}



.fulltext * {
  line-height: 200%;
}

.dw_wide_elemts_innerposts_item {
  width: 100%;
  padding: 50px 10px;
}
.inner_post_flex {
  display: flex;
}
.post-item .inner_post_flex .icon {
  width: 256px;
  height: auto;
	margin: 10px
}
.post-item .catalogue_item .icon {
  width: 125px;
  height: auto;
  margin: 10px;
}
.post-item .inner_post_flex .icon img {
  width: 100%;
  height: 100%;
  border-radius: 10px;
}
.dw_wide_elemts_innerposts_item .post-item {
  height: auto;
  box-shadow: none;
  border-bottom: 1px solid #e6e6e6;
  border-radius: 0;
}
.post_info h1 {
  text-align: right;
  font-size: 1rem;  max-width: 800px;
  margin: 10px 0 0;
}
.post_info {
  width: 100%;
}
.footer_honor_certificate { direction: ltr}
.footer_honor_certificate img { width: 150px; border-radius: 15px }
.card-image img {
  width: 100%;
  border-radius: 5px;
  margin: 0 auto 10px auto;
}
.content-section p {
  line-height: 200%;
  font-weight: 100;
}


.gallery #gallery {
  width: 100% !important;
  max-width: 100% !important;
}
.dw_wide_elemts_carousel__indexposts_inner {
  margin-bottom: 35px;
  border-bottom: 1px dotted #cecece;
  padding-bottom: 25px;
}
.fdb-block {
  padding: 0;
}
.lead {
  font-size: 0.8rem;
  line-height: 200%;
  text-align: justify;
}
.pt-5 {
  margin: 0 !important;
}
.fdb-block h1 {
  font-weight: 900;
  font-size: 2rem;
}
.fdb-block h3 {
  font-weight: 900;
  font-size: 1.5rem;
}
.fdb-block p {
  text-align: justify;
  line-height: 200%;
  font-size: 0.9rem;
  font-weight: 100;
}
input.ltr { text-align:left }
.img-fluid {
  max-width: unset !important;
  height: auto;
}
.contactus_page {
  padding: 50px 0;
}
.contactinfo {
  padding: 20px 10px;
  list-style: none;
}
.contactinfo li.leftt {
  text-align: left;
}
.contactinfo li {
  margin: 15px 0;
  direction: ltr;
  font-size: 0.8rem;
  line-height: 200%;
  padding: 0 30px 0 0;
  position: relative;
  text-align: justify;
}
.contactinfo li.leftt span {
  float: right;
  font-size: 0.5rem;
}
.contactinfo li i {
  position: absolute;
  right: 0;
  font-size: 1.5rem;
  color: #F5821F;
}
.social {
  border-radius: 50px;
  margin: 10px;
  display: block;
  width: 40px;
  height: 40px;
  color: #FFF;
  text-align: center;
  line-height: 40px;
  float: right;
  background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%,#d6249f 60%,#285AEB 90%);
  font-size: 1.6rem;
  box-shadow: 10px 2px 16px -7px #999;
  transition: all 0.2s ease;
  -webkit-transition: all 0.2s ease;
  -moz-transition: all 0.2s ease;
  -ms-transition: all 0.2s ease;
}
.social:hover {
	color:#fff;
  box-shadow: 10px 2px 16px -4px #999;
  transition: all 0.2s ease;
  -webkit-transition: all 0.2s ease;
  -moz-transition: all 0.2s ease;
  -ms-transition: all 0.2s ease;
}

/*
*
* ==========================================
* CUSTOM UTIL CLASSES
* ==========================================
*
*/
.collapsible-link {
  width: 100%;
  position: relative;
  text-align: right;
  font-size: 1rem;
}

.collapsible-link::before {
  content: "\F0141";
  position: absolute;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
  display: block;
  font-family: "Material Design Icons";
  font-size: 1.1rem;
}

.collapsible-link[aria-expanded="true"]::before {
  content: "\F0140";
}
.card-body img {
  width: 100%;
}
.btn-link:hover {
  text-decoration: none;
  background-color: transparent;
  border-color: transparent;
  color: #F58220 !important;
}.modal-backdrop {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1040;
  background-color: #000;
}
.tg_cta_gallery::before {
	content: " ";
	background: #242f9b;
	width: 30px;
	height: 45px;
	position: absolute;
	right: 0;
	top: 0;
	border-radius: 50px 0 0 0;
}
.tg_cta_gallery {
  background: #F9A25B;
  padding: 10px 20px 10px 0;
  margin: 10px;
  display: block;
  text-align: center;
  border-radius: 15px;
  color: #fff;
  overflow: hidden;
  position: absolute;
  right: 0;
  top: 15px;
  float: right;
  width: 145px;
}
.prod_explain__date.left {
	width: 140px;
	margin: 10px 0;
}
.prod_explain__date.left small {
	direction: ltr !important;
	display: block;
	float: left;
	font-size: 100% !important;
}


/* ===== Language Switcher Styles ===== */
:root{
  --glass-bg: color-mix(in oklab, Canvas 85%, #ffffff 5%);
  --glass-dark: color-mix(in oklab, #0a0a0a 80%, #ffffff 10%);
  --text: color-mix(in oklab, #0b1320 85%, #fff 15%);
  --text-inv: #f7f9fc;
  --ring: conic-gradient(from 180deg at 50% 50%, #00d4ff, #7c3cff, #ff2d6f, #00d4ff);
}
@media (prefers-color-scheme: dark){
  :root{ --glass-bg: color-mix(in oklab, #0c0f14 80%, #ffffff 4%); --text:#e9eef7; }
}

.lang-switch{
  display:flex; gap:.75rem; flex-wrap:wrap; align-items:center;
  padding: .6rem;
  position:relative; isolation:isolate;
  width: 100%;
  justify-content: flex-end; /* اضافه شود */
}

.lang-pill{
    --pad-y: 0.15rem;
  --pad-x: 0.5rem;
  display:flex; align-items:center; gap:.6rem;
  padding: var(--pad-y) var(--pad-x);
  border-radius: 10px; position:relative; text-decoration:none;
  color: var(--text); 
  background: linear-gradient(180deg, var(--glass-bg), transparent);
  backdrop-filter: blur(10px) saturate(120%);
  -webkit-backdrop-filter: blur(10px) saturate(120%);
  border: 1px solid color-mix(in oklab, currentColor 15%, transparent);
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
  box-shadow: 0 6px 18px rgba(0,0,0,.06);
}
.lang-pill:hover{
  transform: translateY(-2px);
  border-color: color-mix(in oklab, currentColor 30%, transparent);
  box-shadow: 0 10px 26px rgba(0,0,0,.12);
}
.lang-pill:focus-visible{
  outline: none;
  box-shadow: 0 0 0 3px color-mix(in oklab, #6ee7ff 50%, transparent);
}

/* Label stack */
.label{ display:flex; flex-direction:column; line-height:1.05; }
.label b{ font-weight:800; letter-spacing:.3px; font-size:13px; }
.label small{ font-size:12px; opacity:.75 }

/* Minimal, crisp “flag” chips (pure CSS) */
.flag{ width:22px; height:22px; border-radius:6px; overflow:hidden; box-shadow: inset 0 0 0 1px rgba(0,0,0,.08); position:relative; }
.flag::after, .flag::before{ content:""; position:absolute; inset:0; }

/* Iran */
.flag.ir{ background:
  linear-gradient(#239f40 0 33%, #fff 33% 66%, #da0000 66% 100%); }
/* Saudi (for Arabic language as a proxy) */
.flag.sa{ background:
  linear-gradient(#006c35 0 100%, transparent 0); }
.flag.sa::before{ content:""; position:absolute; left:0; right:0; top:48%; height:2px; background:#fff; }
/* English (Union-ish abstract) */
.flag.en{
  background:
    linear-gradient(45deg, #c8102e 48%, #fff 48% 52%, #012169 52%) no-repeat,
    conic-gradient(from 45deg, #fff 0 25%, #c8102e 0 50%, #fff 0 75%, #c8102e 0) 50%/110% 110% no-repeat,
    #012169;
}
/* China */
.flag.cn{
  background:#de2910;
}
.flag.cn::before{
  content:""; position:absolute; left:5px; top:5px; width:7px; height:7px; background:#ffde00; clip-path: polygon(50% 0, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
}
.flag.cn::after{
  content:""; position:absolute; left:16px; top:3px; width:3.5px; height:3.5px; background:#ffde00; clip-path: polygon(50% 0, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
  box-shadow: -3px 5px 0 #ffde00, -6px 9px 0 #ffde00, -9px 13px 0 #ffde00;
}

/* Better tap targets on mobile */
@media (max-width:520px){
  .lang-pill{ padding:.65rem .85rem; }
  .label small{ display:none; }
}
@media (prefers-reduced-motion: reduce){
  .lang-pill{ transition:none; }
}


/* ===== Floating FAB (globe) ===== */
.lang-fab-btn{
  position: fixed; left: 18px; bottom: 22px; z-index: 9999;
  width: 40px; height: 40px; border-radius: 50%;
  display: grid; place-items: center; border: 1px solid rgba(255,255,255,.25);
  background: radial-gradient(circle at 30% 30%, #ffffffcc, #e7ddd4cc 60%, #d7cabeaa);
  backdrop-filter: blur(8px) saturate(120%); -webkit-backdrop-filter: blur(8px) saturate(120%);
  box-shadow: 0 10px 24px rgba(0,0,0,.18), inset 0 1px 0 rgba(255,255,255,.35);
  cursor: pointer; transition: transform .2s ease, box-shadow .2s ease; padding:0
}
.lang-fab-btn:hover{ transform: translateY(-2px); box-shadow: 0 14px 30px rgba(0,0,0,.22); }
.lang-fab-btn:active{ transform: translateY(0); }
.lang-fab-btn svg{ opacity:.9; }

/* ===== Slide-in Drawer ===== */
.lang-drawer{
  position: fixed; left: 12px; bottom: calc(22px + 62px); z-index: 9998;
  width: 160px; max-height: 72vh; overflow: auto;
  padding: .6rem; border-radius: 16px;
  background: linear-gradient(180deg, rgba(231,221,212,.92), rgba(231,221,212,.8));
  border: 1px solid rgba(0,0,0,.08);
  box-shadow: 0 18px 40px rgba(0,0,0,.22);
  transform: translateX(-120%); opacity: 0; pointer-events: none;
  transition: transform .25s ease, opacity .25s ease;
}
.lang-drawer.open{ transform: translateX(0); opacity: 1; pointer-events: auto; }

/* Stack the existing switch vertically inside drawer */
.lang-switch.vertical{
  flex-direction: column; 
  align-items: stretch; 
  gap: .5rem; 
  padding: 0; 
  justify-content: flex-start;
}
.lang-switch.vertical .lang-pill{
  width: 100%;
  border-radius: 12px;
  --pad-y: .5rem; --pad-x: .75rem;
}

/* Optional: default neutral look (#E7DDD4), restore real flag colors on hover */
.lang-switch.vertical .lang-pill{
  background: #E7DDD4;
  border-color: #E7DDD4;
  color: #1f2937;
}


/* Restore each flag’s real palette on hover */
.lang-switch.vertical .lang-pill:hover .flag.ir{
  background: linear-gradient(#239f40 0 33%, #fff 33% 66%, #da0000 66% 100%);
}
.lang-switch.vertical .lang-pill:hover .flag.sa{ background:#006c35; }
.lang-switch.vertical .lang-pill:hover .flag.sa::before{ background:#fff; }
.lang-switch.vertical .lang-pill:hover .flag.en{
  background:
    linear-gradient(45deg, #c8102e 48%, #fff 48% 52%, #012169 52%) no-repeat,
    conic-gradient(from 45deg, #fff 0 25%, #c8102e 0 50%, #fff 0 75%, #c8102e 0) 50%/110% 110% no-repeat,
    #012169;
}
.lang-switch.vertical .lang-pill:hover .flag.cn{ background:#de2910; }
.lang-switch.vertical .lang-pill:hover .flag.cn::before,
.lang-switch.vertical .lang-pill:hover .flag.cn::after{ background:#ffde00; }

/* Scrollbar subtle */
.lang-drawer::-webkit-scrollbar{ width: 8px; }
.lang-drawer::-webkit-scrollbar-thumb{ background: rgba(0,0,0,.15); border-radius: 8px; }
@media (prefers-reduced-motion: reduce){
  .lang-drawer, .lang-fab-btn, .lang-switch .lang-pill{ transition: none; }
}