@charset"utf-8";

html{
height: 100%;
}

body{
color: #000;
width:100%;
/* background-image:url('images/texture2.png');  */
/* background-color: #182034; */
}


*{
/*fontawesome for all elements*/
font-family:"Font Awesome\ 5 Pro" , arial , Open Sans, sans-serif; 
padding: 0;
margin: 0;
box-sizing: border-box;
}


:root {
--primary: #6a11cb;
--secondary: #2575fc;
--accent: #ff6b6b;
--light: #f8f9fa;
--dark: #212529;
--transition: all 0.3s ease;
}


@font-face{
font-family:'leafy_font';
src: url(fonts/Leafy-Regular.ttf);
}

.leafy_font {
font-family: leafy_font;
/*font-size:20px;*/
}




@font-face{
font-family:'jameel_noori_kasheeda';
src: url(fonts/urdu/Jameel_Noori_Nastaleeq_Kasheeda.ttf);
}
@font-face{
font-family:'jameel_noori_regular';
src: url(fonts/urdu/Jameel_Noori_Nastaleeq_Regular.ttf);
}

.jameel_noori_kasheeda {
font-family: jameel_noori_kasheeda;
/*font-size:20px;*/
}


.jameel_noori_regular {
font-family: jameel_noori_regular;
}


















#header {
display: flex;
/* flex-direction: column; */
align-items:center;
justify-content: space-between;
padding:20px 20px;	
/*background: #000;*/
color:#000;
/* border:1px solid blue; */
/* background:#fffffb; */
background:#073839;
background:#fff;
/* background:#2a7de1; */


  /* background:#182034;   */

/* background:#ccc; */

}


#logo_container{
display:flex;
justify-content:center;
align-items:center;
}
#header i{
font-size: 55px;
cursor:pointer;
color: #2a7de1;

} 

#logo_container div{
display:flex;
flex-direction:column;
padding:10px;
}



#logo_container div h1 {
font-size: 2.5rem;
font-weight: 700;
/* background: linear-gradient(90deg, #ff6b6b, #4ecdc4, #45b7d1, #96ceb4, #ffeaa7, #ff6b6b); */
/* background-color: lightblue; */
/* -webkit-background-clip: text; */
/* background-clip: text; */
color: #2a7de1;
letter-spacing: -1px;
 /* -webkit-text-stroke: .5px #000; */
 /* paint-order: stroke fill; */
}



#logo_container div p {
    /* margin-top: 20px; */
font-size: 1rem;
color: #7f8c8d;
font-weight: 500;
color:gray;
/* text-align: center; */
}





#menu_container a{
padding:10px 15px;
margin:5px;
color:#333;
cursor:pointer;
border-radius: 5px;
transition: .5s;
border:1px solid #333;
text-decoration:none;
}


#menu_container a:hover{ 

background-color: #537de1;
color:#fff;
}





@media only screen and (max-width:1050px){

#header {

flex-direction: column;
/* padding:0; */

}

#logo_container{
  /* background:blue; */
  width:100%;
  justify-content:flex-start;
  /* border-bottom:1px solid white; */
  /* padding:20px 0; */

}


#menu_container {
  padding:25px 0;
  background
}

}


@media only screen and (max-width:600px){
  #logo_container {
    justify-content:center;
    padding:0;
  }
#logo_container img{

}

#logo_container div h1 {
font-size: 2.5rem;
font-weight: 700;
background: linear-gradient(90deg, #ff6b6b, #4ecdc4, #45b7d1, #96ceb4, #ffeaa7, #ff6b6b);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
letter-spacing: -1px;
}


#menu_container { 
display:flex;
flex-direction:column;
/* background:green; */
width: 100%;
padding:10px;
}

#menu_container a {
  /* width:100%;  */
  text-decoration:none;
}



}





















/* Slider Styles */
.slider {
height: 500px;
position: relative;
overflow: hidden;
margin-bottom: 60px;
}

.slide {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 0;
transition: opacity 1s ease;
display: flex;
align-items: center;
justify-content: center;
color: white;
text-align: center;
padding: 0 10%;
}

.slide.active {
opacity: 1;
}

.slide-1 {
background: url('images/banner_images/1.jpg');
background-size: cover;
background-position: center;
}

.slide-2 {
/* background: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), url('images/banner_images/4.jpg'); */
background: url('images/banner_images/2.jpg');
background-size: cover;
background-position: center;
}

.slide-3 {
background:url('images/banner_images/3.jpg');
background-size: cover;
background-position: center;
}

.slide-content {
max-width: 800px;
transform: translateY(30px);
transition: transform 1s ease;
background-color: rgba(70, 81, 90, 0.54); 
border-radius: 15px;
padding:10px;
}

.slide.active .slide-content {
transform: translateY(0);
}

