:root {
  --bg: #fff;
  --text: #ff99ff;
  --nav-bg: #ff99ff;
   --nav-bg1: #1317e9;
  --nav-text: #ffffff;
  --highlight: #ffcc00;
  --transition: 0.3s ease;
  --brown: #9A621C;
}

body {
  margin: 0;
  font-family: Arial, sans-serif;
  background-color: var(--bg);
  /* background-image: url(img/bg28.png);   calc(100%)*/
  background-image: url(i mg/ahw71.jpg );
  
   background-size: calc(100%) 600px ;
   
    background-repeat: no-repeat;
  color: var(--text);
  transition: background-color var(--transition), color var(--transition);
}




.top-bar {
    background: var(--brown);
    color: #fff;
	height:50px;
    padding: 8px 40px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 14px;
}








.contact-info i {
    margin-right: 10px;
    cursor: pointer;
}
.right-top a {
    color: #f1c40f;
    margin-right: 10px;
    text-decoration: none;
}



.navbar {
	height: 90px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: rgba(0, 0, 0,0);
    padding: 15px 20px;
	 position: sticky;
	  top: 0;
	   z-index: 1000;
	  animation: fadebgo .5s ease-in;  
	  
	  
	  
}
.navbar.scrolled {
	overflow:hidden;
	height: 90px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    
    padding: 15px 20px;
	 position: sticky;
	  top: 0;
	   z-index: 1000;
	background-color: rgba(0, 0, 0,1);
	 
	  animation: fadebgi .5s ease-in;
	  
}



.logo {
    display: flex;
    align-items: center;
    color: #fff;
    font-size: 18px;
}

.logo img {
    height: 300px;
    margin-right:- 100px;
	margin-left: 50px;
}


.nav-links {
    list-style: none;
    display: flex;
    gap: 20px;
	margin-right:20px;
}

.nav-links li a {
    text-decoration: none;
    color:rgba(115, 107, 107,1);
    font-weight: bold;
    transition: color 0.3s;
}

.nav-links li a:hover {
    color: #f1c40f;
}



.content {
  padding: 20px;
  
  
  
  animation: fadeIn 1s ease-in;
}

.page{
	
	
	 background-image: url(img/ahw91.jpg );
  
   background-size: calc(100%) 300px ;
   
    background-repeat: no-repeat;
	
}
.page h1{ 


    text-align:center;
    background-color: rgba(0,0,0,0);
	align-items: center;
	margin-top:-50px;
	
    color: #000;
    padding: 8px 20px;
    font-size: 44px;

}
.page p{ 



    text-align:center;
    background-color: rgba(0,0,0,0);
	align-items: center;
	margin-top:10px;
	
    color: #000;
    padding: 8px 20px;
    font-size: 18px;

}


 .content section {
    height: 400px;
  border-bottom: 1px solid #ccc;
}



/* Animation */
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(50px);
  } 
  to {
    opacity: 1;
    transform: translateY(0);
  }
}



@keyframes fadebgi {
  from {
    
    background-color:  rgba(0, 0,0,0) 
  } 
  to {
    
    background-color:  rgba(0,0,0,1) 
  }
}

@keyframes fadebgo {
  from {
    
    background-color:  rgba(0,0,0,1) 
  } 
  to {
    
    background-color:  rgba(0, 0, 0,0) 
  }
}


.hero {
    background-image: url('img/ahw 71.jpg');
    background-size: cover;
    background-position: center;
    padding: 10px 20px;
    text-align: left;
	height: auto;
	
	
	
}

.hero1 {
     height: 300px;
    margin-left: 100px;
    padding: 100px 20px;
    text-align: right;
}

.hero-content h1 {
    font-size: 48px;
    font-weight: 800;
    margin-bottom: 20px;
	color:black;
}

.hero-content p {
    font-size: 18px;
    margin-bottom: 30px;
	color:white;
}

.hero-buttons button {
    padding: 12px 24px;
    font-size: 16px;
    margin: 0 10px;
    border: none;
    cursor: pointer;
    transition: background 0.3s;
}

.btn-primary {
    background-color: #f1c40f;
    color: #000;
}

.btn-primary:hover {
    background-color: #e2b607;
	
}

.btn-secondary {
    background-color: #fff;
    color: #000;
}

.btn-secondary:hover {
    background-color: #ddd;
}






.flex{
    display: flex;
    align-items: center;

}


/* example section */

.example-header{
    
    flex-direction: column;
    gap: 20px;
    text-align: center;
}

.examle-section{
    padding: 60px var(--padding-inline-sec);
}
.example-aria{
    justify-content: space-between;
    margin-block: 35px;
    flex-wrap: wrap;

}
.container{
    max-width: auto;
    margin-inline: auto;
    padding-inline: var(--padding-inline-sec);
    overflow: hidden;
    box-shadow: 0 0 10px rgba(218, 231, 31, 0.1);
	margin:60px 60px;

}

.example-card{
    width: 19%;
    position: relative;
    height: 400px;
    background: black;
    background: linear-gradient(rgb(0,0,0,0.1),rgb(0 ,0,0,0.8)), url(img/image1.jpg);
    transition: .2s ease-out;
	border-radius:  20px ;
}
.example-card:nth-child(2){
    background: linear-gradient(rgb(0,0,0,0.1),rgb(0 ,0,0,0.8)),url(img/image2.jpg);
    background-size: auto;

}
.example-card:nth-child(3){
    background: linear-gradient(rgb(0,0,0,0.1),rgb(0 ,0,0,0.8)), url(img/image3.jpg);
    background-size: auto;

}
.example-card:nth-child(4){
    background: linear-gradient(rgb(0,0,0,0.1),rgb(0 ,0,0,0.8)), url(img/image4.jpg);
    background-size:auto;

}

.example-card:hover{
    box-shadow: 0 0 10px #555;
}
.card-text{
    position: absolute;
    bottom: 20px;
    left: 20px;
    right: 20px;
    color: white;
}
 /* big features section */

.big-feature-section{
    padding: 30px var(--padding-inline-sec) 0;
    background-image: url(bg1211.png);
    background-repeat: no-repeat;
    background-position: center;
    
}
.big-feature-container{
    gap: 50px;

}
#sec-big-feature{
    flex-direction: row-reverse;
}
.feature-img img {
width: 600px;
height:400px;
border: solid red;
}
.featrue-desc{
    flex-direction: column;
    align-items: flex-start;
}

.left {
    left: -150px;
    top: 50%;
    animation-name: slideInLeft;
	z-index -999;
}
.hmoved.right {
    right: -15px;
    top: 50%;
    animation-name: slideInRight;
}








@keyframes fadeInvin {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@keyframes slideInLeft {
    from {
        transform: translateX(-100%);
    }
    to {
        transform: translateX(140%);
    }
}

@keyframes slideInRight {
    from {
        transform: translateX(100%);
    }
    to {
        transform: translateX(-110%);
    }
}