body{
background:#fff;
font-family: arial;
margin:0;
background-size: cover;                      /* <------ */
}

#main_content{
width:100%;
margin:0px auto;
overflow:auto;
}

img {
max-width: 100%;
height: auto;
border:0;
}

.inner{
max-width:1100px;
margin:0 auto;
overflow:hidden;
}

.header{ 
margin:0px auto;
overflow:auto;
background:#34A3DC;
width:100%;
}



.headerrr {
    display: flex;
    justify-content: space-between;
    padding: 15px 0;
}


.d1 .inner1 {
    display: flex;
    justify-content: center;
    align-items: center;
}

.header-righ-top .btn8 {
    background: #f9722d;
    padding: 10px 15px;
    text-decoration: none;
    font-size: 22px;
    border-radius: 10px;
    /* margin-top: 14px; */
}

.header-righ-top a span {
    padding-right: 13px;
}

.header-righ-top a {
    text-decoration: none;
    font-size: 20px;
    margin-right: 24px;
    display: inline-block;
}
.header-righ-top .btn8 a {
    margin: 0;
}
.d1 {
    display: flex;
}
.header-left{
width: 40%;

margin:10px auto;
}


.header-right{
width:50%;
float: right;
background:#fff url(images/snssystem.com-mlm-gwalior.png);
padding: 10px 11px;
margin:15px auto;
background-size:cover;
}


h2{
font-size:20px;
padding:0px 2px;
}



input{
width: 45%;
background: #fff;
padding:9px;
color: #000;
margin-right:10px; 
margin-bottom:5px;
border: 1px solid #ddd;
}

textarea{
width: 93%;
color: #000;
background: #fff;
padding:9px;
margin-bottom:5px;
border: 1px solid #ddd;
}

button{
cursor:pointer;
width: 110px;
margin: 5px 200px;
background:#000;
color: #fff;
text-shadow:none;
float: left;
border: 1px solid #ddd;
padding: 6px 20px;
border-radius: 5px;
font-size:17px;
}

span.captcha{
font-size:16px;
padding:6px;
margin-right:2px; 
color:#fff; 
margin-left:-12px;
}

input.text{
width:70px;
height:35px;border: 1px solid #ddd;

}
.content{
width:100%;
overflow:hidden;
margin:5px auto;
color:#000;

padding:10px 0;
}

.content-left{
width:44%;
float:left;
}


.content-left p {
font-size:15px;
text-shadow:none;
padding:3px 0px 0 0px;
line-height:1.9;
font-weight:normal;
border:0px solid red;

}

.content-left p.sns a {
cursor:pointer;
margin:0px auto;
background:#000;
color: #fff;
text-shadow:none;
float: left;
padding: 5px 20px;
border-radius: 5px;
font-size:17px;
text-decoration:none;
float:right;
}

.content-right{
height: auto;
width:50%;
float:right;

}

.content img{
width:160px;

}
.portfolio{
width:100%;
overflow:hidden;
text-align:center;
background:#eee;
padding:10px 0;
}

.portfolio img{
width:180px;
padding:0px 10px;
}

.portfolio p.sns a {
cursor:pointer;
margin:0px 0px;
background:#000;
color: #fff;
text-shadow:none;
float: left;
padding: 10px 20px;
border-radius: 5px;
font-size:17px;
margin:10px auto;
float:right;
text-decoration:none;

}


.portfolio p.call {
margin:0px auto;
background:#000;
color: #fff;
text-shadow:none;
float: left;
padding: 10px 20px;
border-radius: 5px;
font-size:17px;
text-decoration:none;

}

.portfolio p.call a {
color: #fff;
text-shadow:none;
border-radius: 5px;
font-size:17px;
text-decoration:none;
}

.footer {
font-size: 13px;
padding: 10px 0;
width: 100%;
color: #E2E0E1;
background: #34A3DC;
overflow:auto;
}


.footer-left
{
padding:2px 0px;
width:48%;
color: #fff;
float:left;
line-height:1.8;
}


.footer-left a{
text-decoration:none;
color:#000;
}
.footer-left a:hover{
color:#fff;

}

.footer-right{
width:40%;
color: #fff;
float:right;
text-align:right;
}

.footer-right img{margin-right:5px;}


.privacy
{
font-size:15px; 
text-align:left;
line-height:1.5;
padding:1px 10px 0 10px;

}


#policy{
width: 100%;
background:#fff;
height:auto;
float: left;
overflow: auto;


}

h5{
color:#384F94;
font-size: 22px;
border-bottom: 1px dotted #7D7B7A;
margin:10px 0 10px;
}

h6{
color:#384F94;
font-size:18px;
padding:5px 2px;
border-bottom:1px dotted #ddd;
text-shadow:none;
margin:10px 0 10px;

}

@media screen and (max-width: 1099px) {
.inner{
max-width:98%;
margin:0 auto;
overflow:hidden;
}

.content-left p.sns a {
cursor:pointer;
margin:0px auto;
background:#000;
color: #fff;
text-shadow:none;
float: left;
padding: 5px 20px;
border-radius: 5px;
font-size:17px;
text-decoration:none;
float:right;
}

.content img {
width: 100px;
}

}


