@font-face {
    font-family: IranSite;
    src: url("/Portals/_default/skins/iransite/dist/fonts/YekanBakhFaNum-Regular.woff") format('woff'), url("/Portals/_default/skins/iransite/dist/fonts/YekanBakhFaNum-Regular.woff2") format('woff2'), url("/Portals/_default/skins/iransite/dist/fonts/YekanBakhFaNum-Regular.otf") format("opentype"), url("/Portals/_default/skins/iransite/dist/fonts/YekanBakhFaNum-Regular.ttf") format('truetype');
    font-display: swap;
    size-adjust: 97.38%;
    ascent-override: 99%
}

@font-face {
    font-family: IranSite;
    font-weight: 700;
    src: url("/Portals/_default/skins/iransite/dist/fonts/YekanBakhFaNum-Bold.woff") format('woff'), url("/Portals/_default/skins/iransite/dist/fonts/YekanBakhFaNum-Bold.woff2") format('woff2'), url("/Portals/_default/skins/iransite/dist/fonts/YekanBakhFaNum-Bold.otf") format("opentype"), url("/Portals/_default/skins/iransite/dist/fonts/YekanBakhFaNum-Bold.ttf") format('truetype');
    font-display: swap;
    size-adjust: 97.38%;
    ascent-override: 99%
}


