/* ----------*----------*----------*----------*---------- Fonts */

@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@200;300;400;500;600;700&family=Plus+Jakarta+Sans:wght@200;300;400;500;600;700;800&display=swap');
/* 
    font-family: 'Oswald', sans-serif;
    font-family: 'Plus Jakarta Sans', sans-serif;
*/

/* ----------*----------*----------*----------*---------- Reset */

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


/* ----------*----------*----------*----------*---------- General Styles */


:root {  
    
    /* font-size: 10px; */ /*- highly fix value */
    font-size: 62.5%; /*  flexible value*/

    /* 16px      10px
        100%      X%? 
        X=62.5%

    */


    /* ----------*----------*----------*---------- Website Theme */
    /* --color-primary: #3a91d6; */
    --color-primary: white;
    
    --color-secondary: hsl(207, 66%, 53% ); 
    /* --color-secondary: hsl(0, 0%, 11%); */
    /* --color-secondary-m: hsla(0, 0%, 11%, 0.4); */
  
    --color-tertiary: hsl(0, 0%, 17%);
    --color-quaternary: hsl(0, 1%, 50%);
    --color-tertiary: hsl(0, 0%, 11%);              /*dark-grey?  */
    
    --color-quaternary: hsl(0, 1%, 50%);            /* grey */
    --color-quaternary: rgb(153,153,153);

    --color-accent: hsl(349,68%,33%);
    --color-midtone: hsl(240,8%,51%);

    /* ----------*----------*----------*---------- Padding */
    /* 
            --------------------- Sizing Nature
            d     = dynamic - can change, depends from viewport
            st    = static - will not change

            --------------------- Sizing

            l     = large
            m     = medium
            s     = small
            xs    = extra small
            c     = customized

            
            --------------------- Orientation
            v  = vertical   (top & bottom)
            h  = horizontal (right & left)
    */

  /* Dynamic */
    --padding-dynamic-padding: calc(2rem + 12vw);
    
    

    /* - these values from expirience */
    /* Dynamic */ 
  --padding-d-l-v: calc(2rem + 12vh); /* padding large vertically: example: */
  --padding-d-l-h: calc(2rem + 12vw); /* padding large horizontal: example: 1500px =200px*/

  --padding-d-mc-v: calc(1rem + 4vh); /* padding medium customized vertically: example: */
  --padding-d-mc-h: calc(1rem + 4vw); /* padding medium customized horizontal: 900px example: =46px*/

  --padding-d-m-v: calc(1rem + 2vh); /* padding medium vertically: example: */
  --padding-d-m-h: calc(1rem + 2vw); /* padding medium horizontal: example: 500px   =20px*/

  --padding-d-s-h: calc(1rem + 1vw); /* padding small horizontal: example: 320px   =13.2px*/
  --padding-d-s-v: calc(1rem + 1vh); /* padding small vertically: example:   */

  /* Static */
  --padding-st-l-h: 3rem;            /* padding static large horizontal: example:   30px*/
  --padding-st-l-v: 2rem;            /* padding static large vertically: example:   20px*/

  --padding-st-m-h: 2.5rem;          /* padding static medium horizontal: example:   25px*/
  --padding-st-m-v: 1.5rem;          /* padding static medium vertically: example:   15px*/

  --padding-st-s-h: 2rem;           /* padding static small horizontal: example:   20px*/
  --padding-st-s-v: 1rem;           /* padding static small vertically: example:   10px*/





  /* ----------*----------*----------*---------- Font size*/


  /* 
      --------------------- Sizing Nature
      d     = dynamic  
      st    = static 
      
      --------------------- Sizing
      xl    = extra large
      l     = large
      m     = medium
      s     = small
      xs    = extra small
      c     = customized
      
      --------------------- Family
      font-family: 'Oswald', sans-serif;
      font-family: 'Plus Jakarta Sans', sans-serif;
*/

/* Dynmaic */
  --font-size-d-lc: calc(3rem + 3.5vw);
  --font-size-d-l: calc(2rem + 3vw);
  --font-size-d-mc: calc(2rem + 2.5vw);
  --font-size-d-m: calc(1rem + 2vw);
  --font-size-d-sc: calc(1rem + 1.5vw);
  --font-size-d-s: calc(1rem + 1vw);

  /* Static */
  --font-size-st-xl: 4rem;
  --font-size-st-lc: 3.5rem;
  --font-size-st-l: 3rem;
  --font-size-st-mc: 2.5rem;
  --font-size-st-m: 2rem;
  --font-size-st-sc: 1.5rem;
  --font-size-st-s: 1rem;

    /* Family */
    --font-family-title: "Oswald", sans-serif;
    --font-family-content: "Plus Jakarta Sans", sans-serif;

    /* background-color: rgb(145, 43, 43); */
    background-color: var(--color-primary);
}



