:root{
  /** Palette **/
  --hgw-plt-1:#2271b1;
  --hgw-plt-2:#277a5a;
  --hgw-plt-3:#cdb07a; /*rgba(205, 176, 122, 1)*/
  --hgw-plt-4:#000000;
  --hgw-plt-5:#292c41; /*Foonter Licences*/
  --hgw-plt-6:#2f334a; /*Foonter Containet*/
  --hgw-plt-7:#484a58; /*Primary Texts*/
  --hgw-plt-8:#a7a7a7;
  --hgw-plt-9:#dfdfdf;
  --hgw-plt-10:#f0f0f0;
  --hgw-plt-11:#fbfbfb;
  --hgw-plt-12:#FFFFFF;
  --hgw-plt-13:#fbfbfb; /* used for table video and table of contents */

    --hgw-plt-opacity-1:rgba(205, 176, 122, 1);       /* #1 Same */
    --hgw-plt-opacity-2:rgba(205, 176, 122, 0.5);     /* #1 Same */
    --hgw-plt-opacity-3:rgba(205, 176, 122, 0.09);    /* #1 Same */

    --hgw-plt-opacity-4:#484a5833;                    /* #2 Same */
    --hgw-plt-opacity-5:#484a58CC;                    /* #2 Same */
    --hgw-plt-opacity-6:#484a5817;                    /* #2 Same */
    --hgw-plt-opacity-7:rgba(72, 74, 88, 0.8);        /* #2 Same */

    --hgw-plt-opacity-8:rgba(0,0,0,.03);              /* #3 Same */
    --hgw-plt-opacity-9: rgba(0,0,0,.1);              /* #3 Same */

    --hgw-plt-opacity-10:rgba(178, 178, 178, 0.48);
    --hgw-plt-opacity-11:rgba(178, 178, 178, 0.38);
    --hgw-plt-opacity-12:rgba(218, 218, 218, 0.43);
    
    --hgw-plt-opacity-10-13:#f9f9f9cc;                   /* #4 Same */
    --hgw-plt-opacity-11-14: rgba(255,255,255,0.15);     /* #4 Same */
    --hgw-plt-opacity-12-15: rgba(255,255,255,0.1);      /* #4 Same */

    --hgw-plt-opacity-13-16:transparent;                   /* #5 Same */
}
:root{
  /** Text Color **/
  --hgw-color-text-1: var(--hgw-plt-1);
  --hgw-color-text-2: var(--hgw-plt-2);
  --hgw-color-text-3: var(--hgw-plt-3);
  --hgw-color-text-4: var(--hgw-plt-7);
  --hgw-color-text-5: var(--hgw-plt-9);
  --hgw-color-text-6: var(--hgw-plt-12);
    --hgw-color-text-opacity-1: var(--hgw-plt-opacity-5);  /* #1 Same */
    --hgw-color-text-opacity-2: var(--hgw-plt-opacity-13);  /* #2 Same */
  
  /** Background Color **/
  --hgw-color-bg-1: var(--hgw-plt-2);
  --hgw-color-bg-2: var(--hgw-plt-3);
  --hgw-color-bg-3: var(--hgw-plt-4);
  --hgw-color-bg-4: var(--hgw-plt-5);
  --hgw-color-bg-5: var(--hgw-plt-6);
  --hgw-color-bg-6: var(--hgw-plt-7);
  --hgw-color-bg-7: var(--hgw-plt-10);
  --hgw-color-bg-8: var(--hgw-plt-11);
  --hgw-color-bg-9: var(--hgw-plt-12);
  --hgw-color-bg-10: var(--hgw-plt-13);
    --hgw-color-bg-opacity-1: var(--hgw-plt-opacity-6);  /* #1 Same */
    --hgw-color-bg-opacity-2: var(--hgw-plt-opacity-7);  /* #1 Same */
    --hgw-color-bg-opacity-3: var(--hgw-plt-opacity-3);  /* #2 Same */
    --hgw-color-bg-opacity-4: var(--hgw-plt-opacity-8);  /* #3 Same */
    --hgw-color-bg-opacity-5: var(--hgw-plt-opacity-16); /* #4 Same */
  
  /** background Color gradient **/
  --hgw-color-bg-gr-1: linear-gradient(to bottom,rgba(47, 51, 74, 0) 0%,rgb(47, 51, 74,.2) 0%,rgba(47, 51, 74,1) 100%);
  --hgw-color-bg-gr-2: linear-gradient(to bottom,rgba(47, 51, 74, 0) 0%,rgb(47, 51, 74,.5) 0%,rgba(47, 51, 74,1) 100%);
  
  /** Border Color **/
  --hgw-color-border-1: var(--hgw-plt-2);
  --hgw-color-border-2: var(--hgw-plt-3);
  --hgw-color-border-3: var(--hgw-plt-5);
  --hgw-color-border-4: var(--hgw-plt-6);
  --hgw-color-border-5: var(--hgw-plt-7);
  --hgw-color-border-6: var(--hgw-plt-8);
  --hgw-color-border-7: var(--hgw-plt-10);
    --hgw-color-border-opacity-1: var(--hgw-plt-opacity-2);
    --hgw-color-border-opacity-2: var(--hgw-plt-opacity-4);
    --hgw-color-border-opacity-3: var(--hgw-plt-opacity-6);
    --hgw-color-border-opacity-4: var(--hgw-plt-opacity-9);
    --hgw-color-border-opacity-5: var(--hgw-plt-opacity-14);
    --hgw-color-border-opacity-6: var(--hgw-plt-opacity-15);
  /** Shadow Color **/
  --hgw-color-shadow-opacity-1:var(--hgw-plt-opacity-10);
  --hgw-color-shadow-opacity-2:var(--hgw-plt-opacity-11);
  --hgw-color-shadow-opacity-3:var(--hgw-plt-opacity-12);
}

