/* text animation */
.content {
position: relative;
} 
.content h2 {
color: rgb(255, 255, 255);
font-size: 4.5em;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
position: absolute;
transform: translate(-50%, -50%);
left: 700px !important;
top: 250px !important;
}
@media only screen and (max-width:1165px){
.content h2 {
color: #fff;
font-size: 6em;
position: absolute;
transform: translate(-50%, -50%);
left: 650px !important;
top: 250px !important;
} 
}
@media only screen and (max-width:1084px){
.content h2 {
color: #fff;
font-size: 6em;
position: absolute;
transform: translate(-50%, -50%);
left: 580px !important;
top: 250px !important;
} 
  }
@media only screen and (max-width:980px){
.content h2 {
color: #fff;
font-size: 6em;
position: absolute;
transform: translate(-50%, -50%);
left: 510px !important;
top: 250px !important;
} 
  }
@media only screen and (max-width:915px){
.content h2 {
color: #fff;
font-size: 6em;
position: absolute;
transform: translate(-50%, -50%);
left: 460px !important;
top: 250px !important;
} 
  }
@media only screen and (max-width:799px){
.content h2 {
color: #fff;
font-size: 6em;
position: absolute;
transform: translate(-50%, -50%);
left: 400px !important;
top: 250px !important;
} 
  }
@media only screen and (max-width:755px){
.content h2 {
color: #fff;
font-size: 6em;
position: absolute;
transform: translate(-50%, -50%);
left: 400px !important;
top: 250px !important;
} 
  }
@media only screen and (max-width:687px){
.content h2 {
color: #fff;
font-size: 6em;
position: absolute;
transform: translate(-50%, -50%);
left: 320px !important;
top: 250px !important;
} 
  }
@media only screen and (max-width:600px){
.content h2 {
color: #fff;
font-size: 6em;
position: absolute;
transform: translate(-50%, -50%);
left: 250px !important;
top: 250px !important;
} 
  }
.content h2:nth-child(1) {
color: transparent;
-webkit-text-stroke: 2px white;
font-weight: bold;
  }
.content h2:nth-child(2) {
color: orangered;
animation: animate 5s ease-in-out infinite;
font-weight: bold;
}
  
@keyframes animate {
0%,
100% {
clip-path: polygon(
0% 45%,
16% 44%,
33% 50%,
54% 60%,
70% 61%,
84% 59%,
100% 52%,
100% 100%,
0% 100%
);
  }
50% {
clip-path: polygon(
0% 60%,
15% 65%,
34% 66%,
51% 62%,
67% 50%,
84% 45%,
100% 46%,
100% 100%,
0% 100%
);
}
  }
  /* font family */
.good{
  font-family: Verdana, Geneva, Tahoma, sans-serif;
}
.logo{
height: 160px;
width: 250px;
  }
.navbar {
  background-color: rgb(199, 197, 197);
/* margin-top: 10px !important; */
  }
.nav-link{
color: white;
font-weight: bold;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
font-size: 1.3rem;
  }
.link{
color: black !important;
cursor: pointer;
  }
.link:hover{
border-bottom: 2px solid rgb(218, 181, 112) !important;
transition: 0.5s !important;
  }
.dropdown:hover>.dropdown-menu {
display: block;
  }
.dropdown>.dropdown-toggle:active {
/*Without this, clicking will make it sticky*/
pointer-events: none;
  }
  /* navbar */
#navbar{
z-index: 100;
padding: 20px;
text-align: center;
  }
.service a:hover{
background-color: rgb(218, 181, 112) ;
color: white;
transition: 0.5s;
  }
.btn2{
background-color: transparent !important;
border: none !important;
box-shadow: none !important;
margin-top: 7px !important;
  }
.service{
background-color: rgb(51, 45, 45) !important;
color: white !important;
cursor: pointer !important;
  }
.service a {
color: white !important;
cursor: pointer !important;
  }
.service a:hover{
background-color: rgb(218, 181, 112) ;
color: white;
transition: 0.5s;
  }
  /*----------------------------- for header---------------------------- */
#div-one{
height: 100vh;
overflow: hidden;    
  }
.headertwobg{
position: absolute;
top: 0;
height: 100vh;
z-index: -99;
padding: 0px;
overflow: hidden;
width: 100%;
background-position: center;
  }
.headertwobg img{
width: 100%;
height: 100vh;
object-fit: cover;
  }
/* @-webkit-keyframes zoom {
0%,100% {
 -webkit-transform: scale(1.3, 1.3);
}
50%{
-webkit-transform: scale(1.4, 1.4);
}
  }
@keyframes zoom {
0%,100% {
transform: scale(1.3, 1.3);
}
50% {
transform: scale(1.4, 1.4);
}
} */
.headertwobg > img {
-webkit-animation: zoom 6s linear infinite;
animation: zoom 6s linear infinite;  
 } 
