* { margin: 0; padding: 0; 
    
}


html {
    scroll-behavior: smooth;
    
  }

body {
    font-family: opensansfont;
  
   
    
}

@font-face {
    font-family: opensansfont;
    src: url(opensanscondensed-light.ttf);
  }


 /* HERO CTA SECTION */

 .header-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    padding-top: 25px;
    row-gap: 10px;
    background-image: url(hero-header-bg-small-3.png);
    background-repeat: no-repeat;
    background-size: cover;
    background-color: rgb(92, 91, 91);
    background-blend-mode: multiply;    
 }


/* LEFT PART HEADER */


.header-grid-box-1{
    display: flex;
    justify-content: center;
}

.header-grid-box-3{
    grid-column: span 2;
    display: flex;
    justify-content: flex-end;
    padding-right: 25px;
    column-gap: 25px;
}

.header-grid-box-2{
    /* grid-column: span 2; */
    display: flex;
}


 .logo {
    width: 220px;
    height: 180px;
 }

.name-section{
    display: flex;
    flex-direction: column;
    row-gap: 15px;
    justify-content: center;
    align-items: center;
}

.name {
    font-family: "Quintessential", serif;
    font-size: 50px;
    color: #dbdbdb;
    text-align: center;
}

.name-desc {
    font-family: opensansfont;
    font-size: 40px;
    color: #dbdbdb;
    text-align: center;
}

/* RIGHT PART HEADER (CTA LINKS) */

.header-grid-box-4 {
    display: flex;
    flex-direction: row;
    /* justify-content: flex-end; */
    column-gap: 50px;
    padding-top: 15px;
    /* padding-right: 100px; */
}

.links{
    font-size: 25px;
    text-decoration: none;
    color: #dbdbdb;
    
    
    position: relative;
}

.link-desc:hover{
    border-top: solid;
    border-bottom: solid;
    border-color: #dbdbdb;
    transition: ease-in 0.3s;
    
    
}



/* BUTTON */

.header-grid-box-5 {
    display: flex;
    height: 180px;
    grid-column: span 4;
    align-items: center;
    justify-content: center;
}

.cta-btn {
    width: 300px;
    height: 60px;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center; 
    font-family: opensansfont;
    font-size: 30px;   
    column-gap: 10px;
    border: solid 3px;
    border-color: #F5DA81;
    border-radius: 15px;
    background-color: rgba(0, 0, 0, 0.5);
    transition: ease-in-out 0.3s;
       
}

.cta-btn:hover{
    cursor: pointer;
    border: solid 3px;
    background-color: rgba(206, 162, 43, 0.8);
    border-radius: 15px;
    border-color: rgb(46, 46, 46);
    justify-content: space-around;
    text-decoration: none;
    transition: ease-in-out 0.3s;

}

.phone-icn {
    width: 35px;
    height: 35px;
    color:#dbdbdb;
}




.btn-txt{
    color:#dbdbdb;
    text-decoration: none;

}

/* ------CONTACT SECTION----------- */

.contact-section {
    padding-top: 25px;
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    padding-bottom: 50px;
    
    

}



.phone-sec, .address-sec, .hours-sec {
    display: flex;
    flex-direction: column;
    font-size: 23px;
    align-items: center;

}

.phone-sec-icn {
    width: 25px;
    height: 25px;
}

.home-icn{
    width: 25px;
    height: 25px;

}

.clock-icn{
    width: 25px;
    height: 25px;

}

.social-media-icns{
    display: flex;
    flex-direction: column;
    row-gap: 10px;
    position: relative;
    

}

.fb-icn {
    width: 25px;
    height: 25px;
    

}


.fb-icn-color{
    width: 25px;
    height: 25px;
    position: absolute;
    left: 0;
    top: 0;
    opacity: 0;
    
    
    
    
}

.fb-icn-color:hover{
    opacity: 1;
    transform: scale(1.1);
   
}



.ig-icon{
    width: 25px;
    height: 25px;

}

.ig-icon-color{
    width: 25px;
    height: 25px;
    position: absolute;
    left: 0;
    opacity: 0;

}

.ig-icon-color:hover{
    opacity: 1;
    transform: scale(1.1);
}


