*{ box-sizing: border-box; list-style-type: none; padding: 0px; margin: 0px;   font-family: 'Poppins', sans-serif; color:#222; text-decoration: none; }
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;600;700;900&display=swap');

body{margin:0px; padding: 0px 0px 0px 0px;}


::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
  color: #000;
  opacity: .6; /* Firefox */
}

:-ms-input-placeholder { /* Internet Explorer 10-11 */
  color: #000;
  opacity: .6; /* Firefox */
}

::-ms-input-placeholder { /* Microsoft Edge */
  color: #000;
  opacity: .6; /* Firefox */
}

p{line-height: 24px;}
.fade{ animation: fadeIn 5s; }
@keyframes fadeIn {
  0% { opacity: 0;  transform: translateY(5%); }
  15% { opacity: 1;transform: translateY(0%); }
}
* {
  -webkit-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
}

a[x-apple-data-detectors],
a[x-apple-data-detectors] *,
.x-apple-data-detectors,
.x-apple-data-detectors * {
  color: inherit !important;
  text-decoration: none !important;
  font-size: inherit !important;
  font-family: inherit !important;
}


.reveal{
  position: relative;
  transform: translateY(30px);
  opacity: 0;
  transition: 1s all ease;
}

.reveal.active{
  transform: translateY(0);
  opacity: 1;
}

#top-left{  float: left;  width: 55%; position: relative;  background:#f9af00; }
.recognized{ margin-top:50px; width: 90%; font-style: initial; font-size:34px; float:left; }
.recognized a{ color:#003263;}
.welcome{ width: 9%; float: left;  padding: 0px 20px ; writing-mode: vertical-lr; transform: rotate(180deg); display: flex; letter-spacing: 1px;
align-items: center; min-height: 580px; }
.line{height: 100vh; background: #000; width: 1px; float: left; writing-mode: vertical-lr; transform: rotate(180deg); display: flex;
align-items: center;  opacity: 0.15;    }
header{ width: 90%; float: left; padding:20px 20px 20px 40px;    }
.logo{ max-width: 190px; width: 100%;  float: left; margin-top: 10px;}
.logo img{  width: 200px;              /* Desktop */
  height: auto;
  aspect-ratio: 200 / 67;    /* Exact ratio */
  display: block;
  padding-right: 25px;}

#banner{ width: 90%; float: left; padding:80px 20px 100px 120px; }
#banner h1{float:left; width:100%; }

#banner h2 small, #banner h1 small, .subheading{display: block; padding: 5px 0px; font-size: 20px;}
#banner strong{ font-size: 61px; font-weight: 800; line-height: 70px;  }
#banner strong small{ font-size: 34px; font-weight: 600; display: block; line-height: 52px; }
#banner p img{   
    max-width: 100%;
    height: auto; }

#banner p{ font-size: 14px; max-width: 650px; width: 100%; float: left;  line-height: 28px; padding: 10px 0px;}

#banner p svg{ max-width: 650px;   height: auto;
    display: block; }

