* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}


html,
body {
    margin: 0;
    padding: 0;
    height: 100%;
    overflow-x: hidden;
}

body {
    background-color: var(--secondary-color);
    font-family: "Jost", sans-serif;
}


:root {
    --primary-color: #2a80f9;
    letter-spacing: 0.5px;
    font-weight: 500;
    font-family: Arial, Helvetica, sans-serif;

}
.fa-user{
    font-size: 20px;
    color: #68c5ff;
}

.Pijamora{
  font-family: "Playwrite US Modern", cursive;
  font-optical-sizing: auto;
  font-weight: 300;
  font-style: normal;
}

.btn-main-toggle{
    margin-top: -40px;
    margin-left: 10px;
    position: absolute;
}


.transparent-nav {
  background-color: rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(6px);
}

.navbar-nav .nav-link {
  color: #fff;
  font-weight: 500;
}

.navbar-nav .nav-link:hover {
  color: #4107ff;
}

.nav-link:focus {
    outline: 1px solid var(--primary-color);
    border-radius: 5px;
}

.modal-header {
    border-bottom: none;
}

.modal-footer {
    border-top: none;
}

.form-control:focus {
    border-color: transparent;
    box-shadow: 0px 0px 3px 2px rgb(163, 163, 163);
}

.social-icons {
    z-index: 9999;
    right: 0;
    margin-right: 0.65rem;
    position: fixed;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin: 0;
    padding: 0;
    width: 40px;
    overflow: hidden;
}

.social-icons a i {
    transition:  0.2s ease;
    opacity: 1;
}

.social-icons a:hover i {
    transform: scale(1.2);
    color: #ff2cca;
}




/* ///////////////////////////////////////////newwwwww Colliction */