.section-devide-line {
    border: solid 1px;
    border-color: #6F6F6F;
    transform: scale(0.9);
    
}


/* HERO SECTION 2 */

.hero-2 {
    display: flex;
    
    align-items: center;
    gap: 16px;
    margin-top: 60px;
    justify-content: center;
}

.customers-imgs {
    display: flex;
    justify-content: center;

}

.customers-imgs img {
    height: 45px;
    width: 45px;
    border-radius: 50%;
    margin-right: -12px;
    border: 3px solid #dbdbdb;



}

.customers-imgs img:last-child{
    margin: 0;
}

.customer-txt {
    font-size: 25px;
    font-weight: 700;
    
}

.bg-color{
            
background: rgb(243, 182, 96);
background: radial-gradient(circle, rgb(247, 201, 136) 0%, rgb(216, 171, 75) 98%);
padding-bottom: 80px;


}


/* -----O MENI SECTION--------- */

.o-meni-intro{
    display: flex;
    height: 150px;
    justify-content: center;
    align-items: center;
    background-image: url(o-meni-pic-1.png);
    background-repeat: no-repeat;
    background-size: cover;
    background-color: rgb(77, 77, 77);
    background-blend-mode: multiply;

}
.o-meni-intro h3 {
    font-size: 30px;
    text-transform: uppercase;
    color: #dbdbdb;
}

.o-meni-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    justify-items: center;
    padding: 0px 50px 50px 50px;
    
    
background: radial-gradient(circle, rgb(226, 207, 120) 0%, rgb(117, 81, 2) 98%);
padding-top: 100px;
}

.valentina {
    width: 350px;
    height: 450px;
    border-radius: 15px;
    display: inline-block;
    overflow: hidden;
    transition: all 2s ;
    vertical-align: middle;
}

.valentina:hover {
    transform:scale(1.2);
  transition: 3000ms ease-out; 
  
}

.img-wrapper {
    display: inline-block; /* change the default display type to inline-block */
    overflow: hidden;      /* hide the overflow */
    border-radius: 15px;
}

.o-meni-box-1{
    display: grid;
    justify-content: end;
}


.o-meni-txt {
    font-size: 20px;
    line-height: 1.5; /*horizontal space between sentences*/
      
}



/*  ---------USLUGE SECTION --------- */

.usluge-section {
    display: flex;
    height: 150px;
    justify-content: center;
    align-items: center;
    background-image: url(usluge-pic-bg.png);
    background-repeat: no-repeat;
    background-size: cover;
    background-color: rgb(77, 77, 77);
    background-blend-mode: multiply;

}
.usluge-intro h3 {
    font-size: 30px;
    text-transform: uppercase;
    color: #dbdbdb;
}


.usluge-container{
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    height: 500px;
    justify-items: center;
    align-items: center;
background: radial-gradient(circle, rgb(247, 201, 136) 0%, rgb(216, 171, 75) 98%);
padding-bottom: 80px;
    
}



.card-content{
    background-color: #998545;
    width: 170px;
    height: 300px;
    border-radius: 15px;
    box-shadow: 3px 3px 20px rgb(92, 92, 92); 
    
}

.lice-img{
    width: 170px;
    height: 185px;
    border-radius: 15px;
}

.card-content p {
    font-size: 30px;
    color: #dbdbdb;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: 25px;
}




/* --------GALLERY -----*/