.slide h2 {
font-size: 3rem;
margin-bottom: 20px;
text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
}

.slide p {
font-size: 1.2rem;
margin-bottom: 30px;
}

.btn {
display: inline-block;
background: var(--accent);
color: white;
padding: 12px 30px;
border-radius: 30px;
text-decoration: none;
font-weight: 600;
transition: var(--transition);
border: none;
cursor: pointer;
}

.btn:hover {
background: #ff5252;
transform: translateY(-3px);
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
}

.slider-dots {
position: absolute;
bottom: 30px;
left: 50%;
transform: translateX(-50%);
display: flex;
}

.dot {
width: 12px;
height: 12px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.5);
margin: 0 8px;
cursor: pointer;
transition: var(--transition);
}

.dot.active {
background: white;
transform: scale(1.2);
}







@media (max-width: 992px) {

.slide h2 {
font-size: 2.5rem;
}

}

@media (max-width: 768px) {

.slider {
height: 400px;
}

.slide h2 {
font-size: 2rem;
}

.slide p {
font-size: 1rem;
}
}



/* end slider */





/* bottom fixed menu */



#fixed_contact {


position:fixed;
bottom:30px; 
right:20px; 
z-index:9999;


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



background:#blue;

}


#fixed_contact div{
display:flex;
justify-content:center;
align-items:center; 
width:80px; 
height:80px; 
border-radius:50%; 
padding:20px; 
font-size:50px; 
color:#fff; 
background:green;
box-shadow:0 0 10px gray;
cursor:pointer;
}


#fixed_contact a{
padding:10px;
color:#182034;
box-shadow:0 0 10px gray;
border-radius:10px;
margin-right:5px;
background:#fff;
box
}


/* bottom fixed menu */




/* Animated gradient box */
.animated-box {
position: relative;
padding: 10px;
border-radius: 20px;
width:90%;
margin:0 auto;
color: #ffffff;
font-size: 20px;
/* font-weight: 600; */
text-align: center;
overflow: hidden;
z-index: 0;




}

/* Animated gradient background */
.animated-box::before {
content: "";
position: absolute;
inset: 0;
border-radius: 20px;
background: linear-gradient(270deg,
#ff5f6d,
#ffc371,
#47ff00,
#00c6ff,
#9c27b0,
#ff0099,
#ff5f6d);
background-size: 600% 600%;
animation: bgMove 25s ease infinite;
z-index: -2;
}

/* Subtle dark overlay to keep text readable */
.animated-box::after {
content: "";
position: absolute;
inset: 0;
border-radius: 20px;
background: rgba(0, 0, 0, 0.35);
z-index: -1;
}

/* Background animation */
@keyframes bgMove {
0% {
background-position: 0% 50%;
}

50% {
background-position: 100% 50%;
}

100% {
background-position: 0% 50%;
}
}
/* end Rotation border animation */



#welcome_text {
  display:flex;
  flex-direction: column;
  background-color: #2676d6;
  width:90%;
  margin:10px auto;
  padding: 50px 10px;
  border-radius: 10px;
}


#welcome_text h1 {
  text-align: center;
  padding: 10px 0;
  /* margin-bottom:10px; */
  color:#fefefe;
}

#welcome_text p {
  /* text-align: center;   */
  padding: 10px 0;
  /* margin-bottom:10px; */
  color:#fefefe;
}





@media only screen and (max-width:850px){
#welcome_text {
width:98%;

}

}









.services-section{
    padding:50px 20px;
    max-width:1200px;
    margin:auto;
}

.services-section h2{
    text-align:center;
    margin-bottom:40px;
    color:#1b3c59;
}

.cards{
    display:grid;
    grid-template-columns:repeat(auto-fit, minmax(250px, 1fr));
    gap:25px;
}

.card{
    background:#fff;
    border-radius:12px;
    padding:25px;
    text-align:center;
    box-shadow:0 6px 18px rgba(0,0,0,0.08);
    transition:0.3s ease;
}

.card:hover{
    transform:translateY(-8px);
    box-shadow:0 10px 25px rgba(0,0,0,0.12);
}

.card i{
    font-size:45px;
    color:#2a9d8f;
    margin-bottom:15px;
    font-style: normal !important;
}

.card h3{
    margin:10px 0;
    color:#1b3c59;
    font-size:20px;
}

.card p{
    font-size:14px;
    color:#555;
    line-height:1.6;
}


/* end services */






.review_heading{
    text-align:center;
    margin-bottom:40px;
    color:#1b3c59;
}


#reviews_container{
    /* background:#00b6de;
    background:#ff9800; */
width:100%;
  overflow: hidden;
  padding: 10px;
  display:flex;
  margin:10px 0;
}

#reviews_container::-webkit-scrollbar{
    /*width:0;*/
}


