*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
body{
    background-color: #f6eee4;
    overflow-x: hidden;
}
a{
    text-decoration: none
}

//____playfire display css font link

@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400..900;1,400..900&display=swap');//playfair display
@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');//roboto
// .sec{
// //    transform: scale(0);
//    display: none;
// } 

body{
//___________STEP-5 ANIMATION START HERE______________//
    .banner-img{
        width: 100%;
        height: 100%;
        position: absolute;
        //left: 0;
        top: 0;
        right: -100%;
       // opacity: 0;
        animation: banner-img 1.5s linear forwards;
        animation-delay: 6.5s;
        .all-images{
        display: flex;
        align-items: center;
        justify-content: space-between;
            .img{
                width: 100%;
                height: 100vh; 
                position: relative;
                overflow: hidden;
                img{
                    width: 100%;
                    height: 100%;
                    transform: scale(1);
                    animation: zoomInOut 85s linear infinite;

                    @keyframes zoomInOut {
                        0%{
                          transform: scale(1);
                        }
                        50%{
                          transform: scale(1.4);
                        }
                        100%{
                           transform: scale(1);
                        }
                    }
                }
                .banner-text{
                    position: absolute;
                    left: 50%;
                    top: 50%;
                    transform: translate(-50%,-50%);
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    gap: 4em;
                     .left_part{
                        width: 3%;
                        // position: absolute;
                        // left: -65%;
                        // opacity: 0;
                        // animation:logo_left_part 1.5s ease;
                        // animation-fill-mode: forwards;
                        img{
                            width: 100%;
                        }
                        // @keyframes logo_left_part {
                        //     0%{
                        //         left: -75%; 
                        //         opacity: 0; 
                        //     }
                        //     100%{
                        //         left: -12%;
                        //         opacity: 1;
                        //     }
                        // }
                        
                    }
                    .text{
                      font-family: "Playfair Display", serif;
                      font-size: 100px;
                      color: #ffffff;
                    }
                     .right_part{  //.owl-carousel .owl-item.active
                        width: 3%;
                        img{
                            width: 100%;
                        }
                        
                    }
                }
                .left-arrow-text{
                   position: absolute;
                   left: -3%;
                   top: 46%;
                   font-size: 40px;
                   color: #ffffff;
                   font-family: "Playfair Display", serif;
                }
                .right-arrow-text{
                    position: absolute;
                    right: -3%;
                    top: 46%;
                    font-size: 40px;
                    color: #ffffff;
                    font-family: "Playfair Display", serif;
                }
            }
        }

       
        .owl-next {
            position: absolute;
            right: 2%;
            top: 47%;
            z-index: 2;
            animation: right_arrow 2s linear infinite;
            @keyframes right_arrow {
                0%{
                 right: 2%;
                }
                50%{
                  right: 1%;
                }
                100%{
                  right: 2%;  
                }
            }
        }
        .owl-next span {
            color: white;
            font-size: 80px;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: 0.6s;
            animation: right_arrow 2s linear;
        }

        .owl-prev {
            font-size: 30px;
            position: absolute;
            left: 2%;
            top: 47%;
            z-index: 2;
            animation: left_arrow 2s linear infinite;
            @keyframes left_arrow {
                0%{
                 left: 2%;
                }
                50%{
                    left: 1%;
                }
                100%{
                    left: 2%;  
                }
            }
        }
        .owl-prev span {
            color: white;
            font-size: 80px;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: 0.6s;
        }
       
    }
    @keyframes banner-img {
        0%{
            right: -100%;
        }
        100%{
           right: 0%;
        }
    }

 
    // .all-images {
    //     display: flex;
    //     align-items: center;
    //     justify-content: space-between;
    //   }
    //    .all-images .img {
    //     width: 100%;
    //   }
    //   .all-images .img img {
    //     width: 100%;
    //   }
    //  .owl-next {
    //     position: absolute;
    //     right: -2%;
    //     top: 40%;
    //     z-index: 2;
    //   }
    //     .owl-next i {
    //     color: white;
    //     font-size: 21px;
    //     height: 80px;
    //     width: 80px;
    //     background-color: #b87b2c;
    //     border-radius: 50%;
    //     display: flex;
    //     align-items: center;
    //     justify-content: center;
    //     transition: 0.6s;
    //   }
    //    .owl-next i:hover {
    //     background-color: #1b153e;
    //   }
    //     .owl-prev {
    //     font-size: 21px;
    //     position: absolute;
    //     left: -2%;
    //     top: 40%;
    //     z-index: 2;
    //   }
    //    .owl-prev i {
    //     color: white;
    //     font-size: 21px;
    //     height: 80px;
    //     width: 80px;
    //     background-color: #b87b2c;
    //     border-radius: 50%;
    //     display: flex;
    //     align-items: center;
    //     justify-content: center;
    //     transition: 0.6s;
    //   }
    //   .owl-prev i:hover {
    //     background-color: #1b153e;
    //   }
//___________STEP-5 ANIMATION END HERE______________//    
}
.main{
    position: relative;
    height: 100vh;
    background-color: #f6eee4;
    overflow: hidden;
}

/*_______________COMMON CSS FOR MENUS FOR ALL PAGES_______________*/

