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

/* body */
body {
    font-family: 'Arial', sans-serif;
    background-color: #e1e0e088;
    overflow-x: hidden;
}

/* navbar */
.navbar{
    position: sticky;
    top: 0;
    display: block;
    background: rgba(255, 255, 255, 0.49);
    backdrop-filter: blur(7px);
    box-shadow: 0px 1px 5px rgba(0, 0, 0, 0.379);
    z-index: 1;
    animation: nav 0.5s ease-in-out;
}
@keyframes nav{
    0%{
        transform: translateY(-100px);
        opacity: 1;
    }100%{
        transform: translateY(0px);
        opacity: 0.3;
    }
}

.navbar img{
    display: inline-block;
    width: 10%;
    height: fit-content;
}

#navbar-brand{
    width: fit-content;
}

.navbar-nav a{
    transition: all 150ms;
    width: fit-content;
    color:#00000082;
    font-size: 15px;
    font-weight: bold;
}

.navbar-nav a:hover{
    color: black;
    border-bottom: 2px solid rgba(226, 177, 43, 0.583);
    border-bottom-left-radius: 10px;
    text-transform: capitalize;
}

.navbar-nav .Active{
    color: rgb(0, 0, 0);
    font-size: 16px;
    border-bottom: 2px solid rgba(226, 137, 43, 0.583);
    border-bottom-left-radius: 10px;
}