.review {
        flex-shrink: 0;

    
    display:flex;
    /*display:none;*/
    
  

    flex-direction:column;
    background:#f5f5f5;
    max-width:300px;
    /* border-radius:12px; */
    border:10px solid #fff;
    box-shadow:0 0 5px gray;
    padding:10px;
    margin:10px;
 
}
.review  div {
        display:flex;
        justify-content:space-between;
        align-items:center;
        padding:10px;
        /*background:green;*/
}



.review  div:first-child {
            display:flex;
        justify-content:flex-start;
       
}

 
.review  div:last-child p i {
    color:#fdd40b;
    
}







.review  div:first-child p {
padding:10px;
}


.review  div img{
    width:50px;
}

/*_________________*/


          .info-container {
            flex: 1;
            background: linear-gradient(135deg, #2575fc 0%, #6a11cb 100%);
            padding: 40px;
            color: white;
            display: flex;
            flex-direction: column;
            justify-content: center;
            width:90%;
            margin:20px auto;
            border-radius:10px;
        }


        .info-title {
            font-size: 32px;
            font-weight: 700;
            margin-bottom: 20px;

            border:1px solid white;
            border-radius:10px;
            padding:10px;
           width: max-content;

        }

        .info-list {
            list-style: none;
            margin-bottom: 30px;
            /* background:blue; */
            border:1px solid white;
            border-radius:10px;
            padding:20px 10px;
           /* width: max-content;  */
        }

      .info-list li {
            margin-bottom: 15px;
            display: flex;
            align-items: center;
        }

        .info-list i {
            margin-right: 10px;
            font-size: 18px;
            width: 24px;
        }



@media only screen and (max-width:850px){
.info-container{
width:98%;
}

}



/* end */


iframe{
  display: block;
  width:90%; 
  height:450px;  
  border:0; 
  margin:60px auto;
  border-radius:10px;
}

@media only screen and (max-width:850px){
iframe{
width:98%;
}

}



/* end */

#footer {
display: flex;
flex-direction: column;
width:90%;
margin:60px auto;
border:0;
border-radius:10px;

            background: linear-gradient(135deg, #2575fc 0%, #6a11cb 100%);

/* background-image: url('images/texture4.jpg'); */
/*background-repeat: no-repeat;*/
background-size: auto 100%; 
background-position: center;
/*border:10px solid green;*/
}
/**************************************************/
#footer_1st_row {
/*border:1px solid blue;*/
padding:10px;
}
#footer_1st_row div {
display: flex;
justify-content: center;
/*border-bottom:1px solid black;	*/
padding: 10px;
text-align: left;
/* background-color: rgba(70, 81, 90, 0.54);  */

 background: rgba(255, 255, 255, 0.1);

/*width: fit-content;*/
border-radius: 5px;
color:#fff;
text-shadow: 0 0 2px black;
margin:5px ;
}
#footer_1st_row div a {
border-right:1px solid white;
padding: 10px 35px;
font-size: 25px;
cursor: pointer;
text-decoration: none;
color:#fff;
}
#footer_1st_row div a:last-child {
border:0;
}

/**************************************************/

#footer_2nd_row {
display: flex;
flex-direction: row;
/*border:1px solid green;*/
justify-content: center;
width:60%;
margin:0 auto;
}
#footer_2nd_row div{
/*border:1px solid blue;*/
flex:1; /* equal full width*/
}

#footer_2nd_row p{
margin:12px;
/* background-color: rgba(70, 81, 90, 0.54);  */
 background: rgba(255, 255, 255, 0.1);
/*width: fit-content;*/
text-align: left;
border-radius: 5px;
padding: 10px;
color:#fff;
text-shadow: 0 0 2px black;
}



#footer_2nd_row p span{
	/*border:1px solid blue;*/
	width:150px;
	
display: inline-block;
}


h3{
padding: 10px 15px;
text-align: left;
/*border:1px solid blue;*/
text-decoration: underline;	
width: fit-content;
border-radius: 20px;
color:#fff;
}






.copyright {
padding: 20px 5px;
text-align: center;
background: #181a1b;
color:#fff;
}

.copyright a{
color:orange;
}


@media only screen and (max-width:1150px){

#footer_2nd_row {
width: 80%;
}


}



@media only screen and (max-width:850px){
#footer{
width:98%;
}

#footer_2nd_row {
width: 100%;
}


}


@media only screen and (max-width:690px){

#footer_2nd_row {
flex-direction: column;
}


}


@media only screen and (max-width:460px){

#footer_2nd_row {
flex-direction: column;
}

#footer_1st_row div a {
padding: 10px 20px;


}

}



@media only screen and (max-width:350px){

#footer_2nd_row {
flex-direction: column;
}

#footer_1st_row div a {
padding: 10px 15px;


}

}