*
{
    margin: 0;
    /* width: 0; */
    padding: 0;
    box-sizing: border-box;
}
/* body
{
     background-attachment: fixed;
} */



.hos
{
    background-color: rgb(60, 137, 192);
    height: 70px;
    width: 100%;
}
.demo 
{
    display: flex;
    /* text-decoration: none; */
    list-style: none;
    gap: 15px;
    float: right;
    padding: 20px 40px;
    animation-name: demo;
    transition: 3s;
    
   
}

.demo .link:hover
{
    text-decoration: underline;
    font-size: 20px;
    color: rgb(39, 31, 31)(9, 9, 9);
    /* transform: 3s; */

}
.link a {
    text-decoration: none;
    color: aliceblue;
    font-size: 18px;
}
.img
{
    background-image: url(./image/Health\ Complications\ of\ Addiction_\ Diseases\,\ Side\ Effects\ &\ Consequences.jpeg);
    background-repeat: no-repeat;
    background-size: cover;
    width: 100%;
    height: 585px;    
}
.head
{
    text-align: center;
    /* padding: 400px; */
    /* margin: 100px 0; */
    color: antiquewhite;
    padding-left: 45rem;
    padding-top: 15rem;
    /* transition: width 2s; */
    
}
.header1
{
    text-shadow: 1px 1px 4px rgb(231, 9, 9);
    /* animation-name: web; */
    /* transition-timing-function: ease; */
            
}
.head h4
{
    text-shadow:1px 1px 4px crimson;
}

.but
{
    font-size: 15px;
    padding: 15px;
    border-radius: 10px;
    border: none;
    font-weight:bold;
    /* color: rgb(98, 98, 93); */
    border: .2rem solid rgb(29, 181, 171);
    transition: .5s ease;
    margin-left: 20px;
}
.img .but:hover
{
    background-color: rgb(29, 181, 171);
    /* box-shadow: 40px rgb(0, 0, 0); */
    border-color: rgb(29, 181, 171);
transform: scale(1.02);
    
}

/* TECHNOLOGY */

.mid
{
    height: 300px;
    width:1350px;
    /* background-color: rgb(211, 222, 222); */
    display: flex;
    
}
.mid .mid1
{
    background-color: rgb(90, 102, 113);
    width: 300px;
    height: 275px;
    padding: 20px;
    border-radius: 20px;
    margin: 10px 40px;
    font-size: 18px;
    border: .2rem solid cyan;
    transition: 0.5s ease;
    /* margin-top: 20px; */
    /* margin-bottom: 20px; */
}
.mid .mid1:hover
{
    border-color:cyan;
transform: scale(1.02);
}
.mid1 img
{
 height: 60px;
 width: 60px;
 margin: 10px 70px ;
}


.mid1 h3
{
    text-align: center;
}
.mid1 p
{ 
    text-align: center;
}

/* form */

.form
{
    height: 550px;
    width:100%;
    background-color: rgb(18, 197, 229);
    /* margin: 30px; */
    padding-top: 40px;
    /* padding-bottom: 0px; */
    /* padding-left: 900px; */
    /* background-image: url(/image/Doctor\ Background.jpeg) ; */
    /* background-repeat: no-repeat; */
    /* padding-left: 50px; */
    display: flex;

}

.form .msg
{
    border: 0px;
    padding: 40px;
    border-radius: none;
    
}


.form input
{
    padding: 10px;
    border-radius: 20px;
    border: none;
    
}
.form .back
{
    height: 500px;
    width: 300px;
    background-color: rgb(16, 146, 215);
    padding: 20px;
    border-radius: 10px;
    border: .2rem solid rgb(22, 26, 26);
    transition: .5s ease;
}
.form .back:hover
{
    border-color: rgb(22, 26, 26);
transform: scale(1.02);
}
.back h5
{
    text-align: center;
    font-size: 20px;
}

.form img
{
    margin-right: 40px;
    /* border: .2rem solid rgb(22, 26, 26); */
    transition: .5s ease;

}
.form img:hover
{
    /* border-color: rgb(22, 26, 26); */
    transform: scale(1.02);
}
.butt2
{
    border-radius: 5px;
    padding: 8px;
    border: none;
}


/* about  */


.service {
    margin-top: 20px;
    text-align: center;
}
.service>p {
    color: #386641;
    font-size: 25px;
    font-weight: 600;
}

.service>h2 {
    margin-top: 10px;
    font-size: 35px;
    text-transform: uppercase;
    line-height: 40px;
    color: #223645;
    text-align: center;
}

.ser {
    display: flex;
    margin-left: 30px;
}

.box {
    height: 400px;
    width: 400px;
    /* background-color: rgb(138, 31, 31); */
    margin: 40px;
    display: flex;
    border-radius: 15px;
    display: inline-block;
    text-align: center;
}

.box img {
    height: 230px;
    width: 100%;
    border-radius: 15px;
    transition: 1s ease;
}

.box img:hover {
    transform: scale(1.2);
}

.box h2 {
    font-size: 35px;
    margin-top: 6px;
    font-weight: bold;
}

.box p {
    font-size: 17px;
    margin-top: 7px;
}

.box button {
    padding: 10px 20px;
    background-color: rgb(29, 181, 171);
    color: white;
    border: none;
    border-radius: 5px;
    font-size: 15px;
    font-weight: 600;
    transition: 0.5s;
}

.box button:hover {
    background-color: rgb(29, 181, 171);
    color: white;
    text-decoration: underline 2px solid rgb(29, 181, 171);
    transform: scale(1.04);
}


/*  */


.service2 {
    margin-top: 20px;
    text-align: center;
    background-color: #217cc2;
    width: 100%;
    height: 500px;
}
.service2>p {
    color: #386641;
    font-size: 25px;
    font-weight: 700;
}

.ser {
    display: flex;
    margin-left: 30px;
}

.box2 {
    height: 400px;
    width: 400px;
    /* background-color: rgb(138, 31, 31); */
    margin: 40px;
    display: flex;
    border-radius: 15px;
    display: inline-block;
    text-align: center;
}

.box2 p {
    font-size: 17px;
    margin-top: 30px;
    font-weight: bold;
}
.box2>h2 {
    margin-top: 10px;
    font-size: 35px;
    text-transform: uppercase;
    /* line-height: 40px; */
    color: #c3cdd2;
    text-align: center;
}
.box2 img {
    height: 200px;
    width: 90%;
    border-radius: 15px;
    transition: 1s ease;
    padding: 10px;
    margin-top: 20px;
    /* text-align: center; */
}

.box2 img:hover {
    transform: scale(1.2);
}
 .box2 .image2
{
    padding: 20px 20px;
}

.box2 h2 {
    font-size: 25px;
    margin-top: 6px;
    font-weight: bold;
  text-align: center;
  display: flex;
}


     



@media screen and (max-width:1300px) {
    .all-container{
        /* background-color: black; */
        display: none;

    }

    .message{
        position: absolute;
            /* font-size: 40vh; */
        right: 46%;
        bottom: 46%;
    display: block;
    
    }
    

    
    
}

@media screen and (min-width:1299px){
    .message{
        display: none;
    }
}

