/* CSS Document */
/*variabili*/

:root {
    --colore-titolo: #25304d;
    --button: #25304d;
    --sfondo: #f7e7ed;
}
/*generali*/
body {
	font-family:"Poppins", serif; 
    color: var(--button);
}

.container {
    width:100%; 
	max-width:1290px; 
	margin: 0 auto; 
}

.flex {
	display: flex;
}

button , .button {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    transform-style: preserve-3d;
}

button:hover , .button:hover {
    transform: scale(1.1) translateZ(20px);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
}

/*back to top */

.scroll-to-top {
	position:fixed;
	right: 30px;
	bottom: 30px;
	opacity: 0; /*passaggio morbido dal nascosto al visibile*/
	transition: opacity .4s;
}

.see .scroll-to-top {
	opacity: 1;
}


.bi-arrow-up-circle-fill {
	fill: var(--button);
	width: 50px;
	height: 50px;
}

.bi-arrow-up-circle-fill:hover {
	cursor: pointer;
}


html {
	scroll-behavior: smooth;
}

/*------ header style ------
-------------------------- */

header /*.container*/ { 
    display: flex; 
    justify-content: space-between;
    align-items: center;
    height: 130px;
    position: fixed;
    top: 0;
    width: 100%;
    transition: height .4s;
	backgroud: #fff;
	z-index: 1000;
	background: #fff;
    z-index: 999;
} 

header .flex {
    display: flex; 
    justify-content: center; 
    align-items: center; 
    gap: 30px; 
} 

header.small {
	height: 100px;
    background: #fff;
    z-index: 999;
}

header ul li {
    list-style: none; 
}
header ul {
    padding-left: 0; 
}
header a {
	text-decoration: none; 
    color: var(--colore-titolo); 
}

.logo {
    display: flex;
    padding: 8px; 
}

.logo h2 {
    padding-left: 10px; 
}

.logo img {width: 10%;}

.fa-magnifying-glass , .fa-user , .fa-heart , .fa-cart-shopping {
    font-size: 20px; 
    color: var(--colore-titoli); 
}


.menu-toggle span {
	display: block;
	width: 25px; 
	height: 3px;
	background-color: #333;
	margin-bottom: 5px;
}
.menu-toggle {
	display: none;
}
/*------ hero style ------
-------------------------- */
.hero {
    height: 100vh; 
    
    background: url("img/headphones-with-cds.png");
    background-size: cover;
    background-position:bottom;
   /* background-position: 0 90%; */
 /* background: url("img/record-boy-small.jpg");
   
    background-repeat: no-repeat;
   /* background-position: 0 10%;  */ 
    position: relative; 
    
}

.pink .button {
    margin-left: 20px;
    margin-top: 20px; 
}

.pink p {
    padding: 0 50px 0 20px;
    color: var(--colore-titolo);
}

.hero .container.flex {
     display: flex;
    align-items: flex-end; 
    justify-content: flex-end; 
    height: 100%;
}
.pink {
   /* display: flex; 
    justify-content: center;
    flex-direction: column; 
    align-items: center; */
   /* position: absolute;
    right: 80px; 
    bottom: 0; 
    height: 55vh; */
   flex: 1 1 600px;
    max-width: 600px;
    height: 70%;
    max-height: 470px;
    background-color: var(--sfondo);
    padding: 20px 30px;
    box-sizing: border-box;
    margin-left: 50%;
}

.pink h1 {
   /* color: #fff; */
    margin-top: 3%;
    margin-bottom: 0;
    padding: 10px 20px 15px 20px;
    line-height: 1.6;
    font-size: 2.8rem;
    color: var(--colore-titolo);
}


/*.pink button {
    border: 3px solid #fff;
    font-weight: bold;
    background: transparent;
    padding: 20px 50px; 
    color: #fff;
} */

.button {
    border: none;
    padding: 20px 50px; 
    color: white;
    /*background-color: #BB8836;*/
    background-color: var(--button);
}
/*------ middle style ------
-------------------------- */
.middle {
    padding: 50px; 
    text-align: center; 
}

.middle p {
    color: dimgrey;
    padding: 20px; 
}

/*------ cards style ------
-------------------------- */ 
.showroom {
    margin-bottom: 55px;
}
.showroom .container {
	justify-content: center;
	gap: 50px;
}
.cards { width: 25%;}
.cards img {
    width: 100%;
    border-radius: 10px;
}

.cards h3 {
    text-align: center;
}


