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

/* body,html{
    width: 100%;
    height: 100%;

} */

body{
  	font-family: "costa", sans-serif;
	font-weight: 400;
	font-style: normal;
}

 a {
    text-decoration: none;
    cursor: pointer;
}

#under-maile {
    color: inherit;

}


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

.btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    /* background-image: url("http://zanzora.se/wp-content/uploads/2024/04/Zanzora-2.png") ; */

    background-image: url("http://zanzora.se/wp-content/uploads/2024/04/Zanzora-2.png");
    background-color: rgba(255, 255, 255, 0.9);
    background-blend-mode: lighten; 

    background-size: cover;
    
    background-position: 30% 50%;
    /* background-color: rgba(255, 255, 255, 0.5);  */
    height: 94%;
    border-radius: 20px;
    width: 70%; 
    margin: 0 auto; 
    text-align: center; 
    padding: 20px; 
    border: 1px solid #ccc; 
    text-transform: uppercase;
    border: groove;
    margin-top: 5%;

    
}




.btm {
background-color: #DDE6ED;
border: groove;
width: 80%;
padding: 10px 20px;
border-radius: 20px;
transform: matrix(1, 0, 0, 1, 0, 20);



}


.btm1 {
    border: groove;
    width: 80%;
    padding: 10px 20px;
    background-color: #DDE6ED;
    border-radius: 20px;
    transform: matrix(1, 0, 0, 1, 0, 40);
}

#under-maile:hover {
  background-color: #27374D; 
  color: white; 
}



.button-submit:hover {
  background-color: #27374D; 
  color: white; 
}


.button-submit {
      background-color: #DDE6ED;   
    border: groove;
    width: 41rem;
    padding: 12px 20px;
    border-radius: 20px;
    margin-top: -90px;
  	cursor: pointer;
  	font-size: 22px;
}

#text-child {
    width:280px;
    padding: 10px 20px;
    text-align: center;
    height: 229px;
    border-radius: 20px;
    font-size: 20px;
    margin-top: 100px;
    /* transform: matrix(1, 0, 0, 1, 165, 0); */
    margin-left: 50%;
    box-shadow: inset 6px 6px 20px #27374D;
    color: #27374D;

}







/* .comments {
    position: relative;
    transform: matrix(1, 0, 0, 1, 39, 72);
} */

/* الاسم الاول  */
.name1 {
border: solid 1.5px #fff !important;
border-radius: 10px !important;
background: #fff;
padding: 21px !important;
font-size: 18px !important;
color: #27374d !important;
box-shadow: inset 6px 6px 20px #27374D !important;
text-align: center;
transform:matrix(1, 0, 0, 1, -25, -235);
width: 300px !important;
}

/* الاسم الثاني */
.name2 {
    border: solid 1.5px #fff !important;
    border-radius: 10px !important;
    background: #fff !important;
    font-size: 18px !important;
    color: #27374d !important;
    box-shadow: inset 6px 6px 20px #27374D !important;
    text-align: center;
    transform:matrix(1, 0, 0, 1, -329, -177);
	width: 300px !important;
	padding: 21px !important;
  
    
    }


    /* البري الالكتروني */
.email {
    border: solid 1.5px #fff !important;
    border-radius: 10px !important;
    background: #fff !important;
    font-size: 18px !important;
    color: #27374d !important;
    box-shadow: inset 6px 6px 20px #27374D !important;
    text-align: center;
    transform:matrix(1, 0, 0, 1, -176, -155);
	width: 300px !important;
	padding: 21px !important;
  
  
    }


/* رقم الهاتف */
.phone {
    border: solid 1.5px #fff !important;
    border-radius: 10px !important;
    background: #fff !important;
    font-size: 18px !important;
    color: #27374d !important;
    box-shadow: inset 6px 6px 20px #27374D !important;
    text-align: center;
    transform:matrix(1, 0, 0, 1, -176, -145);
	width: 300px !important;
	padding: 21px !important;
  
  
    }

.telefone-mobile {
    font-size: 18px !important;
    background-color: #DDE6ED;
    border: groove;
    width: 41rem;
    padding: 14px 20px;
    border-radius: 20px;
    transform: matrix(1, 0, 0, 1, 0, 60);
    cursor: pointer;
}