.text{
color: rgb(255, 255, 255) ;
font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif ;
margin-top: 170px;
font-size: 4rem;
font-weight: bold;
  }
@media only screen and (max-width:768px){
.text{
margin-top: 160px;
}
  }
.text-one{
color: rgb(39, 39, 39);
font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif ;
font-size: 5em;
font-weight: bold;
}
#bg-color{
background-color: rgb(51, 45, 45);
padding-top: 20px;  
  }
#column-one{
height: 400px;
/* background-image: url("images/image.jpg"); */
background-image: url("images/al\ wafra.jpg");
background-position: center;
background-size: cover;
position: relative;
cursor: pointer;
  }
#column-two{
height: 400px;
/* background-image: url("images/image\ 2.jpg"); */
background-image: url("images/aibans.jpg");
background-position: center;
background-size: cover;
position: relative;
cursor: pointer;
  }
#column-three{
height: 600px;
/* background-image: url("images/image-3.jpg"); */
background-image: url("images/lesmo.jpg");
background-position: center;
background-size: cover;
position: relative;
cursor: pointer; 
  }
#column-four{
height: 600px;
background-image: url("images/quaid.jpg");
background-position: center;
background-size: cover;
position: relative;
cursor: pointer;
  }
#column-five{
height: 400px;
/* background-image: url("images/image-5.jpg"); */
background-image: url("images/karachi-uni.jpg");
background-position: center;
background-size: cover;
position: relative;
cursor: pointer;
  }
#column-six{
height: 400px;
background-image: url("images/national-academy-of-performing.jpg");
background-position: center;
background-size: cover;
position: relative;
cursor: pointer;
  }
#column-seven{
height: 400px;
 background-image: url("images/image-7.jpg"); 
background-position: center;
background-size: cover;
position: relative;
cursor: pointer;
  }
#column-eight{
height: 400px;
background-image: url("images/image-8.jpg");
background-position: center;
background-size: cover;
position: relative;
cursor: pointer;
   
  }
#column-nine{
height: 400px;
/* background-image: url("images/image-9.jpg"); */
background-image: url("images/Faizan-e-Madina.jpg");
background-position: center;
background-size: cover;
position: relative;
cursor: pointer;
  }
#column-ten{
height: 400px;
/* background-image: url("images/image-10.jpg"); */
background-image: url("images/marriot.jpg");
background-position: center;
background-size: cover;
position: relative;
cursor: pointer;
  }
#column-eleven{
height: 400px;
background-image: url("images/image-11.jpg");
background-position: center;
background-size: cover;
position: relative;
cursor: pointer;
  }
#column-twelve{
height: 400px;
background-image: url("images/image-12.jpg");
background-position: center;
background-size: cover;
position: relative;
cursor: pointer;
  }
#column-thirteen{
height: 400px;
/* background-image: url("images/image-13.jpg"); */
background-image: url("images/national-foods.jpg");
background-position: center;
background-size: cover;
position: relative;
cursor: pointer;
  }
#column-fourteen{
height: 400px;
/* background-image: url("images/image-14.jpg"); */
background-image: url("images/ici.jpg");
background-position: center;
background-size: cover;
position: relative;
cursor: pointer;
  }
#column-fifteen{
height: 400px;
background-image: url("images/image-15.jpg");
background-position: center;
background-size: cover;
position: relative;
cursor: pointer;
  }
#column-sixteen{
height: 400px;
background-image: url("images/image-16.jpg");
background-position: center;
background-size: cover;
position: relative;
cursor: pointer;
  }
#column-seventeen{
height: 400px;
background-image: url("images/image-17.jpg");
background-position: center;
background-size: cover;
position: relative;
cursor: pointer;
  }
#column-eighteen{
height: 400px;
/* background-image: url("images/image-18.jpg"); */
background-image: url("images/Chemical-Processing-Plant-Commercial-Electrician.jpg");
background-position: center;
background-size: cover;
position: relative;
cursor: pointer;
  }
#column-nineteen{
height: 400px;
background-image: url("images/image-19.jpg");
background-position: center;
background-size: cover;
position: relative;
cursor: pointer;
  }
#column-twenty{
height: 400px;
background-image: url("images/image-20.jpg");
background-position: center;
background-size: cover;
position: relative;
cursor: pointer;
  }
#column-twentyone{
height: 400px;
background-image: url("images/image-21.jpg");
background-position: center;
background-size: cover;
position: relative;
cursor: pointer;
  }
#column-twentytwo{
height: 400px;
background-image: url("images/image-22.jpg");
background-position: center;
background-size: cover;
position: relative;
cursor: pointer;
  }
#column-twentythree{
height: 400px;
background-image: url("images/image-23.jpg");
background-position: center;
background-size: cover;
position: relative;
cursor: pointer;
  }
#column-twentyfour{
height: 400px;
background-image: url("images/image-24.jpg");
background-position: center;
background-size: cover;
position: relative;
cursor: pointer;
  }