/*
* ========================================================
* Text Color
* ========================================================
*/
body,
p,
#site-header a,
#site-header nav.site-menu ul li a,
#site-content.front-page #hero-section .hero-items li,
#site-content.front-page .why-naati .item .content,
.post .meta__column,
.post .meta__column a,
.post .meta__column i{
  color: var(--hgw-color-text-opacity-1); /* Text Color LV2 */
}

a,
a b,
a strong,
a h1,a h2,a h3,a h4,a h5,a h6,
.btn.primary.gray,
.btn.border,
.btn.border a,
#site-content.front-page #hero-section .short-description,
#site-content.front-page #hero-section h1,
#site-header nav.site-menu ul li.current_page_item a,
#site-header .quick-contact a{
  color: var(--hgw-color-text-4); /* Text Color LV1 */
}
.support-btn-container .hidden-content .phone-number a,
.post-content a{
	color: var(--hgw-color-text-1);
}

#site-content.front-page #hero-section h1 em,
#site-header nav.site-menu #desktop-menu ul li a:hover,
#main-content .pagination .page-numbers:not(.next),
.post .meta__column .cat-links a{
  color: var(--hgw-color-text-3); /* Gold LV1 */
}

#site-content.front-page #hero-section h1 i,
#start-content .col.toc .table-of-content a,
#site-content.front-page #translation-iran ul li::marker{
  color: var(--hgw-color-text-2); /* Green LV1 */
}

.btn.primary,
.faq-wrap .faq-item .faq-btn .faq-question::before,
.wpsp-faq__wrap .wp-block-wpsp-faq-child .wpsp-faq-item .wpsp-faq-questions-button .wpsp-question::before,
#site-content.front-page #faq-and-steps .steps-column .step h3 span.item-number,
#site-footer,
#site-footer p,
#site-footer a,
#site-footer b,
#site-footer b a,
#site-footer strong,
#site-footer strong a,
#site-footer h1,#site-footer h2,#site-footer h3,#site-footer h4,#site-footer h5,#site-footer h6,
#site-footer h1 a,#site-footer h2 a,#site-footer h3 a,#site-footer h4 a,#site-footer h5 a,#site-footer h6 a{
  color: var(--hgw-color-text-6); /* White LV1 */
}

