body{
  font-family: 'Inter', sans-serif;
    margin: 0;
    background-color: #f9f9f9;
}
button{
  font-family: 'Inter', sans-serif;
}
p{
  margin: 0;
  color: #454443;
}
#topbar a{
  text-decoration: none;
  color: #454443;
  font-weight: 600;
}
.heroflex{
  display: flex;
  max-width: 88.875rem;
  width: 90%;
  gap: 1rem;
  align-items: center;
}

.blogcolumn{
  display: flex;
  flex-direction: column;
  max-width: 88.875rem;
  width: 90%;
  gap: 1rem;
  align-items: flex-start;

}
.heading1{
  margin: 0;
  font-size: 1.5rem;
  font-size: 2.5rem;
  color: white;
  font-weight: 900;
  max-width: 31.25rem;
}

li{
  font-size: 1.25rem;
}

article img{
  max-width: 46.875rem;
  width: 100%;
  height: auto;
  
}

.imagetitle{
  color: black;
  font-style: italic;
}

.blogheader{
  background-image: url('img/responsiveseo.webp'); 
  background-size: cover;
  background-position: center; 
  background-repeat: no-repeat;


padding-top: 2rem;
padding-bottom: 2rem;
display: flex;
flex-direction: column;
align-items: center;
width: 100%;
overflow: scroll;


}

#comp{
  background-image: url('img/comp.webp'); 
}

.blogfoot{
  display: flex;
  flex-direction: column;
  align-items: center;
}

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

  max-width: 88.875rem;
  width: 90%;
 gap: .5rem;
}

.blog_foot a img{
  width: 2.5rem;
}

#bloglogo{
  width: 12rem;
}

.authorp{
  display: flex;
  gap: 2rem;
  align-items: center;

}
.authorp{
  color: white;
  font-weight: 500;
  margin: 0;
}
.heading2{
  margin: 0;
  font-size: 1.75rem;
}

