@import url('https://fonts.googleapis.com/css2?family=Great+Vibes&family=Merienda:wght@300&display=swap');

*{
    margin: 0;
    padding: 0;

}
/* navigation bar */
.nav-item img{
    height: 35px;
    width: 35px;
    margin: 0 15px;
}
.navbar img#logo-image{
    height: 50px;
    width: 65px;
}
.navbar-brand{
    font-family: 'Great Vibes', cursive;
    font-family: 'Merienda', cursive;
    font-weight: bold;
}
li{
    list-style-type: none;
}
form input[type=search]{
    border: 1px lightblue solid;
    outline: 1px lightblue solid;
}
form .btn{
    border: 1px #c8a3c8e0 solid;
    outline: 1px #c8a3c8e0 solid;
    background-color: #c8a3c8e0;
    font-weight: bold;
    margin: 10px 0;
}
.carousel-item img {
    height: 75vh;
}

/* image selection div */
#selection{
    margin: 20px 0;
    padding: 15px 0;
    background-color: #cccccc33;
}
.image-sel{
    display: grid;
    grid-template-columns: 45% 55%;
    /* grid-gap: 10px; */
}
#image-title{
    margin: 7px 0;
}
.image-sel .gen-sel{
    position: relative;
}
#image-title img{
    height: 100%;
    width: 96.5%;
}
#image-title h1 {
    color: white;
    font-weight: 900;
    position: absolute;
    top: 80px;
    right: 24px;
    text-align: right;
    font-family: cursive;
    font-size: 40px;
}
#image-title-1 h1{
    color: white;
    font-weight: 900;
    position: relative;
    top: -363px;
    left: 20px;
    font-family: cursive;
    font-size: 50px;
    width: 60%;
}
#image-title-1 img {
    height: 100%;
    width: 100%;
}
/* image selection div */
#new-collection{
    background-color: #cccccc33;
    padding: 20px 0;
}
#new-collection h1{
    text-align: center;
    font-family: 'Great Vibes', cursive;
    font-family: 'Merienda', cursive;
    font-weight: bold;
}
.card-group img{
    cursor: pointer;
    transition: all 0.5s 0.075  linear;
}
.card-group img:hover{
    transform: scale(2.5);
    overflow: hidden;
}
.hidden {
    overflow: hidden !important;
}
/* image selection div */
/* Footer start */
.footer{
    margin: 20px 0 0 0 ;
    background-color: #4743436b;
    padding: 20px;
    text-align: center;
    /* position: sticky;
    bottom: 0; */
}
.footer-form{
    margin: 15px 0;
}
.footer .bttn{
    width: 200px;
    background-color: #eabeeae0;
    border: 1px solid #eabeeae0;
    outline: 1px solid #eabeeae0;
    font-weight: 900;
    padding: 5px 0;

}
input[type=text]{
    width: 250px;
    padding: 5px;
    text-transform: capitalize;
    border: 1px solid #add8e6;
    outline:  1px solid #add8e6;
}
input [type=text]:focus{
    outline: 1px solid #add8e6;
    border:  1px solid #add8e6;
}
.abt-head{
    text-align: center;

}
.abt-head h1{
    font-family: 'Great Vibes', cursive;
    font-family: 'Merienda', cursive;
    margin-top: 20px;
}
.abt-head h2{
    margin: -15px 0 35px 0;
    font-weight: bolder;
}
#testomi{
    background-color: #cccccc33;
    padding: 25px 0;
    margin: 20px 0;
}
/* footer end */
/* testominial */
.carousel :where(.card, .img){
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}
.card .img{
    background: #8B53FF;
    height: 205px;
    width: 205px;
    border-radius: 50%;
}
.card .img img{
    height: 200px;
    width: 200px ;
    border-radius: 50%;
    object-fit: cover;
    border: 4px solid #FFF;
}
.client-view{
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(to left top, #c1c2c4, #d4d4d7);
    padding: 20px 0;
}
.carousel .card{
    list-style-type: none;
    background: #FFF;
    border-radius: 10px;
    height: 400px;
    display: flex;
     align-items: center;
     justify-content: center;
     flex-direction: column;
     padding: 15px;
     cursor: pointer;
}
.wrapper{
    position: relative;
    width: 100%;
}
.wrapper .carousel{
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: calc((100% / 3 ) - 12px) !important;
    gap: 15px;
    overflow: hidden;
}
.wrapper svg{
    height: 50px;
    width: 50px;
    background-color: #FFF;
    text-align: center;
    line-height: 50px;
    border-radius: 50%;
    cursor: pointer;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.25);
    font-size: 1.25rem;
}
.wrapper svg:first-child{
    left: -22px
}
.wrapper svg:last-child{
    right: -22px;
}
/* contact page */
#con-form{
    background-color: #cccccc33;
    padding: 20px 0;
    margin: 20px 0 0 0;
}
.con-form{
    display: flex;
    justify-content: center;
    align-items: center;
    /* background: #FFF;
    padding: 20px 0; */

}
.con-map{
    width: 50%;
}
.con-form iframe {
    width: 94% !important;
}
.feed-form{
    width: 50%;
}
.input-group input{
    margin-bottom: 15px;
    width: 50%;
}
/*  */
/* product section start */
#products{
    background-color: #cccccc33;
    padding: 40px;
}
.product-detail{
    border: 1px solid #c1c2c4;
    border-radius: 10px;
    box-shadow: 0px 3px 9px rgba(0, 0, 0, 0.25);
    display: grid;
    grid-template-columns: 2% 23% 60% 16%;
    justify-content: stretch;
    align-items: center;
    padding: 20px 30px;
    grid-gap: 10px;
    margin: 20px 0;
}
.price-rate {
    font-size: 22px;
}
.product-image {
    display: flex;
    justify-content: center;
    align-items: center;
}
.product-image .image img{
    height: 250px;
    width: 250px;
    /* transition: all 0.5s 0.5s linear; */
}
/* .product-image .image img:hover{
    transform: translate(2.75);
} */
input#product {
    height: 35px;
    width: 20px;
}
.size-quant{
    display: inline-flex;
}
.size-quant label {
    display: inline-block;
    padding: 0 10px;
    font-weight: 500;
}
.size-quant select{
    width: 70px;
    text-align: center;
    /* padding: 0 25px; */
}
.size, .quant {
    margin: 5px 10px;
}