.menu-items-container{
    position: fixed;
    z-index: 6;
    overflow: hidden;
    ul{
        position: fixed;
        top: 0;
        // right: 100%;
        left: 100%;
        height: 100%;
        width: 100%;
        margin: 0;
        padding: 0;
       // background-color: #f6eee4;
        overflow: hidden;
        transition: .8s ease;
        display: flex;
        flex-direction: column;
        align-items: start;
        justify-content: center;
        gap: 1.7em;
        padding-left: 4%;
        background: bisque;
        li{
            list-style-type: none;
            width: 100%;
            transition: 0.5s;
            &:hover{
                a{
                    color: #b87b2d;
                    margin-left: 3%;
                }
            }
           // margin-left: 43%;
           // transition: 0.6s;
            //transition-delay: 1s;
            a{
                color: #040037;
                font-size: 38px;
                text-decoration: none;
                font-family: "Playfair Display", serif;
                margin-left: 0;
                transition: .5s;
            }
            .menu-1-style{
                animation: fade_left_1 .7s ease;
                animation-fill-mode: forwards;
                //animation-delay: .5s;
                @keyframes fade_left_1{
                    0%{
                        margin-left: 90%;
                    }
                    100%{
                        margin-left: 0%;
                    }
                }
            }
            .menu-2-style{
                animation: fade_left_2 .8s ease;
                animation-fill-mode: forwards;
                @keyframes fade_left_2{
                    0%{
                        margin-left: 90%;
                    }
                    100%{
                        margin-left: 0%;
                    }
                }
            }
            .menu-3-style{
                animation: fade_left_3 .9s ease;
                animation-fill-mode: forwards;
                @keyframes fade_left_3{
                    0%{
                        margin-left: 90%;
                    }
                    100%{
                        margin-left: 0%;
                    }
                }
            }
            .menu-4-style{
                animation: fade_left_4 1s ease;
                animation-fill-mode: forwards;
                @keyframes fade_left_4{
                    0%{
                        margin-left: 90%;
                    }
                    100%{
                        margin-left: 0%;
                    }
                }
            }
            .menu-5-style{
                opacity: 0;
                animation: fade_left_5 1.1s ease;
                animation-fill-mode: forwards;
                @keyframes fade_left_5{
                    0%{
                        margin-left: 90%;
                        opacity: 0;
                    }
                    100%{
                        margin-left: 0%;
                        opacity: 1;
                    }
                }
            }
            .menu-6-style{
                animation: fade_left_6 1.2s ease;
                opacity: 0;
                animation-fill-mode: forwards;
              //  animation-delay: .5s;
                @keyframes fade_left_6{
                    0%{
                        margin-left: 90%;
                        opacity: 0;
                    }
                    100%{
                        margin-left: 0%;
                        opacity: 1;
                    }
                }
            }

        }
    }
}

/*________________END OF COMMON MENU________________*/

//___________STEP-4 ANIMATION START HERE______________//
.nav_wrap{
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.5% 3%;
    position: fixed;
    top: 0;
    z-index: 7;
    opacity: 0;//0
    transition: 0.5s;
    animation: wrap_anim 1s linear forwards;
    animation-delay: 5.5s;
    @keyframes wrap_anim{
        0%{
          opacity: 0;
        }
        100%{
          opacity: 1;
        }
    }
}
//___________STEP-4 ANIMATION END HERE______________//  

    
    .nav_wrap{
        width: 100%;
        z-index: 7;
       // box-shadow: 3px 4px 12px rgba(0,0,0,0.5);
        .logo{
            width: 7%;
            img{
                width: 100%;
            }
        }

        .menuWithIcons{
            width: 28%;
            display: flex;
            align-items: center;
            justify-content: space-between;
            ul{
                width: 80%;
                padding: 0;
                margin: 0;
                display: flex;
                align-items: center;
                justify-content: space-between;
                margin-top: 2%;
                li{
                    list-style: none;
                    position: relative;
                    display: flex;
                    flex-direction: column;
                    align-items: center;
                    .box{
                        height: 10px;
                        width: 10px;
                        background-color: #c38e4b;
                        margin-bottom: 3px;
                    }
                    a{
                        text-decoration: none;
                        font-size: 15px;
                        color: #c38e4b;
                        font-family: "Roboto", sans-serif;
                        transition: 0.5s;
                        &:hover{
                            color: #000;
                        }
                    }
                    .underline{
                        position: absolute;
                        left: 40%;
                        right: 40%;
                        width: 20%;
                        background-color: #b87b2d;
                        height: 2px;
                    }
                }
            }
            .menu_icon{
                display: flex;
                flex-direction: column;
                align-items: end;
                gap: .5em;
                cursor: pointer;
                .one{
                  display: block;
                  height: 2px;
                  width: 40px;
                  background-color: #b87b2d;
                  transition: 0.5s;
                }
                .two{
                    display: block;
                    height: 2px;
                    width: 40px;
                    background-color: #b87b2d;
                    transition: 0.5s;
                }
                .three{
                    display: block;
                    height: 2px;
                    width: 40px;
                    background-color: #b87b2d;
                    transition: 0.5s;
                }
            }
        }
        
      
    }
    



//____________STEP-3 ANIMATION START HERE________________//
.mid-logo-container{
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1em;
    width: 48%;
    overflow: hidden;
    animation: fade_top 1.5s linear forwards;
    animation-delay: 4.5s;
    @keyframes fade_top {
        0%{
            position: absolute;
            top: 50%;
        }
        100%{
            position: absolute;
            top: 0%; //top:7%
            visibility: hidden;
            left: 80%;
            opacity: 0;
        }
    }
//____________STEP-3 ANIMATION END HERE________________//

//____________STEP-1 ANIMATION START HERE________________//
    .first_part{
        width: 5%;
        position: absolute;
        left: 0;
        visibility: hidden;
        animation: left_1 1.3s linear forwards;
        animation-delay: 1.4s;//.5s
        img{
            width: 100%;
        }
        @keyframes left_1 {
            0%{
                visibility: visible;
                position: absolute;
                left: 0%;
            }
            100%{
                visibility: visible;
                position: absolute;
                left: 38%;
            }
        }
    }
    .second_part{
        width: 5%;
        position: absolute;
        left: -5%;
       // visibility: hidden;
        animation: left_2 1.6s linear forwards;
        animation-delay: .5s;//.5s
        img{
            width: 100%;
        }
        @keyframes left_2 {
            0%{
                // visibility:visible;
                position: absolute;
                left: 0%;
            }
            100%{
                // visibility: visible;
                position: absolute;
                left: 42.5%;
            } 
        }
    }
    .third_part{
        width: 1.7%;
        opacity: 0;
        animation: mid 1.5s linear forwards;
        animation-delay: .5s;//.5s
        img{
            width: 100%;
        }
        @keyframes mid {
            0%{
                opacity: 0;
            }
            100%{
                opacity: 1;
            }
        }
    }
    .fourth_part{
        width: 5%;
        position: absolute;
        right: -5%;
        animation: right_1 1.6s linear forwards;
        animation-delay: .5s;//.5s
        img{
            width: 100%;
        }
        @keyframes right_1 {
            0%{
                position: absolute;
                right: 0%;
            }
            100%{
                position: absolute;
                right: 42.5%;
            }
        }
    }
    .fifth_part{
        width: 5%;
        position: absolute;
        right: 0;
        visibility: hidden;
        animation: right_2 1.3s linear forwards;
        animation-delay: 1.4s;//.5s
        img{
            width: 100%;
        }
        @keyframes right_2 {
            0%{
                visibility: visible;
                position: absolute;
                right: 0%;
            }
            100%{
                visibility: visible;
                position: absolute;
                right: 38%;
            }
        }
    }
//______________STEP-1 ANIMATION END HERE_________________//

}