@media screen and (max-width: 900px) {
.inner{
max-width:95%;
margin:0 auto;
overflow:hidden;
}

.header{ 
margin:0px auto;
overflow:auto;
background:#34A3DC;
width:100%;
}

.header-left{
width: 100%;
float: left;
margin:10px 0;
text-align:center;
}


.header-right{
width:100%;
float: left;
background:#fff url(images/snssystem.com-mlm-gwalior.png);
padding: 10px 11px;
margin:15px auto;
background-size:cover;
}


h2{
font-size:15px;
padding:0px 2px;
}



input{
width: 45%;
background: #fff;
padding:9px;
color: #000;
margin-right:10px; 
margin-bottom:5px;
border: 1px solid #ddd;
}

textarea{
width: 93%;
color: #000;
background: #fff;
padding:9px;
margin-bottom:5px;
border: 1px solid #ddd;
}

button{
cursor:pointer;
width: 110px;
margin: 5px 200px;
background:#000;
color: #fff;
text-shadow:none;
float: left;
border: 1px solid #ddd;
padding: 6px 20px;
border-radius: 5px;
font-size:17px;
}

span.captcha{
font-size:16px;
padding:6px;
margin-right:2px; 
color:#fff; 
margin-left:-12px;
}

input.text{
width:70px;
height:35px;border: 1px solid #ddd;

}
.content{
width:100%;
overflow:hidden;
margin:5px auto;
color:#000;
padding:10px 0;
}

.content-left{
width:100%;
float:left;
}


.content-left p {
font-size:14px;
text-shadow:none;
padding:3px 0px 0 0px;
line-height:1.9;
font-weight:normal;
border:0px solid red;

}

.content-left p.sns a {
cursor:pointer;
margin:0px auto;
background:#000;
color: #fff;
text-shadow:none;
float: left;
padding: 5px 20px;
border-radius: 5px;
font-size:17px;
text-decoration:none;
float:right;
}

.content-right{
height: auto;
width:100%;
float:left;

}

.content img{
width:160px;

}
.portfolio{
width:100%;
overflow:hidden;
text-align:center;
background:#eee;
padding:10px 0;
}

.portfolio img{
width:200px;
padding:0px 10px;
}

.portfolio p.sns a {
cursor:pointer;
margin:0px 0px;
background:#000;
color: #fff;
text-shadow:none;
float: left;
padding: 10px 20px;
border-radius: 5px;
font-size:17px;
margin:10px auto;
float:right;
text-decoration:none;

}


.portfolio p.call {
margin:0px auto;
background:#000;
color: #fff;
text-shadow:none;
float: left;
padding: 10px 20px;
border-radius: 5px;
font-size:17px;
text-decoration:none;

}

.portfolio p.call a {
color: #fff;
text-shadow:none;
border-radius: 5px;
font-size:17px;
text-decoration:none;

}
#footer {
text-align: center;
font-family: arial;
font-size: 13px;
padding: 10px 0;
width: 100%;
color: #E2E0E1;
background: #34A3DC;
text-shadow: none;

}



.footer-left
{
text-align:center;
padding:2px 10px;
border:0px solid red;
width:100%;
color: #fff;
line-height:1.8;
float:left
}


.footer-left a{
text-decoration:none;
color:#000;
}
.footer-left a:hover{
color:#fff;

}

.footer-right
{
width:100%;
color: #fff;
line-height:1.8;
float:left;
text-align:center;
margin:0px;

}

}

.heading-cards h2 {
    color: #000;
    font-size: 32px;    background-color: #fff;
    margin: 0;
    padding: 3% 0 !important;
  }
  
  .features-section {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px;
    padding: 40px;    padding: 0px 40px 40px 40px;
  }
  
  .feature-card {
    background: #f9f5ff;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    border-radius: 10px;
    text-align: center;
    padding: 20px;
    flex: 1 1 calc(33.33% - 20px);
    max-width: calc(22.89% - 20px);  
    transition: transform 0.3s ease;
    cursor: pointer;
    text-decoration: none;
    color: inherit;
  }
  
  .feature-card:hover {
    transform: translateY(-10px);
  }
  
  .feature-icon img {
    max-width: 80%;
    width: 100%;
  }
  
  .feature-title {
    font-size: 16px;
    font-weight: bold;
    margin: 10px 0;
    color: #fe6b1d;
    text-align: left;
  }
  .feature-card:hover .feature-title {
    color: #000066;
  }
  
  .feature-icon img:hover {
    transform: scale(1.1);
  }
  .feature-icon{
    overflow: hidden;
  }
  .feature-icon img {
      max-width: 30%;
  }
  
  .feature-icon img {
  
  
    transition: 0.5s;
  }
  .para-d {
    text-align: left;
  }
  /* Responsive styles for smaller screens */
  @media (max-width: 768px) {
    .feature-card {
      flex: 1 1 calc(33% - 20px);
      max-width: calc(50% - 20px);
  
    }
  }
  
  @media (max-width: 480px) {
    .feature-card {
      flex: 1 1 100%;
      max-width: 100%;
    }
    .feature-icon img:hover {
      transform: scale(1);
    }
    .heading-cards h2 {
      font-size: 20px;
  }
  }