*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    text-decoration: none;
    list-style: none;
    font-family:  sans-serif;
    
}
nav{
    position: absolute;
    width: 100%;
    padding: 20px 35px;
    
    .logo{
        /*position: absolute;*/
        display: flex;
        justify-content: space-between;
        /*padding: 25px 40px 0px 40px;*/
        /*width: 100%;*/
    h4{
        display: flex;
        img{
            height: 60px;
        }
        p{
            color: white;
            align-items: center;
            font-size: 20px;
            padding-left: 10px;
            padding-top: 8px;
        }
        /* span{

        } */
    }

    ul{
         float: right; 
        li{
            display: inline-block;
            padding-top: 15px;
            margin: 2px 8px;
            a{
                font-size: 16px;
                color: white;
                padding: 5px 8px;
                border-radius: 3px;
            }
            a:hover{
                color: red;
                background-color: yellow;
            }
        }
    } 
            #port{
                position: absolute;
                line-height: 30px;
                height: 6.5rem;
                background-color: white;
                color: black;
                box-shadow: 0 0 13px rgba(0, 0, 0, 0.65);
                border-radius: 5px;
                display: none;
                z-index: 3;
                li{
                    a{
                        color: grey;
                    }
                    a:hover{
                        background-color: black;
                        color: white;
                    }
                }          
            }
            #ser:hover #port{
                display: block;
            }
            #des1{
                position: absolute;
                line-height: 30px;
                height: 13rem;
                background-color: white;
                color: black;
                box-shadow: 0 0 13px rgba(0, 0, 0, 0.65);
                border-radius: 5px;
                display: none;
                z-index: 3;
                li{
                    a{
                        color: grey;
                    }
                    a:hover{
                        background-color: black;
                        color: white;
                    }
                }          
            }
            #des:hover #des1{
                display: block;
            }
            #pro1{
                position: absolute;
                line-height: 30px;
                height: 13rem;
                background-color: white;
                color: black;
                box-shadow: 0 0 13px rgba(0, 0, 0, 0.65);
                border-radius: 5px;
                display: none;
                z-index: 3;
                li{
                    a{
                        color: grey;
                    }
                    a:hover{
                        background-color: black;
                        color: white;
                    }
                }          
            }
            #pro:hover #pro1{
                display: block;
            }
            #mor1{
                position: absolute;
                line-height: 30px;
                height: 10rem;
                background-color: white;
                color: black;
                right: 5px;
                box-shadow: 0 0 13px rgba(0, 0, 0, 0.65);
                border-radius: 5px;
                display: none;
                z-index: 3;
                li{
                    a{
                        color: grey;
                    }
                    a:hover{
                        background-color: black;
                        color: white;
                    }
                }          
            }
            #mor:hover #mor1{
                display: block;
            }
    }
    #check{
        display: none;
        /* display: block; */
    }
    .botton{
         /*position: fixed; */
        font-size: 25px;
        color: rgb(245, 241, 241);
        float: right;
        line-height: 80px;
        margin-right: 20px;
        cursor: pointer;
        display: none;
    }
