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

body{
  font-family: "Jost", sans-serif;
 
}
.head-top{
    height: 150px;
    width: 100%;
    >.row{
        display: flex;
        flex-wrap: wrap;
        width: 100%;
        >div{
            width: 100%;
            padding: 0 10%;
            display: flex;
            /* justify-content: space-between; */
            &:first-of-type{
                height: 50px;
                background-color:#da3c3c;
                    >.nav1{
                        width: 50%;
                        height: 100%;
                        >ul{
                            width: 100%;
                            height: 100%;
                            display: flex;
                            gap: 10px;
                            >li{
                                list-style-type: none;
                                height: 100%;
                                &:nth-of-type(3){
                                    font-weight: bold;
                                }
                                >a{
                                    font-size: 14px;
                                    display: flex;
                                    height: 100%;
                                    width: 100%;
                                    text-decoration: none;
                                    color: white;
                                    align-items: center;
                                    /* border-left: 1px solid white; */
                                    padding: 10px;
                                    &:hover{
                                       color: rgb(225, 221, 215);
                                    }

                                }
                            }
                        }
                    }  
            
                   .icon{
                    height: 100%;
                    width: 10%;
                    /* background-color: antiquewhite; */
                    display: flex;
                    /* border: 1px solid red; */
                    margin-left: 20%;
                    >a{
                        width: 100%;
                        height: 100%;
                        display: flex;
                        justify-content: center;
                        text-decoration: none;
                        >i{
                            display: flex;
                            width: 100%;
                            height: 100%;
                            align-items: center;
                            color: white;
                            justify-content: center;
                            font-size: 17px;
                          
                        }
                    }
                   
                   }
                   .nav2{
                    width: 25%;
                    height: 100%;
                    >ul{
                        width: 100%;
                        height: 100%;
                       display: flex;
                        >li{
                            list-style-type: none;
                            text-decoration: none;
                            
                            height: 100%;
                            border-left: 1px solid white;
                            border-right: 1px solid white;
                            justify-content: center;
                            >a{
                                text-decoration: none;
                                font-size: 14px;
                                color: white;
                                display: flex;
                               padding: 10px;
                                height: 100%;
                                align-items: center;
                                justify-content: center;
                                &:hover{
                                    color: rgb(225, 221, 215);
                                }
                                >i{
                                    padding: 13px;
                                    display: flex;
                                    align-items: center;
                                    justify-content: center;
                                      &:hover{
                                    color: rgb(225, 221, 215);
                                }
                                }
                            }
                        }
                    }

                   }

                }
            }
            &:last-of-type{
                height: 100px;
                /* background-color:bisque; */
                display: flex;
                >.row{
                   
                    >div{
                        display: flex;
                        >figure{
                            /* border: 1px solid white; */
                           /* width: 100%; */
                           /* height: 100%; */
                           display: flex;
                          
                            margin-top: 3%;
                           >img{
                            width: 200px;
                           }

                        }
                        >.nav3{
                            width: 100%;
                            height: 30px;
                            /* border: 1px solid green; */
                            margin-left:  180px;
                            >ul{
                                 margin-top: 5%;
                                width: 100%;
                                height: 100%;
                                display: flex;
                                
                                >li{
                                    list-style-type: none;
                                    height: 100%;
                                    /* border: 2px solid red; */
                                    margin: 0 20px;
                                   
                                    >a{
                                        text-decoration: none;
                                        color:black;
                                        display: flex;
                                        height: 100%;
                                        align-items: center;
                                        font-size: 17px;
                                        /* border: 1px solid black; */
                                        &:hover{
                                        border-bottom: 1px solid red;
                                        width: 100%;
                                    }
                                      
                                    }
                                }
                            }
                           
                        }
                        >div{
                            width: 400px;
                            display: flex;
                            /* border: 2px solid red; */
                             margin-top: 2%;
                             justify-content: center;
                            >p{
                                width: 100%;
                                /* border: 2px solid green; */
                                font-weight: bold;
                                 margin-top: 3%;

                            }
                        }
                    }
                }       
    }

    }
}
/* end header */
.main{
    height: 100vh;
    /* width: 100%; */
    display: flex;
    padding: 0 10%;
   /* background-color: blue; */
   >nav{
    /* border: 1px solid gray; */
    width: 20%;
    height: 62%;
    >ul{
        width: 100%;
        height: 100%;
        /* border: 1px solid gray; */
        >li{
            list-style-type: none;
            border: 1px solid gray;
            padding: 5px 15px;
            display: flex;
           
            &:nth-of-type(1){
                padding: 15px;
                background-color: #da3c3c;
                >a{
                    color: white;

                }
            }
            &:hover{
                background-color: rgba(128, 128, 128, 0.17);
            }
           
            >a{
                /* border: 1px solid gray; */
                text-decoration: none;
                font-size: 20px;
                color: black;
                /* font-weight: bold; */
                display: flex;
                align-items: center;
           
                >i{
                    height: 30px;
                    display: flex;
                    color: black;
                    /* border: 1px solid black; */
                    align-items: center;
                    margin: 5px;
                    

                }
            }
          

        }
    }
   }
   >div{
    /* border: 1px solid brown; */
    width: 100%;
    height: 90%;
    margin-left: 30px;
    display: flex;
    position: relative;
   box-shadow: rgba(0, 0, 0, 0.524) 0px 14px 28px, rgba(0, 0, 0, 0.504) 0px 10px 10px;
  
    >img{
        width: 100%;
        height: 100%;
        object-fit: cover;

    }
    >h2{
       /* border: 1px solid red; */
       width: 35%;
        position: absolute;
        top: 30%;
        left: 65%;
        color:#da3c3c;
        opacity: 1;
   
    }
    >h1{
        position: absolute;
        top: 40%;
        left: 55%;
        font-size: 30px;
        width: 50%;
        /* border: 1px solid red; */
      
    }
    >p{
        /* border: 1px solid red; */
        width: 50%;
        position: absolute;
        top: 60%;
        left: 50%;
    }
   }

    
}
/* end top */
.gallery{
    width: 100%;
   display: flex;
   /* border: 1px solid black; */
   height: 300px;
   padding: 0 10%;
   gap: 20px;
   >div{
    width: 50%;
    height:90%;
    display: flex;
    /* border: 1px solid red; */
    transition: 1s;
    &:hover{
        scale: 1.1;
    }
    &:nth-child(1){
         width: 100%;
       background-image: url(image/baner-fashing-10.jpg);
      background-size: cover;
      background-repeat: no-repeat;
      position: relative;
      >*{
        position: absolute;
      }
      >h3{
        top: 30%;
        left: 60%;
        color: #da3c3c;
        /* border: 1px solid red; */
      }
      >h2{
      
        top: 40%;
        left: 60%;
      
      }
      >p{
        top: 70%;
        left: 70%;
        /* border: 1px solid red; */
        border-bottom: 1px solid red;
      }
        
        
    }
    &:nth-child(2){
         width: 100%;
       background-image: url(image/baner-fashing.jpg);
      background-size: cover;
      background-repeat: no-repeat;
      position: relative;
      >*{
        position: absolute;
      }
      >h3{
        top: 25%;
        left: 40%;
        color: #da3c3c;
        /* border: 1px solid red; */
      }
      >h2{
        width: 35%;
        top: 35%;
        left: 35%;
        color: rgb(30, 29, 29);
        /* border: 1px solid red; */
        font-size: 30px;
      }
      >p{
        top: 70%;
        left: 40%;
        /* border: 1px solid red; */
        border-bottom: 1px solid red;
      }
        

    }
    &:nth-child(3){
         width: 100%;
       background-image: url(image/baner-fashing-9.jpg);
      background-size: cover;
      background-repeat: no-repeat;
      position:relative;
      >*{
        position: absolute;
      }
      >h3{
        top: 25%;
        left: 10%;
        color: #da3c3c;
        /* border: 1px solid red; */
      }
      >h2{
        width: 35%;
        top: 35%;
        left: 10%;
        color: rgb(30, 29, 29);
        /* border: 1px solid red; */
        font-size: 30px;
      }
      >p{
        top: 70%;
        left: 10%;
        /* border: 1px solid red; */
        border-bottom: 1px solid red;
      }
    }
   }
 
}
.start{
    width: 100%;
    padding: 0 10%;
    height: 200px;
    /* border: 1px solid black; */
    >h3{
        color: #da3c3c;
        /* border: 1px solid red; */
        text-align: center;
        margin-top: 3%;
        font-size: 14px;
    }
    >h2{
        /* border: 1px solid black; */
        text-align: center;
        margin-top: 1%;
        font-size: 40px;
    }
    >p{
        /* border: 1px solid green; */
        text-align:  center;
        width: 38%;
        margin: 1% auto;
        color: gray;
        font-size: 17px;

    }

}
/* end main */
.photo{
    display: flex;
    flex-wrap: wrap;
    gap: 30px;
    padding: 0 10%;
   
    >div{
       width: 23%;
       display: flex;
       position: relative;
       flex-direction: column;
       align-items: center;
       >img{
        width: 100%;
        transition: 1s;
          &:nth-child(1){
        z-index: 2;
        &:hover{
            opacity: 0;
            
        }
       }
       &:nth-child(2){
        position:absolute;
        top: 0;
        left: 0;
        z-index: 1;
        opacity: 1;
       }
       }
       >a{
        width: 50%;
        color: black;
        text-decoration: none;
         margin-right: 50%;
         font-weight: bold;
         margin-top: 10px;
        &:hover{
            color: gray;
        }
       }
      >p{
        color: gray;
        margin-right: 80%;
      }
      >span{
        color: #da3c3c;
        margin-right: 80%;
      }
       
     
    }
}
/* end gallery */
.gallery-item{
    display: flex;
    /* border: 10px solid red; */
    width: 100%;
    padding: 0 10%;
    gap: 40px;
    justify-content: center;
    >figure{
        /* width: 100%; */
        height: 350px;
        display: flex;
        gap: 20px;
        position:relative;
        /* border: 1px solid red; */
        transition: 1s;
        z-index: 3;
     &:hover{
     scale: 1.1;
    box-shadow: rgba(0, 0, 0, 0.524) 0px 14px 28px, rgba(0, 0, 0, 0.504) 0px 10px 10px;
        &::before{
            background-color: rgba(0, 0, 0, 0.263);
        }
     }
        &::before{
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            /* background-color: #da3c3c; */
            width: 100%;
            height: 100%;
            z-index: 2;

        }
        >figcaption{
            position: absolute;
            top: 50%;
            left: 22%;
            color: white;
            font-weight: bold;
            z-index: 3;
            display: flex;
            font-size: 30px;
            justify-content: center;
           
          
        }
     
        }
      
        >img{
            height: 100%;
            width: 100%;
            object-fit: cover;
           
        }
    }
    /* end */
    .main-section{
        width: 100%;
        background-image: url(image/fashion-home-testimon-4.jpg);
        background-size: cover;
        background-repeat: no-repeat;
        >h2{
            color: white;
            font-size: 35px;
            border: 10px solid white;
            text-align: center;
        }
        >figure{
            width: 5%;
         margin: 30px auto;
         margin-top: 130px;
            >img{
                width: 100%;
                border-radius: 50%;
            }
        }
        >p{
            color: white;
            width: 60%;
            text-align: center;
            margin: 0 auto;
            margin-top: 30px;
        }
        >span{
            color: white;
            font-weight: bold;
           /* border: 2px solid red; */
           width: 100%;
           display: flex;
           justify-content: center;
           margin-top: 10px;

        }

    }