/* main */
main{
    /* background: #d2d2d22f; */
    background: linear-gradient(to right,rgba(238, 219, 176, 0.29),#d2d2d22f);
    padding: 2%;
    padding-top: 6%;
    overflow: hidden;
}

.hero .col-6{
    display:grid;
    margin-top: 4%;
}
.hero h1{
    text-align: center;
    font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
}

.hero h1 span{
    display: inline-block;
    -webkit-text-fill-color: transparent;
    background: linear-gradient(135deg, rgba(255, 166, 0, 0.725),rgba(65, 38, 199, 0.528));
    background-clip:text;
}

.hero p{
    width: 80%;
    margin-top: 3%;
    margin-bottom: 3%;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    font-size: 26px;
    font-style: italic;
    font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
}

.hero p strong{
    -webkit-text-fill-color: transparent;
    background: linear-gradient(140deg,rgba(255, 166, 0, 0.807),rgba(229, 197, 16, 0.461));
    background-clip: text;
}

.hero .send-project{
    transition: all 1s;
    justify-self: center;
    padding: 1.5%;
    margin: 10px;
    border:1px solid rgba(137, 43, 226, 0.415);
    border-radius: 6px;
    background-image: linear-gradient(to left, rgba(255, 166, 0, 0.356),rgba(171, 154, 255, 0.274));
}
.hero button:hover{
    background-image: linear-gradient(to right, rgba(170, 244, 226, 0.81),rgba(255, 166, 0, 0.425));
    color: rgb(72, 112, 232);
}

.hero .learn{
    transition: all 1s;
    justify-self: center;
    padding: 1.5%;
    margin: 10px;
    border: 1px solid rgba(137, 43, 226, 0.415);
    border-radius: 6px;
}

/* animation */
main .col-3{
    animation: col-3 1s ease-in-out;
}
@keyframes col-3{
    0%{
        transform: scale(0);
        opacity: 0.2;
    }100%{
        transform: scale(1);
        opacity: 1;
    }
}

main .col-3 .animation{
    position: absolute;
    display: block;
    width: fit-content;
    height: fit-content;
    padding: 4%;
    z-index: -1;
}
main .col-3 .ani-1,.ani-2{
    background-image: linear-gradient(to right,rgba(253, 192, 255, 0.684),rgba(255, 166, 0, 0.356));
    backdrop-filter: blur(6px);
    filter: blur(6px);
    border-radius: 50px;
    animation: animation 15s infinite;
}
@keyframes animation{
    0%{
        transform: rotatez(0);
    }
    50%{
        transform: rotatez(360deg);
    }
}

main .col-3 .ani-1{
    top: 23%;
    left: 31%;
}
main .col-3 .ani-2{
    top: 38%;
    right: 35%;
}

main .col-3 .ani-3{
    background-image: linear-gradient(rgba(255, 255, 255, 0.494),rgba(255, 166, 0, 0.371));
    filter: blur(5px);
    border-radius: 50px;
    animation: animation 15s infinite;
}
main .col-3 .ani-4{
    background-image: linear-gradient(rgba(255, 255, 255, 0.494),rgba(255, 166, 0, 0.615));
    top: 50%;
    filter: blur(2px);
    border-radius: 10px;
    transform: rotateZ(30deg);
    animation: ani-translate 9s 1s linear infinite;
}
main .col-3 .ani-5{
    background-image: linear-gradient(rgba(255, 255, 255, 0.494),rgba(255, 166, 0, 0.371));
    top: 50%;
    filter: blur(5px);
    border-radius: 50px;
    animation: animation 15s infinite;
}
main .col-3 .ani-6{
    background-image: linear-gradient(rgba(255, 255, 255, 0.494),rgba(255, 166, 0, 0.615));
    top: 20%;
    filter: blur(2px);
    border-radius: 10px;
    transform: rotateZ(30deg);
    animation: ani-translate 10s 1s linear infinite;
}
@keyframes ani-translate{
    0%{
        translate: 0px;
    }50%{
        translate: 100px -50px;
    }100%{
        translate: 0px;

    }
}

/* section-1 */
.section-1{
    display: grid;
    margin-top: 3%;
    padding: 10% 10% 3% 10%;
}

.section-1 video{
    display: block;
    width: 100%;
    height: 70%;
    object-fit: cover;
    border-radius: 15px;
    box-shadow: 10px 10px 19px rgba(26, 26, 26, 0.43),
                -10px -10px 19px rgba(235, 188, 111, 0.575),
                6px -10px 19px rgba(26, 26, 26, 0.43);
    animation:video 2s ease-in-out;
    animation-timeline:view() ;
    animation-range-start: cover;
    animation-range-end: 27%;
}
@keyframes video{
    0%{
        opacity: 1;
        scale: 0.4;
    }
    100%{
        opacity: 0.5;
        scale: 1;
    }
}

/* section-2 */
.section-2{
    margin-top: 1%;
    margin-bottom: 10%;
}
.section-2 h2{
    text-align: center;
    justify-self: center;
    padding: 20px;
    font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
    border:2px solid rgba(126, 142, 236, 0.547);
    border-top-left-radius: 20%;
    border-bottom-right-radius: 20%;
} 

.section-2 .present{
    padding: 4%;
    margin-top: 50px;
}

.section-2 .present .p_1,.p_2,.p_3 {
    display: grid;
    justify-items: center;
    padding: 5%;
    background: #e6e3e310;
    backdrop-filter: opacity(0.8);
    box-shadow: 0px 4px 6px rgba(26, 26, 26, 0.43);
    border-radius: 15px;    
    animation:present 1s ease-in-out;
}
@keyframes present{
    0%{
        transform: translateX(-100px);
        opacity: 0.1;
    }100%{
        transform: translateX(0px);
        opacity: 1;
    }
}

.section-2 img{
    display: block;
    width: 50%;
    border-radius: 15px;
    height: fit-content;
    margin: 5px;
}

.section-2 .present .p_1 p{
    margin-top: 20px;
}

.section-2 .present .p_1:hover{
    transition: all 0.3s ease-in-out;
    background:linear-gradient(to right, rgba(240, 240, 240, 0.248), rgba(255, 166, 0, 0.125));
    box-shadow: 0px 4px 6px rgba(26, 26, 26, 0.63);
    transform: scale(1.02);
}
.section-2 .present .p_2:hover{
    transition: all 0.3s ease-in-out;
    background:linear-gradient(to right, rgba(240, 240, 240, 0.248), rgba(255, 166, 0, 0.125));
    box-shadow: 0px 4px 6px rgba(26, 26, 26, 0.63);
    transform: scale(1.02);
}
.section-2 .present .p_3:hover{
    transition: all 0.3s ease-in-out;
    background:linear-gradient(to right, rgba(240, 240, 240, 0.248), rgba(255, 166, 0, 0.125));
    box-shadow: 0px 4px 6px rgba(26, 26, 26, 0.63);
    transform: scale(1.02);
}

.section-2 .present h4{
    font-size: 25px;
    font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
    text-align: center;
    color: rgba(0, 0, 0, 0.7);
}

.section-2 .present p{
    font-size: 17px;
    font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
    text-align: center;
    color: rgba(0, 0, 0, 0.7);
}

.section-2 .present hr{
    width: 50%;
    height: 1px;
    margin-bottom: 40px;
    border: 1px solid rgba(35, 99, 210, 0.867);
}

/* animation */
/*Animation-gallery*/

.animte-gallery {
    position: absolute;
    top: -52px;
    margin-bottom: 10px;
    border-radius: 10% 10% 50% 50%;
    width: 10%;
    z-index: -1;
    opacity: 0.7;
    filter: drop-shadow(5px 1px 9px rgb(0, 0, 0));
}

#animate-app-1 {
    position: absolute;
    top: -52px;
    left: 0px;
    animation: animate-app-1 11s linear infinite;
}

