@import "mixins.scss";
@import "globalvar.scss";
@import "header.scss";
@import url('https://fonts.googleapis.com/css2?family=Jost:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,700;1,800;1,900&display=swap');


*{ 
    margin: 0;padding: 0;
}   
 
body{
    font-family: $fontFamily;font-weight: 500; overflow-x: hidden;
    &.overflowhidden{
        overflow: hidden;
    }  
}    
      
a{ 
    text-decoration: none;  
    &:hover{text-decoration: none;}  
}     
   
p{
    font-size: 16px;line-height: 20px;
}

ul{
    padding-left: 0px;margin-bottom: 0px;
    li{
        font-size: 18px;line-height: 20px;
    }
}

.sectionPadding{
    padding: 80px 0;
    
    @include tab{
        padding: $sectionPaddingTab;
    }
    @include phone{
        padding: $sectionPaddingPhone;
    }
   
}

#more{display: none;}
.sectionTitle{
    font-size: $sectionTitleFontSize; font-weight: 600; line-height: 50px;  margin-bottom: 0; color: rgb(0 0 0 / 10%); text-align: center;
    text-transform: uppercase;    
    
    @include desktop{
        font-size: 80px; line-height: 45px;
    }
    @include mini-desktop{
        font-size: 68px;
    }
    @include tab{
        font-size: 50px; line-height: 30px;
    }
    @include phone{
        font-size: 55px; line-height: 40px;
    }
    @include phone-xs{
        font-size: 46px; line-height: 33px;
    }
    @include phone480{
        font-size: 36px; line-height: 30px;
    }
}

.sectionTitleProject{
    font-size: 75px; font-weight: 600; line-height: 75px;  margin-bottom: 0; color: rgb(0 0 0 / 10%); text-align: center; text-transform: uppercase;
    @include desktop{
        font-size: 65px; line-height: 65px;
    }
    @include mini-desktop{
        font-size: 55px; line-height: 55px;
    }
    @include tab{
        font-size: 40px; line-height: 50px;
    }
    @include phone{
        font-size: 30px; line-height: 40px;
    }
    @include phone480{
        line-height: 35px;
    }
}

.mainHeader{
    padding: 10px 0;
    box-shadow: 0px 5px 55px 0px #00000029;
    .logo{position: absolute;
        right: 0;
        left: 0;
        top: 0;
        bottom: inherit;
        text-align: center; z-index: 0;
        img{
            @include desktop{
                height: 100px; object-fit: cover
            }
        }
    }
    .navBlock{padding-right: 20px}

    header{
        @include fullwidth;

    }
    @include tab{
        header{display: flex;
            .logo{position: relative; top: inherit; left: inherit; bottom: inherit; right: inherit; text-align: left;}
        }
    }   
}   
.form-control:focus{
    border-color: transparent; box-shadow: none;
}
.homebanner{
    .homeSlider{
        .homeBannerimg{
            img{
                width: 100%; height: 100%; object-fit: cover;
            }
        }
        &.slick-dotted.slick-slider{
            margin-bottom: 0px !important;
            @include tab{
                margin-bottom: 40px !important;
            }
        }
        .slick-dots{ bottom: 0; top: 0; display: flex; align-items: flex-end; justify-content: center; flex-direction: column; right: 80px;
            li{
                width: 10px; height: 10px; margin-bottom: 10px;
                button{
                    font-size: 0px;
                    &:before{
                        height: 10px; width: 10px; background: #000; border-radius: 50px; opacity: 1;
                    }
                }

                &.slick-active{ margin-bottom: 30px;
                    button{
                        &:before{
                            height: 30px; background: #ADBB90;
                            @include tab{
                                width: 30px;
                                background: #ADBB90;
                                top: 20px;
                                height: 10px;
                            }

                        }
                    }
                    @include tab{
                        margin-right: 20px;
                    }
                }
            }
            @include tab{
                flex-direction: row;align-items: flex-end; justify-content: center; right: 0; bottom: -28px;
            }
        }
    }
}
.btnSec{
    button{background: transparent; border: none;}
    text-align: center;
    &.txtleft{
        text-align: left;
    }
    .commonBtn{ 
        font-size: 18px; line-height: 18px; color: #000;  
        display: inline-block; font-weight: 700; position: relative; padding: 10px 0;
        &:before{
            content:'';
            position: absolute;
            backface-visibility: hidden;
            bottom: 0px;
            display: block;
            margin: 0 auto;
            transition: all 280ms ease-in-out;
            width: 0;
            top: 0;
            border-top: 1px solid #000;
            left: 0px;
            right: 0px;
        }
        &:after{
            content:'';
            position: absolute;
            backface-visibility: hidden;
            bottom: 0px;
            display: block;
            margin: 0 auto;
            transition: all 280ms ease-in-out;
            width: 0;
            bottom: 0;
            border-top: 1px solid #000;
            left: 0px;
            right: 0px;
        }
        &.mrg70{
            margin-top: 70px;
            @include desktop{
                margin-top: 40px;
            }
            @include tab{
                margin-top: 30px;
            }
            @include phone-xs{
                margin-top: 20px;
            }
        }
        
        &:hover{ color: #000;
            &:before,&:after{
                backface-visibility: hidden;
      border-color: #000;
      transition: width 350ms ease-in-out;
      width: 100%;
            }
        }
    }
}