#site-footer .copyright p{
  color: var(--hgw-color-text-5);
}
#site-content.front-page #tables .buttons a.active,
#site-content.front-page #tables table th,
#site-footer .copyright p a{
  color: var(--hgw-color-text-6); /* White LV1 */
}

.widget-posts.view-image,
.widget-posts.view-image span,
.widget-posts.view-image i,
.widget-posts.view-image a,
.widget-posts.view-image a strong{
  color: var(--hgw-color-text-opacity-2); /* White LV2 */
}

@media (max-width: 780px){
  #site-header .site-menu .nav-toggle,
  #site-header nav.site-menu ul li.current_page_item a,
  #site-header nav.site-menu ul li a,
  #site-header .site-menu .nav-toggle button,
  #site-header nav.site-menu a.whatsapp{
    color: var(--hgw-color-text-6); /* White LV1 */
  }
}
/*
* ========================================================
* Background Color
* ========================================================
*/
body,
.support-btn-container .hidden-content .content,
.support-btn-container .hidden-content .content-vector .entry,
#site-header nav.site-menu ul ul,
#site-content.front-page .certificates,
body.page #site-content.one-color,
body.page #main-content,
body.page #sidebar .widget,
body.single #site-content.one-color,
body.single #main-content,
body.single #sidebar .widget,
.categories-bar a.current-cat,
.title.left-line > .entry-title,
#site-content.front-page .why-naati .item.centered,
#start-content .col.toc ol,
#site-content.front-page #tables table tr:nth-child(2n) td,
#other-description-naati .entry{
  background-color: var(--hgw-color-bg-9); /* White LV1 */
}
#site-content.normal-page,
body.single #site-content,
.post .meta__column .tags-links a,
.post .meta__column .cat-links a,
#comments .comment-list ol .entry-comment,
#comments .comment-list ol ol ol .entry-comment,
#comments #respond,
#comments #respond >#commentform #submit,
.faq-wrap .faq-item .faq-btn:hover,
.wpsp-faq__wrap .wp-block-wpsp-faq-child .wpsp-faq-item .wpsp-faq-questions-button:hover,
#site-content.front-page .why-naati .item,
#site-content.front-page #tables table td,
.widget-posts .inline-posts{
  background-color: var(--hgw-color-bg-8); /* White LV2 */
}

#comments #respond >#commentform #submit:hover,
#site-content.front-page #tables .buttons,
.tooltip .entry{
  background-color: var(--hgw-color-bg-7); /* White LV3 */
}

#site-header .quick-contact.show-in-moble .entry.active,
#start-content .col.toc .table-of-content,
#start-content .row.bottom .video-container .entry,
a.btn.telegram{
  background-color: var(--hgw-color-bg-10);
}

#other-description-naati .entry .readmore-content button,
#main-content .pagination .page-numbers:not(.next),
#site-content.front-page #faq-and-steps .steps-column .step h3 span.item-number{
  background-color: var(--hgw-color-bg-6); /* Text Color LV1 */
}

.categories-bar,
.btn.primary.gray{
  background-color: var(--hgw-color-bg-opacity-1); /* Text Color LV4 */
}

#site-footer,
#site-footer .main-row .entry-footer-licenses .license img{
  background-color: var(--hgw-color-bg-5);
}
#site-footer .main-row{
  background-color: var(--hgw-color-bg-4);
}

#site-header nav button,
form.search-form button,
form.search-form input,
.faq-wrap .faq-item,
.wpsp-faq__wrap .wp-block-wpsp-faq-child .wpsp-faq-item,
#comments .comment-list ol ol .entry-comment{
  background-color: var(--hgw-color-bg-opacity-5);
}

