/* - - - - - - - - - - - - - - 
TEDAS MAIN.CSS
Version: 1.0
This Document Shared Styles for All TEDAS Products
- - - - - - - - - - - - - -  */


/* - - - - - - - VARIABLES - - - - - - -  */

:root{
                 /* COLORS */

    --tedas-tedas-100:#0466C8;
    --tedas-tedas-200:#0353A4;
    --tedas-tedas-300:#023E7D;
    --tedas-tedas-400:#002855;
    --tedas-tedas-500:#001233;
    
    --tedas-gray-100:#E9ECEF;
    --tedas-gray-200:#CED4DA;
    --tedas-gray-300:#6C757D;
    --tedas-gray-400:#495057;
    --tedas-gray-500:#343A40;

    --tedas-white:#F8F9FA;
    --tedas-black:#212529;


                 /* FONTS */

    --font-farsi: vazir, Tahoma, sans-serif;
    --font-english-thin: exo, Arial, sans-serif;
    --font-english: Arial, sans-serif;


    --tedas-font-s01: 0.625rem;                                   /*   10px - Small */
    --tedas-font-s02: 0.75rem;                                    /*   12px - Small */
    --tedas-font-s03: 0.875rem;                                   /*   14px - Small */
    
    --tedas-font-n01: 1rem;                                       /*   16px - Normal */
    --tedas-font-n02: 1.125rem;                                   /*   18px - Normal */
    --tedas-font-n03: 1.25rem;                                    /*   20px - Normal */
    --tedas-font-n04: 1.5rem;                                     /*   24px - Normal */
    
    --tedas-font-l01: 2rem;                                       /*   32px - Large */
    --tedas-font-l02: 2.5rem;                                     /*   40px - Large */
    --tedas-font-l03: 3rem;                                       /*   48px - Large */
    
    --tedas-font-e01: 3.75rem;                                    /*   60px - Extra Large */
    --tedas-font-e02: 4.5rem;                                     /*   72px - Extra Large */
    --tedas-font-e03: 5.5rem;                                     /*   88px - Extra Large */
    

    --tedas-font-weight-thin: 100;                                 /*   Font Weight */
    --tedas-font-weight-light: 300;                                /*   Font Weight */
    --tedas-font-weight-regular: 500;                              /*   Font Weight */
    --tedas-font-weight-bold: 700;                                 /*   Font Weight */
    --tedas-font-weight-black: 900;                                /*   Font Weight */
    
    
                 /* SPACING */
    
    --tedas-space-unit: 1px;
    --tedas-space-base: 4px;
    
    --tedas-space-001: var(--tedas-space-base);                   /*   4px */
    --tedas-space-002: calc(var(--tedas-space-base) * 2);         /*   8px */
    --tedas-space-003: calc(var(--tedas-space-base) * 3);         /*  12px */
    --tedas-space-004: calc(var(--tedas-space-base) * 4);         /*  16px */
    --tedas-space-005: calc(var(--tedas-space-base) * 5);         /*  20px */
    --tedas-space-006: calc(var(--tedas-space-base) * 6);         /*  24px */
    --tedas-space-008: calc(var(--tedas-space-base) * 8);         /*  32px */
    --tedas-space-010: calc(var(--tedas-space-base) * 10);        /*  40px */
    --tedas-space-012: calc(var(--tedas-space-base) * 12);        /*  48px */
    --tedas-space-016: calc(var(--tedas-space-base) * 16);        /*  64px */
    --tedas-space-020: calc(var(--tedas-space-base) * 20);        /*  80px */
    --tedas-space-024: calc(var(--tedas-space-base) * 24);        /*  96px */
    --tedas-space-032: calc(var(--tedas-space-base) * 32);        /* 128px */
    --tedas-space-040: calc(var(--tedas-space-base) * 40);        /* 160px */
    --tedas-space-050: calc(var(--tedas-space-base) * 50);        /* 200px */
    --tedas-space-100: calc(var(--tedas-space-base) * 100);       /* 400px */
    

    --tedas-line-height-100: 1.2;                                 /* Line Height */
    --tedas-line-height-200: 1.4;                                 /* Line Height */
    --tedas-line-height-300: 1.6;                                 /* Line Height */
    --tedas-line-height-400: 1.8;                                 /* Line Height */
    --tedas-line-height-500: 2;                                   /* Line Height */

    
                 /* TRANSITION */

    --tedas-duration-fast:   0.15s;
    --tedas-duration-base:   0.3s;
    --tedas-duration-slow:   0.5s;
    
    --tedas-ease-out:        ease-out;
    --tedas-ease-in-out:     ease-in-out;
    
    --tedas-transition-fast: var(--tedas-duration-fast) var(--tedas-ease-out);
    --tedas-transition-base: var(--tedas-duration-base) var(--tedas-ease-out);
    --tedas-transition-slow: var(--tedas-duration-slow) var(--tedas-ease-in-out);
}