/*------ prods style ------
-------------------------- */
.product a {
    text-decoration: none;
    color: black;
} 
.product_headline {
    text-align: center;
    padding: 20px; 
    margin: 20px 0 60px;
}

.product { 
    width: 25%;
    background-color: #e2e2e2; 
    position: relative;
}

.product img {
    width: 100%;
}

.ads .container {
    justify-content: center; 
    gap: 30px;
    margin-bottom: 40px;
}

.product_content {
    padding: 10px; 
}


.show {
    text-align: center; 
    margin: 60px 0;
}

.show button {
    padding: 20px 50px; 
    border: 2px solid var(--button);
    color: var(--button);
    font-weight: bold; 
    background: transparent;
}


/*------ rooms style ------
-------------------------- */
.rooms-inspo {
    background-color:var(--sfondo); 
    margin: 40px 0;
}
.rooms-inspo .container {
    justify-content: space-around;
    gap: 30px; 
}

.room {
    width:40%;
    position: relative;
}

.room img {
    width:100%;
}

.room-1 , .room-2 {
    padding-top: 40px;
}
.room-1 {
    height: 93%;
    position: relative;
}
.room-content {
    padding-top: 180px;
    width: 40%;
}
.room-content h2 {
    font-size: 2rem;
}
.room-content p {
    padding-bottom: 20px;
}

.peace {
    position: absolute;
    bottom: 80px;
    left: 35px; 
    width: 70%;
}
.peace-content {
    background: #fff;
    opacity: 80%;
    padding:10px;
    width: 100%;
}

.arrow .button {
    padding: 10px 20px;
}

/*------ footer style ------
-------------------------- */

footer .container {
    justify-content: space-between;
}


.footer-widget ul {
    padding-left: 0;
    margin-left: 0;
    list-style: none;
}

.footer-widget li { padding-bottom: 30px;}

.campi_form {
   text-align: center;
}
.campi_form p {
    padding-right: 108px;
}
footer label {
    visibility: hidden;
    margin-left: 60px; 
}

footer input[type="email"] {
    border: none; 
    border-bottom: 1px solid black; 
}

footer input[type="submit"] {
    border: none; 
    border-bottom: 1px solid black; 
    background-color: white; 
    text-transform: uppercase; 
    font-weight: bold; 
    padding-bottom: 5px; 
}

.bottom.container {
    padding: 50px 0;
    border-top: 1px solid grey;
}


/*----- shop page -----
---------hero-------------*/

.hero_shop {
    height: 80vh;
	padding: 60px 0;
    background-image: url("img/sfondo-cd-2.jpg");
    background-size: cover;
    background-position:center; 
    display: flex; 
    flex-direction: column; 
    justify-content: center; 
    align-items: center; 
    text-align: center; 
}
.hero_shop p {
	margin-bottom:0;
}
/*----- shop page -----
----------filter--------*/
.filter {
    background-color: var(--colore-titolo);
}

.filter p, .filter h3, .filter h4, .filter-icon  {
    color: #fff;
}
.filter .container {
    justify-content: space-between; 
    align-items: center; 
}

.filter_1 {
    gap: 25px;
}
.filter_1 h4 {
    padding-right: 20px; 
}

.filter_2 {
    width: 45%;
}
.filter_1 , .filter_2 {
    align-items: center;
}

.uno , .due {
    align-items: center;
    gap: 10px;
}

.mostra {
width: 30%;}

.sort , .mostra { 
    border: none;
    padding: 10px;
}
.fa-arrow-up-z-a {
    padding-right: 5px; 
}

.filter_container p {
    border-left: 2px solid gray; 
    padding-left: 20px; 
}

/*----- shop page -----
--------products-------*/

.tall {
    margin-top: 50px; 
}

.discount {
    border-radius: 50%; 
    padding: 20px 10px; 
    position: absolute;
    left: 70%; 
    bottom: 80%;
    color: white; 
    background-color: #de5960; 
    border: none; 
}

.respira {
    border-radius: 50%; 
    padding: 20px 13px; 
    position: absolute;
    left: 70%; 
    bottom: 80%;
    color: white; 
    border: none; 
    background-color: #339f9f;
}
.product_content p {
    color: gray; 
}
.sconto {
    display: flex; 
    align-items: center; 
    justify-content: space-between;
}

.sconto p {
    text-decoration: line-through; 
}
/*----- shop page -----
--------numbers--------*/

.numbers {
    display: flex; 
    justify-content: center; 
    padding-bottom: 30px; 
}

.numbers button { 
    margin: 20px; 
    border-radius: 8px; 
    border: none; 
    padding: 15px 25px; 
    background-color:var(--button); 
    color: #fff;
}

