@import url('https://fonts.googleapis.com/css?family=Poppins');
*{
    padding:0;
    margin:0;
    box-sizing: border-box;
    font-family: Poppins;
}
body{
    width:100vw;
    height:100vh;
    position: relative;
    overflow-x: hidden;
}
.container1{
    width:100%;
    background: white;
    height:500px;
    position: relative;
}
.container1 .details{
    width:100%;
    height:90%;
    padding:1% 5%;
    background: linear-gradient(10deg,#312660,#453782,#493A87,#40337A);
}
.container1 .details .data{
    width:100%;
    height:100%;
    display: flex;
    gap:20px;
    align-items: center;
    justify-content: center;
}
.container1 .details .data1,.container1 .details .data2{
    width:100%;
    height:80%;
    display: flex;
    flex-direction: column;
    gap:20px;
    align-items: start;
    justify-content: start;
    color:white;
}
.container1 .details .data1 h3{
    padding:5px;
    border:1px solid white;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 340;
}
.container1 .details .data1 h2{
    font-size:1.8em;
    font-weight: 700;
}
.container1 .details .data1 span{
    color:yellow;
}
.container1 .details .data2{
    background: url('../Assets/full-stack/banner_hero.png.webp');
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    height:70%;
}
.container1 .bottom-banner{
    position: absolute;
    width:80%;
    height:20%;
    bottom:0%;
    z-index: 0;
    background: white;
    border-radius: 5px;
    box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.8);
    left:10%;
    padding: 0.2% 5%;
    display: flex;
    gap:15px;
    align-items: center;
    justify-content: start;
}
.container1 .bottom-banner .card{
    flex:0 0 20%;
    height: 80%;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 5px;
    background: #F2FAFE;
}
.bottom-banner .card .icon{
    width:30%;
    border-radius: 5px;
}
.bottom-banner .card .icon i{    
    padding:10px;
    font-size: 22px;
    border-radius: 5px;
    font-weight: 500;
    color:#312660;
}
.bottom-banner .card .content{
    display: block;
}
.bottom-banner .card .content p{
    font-size:13px;
    text-align: center;
}
.bottom-banner .card .content .tag{
    margin-top:5px;
    font-size:13px;
    text-align: center;
    border: 1px solid #312660;
    border-radius: 5px;
    font-weight: 600;
    color: #312660;
    padding:1px 8px;
}
.container2{
    margin-top: 20px;;
    width:100%;
    background: white;
    height:auto;
    position: relative;
    padding:1% 5%;
}
.container2 h1{
    font-size:22px;
    font-weight: 900;
    padding-bottom: 10px;
}
.container2 .images{
    width:100%;
    height:100px;
    position: relative;
    transition: all linear 500ms;
    overflow: hidden;
}
.container2 .images img{
    width:100px;
    height:100%;
    object-fit: contain;
    padding:0px 5px;
    background: white;    
}
.container3{
    width:100%;
    height:auto;
    padding:1% 5%;
    background: white;
    display: flex;
    flex-direction: column;
    align-items: start;
    gap:20px;
}
.container3 h1{
    font-size:22px;
    font-weight: 900;
    margin-bottom: 20px;
}
.container3 .card{
    width:100%;
    background: #FBFCFF;
    padding:20px;
    border-radius: 10px;
    height:300px;
    border:1px solid grey;
    display: flex;
    gap:10px;
    align-items: center;
    justify-content: center;
}
.container3 .card .content{
    width:60%;
    height:100%;
    padding:10px;
}
.container3 .card .content h1{
    font-size:22px;
    font-weight: 950;
}
.container3 .card .content span{
    color:#2D81F7;
}
.container3 .card .content p{
    margin:20px 0px;
}
.container3 .card .background{
    width:40%;
    height:100%;
}
.container3 .card .content .sub-container{
    width:100%;
    display: flex;
    gap:10px;
    align-items: center;
    justify-content: center;
}
.content .sub-container .card1{
    width:30%;
    background: white;
    height:100px;
    border-radius: 5px;
    box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.8);
    padding:15px 8px;
}
.sub-container .card1 i{
    width:100%;
    font-size:22px;
    color:#2D81F7;
}
.sub-container .card1 p{
    font-size:14px;
    margin:5px 0px !important;
    width:100%;
}
.container3 .card .background{
    background: url('../Assets/full-stack/banner-1.gif');
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    padding:10px;
}
.container3 .card .background1{
    background: url('../Assets/full-stack/banner-2.gif');
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    padding:10px;
}
.container3 .card .background2{
    background: url('../Assets/full-stack/banner-3.gif');
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    padding:10px;
}
.container3 .card1{
    height: 80px;
    background: white;
    padding:20px;
    align-items: start;
    justify-content: start;
    flex-direction: row;
    width:100%;
    border:1px solid black;
}
.container3 .card1 p{
    align-content:center;
    width:80%;
}
.container3 .card1 button{
    padding:8px 20px;
    background: #00A5EC;
    border-radius: 5px;
    outline: none;
    border: none;
    color:white;
    font-size:14px;
    font-weight: 500;    
}
.container4{
    width:100%;
    background: white;
    padding:1% 5%;
    height:auto;
}
.container4 h1{
    width:100%;
    font-size:22px;
    font-weight: 900;
}
.container4 .details{
    width:100%;
    height:auto;
    padding:10px 0px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap:15px;
}
.container4 .details .card{
    width:20%;
    height:220px;
    box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.8);
    border-radius: 5px;
    background: white;
    display: flex;
    flex-direction: column;
    align-items: start;
    justify-content: start;
    gap:10px;
    padding:10px;
}
.container4 .details .card img{
    width:50%;
    height:90px;
    object-fit: contain;
}
.container4 .details .card .title{
    font-size:16px;
    font-weight: 800;
}
.container4 .details .card p{
    font-size:12px;
}
.container5{
    width:100%;
    padding:1% 5%;
    height:auto;
    background: white;
}
.container5 h1{
    font-size:22px;
}
.container5 .items{
    width:100%;
    height:400px;
    display: flex;
    align-items: start;
    justify-content: center;
    gap:20px;
}
.container5 .items .card{
    width:100%;
    height:100%;
    margin:20px 0px;
    display: flex;
    flex-direction: column;
    gap:10px;    
}
.container5 .items .card:nth-child(1){
    border-right: 3px solid rgba(0, 0, 0, 0.7);;  
}
.container5 .items .card:nth-child(2){
    padding-left:30px;
}
.container5 .items .card h2{
    font-size:18px;
}
.container5 .items .card p{
    font-size:16px;
    height:120px;
}
.container5 .items .card img{
    width:70%;
    height:70%;
    border-radius: 5px;
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.8);
}
.container6{
    margin-top:30px;
    width:100%;
    padding:2% 5%;
    height:auto;
    background: white;
}
.container6 h1{
    font-size:22px;
    font-weight: 750;
}
.container6 .more-details{
    width:60%;    
    padding:2% 2%;
    margin-top:20px;
    height:20px;
    display: flex;
    align-items: center;
    justify-content: start;
}
.container6 .more-details .card{
    width:350px !important;
    display: flex;
    align-items: center;
    gap:15px;
}
.container6 .more-details .card i{
    text-align: center;
    width:35px;
    padding:5px;
    background: #F1FBFE;
    color:#00A5EC;
    border-radius: 5px;font-size:25px;
    
}
.container6 .more-details .card p{
    text-align: center;
    font-size:14px;
    font-weight: 800;
}
.container6 p{
    width:100%;
    font-size:16px;
    margin-top: 15px;
}
.container6 button{
    margin-top: 10px;
    padding:5px 30px;
    background: transparent;
    outline: none;
    border: none;
    border:1px solid #00A5EC;
    border-radius: 5px;
    color:#00A5EC;
    transition: all ease 700ms;
    font-size:15px;
}
.container6 button i{
    margin-left: 5px;
    font-size:16px;
}
.container6 button:hover{
    cursor: pointer;
    border:1px solid #493A87;
    border-radius: 5px;
    color:#493A87;
}
.container7{
    width:100%;
    padding:1% 5%;
    background: white;
    height:auto;
}
.container7 h1{
    font-size:22px;
    font-weight: 900;
}
.container7 .skills{
    margin:10px 0;
    width:100%;
    padding:2% 0;
    display: flex;
    align-items: center;
    justify-content: start;
    gap:1em;
    flex-wrap: wrap;
}
.container7 .skills .card{
    width:22%;
    height:100px;
    border-radius: 8px;
    border:1px solid #2D81F7;
    box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.7);
    display: flex;
    align-items: center;
    justify-content: start;
    padding:20px;
    gap:20px;
    color:#00A5EC;
}
.container7 .skills .card i{
    font-size:70px;    
}
.container7 .skills .card h4{
    font-size:22px;
    text-align: center;
    width:100%;
    color:rgba(0, 0, 0, 0.8)
}
.container8{
    max-width:100vw;
    max-height: 100vh;
    width:100%;
    background: white;
    padding:1% 5%;
    position: relative;
}
.container8 button{
    text-decoration: none;
    padding:10px 50px;
    background: #025578;
    color:white;
    border:none;
    outline: none;
    border-radius: 5px;
    font-size:18px;
    transition: all ease 400ms;
}
.container8 button:hover{
    cursor: pointer;
    background: #042534;    

}
#user{
    display: none;
}
.show{
    display: block !important;
    position: absolute;
    width:100vw;
    height:100vh;
    z-index: 1;
    background: rgba(0, 0, 0, 0.7);
}
.main-parent{
    display: none;
}
.active{
    border-radius: 8px;
    padding:10px;
    z-index: 1;
    display: block !important;
    position: absolute;
    width:300px;
    height:500px;
    background: white;
    box-shadow: 0px 0px 5px white;   
    top:50%;
    left:50%;
    transform: translateY(-50%) translateX(-50%);
    transition: all ease 0.2s;
    animation: userFormAnimation ease 0.5s;
}
@keyframes userFormAnimation {
    0%{
        opacity: 0;
    }
    100%{
        opacity: 1;
    }
    
}