//____________STEP-2 ANIMATION START HERE________________//
.top-window{
    position: absolute;
    top: 0;
    height:0%;
    width:100%;
    background-color: #f6eee4;
    z-index:2;
    animation: top_window 1.3s linear forwards;
    animation-delay: 2.8s;
}
@keyframes top_window{
    0%{
     height: 0%;
    }
    100%{
        //height: 49.8%;
        height: 49%;
    }
}
.bottom-window{
    position: absolute;
    bottom: 0;
    height:0%;
    width:100%;
    background-color: #f6eee4;
    z-index:2;
    animation: bottom_window 1.3s linear forwards;
    animation-delay: 2.8s;
}
@keyframes bottom_window {
    0%{
        height: 0%;
    }
    100%{
        //height: 49.8%;
        height: 49%;
    }
}

//____________STEP-2 ANIMATION END HERE________________//

/*__________Follwing CSS is directly linked with JAVASCRIPT____________*/

.top_line{
    transform: rotate(45deg);
    background-color:#040037;
}
.middle_line{
   display: none;
}
.bottom_line{
    transform: rotate(-45deg) translate(7px, -7px);
    background-color:#040037;
}


/*------------------End for owl carousel css------------*/  

/*_______________________________START OF ABOUT US PAGE_______________*/

.second-sec{
    margin: 10%;
    display: flex;
    flex-direction: column;
    .head{
        h3{
         font-family: "Playfair Display", serif;
         text-decoration: underline;
         color: #040037;
         font-size: 48px;
         margin-bottom: 4%;
        }
    }
    .main-title{
        position: relative;
        span{
          font-size: 90px;
          font-family: "Playfair Display", serif;
          font-style: italic;
          color: #dbbd96;
        }
        h1{
          font-size: 160px;
          font-family: "Playfair Display", serif;
          margin: 0;
          margin-top: -2%;
          width: 60%;
          line-height: 1;
          font-weight: lighter;
          color: #dbbd96;
        }
        .para-text{
            position: absolute;
            left: 36%;
            top: 68%;
            font-size: 21px;
            color: #040037;
            width: 24%;
        }
        .bottom-logo{
            width: 25%;
            margin: 2% 0 0 2%;
            img{
              width: 100%;
            }
        }
    }
}