body {
    /* background-color: var(--color-primary); */
    /* background-color: rgb(145, 43, 43); */
    font-family: var(--font-family-content);
    /* font-family: Arial, Helvetica, sans-serif; */
    line-height: 1.6;
}

a {
    text-decoration: none;
    border-radius: 1rem;
}

li {
    list-style: none;
}



/* ----------*----------*----------*----------*---------- Utility classes - classes, shared in whole project between elements*/
/* They going to be uplide to html elements.
Goal to create them - to not to repeat myself to much times.

I create classes, css provide them, and then we only give to html elements those classes.
I can create css framework with those. But we create mimimum of them.

Don't get creasy with them:
-Minuses:
1. That takes a lot of time
2. I need create documentation with that, with some Naming Convention

Better to do so.
If we have repetition style - add them to utility classes, and then add them to html elements
*/

/* ----------*----------*----------*-- Section Padding */
.section__padding {
    /* padding: var(--padding-d-l-v) var(--padding-d-l-h); */
    padding: var(--padding-d-mc-v) var(--padding-d-l-h);

    


    
}



/* ----------*----------*----------*----------*---------- Overall Layout */

.container {
    display: grid;
    /* 1500px/12=120px=12.5rem  */
    grid-template-columns: [container-start] repeat(12, minmax(min-content,12.5rem)) [container-end];
    grid-template-rows: repeat(3,min-content);
    justify-content: center;

    height: 100vh;
    /* height: 100%; */
    /* align-content: space-between; */
}

.overall-layout {
    grid-column: container-start / container-end;
}

/* ----------*----------*----------*----------*---------- Main-content */
.main {
    display: flex;
    gap: 2rem;
    justify-content: space-between;
    justify-content: center;

    /* padding-top: var(--padding-d-mc-v); */
    padding: var(--padding-d-mc-v) var(--padding-d-l-h);


}