.gallery-section {
    display: flex;
    height: 150px;
    justify-content: center;
    align-items: center;
    background-image: url(galerija-pic.png);
    background-repeat: no-repeat;
    background-size: cover;
    background-color: rgb(77, 77, 77);
    background-blend-mode: multiply;
    

}
.gallery-intro h3 {
    font-size: 30px;
    text-transform: uppercase;
    color: #dbdbdb;
}
/* Overflow and cursor styles for the gallery container */

  /* Cursor style when gallery is being dragged */
  .gallery.is-dragging {
    cursor: grabbing;
  }
  /* Styles for the wrapper of gallery items */
  .gallery .gallery--wrapper {
    counter-reset: count;
    display: flex;
    position: absolute;
    z-index: 1;
    height: 100%;
    top: 0;
    left: 0;
    width: 100%;
    
  }
  /* Styles for each gallery item */
  .gallery .gallery--item {
    counter-increment: count;
    position: absolute;
    z-index: 1;
    top: 0;
    left: 0;
    width: 30vw;
    height: 100%;
    padding: 0 1.5vw;
    overflow: hidden;
  }
  /* Media query for smaller screens */
  @media (max-width: 767px) {
    .gallery .gallery--item {
      width: 40vw;
      height: 70vw;
      
    }
  }
  /* Numbering for gallery items */
  .gallery .gallery--item:nth-child(n+10):before {
    content: counter(count);
  }
  /* Styles for the figures within gallery items */
  .gallery .gallery--item figure {
    position: absolute;
    z-index: 1;
    display: block;
    user-select: none;
    -webkit-appearance: none;
    padding: 0;
    border: none;
    outline: none;
    box-shadow: none;
    cursor: pointer;
    width: 100%;
    height: 100%;
    overflow: hidden;
    pointer-events: none;
    transform-origin: center;
  }
  /* Styles for images within figures */
  .gallery .gallery--item figure img {
    position: absolute;
    z-index: 1;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    vertical-align: middle;
    transform-origin: center;   
  }
  /* Numbering styles */
  .gallery--item:before {
    position: absolute;
    z-index: 2;
    bottom: 1vw;
    left: 2vw;
    display: inline-block;
    content: "0" counter(count);
    color: #ffffff;
    font-size: 3vw;
  }
  /* Media query for smaller screens */
  @media (max-width: 767px) {
    .gallery--item {
      transform: scale(.6) rotate(45deg);
      right: -100px;
    }
  }

.expand-icon{
    display: none;
}



.gallery {
  
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    padding-top: 80px;
    justify-items: center;
    justify-content: center;
    row-gap: 40px;
    background: radial-gradient(circle, rgb(226, 207, 120) 0%, rgb(117, 81, 2) 98%);
    padding-bottom: 50px;
    overflow: hidden;
    cursor: grab;
    width: 100%;
    position: relative;
    z-index: 1;
    height: 40vh;
     
  }

  .gallery-pic {
    height: 350px;
    width: 250px;
    border-radius: 15px;
    display: inline-block;
    overflow: hidden;
    transition: all 2s ;
    vertical-align: middle;
    
}



.gallery-pic:hover {
    transform:scale(1.2);
  transition: 2500ms ease-out; 
  
}

.cell {
    display: inline-block; /* change the default display type to inline-block */
    overflow: hidden;      /* hide the overflow */
    border-radius: 15px;
    border: solid 2px;
}
  

/* -------------TESTEMONIALS --------------*/


.testemonials-section{
    background: radial-gradient(circle, rgb(247, 201, 136) 0%, rgb(216, 171, 75) 98%);
    padding-bottom: 35px;
}

.testemonial-1 {
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    padding-top: 60px;
    padding-right: 60px;
    gap: 25px;
}

.dasa{
    height: 200px;
    width: 200px;
    border-radius: 50%;
    border: solid 1px;
}

.testemonial-txt{
    display: flex;
    flex-direction: column;
    font-size: 20px;
    row-gap: 80px;
    
}
.t-name{
    font-size: 16px;
    padding-left: 20px;
    
}

.flower-icon{
    width: 15px;
    height: 15px;
    padding-right: 5px;
}


.testemonial-2 {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    padding-top: 60px;
    padding-left: 100px;
    gap: 25px;
}

.marina-a{
    height: 200px;
    width: 200px;
    border-radius: 50%;
    border: solid 1px;
}

.testemonial-txt-3{
    display: flex;
    flex-direction: column;
    font-size: 20px;
    row-gap: 60px;
}







 /* -------PLANT AT THE END OF THE PAGE.......*/
.decoration {
    display: flex;
    flex-direction: row;
    justify-content: center;
    
}

 .plant{
    width: 400px;
    height: 250px;
    color: #202020;
 }








  /*---------------- FOOTER---------------------*/

footer{
    padding: 20px;
    background-color: #CCA964;
    color: #585858;
    text-align: center;
}

footer a{
    text-decoration: none;
    color: #585858;
}