.weSec{
    .sectionTitle{line-height: 35px;
        @include mini-desktop{
            line-height: 25px;
        }
        @include tab{
            line-height: 20px;
        }
    }
    &.sectionPadding{
        padding-bottom: 0px;
        @include phone{
            padding-bottom: 30px;
        }
    }
    .subSec{
        .subsecdetail{
            color: #7E866F;
            font-size: 29px;
            line-height: 32px;
            text-align: center;
            font-weight: 600;
            margin-bottom: 30px;
            padding-bottom: 0;
            @include desktop{
                margin-bottom: 20px; font-size: 25px; line-height: 27px;
            }
            @include phone-xs{
                font-size: 20px; line-height: 25px;
            }
            
        }
        .detail{
            font-size: 21px; line-height: 30px;color: #444A3A; text-align: center; margin-bottom: 30px; font-weight: 400;
            @include desktop{
                font-size: 18px; line-height: 23px;
            }
            @include phone-xs{
                margin-bottom: 15px;
            }
        }
    }
}

.personSec{
    &.sectionPadding{
        padding-bottom: 0;
        @include phone{
            padding-bottom: 30px;
        }
        @include phone-xs{
            padding-bottom: 0;
        }
    }
    .personBox{ text-align: center;
        img{
            @include phone-xs{
                height: 400px;
            }
        }
        .personname{
            font-size: 30px; line-height: 30px; color: #000; font-weight: 400; margin-bottom: 0; 
            margin-top: 10px; text-align: center;
            @include desktop{
                font-size: 25px; line-height: 30px;margin-top: 5px;
            }
        }
        .occuption{
            font-size: 18px; line-height: 18px; font-weight: 400;color: #000;margin-bottom: 0px; text-align: center;
            @include desktop{
                font-size: 16px; line-height: 16px;
            }
        }
       
        @include tab{
            &:first-child{
                margin-bottom: 30px;
            }
        }
    }
}


.whyusSec{
    .sectionTitle{line-height: 35px;
        @include mini-desktop{
            line-height: 25px;
        }
        @include tab{
            line-height: 20px;
        }
    }
    &.sectionPadding{
        padding-bottom: 0;
        @include phone{
            padding-bottom: 30px;
        }
    }
    .detail{
        font-size: 22px; line-height: 32px; color: #444A3A; text-align: center;margin-bottom: 30px; font-weight: 400;
        &:last-child{
            margin-bottom: 0;
        }
        @include desktop{
            font-size: 19px; line-height: 25px; margin-bottom: 20px;
        }
    }
}


