/* Author e-mail : draskosikanjic@gmail.com */

/* link do fontova */
@import url('https://fonts.googleapis.com/css2?family=Coda+Caption:wght@800&family=Open+Sans:wght@300;400&display=swap');

/* varijable */
     :root {
        --headings: 'Coda Caption', sans-serif;
        --bodyFont: 'Open Sans', sans-serif;
        --fontSize: 16px;
        --lightgray: #f6f6f6;
        --white: #fff;
        /* --gray: #4a4a4a; */
        --black: #1e1e1e;
        --primary: #3a8bcd;
        --text: #4a4a4a;
        --borders: #eeeeee;
        --transition: .3s ease-in-out;
    }

    /* opsti stilovi stranice */    
    * {
        margin: 0; /* margine */
        padding: 0; /* prostor oko sadrzaja elemenata */
        box-sizing: border-box;  /* box model : u sirinu elementa ne ulazi padding i border*/
    }
    
    /* opsti stilovi za body tag */
    body {
        font-family: var(--bodyFont);
        font-size: var(--fontSize);
        color: var(--text);
        line-height: 1.6;
    }
    
    /* opsti stilovi za elemente */
    h1,
    h2,
    h3,
    h4,
    h5,
    h6 {
        font-family: var(--headings);
        color: var(--black);
    }
    
    a {
        text-decoration: none;
        color: var(--primary);
        transition: var(--transition);
    }
    
    ul {
        list-style: none;
    }
    
    /* aktivni link */
    .active {
        color: var(--primary);
    }
    
    /* stilovi za kontejnerske klase */
    .container {
        width: 70%;
        margin: auto;
        padding: 100px 0;
    }
    
    .container::after {
        display: block;
        content: "";
        clear: both;
    }
    
    /* opsti stilovi za dugmad */
    button {
        padding: 15px 40px;
        margin-top: 25px;
        font-size: 1rem;
        text-transform: uppercase;
        border-radius: 5px;
        cursor: pointer;
    }
    
    /* ostali opsti stilovi */
    h2 {
        font-size: 1.5rem;
        margin-bottom: 20px;
    }
    
    h2::before {
        /* plava linija iznad naslova karusela */        
        display: block;
        content: "";
        width: 40px;
        background: var(--primary);
        height: 3px;
        margin-bottom: 10px
    }
    
    hr {
        margin: 20px 0;
        border: none;
        background: lightgray;
        height: 1px;
    }
    
    /* topbar */    
    .topbar {
        text-align: center;
        border-top: 5px solid var(--primary);
        border-bottom: 1px solid var(--lightgray);
        padding: 20px 0;
    }
    
    .topbar a {
        font-size: 2rem;
        /* text-shadow: 0 0 1px var(--text); */
        text-shadow: 1px 1px 1px yellowgreen; /* blur */        
    }
    
    .topbar a:hover {
        color: var(--text);
    }
    
    .topbar a i {
        color: var(--text);
        margin-right: 10px;
        font-size: 2.5rem;
    }

    /* navigacija */    
    nav {
        text-align: center;
        padding: 15px 0;
    }
    
    nav ul li {
        display: inline-block;
        margin: 0 30px;
    }
    
    nav ul li a {
        color: var(--black);
        text-transform: uppercase;
    }
    
    nav ul li a:hover {
        color: var(--primary);
    }

    /* header */    
    header {
        background-image: url(../img/header.jpg);
        padding: 200px 0;
        background-position: center top;
        background-size: cover;
    }
    
    header article {
        width: 30%;
        padding: 40px;
        background: rgba(255, 255, 255, .7);
        margin-left: 15%;
    }
    
    header button {
        background: var(--primary);
        border: none;
        color: var(--white);
    }
    
    header button:hover {
        background: var(--black);
    }
    
    header h1::after { /* plava linija ispod naslove */        
        display: block;
        content: "";
        width: 40px;
        background: var(--primary);
        height: 3px;
        margin: 20px 0;
    }

    /* kontejnerska sekcija featuredItems */    
    .featuredItems h2 {
        margin-bottom: 30px;
    }
    
    .owl-carousel .item {
        border: 1px solid var(--borders);
        padding: 30px;
        border-radius: 5px;
        transition: var(--transition);
    }
    
    .owl-carousel .item:hover {
        border: 1px solid var(--primary);
    }

    /* sekcija subscribe */    
    .subscribe {
        text-align: center;
        background: var(--primary);
        color: var(--white);
    }
    
    .subscribe h3 {
        font-size: 1.5rem;
        margin-bottom: 20px;
    }
    
    .subscribe p {
        margin: 20px;
    }
    
    .subscribe input {
        padding: 10px;
        border-radius: 5px;
        border: 1px solid var(--white);
    }
    
    .subscribe input[type="text"] {
        background: transparent;        
        color: var(--white);
    }
    
    .subscribe input[type="submit"] {
        background: var(--white);        
        cursor: pointer;
        transition: var(--transition);
    }
    
    .subscribe input[type="submit"]:hover {
        background: var(--black);
        color: var(--white);
        border: 1px solid var(--black);
    }

    /* footer */    
    footer {
        text-align: center;
    }
    
    footer h3 a {
        font-size: 1.5rem;
    }
    
    footer h3 a:hover {
        color: var(--text);
    }
    
    footer a i {
        color: var(--text);
        margin-right: 10px;
        font-size: 2rem;
        transition: var(--transition);
    }
    
    footer a i:hover {
        color: var(--primary);
    }
    
    footer nav a {
        font-size: .8rem;
    }
    
    footer .icons a i {
        font-size: 1.5rem;
    }
    
    footer article:last-child {
        border-top: 1px solid var(--lightgray);
        padding: 15px 0;
    }

    /* sekcija products */
    
    .products .item img {
        width: 100%;
    }
    
    .products .item {
        width: 22%;
        float: left;
        border: 1px solid var(--borders);
        padding: 10px;
        margin: 10px;
        border-radius: 5px;
        transition: var(--transition);
    }
    
    .products .item:hover {
        border: 1px solid var(--primary);
    }

    /* kontejnerska sekcija single */    
    .single article div:first-child {
        float: left;
        width: 40%;
    }
    
    .single article div:last-child {
        float: right;
        width: 55%;
    }
    
    .single img {
        width: 100%;
        border: 1px solid var(--primary);
        border-radius: 10px;
    }
    
    .single h3 {
        font-size: 1.7rem;
    }
    
    .single .price {
        color: var(--primary);
        font-size: 1.2rem;
    }
    
    .single p {
        font-weight: 300;
        padding: 10px 0;
    }
    
    .single button,
    .contact button {
        background: var(--primary);
        border: none;
        color: var(--white);
    }
    
    .single button:hover,
    .contact button:hover {
        background: var(--black);
    }
    
    .single select {
        border: 1px solid var(--primary);
        padding: 15px;
        border-radius: 5px;
        margin: 0 10px;
    }

    /* kontejnerska sekcija about */    
    .about img {
        width: 100%;
    }
    
    .about div:nth-child(1) {
        float: left;
        width: 40%;
    }
    
    .about div:nth-child(2) {
        float: right;
        width: 55%;
    }
    
    .about div:nth-child(2) p {
        padding-bottom: 30px;
    }

    /* kontejnerska sekcija contact */    
    .contact article div:first-child {
        float: left;
        width: 48%
    }
    
    .contact article div:last-child {
        float: right;
        width: 48%
    }
    
    .contact article div:last-child div {
        float: left;
    }
    
    .contact input,
    .contact textarea {
        width: 100%;
        margin-bottom: 20px;
        padding: 15px;
    }