.telefone-mobile:hover {
  background-color: #27374D !important;
}









    /* شاشات الهاتف */

    @media screen and (max-width: 320px){


        a {
            text-decoration: none;
            cursor: pointer;
        }
        
        #under-maile {
            color: inherit;
        
        }
      
      
      .button-submit {
        background-color: #DDE6ED;
        border: groove;
        width: 15rem;
        padding: 14px 20px;
        border-radius: 20px;
        margin-top: -145px;
        cursor: pointer;
        font-size: 15px;
}
        
        
        .all-box {
            /* display: flex; */
        }
        
        .btn {
            display: flex;
            flex-direction: column;
            align-items: center;
            /* background-image: url(http://zanzora.se/wp-content/uploads/2024/04/Zanzora-2.png); */
            background-image: url(http://zanzora.se/wp-content/uploads/2024/04/Zanzora-2.png);
            background-color: rgba(255, 255, 255, 0.9) !important;
            background-blend-mode: lighten;
            background-size: cover;
            background-position: 49% 50%;
            /* background-color: rgba(255, 255, 255, 0.5); */
            height: 52rem;
            border-radius: 20px;
            width: 19rem;
            margin: 0 auto;
            text-align: center;
            padding: 20px;
            border: 1px solid #ccc;
            text-transform: uppercase;
            border: groove;
            margin-top: 5%;
            
        }
        
        
        
        
        .btm {
        background-color: #DDE6ED;
        border: groove;
        width: 80%;
        padding: 10px 20px;
        border-radius: 20px;
        transform: matrix(1, 0, 0, 1, 0, 20);
        
        
        
        }
        
        
        .btm1 {
            border: groove;
            width: 80%;
            padding: 10px 20px;
            background-color: #DDE6ED;
            border-radius: 20px;
            transform: matrix(1, 0, 0, 1, 0, 40);
        }
        
        
        
        
     .telefone-mobile {
		font-size: 15px !important;
        background-color: #DDE6ED;
        border: groove;
        width: 13rem;
        padding: 14px 20px;
        border-radius: 20px;
        transform: matrix(1, 0, 0, 1, 0, 60);
        cursor: pointer;
}
        

        
        #text-child {
            width: 215px;
            padding: 10px 20px;
            text-align: center;
            height: 200px;
            border-radius: 20px;
            font-size: 15px;
            margin-top: 18rem;
            /* transform: matrix(1, 0, 0, 1, 165, 0); */
            margin-left: 2%;
            box-shadow: inset 6px 6px 20px #27374D;
            color: #27374D;
        
        }
        
        
        
        .comments {
            display: flex;
            margin-top: 2rem;
            flex-direction: column;
            align-items: center;
        }
        
        /* الاسم الاول  */
        .name1 {
            border: solid 1.5px #fff;
            border-radius: 10px;
            background: #fff;
            padding: 15px;
            font-size: 15px;
            color: #27374d;
            box-shadow: inset 6px 6px 20px #27374D;
            text-align: center;
            transform: matrix(1, 0, 0, 1, 1, -420);
            width: 215px !important;
        }
        
        /* الاسم الثاني */
        .name2 {
            border: solid 1.5px #fff;
            border-radius: 10px;
            background: #fff;
            padding: 15px;
            font-size: 15px;
            color: #27374d;
            box-shadow: inset 6px 6px 20px #27374D;
            text-align: center;
            transform: matrix(1, 0, 0, 1, 1, -410);
            width: 215px !important;
            }
        
        
            /* البري الالكتروني */
        .email {
            border: solid 1.5px #fff;
            border-radius: 10px;
            background: #fff;
            padding: 15px;
            font-size: 15px;
            color: #27374d;
            box-shadow: inset 6px 6px 20px #27374D;
            text-align: center;
            transform: matrix(1, 0, 0, 1, 1, -397);
            width: 215px !important;
            }
        
        
        /* رقم الهاتف */
        .phone {
            border: solid 1.5px #fff;
            border-radius: 10px;
            background: #fff;
            padding: 15px;
            font-size: 15px;
            color: #27374d;
            box-shadow: inset 6px 6px 20px #27374D;
            text-align: center;
            transform: matrix(1, 0, 0, 1, 1, -385);
            width: 215px !important;
            }


    }
      



    /* شاشات الهاتف */