/* enn */
.end-main{
    width: 100%;
    height: 500px;
    display: flex;
    padding: 0 10%;
    gap: 40px;
    >div{
        height: 400px;
        width: 30%;
        display: flex;
        /* background-color: aquamarine; */
        border: 1px solid red;
        &:nth-child(1){
            >figure{
                width: 100%;
                height: 100%;
                >img{
                    object-fit: cover;
                }
            }
        }
        &:nth-child(2){
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            >p{
                background-color: #da3c3c;
                color: white;
                width: 55%;
                text-align: center;
                margin: 5px auto;
            }
            >h3{
                width: 65%;
                color: black;
                font-weight: bold;
                margin: 5px auto;
                text-align: center;
            font-size: 20px;
            }
            >span{
                width: 90%;
                color: gray;
                text-align: center;
                margin:5px auto;
                display: flex;
            }
            >h4{
                color: #da3c3c;
                margin: 0 auto;
                text-align: center;
            }
        }
        &:nth-child(3){
            >figure{
                width: 100%;
                height: 100%;
                >img{
                    object-fit: cover;
                }
            }
        }
        &:nth-child(4){
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            >p{
                background-color: #da3c3c;
                color: white;
                width: 55%;
                text-align: center;
                margin: 5px auto;
            }
            >h3{
                width: 65%;
                color: black;
                font-weight: bold;
                margin: 5px auto;
                text-align: center;
            font-size: 20px;
            }
            >span{
                width: 90%;
                color: gray;
                text-align: center;
                margin:5px auto;
                display: flex;
            }
            >h4{
                color: #da3c3c;
                margin: 0 auto;
                text-align: center;
            }
        }
    }
}
/* end */