/* - - - - - - - RESET - - - - - - -  */

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

ul, ol{
    list-style: none;
}

a{
    text-decoration: none;
}


/* - - - - - - - BASE - - - - - - -  */

html{
    scroll-behavior: smooth;
}

body{
    background-color: var(--tedas-white);
    color: var(--tedas-black);
}

.container{
    width: 100%;
    max-width: 1440px;
    margin-inline: auto;
}


/* - - - - - - - TYPOGRAPHY - - - - - - -  */

@font-face {
    font-family: exo;
    src: url(../fonts/english/redHatText-regular.ttf);
}
@font-face {
    font-family: vazir;
    src: url(../fonts/farsi/Vazir-FD-WOL.woff2),
         url(../fonts/farsi/Vazir-FD-WOL.woff),
         url(../fonts/farsi/Vazir-FD-WOL.eot),
         url(../fonts/farsi/Vazir-FD-WOL.ttf);
    }


/* - - - - - - - BUTTONS - - - - - - -  */

.btn{
    background-color: var(--tedas-tedas-400);
    color: var(--tedas-white);
    padding: var(--tedas-space-001) var(--tedas-space-012);
    border-radius: var(--tedas-space-001);
    display: inline-block;
    transition: background-color var(--tedas-transition-base);
}

.btn:hover{
    background-color: var(--tedas-tedas-200);
}


                /* FA PAGE */

body{
    font-family: var(--font-farsi);
}


                /* TOP BAR */

.top-bar{
    background-color: var(--tedas-white);
    position: sticky;
    top: 0;
    right: 0;
    z-index: 100;
}

.top-bar-content{
    height: var(--tedas-space-008);
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

.language-selector{
    margin-left: var(--tedas-space-024);
}

.language, .separator{
    font-family: var(--font-english-thin);
    font-size: var(--tedas-font-s02);
    color: var(--tedas-tedas-500);
}

.separator{
    padding: 0 var(--tedas-space-001);
}

.language-en:hover{
    color: var(--tedas-tedas-100);
    font-weight:var(--tedas-font-weight-black);
    text-shadow: 0 0 var(--tedas-space-008) var(--tedas-tedas-500);
}


                /* TOP NAV */

.nav-bar{
    background: var(--tedas-tedas-400);
    position: sticky;
    top: var(--tedas-space-008);
    z-index: 100;
}
                
.top-nav{
    height: var(--tedas-space-040);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.tedas-logo img{
    height: var(--tedas-space-016);
    margin-left: var(--tedas-space-012);
}

.top-nav-list{
    display: none;
    gap: var(--tedas-space-005);
    margin-right: var(--tedas-space-012);
}

.top-nav-list-item{
    font-size: var(--tedas-font-s03);
    color: var(--tedas-white);
    padding-bottom: var(--tedas-space-003);
    border-bottom: solid var(--tedas-space-unit) transparent;
    transition: border-color var(--tedas-transition-base);
}

.top-nav-list-item:hover{
    border-bottom: solid var(--tedas-space-unit) var(--tedas-white);
}

                /* SIDE BAR */

.side-bar-overlay {
    position: fixed;
    inset: 0;
    background: rgb(0, 40, 85, 0.7);
    z-index: 98;
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--tedas-transition-base),
                visibility var(--tedas-transition-base);
}

.side-bar-overlay-show {
    opacity: 1;
    visibility: visible;
}

.side-bar-contents{
    position: fixed;
    top: calc(var(--tedas-space-008) + var(--tedas-space-040));
    right: 0;
    width: 342px;
    height: calc(100vh - calc(var(--tedas-space-008) + var(--tedas-space-040)));
    background: var(--tedas-tedas-400);
    z-index: 99;
    transform: translate(100%);
    transition: transform var(--tedas-transition-base);
}

.side-bar-list{
    height: 100%;
    display: flex;
    flex-direction: column;
    padding-top: var(--tedas-space-016);
    align-items: stretch;
    text-align: center;
    gap: var(--tedas-space-003);
}

.side-bar-list-item{
    display: block;
    width: 100%;
    font-size: var(--tedas-font-s03);
    color: var(--tedas-white);
    padding: var(--tedas-space-003);
    transition: background-color var(--tedas-transition-base);
}

.side-bar-list-item:hover{
    background-color: var(--tedas-tedas-100);
}

.mobile-menu{
    background: transparent;
    border: transparent;
    margin-right: var(--tedas-space-012);
}

.mobile-menu:hover{
    color: var(--tedas-tedas-100);
}

.close-side-bar{
    position: absolute;
    top: 0;
    left: 0;
    color: var(--tedas-white);
    background: transparent;
    border: transparent;
    padding: var(--tedas-space-006);
    font-size : var(--tedas-font-s02);
}

.close-side-bar:hover{
    color: var(--tedas-tedas-100);
}

.show-side-bar{
    transform: translate(0);
}

                /* HERO */

.hero{
    position: relative;
    height: calc(100vh - (var(--tedas-space-008)*2 + var(--tedas-space-040)));
    background: url(../../images/general/hero.jpg) center/cover fixed;
    display: flex;
    align-items: end;
    justify-content: center;
    background-size: cover;
    background-position: center;
}

.hero::before{
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, var(--tedas-tedas-400) 5%, transparent 50%);
    pointer-events: none;
}