/* ----------TO THE TOP BUTTON---------*/
#toTopBtn {
    display: none;
    position: fixed;
    bottom: 20px;
    left: 20px;
    color: white;
    border: solid 1px;
    padding: 10px;
    cursor: pointer;
    font-size: 16px;
    border-color: #F5DA81;
    border-radius: 50%;
    background-color: rgba(0, 0, 0, 0.5);
    
  }
  
  #toTopBtn:hover {
    background-color: rgba(206, 162, 43, 0.8);
    transition: 300ms ease-out;
  }
  .up-icon{
    width: 20px;
    height: 20px;
  }



  /*+++++++++++++++++++MEDIA QUERIES+++++++++++++++++*/

 


  @media  (max-width:900px){



    .gallery{
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        /* padding:  50px 10px 50px 10px; */
    }
.gallery-pic {
    width: 200px;
    height: 250px;

}
}


@media  (max-width:850px){
.usluge-container{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    padding: 50px;
    row-gap: 25px;

}

.card-content{
    width: 170px;
    height: 240px;
}
.lice-img{
    height: 150px;
}


}



@media  (max-width:820px){


    .logo{
        width: 210px;
        height: 150px;
    }
.name {

    font-size: 35px;
}

.name-desc{
    font-size: 30px;
}


.links{
    font-size: 20px;
}

.cta-btn {
    width: 250px;
    height: 50px;
    font-size: 25px;
}

.phone-icn{
    width: 25px;
    height: 25px;
}


.contact-section p{
    font-size: 18px;
}

.contact-section svg {
    width: 20px;
    height: 20px;
}

.hero-2 img {
    height: 35px;
    width: 35px;
}

.customer-txt{
    font-size: 20px;
}
.valentina{
    width: 300px;
    height: 400px;
}

.o-meni-txt {
    font-size: 18px;
}

.dasa, .marina-a {
    height: 140px;
    width: 140px;
}

.testemonial-txt {
    row-gap: 25px;
    font-size: 16px;
}

.testemonial-1 {
    padding-right: 10px;
    
}


.testemonial-2 {
    padding-left: 10px;
}

.testemonial-txt-3{
    font-size: 16px;
    row-gap: 25px;
}

.t-name {
    font-size: 12px;
}

.flower-icon{
    width: 10px;
    height: 10px;
}
.price-cards{
    width: 200px;
    height: 300px;
}

.plant{
    width: 350px;
}

footer p{
    font-size: 14px;
}




}



@media  (max-width:633px){


.logo{
        width: 140px;
        height: 100px;
    }

    .name-desc{
        font-size: 25px;
    }



.contact-section {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    justify-items: center;
    row-gap: 20px;
}    

.cta-btn {
        width: 200px;
        height: 50px;
        font-size: 22px;
    }
    
.phone-icn{
        width: 22px;
        height: 23px;
    }

.valentina{
    width: 250px;
    height: 350px;

}

.o-meni-txt{
    font-size: 14px;
}


.price-cards {
    width: 180px;
    height: 200px;
}



}




@media  (max-width:564px){

.logo{
    width: 100px;
}

.name{
    font-size: 30px;
}
.name-desc{
    font-size: 20px;
}

.links{
    font-size: 16px;
}

.contact-section p{
    font-size: 16px;
}

.contact-section{
    padding-bottom: 30px;
}

.hero-2 img{
    width: 28px;
    height: 28px;

}

.hero-2{
    margin-top: 30px;
}

.customer-txt{
    font-size: 18px;
}


.o-meni-txt{
    font-size: 12px;
}

.valentina{
    width: 200px;
    height: 300px;
}



.usluge-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    padding-top: 50px;
    row-gap: 25px;
    padding-bottom: 482px;
    column-gap: 25px;
   

    }
.card-content{

    width: 140px;
    height: 260px;
}


.card-content p{

    font-size: 25px;
}

.lice-img{
    width: 140px;
    height: 170px;
}


.o-meni-intro, .usluge-section, .gallery-section {
    height: 120px;
}

.box-2, .media-fix{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    row-gap: 15px;
    padding-bottom: 15px;
    column-gap: 20px;
}

}



@media  (max-width:564px){


.logo {
        width: 160px;
        height: 140px;
        
        }
    
.name{
            font-size: 30px;
        }
    
.name-desc{
            font-size: 25px;
        }


.testemonial-1{
    padding-left: 10px;
    justify-content: flex-start;
}

.plant {
    width: 300px;
    height: 180px;
}

footer p{
    font-size: 12px;
}



        
}

