body .dark,
body .light {
    --Primary-Color: #064b6d;
    --Silver-Primary-Color: #E2E2E2;
    --Silver-Secondary-Color: #707070;
    --Yellow-Primary-Color: #FBBC04;
    --Yellow-Secondary-Color: #FEB300;
    --Important-Primary-Color: #FF2F19;
    --Important-Secondary-Color: #FAA29D;
    --Button-Width: 148px;
    --Button-Mini: 45px;
    --Moshavere-Color: #3b8c36;
    --English-Name-Height: 45px;
    --eco-Primary-Color: rgb(225 7 181 / 100);
    --eco-Secondary-Color: rgb(225 7 181 100);
    --eco-Back-Color: rgb(225 7 181 / 100);
    --premium-Primary-Color: rgb(225 7 181 / 100);
    --premium-Secondary-Color: rgb(225 7 181 100);
    --premium-Back-Color: rgb(225 7 181 / 100);
    --ecommerce-Primary-Color: #ff968e;
    --ecommerce-Back-Color: #d13b2f;
    --ecommerce-Logo: url("/portals/_default/Departments/new/ecommerce.svg");
    --Wordpress-Primary-Color: #4285F4;
    --Wordpress-Secondary-Color: #247EAB;
    --Wordpress-Logo: url("/portals/_default/Departments/Wordpress.svg");
    --Wordpress-Back-Color: url("/portals/_default/skins/iransite/dist/images/color/Wordpress.jpg");
    --PHP-Primary-Color: #777BB3;
    --PHP-Secondary-Color: #4e528f;
    --PHP-Logo: url("/portals/_default/Departments/php.svg");
    --PHP-Back-Color: url("/portals/_default/skins/iransite/dist/images/color/PHP.jpg");
    --DotNetNuke-Primary-Color: #EA4335;
    --DotNetNuke-Secondary-Color: #AC1717;
    --DotNetNuke-Logo: url("/portals/_default/Departments/DNN.svg");
    --DotNetNuke-Back-Color: url("/portals/_default/skins/iransite/dist/images/color/DNN.jpg");
    --DotNet-Primary-Color: #1072ba;
    --DotNet-Secondary-Color: #165193;
    --DotNet-Logo: url("/portals/_default/Departments/dotnet.svg");
    --DotNet-Back-Color: url("/portals/_default/skins/iransite/dist/images/color/dotnet.jpg");
    --Graphic-Primary-Color: #FBBC04;
    --Graphic-Secondary-Color: #F2A114;
    --Graphic-Logo: url("/portals/_default/Departments/Graphic.svg");
    --Graphic-Back-Color: url("/portals/_default/skins/iransite/dist/images/color/Graphic.jpg");
    --Graphic-Logo: url("/portals/_default/Departments/Graphic.svg");
    --Graphic-Back-Color: url("/portals/_default/skins/iransite/dist/images/color/Graphic.jpg");
    --Seo-Primary-Color: #34A853;
    --Seo-Secondary-Color: #2E7A29;
    --Seo-Logo: url("/portals/_default/Departments/Seo.svg");
    --Seo-Back-Color: url("/portals/_default/skins/iransite/dist/images/color/Seo.jpg");
    --Photography-Primary-Color: #C135EA;
    --Photography-Secondary-Color: #82095E;
    --Photography-Logo: url("/portals/_default/Departments/Photography.svg");
    --Photography-Back-Color: url("/portals/_default/skins/iransite/dist/images/color/Photography.jpg");
    --Adwords-Logo: url("/portals/_default/Departments/new/googleadwords.svg");
    --Adwords-Primary-Color: #828282;
    --applicaion-Primary-Color: #1690CF;
    --applicaion-Logo: url("/portals/_default/Departments/new/application.svg");
    --applicaion-Back-Color: #BFE3FF;
    --support-logo: url("/portals/_default/Departments/new/support.svg");
    --support-color: #FFF3E3;
    --support-Back-Color: #EBA156;
    --dmarketing-Logo: url("/portals/_default/Departments/new/digitalmarketing.svg");
    --dmarketing-Primary-Color: #EBA156;
    --dmarketing-Secondary-Color: #EBA156;
    --dmarketing-Back-Color: #EBA156;
    --marketplace-Primary-Color: #ACA7A5;
    --marketplace-Secondary-Color: #ACA7A5;
    --marketplace-Back-Color: #ACA7A5;
    --enamad-logo: url("/portals/_default/Departments/new/enamad.svg");
    --enamad-Primary-Color: #0F4E95;
    --enamad-Secondary-Color: #0F4E95;
    --enamad-Back-Color: #0F4E95;
    --webportfo-Primary-Color: #E12D2C;
    --webportfo-Secondary-Color: #E12D2C;
    --webportfo-Back-Color: #E12D2C;
    --enterpriseportal-Primary-Color: #0F4E95;
    --enterpriseportal-Secondary-Color: #0F4E95;
    --enterpriseportal-Back-Color: #0F4E95;
    --ticket-Primary-Color: #64CB78;
    --ticket-Secondary-Color: #64CB78;
    --ticket-Back-Color: #64CB78;
    --Projects-Primary-Color: #202124;
    --Projects-Secondary-Color: #707070;
    --Projects-Logo: url("/portals/_default/Departments/Projects.svg");
    --Projects-Back-Color: url("/portals/_default/skins/iransite/dist/images/color/Projects.jpg");
    --CRM-Secondary-Color: #707070;
    --CRM-Logo: url("/portals/_default/Departments/CRM.svg");
    --CRM-Back-Color: url("/portals/_default/skins/iransite/dist/images/color/CRM.jpg");
    --Color-1-Primary: #c92c6d;
    --Color-1-Secondary: #921A4C;
    --Back-Color-1: url("/portals/_default/skins/iransite/dist/images/color/color1.jpg");
    --Color-2-Primary: #2c7bc9;
    --Color-2-Secondary: #275688;
    --Back-Color-2: url("/portals/_default/skins/iransite/dist/images/color/color2.jpg");
    --Color-3-Primary: #fc6f05;
    --Color-3-Secondary: #9B4D12;
    --Back-Color-3: url("/portals/_default/skins/iransite/dist/images/color/color3.jpg");
    --Color-4-Primary: #902cca;
    --Color-4-Secondary: #432577;
    --Back-Color-4: url("/portals/_default/skins/iransite/dist/images/color/color4.jpg");
    --op1: 1;
    --op2: 0.5;

    --Service-eco-Primary-Color: rgb(225 7 181 / 100);
    --Service-eco-Secondary-Color: rgb(225 7 181 100);
    --Service-eco-Back-Color: rgb(225 7 181 / 100);

    --Service-premium-Primary-Color: rgb(225 7 181 / 100);
    --Service-premium-Secondary-Color: rgb(225 7 181 100);
    --Service-premium-Back-Color: rgb(225 7 181 / 100);

    --Service-ecommerce-Primary-Color: #FFF2F1;
    --Service-ecommerce-Back-Color: #FFC6BE;
    --Service-ecommerce-Logo: url("/portals/_default/Departments/ecommerce.svg");

    --Service-Wordpress-Primary-Color: #F1F6FF;
    --Service-Wordpress-Secondary-Color: #D2E2FF;
    --Service-Wordpress-Logo: url("/portals/_default/Departments/Wordpress.svg");
    --Service-Wordpress-Back-Color: #D2E2FF;

    --Service-Sms-Primary-Color: #E2EDDF;
    --Service-Sms-Secondary-Color: #BCCCB8;
    --Service-Sms-Logo: url("/portals/_default/Departments/sms.svg");
    --Service-Sms-Back-Color: #BCCCB8;

    --Service-Voip-Primary-Color: #CAF2E4;
    --Service-Voip-Secondary-Color: #9ED6C2;
    --Service-Voip-Logo: url("/portals/_default/Departments/voip.svg");
    --Service-Voip-Back-Color: #9ED6C2;

    --Service-PHP-Primary-Color: #777BB3;
    --Service-PHP-Secondary-Color: #4e528f;
    --Service-PHP-Logo: url("/portals/_default/Departments/php.svg");
    --Service-PHP-Back-Color: url("/portals/_default/skins/iransite/dist/images/color/PHP.jpg");

    --Service-DotNetNuke-Primary-Color: #EA4335;
    --Service-DotNetNuke-Secondary-Color: #AC1717;
    --Service-DotNetNuke-Logo: url("/portals/_default/Departments/DNN.svg");
    --Service-DotNetNuke-Back-Color: url("/portals/_default/skins/iransite/dist/images/color/DNN.jpg");

    --Service-DotNet-Primary-Color: #1072ba;
    --Service-DotNet-Secondary-Color: #165193;
    --Service-DotNet-Logo: url("/portals/_default/Departments/dotnet.svg");
    --Service-DotNet-Back-Color: url("/portals/_default/skins/iransite/dist/images/color/dotnet.jpg");

    --Service-Graphic-Primary-Color: #FFFAED;
    --Service-Graphic-Secondary-Color: #FFE39B;
    --Service-Graphic-Logo: url("/portals/_default/Departments/Graphic.svg");
    --Service-Graphic-Back-Color: #FFE39B;

    --Service-Seo-Primary-Color: #EDF9F3;
    --Service-Seo-Secondary-Color: #B2F0D1;
    --Service-Seo-Logo: url("/portals/_default/Departments/Seo.svg");
    --Service-Seo-Back-Color: #B2F0D1;

    --Service-Photography-Primary-Color: #FBDCFF;
    --Service-Photography-Secondary-Color: #E8A6F0;
    --Service-Photography-Logo: url("/portals/_default/Departments/Photography.svg");
    --Service-Photography-Back-Color: #E8A6F0;

    --Service-Adwords-Logo: url("/portals/_default/Departments/googleadwords.svg");
    --Service-Adwords-Primary-Color: #E7E7E9;
    --Service-Adwords-Back-Color: #CFCFD3;

    --Service-applicaion-Primary-Color: #BFE3FF;
    --Service-applicaion-Logo: url("/portals/_default/Departments/application.svg");
    --Service-applicaion-Back-Color: #8DCDFF;

    --Service-support-Primary-Color: #FFF3E3;
    --Service-support-Logo: url("/portals/_default/Departments/support.svg");
    --Service-support-color: #FFF3E3;
    --Service-support-Back-Color: #FFD9A6;

    --Service-dmarketing-Logo: url("/portals/_default/Departments/digitalmarketing.svg");
    --Service-dmarketing-Primary-Color: #EADBEC;
    --Service-dmarketing-Secondary-Color: #EBA156;
    --Service-dmarketing-Back-Color: #D3B5D7;

    --Service-enterpriseportal-Logo: url("/portals/_default/Departments/portal.svg");
    --Service-enterpriseportal-Primary-Color: #FFE2F2;
    --Service-enterpriseportal-Secondary-Color: #EBA156;
    --Service-enterpriseportal-Back-Color: #E3B0CC;

    --Service-marketplace-Primary-Color: #ACA7A5;
    --Service-marketplace-Secondary-Color: #ACA7A5;
    --Service-marketplace-Back-Color: #ACA7A5;

    --Service-enamad-Logo: url("/portals/_default/Departments/enamad.svg");
    --Service-enamad-Primary-Color: #EEF2F8;
    --Service-enamad-Secondary-Color: #0F4E95;
    --Service-enamad-Back-Color: #D0DDED;

    --Service-webportfo-Primary-Color: #E12D2C;
    --Service-webportfo-Secondary-Color: #E12D2C;
    --Service-webportfo-Back-Color: #E12D2C;

    --Service-ticket-Primary-Color: #F6EDFF;
    --Service-ticket-Secondary-Color: #64CB78;
    --Service-ticket-Back-Color: #DCC6F1;
    --Service-ticket-Logo: url("/portals/_default/Departments/ticketing.svg");

    --Service-Projects-Primary-Color: #202124;
    --Service-Projects-Secondary-Color: #707070;
    --Service-Projects-Logo: url("/portals/_default/Departments/Projects.svg");
    --Service-Projects-Back-Color: url("/portals/_default/skins/iransite/dist/images/color/Projects.jpg");

    --Service-CRM-Primary-Color: #F4F2F2;
    --Service-CRM-Secondary-Color: #D3D3D3;
    --Service-CRM-Logo: url("/portals/_default/Departments/CRM.svg");
    --Service-CRM-Back-Color: #D3D3D3;

     --Service-Hospital-Primary-Color: #D5FFFD;
    --Service-Hospital-Secondary-Color: #A4E5E5;
    --Service-Hospital-Logo: url("/portals/_default/Departments/hospital.svg");
    --Service-Hospital-Back-Color: #D5FFFD;

    --Service-Legal-Primary-Color: #EAECEE;
    --Service-Legal-Secondary-Color: #C2C6C9;
    --Service-Legal-Logo: url("/portals/_default/Departments/legal.svg");
    --Service-Legal-Back-Color: #EAECEE;

    --Service-RealEstate-Primary-Color: #FFF4D5;
    --Service-RealEstate-Secondary-Color: #E6D0A4;
    --Service-RealEstate-Logo: url("/portals/_default/Departments/realestate.svg");
    --Service-RealEstate-Back-Color: #FFF4D5;

    --Service-Sports-Primary-Color: #FDEEDD;
    --Service-Sports-Secondary-Color: #E6C2A4;
    --Service-Sports-Logo: url("/portals/_default/Departments/sports.svg");
    --Service-Sports-Back-Color: #FDEEDD;

    --Service-Medical-Primary-Color: #DCFFD5;
    --Service-Medical-Secondary-Color: #B6E6A4;
    --Service-Medical-Logo: url("/portals/_default/Departments/medical.svg");
    --Service-Medical-Back-Color: #DCFFD5;

    --Service-Construction-Primary-Color: #E0E0E0;
    --Service-Construction-Secondary-Color: #B8B8B8;
    --Service-Construction-Logo: url("/portals/_default/Departments/construction.svg");
    --Service-Construction-Back-Color: #E0E0E0;

    --Service-Insurance-Primary-Color: #E1E2FF;
    --Service-Insurance-Secondary-Color: #B6B8E6;
    --Service-Insurance-Logo: url("/portals/_default/Departments/insurance.svg");
    --Service-Insurance-Back-Color: #E1E2FF;

    --Service-Music-Primary-Color: #E6D8D8;
    --Service-Music-Secondary-Color: #C2A4A4;
    --Service-Music-Logo: url("/portals/_default/Departments/music.svg");
    --Service-Music-Back-Color: #E6D8D8;

    --Service-Studio-Primary-Color: #DBEED2;
    --Service-Studio-Secondary-Color: #B2C6A4;
    --Service-Studio-Logo: url("/portals/_default/Departments/studio.svg");
    --Service-Studio-Back-Color: #DBEED2;

    --Service-Kindergarten-Primary-Color: #F3DAF0;
    --Service-Kindergarten-Secondary-Color: #D2A4C6;
    --Service-Kindergarten-Logo: url("/portals/_default/Departments/kindergarten.svg");
    --Service-Kindergarten-Back-Color: #F3DAF0;

    --Service-Petrochemical-Primary-Color: #FFF7D5;
    --Service-Petrochemical-Secondary-Color: #E6D4A4;
    --Service-Petrochemical-Logo: url("/portals/_default/Departments/petrochemical.svg");
    --Service-Petrochemical-Back-Color: #FFF7D5;

    --Service-JobSearch-Primary-Color: #EFF8E2;
    --Service-JobSearch-Secondary-Color: #D4E6A4;
    --Service-JobSearch-Logo: url("/portals/_default/Departments/jobsearch.svg");
    --Service-JobSearch-Back-Color: #EFF8E2;

    --Service-Automotive-Primary-Color: #F6DEDE;
    --Service-Automotive-Secondary-Color: #E6A4A4;
    --Service-Automotive-Logo: url("/portals/_default/Departments/automotive.svg");
    --Service-Automotive-Back-Color: #F6DEDE;

    --Service-Carpet-Primary-Color: #FDE2FF;
    --Service-Carpet-Secondary-Color: #E6A4E6;
    --Service-Carpet-Logo: url("/portals/_default/Departments/carpet.svg");
    --Service-Carpet-Back-Color: #FDE2FF;

    --Service-Utilities-Primary-Color: #D5FFDD;
    --Service-Utilities-Secondary-Color: #A4E6B6;
    --Service-Utilities-Logo: url("/portals/_default/Departments/utilities.svg");
    --Service-Utilities-Back-Color: #D5FFDD;

    --Service-Banking-Primary-Color: #FBE1E1;
    --Service-Banking-Secondary-Color: #E6B8B8;
    --Service-Banking-Logo: url("/portals/_default/Departments/banking.svg");
    --Service-Banking-Back-Color: #FBE1E1;

 --Service-Charity-Primary-Color: #F4FBE1;
    --Service-Charity-Secondary-Color: #D1E6A4;
    --Service-Charity-Logo: url("/portals/_default/Departments/charity.svg");
    --Service-Charity-Back-Color: #F4FBE1;

    --Service-Art-Primary-Color: #E1FBF2;
    --Service-Art-Secondary-Color: #A4E6D1;
    --Service-Art-Logo: url("/portals/_default/Departments/art.svg");
    --Service-Art-Back-Color: #E1FBF2;

    --Service-Business-Primary-Color: #D9DFF0;
    --Service-Business-Secondary-Color: #A4B6E6;
    --Service-Business-Logo: url("/portals/_default/Departments/business.svg");
    --Service-Business-Back-Color: #D9DFF0;

    --Service-School-Primary-Color: #FBEBE1;
    --Service-School-Secondary-Color: #E6C2A4;
    --Service-School-Logo: url("/portals/_default/Departments/school.svg");
    --Service-School-Back-Color: #FBEBE1;

    --Service-Bedding-Primary-Color: #C9FBFF;
    --Service-Bedding-Secondary-Color: #A4E6E6;
    --Service-Bedding-Logo: url("/portals/_default/Departments/bedding.svg");
    --Service-Bedding-Back-Color: #C9FBFF;

    --Service-Restaurant-Primary-Color: #D9EEDD;
    --Service-Restaurant-Secondary-Color: #A4C6B6;
    --Service-Restaurant-Logo: url("/portals/_default/Departments/restaurant.svg");
    --Service-Restaurant-Back-Color: #D9EEDD;

    --Service-Handicrafts-Primary-Color: #F3DEE6;
    --Service-Handicrafts-Secondary-Color: #E6A4C2;
    --Service-Handicrafts-Logo: url("/portals/_default/Departments/handicrafts.svg");
    --Service-Handicrafts-Back-Color: #F3DEE6;

    --Service-Stationery-Primary-Color: #EAE1FB;
    --Service-Stationery-Secondary-Color: #C2A4E6;
    --Service-Stationery-Logo: url("/portals/_default/Departments/stationery.svg");
    --Service-Stationery-Back-Color: #EAE1FB;

    --Service-Corporate-Primary-Color: #FBE1E1;
    --Service-Corporate-Secondary-Color: #E6B8B8;
    --Service-Corporate-Logo: url("/portals/_default/Departments/corporate.svg");
    --Service-Corporate-Back-Color: #FBE1E1;

    --Service-Curtains-Primary-Color: #D6FBCF;
    --Service-Curtains-Secondary-Color: #A4E6A4;
    --Service-Curtains-Logo: url("/portals/_default/Departments/curtains.svg");
    --Service-Curtains-Back-Color: #D6FBCF;

    --Service-HomeAppliances-Primary-Color: #EFF2ED;
    --Service-HomeAppliances-Secondary-Color: #D4E6D4;
    --Service-HomeAppliances-Logo: url("/portals/_default/Departments/homeappliances.svg");
    --Service-HomeAppliances-Back-Color: #EFF2ED;

    --Service-Tourism-Primary-Color: #F4E6E6;
    --Service-Tourism-Secondary-Color: #E6A4A4;
    --Service-Tourism-Logo: url("/portals/_default/Departments/tourism.svg");
    --Service-Tourism-Back-Color: #F4E6E6;

    --Service-MedicalEquipment-Primary-Color: #DDE4E6;
    --Service-MedicalEquipment-Secondary-Color: #A4C2C6;
    --Service-MedicalEquipment-Logo: url("/portals/_default/Departments/medicalequipment.svg");
    --Service-MedicalEquipment-Back-Color: #DDE4E6;

    --Service-AutoParts-Primary-Color: #E1D7FF;
    --Service-AutoParts-Secondary-Color: #A4A4E6;
    --Service-AutoParts-Logo: url("/portals/_default/Departments/autoparts.svg");
    --Service-AutoParts-Back-Color: #E1D7FF;

    --Service-Furniture-Primary-Color: #E2D9E8;
    --Service-Furniture-Secondary-Color: #C2A4C6;
    --Service-Furniture-Logo: url("/portals/_default/Departments/furniture.svg");
    --Service-Furniture-Back-Color: #E2D9E8;
 --Service-Tools-Primary-Color: #EFD9E4;
    --Service-Tools-Secondary-Color: #C6A4B6;
    --Service-Tools-Logo: url("/portals/_default/Departments/tools.svg");
    --Service-Tools-Back-Color: #EFD9E4;

    --Service-Education-Primary-Color: #F5E6F9;
    --Service-Education-Secondary-Color: #D1A4E6;
    --Service-Education-Logo: url("/portals/_default/Departments/education.svg");
    --Service-Education-Back-Color: #F5E6F9;

    --Service-Multilingual-Primary-Color: #F7FAEC;
    --Service-Multilingual-Secondary-Color: #D4E6A4;
    --Service-Multilingual-Logo: url("/portals/_default/Departments/multilingual.svg");
    --Service-Multilingual-Back-Color: #F7FAEC;

    --Service-Company-Primary-Color: #F8ECEC;
    --Service-Company-Secondary-Color: #E6A4A4;
    --Service-Company-Logo: url("/portals/_default/Departments/company.svg");
    --Service-Company-Back-Color: #F8ECEC;

    --Service-News-Primary-Color: #EFFFF4;
    --Service-News-Secondary-Color: #A4E6D4;
    --Service-News-Logo: url("/portals/_default/Departments/news.svg");
    --Service-News-Back-Color: #EFFFF4;

    --Service-Custom-Primary-Color: #FFF0FA;
    --Service-Custom-Secondary-Color: #E6A4D4;
    --Service-Custom-Logo: url("/portals/_default/Departments/custom.svg");
    --Service-Custom-Back-Color: #FFF0FA;

    --Service-Exclusive-Primary-Color: #FBE1E1;
    --Service-Exclusive-Secondary-Color: #E6B8B8;
    --Service-Exclusive-Logo: url("/portals/_default/Departments/exclusive.svg");
    --Service-Exclusive-Back-Color: #FBE1E1;

    --Service-Industrial-Primary-Color: #CEE7EB;
    --Service-Industrial-Secondary-Color: #A4C6C6;
    --Service-Industrial-Logo: url("/portals/_default/Departments/industrial.svg");
    --Service-Industrial-Back-Color: #CEE7EB;

    --Service-Advertising-Primary-Color: #EDE5F0;
    --Service-Advertising-Secondary-Color: #C4A4C6;
    --Service-Advertising-Logo: url("/portals/_default/Departments/advertising.svg");
    --Service-Advertising-Back-Color: #EDE5F0;

    --Service-Personal-Primary-Color: #F5E9EA;
    --Service-Personal-Secondary-Color: #E6A4A4;
    --Service-Personal-Logo: url("/portals/_default/Departments/personal.svg");
    --Service-Personal-Back-Color: #F5E9EA;




}

