* {
margin: 0;
padding: 0;
box-sizing: border-box;
}

body {
font-family: Arial, sans-serif;
background: #F5F5F5;
}

nav {
position: fixed;
top: 0;
width: 100%;
background: #F5F5F5;
backdrop-filter: blur(6px);
z-index: 999;
}

.container {
max-width: 1200px;
margin: 0 auto;
padding: 0 20px;
}

.nav-content {
display: flex;
justify-content: space-between;
align-items: center;
margin-top: 1%;
height: 64px;
}

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

.logo h1 {
font-size: 1.5rem;
font-weight: bold;
color: #7D3C98; 
}

.logo span {
margin-left: 8px;
font-size: 0.9rem;
color: #666;
}

.nav-links {
display: flex;
gap: 24px;
}

.nav-links a {
text-decoration: none;
font-weight: 500;
color: #666;
transition: color 0.2s;
}

.nav-links a:hover {
color:  #7D3C98;
}

.btn {
padding: 10px 16px;
background:  #7D3C98;
color: white;
border: none;
border-radius: 6px;
cursor: pointer;
font-weight: 500;
transition: background 0.2s;
}

.btn:hover {
background: #8e50a9;
}

.strip {
width: 89%;
height: 2px;
background: #7D3C98; 
margin-left: 6%;
-webkit-mask-image: linear-gradient(to right, transparent, black 15%, black 85%, transparent);
-webkit-mask-repeat: no-repeat;
-webkit-mask-size: 100% 100%;
mask-image: linear-gradient(to right, transparent, black 15%, black 85%, transparent);
mask-repeat: no-repeat;
mask-size: 100% 100%;
}

.herosec{
margin-left: 7%;
margin-top: 8%;
}

.herosec > div {
display: flex;
align-items: center; 
}

.herocontent {
flex: 1;
margin-left: 5%;
margin-bottom: 3%;
margin-top: 7%;
}

.heroimg {
flex: 1; 
display: flex;
margin: 0;
}

.heroh2{
font-size: 60px;
color:#95A5A6;
text-align: left;
margin-top: 0;
}
.heroh1{
font-size: 60px;
color:#7D3C98;
font-weight: bolder;
}

.heropara{
margin-top: 4%;
color: #666;
font-size: 22px;
max-width: 550px;
line-height: 30px;
word-spacing: 3px;
}

.herobtn{
margin-top: 7%;
padding: 2% 5%;
border:none;
background: #7D3C98;
font-size: 16px;
border-radius: 6px;
}
.herobtn a{

color: #F5F5F5;
text-decoration: none;
}
.herobtn:hover{

background: #8e50a9;
}
.heroimg img{
height: 90%;
width: 80%;
}

.service{
margin-top: 5%;
margin-bottom: 5%;
}

.serh1{
text-align: center;
font-size: 50px;
color:#7D3C98;
}
.serpara{
text-align: center;
margin-top: 1%;
font-size: 20px;
font-weight: 500;
color:#95A5A6;
}