/* end */
.end-part{
    width: 100%;
    height: 300px;
    /* background-color: deeppink; */
    display: flex;
    padding: 0 10%;
    >div{
        display: flex;
        width: 40%;
        height: 100%;
        /* border: 3px solid blueviolet; */
        flex-direction: column;
        flex-wrap: wrap;
        gap: 13px;
        >.row{
            display: flex;
            /* border: 4px solid black; */
            width: 40%;
            gap: 20px;
            border-bottom: 1px solid gray;
            
            >figure{
                width: 35%;
                >img{
                    width: 100%;
                    /* border-radius: 50%; */
                }
            }
            .text{
                /* border: 10px solid white; */
                height: 70px;
                line-height: 25px;
                >span{
                    color: rgb(19, 18, 18);
                    font-weight: bold;
                }
                >p{
                    color: #da3c3c;
                    font-weight: bold;
                }
            }
        }
    }
    .bottom{
        width: 60%;
        height: 300px;
        border: 5px solid rgb(213, 201, 201);
        >div{
           text-align: center;
           margin: 5px auto;
           line-height: 35px;
           >h4{
            color: #da3c3c;
            font-weight: bold;
           }
           >h3{
            font-weight: bold;
            color: rgb(17, 17, 17);
            width: 50%;
            margin: 0 auto;
            font-size: 30px;
           }
           >p{
            width: 70%;
            color: gray;
            font-size: 20px;
            margin: 0 auto;
           }
           >div{
            display: flex;
            /* border: 10px solid black; */
            justify-content: center;
            gap: 10px;
            >input{
                width: 50%;
                border:1px solid rgb(132, 132, 132);
                outline: none;
                &::placeholder{
                    padding: 10px 10px;
                    font-size: 17px;
                }
            }
            >a{
                text-decoration: none;
                background-color: #da3c3c;
                color: white;
                width: 20%;
                font-size: 20px;
                font-weight: bold;
            }
           }
           .icon{
            display: flex;
            justify-content: center;
            align-items: center;
            >i{
               border: 3px solid black;
               border-radius: 100px;
              padding: 5px 15px;
              display: flex;
              align-items: center;
              justify-content:center;
             
              &:hover{
                background-color: #da3c3c;
              }
            }
           }
        }
    }

}
video{
    /* height: 300px; */
    width: 100%;
    margin-top: 40px;
}
.footer{
    width: 100%;
    padding: 0 10%;
    height: 300px;
    /* background-color:hotpink; */
    display: flex;
    >div{
        margin: 30px 0;
        line-height: 30px;
        display: flex;
        /* border: 1px solid red; */
        flex-direction: column;
        flex-wrap: wrap;
        >.row1{
            width: 60%;
            display: flex;
            /* flex-direction: column; */
            /* border: 1px solid black; */
            flex-wrap: wrap;
        >figure{
    
            width: 50%;
            >img{
                width: 100%;
            }
        }
        >p{
            width: 100%;
            color: gray;
        }
        >div{
            display: flex;
            flex-direction: column;
            margin-top: 10px;
            line-height: 35px;
            color: gray;
            
        }
    }
       >nav{
        display: flex;
        /* border: 1px solid black; */
        justify-content: center;
        width: 40%;
        height: 200px;

        >ul{
            /* background-color: #da3c3c; */
            width: 30%;
           
            >li{
                margin: 10px 5px;
                list-style-type: none;
                line-height: 40px;
                /* height: 100%; */
                &:nth-of-type(1){
                    font-weight: bold;
                }
                >a{
                    text-decoration: none;
                    color: gray;
                    font-size: 17px;
                    display: flex;
                    width: 100%;
                    height: 100%;
                    align-items: center;
                }
            }


        }
       }
    }
   
    
    }
     
    .cont {
  width: 100%;
  min-height: 60vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #333;
}

