body {
  box-sizing: border-box;
  margin: 0px;
  padding: 0px;
  font-size: 18px;
  
}


* {
  box-sizing: border-box;
}
a{
  list-style: none;
  text-decoration: none;
}
nav {
  border-bottom: 1px solid #ccc;
  background: white;
  display: flex;
  position: fixed;
  justify-content: space-around;
  width: 80%;
  height: 60px;
  top: 0;
  
  

  
}
/* @media (max-width: 768px){
  nav ul li #hid{
    display: none;
  }
} */
nav .mobile-bar {
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 0.5em 1em;
  display: none;
}
@media (max-width: 1024px) {
  nav .mobile-bar {
    display: flex;
    
  }
}
nav .mobile-bar span {
  display: block;
  height: 2px;
  width: 20px;
  margin: 2px;
  background: #888;
}
nav .mobile-bar.active {
  background: #333;
}
nav .mobile-bar.active span {
  background: white;
}
nav .mobile-bar:hover {
  background: #e1e1e1;
}
nav .mobile-bar:hover span {
  background: #444;
}
nav .mobile-bar:hover.active {
  background: #222;
}
nav .mobile-bar:hover.active span {
  background: white;
}
nav ul {
  list-style: none;
  margin: 1%;
  
  transition: ease 1s all;
}
@media (max-width: 1024px) {
  nav ul {
    opacity: 0;
    max-height: 0px;
    overflow: hidden;
    visibility: none;
    display: flex;
    flex-direction: column;
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    text-align: center;
    background-color: #f1f1f1;
    margin-left: -100%;
    padding-left: 25%;
  }
  nav ul.active {
    opacity: 1;
    max-height: 500px;
    right: 0;
    margin-left: 0%;
    background-color: #e1e1e1;
  }
  nav ul.active li {
    display: block;
  }
  nav ul.active li a {
    display: block;
  }
}
nav ul li {
  display: inline-block;
  
  
}
nav ul li a {
  display: inline-block;
  color: black;
  text-decoration: none;
  padding: 0.5em 1em;
}
nav ul li a:hover {
  background: #e1e1e1;
}


.orginal ul{
  display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	padding: 2px;
	list-style: none;
 
}


.add1,.add3{
  width: 100%;
  height: 130px;
  background-image: url(add/bg.png);
  flex: 1 1 100%;
  margin: 9%;
}
.add2,.add4{
  width: 100%;
  height: 190px;
  background-image: url(add/bg.png);
  flex: 1 1 100%;
  margin: 0 5%;

}
body .continer ul{
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  padding-left: 8%;
  list-style: none;

  
}

.first{
  background-color: ;
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;  
  width: 10%;
  height: 92%;
  background-image: url(add/bg.png);
  list-style: none;
  position: fixed;
  left: 0;
   }


.second{
  width: 80%;
  padding: 2px;
  margin: 2%;
  list-style: none;

  
}
.third{
  width: 10%;
  height: 92%;
  background-color: ;
    background-image: url(add/bg.png);

  list-style: none;
  position: fixed;
  right: 0;
}
@media only screen and (max-width: 600px) {
  .first {
    display: none;
  }
  .third {
    display: none;
  }
  .second {
    width: 100%;
  }
  body .continer ul{
    width: 100%;
    padding: 0;
    margin: 0; 
  }
  nav{
    width: 100%;
    margin-right: -10%;
    /*justify-content: space-between;*/
  }
  nav h2{
    font-size: 1.2em;
  }
}
  
.content3{
  display: flex;
}
.content3 h1{
  font-size: 24px;
  margin-left: 50%;
  
}
.line4{
  width: 880px;
  height: 1px;

  margin: auto;
}
.child-19{
  width: 100%;
  height: 300px;
  border-radius: 25px;
  flex: 1 1 150px;
  margin: 2% 2% 10% 0;
}
.child-20{
  width: 100%;
  height: 300px;

  flex: 1 1 150px;
 margin: 2% 2% 10% 0;
 border-radius: 25px;
}
.child-21{
  width: 100%;
  height: 300px;
  flex: 1 1 150px;
  margin: 2% 2% 10% 0;
  border-radius: 25px;
}
.child-22{
  width: 100%;
  height: 300px;
  border-radius: 25px;
  flex: 1 1 200px;
  margin: 2% 2% 10% 0;
}
.child-23{
  width: 100%;
  border-radius: 25px;
  background-repeat: no-repeat;
  background-size: cover;
  height: 300px;
  
  flex: 1 1 200px;
  margin: 2% 2% 10% 0;
}
.child-24{
  /*background-image: url(https://images.newindianexpress.com/uploads/user/ckeditor_images/article/2020/11/12/da.jpg);
  background-repeat: no-repeat;
  background-size: cover;*/
  width: 100%;
  border-radius: 25px;
  height: 300px;
  
  flex: 1 1 200px;
  margin: 2% 2% 10% 0;
}
.cinemaadd{
  width: 100%;
  height: 150px;
  background-color: ;
  flex: 1 1 100%;
  margin: 9%;
}






