/* 
body,html{
    width: 100%;

} */




* {
    margin: 0;
    box-sizing: border-box;
    font-family: "costa", sans-serif;
	font-weight: 400;
	font-style: normal;

}


/* .canvas{
    transform: translate(10px, -2500px);
  } */

 .boxBoss{
   margin-top: -2500px;
   margin-left: 40px;
} 





.continer-email {
    display: flex;
    /* box-shadow: 0 1px 2px 0 rgba(60,64,67,.3),0 1px 3px 1px rgba(60,64,67,.15); */
    width: 40%;
    box-shadow: 10px 10px 10px #27374D;
    height: 260px;
    padding: 20px 60px;
    /* align-self: center; */
    position: absolute;
    left: 31%;
    top: 40%;
    flex-direction: column;
    align-items: center;
    border-radius: 20px;
    justify-content: flex-end !important;
    /* background: linear-gradient(150deg, #d1d9de5e  70%, #fff 5%, #27374D 25%); */
    backdrop-filter: blur(6px);
    background-image: linear-gradient(154deg, #d1d9de54 72%, #27374d00 76%, #27374d00 25%);
    
}


.continer-email h2 {
    /* align-self: center; */
    position: absolute;
    top: 10%;
    /* font-weight: bold; */
}

.continer-email p {
    text-align: center;
    font-size: 17px;
    padding: 10px 20px;
    position: absolute;
    top: 25%;
    


}


/* 
.continer-box {
    display: flex;
} */


.email-box {
    position: relative;
    border-radius: 25px !important;
    width: 180% !important;
    height: 42px !important;
    font-size: 19px;
    text-align: center;
    right: 38%;
    top: 3%;
}



.email-box::placeholder {
    position: absolute;
    top: 53%;
    transform: translateY(-50%);
    left: 15%;
  }
/* 
.massage {
    font-size: 18px;
    position: absolute;
    top: 73%;
    left: 25%;
} */


.massage::after {
    opacity: 0;
}

.fa-envelope:before {
    content: "\f0e0";
    font-size: x-large;
    position: absolute;
    top: 71%;
    left: 23%;
}


@media screen and (max-width: 320px) {
  
.continer-email {
        display: flex;
        /* box-shadow: 0 1px 2px 0 rgba(60, 64, 67, .3), 0 1px 3px 1px rgba(60, 64, 67, .15); */
        width: 18rem;
        box-shadow: 10px 10px 10px #27374D;
        height: 219px;
        padding: 20px 60px;
        /* align-self: center; */
        /* position: absolute; */
        /* left: 31%; */
        /* top: 40%; */
        flex-direction: column;
        align-items: center;
        border-radius: 20px;
        justify-content: flex-end !important;
        background: linear-gradient(150deg, #d1d9de5e 70%, #fff 5%, #27374D 25%);
        backdrop-filter: blur(6px);
        background-image: linear-gradient(154deg, #d1d9de54 72%, #27374d00 76%, #27374d00 25%);
        /* right: -32px; */
        left: 18px;
    
}


.continer-email h2 {
        align-self: center;
        position: absolute;
        top: 10%;
        font-weight: bold;
        font-size: 10px;
}

.continer-email p {
        text-align: center;
        font-size: 10px;
        padding: 10px 20px;
        position: absolute;
        top: 11%;
    


}


/* 
.continer-box {
    display: flex;
} */


.email-box {
		position: relative;
        border-radius: 25px !important;
        width: 150% !important;
        height: 30px !important;
        font-size: 10px !important;
        text-align: center;
        right: 23%;
        top: 3%;
}



.email-box::placeholder {
    position: absolute;
    top: 53%;
    transform: translateY(-50%);
    left: 15%;
  }
/* 
.massage {
    font-size: 18px;
    position: absolute;
    top: 73%;
    left: 25%;
} */


.massage::after {
    opacity: 0;
}

.fa-envelope:before {
        content: "\f0e0";
        font-size: large;
        position: absolute;
        top: 70%;
        left: 14%;
}
  
  
}



@media screen and (min-width: 380px) and (max-width: 450px)  {
   
.continer-email {
        display: flex;
        /* box-shadow: 0 1px 2px 0 rgba(60, 64, 67, .3), 0 1px 3px 1px rgba(60, 64, 67, .15); */
        width: 25rem;
        box-shadow: 10px 10px 10px #27374D;
        height: 219px;
        padding: 20px 60px;
        /* align-self: center; */
        /* position: absolute; */
        /* left: 31%; */
        /* top: 40%; */
        flex-direction: column;
        align-items: center;
        border-radius: 20px;
        justify-content: flex-end !important;
        background: linear-gradient(150deg, #d1d9de5e 70%, #fff 5%, #27374D 25%);
        backdrop-filter: blur(6px);
        background-image: linear-gradient(154deg, #d1d9de54 72%, #27374d00 76%, #27374d00 25%);
        /* right: -32px; */
        left: 18px;
    
}


.continer-email h2 {
        align-self: center;
        position: absolute;
        top: 10%;
        font-weight: bold;
        font-size: 14px;
}

.continer-email p {
        text-align: center;
        font-size: 14px;
        padding: 10px 20px;
        position: absolute;
        top: 18%;
    


}


/* 
.continer-box {
    display: flex;
} */


.email-box {
		position: relative;
        border-radius: 25px !important;
        width: 150% !important;
        height: 30px !important;
        font-size: 13px !important;
        text-align: center;
        right: 23%;
        top: 30%;
}



.email-box::placeholder {
    position: absolute;
    top: 53%;
    transform: translateY(-50%);
    left: 15%;
  }
/* 
.massage {
    font-size: 18px;
    position: absolute;
    top: 73%;
    left: 25%;
} */


.massage::after {
    opacity: 0;
}

.fa-envelope:before {
        content: "\f0e0";
        font-size: large;
        position: absolute;
        top: 76%;
        left: 18%;
}
}


@media screen and (min-width: 325px) and (max-width: 376px) {
    
.continer-email {
        display: flex;
        /* box-shadow: 0 1px 2px 0 rgba(60, 64, 67, .3), 0 1px 3px 1px rgba(60, 64, 67, .15); */
        width: 23rem;
        box-shadow: 10px 10px 10px #27374D;
        height: 219px;
        padding: 20px 60px;
        /* align-self: center; */
        /* position: absolute; */
        /* left: 31%; */
        /* top: 40%; */
        flex-direction: column;
        align-items: center;
        border-radius: 20px;
        justify-content: flex-end !important;
        background: linear-gradient(150deg, #d1d9de5e 70%, #fff 5%, #27374D 25%);
        backdrop-filter: blur(6px);
        background-image: linear-gradient(154deg, #d1d9de54 72%, #27374d00 76%, #27374d00 25%);
        /* right: -32px; */
        left: 6px;
    
}


.continer-email h2 {
        align-self: center;
        position: absolute;
        top: 10%;
        font-weight: bold;
        font-size: 13px;
}

.continer-email p {
        text-align: center;
        font-size: 13px;
        padding: 10px 20px;
        position: absolute;
        top: 14%;
    


}


/* 
.continer-box {
    display: flex;
} */


.email-box {
		position: relative;
        border-radius: 25px !important;
        width: 150% !important;
        height: 30px !important;
        font-size: 10px !important;
        text-align: center;
        right: 23%;
        top: 3%;
}



.email-box::placeholder {
    position: absolute;
    top: 53%;
    transform: translateY(-50%);
    left: 15%;
  }
/* 
.massage {
    font-size: 18px;
    position: absolute;
    top: 73%;
    left: 25%;
} */


.massage::after {
    opacity: 0;
}

.fa-envelope:before {
        content: "\f0e0";
        font-size: large;
        position: absolute;
        top: 70%;
        left: 21%;
}
}



@media screen and (min-width: 460px) and (max-width: 650px) {
    
.continer-email {
        display: flex;
        /* box-shadow: 0 1px 2px 0 rgba(60, 64, 67, .3), 0 1px 3px 1px rgba(60, 64, 67, .15); */
        width: 30rem;
        box-shadow: 10px 10px 10px #27374D;
        height: 219px;
        padding: 20px 60px;
        /* align-self: center; */
        /* position: absolute; */
        /* left: 31%; */
        /* top: 40%; */
        flex-direction: column;
        align-items: center;
        border-radius: 20px;
        justify-content: flex-end !important;
        background: linear-gradient(150deg, #d1d9de5e 70%, #fff 5%, #27374D 25%);
        backdrop-filter: blur(6px);
        background-image: linear-gradient(154deg, #d1d9de54 72%, #27374d00 76%, #27374d00 25%);
        /* right: -32px; */
        left: 18px;
    
}


.continer-email h2 {
        align-self: center;
        position: absolute;
        top: 10%;
        font-weight: bold;
        font-size: 17px;
}

.continer-email p {
        text-align: center;
        font-size: 17px;
        padding: 10px 20px;
        position: absolute;
        top: 18%;
    


}


/* 
.continer-box {
    display: flex;
} */


.email-box {
		position: relative;
        border-radius: 25px !important;
        width: 150% !important;
        height: 30px !important;
        font-size: 17px !important;
        text-align: center;
        right: 23%;
        top: 30%;
}



.email-box::placeholder {
    position: absolute;
    top: 53%;
    transform: translateY(-50%);
    left: 15%;
  }
/* 
.massage {
    font-size: 18px;
    position: absolute;
    top: 73%;
    left: 25%;
} */


.massage::after {
    opacity: 0;
}

.fa-envelope:before {
        content: "\f0e0";
        font-size: large;
        position: absolute;
        top: 76%;
        left: 18%;
}
}




@media screen and (min-width: 780px) and (max-width: 900px) {
    
.continer-email {
        display: flex;
        /* box-shadow: 0 1px 2px 0 rgba(60, 64, 67, .3), 0 1px 3px 1px rgba(60, 64, 67, .15); */
        width: 40rem;
        box-shadow: 10px 10px 10px #27374D;
        height: 219px;
        padding: 20px 60px;
        /* align-self: center; */
        /* position: absolute; */
        /* left: 31%; */
        /* top: 40%; */
        flex-direction: column;
        align-items: center;
        border-radius: 20px;
        justify-content: flex-end !important;
        background: linear-gradient(150deg, #d1d9de5e 70%, #fff 5%, #27374D 25%);
        backdrop-filter: blur(6px);
        background-image: linear-gradient(154deg, #d1d9de54 72%, #27374d00 76%, #27374d00 25%);
        /* right: -32px; */
        left: 14%;
    
}
  
  
.continer-email h2 {
    /* align-self: center; */
    position: absolute;
    top: 10%;
    /* font-weight: bold; */
}

.continer-email p {
    text-align: center;
    font-size: 17px;
    padding: 10px 20px;
    position: absolute;
    top: 25%;
    


}


/* 
.continer-box {
    display: flex;
} */


.email-box {
    position: relative;
    border-radius: 25px !important;
    width: 180% !important;
    height: 42px !important;
    font-size: 19px;
    text-align: center;
    right: 38%;
    top: 38%;
}



.email-box::placeholder {
    position: absolute;
    top: 53%;
    transform: translateY(-50%);
    left: 15%;
  }
/* 
.massage {
    font-size: 18px;
    position: absolute;
    top: 73%;
    left: 25%;
} */


.massage::after {
    opacity: 0;
}

.fa-envelope:before {
    content: "\f0e0";
    font-size: x-large;
    position: absolute;
    top: 76%;
    left: 21%;
}

}



@media screen and (min-width: 660px) and (max-width: 770px) {
    
.continer-email {
        display: flex;
        /* box-shadow: 0 1px 2px 0 rgba(60, 64, 67, .3), 0 1px 3px 1px rgba(60, 64, 67, .15); */
        width: 30rem;
        box-shadow: 10px 10px 10px #27374D;
        height: 219px;
        padding: 20px 60px;
        /* align-self: center; */
        /* position: absolute; */
        /* left: 31%; */
        /* top: 40%; */
        flex-direction: column;
        align-items: center;
        border-radius: 20px;
        justify-content: flex-end !important;
        background: linear-gradient(150deg, #d1d9de5e 70%, #fff 5%, #27374D 25%);
        backdrop-filter: blur(6px);
        background-image: linear-gradient(154deg, #d1d9de54 72%, #27374d00 76%, #27374d00 25%);
        /* right: -32px; */
        left: 14%;
    
}
  
  
.continer-email h2 {
    /* align-self: center; */
    position: absolute;
    top: 10%;
  	font-size: large;
    /* font-weight: bold; */
}

.continer-email p {
    text-align: center;
    font-size: 15px;
    padding: 10px 20px;
    position: absolute;
    top: 25%;
    


}


/* 
.continer-box {
    display: flex;
} */


.email-box {
    position: relative;
    border-radius: 25px !important;
    width: 180% !important;
    height: 33px !important;
    font-size: 11px !important;
    text-align: center;
    right: 38%;
    top: 38%;
}



.email-box::placeholder {
    position: absolute;
    top: 53%;
    transform: translateY(-50%);
    left: 15%;
  }
/* 
.massage {
    font-size: 18px;
    position: absolute;
    top: 73%;
    left: 25%;
} */


.massage::after {
    opacity: 0;
}

.fa-envelope:before {
    content: "\f0e0";
    font-size: 17px;
    position: absolute;
    top: 78%;
    left: 21%;
}

}






@media screen and (min-width: 910px) and (max-width: 1024px) {
    
.continer-email {
        display: flex;
        /* box-shadow: 0 1px 2px 0 rgba(60, 64, 67, .3), 0 1px 3px 1px rgba(60, 64, 67, .15); */
        width: 40rem;
        box-shadow: 10px 10px 10px #27374D;
        height: 219px;
        padding: 20px 60px;
        /* align-self: center; */
        /* position: absolute; */
        /* left: 31%; */
        /* top: 40%; */
        flex-direction: column;
        align-items: center;
        border-radius: 20px;
        justify-content: flex-end !important;
        background: linear-gradient(150deg, #d1d9de5e 70%, #fff 5%, #27374D 25%);
        backdrop-filter: blur(6px);
        background-image: linear-gradient(154deg, #d1d9de54 72%, #27374d00 76%, #27374d00 25%);
        /* right: -32px; */
        left: 14%;
    
}
  
  
.continer-email h2 {
    /* align-self: center; */
    position: absolute;
    top: 10%;
    /* font-weight: bold; */
}

.continer-email p {
    text-align: center;
    font-size: 17px;
    padding: 10px 20px;
    position: absolute;
    top: 25%;
    


}


/* 
.continer-box {
    display: flex;
} */


.email-box {
    position: relative;
    border-radius: 25px !important;
    width: 180% !important;
    height: 42px !important;
    font-size: 19px;
    text-align: center;
    right: 38%;
    top: 38%;
}



.email-box::placeholder {
    position: absolute;
    top: 53%;
    transform: translateY(-50%);
    left: 15%;
  }
/* 
.massage {
    font-size: 18px;
    position: absolute;
    top: 73%;
    left: 25%;
} */


.massage::after {
    opacity: 0;
}

.fa-envelope:before {
    content: "\f0e0";
    font-size: x-large;
    position: absolute;
    top: 76%;
    left: 23%;
}

}




@media screen and (min-width: 1030px) and (max-width: 1450px) {
    
.continer-email {
        display: flex;
        /* box-shadow: 0 1px 2px 0 rgba(60, 64, 67, .3), 0 1px 3px 1px rgba(60, 64, 67, .15); */
        width: 45rem;
        box-shadow: 10px 10px 10px #27374D;
        height: 219px;
        padding: 20px 60px;
        /* align-self: center; */
        /* position: absolute; */
        /* left: 31%; */
        /* top: 40%; */
        flex-direction: column;
        align-items: center;
        border-radius: 20px;
        justify-content: flex-end !important;
        background: linear-gradient(150deg, #d1d9de5e 70%, #fff 5%, #27374D 25%);
        backdrop-filter: blur(6px);
        background-image: linear-gradient(154deg, #d1d9de54 72%, #27374d00 76%, #27374d00 25%);
        /* right: -32px; */
        left: 20%;
    
}
  
  
.continer-email h2 {
    /* align-self: center; */
    position: absolute;
    top: 10%;
    /* font-weight: bold; */
}

.continer-email p {
    text-align: center;
    font-size: 17px;
    padding: 10px 20px;
    position: absolute;
    top: 25%;
    


}


/* 
.continer-box {
    display: flex;
} */


.email-box {
    position: relative;
    border-radius: 25px !important;
    width: 180% !important;
    height: 42px !important;
    font-size: 20px !important;
    text-align: center;
    right: 38%;
    top: 38%;
}



.email-box::placeholder {
    position: absolute;
    top: 53%;
    transform: translateY(-50%);
    left: 15%;
  }
/* 
.massage {
    font-size: 18px;
    position: absolute;
    top: 73%;
    left: 25%;
} */


.massage::after {
    opacity: 0;
}

.fa-envelope:before {
    content: "\f0e0";
    font-size: x-large;
    position: absolute;
    top: 75%;
    left: 23%;
}

}



@media screen and (min-width: 2000px) and (max-width: 2570px) {
    
.continer-email {
        display: flex;
        /* box-shadow: 0 1px 2px 0 rgba(60, 64, 67, .3), 0 1px 3px 1px rgba(60, 64, 67, .15); */
        width: 70rem;
        box-shadow: 10px 10px 10px #27374D;
        height: 350px;
        padding: 20px 60px;
        /* align-self: center; */
        /* position: absolute; */
        /* left: 31%; */
        /* top: 40%; */
        flex-direction: column;
        align-items: center;
        border-radius: 20px;
        justify-content: flex-end !important;
        background: linear-gradient(150deg, #d1d9de5e 70%, #fff 5%, #27374D 25%);
        backdrop-filter: blur(6px);
        background-image: linear-gradient(154deg, #d1d9de54 72%, #27374d00 76%, #27374d00 25%);
        /* right: -32px; */
        left: 20%;
    
}
  
  
.continer-email h2 {
    /* align-self: center; */
    position: absolute;
    top: 10%;
    font-size: 40px;

    /* font-weight: bold; */
}

.continer-email p {
    text-align: center;
    font-size: 33px;
    padding: 10px 20px;
    position: absolute;
    top: 29%;
    


}


/* 
.continer-box {
    display: flex;
} */


.email-box {
    position: relative;
    border-radius: 25px !important;
    width: 180% !important;
    height: 55px !important;
    font-size: 30px !important;
    text-align: center;
    right: 38%;
    top: 38%;
}



.email-box::placeholder {
    position: absolute;
    top: 53%;
    transform: translateY(-50%);
    left: 15%;
  }
/* 
.massage {
    font-size: 18px;
    position: absolute;
    top: 73%;
    left: 25%;
} */


.massage::after {
    opacity: 0;
}

.fa-envelope:before {
    content: "\f0e0";
    font-size: xx-large;
    position: absolute;
    top: 83%;
    left: 23%;
}

}