/* form login styling */
.form-style{
    background: url("https://avante.biz/wp-content/uploads/Fashion-Backgrounds-Pictures/Fashion-Backgrounds-Pictures-025.jpg");
    background-repeat: no-repeat;
    background-size: cover;
    height: 100vh;
    padding: 10%;

}
.form-field{
    display: grid;
    justify-content: center;
    align-items: center;
}
.group{
    display: inline-flex;
    /* background-color: #8B53FF; */
    overflow-y: hidden;
    /* border: 1px solid rgba(0, 0, 0, 0.25); */
}

.input-group-prepend .input-group-text{
    border-radius: 0px;
    border: 0px;
    outline: 0px;
    margin-right: 2px;
}
input:focus{
    border-bottom:3px solid #FFF ;
    outline:3px solid #FFF ;
}
.form-field input{
    /* line-height: 2.5; */
    width: 350px !important;
    border: none;
    outline: none;
    border-radius: 0px;
}
.form-field p{
    color: #fff;
}
.sub-btn{
    width: 100%;
}


.container.log-form {
    background: radial-gradient(black, transparent);
    padding: 3rem;
    border: 6px solid #8a8080;
    width: 50%;
    box-shadow: 0px 10px 15px #8a8080;
}
.sub-btn button{
    width: 200px;
    margin: auto;
    border: 1px sollid #FFF;
    outline: 1px solid #FFF;
    padding: 8px;
    border-radius: 20px;
}
@media (max-width:1300px) {
    .product-image .image img {
        max-width: 250px;
        height: 250px;
        width: 200px;
        /* transition: all 0.5s 0.5s linear; */
    }
    .container.log-form{
        width: 75%;
        padding: 1rem;
    }
}
@media (max-width:998px) {
    .wrapper .carousel{
        grid-auto-columns: calc((100% / 2 ) - 9px) !important;
    }
    .container.product-detail {
        display: grid;
        grid-template-columns: auto auto auto auto;
        grid-gap: 20px;
    }
    #image-title-1 h1{
        top: -203px; 
        font-size: 40px;
        width: 50%;
    }
    #image-title h1 {
        top: 46px;
        font-size: 37px;
    }
    .container.log-form{
        width: 80%;
        padding: 1rem;
    }
}


@media (max-width:768px) {
    .wrapper .carousel{
        grid-auto-columns: 100% !important;
    }
    .container.product-detail {
        display: grid;
        grid-template-columns: auto ;
        /* grid-gap: 20px; */
    }
    .size, .quant {
        margin: 0;
    }
    #new-collection .card-group {
        display: grid;
        grid-template-columns: auto;
    }
    .image-sel{
        display: grid;
        grid-template-columns:auto;
        /* grid-gap: 10px; */
    }
    #image-title img {
        height: 100%;
        width: 100%;
    }
    #image-title-1 h1{
        top: -333px; 
        font-size: 40px;
        width: 50%;
    }
    #image-title h1 {
        top: 117px;
        font-size: 37px;
    }
    .carousel-item img {
        height: 50vh;
    }
    .container.log-form{
        width: 100%;
        padding: 1rem;
    }
}