*{
     margin: 0;
     padding: 0;

}
.topic{
  font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
  font-size: larger;
  font-weight: 600;
  
}
.container{
height: 10000%;
width: 100%;
background-image: url(pexels-abdullah-ghatasheh-1631677.jpg);
background-repeat: no-repeat;
background-attachment: scroll;
background-position:right top;
background-size: cover;
padding-left: 5%;
padding-right: 5%;
box-sizing: border-box;
position: relative;
}

.navbar{
  width: 100%;
  height: 15vh;
  margin: auto;
  display: flex;
  align-items: center;
}


.Logo{
    width: 90px; 
    cursor: pointer;
    border-radius: 90%;
  
    
}


nav {

flex: 1;
padding-left: 50px;
}

nav ul li {

    display: inline-block;
    list-style: none;
    margin:0px 20px ;
     
}

nav ul li a {

    text-decoration:double;
    color:rgb(0, 0, 0);
    font-size:22px;
    font-weight: bold;
    font-style:normal;
  }


.Box {
 text-decoration: none;
 color: #000;
 background: transparent;
 padding: 5px 10px;
 border-radius: 5px;
 font-weight: bold;
 text-transform: uppercase;
 transition: all 0.3s ease-in-out;
 border: 1px solid #000;
 margin: 0 10px
}  

.Box:hover {
       border: 0;
       box-shadow:0 0 5px rgb(10, 1, 42), 0 0 5px rgb(10, 1, 51), 0 0 5px rgb(18, 2, 54) ;

}

.topic {
 
 text-decoration: double;
 font-family: Georgia, 'Times New Roman', Times, serif;
 padding-bottom: 10%;
 padding-top: 5%;
 padding-left: 19%;
 position:relative;
 font-size: larger
}

.happy{
  display: block;
  position: relative;
  margin-left: 42%;
  margin-right: 0%;
  width: 50%;
  margin-top: 25%;
  size: 100px;
  transform: translate(-50%,-50%);

}
.i {
 
  object-fit: cover;
  animation: float 3s ease-out infinite
}
@keyframes float {
  50%{
      transform: translateY(60px);
  }
}

.content {

  text-decoration: solid;
  font-family:-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  position: static;
  font-style: normal;
  font-weight: 50;
  
}
.content .homepara1{
 text-align:justify ;
 margin-top: -26%;
 color: rgb(0, 0, 0);
 font-size: 2em;
 margin-left: 35%;

}

.content .homepara2{
  text-align: justify;
  margin-bottom: 15%;
  font-size: 2em;
  margin-right: 45%;


}

.pic1{

position: relative;
width: 1100px;
display: flex;
flex-wrap: wrap;
}
.pic1 .box1 {
  position: relative;
  margin-left: 30%;
  width: 650px;
  height: 300px;
  overflow: hidden;
  transition: 0.5s;
}

.pic1 .box1:hover{

  z-index:0.2;
  transform: scale(1.25) ;
  box-shadow: 0 2px 2px rgba(0, 0, 0, 0.993);
}

.pic1 .box1 .imgbx img {
 position: absolute;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;

}

.pic1 .box .imgbx img {

  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  background:linear-gradient(180deg,rgba(178, 250, 246, 0.931),rgb(255, 174, 174));
  mix-blend-mode: multiply;
  opacity: 0;
  transition: 0.5s;

}

.pic1 .box1:hover  .imgbx:before
{opacity: 1;}

.pic1  .box1 .con 
{
  position: absolute;
  top: 10;
  left: 2;
  width: 100%;
  height: 100%;
  z-index: 1;
  display: flex;
  padding: 20px;
  align-items: flex-end;

}

.pic1 .box1 .con h3
{ 
  color: rgb(255, 255, 255);
  transition: 0.5s;
  text-transform: uppercase;
  margin-bottom: 45px; 
  font-size: 20px;
  transform: translateY(200px);
}
.pic1 .box1:hover  .con h3 
{
 transform: translate(0);
 transition-delay: 0.2s;

}

.pic1 .box1 .con p
{
  color: rgb(34, 7, 7);
  transform: translateY(200px);
  transition: 0.5s;
  font-size: 5px;

}

.pic1 .box1:hover .con{

  transform: translateY(0);
  transition-delay: 0.6s
  ;
}

.sub-menu-1{
  display: none;

}
.k{
  color: #fff;

}
.kh{
  color: rgb(255, 238, 1);
  
}
.photo1{
  margin-top: -5%;
  
}
.photo2{
  flex-wrap: wrap;
  display: flex;
 margin-left: 60%;
 margin-top: -30%;
 margin-bottom: 10%;
  
}
.meaning {
margin-top: -15%;
margin-left: -30%;
font-size: 1.7em;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
margin-right: -10%;


}



/*responsive website*/ 

@media screen and (max-width: 1060px){
    #primary { width: 67%; }
    #secondary {width: 30%; margin-left: 3%;}

}

@media screen and (max-width: 768px){
  #primary { width: 100%; }
  #secondary {width: 100%; margin-left: 0;border:none;}

}
img {
  max-width: 100%; height: auto;
}

@media ( min-device-width:600px)
{
  img[ data-src-600px] 
  {
    content: attr(data-src-600px, url );
  }
}

@media (min-device-width:800px)
{
  img[data-src-800px] {
    content: attr(data-src-800px, url);
  }
}

html{ font-size: 100%;}

@media (min-width:640px) {body {font-size: 1rem;} }
@media (min-width:960px) { body{font-size: 1.2rem;} }
@media (min-width:1100px) { bofy{ font-size: 1.5rem;}}