@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

@font-face {
	font-family: Vazirmatn;
	src: url('../font/Vazirmatn-Light.woff2') format('woff2');
	font-weight: 300;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: Vazirmatn;
	src: url('../font/Vazirmatn-Regular.woff2') format('woff2');
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: Vazirmatn;
	src: url('../font/Vazirmatn-Bold.woff2') format('woff2');
	font-weight: 700;
	font-style: normal;
	font-display: swap;
} 
html {
	scrollbar-color: #555 transparent;
	scrollbar-width: thin;
	font-family: Vazirmatn !important;
}
input,
.btn {
	width: 100%;
	padding: 12px;
	border: none;
	border-radius: 4px;
	margin: 5px 0;
	opacity: 0.85;
	display: inline-block;
	font-size: 17px;
	line-height: 20px;
	text-decoration: none;
}

input:hover,
.btn:hover {
	opacity: 1;
}

.fb {
	background-color: #3b5998;
	color: white;
}

.twitter {
	background-color: #55acee;
	color: white;
}

.google {
	background-color: #dd4b39;
	color: white;
}

input[type='submit'] {
	background-color: #04aa6d;
	color: white;
	cursor: pointer;
}

.col {
	width: 50%;
	margin: auto;
	padding: 0 50px;
	margin-top: 6px;
}

.row:after {
	content: '';
	display: table;
	clear: both;
}

