@charset "UTF-8";
@font-face {
    font-family:'XeroSans';/*تعریف یک نام برای فونت*/
    src:url('fonts/XeroSans.eot');/*اکسپلورر 9 به بعد*/
    src:local('XeroSans'),/*بررسی نصب بودن فونت در سیستم کاربر*/
        local('XeroSans'),/*برای برخی از مرورگرها مانند سافاری*/
        url('fonts/XeroSans.eot?#iefix') format('embedded-opentype'),/*هک برای اکسپلورر 8 و ماقبل*/
        url('fonts/XeroSans.woff') format('woff'),/*مرورگر های جدید*/
        url('fonts/XeroSans.ttf') format('truetype'),/*تمام مرورگرها به جزء اکسپلورر*/
        url('fonts/XeroSans.svg#XeroSans') format('svg');/*نسخه های قدیمی سیستم عامل iOS*/
    font-style:normal;
    font-weight:900;
}
@font-face {
    font-family:'Nic';/*تعریف یک نام برای فونت*/
    src:url('fonts/Nic.eot');/*اکسپلورر 9 به بعد*/
    src:local('Nic'),/*بررسی نصب بودن فونت در سیستم کاربر*/
        local('Nic'),/*برای برخی از مرورگرها مانند سافاری*/
        url('fonts/Nic.eot?#iefix') format('embedded-opentype'),/*هک برای اکسپلورر 8 و ماقبل*/
        url('fonts/Nic.woff') format('woff'),/*مرورگر های جدید*/
        url('fonts/Nic.woff2') format('woff2'),
        url('fonts/Nic.ttf') format('truetype');/*تمام مرورگرها به جزء اکسپلورر*/
    font-style:normal;
    font-weight:400;
}
/*
--------------------------------------------------------------------------------------
This set of fonts are used in this project under the license: (7XFM68)
--------------------------------------------------------------------------------------
*/
@font-face {
	font-family: IRANSansX;
	font-style: normal;
	font-weight: 700;
	src: url('fonts/IRANSansX-Bold.woff') format('woff'),   
	url('fonts/IRANSansX-Bold.woff2') format('woff2');	 
}

@font-face {
	font-family: IRANSansX;
	font-style: normal;
	font-weight: 400;
	src: url('fonts/IRANSansX-Regular.woff') format('woff'),   
	url('fonts/IRANSansX-Regular.woff2') format('woff2');	
}
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,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,button{font-family:"XeroSans", sans-serif !important;}
.mm-navbars--bottom a {font-family: "Font Awesome 7 Free","Font Awesome 7 Brands" !important;}
/*-------------Fonts End---------------------------------------*/
/*-------------General Style---------------------------------------*/
* {
	box-sizing: border-box;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	margin: 0;
	padding: 0;
	-webkit-tap-highlight-color: rgba(0,0,0,0);
    -webkit-tap-highlight-color: transparent; /* For some Androids */
	
}
@-o-viewport {
	width: device-width;
}
@-ms-viewport {
	width: device-width;
}
@viewport {
	width: device-width;
}
:root {
    --black: #080808;
    --carbon: #111111;
    --graphite: #181818;
    --kind-black: #151515;

    --gold: #D4AF37;
    --gold-light: #F0C75E;
    --soft-gold: #d4a62a;
    --shadow-gold: #d5aa42;
    --harder-gold: #c9982e;
    --orange-gold: #ff8c00;
    --pure-gold: #ffd700;
    --extra-gold: #e0b74f;
    --real-gold: #d8ad45;
    --gray-gold: #ffd70063;
    --orangish-gold: #b88724;
    --g-gold: #f2d06b;
    --yellow-gold: #f4d47a;
    --brown-gold: #d6a83766;
    --little-brown: #80621f;

    --white: #FFFFFF;
    --text: #E5E5E5;
    --muted: #A7A7A7;
    --kind-gray: #6e759e;
    --soft-gray: #d4a63a26;
    --gray: #ffffff06;
    --navy: #3240ff63;
    --dg-blue: #323eff;

    --border: #292929;
    
    --red: #e5252d;
    --b1: #0B0B0B;
    --b2: #090c15;
    --b3: #171b2d;
    --b4: #0000009c;
    --b5: #202742;
    --b6: #000000;
    --b7: #000000b3;
    --b8: #080a12;
    --b9: #090909;
}