#check:checked ~ .logo ul{
        left: 0;
    }       
}
.det{
    background-color: #6c6172;
}
/* ------------------------------------------------------------ */
.ho{
    background-image: url(images/Picture3.png);
    background-size: cover;
    background-repeat: no-repeat;
    height: 700px;
    .ma{
        h1{
            /* padding-top:18rem; */
            text-align: center;
            color:#eeeeee;
            font-size: 40px;
            
        }
    }
    .let{
        p{
            padding-top: 7rem;
            text-align: center;
            font-size: 30px;
            /*font-family: bold;*/
            font-weight: bold;
            a{
                color: white;
            }
        }
        .book{
            padding-top: 2rem;
            text-align: center;
            a{
                background-color: red;
                color: white;
                padding: 10px 15px;
            }
        }}
            .book-detail{
                position: absolute;
                /* display: none; */
                display: block;
                z-index: 4;
                transition: all 0.3s ease;
    .overlay {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: rgba(0, 0, 0, 0.5);
      display: flex;
      justify-content: center;
      align-items: center;
      visibility: visible;
      opacity: 1;
      /* transition: all 0.3s ease; */
    }

    .overlay.hide {
      visibility: hidden;
      opacity: 0;
    }

    /* -------------------
       Popup Box
    ------------------- */
    .popup-box {
      background: #fff;
      width: 420px;
      padding: 30px;
      border-radius: 8px;
      box-shadow: 0 5px 20px rgba(0,0,0,0.3);
      position: relative;
    }

    /* -------------------
       Close Button (×)
    ------------------- */
    .close-btn {
      position: absolute;
      top: 10px;
      right: 15px;
      font-size: 22px;
      color: #666;
      cursor: pointer;
      background: none;
      border: none;
    }

    .close-btn:hover {
      color: #000;
    }

    /* -------------------
       Headings and text
    ------------------- */
    h2 {
      font-size: 20px;
      color: #333;
      margin: 0;
    }

    h3 {
      color: #f39c12;
      margin-top: 5px;
      font-size: 16px;
      margin-bottom: 20px;
    }

    p {
      color: #555;
      font-size: 14px;
      margin-bottom: 15px;
    }

    /* -------------------
       Input Field Section
    ------------------- */
    .input-group {
      display: flex;
      align-items: center;
      border: 1px solid #ccc;
      border-radius: 5px;
      overflow: hidden;
      margin-bottom: 15px;
    }

    .input-group select {
      background: #f9f9f9;
      border: none;
      padding: 10px;
      font-size: 14px;
      color: #333;
    }

    .input-group input {
      flex: 1;
      border: none;
      padding: 10px;
      font-size: 15px;
      outline: none;
    }
    .dis {
      /* display: flex; */
      /* align-items: center; */
      border: 1px solid #ccc;
      border-radius: 5px;
      overflow: hidden;
      margin-bottom: 15px;
      padding: 30px 20px;
      width: 100%;
      /* margin: 20px ; */
      font-size: 16px;
    }

    /* -------------------
       Button
    ------------------- */
    .call-btn {
      width: 100%;
      background: #f39c12;
      color: #fff;
      border: none;
      padding: 12px;
      border-radius: 5px;
      font-size: 16px;
      cursor: pointer;
      transition: background 0.3s;
    }

    .call-btn:hover {
      background: #d9820f;
    }

    /* -------------------
       Links
    ------------------- */
    .links {
      font-size: 14px;
      color: #555;
      margin-top: 15px;
    }

    .links a {
      color: #f39c12;
      text-decoration: none;
    }

    .links a:hover {
      text-decoration: underline;
    }

    small {
      display: block;
      margin-top: 10px;
      color: #999;
      font-size: 12px;
    }
                       
            /* } */
    }
    .co{
        padding-top: 3rem;
        p{
            padding-left: 40px;
            line-height: 30px;
            background-color: transparent;
            a{
                color: white;
        
            }
        }
    }
}
/* ------------------------------details---------------------------------- */
.abo{
     /*padding-top: 20rem; */
    width: 70%;
    background-color:white;
    border-radius:20px;
    box-shadow: 0 0 13px rgba(0, 0, 0, 0.65);
    /*box-shadow: 1px 20px 12px 2px rgba(0, 0, 0, 0.65);*/
    .abou{
        p{
            padding-top: 50px;
            line-height: 25px;
            background-color:transparent;
            color: gray;
        }
        
    }
}
/* ----------------------------kichen---------------------------------- */
.ki-content{
    h2{
        text-align: center;
        font-size: 33px;
    }
    .detail{
        /* padding-bottom: 3rem; */
        padding-top: 3rem;
        box-shadow: 0px 20px 20px 0px rgba(73, 42, 42, 0.3);
        border-left: 0px solid gray;
        border-bottom: 0.1px solid gray;
        border-radius: 10px;
        p{
            font-size: 20px;
            line-height: 25px;
        }
        h2{
            img{
                border-radius: 10px;
            }
            
        }
    }
}

/* -------------------------service--------------------------------------- */

.ser{

    background-color: aqua;
    
}
/* -----------------------------about------------------------------- */

.about1{
        background-image: url(images/aboutus.jpeg);
        background-size: cover;
        background-repeat: no-repeat;
        height: 700px; 
        justify-items: center;
        h3{
        font-family: sans-serif;
        position: absolute;
        color: white;
        background-color: #353a42;
        opacity: 70%;
        border-radius: 5px;
        text-align: center;
        margin: 18rem 5rem 0rem 5rem;
        padding: 1.5rem 0rem 1.5rem 0rem;
        width: 40%;
        font-size: 40px;
    }  
}
.page1{
    p{
        background-color:#6c6172;
        padding-top: 0.5rem;
        padding-bottom: 0.5rem;
        padding-left: 5rem;
        color: white;
        a{
            text-decoration: none;
            color: white;
        } 
            span{
                padding-left: 20px;
            }
        }
} 
.page2{
    font-family:  sans-serif;
    margin-top: 3rem;
    margin-bottom: 5rem;
    margin-left: 10rem;
    margin-right: 9rem;
    p{
        padding-top: 20px;
        line-height: 30px;
    }
    h1{
        img{
            float: right;
            width: 30rem;
            margin: 3rem 0rem 0rem 1rem;
            border: 1px solid #ccc;
            padding: 0.5rem 0.5rem 0.5rem 0.5rem;
            box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.3);
        }
    }
    h2{
        font-weight: 800;
    }
}
/* -----------------------commercial-------------------------------------------- */