:root {
	--font-family:'Vazirmatn',IRANYekan,sans-serif;
	--primary-color: #006c77;
	--selected-color: #aa3551;
	--second-primary-color: #f1f1f1;
	--bg-color: #fff;
	--counteiner-bg-color-firstLook: #fff;
	--counteiner-bg-color: #fff;
	--counteiner-bg-color-bc: #839377;
	--font-primary-color: #336da7;
	--font-body-color: #0d2e6e;
	--svg-color: #2f5470;
	--trash-svg: #dd4b39;

	--bg-colorD-card1: #e8f0fe;
	--bg-colorD-card2: #afcbfb;
	--bg-colorD-card3: #1a73e8;


	--bg-tahrir1-card: #e9f4eb;
	--bg-tahrir2-card: #81c995;
	--bg-tahrir3-card: #137333;

	--bg-soft1-card: #fdf7e3;
	--bg-soft2-card: #fee988;
	--bg-soft3-card: #fbbc04;
	
	--bg-staple-card: #f7dce0;
	--bg-wired-card: #e8f5e9;
	--bg-shiraze-card: #dcf7f7;
	--bg-booklet-card: #eef7dc;
	--bg-noBinding-card: #e5dcf7;

	--font-staple-card: #a76b74;
	--font-wired-card: #137333;
	--font-shiraze-card: #189c9c;
	--font-booklet-card: #617a2d;
	--font-noBinding-card:#8573a7;
	
	--SecondBg-staple-card: #f6b5bf;
	--SecondBg-wired-card: #7db38d;
	--SecondBg-shiraze-card: #8fdbdb;
	--SecondBg-booklet-card: #97a778;
	--SecondBg-noBinding-card: #b7acce;

	--thirdBg-staple-card: #f1cdd3;
	--thirdBg-wired-card: #bbe2c6;
	--thirdBg-shiraze-card: #a1c7c7;
	--thirdBg-booklet-card: #b5c09e;
	--thirdBg-noBinding-card: #d2c7e9;

	--primary-color: #c92d2d;
	--secondary-color: #f7e4d9;
	--text-color: #333;
	--border-radius: 10px;
	--font-size: 14px;
	--box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);

	--primary: #ff6b6b;  /* قرمز ملایم */
	--secondary: #ff9e9e;  /* صورتی */
	--light: #fff5f5;  /* سفید صورتی */
	--text: #4a4a4a;
	--circle-size: min(35vw, 220px);


	--bg: #ffffff;
	--muted-bg: #f2f4f5;
	--card-bg: #f5f7f8;
	--text: #111;
	--muted-text: #6b6f73;
	--accent: #ef4444; /* قرمز برای نوتیف */
	--soft: #e9ecef;
	--pill-bg: #eef0f1;

	--color-app-background-rgb: 242,242,242;
	--color-app-background-mid-dark: #fafafa;
	--color-app-background-mid-dark-rgb: 250,250,250;
	--color-app-background-dark: #f5f5f5;
	--color-app-background-dark-rgb: 245,245,245;
	--color-transparent: transparent;
	--color-transparent-rgb: 255,255,255;
	--color-ai-300: #2586ff;
	--color-ai-300-rgb: 37,134,255;
	--color-ai-400: #8f4aec;
	--color-ai-400-rgb: 143,74,236;
	--color-ai-500: #7f53ef;
	--color-ai-500-rgb: 127,83,239;
	--color-ai-700: #6000d9;
	--color-ai-700-rgb: 96,0,217;
	--color-ai-background: #ecedff;
	--color-ai-background-rgb: 236,237,255;
	--color-neutral-100: #f0f0f1;
	--color-neutral-100-rgb: 240,240,241;
	--color-neutral-200: #e0e0e2;
	--color-neutral-200-rgb: 224,224,226;
	--color-neutral-300: #c0c2c5;
	--color-neutral-300-rgb: 192,194,197;
	--color-neutral-400: #a1a3a8;
	--color-neutral-400-rgb: 161,163,168;
	--color-neutral-500: #81858b;
	--color-neutral-500-rgb: 129,133,139;
	--color-neutral-600: #62666d;
	--color-neutral-600-rgb: 98,102,109;
	--color-neutral-650: #424242;
	--color-neutral-650-rgb: 66,66,66;
	--color-neutral-700: #3f4064;
	--color-neutral-700-rgb: 63,64,100;
	--color-neutral-800: #23254e;
	--color-neutral-800-rgb: 35,37,78;
	--color-neutral-850: #212121;
	--color-neutral-850-rgb: 33,33,33;
	--color-neutral-900: #0c0c0c;
	--color-neutral-900-rgb: 12,12,12;
	--color-neutral-000: #fff;
	--color-neutral-000-rgb: 255,255,255;
	--color-dark-neutral-100: #323641;
	--color-dark-neutral-100-rgb: 50,54,65;
	--color-dark-neutral-200: #424650;
	--color-dark-neutral-200-rgb: 66,70,80;
	--color-dark-neutral-300: #525660;
	--color-dark-neutral-300-rgb: 82,86,96;
	--color-dark-neutral-400: #646770;
	--color-dark-neutral-400-rgb: 100,103,112;
	--color-dark-neutral-500: #767981;
	--color-dark-neutral-500-rgb: 118,121,129;
	--color-dark-neutral-600: #94969c;
	--color-dark-neutral-600-rgb: 148,150,156;
	--color-dark-neutral-700: #c2c3c7;
	--color-dark-neutral-700-rgb: 194,195,199;
	--color-dark-neutral-800: #fff;
	--color-dark-neutral-800-rgb: 255,255,255;
	--color-dark-neutral-900: #fff;
	--color-dark-neutral-900-rgb: 255,255,255;
	--color-dark-neutral-000: #222732;
	--color-dark-neutral-000-rgb: 34,39,50;
	--color-dark-brand-primary: #e6123d;
	--color-dark-brand-primary-rgb: 230,18,61;
	--color-dark-app-background: #0a101b;
	--color-dark-app-background-rgb: 10,16,27;
	--color-white: #fff;
	--color-white-rgb: 255,255,255;
	--color-black: #0c0c0c;
	--color-black-rgb: 12,12,12;
	--color-primary-300: #f37a8a;
	--color-primary-300-rgb: 243,122,138;
	--color-primary-500: #ef4056;
	--color-primary-500-rgb: 239,64,86;
	--color-primary-700: #ef394e;
	--color-primary-700-rgb: 239,57,78;
	--color-secondary-100: #e6f4f7;
	--color-secondary-100-rgb: 230,244,247;
	--color-secondary-500: #19bfd3;
	--color-secondary-500-rgb: 25,191,211;
	--color-secondary-700: #008eb2;
	--color-secondary-700-rgb: 0,142,178;
	--color-hint-object-neutral: #81858b;
	--color-hint-object-neutral-rgb: 129,133,139;
	--color-hint-object-error: #d32f2f;
	--color-hint-object-error-rgb: 211,47,47;
	--color-hint-object-success: #4caf50;
	--color-hint-object-success-rgb: 76,175,80;
	--color-hint-object-caution: #f9a825;
	--color-hint-object-caution-rgb: 249,168,37;
	--color-hint-text-neutral: #62666d;
	--color-hint-text-neutral-rgb: 98,102,109;
	--color-hint-text-error: #b2001a;
	--color-hint-text-error-rgb: 178,0,26;
	--color-hint-text-success: #2e7b32;
	--color-hint-text-success-rgb: 46,123,50;
	--color-hint-text-caution: #f57f17;
	--color-hint-text-caution-rgb: 245,127,23;
	--color-button-primary: #ef4056;
	--color-button-primary-rgb: 239,64,86;
	--color-button-secondary: #0062da;
	--color-button-secondary-rgb: 25,191,211;
	--color-button-white: #fff;
	--color-button-white-rgb: 255,255,255;
	--color-button-black: #0c0c0c;
	--color-button-black-rgb: 12,12,12;
	--color-button-disable: #e0e0e2;
	--color-button-disable-rgb: 224,224,226;
	--color-button-fresh: #05ba58;
	--color-button-fresh-rgb: 5,186,88;
	--color-button-text-primary: #fff;
	--color-button-text-primary-rgb: 255,255,255;
	--color-button-text-secondary: #fff;
	--color-button-text-secondary-rgb: 255,255,255;
	--color-button-text-white: #0c0c0c;
	--color-button-text-white-rgb: 12,12,12;
	--color-button-text-black: #fff;
	--color-button-text-black-rgb: 255,255,255;
	--color-button-text-fresh: #fff;
	--color-button-text-fresh-rgb: 255,255,255;
	--color-icon-ai: #7f53ef;
	--color-icon-ai-rgb: 127,83,239;
	--color-icon-primary: #ef4056;
	--color-icon-primary-rgb: 239,64,86;
	--color-icon-secondary: #19bfd3;
	--color-icon-secondary-rgb: 25,191,211;
	--color-icon-white: #fff;
	--color-icon-white-rgb: 255,255,255;
	--color-icon-black: #0c0c0c;
	--color-icon-black-rgb: 12,12,12;
	--color-icon-disable: #e0e0e2;
	--color-icon-disable-rgb: 224,224,226;
	--color-icon-low-emphasis: #a1a3a8;
	--color-icon-low-emphasis-rgb: 161,163,168;
	--color-icon-high-emphasis: #424750;
	--color-icon-high-emphasis-rgb: 66,71,80;
	--color-icon-success: #4caf50;
	--color-icon-success-rgb: 76,175,80;
	--color-icon-warning: #f9a825;
	--color-icon-warning-rgb: 249,168,37;
	--color-icon-neutral-hint: #81858b;
	--color-icon-neutral-hint-rgb: 129,133,139;
	--color-icon-rating-0-2: #f9bc00;
	--color-icon-rating-0-2-rgb: 249,188,0;
	--color-icon-rating-2-3: #b1b64d;
	--color-icon-rating-2-3-rgb: 177,182,77;
	--color-icon-rating-3-4: #65aa57;
	--color-icon-rating-3-4-rgb: 101,170,87;
	--color-icon-rating-4-5: #00a049;
	--color-icon-rating-4-5-rgb: 0,160,73;
	--color-icon-error: #d32f2f;
	--color-icon-error-rgb: 211,47,47;
	--color-fresh-300: #05ba58;
	--color-fresh-300-rgb: 5,186,88;
	--color-fresh-500: #05ba58;
	--color-fresh-500-rgb: 5,186,88;
	--color-fresh-700: #029a49;
	--color-fresh-700-rgb: 2,154,73;
	--color-plus-50: #fff7fe;
	--color-plus-50-rgb: 255,247,254;
	--color-plus-100: #ffe8ff;
	--color-plus-100-rgb: 255,232,255;
	--color-plus-150: #e79ce0;
	--color-plus-150-rgb: 231,156,224;
	--color-plus-300: #d54ec8;
	--color-plus-300-rgb: 213,78,200;
	--color-plus-500: #b12ba4;
	--color-plus-500-rgb: 177,43,164;
	--color-plus-700: #941b80;
	--color-plus-700-rgb: 148,27,128;
	--color-plus-primary: #a63489;
	--color-plus-primary-rgb: 166,52,137;
	--color-plus-neutral: #f6f5fe;
	--color-plus-neutral-rgb: 246,245,254;
	--color-blue-300: #9ee3f0;
	--color-blue-300-rgb: 158,227,240;
	--color-blue-500: #87d3e1;
	--color-blue-500-rgb: 135,211,225;
	--color-blue-700: #00bfd6;
	--color-blue-700-rgb: 0,191,214;
	--color-blue-primary: #19bfd3;
	--color-blue-primary-rgb: 25,191,211;
	--color-green-300: #39ae00;
	--color-green-300-rgb: 57,174,0;
	--color-green-500: #6bb927;
	--color-green-500-rgb: 107,185,39;
	--color-green-700: #9dc44d;
	--color-green-700-rgb: 157,196,77;
	--color-digipay: #0040ff;
	--color-digipay-rgb: 0,64,255;
	--color-fidibo: #52b9c7;
	--color-fidibo-rgb: 82,185,199;
	--color-pindo-primary: #fbb600;
	--color-pindo-primary-rgb: 251,182,0;
	--color-pindo-touchpoint: #28367f;
	--color-pindo-touchpoint-rgb: 40,54,127;
	--color-digikalajet-secondary: #ff6200;
	--color-digikalajet-secondary-rgb: 255,98,0;
	--color-delivery-post: #feb900;
	--color-delivery-post-rgb: 254,185,0;
	--color-delivery-ship-by-seller: #d86b00;
	--color-delivery-ship-by-seller-rgb: 216,107,0;
	--color-delivery-non-inventory: #922fd3;
	--color-delivery-non-inventory-rgb: 146,47,211;
	--color-delivery-jet: #a63489;
	--color-delivery-jet-rgb: 166,52,137;
	--color-delivery-jet-expansion: #1028ff;
	--color-delivery-jet-expansion-rgb: 16,40,255;
	--color-delivery-express: #e6123d;
	--color-delivery-express-rgb: 230,18,61;
	--color-seller-official: #0081b9;
	--color-seller-official-rgb: 0,129,185;
	--color-boomi-500: #2bb5b2;
	--color-boomi-500-rgb: 43,181,178;
	--color-ad: #ff009c;
	--color-ad-rgb: 255,0,156;
	--color-electronic-300: #6763d9;
	--color-electronic-300-rgb: 103,99,217;
	--color-electronic-500: #5c51bf;
	--color-electronic-500-rgb: 92,81,191;
	--color-fashion-300: #ffa368;
	--color-fashion-300-rgb: 255,163,104;
	--color-fashion-500: #e88060;
	--color-fashion-500-rgb: 232,128,96;
	--color-tools-300: #f62;
	--color-tools-300-rgb: 255,102,34;
	--color-tools-500: #d65c26;
	--color-tools-500-rgb: 214,92,38;
	--color-sport-300: #2babc4;
	--color-sport-300-rgb: 43,171,196;
	--color-sport-500: #1693c0;
	--color-sport-500-rgb: 22,147,192;
	--color-kids-300: #fb507d;
	--color-kids-300-rgb: 251,80,125;
	--color-kids-500: #dd305d;
	--color-kids-500-rgb: 221,48,93;
	--color-beauty-300: #c441f1;
	--color-beauty-300-rgb: 196,65,241;
	--color-beauty-500: #b006eb;
	--color-beauty-500-rgb: 176,6,235;
	--color-stationary-300: #ff9a36;
	--color-stationary-300-rgb: 255,154,54;
	--color-stationary-500: #fa8614;
	--color-stationary-500-rgb: 250,134,20;
	--color-home-300: #00b4b0;
	--color-home-300-rgb: 0,180,176;
	--color-home-500: #009db0;
	--color-home-500-rgb: 0,157,176;
	--color-rating-0-2: #f9bc00;
	--color-rating-0-2-rgb: 249,188,0;
	--color-rating-2-3: #b1b64d;
	--color-rating-2-3-rgb: 177,182,77;
	--color-rating-3-4: #65aa57;
	--color-rating-3-4-rgb: 101,170,87;
	--color-rating-4-5: #00a049;
	--color-rating-4-5-rgb: 0,160,73;
	--color-gradient-silver: #f2f2f2;
	--color-gradient-silver-rgb: 242,242,242;
	--color-pure-black: #000;
	--color-pure-black-rgb: 0,0,0;
	--color-gray: #eee;
	--color-gray-rgb: 238,238,238;
	--color-brand-primary: #e6123d;
	--color-brand-primary-rgb: 230,18,61;
	--color-brand-primary-700: #e6123d;
	--color-brand-primary-700-rgb: 230,18,61;
	--color-club: #0fabc6;
	--color-club-rgb: 15,171,198;
	--color-irancell: #fbc02d;
	--color-irancell-rgb: 251,192,45;
	--color-world-cup-winners: #4caf50;
	--color-world-cup-winners-rgb: 76,175,80;
	--color-village: #00b088;
	--color-village-rgb: 0,176,136;
	--color-digify: #254fc3;
	--color-digify-rgb: 37,79,195;
	--color-mission-background-active: #fffaed;
	--color-mission-background-active-rgb: 255,250,237;
	--color-mission-border-active: #ffc845;
	--color-mission-border-active-rgb: 255,200,69;
	--color-background-success: #e1f9e0;
	--color-background-success-rgb: 225,249,224;
	--color-background-caution: #fff2eb;
	--color-background-caution-rgb: 255,242,235;
	--color-egift-card-active-bottom: #434851;
	--color-egift-card-active-bottom-rgb: 67,72,81;
	--color-egift-card-disabled-bottom: #a2a4a9;
	--color-egift-card-disabled-bottom-rgb: 162,164,169;
	--color-corporate-giftcard-landing-physical-card-color: #00a4ba;
	--color-corporate-giftcard-landing-physical-card-color-rgb: 0,164,186;
	--color-corporate-giftcard-landing-physical-card-color-300: #e3f6f8;
	--color-corporate-giftcard-landing-physical-card-color-300-rgb: 227,246,248;
	--color-corporate-giftcard-landing-digital-card-color: #33a3ff;
	--color-corporate-giftcard-landing-digital-card-color-rgb: 51,163,255;
	--color-corporate-giftcard-landing-digital-card-color-300: #e9f6fe;
	--color-corporate-giftcard-landing-digital-card-color-300-rgb: 233,246,254;
	--color-corporate-giftcard-landing-success: #e5f8f0;
	--color-corporate-giftcard-landing-success-rgb: 229,248,240;
	--color-bg-expiring-points: #fef2e6;
	--color-bg-expiring-points-rgb: 254,242,230;
	--color-luckydraw-season-summer: #006b38;
	--color-luckydraw-season-summer-rgb: 0,107,56;
	--color-luckydraw-season-winter: #2c4f92;
	--color-luckydraw-season-winter-rgb: 44,79,146;
	--color-luckydraw-season-autumn: #822c26;
	--color-luckydraw-season-autumn-rgb: 130,44,38;
	--color-luckydraw-season-spring: #ee6673;
	--color-luckydraw-season-spring-rgb: 238,102,115;
	--color-campaign-norouz: #e4083d;
	--color-campaign-norouz-rgb: 228,8,61
}
body {
	font-family: Vazirmatn;
	margin: 0;
	background-color: var(--bg-color);
}