.hero-content{
    font-size: var(--tedas-font-n03);
    z-index: 1;
}

.hero-slogan{
    font-weight: var(--tedas-font-weight-light);
    color: var(--tedas-white);
    padding-bottom: var(--tedas-space-012);
    display: flex;
    flex-direction: column;
    align-items: center;
    font-size: var(--tedas-font-n02);
}

.hero-slogan-tedas{
    font-weight: var(--tedas-font-weight-light);
    color: var(--tedas-tedas-500);
    font-size: var(--tedas-font-l03);
    font-weight: var(--tedas-font-weight-black);
    display: block;
    margin-bottom: var(--tedas-space-005);
}

.hero-line{
    height: calc(var(--tedas-space-008));
    background: var(--tedas-tedas-400);
}

                /* FEATURES */

.features{
        background: linear-gradient(
        to bottom,
        var(--tedas-tedas-100) 0%,
        var(--tedas-tedas-100) 25%,
        var(--tedas-gray-100) 25%,
        var(--tedas-gray-100) 50%,
        var(--tedas-tedas-100) 50%,
        var(--tedas-tedas-100) 75%,
        var(--tedas-gray-100) 75%,
        var(--tedas-gray-100) 100%);
}

.features-content{
    display: grid;
    grid-template-columns: repeat(1,1fr);
    gap: var(--tedas-space-012);
    justify-content: center;
    align-content: center;
    padding: 0 var(--tedas-space-012);
    max-width: 400px;
    margin-inline: auto;
}

.features-item{
    width: fit-content;
    text-align: center;
    padding: var(--tedas-space-012) 0;
}



.feature-item-icon{
    font-size: var(--tedas-font-l01);
    color: var(--tedas-tedas-300);
    margin-bottom: var(--tedas-space-006);
}


.feature-item-header{
    color: var(--tedas-tedas-300);
    margin-bottom: var(--tedas-space-003);
}

.feature-item-text{
    color: var(--tedas-tedas-300);
    font-size: var(--tedas-font-s03);
    line-height: var(--tedas-line-height-500);
    text-align: center;
}

                /* PRODUCTS */

.products{
    background-color: var(--tedas-tedas-300);
    padding: var(--tedas-space-012) 0;
}

.products-content{
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--tedas-space-012);
    padding: var(--tedas-space-006) 5%;
}

.products-item{
    height: 100%;
    padding-bottom: var(--tedas-space-008);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.products-item-hero{
    position: relative;
    height: 250px;
    border-radius: var(--tedas-space-002);
    display: flex;
    align-items: end;
    justify-content: center;
    background-size: cover;
    background-position: center;
}

.products-item-hero::before{
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, var(--tedas-tedas-300) -5%, transparent 50%);
    border-radius: 10px;
    pointer-events: none;
}

.products-item-header{
    color: var(--tedas-white);
    margin-bottom: var(--tedas-space-003);
    font-weight: var(--tedas-font-weight-light);
    position: relative;
    z-index: 1;
}

.products-item-content{
    color: var(--tedas-white);
    text-align: center;
    margin-top: var(--tedas-space-005);
    display: flex;
    flex-direction: column;
    flex: 1;
    justify-content: space-between;
}