.comm{
        /*background-image: url(images/aboutus.jpeg);*/
        background-image: url(images/commercialmain.jpeg);
        background-size: cover;
        background-repeat: no-repeat;
        height: 700px; 
        justify-items: center;
        h3{
        font-family: sans-serif;
        position: absolute;
        color: white;
        background-color: #353a42;
        opacity: 70%;
        border-radius: 5px;
        text-align: center;
        margin: 18rem 5rem 0rem 5rem;
        padding: 1.5rem 0rem 1.5rem 0rem;
        width: 40%;
        font-size: 40px;
    }  
}
.comm1{
    p{
        background-color:#6c6172;
        padding-top: 0.5rem;
        padding-bottom: 0.5rem;
        padding-left: 5rem;
        color: white;
        a{
            text-decoration: none;
            color: white;
        } 
            span{
                padding-left: 20px;
            }
        }
} 
.comm2{
    padding-top: 3rem;
    margin-bottom: 1rem;
    margin-left: 10rem;
    margin-right: 9rem;
    display: flex;
    p{
        padding: 100px 40px 0px 0px;
        padding-top: 20px;
        line-height: 30px;
    }
    h1{
        img{
            width: 40rem;
            margin: 0rem 1rem 0rem 0rem;
            border: 1px solid #ccc;
            padding: 0.5rem 0.5rem 0.5rem 0.5rem;
            box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.3);
        }
    }
    h2{
        font-weight: 800;
    }
}
/* ------------------------residential------------------------------------------------------- */
.resident{
        background-image: url(images/residentialmain.jpg);
        background-size: cover;
        background-repeat: no-repeat;
        height: 700px; 
        justify-items: center;
        h3{
        font-family: sans-serif;
        position: absolute;
        color: white;
        background-color: #353a42;
        opacity: 70%;
        border-radius: 5px;
        text-align: center;
        margin: 18rem 5rem 0rem 5rem;
        padding: 1.5rem 0rem 1.5rem 0rem;
        width: 40%;
        font-size: 40px;
    }  
}
.resi1{
    p{
        background-color:#6c6172;
        padding-top: 0.5rem;
        padding-bottom: 0.5rem;
        padding-left: 5rem;
        color: white;
        a{
            text-decoration: none;
            color: white;
        } 
            span{
                padding-left: 20px;
            }
        }
} 
.resi2{
    padding-top: 3rem;
    margin-bottom: 1rem;
    margin-left: 10rem;
    margin-right: 9rem;
    display: flex;
    p{
        padding: 100px 40px 0px 0px;
        padding-top: 20px;
        line-height: 30px;
    }
    h1{
        img{
            width: 40rem;
            margin: 0rem 1rem 0rem 0rem;
            border: 1px solid #ccc;
            padding: 0.5rem 0.5rem 0.5rem 0.5rem;
            box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.3);
        }
    }
    h2{
        font-weight: 800;
    }
}
/* ----------------------------dressing-table----------------------------- */
.war{
    background-color:#f26522;
        background-image: url(images/studytablemain.jpeg);
        background-size: cover;
        /* background-size:0vmax; */
        background-repeat: no-repeat;
        height: 700px; 
        justify-items: center;
        h3{
        font-family: sans-serif;
        position: absolute;
        color: white;
        background-color: #353a42;
        opacity: 70%;
        border-radius: 5px;
        text-align: center;
        margin: 18rem 5rem 0rem 5rem;
        padding: 1.5rem 0rem 1.5rem 0rem;
        width: 40%;
        font-size: 40px;
    }  
}
.war1{
    p{
        background-color:#6c6172;
        padding-top: 0.5rem;
        padding-bottom: 0.5rem;
        padding-left: 5rem;
        color: white;
        a{
            text-decoration: none;
            color: white;
        } 
            span{
                padding-left: 20px;
            }
        }
} 

.heading-cont{
    font-weight: bold;
    text-align: center;
    padding: 3rem 5rem;
    font-size: 1.5rem;
}

.wardrobe{
    padding: 20px 150px;  
    h2{
        padding: 1rem;
        /*margin: 2rem;*/
    }
    .detail1{
        display: flex;
        box-shadow: 0px 20px 20px 0px rgba(73, 42, 42, 0.3);
        border-left: 0px solid gray;
        border-bottom: 0.1px solid gray;
        border-radius: 10px;
        p{
            padding: 50px 30px 0px 50px;
            font-size: 20px;
            line-height: 25px;
        }
        h2{
            img{
                border-radius: 10px;
                width: 30rem;
            }
            
        }
    }
}
/* ----------------------------TV-unit----------------------------- */
/*.tv{*/

/*        background-image: url(images/t.v.unitmain.jpeg);*/
/*}*/
/* ----------------------------study-table----------------------------- */
/*.tv{*/

/*        background-image: url(images/studytablemain.jpeg);*/
/*}*/
/* ----------------------------wardrobe----------------------------- */
/*.tv{*/

/*        background-image: url(images/wardrobemain.webp);*/
/*}*/
 
/* ---------------------------product(all)-------------------------------------- */
.bed{
        background-image: url(images/masterbedmian.jpeg);
        background-size: cover;
        background-repeat: no-repeat;
        height: 700px; 
        justify-items: center;
        h3{
        font-family: sans-serif;
        position: absolute;
        color: white;
        background-color: #353a42;
        opacity: 70%;
        border-radius: 5px;
        text-align: center;
        margin: 18rem 5rem 0rem 5rem;
        padding: 1.5rem 0rem 1.5rem 0rem;
        width: 40%;
        font-size: 40px;
    }  
}
.bed1{
    p{
        background-color:#6c6172;
        padding-top: 0.5rem;
        padding-bottom: 0.5rem;
        padding-left: 5rem;
        color: white;
        a{
            text-decoration: none;
            color: white;
        } 
            span{
                padding-left: 20px;
            }
        }
} 