#loginP {
	margin: 0;
	min-height: 100vh;
	display: flex;
	flex-direction: column;
	font-family: sans-serif;
	background-color: #fff;
}

/* مرکز کردن محتوا در main */
.main-container {
	flex: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 8% 0;
}

a {
  text-decoration: none !important;
}
/* فوتر */
footer {
	text-align: center;
	padding: 1rem;
	background-color: #f4f4f4;
	color: black;
	font-size: 0.9rem;
}
.footerLink {
	width: 100%;
	display: flex;
	flex-direction: row;
	justify-content: center;
	gap: 1%;
}
.footerLink a {
	color: #5c5c5c;
}
.Social {
	text-align: right;
	position: relative;
	height: unset;
	width: 90%;
	margin: auto
}
.Social h2 {
	color: transparent;
	padding-left: 10px;
	position: relative;
	z-index: 9;
	display: inline-block;
	margin: 0;
	background: #20426d;
}
.Social:after{
	content: '';
	background: #ddd;
	width: 100%;
	height: 2px;
	position: absolute;
	display: block;
	font-weight: bold;
	right: 0;
	top: calc(50% - 1px);
}
header {
	width: 100%;
	height: auto;
}

.logo {
	width: 100%;
	height: 80px;
}


#_logoutpage {
	color: #ff0000;
}