.projectSec{
    &.sectionPadding{
        padding-bottom: 0;
        @include phone{
            padding-bottom: 30px;
        }
    }
    &.padd0{padding-bottom: 80px;}
    .project_list{
        margin: 0 70px; 
        ul{display: flex; flex-wrap: wrap; justify-content: center;
            li{flex: 0 0 32%; max-width: 32%; list-style: none; margin: 0 5px;  margin-bottom: 10px;
                a{ 
                    .projectbox{
                        position: relative;
                        .projectimg{
                            img{
                                height: 350px;width: 100%;
                                @include big-desktop{
                                    height: 400px; object-fit: cover;
                                }
                                @include desktop{
                                    height: 350px; object-fit: cover; width: 100%;
                                }
                                @include mini-desktop{
                                    height: 270px;
                                }
                                @include phone{
                                    height: 204px;
                                }
                                @include phone-xs{
                                    width: 100%; height: 250px;
                                }
                                @include phone480{
                                    height: 212px;
                                }
                                @include phone380{
                                    height: 164px;
                                }
                                
                            }
                        }

                        .projectdetail{
                            position: absolute; display: flex; align-items: center; justify-content: center; background: rgb(51 51 51 / 80%);
                            color: #fff; width: 100%; height: 100%;bottom: 0; flex-direction: column;
                          opacity: 0; transition: ease-in-out 0.5s;
                          .projectname{
                            color: #fff !important;font-size: 25px;line-height: 30px; font-weight: 400; margin-bottom: 0px; text-align: center;
                            @include desktop{
                                font-size: 25px; line-height: 30px;
                            }
                            @include tab{
                                font-size: 20px; text-align: center;
                            }
                            @include phone-xs{
                                font-size: 15px; line-height: 24px;
                            }
                            @include phone380{
                                font-size: 12px; line-height: 22px;
                            }

                        }
                          .projectplace{
                            font-size: 14px; line-height: 14px; color: #fff; font-weight: 400; margin-bottom: 0px;
                            @include phone-xs{
                                font-size: 12px; line-height: 22px; text-align: center;
                            }
                          }
                        }
                        &:hover{
                            
                            .projectdetail{
                                opacity: 1;
                            }
                        }
                    }
                    @include tab{
                        flex: 0 0 48%; max-width: 48%;
                    }
                    @include phone-xs{
                        flex: 0 0 100%; max-width: 100%;
                    }
                }
                @include tab{
                    flex: 0 0 48%; max-width: 100%;
                }
                @include phone{
                    flex: 0 0 47%; max-width: 100%;
                }
                @include phone480{
                    flex: 0 0 47%; max-width: 100%;
                }
                
            }
        }

        @include desktop{
        margin: 0 70px;}
        @include phone-xs{
            margin: 0 15px;
        }
        
    }
}

.testimonialsSec{
    &.sectionPadding{
        padding-bottom: 0;
        @include phone{
            padding-bottom: 30px;
        }
    }
    .testimonialSlider{
        
        .slick-list{
            .slick-track{
                .slick-slide{
                    margin: 0 10px;
                    
                    .testimonialbox{
                        background: #E6E6E6; padding: 0 30px;
                        img{
                            margin-bottom: 50px;
                            @include desktop{
                                height: 70px; object-fit: cover; margin-bottom: 30px;
                            }
                            @include phone480{
                                height: 40px; margin-bottom: 15px;
                            }
                        }
                        button{
                            border: none; background: none; margin-bottom: 20px;
                        }
                        .testimonialdetail{
                            font-size: 21px; line-height: 30px; font-style: italic; font-weight: 400; color: #000;   
                            margin-bottom: 10px; min-height: 200px;
                            @include desktop{
                                font-size: 18px; line-height: 25px;
                            }
                            @include tab{
                                min-height: 250px;
                            }
                            @include phone{
                                min-height: 350px;
                            }
                            @include phone480{
                                font-size: 14px; line-height: 19px;
                            }
                        }
                        .name{
                            position: relative; margin-bottom: 80px;  display: flex;
                            align-items: center;
                            justify-content: flex-start;
                            padding-left: 30px; font-weight: 500; font-size:19px; line-height: 25px;
                            &:before{
                                content: ''; position: absolute;     width: 2%;
                                background: #000;
                                height: 2px;
                                left: 0;
                               
                            
                            }
                            @include desktop{
                                font-size: 20px; margin-bottom: 55px;
                            }
                            @include phone-xs{
                                padding-left: 30px;
                            }
                        }
                    }
                    
                }
            }
        }
    }
}