/* ------------------------------------------------------- */
.living{
        background-image: url(images/living-main.jpeg);
        background-size: cover;
        background-repeat: no-repeat;
        height: 700px; 
        justify-items: center;
        h3{
        font-family: sans-serif;
        position: absolute;
        color: white;
        background-color: #353a42;
        opacity: 70%;
        border-radius: 5px;
        text-align: center;
        margin: 18rem 5rem 0rem 5rem;
        padding: 1.5rem 0rem 1.5rem 0rem;
        width: 40%;
        font-size: 40px;
    }  
}
.live{
    p{
        background-color:#6c6172;
        padding-top: 0.5rem;
        padding-bottom: 0.5rem;
        padding-left: 5rem;
        color: white;
        a{
            text-decoration: none;
            color: white;
        } 
        span{
            padding-left: 20px;
        }
    }
}  
.living1{
    /*padding: 50px 150px;*/
    padding: 0px 150px;
    .living11{
        display: flex;
        justify-content: space-between;
        padding-top: 3rem;
        padding-bottom: 3rem;
        h3{
            img{
                border-radius: 10px;
                /*height: 15rem;*/
                height: 22rem;
            }   
        }
    }
    
    .living22{
        display: flex;
        justify-content: space-between;
        padding-top: 3rem;
        padding-bottom: 3rem;
        h3{
            img{
                border-radius: 10px;
                height: 22rem;
            }   
        }
    }
    
}
/* --------------------------------------------------------------     */
.kiche{
        background-image: url(images/kichenmain-3.jpeg);
        background-size: cover;
        background-repeat: no-repeat;
        height: 700px; 
        justify-items: center;
        h3{
        font-family: sans-serif;
        position: absolute;
        color: white;
        background-color: #353a42;
        opacity: 70%;
        border-radius: 5px;
        text-align: center;
        margin: 18rem 5rem 0rem 5rem;
        padding: 1.5rem 0rem 1.5rem 0rem;
        width: 40%;
        font-size: 40px;
    }  
}
/*--------------------------------lighting---------------------------------------*/
.light{
        background-image: url(images/lighningmain-1.jpeg);
        background-size: cover;
        background-repeat: no-repeat;
        height: 700px; 
        justify-items: center;
        h3{
        font-family: sans-serif;
        position: absolute;
        color: white;
        background-color: #353a42;
        opacity: 70%;
        border-radius: 5px;
        text-align: center;
        margin: 18rem 5rem 0rem 5rem;
        padding: 1.5rem 0rem 1.5rem 0rem;
        width: 40%;
        font-size: 40px;
    }  
}


/* ----------------------------more(all)----------------------------- */
.single{
        background-image: url(images/commer.jpg);
        background-size: cover;
        background-repeat: no-repeat;
        height: 700px; 
        justify-items: center;
        h3{
        font-family: sans-serif;
        position: absolute;
        color: white;
        background-color: #353a42;
        opacity: 70%;
        border-radius: 5px;
        text-align: center;
        margin: 18rem 5rem 0rem 5rem;
        padding: 1.5rem 0rem 1.5rem 0rem;
        width: 40%;
        font-size: 40px;
    }  
}
.kar{
        background-image: url(images/karpenter4.jpeg);
        background-size: cover;
        background-repeat: no-repeat;
        height: 700px; 
        justify-items: center;
        h3{
        font-family: sans-serif;
        position: absolute;
        color: white;
        background-color: #353a42;
        opacity: 70%;
        border-radius: 5px;
        text-align: center;
        margin: 18rem 5rem 0rem 5rem;
        padding: 1.5rem 0rem 1.5rem 0rem;
        width: 40%;
        font-size: 40px;
    }  
}
.kar1{
    p{
        background-color:#6c6172;
        padding-top: 0.5rem;
        padding-bottom: 0.5rem;
        padding-left: 5rem;
        color: white;
        a{
            text-decoration: none;
            color: white;
        } 
        span{
            padding-left: 20px;
        }
    }
} 

.karpenter{
    padding: 50px 150px; 
    h2{
        text-align: center;
    }  
    p{
        padding: 50px 30px 0px 50px;
        font-size: 16px;
        line-height: 25px;
    }
    .karpenter1{
        display: flex;
        justify-content: space-between;
        padding-top: 3rem;
        padding-bottom: 3rem;
        h3{
            img{
                border-radius: 10px;
                box-shadow: 3px 3px 3px 3px rgba(14, 14, 14, 0.3);
                border: 0px solid gray;
                height: 23rem;
            }   
        }
    }
}    
/* -----------------desgin------------------------------------------- */
.gal{
        background-image: url(images/designpage.jpeg);
        background-size: cover;
        background-repeat: no-repeat;
        height: 700px; 
        justify-items: center;
        h3{
        font-family: sans-serif;
        position: absolute;
        color: white;
        background-color: #353a42;
        opacity: 70%;
        border-radius: 5px;
        text-align: center;
        margin: 18rem 5rem 0rem 5rem;
        padding: 1.5rem 0rem 1.5rem 0rem;
        width: 40%;
        font-size: 40px;
    }  
}
.design1{
    padding: 50px 150px;   
    .karpenter1{
        display: flex;
        justify-content: space-between;
        padding-top: 3rem;
        padding-bottom: 3rem;
        h3{
            img{
                border-radius: 10px;
                height: 23rem;
            }   
        }
    }
    .karpenter2{
        display: flex;
        justify-content: space-between;
        padding-top: 3rem;
        padding-bottom: 3rem;
        h3{
            img{
                border-radius: 10px;
                height: 30rem;
            }   
        }
    }
    .karpenter3{
        display: flex;
        justify-content: space-between;
        padding-top: 3rem;
        padding-bottom: 3rem;
        h3{
            img{
                border-radius: 10px;
                height: 13.5rem;
            }   
        }
    }
    .karpenter4{
        display: flex;
        justify-content: space-between;
        padding-top: 3rem;
        padding-bottom: 3rem;
        h3{
            img{
                border-radius: 10px;
                height: 15rem;
            }   
        }
    }
}
/* -------------------show icon---------------------------------------------- */
.text-icon{
    padding-top: 5rem;
    span{
        content: "";
        position: absolute;
        left: 0;
        right: 0;
        margin: auto;
        transform: translateY(-50);
        height: 1px;
        width: 100%;
        background-color: black;
        z-index: 0;
    }
    p{
        position: absolute;
        /* font-size: 30px; */
        text-align: center;
        /* width: 37%; */
        font-weight: bold;
        z-index: 2;
        background-color: white;
        /* margin: -1rem 30rem; */
    }

}