#city {
	width: 100%;
	margin: auto;
}

#city>div {
	display: none;
}

#city>div.show {
	display: block;
}

ul {
	list-style-type: none;
	margin: 0;
	padding: 0;
	width: 100%;
	height: 100%;
	background-color: #fff;
	list-style: none;
	padding-left: 0;
	overflow: auto;
	border-radius: 10px;
}

ul>li a {
	display: block;
	color: #979798;
	border-bottom: 1px solid #d5d5d5;
	padding: 8px 16px;
	text-decoration: none;
	white-space: nowrap;
	font-size: 18px;
}

ul>li a:hover:not(.active) {
	background-color: #f5f5f5;
}

#logo {
	display: inline-block;
	margin: 15px;
	height: 60px;
	width: auto;
	border-radius: 0%;
	backdrop-filter: blur(10px);
	border-radius: 5px;
	background-color: #ffffff73;
}
.user_login{
	text-align: center;
	width: 50% !important;
	margin: 1% auto;
	font-weight: 500;
	border-radius: 10px;
	font-size: 20px;
	color: var(--font-body-color);
}
.normal_user_login{
	border-bottom: 1px solid #c0c0c0;
}
.servant_user_login{
	border-bottom: 1px solid #4b00ff;
}
#logologin {
	display: inline-block;
	margin: 10px;
	/* width: 18.5%; */
	padding: 13px;
	filter: brightness(2.5);
}