#column-twentyfive{
height: 350px;
background-image: url("images/image-25.jpg");
background-position: center;
background-size: cover;
position: relative;
cursor: pointer;
  }
#column-twentysix{
height: 350px;
/* background-image: url("images/image-26.jpg"); */
background-image: url("images/navy.jpg");
background-position: center;
background-size: cover;
position: relative;
cursor: pointer;
  }
#column-twentyseven{
height: 400px;
background-image: url("images/image-27.jpg");
background-position: center;
background-size: cover;
position: relative;
cursor: pointer;
  }
#column-twentyeight{
height: 400px;
/* background-image: url("images/image-28.jpg"); */
background-image: url("images/bon.jpeg");
background-position: center;
background-size: cover;
position: relative;
cursor: pointer;
  }
#column-twentynine{
height: 400px;
/* background-image: url("images/image-29.jpg"); */
background-image: url("images/agha-khan.jpg");
background-position: center;
background-size: cover;
position: relative;
cursor: pointer;
  }
#column-thirty{
height: 400px;
background-image: url("images/image-30.jpg");
background-position: center;
background-size: cover;
position: relative;
cursor: pointer;
  }
#column-thirtyone{
height: 400px;
/* background-image: url("images/image-31.jpg"); */
background-image: url("images/jamalnoor.jpg");
background-position: center;
background-size: cover;
position: relative;
cursor: pointer;
  }
#column-thirtytwo{
height: 400px;
background-image: url("images/image-32.jpg");
background-position: center;
background-size: cover;
position: relative;
cursor: pointer;
  }
#column-thirtythree{
height: 400px;
background-image: url("images/image-33\ \(2\).jpg");
background-position: center;
background-size: cover;
position: relative;
cursor: pointer;
  }
#column-thirtyfour{
height: 400px;
 background-image: url("images/image-34.jpg"); 
background-position: center;
background-size: cover;
position: relative;
cursor: pointer;
  }
/* #column-thirtyfive{
height: 400px;
background-image: url("images/image-35.jpg");
background-position: center;
background-size: cover;
position: relative;
cursor: pointer;
  } */
#column-thirtythree{
height: 400px;
background-image: url("images/image-33\ \(2\).jpg");
background-position: center;
background-size: cover;
position: relative;
cursor: pointer;
  } 
#column-thirtyfour{
height: 400px;
/* background-image: url("images/image-34.jpg"); */
background-image: url("images/golf.jpg");
background-position: center;
background-size: cover;
position: relative;
cursor: pointer;
  } 
#column-thirtysix{
height: 900px;
background-image: url("images/image-36.jpg");
background-position: center;
background-size: cover;
position: relative;
cursor: pointer;
  } 
#column-thirtyseven{
height: 900px;
background-image: url("images/image-37.jpg");
background-position: center;
background-size: cover;
position: relative;
cursor: pointer;
  } 
#column-thirtyeight{
height: 900px;
background-image: url("images/image-38.jpg");
background-position: center;
background-size: cover;
position: relative;
cursor: pointer;
  } 
#column-thirtynine{
height: 900px;
background-image: url("images/image-39.png");
background-position: center;
background-size: cover;
position: relative;
cursor: pointer;
  } 
#column-fourty{
height: 400px;
background-image: url("images/image-40.jpg");
background-position: center;
background-size: cover;
position: relative;
cursor: pointer;
  } 
#column-fourtyone{
height: 400px;
background-image: url("images/image-41.jpg");
background-position: center;
background-size: cover;
position: relative;
cursor: pointer;
  } 
.btn{
height: 50px;
width: 130px;
margin-top: 10px;
background-color: transparent !important;
border: 2px solid rgb(218, 181, 112) !important;
color: white;
padding: 10px !important;
}
.btn:hover{
background-color: rgb(218, 181, 112) !important;
transition: 0.5s !important;
}
.img{
height: 20vh;
}
@media only screen and (max-width:992px){
.btn{
margin-bottom: 20px;
}
 }
.color{
background-color: rgb(51, 45, 45) !important;
color: white !important;
font-family: Verdana, Geneva, Tahoma, sans-serif;
  }
.good{
font-family: Verdana, Geneva, Tahoma, sans-serif;
  }
/* heading media screen ends */
/* .change{
display: none;
color: orangered;
margin-top: 200px;
font-size: 2.6rem;
font-weight: bold;
} */
/* @media only screen and (max-width:1430px){
.change{
 display: block;
}
.small{
display: none;
}
}
*/
@media only screen and (max-width:344px){
.logo{
height: 100px;
width: 150px;
 }
} 
.urban{
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
color: rgb(218, 181, 112);
margin-top: 300px;
font-weight: 900;
font-size: 70px;
}
@media only screen and (max-width:531px){
.urban{
font-size: 50px;
}
 }
@media only screen and (max-width:396px){
.urban{
font-size: 30px;
}
 }
.btn-3{
border: none;
outline: none;
margin-top: 5px !important;
}