.blogheader{
  width: 100%;
}
.paragraph{
  margin: 0;
  font-size: 1.25rem;
  line-height: 1.5;
}
.fillflex{
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  flex:1;
  justify-content: center;
}
.iconsflex{
  display: flex;
  width: 100%;
  justify-content: space-between;
  gap:.5rem;
}
.iconic{
  display: flex;
  flex-direction: column;
  align-items: center;
}
.flexcolumn{
  display: flex;
  flex-direction: column;
  align-items: center;
  width: clamp(26.563rem, -3.071rem + 52.682vw, 43.75rem);
}
.iconic_title{
  font-size: 1.25rem;
  font-weight: 800;
  text-align: center;
  font-size: clamp(0.85rem, 0.16rem + 1.226vw, 1.25rem);
}
.iconic_note{
  color: #81B93C;
  font-size: .75rem;
  text-align: center;
}
.fillflex img{
height: 31.25rem;
width: clamp(22.5rem, 7.414rem + 26.82vw, 31.25rem);
  object-fit: cover;
  object-position: 40%;
  border-radius: .5rem;
  box-shadow: .25rem .25rem .5rem #282828ba;
}
.allignlefty{
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 100%;
  max-width: 88.875rem;
  width: 90%;
}
@media (max-width: 56.25rem) {
  .heroflex{
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0rem;
  }
  .flexcolumn{
    width: 100%;
  }
  .fillflex img{
    width: 100%;
    aspect-ratio: 1;
    margin-top: 2rem;
  }
  .iconic_title{
    font-size: clamp(0.9rem, 0.463rem + 1.4vw, 1.25rem);
  }
}
@media (max-width: 31.25rem) {
  .iconsflex{
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
  }
  .iconic_title{
    font-size: 1.25rem;
  }
  .iconic_note{
    font-size: 1rem;
  }
}
#underline{
  text-decoration: underline;
}
html{
    font-size: 16px;
    scroll-padding-top: 77px;
}
.fullwidth{
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}
.spacebetween{
  justify-content: space-between;
}
.spaceevenly{
  justify-content: space-evenly;
}
#fourhundred{
  font-weight: 400;
  width: 100%;
  max-width: none;
  font-size: 2rem;
}
.maxwidth_flex{
  display: flex;
  align-items: center;
  max-width: 88.875rem;
  width: 90%;
}
.maxwidth_flex_100{
  display: flex;
  align-items: center;
  width: 100%;
}
#gapone,.gapone{
  gap: 1rem;
}
.gaptwo{
  gap: 2rem;
}
.flex{
  display: flex;
  align-items: center;
}
#toplogo{
  width: 13.5rem;
}
#gaphalf{
  gap: .5rem;
}
.topas{
  display: flex;
  align-items: center;
  gap: 2rem;
}
.as{
  display: flex;
  align-items: center;
  gap: 1rem;
}
#margin1{
  margin-top: 1rem;
}
#nine{
  font-weight: 900;
}
.top_button{
  padding: .5rem;
  color: white;
  font-weight: 700;
  font-size: .85rem;
  border-radius: .5rem;
  border: none;
  background-color: #81B93C;
}
#hero_sub{
  font-size: 1.25rem;
  font-weight: 400; 
}
.hero_title{
  font-size: 3rem;
  color: #454443;
  font-weight: 900;
  text-align: center;
  max-width: 46.625rem;
  font-display: swap;
}
#bold{
  font-size: .75rem;
  color: green;
}
#darkergreen,.darkergreen,#faqjump{
  color: #81B93C;
}
.hero_body{
  font-size: 1.25rem;
  max-width: 46.625rem;
  text-align: center;
  color: #454443a3;
}
#hero_button{
  font-size: 1.5rem;
  color: white;
  font-weight: 900;
  padding: .5rem;
  border: none;
  border-radius: .5rem;
  box-shadow: .25rem .25rem .5rem #969695;
  background-color: #81B93C;
  width: 19rem;
  font-weight: 700;
}
#centertxt{
  text-align: center;
}
.topbar_margin{
  margin-top: 77px;
}
#more{
  background: none;
  border: none;
}
#more img{
  width: 2.5rem;
}
#topbar{
   top: 0; 
 position: fixed;
 background-color: rgb(255, 255, 255);
 box-shadow: 0 .25rem .5rem #7c7c7c;
 z-index: 1000;
}
.relative{
  position: relative;
}
.centermiddlediv{
  position: absolute;
  top:50%;
  left:50%;
}
.hero_title{
  font-weight: 700;
}
.flexcolumn_max{
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 88.875rem;
  width: 90%;
}
.sub{
  font-size: 1.25rem;
  color: #A1D54A;
  font-weight: 900;
}
.title{
  font-size: 3rem;
  color: #454443;
  max-width: 700px;
  font-weight: 300;
}
.step_box{
  display: flex;
  width: 100%;
  justify-content: space-between;
}
.step{
  width: clamp(10.938rem, 0.889rem + 20.096vw, 18.75rem);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.step_title{
  display: flex;
  gap: 1rem;
  font-size: 1rem;
  font-weight: 900;
  align-items: center;
  color: white;
}
.step_body{
  font-size: 1rem;
  color: rgba(255, 255, 255, 0.754);
  line-height: 1.5;
}
.step_title img{
  width: 2rem;
}
.flexstart{
  align-items: flex-start;
}
#margin2{
  margin-top: 2rem;
}
#margin4{
  margin-top: 4rem;
}
.hero_box{
  display: flex;
  flex-direction: column;
  background-image: url('img/testbox1.png'); 
  background-size: cover;
  background-position: center; 
  background-repeat: no-repeat;
  padding: 1rem;
  box-shadow: .25rem .25rem .25rem .1rem #45444361;
  border-radius: .5rem;
  width: 17rem;
  height: 17rem;
}
#responsive{
  background-image: url('img/responsive1.png'); 
}
#custom{
  background-image: url('img/custom1.png'); 
}

#brand{
  background-image: url('img/branding1.png'); 
}