@keyframes animate-app-1 {
    0% {
        top: -52px;
        transform: rotate(0deg);
    }

    100% {
        top: 70%;
        transform: rotate(300deg);
    }
}

#animate-app-2 {
    position: absolute;
    top: -52px;
    left: 20%;
    animation: animate-app-2 15s 2s linear infinite;
}

@keyframes animate-app-2 {
    0% {
        top: -52px;
        transform: rotate(0deg);
    }

    100% {
        top: 70%;
        transform: rotate(300deg);
    }
}

#animate-app-3 {
    position: absolute;
    top: -52px;
    left: 40%;
    animation: animate-app-3 11s 1s linear infinite;
}

@keyframes animate-app-3 {
    0% {
        top: -52px;
        transform: rotate(0deg);
    }

    100% {
        top: 70%;
        transform: rotate(300deg);
    }
}

#animate-app-4 {
    position: absolute;
    top: -52px;
    left: 60%;
    animation: animate-app-4 15s 2s linear infinite;
}

@keyframes animate-app-4 {
    0% {
        top: -52px;
        transform: rotate(0deg);
    }

    100% {
        top: 70%;
        transform: rotate(300deg);
    }
}

#animate-app-5 {
    position: absolute;
    top: -52px;
    left: 80%;
    animation: animate-app-5 12s linear infinite;
}

@keyframes animate-app-5 {
    0% {
        top: -52px;
        transform: rotate(0deg);
    }

    100% {
        top: 70%;
        transform: rotate(300deg);
    }
}

#animate-app-6 {
    position: absolute;
    top: -58px;
    left: 13%;
    animation: animate-app-6 17s 6s linear infinite;
}

@keyframes animate-app-6 {
    0% {
        top: -58px;
        transform: rotate(0deg);
    }

    100% {
        top: 70%;
        transform: rotate(300deg);
    }
}

#animate-app-7 {
    position: absolute;
    top: -58px;
    left: 70%;
    animation: animate-app-7 17s 6s linear infinite;
}

@keyframes animate-app-7 {
    0% {
        top: -58px;
        transform: rotate(0deg);
    }

    100% {
        top: 70%;
        transform: rotate(300deg);
    }
}

/* section-2 gallery */
/*app-btn*/

#app-p {
    transition: 20s all;
}

#app-btn {
    display: grid;
    width: 100%;
    background-image: linear-gradient(to left, pink, rgba(255, 166, 0, 0.615));
    animation: app-btn 20s linear forwards infinite;
    overflow: hidden;
    position: relative;
}

@keyframes app-btn {
    0% {
        background-image: linear-gradient(to left, pink, rgba(255, 166, 0, 0.577));
    }

    100% {
        background-image: linear-gradient(to right, pink, rgba(255, 166, 0, 0.555));
    }
}