.show-icon{
    margin-top: 5rem;
    text-align: center;
    .show-cont{
        border: 1px solid black;
        border-radius: 50px;
        .shows{
            width: 100%;
            padding: 15px;
        }
    }
    h1{
        font-size: 40px;
        font-weight: bold;
    }
    p{
        padding-top: 1rem;
        padding-bottom: 2rem;
    }
    .shows:hover{
        background-color: gray;
        border-radius: 50px;
    }
}
.text-cont{
    margin-top: -1.5rem;
    display: flex;
    justify-content: space-between;
    padding-left: 11.5rem;
    width: 90%;
    padding-bottom: 5rem;
}

/* ---------------------slider---------------------------------- */
.slider-text{
    /* padding-top: 10rem; */
      /* font-size: 30px; */
        text-align: center;
        /* margin-left: 20rem; */
    /* width: 37%; */
    font-weight: bold;
    /* margin-top: -18px; */
    z-index: 2;
    /* background-color: white; */

}
.gallery {
  /* width: 80%; */
  padding-top: 5rem;
  /* padding: 5rem; */
  /* padding: 0rem 0rem; */
  text-align: center;
  position: relative;
}

.gallery-cont {
  position: relative;
  /* width: 900px; */
  height: 400px;
  margin: auto;
}

.gallery-i {
  position: absolute;
  /* width: 400px; */
  height: 250px;
  opacity: 0;
  border-radius: 10px;
  transition: all 0.4s ease-in-out;
}

/* Example positions */
.item-1 { left: 10%; opacity: 0.4; transform: scale(0.8); }
.item-2 { left: 30%; opacity: 1; transform: scale(0.9); }
.item-3 { left: 50%; opacity: 1; transform: scale(1); z-index: 3; }
.item-4 { left: 70%; opacity: 1; transform: scale(0.9); }
.item-5 { left: 90%; opacity: 0.2; transform: scale(0.8); }

.gallery-control {
  position: absolute;
  top: 35%;
  /* left: 15%; */
  width: 100%;
  display: flex;
  justify-content: space-between;
  transform: translateY(-50%);
}

/* .gallery-control button {
  background: rgba(0, 0, 0, 0.5);
  border: none;
  color: white;
  font-size: 30px;
  cursor: pointer;
  padding: 10px 20px;
  border-radius: 50%;
  
} */

.gallery-control button:hover {
  background: rgba(0, 0, 0, 0.8);
}



 @media (min-width:275px) and (max-width:574px){
    
    label.botton{
        display: block;
    }
    nav{
        .logo{
            ul{
            z-index: 3;
            display: flex;
            flex-direction: column;
            text-align: center;
            position: fixed;
            width: 100%;
            height: 100vh;
            line-height: 50px;
            top: 80px;
            left: -100%;
            transition: all .3s;
            background-color: gray;      
        }
    }

}
.ho{
    .ma{
        h1{
            padding-top: 12rem;

        }
    }
}
.abo{
    padding: 30px 30px;
    margin: -3rem 0rem 0rem 5rem;
    display:block;
        h2{
            img{
                width: 100%;
                height: 20rem;
            }
        }
}
.abou{
    padding-top: 1rem;
    h2{
        font-size: 25px;
    }
    p{
        font-size: 16px;
    }
}
.ki-content{
    padding: 30px 30px;
    .detail{
        p{
            padding: 10px 30px 10px 50px;
        }
        h2{
            img{
                width: 100%;
            }
        }
    }
}

.text-icon{
    span{
        display: none;
    }
    p{
    font-size: 25px;
    width: 100%;

    }
}
.show-icon{
    margin-left: 30%;
    width: 40%;
    h1{
        display: none;
    }
}
.text-cont{
    display: none;
}
.slider-text{
    padding-top: 2rem;
    font-size: 25px;
}

.gallery{
    width: 50%;

}
.gallery-cont{
    width: 100%;
}
.gallery-i{
    width: 100%;
}






footer{
    #foo{
        flex-wrap: wrap;
        padding-left: 10px;
    }
}
footer>#foo > .foo1{
    padding-bottom: 30px;
    h2{
        font-size: 25px;
    }
    p{ 
        a{
            line-height: 10px;
            display: block;
            font-size: 14px;
            span{
                padding-left: 10px;
            }
        }  
    }
}
 

.pho{
    position: fixed;
    bottom: 10px;
    left: 10px;
}

.butt{
    position: fixed;
    bottom: 10px;
    right: 20px;
    a{
        .whats{
                font-size: 13px;
                img{
                    vertical-align: middle;
                    width: 25px;
                }
        }
    }
} 

/* -------------------------about------------------------------------------ */
/* .about{
    height: 500px;
    h3{
        text-align: center;
        margin: 12rem 5rem 0rem 5rem;
        padding: 1rem 0rem 1rem 0rem;
        width: 50%;
        font-size: 30px;
    }
}
.abo{
    p{
        padding-left: 1rem;
    }
}
.para{
    margin-bottom: 5rem;
    margin-left: 2rem;
    margin-right: 2rem;
    .i{
        img{
            float: none;
            width: 280px;
            margin: 4rem 0rem 0rem 0rem;
        }
    }

}

.d{
    h3{
        text-align: center;
        padding: 1rem 0rem 2rem 1rem;
        width: 80%;
    }
}
.d2{
    p{
        padding: 0.5rem 0rem .5rem 1rem;
    }
} */

 }