#speed{
  background-image: url('img/speed1.png'); 
}
#approval{
  background-image: url('img/approval1.png'); 
}
.hero_box_title{
  font-size: 1.25rem;
  font-weight: 900;
  margin-top: 10rem;
}
.hero_box_body{
  line-height: 1.5rem;
  color: #454443aa;
}
.wrap{
  flex-wrap: wrap;
  row-gap: 2rem;
}
.gap1{
  gap: 1rem;
}
.section_margin{
  margin-top: 6rem;
}
.pricing{
  width: 300px;
  padding: 2rem;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  border-radius: .5rem;
  background-color: white;
  box-shadow: .25rem .25rem .5rem #45444396;
  border-top: 1rem solid #81B93C;
}
#left p{
  color: white;
}
#left{
  background-color: #454443;
}
#notop{
  border-top: none;
}
.price_title{
  font-size: 1.75rem;
  color: #454443;
  font-weight: 900;
}
.price_sub{
  font-size: 1.5;
  font-weight: 400;
  color: #454443cb;
}
.pricing img{
  width: 2.5rem;
}
.flexgap1{
  display: flex;
  gap: .25rem;
  align-items: center;
}
.flexgap1 p{
  font-size: 1.1rem;
  color: #454443bb;
}
.flexgap1 img{
  width: 2.5rem;
}
.columnfull{
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}
#font3{
  font-size: 2.5rem;
}
.phone{
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 250px;
}
#iphone{
  width: 250px;
  aspect-ratio: 48 / 100;
}
.tip{
  margin-top: 1rem;
  margin-bottom: 1rem;
  color: rgb(255, 255, 255);
  font-weight: 100;
  text-align: center;
}
.phone_title{
  font-size: 2rem;
  font-weight: 900;
  width: 100%;
  text-align: left;
  font-size: 1.5rem;
  color: #A1D54A;
}
h1,h2,h3,h4,h5{
  margin: 0;
}
#gradientbg{
  background: linear-gradient(to right, #454443, #81807f);
  background-image: url('img/sectiong.png'); 
  background-size: cover;
  background-position: center; 
  background-repeat: no-repeat;
}
#seoresponsiveimg{
  background-image: url('img/responsiveseo.webp'); 
  background-size: cover;
  background-position: center; 
  background-repeat: no-repeat;
}
.blogdesc{

  margin: 0;
  font-weight: 400;
  line-height: 2;
  font-size: 1.25rem;
  color: rgba(255, 255, 255, 0.715);

}