.color-switch,
.is-logo {
    justify-content: center
}

.dark .color-switch .icon,
.light .color-switch .icon {
    width: 1.7em;
    height: 1.7em;
    box-shadow: inset 0 0 0 .15em;
    box-sizing: border-box
}

.bg-white .is-logo svg,
.footer .GPS svg,
svg {
    fill: var(--Black-Color)
}

.bg-dark .is-logo svg {
    fill: var(--White-Color)
}

body .light {
    --Black-Color: #202124;
    --White-Color: #ffffff;
    --Accent-Color: #09608b;
    --Silver-tertiary-Color: #5D5C5C;
    --Silver-Bg: #FAFAFA;
    --Silver-Secondary-Bg: var(--Silver-Bg);
    --Shadow-Accent: #DADCE0;
    --CRM-Primary-Color: #E7E7E9;
}

body .dark {
    --Black-Color: #ffffff;
    --White-Color: #202124;
    --Accent-Color: #8ccbeb;
    --Silver-tertiary-Color: #eaeaea;
    --Silver-Bg: #333;
    --Silver-Secondary-Bg: #eaeaea;
    --Shadow-Accent: #c2c4c733;
    --CRM-Primary-Color: #eaeaea
}

#theme {
    transition: background .2s linear;
    position: relative
}

.SalesBox,
.o-h,
svg:not(:root) {
    overflow: hidden
}

.dark .color-switch .icon {
    position: relative;
    display: block;
    background: linear-gradient(to bottom, currentColor .4em, transparent 0) .4em -.5em/.15em 1em no-repeat, linear-gradient(to bottom, currentColor .4em, transparent 0) .4em 1em/.15em 1em no-repeat, linear-gradient(to bottom, currentColor .4em, transparent 0) -.56em .4em/.45em .15em no-repeat, linear-gradient(to bottom, currentColor .4em, transparent 0) 1em .4em/1em .15em no-repeat;
    border-radius: 100%;
    border: .42em solid transparent
}

#dnn_dnnLOGO_imgLogo,
.IranSiteTableRow:nth-child(odd) .IranSiteTableCol,
.SalesBox,
.StepsStyle .Step .Image,
.bg-light,
.dark,
.databox .col-lg-3,
.light,
.light .color-switch .icon {
    background: var(--White-Color)
}

.dark .color-switch .icon::after,
.dark .color-switch .icon::before {
    content: "";
    display: block;
    box-sizing: border-box;
    position: absolute;
    width: 1.8em;
    height: .15em;
    border-right: .3em solid;
    border-left: .3em solid;
    left: -.42em;
    top: .4em
}

.dark .color-switch .icon::before,
.light .color-switch .icon::before {
    transform: rotate(-45deg)
}

.dark .color-switch .icon::after,
.light .color-switch .icon::after {
    transform: rotate(45deg)
}

.dark .color-switch:after {
    content: attr(color-light);
    font-size: 1em;
    padding-right: .7em;
    border-right: .1em solid var(--Silver-Secondary-Color)
}

.color-switch {
    position: fixed;
    bottom: 1em;
    right: 1em;
    z-index: 20;
    display: flex;
    gap: .8em;
    height: 2.5em;
    align-items: center;
    cursor: pointer
}

.Buttons,
.dnnHelperTip,
.light .color-switch .icon,
.ui-tabs .ui-tabs-panel {
    position: relative;
    display: block
}

.light .color-switch .icon {
    border-radius: 100%;
    border: .42em solid transparent
}

.light .color-switch .icon::after,
.light .color-switch .icon::before {
    content: ""
}

.light .color-switch:after {
    content: attr(color-dark);
    font-size: 1em;
    padding-right: .7em;
    border-right: .1em solid var(--Silver-Secondary-Color)
}

.bg-light {
    color: var(--Black-Color) !important
}

.bg-dark {
    background: var(--Black-Color);
    color: var(--White-Color) !important
}

[class*=php] {
    --Department-Primary-Color: var(--PHP-Primary-Color);
    --Department-Secondary-Color: var(--PHP-Secondary-Color);
    --Department-Logo: var(--PHP-Logo);
    --Department-Back-Color: var(--PHP-Back-Color)
}

[class*=ecommerce] {
    --Department-Primary-Color: var(--ecommerce-Primary-Color);
    --Department-Secondary-Color: var(--ecommerce-Secondary-Color);
    --Department-Logo: var(--ecommerce-Logo);
    --Department-Back-Color: var(--ecommerce-Back-Color);
}

[class*=wordpress] {
    --Department-Primary-Color: var(--Wordpress-Primary-Color);
    --Department-Secondary-Color: var(--Wordpress-Secondary-Color);
    --Department-Logo: var(--Wordpress-Logo);
    --Department-Back-Color: var(--Wordpress-Back-Color);
    --Department-Bg-Color: rgb(66 133 244 / 20%)
}

[class*=dotnet] {
    --Department-Primary-Color: var(--DotNet-Primary-Color);
    --Department-Secondary-Color: var(--DotNet-Secondary-Color);
    --Department-Logo: var(--DotNet-Logo);
    --Department-Back-Color: var(--DotNet-Back-Color)
}

[class*=graphic] {
    --Department-Primary-Color: var(--Graphic-Primary-Color);
    --Department-Secondary-Color: var(--Graphic-Secondary-Color);
    --Department-Logo: var(--Graphic-Logo);
    --Department-Back-Color: var(--Graphic-Back-Color);
    --Department-Bg-Color: rgb(225 7 181 / 20%)
}

[class*=seo] {
    --Department-Primary-Color: var(--Seo-Primary-Color);
    --Department-Secondary-Color: var(--Seo-Secondary-Color);
    --Department-Logo: var(--Seo-Logo);
    --Department-Back-Color: var(--Seo-Back-Color)
}

[class*=economy] {
    --Department-Primary-Color: var(--eco-Primary-Color);
    --Department-Secondary-Color: var(--eco-Secondary-Color);
    --Department-Logo: var(--eco-Logo);
    --Department-Back-Color: var(--eco-Back-Color)
}

[class*=premium] {
    --Department-Primary-Color: var(--premium-Primary-Color);
    --Department-Secondary-Color: var(--premium-Secondary-Color);
    --Department-Logo: var(--premium-Logo);
    --Department-Back-Color: var(--premium-Back-Color)
}

[class*=photography] {
    --Department-Primary-Color: var(--Photography-Primary-Color);
    --Department-Secondary-Color: var(--Photography-Secondary-Color);
    --Department-Logo: var(--Photography-Logo);
    --Department-Back-Color: var(--Photography-Back-Color)
}

[class*=crm] {
    --Department-Primary-Color: var(--CRM-Primary-Color);
    --Department-Secondary-Color: var(--CRM-Secondary-Color);
    --Department-Logo: var(--CRM-Logo);
    --Department-Back-Color: var(--CRM-Back-Color)
}

[class*=dotnetnuke] {
    --Department-Primary-Color: var(--DotNetNuke-Primary-Color);
    --Department-Secondary-Color: var(--DotNetNuke-Secondary-Color);
    --Department-Logo: var(--DotNetNuke-Logo);
    --Department-Back-Color: var(--DotNetNuke-Back-Color);
    --Department-Bg-Color: hsl(5deg 81% 56% / 20%);

    &:after {
        opacity: 0.7
    }
}

[class*=adwords] {
    --Department-Primary-Color: var(--Adwords-Primary-Color);
    --Department-Secondary-Color: var(--Adwords-Secondary-Color);
    --Department-Back-Color: var(--Adwords-Back-Color);
    --Department-Logo: var(--Adwords-Logo);
}

[class*=application] {
    --Department-Primary-Color: var(--applicaion-Primary-Color);
    --Department-Secondary-Color: var(--applicaion-Secondary-Color);
    --Department-Back-Color: var(--applicaion-Back-Color);
    --Department-Logo: var(--applicaion-Logo);
}

[class*=support] {
    --Department-Primary-Color: var(--support-Primary-Color);
    --Department-Secondary-Color: var(--support-Secondary-Color);
    --Department-Back-Color: var(--support-Back-Color);
    --Department-Logo: var(--support-Logo);
}

[class*=dmarketing] {
    --Department-Primary-Color: var(--dmarketing-Primary-Color);
    --Department-Secondary-Color: var(--dmarketing-Secondary-Color);
    --Department-Back-Color: var(--dmarketing-Back-Color);
    --Department-Logo: var(--dmarketing-Logo);
}

[class*=marketplace] {
    --Department-Primary-Color: var(--marketplace-Primary-Color);
    --Department-Secondary-Color: var(--marketplace-Secondary-Color);
    --Department-Back-Color: var(--marketplace-Back-Color);
}

[class*=enamad] {
    --Department-Primary-Color: var(--enamad-Primary-Color);
    --Department-Secondary-Color: var(--enamad-Secondary-Color);
    --Department-Back-Color: var(--enamad-Back-Color);
    --Department-Logo: var(--enamad-Logo);
}

