*{
   
   margin: 0px;
   padding: 0px;
   box-sizing: border-box;
   font-family: var(--font);
}
p,h1,h2,h3,h4,h5,h6{
   margin: 0px;
}
:root{
   --dark: #101828 ;
   --normal: #4A5565;
   --nav-link: #364153;
   --font: Arimo;
   scroll-behavior: smooth;
}
.width{
   max-width: 1440px;
}
.navbar .navbar-nav .p-16{
   padding: 0px 16px;
}
nav{
   height: 80px;
   width: 100vw;
   border-bottom: 1px solid rgba(0, 0, 0, 0.05);
   background: rgba(255, 255, 255, 0.8);
   backdrop-filter: blur(15px);
   z-index: 99999;
}
nav .navbar-brand h1{
   font-size: 17px;
   margin: 0 0 0 10px;
}
.navbar .navbar-brand h1{
   color: var(--dark);
}
.navbar .nav-link{
   color: var(--nav-link);
   font-size: 14px;
   font-weight: 400;
   line-height: 150%;
}
.navbar .nav-btns{
   list-style-type: none;
   padding: 8px;
   gap: 8px;
   width: 200px;
}
.nav-btn{
   display: flex;
   justify-content: center;
   align-items: center;
}
.nav-btn .nav-btn-link{
   height:40px ;
   width: 40px;
   display: flex;
   justify-content: center;
   align-items: center;
   border-radius: 10px;
}
.nav-btns .nav-btn-link:hover{
   
   background-color: rgba(212, 212, 212, 0.212);
}
.nav-btns span{
   height: 16px;
   width: 16px;
   top: 0px;
   right: -5px;
   color: white;
   font-size: 10px;
   font-weight: 700;
   background: var(--dark);
}
.hero{
   padding: 160px 0px 128px;
   background: linear-gradient(180deg, #F9FAFB 0%, #FFF 100%);
}
.hero .hero-left{
   margin-top: 125px;
   padding: 0px;
}
.new-collection{
   background: linear-gradient(90deg, #FFFBEB 0%, #FFF7ED 100%);
   border: 1px solid rgba(254, 243, 198, 0.50);
   padding: 9px 15px;
   gap: 8px;
   width: fit-content;
}
.new-collection img{
   height: 14px;
}
.new-collection h6{
   margin: 0px;
   white-space: nowrap;
   color: #7B3306;
   font-size: 13px;
   font-weight: 400;
   line-height: 150%;
}
.hero-title{
   width: 90%;
   color: var(--dark);
   font-size: 68px;
   font-weight: 700;
   line-height: 105%;
   letter-spacing: -2.04px;
   margin-bottom: 9px;
   word-wrap: break-word;
}
@media (max-width:1200px){
   .hero{
      padding:0px 0px 128px;
   }
   .hero-title{
      width: 100%;
   }
   .hero-pera{
      width: 100%;
   }
}
.hero-pera{
   color: var(--normal);
   font-size: 19px;
   font-weight: 400;
   line-height: 170%;
   width: 88%;
}
.new-collection{
   margin-bottom: 24px;
}
.hero-btn-group{
   margin: 40px 0px;
}
.hero-btn-group a{
   font-size: 14px;
   font-weight: 400;
   line-height: 21px;
   margin-right: 12px;
   padding: 13px 29px;
   border-radius: 12px;
   box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.4);
}
.hero-btn-group .h-btn-1 img{
   padding-left: 3px;
   transition: 0.2s;
}
.hero-btn-group .h-btn-1{
   color: #ffffff;
   background-color: var(--dark);
}
.hero-btn-group .h-btn-1:hover{
   box-shadow: 0px 3px 8px rgba(0, 0, 0, 0.3);
}
.hero-btn-group .h-btn-1:hover img{
   transform: translateX(2px);
}
.hero-btn-group .h-btn-2{
   color: var(--dark);
   border: 1px solid rgba(16, 24, 40, 0.1);
   box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.05);
}
.hero-btn-group .h-btn-2:hover{
   border: 1px solid rgba(16, 24, 40, 0.2);
   background-color: rgba(128, 128, 128, 0.04);
}
.hero-feature{
   gap: 32px;
   padding-top: 16px;
}
.hero-feature .h-features p{
   margin: 0px;
   font-size: 14px;
   font-weight: 400;
   line-height: 21px;
   color: var(--normal);
}
.hero-right-container{
   width: fit-content;
}
.hero-right .hero-img{
   height: 832px;
   width: 624px;
   padding: 6px;
   border-radius: 28px;
   background: linear-gradient(135deg, #F3F4F6 0%, #F9FAFB 100%);
   box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.03), 0 24px 48px -12px rgba(0, 0, 0, 0.15);
}
.hero-right .hero-top-1 , .hero-top-2{
   height: 61px;
   width: fit-content;
   border-radius: 16px;
   padding: 12px 16px;
   color: var(--normal);
   background: #FFF;
   box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.03), 0 8px 24px -4px rgba(0, 0, 0, 0.15);
}
.hero-right .hero-top-1 p{
   color: var(--normal);
   font-size: 13px;
   font-weight: 400;
   line-height: 19.5px;
}
.hero-right-container .hero-top-1{
   top: 48px;
   right: -25px;
}
.hero-right-container .hero-top-2{
   bottom: 42px;
   left: -32px;
}
.hero-right-container .hero-top-2{
   padding: 16px;
   height: 102px;
}
.hero-right-container .hero-top-2 img{
   border-radius: 14px;
}
.hero-top-2-text p{
   color: var(--normal);
   font-size: 13px;
   font-weight: 400;
   line-height: 150%;
}
.hero-top-2-text h5{
   color: var(--dark);
   font-size: 15px;
   font-weight: 700;
   line-height: 150%;
}
.featured{
   padding: 128px 0 128px;
}
.featured-container{
   gap: 64px;
}
.featured-head .section-label{
   margin-bottom: 16px;
   font-size: 13px;
   font-weight: 400;
   line-height: 150%;
   padding: 6px 12px;
   width: fit-content;
   color: var(--dark);
   background-color: #F3F4F6;
}
.featured-head .featured-title h1{
   color: var(--dark);
   font-size: 48px;
   font-weight: 700;
   line-height: 110%;
   letter-spacing: -0.96px;;
}
.featured-head .featured-title .featured-btn{
   align-self: flex-end;
   color: var(--nav-link);
   font-size: 14px;
   font-weight: 400;
   line-height: 150%;
   gap: 14px;
   white-space: nowrap;
}
.featured-card .featured-card-img{
   border-radius: 20px;
   overflow: hidden;
}
.featured-card .featured-card-img .card-img{
   display: block;
   border-radius: 20px;
   transition: 0.5s;
}
.featured-card .featured-card-img::before{
   content: '';
   position: absolute;
   height: 100%;
   width: 100%;
   border-radius: 20px;
   background: linear-gradient( to top, rgba(0, 0, 0, 0.5) 0%,
   rgba(0, 0, 0, 0.3) 10%,
   rgba(0, 0, 0, 0) 20%,
   rgba(0, 0, 0, 0) 30%);
   z-index: 1;
   display: none;
}
.featured-card .card-img-label{
   top: 12px;
   left: 12px;
   padding: 12px;
   color: var(--dark);
   font-size: 11px;
   line-height: 150%;
   font-weight: 700;
   z-index: 222;
   background-color: rgba(255, 255, 255);
}
.featured-card-img .card-img-icon-group{
   top: 12px;
   right: 12px;
   display: none;
}
.featured-card-img .card-img-icon-group a{
   height: 40px;
   width: 40px;
   border-radius: 50%;
   display: flex;
   align-items: center;
   justify-content: center;
   background-color: white;
   box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.10), 0 1px 2px -1px rgba(0, 0, 0, 0.10);
}
.featured-card-img .card-img-icon-group a:nth-child(2){
   background-color: var(--dark);
}
.featured-card-img .card-btn{
   color: var(--dark);
   width: 90%;
   padding: 10px;
   font-size: 13px;
   font-weight: 400;
   line-height: 150%;
   border-radius: 10px;
   bottom: 16px;
   left: 50%;
   z-index: 222;
   display: none;
   background-color: white;
   transform: translateX(-50%);
}
.featured-card .text-1 , .text-2{
   color: var(--dark);
   font-size: 16px;
   font-weight: 700;
   line-height: 150%;
}
.featured-card .text-1{
   margin: 14px 0px 10px;
}
.featured-card .featured-card-price{
   display: flex;
   justify-content: space-between;
   align-items: center;
}
.featured-card .card-colors{
   height: 20px;
   width: 20px;
   margin-left: 6px;
   border-radius: 50%;
   display: inline-block;
   outline: 2px solid transparent;
}
.featured-card .card-colors:hover{
   transform: scale(0.8);
   outline: 2px solid rgba(0, 0, 0, 0.3);
}