.third-sec{
    padding: 5% 7%;
    background:linear-gradient(#f6eee4 50%, #dbbd96 50%);

    .mid-image{
        display: flex;
        align-items: center;
        justify-content: space-between;
       .img{
        width: 100%;
        border: solid 7px #f6eee4;
          img{
            width: 100%;
            height: 70vh;
            margin-bottom: 1%;
          }
          p{
            margin: 0;
            text-align: center;
            font-size: 33px;
            color: #091a57;
            font-weight: 500;
          }
          .date{
            font-size: 23px;
          }
        }
    }
}

.fifth-sec{
    background: #dbbd96;
    .left-container{
        padding: 9%;
       h3{
          font-size: 60px;
          font-family: "Playfair Display", serif;
          font-style: italic;
          color: #dbbd96;
          margin: 0;
          font-weight: 100;
          color: #f6eee4;
          margin-bottom: 1%;
       }
       h1{
        font-size: 130px;
        font-family: "Playfair Display", serif;
        margin: 0;
        margin-top: -2%;
       // width: 60%;
        line-height: 1;
        font-weight: lighter;
        color: #f6eee4;
       }
       .main_parent{
         display: flex;
         align-items: start;
         gap: 3em;
        .left_part{
            display: flex;
            flex-direction: column;
            gap:2em;
            width: 47%;
            h1{
                font-size: 130px;
                font-family: "Playfair Display", serif;
                margin: 0;
            }
            .bottom_img{
                width:92%;
                img{
                    width: 100%;
                }
            }
        }

        .right_part{
           width: 37%;
           color: #14245d;
           font-size: 25px;
           margin-top: 3%;
           p{
             margin-bottom: 4%;
            img{
                width: 6%;
            }
           }
        }
     } 
      
    }
}

footer{
    display: flex;
    align-items: end;
    justify-content: space-between;
    font-family: "Roboto", sans-serif;
    padding: 2% 3%;
    .left-footer{
        color: #091a57;
        display: flex;
        flex-direction: column;
        gap: 2em;
        .menus{
            ul{
                margin: 0;
                padding: 0;
                display: flex;
                justify-content: space-between;
                li{
                    list-style: none;
                    a{
                        font-size: 16px;
                        text-decoration: none;
                        color: #091a57;
                        transition: 0.6s;
                        &:hover{
                            color: #b87b2d;
                            text-decoration: underline;
                        }
                    }
                }
            }
        }
        .copyright{
            font-size: 16px;
            
        }
    }
    .middle-footer{
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 9%;
        gap: 1em;
        .logo{
            width: 100%;
            img{
                width: 100%;
            }
        }
        .social_icons{
            ul{
                margin: 0;
                padding: 0;
                display: flex;
                justify-content: space-around;
                gap: .6em;
                li{
                    list-style: none;
                    a{
                        text-decoration: none;
                      i{
                        font-size: 16px;
                        height: 40px;
                        width: 40px;
                        background-color: #091a57;
                        border-radius: 50%;
                        display: flex;
                        align-items: center;
                        justify-content: center;
                        color: #ffffff;
                        transition: 0.5s;
                        &:hover{
                            background-color: #b87b2d;
                            transform: rotate(360deg);
                        }
                      }
                    }
                }
            }
        }
    }
    .right-footer{
        font-size: 16px;
        color: #091a57;
        display: flex;
        flex-direction: column;
        gap: 1em;
        .phone_number{

        }
        .address{

        }
        .email{

        }

    }

}


/*_______________________________END OF ABOUT US PAGE_________________*/

/*____________START OF PROJECT PAGE___________*/

.second{
    margin: 9%;
    .caption{
        color: #14245d;
        font-family: "Playfair Display", serif;
        font-size: 45px;
        display: inline;
        position: relative;
        .underline{
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 1px;
        background-color: #091a57;
        }
    }
    span{
        font-size: 60px;
        font-family: "Playfair Display", serif;
        color: #dbbd96;
        font-weight: lighter;
        font-style: italic;
        display: block;
        margin-top: 4%;
    }
    h1{
        font-size: 130px;
        font-family: "Playfair Display", serif;
        color: #dbbd96;
        font-weight: lighter;
        margin: 0;
        margin-top: -2.5%;
    }
    .parent{
        display: flex;
        align-items: start;
        gap: 4em;
        .left_part{
            max-width: 40%;
            display: flex;
            flex-direction: column;
            align-items: start;
            gap: 3em;
           h1{
            font-size: 130px;
            font-family: "Playfair Display", serif;
            color: #dbbd96;
            font-weight: lighter;
            margin: 0;
            margin-top: -8%;
           }
           .logo_part{
            width: 100%;
              img{
                width: 100%;
              }
           }
        }
        .right_part{
           font-size: 25px;
           color: #091a57;
           width: 35%;
           margin-top: 1%;
        }

    }
}
.project-container{
    ul{
        margin: 0;
        padding: 0;
        display: flex;
        align-items:center;
        justify-content: center;
        gap: 3em;
        li{
            list-style-type: none;
            font-size: 24px;
            color: #091a57;
            font-family: "Roboto", sans-serif;
            cursor: pointer;
        }
    }
    .img-container{
        padding: 2.5%;
        .all-images{
            display: grid;
            grid-template-columns: 50% 50%;
            align-items: start;
            justify-self: center;
            gap: 2em;
            .img{
                width: 100%;
                border: solid 1px #e8caa5;
                img{
                    width: 100%;
                }
                span{
                    font-size: 26px;
                    font-family: "Roboto", sans-serif;
                    color: #091a57;
                    text-decoration: none;
                    padding: 9px 15px;
                    display: block;
                }
            }
        }
    }
}

/*__________END OF PROJECT PAGE______________*/

/*__________START OF CONTACT PAGE____________*/

.right_part{
    form{
        display: flex;
        flex-direction: column;
        gap: 3em;
        input,textarea{
            font-family: "Roboto", sans-serif;
            display: block;
            background: transparent;
            font-size: 25px;
            color: #091a57;
            padding: 3% 0;
            border: none;
            border-bottom: 1px solid #091a57;
            &::placeholder{
                color: #091a57;
            }
            &:focus{
                outline: 0;
            }
        }
        .submit_btn{
            button{
                font-family: "Roboto", sans-serif;
                padding: 4% 0;
                font-size: 27px;
                color: #091a57;
                width: fit-content;
                padding: 2% 8%;
                float:right;
                transition: 0.5s;
                &:hover{
                    background-color: #b87b2d;
                    border: none;
                    color: #ffffff;
                }
            }
        }
      
    }
}

/*___________END OF CONTACT PAGE___________*/

/*____________START OF PROJECT INNER PAGE__________*/

  #right-part{
    width: 60%;
    p{
        width: 51%;
        margin-bottom: 10%;

    }
    .icon_container{
        display: grid;
        grid-template-columns: 50% 50%;
        align-items: center;
        justify-content: space-between;
        gap: 1em;
        .part{
            display: flex;
            align-items: center;
            gap: 1em;
            .icon{
                padding: 4%;
                border: 1px solid #b87b2d;
                width: 30%;
                img{
                    width: 100%;

                }
            }
            .caption{
              font-size: 24px;
              font-weight: normal;
              line-height: 1.3;
              font-family: var(--bs-font-sans-serif);
            }
        }
    }
  }

  .project-container {
    .menu-item {
        margin: 0;
        padding: 0;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 0;
        width: 65%;
        margin: 0 auto;
        border-top: 1px solid #091a57;
        border-bottom: 1px solid #091a57;
        padding: 1% 0;
    }
  }
  .img-container{
    display: grid;
    grid-template-columns: auto auto;
   // gap: 2em;
  }

  .desc-section{
   // background: #c89b67;
    padding: 5%;
    ul{
        margin: 0;
        padding: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 1em;
        margin-bottom: 5%;
        li{
            list-style-type: none;
            font-size: 48px;
            font-family: "Playfair Display", serif;
            color: #091a57;
            padding: 3px 2%;
            text-align: center;
        }
    }
    .desc-container{
        display: flex;
        flex-direction: column;
        align-items: start;
        justify-content: space-between;
        overflow: hidden;
        border: 1px solid #b87b2d;
        .left,.right{
            width: 100%;
            font-size: 24px;
            font-family: "Lora", serif;
            display: flex;
            flex-direction: column;
           // gap: 2em;
            .filter-option-heading{
                position: relative;
                color: #14245d;
                padding: 1% 0;
                border-bottom: 1px solid rgba(0, 0, 0, 0.2);
                font-family: "Playfair Display", serif;
                font-size: 28px;
                padding-left: 1%;
                margin: 0;
                cursor: pointer;
                span{
                    padding-right: 2%;
                    position: absolute;
                    right: 0;
                    font-size: 39px;
                }
            }

            .filter-option-content{
                display: none;
                color: #181614;
                padding-left: 1%;
                font-size: 17px;
                font-family: "Roboto", sans-serif;
                border-bottom: 1px solid rgba(0,0,0,0.2);
                padding: 1%;
            }
        }
    }
}