[class*=webportfo] {
    --Department-Primary-Color: var(--webportfo-Primary-Color);
    --Department-Secondary-Color: var(--webportfo-Secondary-Color);
    --Department-Back-Color: var(--webportfo-Back-Color);
}

[class*=enterpriseportal] {
    --Department-Primary-Color: var(--enterpriseportal-Primary-Color);
    --Department-Secondary-Color: var(--enterpriseportal-Secondary-Color);
    --Department-Back-Color: var(--enterpriseportal-Back-Color);
    --Department-Logo: var(--enterpriseportal-Logo);
}

[class*=ticket] {
    --Department-Primary-Color: var(--ticket-Primary-Color);
    --Department-Secondary-Color: var(--ticket-Secondary-Color);
    --Department-Back-Color: var(--ticket-Back-Color);
    --Department-Logo: var(--ticket-Logo);
}

[class*=projects] {
    --Department-Primary-Color: var(--Projects-Primary-Color);
    --Department-Secondary-Color: var(--Projects-Secondary-Color);
    --Department-Logo: var(--Projects-Logo);
    --Department-Back-Color: var(--Projects-Back-Color)
}

[class*=sms] {
    --Department-Primary-Color: var(--Sms-Primary-Color);
    --Department-Secondary-Color: var(--Sms-Secondary-Color);
    --Department-Logo: var(--Sms-Logo);
    --Department-Back-Color: var(--Sms-Back-Color)
}

[class*=voip] {
    --Department-Primary-Color: var(--Voip-Primary-Color);
    --Department-Secondary-Color: var(--Voip-Secondary-Color);
    --Department-Logo: var(--Voip-Logo);
    --Department-Back-Color: var(--Voip-Back-Color)
}


