*{
    margin: 0;
    padding: 0;
    /* line-height: 1.6; */
    font-family: 'poppins', sans-serif;
    box-sizing: border-box;
}

html{
    scroll-behavior: smooth;
}
body{
    background: linear-gradient(135deg,#759AAB, #a64bf4);
    color:rgb(236, 227, 227);
    /* background: #080808; */
}

/* navbar */

.navbar{
    color: #fff;
    background: linear-gradient(135deg,#759AAB, #a64bf4);
}

.navbar ul{
    list-style: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 100px 10px 100px;
}


.navbar ul li a { 
		text-decoration: none; 
		font-size: 24px; 
		font-weight: 600; 
		color: #fff; 
		position: relative; 

	} 

ul li a::before { 
		content: ""; 
		width: 0px; 
		height: 10px; 
		background: #fff; 
		position: absolute; 
		top: 100%; 
		left: 0; 
		transition: .5s; 
	} 

ul li a:hover::before { 
		width: 50%; 
		transform: translateX(100%); 
	} 

/* hero-section */

.hero{
    display: flex;
    align-items: center;
    justify-content: space-around;
    padding: 50px;
}
.contact-info a{
    text-decoration: none;
    color:rgb(236, 227, 227);
   
}

.about p{
    font-weight: 700;
    color: rgb(52, 45, 45);
    

}
.about .contact-info i{
    font-weight: 600px;
    font-size: 25px;
    color:#333;
    
}

.about .contact-info{
    font-weight: 550;
    word-spacing: 5px;
    margin-top: 12px;
    line-height: 30px;
}
.circle-container{
    position: relative;

}

.circle-bg{
    width: 160px;
    height: 160px;
    background-color: linear-gradiant(45deg,#1a73e8,#ff6f00);
    border-radius: 50%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
    animation: rotate 5s linear infinite;
}

.circle-container img{
    width: 200px;
    height: 200px;
    border:  solid 5px rgb(236, 227, 227);
    border-radius: 50%;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.circle-container img:hover{
    transform: scale(1.1);
    box-shadow: 0 15px 20px rgba(326, 227, 227, 0.4);
}

.about hero-title{
    max-width: 500px;
    font-size: 60px;
    margin-top: 20px;
}

h1 {
      font-weight: 700;
      font-size: 40px;
      color: #333;
    
}
/* services-section */

h2 {
    font-weight: 700;
    font-size: 40px;
    color: #333;
}
.services{
    text-align: center;
    padding: 30px;
    /* background-color: #f9f9f9; */
}

.service .service-item{
    display: inline-block;
    margin: 20px;
    text-align: center;
}

.service .service-item img{
    width: 220px;
    height: 200px;
    object-fit: cover;
    border-radius: 5px;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
 

.service .service-item img:hover{
    transform: scale(1.1);
    box-shadow: 0 15px 20px rgba(326, 227, 227, 0.3);
}


/* gallery */

.gallery{
    padding: 30px;
}

.gallery-grid{
    gap: 30px; 
    display: inline-block;
    margin:20px ;  
}

.gallery .gallery-grid img{
    width: 200px;
    height: 200px;
    object-fit: cover;
    border-radius: 5px;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.gallery .gallery-grid img:hover{
    transform: scale(1.1);
    box-shadow: 0 15px 20px rgba(326, 227, 227, 0.3);
}

/* contact-section */

.contact {
    padding: 30px;
    align-items: center;
    justify-content: center;
}

.contact  form{
    display: flex;
    flex-direction: column;
    max-width: 400px;
    margin: auto;
}

.contact form input, .contact form textarea, .contact form button{
    margin: 10px 0;
    padding: 10px;
    font-size: 16px;
    border-radius: 6px;
    border: none;
    letter-spacing: 1.5px;
    transition: all 0.5s ease;
}


.contact .location iframe{
    width: 100%;
    height: 300px;
    border: 0;
    margin-top: 20px;
}
   
  button{
    cursor: pointer;
    width: 100%;
    padding: 10px;
    border: none; 
    border-radius: 4px;
  }


  button:hover {
    background-color: #333;
    color: rgb(236, 227, 227);
}
/* footer */

  footer{ 
    background-color: #333;
    color: rgb(236, 227, 227);
    text-align: center;
    padding: 10px;
    justify-content: center;
} 
  
  
  /* Responsive adjustments (optional) */
  @media (max-width: 600px) {
    .footer {
      font-size: 0.9rem; 
      padding: 15px; 
    }
  }
  
/* animmations */

@keyframes rotate{
    0%{
        transform rotate(0deg);
    }
    100%{
        transform rotate(360deg);
    }
}