body{
  background: linear-gradient(135deg, #fdfbff, #f1e9ff, #4d86f1);
  background-attachment: fixed;
 /* font-family: "Playwrite US Modern", cursive; */

}
.header1{
  padding: 5px 80px 5px 80px ;
 
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

.header1 .header1-left a{
    text-transform: capitalize;
    text-decoration: none;
    color: #a291e9;
    padding:  0px 10px ;
}
.header1 .header1-Right a{
   text-transform: capitalize;
    text-decoration: none;
    color: #a291e9;
    padding:  0px 10px;
}
.header1 .header1-Right a:hover i{
 transform: rotatey(180deg);
color:#38b6ff;
} 
 .icon-h1{
font-size:15px;
}
.header1 a{
    position: relative;
}
.header1  a::before{
    content:"";
    position: absolute;
    width:2px;
    height:0;
    bottom: 0px;
    left: 5px;
    background-color: #38b6ff;
    transition: 0.3s;
}
.header1 a:hover::before{
    height: 90%;
}

.header1 a::after{
    content: "";
    position: absolute;
    width: 2px;
    height: 0;
    top: 2px;
    left: 91%;
    background-color: #38b6ff;
    transition: 0.3s;
}
.header1 a:hover::after{
    height: 90%;  
}
/* ////////////////////////header1//////////////// */

.header2{
  padding: 5px 80px    5px 80px ;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: -27px;
  font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif ;

}
.img-left{
padding: 10px  ;
}
.links-header2 a{
    padding:0px 10px;
}
.links-header2 li{
    display: inline-block;
    padding: 10px;
}
.links-header2 li a{
   text-decoration: none;
    color: #a291e9; 
}
.icon-links{
    padding: 5px;
    cursor: pointer ;
    margin-top: 5px;
}
 .fa-solid-header2{
    color: #a291e9;
    font-size: 20px;
     padding:  0px 20px  ;
}
.links-header2 li {
  position: relative;
  display: inline-block;
}

.links-header2 li a::after{
    position: absolute;
    content: "";
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    border: 2px solid  #38b6ff;
    border-left: transparent;
    border-right: transparent;
    transition: transform 0.3s ease;
    transform-origin:left;
    transform: scalex(0); 
}
.links-header2 li a:hover::after{
    transform: scalex(1);   
}

.links-header2 li a::before{
    position: absolute;
    content: "";
    width: 97%;
    height: 100%;
    top: 2px;
    left: 0;
    border: 2px solid  #38b6ff;
    border-top: transparent;
    border-bottom: transparent;
    transform: scaleY(0);
    transform-origin: bottom;
    transition: transform 0.4s ease;
}
.links-header2 li a:hover::before{
     transform: scaleY(1);
}
.links-header2 a:hover{
     color: #38b6ff;
}

.li-Pages {
    position: relative;
}
.dropdwen-list-header2 {
    position: absolute;
    top: 100%;
    left: 0;
    background-color: #fff;
    border: 1px solid #ccc;
    width: 290px;
    padding: 5px;
    border-radius: 10px;
    box-shadow: 1px 1px 2px #00000070, -1px -1px 2px #00000070;
    opacity: 0;
    visibility: hidden;
    transition: 0.5s ease;
    z-index: 1;
    display: flex;
    justify-content: space-between;
    gap: 10px;
    transform: scale(0,0);
}

.li-Pages:hover .dropdwen-list-header2 {
    opacity: 1;
    visibility: visible;
    color: #38b6ff;
    transform: scale(1,1);
}
.list1-dropdwen,.list2-dropdwen {
    display: flex;
    flex-direction: column; 
}
.first-li {
    font-weight: bold;
    color: #38b6ff;
    margin-bottom: 8px;
    gap: 10px;
    text-transform: capitalize;
    border: 1px dotted #38b6ff ;
    width: 50%;
    margin-left: 4px;
    border-left: transparent;
    border-right: transparent;
    border-top:transparent;


}
.sec-li {
    margin-bottom: 5px;
}

.sec-li a {
    text-decoration: none;
    font-size: 14px;
    transition: 0.3s;
 
}

.sec-li:hover {
 transform:  scale(1.1,1.1) ;
}
.dropdwen-list-header2 a::before,
.dropdwen-list-header2 a::after {
  display: none !important;
}

.bag:hover {
     color: #38b6ff;
}
/* /////////////////////////////////header2///////////////////// */
.header3{
    width: 100%;
    height: 36px;
    filter: drop-shadow(1px 1px 30px rgba(107, 11, 131, 0.304));
    background: linear-gradient(90deg, #cab3eb, #e0c7f8, #b07eff, #8596eb);

    margin-top: -30px;
    padding:12px;
    display: flex;
    justify-content: center;
}
.header3 p{
    text-align: center;
    color: #edebf4;
    font-size: medium;
    word-spacing: 2px;
}
.header3 a{
    text-decoration: none;
    font-size: medium;
    color: #38b6ff;
    border-bottom: 2px solid #38b6ff;
    font-style: italic;
}
.header3 a:hover{
    letter-spacing: 2px;
}
/* ////////////////////////////enddddd////////////////header3//////////// */
/* ////////////////////////////////main   start */

    
main{
  position: relative;
  height: 100vh;
}

.main-img-right{
    width: 50%;
    height: 90vh;
    background-image: url(../image/famiglia_-_Any_Any-removebg-preview.png);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-position: center;
    background-position: fixed;
    position: relative;
  
    z-index: -2;
    margin-left: 50%;
    filter: drop-shadow(1px 1px 30px #b6a4f5af);
    
}
.main-left{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 40%;
}

.main-text-contant{
    margin-left: 200px;
    font-family: 'Clicker Script', cursive;
    font-size: 30px;
    font-family: "Great Vibes", cursive;
    font-size: 60px;
    color: #b5a4f5;
    font-weight: 400;

}
.main-text1-contant{
    margin-left: 150px;
    margin-top: 20px;
    color: #380343;;
    font-size: 40px;
    font-family: "Playfair Display", serif;
    letter-spacing: 0.5px;
    font-weight: 500;


 
}
.main-left p{
  margin-left: 100px;
  margin-top: 20px;
  
  color: gray;
}

.main-btn1 {
    margin-left: 200px;
    margin-top: 40px;
    width: 140px;
    height: 60px;
    background: linear-gradient(135deg, #3b0346, #5d0a70);
    filter: drop-shadow(1px 1px 30px #06011baf);
    border: none;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.4s ease;
    display: flex;
    justify-content: center;
    align-items: center;
}

.main-btn1:hover {
    transform: translateY(-5px) scale(1.05);
    filter: drop-shadow(0px 0px 40px #3c0467);
    background: linear-gradient(135deg, #52055d, #7a21a1);
}

.main-btn1 a {
    text-decoration: none;
    color: #e6ddff;
    font-size: 18px;
    letter-spacing: 0.5px;
    font-weight: 500;
    transition: color 0.3s ease;
}

.main-btn1:hover a {
    color: #ffffff;
}
/* /////////////////////////////////////////main  end */
.hr{
    width: 90%;
    height: 2px;
    background-color: #380343;
    margin-top:20px ;
    margin-left: 10px;

}

.section1 h2{
    padding-left: 60px;
    margin-top: 200px;
    color: #380343;
    font-size: 40px;
    font-style: italic;  font-family: "Playwrite US Modern", cursive;
}
.sce1-pairnt{
    display: flex;
    justify-content: space-around;

}

.sec1-div img{
    position: absolute;
    width: 100%;
    height: 100%;
    transition: 1s;
    border-radius: 40px;
}
.sec1-div:hover img{
      transform: scale(1.1,1.1);
    
}

.sec1-div{
    width: 350px;
    height: 370px;
    position: relative;
    margin: 100px 0;
    overflow: hidden;
    border-radius: 40px;
}

.sec1-div::after{
    content: "";
    position: absolute;
    width: 100%;
    height: 40%;
    bottom: 0;
    left: 0;
    background-image: linear-gradient(to top,#000000,#00000005);
    border-radius: 40px;
}

.sec1-div .contant{
    z-index: 4;
    position: absolute;
    top: 330px;
     padding-left: 130px;
}

.sec1-div .contant p{
    font-size: 25px;
    color: #beb3e5;
    font-style: oblique;
    font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
    margin-left: -40px;
    margin-bottom:10px;
}
.sec1-div .contant-p{
    margin-left: -30px;
    text-align: center;
}

.sec1-div .contant a{ 
    text-decoration: none;
    font-style: oblique;
    font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
    font-size: 18px;
    color: #38b6ff;
    border-bottom: 3px solid #38b6ff;
}
.sec1-div:hover .contant{
    margin-top:-50px;
    transition: 2s;
    border-radius: 40px;
}
.contant a:hover {
   letter-spacing: 2px;
   margin-left: -10px;
}

.header {
    background-color: #000a33;
    padding: 20px;
    text-align: center;
}

.header .logo {
    color: #ffffff;
    font-size: 32px;
    font-weight: bold;
}

.categories {
    display: flex;
    justify-content: center;
    margin: 20px 0;
    gap: 30px;
}

.categories .category {
    text-decoration: none;
    color: #000a33;
    font-weight: bold;
    font-size: 18px;
    transition: color 0.3s;
}

.categories .category:hover {
    color: #001033;
}

.section {
    padding: 40px 10%;
}

.section-title {
    font-size: 28px;
    color: #000a33;
    margin-bottom: 30px;
    text-align: center;
}

.products {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 25px;
}

.product-card {
    background-color: #f0f0f0;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    transition: transform 0.3s, box-shadow 0.3s;
    cursor: pointer;
}

.product-card img {
    width: 100%;
    height: 250px;
    object-fit: cover;
}

.product-card h3 {
    font-size: 20px;
    color: #000a33;
    padding: 10px 15px 5px 15px;
}

.product-card .desc {
    font-size: 14px;
    color: #000a33;
    padding: 0 15px 10px 15px;
}

.product-card .price {
    font-size: 16px;
    color: #555555;
    font-weight: bold;
    padding: 0 15px 15px 15px;
}

.product-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 16px rgba(0,0,0,0.2);
}

@media (max-width: 768px) {
    .products {
        grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    }

    .product-card img {
        height: 200px;
    }
}

@media (max-width: 480px) {
    .categories {
        flex-direction: column;
        gap: 15px;
    }
}

/* ////////////////////sec2  end    */



/* ////////////////sec2//////// */

.section2 h2{
    padding-left: 60px;
    margin-top: 80px;
    color: #380343;
    font-size: 30px;

     font-family: "Great Vibes", cursive;
    font-size: 60px;}

.hr{
    width: 95%;
    height: 2px;
    background-color: #380343;
    margin-top: 20px;
}
.sec2-list .line-select{
    color: #38b6ff;
    border-bottom:2px solid #38b6ff ;
}
.products-area{
    width: 90%;
    margin: auto;
    display: flex;
    margin-top: 100px;
    justify-content: space-around;

}
.products-area img{
    width: 260px;
    height: 340px;
    
}
.fashion-trend1{
    width: 260px;
    height: 440px;
    position: relative;
    perspective: 1000px;
}
.fashion-trend1 img{
     width: 260px;
    height: 340px;
}

.fashion-product1 .fashion-trend1::after{
    content: "";
    width: 100%;
    height: 75%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    background:url(../image/img8-f.png);
  
}
.fashion-product1 .fashion-trend1:hover::after{
    transform: rotateY(0deg);

}
.fashion-product2 .fashion-trend2::after{
  
    background:url(../image/prijama2fr\ man.png);
}
.fashion-product3 .fashion-trend3::after{
  background:url(../image/kids1\ fr.jfif);

}


.fashion-product4 .fashion-trend4::after{
  
 
      background:url(../image/kids6b.jfif);
}

.fashion-trend{
    width: 260px;
    height: 440px;
    position: relative;
    perspective: 1000px;
}
.fashion-product .fashion-trend::after{
    content: "";
    width: 100%;
    height: 78%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    background-size: cover;
    backface-visibility: hidden;
    transform: rotateY(180deg);
    transform-style: preserve-3d;
     transition: 1s ease;

}
.fashion-product .fashion-trend:hover::after{
    transform: rotateY(0deg);

}

.trend-icon {
    width: 60%;
    height: 10%;
    display: flex;
    position: absolute;
    left: 20%;
    bottom: 30%;
    z-index: 10;
}
.trend-icon  a{
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    text-decoration: none;
    font-size: 29px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(50%);
    transition: 0.5s;
    background: rgba(255, 255, 255, 0.15); 
    color: #3b0346;
    backdrop-filter: blur(10px);
   -webkit-backdrop-filter: blur(10px); 
    border-radius: 15px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.2); 


}
.fashion-trend:hover .trend-icon  a{
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}
.trend-icon  a:hover{
      background: linear-gradient(135deg, #8219ec,#be94e8, #5c65c7, #e3d3ff);
    color: #fff;
}



.trend-contant{
    padding: 0 20px;
    margin-top: 20px;
}
.trend-contant a {
    font-size: 20px;
    color: #16161a;
    text-decoration: none;
    padding: 10px;
    

}
.fashion-trend:hover .trend-contant a{
    color: rgb(117, 61, 201);
}
.trend-contant  p{
    color: #140025;
    opacity: 0.8;
    font-size: 18px;
    margin-left: 30px;
     padding: 10px;
}
.fashion-trend:hover .trend-contant p{
    opacity: 1;
}
.fashion-trend:hover p span{
    opacity: 0.7;
}
.trend-contant p span{
    text-decoration: line-through;
    margin-left: 10px;

}

.trend-fa-caret-right{
 margin-left: 270px;
 margin-top: -300px;
 position: absolute;
 font-size: 27px;
 color: #25012c;

}
.trend-fa-caret-left{
margin-left: -20px;
 margin-top: 150px;
 position: absolute;
 font-size:27px;
 color: #300339;

}

.fashion-trend:hover {
    transform: translateY(-12px);
    transition: 0.5s ease;
    filter: drop-shadow(0px 10px 25px rgba(177, 151, 255, 0.822));
}
.trend-icon a {
    transition: 0.5s cubic-bezier(.25,.8,.25,1);
}

/* //////////////////////////Section 2  End////////////// */




.sec3-customer{
    width: 100%;
    height: 400px;
    margin-top: 100px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-evenly;
    background: rgba(255, 255, 255, 0.18);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-radius: 20px;

    border: 1px solid rgba(255, 255, 255, 0.35);
    box-shadow: 0 8px 32px rgba(31, 38, 135, 0.20);
    position: relative;
}

.sec3-customer h2{
    font-size: 34px;
    color: #7b6ac1;;
}

.sec3-customer p{
    width: 50%;
    text-align: center;
    font-size: 20px;
    line-height: 1.5;
    color: #16161a70;
}
.sec3-customer .img-customer{
    display: flex;
    align-items: center;
}

.img-customer img{
    width: 90px;
    height: 90px;
    border-radius: 50%;
}
.info-customer{
    margin-left: 10px;
}

.info-customer h4{
    color: #260749;;
    padding-bottom: 5px;
}

.info-customer p{
    color: #11118370;
    font-weight: bold;
}

.link-customer a{
    position: absolute;
    font-size: 30px;
    opacity: 0.7;
    color: #16161a;
}

.link-customer a:hover{
    opacity: 1;
}

.sec3-customer .left{
    top: 50%;
    left: 10%;
}

.sec3-customer .right{
    top: 50%;
    right: 10%;
}

/* end section-three area  */

.section4 {
    margin-top: 300px;
}
.contant-h1{
    color:#3e1878;;
    margin-left: 500px;
    margin-top: -200px;
    font-style: italic;
    font-size: 25px;
     font-family: "Great Vibes", cursive;
    font-size: 20px;
    text-align: center;
}

.products-like {
    width: 90%;
    display: flex;
    justify-content: space-around;
    margin-top: 400px;
    gap: 20px;
}
.products-like {
    width: 90%;
    margin: auto;
    display: flex;
    justify-content: space-around;
    margin-top: 100px;
    gap: 20px;
}

.like-product, .fashion-like {
    width: 260px;
    height: 440px;
    position: relative;
    overflow: hidden;
    perspective: 1000px;
}


.like-product img, .fashion-like img {
    width: 260px;
    height: 340px;
    object-fit: cover;
    display: block;
    position: relative;
    z-index: 0;
}
.like-product1::after {
     background: url(../image/kids5ba.jfif) ; 
     width: 100%;
     height: 100%;
     background-size: 100%  100%;
     background-repeat: no-repeat;
   
}

.like-product2::after {
    background: url(../image/proimg6.jfif) ; 
    width: 100%;
    height: 100%;
    background-size: 100%  100%;
    background-repeat: no-repeat;
   
}

.like-product3::after {
    background: url(../image/prijama1ba\ man.jfif) ; 
    width: 100%;
    height: 100%;
    background-size: 100%  100%;
    background-repeat: no-repeat;
   
}
.like-product4::after {
     background: url(../image/kids2ba.jfif) ; 
     width: 100%;
     height: 100%;
     background-size: 100%  100%;
     background-repeat: no-repeat;
   
}

.like-contant a{
    margin-left: 35px;
}
.like-product::after {
    content: "";
    position: absolute;
    top: -100%; 
    left: 0;
    width: 100%;
    height: 80%;
    z-index: 1;
    opacity: 0;
    transition: top 0.6s ease, opacity 0.6s ease;
}
.like-contant span{
    margin-top: -40px;
}
.like-product:hover::after, .fashion-like:hover::after {
    top: 0;
    opacity: 1;
}



.like-icon {
    position: absolute;
    margin-top: -100px;
    left: 50%;
    transform: translateX(-50%) translateY(20%);
    display: flex;
    z-index: 20;
    opacity: 0;
    visibility: hidden;
    transition: 0.5s;
}

.like-product:hover .like-icon, .fashion-like:hover{
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
}


.like-icon a {
    background: rgba(255,255,255,0.15);
    backdrop-filter: blur(10px);
    box-shadow: 0 4px 20px rgba(0,0,0,0.2);
    display: flex;
    justify-content: center;
    align-items: center;
    color: #3b0346;
    text-decoration: none;   
    font-size: 30px;
    transition: 0.5s;
}

.like-icon a:hover {
    background: linear-gradient(135deg, #8219ec,#be94e8,#5c65c7,#e3d3ff);
    color: #fff;
}
.like-icon {
    z-index: 3;
}
.like-product img {
    z-index: 1;
}

.like-contant {   
  margin-top: 20px;
}

.like-contant a {
    font-size: 18px;
    color: #190230;
    text-decoration: none;
}

.like-contant p {
    font-size: 16px;
    color: #380343;
    margin: 5px 0 0 0;
}

.like-contant p span {
    text-decoration: none;
    margin-left: 5px;
    color: #999;
}

.like-product:hover, .fashion-like:hover {
    transition: 1s ease;
    filter: drop-shadow(0px 10px 25px rgba(177, 151, 255, 0.822));
}

.like-product, .fashion-like {
    width: 260px;
    height: 440px;
    position: relative;
    overflow: hidden;
    perspective: 1000px;
}


.like-product img, .fashion-like img {
    width: 100%;
    height: 340px;
    object-fit: cover;
    display: block;
    position: relative;
    z-index: 1; 
}

.like-icon {
    display: flex;      
    gap: 0;             
    margin-top: -50px;   
    z-index: 3;
    opacity: 0;
    visibility: hidden;
    transition: 0.3s ease;
   
}

.like-product:hover .like-icon,
.fashion-like:hover .like-icon {
    opacity: 1;
    visibility: visible;
}


.like-icon a {
    width: 50px;
    height: 41px;
    background: rgba(255,255,255,0.15);
    backdrop-filter: blur(10px);
    display: flex;
    justify-content: center;
    align-items: center;  
    color: #3b0346;
    text-decoration: none;
    box-shadow: 0 4px 20px rgba(0,0,0,0.2);
    font-size: 20px;
    transition: 0.5s;
    margin: 0;  
    font-size: 26px;        
}

.like-icon a:hover {
    background: linear-gradient(135deg, #8219ec,#be94e8,#5c65c7,#e3d3ff);
    color: #fff;
}

.like-contant {
    padding: 0 20px;

}

.like-contant a {
    font-size: 20px;
    color: #16161a;
    text-decoration: none;
    padding: 10px;
    transition: color 0.3s ease;
    margin-top: 30px;
     
}

.like-product:hover .like-contant a {
    color: rgb(117, 61, 201);
}

.like-contant p {
    color: #140025;
    opacity: 0.8;
    font-size: 18px;
    margin-left: 30px;
    padding: 10px;
    margin-top: 10px;
}

.like-product:hover .like-contant p {
    opacity: 1;
}

.like-contant p span {
    text-decoration:line-through;
    margin-left: 10px;
    opacity: 0.7;
    margin-top: 30px;
}

.like-fa-caret-right{
    margin-top: 150px;
    font-size: 27px;
}

.like-fa-caret-left{
    margin-top: 150px;
    font-size: 27px;
    
}

/* <!-- ///////////////////////////end  section 4//////////////// --> */
.bag {
    position: relative;
}

.bag::after {
    content: "3";
    position: absolute;
    top: -6px;
    right: -6px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #38b6ff;
    color: #fff;
    font-size: 12px;
    left: 1166px;
top: 41px;

    line-height: 18px;
    text-align: center;
}


/* start footer ////////////////////////////////////////// */

.footer{
    width: 100%;
    min-height: 600px;
    margin-top: 70px;
    background: #171613;
}

.enter-footer{
    width: 90%;
    margin: auto;
}

.footer-site{
    display: flex;
    flex-direction: column;
    align-items: center;
    color: #fff;
    gap: 40px;
}
.contant-enter{
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 25px 0;
    border-bottom: 1px solid #f2fffe60;
    gap: 20px;
}

.contant-enter .name-enter{
    max-width: 35%;
}

.contant-enter p{
    padding-top: 10px;
}
.contant-enter input{
    width: 350px;
    height: 50px;
    padding-left: 15px;
    font-size: 20px;
    outline: none;
}

.send-email{
    display: flex;
    gap: 10px;
}

.subscribe{
    color: #ffffff;
    width: 150px;
    height: 50px;
    background: rgb(62, 66, 255);
    font-size: 22px;
    line-height: 50px;
    text-align: center;
    display: inline-block;
}


.contant-enter a{
    color: #e4c4f9;
    font-size: 24px;
    text-decoration: none;
    margin-left: 10px;
    transition: 0.3s ease;
}

.contant-enter a:hover{
    color: #fff;
    transform: scale(1.1);
}


.div2{
    width: 100%;
    display: flex;
    justify-content: space-between;
    gap: 40px;
    padding: 30px 0;
    border-bottom: 1px solid #f2fffe60;
}

.div2 img{
    margin-right: 40px;
}


.div2 a{
    display: block;
    color: #BBB9B5;
    margin-bottom: 10px;
    transition: 0.3s;
    text-decoration: none;
}

.div2 a:hover{
    text-decoration: underline;
    transform: scaleX(1.08);
}
.div2 h3{
    margin-bottom: 20px;
}


.div3{
    width: 100%;
    text-align: center;
    padding: 20px 0;
}

.div3 p{
    color: #b9b5bb;
    line-height: 1.8;
}

.div3 p span,.div3 p a{
    color: rgb(5, 5, 69);
    padding: 0 2px;
}

.div3 p a:hover{
    text-decoration: underline;
    letter-spacing: 1px;
}

.div3 p span i{
    animation: heart 0.5s linear infinite alternate;
}

@keyframes heart{
    0%{
        color: #000000;
        transform: scale(1);
    }
    100%{
        color: rgb(62, 8, 109);
        transform: scale(1.5);
    }
}

.fa-chevron-right ,.fa-chevron-left  {
    color: #160331;
}

.like-contant .p ,.trend-contant p{
    width: 300px;
    height: 60px;
    background-color: #afd5ec52;
    filter: drop-shadow(1px 1px 30px rgba(2, 107, 168, 0.304));
    border-radius: 30px;
    background: linear-gradient(135deg, #c2d3e3, #e9f5ff, #97bcff);
    padding: 20px;
    padding: 10px;
}

.trend-contant p{
    width: 200px;
    height: 60px;
    background-color: #039dfd52;
    filter: drop-shadow(1px 1px 30px rgba(82, 163, 255, 0.304));
    border-radius: 30px;
    margin-left: -5px;
     background: linear-gradient(135deg, #c2d3e3, #e9f5ff, #4d86f1);
      padding: 20px;
}


.img-sec-center{
    width: 100%;
    height: 400px;
    background-image: url(../image/pjlist2.jfif);
    background-attachment: fixed;
    background-size: cover;
}

.img-sec-center1{
    width: 100%;
    height: 400px;
    background-image: url(../image/pjlist3.jfif);
    background-attachment: fixed;
    background-size: cover;
}

body {
    background: linear-gradient(135deg, #f8faff, #dae3ff, #d7e6ff); 
}

.header1 .header1-left a,
.header1 .header1-Right a {
    color: #6c5ce7; 
}

.header1 .header1-Right a:hover i {
    color: #00a8ff; 
}

.header1 a::before,
.header1 a::after {
    background-color: #00a8ff;
}

.links-header2 li a {
    color: #6c5ce7; 
}

.links-header2 li a:hover {
    color: #00a8ff;
}

.links-header2 li a::after,
.links-header2 li a::before {
    border-color: #00a8ff;
}

.dropdwen-list-header2 {
    background-color: #ffffff; 
}

.first-li {
    color: #00a8ff;
    border-color: #00a8ff;
}

.sec-li a {
    color: #6c5ce7;
}

.sec-li:hover {
    color: #00a8ff;
}


.header3 p {
    color: #f8f9fa;
}

.header3 a {
    color: #00a8ff;
    border-bottom: 2px solid #00a8ff;
}

.main-text-contant {
    color: #5c8de7;
}

.main-text1-contant {
    color: #6642e6;
}

.main-left p {
    color: #636e72;
}

.main-btn1 {
    background: linear-gradient(135deg, #4c1d95, #6c2ca7);
}

.main-btn1:hover {
    background: linear-gradient(135deg, #5d2ea0, #7b42c1);
}

.main-btn1 a {
    color: #f0f4ff;
}




.sec5{
    width: 100%;
    height: 600px;
    background: rgba(255, 255, 255, 0.18);
    backdrop-filter: blur(12px);
   -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.3);
  box-shadow: 0 8px 32px rgba(31, 38, 135, 0.25);
    border-radius: 40px;
    border: none;
    padding: 200px;
    margin-top: 90px;
}

/* //////////////////////////////////////section  paymint */

#btn3{
    width: 200px;
    height: 50px;
  padding: 14px 36px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,0.35);
  background: rgba(255,255,255,0.2);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: #3c0467;
  font-size: 16px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.4s ease;
}

#btn3:hover {
  background: rgba(255,255,255,0.35);
  transform: translateY(-4px) scale(1.05);
  box-shadow: 0 10px 30px rgba(60,4,103,0.3);
}



#cart-section {
  width: 80%;
  margin: 80px auto;
  padding: 30px;
  border-radius: 24px;

  background: rgba(255, 255, 255, 0.25);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);

  border: 1px solid rgba(255, 255, 255, 0.35);
  box-shadow: 0 15px 50px rgba(60, 4, 103, 0.3);
}

#cart-section h4 {
  text-align: center;
  font-size: 24px;
  color: #6c1b83;
  margin-bottom: 20px;
  border-bottom: 2px solid rgba(108, 27, 131, 0.3);
  padding-bottom: 10px;
}


#productCard,
#priceCard {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  font-size: 16px;
}

#productCard p {
  color: #3b0346;
}

#priceCard p {
  color: #9846ae;
  text-align: right;
}

#productCard,
#priceCard {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  font-size: 16px;
}

#productCard p {
  color: #3b0346;
}

#priceCard p {
  color: #9846ae;
  text-align: right;
}

#totalPrice {
  margin-top: 20px;
  font-size: 18px;
  font-weight: 600;
  color: #380343;
  border-top: 1px dashed rgba(56, 182, 255, 0.6);
  padding-top: 12px;
}


#cart-count {
  background: linear-gradient(135deg, #5d0a70, #9f86c0);
  color: #fff;
  padding: 3px 10px;
  border-radius: 50%;
  font-size: 14px;
}

#btn3 {
  display: block;
  margin: 30px auto 0;
  padding: 14px 50px;
  border-radius: 18px;
  border: none;
  cursor: pointer;

  background: linear-gradient(135deg, #3b0346, #6c1b83);
  color: #fff;
  font-size: 17px;
  font-weight: 600;
  transition: 0.4s;
}

#btn3:hover {
  background: linear-gradient(135deg, #52055d, #9846ae);
  box-shadow: 0 12px 35px rgba(108, 27, 131, 0.6);
  transform: translateY(-4px);
}