.app-animte {
    width: 30px;
    z-index: 2;
    opacity: 0.4;
}

.app-animte:hover {
    border-radius: 10px;
    width: 35px;
    filter: drop-shadow(5px 1px 9px rgb(0, 0, 0));
    opacity: 1;

}

/*app-animte1*/
#app-animte1 {
    position: absolute;
    left: 0px;
    top: 0px;
    animation: app-animte1 5s infinite linear forwards;
}

@keyframes app-animte1 {
    0% {
        position: absolute;
        left: 0px;
        top: 0px;
        z-index: 1;
        transform: rotate(0deg)
    }

    100% {
        position: absolute;
        left: 45%;
        top: 0px;
        z-index: -1;
        transform: rotate(200deg)
    }
}

/*app-animte2*/
#app-animte2 {
    position: absolute;
    right: 0px;
    top: 0px;
    animation: app-animte2 5s infinite linear forwards;
}

@keyframes app-animte2 {
    0% {
        position: absolute;
        right: 0px;
        top: 0px;
        z-index: 1;
        transform: rotate(0deg)
    }

    100% {
        position: absolute;
        right: 45%;
        top: 0px;
        z-index: -1;
        transform: rotate(200deg)
    }
}

/*app-animate3*/
#app-animte3 {
    position: absolute;
    left: 0px;
    top: 0px;
    animation: app-animte3 15s 20ms infinite linear forwards;
}

@keyframes app-animte3 {
    0% {
        position: absolute;
        left: 0px;
        top: 0px;
        z-index: 1;
        transform: rotate(0deg)
    }

    100% {
        position: absolute;
        left: 50%;
        top: 0px;
        z-index: -1;
        transform: rotate(200deg)
    }
}

/*app-animate4*/
#app-animte4 {
    position: absolute;
    right: 0px;
    top: 0px;
    animation: app-animte4 15s 20ms infinite linear forwards;
}

@keyframes app-animte4 {
    0% {
        position: absolute;
        right: 0px;
        top: 0px;
        z-index: 1;
        transform: rotate(0deg)
    }

    100% {
        position: absolute;
        right: 50%;
        top: 0px;
        z-index: -1;
        transform: rotate(-200deg)
    }
}

/*Animation-gallery*/

.animte-gallery {
    position: absolute;
    top: -52px;
    margin-bottom: 10px;
    border-radius: 10% 10% 50% 50%;
    width: 10%;
    z-index: -1;
    opacity: 0.7;
    filter: drop-shadow(5px 1px 9px rgb(0, 0, 0));
}

#animate-app-1 {
    position: absolute;
    top: -52px;
    left: 0px;
    animation: animate-app-1 11s linear infinite;
}

@keyframes animate-app-1 {
    0% {
        top: -52px;
        transform: rotate(0deg);
    }

    100% {
        top: 70%;
        transform: rotate(300deg);
    }
}

#animate-app-2 {
    position: absolute;
    top: -52px;
    left: 20%;
    animation: animate-app-2 15s 2s linear infinite;
}

@keyframes animate-app-2 {
    0% {
        top: -52px;
        transform: rotate(0deg);
    }

    100% {
        top: 70%;
        transform: rotate(300deg);
    }
}

#animate-app-3 {
    position: absolute;
    top: -52px;
    left: 40%;
    animation: animate-app-3 11s 1s linear infinite;
}

@keyframes animate-app-3 {
    0% {
        top: -52px;
        transform: rotate(0deg);
    }

    100% {
        top: 70%;
        transform: rotate(300deg);
    }
}

#animate-app-4 {
    position: absolute;
    top: -52px;
    left: 60%;
    animation: animate-app-4 15s 2s linear infinite;
}

@keyframes animate-app-4 {
    0% {
        top: -52px;
        transform: rotate(0deg);
    }

    100% {
        top: 70%;
        transform: rotate(300deg);
    }
}

#animate-app-5 {
    position: absolute;
    top: -52px;
    left: 80%;
    animation: animate-app-5 12s linear infinite;
}