@media screen and (min-width: 330px) and (max-width: 450px){
        .button-submit {
        background-color: #DDE6ED;
        border: groove;
        width: 15rem;
        padding: 14px 20px;
        border-radius: 20px;
        margin-top: -145px;
        cursor: pointer;
        font-size: 15px;
}
        
        
        .all-box {
            /* display: flex; */
        }
        
        .btn {
            display: flex;
            flex-direction: column;
            align-items: center;
            /* background-image: url(http://zanzora.se/wp-content/uploads/2024/04/Zanzora-2.png); */
            background-image: url(http://zanzora.se/wp-content/uploads/2024/04/Zanzora-2.png);
            background-color: rgba(255, 255, 255, 0.9) !important;
            background-blend-mode: lighten;
            background-size: cover;
            background-position: 49% 50%;
            /* background-color: rgba(255, 255, 255, 0.5); */
            height: 52rem;
            border-radius: 20px;
            width: 22rem;
            margin: 0 auto;
            text-align: center;
            padding: 20px;
            border: 1px solid #ccc;
            text-transform: uppercase;
            border: groove;
            margin-top: 5%;
            
        }
        
        
        
        
        .btm {
        background-color: #DDE6ED;
        border: groove;
        width: 80%;
        padding: 10px 20px;
        border-radius: 20px;
        transform: matrix(1, 0, 0, 1, 0, 20);
        
        
        
        }
        
        
        .btm1 {
            border: groove;
            width: 80%;
            padding: 10px 20px;
            background-color: #DDE6ED;
            border-radius: 20px;
            transform: matrix(1, 0, 0, 1, 0, 40);
        }
        
        
        
        
     .telefone-mobile {
		font-size: 15px !important;
        background-color: #DDE6ED;
        border: groove;
        width: 15rem;
        padding: 14px 20px;
        border-radius: 20px;
        transform: matrix(1, 0, 0, 1, 0, 60);
        cursor: pointer;
}
        

        
        #text-child {
            width: 215px;
            padding: 10px 20px;
            text-align: center;
            height: 200px;
            border-radius: 20px;
            font-size: 15px;
            margin-top: 18rem;
            /* transform: matrix(1, 0, 0, 1, 165, 0); */
            margin-left: 2%;
            box-shadow: inset 6px 6px 20px #27374D;
            color: #27374D;
        
        }
        
        
        
        .comments {
            display: flex;
            margin-top: 2rem;
            flex-direction: column;
            align-items: center;
        }
        
        /* الاسم الاول  */
        .name1 {
            border: solid 1.5px #fff;
            border-radius: 10px;
            background: #fff;
            padding: 15px;
            font-size: 15px;
            color: #27374d;
            box-shadow: inset 6px 6px 20px #27374D;
            text-align: center;
            transform: matrix(1, 0, 0, 1, 1, -420);
            width: 215px !important;
        }
        
        /* الاسم الثاني */
        .name2 {
            border: solid 1.5px #fff;
            border-radius: 10px;
            background: #fff;
            padding: 15px;
            font-size: 15px;
            color: #27374d;
            box-shadow: inset 6px 6px 20px #27374D;
            text-align: center;
            transform: matrix(1, 0, 0, 1, 1, -410);
            width: 215px !important;
            }
        
        
            /* البري الالكتروني */
        .email {
            border: solid 1.5px #fff;
            border-radius: 10px;
            background: #fff;
            padding: 15px;
            font-size: 15px;
            color: #27374d;
            box-shadow: inset 6px 6px 20px #27374D;
            text-align: center;
            transform: matrix(1, 0, 0, 1, 1, -397);
            width: 215px !important;
            }
        
        
        /* رقم الهاتف */
        .phone {
            border: solid 1.5px #fff;
            border-radius: 10px;
            background: #fff;
            padding: 15px;
            font-size: 15px;
            color: #27374d;
            box-shadow: inset 6px 6px 20px #27374D;
            text-align: center;
            transform: matrix(1, 0, 0, 1, 1, -385);
            width: 215px !important;
            }

}



 

