/* ======  footer (laptop) ====== */
/* ======  footer (laptop) ====== */

footer {
  height: auto;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  align-content: center;

  padding: 50px 70px 0px 70px;

  /* Background gradient with image */
  background: linear-gradient(
      rgba(54, 60, 101, 0.8), /* Dark overlay */
      rgba(54, 60, 101, 0.8)  /* Dark overlay */
    ),
    url('/Images/home-img/pexels-ken-tomita-127057-389818.jpg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}


.footer-container {
  height: auto;
  width: 100%;

  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  align-content: center;

  /* background-color: rgb(255, 217, 0); */

  /* padding: 10px; */
}

.footer-container .box {
  width: 23%;
  /* margin: 0 10px 0 10px; */

  /* background-color: crimson; */

  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-start;
  align-content: center;
}

.footer-container .box img {
  height: 70px;
  margin-bottom: 20px;
}

.footer-container .box p {
  font-size: 13px;
  margin: 2px 0;
  text-decoration: none;
  color: #f3f4fa;
  padding-right: 10px;
}

.social-media {
  height: auto;
  width: 100%;

  display: flex;
  justify-content: flex-start;
  align-items: center;
  align-content: center;

  /* background-color: rgb(4, 75, 51); */

  margin: 20px 0 0 0;
}

.social-media a {
  color: #000;
  cursor: pointer;

  padding-right: 10px;
}

.social-media a i {
  font-size: 20px;
}

.footer-container .box h3 {
  font-size: 17px;
  margin-bottom: 20px;
  color: #f3f4fa;
}

.footer-container .box a {
  font-size: 13px;
  margin-bottom: 5px;
  text-decoration: none;
  color: #f3f4fa;

  transition: 0.3s;
}

.footer-container .box a:hover {
  color: #a2a4ba;
}



#copyright {
  height: auto;
  width: 100%; 
  background-color: transparent;
  margin-top: 50px;

  /* background-color: rgb(108, 221, 21); */

  display: flex;
  justify-content: center;
  align-items: center;
  align-content: center;
}

#copyright div {
  height: 50px;
  width: 90%;
  border-top: 1px solid #ccc;

  /* background-color: darkgrey; */

  display: flex;
  justify-content: center;
  align-items: center;
  align-content: center;
}

#copyright div p {
  font-size: 13px;
  color: #f3f4fa;

  /* font-family: 'Courier New', Courier, monospace; */
}


/* ======  footer (4k) ====== */
/* ======  footer (4k) ====== */

@media (min-width: 3840px) and (min-height: 2160px){

  footer {
   
  
    padding: 100px 70px 0px 70px;
  
   
  }

  .footer-container .box img {
    height: 150px;
    margin-bottom: 50px;
  }
  
  .footer-container .box p {
    font-size: 25px;
    margin: 5px 0;
    text-decoration: none;
    color: #f3f4fa;
    padding-right: 30px;
  }

  
.social-media {

  /* background-color: rgb(4, 75, 51); */

  margin: 60px 0 0 0;
}

.social-media a {
  color: #000;
  cursor: pointer;

  padding-right: 30px;
}

.social-media a i {
  font-size: 40px;
}

.footer-container .box h3 {
  font-size: 35px;
  margin-bottom: 50px;

}

.footer-container .box a {
  font-size: 25px;
  margin-bottom: 10px;
 
}

#copyright  {
 margin-top: 100px; 
}


  #copyright div {
    height: 150px;
    width: 90%;
    border-top: 2px solid #ccc;
  
    /* background-color: darkgrey; */  
  }

  #copyright div p {
    font-size: 25px;
 
  
    /* font-family: 'Courier New', Courier, monospace; */
  }
}



/* ======  footer (tab) ====== */
/* ======  footer (tab) ====== */

@media (min-width: 768px) and (max-width: 1200px) {

  footer {
    
    padding: 20px 20px 0 20px;
  }

    #copyright div p {
      font-size: 11px;
    
      /* font-family: 'Courier New', Courier, monospace; */
    }
  
  
}

/* ======  footer (mobile) ====== */
/* ======  footer (mobile) ====== */

@media (max-width: 768px) {

  footer {

  
    /* background-color: aqua; */
  
    padding: 20px 20px 0 20px;
  }

  .footer-container {
    height: auto;
    width: 100%;
  
    display: flex;
    flex-direction: column;
    
  }

  .footer-container .box {
    width: 100%;
    margin: 20px 0;
  
    /* background-color: crimson; */
  
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-start;
    align-content: center;
  }

    #copyright div p {
      font-size: 12px;
     
      /* font-family: 'Courier New', Courier, monospace; */
    }


}