.socialwallSec{
    .widbox-footer-container{
        .widbox-copyright-logo{opacity: 0;}
    }
    .socialwalllist{display: flex;}
    .socialwallbox{position: relative;
        img{
            height: 400px;
            @include desktop{
                height: 300px; object-fit: cover;
            }
        }
        .social{
            position: absolute; bottom: 16px; right: 16px;
            img{
                height: auto;
            }
        }
    }
    .crt-widget.crt-widget-branded {
        .crt-logo{display: none;}
    }
}



footer{margin-bottom: 26px;
    .sociallinks{
        ul{
            display: flex; align-items:center; justify-content: center; margin-bottom: 20px;
            li{
                list-style: none;margin: 0 7px;
                a{
                    i{
                        &:before{
                            font-size: 25px; color:#3E3E3E;
                        }
                        
                    }
                    &:hover{
                        .fa-facebook{
                            &:before{
                                color: #1877F2;
                            }
                        }
                        .fa-instagram{
                            &:before{
                                color: #833AB4;
                            }
                        }
                        .fa-youtube-play{
                            &:before{
                                color: #C4302b;
                            }
                        }
                        .fa-linkedin{
                            &:before{
                                color: #0e76a8;
                            }
                        }
                    }
                }
            }
        }
    }
    .copyright{
        P{
            text-align: center;
            font-size: 16px;
            line-height: 16px;
            color: #3E3E3E;
            font-weight: 700;
            margin-bottom: 10px;
            img{
                padding-right: 5px;
            }
        }
    }
    .designby{
        p{
            margin-bottom: 0px; font-size: 16px; font-weight: 700; text-align: center; line-height: 16px; color: #3E3E3E;
        }
    }
}

.projectdetailSec{
    .projectdetail{
        font-size: 22px; line-height: 28px; text-align: center; color: #444A3A; font-weight: 400; margin-bottom: 30px;
        &:last-child{
            margin-bottom: 0px;
        }
        @include desktop{
            font-size: 20px; line-height: 25px; margin-bottom: 22px;
        }
    }
    &.sectionPadding{
        padding-bottom: 0px;
    }
    @include desktop{
        padding-top: 60px;
    }
}
.projectimgSec{
    margin: 0 100px;
    .projectgallery{
        .projectimg{display: flex; margin-bottom: 30px; flex-wrap: wrap;
            @include mini-desktop{
                margin-bottom: 20px;
            }
            @include phone{
                margin-bottom: 0px;
            }
            .padd30{
                padding-right: 30px;
                @include mini-desktop{
                    padding-right: 20px;
                }
                @include phone{
                    padding-right: 0px;
                }
            }
            img{
                height: 780px; object-fit: cover; width: 100%;
                @include desktop{
                    height: 500px;
                }
                @include mini-desktop{
                    height: 400px;
                }
            }
            .flex12{
                flex: 0 0 100%; max-width: 100%;
                @include phone{
                    margin-bottom: 20px;
                }
            }
            .flex66{
                flex: 0 0 66.66%; max-width: 66.66%;
                @include phone{
                    flex: 0 0 100%; max-width: 100%; margin-bottom: 20px;
                }
            }
            .flex70{
                flex: 0 0 70%; max-width: 70%;
                @include phone{
                    flex: 0 0 100%; max-width: 100%; margin-bottom: 20px;
                }
            }
            .flex30{
                flex: 0 0 30%; max-width: 30%;
                @include phone{
                    flex: 0 0 100%; max-width: 100%; margin-bottom: 20px;
                }
            }
            .flex33{
                flex: 0 0 33.33%; max-width: 33.33%;
                @include phone{
                    flex: 0 0 100%; max-width: 100%; margin-bottom: 20px;
                }
            }
        }
    }
    @include desktop{
    margin: 0 70px;}
    @include phone-xs{
        margin: 0 25px;
    }
    @include phone480{
        margin: 0px 15px;
    }
}