.last-section{
    .blue-option-container{
        background: #dbbd96;
        padding: 3% 4%;
        position: relative;
        overflow: hidden;
        .bg-pattern{
            position: absolute;
            top: 0;
            left: 0;
            z-index: 0;
            width: 100%;
            height: 100%;
            opacity: 0.12;
    
            img{
                width: 100%;
                height: 100%;
                opacity: 0.18;
            }
        }
        .heading{
            padding-left: 6%;
            .head{
                width: 100%;
                #caption{
                    font-size: 60px;
                    font-family: "Playfair Display", serif;
                    color:#ffffff;
                    letter-spacing: 1px;
                    text-transform: capitalize;
                    font-style: italic;
                } 
            }
            h1{
                font-size: 130px;
                font-family: "Playfair Display", serif;
                margin-bottom: 10%;
                text-align: left;
                color: #ffffff;
                font-weight: lighter;
            }
        }
        .inputBoxes{
            display: flex;
            justify-content: space-between;
            input,select{
                font-size: 21px;
                font-family: "Lora", serif;
                color: #091a57;
                width: 23%;
                background: transparent;
                border: none;
                border-bottom: 1px solid white;
                &::placeholder{
                    color: #091a57;
                }
                &:focus{
                    outline: 0;
                }
                option{
                    background: transparent;
                    color: #151032;
                }
            }
        }
        .submit-btn{
            display: flex;
            align-items: center;
            justify-content: center;
            margin-top: 5%;
            button{
                font-size: 25px;
                font-family: "Lora", serif;
                padding: .5% 2%;
                border: 1px solid #091a57;
                background: transparent;
                transition: 0.5s;
                color: #091a57;
                text-transform: capitalize;
                font-family: "Roboto", sans-serif;
                &:hover{
                 background-color:#091a57;
                 color: #ffffff;
                 //border: 1px solid #a16b2e;
                }
            }
        }
       
    }
}

select{
    background: #c38e4b;
}


/*______END OF PROJECT INNER PAGE_____________*/

/*_________START OF WORK WITH US PAGE__________*/

.blue-form{
    width: 100%;
    background-color: #dbbd96;
    padding: 7% 4%;
    .bg-pattern{
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        opacity: 0.1;
        z-index: -1;
        img{
            width: 100%;
            height: 100%;
            opacity: 0.18;
        }
    }
    //added for work with us page//


    form{
        font-family: "Roboto", sans-serif;
        .field{
            display: flex;
            justify-content: space-between;
            margin-bottom: 5%;
          input{
            width: 49%;
            font-size: 20px;
            font-family: "Roboto", sans-serif;
            background: transparent;
            border: none;
            height: 55px;
            color: #091a57;
            border-bottom: 1px solid #091a57;
            padding-bottom: 1%;
            letter-spacing: 1px;
            &:focus{
                outline: 0;
            }
            &::placeholder{
                color: #091a57;
            }
          }
        }
        .msg-box{
            width: 100%;
            margin-bottom: 2%;
            textarea{
                width: 100%;
                background: transparent;
                border: none;
                color: #091a57;
                border-bottom: 1px solid #091a57;
                padding-bottom: 1%;
                font-size: 20px;
                letter-spacing: 1px;
                &:focus{
                    outline: 0;
                }
                &::placeholder{
                    color: #091a57;
                }
            }
        }
        .last-line{
            display: flex;
            align-items: center;
            justify-content: space-between;
            .uploadFile{
              font-size: 25px;
              color:#091a57;
            }

            button{
                background-color: transparent;
                border: 1px solid #091a57;
                font-size: 21px;
                color: #091a57;
                font-family: "Roboto", sans-serif;
                padding: 10px 2% 10px 2%;
                letter-spacing: 1px;
                float: right;
                transition: 0.5s;
                position: relative;
                span{
                    z-index: 2;
                    position: relative;
                }
                .left-side{
                  position: absolute;
                  left: 50%;
                  top: 0;
                  width: 0%;
                  height: 100%;
                  background-color: #c38e4b;
                  transition: 0.5s;
                }
                .right-side{
                    position: absolute;
                    right: 50%;
                    top: 0;
                    width: 0%;
                    height: 100%;
                    background-color: #c38e4b;
                    transition: 0.5s;
                }
                &:hover{
                    border: 1px solid #ffffff;
                    .left-side,.right-side{
                        width: 50%;
                    }
                    
                }
            }
        }
        
    }
}
/*______________END OF WORK WITH US PAGE___________*/


  
/*_________This css is for onscroll animation START__________*/

.logo-container {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1em;
    padding: 4% 0;
  }
  .logo-container .first-part, .logo-container .second-part, .logo-container .fourth-part, .logo-container .fifth-part {
    width: 3%;
  }
  .logo-container .first-part img, .logo-container .second-part img, .logo-container .fourth-part img, .logo-container .fifth-part img {
    width: 100%;
  }
  .logo-container .third-part {
    width: 1%;
  }
  .logo-container .third-part img {
    width: 100%;
  }
  .logo-container .firstpart, .logo-container .secondpart, .logo-container .fourthpart, .logo-container .fifthpart {
    width: 3%;
  }
  .logo-container .firstpart img, .logo-container .secondpart img, .logo-container .fourthpart img, .logo-container .fifthpart img {
    width: 100%;
  }
  .logo-container .thirdpart {
    width: 1%;
  }
  .logo-container .thirdpart img {
    width: 100%;
  }

/*________This css is for onscroll animation END__________*/

// @media(max-width:1600px){
//     .second .both-side-container .left .left-content h1 {
//         font-size: 40px;
//     }
//     .second .both-side-container .left .left-content .para_1 {
//         font-size: 20px;
//     }
//     .second .both-side-container .left .left-content .para_2 {
//         font-size: 20px;
//         margin-top: 2%;
//     }
//     .second .both-side-container .left .left-content {
//         gap: 2em;
//     }