.main__logo-and-login {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.main__logo-and-login--img {
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;

    width: 11.5rem;
    /* align-self: flex-start; */
    /* justify-self: center; */
}

.main__logo-and-login--img img {
    width: 100%;
    height: 100%;
    object-fit: cover;

}

/* ------Login */
.main__logo-and-login--login {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.main__logo-and-login--login__reg input[type="submit"] {
    border: none;
    background-color: transparent;
    color: rgb(0,102,255);
    font-size: 1.3rem;
}

.main__logo-and-login--login__reg input[type="submit"]:hover {
    cursor: pointer;
    /* color: var(--color-accent); */
    color: #c90000;
    font-weight: 600;
}

.main__logo-and-login--login__log ul {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.main__logo-and-login--login__log input[type="text"] {
    height: 2.5rem;
}

.main__logo-and-login--login__log input[type="password"] {
    height: 2.5rem;
}

.main__logo-and-login--login__log input[type="submit"] {
    width: 10rem;
    background-color: rgb(47,129,252);
    color: white;
    padding: 0.5rem 1rem;
    border: 1px solid white;
    border-radius: 0.5rem;
    font-size: 1.4rem;
    text-align: center;
}

.main__logo-and-login--login__log input[type="submit"]:hover {
   
    /* border: 1px solid #c90000; */
    background-color: #c90000;
    cursor: pointer;
}



.login_holder {
    align-self: flex-end;
    
}

/* .main__logo-and-login--login h2 {
    font-size: 2rem;
} */


/* ------Map */

.main__map {
    display: flex;
    flex-direction: column;
    gap: 0;
    align-items: center;
}

.main__map__img {
    display: flex;
    justify-content: center;
    align-items: center;

    /* width: 60.8rem;
    height: 60.8rem; */

    width: auto;
    height: 100%;

}

.main__map__img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}



/* ------ Country links */
.main__companies {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    align-items: flex-end;

}

.main__companies li {
    display: flex;
    gap: 1rem;
}

.main__companies li a {
    color: var(--color-quaternary);
    font-size: 1.2rem;
    display: block;
    width: max-content;
}

.main__companies li a:hover {
    color: var(--color-tertiary);
    /* font-weight: bolder; */
}

.main__companies li a i {
    display: inline-block;
    width: 2.7rem;
    height: 1.8rem;
    background-repeat: no-repeat; 

    margin-left: 1rem;
}

a#austria i { 
    background-image: url(../images/img_flags/index/flag-aus.png); 
}

a#bosnia i { 
    background: url(../images/img_flags/index/flag-bosnia.png);
}
a#bulgaria i { 
    background: url(../images/img_flags/index/flag-bulgaria.png);
}
a#croatia i { 
    background: url(../images/img_flags/index/flag-croatia.png); 
}

a#poland i { 
    background: url(../images/img_flags/index/flag-poland.png);
}

a#romania i { 
    background: url(../images/img_flags/index/flag-rumania.png);
}

a#russia i { 
    background: url(../images/img_flags/index/flag-russia.png); 
}

a#slovakia i {
    background: url(../images/img_flags/index/flag-slovakia.png);
}

a#ukraine i {
    background: url(../images/img_flags/index/flag-ukraine.png); 
}

a#moldova i {
    background: url(../images/img_flags/index/flag-moldova.png); 
}

a#serbia i { 
    background: url(../images/img_flags/index/flag-serbia.png);
}
a#montenegro i {
    background: url(../images/img_flags/index/flag-montenegro.png);
}

a#macedonia i { 
    background: url(../images/img_flags/index/flag-macedonia.png);
}

a#albania i { 
    background: url(../images/img_flags/index/flag-albania.png);
}

a#kosovo i { 
    background: url(../images/img_flags/index/flag-kosovo.png); 
}

a#hungary i { 
    background: url(../images/img_flags/index/flag-hungary.png);
}



/* ------ Info about companies in country */


div.showadr {
    z-index:1000;
    position: relative;
    
    width: 100%;

    padding: 0 var(--padding-d-l-h) 0 var(--padding-d-l-h);
}

ul.companies { 
    /* float: left;  */
    position: absolute;
    top: -17rem;
    left: 20rem;
    

    display: flex;
    gap: 4rem;
    justify-content: space-between;
    /* bottom: 0px; */
}

ul.companies li { 
    display: flex;
    flex-direction: column;
    gap: 1rem;
    /* float: left; 
    margin-right: 2em;  */
}

ul.companies li h3  { 
    position: relative;
    z-index:40; 
    padding-left: 35px;
    /* margin-bottom: 0.1 em; */
    /* font-weight: normal; */
    
    
    
}

ul.companies li h3:hover {
    position: relative;
    padding-left: 35px;
    /* margin-bottom: 0.1 em; */
    font-weight: normal;
    
    /* color: var(--color-tertiary); */
    color: hsl(0,0,40%);

}

ul.companies li h3 .lin { 
    /* font-size: 1.8rem;
    font-weight: 900; */
    /* color: #666666; 
    color: #666666;  */
    /* color: var(--color-tertiary); */
    /* color: var(--color-quaternary); */
    /* color: #2e2d2d;  */
    /* color: hsl(0,0,40%); */
    font-size: 1.8rem;
    font-weight: 900;
    color: hsl(0,0,40%);
}