@media screen and (min-width: 440px) and (max-width: 545px){
       .button-submit {
        background-color: #DDE6ED;
        border: groove;
        width: 20rem;
        padding: 14px 20px;
        border-radius: 20px;
        margin-top: -145px;
        cursor: pointer;
        font-size: 15px;
}
        
        
        .all-box {
            /* display: flex; */
        }
        
        .btn {
            display: flex;
            flex-direction: column;
            align-items: center;
            /* background-image: url(http://zanzora.se/wp-content/uploads/2024/04/Zanzora-2.png); */
            background-image: url(http://zanzora.se/wp-content/uploads/2024/04/Zanzora-2.png);
            background-color: rgba(255, 255, 255, 0.9) !important;
            background-blend-mode: lighten;
            background-size: cover;
            background-position: 49% 50%;
            /* background-color: rgba(255, 255, 255, 0.5); */
            height: 52rem;
            border-radius: 20px;
            width: 28rem;
            margin: 0 auto;
            text-align: center;
            padding: 20px;
            border: 1px solid #ccc;
            text-transform: uppercase;
            border: groove;
            margin-top: 5%;
            
        }
        
        
        
        
        .btm {
        background-color: #DDE6ED;
        border: groove;
        width: 80%;
        padding: 10px 20px;
        border-radius: 20px;
        transform: matrix(1, 0, 0, 1, 0, 20);
        
        
        
        }
        
        
        .btm1 {
            border: groove;
            width: 80%;
            padding: 10px 20px;
            background-color: #DDE6ED;
            border-radius: 20px;
            transform: matrix(1, 0, 0, 1, 0, 40);
        }
        
        
        
        
     .telefone-mobile {
		font-size: 15px !important;
        background-color: #DDE6ED;
        border: groove;
        width: 20rem;
        padding: 14px 20px;
        border-radius: 20px;
        transform: matrix(1, 0, 0, 1, 0, 60);
        cursor: pointer;
}
        

        
        #text-child {
            width: 260px;
            padding: 10px 20px;
            text-align: center;
            height: 200px;
            border-radius: 20px;
            font-size: 15px;
            margin-top: 18rem;
            /* transform: matrix(1, 0, 0, 1, 165, 0); */
            margin-left: 2%;
            box-shadow: inset 6px 6px 20px #27374D;
            color: #27374D;
        
        }
        
        
        
        .comments {
            display: flex;
            margin-top: 2rem;
            flex-direction: column;
            align-items: center;
        }
        
        /* الاسم الاول  */
        .name1 {
            border: solid 1.5px #fff;
            border-radius: 10px;
            background: #fff;
            padding: 15px;
            font-size: 15px;
            color: #27374d;
            box-shadow: inset 6px 6px 20px #27374D;
            text-align: center;
            transform: matrix(1, 0, 0, 1, 1, -420);
            width: 260px !important;
        }
        
        /* الاسم الثاني */
        .name2 {
            border: solid 1.5px #fff;
            border-radius: 10px;
            background: #fff;
            padding: 15px;
            font-size: 15px;
            color: #27374d;
            box-shadow: inset 6px 6px 20px #27374D;
            text-align: center;
            transform: matrix(1, 0, 0, 1, 1, -410);
            width: 260px !important;
            }
        
        
            /* البري الالكتروني */
        .email {
            border: solid 1.5px #fff;
            border-radius: 10px;
            background: #fff;
            padding: 15px;
            font-size: 15px;
            color: #27374d;
            box-shadow: inset 6px 6px 20px #27374D;
            text-align: center;
            transform: matrix(1, 0, 0, 1, 1, -397);
            width: 260px !important;
            }
        
        
        /* رقم الهاتف */
        .phone {
            border: solid 1.5px #fff;
            border-radius: 10px;
            background: #fff;
            padding: 15px;
            font-size: 15px;
            color: #27374d;
            box-shadow: inset 6px 6px 20px #27374D;
            text-align: center;
            transform: matrix(1, 0, 0, 1, 1, -385);
            width: 260px !important;
            }

}


   