#start-content .row.top .title::before,
#start-content .row.bottom .header::before,
#translation-iran .title .entry-title::before,
.title.with-description h2::before,
.title.left-line > .entry-title::before,
.faq-wrap .faq-item.faq-item-active .faq-btn .faq-question::before,
.wpsp-faq__wrap .wp-block-wpsp-faq-child .wpsp-faq-item.wpsp-faq-item-active>.wpsp-faq-questions-button .wpsp-question::before,
#site-content.front-page #tables .buttons a.active,
#site-footer .bottom-row .bottom-row-entry #to-the-top a,
#copied-short-link span{
  background-color: var(--hgw-color-bg-2); /* Gold V1 */
}

#toggle-effect.active{
  background-color: var(--hgw-color-bg-3);
}

.btn.border:hover{
  background-color:var(--hgw-color-bg-opacity-4)
}
.post .meta__column .cat-links a,
.faq-wrap .faq-item.faq-item-active .faq-btn,
.faq-wrap .faq-item.faq-item-active .faq-btn:hover,
.wpsp-faq__wrap .wp-block-wpsp-faq-child .wpsp-faq-item.wpsp-faq-item-active>.wpsp-faq-questions-button,
.wpsp-faq__wrap .wp-block-wpsp-faq-child .wpsp-faq-item.wpsp-faq-item-active>.wpsp-faq-questions-button:hover{
  background-color: var(--hgw-color-bg-opacity-3)
}

#start-content .row.bottom .header::before,
#site-content.front-page #faq-and-steps .faq-column .title.left-line > .entry-title::before,
.btn.primary,
.faq-wrap .faq-item .faq-btn .faq-question::before,
.wpsp-faq__wrap .wp-block-wpsp-faq-child .wpsp-faq-item .wpsp-faq-questions-button .wpsp-question::before,
#site-content.front-page #tables table th{
  background-color: var(--hgw-color-bg-1)
}

.widget-posts.view-image .post .image::after{
  background: linear-gradient(to bottom,rgba(47, 51, 74, 0) 0%,rgb(47, 51, 74,.2) 0%,rgba(47, 51, 74,1) 100%);
}
.widget-posts.view-image .post:hover .image::after{
  background: linear-gradient(to bottom,rgba(47, 51, 74, 0) 0%,rgb(47, 51, 74,.5) 0%,rgba(47, 51, 74,1) 100%);
}

@media (min-width: 980px){
    #site-content.front-page #faq-and-steps .steps-column .step:hover h3 span.item-number{
      color: var(--hgw-color-text-4); /* Text Color LV1 */
    }
    #site-content.front-page #faq-and-steps .steps-column .step:hover h3 span.item-number{
      border-color: var(--hgw-color-border-2)
    }
    #site-content.front-page #faq-and-steps .steps-column .step:hover h3 span.item-number{
      background-color: var(--hgw-color-bg-opacity-3)
    }
}
@media (max-width: 980px){
  #site-content.front-page .why-naati .entry > .items .item.centered{
    background-color: var(--hgw-color-bg-8)
  }
    #site-content.front-page #faq-and-steps .steps-column .step.active h3 span.item-number{
      color: var(--hgw-color-text-4) /* Text Color LV1 */
    }
    #site-content.front-page #faq-and-steps .steps-column .step.active h3 span.item-number{
      border-color: var(--hgw-color-border-2)
    }
    #site-content.front-page #faq-and-steps .steps-column .step.active h3 span.item-number{
      background-color: var(--hgw-color-bg-opacity-3)
    }
}
@media (min-width: 720px){
  #posts .post .post-thumbnail a::before{
    background-color: var(--hgw-color-bg-opacity-2)
  }
}