ul.companies li h3:hover .lin {
    /* font-weight: normal;  */
    /* text-decoration:underline; */
    /* color: black; */
    color: var(--color-accent);
    color: var(--color-midtone);
    text-decoration: none;
}



ul.companies li h3 i { 
    position: absolute;
    width: 23px;
    height: 16px; 
    background: url(../images/icons/arrow.png) no-repeat;
    left: 0px;
    top: 0.1em; 
}

ul.companies li h3:hover i {
    position: absolute;
    width: 23px;
    height: 16px;
    background: url(../images/icons/arrowact.png) no-repeat;
    left: 0px; 
    top: 0.1em;
}

div.company {
    /* position: relative;  */
    z-index:60;

    display: flex;
    gap: 2rem;
}
.company-img {
    width: 11.5rem;
}
.company img { 
    /* float: left;  */
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.company p {
    /* margin-left: 100px; */
    /* font-size: 0.75em;  */
    color: #666;
    /* padding-left: 1em; */
    /* line-height: 1.2em;  */
    font-size: 1.1rem;
}

.company p a { 
    color: #0033ff; 
}
/* ----------*----------*----------*----------*---------- Footer */

footer {
    display: flex;
    justify-content: center;

    gap: 4rem;

    /* padding-top: var(--padding-d-mc-v); */
    /* padding: 0 var(--padding-d-l-h); */
    /* padding: 0 var(--padding-d-l-h) var(--padding-d-mc-v) var(--padding-d-l-h); */

    padding: 0 var(--padding-d-l-h) var(--padding-d-s-v) var(--padding-d-l-h);
    padding: 0 var(--padding-d-l-h) 1rem var(--padding-d-l-h);

    font-size: var(--font-size-st-s);
    /* color: var(--color-quaternary); */
    color: var(--color-tertiary);
 
    
}

/* ******************************************************************************************************** Media QUERIES */

@media screen and (max-width: 1350px) { 
    .main {
        flex-wrap: wrap;
        gap: 4rem;
    }

    .main__logo-and-login {
        width: 80%;
        align-items: center;
    }  

    .main__map {
        display: none;
    }

    /* Companies links gou down */
    .main__companies {
        display: grid;
        /* grid-template-columns: repeat(auto-fit, minmax(30rem, 1fr));
        gap: 1.5rem; */
        grid-template-columns: repeat(4,1fr);
        gap: 1.5rem 4rem;
        align-items: center;
        justify-items: end;
    }

    /* div  */
    div.showadr {
        position: static;
        
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 3rem;
        margin-bottom: 2rem;

    }

    ul.companies {
        position: static;
    }

}



@media screen and (max-width: 900px) { 
    .main {
        padding: var(--padding-d-m-v) var(--padding-d-m-h);
    
    }

    div.showadr {
         padding: 0 var(--padding-d-m-h) 0 var(--padding-d-m-h);
    }

    footer {
        padding: 0 var(--padding-d-m-h) 1rem var(--padding-d-m-h);
           
    }
}

@media screen and (max-width: 660px) { 
   
    .main__companies {
       
        grid-template-columns: repeat(3,1fr);
        gap: 1.5rem 4rem;
        align-items: center;
        justify-items: end;
    }
}

@media screen and (max-width: 500px) { 
   
    .main__companies {
       
        /* grid-template-columns: repeat(2,1fr); */
        gap: 1.5rem 2rem;
        /* align-items: center;
        justify-items: end; */
    }

    .main__companies li a {
        font-size: 1.1rem;
   }
   
    .main__companies li a i {
       width: 2.5rem;
       height: 1.6rem;

       margin-left: 0.5rem;
   }
    
    .footer {
        flex-direction: column;
        
        gap: 0;
        align-items: center;
    }

   
}

@media screen and (max-width: 420px) { 
   
    .main__companies {
       
        grid-template-columns: repeat(2,1fr);
       
    }
  
}