.services {
    &.php {
        --Department-Primary-Color: var(--Service-PHP-Primary-Color);
        --Department-Secondary-Color: var(--Service-PHP-Secondary-Color);
        --Department-Logo: var(--Service-PHP-Logo);
        --Department-Back-Color: var(--Service-PHP-Back-Color)
    }

    &.ecommerce {
        --Department-Primary-Color: var(--Service-ecommerce-Primary-Color);
        --Department-Secondary-Color: var(--Service-ecommerce-Secondary-Color);
        --Department-Logo: var(--Service-ecommerce-Logo);
        --Department-Back-Color: var(--Service-ecommerce-Back-Color);
    }

    &.Wordpress {
        --Department-Primary-Color: var(--Service-Wordpress-Primary-Color);
        r); */
        --Department-Secondary-Color: var(--Service-Wordpress-Secondary-Color);
        --Department-Logo: var(--Service-Wordpress-Logo);
        --Department-Back-Color: var(--Service-Wordpress-Back-Color);
        --Department-Bg-Color: rgb(66 133 244 / 20%);
    }

    &.dotnet {
        --Department-Primary-Color: var(--Service-DotNet-Primary-Color);
        --Department-Secondary-Color: var(--Service-DotNet-Secondary-Color);
        --Department-Logo: var(--Service-DotNet-Logo);
        --Department-Back-Color: var(--Service-DotNet-Back-Color)
    }

    &.graphic {
        --Department-Primary-Color: var(--Service-Graphic-Primary-Color);
        --Department-Secondary-Color: var(--Service-Graphic-Secondary-Color);
        --Department-Logo: var(--Service-Graphic-Logo);
        --Department-Back-Color: var(--Service-Graphic-Back-Color);
        --Department-Bg-Color: rgb(225 7 181 / 20%)
    }

    &.seo {
        --Department-Primary-Color: var(--Service-Seo-Primary-Color);
        --Department-Secondary-Color: var(--Service-Seo-Secondary-Color);
        --Department-Logo: var(--Service-Seo-Logo);
        --Department-Back-Color: var(--Service-Seo-Back-Color)
    }

    &.economy {
        --Department-Primary-Color: var(--Service-eco-Primary-Color);
        --Department-Secondary-Color: var(--Service-eco-Secondary-Color);
        --Department-Logo: var(--Service-eco-Logo);
        --Department-Back-Color: var(--Service-eco-Back-Color)
    }

    &.premium {
        --Department-Primary-Color: var(--Service-premium-Primary-Color);
        --Department-Secondary-Color: var(--Service-premium-Secondary-Color);
        --Department-Logo: var(--Service-premium-Logo);
        --Department-Back-Color: var(--Service-premium-Back-Color)
    }

    &.photography {
        --Department-Primary-Color: var(--Service-Photography-Primary-Color);
        --Department-Secondary-Color: var(--Service-Photography-Secondary-Color);
        --Department-Logo: var(--Service-Photography-Logo);
        --Department-Back-Color: var(--Service-Photography-Back-Color)
    }

    &.crm {
        --Department-Primary-Color: var(--Service-CRM-Primary-Color);
        --Department-Secondary-Color: var(--Service-CRM-Secondary-Color);
        --Department-Logo: var(--Service-CRM-Logo);
        --Department-Back-Color: var(--Service-CRM-Back-Color)
    }

    &.dotnetnuke {
        --Department-Primary-Color: rgba(239, 62, 66, 0.2);
        --Department-Secondary-Color: var(--Service-DotNetNuke-Secondary-Color);
        --Department-Logo: var(--Service-DotNetNuke-Logo);
        --Department-Back-Color: #ef3e42;
    }

    &.adwords {
        --Department-Primary-Color: var(--Service-Adwords-Primary-Color);
        --Department-Secondary-Color: var(--Service-Adwords-Secondary-Color);
        --Department-Back-Color: var(--Service-Adwords-Back-Color);
        --Department-Logo: var(--Service-Adwords-Logo);
    }

    &.application {
        --Department-Primary-Color: var(--Service-applicaion-Primary-Color);
        --Department-Secondary-Color: var(--Service-applicaion-Secondary-Color);
        --Department-Back-Color: var(--Service-applicaion-Back-Color);
        --Department-Logo: var(--Service-applicaion-Logo);
    }

    &.support {
        --Department-Primary-Color: var(--Service-support-Primary-Color);
        --Department-Secondary-Color: var(--Service-support-Secondary-Color);
        --Department-Back-Color: var(--Service-support-Back-Color);
        --Department-Logo: var(--Service-support-Logo);
    }

    &.dmarketing {
        --Department-Primary-Color: var(--Service-dmarketing-Primary-Color);
        --Department-Secondary-Color: var(--Service-dmarketing-Secondary-Color);
        --Department-Back-Color: var(--Service-dmarketing-Back-Color);
        --Department-Logo: var(--Service-dmarketing-Logo);
    }

    &.marketplace {
        --Department-Primary-Color: var(--Service-marketplace-Primary-Color);
        --Department-Secondary-Color: var(--Service-marketplace-Secondary-Color);
        --Department-Back-Color: var(--Service-marketplace-Back-Color);
    }

    &.enamad {
        --Department-Primary-Color: var(--Service-enamad-Primary-Color);
        --Department-Secondary-Color: var(--Service-enamad-Secondary-Color);
        --Department-Back-Color: var(--Service-enamad-Back-Color);
        --Department-Logo: var(--Service-enamad-Logo);
    }

    &.webportfo {
        --Department-Primary-Color: var(--Service-webportfo-Primary-Color);
        --Department-Secondary-Color: var(--Service-webportfo-Secondary-Color);
        --Department-Back-Color: var(--Service-webportfo-Back-Color);
    }

    &.enterpriseportal {
        --Department-Primary-Color: var(--Service-enterpriseportal-Primary-Color);
        --Department-Secondary-Color: var(--Service-enterpriseportal-Secondary-Color);
        --Department-Back-Color: var(--Service-enterpriseportal-Back-Color);
        --Department-Logo: var(--Service-enterpriseportal-Logo);
    }

    &.ticket {
        --Department-Primary-Color: var(--Service-ticket-Primary-Color);
        --Department-Secondary-Color: var(--Service-ticket-Secondary-Color);
        --Department-Back-Color: var(--Service-ticket-Back-Color);
        --Department-Logo: var(--Service-ticket-Logo);
    }

    &.projects {
        --Department-Primary-Color: var(--Service-Projects-Primary-Color);
        --Department-Secondary-Color: var(--Service-Projects-Secondary-Color);
        --Department-Logo: var(--Service-Projects-Logo);
        --Department-Back-Color: var(--Service-Projects-Back-Color)
    }

    &.sms {
        --Department-Primary-Color: var(--Service-Sms-Primary-Color);
        --Department-Secondary-Color: var(--Service-Sms-Secondary-Color);
        --Department-Logo: var(--Service-Sms-Logo);
        --Department-Back-Color: var(--Service-Sms-Back-Color)
    }

    &.voip {
        --Department-Primary-Color: var(--Service-Voip-Primary-Color);
        --Department-Secondary-Color: var(--Service-Voip-Secondary-Color);
        --Department-Logo: var(--Service-Voip-Logo);
        --Department-Back-Color: var(--Service-Voip-Back-Color)
    }
    &.hospital {
        --Department-Primary-Color: var(--Service-Hospital-Primary-Color);
        --Department-Secondary-Color: var(--Service-Hospital-Secondary-Color);
        --Department-Logo: var(--Service-Hospital-Logo);
        --Department-Back-Color: var(--Service-Hospital-Back-Color);
    }

    &.legal {
        --Department-Primary-Color: var(--Service-Legal-Primary-Color);
        --Department-Secondary-Color: var(--Service-Legal-Secondary-Color);
        --Department-Logo: var(--Service-Legal-Logo);
        --Department-Back-Color: var(--Service-Legal-Back-Color);
    }

    &.realestate {
        --Department-Primary-Color: var(--Service-RealEstate-Primary-Color);
        --Department-Secondary-Color: var(--Service-RealEstate-Secondary-Color);
        --Department-Logo: var(--Service-RealEstate-Logo);
        --Department-Back-Color: var(--Service-RealEstate-Back-Color);
    }

    &.sports {
        --Department-Primary-Color: var(--Service-Sports-Primary-Color);
        --Department-Secondary-Color: var(--Service-Sports-Secondary-Color);
        --Department-Logo: var(--Service-Sports-Logo);
        --Department-Back-Color: var(--Service-Sports-Back-Color);
    }

    &.medical {
        --Department-Primary-Color: var(--Service-Medical-Primary-Color);
        --Department-Secondary-Color: var(--Service-Medical-Secondary-Color);
        --Department-Logo: var(--Service-Medical-Logo);
        --Department-Back-Color: var(--Service-Medical-Back-Color);
    }

    &.construction {
        --Department-Primary-Color: var(--Service-Construction-Primary-Color);
        --Department-Secondary-Color: var(--Service-Construction-Secondary-Color);
        --Department-Logo: var(--Service-Construction-Logo);
        --Department-Back-Color: var(--Service-Construction-Back-Color);
    }

    &.insurance {
        --Department-Primary-Color: var(--Service-Insurance-Primary-Color);
        --Department-Secondary-Color: var(--Service-Insurance-Secondary-Color);
        --Department-Logo: var(--Service-Insurance-Logo);
        --Department-Back-Color: var(--Service-Insurance-Back-Color);
    }

    &.music {
        --Department-Primary-Color: var(--Service-Music-Primary-Color);
        --Department-Secondary-Color: var(--Service-Music-Secondary-Color);
        --Department-Logo: var(--Service-Music-Logo);
        --Department-Back-Color: var(--Service-Music-Back-Color);
    }

    &.studio {
        --Department-Primary-Color: var(--Service-Studio-Primary-Color);
        --Department-Secondary-Color: var(--Service-Studio-Secondary-Color);
        --Department-Logo: var(--Service-Studio-Logo);
        --Department-Back-Color: var(--Service-Studio-Back-Color);
    }

    &.kindergarten {
        --Department-Primary-Color: var(--Service-Kindergarten-Primary-Color);
        --Department-Secondary-Color: var(--Service-Kindergarten-Secondary-Color);
        --Department-Logo: var(--Service-Kindergarten-Logo);
        --Department-Back-Color: var(--Service-Kindergarten-Back-Color);
    }

    &.petrochemical {
        --Department-Primary-Color: var(--Service-Petrochemical-Primary-Color);
        --Department-Secondary-Color: var(--Service-Petrochemical-Secondary-Color);
        --Department-Logo: var(--Service-Petrochemical-Logo);
        --Department-Back-Color: var(--Service-Petrochemical-Back-Color);
    }

    &.jobsearch {
        --Department-Primary-Color: var(--Service-JobSearch-Primary-Color);
        --Department-Secondary-Color: var(--Service-JobSearch-Secondary-Color);
        --Department-Logo: var(--Service-JobSearch-Logo);
        --Department-Back-Color: var(--Service-JobSearch-Back-Color);
    }

    &.automotive {
        --Department-Primary-Color: var(--Service-Automotive-Primary-Color);
        --Department-Secondary-Color: var(--Service-Automotive-Secondary-Color);
        --Department-Logo: var(--Service-Automotive-Logo);
        --Department-Back-Color: var(--Service-Automotive-Back-Color);
    }

    &.carpet {
        --Department-Primary-Color: var(--Service-Carpet-Primary-Color);
        --Department-Secondary-Color: var(--Service-Carpet-Secondary-Color);
        --Department-Logo: var(--Service-Carpet-Logo);
        --Department-Back-Color: var(--Service-Carpet-Back-Color);
    }

    &.utilities {
        --Department-Primary-Color: var(--Service-Utilities-Primary-Color);
        --Department-Secondary-Color: var(--Service-Utilities-Secondary-Color);
        --Department-Logo: var(--Service-Utilities-Logo);
        --Department-Back-Color: var(--Service-Utilities-Back-Color);
    }

    &.banking {
        --Department-Primary-Color: var(--Service-Banking-Primary-Color);
        --Department-Secondary-Color: var(--Service-Banking-Secondary-Color);
        --Department-Logo: var(--Service-Banking-Logo);
        --Department-Back-Color: var(--Service-Banking-Back-Color);
    }
    &.charity {
        --Department-Primary-Color: var(--Service-Charity-Primary-Color);
        --Department-Secondary-Color: var(--Service-Charity-Secondary-Color);
        --Department-Logo: var(--Service-Charity-Logo);
        --Department-Back-Color: var(--Service-Charity-Back-Color);
    }

    &.art {
        --Department-Primary-Color: var(--Service-Art-Primary-Color);
        --Department-Secondary-Color: var(--Service-Art-Secondary-Color);
        --Department-Logo: var(--Service-Art-Logo);
        --Department-Back-Color: var(--Service-Art-Back-Color);
    }

    &.business {
        --Department-Primary-Color: var(--Service-Business-Primary-Color);
        --Department-Secondary-Color: var(--Service-Business-Secondary-Color);
        --Department-Logo: var(--Service-Business-Logo);
        --Department-Back-Color: var(--Service-Business-Back-Color);
    }

    &.school {
        --Department-Primary-Color: var(--Service-School-Primary-Color);
        --Department-Secondary-Color: var(--Service-School-Secondary-Color);
        --Department-Logo: var(--Service-School-Logo);
        --Department-Back-Color: var(--Service-School-Back-Color);
    }

    &.bedding {
        --Department-Primary-Color: var(--Service-Bedding-Primary-Color);
        --Department-Secondary-Color: var(--Service-Bedding-Secondary-Color);
        --Department-Logo: var(--Service-Bedding-Logo);
        --Department-Back-Color: var(--Service-Bedding-Back-Color);
    }

    &.restaurant {
        --Department-Primary-Color: var(--Service-Restaurant-Primary-Color);
        --Department-Secondary-Color: var(--Service-Restaurant-Secondary-Color);
        --Department-Logo: var(--Service-Restaurant-Logo);
        --Department-Back-Color: var(--Service-Restaurant-Back-Color);
    }

    &.handicrafts {
        --Department-Primary-Color: var(--Service-Handicrafts-Primary-Color);
        --Department-Secondary-Color: var(--Service-Handicrafts-Secondary-Color);
        --Department-Logo: var(--Service-Handicrafts-Logo);
        --Department-Back-Color: var(--Service-Handicrafts-Back-Color);
    }

    &.stationery {
        --Department-Primary-Color: var(--Service-Stationery-Primary-Color);
        --Department-Secondary-Color: var(--Service-Stationery-Secondary-Color);
        --Department-Logo: var(--Service-Stationery-Logo);
        --Department-Back-Color: var(--Service-Stationery-Back-Color);
    }

    &.corporate {
        --Department-Primary-Color: var(--Service-Corporate-Primary-Color);
        --Department-Secondary-Color: var(--Service-Corporate-Secondary-Color);
        --Department-Logo: var(--Service-Corporate-Logo);
        --Department-Back-Color: var(--Service-Corporate-Back-Color);
    }

    &.curtains {
        --Department-Primary-Color: var(--Service-Curtains-Primary-Color);
        --Department-Secondary-Color: var(--Service-Curtains-Secondary-Color);
        --Department-Logo: var(--Service-Curtains-Logo);
        --Department-Back-Color: var(--Service-Curtains-Back-Color);
    }

    &.homeappliances {
        --Department-Primary-Color: var(--Service-HomeAppliances-Primary-Color);
        --Department-Secondary-Color: var(--Service-HomeAppliances-Secondary-Color);
        --Department-Logo: var(--Service-HomeAppliances-Logo);
        --Department-Back-Color: var(--Service-HomeAppliances-Back-Color);
    }

    &.tourism {
        --Department-Primary-Color: var(--Service-Tourism-Primary-Color);
        --Department-Secondary-Color: var(--Service-Tourism-Secondary-Color);
        --Department-Logo: var(--Service-Tourism-Logo);
        --Department-Back-Color: var(--Service-Tourism-Back-Color);
    }

    &.medicalequipment {
        --Department-Primary-Color: var(--Service-MedicalEquipment-Primary-Color);
        --Department-Secondary-Color: var(--Service-MedicalEquipment-Secondary-Color);
        --Department-Logo: var(--Service-MedicalEquipment-Logo);
        --Department-Back-Color: var(--Service-MedicalEquipment-Back-Color);
    }

    &.autoparts {
        --Department-Primary-Color: var(--Service-AutoParts-Primary-Color);
        --Department-Secondary-Color: var(--Service-AutoParts-Secondary-Color);
        --Department-Logo: var(--Service-AutoParts-Logo);
        --Department-Back-Color: var(--Service-AutoParts-Back-Color);
    }

    &.furniture {
        --Department-Primary-Color: var(--Service-Furniture-Primary-Color);
        --Department-Secondary-Color: var(--Service-Furniture-Secondary-Color);
        --Department-Logo: var(--Service-Furniture-Logo);
        --Department-Back-Color: var(--Service-Furniture-Back-Color);
    }

    &.tools {
        --Department-Primary-Color: var(--Service-Tools-Primary-Color);
        --Department-Secondary-Color: var(--Service-Tools-Secondary-Color);
        --Department-Logo: var(--Service-Tools-Logo);
        --Department-Back-Color: var(--Service-Tools-Back-Color);
    }

    &.education {
        --Department-Primary-Color: var(--Service-Education-Primary-Color);
        --Department-Secondary-Color: var(--Service-Education-Secondary-Color);
        --Department-Logo: var(--Service-Education-Logo);
        --Department-Back-Color: var(--Service-Education-Back-Color);
    }

    &.multilingual {
        --Department-Primary-Color: var(--Service-Multilingual-Primary-Color);
        --Department-Secondary-Color: var(--Service-Multilingual-Secondary-Color);
        --Department-Logo: var(--Service-Multilingual-Logo);
        --Department-Back-Color: var(--Service-Multilingual-Back-Color);
    }

    &.company {
        --Department-Primary-Color: var(--Service-Company-Primary-Color);
        --Department-Secondary-Color: var(--Service-Company-Secondary-Color);
        --Department-Logo: var(--Service-Company-Logo);
        --Department-Back-Color: var(--Service-Company-Back-Color);
    }

    &.news {
        --Department-Primary-Color: var(--Service-News-Primary-Color);
        --Department-Secondary-Color: var(--Service-News-Secondary-Color);
        --Department-Logo: var(--Service-News-Logo);
        --Department-Back-Color: var(--Service-News-Back-Color);
    }

    &.custom {
        --Department-Primary-Color: var(--Service-Custom-Primary-Color);
        --Department-Secondary-Color: var(--Service-Custom-Secondary-Color);
        --Department-Logo: var(--Service-Custom-Logo);
        --Department-Back-Color: var(--Service-Custom-Back-Color);
    }

    &.exclusive {
        --Department-Primary-Color: var(--Service-Exclusive-Primary-Color);
        --Department-Secondary-Color: var(--Service-Exclusive-Secondary-Color);
        --Department-Logo: var(--Service-Exclusive-Logo);
        --Department-Back-Color: var(--Service-Exclusive-Back-Color);
    }

    &.industrial {
        --Department-Primary-Color: var(--Service-Industrial-Primary-Color);
        --Department-Secondary-Color: var(--Service-Industrial-Secondary-Color);
        --Department-Logo: var(--Service-Industrial-Logo);
        --Department-Back-Color: var(--Service-Industrial-Back-Color);
    }

    &.advertising {
        --Department-Primary-Color: var(--Service-Advertising-Primary-Color);
        --Department-Secondary-Color: var(--Service-Advertising-Secondary-Color);
        --Department-Logo: var(--Service-Advertising-Logo);
        --Department-Back-Color: var(--Service-Advertising-Back-Color);
    }

    &.personal {
        --Department-Primary-Color: var(--Service-Personal-Primary-Color);
        --Department-Secondary-Color: var(--Service-Personal-Secondary-Color);
        --Department-Logo: var(--Service-Personal-Logo);
        --Department-Back-Color: var(--Service-Personal-Back-Color);
    }
}

::marker {
    color: rgba(var(--Department-Primary-Color), var(--op1), var(--Black-Color))
}

::-moz-selection {
    background: #4285f4;
    color: #fff;
    text-shadow: none
}

::selection {
    background: #4285f4;
    color: #fff;
    text-shadow: none
}

.bg-dotnet,
.bg-php {
    color: var(--White-Color) !important
}

main ::-webkit-scrollbar {
    width: 1px;
    height: 1px
}

main ::-webkit-scrollbar-track {
    background: var(--Silver-Primary-Color)
}

main ::-webkit-scrollbar-thumb {
    background: var(--Accent-Color)
}

