/*
====================================================================
CSS
CSS za stilizovanje
SERVICES PAGE
Sindiri Studio 
v1.0
Miloš Krčobić
=====================================================================
*/


/*
=====================================================================
STANDARDI ELENTI
=====================================================================
*/

html
{scroll-behavior: smooth;}

body
{
    margin: 0;
    padding: 0;
    font-size: 16px;
}

/*
=====================================================================
CONTAINER U KOJI SE SMESTAJU SVI ELENTI
=====================================================================
*/
.container
{
    /*width: 100%;*/
    /*margin-bottom: 130px;*/
    font-family: 'Roboto', sans-serif;
}

/*LOGO U NAV BAR-U*/
.logo
{
    height: 48px;
    width: 140px;

    margin-left: 45px;

    background-image: url("../../slike/logo.png");
    background-position: center; 
    background-repeat: no-repeat; 
}

/*DUGME U NAV BAR-U*/
.btn_info
{
    display: block;

    height: 37px;
    width: 142px;
    padding-top: 4px;
    
    cursor: pointer;
    margin-right: 56px;
    margin-top: 41px !important;
    background-color: white;
    color: #2B3A66 !important;

    
    font-size: 1rem;
    font-weight: 300;
    letter-spacing: 0;
    text-align: center;
    text-transform: uppercase;
    text-decoration: none;

    border: none;

}