.card {
  position: relative;
  width: 350px;
  height: 190px;
  background: #333;
  transition: 0.5s;
}

.card:hover {
  height: 400px;
}

.card .lines {
  position: absolute;
  inset: 3px;
  background: #000;
  overflow: hidden;
}

.card .lines::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 600px;
  height: 120px;
  background: linear-gradient(transparent, #45f3ff, #45f3ff, #45f3ff, transparent);
  animation: animate 4s linear infinite;
}

.card .lines::after {
  content: '';
  position: absolute;
  inset: 3px;
  background: #292929;
}

.card .imageBox {
  position: absolute;
  top: -50px;
  left: 50%;
  transform: translateX(-50%);
  width: 150px;
  height: 150px;
  background: #000;
  transition: 0.5s;
  z-index: 10;
  overflow: hidden;
}

.card:hover .imageBox {
  width: 250px;
  height: 250px;
}

.card .imageBox::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 500px;
  height: 150px;
  transform: translate(-50%, -50%);
  background: linear-gradient(transparent, #ff3c7b, #ff3c7b, #ff3c7b, transparent);
  animation: animate 4s linear infinite;
}

.card .imageBox::after {
  content: '';
  position: absolute;
  inset: 3px;
  background: #292929;
}

.card .imageBox img {
  position: absolute;
  top: 10px;
  left: 10px;
  height: 10px;
  width: calc(100% - 20px);
  height: calc(100% - 20px);
  filter: grayscale(1);
  transition: 0.5s;
  z-index: 1;
}