//     .third .slide-container .content h1 {
//         font-size: 45px;
//     }
//     .third .slide-container .content {
//         gap: 2em;
//     }
//     .third .slide-container .content p {
//         font-size: 17px;
//         margin-top: 0%;
//     }
//     .third .slide-container .content a {
//         font-size: 20px;
//     }
//     .main .menu-items-container ul {
//         gap: 1em;
//     }
//     .main .menu-items-container ul li a {
//         font-size: 25px;
//     }

// }

// @media(max-width:750px){
//     .nav_wrap .nav-wrap {
//         display: none;
//     }
//     .main .menu-items-container ul {
//         gap: 1em;
//     }
//     .main .menu-items-container ul li a {
//         color: #ffffff;
//         font-size: 18px;
//     }
//     .mob-nav-wrap{
//         ul{
//             li{
//                 list-style-type: none;
//                 a{
//                     color: #ffffff;
//                 }
//             }
//         }
//     }
//     .second .both-side-container {
//         flex-direction: column;
//     }
//     .second .both-side-container .left {
//         width: 100%;
//     }
//     .second .both-side-container .left .left-content h1 {
//         font-size: 35px;
//     }
//     .second .both-side-container .left .left-content .para_1 {
//         font-size: 15px;
//     }
//     .second .both-side-container .right {
//         width: 100%;
//     }
//     .third .slide-container .content {
//         width: 100%;
//         position: static;
//     }
//     .third .slide-container {
//         display: flex;
//         flex-direction: column;
//     }
//     .third .slide-container .img_container {
//         width: 100%;
//     }
//     .third {
//         overflow: hidden;
//     }
//     .nav_wrap .logo {
//         width: 20%;
//     }
//     .third .slide-container .content h1 {
//         font-size: 35px;
//     }
//     .third .slide-container .content {
//         gap: 0;
//         padding: 5% 0;
//     }
//     .second .both-side-container .left .left-content .para_2 {
//         font-size: 16px;
//     }
//     .second .both-side-container .left .left-content {
//         padding: 5% 3%;
//     }
//     .third .slide-container .content p {
//         font-size: 16px;
//     }
//     .third .slide-container .content a {
//         font-size: 17px;
//     }
//     .third .slide-container .content p {
//         margin-bottom: 4%;
//     }
//     .second .both-side-container .left .left-content .para_1 {
//         text-align: justify;
//     }
//     .second .both-side-container .left .left-content .para_2 {
//         text-align: justify;
//     }

// }
// @media(min-width:751px){
//     .nav_wrap .nav-wrap {
//         display: block;
//     }
// }

@media(max-width:1600px){

    .nav_wrap .menuWithIcons{
        width: 38%;
    }

    /*______START OF INDEX PAGE______*/
    body .banner-img .all-images .img .banner-text .text {
        font-size: 90px;
    }
    body .banner-img .all-images .img .left-arrow-text {
        position: absolute;
        left: -2%;
        top: 42%;
        font-size: 35px;
    }
    body .banner-img .all-images .img .right-arrow-text {
        position: absolute;
        right: -2%;
        top: 42%;
        font-size: 35px;
    }
    body .banner-img .owl-next span {
        color: white;
        font-size: 45px;
    }
    body .banner-img .owl-prev span {
        color: white;
        font-size: 45px;
    }


    /*______END OF INDEX PAGE_______*/

    /*___________START OF ABOUT US PAGE_________*/
    .nav_wrap .menuWithIcons .menu_icon .one,.nav_wrap .menuWithIcons .menu_icon .two,
    .nav_wrap .menuWithIcons .menu_icon .three {
        display: block;
        height: 1px;
        width: 35px;
    }
    .nav_wrap .menuWithIcons .menu_icon {
        gap: 0.5em;
    }
    .bottom_line {
        transform: rotate(-45deg) translate(7px, -5px);
    }
    .menu-items-container ul {
        gap: 0.7em;
    }
    .menu-items-container ul li a {
        font-size: 28px;
    }
    .nav_wrap .menuWithIcons ul li a {
        font-size: 16px;
    }
    .second {
        margin: 22% 9%;
    }
    .second-sec .head h3 {
        font-size: 30px;
        margin-bottom: 1%;
    }
    .second-sec .main-title span {
        font-size: 45px;
    }
    .second-sec .main-title h1 {
        font-size: 99px;
    }
    .second-sec .main-title .para-text {
        position: absolute;
        left: 30%;
        top: 56%;
        font-size: 16px;
    }
    .fifth-sec .left-container h3 {
        font-size: 45px;
    }
    .fifth-sec .left-container h1 {
        font-size: 100px;
    }
    .fifth-sec .left-container .main_parent .left_part h1 {
        font-size: 100px;
    }
    // .fifth-sec .left-container .main_parent {
    //     gap: 0em;
    // }
    .fifth-sec .left-container .main_parent .right_part {
        font-size: 17px;
    }
    .fifth-sec .left-container .main_parent .left_part .bottom_img {
        width: 100%;
    }
    .second {
        margin: 13% 9% 9% 9%;
    }
    /*__________END OF ABOUT US PAGE_______*/

    /*_________Start of Project Page___________*/
    .second .caption {
        font-size: 25px;
    }
    .second span {
        font-size: 40px;
    }
    .second h1 {
        font-size: 90px;
        margin-top: -2.5%;
    }
    .second .parent .left_part h1 {
        font-size: 90px;
        margin-top: -4%;
    }
    .second .parent .right_part {
        font-size: 17px;
        margin-left: -3%;
    }
    
    .second .parent .left_part {
        gap: 1em;
    }
    // .second .parent .left_part .logo_part {
    //     width: 100% !important;
    // }
    .project-container ul li {
        list-style-type: none;
        font-size: 22px;
    }
    .project-container .img-container .all-images .img span {
        font-size: 20px;
    }



    /*_______End of Project page_________*/

    /*_________START OF CONTACT PAGE_________*/

    .right_part form input, .right_part form textarea {
        font-size: 17px;
        padding: 2% 0;
    }
    .right_part form .submit_btn button {
        padding: 2% 4%;
        font-size: 17px;
    }
    .right_part form input, .right_part form textarea {
        padding: 2% 0;
    }

    /*___________END OF CONTACT PAGE___________*/

    /*____________START OF PROJECT INNER PAGE__________*/

    #right-part .icon_container .part .caption {
        font-size: 18px;
    }
    #right-part .icon_container {
        display: grid;
        grid-template-columns: 50% 50%;
    }
    .desc-section .desc-container .left .filter-option-heading, .desc-section .desc-container .right .filter-option-heading {
        font-size: 24px;
    }
    .desc-section .desc-container .left .filter-option-content, .desc-section .desc-container .right .filter-option-content {
        font-size: 17px;
    }
    .last-section .blue-option-container .heading .head #caption {
        font-size: 45px;
    }
    .last-section .blue-option-container .heading h1 {
        font-size: 90px;
    }

    .last-section .blue-option-container .inputBoxes input, .last-section .blue-option-container .inputBoxes select {
        font-size: 17px;
    }
    .last-section .blue-option-container .submit-btn button {
        font-size: 20px;
        padding: .5% 2%;
    }

    /*__________END OF PROJECT INNER PAGE_________*/

    /*____________START OF MEDIA PAGE___________*/
    .third-sec .mid-image .img p {
        font-size: 25px;
    }
    .third-sec .mid-image .img .date {
        font-size: 17px;
    }

    /*________________END OF MEDIA PAGE____________*/

    /*_________START OF WORK WITH US PAGE__________*/

    .blue-form form .field input {
        font-size: 15px;
        padding-bottom: 0;
    }
    .blue-form form .msg-box textarea {
        font-size: 15px;
    }
    .blue-form form .last-line .uploadFile {
        font-size: 19px;
    }
    .blue-form form .last-line button {
        font-size: 18px;
    }

    /*____________END OF WORK WITH US PAGE__________*/

    footer .left-footer .copyright {
        font-size: 14px;
    }
    footer .left-footer .menus ul li a {
        font-size: 14px;
    }
    footer .right-footer {
        font-size: 14px;
    }
    footer .middle-footer .social_icons ul li a i {
        font-size: 13px;
        height: 33px;
        width: 33px;
    }  

}
/*____for tab responsive_______*/