*,
*:before,
*:after {
	padding: 0;
	margin: 0;
	box-sizing: border-box;
	font-family: 'Vazirmatn';
}
:is(#_loginForm, #_registerForm) {
	width: 100%;
}

:is(#_loginForm, #_registerForm) > * {
	display: block;
	padding: 0;
	width: 100%;
}

:is(#_loginForm, #_registerForm) h3 {
	font-family: Vazirmatn;
	font-size: 32px;
	font-weight: 900;
	line-height: 42px;
	text-align: center;
	color: rgb(255, 255, 255);
}

:is(#_loginForm, #_registerForm) input {
	font-family: Vazirmatn;
	display: block;
	height: 50px;
	width: 280px;
	background-color: #fff5;
	color: #000;
	border-radius: 3px;
	padding: 0 10px;
	margin: 8px auto;
	font-size: 14px;
	font-weight: 300;
}

:is(#_loginForm, #_registerForm) input[type='submit'] {
	font-family: Vazirmatn;
	cursor: pointer;
	background-color: #189ab4;
	color: #fff;
	font-size: 24px;
}
#_loginForm #_register_mem{
	background-color: #fff0;
	color: #fff;
	font-size: 16px;
	cursor: pointer;
}
::placeholder {
	color: #e5e5e5;
}

