@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');

:root {
    --rob:"Roboto", sans-serif;
    --outfit:"Outfit", serif;
    --primary:#0071CE;
    --secondary:#0971CE;
    --light:#878F57;
    --textwhite:#F6F8EB;
    --landing-width:66.25vw;
    --landing-width-mobile:86vw;
    --d10:0.53vw;
    --d12:0.63vw;
    --d14:0.73vw;
    --d15:0.78vw;
    --d16:0.89vw;
    --d18:0.94vw;
    --d20:1.04vw;
    --d22:1.15vw;
    --d24:1.25vw;
    --d25:1.3vw;
    --d30:1.56vw;
    --d36:1.88vw;
    --d40:2.08vw;
    --d48:2.5vw;
    --d64:3.33vw;
    --d80:4.17vw;
    --d120:6.25vw;


    --m10:2.78vw;
    --m11:3.06vw;
    --m12:3.33vw;
    --m13:3.61vw;
    --m14:3.89vw;
    --m15:4.17vw;
    --m16:4.44vw;
    --m18:5vw;
    --m20:5.56vw;
    --m24:6.67vw;
    --m25:6.94vw;
    --m32:8.89vw;
    --m36:10vw;
    --m40:11.11vw;
    --m48:13.33vw;
    --m64:17.78vw;


}


.kontakt-main{
    background-image: url(./img/proizvodnjadetaljisvg.svg);
   
    background-size: auto;
    width: 100vw;
    background-repeat: no-repeat;
    


}

.kontakt-main .kontakt-news {
    width: var(--landing-width);
    margin: auto;
    padding-top: var(--d120);
    margin-bottom: var(--d64);
    color: var(--secondary);
    font-size: var(--d36);
    font-weight: 400;
    border-bottom: 1px solid var(--secondary);
    padding-bottom: var(--d24);
    
}
.kontakt-grid{
    display: flex;
    width: var(--landing-width);
    margin: auto;
    justify-content: space-between;
    
    
}

.kontakt-box{
    width: 24.74vw;
    background-color: white;
    border-radius: var(--d24);
    box-shadow: 0px 2px 13.5px 0px #1B8FDD59;
    padding: 1.77vw;
    margin-bottom: var(--d14);


}

.kontakt-box h2{
    font-size: var(--d20);
    color: var(--secondary);
    font-weight: 700;
}

.kontakt-box p{
    font-size: var(--d16);
    color: var(--secondary);
    font-weight: 400;
}

.kontakt-box span{
    display: flex;
    margin-top: var(--d14);
}

.kontakt-box span img {
    width: var(--d16);
    margin-right: var(--d12);
}

.kontakt-box span a{
    text-decoration: none;
    color: var(--secondary);
    font-size: var(--d16);
    font-weight: 400;
   
   }

   .ko-right{
    width: 29.32vw;
    background-color: white;
    border-radius: var(--d24);
    box-shadow: 0px 2px 13.5px 0px #1B8FDD59;
    padding: 2.29vw;
    height: 90%;
    

   }
   .ko-right input{
    width: 95%;
    height: 2.29vw;
    border: 1px solid #0971CE;
    border-radius: var(--d12);
    margin-bottom: var(--d24);
    padding-left:var(--d20) ;
    color: var(--secondary);
    font-size: var(--d16);
    font-weight: 400;
   }
   .ko-right input::placeholder , .ko-right textarea::placeholder{
    color: var(--secondary);
    font-size: var(--d16);
    font-weight: 400;

   }
   .ko-right textarea{
    width: 95%;
    height: 2.29vw;
    border: 1px solid #0971CE;
    border-radius: var(--d12);
    margin-bottom: var(--d24);
    padding-left:var(--d20) ;
    padding-top: var(--d20);
    color: var(--secondary);
    font-size: var(--d16);
    font-weight: 400;
   }

   .ko-right button{
    width: 11.67vw;
    height: 2.55vw;
    background-color: var(--secondary);
    border-radius: var(--d10);
    border: none;
    outline: none;
    color: white;
    font-weight: 600;
    font-size: var(--d18);
    margin-bottom: var(--d48);

   }
   .ko-right iframe{
    border-radius: var(--d10);
   }
   .ko-left{
    margin-bottom: var(--d120);
   }

     @media screen and (max-width:900px){
        .kontakt-main{
            margin-top: var(--mmt);
            background-image: none;
            
        }
        .kontakt-main .kontakt-news{
      width: var(--landing-width-mobile);
      font-size:7.22vw;
      padding-top: var(--m64);
      margin-bottom: var(--m24);
    }

    .kontakt-grid{
        flex-direction: column-reverse;
        width: var(--landing-width-mobile);
    }
    .ko-right{
        width: 72vw;
        padding: 7vw;
        margin-top: 5vw;
        margin-bottom: var(--m32);
    }
    .ko-left{
        width: var(--landing-width-mobile);

    }
    .kontakt-box{
        width:72vw;
        padding: 7vw;
        border-radius: 6px;
        margin-top: var(--m14);
    }

    .ko-right input{
        height: 12.22vw;
        font-size: var(--m15);
        border-radius: 6px;
        padding-left:var(--m16);
        margin-bottom: var(--m16);
    }
    .ko-right input::placeholder{
        font-size: var(--m15);
    }
    .ko-right textarea{
        height: 35.83vw;
        font-size: var(--m15);
        border-radius: 6px;
        padding-left:var(--m16);
    }
    .ko-right textarea::placeholder{
        font-size: var(--m15);
    }
    .ko-right button{
        width:73vw ;
        padding: 0;
        height: 12.5vw;
        font-size: var(--m16);
        border-radius: 6px;
        margin-top: var(--m16);
    }

    iframe{
        width: 73vw;
        margin-top: var(--m16);
        
    }

    .kontakt-box h2{
        font-size: var(--m18);
    }

    .kontakt-box p{
        font-size: var(--m15);
    }

    .kontakt-box span a{
        font-size:var(--m15) ;
    }

    .kontakt-box span img{
        width: var(--m14);
        margin-right: var(--m14);
    }
    

     }