.numbers button:hover {
    background-color: #9bbbe4;
    color: #000; 
}

/*----- shop page -----
--------services--------*/

.services {
	margin: 20px 0;
    padding: 20px 0;
    background-color:var(--sfondo); 
}
.services .container {
	justify-content:space-between;
	gap: 20px;
}
.services p {
    color: grey;
}

.icon_style {
    font-size: 30px; 
    padding-right: 20px; 
}
.support {
    display: flex; 
    justify-content: center; 
    align-items: center;  
}

/*----- contact page -----
-------information-----*/

.information {
    text-align: center;
	padding: 60px 0;
}

.information .container {
	width: 50%;
}

.information p {
    color: grey; 
}

/*----- contact page -----
---------contact--------*/

.contact .container {
	justify-content: center;
	gap: 20px;
    margin-bottom: 50px;
}
.contact-card-container{
	width: 40%;
}

.contact-card{
	width: 65%;}

.forms {
	width: 40%;
}

.camp {
    padding-top: 20px; 
    padding-bottom: 20px; 
}


.camp input[type="email"] , .camp input[type="text"] , .camp textarea {
    padding: 10px 50px;
    border-radius: 7px; 
    border: 1px solid #AFAAAA; 
}


.camp {
    margin-bottom: 1rem; 
}
.camp label {
    display: block; 
    margin-bottom: 0.5rem; 
    font-weight: bold;
}

.forms input[type="submit"] {
    background-color: var(--button);
    margin-top: 30px; 
    border: none;
    padding: 10px 50px; 
    color: white; 
    border-radius: 6px;  
}


/*----- blog page -----
---------design--------*/

.blog .container {
    justify-content: space-between;
}
.design {
    width: 55%;
}

.design-cards img {
    width: 100%;
    border-radius: 10px; 
}
.design {
    margin-top: 60px; 
}
.admin {
    display: flex;
    gap: 20px; 
    color: gray;
}
.admin_icon {
    color: grey; 
    padding: 10px; 
}

.design-content {
    margin-bottom: 60px; 
}
.design-content p {
    color: gray;
}

.design-content button {
    color: black; 
    border: none; 
    border-bottom: 1px solid black;
    padding-top: 20px; 
    background-color: white; 
    padding-bottom: 5px; 
}



/*----- blog page -----
------recent posts------*/

.left {
    padding-top: 55px;
    width: 35%;
}

.post {
    padding: 20px 0;
    align-items: center;
}

.post img {
    width: 27%;
}

.post-content {
    padding-left: 20px;
}

.post-content p {
    color: grey; 
}

/*----- blog page -----
-------categories------*/
.categories ul {
    list-style: none; 
    color: grey;
}

.categories li {
      padding-bottom: 20px; 
}

.categories {
    display: flex; 
    flex-direction:column;
    margin-bottom: 30px; 
}
.category_1 {
    display: flex;
    justify-content: space-between; 
}

.categories input[type="search"] {
    font-family: FontAwesome, Arial; 
    font-style: normal;
    padding: 15px; 
    border-radius: 10px; 
    border: 1px solid grey; 
    position: relative;
    margin-bottom: 20px; 
}

.categories input[type="search"]::placeholder {
    position: absolute; 
    right: 10px;
    color: black;
    font-size: 20px; 
}


/*-------------------------------------------------
-------- bluetooth headset single product ---------
--------------------------------------------------- */
.height {
    margin-top: 130px;
}

.breadcrumbs p {
    padding: 0 30px;
}

.breadcrumbs .container.flex  {
    justify-content: center;
}

.breadcrumbs {
    background: #9bbbe4;
    color: var(--button);
    padding: 15px 0;
}
.headset {
    margin: 5% 0 10% 0;
    

}
.headset .container.flex {
    justify-content: space-between;
}

.headset-container  {
    width: 40%;
} 
.headset-content {
    width: 50%;
}
.headset-container img {
    border-radius: 10px;
    width: 100%;
}

.review svg {
    width: 15%;
}

.review.flex {
    gap: 50px;
}

.review p {
    font-size: 0.9rem;
    border-left: 2px solid grey;
    padding-left: 30px;
}
.grey {
    color: grey; 
}
.big {
    font-size: 1.2rem;
}
.line {
    line-height: 1.4;
    margin-bottom: 6%;
    
}

.btn-wrap {
    margin-bottom: 6%;
}
.btn-wrap button {
    margin-right: 10px;
    border-radius: 8px;
    border: none;
    padding: 10px 20px;
    background-color: var(--button);
    color: #fff;
}