form * {
	font-family: Vazirmatn;
	color: #ffffff;
	letter-spacing: 0.5px;
	outline: none;
	border: none;
}

main {
	scroll-behavior: smooth;
	display: flex;
	align-content: start;
	align-items: start;
	flex-direction: row;
	justify-content: space-between;
	width: 100%;
	padding: 0 3%;
}

:target {
	display: block;
}

body #_logout,
body.login #_loginForm {
	display: none;
}

body.login #_logout {
	cursor: pointer;
	font-family: Vazirmatn;
	display: block;
	height: 50px;
	width: 280px;
	background-color: #fff5;
	color: #000;
	border-radius: 3px;
	padding: 0 10px;
	margin: 8px auto;
	font-size: 21px;
	font-weight: 300;
	text-align: center;
	line-height: 50px;
}

#menu__toggle {
	opacity: 0;
}

#menu__toggle:checked+.menu__btn>span {
	transform: rotate(45deg);
}

#menu__toggle:checked+.menu__btn>span::before {
	top: 0;
	transform: rotate(0deg);
}

#menu__toggle:checked+.menu__btn>span::after {
	top: 0;
	transform: rotate(90deg);
}

#menu__toggle:checked~.menu__box {
	left: 0 !important;
}

.menu > ul {
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}
.menu__btn {
	position: fixed;
	top: 20px;
	left: 15%;
	width: 26px;
	height: 26px;
	cursor: pointer;
	z-index: 1;
}