#banner .click{ width:100%; padding:20px 0px; float:left; }
#banner .click a{ background:#003263; border-radius:5px; padding:10px 20px; color: #FFF; font-size:20px; font-weight:600; float:left; margin:10px 10px 10px 0px; }
.attention{position:fixed; left:0px; bottom:0px; background:#003263; padding:8px; color:#FFF; font-size:10px; z-index:9999999; text-transform: uppercase;  font-weight:bold; }
.attention a{ color:#FFF;}
.attention img{ width:25px; display:block; margin:0px auto;  }
/*  Checkout my other pens on  https://codepen.io/grohit/  */

.subheading{ font-weight:600; }

.profile{ max-width:250px; width:100%;display:block; margin: 0px auto; margin-bottom:10px;  }
.mySwiperreview .name{ font-size:25px; width:100% ; text-align: center;}
.mySwiperreview .desination{ padding:0px; text-align:center; width:100%; }

#banner h1 small, #banner h1 strong, #banner h2 small, #banner h2 strong{ color: #222;  }


#banner .rocket{ width: 100%; float: left; padding-top:1%; }
.rocket img{float: left; max-width:143px; height:auto;}
#banner .rocket-right{ width: 78%; float: right; padding: 1% 0%;}

#banner .rocket-right span{ display: block; font-size: 24px; font-weight: 600; }
#banner .rocket-right strong{ font-size:43px;  line-height: 43px; background: #003263; display: inline-table; color: #FFF; padding: 15px; margin: 2px; border-radius:5px; }

.texta{color:#FFF; text-decoration:underline; }
.discover span{ font-size: 16px; font-weight: 600; padding:10px 0px; float: left;  }
.discover form{ width: 100%; max-width: 560px; float: left; background: #f5f5f5; border-radius: 10px; padding: 15px 15px 15px 35px;  }
.discover form input{ width: 60%; float: left; padding:8px 0px; background:#f5f5f5 ; border:none;  font-size: 20px; line-height: 24px;}
.discover form input[type=submit], .discover form a{ width: 40%; float: left; background: #003263;border-radius: 5px;  padding:11px; color: #FFF; font-size: 14px; text-align: center; font-weight: 700; line-height: 18px;}

.discover marquee{display:grid;}
.discover marquee li{display:inline; margin-right:20px;  }
.discover marquee li img{margin-right:5px;}

.awards{ width: 100%; height: 70px;  background:#003263; padding: 15px 0px; float: left;  position: fixed; bottom: 0px; left: 0px; border-top: 1px solid #FFF; z-index: 999999;}
.awards ul{ float:left; width: 55%; padding: 0px 0px 0px 0px;  }
.awards ul li{ float:left; width:33.3%;  margin: 0px 0px 0px 0px; text-align: center; }
.awards ul li:nth-child(2) img{ margin-top: 2px; }
.awards img{ margin:0px 0px 0px 0px; opacity: 0.4; 
  height: 40px;
  width: auto;

  aspect-ratio: auto; /* optional, lets browser auto-calculate */    
    
}
.google-area{float: left; width: 45%;}
.google-area img{margin: 5px 0px 0px 10px; opacity: 1;}
.google-area ul{ padding: 0px; }
#top-right{ height: 100vh; float: left; /* max-height: 1080px;*/ width: 45%;  background: rgb(249,186,0);
background:  linear-gradient(90deg, rgba(249,175,0,1) 0%, rgba(253,154,1,1) 100%);   position: fixed; right: 0px;}

.info{ width: 100%;float: right; max-width: 580px; padding:40px 0px 50px 20px; }
.contact-info{ float: left; max-width: 420px;  width: 100%;}
.contact-info .expert{ margin:-2px 20px 5px 0px; float: left; }
.contact-info strong{  font-size: 25px; font-weight: 700; line-height: 34px; display: block; }
.contact-info small{font-size: 14px; display: block;   }
.contact-info .callicon{ margin: 0px 10px -4px 0px; }

#top-right .google-area{ width: 100%; height: 70px; border-top: 1px solid #FFF;  position: absolute; bottom: 0px; background:#003263; padding: 15px; }
.mascot{ position: fixed; right: 0px; top: 15%; max-width: 290px; width: 100%; z-index: -1; }
.slider{ width:100%;float: left; padding: 70px 0px 70px 0px; background: url(images/kleverish-icon.svg) center right no-repeat; position: relative; }
.slider ul li {width: 25%; height: 250px; float: left;}

      .swiper-slide img {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;
      }

      .swiper-slide {
     
     
  width: 65%; /* or whatever your layout requires */
  position: relative;
  overflow: hidden;
      }

.gradient{ background:  linear-gradient(90deg, rgba(249,175,0,1) 40%, rgba(253,154,1,0) 100%); width:35%; position: absolute; top: 0px; left: 0px; height: 100vh; z-index: 999999;}

.google-area img{ max-width: 128px; width: 100%; float: left; }
.google-area small{ font-size:12px; max-width: 170px; padding:5px 10px 4px 20px; width: 100%; float: left; color:#7684aa; }
.ontime{ float: right; width: 55%; }
.ontime span{  width:  33%; float: left; padding: 10px 0px; text-align: center; font-weight: 500; color: #FFF; text-transform: uppercase; }

.ontime span a{color:#FFF; font-size:14px;} 

.main-area{width: 55%;  float: left;}
#services, #provenresult, #simple, #difference, #packages { width:100%; background: #003263; padding: 7% 10% 7% 10% ; float: right;  }

#services .left-p{ width: 48%; float: right; color: #FFF; padding: 10px 0px; font-weight: 400;}
#case-study .left-p{ color:#000; width:100%; float:left;}
#services .left-p strong{color: #FFF;}
.left-p a{ color:#FFF; font-weight:bold; }
#services h2, #services h3, #services h4, .benefities h4,  .benefities h2, .benefities h3{ font-size: 43px; color: #FFF; width: 48%; line-height: 52px; float: left;  }

 .benefities h2{ color:#303030; width:90%; }
#services ul{ width: 100%; padding:0%; display:flex; }
#services ul li{ background:#f9af00; width: 45%; color: #000; float: left; padding: 40px ;  margin:10% 0% 0% 0%; border-radius: 5px; transition: all 0.3s ease-in;}
#services ul li:hover{ background: #ffba01; transition: all 0.3s ease-in-out; }
#services ul li:nth-child(even){ margin-left: auto;
order: 2; }
#services ul li span{ font-size:34px; float: left; font-weight: 800; line-height: 34px;  }
#services ul li img{width: 100px;
  height: auto;
  aspect-ratio: 1 / 1;
  display: block;}
#services ul li strong{ font-size: 25px; width: 100%; float: left; line-height: 30px; }
.priceline{  text-decoration:line-through; display:inline;}
#services ul li p{ float:left; width: 100%; padding: 10px 0px; font-size: 14px; }
#services ul li small{ padding-top: 20px; float: left; width: 100%; font-size:11px; font-weight: 600; }
.readmore{ font-size:13px; width:100%; padding:15px; background:#003263; border-radius: 5px; color: #FFF;  float: left;}

.benefities, #client, #smm-result, #smm-ways, #case-study{ background:#f2f2f2; width: 100%; padding: 7% 20px 7% 10% ; float: right;  }

.bg{ background:#f9af00;}

#client img{ width:100%; max-width:805px; }
.benefities h4, .benefities h3, .benefities h2, #client h5{ color: #303030; width: 80%; }
.benefities p, #client p{ text-align: left; float: left; width: 90%; font-size: 18px; line-height: 28px; color: #303030; padding: 20px 5% 20px 0%; }
.benefities p span {color: #303030; font-weight: 800; text-decoration: underline ;}
.benefities strong{ font-size: 18px; color:#003263; width: 100%; float: left; }
.benefities ul{ width: 100%; float: left; padding:5% 0% 0% 0%; }
.benefities ul li{ width: auto; float: left; padding: 15px 20px; border-radius:30px; margin:0px 20px 20px 0px; color: #000; background: #ffba01; transition: all 0.3s ease-in-out;}
.benefities ul li:hover{background:#003263;transition: all 0.3s ease-in-out;}
.benefities ul li:hover a{ color: #FFF; }

#interaction, footer{width: 100%; background: #f9af00; padding: 7% 20px 0% 10% ; float: right;}
#interaction h6, #interaction h2{ font-size: 43px; line-height:52px; }
#interaction input[type=checkbox]{ width: 25px; height: 25px; float: left; margin:0px 20px 20px 0px }
#interaction ul{ width: 100%; float: left; padding-top: 25px; }
#interaction ul li{ width: 90%; float: left; margin:10px 0px; font-size: 20px; }
#interaction img{  width: 100%;              /* Responsive inside parent */
  max-width: 360px;         /* Prevents overscaling */
  height: auto;
  aspect-ratio: 3 / 2;      /* Reserves correct height before image loads */
  display: block; }
#interaction p{ padding: 10px 0px; float:left; width: 80%; font-size: 25px; }
#interaction p span, #interaction p a{ text-decoration: underline; font-weight: 800; }
#client h5{font-size:43px;}
#client strong{ padding: 35px 0px; color: #003263; float: left; width: 100%; }
#client ul{ width:100%; float:left; }
.mySwiperreview, .myresults{ width:90%; padding-top:7%; float:left; }

.mySwiperreviews{ width:100%; padding-top:2%; float:left;  }
.mySwiperreviews .swiper-slide img{ border-radius:20px; }
.mySwiperreviews strong{ font-size:25px; }

.mySwiperreview h3{ font-size:43px;
width: 80%;line-height: 52px; margin-bottom: 5%;
float: left; }

.mySwiperreview strong{ font-size:34px; line-height:34px; }
.mySwiperreview {font-size: 18px; }
.mySwiperreview .swiper-slide, .myresults .swiper-slide{ background:#FFF; padding:25px; border-radius:20px; aspect-ratio:auto;}
.mySwiperreview .swiper-slide p{ width:100%; font-size:16px; }
.mySwiperreview small{ font-size:12px; font-weight:800; }
.mySwiperreview span{ font-size:12px; width:100%; float:left; }
.myresults{ padding-top:0px; }
.myresults .swiper-slide{ background:#FFF; padding:25px; border-radius:20px; }
.myresults td, .myresults th{ border-bottom: 1px solid #dee2e6; padding: 10px 5px; font-size: 14px;}
 .myresults .text-center{ border-left: 1px solid #dee2e6;  text-align: center;}
.grey{ background:#f2f2f2; }


.review{ width: 100%; padding: 50px 0px 30px 300px; float: left;font-style: italic; background: url(images/client/quotes.svg) center left no-repeat; }
.review blockquote{ padding: 0px; width:80%; font-size: 24px;   }
#client .review strong{ padding: 30px 0px 5px 0px; font-size: 20px; float: left; line-height: 20px; }
#client .review span{ font-size: 16px; }
#simple ul{ float: left; width: 100%; }
#simple ul li{ width: 30%; margin-right: 3.3%; float: left; color: #FFF; padding: 20px 0px; font-size: 20px; }
#simple, #difference{ padding-bottom: 7%; }
#simple h6, #simple h3, #simple h2, #difference h6, #case-study h2{ width: 100%;font-size: 43px;  color: #FFF;  line-height: 52px; float: left;}
#case-study h2{ color:#000;}
#simple p, #difference p {width:90%; float: left; padding: 20px 0px; color: #FFF; font-size: 18px;}
#difference p{ font-size:16px; font-weight:400; }
#simple ul li p{ font-size: 14px; font-weight: 400; color:#FFF;}
.iconsize{display: block; width:72px; height:72px; margin-bottom: 10px;}

#faq, #abouth{ width: 100%; float: left; padding: 7% 10% ; float: right;}
#faq h6{ font-size: 34px; float: right; width: 100%; padding-left:10% ; }
#faq h6 strong{ color: #333333; font-size: 25px; display: block; }
#faq span{ width: 100%; float: left; padding-left: 10%;}
#faq img{width: 30%; float: left;}
#faq ul{ float: right; padding: 30px; width: 65%; padding-right: 5%; padding-top: 10%; }
#faq ul li{ font-size: 20px; font-weight: 700; padding-bottom: 20px; margin-bottom: 20px; border-bottom: 1px solid #c2c2c2;  }


#abouth h1{font-size: 34px; float: right; width: 100%;}
#abouth h2{font-size:43px; }
#abouth strong{ font-size: 18px; text-decoration: underline; padding: 30px 0px 0px 0px; color: #003263;  float: left; width: 100%;}
#abouth p{ float: left; width: 100%; line-height: 28px; padding: 20px 0px; }
#abouth ul { float: left; width: 100%;}
#abouth ul li{ width: 45%; float: left; padding: 10px 0px; display: inline-flex; }
#abouth ul li img{width: 30px; margin-right: 15px;}
#abouth ul li:nth-child(even){ float: right;  }


#abouth p{float: left; width:100%;}
footer{ background:#f9af00; width: 100%; padding: 7% 20px 7% 10% ;  }
footer h6{ font-size: 43px; }
footer form, #banner form { width: 90%; }
footer span input, footer span label, footer span textarea, footer span select, #banner form span input, #banner form span label, #banner form span textarea, #banner form span select{ float:left; width:90%; font-size: 20px; border:none; background: none;  font-weight: 400;}
footer span, #banner form span {float: left; width: 100%; font-size: 43px; font-weight: 800; border-bottom: 1px solid #333333; padding: 25px 0px;}
footer span:nth-child(5) #banner form span:nth-child(5){ border: none; }
footer span small, #banner form span small{font-size: 43px; font-weight: 800; float: left; width:10%;}
#banner form span small{ line-height:34px; }
.submitarea input[type=submit], #banner .submitarea input[type=submit]{ font-size:25px; border-radius: 5px; border: none; text-transform: uppercase; float: right; font-weight: 800; background:#ffba01; padding: 10px 30px; cursor: pointer; }
footer span textarea, #banner form span textarea, #banner form span select{ height: 35px; }
.submitarea, #banner .submitarea{ background:#003263; border-radius: 5px; padding: 20px; width: 100%; float: left; }
.submitarea p{font-size: 24px; color: #FFF;  padding:10px 20px; float: left; font-weight: 300;  }
#banner .submitarea p{ width:auto; }
#banner .copyright {padding:0px;}
#banner .copyright p{ width:auto; padding:0px; }
#banner .copyright ul{ padding:3px 0px }
.grecaptcha-badge { 
    visibility: hidden !important;
}
footer ul{ float: left; width: 90%; margin-top: 20px; }
footer ul li{ float:left; font-size: 25px; font-weight:800; padding: 10px 0px;  width: 49%; }
footer ul li:nth-child(even){ float: right; }
footer ul li small{ font-size: 16px;  display: block; width: 100%;  font-weight: 400; }
.copyright{ width:90%; font-size: 14px; color: #333; padding: 30px 0px 30px 0px;  margin-top: 20px; float: left; }
.copyright p{ float:left; }
.copyright address{ font-style:inherit; margin-bottom:20px; }
.copyright address a{ float:left; font-style:inherit; }
.copyright a{ float: right; font-weight: 600; }
.copyright ul { float: left; width: auto; padding: 0px 20px; margin:0px; }
.copyright ul li{ width: auto; float: left !important; font-size: 12px; padding: 2px 10px; font-weight: 600; }

#simple strong, #difference strong{ font-size: 25px; float: left; width: 100%; padding: 20px 0px; color: #FFF;}
 #difference strong{ font-size:20px; padding-bottom:5px; }
#simple span, #difference span{ width: 100%; float: left; color: #FFF; padding: 15px 0px; }
.googlemap{ width:100%; float:left;}
.topbelt{ width: 100%; position: fixed; top:0px; left: 0px; height: 80px; background: #FFF; }
.beltleft{ width: 80px; position: fixed; top:0px; left: 0px; height: 100vh; background: #FFF; }
.beltright{ width: 80px; position: fixed; top:0px; right: 0px; height: 100vh; background: #FFF; }

.btn{ color:#003263; width:100%; float:left; background:url(images/favicon.svg) top left no-repeat; padding-left:25px; }

#simple p{color:#FFF; }
.clicktoaction, #simple .clicktoaction { width:100%; padding:40px 0px 0px 0px; float:left; }
.clicktoaction strong, #simple .clicktoaction strong{ font-size:25px; color:#FFF; }
.clicktoaction p , #simple .clicktoaction p{ font-size:14px; color:#FFF; padding:0px 0px 15px 0px; }
.clicktoaction a{ float:left; border-radius:5px; background:#f9af00; padding:15px 20px;}
.clicktoaction a:nth-child(5){ background:none; border:2px solid #f9af00; color:#FFF; padding: 13px 20px;}
.clicktoaction span, #simple .clicktoaction span{ float:left; padding:15px; color:#FFF; font-weight:600; width:auto; }
#simple .clicktoaction strong{padding:0px;}


.voice{ float: right;
margin-top:22px;
}
 .voice a{ padding: 15px 30px;font-weight: 700;
  font-size: 14px;float: right;
  /*border: 2px solid #303030;*/
  color: #303030;
  border-radius: 40px; 
     background:#f5f5f5;
 } 

/*-----Popup----*/

.box {
  width: 40%;
  margin: 0 auto;
  background: rgba(255,255,255,0.2);
  padding: 35px;
  border: 2px solid #fff;
  border-radius: 20px/50px;
  background-clip: padding-box;
  text-align: center;
}

.button {
  font-size: 1em;
  padding: 10px;
  color: #fff;
  border: 2px solid #06D85F;
  border-radius: 20px/50px;
  text-decoration: none;
  cursor: pointer;
  transition: all 0.3s ease-out;
}
.button:hover {
  background: #06D85F;
}

.overlay {
  position: fixed;
  top: 0;
  bottom: 0; z-index: 9999999999;
  left: 0;
  right: 0;
  background: rgba(0, 0, 0, 0.7);
  transition: opacity 500ms;
  visibility: hidden;
  opacity: 0;
}
.overlay:target {
  visibility: visible;
  opacity: 1;
}

.popup {
  margin: 0px auto;
  padding: 20px;
  background:#003263;
  border-radius: 5px;
  width: 100%;
  height: 100vh;
  position: relative; text-align: center;
  transition: all 5s ease-in-out;
}

.popup h2 {
  margin-top: 0;
  color: #333;
  font-family: Tahoma, Arial, sans-serif;
}
.popup .close {
  position: absolute;
  top: 20px; z-index: 999999999;
  right: 30px;
  transition: all 200ms;
  font-size: 30px;
  font-weight: bold;
  text-decoration: none;
  color: #FFF;
}
.popup .close:hover {
  color: #F2F2F2;
}
.popup .content {
padding: 7% 0px 0px 0px;
  overflow: auto; height: 100%;
}
#benefities .content span{ font-size: 43px; color: #FFF; width: 100%; float: left; padding: 30px 0px 60px 0px; }
#benefities .content strong, #musicinfo strong{ width: 100%; float: left; color: #FFF; position: absolute;
bottom: 30px;
left: 0px; }


.popup .content span{ font-size: 34px; width: 100%; float: left; text-align:center; color:#FFF; font-weight: 700; padding: 30px 0px; }
.popup .content strong{ font-size: 18px; color: #FFF; width: 100%; padding: 20px 0px; }
.longterm, .shortterm{  display: inline-block;  margin: 20px 20px 20px 20px;  }


.longterm a, .shortterm a{  font-weight: 600;  padding:20px 50px; min-height: 180px;  border-radius: 5px; display: inline-block; float: left; width: auto; font-size: 24px; background: linear-gradient(90deg, rgba(254,212,48,1) 0%, rgba(255,186,0,1) 100%); }
.longterm a img, .shortterm a img{ max-width: 100px; width: 100%; margin:0px auto; display: table; }

#popup3 .popup{ overflow: auto;
}
 
.shortinfo, .longinfo {
    display: none;  
  position: absolute;
    width: 100%; top:0px; right: 0%; background: #003263; min-height: 380px; height: 100%; z-index: 99999; padding: 5% 2px;}

.shortinfo ul, .longinfo ul{ float: left; width: 100%; padding: 20px 0px;}
.shortinfo ul li, .longinfo ul li{ width: 25%;
float: left;
border: 1px solid #4d5d88;
 color: #FFF;
margin: 0px;
background: 0px;
border-radius: 0px; border-left: none;
min-height: 280px; padding: 30px 10px; }
.shortinfo ul li:hover, .longinfo ul li:hover{ background: none; }

.shortinfo ul li strong, .longinfo ul li strong{color: #FFF; float: left; width: 100%; margin-top: 20px;}
.shortinfo ul li p, .longinfo ul li p{ color: #FFF; text-align: center; font-weight: 300; width: 100%; padding: 10px 0px; font-size: 14px; }
.shortinfo ul li img, .longinfo ul li img{max-width: 100px; margin: 0px auto; display: table;}
.shortinfo ul li:nth-last-child(1), .longinfo ul li:nth-last-child(1){ border-right: 0px; }
.shortinfo h4, .longinfo h4{ color: #FFF; padding: 40px 0px; width: 100%; text-align: center;  }

.shortinfo .back, .longinfo .backs, .shortinfo small, .longinfo small{color:#FFF; width: 150px; text-align: center; cursor: pointer;}
.shortinfo small, .longinfo small{ float: right;  }
.shortinfo small a, .longinfo small a{ color: #FFF; font-size: 18px; font-weight: 700; }
.speed, #banner .speed{width: 100%; float: left; padding-bottom: 20px; font-size: 12px;}


/*---------- Social Media Page--------*/
.socialdriven-result .left{ float:left; max-width:143px; width:100%; }
.socialdriven-result .right{ float:right; width:80%; padding:15px 0px; }
.socialdriven-result{ float:left; padding:30px 0px 0px 0px;  }
.socialdriven-result span{ width:100%; float:left; font-weight:bold; font-size:20px; }

#banner .socialdriven-result strong{ width:100%; float:left; font-size:52px; line-height: 43px; color:#003263; }
.socialdriven-result span img{ display:table;max-width:200px; width:100%; }


#smm-result, #smm-ways, #case-study{padding:7% 10% 7% 10%}
#smm-result p, #case-study p{ line-height:34px; padding-top:20px; }

#smm-result span, #case-study span{ float: left; width: 100%;
font-size: 25px;
font-weight: 600; }

#smm-result strong{ float: left; width: 100%;
font-size: 52px;
color:#003263;
line-height: 52px; }

#case-study strong{ float: left; width: 100%;
font-size: 52px;
color:#003263;
line-height: 52px; }



#smm-result .review-left span {
  font-size: 14px;
  font-weight: 400; line-height: 18px;
}



#smm-result .review-left strong{ font-size: 43px; padding:20px 30px 0px 0px; color: #000; line-height:52px; }
#smm-result .review-left ul{ float: left; width: 100%; padding:0px 30px; }
#smm-result .review-left ul li{ width: 50%; float: left; text-align: center;   background:none; padding: 0px 10px 0px 10px; border-radius: 0px;  min-height: inherit;}
#smm-result .review-left ul li:nth-child(1){ border-right: 2px solid #e5e5e5; }
#smm-result .review-left ul li strong{ font-size: 34px; font-weight: 800; color:#003263; padding: 0px;}

#case-study .review-left span {
  font-size: 14px;
  font-weight: 400; line-height: 18px;
}

#case-study .review-left strong{ font-size: 24px; padding:20px 30px 0px 0px; color: #000; line-height:34px; }
#case-study .review-left ul{ float: left; width: 100%; padding:0px 30px; }
#case-study .review-left ul li{ width: 50%; float: left; text-align: center;   background:none; padding: 0px 10px 0px 10px; border-radius: 0px;  min-height: inherit;}
#case-study .review-left ul li:nth-child(1){ border-right: 2px solid #e5e5e5; }
#case-study .review-left ul li strong{ font-size: 34px; font-weight: 800; color:#003263; padding: 0px;}




#smm-result .review-left{ width: 48%;
float: left;
padding: 40px 0px; }
#smm-result .review-left img
{ width: 125px;
  height: auto;
  aspect-ratio: 125 / 124;
  display: block; }


#case-study .review-left{ width: 33.3%;
float: left;
padding: 40px 0px; }


#smm-result ul{ 
width: 46%;
float: right;
padding: 30px 0px;}


#smm-result ul li{ width: 49%;
float: left;
padding: 50px 40px 10px 40px;
line-height: 28px;
border-radius: 10px;
background: #f2f1f1;
min-height: 320px; }

#smm-result ul li {
  width: 49%;
  float: left;
  padding: 50px 40px 10px 40px;
  line-height: 28px;
  border-radius: 10px;
  background: #f2f1f1;
  min-height: 320px;
}

#smm-result ul li{   font-size: 18px;
  font-weight: 700;
  color: #000;
  float: left;
  width: 100%;
  text-align: center;
  margin-bottom: 0px;
  line-height: 18px;
 }

#smm-result ul li strong{ font-size: 18px; font-weight: 700; color: #000;   float: left; width: 100%; text-align: center; margin-bottom: 0px; line-height: 18px;}

#smm-result ul li span{  font-size: 15px; font-weight: 400;  float: left; width: 100%; text-align: center; }
#smm-result ul li p{ font-size: 14px; float: left; width: 100%; text-align: center;  font-weight:400;  }
#smm-result .down{ display: table; margin: 0px auto; }

#smm-ways{ width: 100%;float: left; }
#smm-ways h5{ font-size:43px;  width: 45%; float: left; line-height: 52px; }
#smm-ways h5 span{ color: #003263; }
#smm-ways p{  float: right; width: 50%; font-size: 20px; font-weight: 300; }
#smm-ways strong{ width: 100%; float: left; font-size: 20px; font-weight: 500; padding: 0px; margin-top: 40px;  }

#smm-ways ul{ float: left; width: 100%; padding: 30px 0px; line-height: 70px; }
#smm-ways ul li{  width: 100%; float: left; margin-bottom: 10px;  transition: all 0.1s ease-in-out; padding:0px 20px 0px 60px; font-size:16px; font-weight: 400; background: url( images/correct.png) 20px 22px no-repeat #e5e5e5; }
#smm-ways ul li:hover{ background-color: #1a2845; color: #FFF; transition: all 0.1s ease-in; }
#simple .smm-benefities li{ width:100%; float:left; padding:15px 0px 15px 50px; background:url(images/smm-listing.svg) center left no-repeat; background-size: 5%;}

.menuarea{ width:90%; padding:2.5%; margin:0px auto; display:table; }
.menusection{ width:23%; float:left; margin-right:2%; margin-bottom:2%;  }
.menusection ul{ float:left; padding:25px; }
.menusection ul li{ font-size:16px; color:#FFF; float:left; width:100%; text-align:left; padding-bottom:10px;  }
.menusection strong{ text-align:left; color:#000; align-items: center; float:left; width:100%; font-size:18px;  line-height:24px; background:linear-gradient(90deg, rgba(249,175,0,1) 0%, rgba(253,154,1,1) 100%);padding:20px 25px; border-radius:10px;  display:flex; font-weight:400;  }
/*.menusection strong img{ max-height:50px; height: 100%; display:flex; padding-right:25px; }*/

.menusection strong img
{    height: 50px;
    aspect-ratio: 1 / 1;
    display: inline-block;
    padding-right: 25px;
    width: 80px;}

.navheading{ width:100%; float: left;   /*background:url(images/custom-web-developement.png) top right no-repeat; background-size: 28%;*/}
.navheading img{ float:right; margin-right:2%;     width: 100%;
    max-width: 360px;
    height: auto;
    aspect-ratio: 3 / 2;
  }
.navheading strong{ width:60%; float:left; font-weight:900; color:#FFF; font-size: 52px; text-align:left; line-height:61px; padding:80px 0px 40px 0px; }
.menuarea ul{ width:100%; float:left; padding-top:20px; }
.menuarea ul li{ float: left; color:#FFF; padding-right:60px; font-weight:300;   }
.menuarea ul li a{ color:#FFF;  opacity:0.6;}
.menuarea ul li a:hover{  opacity:0.95;}
.nav{ position:fixed; right:50px; top:58px; width:60px; z-index:4444; }
.nav img{   width: 60px;
  height: auto;
  aspect-ratio: 60 / 22;
  display: block;}


/*---- Responsive Start----*/

.quicklinks{ width:100%; float:left; padding:10% 5% 0% 5%; background:url(images/kleverish-icon.svg) center right no-repeat; }
.quicklinks ul{ width:100%; padding: 0% 10%; float:left; }
.quicklinks ul li{ width:48%; float:left; margin-bottom:4%; text-align:center; }
.quicklinks ul li:nth-child(odd){ float:right; }
.quicklinks ul li a{ background:#003263; color: #FFF; font-size: 18px; padding:50px 20px; width: 100%; float: left; font-weight: 600;  border-radius:10px; }
.quicklinks ul li a img{ width:100px; height:100px; display:table; margin:0px auto; }
#banner .policy{ width:100%; float:left; }
#banner .policy strong{ font-size:24px; }

#calculator{ width:100%; float:left; }

#calculator input, #calculator select{ float:left; width:100%; padding:20px 10px; border-radius:5px; border:none; margin-bottom:10px; font-size:16px;  }
#calculator .button{ background:#f9af00; float:left; color: #000; width:100%; border-radius:5px; border:none; padding:20px 10px;  text-transform:uppercase; font-weight:bold; font-size:25px; margin-top:10px; }
#total-cost{ width:100%; float:left; font-size:34px;  font-weight: 800; text-align:center; padding:20px 0px; color:#FFF }
#total-cost p{ font-weight:300; font-size:34px; padding:0px; float:none; display:inline; }
#address, #address ul{ width:100%; float:left; font-weight:normal; margin-top:0px; }
#address h6{ font-size:28px; float:left; width:100%; margin-top:60px; text-transform:uppercase; }
#address ul li{ width:30.33%; margin-right:3%; padding-top:4%; padding-bottom: 0px; float:left; }
#address ul li strong{ font-size:16px; width:100%; float:left; }
#address ul li p{ font-size:14px; float:left; font-weight:normal; line-height:24px; }
#address ul li a{font-weight: bold; font-size:24px;}
#address .none{ margin:0px;}

.packages, .packages ul, .packages ul li{width: 100%; float: left;}
.packages ul{ padding-bottom:20px; }
.packages ul li{padding:10px 0px; border-bottom: 1px solid #000;}
.packages ul li span { width:40%; float:left; }
.packages ul li span b{ font-size:20px; }

.packages ul li small { width:20%; float:left; text-align: center; font-size: 18px;}
.packages ul li small a{ width:96%; float:left; text-align:center; font-size:18px; background:#003263; color:#FFF; margin:-10% 0% 2% 0%; padding:15px 0px; border-radius:5px;  }
.packages .noborder{ border:none; }
.clicktoaction .black{ color:#303030; }

.tag{ font-size:18px; font-weight:bold; }
.cross{ color:red;}
.mobile-packages{ display:none; }

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

.welcome{ min-height: 480px; font-size: 14px; }  
#banner{ padding:80px 20px 100px 100px; }
#banner h2 small{font-size: 16px;  font-weight:600 ; }
#banner strong{font-size: 52px; line-height: 52px;}
#banner .rocket-right{width: auto; float: left;}
.discover form{ padding: 10px 15px 10px 35px; }
.discover span{margin-top: 0px; font-weight: normal;}
#banner .rocket-right strong{ padding: 10px; }
.rocket img{ max-width: 120px; margin-top: 10px; }
#banner .rocket-right strong{font-size: 34px; line-height: 43px;}
#banner .rocket-right span{ font-size: 22px; }
.discover{padding:15px 0px 30px 0px; float: left;}
.awards img{ max-height: 35px; margin-right:0%; }
#top-right .google-area, .awards{ padding: 10px 0px; height: 60px; }
.google-area small{ padding:5px 0px 4px 10px; max-width: 150px; }
.google-area ul{width:auto; }
.google-area ul li{ text-align: center; font-size: 12px;  padding: 10px 10px; font-weight: 600; }
.google-area img{ max-width: 100px; margin-top:5px; }
.slider{padding-top: 0px;}
#services ul li{ padding:25px; ; }
#services h2, #services h3, #services h4, .benefities h4, .benefities h3, .benefities h2, #interaction h6, #client h5, footer h6, footer span small{ font-size: 34px; line-height: 43px; }
#services ul li strong{ font-size: 22px; line-height:25px; }
#interaction ul li{ font-size: 18px; line-height: 24px; }
#client strong{ padding: 20px 0px 0px 0px; }
.review{ padding-left: 100px; }
#simple ul li{ width: 46.5%; }
.submitarea p{ font-size: 18px; }
footer span small{ font-size: 25px; }
.submitarea input[type="submit"]{ font-size: 20px; }
footer span label{ font-size: 18px; }
footer span{ padding: 20px 0px; }
.copyright{ margin-top: 0px; }

#simple ul li{ margin-right: 0px; width: 50%; }
.navheading img{ margin-right:1%; }


}

@media only screen and (max-width: 1550px){
.menusection strong{ font-size:16px; }
.menusection strong img{ padding-right:15px; }
.navheading img{ margin-right:0%; }
.navheading strong{ font-size:43px; }
}



@media only screen and (max-width: 1400px){
header{ padding-top: 0px; }
.ontime{ width: 50%;  }
.ontime span{ font-size: 14px; }
.welcome{  font-size: 14px; min-height: 450px;}  
#banner{ padding:40px 0px 40px 80px }
#banner h2 small{font-size: 16px;  font-weight:600 ; }
#banner strong{font-size: 43px; line-height: 43px;}
#banner .rocket-right{width: auto; float: left;}

.discover form{ padding: 10px 15px 10px 35px; }
.discover span{margin-top: 0px; font-weight: normal;}
#banner .rocket-right strong{ padding: 10px; }
.rocket img{ max-width: 90px; margin-top: 10px; }
#banner .rocket-right strong{font-size: 28px; line-height: 28px;}
#banner .rocket-right span{ font-size: 18px; }
.discover{padding:15px 0px 0px 0px; float: left;}
.awards img{ max-height: 35px; margin-right:0%; }
#top-right .google-area, .awards{ padding: 10px 0px; height: 60px; }
.info{padding: 20px 0px 50px 20px;}
#smm-result .review-left strong{ font-size:25px; line-height:34px; }
#services ul li img{ max-width:65px; }
.navheading strong{ font-size:43px; line-height:48px; width:60%; }
.menusection{ width:24%; margin-right:1%; margin-bottom:1%; }
.navheading img{ max-width:330px; }
.nav{top: 48px;}
.slider{ padding-top:60px; }
.quicklinks{padding:5% 5% 0% 5%; }
.quicklinks ul li a{padding:20px; }
}

@media only screen and (max-width: 1290px){
#banner{ padding: 50px 0px 40px 40px; }
.logo img{ max-width: 150px;  }
.contact-info .expert{ max-width: 50px; max-height: 50px; }
.contact-info strong{ font-size: 22px; }
.contact-info small{ font-size: 12px; margin-top: -3px; }
#banner strong{font-size: 38px; line-height: 43px;}
.discover form input[type="submit"], .discover form a{ font-weight: 600;  }
.benefities ul li{ margin-right: 10px; }
.shortinfo ul li, .longinfo ul li{ margin-right: 0px; }
#interaction p{ font-size: 22px; }
.benefities, #client, #services, #simple, #difference, #interaction, #abouth, #footer{ padding: 7% }
#interaction{ padding-bottom: 0px; }
#services ul li{ width: 46%; margin-top: 7%; }
#client p{ font-size: 16px; width: 100%; padding-right: 0px; }
.submitarea input[type="submit"]{ font-size:16px; }
.copyright ul li{ padding: 2px 5px; }
.submitarea{ padding:15px; }
.awards ul{ width: 48%; }
.google-area{ width:52%; }
.awards img{ max-height: 30px; }
.google-area small{ line-height: 16px; }
.google-area img{ margin-left: 40px; }
footer form, .copyright{ width: 100%; }
.awards img{ margin-left: 0px; }
.menuarea{ padding-top:0px; }
.menusection{ width:32.33%; }
.menusection strong{ font-size:18px; padding:15px 25px;  }
.navheading strong{width: 62%; font-size: 38px;}
.nav{ top: 40px; }
#address ul li a{font-weight: bold; font-size:20px;}
#case-study .review-left{ width:100%;}
#case-study .review-left img{ float:left;}
#case-study .review-left span, #case-study .review-left strong{ float:right; width:70%;}
#case-study .review-left{padding:30px 0px; }

.voice {margin-top:20px;}
}




@media only screen and (max-width: 1124px){
.discover form input[type="submit"], .discover form a,  .discover span{ font-size: 14px; }
 .line, .welcome{ display: none; } 
 .benefities ul li{ font-size:14px; padding: 10px 15px;  }
#services h2, #services h3, #services h4, .benefities h4, .benefities h3, .benefities h2, #interaction h6, #client h5, footer h6, #simple h6, #simple h2, #difference h6, #abouth h1{ width: 100%; font-size: 28px; line-height: 34px; }
#services .left-p{ width: 100%; float: left; }
#services ul li{ width: 100%; }
.review{ padding-left: 40px; }
.submitarea p{ font-size: 14px; }
footer span input, footer span label, footer span textarea{ font-size: 16px; }
#abouth ul li{ width: 100%; }
.awards img{ max-height:26px; }

.shortinfo ul li strong, .longinfo ul li strong{ font-weight: 600; font-size: 14px; }
.shortinfo ul li p, .longinfo ul li p{ font-size:12px; line-height: 18px; }
.shortinfo ul li, .longinfo ul li{ min-height: 250px; }
.longterm a, .shortterm a{ font-size: 20px; }
#smm-result .review-left{ width:100%; }
#smm-ways h5{ width:100%; font-size:34px; line-height:43px; }
#smm-ways p{ width:100%; padding-top:20px; }
#smm-ways ul li{ padding:10px; line-height:24px; }
#services ul li{ min-height:inherit; }
.menusection strong{ font-size:16px; }
.menuarea ul li{ padding-right:40px; }
#case-study .review-left{ width:100%; }
}


@media only screen and (max-width: 1060px){ 
.navheading img{ max-width:300px; }
.navheading strong{ width:60%; font-size:34px; padding-bottom:0px; }
.nav{ right:30px; }
}


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


 #banner h2 strong{ font-size: 52px; line-height: 61px; width: 80%; float:left;}
#banner, .discover span, .discover, .googlemap{ width: 100%; }
#top-left{ width: 100%;  background: rgb(249,186,0);background: linear-gradient(90deg, rgba(249,186,0,1) 0%, rgba(253,198,38,1) 78%);}
#top-right{ display: none; }
.benefities, #client, #services, #simple, #difference, #interaction, #abouth, #footer, #smm-ways{ padding: 5%; }
.main-area{ width: 100%; }
#services ul li{ width: 48%; padding-top: 5%; }
#interaction{ padding-bottom: 0%; }
.review{ display: none; }
#abouth ul li{ float: none; }
#abouth ul li, #simple ul li{ width: 48%; }
#simple ul li:nth-child(even){ float: right; }
.awards{ position: static; height: auto; }
.awards ul{ width: 100%;  }
.awards  {display: none;}

.awards img{ max-height: 35px; }
.google-area{ width: 100%; padding: 0px 15px; }
.ontime{ width: 70%;  }
.ontime span{ font-size: 18px; }
.menusection strong{ padding:15px 15px; }
.navheading strong{ font-size:30px; padding-bottom:0px; }
}

@media only screen and (max-width: 979px)
{body{ padding-bottom: 0px; }
.menuarea{ padding:0px; width:96%; }
.navheading img{ max-width:280px; }
.navheading strong{ padding:60px 0px 10px 0px; }
.menuarea ul li{ font-size:14px; padding-right:30px; }
.nav{ position:absolute; right:25px; }

}

@media only screen and (max-width: 800px)
{
#simple ul li{ width:100%;}
  #simple ul li p{ font-size: 14px;  }
#services ul li strong{ font-size: 20px; line-height:24px; }
#services ul li{ margin-top: 6%; }
.shortinfo ul li, .longinfo ul li{ width: 50%; min-height: inherit; }
.popup .content, .shortinfo, .longinfo{ padding-top: 0px;  }
.shortinfo ul li, .longinfo ul li{ padding: 25px; }
.shortinfo .back{ width: 120px; }
.longterm, .shortterm{ margin: 10px 0px 0px 0px; width: 100%; }
.longterm a, .shortterm a{ width: 100%; }
.menusection strong{ font-size: 14px; line-height: 18px; padding:10px 15px;}
.navheading strong{ font-size:28px; line-height:38px; }
.navheading img{ max-width:260px;  }
.nav{top: 35px;}
}


@media only screen and (max-width: 767px)
{ 
 #services ul li{width: 100%;}
.popup .content { overflow: scroll;}
  .shortinfo, .longinfo{  overflow: scroll; }
   #banner form{ width:100%;}
#banner .copyright{ margin-bottom:20px; }
#services ul{ display:initial; font-size:left; } 
.mySwiperreview, .mySwiperreviews{ width:100%; }

.menusection{width: 48%; margin-right: 2%; margin-bottom: 2%;}
.menusection strong {
  font-size: 16px;
  line-height: 22px;}
.navheading img{ max-width:230px; }
.navheading strong{ font-size:25px; }
.menuarea ul li{ width: 33%; text-align: left; padding:0px 0px 10px 0px;}
#case-study .review-left{ width:100%; }
}

 

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

.voice a{ font-size:12px; padding:10px 15px;  margin-top:22px;   margin-right: 25px;}
 .awards, .google-area, .ontime{  display:none;  }
 #banner h2 strong{ font-size:43px; line-height: 52px; }
 #banner{padding: 40px 40px 40px 40px;}
 .google-area small{ max-width: inherit; padding: 5px 0px;  }

header, #banner{ padding-left:5%; padding-right:5%; }
#interaction ul li{ width: 100%; font-size: 16px; line-height: 20px; }
#interaction input[type="checkbox"]{ margin-right: 10px; }
#interaction p{ width: 100%; }
.benefities p, #client p{ width: 100%; padding: 20px 0% 20px 0%; font-size:16px; }
.shortinfo ul li, .longinfo ul li{ width:100%; border-right: none; }
.shortinfo h4{ font-size: 25px; padding: 60px 10px 0px 10px; }
.popup .content span{ padding-bottom: 0px; }
.popup{ padding:15px; }
.longterm a, .shortterm a{ padding:20px; }
.shortinfo .back, .shortinfo small a{ font-size:14px; font-weight: 600; }
.popup .content{ width: 98%; margin:0px auto; }
#banner p{line-height: 22px;}
#banner strong {
  font-size: 34px;
  line-height: 38px;}
#banner form span textarea,  #banner form span input{ font-size:16px; }
#banner form span{ padding:20px 0px; }
#banner form span:nth-child(5){ border:none; }

#banner .submitarea p{ width:100%; text-align:center; font-size:18px; }
.awards, .google-area, .ontime{ display:block; }
.awards ul{ display:none; }
.awards img, .google-area small{ display:none;}
.ontime, .google-area{ width:100%; text-align:center; }
.ontime span{ padding:0px; }
#wa-widget-send-button{ right:20px !important; margin-bottom:20px; }
.navheading strong{ font-size:22px; padding-top:50px; }
#address ul li{ width:100%; }
#address ul li a{ padding-bottom:30px; float:left;}
#abouth h2{ font-size:24px; line-height:34px; }
.clicktoaction strong, #simple .clicktoaction strong{ line-height:34px;}

.packages{display: none;}
.mobile-packages{ display:block; }
.mobile-packages{ width:100%; float:left; }
.mobile-packages ul{float:left; width:100%;  }
.mobile-packages ul b{ width:100%; float:left; text-align:center; }
.mobile-packages ul li{ width:100%; float:left; text-align:center; background:#003263; border-radius:5px; padding:25px; margin:3% 0%; color:#FFF; font-size:15px; }
.mobile-packages ul li h3{ font-size:34px; color:#FFF; }
.mobile-packages ul li span{ width:100%;color:#FFF; float:left; font-size: 18px; padding:5px 0px; }
.mobile-packages ul li small{ width:100%;color:#FFF; float:left; font-size: 14px; padding:5px 0px; }
.mobile-packages ul li a{ width:100%; padding: 10px; border-radius: 5px; float:left; background:linear-gradient(90deg, rgba(249,186,0,1) 0%, rgba(253,198,38,1) 78%); font-size:20px; font-weight:bold; }

}

@media only screen and (max-width: 640px){
  .navheading strong {
  font-size: 22px;
  padding-top: 50px;
  width: 50%;
  line-height: 26px;}

}


@media only screen and (max-width: 580px)
{ 
#banner h2, #banner h2 small, #banner h2 strong{ width: 100%; float: left; }
#banner h2 strong{ font-size: 34px; line-height: 43px;  }
.discover form{ padding: 10px 15px 10px 15px; }
.discover form input[type="submit"], .discover form a{ font-size: 12px;  }
.benefities ul li{ font-size: 18px;}
.submitarea p{ width: 100%; text-align: center; padding: 0px 0px 5px 0px; font-size: 14px; }
.submitarea input[type="submit"]{width: 100%;}
.copyright { padding-bottom: 0px; }
.copyright p{ width: 100%; text-align: center; padding-bottom: 20px; }
.copyright ul{ display: none; }
.copyright a { float: none; margin: 0px auto; display: table; }
#interaction img{ max-width: 320px; }
#simple ul li, #simple p, #difference p{ width: 100%; }
#abouth ul li{ width: 100%; }
#simple .smm-benefities li{ font-size:16px; }
.copyright address{ text-align:center; }
.speed{ text-align:center; margin-top:10px; font-size:11px; }
#banner form span small{ display:none; }
.menusection{width: 100%; margin-right: 0%;}
.menuarea ul li{ width:auto; padding-right:20px; }
.menusection strong img{ max-height:34px; }
#case-study .review-left strong{padding:10px 0px 0px 0px; }
}

@media only screen and (max-width: 520px){
.navheading strong{ display:none; }
.navheading img{ float:none; display:block; margin:0px auto; }
.menusection strong{padding:10px 25px; font-size: 18px; border-radius:5px;}
#simple .smm-benefities li{ padding:10px 0px 10px 30px; }
}

@media only screen and (max-width: 520px){
.menusection strong{font-size: 16px; border-radius:5px;}
.clicktoaction strong{ font-size:25px; line-height:28px; }
.clicktoaction a{width: 100%; margin-bottom: 10px;}
.clicktoaction span, #simple .clicktoaction span{ display:none; }
.benefities ul li{ font-size:13px; padding:10px; border-radius:5px; }



}

@media only screen and (max-width: 480px){
  .discover form input{ text-align: center; }
.discover form input[type="submit"], .discover form a{ font-size: 18px; text-align: center; padding: 15px 0px;}
#smm-result{ padding:5%; }
.menusection strong{   padding: 10px 15px;
  font-size: 16px;}
  .nav{ width:52px; }
  .discover form input{ width:100%; }
.discover form input[type="submit"], .discover form a{ width: 100%; }
.sod{ display:none; }
#banner .rocket{ padding-top:8%; }
.awards{ padding:15px 0px; }
.ontime span{ font-size:16px; font-weight:700; }
.logo{    max-width: 130px; }
#case-study .review-left img{ max-width:90px; width:100%; }
#case-study .review-left span, #case-study .review-left strong{width:65%; }
#case-study .review-left strong{font-size:20px; line-height:25px; }
.voice{ margin-top:0px;}
    .voice a{ font-size:10px; padding:10px 15px;  margin-top:25px;   margin-right: 28px;}
}



@media only screen and (max-width: 390px){
  header, #banner{ padding-left:20px; padding-right:20px; }
#abouth ul li img{ margin-top: -5px; }
#banner h2 small{ font-size:14px; }

.rocket img{ max-width: 80px; }
footer span small{ display: none;  }
.benefities ul li{ margin-right: 5px;  }


}

.terms{font-size:11px; display:table; padding:8px 0px; }

/*-------blog------*/
#blog-left{   float: left;
  width: 100%;
  position: relative;

    background: rgb(249,186,0);
    background: linear-gradient(90deg, rgba(249,175,0,1) 0%, rgba(253,154,1,1) 100%);

  }

#blog-left img{ width:100%; }

#blog-listing{ width:65%; float:left;     padding:20px 20px 20px 40px;}
#sidebar{ float:left; width:25%;}
#Category-section{ width:30.33%; float:left; margin:1.5%;}


/* Overlay */
    .offer-overlay {
      position: fixed;
      inset: 0;
      background: rgba(0, 0, 0, 0.6);
      display: flex;
      align-items: center;
      justify-content: center;
      z-index: 9999;
    }

    /* Hidden state */
    .offer-overlay.hidden {
      display: none;
    }

    /* Offer box */
    .offer-box {
      background: #ffffff;
      max-width: 400px;
      width: 90%;
      padding: 18px;
      border-radius: 8px;
      box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
      position: relative;
      font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    }

    .offer-close {
      position: absolute;
      top: 8px;
      right: 10px;
      font-size: 18px;
      cursor: pointer;
      border: none;
      background: none;
    }

    .offer-title {
      font-size: 16px;
      margin-bottom: 10px;
      font-weight: 600; width: 100%;
    }

    .offer-text {
      font-size: 16px;
      margin-bottom: 16px;
    }

    .offer-btn {
      display: inline-block;
      padding: 5px 10px;
      border-radius: 4px;
      border: none;
      cursor: pointer; 
      font-size: 16px; font-weight: 700;
      background: linear-gradient(90deg, rgba(249,175,0,1) 0%, rgba(253,154,1,1) 100%);
    }