/* ----This website codes are not in correct order so you cannot manage codes or anythings here easily :-) ----- */

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: cursive, sans-serif;
}

body {
  background: url(../images/bg2.jpg) center center/cover no-repeat , #000000;
  width: 100%;
  height: 100vh;
  object-fit: cover;
}

a {
  text-decoration: none;
  color: #000000;
}

/* headder */
header {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  margin: 10px 12% 70px;
}
nav {
  margin: 20px;
}

nav ul {
  display: flex;
  position: relative;
  list-style: none;
}
nav ul li a {
  padding: 8px 14px;
  background: rgb(184, 168, 168);
  margin: 2px;
  font-weight: bold;
  transition: 300ms;
  border-radius: 5px;
}
nav ul li a:hover {
  background: rgb(0, 0, 0);
  border-radius: 12px;
  color: #ffffff;
}
.contact-info {
  display: flex;
  flex-wrap: wrap;
  font-weight: bold;
  color: blue;
}

.contact-info:hover {
  color: #ffffff;
}
.contact-info p span a img {
  margin-left: 19px;
}
.contact-info p span a img:hover {
  filter: brightness(20);
}

section {
  position: relative;
}

.about-box {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  max-width: 1200px;
  height: 50vh;
  margin: 12px auto;
  background: rgba(88, 79, 79, 0.7);
  border-radius: 49px;
  box-shadow: inset 10px 20px 120px rgba(190, 74, 45, 0.473);
}

#first-box h2 {
  font-weight: bold;
  font-size: 3em;
}

/* --------------------added Later--------------- */

.container {
  position: relative;
}
.hor-box {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
}
.boxes {
  background: rgb(221, 139, 139);
  position: relative;
  max-width: 40vw;
  flex-grow: 1;
  flex-shrink: 0;
  height: 50vh;
  margin: 12px;
  border-radius: 19px;
}
#box-a img,
#box-b img {
  object-fit: cover;
  width: 100%;
  height: 100%;
  border: 12px;
  opacity: 0;
}
#box-a img:hover,
#box-b img:hover {
  opacity: 1;
}

.over-box {
  background-color: rgb(35, 233, 8);
  position: absolute;
  width: 500px;
  height: 400px;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  opacity: 0.2;
  transition: 0.6s;
  display: flex;
  justify-content: space-around;
  background: transparent;
}

.over-box:hover {
  transform: translateX(-50%) rotate(55deg);
  opacity: 1;
  background: transparent;
}

.three-boxes {
  width: 30%;
  height: 99%;
  margin: 5px;
  background: #12bfc1;
  transition: 1s;
}

.over-box:hover #box-1 {
  position: relative;
  transform: translatey(30px);
  border-radius: 19px;
}
.over-box:hover #box-2 {
  transform: translatey(-130px);
  border-radius: 19px;
}
.over-box:hover #box-3 {
  transform: translatey(30px);
  border-radius: 19px;
}

.three-boxes h1 {
  transform: rotate(-90deg);
  text-align: center;
  position: absolute;
  bottom: 40%;
  font-size: 2em;
  left: 0;
}

p:hover {
  opacity: 1;
}


/* <!-- second-box  --> */
#second-box {
    position: relative;
    z-index: 99;
    background-color: #fff;
    flex-direction: column;
}

#second-box p{
    margin: 10px;
    color: rgb(245, 3, 205);
    font-weight: bold;
}


@media (max-width: 750px) {
    .container {
      top: 30vh;
    }
    .hor-box {
      display: flex;
      flex-direction: column;
      justify-content: center;
    }
    .boxes {
      background: rgb(231, 111, 13);
      max-width: 100%;
      border-radius: 12px;
      flex-grow: 1;
      flex-shrink: 0;
      height: 50vh;
      height: 100vh;
    }
  
    .over-box {
      background-color: rgb(35, 233, 8);
      position: absolute;
      width: 300px;
      height: 280px;
      top: 40%;
      left: 50%;
      transform: translateX(-50%, -50%);
      opacity: 0.2;
      transition: 0.6s;
      display: flex;
      justify-content: space-around;
      background: transparent;
    }
    .over-box:hover {
      transform: translateX(-50%) rotate(90deg);
      opacity: 1;
      background: transparent;
    }
    .three-boxes {
      width: 100%;
      height: 99%;
      margin: 5px;
    }
  
    .over-box:hover #box-1 {
      background-color: red;
      transform: translatey(0);
    }
    .over-box:hover #box-2 {
      background-color: #03c2f1;
      transform: translatey(0px);
    }
    .over-box:hover #box-3 {
      background-color: rgb(68, 0, 255);
      transform: translatey(0);
    }
    #second-box{
        top: 230px;
    }
  }