.menu__btn>span,
.menu__btn>span::before,
.menu__btn>span::after {
	display: block;
	position: absolute;
	width: 100%;
	height: 2px;
	background-color: #616161;
	transition-duration: 0.25s;
}

.menu__btn>span::before {
	content: '';
	top: -8px;
}

.menu__btn>span::after {
	content: '';
	top: 8px;
}

.container {
	max-width: 1050px;
	width: 90%;
	margin: auto;
}

.navbar {
	width: 100%;
	box-shadow: 0 1px 4px rgb(146 161 176 / 15%);
}

.nav-container {
	display: flex;
	justify-content: space-between;
	align-items: center;
	height: 62px;
}

.navbar .mysidenav {
	display: flex;
}

.navbar .nav-container li {
	list-style: none;
}

.navbar .nav-container a {
	text-decoration: none;
	color: #0e2431;
	font-weight: 500;
	font-size: 1.2rem;
	padding: 0.7rem;
}

.navbar .nav-container a:hover {
	font-weight: bolder;
}

.nav-container {
	display: block;
	position: relative;
	height: 60px;
}

.nav-container .checkbox {
	position: absolute;
	display: block;
	height: 32px;
	width: 32px;
	top: 20px;
	left: 20px;
	z-index: 5;
	opacity: 0;
	cursor: pointer;
}

.nav-container .hamburger-lines {
	display: block;
	height: 26px;
	width: 32px;
	position: absolute;
	top: 17px;
	left: 100%;
	z-index: 2;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}

