﻿/*Reset Page*/
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td{margin:0;padding:0;border:0;outline:0;font-size:100%;vertical-align:baseline;background:transparent;}
ol, ul{list-style:none;}
blockquote, q{quotes:none;}
:focus{outline:0;}
ins{text-decoration:none;}
del{text-decoration:line-through;}
table{border-collapse:collapse;border-spacing:0}


@font-face {
    font-family: 'Arial';
    src: url('/fonts/Arial.eot?#') format('eot'), /* IE6�8 */
    url('/fonts/Arial.woff') format('woff'), /* FF3.6+, IE9, Chrome6+, Saf5.1+*/
    url('/fonts/Arial.woff2') format('woff2'), /* FF3.6+, IE9, Chrome6+, Saf5.1+*/
    url('/fonts/Arial.ttf') format('truetype'); /* Saf3�5, Chrome4+, FF3.5, Opera 10+ */
}

/************Font Awesome**********/
@font-face{font-family:'FontAwesome';src:url('../fonts/fontawesome-webfont.eot?v=4.7.0');src:url('../fonts/fontawesome-webfont.eot?#iefix&v=4.7.0') format('embedded-opentype'),url('../fonts/fontawesome-webfont.woff2?v=4.7.0') format('woff2'),url('../fonts/fontawesome-webfont.woff?v=4.7.0') format('woff'),url('../fonts/fontawesome-webfont.ttf?v=4.7.0') format('truetype'),url('../fonts/fontawesome-webfont.svg?v=4.7.0#fontawesomeregular') format('svg');font-weight:normal;font-style:normal}.fa{display:inline-block;font:normal normal normal 14px/1 FontAwesome;font-size:inherit;text-rendering:auto;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.fa-lg{font-size:1.33333333em;line-height:.75em;vertical-align:-15%}.fa-1x{font-size:1.5em}.fa-1-2x{font-size:1.2em}.fa-2x{font-size:2em}.fa-3x{font-size:3em}.fa-4x{font-size:4em}.fa-5x{font-size:5em}.fa-fw{width:1.28571429em;text-align:center}.fa-ul{padding-left:0;margin-left:2.14285714em;list-style-type:none}.fa-ul>li{position:relative}.fa-li{position:absolute;left:-2.14285714em;width:2.14285714em;top:.14285714em;text-align:center}.fa-li.fa-lg{left:-1.85714286em}
.fa-search:before{content: "\f002";}
.fa-phone:before{content: "\f095";}
.fa-close:before{content: "\f00d";}
.fa-instagram:before{content: "\f16d";}
.fa-telegram:before{content: "\f2c6";}
.fa-facebook:before{content: "\f09a";}
.fa-location:before{content:"\f041";}
.fa-calendar:before{content: "\f133"}
.fa-user:before{content:"\f007"}
.fa-tags:before{content: "\f02c";}
.fa-basket:before{content: "\f290";}
.fa-sign-out:before{content: "\f08b";}
.fa-unlock-alt:before{content: "\f13e";}
.fa-chevron-right:before{content: "\f054";}
.fa-Mail:before{content: "\f0e0";}
.fa-calendar-o:before{content:"\f133";}
.fa-down:before{content: "\f0dd"}
.fa-bars:before{content: "\f0c9";}
.fa-whatsapp:before{content:"\f232";}
.fa-user-o:before{content: "\f2c0";}
.fa-shopping-basket:before{content: "\f291";}
.fa-heart-o:before{content:"\f08a";}
.fa-cart-plus:before{content:"\f217";}
.fa-arrows-h:before{content: "\f07e";}
.fa-tag:before{content:"\f02b"}
.fa-heart:before{content:"\f004"}
.fa-heart-o:before{content:"\f08a"}
.fa-camera:before{content: "\f030"}
.fa-arrow-up:before{content: "\f062";}
.fa-eye:before{content: "\f06e";}
.fa-linkedin:before{content: "\f0e1";}
.fa-angle-left:before {content:"\f104";}
.fa-angle-down:before {content:"\f107";}
.fa-angle-right:before{content:"\f105";}
.fa-paint-brush:before{content:"\f1fc";}
.fa-angle-up:before{content:"\f106";}
.fa-pencil-square-o:before{content: "\f044";}
.fa-mail:before{content: "\f064";}
.fa-envelope:before{content: "\f0e0";}
.fa-caret-down:before {content: "\f0d7";font-size:.85em}
.fa-warning:before{content: "\f071";}
.fa-globe:before{content: "\f0ac";}
.fa-user-circle-o:before{content: "\f2bd";}
.fa-star:before{content: "\f005";}
.fa-check:before{content: "\f00c";}
.fa-down:before{content: "\f107";}
.fa-info-circle:before{content:"\f05a";}
.fa-tags:before{content: "\f02c";}

a:link{color:#333;text-decoration:none;-webkit-transition:all 1s ease 0s;-moz-transition:all 1s ease 0s;-o-transition:all 1s ease 0s;transition:all 1s ease 0s;}
a:visited{color:#333;text-decoration:none;}
a:hover{color:#c6892c}

a.Click:link{color:rgb(57 205 201) !important;text-decoration:none;-webkit-transition:all 1s ease 0s;-moz-transition:all 1s ease 0s;-o-transition:all 1s ease 0s;transition:all 1s ease 0s;}
a.Click:visited{color:rgb(57 205 201);text-decoration:underline;}
a.Click:hover{color:rgb(238 25 36) !important;}


.VAT{vertical-align:top;}

.FloatLeft{float:left;}
.FloatRight{float:right;}
.IRANSans{font-family:IRANSans}
.MarginL5{margin-left:5%}
.MarginR5{margin-right:5%}
.MarginR1{margin:0% 2%}
.Justify{text-align:justify;}
.Justify p{text-align:justify;}
.Center{text-align:center !important;margin:0 auto;display:block}
.Centerimg{margin-left:auto;margin-right:auto;display:block;}
.Clear{clear:both;}
.LTR{text-align:left}
.RTL{text-align:right}
.D-LTR{direction:ltr}
.D-RTT{direction:rtl}
.Yellow{color:#da8a27}
.white{color:white !important}
.Black{color:#333333 !important}
.Red{color:red}
.Red2{color:#b2001a}
/*.Blue{color:#2471a3}*/
.Blue{color:#edb736}
.Blue2{color: #0b88cc}
.Green{color:#4caf50}
.Gray-Light{color:#817f80}
.Gray{color:#858585;}
.ddlhome{background:#fde1e1;color:#fe1515;font-size:.8em;padding:.5% 1%;border-radius:5px}
.VA{vertical-align:middle}
.VAB{vertical-align:text-bottom}
.Border{border:1px solid #2471a3;opacity:.5;width:70%;display:inline-block;}
.BnnerHome img{width:100%;border:1px solid #664089;}
.Border-G{border-bottom:1px solid rgba(0,0,0,.12);}
.Free10{height:10px}
.Free15{height:15px}
.Free20{height:20px}
.Free50{height:50px}
.Pointer{cursor:pointer;}
.Block{display: block;}
.Bold{font-weight:bold}
.samaltxt{font-size:13px}
.Mediumtxt{font-size:18px}
.Largetxt{font-size:25px}
.Italic{font-style:italic}
.X16{font-size:16px;}
.X18{font-size:18px;}
.X20{font-size:20px;}
.X22{font-size:22px;}
.X24{font-size:24px;}
.X26{font-size:26px;}
.X28{font-size:28px;}
.X30{font-size:30px;}
.absolute{position:absolute}
.w100{width:100%}
.w100img img{width:100% !important}
.w50{width:50% !important;}
.w45{width:45% !important;}
.w60{width:60% !important;}
.w20{width:20% !important;}
.w30{width:33.3333% !important;}
.w24{width:24.4%}
.lignH1{line-height:1em}
.fl{float:left;margin-right:1%;margin-bottom:1%;}
.fr{float:right;margin-left:1%;margin-bottom:1%;}
.f50{width:49% !important;}
.f30{width:32.3333% !important}
.f70{width:69% !important}
.Red{color:red !important}
.DisNone{display:none;}

.BackTitle{text-align:center;font-size:1.5em;font-weight:bold;line-height:4em;}
.HeadH1{font-size:1.5em;line-height:3;border-bottom:1px solid #cfd3d4;margin-bottom:2%}


/*MASTER*/
body{font-family:Arial;font-size:1.1em;color:rgba(0, 0, 0, 0.87);margin-top:0;line-height:1.5em;direction:ltr}

header{z-index:1000;top:0;right:0;width:100%;padding:.5% 5%;box-sizing:border-box;box-shadow:0 -1px 15px rgb(142 142 142 / 19%), 0 6px 6px rgb(255 255 255 / 23%);}
header #divlogo{width:10%;float:left}
header #divlogo img{width:100%;}
header #divmenu{float:right;width:50%;text-align:right}
header #navigation{float:right;}
header #navigation #divheadLogin{background:#fff;border-radius:100px;padding:5px;box-shadow:0 1px 2px rgba(3,54,63,.4),0 -1px 2px rgba(3,54,63,.04);}
header #navigation #divheadLogin i{font-size:1.5em;display:block}

div.divContent{margin:1.5% 15%}

.Headtitle h2{font-weight:bold;color:#2c2d2f;float:left;font-size:1.8em;}
.Headtitle a{background:#edf4fe;color:#177fa4;border-radius:30px;float:right;font-size:.8em;font-weight:bold;padding:.5% 1%}

#divTopHome{position:relative;background:url('/images/top-cover.jpg') no-repeat;background-size:cover;height:680px;}
#divTopHome #divTopSearch{background:#fff;border-radius:10px;display:flex;padding:1% 2%;width:50%;position:absolute;top:50%;left:50%;transform:translateX(-50%) translateY(-50%);}
select.ddlsearch{-webkit-appearance:none;-moz-appearance:none;border:1px solid #9e9e9e;color:rgb(41 57 78);line-height:3.7em;font-size:.9em;font-weight:bold;width:46%;-webkit-border-radius:5px;border-radius:10px;padding:0 2%;margin:2% .5%;cursor: pointer;background:url(/Images/dropdown.png) no-repeat right center;background-size: auto;}
.btnsearch{width:30%;background: #161616;border-radius: 12px;padding: 21px 0;color: #fff;font-weight: 700;font-size: 16px;line-height: 22px;text-align: center;letter-spacing: .04em;outline: none;margin:2% 0}

.divCity{width:31.333333%;margin:1%;float:left;position:relative;}
.divCity img{width:100%;border-radius:20px;display:block;}
.divCity .divTitle{position:absolute;width:100%;border-bottom-left-radius:20px;line-height:3em;font-weight:bold;font-size:1.1em;text-align:center;border-bottom-right-radius:20px;color:#fff;bottom:0;left:0;background:linear-gradient(180deg, transparent, rgb(0 0 0));}


/*Tours*/
.divTours{display:flex;}
.divTours .divToursL{width:25%;}
.divTours .divToursR{width:75%;padding:0 2%;}
.divTours .divToursR .divTourIn{box-shadow:0 1px 2px rgba(3,54,63,.4),0 -1px 2px rgba(3,54,63,.04)!important;border-radius:10px;padding:1%;margin-bottom:2%;}
.divTours .divToursR .divTourIn .divTourInL{width:30%;float:left}
.divTours .divToursR .divTourIn .divTourInL img{width:100%;border-radius:10px;}
.divTours .divToursR .divTourIn .divTourInR{width:38%;float:left;margin:0 2%;}
.divTours .divToursR .divTourIn .divTourInR p.Rate{color:rgba(0, 0, 0, 0.87);font-size:1em;line-height:2.5}
.divTours .divToursR .divTourIn .divTourInR p.Rate span{color:#505557}
.divTours .divToursR .divTourIn .divTourInR p.Comment{color:#505557;font-size:.78em;border-left:2px solid #cfd3d4;line-height:1.5;padding-left:2%;margin:3% 0 6% 0}
.divTours .divToursR .divTourIn .divTourInR h2{font-size:1.1em;line-height:2em}
.divTours .divToursR .divTourIn .divTourInR .divdetail{margin:1% 0;}
.divTours .divToursR .divTourIn .divTourInR .divdetail h3{font-size:.8em;line-height:2em;display:inline-block;}
.divTours .divToursR .divTourIn .divTourInR span{font-size:.75em;margin-bottom:5%;}
.divTours .divToursR .divTourIn .divTourInPrice{width:28%;float:left}
.divTours .divToursR .divTourIn .divTourInPrice .divPric{display:flex;}
.divTours .divToursR .divTourIn .divTourInPrice .divPric .divPricIn{width:50%;padding:1% 5%;}
.divTours .divToursR .divTourIn .divTourInPrice .divPric .divPricIn .freet{font-size:.8em;font-weight:normal}
.divTours .divToursR .divTourIn .divTourInPrice .divPric .divPricIn span{font-size:1.1em;font-weight:bold;}
.divTours .divToursR .divTourIn .divTourInPrice .divPric .divPricIn p{font-size:.7em;}
.divTours .divToursR .divTourIn .divTourInPrice .notice{font-size:.75em;text-align:center}
.divTours .divToursR .divTourIn .divTourInPrice a.view{font-size:.7em;background:#f1a21d;border-radius:30px;display:block;color:#fff;text-align:center;line-height:3.5;font-size:.8em;font-weight:bold;}
.divTours .divToursR .divTourIn .divTourInPrice a.view:hover{background:#faa71b}

.divTour #divHead h1{margin-bottom:1%;font-size:1.5em;}
.divTour #divHead p.Rate{font-size:.9em;margin-bottom:1%;}
.divTour #divHead p.Rate span{font-size:.8em;color:rgba(0, 0, 0, 0.87)}
.divTour #divHead p.Rate span{font-size:.8em;color:rgba(0, 0, 0, 0.87)}

.divFilterhead{background:#f1f2f3;color:#323637;padding:5%;font-weight:bold;font-size:1.2em;text-align:center;border-radius:15px;}

#divFeature{display:flex;flex-wrap:wrap;}
#divFeature div{width:46%;font-size:.85em;margin:0 2% 3% 0;}
#divFeature div img{vertical-align:middle}
#divFeature div span{font-weight:bold}
#divFeature div p.prxr{margin-left:10%;}

.divTour .divTourL{float:left;width:70%;}
.divTour .divTourL h2{font-size:1.3em}
.divTour .divTourR{float:right;width:28%}
.divTour .divTourR .divPriceTour{padding:4%;border-radius:13px;box-shadow:0 1px 2px rgba(3,54,63,.4),0 -1px 2px rgba(3,54,63,.04)}
.divTour .divTourR .divPriceTour span.price{font-weight:bold;font-size:1.5em;line-height:3em}
.divTour .divTourR .divPriceTour span.price span{font-size:.8em;padding-right:1%}
.divTour .divTourR .divPriceTour a.view{font-size:.7em;background:#f1a21d;border-radius:30px;display:block;color:#fff;text-align:center;line-height:3.5;font-size:.8em;font-weight:bold;}
.divTour .divTourR .divPriceTour a.view:hover{background:#faa71b}
.divTour .divTourR .divPriceTour p{font-size:.8em;color:#323637;line-height:1.5;margin:7% 0}
.divTour .divTourR .divPriceTour p:last-child{margin-bottom:0; }
.divTour .divTourR .divPriceTour p.infop{display:flex;}
.divTour .divTourR .divPriceTour p.infop i{font-size:1.5em;color:#faa71b;vertical-align:middle;display:block;margin-right:3%;}


.faq-container{border-bottom:1px solid #c7d0d9;}
.faq-label{cursor: pointer;width:100%;padding: 10px 25px;display: flex;font-size:.8em;font-weight:bold;color:#fff;box-sizing:border-box;margin:.5% auto;justify-content: space-between;align-items:center}
.faq-label-text{color:rgba(0, 0, 0, 0.87);}
.faq-label-icon {
  padding: 2px 3px;
  border-radius: 6px;
  display: flex;
  justify-content: center;
  align-items: center;
  
}

.material-icons {
  color:#faa71b;
  transition: 0.3s ease;
}

.faq-answer {
  transition: 0.3s ease;
  margin-top: 15px;
  height: 0;
  border-radius: 6px;
  color: rgba(127, 121, 121, 1);
  overflow: hidden;
  margin:0 5%;

}

.faq-answer-content {
  padding:1%;

}
.active {

  background: #FFFFFF;
  height: auto;
  margin-bottom:2% !important;

}
.rotate{
  transform: rotate(180deg)
}
.global-label{
  color:#365A5E;
  width:100%;
  height:35px;
  border-bottom: solid 2px #C4C1C1;
  margin-bottom: 35px;
}
.global-label-text{
  font-size:18px;
  font-weight:700;
  color:#365A5E;
}
.score{
  display:none;
  color:#00ff2a;
  padding:15px;
  width:45px;
  height:25px;
  margin: 45px auto;
  text-align:center;
  padding: 5px;
  justify-content:center;
  align-items:center;
  border-radius:5px;
  background:white;
}

span.figure{margin:0;padding:0;overflow:hidden;}
span.figure:hover+span{bottom:-36px;opacity:1;}
.hover14 span.figure{position:relative;}
.hover14 span.figure::before{position:absolute;top:0;left:-75%;z-index:2;display:block;content:'';width:50%;height:100%;background:-webkit-linear-gradient(left,rgba(255,255,255,0) 0%,rgba(255,255,255,.3) 100%);background:linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,.3) 100%);-webkit-transform:skewX(-25deg);transform:skewX(-25deg);}
.hover14 span.figure:hover::before{-moz-animation:shine .2s;-webkit-animation:shine .2s;animation:shine 1.5s;}
@-webkit-keyframes shine{100% {left:125%;}}


.menu-navPro {
	padding: 10px;
	border-radius: 3px;
	background: #fff6f1;
	border: 1px solid #00959f;
	border-radius: 8px;
}
.menu-navPro ul {
	padding: 0 20px;
}

.menu-navPro  ul li {
	color:rgba(0,0,0,.87) ;
	list-style-type: none;
	width: 200px;
	display:inline-block;
}
	.menu-navPro ul a {
		display: flex;
		color:rgba(0,0,0,.87);
		text-decoration: none;
		border-bottom: 1px solid #e5b365;
		padding-bottom: 4px;
		text-transform: uppercase;
		transition: 300ms all;
		margin: 2% 0%;
		padding: 10px;
		font-size:.8em
	}

.menu-navPro ul a:hover {
	background: #00959f99;
border-radius: 8px;
margin: 2% 0%;
}
.menu-navPro ul span.city{color:rgba(0,0,0,.87) !important;}
.menu-navPro ul span.active ~ a.Asd{background: #00959f99;border-radius: 8px;margin: 2% 0%;}

	.menu-navPro ul a span {
		color: #009ab0;
		display: block;
	}

.menu-navPro ul span.number{color:#009ab0 !important;font-size:1em !important;}


div#divContent-contact{width:100%;margin:0 auto;background:#2796d1}
div#divContent-contact div#divContent-contactIn{width:60%;margin:0 auto;}
div#divContent-contact div#divContent-contactIn h2{font-size:1.5em !important;color:#87fbfb;line-height:1.4;font-weight:300;margin-bottom:40px;}
div#divContent-contact div#divContent-contactIn p#p-h2{font-size:15px;text-align:center;color:#606060;padding:0% 10%;line-height:1.4}
div#divContent-contact div#divContent-contactIn h3{font-size:30px !important;color:#34343c;line-height:1.4;font-weight:300;margin-bottom:15px;}
div#divContent-contact div#divContent-contactIn p#p-h3{font-size:15px;text-align:center;color:#606060 !important;line-height:1.4}
div#divContent-contact div#divContent-contactIn div#divContact-Tel{margin:5% 0}
div#divContent-contact div#divContent-contactIn div#divContact-Tel h6{color:#fff;font-weight:300;font-size:1em;margin:1.5% 0%;line-height:2.5;text-align:center;}
div#divContent-contact div#divContent-contactIn div#divContact-Tel p{color:#fff;padding-top:2.5%;font-weight:300;font-size:.85em;margin:1.5% 0%;line-height:2.3;text-align:center;}
div#divContent-contact div#divContent-contactIn div#divContact-Tel p a{color:#fff;padding-top:2.5%;font-weight:300;font-size:.85em;margin:1.5% 0%;line-height:2.3;text-align:center;}
div#divContent-contact div#divContent-contactIn div#divContact-Tel span{color:#fff;font-size:1.25em}
div#divContent-contact div#divContent-contactIn div#divContact-Tel div.divPart1{width:33.333%;float:left;direction:ltr}
div#divContent-contact div#divContent-contactIn div#divContact-Tel div.divPart1 a{font-size:1.2em;}
div#divContent-contact div#divContent-contactIn div#divContact-Tel div.divPart2{width:33.333%;float:left;}
div#divContent-contact div#divContent-contactIn div#divContact-Tel div.divPart3{width:33.333%;float:left;}

div#divContent-contact div#divContent-contactIn div#divLoaction{width:100%}
div#divContent-contact div#divLoaction{width:100%;}
div#divContent-contact div#divLoaction div#divMap{width:60%;float:left;}
div#divContent-contact div#divLoaction div#divForm{width:40%;float:left;position:relative;}
div#divContent-contact div#divLoaction div#divForm h3{color:#fff;font-size:30px !important;font-weight:300;text-align:center;line-height:2}
div#divContent-contact div#divLoaction div#divForm p{color:#fff;font-size:17px;text-align:center;font-weight:300;margin-bottom:2%;}
div#divContent-contact div#divLoaction div#divForm div#divFormIn{width:90%;height:100% !important;position:absolute;top:0;right:0;background:#616161;opacity:.7;padding:5% 5%;}
div#divContent-contact div#divLoaction div#divForm div#divFormIn .txtcontact1{width:44%;font-weight:300;float:left;font-family:'Open-Sans' !important;color:#ffffff;padding: 6px 12px;margin:1% 1%;margin-bottom:2%;background-color: rgba(255, 255, 255, 0.2);font-size: 14px;border-color:#fff;height:25px;border:1px solid #fff;border-radius:4px;}
div#divContent-contact div#divLoaction div#divForm div#divFormIn .txtcontact2{width:94%;color:#ffffff;padding: 6px 12px;margin:1% 1%;background-color: rgba(255, 255, 255, 0.2);margin-bottom:5%;font-size: 14px;border-color:#fff;height:120px;border:1px solid #fff;border-radius:4px;}
div#divContent-contact div#divLoaction div#divForm div#divFormIn .btncontact{text-align:center;margin:0 auto;display:table;font-family:'Open-Sans' !important;color:#ffffff;padding:9px 20px;background-color:transparent;font-size: 14px;border-color:#fff;border:1px solid #fff;border-radius:4px;}
div#divContent-contact div#divLoaction div#divForm img{width:100%;display:block;}

div.divContent{width:90%;margin:0 auto;padding:.5% 2%;box-sizing:border-box;}
div.divContent div.divContent-L{padding:1% 2%;width:68%;float:right;background:#fff;box-shadow:0 2px 48px 0 rgba(0,0,0,.08);border-radius:10px;margin-bottom:1%;}
div.divContent div.divContent-L img{width:90%;margin:0 auto;display:block;}
div.divContent div.divContent-L2{background:#6ebde7;padding-bottom:0;}
div.divContent div.divContent-L2 div.L2R{float:right;background:#fff;box-shadow:0 2px 48px 0 rgba(0,0,0,.08);border-radius:10px;margin-bottom:1%;width:50%;padding:2% 5%}
div.divContent div.divContent-L2 img.L2L{float:left;width:30%;}
div.divContent div.divContent-L p{text-align:justify;font-size:1em;line-height:2em}
div.divContent div.divContent-R{width:23%;float:left;position:sticky;top:10%;padding:1.5% !important;}
div.divContent div.divContent-R li{line-height:2.5em;font-size:.9em;}
div.divContent div.divContent-RIn{margin-bottom:4%;background:#fff;padding:5% 5.5%;box-shadow:0px 8px 16px rgba(143,144,166,.2), inset 0px 2px 0px #6ebde7, inset 0px -2px 0px #6ebde7;border-radius:16px}
div.divContent div.divContent-RIn span.Arow{font-size:1.1em;font-weight:bold;line-height:3.1em}
div.divContent div.divContent-RIn span.Arow::before{background:url('/images/arow.png');margin-left:2%;width:22px;height:35px;content:' ';display:inline-block;vertical-align:middle;}

div.divContent div.divContent-L .divContent-LIn h2::before{background:url('/images/arow.png');margin-left:.5%;width:22px;height:35px;content:' ';display:inline-block;vertical-align:middle;}

.BackgroundTitle2{line-height:3em}
.BackgroundTitle2:before{background:url('/images/arow.png');margin-left:.5%;width:22px;height:35px;content:' ';display:inline-block;vertical-align:middle;}



/*MENU*/
.menu {
 display:block
}
.menu li {
 display:inline-block;
 position:relative;
 z-index:100
}
.menu li:first-child {
 margin-left:0
}
.menu li a {
 text-decoration:none;
 padding:8px 12px;
 display:block;color:rgba(0, 0, 0, 0.87);
 font-size:.9em;
 transition:all .2s ease-in-out 0s
}
.menu li a:hover,
.menu li:hover>a {
 color:#fff;
 background:#1e1d70;border-radius:4px;
}
.menu ul {
 visibility:hidden;
 opacity:0;
 margin:0;
 padding:0;
 width:220px;
 position:absolute;
 left:0;
 background:#fff;
 z-index:99;
 transform:translate(0,20px);
 transition:all .2s ease-out
}
.menu ul:after {
 bottom:100%;
 left:12%;
 border:solid transparent;
 content:" ";
 height:0;
 width:0;
 position:absolute;
 pointer-events:none;
 border-color:rgba(255,255,255,0);
 border-bottom-color:#fff;
 border-width:6px;
 margin-left:-6px
}
.menu ul li {
 display:block;
 float:none;
 background:0;
 margin:0;
 padding:0;text-align:left;
}
.menu .sub-menu li a {
 padding:7px 15px!important
}
.menu .sub-menu {
 -webkit-box-shadow:0 7px 7px rgba(0,0,0,.15)
}
.menu ul li a {
 font-size:14px;
 font-weight:normal;
 display:block;
 color:#797979;
 border-bottom:1px solid rgba(0,0,0,.04)
}
.menu ul li a:hover,
.menu ul li:hover>a {
 background:#1e1d70a6;
 color:#fff;border-radius:0px;
}
.menu li:hover>ul {
 visibility:visible;
 opacity:1;
 transform:translate(0,0)
}
.menu ul ul {
 left:169px;
 top:0;
 visibility:hidden;
 opacity:0;
 transform:translate(20px,20px);
 transition:all .2s ease-out
}
.menu ul ul:after {
 left:-6px;
 top:10%;
 border:solid transparent;
 content:" ";
 height:0;
 width:0;
 position:absolute;
 pointer-events:none;
 border-color:rgba(255,255,255,0);
 border-right-color:#fff;
 border-width:6px;
 margin-top:-6px
}
.menu li>ul ul:hover {
 visibility:visible;
 opacity:1;
 transform:translate(0,0)
}
.responsive-menu {
 display:none;
 width:100%;
 padding:20px 15px;
 background:#374147;
 color:#fff;
 text-transform:uppercase;
 font-weight:600
}
.responsive-menu:hover {
 background:#374147;
 color:#fff;
 text-decoration:none
}
a.homer {
 background:#9ca3da
}

/* Menu Icon */
.icon-container {
	position: relative;
	display: inline-block;
	z-index: 2;
	float: right;
	height: 55px;
	width: 55px;
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
	-webkit-transform: rotate(0deg);
	transform: rotate(0deg);
	transition: all 0.3s cubic-bezier(0.4, 0.01, 0.165, 0.99);
}
.icon-container #menuicon {
	width: 20px;
	height: 10px;
	position: relative;
	display: block;
	margin: -4px auto 0;
	top: 50%;
}
#menuicon .bar {
	width: 100%;
	height: 1px;
	display: block;
	position: relative;
	background: #fff;
	transition: all 0.3s cubic-bezier(0.4, 0.01, 0.165, 0.99);
}
#menuicon .bar.bar1 {
	-webkit-transform: translateY(0px) rotate(0deg);
	transform: translateY(0px) rotate(0deg);
}
#menuicon .bar.bar2 {
	-webkit-transform: translateY(6px) rotate(0deg);
	transform: translateY(6px) rotate(0deg);
}
.menu-open .icon-container {
	-webkit-transform: rotate(90deg);
	transform: rotate(90deg);
}
.menu-open .icon-container #menuicon .bar {
	transition: all 0.4s cubic-bezier(0.4, 0.01, 0.165, 0.99);
	transition-delay: 0.1s;
}
.menu-open .icon-container #menuicon .bar.bar1 {
	-webkit-transform: translateY(4px) rotate(45deg);
	transform: translateY(4px) rotate(45deg);
}
.menu-open .icon-container #menuicon .bar.bar2 {
	-webkit-transform: translateY(3px) rotate(-45deg);
	transform: translateY(3px) rotate(-45deg);
}

div.divSideR{width:100%;padding:2%;background:#fff;color:#404040;box-shadow: 0 0 5px 0 rgba(0,0,0,.1);border-radius:7px}
div.divSideL{width:20%;padding:1% 1%;float:right;background:#fff;box-shadow: 0 0 5px 0 rgba(0,0,0,.1);border-radius:7px;margin-left:1%;}
.page {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
}

.page__demo {
    flex-grow: 1;
}

.page__container {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
}
div.divFilter2 {
    width: 100%;
    float: right;
    margin: 0% .25%;
    position: relative
}

    div.divFilter2 img {
        width: 100%;
    }

    div.divFilter2 div.divTitle {
        width: 94%;
        position: absolute;
        bottom: 3%;
        text-align: center;
        background: rgba(33, 33, 33, 0.57);
        z-index: 1000;
        padding: 1% 3%
    }

        div.divFilter2 div.divTitle a {
            color: white;
            font-size: 14px;
        }
a.All {
    color: white;
    font-size: 18px;
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    z-index: 1000;}

section {
  display: flex;
  justify-content: center;
}

.card {
	float:right;
  background-color: #f2f2f2d6;
  box-shadow: 0 0 24px 0 rgba(0, 0, 0, 0.04);
  border-radius: 8px;
  transition: 0.4s;
  width:21%;margin:2%;min-height:395px;
}
.card2 {width:29.3333%;min-height:300px;}


.card:hover {
  box-shadow: none;
}
.card:hover .card-image {
  transform: translateX(0px);
  box-shadow: none;
}

.card-image {
  width: 100%;
  height: 256px;
  border-radius: 8px;
  position: relative;
  transform: translateX(-15px) translateY(-15px);
  box-shadow: 16px 4px 24px 0 rgba(0, 0, 0, 0.2);
  transition: 0.4s;
  object-fit: cover;
}

.card-body {
  padding: 8px;
}

.card-title {
  font-size:1em;padding-bottom:5%;
  margin:1%;font-weight:normal;
  transition: 0.4s;color:#00959f;
}
.card-title2 {
  font-size:1em;padding-bottom:5%;
  margin:1%;font-weight:normal;
  transition: 0.4s;color:rgba(0,0,0,.87);
}
.card2 .card-title{padding-bottom:1px;}
.card-content {
	font-size: .8em;
	margin: 1%;
}



div#divFooter{margin:0 auto;padding:1% 10%;background:#f1f2f3;padding-bottom:.25%;}
div#divFooter #divFooterlogo{display:flex;width:100%;padding:2% 0}
div#divFooter #divFooterlogo img{margin-right:auto;margin-left:auto;display:block}
div#divFooter i{opacity:.6}
.hrFooter{background:#7d7d7d;margin:1% 0;height:1px}
div#divFooter div#MenuFooter{width:100%;border-top:1px solid #a1863c;border-bottom:1px solid #a1863c}
div#divFooter div.divFooterIn{width:25%;float:left;}
div#divFooter div.divFooterIn h4{padding-bottom:3%;color:#323637;font-weight:700;font-size:.75em !important;line-height:2em;}
div#divFooter div.divFooterIn a{color:rgba(0, 0, 0, 0.87);padding-bottom:1.5%;font-size:.75em;opacity:.85;vertical-align:text-top;line-height:2.4em;}
div#divFooter div.divFooterIn li a:hover{padding-right:10px;color:#1e1d70;opacity:1}
div#divFooter div.divFooterIn img{margin-left:5%}
div#divFooter div.divFooterIn input{border-bottom:1px solid #a1863c !important;width:60%;height:15%;color:#50748a}
div#divCopyright{padding-top:1.5%;}
div#divCopyright a{color:#fff}
div#divCopyright p{width:100%;direction:ltr !important;color:#fff;font-family:Arial;font-size:.6em;opacity:.8}
.social{margin:0 auto;text-align:center}
.social i{font-size:1.3em;opacity:1 !important}

.divTourHomes{margin:0 15%;margin-top:-5%;direction:rtl}
.divTourHomes .divTourHome{margin:1%;padding:3%;box-sizing:border-box;background:#fff;direction:ltr;border-radius:12px;/*box-shadow:0 0px 0px rgb(0 0 0 / 99%), 0 1px 5px rgb(0 0 0 / 12%)*/}
.divTourHomes .divTourHome img{width:100%;border-radius:12px;}
.divTourHomes .divTourHome .divTitle{font-size:.8em;line-height:3;padding:0 2%;font-weight:bold;}

.divTour{margin:}
.divTour .divTourin{}
.divTour .divTourin img{width:100%;border-radius:10px;}
.divTour .divTourin .divTitle{font-size:.9em;line-height:3;padding:0 2%;font-weight:bold;text-align:left;}
.divTour .divTourin .divdetail{font-size:.8em;padding:0 2%;opacity:.9}
.divTour .divTourin .divdetail span{font-weight:bold;}
.divTour .divTourin .divdetail span.tourcount{font-size:.8em;opacity:.7;font-weight:normal}


/*FAQ*/
.accordion-wrapper{border-bottom: 1px solid #e3e5e6;margin-bottom: 0.75em;font-size:1em;padding:.5%;margin-top:1% !important;margin:0 auto;width:100%;}
.accordion-wrapper:last-child{border-bottom:none !important}
.accordion-wrapper p {line-height: 2.5em;font-size:.9em;}
a.accordion {color:#333;border: none;cursor: pointer;outline: none;text-align: left;transition: 0.8s;width: 100%;font-size:1em}
a.active, a.accordion:hover { color: #777;}
a.accordion:after {content: "\002B";float:right;}
a.active.accordion:after {content: "\2212";}
.details {background-color: #ededed;color: #777;max-height: 0;overflow: hidden;padding: 0 1.5em;transition: max-height 0.2s ease-out;margin-top:1%;}


/* Slider Slick */
.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;}
/* Arrows */
.slick-next{font-size: 0;line-height: 0;position: absolute;top: 50%;display: block;width: 20px;height: 20px;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: transparent;}

.slick-prev{font-size: 0;line-height: 0;position: absolute;top: 50%;display: block;width: 20px;height: 20px;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: transparent;}

.regular2 .slick-next{font-size: 0;line-height: 0;position: absolute;top:-20%;right:10px;display: block;width: 20px;height: 20px;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: transparent;}
.regular2 .slick-prev{font-size: 0;line-height: 0;position: absolute;top:-20%;right:50px;display: block;width: 20px;height: 20px;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: transparent;}

/*.slick-prev:hover, .slick-prev:focus, .slick-next:hover, .slick-next:focus{color: transparent;outline: none;background: transparent;}
.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-size: 20px;line-height: 1;opacity: .75;color: white;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;}*/

.slick-prev{left:-30px;}
[dir='rtl'] .slick-prev{right: -25px;left: auto;}
.slick-prev:before{content: url('/images/Icon/ArrowL.png');}
[dir='rtl'] .slick-prev:before{content: url('/images/Icon/ArrowL.png');}

.slick-next{right:-30px;}
[dir='rtl'] .slick-next{right: auto;left: -25px;}
.slick-next:before{content: url('/images/Icon/ArrowR.png');}
[dir='rtl'] .slick-next:before{content: url('/images/Icon/ArrowR.png');}

.slick-dots{position: absolute;bottom: -25px;display: block;/*width: 100%*/;padding: 0;margin: 0;list-style: none;text-align: center;display:none !important;}
.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: 20px;height: 20px;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{font-size: 6px;line-height: 20px;position: absolute;top: 0;left: 0;width: 20px;height: 20px;content: '•';text-align: center;opacity: .25;color: black;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;}
.slick-dots li.slick-active button:before{opacity:.75;color:black;}

.slider{margin:0 auto;}
.slick-slide{margin:0px 8px;}
.slick-slide img{width:60%;margin-right:auto;margin-left:auto;display:block}
.slick-prev:before,.slick-next:before{color:black;}
.slick-slide{transition: all ease-in-out .3s;opacity:1;}



/*Range Slider*/
.irs {
    position: relative; display: block;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
     -khtml-user-select: none;
       -moz-user-select: none;
        -ms-user-select: none;
            user-select: none;
}
    .irs-line {
        position: relative; display: block;
        overflow: hidden;
        outline: none !important;
    }
        .irs-line-left, .irs-line-mid, .irs-line-right {
            position: absolute; display: block;
            top: 0;
        }
        .irs-line-left {
            left: 0; width: 11%;
        }
        .irs-line-mid {
            left: 9%; width: 82%;
        }
        .irs-line-right {
            right: 0; width: 11%;
        }

    .irs-bar {
        position: absolute; display: block;
        left: 0; width: 0;
    }
        .irs-bar-edge {
            position: absolute; display: block;
            top: 0; left: 0;
        }

    .irs-shadow {
        position: absolute; display: none;
        left: 0; width: 0;
    }

    .irs-slider {
        position: absolute; display: block;
        cursor: default;
        z-index: 1;
    }
        .irs-slider.single {

        }
        .irs-slider.from {

        }
        .irs-slider.to {

        }
        .irs-slider.type_last {
            z-index: 2;
        }

    .irs-min {
        position: absolute; display: block;
        left: 0;
        cursor: default;
    }
    .irs-max {
        position: absolute; display: block;
        right: 0;
        cursor: default;
    }

    .irs-from, .irs-to, .irs-single {
        position: absolute; display: block;
        top: 0; left: 0;
        cursor: default;
        white-space: nowrap;
    }

.irs-grid {
    position: absolute; display: none;
    bottom: 0; left: 0;
    width: 100%; height: 20px;
}
.irs-with-grid .irs-grid {
    display: block;
}
    .irs-grid-pol {
        position: absolute;
        top: 0; left: 0;
        width: 1px; height: 8px;
        background: #000;
    }
    .irs-grid-pol.small {
        height: 4px;
    }
    .irs-grid-text {
        position: absolute;
        bottom: 0; left: 0;
        white-space: nowrap;
        text-align: center;
        font-size: 9px; line-height: 9px;
        padding: 0 3px;
        color: #000;
    }

.irs-disable-mask {
    position: absolute; display: block;
    top: 0; left: -1%;
    width: 102%; height: 100%;
    cursor: default;
    background: rgba(0,0,0,0.0);
    z-index: 2;
}
.lt-ie9 .irs-disable-mask {
    background: #000;
    filter: alpha(opacity=0);
    cursor: not-allowed;
}

.irs-disabled {
    opacity: 0.4;
}


.irs-hidden-input {
    position: absolute !important;
    display: block !important;
    top: 0 !important;
    left: 0 !important;
    width: 0 !important;
    height: 0 !important;
    font-size: 0 !important;
    line-height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    outline: none !important;
    z-index: -9999 !important;
    background: none !important;
    border-style: solid !important;
    border-color: transparent !important;
}


/* Ion.RangeSlider, Simple Skin
// css version 2.0.3
// Â© Denis Ineshin, 2014    https://github.com/IonDen
// Â© guybowden, 2014        https://github.com/guybowden
// ===================================================================================================================*/

/* =====================================================================================================================
// Skin details */

.irs {
    height: 55px;
}
.irs-with-grid {
    height: 75px;
}
.irs-line {
    height: 10px; top: 33px;
    background: #EEE;
    background: linear-gradient(to bottom, #DDD -50%, #FFF 150%); /* W3C */
    border: 1px solid #CCC;
    border-radius: 16px;
    -moz-border-radius: 16px;
}
    .irs-line-left {
        height: 8px;
    }
    .irs-line-mid {
        height: 8px;
    }
    .irs-line-right {
        height: 8px;
    }

.irs-bar {
    height: 10px; top: 33px;
    border-top: 1px solid #8c1001;
    border-bottom: 1px solid #c1131c;
    background: #428bca;
    background: linear-gradient(to top, #c1131c 0%, #8c131c 100%); /* W3C */
}
    .irs-bar-edge {
        height: 10px; top: 33px;
        width: 14px;
        border: 1px solid #8c131c;
        border-right: 0;
        background: #8c131c;
        background: linear-gradient(to top, #8c131c 0%, #c1131c 100%); /* W3C */
        border-radius: 16px 0 0 16px;
        -moz-border-radius: 16px 0 0 16px;
    }

.irs-shadow {
    height: 2px; top: 38px;
    background: #000;
    opacity: 0.3;
    border-radius: 5px;
    -moz-border-radius: 5px;
}
.lt-ie9 .irs-shadow {
    filter: alpha(opacity=30);
}

.irs-slider {
    top: 25px;
    width: 27px; height: 27px;
    border: 1px solid #AAA;
    background: #DDD;
    background: linear-gradient(to bottom, rgba(255,255,255,1) 0%,rgba(220,220,220,1) 20%,rgba(255,255,255,1) 100%); /* W3C */
    border-radius: 27px;
    -moz-border-radius: 27px;
    box-shadow: 1px 1px 3px rgba(0,0,0,0.3);
    cursor: pointer;
}

.irs-slider.state_hover, .irs-slider:hover {
    background: #FFF;
}

.irs-min, .irs-max {
    color: black;
    font-size: 12px; line-height: 1.333;
    text-shadow: none;
    top: 0;
    padding: 1px 5px;
    background: rgba(0,0,0,0.1);
    border-radius: 3px;
    -moz-border-radius: 3px;
}

.lt-ie9 .irs-min, .lt-ie9 .irs-max {
    background: #ccc;
}

.irs-from, .irs-to, .irs-single {
    color: #fff;
    font-size: 14px; line-height: 1.333;
    text-shadow: none;
    padding: 1px 5px;
    background: #8c131c;
    border-radius: 3px;
    -moz-border-radius: 3px;
}
.lt-ie9 .irs-from, .lt-ie9 .irs-to, .lt-ie9 .irs-single {
    background: #999;
}

.irs-grid {
    height: 27px;
}
.irs-grid-pol {
    opacity: 0.5;
    background: #428bca;
}
.irs-grid-pol.small {
    background: #999;
}

.irs-grid-text {
    bottom: 5px;
    color: #99a4ac;
}

.irs-disabled {
}



@import url("https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap");
/* Variables */
:root {
  --primary-color: #646cff;
  --hover-color: #535bf2;
  --background-color: #070707;
  --text-color-white: white;
  --text-color-rest: rgba(255, 255, 255, 0.7);
  --text-color-hover: rgba(255, 255, 255, 0.8);
  --text-color-active: rgba(255, 255, 255, 1);
  --ripple-color: rgba(100, 108, 255, 0.3);
  --spacing-xs: 0.5rem;
  --spacing-sm: 0.75rem;
  --spacing-md: 1rem;
  --spacing-lg: 2rem;
  --transition-duration: 0.25s;
  --transition-timing: cubic-bezier(0.4, 0, 0.2, 1);
  --ripple-duration: 0.7s;
  --control-size: 20px;
  --control-border: 2px;
  --focus-ring-size: 4px;
  --ripple-size: 44px;
  --checkmark-width: 6px;
  --checkmark-height: 12px;
  --radio-dot-size: 12px;
}


.form-controls {
  display: flex;
  align-items: center;
  max-width: 600px;
  min-height: 100%;
  margin: 0 auto;
  padding: var(--spacing-lg);
}
.form-controls form {
  display: flex;
  flex-direction: row;
  justify-content: center;
  width: 100%;
  gap: 124px;
}
@media screen and (max-width: 600px) {
  .form-controls form {
    flex-direction: column;
  }
}

fieldset {
  border: none;
  padding: 0;
  margin: 0;
}
fieldset legend {
  padding: 0;
  margin-bottom: var(--spacing-md);
  font-weight: bolder;
  padding-bottom: 12px;
  border-bottom: 1px solid #282828;
}

/* Shared Input Styles */
.radio .radio-input, .checkbox .checkbox-input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.radio .radio-control, .checkbox .checkbox-control {
  position: relative;
  width: var(--control-size);
  height: var(--control-size);
  min-width: var(--control-size);
  min-height: var(--control-size);
  border: var(--control-border) solid var(--primary-color);
  transition: all var(--transition-duration) var(--transition-timing);
}

/* Checkbox Styles */
.checkbox-group {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md);
}

.checkbox {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  cursor: pointer;margin:5% 0;
}
.checkbox .checkbox-control {
  border-radius: 6px;
}
.checkbox .checkbox-control::before, .checkbox .checkbox-control::after {
  content: "";
  position: absolute;
  transition: transform var(--transition-duration) var(--transition-timing), opacity var(--transition-duration) var(--transition-timing);
  will-change: transform, opacity;
}
.checkbox .checkbox-control::before {
  top: 50%;
  left: 50%;
  width: var(--ripple-size);
  height: var(--ripple-size);
  background-color: var(--ripple-color);
  border-radius: 50%;
  opacity: 0;
  transform: translate(-50%, -50%) scale(0);
}
.checkbox .checkbox-control::after {
  left: 50%;
  top: 45%;
  width: var(--checkmark-width);
  height: var(--checkmark-height);
  border: solid white;
  border-width: 0 2px 2px 0;
  transform: translate(-50%, -50%) rotate(45deg) scale(0);
  opacity: 0;
}
.checkbox .checkbox-input:checked ~ .checkbox-control {
  background-color: var(--primary-color);
  border-color: var(--primary-color);
}
.checkbox .checkbox-input:checked ~ .checkbox-control::before {
  animation: ripple 240ms linear;
}
.checkbox .checkbox-input:checked ~ .checkbox-control::after {
  transform: translate(-50%, -50%) rotate(45deg) scale(1);
  opacity: 1;
}
.checkbox .checkbox-input:focus-visible ~ .checkbox-control {
  box-shadow: 0 0 0 var(--focus-ring-size) rgba(100, 108, 255, 0.3);
}
.checkbox .checkbox-label {
  font-size: 1rem;
  user-select: none;
  color:rgba(0, 0, 0, 0.87);
  transition: color var(--transition-duration) var(--transition-timing);
}
.checkbox .checkbox-input:checked ~ .checkbox-label {
  animation: label-check 0.3s var(--transition-timing);
}

/* Radio Styles */
.radio-group {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md);
}

.radio {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  cursor: pointer;
}
.radio .radio-control {
  border-radius: 50%;
}
.radio .radio-control::before, .radio .radio-control::after {
  content: "";
  position: absolute;
  transition: transform var(--transition-duration) var(--transition-timing), opacity var(--transition-duration) var(--transition-timing);
  will-change: transform, opacity;
}
.radio .radio-control::before {
  top: 50%;
  left: 50%;
  width: var(--ripple-size);
  height: var(--ripple-size);
  background-color: var(--ripple-color);
  border-radius: 50%;
  opacity: 0;
  transform: translate(-50%, -50%) scale(0);
}
.radio .radio-control::after {
  top: 50%;
  left: 50%;
  width: var(--radio-dot-size);
  height: var(--radio-dot-size);
  border-radius: 50%;
  background-color: white;
  transform: translate(-50%, -50%) scale(0);
  opacity: 0;
}
.radio .radio-input:checked ~ .radio-control {
  background-color: var(--primary-color);
  border-color: var(--primary-color);
}
.radio .radio-input:checked ~ .radio-control::before {
  animation: ripple 240ms linear;
}
.radio .radio-input:checked ~ .radio-control::after {
  transform: translate(-50%, -50%) scale(1);
  opacity: 1;
}
.radio .radio-input:focus-visible ~ .radio-control {
  box-shadow: 0 0 0 var(--focus-ring-size) rgba(100, 108, 255, 0.3);
}
.radio .radio-label {
  font-size: 1rem;
  user-select: none;
  color: var(--text-color-rest);
  transition: color var(--transition-duration) var(--transition-timing);
}
.radio .radio-input:checked ~ .radio-label {
  color: var(--text-color-active);
  animation: label-check 0.3s var(--transition-timing);
}

/* Animations */
@keyframes ripple {
  0% {
    transform: translate(-50%, -50%) scale(0.35);
    opacity: 0.8;
  }
  100% {
    transform: translate(-50%, -50%) scale(2);
    opacity: 0;
  }
}
@keyframes label-check {
  0% {
    transform: translateX(0);
    opacity: 0.7;
  }
  40% {
    transform: translateX(2px);
    opacity: 1;
  }
  100% {
    transform: translateX(0);
    opacity: 1;
  }
}