.products-item-text{
    font-size: var(--tedas-font-s03);
    font-weight: var(--tedas-font-weight-light);
    padding: var(--tedas-space-005) 0;
    text-align: justify;
    line-height: var(--tedas-line-height-500);
    
}

.products-item-btn{
    margin-top: auto;
    background: transparent;
    border: solid var(--tedas-space-unit) var(--tedas-white);
    font-size: var(--tedas-font-s03);
    pointer-events: none;
}

.medequip-photo{
background-image: url(../../images/general/medequip.jpg);
}

.eagleeye-photo{
    background-image: url(../../images/general/eagleeye.jpg);
}

.pharmarket-photo{
   background-image: url(../../images/general/pharmarket.jpg);
}

.irx-photo{
 background-image: url(../../images/general/irx.jpg);
}

.herbarya-photo{
   background-image: url(../../images/general/herbarya.jpg);
}

.meducation-photo{
    background-image: url(../../images/general/meducation.jpg);
}

.narcotrace-photo{
background-image: url(../../images/general/narcotrace.jpg);
}

.journalhub-photo{
background-image: url(../../images/general/journalhub.jpg);
}

.future-photo{
background-image: url(../../images/general/future.jpg);
}


                /* ABOUT */

.about{
    background: linear-gradient(
        to left,
        var(--tedas-gray-100) 0%,
        var(--tedas-gray-100) 50%,
        var(--tedas-tedas-100) 50%,
        var(--tedas-tedas-100) 100%)
}

.about-hero {
    height: 420px;
    background: url(../../images/general/about.jpg) center/cover fixed;
    display: flex;
    align-items: flex-end;
    justify-content: flex-start;
    position: relative;
}

.about-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background-color: var(--tedas-tedas-300);
    opacity: 0.3;
}

.about-container{
    display: grid;
    grid-template-columns: 1fr;
}

.mission{
    background: var(--tedas-gray-100);
    color: var(--tedas-tedas-300);
    padding: var(--tedas-space-016);
}
.vision{
    background: var(--tedas-tedas-100);
    color: var(--tedas-white);
    padding: var(--tedas-space-016);
}

.mission-content, .vision-content{
    max-width: 500px;
    justify-self: center;
}

.mission-text, .vision-text{
    padding-top: var(--tedas-space-006);
    text-align: justify;
}

                /* FOOTER */

.footer{
    background: var(--tedas-tedas-400);
    padding: var(--tedas-space-024) 0 var(--tedas-space-010);
}

.footer-content{
    display: grid;
    grid-template-columns: 1fr;
}

.contact-us{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
}

.contact-us-hero{
background-image: url(../../images/general/contact.jpg);
max-width: 500px;
margin-inline: auto;
width: 90%;
}

.contact-us-hero-header{
    color: var(--tedas-white);
    z-index: 2;
    font-weight: var(--tedas-font-weight-light);
    font-size: var(--tedas-font-n01);
    padding-bottom: var(--tedas-space-003);
}

.contact-us-content-text{
    color: var(--tedas-white);
    text-align: center;
    font-size: var(--tedas-font-s02);
    padding-top: var(--tedas-space-005);

}

.contact-us-icon{
    justify-self: center;
    padding-top: var(--tedas-space-006);
}

.contact-us-icon a {
    background: transparent;
    border: none;
    padding: var(--tedas-space-003);
    cursor: pointer;
}

.contact-us-icon a i {
    color: var(--tedas-white);
    font-size: var(--tedas-font-n04);
}

.contact-us-icon a i:hover{
    color: var(--tedas-tedas-100);
}

.location-map{
    width: 90%;
    max-width: 500px;
    margin-inline: auto;
    justify-self: center;
}
.location-map-frame{
    border-radius: var(--tedas-space-003);
    width: 100%;
    height: 350px;
}

.policy{
    background: var(--tedas-tedas-500);
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.policy-text{
    color: var(--tedas-white);
    font-weight: var(--tedas-font-weight-light);
    font-size: var(--tedas-font-s02);
}

.tedas{
    color: var(--tedas-tedas-100);
}

/* - - - ANCHOR SCROLL OFFSET - - - */

#hero,
#features,
#products,
#about,
#footer {
    scroll-margin-top: calc(var(--tedas-space-008) + var(--tedas-space-040));
}





/* - - - - - - - RESPONSIVE - - - - - - -  */


/* - - - - - - - RESPONSIVE FOR MOBILE - - - - - - -  */

                /* NAV BAR */