.recognitionSec{
    .recognitionbox{
       box-shadow: 0px 15px 55px 0px #00000029; background: #fff;padding: 40px; display: flex; 
       align-items: center;flex-direction: column;height: 350px;
       margin-bottom: 30px; 
       .recognitionimg{
        height: 200px; display: flex; align-items: center; justify-content: center;
       }
         
       .recognitioninfo{
        color: #7E866F; font-size: 20px; line-height: 27px; text-align: center; 
        margin-bottom: 8px; min-height: 96px;
        @include desktop{
            font-size: 16px; line-height: 21px; min-height: 80px;
        }
        @include phone{
            min-height: auto; margin-bottom: 20px;
        }
       }
       @include desktop{
        padding: 25px;
       }
       @include phone-xs{
        max-width: 350px; margin: auto; margin-bottom: 20px;
       }
    }
}
.our_ethos_sec{
    &.sectionPadding{
        @include desktop{
            padding-bottom: 0;
        }
    }
    .ethosText{
        font-size: 43px; line-height: 50px; color: #7E866F; text-align: center; font-weight: 400;
        @include desktop{
            font-size: 29px; line-height: 30px;
        }
        @include tab{
            font-size: 30px; line-height: 34px;
        }
        @include phone{
            font-size: 20px; line-height: 26px; margin-bottom: 5px;
        }
    }
    span{
        font-size: 43px; line-height: 50px; color: #7E866F; text-align: center; font-weight: 400;
        display: block; position: relative;
        &:before{
            content: ''; position: absolute; height: 4px; width: 2%;top: 26px;
            background: #7E866F;
            left: -22%;
            right: 0;
            margin: auto;
        }
        @include desktop{
            font-size: 29px; line-height: 29px;
            &:before{
                top: 15px; left: -18%;
            }
        }
        @include mini-desktop{
            &:before{
                left: -21%;
            }
        }
        @include tab{font-size: 30px; line-height: 34px;
            &:before{
                top: 16px; left: -27%;
            }
        }
        @include phone{
            font-size: 20px; line-height: 30px;
            &:before{
                top: 14px;
            }
        }
        @include phone-xs{
            &:before{
                left: -34%;
            }
        }
    }
}
// .personinfo{
//     margin-bottom: 100px;  display: flex; flex-direction: column;
//     .personname{
//         font-size: 30px; line-height: 30px; color: #000; font-weight: 400; margin-bottom: 0px;
//          margin-top: 10px;flex: 0 0 35%; max-width: 35%; text-align: center;
//     }
//     .occuption{font-size: 18px; line-height: 18px; font-weight: 400; margin-bottom: 0;flex: 0 0 35%; max-width: 35%; text-align: center; }
// }
.principalSec{
    &.sectionPadding{
        padding-bottom: 0px;
    }
    .flexend{
        display: flex; justify-content: end;
        .principalperson{
            flex-direction: row-reverse;
            @include phone{
                flex-direction: column;
            }
        }
    }
    .principalperson{
        display: flex;
        justify-content: flex-end;
        height: 614px;
        margin-bottom: 107px;
        width: 1102px;
        @include desktop{
            height: 400px; width: 900px; margin-bottom: 80px;
        }
        @include mini-desktop{
            width: 100%;
        }
        @include phone{
            height: 100%; flex-direction: column;
        }
        
        &.principalRight{
            justify-content: flex-start;
            .persondetail{
                flex-direction: row;
                @include phone{
                    flex-direction: column;
                }
            }
        }
        
            .personname{
                font-size: 30px; line-height: 30px; color: #000; font-weight: 400; margin-bottom: 0; 
                margin-top: 10px; text-align: center;
                @include desktop{
                    font-size: 25px; line-height: 30px;margin-top: 5px;
                }
            }
            .occuption{
                font-size: 18px; line-height: 18px; font-weight: 400;color: #000;margin-bottom: 0px; text-align: center;
                @include desktop{
                    font-size: 16px; line-height: 16px;
                }
            }
            .personimg{
                flex: 0 0 45%;
                max-width: 45%;
                img{
                    height:100%; object-fit: cover; width: 100%;
                }
                @include desktop{
                    flex: 0 0 34%; max-width: 34%;
                    img{
                        height: 400px; object-fit: cover;
                    }
                }
                @include mini-desktop{
                    img{
                        object-fit: cover;
                    }
                }
                @include phone{
                    flex: 0 0 100%; max-width: 100%; margin-bottom: 20px;
                    img{
                        height: auto;
                    }
                }
               
                
            }
            .detail{
                padding: 56px 60px;background: #E6E6E6; display: flex; flex-direction: column; align-items: center; justify-content: center;
                p{
                    font-size: 16px; line-height: 30px; color: #444A3A; font-weight: 400; text-align: center;
                    &:first-child{
                        margin-bottom: 50px;
                    }
                    
                    @include desktop{
                        font-size: 18px; line-height: 22px;
                    }
                }
                @include desktop{
                    padding: 40px; 
                }
                @include tab{
                    padding: 20px 30px;
                }
                
                @include phone{
                    min-height: auto;
                }
            }
           
    }
    
}