@media (max-width: 780px){
  #site-header .site-menu .nav-toggle .entry-nav-toggle{
    background-color: var(--hgw-color-bg-4)
  }
  #site-header nav.site-menu ul ul,
  #site-header nav.site-menu ul ul ul ul{
    background-color: var(--hgw-color-bg-opacity-5)
  }
  #site-content.front-page .why-naati .entry > .items .item{
    background-color: var(--hgw-color-bg-8) !important;
  }
}
@media (max-width: 720px){
  #site-header nav.site-menu ul li.current-menu-item::before,
  #site-header nav.site-menu ul li.current-menu-item::after{
    background-color: var(--hgw-color-bg-3);
  }
}
/*
* ========================================================
* Border Color
* ========================================================
*/
#start-content .row.bottom .video-container::before,
#site-content.front-page .why-naati .item.centered::after,
#site-header nav.site-menu ul ul,
.categories-bar a,
form.search-form,
#site-content.front-page #faq-and-steps .steps-column .step p.item-content{
  border-color: var(--hgw-color-border-opacity-2);
}
#site-content.front-page .why-naati .item .content li::before{
	border-color: var(--hgw-color-border-1)
}
#site-header,
#site-header nav.site-menu ul ul li,
.faq-wrap .faq-item,
.wpsp-faq__wrap .wp-block-wpsp-faq-child .wpsp-faq-item,
.title.left-line::after,
#posts .post,
.widget-posts.view-advance,
.widget-posts.view-advance .inline-posts,
.widget-posts.grid-image,
.blog-widgets.widgets-area .columns .left-column #sidebar .widget,
.widget .hgwnaati-nav-menu .toggle,
#posts .post .post-footer,
#comments .comment-list>li{
  border-color: var(--hgw-color-border-opacity-3)
}

#site-content.front-page #faq-and-steps .steps-column .step h3 span.item-number{
  border-color: var(--hgw-color-border-5)
}

.faq-wrap .faq-item.faq-item-active,
.wpsp-faq__wrap .wp-block-wpsp-faq-child .wpsp-faq-item.wpsp-faq-item-active{
  border-color: var(--hgw-color-border-opacity-1)
}

#site-footer,
#site-content.front-page .why-naati .item.centered::before,
#other-description-naati .entry::before{
  border-color: var(--hgw-color-border-2)
}

#site-footer .bottom-row .bottom-row-entry .nav-links a{
  border-color: var(--hgw-color-border-3)
}

#site-footer .main-row .entry-footer-licenses .license{
  border-color: var(--hgw-color-border-4)
}

#site-footer .top-row .footer-contact address .btn.location{
  border-color: var(--hgw-color-border-6)
}


@media (max-width: 780px){
  #site-header nav.site-menu ul li a{
    border-color: var(--hgw-color-border-4)
  }
  #site-header nav.site-menu ul ul li a{
    border-color: var(--hgw-color-border-opacity-6)
  }
}
@media (max-width: 680px){
  #site-footer .top-row .entry > .footer-contact{border-color: var(--hgw-color-border-3);}
}
body.page #sidebar .widget .widget-title,
body.single #sidebar .widget .widget-title{
  border-color: var(--hgw-color-border-7)
}
.btn.border{
  border-color: var(--hgw-color-border-opacity-4)
}
/*
* ========================================================
* BoxShadow Color
* ========================================================
*/
#site-header .quick-contact.show-in-moble .entry.active{
  box-shadow: 0 5px 15px 5px var(--hgw-color-shadow-opacity-2)
}
#site-header nav.site-menu ul ul{
  box-shadow: 0 5px 15px 5px var(--hgw-color-shadow-opacity-3)
}
#site-content.front-page .certificates{
  box-shadow: 0 35px 82px -28px var(--hgw-color-shadow-opacity-3)
}
#site-content.front-page .why-naati .item.centered{
  box-shadow: 0 65px 102px -28px var(--hgw-color-shadow-opacity-2)
}
#other-description-naati .entry{
  box-shadow: 0 0 120px -28px var(--hgw-color-shadow-opacity-1)
}
#site-content.one-color #sidebar .widget{
  box-shadow: 0 5px 15px 5px var(--hgw-color-shadow-opacity-3)
}