@media (min-width:575px) and (max-width:767px){
    label.botton{
        display: block;
    }
    nav{
        .logo{     
            ul{
            z-index: 3;
            display: flex;
            flex-direction: column;
            text-align: center;
            position: fixed;
            width: 100%;
            height: 100vh;
            line-height: 50px;
            top: 80px;
            left: -100%;
            transition: all .3s;
            background-color: gray;      
        }
/* #sub{
    top: 8.5rem;
}
    nav > ul > li{
            display: block;
        a{
            font-size: 20px;
        }
        a:hover{
            background-color: yellow;
            color: red;
        }

    } */
}
} 
.ho{
    .ma{
        h1{
            padding-top: 15rem;

        }
    }
}

.abo{
    padding: 30px 30px;
    margin: -3rem 0rem 0rem 5rem;
    display:block;
        h2{
            img{
                width: 100%;
                height: 20rem;
            }
        }
}
.abou{
    padding-top: 1rem;
    h2{
        font-size: 30px;
    }
    p{
        font-size: 16px;
    }
}  
.ki-content{
    padding: 30px 30px;
    .detail{
        p{
            padding: 10px 30px 10px 50px;
        }
        h2{
            img{
                width: 100%;
            }
        }
    }
}  
.text-icon{
    span{
        display: none;
    }
    p{
    font-size: 25px;
    width: 100%;

    }
}
.show-icon{
    margin-left: 30%;
    width: 35%;
    h1{
        display: none;
    }
}
.text-cont{
    display: none;
}

.slider-text{
    padding-top: 3rem;
    font-size: 25px;
}
.gallery{
    width: 50%;

}
.gallery-cont{
    width: 100%;
}
.gallery-i{
    width: 100%;
}

footer{ 
    #foo{
        width: 60%;
        flex-wrap: wrap;
        padding-left: 10px;
        
    }
}
footer>#foo > .foo1{
    padding-bottom: 30px;

    h2{
        font-size: 20px;
    }
    p{
        
        a{
            line-height: 20px;
            display: block;
            font-size: 14px;
            span{
                padding-left: 10px;
            }
        }  
    }
} 
/* ----------------------------about---------------------------------- */
/* .about{
    height: 500px;
    h3{
        text-align: center;
        margin: 12rem 5rem 0rem 5rem;
        padding: 1rem 0rem 1rem 0rem;
        width: 50%;
        font-size: 30px;
    }
}
.abo{
    p{
        padding-left: 1rem;
    }
}
.para{
    margin-top: 3rem;
    margin-bottom: 5rem;
    margin-left: 2rem;
    margin-right: 2rem;
    .i{
        img{

            float: none;
            width: 350px;
            margin: 4rem 0rem 0rem 5rem;
        }
    }

}

.d{
    h3{
        text-align: center;
        padding: 1rem 0rem 1rem 0rem;
        width: 80%;
    }
}
.d2{
    p{
        padding: 0.5rem 0rem .5rem 1.5rem;
    }
}
.gall{
    h3{
        width: 70%;
        padding: 1rem 0rem 1rem 0rem;
    }
}
.ga{
    p{
        padding: 0.5rem 0rem 0.5rem 2rem;

    }
}
.main{
    padding: 3rem 0rem 3rem 0rem;
    .gall1{
        img{
            width: 15rem;
        }
    }

} */
}

@media (min-width: 768px) and (max-width: 1024px){
    label.botton{
        display: block;
    }
    nav{
        .logo{       
            ul{
            z-index: 3;
            display: flex;
            flex-direction: column;
            text-align: center;
            position: fixed;
            width: 50%;
            height: 100vh;
            line-height: 50px;
            top: 80px;
            left: -100%;
            transition: all .3s;
            background-color: gray;      
        }
/* #sub{
    top: 8.5rem;
    width: 100%;
}
    nav > ul > li{
            display: block;
        a{
            font-size: 20px;
        }
        a:hover{
            background-color: yellow;
            color: red;
        }

    } */
}
} 
.ho{
    .ma{
        h1{
            padding-top: 18rem;

        }
    }
}
.abo{
    padding: 40px 40px;
    margin: -3rem 0rem 0rem 5rem;
    display:block;
        h2{
            img{
                width: 100%;
                height: 20rem;
            }
        }
}
.abou{
    padding-top: 1rem;
    h2{
        font-size: 35px;
    }
    p{
        font-size: 20px;
    }
}
.ki-content{
    padding: 30px 30px;

    .detail{
        display: flex;
        p{
            padding: 10px 30px 10px 50px;
        }
        h2{
            img{
                width: 30rem;
            }
        }
    }
}
.text-icon{
    span{
        display: none;

    }
    p{
    font-size: 30px;
    width: 100%;

    }
}
.show-icon{
    margin-left: 35%;
    width: 30%;
    h1{
        display: none;
    }
}
.text-cont{
    display: none;
}

.slider-text{
    padding-top: 4rem;
    font-size: 30px;
}
.gallery{
    width: 50%;

}
.gallery-cont{
    width: 100%;
}
.gallery-i{
    width: 100%;
}

footer{
    #foo{
        flex-wrap: wrap;         
    }
}
footer>#foo > .foo1{

    h2{
        font-size: 18px;
    }
    p{
        a{
            line-height: 20px;
            display: block;
            font-size: 14px;
            span{
                padding-left: 10px;
            }
        }  
    }
}


}