.featured-card-img:hover .card-img{
   transform: scale(1.05);
}
.featured-card-img:hover .card-btn{
   display: block;
}
.featured-card-img:hover .card-img-icon-group{
   display: flex;
}
.featured-card-img:hover.featured-card-img::before{
   display: block;
}
@media (max-width:992px){
   .featured-head .featured-title h1{
      font-size: 32px;
   }
}
@media (max-width:576px){
   .featured-head .featured-title h1{
      font-size: 28px;
   }
}
@media (max-width:400px){
   .featured-head .featured-title h1{
      font-size: 24px;
   }
}
.why-us{
   padding: 96px 0px;
   background: linear-gradient(180deg, #F9FAFB 0%, #FFF 100%);
}
.why-us .why-us-card-logo{
   width: fit-content;
   border-radius: 14px;
   background-color: var(--dark);
}
.why-us .why-us-card-logo img{
   padding: 14px;
}
.why-us .why-us-card-title{
   margin: 18px 0px 8px;
   color: #101828;
   font-size: 17px;
   font-weight: 700;
   line-height: 150%;
}
.why-us .why-us-card-pera{
   color: var(--normal);
font-size: 14px;
font-weight: 400;
line-height: 160%;
}
.collections{
   padding: 128px 0px;
}
.collections-head{
   margin-bottom: 64px;
}
.collections-head .collections-label{
   width: 88.703px;
   height: 31.5px;
   padding: 6px 12px;
   border-radius: 33px;
   background: #F3F4F6;
   color: var(--dark);
   font-size: 13px;
   font-weight: 400;
   line-height: 150%;
}
.collections-head .collections-title{
   color: var(--dark);
   font-size: 48px;
   font-weight: 700;
   line-height: 110%;
   letter-spacing: -0.96px;
}
.collections-head .collections-para{
   color: var(--normal);
   font-size: 17px;
   font-weight: 400;
   line-height: 160%;
}
.rdious-24{
   border-radius: 24px;
}
.collections-body .coll-left{
   overflow: hidden;
}
.collections-body .coll-left::after{
   content: '';
   position: absolute;
   height: 100%;
   width: 100%;
   background: linear-gradient(0deg, rgba(0, 0, 0, 0.80) 0%, rgba(0, 0, 0, 0.30) 50%, rgba(0, 0, 0, 0.00) 100%);
   top: 0px;
   left: 0px;
   z-index: 0;
}
.collections-body .coll-right-overlay{
   z-index: 1;
}
.collections-body .coll-right-1, .collections-body .coll-right-2{
   overflow: hidden;
}
.collections-body .coll-right-1::after , .collections-body .coll-right-2::after{
   content: '';
   position: absolute;
   height: 100%;
   width: 100%;
   background: linear-gradient(0deg, rgba(0, 0, 0, 0.80) 0%, rgba(0, 0, 0, 0.30) 50%, rgba(0, 0, 0, 0.00) 100%);
   top: 0px;
   left: 0px;
   z-index: 0;
}

.coll-left-overlay{
   bottom: 40px;
   left: 40px;
   z-index: 1;
}
.coll-left .coll-left-label{
   width: fit-content;
   color: #FFF;
   font-size: 12px;
   font-weight: 400;
   line-height: 150%;
   padding: 6px 12px;
   border-radius: 33px;
   background: rgba(255, 255, 255, 0.20);
}
.coll-left .coll-left-title{
   margin-top: 13px;
   color: #FFF;
   font-size: 36px;
   font-weight: 700;
   line-height: 150%;
   letter-spacing: -0.9px;
}
.coll-left .coll-left-pera{
   margin: 14px 0px 25px;
   max-width: 433px;
   font-size: 15px;
   font-weight: 400;
   line-height: 160%;
   color: rgba(255, 255, 255, 0.80);
}
.coll-left .coll-left-btn{
   color: var(--dark);
   text-decoration: none;
   width: fit-content;
   font-size: 14px;
   font-weight: 400;
   line-height: 150%;
   padding: 12px 24px;
   border-radius: 11px;
   background: #FFF;
}
.coll-left-btn img , .coll-right-btn img{
   transition: 0.1s;
}
.coll-left .coll-left-btn:hover.coll-left-btn img{
   transform: translateX(3px);
}
.collections-body .coll-left .coll-img{
   transition: 0.5s;
}
.collections-body .coll-left:hover .coll-img{
   transform: scale(1.05);
}
.coll-right{
   gap: 24px;
}
.coll-right-overlay{
   bottom: 32px;
   left: 32px;
}
.coll-right .coll-right-title{
   color: #FFF;
   font-size: 24px;
   font-weight: 700;
   line-height: 150%;
   letter-spacing: -0.6px;
}
.coll-right .coll-right-pera{
   color: rgba(255, 255, 255, 0.80);
   font-size: 14px;
   font-weight: 400;
   line-height: 160%;
   margin: 8px 0px 20px;
}
.coll-right .coll-right-btn{
   text-decoration: none;
   width: fit-content;
   color: #FFF;
   font-size: 13px;
   font-weight: 400;
   line-height: 19.5px;
}
.coll-right .coll-right-btn:hover.coll-right-btn img{
   transform: translateX(3px);
}
.collections-body .coll-right-1 .coll-img , .collections-body .coll-right-2 .coll-img{
   transition: 0.5s;
}
.collections-body .coll-right-1:hover .coll-img , .collections-body .coll-right-2:hover .coll-img{
   transform: scale(1.05);
}
@media (max-width:992px){
   .coll-left .coll-left-title{
      font-size: 28px;
   }
   .coll-right .coll-right-title{
      font-size: 24px;
   }  
}
@media (max-width:768px){
   .coll-left .coll-left-title{
      font-size: 24px;
   }
   .coll-right .coll-right-title{
      font-size: 20px;
   }  
}
.stats-section{
   background: #F9FAFB;
}
.stats-section .stats-section-container{
   padding: 96px 0px;
}
.stats-section .stats-section-card img{
   padding: 12px;
   border-radius: 12px;
   background-color: #101828;
}
.stats-section-card .stats-section-title h2{
   color: #101828;
   font-size: 32px;
   font-weight: 700;
   line-height: 150%;
}
.stats-section-card .stats-section-pera p{
   color: #4A5565;
   font-size: 14px;
   font-weight: 400; 
   line-height: 150px;
}
.about{
   padding: 128px 0px;
}
.about  .about-container{
   gap: 64px;
}
.about-head .about-label{
   padding: 6px 12px;
   color: #101828;
   font-size: 13px;
   font-weight: 400;
   line-height: 150%;
   border-radius: 33px;
   width: fit-content;
   background-color: #F3F4F6;
}
.about-head .about-title h2{
   color: #101828;
   font-size: 48px;
   font-weight: 700;
   line-height: 110%;
}
.about-head .about-pera P{
   color: #4A5565;
   font-size: 17px;
   font-weight: 400;
   line-height: 160%;
}
.about .about-card{
   padding: 33px;
   border-radius: 20px;
   background-color: #FFF;
   border: 1px solid rgba(16, 24, 40, 0.05);
   box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.02), 0 2px 8px -2px rgba(0, 0, 0, 0.06); 
   transition: 0.3s;
}
.about .about-card:hover{
   box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.02), 0 10px 15px 5px rgba(0, 0, 0, 0.06); 
}
.about .about-card .quot-icon img{
   padding: 10px;
   border-radius: 10px;
   background-color: #F3F4F6;
}
.about .about-card .stars{
   margin: 24px 0px 14px;
}
.about .about-card .about-pera p{
   color: #364153;
   font-size: 15px;
   font-weight: 400;
   line-height: 170%;
   margin-bottom: 24px;
}
.about .about-card .about-card-profile{
    gap: 12px;
    padding: 14px 0px;
    border-top: 1px solid rgba(16, 24, 40, 0.05);
}
.about-card .about-card-profile img{
   height: 48px;
   width: 48px;
}
.about-card .about-card-profile h3{
   color: #101828;
   font-size: 15px;
   font-weight: 700;
   line-height: 150%;
}
.about-card .about-card-profile p{
   color: #4A5565;
   font-size: 13px;
   font-weight: 400;
   line-height: 150%;
}
@media (max-width:992px){
   .about-body{
      flex-wrap: wrap;
   }
}
.about-footer{
   gap: 24px;
   padding-top: 49px;
   border-top: 1px solid rgba(16, 24, 40, 0.05);
}
.about-footer .about-footer-label{
   color: #6A7282;
   font-size: 13px;
   font-weight: 400;
   line-height: 150%;
}
.about-footer .about-footer-texts{
   color:rgb(146,150,156);
   font-size: 20px;
   font-weight: 700;
   line-height: 150%;
}
.journal{
   background: linear-gradient(180deg, #F9FAFB 0%, #FFF 100%);
}
.journal .journal-container{
   padding: 128px 0px;
}
.journal .journal-container .journal-card{
   padding: 80px 40px;
   border-radius: 28px;
   background: linear-gradient(135deg, #101828 0%, #1E2939 50%, #101828 100%);
}
.journal .journal-card .journal-label{
   color: #FFF;
   font-size: 13px;
   font-weight: 400;
   line-height: 150%;
   padding: 8px 14px;
   border-radius: 33px;
   background: rgba(255, 255, 255, 0.10);
}
.journal .journal-card .journal-title h2{
   margin: 21px 0px 17px;
   color: #FFF;
   font-size: 44px;
   font-weight: 700;
   line-height: 110%;
}
.journal .journal-card .journal-pera p{
   color: rgba(255, 255, 255, 0.70);
   font-size: 17px;
   font-weight: 400;
   line-height: 160%;
}
.journal .journal-card .journal-form{
   margin:40px 0px 15px;
   gap: 12px;
   max-width: 512px;
}
.journal-card .journal-form input{
   color: #ffffff;
   border-radius: 12px;
   padding: 15px 0px 15px 20px;
   border: 1px solid rgba(255, 255, 255, 0.20);
   background: rgba(255, 255, 255, 0.10);
   outline: none;
   width: 100%;
}
.journal-card .journal-form button{
   padding: 14px 24px;
   border-radius: 12px;
   background: #FFF;
   color: #101828;
   font-size: 14px;
   font-weight: 400;
   line-height: 150%;
   border: none;
   flex: 1;
   width: 100%;
}
.journal-card .journal-form button img{
   transition: 0.1s;
}
.journal-card .journal-form button:hover img{
   transform: translateX(3px);
}
.journal-card .journal-form input::placeholder{
   color: rgba(255, 255, 255, 0.50);
   font-size: 15px;
   font-weight: 400;
}
.journal .journal-card .journal-bottom-text{
   color: rgba(255, 255, 255, 0.50);
   text-align: center;
   font-size: 13px;
   font-weight: 400;
   line-height:150%;
}
.footer{
   border-top: 1px solid rgba(16, 24, 40, 0.05);
   background: #FFF;
}
.footer-container{
   gap: 80px;
   padding-top: 80px;
}
.footer-container .footer-bottom{
   padding: 33px 0px;
   border-top: 1px solid rgba(16, 24, 40, 0.05);
}
.footer-container .footer-bottom p{
   color: #6A7282;
   font-size: 13px;
   font-weight: 400;
   line-height: 150%;
}
.footer-body .brand-logo{
   gap: 10px;
}
.footer-body .brand-logo h1{
   color: #101828;
   font-size: 17px;
   font-weight: 700;
   line-height: 150%;
}
.footer-body .footer-contact-pera p{
   margin-top: 20px;
   color: #4A5565;
   font-size: 14px;
   font-weight: 400;
   line-height: 170%;
   margin-bottom: 5px;
}
.footer-body .footer-contact-logo{
   width: 40px;
   height: 40px;
   border-radius: 10px;
   background: #F3F4F6;
   display: flex;
   justify-content: center;
   align-items: center;
}
.footer-body .footer-links, .footer-body .footer-links ul{
   padding: 0px;
}
.footer-body .footer-links li{
   list-style-type: none;
}
.footer-body .footer-links .footer-links-header{
   margin-bottom: 5px;
   color: #101828;
   font-size: 13px;
   font-weight: 700;
   line-height: 150%;
}
.footer-body .footer-links li a{
   padding-top: 15px;
   text-decoration: none;
   color: #4A5565;
   font-size: 14px;
   font-weight: 400;
   line-height: 150%;
   display: inline-block;
}