/* RESET STYLES */

* {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    font-size: 100%;
    vertical-align: baseline;
  background: transparent;
}

/* FIND OVERFLOW ELEMENT   GIT TEST

* {
    outline: 1px solid #f00 !important;
  }

  */

/* GLOBAL STYLES*/


main {  max-width: 1920px; margin:auto;}

a { text-decoration: none; }

picture { margin:auto;}

main img, header img { width: 100%; height: auto; align-self: center; }

section {margin-bottom:50px;} 

.info-cards {margin-top:50px;} 

.svg-icon { max-height:60px;}



/*.jump-anchor { padding-top: 10vw; margin:-10vw;}

.jump-anchor:before {
  content: "";
  display: block;
  height: 100px;
  margin: -100px 0 0;
}*/


/* GLOBAL CLASSES */

.row-container { display:flex; flex-direction: row; flex-wrap: wrap; gap:30px; justify-content: center; }

.container { display:flex; flex-direction: column;  justify-content: space-between; }

.link-container {display:flex; flex-direction: row; align-items: center; max-width:120px !important; padding:0 !important;}

.bounce { font-size: 20px; padding:10px 0 10px 0; margin:0 8px !important;}

.link-container a { padding-bottom: 3px !important;}

.grey-background { background-color: #f2f2f2;}

.white-background {background-color: white; }

.bluelinear { background-image: linear-gradient( #49A6DC ,#0F73C7); background-size: 100%; background-color:#1975D8; background-clip:text; -webkit-background-clip: text;
    -moz-background-clip: text;
    -webkit-text-fill-color: transparent; 
    -moz-text-fill-color: transparent;}

    .solidblue { color:#49A6DC;}   /* for SAMSUNG */

 

.thin-blue-border { border-bottom: solid 2px #49A6DC; padding-bottom:0px;}

.thick-blue-border { border-bottom: solid 5px #49A6DC;}

.text-box {max-width:500px;  opacity: 99%;    border-radius: 20px; margin:-15vw auto 0 auto; /*box-shadow: 2px 2px 10px;*/}

.text-link { border-bottom: solid 2px #49A6DC; padding-bottom:0px; font-weight: 400 !important; font-family: 'Poppins', sans-serif;}

.tablet-only, .tablet-and-larger { display: none;}

/* MARGIN, PADDING AND WIDTHS  */

.header-wrapper  { padding:0; display:flex; justify-content:flex-end; max-width:380px; margin:auto;}

.header-text-large,  h2, h3, .fakeButton, button{ text-transform: uppercase;}

h1, h3, h4, p {margin:auto;}

h2, h3, h4, p { padding:10px 0;}

 h3, p { max-width: 600px;}

.design p, .design h3, .development p, .development h3, .maintenance p, .maintenance h3 {padding: 10px 20px; }

.needs-padding{ padding:2%;}

/* FONTS AND FONT SIZES */

h1, h2, p, input, textarea, button, .header-text-small, .home-page-h1, .article-page h1 { font-family: 'Poppins', sans-serif;}

 h3, h4,  a, .phone p, .email p, .logo, .author-info p, .article-page h2, .portfolio-page h2  { font-family: 'Lato', sans-serif;}

 .header-text-large { font-family: 'Paytone One', sans-serif;}

h1,   h4, p, a, .header-text-small, .fake-p {color:#272727; line-height: 1.8em;}

h2, h3 {color:#272727;  }

.fake-p { padding:10px 20px; font-size:16px; text-transform: none; max-width:460px; text-align: center;}

.fake-h4 {color:#272727; line-height: 1.8em;font-family: 'Lato', sans-serif;text-transform: none; font-size:20px; }

.header-text-large {line-height: 1em;}





h2 {line-height: 1.2em;}

h3 {line-height: 1.4em;}


.header-text-small { line-height: 1.5em; padding-bottom:25px; }

.header-text-small, .home-page-h1  {font-weight:bold;}



p { font-size:16px;}

h2{  font-size:32px; padding:10px 2%; }

.portfolio-heading {font-size:24px;}

h3 { font-size: 24px; margin-top:10px; }

h4 { font-size: 20px;}

.info-cards h4, .info-cards h3 { text-align: center;}


.logo { font-weight: 900; max-height:90px;}
/* LOGO */

.logo svg { width:35px !important; height:50px !important; max-height: none !important; margin-right:5px ;}

.logo > div { display: flex; flex-direction: row ; align-items: center; }

footer .logo svg {width:35px !important; height:auto !important; max-height: none !important;  margin-right:10px ;}

/* HERO BANNER */

header { margin-top: 80px; }



.home header {  
         /* background-image: radial-gradient(white,#d9d9d9);*/
          padding:20px;
          margin:90px 10px 10px 10px; 
            border-radius: 25px;
            background-color: #f2f2f2;
          
          }

        
         .home header img{ display: block; max-width:350px; margin:auto;}
          .home header { display: flex; flex-direction: column-reverse; gap:20px;}
          



.header-text-large { font-size:48px; padding-left:0;}

.header-text-small { font-size:16px;   max-width: 400px;
    margin: 0; }



.fakeButton { font-size:16px !important;  padding:7px 15px 7px 15px !important; display:block; width:100px !important; text-align: center !important; transition: 1.2s; }

.nav-bar .fakeButton { margin-top: 28px !important;}

.home-page-h1 {  font-style: italic; font-size: 16px; margin: 0 !important; line-height: 1.5em; }

.fakeButton:hover, .contactButton:hover { background-image: none; background-color: white; color:#0F73C7; outline:#0F73C7 2px solid; transition: 1.5s; }

.button-wrapper { display:flex; gap:20px; flex-wrap: wrap; margin:0 !important; }

.secondary-button { background-image: none; background-color: white;  outline:#0F73C7 2px solid; transition: 1.5s;color:#0F73C7 !important}

.secondary-button:hover { background-image: linear-gradient( #49A6DC 25%,#1975D8); color:white !important; border-color:white !important; outline:none!important}

/* SECTION 1: INTRODUCTION */

.introduction {padding:15px;  max-width:1200px; margin: 20px auto 50px auto;}

.introduction img {padding-bottom:10px; margin:auto; max-width:500px; }

.introduction p { max-width:550px; }

.introduction h2 { max-width:600px;}

.introduction p:first-child { font-weight: bold; max-width: 600px; text-align: center;}

/* SECTION 2: DESIGN */



.design > div { width:95%; max-width:1200px; margin: auto;}

/* SECTION 3: DEVELOPMENT */


   
   .development> div { width:95%; max-width:1200px; margin: auto;}
   
/* SECTION 4: MAINTENANCE */



.maintenance  > div { width:95%; max-width:700px; margin: auto;border-radius: 25px; box-shadow: 0 0  4px #49A6DC ; }



/* INFO CARDS */

.info-card * { padding:0 !important; margin:0 auto !important; }

.info-cards { display: flex; flex-wrap: wrap; gap:30px;padding:10px;justify-content: center;}

.info-card { display:flex;gap:12px;  max-width: 260px;  padding:20px;  border-radius: 25px ;  box-shadow: 0 0  4px #49A6DC ;}

.info-cards img { max-height: 60px; width:auto; margin:auto; padding:10px;}

.info-cards a { margin: 12px auto 0 auto; font-weight: bold; padding-bottom:3px;}

.info-cards p { text-align: center; font-size:16px }

.look-icon { height: 40px; padding-top: 20px !important; padding-bottom: 10px !important;}

/* PRICING CARDS */

.pricing-card {  background-color:#ffffff; display:flex; flex-direction: column; align-items: center;  max-width:400px;padding:20px;  border-radius: 25px ;  box-shadow: 0 0  4px #49A6DC ;}

.pricing-card-home { width:80%; max-width:300px; }

.pricing-card-wrapper { padding:0 10px; display: flex; flex-direction: column; align-items: center; gap:20px;max-width: 1360px; margin:auto; margin-top:50px; justify-content: center;}

.pricing-card-wrapper-home { display: flex; flex-direction: column; align-items: center; gap:20px;max-width: 1360px; margin:auto; margin-top:50px; }

.pricing-card * { text-align: center;}

.pricing-card img { max-height: 60px; width:auto; }

.pricing-card-title-container { display: flex; flex-direction: column; }

.pricing-card-column {flex-direction: column !important; max-width:360px !important; gap:0 !important;}

.pricing-card-column .pricing-card-title-container { flex-direction: row; max-width: 240px; margin:auto;}

.pricing-card-column h4 { text-align: left;}

.pricing-card-column p { text-align: center !important;}





/* SECTION 5: ZERO HASSLE */

.zero-hassle { padding: 0 20px; max-width: 800px; margin:auto; margin-bottom:50px; display:flex; flex-direction: column; flex-wrap: wrap; justify-content: center; }

.zero-hassle div {max-width: 500px; margin:auto; gap:0; align-items: center; justify-content: flex-start;}



.zero-hassle img { max-width:75px; padding: 20px 0 ; margin:auto;}

.zero-hassle h3 {margin:0;}



/* SECTION 6: ABOUT  */

.about-us { max-width:1000px; margin:20px auto 50px auto; align-items: center; padding:20px;}

.about-us img { max-width: 400px; }

.about-us a {font-weight: bold; padding-bottom:5px;}

.about-us p { max-width:500px;}



/*SECTION: TESTIMONIALS */

.testimonials { padding:0 10px;}

.testimonial-card { border-radius: 25px; padding: 20px;  box-shadow: 0px 0px 3px #49A6DC;}

.testimonial-card * { padding:4px 0;}

.testimonials img { max-width: 90px; border-radius: 15px; margin-bottom: 10px;}

.testimonials p {max-width: 400px !important; text-align: center; font-size:16px !important;}

.testimonials h3 {max-width: 500px;   padding: 0 0 50px 10px; text-align: center;}



/*SECTION: PORTFOLIO */

.portfolio { padding:0 20px; max-width:500px; margin:0 auto 50px auto; display:flex; flex-direction: column; gap:30px; }

.portfolio h3{ padding: 0 0 20px 0;  }



.portfolio img { max-width: 400px;}

.portfolio p { max-width: 650px;}

.portfolio a { max-width:80px; font-weight: bold; }

.portfolio h4, .portfolio p { margin:0; }

.portfolio .container {justify-content: center; }



/* SECTION: CONTACT */

.contact { padding:0 20px; max-width: 450px; margin: auto;}

.contact h2 { padding-left: 0;}

.phone img { max-width:50px; padding-top:5px;}

.email img { max-width:60px;}

.contact > div { padding:20px 0;} 

.phone, .email { width:200px;text-align: center; border:#272727 solid 1px; border-radius: 25px; padding:10px;}
.contact-container { max-width:450px; display:flex; flex-direction: column !important; gap:20px;margin:auto; }

.contact p { padding-top:0; max-width:450px;}
.contact h3 {  max-width:450px;}

.contact .row-container {padding:0 0 20px 0; margin:auto;}

.phone p, .email p { text-decoration: underline;} 

.phone p {padding-top:5px;}

form { /*border-style:dashed; border-color:grey; border-width:1px;*/ width:100%; align-items:flex-end; gap:20px; max-width: 450px;padding-bottom: 4em; margin:auto;  }
input, textarea { border:solid; border-color:#49A6DC; border-width:2px;  width:100%; display:block; margin:auto; padding:10px 0px 10px 0px;  font-size:16px;border-radius:10px;}

form input[type="text"] {
box-sizing: border-box;
padding-left: 10px;
}

form textarea {
box-sizing: border-box;
padding-left: 10px;
}


textarea {   resize:none;  padding-bottom: 8em;}

.contactButton, .fakeButton { 
border: none;
color: white;
padding: 8px 15px;
text-align: center;
text-decoration: none;
border-radius: 10px;

font-weight: bold;
width: 150px;


font-size: 16px;}

.buttonBackground {background-image: linear-gradient( #49A6DC 25%,#1975D8);  }

.samsungButtonBackground { background-color: #49A6DC; }

#Message-Submitted { color:red; display:none;}


/* FOOTER */

footer { padding:20px;  border-top: #49A6DC solid 1px; }

.footer-contact-icon { width:100%; max-width:20px; fill:#272727 !important; }

 .footer-link { text-decoration: underline; }

.footer-contact-container { display: flex; flex-direction: row; gap:10px; margin:auto; align-items: center;}

footer p, footer a {font-weight:300; }


.footer-container { display: flex; flex-direction: column; gap:30px; max-width: 950px; margin:auto;}

footer .container {gap:10px; align-items: center; max-width: 500px; margin: auto;}

footer p { margin:0;padding:0;}

.email-capture-form { display:flex; flex-direction: column; padding:0 !important;}

.email-capture-form > input { background-color: white;}

.email-capture-form-container { display: flex; flex-direction: column; gap:20px; max-width: 470px; margin:auto;}


/* H1 for all central pages bar homepage or blog */
.about section { margin-bottom: 50px !important;}

.about .intro .container { gap:5px;}

.about main {padding:0 20px; margin: auto; max-width: 1920px;}

.about h1, .contact-page h1, .portfolio-page h1, .pricing-page h1 { margin-top: 80px; text-align: center; padding:20px 0; font-size: 32px; }

.about h2 { padding: 15px 0 15px 0;}

.about .intro img { padding:10px 20px 0 20px; max-width: 250px; margin: auto; width:100%;}

.about p {max-width: 500px;}

.about .offer { margin: 0 -20px 0 -20px;}

.about .offer h2 { font-size:24px; max-width: 280px; opacity: 99% !important; text-align: center; margin:0 auto min(35vw, 500px) auto !important; ;}

.about .offer .info-cards {max-width: 900px;
    margin: 50px auto 0 auto;}

.about .info-cards img { max-width: 90px; margin:0 auto 0 auto !important;}

.about .offer > div { margin-top: max(-60%,-720px);}

.about .info-card { min-height: 0; }

.about .info-card p, .about .info-card h4 {margin:0 auto 0 auto; }

.about .contact p { max-width: 600px;}

.about .testimonials { margin: 0 -20px 50px -20px;}

.contact-page .contact { margin-top:25px;}

.contact-page .google-map { max-width: 500px; margin: 0 auto 50px auto; padding:20px;}

.contact-page .google-map h2 { padding-left:0;}



 /*.web-design-pricing , .growth-pricing { max-width:950px;margin: 50px auto;}*/

 







.pricing-page .pricing-card-wrapper { margin-top:20px;}

.pricing-page-icon { width:25px; height:25px; margin:auto; fill:#49A6DC;background-color: white; padding:10px; border-radius:360px; border:3px #272727 solid;}

.pricing-intro { margin-top: 50px; margin-bottom:50px;}

.pricing-intro p { text-align: center; padding:  0 20px;}


.hosting-pricing h2 { text-align: center;margin-bottom: 50px; }

 .hosting-pricing h2, .growth-pricing h2 { max-width: 300px !important;}

.hosting-pricing p { max-width: 360px;}

.hosting-pricing .pricing-card { max-width: 600px;}



.gmap-container {
    
    
  width: 100%;
 
  height:80vw;
  max-height: 400px;
  max-width: 600px;
  margin:20px auto 0 auto;
}

/* Then style the iframe to fit in the container div with full height and width */
.responsive-iframe {
  border:none;
  width: 100%;
  height:100%;;
}
/*@media only screen and (min-width: 1150px) {.gmap-container { height:100%;  width:100%;} }*/


/* RESPONSIVE DESIGN */

@media only screen and (min-width: 360px) {

    .header-text-large { font-size:54px;}

   
    
  }

  

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

 
    
  .header-text-large { font-size:64px;}
  .header-text-small {font-size: 16px;}
  .home-page-h1 {font-size: 17px;}
   
}

@media only screen and (min-width: 450px) {

 
    
.mobile-only { display:none;}
.tablet-only { display: block;}
.tablet-and-larger { display:block;}
   
}


@media only screen and (min-width: 463px) {

    .zero-hassle img { margin:0;}

    .email-capture-form { flex-direction: row;}
    
  }   
  @media only screen and (min-width: 500px) {
  
  .growth-pricing h2, .hosting-pricing h2, .web-design-pricing h2  {max-width: 400px !important; margin-top:-30px !important;} }

@media only screen and (min-width: 543px) {

  
    

    h3{font-size:28px;}

    .about h2 {font-size:28px !important;}
      
    .design .text-box, .development .text-box, .maintenance .text-box { padding-left:20px; padding-right:20px;}
  
.testimonials h3 {padding-left: 0;}
 



   .about h1, .contact-page h1, .portfolio-page h1, .pricing-page h1  { font-size: 36px; }

   .about h2 { padding: 15px 20px 15px 20px;}

   
}



@media only screen and (min-width: 900px) {

  

  .hosting-pricing h2, .growth-pricing h2 { max-width: 500px !important;}

  footer .logo svg {width:55px !important; }

  .home header {  display:flex; align-items: center; flex-direction: row;}

  .header-wrapper > div { max-width: 1000px; margin:auto;}

  .header-wrapper { margin: 0px 20px 0 20px;  padding-left: 4%; max-width:350px ;}

  .home header img { max-width: 500px;}

   .hamburger-Bar { padding-right:10px;}



   



   

    .zero-hassle { flex-direction: row; gap:30px;}

 

    .zero-hassle div {margin:0; }

    .tablet-only { display: none;}

  

    .text-box { margin:0;  }

    

    

    footer .logo { font-size: 56px;}

   .footer-container {flex-direction: row;}

    
    

   .web-design-pricing  , .design { background-image: url(/images/home-page/design-background.jpeg);
        background-position: top right ; 
        background-size: cover;
    padding:7%;
       
    }

    .development { background-image: url(/images/home-page/development-background.jpeg);
        background-position: top  right ;  
        background-size: cover;
    padding:10%;  
    }
/*
    .maintenance { background-image: url(/images/home-page/pexels-tyler-lastovich-808465.jpg);
      background-position:  right ;  
      background-size: cover;
      
  padding:10%;  
  }
      */      
  .growth-pricing  { background-image: url(/images/about-page/what-we-offer-background.jpg);
    background-position: top right ; 
    background-size: cover;
padding:7%;
   
}

.web-design-pricing .pricing-card , .growth-pricing .pricing-card{ box-shadow: none;}
    
    
    .about h1, .contact-page h1, .portfolio-page h1, .pricing-page h1 { font-size: 42px; }

    .about .intro .container { flex-direction: row;justify-content:normal; gap:50px;}

    .about .intro img { max-width: 400px;}

   

    .about .intro { max-width:1100px; padding-top: 30px; margin: 0 auto 90px auto; }

    .about section { margin-bottom: 90px !important;}

    .about .offer h2 { margin-bottom:0 !important; }

    .about .offer > div { margin-top:0 !important; background-image: url(/images/about-page/what-we-offer-background.jpg);
        background-position: bottom ; 
        background-size: cover;
    padding:10% 5% 5% 5%;}

    .about .info-card { box-shadow: none;}

    .contact-page .contact { margin-top:50px;}
    
.web-design-pricing p, .growth-pricing p { max-width:44vw;}}

.article-page section { margin-bottom:0;}

.article-page picture { margin:0;}

.article-page .anchor { display: block;
  position: relative;
  top: -80px;
  visibility: hidden;}

  .article-page .anchor-offset { display: block;
    position: relative;
    top: -1000px;
    visibility: hidden;}

    .article-header-image { max-width:1920px;}

.article-page header { /*background-image: radial-gradient(white,#d9d9d9);*/  padding-bottom:20px; margin:80px auto 0 auto; /*border-radius:25px 25px 0 0 ;*/}

.article-page header img { max-width: 1200px; display:block; margin:auto !important;}

.article-page h1 { font-size:32px;padding:20px; text-transform: uppercase; line-height:1.2; max-width:600px; }
     
.article-page .author-image { max-width:50px; padding-top:5px;}

.article-page .author-info { justify-content: flex-start; padding-left:20px; max-width:600px;margin:auto;}

.article-page .author-info p { padding:0; font-weight: bold;}

.article-page main { padding:20px;}

.article-page h2 { text-transform: none; font-size: 24px; padding: 40px 0 20px 0; max-width:600px; margin:auto; line-height:1.4;}

.article-page .contents { max-width: 600px; margin:auto;}

.article-page .contents a { text-decoration: underline; color:#0F73C7; padding:3px 0 3px 10px;  }

.article-page p a { text-decoration: underline; color:#0F73C7;  }

.article-page main .row-container {gap:0; max-width:600px;margin:Auto;}

.article-page .info-graph { width:80%; max-width: 160px; padding:0 20px 10px 20px;}

.article-page .info-swirl { width:80%; max-width: 160px;}

.article-page .info-swirl-2 { width:80%; max-width: 240px;}

.article-page .info-text { font-size: 17px; font-style: italic; max-width:350px; margin:0; margin-top:10px}

.article-page .info-text-2 { font-size: 17px; font-style: italic; max-width:280px; margin:0; margin-top:10px}

.article-button { margin:10px auto 20px auto; }

.article-page .graph { max-width:500px; margin:auto; display: block; padding: 20px 0;}

.article-page .harrison-group { width:90%; max-width:250px; margin:auto; display: block; }

.article-page .link-container { margin:auto; }

.article-page .link-container a { font-weight: bold; font-size:20px;}

.article-page .harrison-container  {max-width:500px;  padding-bottom:25px; flex-direction: column-reverse; gap:20px !important;}

.article-page .bullet-container { max-width:800px !important; align-items:center; gap:20px !important; margin-top:20px !important; }

.article-page .bullet-container p {  text-align: center; }

.article-page .info-card {  flex-direction:column; min-height:170px; justify-content:center}

.article-page svg { max-height: 30px; width:30px; padding:10px !important; fill:#49A6DC;}

.article-page .article-footnote { max-width: 750px !important; margin:20px auto 20px auto !important}

.article-page .article-footnote img { max-width:290px;}

.article-page .article-footnote p { max-width:400px;} /*test*/

.article-page .article-footnote  { justify-content: space-evenly;}

.article-page .article-footnote .container { align-items:center;}

.article-page .article-footnote .fakeButton { margin:10px 0 0 0 ;}


.portfolio-page .portfolio {margin-top:50px}

.portfolio-page h2, .portfolio-heading { text-transform: none; padding-left:0px;}

.portfolio-heading { padding:0px;}

.portfolio-page-icon { width:100%; max-width: 20px; fill:#49A6DC !important }

.portfolio-page-icon-container { display: flex; gap:10px; padding-right: 20px; align-items: center;}

.portfolio-page-icon-wrapper {display: flex; flex-wrap: wrap;  justify-content: left;}

.portfolio-page-info { max-width: 400px !important;}

.portfolio-page-mockup { max-width: 500px !important;}

.web-design-pricing h2, .growth-pricing h2 { background-color: #ffffff;  padding:20px; text-align: center; border-radius: 20px; }

.web-design-pricing h2 {max-width: 300px;}

.growth-pricing h2 { max-width: 440px;}





  

@media only screen and (min-width: 730px) { .article-page .article-footnote .container { align-items:normal;}}

@media only screen and (min-width: 750px) { 

.article-page header img { border-radius: 0 0px 25px 25px; }

.article-page .header-container { opacity:99%; border-radius: 25px 25px 0 0 ; max-width:600px !important; margin:-20vw auto 0 auto !important;}



.article-page h1 { font-size:38px;}

}

@media only screen and (min-width: 900px) {

  .pricing-card-wrapper-home { flex-direction: row; justify-content: center; flex-wrap: wrap;}

  .web-design-pricing h2, .hosting-pricing h2, .growth-pricing h2  { margin:auto !important;}

.pricing-card { flex-direction: row; width:95%; max-width:950px; gap:20px;}

.pricing-card-home { flex-direction: column; max-width:300px; gap:0;}

.pricing-card-title-container { width:300px;}

.pricing-card p { text-align: left;}

.pricing-card-home p { text-align: center;}



 }

@media only screen and (min-width: 970px) { 

  .header-text-large { font-size:68px;}

  .header-wrapper { max-width:400px !important;}

    .testimonials h3 { max-width:260px;}

    .portfolio h3 { max-width: 250px;}
}

@media only screen and (min-width: 1100px) { 

.portfolio {  max-width:1000px;}

    .portfolio p { max-width: 550px;}

    .portfolio h3 { max-width: 320px;}
    

    .portfolio .row-container { gap:50px;}  

    .portfolio img { max-width: 350px;}

    .row-reverse { flex-direction: row-reverse;}

    .about-us { flex-direction: row; gap:50px;}

    .about-us p { max-width:550px !important;}

    .portfolio-page-mockup-offset { margin-left:-40px; } 

    .portfolio-page-mockup-gap { gap:60px !important;}

}
@media only screen and (min-width: 1150px) {
.article-page .header-container { margin-top: -230px !important; }
}

@media only screen and (min-width: 1200px) {




  .header-text-large { font-size:72px;}
   
       .home header {max-width:1160px; margin:100px auto 20px auto;}

       .home header img { max-width:550px;}

       .header-wrapper { padding-left:50px; max-width:450px !important;}
    

   .home-page-h1 { font-size:18px;}
            
    h1 { font-size:24px;}

  section { margin-bottom: 100px;}

    

    .header-text-small {font-size: 18px;  }

    .introduction { margin-top:50px;}

    .introduction h2 {  font-size:48px; max-width:none;  }

    .introduction p { max-width:550px;}

    h3 { font-size: 36px;}

    .offer h2 { font-size: 36px !important; max-width:360px !important;}

   

    p { font-size:17.6px;}

    .fake-p { font-size:17.6px; }

    .introduction img { margin:0;}

    .text-box {max-width:700px;  }

 

    .zero-hassle { max-width: 1200px; }

    .zero-hassle div {max-width:700px; justify-content: flex-start;}

   

    .contact .row-container { max-width:500px;}

   

    .testimonials h3 {max-width: 340px ;} 


   

    .contact > div { flex-direction: row; justify-content:center;}

    .contact  .row-container {flex-direction: column; justify-content: normal; padding:15px 50px 30px 30px;}

    .stay-row {flex-direction: row !important; max-width:900px;}

    form { margin:0;}

    footer .logo { font-size: 64px;}

    .about h1, .contact-page h1, .portfolio-page h1, .pricing-page h1 { font-size: 48px; }

    .about .intro p { max-width: 600px;}

    .about .intro { max-width:1100px; padding-top: 50px;}

    .about .offer h3 { max-width:320px !important; padding:10px 20px;}

    
  
    .contact h2 { max-width:600px; margin:auto; padding-left:20px;}

    .portfolio-heading { font-size: 28px;}

   
}


@media only screen and (min-width: 1290px) {

   

    .portfolio img { max-width: 400px;}

    
    .web-design-pricing p, .growth-pricing p { max-width:600px;}

  

   

    

  

}

/* ANIMATIONS */

/* fade on scroll */


.reveal{
    
  opacity:0;
  
  }
  .active{
    -webkit-animation-duration: 1.3s;
          animation-duration: 1.3s;
  -webkit-animation-name: fade-in;
          animation-name: fade-in;
  }

  @-webkit-keyframes fade-in {
    0% {
       -webkit-transform: translateY(150px);
       transform: translateY(150px);
       opacity: 0;
   }
   
   100% {
       -webkit-transform: translateY(0px);
       transform: translateY(0px);
       opacity: 1;
   }
   }
 
@keyframes fade-in {
 0% {
    -webkit-transform: translateY(150px);
    transform: translateY(150px);
    opacity: 0;
}

100% {
    -webkit-transform: translateY(0px);
    transform: translateY(0px);
    opacity: 1;
}
}

.waviy:hover { animation:0;
              -webkit-animation: 0;}

  .waviy {-webkit-animation-name: waviy; 
    animation-name: waviy; 
    -webkit-animation-duration:5s ;
    animation-duration:5s ;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
    -webkit-animation-delay: 3s;
    animation-delay: 3s;}

    @-webkit-keyframes waviy {
        0%,10%,100% {
          -webkit-transform: translateY(0);
          transform: translateY(0);
        }
        5% {
            -webkit-transform: translateY(-3px);
          transform: translateY(-3px);
        }
      }

  @keyframes waviy {
    0%,10%,100% {
        -webkit-transform: translateY(0);
      transform: translateY(0);
    }
    5% {
        -webkit-transform: translateY(-3px);
      transform: translateY(-3px);
    }

   
  }

  .bounce {-webkit-animation-name: bounce; 
    animation-name: bounce; 
    -webkit-animation-duration:1s ;
    animation-duration:1s ;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
    }

    @-webkit-keyframes bounce {
        0%,100% {
          -webkit-transform: translateX(0);
          transform: translateX(0);
        }
        50% {
            -webkit-transform: translateX(3px);
          transform: translateX(3px);
        }
      }

  @keyframes bounce {
    0%,100% {
        -webkit-transform: translateX(0);
      transform: translateX(0);
    }
    50% {
        -webkit-transform: translateX(3px);
      transform: translateX(3px);
    }

   
  }

  /* possible solution to samsung problem but just adding !important might work too
  NONE OF THIS STUFF WORKS

  @media (prefers-color-scheme:dark) {
    
    .bluelinear { background-image: linear-gradient( #49A6DC ,#0F73C7) !important; background-size: 100%; background-color:#49A6DC !important; background-clip:text; -webkit-background-clip: text;
    -moz-background-clip: text;
    -webkit-text-fill-color: transparent; 
    -moz-text-fill-color: transparent;}
   
  } 

  :root {
    color-scheme: light !important;
  } */
/*
  @media (prefers-color-scheme: dark) {
    .faFaBar { background-color: #ffffff;
    }}*/