.btn-wrap button:hover {
     background-color: #9bbbe4;
    color: #000; 
}

.black, .white {
    width: 40px;
    height: 40px;
    border-radius: 50%; 
    margin-right: 20px;
}

.black {
    background: #373737;
}
.white {
    background: whitesmoke;
    border: 2px solid grey;
}

.btn-wrap-2 {
    margin-top: 5%;
}
.btn-wrap-2 button {
    background: #fff;
    padding: 10px 20px;
    margin-right: 5%;
    border: 2px solid var(--button);
    border-radius: 10px;
    color: var(--button);
}
.add-info {
    background: var(--sfondo);
    padding-top: 2%;
    margin-bottom: 5%;
    padding-bottom: 5%;

}
.add-info h2 {
    text-align: center;
    margin-bottom: 5%;
}
.img-container.flex {
    justify-content: center;
    gap: 7%;    

}
.img-container img {
    width: 30%;
    border-radius: 15px;
}

.description {
    width: 80%;
    margin: 0 auto;
    margin-bottom: 5%;

}
.description p {
    line-height: 1.3;
}

.center {
    text-align: center;
}
/*---------------------------------------
-------- media query for tablet ---------
---------------------------------------*/


@media(max-width:1025px) {
	
	 .menu-toggle {
        order: 3;
		display: block;
		margin: 10px;
	}
	
	.menu-toggle span {
        background: black;
		transition: transform .5s;
	}
	header {position: relative;}
    
	
	nav {
		position: fixed; /* rispetto a body (viewport)*/
		top: 0;
		left: -100%; /*nascondere, solo far vedere se è cliccato*/
		background: var(--button);
		height: 100vh;
		width: 50%;
		transition: left .4s;
        z-index: 999;
	}
    nav ul {
        padding-top: 25px;
    }
    
    nav ul li a {
        color: var(--sfondo);
    }
    nav.open {
		left:0;
	}
	
	ul.menu {
		flex-direction: column;
	}
	
	.menu-toggle.close > span:nth-child(1) {
		transform: translateY(10px) rotate(45deg);
	}
	.menu-toggle.close > span:nth-child(2) {
		opacity: 0;
	}
	.menu-toggle.close > span:nth-child(3) {
    transform: translateY(-6px) rotate(-45deg);
	}
    .logo h2 {
        padding-left: 6px;
}
    .flex.icons {
        gap: 12px;
    }
   
    
    /*hero*/
    
  
    
    .pink h1 {
        padding: 10px 20px 15px 20px;
        line-height: 1.4;
        margin: 0;
        font-size: 2em;
        text-align: center;
    }
    
    .pink p {
        font-size: 0.9rem;
        text-align: center;
        margin: 0;
        padding: 0 20px 0 20px;
    }
    
    .pink .button {
        width: 30%;
        margin: 0 auto;
        margin-top: 5%;
        padding: 15px 45px;
}
       .pink {
        display: flex;
        flex-direction: column;
        justify-content: center;
        margin: 0;
    }

    .pink {
    max-width: none;
    height: 30%;
    padding: 20px 30px;
    box-sizing: border-box;
    }
    
    .hero {
        height: 90vh;
		background: url("img/sfonod-mobile.png");
		background-size: cover;
    }
    
    /*ads*/
    
    .ads .container.flex {
        flex-wrap: wrap;
    }
    
    .product {
        width: 40%;
    }
    
    .rooms-inspo .container {
        flex-wrap: wrap;
    }
    
    img.room-2 {
    display: none;
}
    footer .container.flex {
        flex-wrap: wrap;
        justify-content: center;
    }
    
    .footer-widget {
        width: 30%;
    }
    /*shop/contact/blog hero section*/
    .hero_shop {
        height: auto;
    }
    /*services banner*/
    .services .container{
    flex-wrap: wrap;
    justify-content: center;
}
    .support {
        width: 40%;
    }
    
    
    /*blog */
     .blog .container {
        display: block;
    }
    .design {
        width: 95%;
        padding-left: 30px;
    }
    
    .design-content {
        text-align: center;
    }
    .left {
        width: 90%;
    }
    
    .categories h2 , .recent-posts h2 {
        text-align: center;
    }
    .categories input[type="search"] {    
    margin-left: 43px;
    }
    .post.flex {
        margin-left: 45px;
    }
    
    /*single product */ 
    
      .height {
        margin-top: 0;
    }
    
    
}
	






/*---------------------------------------
--------media query for smartphone-------
---------------------------------------*/