.blog_read{
  font-size:1.5rem;
  color: white;
  background-color: #A1D54A;


  padding: 1rem;
  border-radius: .5rem;
  font-weight: 900;
  text-decoration: none;

}
#gradientbg1{
  background: linear-gradient(to bottom, #000000, #373737);
}
#whitetxt{
  color: white;
}
.phone_body{
  line-height: 1.25rem;
  color: white;
  font-weight: 200;
  text-align: left;
}
.faq{
  background: none;
  font-size: 1.25rem;
  border: none;
  display: flex;
  align-items: center;
 gap: .5rem;
  padding: 0;
  text-align: left;
  font-weight: 200;
  font-style: italic;
  color: #454443;
}
.answer{
  font-size: 1.25rem;
  line-height: 2;
  font-weight: 300;
  margin-top: 1rem;
  display: none;
  color: #454443;
}
.faq img{
  width: 1.5rem;
}
.sb{
  width: 100%;
  display: flex;
 justify-content: space-between;
}
form{
  display: flex;
  flex-direction: column;
  align-items: center;
  align-items: flex-start;
  gap: 2rem;
  background-color: #e5e5e5;
  padding: 3rem;
  box-shadow: .25rem .25rem .5rem #4544436e;
  background: linear-gradient(to bottom, #dadada, #e3e3e3);
}
.contactp{
  font-size: 1.5rem;
  font-weight: 900;
}
form button{
  background-color: #454443;
  color: white;
  font-size: 1.25rem;
  border: none;
  padding: .5rem;
  width: 100%;
  font-weight: 900;
  box-shadow: .25rem .25rem .5rem #4544437c;
  background-color: #81B93C;
}
.contactz{
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-evenly;
}
.contactzp{
  font-size: 1.1rem;
  display: flex;
  align-items: center;
  gap: 1rem;
  font-weight: 400;
  color: white;
}
input{
  font-size: 1rem;
  border: none;
  border-bottom: .1rem solid #454443;
  background: none;
}
textarea{
  font-size: 1rem;
  border: .1rem solid #454443;
  width: 100%;
  height: 150px;
}
input::placeholder{
  color: rgba(19, 19, 19, 0.534);
  font-family: 'Inter', sans-serif;
}
textarea::placeholder{
  font-family: 'Inter', sans-serif;
}
.contactzp img{
  width: 3rem;
}
.footer{
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  padding-top: 2rem;
}
.footerline{
  height: .1rem;
  background-color: #454443;
  width: 100%;
}
.footer_notes{
  display: flex;
  gap: 2rem;
}
.vertnotes{
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1rem;
}
.vertnotes a{
  text-decoration: none;
  color: #454443bb;
}
.footer_text{
  font-size: 1rem;
  color: #454443;
  font-weight:400;
  text-align: center;
  padding-top: 1rem;
  padding-bottom: 1rem;
}
.footer img{
  width: 8rem;
}
.formdiv{
  width: 100%; 
  display: flex;
  gap: 1rem;
}
.vertnotes p{
  color: #454443;
  font-weight: 900;
}
.overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: rgba(255, 255, 255, 0); 
  z-index: 10000; 
  display: flex;
  flex-direction: column;
  align-items:center;
  pointer-events: none;
  display: none;
}
.overlay button{
  pointer-events: auto;
}
.flex1{
  display: flex;
  flex-direction: column;
  align-items: center;
  overflow: scroll;
  gap: 1rem;
  align-items: flex-start;
  background-color: rgb(255, 255, 255);
  padding: 2rem;
  z-index: 0;
  pointer-events: auto;
 width: 250px;
  background: linear-gradient(to right, #9e9e9ea4, #9c9c9c);
  border-radius: .5rem;
}
.line{
  width: 100%;
  height: .10rem;
  background-color: #ffffff;
}
.spacee{
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.flex1 button{
  text-decoration: none;
  font-size: 1.5rem;
  color: #454443;
  font-weight: 200;
  color: white;
  background: none;
  border: none;
}
#boldd{
  font-weight: 900;
}
.columnflexstart{
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.iconbox{
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 1rem;
  width: 200px;
  border-right: .25rem solid black;
  border-left: .25rem solid black;
}
.iconbox img{
  width: 64px;
}
.icon_title{
  font-size: 1rem;
  font-weight: 900;
}
.icon_bod{
  color: #454443b3;
  text-align: center;
}
#footerlogo{
  width: 15rem;
}
@media (max-width: 43.75rem) {
  .step{
    min-width: 90%;
  
  }
  .pricing{
    width: 100%;
  }
}
@media (max-width: 53.125rem) {
  .hero_box{
    width: 100%;
  }
  #centered{
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2rem;
  }
}
@media (max-width: 50rem) {
  .section_margin{
    margin-top: 3rem;
  }
  .step_box{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2rem;
  }
  .step{
    width: 100%;
  }
  .sb{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2rem;
    align-items: center;
  }
}
@media (max-width: 56.625rem) {
  .sb{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2rem;
    align-items: center;
  }
  .contactz{
   gap: 2rem;
  }
}
@media (max-width: 37.5rem) {
  .formdiv{
    display: flex;
    flex-direction: column;
    gap: 2rem;
  }
}
@media (max-width: 41.25rem) {
  #toplogo{
    width: 8rem;
  }
  #topbar a{
    font-size: .75rem;
  }
}
@media (max-width: 31.25rem) {
  #toplogo{
    width: 8rem;
  }
  .as{
    gap: .5rem;
  }
  .topas{
    gap: 1rem;
  }
  #topbar a{
    font-size: 1rem;
  }
  .top_button{
    font-size: .5rem;
  }
  #footerlogo{
    width: 8rem;
  }
}