.reachusSec{
    .contactbox{
        background: rgba(230, 230, 230, 1); margin-top: 65px; padding: 40px;
        .addresstitle{
            display: flex; margin-bottom: 10px;
            p{
                margin-bottom: 0;margin-left: 14px;font-size: 30px; line-height: 30px; font-weight: 400;
                @include desktop{
                    font-size: 22px; line-height: 22px;
                }
            }
            i{
                &:before{
                    font-size: 25px;
                }
                @include desktop{
                    &:before{
                        font-size: 22px; 
                    }
                }
            }

        }
        .addressSec{margin-bottom: 30px;
            .address{
                font-size:22px ; color: #444A3A; line-height: 30px; font-weight: 400;
                a{
                    color: #444A3A;
                }
                @include desktop{
                    font-size: 19px; line-height: 25px;
                }
                @include mini-desktop{
                    font-size: 15px; line-height: 21px;
                }
                @include tab{
                    font-size: 17px; line-height: 23px;
                }
            }
           
        }
        .sociallinks{
            ul{
                display: flex;
                li{
                    list-style: none; margin-right: 22px;
                }
            }
        }
        @include desktop{
            padding: 30px; margin-top: 70px;
        }
        @include tab{
            margin-top: -2px;
        }
    }
    .tabStructure{
        .tab-content{
            .tabaccordian{
                 border: none; border-radius: 0;
                .accordion-body{
                    padding: 0;
                }
                @include phone{
                    margin-bottom: 15px; border-bottom: 1px solid #000;
                }
            }
        }
        .accordion-button::after{
            position: absolute; right: 13px;
        }
    } 
    .inquiryForm{ 
        .uploadresume{
            .input-group-btn {width: 100%;}
            .career_btn {
                width: 100%; padding: 0;
                img {position: absolute; right: 15px; top: 15px;} 
            }
        } 
       
        .form-group{
            a{
                width: 100%; 
                display: flex;
                align-items: center;
                justify-content: flex-start;
                margin-bottom: 20px;
                button{
                    width: 90%;
                    border: none;
                    height: 40px;
                    background: #e6e6e6;
                    border: 1px solid #ced4da;
                    color: #77777d;
                    text-align: left;
                    padding-left: 12px;
                    
                }
                i{
                    width: 10%;
                    text-align: center;
                    background: #c4c4c4;
                    height: 40px;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    cursor: pointer;
                }
            }
        }
        .form-control{
            background: #E6E6E6;
            height: 50px;
            margin-bottom: 30px;
            border-radius: 0px;
            @include desktop{
                margin-bottom: 15px; height: 40px;
            }
        }
        .height200{
            height: 310px;
            &.height210{
                height: 228px;
            }
        }
        @include desktop{
            .height200{
                height: 290px;
                &.height210{
                    height: 234px;
                }
            }
        }
        @include mini-desktop{
            .height200{
                height: 270px;
                &.height210{
                    height: 213px;
                }
            }
        }
        @include tab{
            .height200{
                height: 180px;
            }
        }
        @include phone{padding: 10px 0;}
    }
}
.mapsec{
    margin-bottom: 30px;
    iframe{
        width: 100%; height: 600px;
    }
}