.nav-container .hamburger-lines .line {
	display: block;
	height: 4px;
	width: 100%;
	border-radius: 10px;
	background: #0e2431;
}

.nav-container .hamburger-lines .line1 {
	transform-origin: 0% 0%;
	transition: transform 0.4s ease-in-out;
}

.nav-container .hamburger-lines .line2 {
	transition: transform 0.2s ease-in-out;
}

.nav-container .hamburger-lines .line3 {
	transform-origin: 0% 100%;
	transition: transform 0.4s ease-in-out;
}

#city .navbar .mysidenav {
	padding-top: 120px;
	box-shadow: inset 0 0 2000px rgba(255, 255, 255, 0.5);
	height: 100vh;
	width: 100%;
	transform: translate(-150%);
	display: flex;
	flex-direction: column;
	padding-left: 50px;
	transition: transform 0.5s ease-in-out;
	text-align: center;
}

.navbar .mysidenav li {
	margin-bottom: 1.2rem;
	font-size: 1.5rem;
	font-weight: 500;
}

.logo {
	position: absolute;
	top: 5px;
	right: 15px;
	font-size: 1.2rem;
	color: #0e2431;
}

.nav-container input[type='checkbox']:checked~.mysidenav {
	transform: translateX(0);
}

.nav-container input[type='checkbox']:checked~.hamburger-lines .line1 {
	transform: rotate(45deg);
}

.nav-container input[type='checkbox']:checked~.hamburger-lines .line2 {
	transform: scaleY(0);
}

.nav-container input[type='checkbox']:checked~.hamburger-lines .line3 {
	transform: rotate(-45deg);
}

.nav-container input[type='checkbox']:checked~.logo {
	display: none;
}

.hamburger-menu {
	display: none
}

@media screen and (max-width: 650px) {
	.mySidenav {
		width: 10%;
		height: 100%;
	}

	#city {
		width: 90%;
	}
}

@media (max-width: 991.98px) {

	/* hamburger menu css */
	main {
		display: block;
	}

	.menu {
		display: none;
	}

	.hamburger-menu {
		display: block
	}

	.Exit {
		background-color: #fff;
		color: #f00;
	}

	#menu__toggle {
		opacity: 0;
	}

	#menu__toggle:checked+.menu__btn>span {
		transform: rotate(45deg);
	}

	#menu__toggle:checked+.menu__btn>span::before {
		top: 0;
		transform: rotate(0deg);
	}

	#menu__toggle:checked+.menu__btn>span::after {
		top: 0;
		transform: rotate(90deg);
	}

	#menu__toggle:checked~.menu__box {
		left: 0 !important;
	}

	.menu__btn {
		position: fixed;
		top: 20px;
		left: 15%;
		width: 26px;
		height: 26px;
		cursor: pointer;
		z-index: 11;
	}

	.menu__btn>span,
	.menu__btn>span::before,
	.menu__btn>span::after {
		display: block;
		position: absolute;
		width: 100%;
		height: 2px;
		background-color: #616161;
		transition-duration: .25s;
	}

	.menu__btn>span::before {
		content: '';
		top: -8px;
	}

	.menu__btn>span::after {
		content: '';
		top: 8px;
	}

	ul>li a.active {
		background-color: #1ccdf1;
		color: white;
	}

	#city {
		padding: 0;
		width: 100%;
	}

	.menu__box {
		display: block;
		position: fixed;
		left: 10px;
		width: 300px;
		background-color: #ECEFF1;
	}

	.menu__item {
		display: block;
		padding: 12px 24px;
		color: #333;
		font-family: 'Roboto', sans-serif;
		font-size: 20px;
		font-weight: 600;
		text-decoration: none;
		transition-duration: .25s;
	}

	.menu__item:hover {
		background-color: #CFD8DC;
	}
	.menu-header-container > ul {
		display: none;
	}
}