@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@200..800&display=swap');


.bg-grey{
    background-color: grey;
    
}
.bg-whitish{
    background-color: #DBEFFE;
}
html {
    /* font-size: 62.5%; */
    font-family: "Manrope", sans-serif, "Poppins";
}
/* 


body {
    font-size: 1.4rem;
    padding: 80px;
    background: #6A84ED;
} */



/* Laptop Start*/

.laptop {
    position: relative;
    margin: auto;
    max-width: 80rem;
}

.laptop__screen {
    position: relative;
    z-index: 1;
    padding: 3%;
    border-radius: 2rem;
    background: #ecf1f7;
    background-image: linear-gradient(to bottom, #333, #111);
    box-shadow: 0 .1rem 0 #cfcfcf;
    border: 2px solid #ccc;
}

.laptop__screen img {
    display: block;
    max-width: 100%;
    height: auto;
    aspect-ratio: attr(width) / attr(height);
    background: #000;
}

.laptop__bottom {
    position: relative;
    z-index: 1;
    margin-right: -7%;
    margin-left: -7%;
    height: .7rem;
    background: #e9eff5;
    background-image: linear-gradient(to right, #d2dde9 0%, #f9fcff 15%, #e5ebf2 40%, #e5ebf2 60%, #f9fcff 85%, #d2dde9 100%);
}

.laptop__bottom::before {
    display: block;
    margin: 0 auto;
    width: 20%;
    height: .7rem;
    border-radius: 0 0 .2rem .2rem;
    background: #f6f9fc;
    background-image: linear-gradient(to right, #c3cfdb 0%, #f6f9fc 10%, #f6f9fc 90%, #c3cfdb 100%);
    content: " ";
}

.laptop__under {
    position: absolute;
    top: 100%;
    left: 25%;
    display: block;
    width: 50%;
    height: 1.4rem;
    background: #e2e8f0;
    background-image: linear-gradient(to bottom, #e2e8f0, #bec7d1);
}

.laptop__under::after, .laptop__under::before {
    position: absolute;
    top: 0%;
    right: 100%;
    bottom: 0;
    display: block;
    width: 50%;
    border-bottom-left-radius: 100%;
    background: inherit;
    content: " ";
}

.laptop__under::after {
    right: auto;
    left: 100%;
    border-bottom-right-radius: 100%;
    border-bottom-left-radius: 0;
}

.laptop__shadow {
    position: absolute;
    right: -10%;
    bottom: -2.5rem;
    left: -10%;
    z-index: 0;
    height: 2rem;
    background: radial-gradient(ellipse closest-side, #000, transparent);
    opacity: 0.5;
}
/* Laptop End */




.bg-green-light{
    background-color: #458d74;
}

.feature-vid{
    width: 100%;
    height: 80%;
    border: 0;
    outline: 0;
    box-shadow: 0 0 20px 0 rgba(62, 61, 61, 0.749);
}



/* .img-stu{
    width: 928px !important;
} */













/* Contact Form Page */


.error{
    border: 1px solid red;
    background-color: rgb(246, 98, 98);
}

.success{
    border: 1px solid green;
    background-color: rgb(138, 255, 138);
}



form{
    display: flex !important;

}

input:user-invalid{
    border-color: #ff4747 !important;
}
input:user-valid{
    border-color: #0716e8 !important;
}




input{
    width: 100%;
    /* border: 2px solid grey; */
    margin-top: 2% !important;
    flex-basis: 85%;
    margin-bottom: 2%;
    padding: 1%;
    
}

.message-input
{
    flex-basis: 92.5% !important;
    max-height: 250px;
    /* margin-right: 1% !important; */
}
#submit_btn{
    flex-basis: 92.5% !important;
}


.border-red{
    border: 1px solid red !important;
}

.hr-line{
    width: 5%;
    border: 2px solid black;
    height: fit-content;

  
}

.pl-1{
    padding-left: 1%;
}


#response{
    visibility: hidden;
    /* background-color: #333; */
    position: fixed;
    min-width: 250px;
    min-height: 50px;
    text-align: center;
    border-radius: 1rem;
    right: 150px;
    bottom: 80px;

    display: flex;
    align-items: center;
    justify-content: center;

}
.show{
    visibility: visible !important;
    animation: fadein .5s , fadeout 0.5s 2.5s ;
}
@keyframes fadein {
    from { right: 0; opacity: 0;}
    to { right: 150px; opacity: 1;}
    
 }
 
 @keyframes fadeout {
     from { bottom: 80px; opacity: 1;}
     to { bottom: 0; opacity: 0;}
 }
/* @keyframes fadein {
   from { bottom: 0; opacity: 0;}
   to { bottom: 80px; opacity: 1;}
   
}

@keyframes fadeout {
    from { bottom: 80px; opacity: 1;}
    to { bottom: 0; opacity: 0;}
} */