/*kako bi se pojavila linija ispod USLUGA u nav-bar-u*/
.active
{border-bottom: 3px solid #3881B6;}

/*DUGME JE NA POCETKU SAKRIVENO, POZICIJA JE FIKSIRANA U DONJEM DESNOM UGLU,
OSTALE STVARI SE TICU STILIZOVANJA SAMOG DUGMETA I POZADI*/
.btn_Top 
{
    display: none;
    position: fixed;
    bottom: 20px; 
    right: 30px; 
    z-index: 99; 
    border: none; 
    outline: none; 
    
    cursor: pointer; 
    padding: 15px;
    

    background-image: url("../../ikonice/strelica.png");
    background-position: center; 
    background-repeat: no-repeat; 
    background-color: transparent;
}

/*KLASA KOJA SE KORISTI KAKO BI SE DUGME ZA POVRATAK NA VRH SAKRILO*/
.display
{display: none !important;}


/*PRVI DEO KOJI SE ODNOSI NA IT KONSALTING, DISPALY FLEX*/
.part_one
{
    display: flex;
    height: 800px;
    transition: linear all 1s;
}

/*LEVI DEO U KOME SE NALAZE NASLOV, LINIJA I TEKST*/
.left_part
{flex:1;}


/*NASLOV U OKVIRU OVOG DELA*/
.title
{
    margin-top: 33%;
    font-size: 36px;
    line-height: 60px;
    color: #2B3A66;

    font-weight: 700;
    margin-left: 19%;
}

/*LINIJA KOJA SE NALAZI ISPOD*/
.line
{
    width: 30%;
    height: 3.7px;
    background-color: #3881B6;
}

/*TEKST KOJI SE ODNOSI NA OVU SEKCIJU*/
.text
{
    font-size: 24px;
    font-style: normal;
    font-weight: 300;
    line-height: 30px;
    letter-spacing: 0.75px;

    margin-left: 19%;
    margin-top:3%
}
/*LEVI DEO U KOME SE NALAZE NASLOV, LINIJA I TEKST*/

/*DESNI DEO U KOME SE NALAZI SLIKA*/
.right_part
{
    flex:1;
    background-image: url("../../slike/IT_Konsalting.png");
    background-position: center; 
    background-repeat: no-repeat; 
    background-size: contain;

    margin-right: 2%;
}
/*DESNI DEO U KOME SE NALAZI SLIKA*/
/*PRVI DEO KOJI SE ODNOSI NA IT KONSALTING, DISPALY FLEX*/

/*DRUGI DEO KOJI SE ODNOSI NA IMPLEMENTACIJU IT SISTEMA, DISPALY FLEX, KORISTI SE ISTI SABLON SAMO POSTO JE PO DIZAJNU 
SLIKA SADA LEVO, FLEX-DIRECTION JE ROW-REVERSE*/
.part_two
{
    display: flex;
    height: 800px;

    flex-direction: row-reverse;
    margin-top: -170px;

    transition: linear all 1s;
}

/*LEVI DEO U KOME SE NALAZE NASLOV, LINIJA I TEKST, KOJI JE ZBOG ROW-REVERSE-A NA DESNOJ STRANI*/
.left_part1
{flex:1;}

/*NASLOV U OKVIRU OVOG DELA*/
.title1
{
    margin-top: 33%;
    font-size: 36px;
    line-height: 60px;
    color: #2B3A66;

    font-weight: 700;
    margin-right: 19%;
    /*DA BI IZGLEDALO KAO DA JE NA DESNOJ STRANI*/
    text-align: right;
}

/*LINIJA KOJA SE NALAZI ISPOD*/
.line1
{
    width: 30%;
    height: 3.7px;
    background-color: #3881B6;
    /*DA BI IZGLEDALO KAO DA JE NA DESNOJ STRANI*/
    float: right;
}

/*TEKST KOJI SE ODNOSI NA OVU SEKCIJU*/
.text1
{
    font-size: 24px;
    font-style: normal;
    font-weight: 300;
    line-height: 30px;
    letter-spacing: 0.75px;

    margin-right: 19%;
    margin-top:3%;
    /*DA BI IZGLEDALO KAO DA JE NA DESNOJ STRANI*/
    text-align: right;
}
/*LEVI DEO U KOME SE NALAZE NASLOV, LINIJA I TEKST, KOJI JE ZBOG ROW-REVERSE-A NA DESNOJ STRANI*/

/*DESNI DEO, KOJI JE ZBOG ROW-REVERSE-A LEVI, U KOME SE NALAZI SLIKA*/
.right_part1
{
    flex:1;
    
    background-image: url("../../slike/Implementacija_IT_Sistema.png");
    background-position: center; 
    background-repeat: no-repeat; 
    background-size: contain;

    margin-left: 8%;
}
/*DESNI DEO, KOJI JE ZBOG ROW-REVERSE-A LEVI, U KOME SE NALAZI SLIKA*/
/*DRUGI DEO KOJI SE ODNOSI NA IMPLEMENTACIJU IT SISTEMA, DISPALY FLEX, KORISTI SE ISTI SABLON SAMO POSTO JE PO DIZAJNU 
SLIKA SADA LEVO, FLEX-DIRECTION JE ROW-REVERSE*/

/*TRECI DEO KOJI SE ODNOSI NA ODRZAVANJE I SERVIS, DISPALY FLEX*/
.part_tree
{
    display: flex;
    height: 800px;
    margin-top: -170px;

    transition: linear all 1s;
}
/*LEVI DEO U KOME SE NALAZE NASLOV, LINIJA I TEKST*/
.left_part2
{flex:1;}

/*NASLOV KOJI SE ODNOSI NA OVU SEKCIJU*/
.title2
{
    margin-top: 33%;
    font-size: 36px;
    line-height: 60px;
    color: #2B3A66;

    font-weight: 700;
    margin-left: 19%;
}

/*LINIJA ISPOD NASLOVA*/
.line2
{
    width: 30%;
    height: 3.7px;
    background-color: #3881B6;
}

/*TEKST KOJI SE ODNOSI NA OVU SEKCIJU*/
.text2
{
    font-size: 24px;
    font-style: normal;
    font-weight: 300;
    line-height: 30px;
    letter-spacing: 0.75px;

    margin-left: 19%;
    margin-top:3%
}
/*LEVI DEO U KOME SE NALAZE NASLOV, LINIJA I TEKST*/
/*DESNI DEO U KOME SE NALAZI SLIKA*/
.right_part2
{
    flex:1;
    
    background-image: url("../../slike/Održavanje_i_Servis.png");
    background-position: center; 
    background-repeat: no-repeat; 
    background-size: contain;

    margin-right: 6%;
}
/*DESNI DEO U KOME SE NALAZI SLIKA*/
/*TRECI DEO KOJI SE ODNOSI NA ODRZAVANJE I SERVIS, DISPALY FLEX*/

/*CETVRTI DEO KOJI SE ODNOSI NA VAŠI IT SISTEMI SU U SIGURNIM RUKAMA, DISPALY FLEX, ALI JE FLEX-DIRECTION COLUMN
KAKO BI SLIKA BILA IZNAD TEKSTA*/
.part_four
{
    display: flex;
    height: 40vw;

    margin-top: -100px;

    flex-direction: column;
    justify-content: center;
    align-items: center;

    margin-bottom: 30px;

    transition: linear all 1s;
}

/*GORNJI DEO U KOME JE SLIKA*/
.upper_part
{
    flex:2;
    width: 40%;

    background-image: url("../../slike/SISTEMI.png");
    background-position: center; 
    background-repeat: no-repeat; 
    background-size: contain;
}
/*GORNJI DEO U KOME JE SLIKA*/

/*DONJI DEO U KOME JE TEKST*/
.lower_part
{flex:1;margin-right: 6%;}

/*CSS PARAMETRI TEKSTA*/
.text3
{
    
    font-style: normal;
    font-weight: 300;
    line-height: 30px;
    letter-spacing: 0.75px;

    width:90%;
    margin-left: 10%;
    margin-top:3%;

    text-align: center;

    color:#2B3A66;
    font-size: 36px;
    line-height: 45px;

    transition: linear all 1s;
}
/*DONJI DEO U KOME JE TEKST*/
/*CETVRTI DEO KOJI SE ODNOSI NA VAŠI IT SISTEMI SU U SIGURNIM RUKAMA, DISPALY FLEX, ALI JE FLEX-DIRECTION COLUMN
KAKO BI SLIKA BILA IZNAD TEKSTA*/


/*
=====================================================================
FOOTER, KOJI JE FLEX, U OKVIRU NJEGA SE SMESTAJU CETIRI KOLONE SA PO-
DACIMA
=====================================================================
*/
.footer
{
    height: 260px;
    /*min-width: 600px;*/
    width: 80%;
    display: flex;
    background-color: #052C46;

    padding-left: 10%;
    padding-right: 10%;
}

/*CETIRI KOLONE U KOJIMA SE SMESTAJU PODACI, SVE SU FLEX*/
.column1
{
    flex:22%;
    display: flex;
    flex-direction: column;
}

.column2
{
    flex:12%;
    display: flex;
    flex-direction: column;
}

.column3
{
    flex:22%;
    display: flex;
    flex-direction: column;
}

.column4
{
    flex:8%;
    display: flex;
    flex-direction: column;
}
/*CETIRI KOLONE U KOJIMA SE SMESTAJU PODACI, SVE SU FLEX*/

/*KAKO BI STO PRIBLIZNIJE IZGLEDALO NACRTU*/
.margin2
{margin-left: 5%;margin-right: 9%;}


/*NASLOVI U SVAKOJ OD KOLONA*/
.column_title
{
    margin-top: 40px;
    height: 3rem;
    width: 60%;
    color: #FFFFFF;
    font-weight: 100;
    font-size: 2rem;
    font-weight: bold;
    
    flex:2;

    margin-bottom: -5rem;
}

/*PARAMETRI SU ISTI ALI SE KASNIJE PRILIKOM RESPOSNIVA DEFINISE RAZLICITO PONASANJE 
OVA DVA NASLOVA, ZBOG TOGA SU IM DATE RAZLICITE KLASE*/
/*NASLOVI SEKCIJA U FOOTER-U*/
.column_title1
{
    
    margin-top: 40px;
    height: 3rem;
    width: 100%;
    color: #FFFFFF;
    font-weight: 100;
    font-size: 1.7rem;
    
    flex:2;

    margin-bottom: -5rem;
}

.column_title2
{
    
    margin-top: 40px;
    height: 3rem;
    width: 90%;
    color: #FFFFFF;
    font-weight: 100;
    font-size: 1.7rem;
    
    flex:2;
    margin-bottom: -5rem;
}
/*NASLOVI SEKCIJA U FOOTER-U*/

/*TEKST U OKVIRU KOLONA*/
.info
{
    width: 100%;

    color: #BFBFBF;

    font-weight: 100;
    font-size: 1.1rem;
    letter-spacing: 0;
   
    margin-top: -3rem;
    flex:1;

}

/*DEO GDE SE NALAZI @ShidniriStudio*/
.info1
{
    width: 100%;
    color: #BFBFBF;

    font-weight: 100;
    font-size: 1rem;
    letter-spacing: 0;
    
    margin-top: -3rem;
    flex:1;
}

/*
=====================================================================
DRUSTVENE MREZE U FOOTER-U
=====================================================================
*/
.socials
{
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
   
    margin-top: -2rem;
    margin-bottom: 2rem;
}
  
.socials li 
{float: left;}

.socials li a 
{
    display: block;
 
    text-align: center;
    margin-right: 1rem;
    text-transform: uppercase;
    text-decoration: none;

    color: #B6B6B6;
}

/*IKONICA FB*/
.fb
{
    background-image: url("../../ikonice/fb.png");
    background-position: center;
    background-size: cover; 

    height: 2.5vw;
    width: 2.5vw;
    border-radius: 50%;
}
/*IKONICA FB*/
/*IKONICA LinkedIn*/
.in
{
    background-image: url("../../ikonice/in.png");
    background-position: center;
    background-size: cover; 

    height: 2.5vw;
    width: 2.5vw;
    border-radius: 50%;
}
/*IKONICA LinkedIn*/
/*IKONICA SKYPE*/
.skype
{
    background-image: url("../../ikonice/skype.png");
    background-position: center;
    background-size: 100% 100%;

    height: 2.5vw;
    width: 2.5vw;
}
/*IKONICA SKYPE*/