.clearfix::after {
	content: "";
	clear: both;
	display: table;
  }

i {width: auto;}

html,
body {
    max-width: 100%;
    overflow-x: hidden;
}
/*--------------Typography--------------------------------------*/
h1 {font-size:64px; font-size: 4rem;}
h2 {font-size:32px; font-size: 2rem;}
h3 {font-size:16px; font-size: 1rem;}
h4 {font-size:12.8px; font-size: 0.8rem;}
p {font-size:16px; font-size: 1rem;}
ul {list-style: none; margin: 0; padding: 0;}
/*--------------Typography Ends--------------------------------------*/
body {background-color: var(--b1);background-image:linear-gradient(45deg, var(--kind-black) 25%, transparent 25%),linear-gradient(-45deg, var(--kind-black) 25%, transparent 25%),linear-gradient(45deg, transparent 75%, var(--kind-black) 75%),linear-gradient(-45deg, transparent 75%, var(--kind-black) 75%);background-size: 8px 8px;background-position:0 0,0 4px,4px -4px,-4px 0;}
.headercontainer {background: var(--b2); height: 65px; position: relative;}
.headercontainer::after {content: ""; position: absolute; bottom: 0; width: 80%; height: 2px; left: 50%; transform: translateX(-50%);
background: linear-gradient(to right,transparent 0%,var(--gold-light) 15%,var(--gold-light) 85%,transparent 100%);}
.headerlogo {float: right;}
.headerlogo h2 {text-transform: uppercase; padding-right: 20px; text-align: left; line-height: 65px; font-size: 1rem;}
.headerlogo h2 a {text-decoration: none; color: var(--gold); background: white; border-radius: 5px; padding: 0 5px;}
.headeractions {float: left;}
.headericons {display: flex; flex-direction: row; height: 65px; align-items: center;}
.headericons a {text-decoration: none; color: white; position: relative; padding-left: 20px;}
.headericons a:hover {color:var(--kind-gray); transition: color 300ms linear 0s;}
.headericons a b {position: absolute;top: 0;right: -8px;width: 15px;height: 15px;border-radius: 50%;font-size: 9px;display: flex;background: var(--b4);color: white;justify-content: center;align-items: center;font-weight: 900}
.headercontact { margin-left: 20px; position: relative;}
.headercontact::after {position: absolute; content: ''; height: 40px; width: 2px; left: 0; top:0;background: var(--gold-light);}
.headercontact i {color: white; font-size: 1rem; padding: 5px; background-color: black; margin-left: 5px; border-radius: 5px; width: auto;}
.headersearch {margin-left: 20px; }
.headersearch input {background: var(--border); color: white; border: none; border-radius: 10px; padding: 9px 40px; min-width: 200px; box-shadow: 0px 0px 5px 3px var(--gray-gold);}
.headersearch input:focus {outline: none; box-shadow: 0px 0px 5px 5px var(--navy); transition: 200ms ease-in;}
.navcontainer {display: block; width: 100%; height: 60px; background: var(--b2); position: relative;}
.navcontainer ul {line-height: 60px; margin-left: 10%;}
.navcontainer ul > li {color: white; display: inline-block; margin-right: 50px;}
.navcontainer ul > li > a > i {padding: 0 10px 0 0; width: auto;}
.navcontainer ul > li > a::after {content: "";background: var(--dg-blue);display: block;width: 0;height: 2px;left: 0;position: absolute;bottom: 0;z-index: -1;opacity: 0;}
.navcontainer ul > li > a {position: relative;line-height: 60px;background: transparent;text-decoration: none;color: var(--kind-gray);z-index: 1;display: block;}
@keyframes ncolorc {from {color:var(--kind-gray);}to {color:white;}}
@keyframes nshowup {from {opacity: 0; width: 0;}to {opacity: 1; width:100%;}}
.navcontainer ul > li > a:hover {-webkit-animation-name: ncolorc; -moz-animation-name: ncolorc; animation-name: ncolorc;  -webkit-animation-duration: 0.3s; -moz-animation-duration: 0.3s; animation-duration: 0.3s; -webkit-animation-fill-mode: forwards; -moz-animation-fill-mode: forwards; animation-fill-mode: forwards; -webkit-animation-delay: 0.2s; -moz-animation-delay: 0.2s; animation-delay: 0.2s;}
.navcontainer ul > li > a:hover::after {-webkit-animation-name: nshowup; -moz-animation-name: nshowup; animation-name: nshowup; -webkit-animation-duration: 0.5s; -moz-animation-duration: 0.5s; animation-duration: 0.5s; -webkit-animation-fill-mode: forwards; -moz-animation-fill-mode: forwards; animation-fill-mode: forwards; -webkit-animation-delay: 0.3s; -moz-animation-delay: 0.3s; animation-delay: 0.3s;}
.navsubmenu {position: absolute; display: none; min-width: 30%; width: max-content; left: 10%; min-height: 300px; background: var(--b2); border-radius: 0 0 10px 0px; z-index: 10; top: 65px; border-top: 2px solid orange; border-bottom: 2px solid orange; border-radius: 10px;}
.subactive {display: flex; flex-direction: row;}
.navabout {width: 300px; display: flex; flex-direction: column; padding: 0 10px; position: relative;}
.navabout::after {content: ""; position: absolute; width: 2px; height: 95%; top: 50%; transform: translateY(-50%); background: linear-gradient( to bottom, transparent 0%, var(--gold-light) 15%, var(--gold-light) 85%, transparent 100% ); right: 0;}
.navabout img {display: block; padding: 20px 10px; width: 100%; box-shadow: 0 10px 20px 0 black;}
.navabout p {text-align: center; color: white; padding: 10px 0; font-size: 0.8rem;}
.navabout a.navaboutlink {display: block; margin: 10px auto; text-decoration: none; padding: 5px 20px; color: white; width: max-content; border-radius: 10px; background: var(--dg-blue); border: 2px solid transparent; font-size: 0.8rem;}
.navabout a.navaboutlink:hover { background: var(--b3); border: 2px solid var(--dg-blue); transition: 300ms ease-in;}
.navsublink {width: 300px; display: flex; flex-direction: column; padding: 0 10px; position: relative;}
.navsublink::after {content: ""; position: absolute; width: 2px; height: 95%; top: 50%; transform: translateY(-50%); background: linear-gradient( to bottom, transparent 0%, var(--gold-light) 15%, var(--gold-light) 85%, transparent 100% ); right: 0;}
.navsublink a, .navsublink p, .navsublink h3 {display: block; text-decoration: none;}
.navsublink a {background: var(--b2); color: var(--kind-gray); padding: 10px 15px 10px 60px; margin: 10px 0; border-radius: 10px; line-height: 1.5; position: relative;}
.navsublink a::after {position: absolute; font-family: "Font Awesome 7 Free"; content: "\f105"; font-size: 1.5rem; font-weight: 900; right: 10px; top: 50%; transform: translateY(-50%); color: white;}
.navsublink a i {position: absolute; content: ""; font-size: 2rem; left: 10px; top: 50%; transform: translateY(-50%); color: var(--harder-gold); 
background: linear-gradient(135deg, var(--pure-gold), var(--orange-gold));-webkit-background-clip: text;-webkit-text-fill-color: transparent;background-clip: text; width: auto;}
.navsublink h3 {color: white;}
.navsublink p {color:var(--kind-gray); font-size: 0.8rem;}
.navsubmenu div:last-child::after {display: none;}
.navsublink a:hover {background: var(--b5); transition: 300ms ease-in;}
.chslider {height: 800px; width: 100%;}
.chslider .swiper {width: 100%;height: 800px;}
.chslider .swiper-slide img {width: 100%; height: 100%; object-fit: cover; position: relative; overflow: hidden;}
.swoverlay {
	background: linear-gradient(90deg,rgba(0,0,0,.88) 0%,rgba(0,0,0,.45) 48%,rgba(0,0,0,.55) 100%),linear-gradient(0deg,#050505 0%,transparent 35%);
    position: absolute; inset: 0;
}
.swpuzzle {
	opacity: .11;
	background-image: linear-gradient(#fff 1px,transparent 1px),linear-gradient(90deg,#fff 1px,transparent 1px);
	background-size: 80px 80px;
	mask-image: linear-gradient(to bottom,transparent,black 30%,black 75%,transparent);
    position: absolute; inset: 0;
}
.chslider .swiper-slide img {
    transform: scale(1.12);
    animation: zoomOut 7s ease-out forwards;
}

@keyframes zoomOut {
    from {
        transform: scale(1.12);
    }

    to {
        transform: scale(1);
    }
}
.slide-content {position: absolute;left: 20%; right: 20%; top: 50%;transform: translateY(-50%);width: auto;z-index: 2;text-align: left;color: white; text-transform: uppercase;}
.slide-content h2 {font-size: 4rem; text-shadow: 2px 2px 4px var(--b6);}
.slide-content p {font-size: 2rem; text-shadow: 2px 2px 4px var(--b6);}
.secondchslider {width: 100%; padding: 50px 0;}
.secondchslider .swiper {width: 100%;}
.secondchslider .swiper-slide {background-position: center;background-size: cover;width: 300px;height: 300px;box-shadow: 0 0 10px rgba(212, 175, 55, 0.432);}
.secondchslider .swiper-slide a {background-position: center;background-size: cover;width: 300px;height: 300px;text-decoration: none;color: transparent;}
.secondchslider .swiper-slide img {display: block;width: 100%;height: 100%;object-fit: cover;}
.docsearch {width: 100%; background: black; min-height: 150px; padding: 32px;}
.docsearchform {color: white; text-transform: uppercase;}
.docsearchform h2 {color: var(--gold-light); font-size: 1rem; line-height: 1;}
.docsearchform h3 {font-size: 0.7rem;}
.docsearch input, .docsearch select {
	width: 25%;
	background: var(--black);
	border: 1px solid var(--border);
	color: #ddd;
	padding: 14px;
	margin: 10px 50px 10px 0;
	outline: none;
    display: inline-block;
}
.docsearch select option {
	background: var(--black);
}
.docsearch button { padding: 10px 20px; margin: 10px; background: linear-gradient(135deg, var(--pure-gold), var(--orange-gold)); display: inline-block; border-radius: 10px; border: none;}
.docsearch button:hover {transform: scale(1.1,1); background: white; transition: 300ms ease-in;}
.sectionseperation {width: 100%; display: block; height: 1px; background: var(--brown-gold);}
.sectiontitle {width: 100%; height: 50px; background: transparent; line-height: 50px; text-align: center;}
.sectiontitle h3 {text-align: center; color: white; letter-spacing: 10px; text-transform: uppercase; position: relative; padding: 0 100px; display: inline-block;}
.sectiontitle h3::after {content: ""; position: absolute; width: 80px; left: 0; top: 50%; height: 2px; background: linear-gradient(135deg,var(--g-gold),var(--orangish-gold)); transform: translateY(-50%);}
.sectiontitle h3::before {content: ""; position: absolute; width: 80px; right: 0; top: 50%; height: 2px; background: linear-gradient(270deg,var(--g-gold),var(--orangish-gold)); transform: translateY(-50%);}
.eventcontainer {width: 100%; margin: 20px 0 20px 0; text-align: center;}
.eventbox {margin: 10px 20px; display: inline-block;}
.event-card {position: relative; width: 350px; height: 250px; overflow: hidden; background: var(--black); border: 1px solid rgba(212, 166, 58, 0.55); border-radius: 12px; box-shadow: 0 15px 35px rgba(0, 0, 0, 0.55), inset 0 0 30px rgba(212, 166, 58, 0.04); transition: transform 0.4s ease, box-shadow 0.4s ease;}
.event-card::before{content:"";position:absolute;inset:0;background:linear-gradient(45deg,var(--gray) 25%,transparent 25%,transparent 75%,var(--gray) 75%),linear-gradient(45deg,var(--gray) 25%,transparent 25%,transparent 75%,var(--gray) 75%);background-size:6px 6px;background-position:0 0,3px 3px;opacity:.7;z-index:0}
.event-card:hover{transform:translateY(-7px);box-shadow:0 25px 45px var(--b7), 0 0 25px var(--soft-gray)}
.event-image{position:absolute;top:0;right:0;width:62%;height:100%;z-index:1;overflow:hidden}
.event-image img{width:100%;height:100%;object-fit:cover;transition:transform .7s ease}
.event-card:hover .event-image img{transform:scale(1.08)}
.event-overlay{position:absolute;inset:0;z-index:2;background:linear-gradient(90deg,var(--black) 0%,#080808f2 28%,#08080873 58%,#0808080d 100%)}
.event-label{position:absolute;top:0;left:0;z-index:5;height:28px;padding:0 15px;display:flex;align-items:center;gap:7px;background:linear-gradient(135deg,var(--yellow-gold),var(--harder-gold));color:var(--black);font-size:10px;font-weight:800;letter-spacing:1px;clip-path:polygon(0 0,100% 0,88% 100%,0 100%)}
.event-label i{font-size:11px}
.event-content{position:relative;z-index:4;width:62%;height:100%;padding:48px 15px 15px;box-sizing:border-box}
.event-brand{color:var(--shadow-gold);font-size:7px;letter-spacing:2px;font-weight:700;margin-bottom:5px}
.event-content h2{margin:0;color:white;font-size:25px;line-height:.95;font-weight:900;font-style:italic;letter-spacing:-.5px}
.event-content h2 span{display:block;color:var(--real-gold);font-size:17px;margin-top:4px;letter-spacing:1px}
.event-info{margin-top:13px;display:flex;flex-direction:column;gap:7px}
.event-info div{display:flex;align-items:center;gap:7px;color:#ddd;font-size:8px;letter-spacing:.5px}
.event-info i{width:13px;color:var(--shadow-gold);font-size:11px;text-align:center}
.event-button{position:absolute;bottom:15px;left:15px;display:flex;align-items:center;justify-content:space-between;width:130px;height:30px;padding:0 8px 0 12px;box-sizing:border-box;background:linear-gradient(135deg,var(--g-gold),var(--orangish-gold));color:var(--black);text-decoration:none;font-size:8px;font-weight:900;letter-spacing:.8px;border-radius:4px;transition:all .3s ease}
.event-button i{display:flex;align-items:center;justify-content:center;width:22px;height:22px;background: var(--b9);color:var(--extra-gold);border-radius:3px;transition:transform .3s ease}
.event-button:hover{box-shadow:0 0 18px var(--brown-gold);transform:translateY(-2px)}
.event-button:hover i{transform:translateX(3px)}
.aboutuscontainer {width: 100%; height: 350px; display: flex; flex-direction: row;}
.aboutusimg, .aboutusimg img {height: 350px; position: relative;}
.aboutus-frame {
	position: absolute;
	width: 75%;
	height: 80%;
	border: 1px solid #d4af3755;
	transform: rotate(-5deg);
    left: 50px;
}
.aboutvertical-label {
	position: absolute;
	right: 0;
	top: 30%;
	writing-mode: vertical-rl;
	color: #555;
	font-size: 8px;
	letter-spacing: 3px;
}
.aboutusimg img {padding: 5px 0;}
.aboutusdescription {display: flex; flex-direction: column; width: 300px; height: 350px;}
.aboutusdescription h3{color: var(--muted); padding: 10px 0 10px 20px; font-size: 1.5rem; line-height: 1;}
.aboutusdescription h2 {color: var(--pure-gold); padding: 0px 0 10px 20px; font-size: 2rem; line-height: 1;}
.aboutusdescription h2 span{color: white;}
.aboutusdescription p{color: var(--muted); padding: 0px 0 10px 20px; word-wrap: break-word;}
.aboutusdescription a{color: black; margin: 0px 0 10px 20px; text-decoration: none; background: linear-gradient(135deg,var(--g-gold),var(--orangish-gold)); padding: 5px 80px 5px 10px; border-radius: 5px; width: max-content; text-transform: uppercase; font-size: 0.8rem; position: relative;}
.aboutusdescription a:hover {color: var(--shadow-gold); border: 2px solid var(--shadow-gold); background: transparent; transform: scale(1.1,1.1); transition: 300ms ease-in; }
.aboutusdescription a i { position: absolute; padding: 8px 10px; background: black; color: var(--shadow-gold); font-size: 0.7rem; right: 10px; border-radius: 5px; top: 50%; transform: translateY(-50%); width: auto;}
.aboutusmarks {display: flex; flex-direction: column; text-align: center; width: 220px; margin: 0 5px 0 25px; position: relative;}
.aboutusmarks::after {content: ""; position: absolute; width: 2px; height: 95%; top: 50%; transform: translateY(-50%); background: linear-gradient( to bottom, transparent 0%, var(--gold-light) 15%, var(--gold-light) 85%, transparent 100% ); left: -15px;}
.aboutusmarks div {color: white; margin: 10px 0;}
.aboutusmarks div i {font-size: 5rem; color: tan; padding-top: 10px; width: auto;}
.aboutusmarks h3 {color: var(--pure-gold); font-size: 2rem; line-height: 1;}
.aboutusmarks p {color: var(--muted); padding: 10px 0 0 0;}
.mapcontactcontainer {width: 100%; display: flex; flex-direction: row; max-height: 430px; align-items: center;}
.sectionseperationshadow {box-shadow:  0px 5px 100px 10px gold;}
#map {width: 60%; height: 400px; margin: 15px; border-radius: 15px;}
.map-popup {background: var(--b8);color: white;padding: 10px;font-family: Arial, sans-serif;border: 1px solid var(--soft-gold);}
.map-popup strong {color: var(--soft-gold);letter-spacing: 2px;}
.mapboxgl-popup-close-button {background: wheat !important;}
.mapboxgl-popup-content {background: black !important;}
.mapboxgl-ctrl-attrib {display: none !important;}
.contactcard {width: 40%; display: flex; justify-content: center;}
.contactcard div {width: 90%; background: black; padding: 10px; border-radius: 10px; border: 1px solid var(--little-brown); box-shadow: 0 0 15px rgba(212, 166, 42, 0.08);}
.contactcard p {color: var(--muted); padding: 5px 0 5px 15px;}
.contactcard h3 {color: white; padding: 5px 0 5px 15px; font-size: 2rem; text-transform: uppercase; letter-spacing: 5px;}
.contactcard p i {padding-right: 15px; color: var(--kind-gray); width: auto;}
footer {width: 100%; background: black; display: flex; flex-direction: row; justify-content:space-between;}
.footerlogo {width: 300px;}
.footerlogo img {padding: 10px 10px; max-width: 300px;}
.footerlinks {width: 15%; padding-top: 50px;}
.footerlinks h3 {font-size: 1rem; letter-spacing: 10px; text-transform: uppercase; color: white; margin-bottom: 15px;}
.footerlinks a {display: block;font-size: 1rem;color: var(--kind-gray);width: 100%;text-decoration: none;word-wrap: break-word;max-width: max-content;line-height: 2;}
.footerlinks a i {color: var(--soft-gold); margin-right: 10px; font-size: 1.2rem; width: auto;}
.footerlinks a:hover {color: white; -webkit-transition: color 300ms ease; -moz-transition: color 300ms ease; transition: color 300ms ease;}
.footerlinks a:hover i {margin-right: 20px; -webkit-transition: margin 300ms ease; -moz-transition: margin 300ms ease; transition: margin 300ms ease; width: auto;}
.footersocial {width: 25%; padding-top: 50px;}
.footersocial h3 {font-size: 1rem; letter-spacing: 10px; text-transform: uppercase; color: white;}
.footersocial > ul {display: block; margin: 30px 0 0 0; width: 100%;}
.footersocial > ul li {display: block; width: 90%; margin-bottom: 4px;}
.footersocial > ul li a {
	background: #092350;
	border-radius: 3px;
	display: block;
	padding: 10px 15px 10px 45px;
	position: relative;
	font-size: 13px;
	text-decoration: none;
	color:#6e759e;
}
.footersocial > ul li a::after {
	content: "";
	background: var(--b2);
	border-radius: 3px;
	display: block;
	height: calc(100% - 10px);
	width: 30px;
	position: absolute;
	left: 4px;
	top: 4px;
	font-family: "Font Awesome 7 Brands";
	font-size: 16px;
	font-weight: 400;
	text-align: center;
	line-height: 1.9;
}
.footersocial > ul li#ftx a::after {
	content: "\e61b";
	color: var(--gold);
}
.footersocial > ul li#ftinstagram a::after {
	content: "\f16d";
	color: var(--gold);
}
.footersocial > ul li#ftwhatsapp a::after {
	content: "\f232";
	color: var(--gold);
}
.footersocial > ul li a span {
	display: block;
	width: 100%;
	text-overflow: ellipsis;
	-o-text-overflow: ellipsis;
	-webkit-text-overflow: ellipsis;
	white-space: nowrap;
	overflow: hidden;
	font-size: 13px;
	letter-spacing: 1px;
}
.footersocial > ul li a:hover {background: #21273a; -webkit-transition: all 300ms ease; -moz-transition: all 300ms ease; transition: all 300ms ease;}
.footersocial > ul li a:hover span {color: white; -webkit-transition: all 300ms ease; -moz-transition: all 300ms ease; transition: all 300ms ease;}

.copyright {display: block; min-height: 40px; height: auto; width: 100%; margin: 0 auto; background: linear-gradient( to right, transparent 0%, #092350 15%, black 85%, transparent 100% ); font-size: 14px;}
.copyright a {color: white; text-decoration: none;}
.copyright a:hover {color: #73d6eb;}
.copyright p {color: var(--kind-gray); line-height: 40px; letter-spacing: 5px; text-align: center;}
.copyright i {-webkit-animation:heartbeat 1s infinite; -moz-animation:heartbeat 1s infinite; animation:heartbeat 1s infinite; color: var(--red); margin: 0 4px 0 2px; width: auto;}
@keyframes heartbeat{0%{transform:scale( .75 );}20%{transform:scale( 1 );}40%{transform:scale( .75 );}60%{transform:scale( 1 );}80%{transform:scale( .75 );}100%{transform:scale( .75 );}}

/* ------------------------- Doc page --------------------*/
.docsendsection { background: var(--b3); padding: 50px 5%;}
.docsendsection form {border: 1px solid #ffffff12; padding: 20px 20px;}
.docsendsection form h2 {color: white; line-height: 1;}
.docsendsection form h3 {color: var(--kind-gray); margin: 0 0 20px 0;}
.docsendsection form h4 {color: white; margin: 20px 5px;}
.docsendinput p {color: white; padding: 5px 10px;}
.docsendinput input  {
	width: 50%;
	background: var(--black);
	border: 1px solid var(--border);
	color: #ddd;
	padding: 14px;
	margin: 10px 0;
	outline: none;
	display: inline-block;
}
.docsendsection form button {border: 0; background: linear-gradient(135deg,var(--g-gold),var(--orangish-gold)); color: black; padding: 10px 80px 10px 10px; margin: 50px 0 10px; font-size: 1.2rem; border-radius: 10px; position: relative;}
.docsendsection form button i {
	position: absolute;
	padding: 8px 10px;
	background: black;
	color: var(--shadow-gold);
	font-size: 0.7rem;
	right: 10px;
	border-radius: 5px;
	top: 50%;
	transform: translateY(-50%);
	width: auto;
}
.docsendsection form button:hover {color: black; background: white; transition: 300ms ease-in-out;}
.upload-field {
    width: 100%;
}

.upload-field input[type="file"] {
    display: none;
}

/* Upload box */

.upload-box {
    position: relative;

    display: flex;
    align-items: center;
    gap: 20px;

    width: 100%;
    min-height: 120px;

    padding: 20px 25px;

    box-sizing: border-box;

    border: 1px dashed rgba(201, 163, 78, .5);
    border-radius: 10px;

    background:
        linear-gradient(
            135deg,
            rgba(255,255,255,.025),
            rgba(201,163,78,.025)
        );

    cursor: pointer;

    transition: .35s ease;
}


/* Gold glow on hover */

.upload-box:hover {
    border-color: #c9a34e;

    background:
        linear-gradient(
            135deg,
            rgba(201,163,78,.08),
            rgba(255,255,255,.025)
        );

    box-shadow:
        0 0 25px rgba(201,163,78,.08);
}


/* Icon */

.upload-icon {
    width: 55px;
    height: 55px;

    flex-shrink: 0;

    display: flex;
    align-items: center;
    justify-content: center;

    border: 1px solid rgba(201,163,78,.45);
    border-radius: 50%;

    color: #c9a34e;

    font-size: 20px;

    transition: .35s ease;
}

.upload-box:hover .upload-icon {
    transform: translateY(-3px);

    background: rgba(201,163,78,.08);

    box-shadow:
        0 0 20px rgba(201,163,78,.12);
}


/* Text */

.upload-text {
    display: flex;
    flex-direction: column;

    gap: 5px;
}

.upload-text strong {
    color: #fff;

    font-size: 14px;
    font-weight: 500;
}

.upload-text span {
    color: #888;

    font-size: 11px;
}

.upload-text span b {
    color: #c9a34e;
    font-weight: 400;
}

.upload-text small {
    color: #555;

    font-size: 9px;
}


/* File preview */

.file-preview {
    display: none;

    align-items: center;
    gap: 12px;

    margin-top: 10px;

    padding: 10px 14px;

    border: 1px solid rgba(201,163,78,.25);
    border-radius: 7px;

    background: #101010;

    color: #aaa;

    font-size: 11px;
}

.file-preview.active {
    display: flex;
}

.file-preview i {
    color: #c9a34e;
}
.file-preview img {
    width: 55px;
    height: 55px;

    object-fit: cover;

    border-radius: 6px;
}

.file-preview div {
    display: flex;
    flex-direction: column;
    gap: 4px;

    flex: 1;
}

.file-preview strong {
    color: #ddd;
    font-size: 11px;
    font-weight: 400;
}

.file-preview span {
    color: #666;
    font-size: 9px;
}

.file-preview button {
    border: 0;
    background: transparent;

    color: #666;

    cursor: pointer;

    transition: .3s;
}

.file-preview button:hover {
    color: #c9a34e;
}





/* ========================================
   LARGE DESKTOP / LAPTOP
   1200px - 1399px
======================================== */
.mobilenavcontainer {display: none;}
@media (max-width: 1490px) {
footer {padding: 0 0 30px;}
}
@media screen and (max-width: 1399px) {
.aboutuscontainer {flex-wrap: wrap; justify-content: center; height: auto;}
.aboutusimg {width: auto; min-width: 40%;}
.aboutusdescription {width: auto; min-width: 40%;}
.aboutusmarks {width: calc(25% - 30px); height: 350px;}
footer {padding: 0 0 30px;}
}
/* Desktop */
@media (max-width: 1199px) {
header {display: none;}
.navcontainer {display: none;}
.mobilenavcontainer {
        display: flex;
        width: 100%;
        height: 50px;
        background: var(--b3);
        align-items: center;
        padding-left: 15px;
        position: relative;
        z-index: 100;
    }

    .mobilenavcontainer a {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        height: 40px;
        padding: 0 15px;
        text-decoration: none;
        color: white;
        font-size: 1rem;
        background: var(--b2);
        border: 1px solid var(--gold);
        border-radius: 5px;
        transition: all 300ms ease;
    }

    .mobilenavcontainer a:hover {
        color: var(--gold-light);
        border-color: var(--gold-light);
        box-shadow: 0 0 10px rgba(212, 175, 55, 0.3);
    }

    .mobilenavcontainer a i {
        width: auto;
    }
.aboutusimg {width: 50%; min-width: initial;}
.aboutus-frame {width: 75%; height: 75%; left: 20px;}
.aboutusdescription {width: 50%; min-width: initial;}
.aboutusmarks {width: calc(50% - 30px); height: 350px;}
footer {justify-content: space-around; flex-wrap: wrap;}
footer div:nth-child(1), footer div:nth-child(2), footer div:nth-child(4) {padding-left: 50px;}
.footerlogo {width: 100%; display:flex ; justify-content: left;}
.footerlinks , .footersocial {width: 50%; }
}

/* Tablet */
@media (max-width: 991px) {

}
/* Mobile */
@media (max-width: 767px) {
.slide-content h2 {font-size: 2rem;}
.slide-content p {font-size: 1rem;}
.docsearch input, .docsearch select {width: calc(100% - 50px);}
.aboutusimg {width: auto; max-width: 50%;}
.aboutusimg img {height: auto; max-width: 100%;}
.mapcontactcontainer {max-height: initial; height: auto; flex-direction: column;}
.contactcard {margin: 15px 0 15px 0; width: 90%;}
#map {width: 90%; margin: 15px 0 0 0;}
footer {justify-content: initial; flex-wrap: initial; flex-direction: column;}
footer div:nth-child(1), footer div:nth-child(2), footer div:nth-child(3), footer div:nth-child(4), footer div:nth-child(5) {padding-left: 40px;}
.footerlinks, .footersocial , .footerlogo {width: 100%;}

}

/* Small mobile */
@media (max-width: 479px) {
.slide-content {top: initial; transform: initial; left: 5%; bottom: 15%; right: initial;}
.sectiontitle h3 {font-size: 0.8rem; letter-spacing: 5px;}
.eventbox {margin: 10px 0;}
.event-card {width: 280px;}
.contactcard {width: 100%;}
#map {width: 95%;}
.aboutusimg {max-width: initial; width: 90%; max-height: 350px; height: auto; border: 2px solid var(--pure-gold); border-radius: 25px; margin: 10px 0 0;}
.aboutusimg img {max-height: 350px;}
.aboutus-frame {width: 75%; height: 75%; top: 50px;}
.aboutusdescription {width: 100%;}
.aboutusmarks {width: auto; border: 2px solid var(--orange-gold); border-radius: 15px; margin: 0 5px 10px 25px; height: 300px;}
.copyright p {font-size: 0.8rem;}

}