.card:hover .imageBox img {
  filter: grayscale(0);
}


@keyframes animate {
  0% {
    transform: translate(-50%, -50%) rotate(0deg);
  }
  100% {
    transform: translate(-50%, -50%) rotate(360deg);
  }
}

.card .content {
  position: absolute;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  transition: 0.5s;
}

.card .content .details {
  width: 100%;
  text-align: center;
  transition: 0.5s;
  transform: translateY(115px);
}

.card:hover .content .details {
  transform: translateY(100px);
}

.card .content .details h2 {
  font-size: 1.2rem;
  font-weight: 600;
  color: #45f3ff;
  line-height: 1.2rem;
  margin-bottom: 50px;
}

.card .content .details h2 span {
  font-size: 0.75rem;
  font-weight: 500;
  color: #fff;
}

.card .content .details .info {
  width: 100%;
  display: flex;
  /* flex-direction: column; */
  justify-content: space-evenly;
  align-items: center;
  margin: 30px 0;
}

.card .content .details .info h3 {
  font-size: 1rem;
  color: #45f3ff;
  font-weight: 600;
  text-align: center;
}

.card .content .details .info h3 span {
  font-size: 0.8rem;
  font-weight: 400;
  color: #fff;
}

.card .content .details .actions {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 20px
}

.card .content .details .actions button {
  min-width: 100px;
  padding: 10px 0;
  border: none;
  outline: none;
  background: #45f3ff;
  font-size: 1rem;
  font-weight: 500;
  color: #222;
  cursor: pointer;
  opacity: 0.8;
  transition: 0.5s;
}

.card .content .details .actions button:nth-child(2) {
  background: #fff;
}

.card .content .details .actions button:hover {
  opacity: 1;
}

.card .content .details .actions button:active {
  opacity: 1;
  transform: scale(0.98);
}