/* ---------------------------about------------------------------------- */
/* .about{
    height: 500px;
    h3{
        text-align: center;
        margin: 12rem 5rem 0rem 5rem;
        padding: 1rem 1rem 1rem 1rem;
        width: 50%;
        font-size: 40px;
    }
}
.abo{
    p{
        padding-left: 2rem;
    }
}
.para{
    margin-top: 3rem;
    margin-bottom: 5rem;
    margin-left: 5rem;
    margin-right: 4rem;
    .i{
        img{

            float: right;
            width: 350px;
            margin: 4rem 0rem 0rem 0rem;
        }
    }

}
.d{
    h3{
        text-align: center;
        padding: 1.5rem 1rem 1.5rem 1rem;
        width: 70%;
    }
}
.d2{
    p{
        padding: 0.5rem 0rem .5rem 2rem;
    }
} */

@media (min-width:1025px) and (max-width: 1199px){
    label.botton{
        display: none;
    }
    /* nav{
        .logo{
            ul{
                li{
                    padding-top: 5px;
                }               
            }
        }
    }  */
.ho{
    .ma{
        h1{
            padding-top: 18rem;

        }
    }
}
.abo{
    padding: 50px 50px;
    margin: -3rem 0rem 0rem 8rem;
    display:flex;
        h2{
            img{
                width: 20rem;
            }
        }
}
.abou{
    padding-left: 50px;
    h2{
        font-size: 35px;
    }
    p{
        font-size: 20px;
    }
}
.ki-content{
    padding: 30px 30px;

    .detail{
        display: flex;
        p{
            padding: 10px 30px 10px 50px;
        }
        h2{
            img{
                width: 35rem;
            }
        }
    }
}
.text-icon{
    span{
        display: none;
    }
    p{
    font-size: 30px;
    width: 100%;

    }
}
.show-icon{
    display: flex;
    justify-content: space-between;
    padding: 100px 150px 30px 150px;
    gap: 10px;
    p{
        display: none;

    }
    h1{
        padding-top: 2.5rem;
    }
}
.slider-text{
    padding-top: 5rem;
    font-size: 30px;
}

.gallery{
    width: 75%;

}
.gallery-cont{
    width: 80%;
}
.gallery-i{
    width: 50%;
}




footer{
    font-family:  sans-serif;
}

footer>#foo > .foo1{
    h2{
        font-size: 25px;
    }
    p{
        a{
            display: block;
            font-size: 14px;
            span{
                padding-left: 10px;   
        }  
    }
}

} 
 
/* ---------------------------about------------------------------------- */
/* .about{
    height: 500px;
    h3{
        text-align: center;
        margin: 12rem 5rem 0rem 5rem;
        padding: 1rem 1rem 1rem 1rem;
        width: 50%;
        font-size: 40px;
    }
}
.abo{
    p{
        padding-left: 3rem;
    }
}
.para{
    margin-top: 3rem;
    margin-bottom: 5rem;
    margin-left: 5rem;
    margin-right: 4rem;
    .i{
        img{

            float: right;
            width: 350px;
            margin: 4rem 0rem 0rem 0rem;
        }
    }

}
.d{
    h3{
        text-align: center;
        padding: 1.5rem 0rem 1.5rem 0rem;
        width: 50%;
    }
}
.d2{
    p{
        padding: 0.5rem 0rem .5rem 4rem;
    }
} */
}
@media (min-width:1200px) and (max-width: 1280px){
label.botton{
        display: none;
    }
    /* nav{
        .logo{
            ul{
                li{
                    padding-top: 5px;
                    
                }
                
            }
        }
    }  */
.ho{
    .ma{
        h1{
            padding-top: 18rem;

        }
    }
}  
.abo{
    padding: 50px 50px;
    margin: -3rem 0rem 0rem 8rem;
    display:flex;
        h2{
            img{
                width: 20rem;
            }
        }
}
.abou{
    padding-left: 50px;
    h2{
        font-size: 35px;
    }
    p{
        font-size: 20px;
    }
}
.ki-content{
    padding: 50px 100px;

    .detail{
        display: flex;
        p{
            padding: 50px 30px 10px 50px;
        }
        h2{
            img{
                width: 40rem;
            }
        }
    }
}
.text-icon{
    span{
        display: block;
    }
    p{
    font-size: 30px;
    width: 45%;
    margin: -1rem 20rem;

    }
}
.show-icon{
    display: flex;
    justify-content: space-between;
    padding: 100px 150px 30px 150px;
    gap: 10px;
    p{
        display: none;

    }
    h1{
        padding-top: 3rem;
    }
}
.slider-text{
    padding-top: 5rem;
    font-size: 30px;
}

.gallery{
    width: 75%;

}
.gallery-cont{
    width: 70%;
}
.gallery-i{
    width: 50%;
}


    
}
/* ---------------------------about------------------------------------- */

/* .about{
    height: 500px;
    h3{
        text-align: center;
        margin: 12rem 5rem 0rem 5rem;
        padding: 1.5rem 1rem 1.5rem 1rem;
        width: 40%;
        font-size: 40px;
    }
}
.abo{
    p{
        padding-left: 5rem;
    }
}
.para{
    margin-top: 3rem;
    margin-bottom: 5rem;
    margin-left: 10rem;
    margin-right: 9rem;
    .i{
        img{

            float: right;
            width: 400px;
            margin: 4rem 1rem 0rem 0rem;
        }
    }

}
.d{
    h3{
        text-align: center;
        padding: 1.5rem 0rem 1.5rem 0rem;
        width: 50%;
    }
}
.d2{
    p{
        padding: 0.5rem 0rem .5rem 6rem;
    }
} */
 