main[class] ::-webkit-scrollbar-thumb {
    background: var(--Department-Primary-Color)
}

::-webkit-input-placeholder {
    text-align: right
}

[type=email]::placeholder,
[type=number]::placeholder,
[type=password]::placeholder,
[type=phone]::placeholder,
[type=tel]::placeholder,
input[type=email],
input[type=number],
input[type=password],
input[type=phone],
input[type=tel] {
    text-align: left !important;
    direction: ltr
}

.Buttons.Multiple a:first-of-type,
.bg-dotnet {
    background: var(--DotNetNuke-Back-Color)
}

.bg-php {
    background: var(--Wordpress-Back-Color)
}

.bg-graphic {
    background: var(--Department-Back-Color);
    color: var(--Black-Color) !important
}

.h2,
h1,
h2,
h3,
h4,
h5,
h6 {
    font-weight: 700;
    font-size: 20px;
    margin: 0;
    line-height: 3em
}

.Normal,
.NormalDeleted,
.NormalDisabled {
    color: var(--Silver-tertiary-Color);
    font-size: 1rem;
    font-weight: 100;
    line-height: 1.5rem;
    word-wrap: break-word
}

.img-fluid,
img.dnn-scale-img {
    max-width: 100%;
    height: auto
}

img {
    -ms-interpolation-mode: bicubic;
    height: auto
}

#dnn_dnnLOGO_imgLogo,
a,
a img,
abbr,
acronym,
address,
applet,
article,
aside,
audio,
b,
big,
blockquote,
body,
canvas,
caption,
center,
cite,
code,
dd,
del,
details,
dfn,
div,
dl,
dt,
em,
embed,
fieldset,
figcaption,
figure,
footer,
form,
h1,
h2,
h3,
h4,
h5,
h6,
header,
hgroup,
html,
i,
iframe,
img,
ins,
kbd,
label,
legend,
li,
mark,
menu,
nav,
object,
ol,
output,
p,
pre,
q,
ruby,
s,
samp,
section,
small,
span,
strike,
strong,
sub,
summary,
sup,
time,
tt,
u,
ul,
var,
video {
    border: 0
}

.dnnFormItem input[type=submit],
.dnnPrimaryAction,
.ui.primary.button,
.ui.primary.buttons .button,
a.dnnPrimaryAction {
    background-color: var(--Seo-Primary-Color);
    color: var(--White-Color) !important;
    padding: .6em 2em;
    border: 0;
    border-radius: 0;
    font-weight: 100;
    line-height: normal;
    /* margin: .5em 0!important */
}

.article-heading,
body,
ol,
p,
ul {
    margin: 0
}

.breadcontainer,
.dnnForm .dnnFormItem a.dnnFormHelp span,
.dnnForm .ui-resizable,
.dnnForm fieldset,
.dnnLabel,
.dnnSpinner,
.dnnTooltip,
.p-relative {
    position: relative
}

.dnnForm,
.dnnForm fieldset fieldset,
.dnnFormItem .dnnInputGroup .dnnLeft,
.w-100,
body.mobileView.dnnFormPopup.dnnFormPopupMobileView .dnnCaptcha {
    width: 100%
}

.FAQ-List summary,
.breadcontainer,
.dnnForm .dnnFormItem a.dnnFormHelp img,
.dnnFormHelpContent span,
.dnnWizardTab.ui-tabs .ui-tabs-nav li a,
body.mobileView.dnnFormPopup.dnnFormPopupMobileView .dnnForm .dnnLoginActions,
div.ModDNNUserDefinedTableC ul.dnnActions,
svg {
    display: block
}

.AccordionMore.open:after,
.FAQ-List input,
.Hidden,
.MobTel,
.StepsStyle .Step:first-of-type:before,
.StepsStyle .Step:last-of-type:after,
.accordion-first .answer,
.console.profile .console-none div div,
.datepicker-container.pwt-hide,
.dnnForm .ui-helper-hidden,
.dnnFormPopup.dnnFormPopupMobileView div.ui-dialog-titlebar>.ui-dialog-titlebar-close,
.hidden,
.jspCap,
.mobileView .ui-widget-overlay,
.projects .Buttons svg,
.tabBody,
[mbd-ng-app=MyDnnBusinessDirectoryApp]>[ng-hide=hideListLoading]:not(.ng-hide)~div,
body.mobileView.dnnFormPopup.dnnFormPopupMobileView .dnnSocialRegistration,
ul.dnnButtonGroup>li.dnnButtonGroup-first {
    display: none
}

.dark,
.light,
body {
    display: block;
    position: relative
}

.databox [data-content].active,
.dnnForm .ui-priority-primary,
.dnnForm .ui-widget-content .ui-priority-primary,
.dnnForm .ui-widget-header .ui-priority-primary,
.fw-800,
b,
strong {
    font-weight: 700
}

body:not(.dnnEditState) .DNNEmptyPane {
    width: 0;
    padding: 0;
    margin: 0
}

.eipbackimg,
.linkitem .Normal,
BLOCKQUOTE,
PRE {
    white-space: nowrap
}

.height-full,
.mbd-field-switchbutton,
svg {
    height: 100%
}

.SalesBoxText strong:after,
.SalesBoxText strong:before {
    z-index: -1;
    animation-fill-mode: forwards;
    content: "";
    right: 0
}

a,
abbr,
acronym,
address,
applet,
article,
aside,
audio,
b,
big,
blockquote,
body,
canvas,
caption,
center,
cite,
code,
dd,
del,
details,
dfn,
div,
dl,
dt,
em,
embed,
fieldset,
figcaption,
figure,
footer,
form,
header,
hgroup,
html,
i,
iframe,
img,
ins,
kbd,
label,
legend,
li,
mark,
menu,
nav,
object,
ol,
output,
p,
pre,
q,
ruby,
s,
samp,
section,
small,
span,
strike,
strong,
sub,
summary,
sup,
time,
tt,
u,
ul,
var,
video {
    font-size: 14px;
    font-family: IranSite, Tahoma, Arial, Helvetica, sans-serif
}

.BtnWidth,
li,
p,
ul li {
    line-height: 2rem
}

a,
a:active,
a:focus,
a:hover,
a:link {
    text-decoration: none
}

.paneOutline {
    border: 1px dashed #ccc
}

body {
    direction: rtl;
    margin: 0
}

.dark,
.light {
    color: var(--Black-Color)
}

p {
    text-align: justify;
    text-align-last: right
}

ol,
ul {
    list-style: none;
    padding: 0
}

a {
    outline: 0 !important;
    color: inherit;
}

Body #Form {
    height: 0
}

embed,
img,
object {
    max-width: 100%
}

[class*=Map] img,
[class*=map] img,
[id*=Map] img,
[id*=map] img,
table img {
    max-width: none !important
}

header.header {
    box-shadow: 0 .1em .2em var(--Shadow-Accent);
    height: 4.5rem;
    position: fixed;
    z-index: 200;
    width: 100vw
}

.header.header .is-logo img {
    height: 20px !important
}

.slimmenu {
    display: flex;
    padding-right: 0
}

footer.footer {
    background: var(--Silver-Bg)
}

.footer-logo svg {
    width: 8em;
    height: 1.7em
}

.ContactNumbers {
    margin: 0;
    padding: 0 0 0 2.5rem;
    * {
     font-size: 1.3rem;
    }
   
}

.ContactNumbers li {
    list-style: none;
    display: flex;
    justify-content: space-between;
}

.FooterLinks {
    position: relative;
    overflow-x: hidden;
    max-height: 24rem;
    padding-left: 1rem
}

.FooterLinks::-webkit-scrollbar {
    width: .2rem
}

.FooterLinks::-webkit-scrollbar-track {
    border-left: .1rem solid var(--Silver-Primary-Color);
    border-right: .1rem solid var(--Silver-Primary-Color);
    border-radius: 50%
}

.FooterLinks::-webkit-scrollbar-thumb {
    border-left: .2rem solid var(--Accent-Color);
    border-right: .2rem solid var(--Accent-Color);
    background: var(--Accent-Color);
    width: .2rem;
    border-radius: 50%
}

.footer .iconlink img {
    width: 60px;
    height: 60px;
    box-shadow: 0 1px 2px var(--Shadow-Accent)
}

.footer .iconlink {
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    gap: .9rem
}

.searchInputContainer,
.searchInputContainer input {
    height: 2.6rem;
    box-shadow: 0 .05rem .2rem var(--Shadow-Accent);
    border: 0;
    width: 20rem;
    font-family: IranSite;
    font-size: 1rem
}

.border-bottom {
    border-bottom: .1rem solid var(--Silver-Primary-Color)
}

.searchInputContainer input::placeholder {
    font-size: 1rem;
    color: var(--Silver-Secondary-Color)
}

.footerSearch {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14.595' height='14.595' viewBox='0 0 14.595 14.595'%3E%3Cpath id='search' d='M17.948,17.186l-4.078-4.1a5.942,5.942,0,1,0-.783.783l4.1,4.078ZM4.444,9.305a4.861,4.861,0,1,1,4.861,4.861A4.861,4.861,0,0,1,4.444,9.305Z' transform='translate(-3.353 -3.353)' fill='%23202124'/%3E%3C/svg%3E%0A");
    width: 2rem;
    height: 2rem;
    display: inline;
    position: absolute;
    left: 0;
    top: 0;
    padding: .5rem;
    border-right: .1rem solid var(--Silver-Primary-Color);
    margin-top: .3rem;
    background-repeat: no-repeat;
    background-position: center
}

#dnn_dnnSEARCH1_ClassicSearch {
    position: relative;
    display: inline-block
}

.footer .GPS {
    gap: .6rem;
    padding-bottom: 1rem
}

.footer .GPS svg {
    width: 100%;
    border: .1rem solid var(--Silver-Primary-Color);
    height: 3rem;
    padding: .5rem .3rem
}

.footer-bottom {
    padding: 2rem 0;
    gap: 2em
}

.footer-bottom .footer-logo img {
    width: 114px;
    margin-right: auto;
    display: flex
}

main {
    padding-top: 4.8em
}

.ContentBackSilver {
    background-color: var(--Silver-Bg)
}

.ContentBackSilver .Full {
    /* padding: 6em; */
}

.FullBackBlack {
    background-color: var(--Black-Color);
    margin: 3rem 0
}

.FullBackSilver {
    background-color: var(--Silver-Primary-Color)
}

.SectionSixBack {
    background-color: var(--Silver-Bg);
    margin: 3rem 0
}

.searchPane {
    display: flex;
    justify-content: start;
    align-items: center
}

.BreadCrumb {
    /* position: absolute; */
    z-index: 22;
    display: flex;
    padding: 1rem 0;







    @media(max-width:480px) {
        position: relative;
    }
}

.BreadCrumb,
.BreadCrumb a,
.BreadCrumb span {
    color: var(--Silver-Secondary-Color);
    font-size: .97em;
    flex: 1 0 auto
}

.BreadCrumb ::-webkit-scrollbar {
    height: 1px
}

.BreadCrumb .breadcrumbLink {
    padding: .2rem .5rem
}

.Buttons a,
.Buttons more,
.IranSiteTableHead,
.White,
.databox .article-heading li:hover {
    color: var(--White-Color)
}

.c-Accent-Color,
.page_404_text span {
    color: var(--Accent-Color)
}