@media  (max-width:550px) {
    
.header-grid{
        display: flex;
        flex-direction: column;
        flex-wrap: wrap;
        justify-content: center;

        
        }

.header-grid-box-2{
    justify-content: center;
}   

    
.logo {
        width: 160px;
        height: 140px;
        }
    
.name{
            font-size: 40px;
        }
    
.name-desc{
            font-size: 25px;
        }
        
.header-grid-box-1{
       
        column-gap: 30px; }
    
.header-grid-box-3{
    padding: 0;
}

.links{
    font-size: 20px;
}
.name-section{
        width: 175px;
        align-items: center;
        }
    
    
.header-grid-box-3{
        display: flex;
        flex-direction: row;
        justify-content: space-evenly;
        
        column-gap: 30px;
        padding-top: 50px;
    
        }

        

.header-grid-box-5{
    height: 100px;
    padding-bottom: 50px;
}


.cta-btn {
        width: 190px;
        height: 50px;
        
    
        }

.btn-txt{
    font-size: 22px;

}
    
.phone-icn{
        width: 25px;
        height: 25px;
        }
.phone-sec, .address-sec, .hours-sec {
        font-size: 20px;
        }
    
.phone-sec-icn, .home-icn, .clock-icn{
        width: 20px;
        height: 20px;
    
        }
    
.contact-section {
        padding-top: 25px;
        display: grid;
        grid-template-columns: 1fr 1fr;
        justify-content: space-around;
        padding-bottom: 30px;
        row-gap: 30px;
        justify-items: center;
        align-items: center;
        text-align: center;
    
        }
      
     
    
    
.contact-section span{
        display: none;
        }
    
     
    
.hero-2{
        flex-direction: column;
        }
    
.hero-2 img{
        height: 45px;
        width: 45px;
    
        }
    
.customer-txt{
        font-size: 20px;
        }
.o-meni-intro, .usluge-section, .gallery-section{
      height: 100px;
        }
    
.o-meni-intro, .usluge-section, .gallery-section h3 {
        font-size: 25px
        }   
    
.o-meni-grid{
        padding-top: 30px;
        display: flex;
        flex-direction: column;
        align-items: center;
        padding-bottom: 50px;
        }
    
.valentina {
        width: 250px;
        height: 300px;
        }
    
.o-meni-txt{
        font-size: 18px;
        line-height: 1.5;
        text-align: center;
        padding: 0px 10px 0px 10px;
        
        }
    
    
.usluge-container {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        padding-top: 50px;
        row-gap: 25px;
        padding-bottom: 482px;
        column-gap: 25px;
       
    
        }
.card-content{
    
        width: 140px;
        height: 260px;
    }
    
    
.card-content p{
    
        font-size: 25px;
    }
    
.lice-img{
        width: 140px;
        height: 170px;
    }
    
.expand{
        display: flex;
        align-items: center;
        column-gap: 10px;
    }
    
.gallery{
        display: flex;
        flex-wrap: wrap;
    }
    
.expand-icon{
        display: block;
        width: 30px;
        height: 28px;
        color: #dbdbdb;
    }
    
.gallery-pic {
        height: 200px;
        width: 150px;
    }
    
.dasa{
        height: 150px;
        width: 150px;
    }
    
    .marina-a{
        height: 150px;
        width: 150px;
    
    
    }
    
.testemonial-1, .testemonial-2 {
        display: flex;
        justify-content: center;
        
        padding: 25px 10px 0px 10px; 
    }
    
    
    
.testemonial-txt, .testemonial-txt-3{
        row-gap: 25px;
        font-size: 18px;
    }
    
.t-name{
        font-size: 16px;
    }
    
.box-2, .media-fix{
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        row-gap: 15px;
        padding-bottom: 15px;
    }
    
.plant {
        width: 290px;
        height: 170px;
    } 
    
    
    
      }
  

@media  (max-width:405px) {


.usluge-container{
    padding-bottom: 1000px;
}

.contact-section p{
    font-size: 14px;
}

.contact-section svg {
    width: 18px;
    height: 18px;
}



}