@media (min-width:1281px){
    label.botton{
        display: none;
    }
    /* nav{
        .logo{
            ul{
                li{
                    padding-top: 30px;
                    
                }
                
            }
        }
    } */
.ho{
    .ma{
        h1{
            padding-top: 18rem;

        }
    }
}  

.abo{
    padding: 50px 50px;
    margin: 8rem 0rem 0rem 13rem;
    display:flex;
        h2{
            img{
                width: 20rem;
            }
        }
}
.abou{
    padding-left: 50px;
    h2{
        font-size: 35px;
    }
    p{
        font-size: 20px;
    }
}
.ki-content{
    padding: 20px 100px;

    .detail{
        display: flex;
        p{
            padding: 50px 30px 10px 50px;
        }
        h2{
            img{
                width: 40rem;
            }
        }
    }
}
.text-icon{
    span{
        display: block;
    }
    p{
    font-size: 30px;
    width: 45%;
    margin: -1rem 25rem;

    }
}
.show-icon{
    display: flex;
    justify-content: space-between;
    padding: 100px 180px 30px 180px;
    gap: 10px;
    p{
        display: none;

    }
    h1{
        padding-top: 3.5rem;
    }
}
.slider-text{
    padding-top: 5rem;
    font-size: 30px;
}
.gallery{
    width: 75%;

}
.gallery-cont{
    width: 70%;
}
.gallery-i{
    width: 50%;
}


}
/* ---------------------------about------------------------------------- */

/* .about{
    height: 500px;
    h3{
        text-align: center;
        margin: 12rem 5rem 0rem 5rem;
        padding: 1.5rem 0rem 1.5rem 0rem;
        width: 40%;
        font-size: 40px;
    }
}
.abo{
    p{
        padding-left: 5rem;
    }
}
.para{
    margin-top: 3rem;
    margin-bottom: 5rem;
    margin-left: 10rem;
    margin-right: 9rem;
    .i{
        img{

            float: right;
            width: 400px;
            margin: 4rem 1rem 0rem 0rem;
        }
    }
}
.d{
    h3{
        text-align: center;
        padding: 1.5rem 0rem 1.5rem 0rem;
        width: 50%;
    }
}
.d2{
    p{
        padding: 0.5rem 0rem .5rem 6rem;
    }
} */
 
/* ------------------------------footer------------------------------------ */
footer{
    background-color: black;
    color: white;
    padding: 50px 50px;
    font-family:  sans-serif;
}
footer>#foo{
    display: flex;
    justify-content: space-between;
}
footer>#foo > .foo1{
    p{
        a{
            text-decoration: none;
            color: white;
            display: block;

            span{
                padding-left: 10px;
                .spa{

                    padding-left: 30px;
                
                }
                
            }
        }
        a:hover{
            color: orange;
        }
    }
}
#foo > .foo1> p{
    padding-top: 15px;
    line-height: 25px; 
}

.pho{
    position: fixed;
    bottom: 60px;
    left: 40px;
    z-index: 999999;
    .but{
        background-color: #f26522;
        text-align: center;
        font-size: 15px;
        font-weight: 600;
        padding: 6px 20px;
        border: none;
        border-radius: 40px;
        box-shadow: none;
        color: #fff;
        box-shadow: 0 0 13px rgba(0, 0, 0, 0.65);
        a{
            color: white;
            text-decoration: none;
        }
    }


}

.butt{
    position: fixed;
    bottom: 60px;
    right: 40px;
    z-index: 9999;
    a{
        color: inherit;
        line-height: inherit;
        text-decoration: none;
        cursor: pointer;
        .whats{
                background: #fff;
                padding: 2px 7px;
                box-shadow: 0 0 13px rgba(0, 0, 0, 0.65);
                font-weight: 500;
                border-radius: 30px;
                img{
                    vertical-align: middle;
                }
        }
    }

}

/* ------------------------------about us--------------------------- */

.about{
    background-image: url(images/hand1.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    justify-items: center;
    h3{
        font-family: sans-serif;
        position: absolute;
        color: white;
        background-color: #353a42;
        opacity: 70%;
        border-radius: 5px;
    }
}
.abo{
    p{
        background-color:#6c6172;
        padding-top: 0.5rem;
        padding-bottom: 0.5rem;
        color: white;
        a{
            text-decoration: none;
            color: white;
        } 
            span{
                padding-left: 20px;
            }
        }
} 
.para{
    font-family:  sans-serif;
    p{
        padding-top: 20px;
        line-height: 30px;
    }
    .i{
        img{

            border: 1px solid #ccc;
            padding: 0.5rem 0.5rem 0.5rem 0.5rem;
            box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.3);
        }
    }
}

/* ---------------------------------gallery---------------------------- */

.gall{
    background-image: url(images/hand1.jpg);
    background-repeat: no-repeat;
    height: 500px;
    background-size: cover;
    justify-items: center;

    h3{
        font-family: sans-serif;
        position: absolute;
        margin-top: 12rem;
        text-align: center;
        font-size: 40px;
        color: white;
        background-color: #353a42;
        opacity: 70%;
        border-radius: 5px;
    }
}
.ga{
    p{
        background-color:#6c6172;
        color: white;
        a{
            text-decoration: none;
            color: white;
        } 
            span{
                padding-left: 20px;
            }
        }
} 

.main{
        text-align: center;
    .gall1{
        img{
            margin: 3px 0px 10px 20px;
            border: 1px solid #ccc;
            border-radius: 20rem;
            padding: 0.5rem 0.5rem 0.5rem 0.5rem;
            box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.3);
        }
    }
}