@media (max-width : 767px){
.tedas-logo{
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.mobile-menu{
    color: var(--tedas-white);
    font-size: var(--tedas-font-n03);
    font-weight: var(--tedas-font-weight-thin);
    padding-right: var(--tedas-space-003);
}

.features-item:nth-child(1) .feature-item-icon,
.features-item:nth-child(1) .feature-item-header,
.features-item:nth-child(1) .feature-item-text,
.features-item:nth-child(3) .feature-item-icon,
.features-item:nth-child(3) .feature-item-header,
.features-item:nth-child(3) .feature-item-text {
    color: var(--tedas-gray-100) !important;
}

                /* FOOTER */

.contact-us-icon{
    padding-bottom: var(--tedas-space-008);
}
}

/* - - - - - - - RESPONSIVE FOR TABLET - - - - - - -  */

@media (min-width : 768px) {

                /* NAV BAR */

.mobile-menu{
    display: none;
}

.top-nav-list{
    display: flex;
}

 .side-bar-overlay {
        display: none;
}

                      /* HERO */


.hero-content{
    font-size: var(--tedas-font-l01);
}
.hero-slogan{
    font-size: var(--tedas-font-n03);
}

.hero-slogan-tedas{
    font-size: var(--tedas-font-e01);
    display: inline;
}

                    /* FEATURES */

.features{
        background: linear-gradient(
        to bottom,
        var(--tedas-tedas-100) 0%,
        var(--tedas-tedas-100) 50%,
        var(--tedas-gray-100) 50%,
        var(--tedas-gray-100) 100%);
}

.features-content{
    grid-template-columns: repeat(2,1fr);
    max-width: 800px;
}

.features-item:nth-child(1) .feature-item-icon,
.features-item:nth-child(1) .feature-item-header,
.features-item:nth-child(1) .feature-item-text,
.features-item:nth-child(2) .feature-item-icon,
.features-item:nth-child(2) .feature-item-header,
.features-item:nth-child(2) .feature-item-text {
    color: var(--tedas-gray-100);
}

.features-item:nth-child(3) .feature-item-icon,
.features-item:nth-child(3) .feature-item-header,
.features-item:nth-child(3) .feature-item-text,
.features-item:nth-child(4) .feature-item-icon,
.features-item:nth-child(4) .feature-item-header,
.features-item:nth-child(4) .feature-item-text {
    color: var(--tedas-tedas-300);
}

                        /* PRODUCTS */

.products-content{
    grid-template-columns: repeat(2, 1fr);
}

.products-item:last-child{
    display: none;
}

                        /* ABOUT */

.about-container{
    grid-template-columns: repeat(2, 1fr);
}
                        /* FOOTER */

.footer-content{
    grid-template-columns: repeat(2,1fr);
}
}

/* - - - - - - - RESPONSIVE FOR DESKTOP - - - - - - -  */

@media (min-width : 1024px) {

                      /* NAV BAR */

.mobile-menu{
   display: none;
}

.top-nav-list{
    display: flex;
}


                      /* FEATURES */

.features{
        background: var(--tedas-gray-100)
}

.features-content{
    grid-template-columns: repeat(4,1fr);
    max-width: 800px;
}

.features-item:nth-child(1) .feature-item-icon,
.features-item:nth-child(1) .feature-item-header,
.features-item:nth-child(1) .feature-item-text,
.features-item:nth-child(2) .feature-item-icon,
.features-item:nth-child(2) .feature-item-header,
.features-item:nth-child(2) .feature-item-text,
.features-item:nth-child(3) .feature-item-icon,
.features-item:nth-child(3) .feature-item-header,
.features-item:nth-child(3) .feature-item-text,
.features-item:nth-child(4) .feature-item-icon,
.features-item:nth-child(4) .feature-item-header,
.features-item:nth-child(4) .feature-item-text {
    color: var(--tedas-tedas-300);
}

.features-content{
    grid-template-columns: repeat(4,1fr);
    max-width: 1200px;
}

                      /* HERO */

.hero-content{
    font-size: var(--tedas-font-l01);
}
.hero-slogan{
    font-size: var(--tedas-font-l01);
}

.hero-slogan-tedas{
    font-size: var(--tedas-font-e03);
    display: inline;
}

                    /* PRODUCTS */

.products-content{
    grid-template-columns: repeat(3, 1fr);
}

.products-item:last-child{
    display: block;
}

                    /* ABOUT */

.about-container{
    grid-template-columns: repeat(2, 1fr);
}
                   /* FOOTER */

.footer-content{
    grid-template-columns: repeat(2,1fr);
}
    
}