.BtnWidth {
    font-size: 1rem;
    font-weight: 700;
    padding: .7em 1.7em;
    margin-right: .5em;
    text-decoration: none;
    cursor: pointer;
    transition: 2s linear
}

*,
::after,
::before {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box
}

.is-logo svg {
    display: block;
    height: 2em;
    width: 12rem
}

.d-flex.projects {
    display: block !important;
    background: var(--Silver-Bg)
}

.BlogList .Btn,
.Cat2List .Btn,
.Department .SecondContent .Btn,
.projects .SecondContent .Btn {
    font-size: 1rem;
    background: var(--Department-Back-Color);
    font-weight: 700;
    color: var(--Black-Color);
    padding: .7em 1.2em;
    margin-right: .5em;
    text-decoration: none;
    line-height: 2.5rem
}

.projects {
    height: auto;
    position: relative
}

.projects .SecondContent {
    margin: 0 6.85rem;
    height: 100%
}

.projects .SecondContent svg {
    vertical-align: middle;
    width: 1.8rem;
    height: 1.5rem;
    fill: var(--White-Color)
}

.Department .SecondContent p,
.projects .SecondContent p {
    margin-bottom: 2rem
}

.SalesBoxText strong:after {
    width: .2rem;
    animation-name: firstsection1;
    animation-duration: 1s;
    animation-delay: 1.5s;
    position: absolute
}

@keyframes firstsection1 {
    0% {
        background: var(--DotNetNuke-Primary-Color);
        height: 0%
    }

    100% {
        background: var(--DotNetNuke-Primary-Color);
        height: 100%
    }
}

.SalesBoxText strong:before {
    height: 100%;
    width: 100%;
    position: absolute;
    opacity: .2;
    animation-name: firstsection2;
    animation-duration: 1.2s;
    animation-delay: 2.4s;
    padding: 0 .4rem
}

.FAQ-List details {
    box-sizing: border-box;
    border-bottom: .1em solid var(--Silver-Primary-Color)
}

.FAQ-List details summary::-webkit-details-marker {
    display: none !important;
}

.FAQ-List label {
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: var(--Black-Color);
    height: 4.5rem;
    padding: 0 1rem
}

.FAQ-List label :where(strong, span, h1, h2, h3, h4, h5, h6) {
    font-size: 1.1rem
}

@media screen and (max-width:580px) {
    .FAQ-List h3 {
        line-height: unset !important;
        padding-left: 0.8rem;
    }
}

.FAQ-List label::after {
    content: "";
    top: 1.5rem;
    left: 1rem;
    transform: rotate(-315deg);
    width: .7em;
    height: .7em;
    transition: rotate .6s ease-in-out;
    border: solid var(--Black-Color);
    border-width: 0 .2em .2em 0;
    display: inline-block;
    padding: .2em
}

.FAQ-List input+details .content {
    max-height: 0;
    overflow: auto;
    transition: max-height .6s ease-out;
    padding: 0 1rem
}

.FAQ-List input:checked+details .content {
    max-height: 10rem
}

.FAQ-List input:checked+details label::after {
    rotate: 180deg
}

.page_404_text {
    text-align: center;
    font-size: 160px;
    color: var(--Black-Color);
    line-height: 1;
    display: inline-block;
    font-weight: 700;
    padding: 50px 0;
    width: 100%;
    background: var(--button-color)
}

.page_404_text span {
    display: block;
    font-size: 40px;
    padding: 20px 0 30px;
    letter-spacing: 14px
}

.page_404_text p {
    font-size: 14px;
    text-align-last: center
}

.IranSiteTable {
    background: var(--White-Color);
    position: relative;
    display: block;
    margin-top: 2em
}

.IranSiteTableHead {
    position: sticky;
    top: 4.5em;
    z-index: 8
}

.IranSiteTableCol:before,
.IranSiteTableHead .IranSiteTableCol {
    background: var(--Silver-Secondary-Color);
    color: var(--White-Color);
    padding: .5em;
    height: 100%
}

.IranSiteTableRow:nth-child(2n) .IranSiteTableCol,
.databox .databox-head {
    background: var(--Silver-Primary-Color)
}

.IranSiteTableHead,
.IranSiteTableRow {
    display: grid;
    grid-auto-flow: column;
    font-weight: 700;
    grid-gap: 0.2em
}

.IranSiteTableCol {
    font-weight: 700;
    padding: .9em;
    text-align: center;
    text-align-last: center
}

.IranSiteTableCol[data-type=number] span {
    direction: ltr;
    justify-content: center
}

.HorizontalTabs {
    position: relative;
    height: 100%;
    display: block
}

.HorizontalTabs .tab {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap
}

.HorizontalTabs .tab label {
    padding: 2rem !important;
    flex: 1 0 max-content;
    text-align: center;
    border-bottom: .3em solid var(--Silver-Primary-Color);
    cursor: pointer;
    transition: .3s linear
}

.HorizontalTabs .tab h1,
.HorizontalTabs .tab h2,
.HorizontalTabs .tab h3,
.HorizontalTabs .tab h4,
.HorizontalTabs .tab h5,
.HorizontalTabs .tab h6,
.HorizontalTabs .tab strong {
    font-size: 1em;
    line-height: 2em
}

.HorizontalTabs .tab label.active {
    flex: 2 0 max-content;
    border-bottom: .3em solid rgba(var(--Department-Primary-Color, var(--Accent-Color)), var(--op1));
    border-bottom: .3em solid var(--Department-Primary-Color, var(--Accent-Color))
}

.HorizontalTabs .tab-content {
    display: none;
    padding: 2em .5em;
    opacity: 0;
    animation: .4s linear tabfade
}

.HorizontalTabs .tab-content.active {
    display: block;
    opacity: 1
}

@keyframes tabfade {
    0% {
        opacity: 0
    }

    100% {
        opacity: 1
    }
}

@media (max-width: 768px) {
    .linkitem .Normal {
        line-height: 4rem;
        display: block
    }

    main {
        padding-top: 0
    }

    header.header {
        bottom: 0;
        background: var(--Black-Color);
        right: 0;
        left: 0
    }

    .MobTel {
        display: block;
        width: 4rem;
        height: 4rem;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18.386' height='18.386' viewBox='0 0 18.386 18.386'%3E%3Cpath id='bx-support' d='M12.193,3a9.2,9.2,0,0,1,9.193,9.193V16a1.778,1.778,0,0,1-1.839,1.707h-.919a.919.919,0,0,1-.919-.919V12.061a.919.919,0,0,1,.919-.919h.835a7.343,7.343,0,0,0-14.539,0h.835a.919.919,0,0,1,.919.919v5.647a1.84,1.84,0,0,0,1.839,1.839h1.839v-.919h3.677v2.758H8.516a3.681,3.681,0,0,1-3.677-3.677A1.778,1.778,0,0,1,3,16V12.193A9.2,9.2,0,0,1,12.193,3Z' transform='translate(-3 -3)' fill='%23f5f5f5'/%3E%3C/svg%3E%0A");
        background-repeat: no-repeat;
        background-position: center
    }

    .is-logo svg {
        fill: var(--White-Color)
    }

    .HorizontalTabs .tab label,
    .HorizontalTabs .tab label.active {
        flex: 0 0 50% !important
    }

    .ContentBackSilver .Full {
        padding: 0
    }

    .IranSiteTable .IranSiteTableHead,
    .IranSiteTable .IranSiteTableRow {
        grid-auto-columns: auto;
        grid-template-columns: 1fr !important
    }

    .IranSiteTableHead {
        display: none
    }

    .IranSiteTableRow {
        display: grid;
        grid-auto-flow: row
    }

    .IranSiteTableCol {
        padding: 0;
        grid-template-columns: auto;
        background: 0 0 !important;
        line-height: 2.5;
        font-weight: 100
    }

    .IranSiteTableCol span {
        line-height: 3
    }

    [data-mobile-model=horizontal] .IranSiteTableCol {
        grid-template-columns: repeat(2, 1fr)
    }

    [data-mobile-model=vertical] .IranSiteTableCol {
        grid-template-columns: repeat(1, 1fr)
    }

    .IranSiteTableCol:last-of-type {
        border-bottom: .3em solid var(--Silver-tertiary-Color)
    }

    .IranSiteTableCol:before {
        content: attr(data-name)
    }

    footer.footer {
        background: var(--Silver-Bg);
        padding-bottom: 4.3em
    }
}


.b-1 {
    border: 1px solid
}

.bc-Primary {
    border-color: var(--Primary-Color)
}

.br-1 {
    border-right: 1px solid
}

.bc-Silver-Primary {
    border-color: var(--Silver-Primary-Color)
}

.databox {
    background: var(--Silver-Bg);
    padding: 1rem;

    a {
        color: var(--Color-2-Primary);
    }
}

.databox .col-lg-3 {
    position: sticky;
    align-self: flex-start;
    top: 5rem;
    padding: .7rem
}

.databox .databox-head {
    padding: 1rem;
    font-weight: 600
}

.databox .databox-head:after {
    content: '';
    width: .6rem;
    height: .6rem;
    transition: .9s;
    border: solid var(--Silver-tertiary-Color);
    border-width: 0 .2rem .2rem 0;
    display: inline-block;
    padding: .2rem;
    transform: rotate(45deg);
    transform-origin: bottom left
}

.databox .article-heading li {
    transition: 380ms ease-in-out;
    -webkit-transition: 380ms ease-in-out;
    -moz-transition: 380ms ease-in-out;
    -ms-transition: 380ms ease-in-out;
    -o-transition: 380ms ease-in-out;
    list-style: disc inside;
    cursor: pointer;
    padding: .5rem;
    background: 0 0;
}

.databox .article-heading li:hover {
    background: var(--Department-Primary-Color, var(--Accent-Color))
}

.databox .article-heading li:hover::marker {
    color: var(--White-Color)
}

.databox .article-heading li::marker {
    color: var(--Department-Secondary-Color);
    font-size: 1rem
}

.SalesBox>div,
.mbd-field-persian-date {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-gap: 1em
}

.sales-input.ticket-name {
    grid-column: 1/1
}

.sales-input.ticket-tell {
    grid-column: 2/2
}

.Recruitment .ui.primary.button {
    background: var(--Seo-Primary-Color) !important
}

.sales-input.ticket-description,
.sales-input.ticket-mail {
    grid-column: 1/3
}

.sales-input.submit {
    display: flex;
    justify-content: end;
    grid-column: 1/3
}

.mbd-submit-default {
    display: block;
    position: relative;
    padding: 1em .5em;
    margin: 0
}

.SalesTicket>.ng-scope {
    display: grid !important;
    grid-gap: 0.5em
}

.mbd-submit-default .sd-fields .sd-field .sd-field-required span {
    font-weight: 700;
    display: block;
    color: #ecbc4b;
    padding: 1em;
    background-color: #fff6de;
    margin-top: 10px
}

.ticket-success .alert-success {
    background: #faf9f6 !important;
    border-radius: 16px !important;
    border-color: rgb(226 220 209 /50%) !important;
    box-shadow: 5px 5px 10px rgb(189 185 166 / 40%), -5px -5px 10px #fffefa !important;
    color: #010b46;
    font-weight: 700;
    font-size: 16px
}

.SalesBox {
    height: 53em;
    position: relative;
    margin: 1em .5em;
    border: .1em solid var(--Silver-Primary-Color)
}