@media screen and (min-width: 550px) and (max-width: 770px){
         .button-submit {
        background-color: #DDE6ED;
        border: groove;
        width: 36rem;
        padding: 14px 20px;
        border-radius: 20px;
        margin-top: -145px;
        cursor: pointer;
        font-size: 15px;
}
        
        
        .all-box {
            /* display: flex; */
        }
        
        .btn {
            display: flex;
            flex-direction: column;
            align-items: center;
            /* background-image: url(http://zanzora.se/wp-content/uploads/2024/04/Zanzora-2.png); */
            background-image: url(http://zanzora.se/wp-content/uploads/2024/04/Zanzora-2.png);
            background-color: rgba(255, 255, 255, 0.9) !important;
            background-blend-mode: lighten;
            background-size: cover;
            background-position: 49% 50%;
            /* background-color: rgba(255, 255, 255, 0.5); */
            height: 52rem;
            border-radius: 20px;
            width: 48rem;
            margin: 0 auto;
            text-align: center;
            padding: 20px;
            border: 1px solid #ccc;
            text-transform: uppercase;
            border: groove;
            margin-top: 5%;
            
        }
        
        
        
        
        .btm {
        background-color: #DDE6ED;
        border: groove;
        width: 80%;
        padding: 10px 20px;
        border-radius: 20px;
        transform: matrix(1, 0, 0, 1, 0, 20);
        
        
        
        }
        
        
        .btm1 {
            border: groove;
            width: 80%;
            padding: 10px 20px;
            background-color: #DDE6ED;
            border-radius: 20px;
            transform: matrix(1, 0, 0, 1, 0, 40);
        }
        
        
        
        
     .telefone-mobile {
		font-size: 15px !important;
        background-color: #DDE6ED;
        border: groove;
        width: 36rem;
        padding: 14px 20px;
        border-radius: 20px;
        transform: matrix(1, 0, 0, 1, 0, 60);
        cursor: pointer;
}
        

        
        #text-child {
            width: 400px;
            padding: 10px 20px;
            text-align: center;
            height: 200px;
            border-radius: 20px;
            font-size: 15px;
            margin-top: 18rem;
            /* transform: matrix(1, 0, 0, 1, 165, 0); */
            margin-left: 2%;
            box-shadow: inset 6px 6px 20px #27374D;
            color: #27374D;
        
        }
        
        
        
        .comments {
            display: flex;
            margin-top: 2rem;
            flex-direction: column;
            align-items: center;
        }
        
        /* الاسم الاول  */
        .name1 {
            border: solid 1.5px #fff;
            border-radius: 10px;
            background: #fff;
            padding: 15px;
            font-size: 15px;
            color: #27374d;
            box-shadow: inset 6px 6px 20px #27374D;
            text-align: center;
            transform: matrix(1, 0, 0, 1, 1, -420);
            width: 400px !important;
        }
        
        /* الاسم الثاني */
        .name2 {
            border: solid 1.5px #fff;
            border-radius: 10px;
            background: #fff;
            padding: 15px;
            font-size: 15px;
            color: #27374d;
            box-shadow: inset 6px 6px 20px #27374D;
            text-align: center;
            transform: matrix(1, 0, 0, 1, 1, -410);
            width: 400px !important;
            }
        
        
            /* البري الالكتروني */
        .email {
            border: solid 1.5px #fff;
            border-radius: 10px;
            background: #fff;
            padding: 15px;
            font-size: 15px;
            color: #27374d;
            box-shadow: inset 6px 6px 20px #27374D;
            text-align: center;
            transform: matrix(1, 0, 0, 1, 1, -397);
            width: 400px !important;
            }
        
        
        /* رقم الهاتف */
        .phone {
            border: solid 1.5px #fff;
            border-radius: 10px;
            background: #fff;
            padding: 15px;
            font-size: 15px;
            color: #27374d;
            box-shadow: inset 6px 6px 20px #27374D;
            text-align: center;
            transform: matrix(1, 0, 0, 1, 1, -385);
            width: 400px !important;
            }

 
}