.card{
display: flex;
margin-top: 4%;
margin-left: 13%;
}
.card1{
display: flex;
margin-top: 2%;
margin-left: 13%;
}
.card-container1{
background-color: #ffffff;
border-radius: 12px;
border: 1px solid #95A5A6;
padding: 30px;
text-align: center;
display: flex;
width: 350px;
flex-direction: column;
align-items: center;
transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.card-container2{
background-color: #ffffff;
border-radius: 12px;
border: 1px solid #95A5A6;
padding: 30px;
text-align: center;
display: flex;
margin-left: 2%;
width: 350px;
flex-direction: column;
align-items: center;
transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.card-container3{
background-color: #ffffff;
border-radius: 12px;
border: 1px solid #95A5A6;
padding: 30px;
margin-left: 2%;
text-align: center;
display: flex;
width: 350px;
flex-direction: column;
align-items: center;
transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.cardh3{
margin-top: 6%;
margin-bottom: 6%;
color:#666;
font-size: 20px;
}
.cardp{
color: #95A5A6;
font-size: 15px;
}
.about{
margin-top: 3%;
margin-bottom: 5%;
display: flex;
margin-left: 12%;
}
.abouth1{
color: #7D3C98;
font-size: 45px;
margin-top: 15%;
}
.aboutpara{
color: #95A5A6;
font-size: 20px;
max-width: 550px;
line-height: 30px;
margin-top: 4%;
}
.aboutcard{
background-color: #ffffff;
border-radius: 12px;
border: 1px solid #95A5A6;
padding: 25px;
text-align: left;
margin-left: 8%;
margin-top: 4%;
display: flex;
width: 540px;
flex-direction: column;
align-items: left;
transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.abouth3{
color: #7D3C98;
font-size: 20px;
margin-bottom: 3%;
}
.aboutp{
color: #95A5A6;
font-size: 15px;
}
.contact{
margin-top: 7%;
}
.contacth1{
color: #7D3C98;
font-size: 45px;
text-align: center;
}
.contactpara{
color: #95A5A6;
font-size: 20px;
line-height: 30px;
text-align: center;
margin-top: 1%;
margin-bottom: 2%;
}
.contact-section{
display: flex;
margin-top: 4%;
margin-bottom: 3%;
}

.contact-form-section, .contact-info-section {
padding: 40px;
flex: 1;
}

.contact-form-section {
background-color: #ffffff;
border-radius: 12px;
border: 1px solid #95A5A6;
padding: 25px;
text-align: left;
flex-direction: column;
align-items: left;
transition: transform 0.2s ease, box-shadow 0.2s ease;
margin-left: 12%;
max-width: 650px;
max-height: 480px;
}

h2 {
font-weight: 600;
color: #7D3C98;
margin-bottom: 20px;
margin-top: 10px;
text-align: center;
}

.form-row {
display: flex;
gap: 20px;
margin-bottom: 15px;
}

.form-group {
flex: 1;
display: flex;
flex-direction: column;
}

.form-group label {
font-size: 16px;
font-weight: 600;
margin-bottom: 5px;
color: #95A5A6;
}

.form-group input, .form-group textarea {
width: 100%;
padding: 12px;
border: 1px solid #ccc;
border-radius: 5px;
font-size: 16px;
transition: border-color 0.3s;
}

.form-group input:focus, .form-group textarea:focus {
outline: none;
border-color: #666;
}

.form-group input::placeholder,
.form-group textarea::placeholder {
color: #777;     
font-size: 14px;  
font-weight: 400;
font-style: italic; 
}

textarea {
resize: vertical;
min-height: 100px;
}

.required-asterisk {
color: #95A5A6;
margin-left: 2px;
}

.send-message-btn {
background: linear-gradient(90deg, #8e50a9,#7D3C98);
color: #fff;
padding: 15px 25px;
border: none;
border-radius: 5px;
margin-top: 5%;
font-size: 16px;
cursor: pointer;
transition: transform 0.3s, box-shadow 0.3s;
width: 100%;
}

.send-message-btn:hover {
transform: translateY(-2px);
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
}

.contact-info-section {
background-color: #ffffff;
border-radius: 12px;
border: 1px solid #95A5A6;
padding: 25px;
text-align: left;
flex-direction: column;
align-items: left;
transition: transform 0.2s ease, box-shadow 0.2s ease;
margin-left: 3%;
max-width: 460px;
max-height: 480px;
}

.contact-info-item {
margin-bottom: 25px;
}

.contact-info-item h3 {
font-size: 20px;
font-weight: 600;
margin-top: 8%;
color: #666;
margin-bottom: 5px;
}

.contact-info-item p {
font-size: 16px;
color: #777;
margin-top: 1%;
line-height: 1.5;
}

.business-hours-list {
list-style: none;
padding: 0;
margin: 0;
}

.business-hours-list li {
display: flex;
font-size: 16px;
color: #777;
margin-top: 2%;
margin-bottom: 3%;
}

.footer{
margin-top: 6%;
padding-top: 3%;
background-color: #bdc3c7;
}


.footer-container{
display: flex;
}
.footer-section{
margin-left: 12%;
}
.footer-section h2{
text-align: left;
}

.footer-section p{
color: #ffffff;
font-size: 17px;
}
.footer-section-quick-links{
margin-left: 12%;
}
.footer-section-quick-links h3{
color: #7D3C98;
}
.footer-section-services-list{
margin-left: 12%;
}
.footer-section-services-list h3{
color: #7D3C98;
}
.footer-links li a{
text-decoration: none;
color: #ffffff;
font-size: 17px;
}
.footer li{
list-style: none;
}
.hr{
margin-left: 12%;
margin-right: 12%;
margin-top: 1%;
margin-bottom: 1%;
}
.copyright{
text-align: center;
margin-top: 2%;
padding-bottom: 3%;
color: #ffffff;
}

@media (max-width: 992px) {
.nav-content {
flex-wrap: wrap;
height: auto;
padding: 10px 0;
}
.herocontent{
margin-left: 0;
}
.heroh1, .heroh2{
text-align: center;
}
.nav-links {
gap: 16px;
}

.herosec > div {
flex-direction: column;
text-align: center;
}

.heroimg img {
width: 100%;
margin-top: 20px;
}

.card, .card1 {
flex-direction: column;
align-items: center;
margin-left: 0;
}

.card-container1,
.card-container2,
.card-container3 {
margin: 10px 0;
width: 80%;
}

.about {
flex-direction: column;
margin-left: 5%;
margin-right: 5%;
text-align: center;
}
.aboutpara{
margin-left: 5%;
}
.aboutcard {
margin-left: 0;
width: 100%;
}

.contact-section {
flex-direction: column;
align-items: center;
margin-left: 0;
}

.contact-form-section
{
margin: 15px 0;
max-width: 90%;
}
.contact-info-section {
margin: 15px 0;
max-width: 110%;
}
.footer-container {
flex-direction: column;
text-align: center;
gap: 20px;
}
.footer-section h2{
text-align: center;
}
.footer-section,
.footer-section-quick-links,
.footer-section-services-list {
margin-left: 0;
}
}


@media (max-width: 576px) {
.logo h1 {
font-size: 1.2rem;
}

.heroh1, .heroh2 {
font-size: 40px;
text-align: center;
}
.heroh1{
margin-top: 12%;
margin-left: 0;
}
.heropara {
font-size: 18px;
line-height: 26px;
margin-right: 4%;
}

.serh1, .contacth1, .abouth1 {
font-size: 30px;
}

.serpara, .aboutpara, .contactpara {
font-size: 16px;
}

.send-message-btn {
font-size: 14px;
padding: 12px;
}
.contactpara{
margin-left: 4%;
margin-right: 4%;
}
.contact-info-item{
max-width: 120%;
}
.footer-section p,
.footer-links li a {
font-size: 14px;
}
}