@media(max-width:1000px){
    .nav_wrap .logo {
        width: 12%;
    }
    .second .parent .right_part {
        font-size: 15px;
        width: 50%;
    }
    .second .parent .left_part {
        max-width: 50%;
    }
    .second .parent {
        gap: 3em;
    }
    .second h1 {
        font-size: 65px;
    }
    .second span {
        font-size: 30px;
    }
    .second .parent .left_part h1 {
        font-size: 65px;
    }
    .fifth-sec .left-container h3 {
        font-size: 30px;
    }
    .fifth-sec .left-container h1 {
        font-size: 65px;
    }
    .fifth-sec .left-container .main_parent .left_part h1 {
        font-size: 65px;
    }
    .fifth-sec .left-container .main_parent .right_part {
        width: 50%;
        font-size: 15px;
    }
    footer {
        display: flex;
        flex-direction: column-reverse;
        gap: 2em;
    }
    footer .left-footer {
        width: 100%;
    }
    footer .left-footer .copyright {
        text-align: center;
    }
    footer .middle-footer {
        display: flex;
        width: 100%;
    }
    footer .left-footer {
        gap: .5em;
    }
    footer .middle-footer {
        gap: .5em;
    }
    footer .right-footer {
        font-size: 14px;
        width: 100%;
        gap: .4em;
    }
    .phone_number,.address,.email{
        text-align: center;
    }
    footer .middle-footer .logo {
        width: 20%;
    }
    .nav_wrap .menuWithIcons ul {
        display: none;
    }
    .nav_wrap .menuWithIcons {
        justify-content: end;
    }
    /*_________START OF PROJECT INNER PAGE_______*/
    #right-part p {
        width: 100%;
    }
    #right-part .icon_container {
        display: grid;
        grid-template-columns: auto auto;
    }
    #right-part .icon_container .part .caption {
        font-size: 16px;
        line-height: 1.2;
    }
    .project-container .menu-item {
        flex-direction: column;
    }
    .desc-section .desc-container .left .filter-option-heading, .desc-section .desc-container .right .filter-option-heading {
        font-size: 20px;
    }
    
    .desc-section .desc-container .left .filter-option-heading span, .desc-section .desc-container .right .filter-option-heading span {
        font-size: 21px;
    }
    .desc-section .desc-container .left .filter-option-content, .desc-section .desc-container .right .filter-option-content {
        font-size: 15px;
    }
    .last-section .blue-option-container .heading h1 {
        font-size: 60px;
    }
    .last-section .blue-option-container .heading .head #caption {
        font-size: 30px;
    }

    /*_______END OF PROJECT INNER PAGE_________*/
}

@media(min-width:1000px){
    .nav_wrap .menuWithIcons ul {
        display:flex;
    }
    .nav_wrap .menuWithIcons {
        justify-content: space-between;
    }
}

/*_______For mobile responsive_______*/

