/* start clear tag styles  */

body {
  margin: 0;
  padding: 0;
  border: 0;
  background-color: aliceblue;
  font-family: "Playfair Display", serif;
  font-family: "Raleway", sans-serif;
}

ol,
ul,
a {
  list-style: none;
  text-decoration: none;
}

/* end clear tag styles  */

/* --------------------------------------------------------------------------------------------------------------- */

/* start web style  */

.GalleryPage-background {
  width: 100%;
  height: 90vh;
  overflow: hidden;
}

video {
  width: 100%;
}

header {
  display: flex;
  flex-direction: row;
  font-size: 14pt;
  background-color: #4a6274;
}

a {
  color: white;
}

a:hover {
  color: rgb(5, 5, 5);
}

.logo {
  width: 90px;
  height: 90px;
  background-image: url(img/logos/logo.png);
  background-size: cover;
}

.text-menu li {
  display: inline-block;
  padding: 10px;
  margin-right: 16px;
  margin-top: 0px;
}

/* start menu-img-box box */

.menu-img-box {
  position: fixed;
  left: -200px;
  top: 0;
  background-color: #4a6274;
  width: 200px;
  z-index: 1000;
  min-height: 100vh;
  transition: 0.3s;
}

.menu-img-box.open {
  left: 0px;
}

.toggle-setting img  {
  position: absolute;
  right: -30px;
  top: 180px;
  background-color: #4a6274;
  padding: 8px 0px;
  width: 30px;
  text-align: center;
  cursor: pointer;
  font-size: x-large;
}

.menu-img-box nav {
  padding-top: 70px;
}

/* end menu-img-box box */

/* ------------------------------------------------------------------------ */

/* start of footer styles */

.footer {
  background-color: #4a6274;
  color: white;
  position: relative;
  /* width: 100%;
  height: 100vm; */
}

.footer-content {
  height: 200px;
  display: flex;
  justify-content: center;
  flex-wrap: warp;
  margin: 0;
}

.footer-heading {
  display: flex;
  flex-direction: column;
  margin-bottom: 40;
}

.footer-heading h3 {
  margin-bottom: 20;
  text-align: center;
}

.footer2 {
  display: inline-block;
}

.footer .footer-copy {
  background-color: #64788a;
  color: white;
  height: 50px;
  width: 100%;
  text-align: center;
  position: absolute;
  bottom: 0px;
  left: 0px;
  right: 0px;
  padding-top: 25px;
}

.footer-heading-footer1 {
  position: relative;
  right: 140px;
}

.footer-heading-footer1 h3 {
  text-align: center;
}

/* end of footer styles */

/* start of  paragraph styles */

.paraqraph {
  padding: 40px;
}

.paraqraph h1 {
  text-align: center;
}

/* end of  paragraph styles */

/* start of  form  styles */

.form {
  padding-bottom: 20px;
}

.paragraph-form {
  padding: 40px;
}

/* end of  form styles */

/* start of button forms styles */

.button-send {
  display: inline-block;
  text-align: center;
  border: 1px solid ;
  border-radius: 0.25rem;
  background-color: rgb(51, 97, 184);
  border-color: rgb(51, 97, 184);
  cursor: pointer;
  color: white;
  padding: 5px;
}

.button-clear {
  display: inline-block;
  text-align: center;
  border: 1px solid ;
  border-radius: 0.25rem;
  background-color: grey;
  border-color: grey;
  cursor: pointer;
  color: white;
  padding: 5px;

}

.button-clear:hover , .button-send:hover {

  padding: 6px;
}

/* end of button forms styles */

.other-contact {

  margin-left: 12pt ;
  width: 100%;
  height: 100vm;
  padding-bottom: 20px;
}

.dropdown {
  
    padding: 5pt;
    font-weight: bold;
    color: white;
    background-color: #3361b8;
    width: 10em;
    text-align: center;
    cursor: pointer;
    border: 2pt solid silver;

}

.dropdown ul {

  display: none;
  margin: 0;
  padding: 0;
  padding-top: 10pt;

}

.dropdown ul li:hover {

  background-color: powderblue;

}

.dropdown:hover ul {

  display: block;
}

/* ---------------------------------------------------------------------------------------------------------- */

/* [-- start gallery page --]  */


/* start  of gallery sections  */

.gallery-section {

  padding-left: 30px;
  margin-top: 40px ;
}

/* end  of gallery sections  */

/* start gallery buttons styles --------------------------------------- */

.gallery-buttons ul li {
  display: inline-block;
  margin-right: 10pt;
  background-color: #666;
  color: white;
  padding: 8pt;
  border-radius: 10%;
}

.gallery-buttons ul li:hover {
  background-color: #ddd;
}


/* end  gallery buttons styles ---------------------------------------------*/

/*  start of gallery sections styles ------------------------------- */

.all-secton,
.families-secton,
.singels-secton {
  width: 90%;
  height: 100vm;
  background-color: rgb(223 255 255);
  display: flex;
  flex-direction: row;
  margin-bottom: 300px;
}

.all-secton {

  margin-top: 40px;

}

/*  end of gallery sections styles ------------------------------- */

/* card style ------------------------------------ */

.card {
  /* Add shadows to create the "card" effect */
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
  /* transition: 0.3s; */
  margin: 5pt;
  width: 300px;
}

.card:hover {
  box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2);
}

.card .container {
  padding: 2px 16px;
}

/* end of card style ----------------------------------- */

/* [-- end of gallery page --] */

/* ---------------------------------------------------------------------------------------------------------- */