@media screen and (min-width: 775px) and (max-width: 1030px){
  
.btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    /* background-image: url("http://zanzora.se/wp-content/uploads/2024/04/Zanzora-2.png") ; */

    background-image: url("http://zanzora.se/wp-content/uploads/2024/04/Zanzora-2.png");
    background-color: rgba(255, 255, 255, 0.9);
    background-blend-mode: lighten; 

    background-size: cover;
    
    background-position: 30% 50%;
    /* background-color: rgba(255, 255, 255, 0.5);  */
    height: 94%;
    border-radius: 20px;
    width: 48rem; 
    margin: 0 auto; 
    text-align: center; 
    padding: 20px; 
    border: 1px solid #ccc; 
    text-transform: uppercase;
    border: groove;
    margin-top: 5%;

    
}




.btm {
background-color: #DDE6ED;
border: groove;
width: 80%;
padding: 10px 20px;
border-radius: 20px;
transform: matrix(1, 0, 0, 1, 0, 20);



}


.btm1 {
    border: groove;
    width: 80%;
    padding: 10px 20px;
    background-color: #DDE6ED;
    border-radius: 20px;
    transform: matrix(1, 0, 0, 1, 0, 40);
}

#under-maile:hover {
  background-color: #27374D; 
  color: white; 
}



.button-submit:hover {
  background-color: #27374D; 
  color: white; 
}


.button-submit {
      background-color: #DDE6ED;   
    border: groove;
    width: 36rem;
    padding: 13px 20px;
    border-radius: 20px;
    margin-top: -90px;
  	cursor: pointer;
   font-size: 18px;
}

#text-child {
    width:250px;
    padding: 10px 20px;
    text-align: center;
    height: 229px;
    border-radius: 20px;
    font-size: 20px;
    margin-top: 100px;
    /* transform: matrix(1, 0, 0, 1, 165, 0); */
    margin-left: 50%;
    box-shadow: inset 6px 6px 20px #27374D;
    color: #27374D;

}







/* .comments {
    position: relative;
    transform: matrix(1, 0, 0, 1, 39, 72);
} */

/* الاسم الاول  */
.name1 {
border: solid 1.5px #fff !important;
border-radius: 10px !important;
background: #fff;
padding: 21px !important;
font-size: 18px !important;
color: #27374d !important;
box-shadow: inset 6px 6px 20px #27374D !important;
text-align: center;
transform:matrix(1, 0, 0, 1, -49, -235);
width: 250px !important;
}

/* الاسم الثاني */
.name2 {
    border: solid 1.5px #fff !important;
    border-radius: 10px !important;
    background: #fff !important;
    font-size: 18px !important;
    color: #27374d !important;
    box-shadow: inset 6px 6px 20px #27374D !important;
    text-align: center;
    transform:matrix(1, 0, 0, 1, -305, -177);
	width: 250px !important;
	padding: 21px !important;
  
    
    }


    /* البري الالكتروني */
.email {
    border: solid 1.5px #fff !important;
    border-radius: 10px !important;
    background: #fff !important;
    font-size: 18px !important;
    color: #27374d !important;
    box-shadow: inset 6px 6px 20px #27374D !important;
    text-align: center;
    transform:matrix(1, 0, 0, 1, -176, -155);
	width: 250px !important;
	padding: 21px !important;
  
  
    }


/* رقم الهاتف */
.phone {
    border: solid 1.5px #fff !important;
    border-radius: 10px !important;
    background: #fff !important;
    font-size: 18px !important;
    color: #27374d !important;
    box-shadow: inset 6px 6px 20px #27374D !important;
    text-align: center;
    transform:matrix(1, 0, 0, 1, -176, -145);
	width: 250px !important;
	padding: 21px !important;
  
  
    }

.telefone-mobile {
    font-size: 18px !important;
    background-color: #DDE6ED;
    border: groove;
    width: 36rem;
    padding: 13px 20px;
    border-radius: 20px;
    transform: matrix(1, 0, 0, 1, 0, 60);
    cursor: pointer;
}


.telefone-mobile:hover {
  background-color: #27374D !important;
}



  
}