@media(max-width:750px){
    /*______Start of index page style____*/
    .mid-logo-container {
        width: 75%;
    }
    body .banner-img .all-images .img .banner-text .text {
        font-size: 35px;
    }
    body .banner-img .all-images .img .right-arrow-text {
        font-size: 13px;
        top: 46%;
    }
    body .banner-img .all-images .img .left-arrow-text {
        position: absolute;
        // left: -2%;
        top: 46%;
        font-size: 13px;
    }
    body .banner-img .owl-next span {
        color: white;
        font-size: 30px;
    }
    body .banner-img .owl-prev span {
        color: white;
        font-size: 30px;
    }
    // .nav_wrap .menuWithIcons ul {
    //     display: none;
    // }
    // .nav_wrap .menuWithIcons {
    //     justify-content: end;
    // }
    .nav_wrap .logo {
        width: 20%;
    }
    .menu-items-container ul li a {
        font-size: 24px;
    }
    .menu-items-container ul {
        gap: .5em;
    }
    #desk-banner{
        display: none;
    }
    #mob-banner{
        display: block;
    }
    /*________END OF INDEX PAGE STYLE_________*/

    /*__________START OF ABOUT US PAGE___________*/
    .second {
        margin: 25% 9%;
    }

    .second .caption {
        font-size: 18px;
    }
    .second span {
        font-size: 25px;
    }
    .second h1 {
        font-size: 50px;
    }
    .second .parent .left_part h1 {
        font-size: 40px;
    }
    .second .parent {
        display: flex;
        flex-direction: column;
        align-items: baseline;
        gap: 2em;
    }

    .second .parent .left_part {
        max-width: 100%;
    }
    .second .parent .left_part h1 {
        font-size: 50px;
    }
    .second .parent .right_part {
        font-size: 16px;
        width: 100%;
        text-align: justify;
    }
    .fifth-sec .left-container {
        padding: 9%;
        overflow: hidden;
    }
    .fifth-sec .left-container h3 {
        font-size: 25px;
    }
    .fifth-sec .left-container h3 {
        font-size: 22px;
    }
    .fifth-sec .left-container h1 {
        font-size: 50px;
    }
    .fifth-sec .left-container .main_parent .left_part {
        width: 100%;
    }
    .fifth-sec .left-container .main_parent .left_part h1 {
        font-size: 50px;
    }
    .fifth-sec .left-container .main_parent {
        display: flex;
        flex-direction: column;
    }
    .fifth-sec .left-container .main_parent .right_part {
        width: 100%;
        text-align: justify;
    }
    footer {
        display: flex;
        flex-direction: column-reverse;
        align-items: center;
        justify-content: center;
        gap: 2em;
        padding: 10% 4% 3% 4%;
        border-top: 1px solid rgba(0, 0, 0, 0.1);
    }
    footer .left-footer {
        gap: 1em;
    }
    footer .right-footer {
        font-size: 14px;
        width: 100%;
        gap: .4em;
    }
    footer .middle-footer {
        gap: .5em;
    }
    footer .middle-footer .logo {
        width: 40%;
    }
    footer .left-footer .menus ul {
        display: grid;
        grid-template-columns: auto auto auto;
    }
    footer .left-footer .copyright {
        font-size: 14px;
        text-align: center;
        line-height: 1.2;
    }
    .phone_number,.address,.email{
       text-align: center;
    }

    /*__________END OF ABOUT US PAGE________*/

    /*__________START OF CONTACT PAGE__________*/

    .right_part form {
        gap: 1em;
        font-size: 16px;
    }
    
    /*_______END OF CONTACT PAGE_____________*/

    /*___________START OF PROJECT PAGE__________*/

    .project-container .img-container .all-images {
        display: grid;
        grid-template-columns: auto;
    }
    .img-container {
        display: grid;
        grid-template-columns: auto;
    }
    .project-container ul li {
        font-size: 19px;
    }
    .project-container ul {
        gap: 2em;
    }
    .project-container .img-container .all-images .img span {
        font-size: 17px;
    }

    /*__________END OF PROJECT PAGE___________*/

    /*____________START OF PROJECT INNER PAGE________*/

    #right-part p {
        width: 100%;
    }
    #right-part {
        width: 100%;
    }
    #right-part .icon_container {
        display: grid;
        grid-template-columns: auto auto;
    }
    #right-part .icon_container .part .caption {
        font-size: 15px;
    }
    .project-container .menu-item {
        display: flex;
        flex-direction: column;
    }
    .img-container {
        gap: 0em;
    }
    .fifth-sec .left-container .main_parent {
        gap: 1em;
    }
    .desc-section .desc-container .left .filter-option-heading, .desc-section .desc-container .right .filter-option-heading {
        font-size: 15px;
    }
    .desc-section .desc-container .left .filter-option-heading span, .desc-section .desc-container .right .filter-option-heading span {
        font-size: 20px;
    }
    .desc-section .desc-container .left .filter-option-content, .desc-section .desc-container .right .filter-option-content {
        font-size: 13px;
        padding: 3%;
    }
    .last-section .blue-option-container .heading .head #caption {
        font-size: 25px;
    }
    .last-section .blue-option-container .heading h1 {
        font-size: 50px;
    }
    .last-section .blue-option-container .inputBoxes {
        flex-direction: column;
        gap: .6em;
    }
    .last-section .blue-option-container .inputBoxes input, .last-section .blue-option-container .inputBoxes select {
        font-size: 16px;
        width: 100%;
    }
    .last-section .blue-option-container .inputBoxes input{
        padding-left: 1%;
    }
    .last-section .blue-option-container .submit-btn button {
        font-size: 16px;
    }
    .desc-section ul li {
        list-style-type: none;
        font-size: 35px;
    }
    /*___________END OF PROJECT INNER PAGE________*/
    /*_________START OF MEDIA PAGE________*/

    .third-sec .mid-image .img p {
        font-size: 15px;
        line-height: 1.1;
    }
    .third-sec .mid-image .img .date {
        font-size: 13px;
        margin-top: 1%;
        font-weight: lighter;
    }
    .third-sec .mid-image .img img {
        width: 100%;
        height: auto;
    }

    /*_________END OF MEDIA PAGE_________*/

    /*___________START OF WORK WITH US PAGE___________*/

    .blue-form form .field input {
        font-size: 15px;
        padding-bottom: 0;
        width: 100%;
    }
    .blue-form form .field {
        flex-direction: column;
        margin: 0;
    }
    .blue-form form .last-line {
        margin-top: 2%;
        flex-direction: column;
        gap: 1em;
    }
    .blue-form form .msg-box textarea {
        margin-top: 3%;
    }
    .blue-form form .last-line button {
        font-size: 16px;
        padding: 6px 2% 6px 2%
    }

    /*_________END OF WORK WITH US PAGE____________*/
}

@media(min-width:751px){
    // .nav_wrap .menuWithIcons ul {
    //     display:flex;
    // }
    // .nav_wrap .menuWithIcons {
    //     justify-content: space-between;
    // }
    #desk-banner{
        display: block;
    }
    #mob-banner{
        display: none;
    }
}