body{
background:url(images/bg.jpg) no-repeat center;
margin:0;
background-size:cover;             
}

#main_content{
max-width:1100px;
margin:0px auto;
overflow:auto;
}

.top_header{
background:#010101;
margin:0;
overflow:auto;
width:auto;
padding:5px 20px;
}

.top_header p{
margin:0;
font-size:17px;
}

.top_header a{
text-decoration:none;
color:#FD6713;
font-weight:700;
}

.top_header a:hover{color:#fff;}

.top_header_col1{
float:left;
width:70%;
color:#fff;
margin:4px 0 0;
}

.top_header_col2{
float:right;
width:30%;
color:#FD6713;
text-align:right;
}


.top_header_col2 img{
margin-left:10px;
margin-top:2px;
}

.banner{
background:url('images/snssystem.com-ofbiz-services-dallas.jpg') no-repeat center;
overflow:auto;
height:auto;
background-size:cover;
padding:10px;
}

.banner_left{
float:left;
width:55%;
}

.pic1{
width:100%;
}

.pic2{
margin-top:35px;
width:100%;
}

.banner_right{
float:right;
width:45%;
}

.contact_form{
float:right;
width:80%;
margin:0px;
border-radius:12px;
border:1px solid #fff;
opacity:0.8;
background: rgba(241,196,15,0.75);
background: -moz-linear-gradient(top left,rgba(241,196,15,0.75) 0,100%);
background: -webkit-gradient(linear,left top,right bottom,color-stop(0,rgba(241,196,15,0.75)),color-stop(1,rgba(231,76,60,0.75)));
background: -webkit-linear-gradient(top left,rgba(241,196,15,0.75) 0,rgba(231,76,60,0.75) 100%);
background: -o-linear-gradient(top left,rgba(241,196,15,0.75) 0,rgba(231,76,60,0.75) 100%);
background: -ms-linear-gradient(top left,rgba(241,196,15,0.75) 0,rgba(231,76,60,0.75) 100%);
background: linear-gradient(to bottom right,rgba(241,196,15,0.75) 0,rgba(231,76,60,0.75) 100%);
}

input{
width: 95%;
font-size:16px;
background: #fff;
padding:10px;
color: #000;
border-radius:10px;
margin:0px 10px;
border:1px solid #fff;
}

textarea{
width: 95%;
font-size:16px;
color: #000;
background: #fff;
height:90px;
padding: 10px;
border-radius:10px;
margin:0px 10px;
border:1px solid #fff;
}

.submit{
cursor:pointer;
width: auto;
margin: 0px;
background: rgba(231,76,60,0.75);
background: -moz-linear-gradient(top left,rgba(231,76,60,0.75) 0,100%);
background: -webkit-gradient(linear,left top,right bottom,color-stop(0,rgba(231,76,60,0.75)),color-stop(1,rgba(241,196,15,0.75)));
background: -webkit-linear-gradient(top left,rgba(231,76,60,0.75) 0,rgba(241,196,15,0.75) 100%);
background: -o-linear-gradient(top left,rgba(231,76,60,0.75) 0,rgba(241,196,15,0.75) 100%);
background: -ms-linear-gradient(top left,rgba(231,76,60,0.75) 0,rgba(241,196,15,0.75) 100%);
background: linear-gradient(to bottom right,rgba(231,76,60,0.75) 0,rgba(241,196,15,0.75) 100%);
color: #fff;
text-shadow:none;
border: 1px solid #fff;
padding: 10px 20px;
border-radius: 12px;
font-size:20px;
font-weight:bold;
text-decoration:none;
}

.submit:hover{
background: rgba(241,196,15,0.75);
background: -moz-linear-gradient(top left,rgba(241,196,15,0.75) 0,100%);
background: -webkit-gradient(linear,left top,right bottom,color-stop(0,rgba(241,196,15,0.75)),color-stop(1,rgba(231,76,60,0.75)));
background: -webkit-linear-gradient(top left,rgba(241,196,15,0.75) 0,rgba(231,76,60,0.75) 100%);
background: -o-linear-gradient(top left,rgba(241,196,15,0.75) 0,rgba(231,76,60,0.75) 100%);
background: -ms-linear-gradient(top left,rgba(241,196,15,0.75) 0,rgba(231,76,60,0.75) 100%);
background: linear-gradient(to bottom right,rgba(241,196,15,0.75) 0,rgba(231,76,60,0.75) 100%);
color:#fff;
}


.captcha{
font-size:16px;
padding:6px;
margin:8px 0; 
color:#fff; 
font-weight:bold;

}

.text{
width:55px;
height:35px;

}

.form_heading{
text-align:center; 
color:#000; 
font-size:23px;
}

::-webkit-input-placeholder { /* Chrome */
  color: #000;
}
:-ms-input-placeholder { /* IE 10+ */
  color: #000;
}
::-moz-placeholder { /* Firefox 19+ */
  color: #000;
  opacity: 1;
}
:-moz-placeholder { /* Firefox 4 - 18 */
  color: #000;
  opacity: 1;
}

.heading1{
text-align:center;
font-size:38px;
margin:0;
padding:8px 0;
}

.chain_icon {
  margin:0 auto;
  width:370px;
  display: flex;
  align-items: center;
}
.chain_icon:before,
.chain_icon:after {
  flex: 1;
  content: '';
  height: 1px;
  background: black;
}


.section1{
background:#ddd;
overflow:auto;
}

.section2{
background:#FAF7F7;
color:#414141;
margin:0px 0 0;
padding:3px 40px;
overflow:auto;
}

.chain_icon_1 {
  margin:0 auto;
  width:400px;
  display: flex;
  align-items: center;
}
.chain_icon_1:before,
.chain_icon_1:after {
  flex: 1;
  content: '';
  height: 1px;
  background: black;
}

.section2_1{
width:19%;
float:left;
margin-left:7px;
}

.fotter{
background:#010101;
margin:0;
color:#fff;
overflow:auto;
width:auto;
text-align:center;
}

.fotter a{
color:#FD6713;
text-decoration:none;
}

@media screen and (min-width: 800px) and (max-width: 1100px) { 
.section2_1 {
width: 19%;
float: left;
margin-left:2px;
}

.section2_1 img{width:100%;}
}


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

.section2_1 {
width: 100%!important;
float: left;
margin-left:0px;
}

.form_heading {
text-align: center;
color: #000;
font-size: 18px !important;
}

.heading1 {
text-align: center;
font-size:18px !important;
margin: 0;
padding: 8px 0;
}
.chain_icon_1 {
margin: 0 auto;
width: 100%!important;
display: flex;
align-items: center;
}

}