.SalesBox .SalesBoxText {
    padding: 0 3.4em;
    margin: 0 auto
}

.SalesBox .SalesBoxText,
.SalesBox .SalesBoxText strong {
    font-size: 3.42rem;
    font-weight: 500;
    text-align: center;
    position: relative;
    z-index: 1;
    line-height: 2em;
    display: inline-block
}

.SalesBox .Circle,
.SalesBox .Circle2,
.SalesBox .Square,
.SalesBox .Triangle {
    position: absolute;
    animation-duration: .5s;
    animation-fill-mode: forwards
}

.SalesBox .SalesBoxText strong {
    padding: 0 .2em;
    margin-right: .1em
}

.SalesBox .Circle {
    background: var(--Wordpress-Back-Color);
    height: 8em;
    width: 8em;
    right: 2em;
    border-radius: 50%;
    background-blend-mode: color-dodge;
    animation-name: JumpDownCircle;
    animation-delay: .4s;
    top: -8em
}

@keyframes JumpDownCircle {
    0% {
        top: -8em
    }

    100% {
        top: -3em
    }
}

.SalesBox .Triangle {
    background: var(--Seo-Secondary-Color);
    width: 12em;
    height: 12em;
    border-radius: 10%;
    rotate: 45deg;
    top: -18em;
    right: 7em;
    opacity: .9;
    mix-blend-mode: multiply;
    animation-name: JumpDownTriangle;
    animation-delay: .6s
}

.SalesBox .Circle2,
.SalesBox .Square {
    animation-delay: .8s
}

@keyframes JumpDownTriangle {
    0% {
        top: -18em
    }

    100% {
        top: -7em
    }
}

.SalesBox .Circle2 {
    width: 15em;
    height: 15em;
    background: var(--Graphic-Primary-Color);
    border-radius: 50%;
    bottom: -17em;
    left: 2em;
    animation-name: JumpDownCircle2
}

@keyframes JumpDownCircle2 {
    0% {
        bottom: -17em
    }

    100% {
        bottom: -7em
    }
}

.SalesBox .Square {
    background: var(--DotNetNuke-Primary-Color);
    height: 3em;
    width: 13em;
    border-top-right-radius: 1em;
    border-top-left-radius: 1em;
    bottom: -5em;
    left: 12em;
    mix-blend-mode: multiply;
    animation-name: JumpDownSquare
}

.StepsStyle .Step:after,
.StepsStyle .Step:before {
    content: "";
    height: .1rem;
    display: block;
    border: .1em dashed var(--Silver-Secondary-Color);
    top: 2rem;
    position: absolute
}

.SalesForm label {
    display: block;
    margin: 1.6rem 0
}

.SalesForm :where(input, select) {
    width: 100%;
    height: 3.6rem;
    font-family: IranSite;
    text-align: center;
     border-radius:unset !important;
    -webkit-border-radius: unset !important;
    outline: none;
    border: 0;
    background-color: #fff;
    border-radius: 2px;
    border: 1px solid #ccc;
    box-shadow: none;
    color: #000;
    font-size: 13px;
    font-weight: 300;
}

.gap-2 {
    gap: 1rem
}

.gap-1 {
    gap: .5rem
}

.SalesForm textarea {
    height: 12rem;
    width: 100%;
    display: block
}

.bg-White {
    background-color: var(--White-Color)
}

.Buttons.Multiple a:last-of-type {
    background: var(--Black-Color)
}

.Buttons a {
    padding: 1rem 2rem;
    background: var(--Black-Color);
    /* color: #fff !important; */
}

.w-80 {
    width: 80%
}

.StepsStyle {
    min-height: 25rem;
    background: url(/portals/_default/images/StepsBack.svg) center right no-repeat
}

.StepsStyle .Step {
    width: 100%;
    position: relative;
    counter-increment: item
}

.StepsStyle .Step:before {
    width: calc(50% - .2rem);
    right: 0
}

.StepsStyle .Step:after {
    width: calc(50% - 1rem);
    left: 0
}

.StepsStyle svg {
    max-height: 2.5rem;
    max-width: 2.5rem
}

.StepsStyle .Step .Image {
    border-radius: 50%;
    border: .1em solid var(--Silver-Primary-Color);
    padding: .5rem;
    z-index: 2
}

.StepsStyle .Step .Image:before {
    content: counter(item, decimal);
    position: absolute;
    bottom: -.3em;
    left: 0
}

.StepsStyle .Step strong {
    max-width: 70%;
    text-align: center;
    line-height: 2
}

@media(max-width: 767px) {
    .databox .article-heading {
        display: flex;
        overflow-x: auto
    }

    .databox .article-heading [data-content] {
        flex: 0 0 auto
    }

    .StepsStyle {
        height: 80vh;
        background: 0 0
    }

    .StepsStyle .Step {
        height: 100%
    }

    .StepsStyle .Step:before {
        display: none
    }

    .StepsStyle .Step:after {
        height: calc(92% - 1rem);
        width: .1rem;
        border-color: var(--Silver-Primary-Color);
        bottom: 2rem;
        left: 50%
    }

    .databox .col-lg-3 {
        position: relative;
        align-self: unset;
        top: unset;
        margin-bottom: 2rem
    }
}

body,
html {
    -webkit-text-size-adjust: 100%
}

#dnn_dnnBreadcrumb_lblBreadCrumb>span {
    /* display: flex; */
    overflow-x: auto;
    line-height: 2rem
}

ol {
    list-style-type: decimal;
    list-style-position: inside
}

@media (max-width: 576px) {

    h1,
    h2,
    h3,
    h4,
    h5,
    h6 {
        font-size: 1.2rem;
        line-height: 3rem
    }
}

@media (min-width: 576px) {
    .container-fluid.container-left {
        margin-left: 0;
        padding-right: 0
    }

    .container-fluid.container-right {
        margin-right: 0;
        padding-left: 0
    }
}

@media (min-width: 768px) {

    .container-fluid.container-left,
    .container-fluid.container-right {
        padding-right: 0;
        padding-left: 0
    }
}

@media (min-width: 992px) {
    .container-fluid.container-left {
        margin-left: 0;
        padding-right: calc(50vw - 480px)
    }

    .container-fluid.container-right {
        margin-right: 0;
        padding-left: calc(50vw - 480px)
    }
}

@media (min-width: 1320px) {
    .container-fluid.container-left {
        margin-left: 0;
        padding-right: calc(50vw - 660px)
    }

    .container-fluid.container-right {
        margin-right: 0;
        padding-left: calc(50vw - 660px);
    }
}

.ContactBox {
  /* max-width: 98%; */
  max-width: 1;
}
.ContactBox > div {
  flex: 1 0 18%;
}
.ContactBox .Phone {
  border: 0.1em solid #c91d1d;
}
.ContactBox .Phone a {
  color: #c91d1d;
}
.ContactBox .Phone strong {
  background: #c91d1d;
}
.ContactBox .Ticket {
  border: 0.1em solid #ffb900;
}
.ContactBox .Ticket a {
  color: #ffb900;
}
.ContactBox .Ticket strong {
  background: #ffb900;
}
.ContactBox .Email {
  border: 0.1em solid #4a4a4a;
}
.ContactBox .Email a {
  color: #4a4a4a;
}
.ContactBox .Email strong {
  background: #4a4a4a;
}
.ContactBox .WhatsApp {
  border: 0.1em solid #00c85b;
}
.ContactBox .WhatsApp a {
  color: #00c85b;
}
.ContactBox .WhatsApp strong {
  background: #00c85b;
}
.ContactBox .Telegram {
  border: 0.1em solid #00a6e3;
}
.ContactBox .Telegram a {
  color: #00a6e3;
}
.ContactBox .Telegram strong {
  background: #00a6e3;
}
.ContactBox strong {
  text-align: center;
  padding: 2rem 0;
  color: var(--White-Color);
  font-size: 1.2rem;
}
.ContactBox a {
  font-weight: bold;
  padding: 0.7rem 0;
}

.GraphicCats.Department {
    height: 100% !important;
    overflow: auto !important
}

.GraphicCats .Caption {
    gap: 1.8em;
    margin-bottom: 1.8em
}

.GraphicCats .Caption span {
    color: var(--Silver-tertiary-Color)
}

.GraphicCats .Caption strong,
.GraphicCats .Caption strong>span {
    font-size: 1.4rem;
    font-weight: 500;
    width: 65%;
    line-height: 2em;
    color: var(--Black-Color);
    position: relative;
    margin: 0;
    display: inline;
    padding: 0;
    z-index: 2
}

.GraphicCats .Caption strong>span:before {
    content: "";
    background: var(--Department-Back-Color);
    display: block;
    position: absolute;
    width: 100%;
    height: 50%;
    bottom: 0;
    left: 0;
    z-index: -1;
    opacity: 80%
}

.GraphicCats .first em {
    font-size: 1.8rem;
    line-height: 1.45em;
    font-style: normal;
    font-weight: 400;
    padding: 1rem 0
}

.GraphicCats .List {
    background: var(--White-Color);
    margin: 1rem 0;
    box-shadow: 0 1px 2px var(--Shadow-Accent);
    position: relative
}

.GraphicCats .image {
    height: auto;
    width: 100%;
    background: var(--Department-Back-Color);
    color: var(--White-Color)
}

.GraphicCats .Description a,
.GraphicCats .Description p {
    padding: .8rem 1rem;
    color: var(--Black-Color);
    margin: 0;
    line-height: 1.8rem
}

.GraphicCats .Description h2 {
    font-size: 1.2rem
}

.GraphicCats .SeeMore {
    height: 3rem;
    margin-left: 1rem
}

.GraphicCats .SeeMore a {
    color: var(--Black-Color);
    font-size: .9rem
}
#ulHeader {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
     @media(max-width:480px) {
         grid-template-columns: repeat(2, 1fr);
    }
}

.linkitem {
    margin: 0;
    background: #4a4a4a;
    color: #fff;
    text-align: center;
    a {display:block;}
    transition:all .2s ease-in-out;
    &:hover {
        transform:scale(1.05)
    }
}
.videoBox{
    position:relative;
    cursor:pointer;
    &.play{
     &:after{
         opacity:0;
     }
    }
     &:after{
        content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' version='1.1' viewBox='0 0 512 512' enable-background='new 0 0 512 512'%3E%3Cg%3E%3Cg fill='%23231F20'%3E%3Cpath d='m354.2,247.4l-135.1-92.4c-4.2-3.1-15.4-3.1-16.3,8.6v184.8c1,11.7 12.4,11.9 16.3,8.6l135.1-92.4c3.5-2.1 8.3-10.7 0-17.2zm-130.5,81.3v-145.4l106.1,72.7-106.1,72.7z'/%3E%3Cpath d='M256,11C120.9,11,11,120.9,11,256s109.9,245,245,245s245-109.9,245-245S391.1,11,256,11z M256,480.1 C132.4,480.1,31.9,379.6,31.9,256S132.4,31.9,256,31.9S480.1,132.4,480.1,256S379.6,480.1,256,480.1z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
        width: 5rem;
        height: 5rem;
        position:absolute;
        top:50%;
        right:50%;
        transform:translate(0,-50%);
        pointer-events:none;
        opacity:1;
        transition:all 0.3s ease-in-out;
        }  
}