@media(max-width:767px) {
/*------ header ------*/
     .menu-toggle {
        order: 3;
		display: block;
		margin: 10px;
	}
	
	.menu-toggle span {
        background: black;
		transition: transform .5s;
	}
	header {position: relative;}
    
	
	nav {
		position: fixed; /* rispetto a body (viewport)*/
		top: 0;
		left: -100%; /*nascondere, solo far vedere se è cliccato*/
		background: var(--button);
		height: 100vh;
		width: 50%;
		transition: left .4s;
        z-index: 999;
	}
    nav ul {
        padding-top: 25px;
    }
    
    nav ul li a {
        color: var(--sfondo);
    }
    nav.open {
		left:0;
	}
	
	ul.menu {
		flex-direction: column;
	}
	
	.menu-toggle.close > span:nth-child(1) {
		transform: translateY(10px) rotate(45deg);
	}
	.menu-toggle.close > span:nth-child(2) {
		opacity: 0;
	}
	.menu-toggle.close > span:nth-child(3) {
    transform: translateY(-6px) rotate(-45deg);
	}
    .logo h2 {
        padding-left: 6px;
}
    .flex.icons {
        gap: 12px;
    }
    
    
 /*----- home page -----*/  
    .pink h1 {
        padding: 10px 20px 15px 20px;
        line-height: 1.4;
        margin: 0;
        font-size: 2em;
        text-align: center;
    }
    
    .pink p {
        font-size: 0.9rem;
        text-align: center;
        margin: 0;
        padding: 0 20px 0 20px;
    }
    
    .pink .button {
        margin-left: 80px;
        margin-top: 20px;
        padding: 15px 45px;
}
    .pink {
        position: inherit;
        width: 100%;
		margin: 0;
     
    }
    
    .hero {
		background: url("img/sfonod-mobile.png");
		background-size: cover;
    }
    .showroom .container {
        display: block;
    }
    .cards , .product {
        width: 80%;
        margin-left: 37px;
    }
    
    .ads .container {
        display: block;
    }
    
    .product {
        margin-bottom: 50px;
    }
    
    .rooms-inspo .container {
        display: block;
        padding-bottom: 40px;
    }
    .room-content {
        width: 100%;
        padding: 60px 10px 40px;
        text-align: center;
    }
    .room-content h2 {
        font-size: 1.8rem;
    }
    .room-content p {
        line-height: 1.6;
        font-size: 1rem;
    }
    .room-content button {
        padding: 20px 25px;
    }
    .room {
        width: 90%;
        padding-left: 30px;
    }

/*----- contact page -----*/
	.hero_shop {
		padding: 30px 0;
	}
	.information .container {
		padding: 50px 30px;
		width: 100%;
		
	}
	.contact .container {
		display: block;
	}
	.contact-card-container , .forms {
		width: 100%;
		padding: 10px 50px;
	}
	.contact-card{
        padding: 30px 0;
		width: 100%;
	}
	p.indirizzo{
		line-height: 2;
	}
    
    .support {
        width: 100%;
    }
    
    .support:nth-child(2){
        padding-right: 20px;
    }
    .support:nth-child(3){
        padding-right: 80px;
    }
    .support:nth-child(4){
        padding-right: 70px;
    }
    
    footer .container {
        display: block;
    }
    .footer-widget {
        padding: 10px 0;
    }
    .footer-widget , .bottom {
        text-align: center;
    }
    .campi_form {text-align: center;}
    .campi_form p {
        padding-right: 0;
    }
    footer input[type="submit"] {
        padding-top: 20px;
    }
    
    /*blog page */
    
    .design {
        width: 90%;
    }
    
    /* ---- shop page ---- */
    
    .filter .container {
    display: block;
    }
    .filter_1 {
        justify-content: center;
        gap: 15px;
    }
    
    .filter_2 {
        gap: 20px;
        width: auto;
        justify-content: center;
    }
    
    .sort , .mostra { width: auto;}
    
    #form2 input {width: 130px;}
    
    #form1 input {width: 50px;}
    
    .numbers {flex-wrap: wrap;}
    
    
    /*single product*/
    

    
    .headset .container.flex {
        display: block;
    }
    
    .headset-container , .headset-content {
        width: 85%;
        margin: 0 auto;
        text-align: center;
    }
    
    .review.flex , .btn-wrap, .color-container{
        justify-content: center;
    }
    
    .review.flex {
    gap: 30px;
    }
    .review svg {
    width: 30%;
    }
    
    .img-container img {
    margin: 20px 0;
    width: 40%;
    }
}