*{
    margin:0;
    padding: 0;
}

.body {
   font-family: 'source 3'sans-serif;
   background-color: red;
}

.headBar {
    height: 80px;
    width: 100%;
    background-color: white;
}

.navBar {
    height: 78px;
    width: 100%;
    margin: 0 auto;
    background-color: white;
    display: grid;
    grid-template-columns: 2fr 3fr 2fr;
}

.logo {
   padding-top: 20px;
   margin-left: 25px;
}

.navigation {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
    padding-top: 27px;
    font-family: 'source 3'sans-serif;
    
}
#home, #shop {
   color: red;
}

.order {
    margin: auto;
    margin-left: 60%;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-gap: 20px;
   
}

.order img {
   width: 100px;
  
}
.iconClr {
   color:black;

}

.iconClr:hover {
   color: #ef233c;
   cursor: pointer;
}
.navigation a {
    color: #42383b;
    text-decoration: none;
      font-family: 'source 3', sans-serif;
}
.navigation a:hover {
    color: red;
}


.blackBar {
    height: 50px;
    width: 100%;
    background-color: black;
    color: white;
    text-align: center;
}

.blackbarMsg {
    padding-top: 15px;
}
                                                                  /* Image Page CSS START  */

.bgImg {
    background-image:linear-gradient(rgba(0,0,0,0.65),rgba(0,0,0,0.65)),
     url(https://websitedemos.net/clothing-store-04/wp-content/uploads/sites/1538/2025/05/home-hero-bg.jpg);
    width: 100%;
    height: 90vh;
    background-repeat: repeat;
    background-size: cover;
    
    }

    .contentBox {
        height: 450px;
        width: 100%;
        margin: auto;
    }

    .contentHead {
         height: 100px;
        width: 90%;
        margin: auto;
        padding-top: 120px;
        color: white;
        font-size: 1.55rem;
        font-family: 'source 3', sans-serif;
        text-align: center;
    }

    .contentMessage {
        height: 100px;
        width: 70%;
        margin: auto;
        padding-top: 60px;
        color: white;
        font-size: 1rem;
        font-family: 'source 3', sans-serif;
        text-align: center;
    }
    .firstBtn {
        height: 60px;
        width: 280px;
        background-color:rgb(239 35 60);
        margin: auto;
        border-radius: 45px;
        cursor: pointer;
    
    }

    .firstBtn a {
        height: 60px;
        width: 280px;
        text-decoration: none;
        color: white;
         font-family: 'source 3', sans-serif;
         display: grid;
      align-items: center;
      text-align: center;
    }
                                                       /* Image Page CSS ENd  */
                                                       /* shopping page start */
    .shoppingPage, .shoppingPage2 {
        height: 150vh;
        width: 100%;
        background-color: white;
    }

    .headBar2 {
        height: 280px;
        width: 95%;
        margin: auto;
        display: grid;
        grid-template-columns: 5fr 1fr;
    }

    .head2, .head3{
            font-family: 'source 3', sans-serif;
            font-size: 1.85rem;
            padding-top: 100px;

    }
    .head2 p {
        font-size: 1.15rem;
        color: rgb(66, 56, 59);
    }

    .elemenatorBtn {
      height: 50px;
      width: 180px;
      margin-top: 100px;
      border: solid 1px #ef233c;
      border-radius: 45px;
      color: #ef233c;
    font-family: 'Source Sans 3', sans-serif;
    display: grid;
    align-items: center;
    text-align: center;
   font-size: .9rem;
    }
  

.elemenatorBtn:hover {
   background-color: #ef233c;
   color: white;
   cursor: pointer;
   transition: all .3s;
}
.text:hover {
   color: white;
}

    .productBar, .productBar-1, .productBar-2, .productBar-3 {
        height: 750px;
        width: 95%;
        display: grid;
        margin: 0 auto;
       
    }

    .productBar2 {
      padding-top: 150px;
    }
    .product {
        height: 650px;
        width: 100%;
        margin:0 auto;
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        grid-gap: 20px; 
    }

    .box1,.box2,.box3  {
        height: 625px;
        width: 100%;
    }

    .collect {
      position: relative;
      cursor: pointer;
    }

    .collect-icon1, .collect-icon2{
      
      position: absolute;
      right: 15px;
      height: 30px;
      width: 30px;
      border-radius: 25px;
      background-color: white;
      opacity: 0.6; 
      box-shadow: 1px 2px 2px 1px #cccc;
      display: none;

    }


    .collect:hover .collect-icon1, .collect:hover .collect-icon2 {
      display: block;
       display: grid;
      align-items: center;
    }

    .collect-icon1:hover, .collect-icon2:hover {
      opacity: 1;
    }

    .collect-icon1{
      top: 15px;
    }

    .collect-icon2 {
      top: 60px;
    }

    .iconClr-7{
      margin: auto;
    }
    
    .product1 img,.product2 img,.product3 img  {
        width:100%;
    }
   
    .productName a, .productName2 a, .productName3 a {
        font-family: 'source 3',sans-serif;
        font-size: 1.25rem;
        font-weight: 500;
        color:  black;
        margin-bottom: .5em;
        text-decoration: none;
    }
    
 .productCategary,  .productCategary2 {
    
    font-size: .95em;
    margin-bottom: .5em;
    display: block;
    line-height: 1.3;
    color: black;
    opacity: .6;
    font-family: 'source 3' sans-serif;

 }

 .price, .price2 {
    font-size: .9em;
    font-weight: 700;
    color: black;
    font-family: 'source 3' sans-serif;

 }

 .sizeBox, .sizeBox2  {
    height: 27px;
    width: 100px;
    margin-top: .5em;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    color: black;
    margin-bottom: .5em;
 }
 .size1,.size2,.size3 {
    height: 25px;
    width: 80%;
   border: solid .5px rgba(0, 0, 0, 0.5);
   border-radius: 2px;
  text-align: center;
  align-items: center;
  
 }
 .size1:hover,.size2:hover,.size3:hover {
    border: solid .5px black;
    cursor: pointer;
 }

 .colorBox,  .colorBox2 {
    height: 20px;
    width: 75px;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
 }

 .color1,.color2,.color3{
    height: 17px;
    width: 75%;
    margin: 0 auto;
    border-radius: 3px;
    border: solid .5px black;
 }
 .color1:hover,.color2:hover,.color3:hover {
  height: 17px;
    border: double 3px black;
    cursor: pointer;
 }
 
 .color1 {
      background-color: #8f3084;
 }
 .color2 {
    background-color: #29808a;
 }
 
 .color3 {
    background-color: #7d922f;
 }
 

                                                            /* 2 nd product   */

 .color4,.color5,.color6{
    height: 17px;
    width: 75%;
    margin: 0 auto;
    border-radius: 3px;
    
 }
 .color4 {
     background-color: #7a6f98;
 }
 
 .color5 {
    background-color:  #707070;
 }
 
 .color6 {
    background-color: #ac7ca1;
 }
 
  .color4:hover,.color5:hover,.color6:hover {
  height: 17px;
    border: double 3px black;
    cursor: pointer;
 }

                                                    /* 3rd product start */

 .color7{
    height: 17px;
    width: 75%;
    background-color: #ac7ca1;
    margin: 0 auto;
    border-radius: 3px;
    border: solid .5px black;
 }
 .color7:hover,.color8:hover,.color9:hover {
  height: 17px;
    border: double 3px black;
    cursor: pointer;
 }
 
 .color8 {
    height: 17px;
    width: 75%;
    background-color:#7b8eab;
    margin: 0 auto;
    border-radius: 3px;
 }
 
 .color9 {
    height: 17px;
    width: 75%;
    background-color: #7bac85;
    margin: 0 auto;
    border-radius: 3px;
 }
                                                     /* categary page Start   */
 .categary {
   height: 200vh;
   width: 100%;
   background-color: #f7eced;
 }

.firstHead {
   height: 250px;
   width: 100%;
   text-align: center;
}

.firstHead h2 {
   padding-top: 100px;
   font-size: 2.875rem;
    font-weight: 800;
    font-family: 'Source Sans 3', sans-serif;
    line-height: 1.2em;
}

.firstHead p {
   font-weight: 400;
    font-family: 'Source Sans 3', sans-serif;
}

                        /* categary page start  */

                        /* First Row  */
.firstRow {
   width: 100%;
}

.firstContainer, .secondContainer  
{  
   
   width: 95%;
   margin: 0 auto;
   display: grid;
   grid-template-columns: 1fr 1fr;
   grid-gap: 25px;
}

.photoMain,.photoMain2, .photoMain3, .photoMain4 {
   display: grid;
   justify-items: center;
 
}

.photoImg img, .photoImg2 img, .photoImg3 img, .photoImg4 img {
   border: solid 2px black;
   border-radius: 32px; 
   width: 100%;
}

.photoTitle,.photoTitle2, .photoTitle3,.photoTitle4 {
   height: 100px;
   width: 80%;
   border-radius: 20px;
   background-color: white;
   display: grid;
   align-items: center;
   text-align: center;
   margin-top: -50px;
   font-family: 'source 3',sans-serif;
}

.photoTitle a, .photoTitle2 a, .photoTitle3 a, .photoTitle4 a{
   text-decoration: none;
   color: red;
   margin-top: -25px;
}


.photoTitle a:hover, .photoTitle2 a:hover, .photoTitle3 a:hover, .photoTitle4 a:hover  {
   color: black;
}

                            /* Second Row  */

.secondRow {
   width: 100%;
   padding: 50px 0px;
  
}
/*    shopping page start */
    .headBar3 {
        height: 280px;
        width: 30%;
        margin: auto;
    }

    .head3 {
            text-align: center;

    }
    .head3 p {
        font-size: 1.25rem;
        margin-top: 20px;
        font-family: 'source 3',sans-serif;
        text-align: center;
    }

                                             /* AD Page Start  */
                                             
 .adPage {
   height: 105vh;
   width: 100%;
   display: grid;
   grid-template-columns: 1fr 1fr;

}

.bg1,.bg2 {
   height: 100%;
   width: 100%;
   height: 105vh;
}

.bg1{
   background-color: white;
}
.bg2 {
   background-color: #f7eced;
}


.adImg {
   
   display: grid ;
   grid-template-columns: 2.7fr 1fr;
   margin-top: -100vh;
   height: 95vh;
}

.imbox {
   background-image: url(https://websitedemos.net/clothing-store-04/wp-content/uploads/sites/1538/2025/05/exclusive-jackets.jpg);
   width: 100%;
   background-repeat: no-repeat;
   background-size: cover;
   
}
 .adcontentbox{
   height: 60vh;
   width: 100%;
   background-color: rgb(255, 255, 255);
   margin-top: 17vh;
   margin-left: -170px;
   padding-right: 130px;
   border-radius: 30px;


 }

 .msgBox{
   margin: 50px;
   padding: 10px;
   width: 100%;
    font-family: 'Source Sans 3', sans-serif;
    font-size: 17px;
 }         

 .msgBox h4 {
   font-size: 1.4rem;
   margin: 0;
    font-weight: 800;
    font-family: 'Source Sans 3', sans-serif;
 }

 .element-btn{
  height: 50px;
    width: 260px;
    background-color: rgb(239 35 60);
   font-size: 16px;
   font-weight: 500;
   display: grid;
   align-items: center;
   text-align: center;
    border-radius: 45px;
   cursor: pointer;
   margin-top: 40px;
 }

 .element-btn a{
   text-decoration: none;
   color: white;
   text-transform: uppercase;
    font-size: 16px;
   font-weight: 500;
 }

                                                /* Timming  page  Start */

.timmingPage {
  background-image:linear-gradient(rgba(0,0,0,0.65),rgba(0,0,0,0.65)),
   url(https://websitedemos.net/clothing-store-04/wp-content/uploads/sites/1538/2025/05/counter-bg.jpg);
    width: 100%;
    height: 135vh;
   background-position-x: center;
    background-repeat: no-repeat;
    background-size: cover;
    display: grid;
    align-items: center;
    text-align: center;
    justify-items: center;
}

.timmingPage-content h2 {
       font-size: 2.875rem;
    font-weight: 800;
    font-family: 'Source Sans 3', sans-serif;
    line-height: 1.2em;
    color: white;
    margin-top: 200px;
    
}
.timmingPage-content p {
   font-size: 16px;
   font-family: 'Source Sans 3', sans-serif;
   color: white;
   margin-bottom: 30px;
}

.time-lap {
   height: 100px;
   width: 70%;
   margin: 0 auto;
   margin-bottom: 50px;
   display:grid;
   grid-template-columns: 1fr 1fr 1fr 1fr;
   grid-gap: 20px;
}

.time-1,.time-2,.time-3,.time-4 {
   height: 80px;
   width: 100%;
   background-color: white;
   border-radius: 15px;
   color: black;
   font-size: 1.75rem;
   font-family: 'Source Sans 3', sans-serif;
   text-align: center;
}

.time-1 p,.time-2 p,.time-3 p,.time-4 p{
   color: black;
}

.timePage-btn {
   height: 50px;
    width: 260px;
    background-color: rgb(239 35 60);
   font-weight: 500;
   display: grid;
   align-items: center;
   text-align: center;
    border-radius: 45px;
   cursor: pointer;
   margin-top: 100px;
   margin: 0 auto;
}

.timePage-btn a {
  text-decoration: none;
   color: white;
   text-transform: uppercase;
    font-size: 16px;
   font-weight: 500;
    font-family: 'Source Sans 3', sans-serif;
}

                                                               /* Doctor  Page  Start */
.about-head {
   height: 40vh;
   width: 100%;
   background-color: white;
   display: grid;
   justify-items: center;
   align-items: center;
   margin: 0 auto;
}

.about-msg{
   height: 150px;
   width: 30%;
    text-align: center;
   
}

.about-msg h2 {
    font-size: 2.875rem;
    font-weight: 800;
    font-family: 'Source Sans 3', sans-serif;
    margin-bottom: 20px;
}

.about-msg p {
   font-size: 16px;
   font-family: 'Source Sans 3', sans-serif;
}

.doctor-details {
   height: 100vh;
   width: 100%;
   display: grid;
   align-items: center;
}

.doc-container {
   height: 90%;
   width: 93%;
   margin: 0 auto;
   display: grid;
   grid-template-columns: 1fr 1fr 1fr;
   grid-gap: 20px;
}

.doctor-1,.doctor-3, .doctor-2 {
   height: 75%;
   width: 100%;
   background-color: #f7eced;
   border-radius: 30px;
   display: grid;
   align-items: center;
}

.doctor-2 {
   margin-top: 50px;
}

.docBox-1,.docBox-2,.docBox-3{
   height: 80%;
   width: 80%;
   margin: 0 auto;
}
.icon-1,.icon-2,.icon-3
{
   color: red;
}

.docBox-1 p,.docBox-2 p,.docBox-3 p{
   margin-top: 25px;
   line-height: 1.75rem;
   font-size: 16px;
   font-family: 'Source Sans 3', sans-serif;
}

.name-container1 ,.name-container2,.name-container3 {
   display: grid;
   grid-template-columns: 1fr 2fr;
}

.name-container1 h6,.name-container2 h6,.name-container3 h6{
font-size: 16px;
font-weight: 800;
font-family: 'Source Sans 3', sans-serif;
line-height: 21.56px;
margin-top: 50px;

}
.name-container1 img,.name-container2 img ,.name-container3 img{
   width: 70px;
   margin-top: 25px;
}

.shop-workPage {
   height: 90vh;
   width: 100%;
   background-color:#f7eced;
}

.headBar-container {
   height: 40vh;
   width: 100%;
    display: grid;
   align-items: center;
   text-align: center;
}

.dispatch-msg h2 {

   font-size: 3rem;
    font-weight: 800;
    font-family: 'Source Sans 3', sans-serif;
    line-height: 1.2em;
}

.dispatch-msg p {
   font-size: 16px;
   font-weight: 400;
    font-family: 'Source Sans 3', sans-serif;
    line-height: 1.2rem;
    margin-top: 15px;
}
                                  /* work page start */
.workBar {
   height: 33vh;
   width: 93%;
   margin: 0 auto;
   background-color: white;
   border: solid 1px rgba(0, 0, 0, 0.5);
   border-radius:20px;
   display: grid;
   align-items: center;
}

.work-container {
   height: 20vh;
   width: 95%;
    display: grid;
   grid-template-columns: 1fr 1fr 1fr;
}
.work-box1,.work-box2, .work-box3 {
   display: grid;
   grid-template-columns: 1fr 3fr;
}

.work-box1,.work-box2 {
   border-right: solid 1px rgba(0, 0, 0, 0.3);
}

.work-icon1,.work-icon2,.work-icon3 {
   height: 60px;
   width: 60px;
   border-radius: 45px;
   border: solid 2px rgb(239, 35, 60);
   margin-left: 35px;
   display: grid;
   align-items: center;
}

.icn1,.icn2,.icn3,.igicn {
   color:rgb(239, 35, 60) ;
   margin: 0 auto;
}

.icon-detail1 h6,.icon-detail2 h6,.icon-detail3 h6{
font-family:"Source Sans 3", sans-serif;
font-size:18px;
font-weight:800;
line-height: 21px;
margin-left: 25px;
}

.icon-detail1 p ,.icon-detail2 p,.icon-detail3 p{
   font-size: 16px;
   font-weight: 400;
   line-height: 25.6px;
   font-family:"Source Sans 3", sans-serif;
   margin: 10px 0px 0px 25px;
}
                                          /* abcd */

.offer-container {
   height: 50vh ;
   width: 100%;
}

.offer-container h2 {
       font-size: 2.875rem;
    font-weight: 800;
    font-family: 'Source Sans 3', sans-serif;
    line-height: 1.2em;
    text-align: center;
    padding-top: 15vh;
}

.offer-container p {
   font-size: 16px;
   font-weight: 400;
   line-height: 25.6px;
   font-family: 'source 3',sans-serif;
   text-align: center;
   margin-top: 15px;
}

.email-box input{
   height: 44px;
   width: 462px;
   border-color: rgba(220, 38, 38, 0.65);
   border-radius: 6px;
   font-size: 16px;
   margin:auto;
}

.email-box {
   width: 50%;
   margin: auto;
   margin-top: 60px;
}

.email-box button{
   font-size: 16px;
   font-weight: 400;
   height: 40px;
   width: 130px;
   margin-left: 15px;
   background-color: #ef233c;
   color: white;
   border: none;
   border-radius: 6px;
   text-transform: uppercase;
   cursor: pointer;
}

.instagram-page {
   height: 90vh;
   width: 100%;
   background-color: white;
}

.instagram-photos {
   height: 80%;
   width: 95%;
   margin:0 auto;
   display: grid ;
   grid-template-columns: 1fr 1fr 1fr 1fr;
   grid-gap: 20px;
}

.ig-photo1,.ig-photo2,.ig-photo3,.ig-photo4 {
   display: grid;
   align-items: center;
}

.ig-photo1 img,.ig-photo2 img,.ig-photo3 img,.ig-photo4 img {
   width: 100%;
   border-radius: 30px;
}

.ig-msgContainer {
   height: 50px;
   width: 20%;
   margin: 0 auto;
   display: grid;
   grid-template-columns: 1fr 3fr 3fr;
   align-items: center;
}

.ig-msgContainer h2{
       font-size: 1.25rem;
    line-height: 1.2em;
    font-weight: 800;
    font-family: 'Source Sans 3', sans-serif;
    margin: auto;
}
.ig-msgContainer p {
   font-size: 16px;
   line-height: 25px;
   font-weight: 400;
    font-family: 'Source Sans 3', sans-serif;
}
                                                 /* Order summary page start */
.order-summary {
   height: 45vh;
   width: 100%;
   background-color: #f7eced;
   display: grid;
   grid-template-columns: 1fr 1fr 1fr 1fr;
   grid-gap: 40px;
}

.step-1,.step-2,.step-3,.step-4 {
   display: grid;
   align-items: center;
   
}
.step-1box ,.step-2box,.step-3box ,.step-4box{
   height: 100%;
   width: 100%;
}
.or-icn1,.or-icn2,.or-icn3,.or-icn4{
   color: #ef233c;
   margin-left: 40%;
   margin-top: 25%;
}
.step-1 h2 ,.step-2 h2,.step-3 h2 ,.step-4 h2{
    font-size: 18px;
    font-weight: 600;
    font-family: 'Source Sans 3', sans-serif;
    text-align: center;
    margin-top: 25px;
}

.step-1 p,.step-2 p,.step-3 p,.step-4 p{
   font-size: 16px;
   line-height: 25px;
   font-weight: 400;
   font-family: 'Source Sans 3', sans-serif;
   text-align: center;
   margin-top: 10px;

}

.final-page {
   height: 70vh;
   width: 100%;
   background-color: black;
   display: grid;

}
.final-container {
   height: 100%;
   width: 95%;
   border-bottom: solid 1px white;
   margin: 0 auto;
   display: grid;
   grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
   
}
.final-box1 img {
   width: 65%;
   color: white;
   margin-top: 50%;
}

.fi-icn1{
   color: white;
   margin-left: 5px;
}

.fi-icn1:hover {
    color: #ef233c;
    transition: .2s;
    cursor: pointer;

   }

.final-box2 h6 ,.final-box3 h6,.final-box4 h6,.final-box5 h6{
   font-size: 18px;
   line-height: 25px;
   font-weight: 800;
   margin-top: 50%;
   font-family: 'Source Sans 3', sans-serif;
   color: white;
   margin-bottom: 25px;
}
.final-box2  a,.final-box3 a,.final-box4 a,.final-box5 a{
   text-decoration: none;
   color:white;
   font-family: 'Source Sans 3', sans-serif;
   font-size: 16px;
   font-weight: 400;
   line-height: 30px;  
}
.final-box2 a:hover ,.final-box3 a:hover,.final-box4 a:hover,.final-box5 a:hover{
   color: #ef233c;
   transition: .2s;
}
#li-1 a{
   color: #ef233c;
}

.final-box1 p {
    font-size: 16px;
   line-height: 25px;
   font-weight: 400;
    font-family: 'Source Sans 3', sans-serif;
    color: white;
    margin-top: 20px;
    margin-bottom: 25px;
}

.last-msgBar {
   height: 50px;
   width: 95%;
   margin: auto;
   display: grid;
   grid-template-columns: 1fr 1fr;
}

#last-msg {
    font-size: 16px;
   line-height: 25px;
   font-weight: 400;
    font-family: 'Source Sans 3', sans-serif;
    color: white;
    display: grid;
    align-items: center;

}
.cards {
 
   display: grid;
   grid-template-columns: 1fr 1fr;
}
.images img {
   float:right;
}

                                    /*  shop page css start */

.shopPage-headingBar {
   height: 40vh;
   width: 100%;
}

.shopPage-container {
   width: 95%;
   height: 30vh;
   margin: 0 auto;
   display: grid;
   align-items: center;
}

.shopPage-headMsg h1 {
   margin-bottom: 20px;
     font-family: 'source 3', sans-serif;
     font-weight: 800;
}
.shopPage-headMsg {
   border-bottom: solid 1px black;
}


.shopPage-toolBar {
   display: grid ;
   grid-template-columns: 1fr 1fr;
   align-items: center;
   width: 95%;
   margin: 0 auto;
}

.S-second select{
   float: inline-end;
   width: 160px;
   padding: 10px;
   border: none;
   font-size: 16px;
   font-family: 'source 3', sans-serif;
   
 
}

.S-first {
   font-size: 16px;
   font-family: 'source 3', sans-serif;
}


                                              /* blog page css start */


.bg-cont {
   width: 100%;
   height: 110vh;
   border: solid 1px black;
}
.bg-img  {
  background-image: url("https: //websitedemos .net/clothing store -4px /wp content/uploads/sites/ 1538px / 2025px / 5px /blog hero .jpg");
  width: 100%;
  height: 100%;
    background-repeat: no-repeat;
    background-position-y: center;
    /* background-size: cover;
    background-attachment: scroll;
    width: 100%; */

}