@media screen and (max-width: 800px) {
#main_content{
width:100%;
margin:0px auto;
overflow:auto;
}

.top_header_col1{
float:left;
width:100%;
color:#fff;
margin:4px 0 0;
text-align:center;
}

.top_header_col2{
float:left;
width:100%;
padding-top:10px;
color:#FD6713;
text-align:center;
}
.top_header_col3{
text-align:center;
    }

.banner_left{
float:left;
width:100%;
}

.banner_right{
float:left;
width:100%;
margin:30px auto;
text-align:center;
}

.contact_form{
float:none;
width:90%;
overflow:hidden;
margin:15px auto;
border-radius:12px;
border:1px solid #fff;
opacity:0.8;
background: rgba(241,196,15,0.75);
background: -moz-linear-gradient(top left,rgba(241,196,15,0.75) 0,100%);
background: -webkit-gradient(linear,left top,right bottom,color-stop(0,rgba(241,196,15,0.75)),color-stop(1,rgba(231,76,60,0.75)));
background: -webkit-linear-gradient(top left,rgba(241,196,15,0.75) 0,rgba(231,76,60,0.75) 100%);
background: -o-linear-gradient(top left,rgba(241,196,15,0.75) 0,rgba(231,76,60,0.75) 100%);
background: -ms-linear-gradient(top left,rgba(241,196,15,0.75) 0,rgba(231,76,60,0.75) 100%);
background: linear-gradient(to bottom right,rgba(241,196,15,0.75) 0,rgba(231,76,60,0.75) 100%);
}

.form_heading {
text-align: center;
color: #000;
font-size: 20px;
}

.heading1 {
text-align: center;
font-size:20px;
margin: 0;
padding: 8px 0;
}

.section2_1 {
width: 50%;
float: left;
margin-left:0px;
}
.chain_icon {
margin: 0 auto;
width: 300px;
display: flex;
align-items: center;
}
.section2_1 img{width:100%;}
.chain_icon_1 {
margin: 0 auto;
width: 300px;
display: flex;
align-items: center;
}

}

.heading-cards h2 {
  margin-top: 30px;
  font-size: 38px;
  padding: 0 40px;
}

.features-section {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 20px;
  padding: 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(29.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%;
 
}

.feature-title {
  font-size: 18px;
  font-weight: bold;
  margin: 10px 0;
  color: #fd6713;
  text-align: center;
}
.feature-card:hover .feature-title {
  color: #000;
}

.feature-icon img:hover {
  transform: scale(1.1);
}
.feature-icon{
  overflow: hidden;
}
.feature-icon img {


  transition: 0.5s;
}
.para-d {
  text-align: center;
  font-weight: 400;
  line-height: 1.4em;
}
.feature-icon img {
  max-width: 30%;
}
/* Responsive styles for smaller screens */
@media (max-width: 991px) {
  .feature-card {
    flex: 1 1 calc(33% - 20px);
    max-width: calc(43.5% - 20px);

  }
}
@media (max-width: 801px) {
  .feature-card {
    flex: 1 1 calc(33% - 20px);
    max-width: calc(40% - 20px);

  }
}

@media (max-width: 640px) {
  .feature-card {
    flex: 1 1 100%;
   max-width: calc(86% - 20px);
  }
  .feature-icon img:hover {
    transform: scale(1);
  }
  .heading-cards h2 {
    font-size: 20px;
}
}