@keyframes animate-app-5 {
    0% {
        top: -52px;
        transform: rotate(0deg);
    }

    100% {
        top: 70%;
        transform: rotate(300deg);
    }
}

#animate-app-6 {
    position: absolute;
    top: -58px;
    left: 13%;
    animation: animate-app-6 17s 6s linear infinite;
}

@keyframes animate-app-6 {
    0% {
        top: -58px;
        transform: rotate(0deg);
    }

    100% {
        top: 70%;
        transform: rotate(300deg);
    }
}

#animate-app-7 {
    position: absolute;
    top: -58px;
    left: 70%;
    animation: animate-app-7 17s 6s linear infinite;
}

@keyframes animate-app-7 {
    0% {
        top: -58px;
        transform: rotate(0deg);
    }

    100% {
        top: 70%;
        transform: rotate(300deg);
    }
}

/*section-2*/

#contain-app-gallery {
    position: relative;
    background: linear-gradient(to right,rgba(255, 228, 165, 0.29),#d2d2d22f);
    padding: 2%;
}

#app-gallery {
    position: relative;
    display: flex;
    overflow: hidden;
    transition: 3s all;
}

#image-app {
    width: 70%;
    height: 5%;
    margin-left: 15%;
    animation: app-gallery 30s 0ms linear forwards infinite;
    transition: 3ms all;
    filter: drop-shadow(10px 10px 10px rgb(0, 0, 0));
}

@keyframes app-gallery {

    0% {
        transform: translatex(-1000px);
        border: 2px solid rgb(255, 226, 5);
    }

    100% {
        transform: translatex(1000px);
        border: 2px solid violet;
    }
}

/* section-4 */
.section-4{
    overflow:hidden;
    position:relative;
    display: grid;
    justify-content: center;
    padding: 5%;
    margin-top: 2%;
    margin-bottom: 2%;
    background: linear-gradient(260deg,rgba(249, 203, 119, 0.766),rgba(253, 250, 104, 0.53));
}

.section-4 button{
    transition:all  0.5s;
    width: fit-content;
    justify-self: center;
    font-family:Arial, Helvetica, sans-serif;
    padding-top: 1.5%;
    padding-bottom: 1.5%;
    padding-right: 9%;
    padding-left: 9%;
    margin-top: 10px;
    border-radius: 10px;
    border: 1px solid black;
    background-image: linear-gradient(to left, rgba(255, 166, 0, 0.356), rgba(255, 231, 154, 0.274));
}
.section-4 button:hover{
    box-shadow: 3px 5px 8px black;
}

.section-4 img{
    display:inline-block;
    position:absolute;
    top:79%;
    width:10%;
    margin-right: 10px;
    z-index:-1;
    animation: animation-s4 15s 30ms infinite linear;
}
@keyframes animation-s4{
    0%{
        translate: 0px 0px;
        transform: rotateZ(40deg);
        opacity:1;
    }
    100%{
        transform: rotateZ(40deg);
        translate: 600px -200px;
        opacity: 0.4;
    }
}

.section-4 .a-2{
    top:8%;
    left:1%;
}
.section-4 .a-3{
    right:9%;
}
.section-4 .a-4{
    top:85%;
    right:50%;
}

/* footer */
footer {
    background: linear-gradient(to left, rgba(235, 193, 114, 0.766) 60%,transparent),url(../images/logo.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    background-attachment: fixed;
    color: rgb(0, 0, 0);
    width: 100%;
    padding: 2%;
}

footer img {
    width: 60%;
    height: fit-content;
}

footer a {
    margin-top: 15px;
}

footer .resources a{
    display: grid;
    color: rgba(27, 62, 238, 0.813);
}

footer .resources a:hover{
    text-decoration: overline solid rgba(219, 166, 75, 0.583);
}

footer .services-footer span{
    display: inline-block;
    margin-right:5px;
    margin-top:6px;
    color: blue;
    border-bottom:1px solid black;
    border-radius: 30%;
}