#user .card-title{
    width:100%;
    height:30px;
    display: flex;    
    align-items: center;
    justify-content: start;
    margin-bottom: 10px;
    animation-delay: 0.5s;
}
#user .card-title h2{
    font-size:16px;
    width:50%;
}
#user .card-title i{
    padding:10px;
    width:50%;
    text-align: end;
    color: rgba(0, 0, 0, 0.5);
    transition: all ease 300ms;
}
#user .card-title i:hover{
    cursor: pointer;
    color: rgba(0, 0, 0, 0.8);
}
#user .input-field{
    width:100%;
    padding:10px;
    height:80px;
    animation-delay: 1s;
}
#user .input-field p{
    font-weight: 750;
    width:100%;
    margin-bottom: 5px;
    font-size: 14px;
}
#user .input-field input,select{
    width:100%;
    padding:8px;
    font-size:14px;
    border:1px solid grey;
    border-radius: 5px;
    outline: none;
}
#user .input-field input:focus,select:focus{
    border: 1px solid #00A5EC;
}
input[type=number]::-webkit-inner-spin-button, 
input[type=number]::-webkit-outer-spin-button { 
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    margin: 0; 
}
#user .input-field button{
    padding:5px 20px;
    background: #00A5EC;
    width:100%;
    border: none;
    outline: none;
    border-radius: 5px;
    transition: all ease 700ms;
}
#user .input-field button:hover{
    background: #025578;
    color:white;
    cursor: pointer;
}