:root{
    --favcolor: rgba(255,126,0,1);
    --blackcolor: rgb(39, 37, 37);
}
body{
.head-top{
    width: 100%;
    height: 100px;
    /* background-color: var(--blackcolor); */
    backdrop-filter: blur(20px);
    position:fixed ;
    top: 0;left: 0;
    z-index: 999;
    >.row{
        padding: 0 8%;
        height: 100%;
        >*{
            height: 100%;
             /* border: 2px solid white; */
        }
        >figure{
            width: 25%;
            display: flex;
            align-items: center;
        }
        >nav{
            width: 60%;
            >ul{
                width: 100%;
                height: 100%;
                display: flex;
                justify-content: flex-end;
                >li{
                    /* border: 1px solid red; */
                    display: flex;
                    align-items: center;
                    padding: 0 10px;
                    &:first-of-type{
                        >a{
                            color: var(--favcolor);
                        }
                    }
                    >a{
                        color: white;
                        font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
                        text-transform: capitalize;
                        font-size: 16px;
                        display: flex;
                        height: 100%;
                        align-items: center;
                        /* background-color: orange; */
                        &:hover{
                            color: var(--favcolor);
                        }
                    }

                }
            }
        }
        >div{
            width: 15%;
            display: flex;
            align-items: center;
            justify-content: right;
            >a{
                width: 160px;
                height: 50px;
                color: black;
                background-color: white;
                border: 1px solid white;
                display: flex;
                align-items: center;
                justify-content: center;
                border-radius: 35px;
                transition: .5s;
                &:hover{
                    background-color: black;
                    color: white;
                }
            }
        }
    }
}
/* end header  */
.videosec{
    width: 100%;
    /* min-height: calc(100vh - 100px); */
    min-height: 100vh;
    position: relative;
    top: 0;left: 0;
    overflow: hidden;
    *{
        width: 100%;
    }
    >video{
        position: absolute;
        width: 100%;
        min-height: 100vh;
        top: 0;left: 0;
        scale: 1.3;
    }
    &::after{
        content: '';
        width: 100%;
        min-height: 100vh;
        display: flex;
        position: absolute;
        top: 0;
        left: 0;
        background-color: rgba(0, 0, 0, 0.416);
       }
    >.row{
        /* border: 2px solid white; */
        padding: 0 8%;
        top: 30%;
        color: white;
        position: absolute;
        z-index: 999;
        >*{
            width: 100%;
            /* display: flex; */
            text-align: center;
            text-transform: capitalize;
        }
        >h1{
            font-size: 75px;
        }
        >h3{
            color: var(--favcolor);
            font-size: 20px;
            margin: 25px 0;
        }
        >a{
            border: 1px solid white;
            background-color: white;
            color: var(--blackcolor);
            width: fit-content;
            display: block;
            margin: auto;
            padding: 20px 30px;
            border-radius: 50px;
            transition: .5s;
            &:hover{
                background-color: black;
                color: white;
            }
        }
    }
}
/* end vid section  */
.services{
    width: 100%;
    min-height: 100vh;
    background-color: black;
    >.row{
        padding: 0 8%;
        >*{
            min-height: 100vh;
            /* border: 1px solid red; */
        }
        >div{
            width: 75%;
            display: flex;
            flex-wrap: wrap;
            >.box{
                /* border: 1px solid white; */
                width: 50%;
                height: 40%;
                /* border: 1px solid green; */
                padding: 10px;
                display: flex;
                flex-wrap: wrap;
                align-items: center;
                >span{
                    display: flex;
                    width: 60px;
                    height: 60px;
                    /* border: 1px solid yellow; */
                }
                >h2{
                    width: 100%;
                    color: white;
                    margin: 5px 0;
                    font-weight: normal;
                    /* border: 1px solid green; */
                }
                >p{
                    color: white;
                    /* border: 1px solid red; */
                    text-transform: capitalize;
                }
            }
        }
        >figure{
            /* border: 1px solid white; */
            width: 25%;
            display: flex;align-items: center;
            position: relative;
            top: 0;left: 0; 
            >img{
                width: 100%;
                height: 80vh;
                object-fit: cover;
                transition: .5s;
                &:hover{
                    scale: 1.1;
                }
            }
            >span{
                position: absolute;
                top: calc(50% - 30px);
                left: calc(50% - 30px);
                /* display: flex; */
                width: 60px;
                height: 60px;
                /* border: 1px solid red; */
            }
        }
    }
}
/* end services  */
.team{
    width: 100%;
    min-height: 100vh;
    background-color: black;
    padding: 8%;
    >.row{
        height: 100vh;
        >div{
            width: 20%;
            /* border: 1px solid red; */
            &:nth-of-type(1){
                display: flex;
                flex-wrap: wrap;
                align-content: space-between;
            }
            &:nth-of-type(2){
                width: 60%;
                display: flex;
                align-items: center;
                justify-content: center;
                >.txt{
                    width: 60%;
                    /* border: 1px solid red; */
                    >*{
                        width: 100%;
                        text-align: center;
                        text-transform: capitalize;
                    }
                    >h4{
                        color: var(--favcolor);
                        font-size: 20px;
                    }
                    >h3{
                        font-size: 50px;
                        color: white;
                        margin: 30px 0;
                        font-weight: normal;
                    }
                    >a{
                        border: 1px solid white;
                        background-color: white;
                        color: var(--blackcolor);
                        width: fit-content;
                        display: block;
                        margin: auto;
                        padding: 20px 30px;
                        border-radius: 50px;
                        transition: .5s;
                        &:hover{
                            background-color: rgb(0, 0, 0);
                            color: white;
                        }
                        
                    }
                }
            }
            &:nth-of-type(3){
                >img{
                    height: 100%;
                    object-fit: cover;
                }
            }
            >img{
                width: 100%;
            }
        }
    }
}
/* end team  */

    .footer{
        width: 100%;
        min-height: 120vh;
        background-color: black;
        background-image: url(../images/bgFooter.jpg);
        background-size: cover;
        background-position: center;
        position: relative;
        &::after{
            content: '';
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.393);
            position: absolute;
            top: 0;left: 0;
        }
        >div{
            width: 100%;
            height: 100%;
            position: absolute;
            top: 0;left: 0;
            /* background-color: red; */
            z-index: 999;
            display: flex;
            align-items: center;
            >.row{
                padding:0 10%;
                display: flex;
                height: fit-content;
                &:first-of-type{
                    >div{
                        /* border: 1px solid red; */
                        &:first-of-type{
                            width: 30%;
                            >*{
                               width: 100%;
                               /* border: 1px solid white; */
                               color: white;
                            }
                            >figure{
                                padding-top: 30px;
                                >img{
                                    width: 70%;
                                }
                            }
                            >p{
                                line-height: 30px;
                                width: 60%;
                                margin: 35px 0;
                            }
                            >ul{
                                display: flex;
                                >li{
                                    padding: 0 10px;
                                    >a{
                                        display: flex;
                                        width: 30px; height: 30px;
                                    }
                                }
                            }
                        }
                        &:last-of-type{
                            width: 70%;
                            display: flex;
                            >div{
                                /* border: 1px solid white; */
                                width: 50%;
                                padding: 50px;
                                >h4{
                                    font-size: 30px;
                                    color: var(--favcolor);
                                    padding-bottom: 20px;
                                }
                                >ul{
                                    >li{
                                        line-height: 70px;
                                        >a{
                                            color: white;
                                            font-size:20px;
                                            &:hover{
                                                color: var(--favcolor);
                                            }

                                        }
                                    }
                                }
                            }
                        }
                    }

                }
                &:last-of-type{
                    width: 100%;
                    background-color: black;
                    justify-content: center;
                    padding: 20px 0;
                    position: absolute;
                    bottom: 0;
                    >P{
                        color: white;
                        >a{
                              color: var(--favcolor);
                              /* transition: .5s; */
                              &:hover{
                                color: white;
                              }
                        }
                    }
                }
            }
        }
    }

}