.loadNone #loading {
    display: none;
  }
  
  #loading {
    width: 100%;
    top: 0;
    left: 0;
    right: 0;
    position: fixed;
    display: flex;
    align-items: center;
    height: 100%;
    flex-direction: column;
    justify-content: center;
    opacity: 1;
    background-color: #000;
    z-index: 9999;
    text-align: center;
    overflow: hidden;

    img{height: 100px; object-fit: contain;}

  }
//   #loading svg {
//     height: 17vw;
//     -o-object-fit: contain;
//        object-fit: contain;
//     animation: 3s 3s ease-in-out forwards;
//   }
  @media (max-width: 767px) {
    #loading svg {
      height: 30vw;
    }
  }
  
  .abc #loading {
    display: none;
  }
  
// .header_mainmenu{
//     display: none;
//     &.animate_menu{
//         display: flex!important;flex-direction: column;position: absolute;left: 100%!important;
//         li{
//             a{
//                 padding: 0!important;
//             }
//         }
//     }
// }

.navbar-expand-md .navbar-collapse{justify-content: flex-end;}

.box_zoom {
    position: relative;
    display: block;
    overflow: hidden;

        &::before {
            content: "";
            position: absolute;
            top: 50%;
            left: 50%;
            height: 0%;
            width: 0%;
            background: rgba(0, 0, 0, 0.5);
            transition: 0.8s;
            z-index: 1;
        }

        &::after {
            content: "";
            position: absolute;
            top: 0%;
            left: 0%;
            background: url(../img/zoom.svg) center center no-repeat;
            height: 100%;
            width: 100%;
            opacity: 0;
            transform: scale(1.5);
            visibility: hidden;
            z-index: 2;
        }

        &:hover{
            &::before {
                height: 100%;
                width: 100%;
                top: 0%;
                left: 0%;
            }
            &::after {
                opacity: 1;
                transform: scale(1);
                transition: 1s;
                visibility: visible;
            }
        }
}

.gallerySec{
    .sectionTitle{text-align: center;}
    .grid {
      column-count: 2; column-gap: 30px;
      .grid-item{margin-bottom: 30px;
        
            &:last-child{margin-bottom: 0;}
            // &:nth-child(5){margin-bottom: 0;}
        }
      }

      .grid-item img {
        width: 100%;
      }
      @include desktop{
        padding-bottom: 100px;
      }

      @include tab{
        padding-top: 130px;
        .grid{
            .grid-item{margin-bottom: 15px;}
        }
      }
      @include phone{
        .grid{column-count: 2;}
      }
      @include phone-xs{
        .grid{column-count: 1;
            .grid-item{
                &:last-child{margin-bottom: 30px;}
                &:nth-child(2){margin-bottom: 15px;}
                &:nth-child(4){margin-bottom: 15px;}
            }
        }
      }
}


// .uploadresume{
//     .input-group-btn {width: 100%;}
//     .career_btn {
//         width: 100%; padding: 0;
//         img {position: absolute; right: 15px; top: 15px;} 
//     }
// } 

.widbox-header-container{margin-bottom: 0px !important;}