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


/*
=====================================================================
STANDARDI ELEMENTI
=====================================================================
*/
html
{scroll-behavior: smooth;}

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

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


/*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;}
  
/*
=====================================================================
FORNJI DEO SA NAVBAROM, SLIKOM, TEKSTOM I DUGMETOM
=====================================================================
*/

/*CEO KONTEJENER*/
.header_part
{
    height: 77rem;
    width: 100%;
    background-color: rgba(44,58,103,1);  
    position: relative;

    transition: linear all 1.4s;
}

/*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: #3881B6;
    color: white;
    border: none;
    
    font-size: 1rem;
    font-weight: 300;
    letter-spacing: 0;
    text-align: center;
    text-transform: uppercase;
    text-decoration: none;

    /*transition: linear all 1s;*/
}


/*klasa animacije*/
.active
{border-bottom: 3px solid rgba(56, 129, 182, 1) !important;}

/*klasa za slova u solution delu*/
.letters_active
{color: #3881B6 !important;}

/*DEO U KOJI SE SMESTA TEKST U DUGME CTA*/
.header_content
{
    height: 50rem;
    top: 81px;
    position:absolute;
    margin-left: 6%;
}

/*TEKST PRORED SLIKE*/
.header_text
{
    height: 13rem;
    width: 53%;
    margin-top: 306px;

    color: #FFF;
    font-weight: 100;
    font-size: 2.8rem;
    letter-spacing: 0;
    line-height: 3.3rem;

    transition: linear all 1s;
}

/*SLIKA U HEADER DELU*/
.image
{
    height: 43rem;
    width: 41%;
    top: 173px;

    margin-left: 53%;
    position:absolute;

    background-image: url("../../slike/slika_header.png");
    background-position: center; 
    background-repeat: no-repeat; 
    background-size: contain;

    transition: linear all 1s;
}

/*DUGME ISPOD TEKSTA U HEADER PARTU*/
.header_btn_CTA
{
    height: 60px;
    width: 207.8px;
    border-radius: 4px;
    background-color: #3881B6;

    color: #FFFFFF;

    font-weight: 300;
    font-size: 1.7rem;
    letter-spacing: 0;
    line-height: 2rem;
    text-align: center;

    border:none;
    transition: linear all 1s;
    transition: transform  0.6s;
}

/*HOVER EFEKAT ZA DUGME*/
.header_btn_CTA:hover
{transform: scale(1.04);box-shadow: 0 5px 30px 0 rgba(0,0,0,0.5);}
/*
=====================================================================
KWS DEO SA INFORMACIJAMA
=====================================================================
*/
.kvs_system_info
{
    height: 30rem;
    width: 90%;

    border-radius: 0 6px 6px 0;
    background-color: #052C46;
    margin: 0;
    padding: 0;

    position: absolute;
    margin-top: -6.5rem;
}


/*LINIJA U DESNOM DELU*/
.line
{
    height: 2.69px;
    width: 11%;
    background-color: #D4D4D4;
    position: relative;
    top:103px;
}

/*KONTEJNER ZA INFORMACIJE U KOJEM SE SMESTA I NASLOV I TEKSTOVI*/
.informationinformacije
{
    height: 20rem;
    width: 70%;

    position: relative;
    left: 265px;
    top: 90px;
}

/*NASLOV U KWS DELU*/
.title
{
  height: 80px;
  width: 25rem;
  color: #FFFFFF;
 
  font-weight: 500;
  font-size: 3rem;
  letter-spacing: 0;
  line-height: 5.7rem;

  margin-left: 15%;
  margin-top: 54px;
}

/*NASLOV U KWS DELU*/
.body
{
    height: 19rem;
    display: flex;

    margin-left: 15%;
    margin-right: 5%;
    margin-top: 34px;
}

/*LEVI TEKST*/
.text_left
{
    flex: 1;
    color: #E6E6E6;

    font-size: 1.5rem;
    font-weight: 100;
    letter-spacing: 0.05rem;
    line-height: 2.43rem;

    transition: linear all 1s;
}

/*DESNI TEKST*/
.text_right
{
    flex: 1;
    color: #E6E6E6;

    font-size: 1.5rem;
    font-weight: 100;
    letter-spacing: 0.05rem;
    line-height: 2.43rem;

    margin-left: 5px;

    transition: linear all 1s;
}

/*
=====================================================================
GRID SA KARTICAMA
=====================================================================
*/
.grid
{
    height: 1300px;   
    margin-top: 450px;

    margin-left: 10%;
    margin-right: 10%;

    display: grid;
 
    grid-template-columns: auto auto auto;
    grid-gap: 30px 40px;
}

/*KLASA DA BI DUGME BILO NEVIDLJIVO*/
.hidden 
{
    background-color: white;
    transition-duration: 0.80s;
}

/*SAMA KARTICA U GRIDU*/
.grid-item1 
{
    background-color: rgba(255, 255, 255, 0.8);
    
    padding: 20px;
    font-size: 30px;

    margin-top: 60px;
    margin-bottom: 30px;

    border: 1.34px solid #E2E2E2;
    border-radius: 6px;

    display: flex;
    flex-direction: column;

    /*skaliranje, trajanje*/
    transition-duration: 0.6s;
}

/*POP UP EFEKAT*/
.grid-item1:hover .hidden 
{background-color: #3881B6;transition: background-color 1.2s ease;}

.grid-item1:hover
{box-shadow: 0 5px 30px 0 rgba(0,0,0,0.5);transform: scale(1.04);}
/*POP UP EFEKAT */

/*NA DALJE ZA SVAKU KARTICU VAZI ISTO, SAMO SE ZA ODREDJENE RAZLIKUJE MARGINA KAKO BI SE DOBIO ZELJENI IZGLED*/
.grid-item2
{
    background-color: rgba(255, 255, 255, 0.8);
 
    padding: 20px;
    font-size: 30px;
   
    border: 1.34px solid #E2E2E2;
    border-radius: 6px;

    display: flex;
    flex-direction: column;
    transition-duration: 0.6s;
}

/*POP UP EFEKAT*/
.grid-item2:hover
{box-shadow: 0 5px 25px 0 rgba(0,0,0,0.5);transform: scale(1.04);}

.grid-item2:hover .hidden 
{background-color: #3881B6;transition: background-color 1.5s ease;}
/*POP UP EFEKAT */

.grid-item3 
{
    background-color: rgba(255, 255, 255, 0.8);
  
    padding: 20px;
    font-size: 30px;
    margin-top: 60px;
    margin-bottom: 30px;

    border: 1.34px solid #E2E2E2;
    border-radius: 6px;

    display: flex;
    flex-direction: column;
    transition-duration: 0.6s;
}

/*POP UP EFEKAT */
.grid-item3:hover .hidden 
{background-color: #3881B6;transition: background-color 1.5s ease;}

.grid-item3:hover
{box-shadow: 0 5px 30px 0 rgba(0,0,0,0.5);transform: scale(1.03);}
/*POP UP EFEKAT */

.grid-item4
{
    background-color: rgba(255, 255, 255, 0.8);
   
    padding: 20px;
    font-size: 30px;
    margin-top: -35px;

    border: 1.34px solid #E2E2E2;
    border-radius: 6px;

    display: flex;
    flex-direction: column;
    margin-bottom: 100px;

    transition-duration: 0.6s;
}

/*POP UP EFEKAT */
.grid-item4:hover .hidden 
{background-color: #3881B6;transition: background-color 1.5s ease;}

.grid-item4:hover
{box-shadow: 0 5px 30px 0 rgba(0,0,0,0.5);transform: scale(1.03);}
/*POP UP EFEKAT */

.grid-item5
{
    background-color: rgba(255, 255, 255, 0.8);
   
    padding: 20px;
    font-size: 30px;
    

    border: 1.34px solid #E2E2E2;
    border-radius: 6px;

    display: flex;
    flex-direction: column;

    margin-bottom: 100px;

    transition-duration: 0.6s;

}

/*POP UP EFEKAT */
.grid-item5:hover .hidden 
{background-color: #3881B6;transition: background-color 1.5s ease;}

.grid-item5:hover
{box-shadow: 0 5px 30px 0 rgba(0,0,0,0.5);transform: scale(1.03);}
/*POP UP EFEKAT */

.grid-item6
{
    background-color: rgba(255, 255, 255, 0.8);
   
    padding: 20px;
    font-size: 30px;
    margin-top: -35px;

    border: 1.34px solid #E2E2E2;
    border-radius: 6px;

    display: flex;
    flex-direction: column;

    margin-bottom: 100px;
    transition-duration: 0.6s;
}

/*POP UP EFEKAT */
.grid-item6:hover .hidden 
{background-color: #3881B6;transition: background-color 1.5s ease;}

.grid-item6:hover
{box-shadow: 0 5px 30px 0 rgba(0,0,0,0.5);transform: scale(1.03);}
/*POP UP EFEKAT */

/*
=====================================================================
IKONICE U GORNJIM DELOVIMA KARTICA
=====================================================================
*/
.card-icon
{
    flex: 1;
    position: relative;
}

.card-icon1
{
    position: absolute;
    height: 50px;
    width: 50px;
    left: 20px;
    
    bottom: 0;

    background-image: url("../../ikonice/icon1.png");
    background-position: center; 
    background-repeat: no-repeat; 
    background-size: 100% 100%;
    
}

.card-icon2
{
    position: absolute;
    height: 50px;
    width: 50px;
    left: 20px;

    bottom: 0;

    background-image: url("../../ikonice/icon2.png");
    background-position: center; 
    background-repeat: no-repeat; 
    background-size: 100% 100%;
    
}

.card-icon3
{
    position: absolute;
    height: 50px;
    width: 50px;
    left: 20px;
    
    bottom: 0;

    background-image: url("../../ikonice/icon3.png");
    background-position: center; 
    background-repeat: no-repeat; 
    background-size: 100% 100%;
    
}

.card-icon4
{
    position: absolute;
    height: 60px;
    width: 50px;
    left: 20px;
    
    bottom: 0;

    background-image: url("../../ikonice/icon4.png");
    background-position: center; 
    background-repeat: no-repeat; 
    background-size: 100% 100%;
    
}

.card-icon5
{
    position: absolute;
    height: 60px;
    width: 50px;
    left: 20px;
    
    bottom: 0;

    background-image: url("../../ikonice/icon5.png");
    background-position: center; 
    background-repeat: no-repeat; 
    background-size: 100% 100%;
    
}

.card-icon6
{
    position: absolute;
    height: 60px;
    width: 50px;
    left: 20px;
    
    bottom: 0;

    background-image: url("../../ikonice/icon6.png");
    background-position: center; 
    background-repeat: no-repeat; 
    background-size: 100% 100%;
    
}

/*NASLOV NA VRHU KARTICA*/
.card-title
{
    flex: 1;
    color: #000000;

    font-weight: 400;
    font-size: 1.56rem;
    letter-spacing: 0;
    line-height: 30px;

    padding-left: 20px;
    margin-top: 30px;

}

/*MARGINE ZA STILIZOVANJE*/
.margin_minus
{margin-top: -50px;}

.margin_minus1
{margin-top: -30px;}

.margin_minus2
{margin-top: -30px;}
/*MARGINE ZA STILIZOVANJE*/

/*TEKST U OKVIRU KARTICE*/
.card-body
{
    flex: 3;

    height: 209.55px;
    width: 90%;
    color: #888888;

    font-weight: 300;
    font-size: 1.2rem;
    
    letter-spacing: 0;
    line-height: 32px;
    padding-left: 20px;
}

/*DUGME*/
.card-button
{
    height: 40px;
    width: 80%;
    border-radius: 4px;

    color: #FFFFFF;
    font-weight: 300;
    font-size: 1.4rem;
    text-align: center;

    margin:auto;
    border:none;
}


/*
=====================================================================
DEO SOLUTIONS
=====================================================================
*/
.solutions
{
    height: 46rem;
    width: 90%;

    margin-right: 0;
    margin-left: 10%;
    border-radius: 6px 0 0 6px;
    background-color: #052C46;

    position: relative;

}

/*NASLOV*/
.solutions_title
{
    height: 80px;
    
    color: #FFFFFF;
 
    font-weight: 500;
    font-size: 2.6rem;
    letter-spacing: 0;

    line-height: 80px;
    padding-left: 81px;
    padding-top: 50px;
}

/*LINIJA U DESNOM DELU*/
.line2
{
    position: absolute;
    height: 2px;
    width: 212px;
    border-radius: 6px 0 0 6px;
    background-color: #3881B6;
    right: 0;
    top:136;

    transition: 1.5s width ease;
}

/*NAV BAR*/
.nav-bar_sec
{
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
   
    margin-left: 62px;
    margin-top: 29px;
    height: 100px;
}

/*
=====================================================================
ELEMENTI NAVBAR-A
=====================================================================
*/
.nav-bar_sec li 
{float: left;}


.nav-bar_sec li a 
{
    display: block;
    text-align: center;
    margin-left: 20px;
    text-transform: uppercase;
    text-decoration: none;

    
    color: #B6B6B6;

    font-weight: 400;
    font-size: 2rem;
    font-weight: bold;
    letter-spacing: 0;
    line-height: 50px;

    border-bottom: 3px solid rgba(56, 129, 182, 0);
    transition: border-bottom 1s ease;
}

/*SADRZAJ U OKVIRU SOLUTIONS DELA*/
.solution_content
{height: 23rem;width: 55rem;}

/*SADRZAJ U OKVIRU SOLUTIONS DELA*/
.solution_content_body
{
    width: 50rem;
    height: 23rem;

    color: #FFFFFF;
 
    font-weight: 100;
    font-size: 1.5rem;
   
    letter-spacing: 1px;
    line-height: 2.43rem;

    margin-left: 82px;
    margin-bottom: 0;
    position: relative;

    /*transition: linear all 1s;*/
}

/*DA SE SEKCIJA NE PRIKAZE AKO NIJE AKTIVIRANA U NAVBAR-U*/
.text_none
{display: none;}

/*SLIKA U SOLUTIONS DELU*/
.solution_image
{
    height: 24rem;
    width: 28%;
    
    background-image: url("../../slike/slika_solution.png");
    background-position: center; 
    background-repeat: no-repeat; 
    background-size: contain;
    
    position: absolute;
    left: 62%;
    bottom: 22%;

    transition: linear all 1s;
}

/*DUGME u SOLUTIONS DELU*/
.solutions_btn
{
    height: 60px;
    width: 207.8px;
    border-radius: 4px;

    color: #FFFFFF;
    background-color: #3881B6;

    border: none;

    font-weight: 300;
    font-size: 24px;
    letter-spacing: 0;
    line-height: 29px;
    text-align: center;

    margin-left: 82px;
   
    position: absolute;
    bottom: 20;

    transition-duration: 0.4s !important;
}

/*HOVER EFEKAT ZA DUGME*/
.solutions_btn:hover
{transform: scale(1.04);box-shadow: 0 5px 30px 0 rgba(0,0,0,0.5);}

/*
=====================================================================
DEO SA ANTIVIRUS NASLOVOM I DIPLOMOM
=====================================================================
*/
.antivirus_wrap
{margin-left: 10%;margin-top: 126px;}

/*TEKST U KOME PISE ANTIVIRUS*/
.antivirus
{
    height: 80px;
    width: 25rem;
    color: #3A3A3A;
 
    font-size: 4.5rem;
    font-weight: 500;
    letter-spacing: 0;
    line-height: 80px;

    margin-left: 72px;
}


/*KONTEJNER U KOJEM SE SMESTA SLIKA I TEKST*/
.diploma_info
{
    margin-top: 60px;
    margin-left: 10%;

    height: 50rem;
    display: flex;

    transition: linear all 0.7s;
}

/*SLIKA*/
.slika_diploma
{
    box-shadow: 0 5px 30px 0 rgba(0,0,0,0.5);
    background-size: contain;width: 100%;
}

/*SLIKA*/
.diploma
{flex: 67%;height: 43rem;}

/*DEO SA TEKSTOM PORED DIPLOME*/
.diploma_info_body
{
    flex: 33%;
    height: 50rem;

    margin-top: 25px;
    margin-left: 9.3rem;

    display: flex;
    flex-direction: column;
}

/*VECI NASLOV*/
.title_first
{
    flex: 1;

    width: 32rem;
    color: #3A3A3A;
    
    font-weight: 500;
    font-size: 3.42rem;
    letter-spacing: 0;
}

/*MANJI NASLOV*/
.title_second
{
    flex: 1;
    width: 32rem;

    color: #D1A068;
  
    font-weight: 500;
    font-size: 2.2rem;
    letter-spacing: 1px;
}

/*TEKST ISPOD MANJEG NASLOVA*/
.info_body
{
    flex: 8;
    width: 29rem;
    color: #3A3A3A;

    font-weight: 300;
    font-size: 1.71rem;
    letter-spacing: 0.75px;
    line-height: 42.96px;

    transition: linear all 1s;
}
/*DEO SA TEKSTOM PORED DIPLOME*/

/*
=====================================================================
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 LinkedIn*/
.in
{
    background-image: url("../../ikonice/in.png");
    background-position: center;
    background-size: cover; 

    height: 2.5vw;
    width: 2.5vw;
    border-radius: 50%;
}

/*IKONICA SKYPE*/
.skype
{
    background-image: url("../../ikonice/skype.png");
    background-position: center;
    background-size: 100% 100%;

    height: 2.5vw;
    width: 2.5vw;
}