.one{
  width: 90%;
  height: %;
  display: flex;
}
.left{
  
  margin: 1%;
  display: flex;
  padding: 10px;
  list-style: none;
}
.left h3{
  font-size: 16px;
  margin: 0;
  color: red;
}
.left h4{
  margin: 0;
  color: red;
}
hr{
  width: 100%;
  background-color: red;
  height: 1px;
  border: none;
}
.right {
  width: 90%
  padding: 0px 10%;
  flex-wrap: wrap;
  }
/*.right h3{
  color: black;

}*/
.right h2{
  list-style: none;
  color: white;
  font-size: 18px;
  padding: 2% 23% 0% 10%;
  flex-wrap: wrap;
}
.tech .right h2{
  width: 100%;

}
@media only screen and (max-width: 600px) {
  .right h2 {
   font-size: 18px;

  }
}




.content7 h1{
  font-size: 24px;
  display: flex;
  justify-content: center;
}
/*.line8{
  width: 880px;
  height: 1px;
  background-color: black;
  margin: auto;
}*/
.column {
  
  width: 50%;
  margin-top: 6px;
  margin-left: 25%;
  padding: 20px;
}
input[type=text], select, textarea {
  width: 100%;
  padding: 12px;
  border: 1px solid #ccc;
  margin-top: 6px;
  margin-bottom: 16px;
  resize: vertical;
}
input[type=email], select, textarea {
  width: 100%;
  padding: 12px;
  border: 1px solid #ccc;
  margin-top: 6px;
  margin-bottom: 16px;
  resize: vertical;
}
input[type=submit] {
  background-color: #4CAF50;
  color: white;
  padding: 10px 15px;
  border: 5px;
  cursor: pointer;
   border-radius: 20px;
    font-size: 12px;
    text-align: center;
}

input[type=submit]:hover {
  background-color: #45a049;
}
@media screen and (max-width: 600px) {
  .column, input[type=submit] {
    width: 100%;
    margin-top: 0;
    margin-left: 0;
  }
}






                                              /*adds*/



.first{
  background-image: url(../../add/photos/firstadd.png);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  animation: blink 1s infinite;

}

.third{
  background-image: url(../../add/photos/secondadd.png);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  animation: blink 1s infinite;
}
.add1,.add3,#addbelow{
  background-image: url(../../add/photos/add1.png);
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
  animation: blink 1s infinite;
  z-index: -3;
}
#tadd{
 background-image: url(../../add/photos/add2.png);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;

  z-index: -3; 
}



/*flip*/
.close {
  cursor: pointer;
  position: absolute;
  padding: 3px 5px;
  transform: translate(0%, -50%);
  background-color: red;
    border-radius: 50%;
   right: 100%;
   top: 0%;
    
    


}

.flip-box {
  background-color: transparent;
  width: 100px;
  height: 95px;
  perspective: 1000px;
  position: fixed;
  right: 15%;
  bottom: 5%;


}

.flip-box-inner{
  position: absolute;
  width: 100%;
  height: 100%;
  text-align: center;
  transition: transform 0.8s;
  transform-style: preserve-3d;
    box-shadow: 1px 5px 5px #aaaaaa;
    border-radius: 10px;
}

.flip-box:hover .flip-box-inner {
  transform: rotateY(180deg);
}

.flip-box-front, .flip-box-back{
  position: absolute;
  width: 100%;
  height: 100%;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  border-radius: 10px;
}

.flip-box-front {
  background-color: #bbb;
  color: black;
  margin: 0;
  padding: 0;
}

.flip-box-back {
  background-color: #555;
  color: white;
  transform: rotateY(180deg);

}
.flip-box-inner{
  animation: rotation 5s infinite ease;
}

@keyframes rotation {
  from {
    transform: rotateY(0deg);
  }
  to {
    transform: rotateY(359deg);
  }}

  #footer{
    width: 89%;
    position: relative;
    left: 10.5%;
    /* right: 25%; */
  }
  @media only screen and (max-width: 980px) {
  #footer{
    width: 100%;
    position: relative;
    left: 0%;
  }
  }