@font-face {
    font-family: 'ishdi';
    src: url('fonts/ishdi.eot');
    src: local('☺'), url('fonts/ishdi.woff') format('woff'), url('fonts/ishdi.ttf') format('truetype'), url('fonts/ishdi.svg') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'spider-icon';
    src: url('fonts/icon-spiders.eot');
    src: url('fonts/icon-spiders.eot') format('embedded-opentype'),
         url('fonts/icon-spiders.woff2') format('woff2'),
         url('fonts/icon-spiders.woff') format('woff'),
         url('fonts/icon-spiders.ttf') format('truetype'),
         url('fonts/icon-spiders.svg') format('svg');
    font-weight: normal;
    font-style: normal;
  }
  [class^="icon-"]:before, [class*=" icon-"]:before{
     font-family: 'spider-icon';
      speak: none;
      font-style: normal;
      font-weight: normal;
      font-variant: normal;
      text-transform: none;
      white-space: nowrap;
      word-wrap: normal;
      direction: ltr;
      line-height: 1px;
      color: #2040a5;
      padding-right: .5rem;
      font-size: 32px;
  }
         
  .contact-mail{
     color: #2040a5; 
  }

  .icon-star-empty:before { content: '\e800'; } /* 'î €' */
.icon-user:before { content: '\e801'; } /* 'î ' */
.icon-mail:before { content: '\e802'; } /* 'î ‚' */
.icon-search:before { content: '\e803'; } /* 'î ƒ' */
.icon-info-circled:before { content: '\e804'; } /* 'î „' */
.icon-help-circled:before { content: '\e805'; } /* 'î …' */
.icon-ok-circled:before { content: '\e806'; } /* 'î †' */
.icon-ok:before { content: '\e807'; } /* 'î ‡' */
.icon-cancel:before { content: '\e808'; } /* 'î ˆ' */
.icon-cancel-circled:before { content: '\e809'; } /* 'î ‰' */
.icon-cancel-circled2:before { content: '\e80a'; } /* 'î Š' */
.icon-plus:before { content: '\e80b'; } /* 'î ‹' */
.icon-minus-circled:before { content: '\e80c'; } /* 'î Œ' */
.icon-search-1:before { content: '\e80d'; } /* 'î ' */
.icon-link:before { content: '\e80e'; } /* 'î Ž' */
.icon-info-circled-1:before { content: '\e80f'; } /* 'î ' */
.icon-plus-squared:before { content: '\e810'; } /* 'î ' */
.icon-link-1:before { content: '\e811'; } /* 'î ‘' */
.icon-link-outline:before { content: '\e812'; } /* 'î ’' */
.icon-th-outline:before { content: '\e813'; } /* 'î “' */
.icon-th:before { content: '\e814'; } /* 'î ”' */
.icon-th-large-outline:before { content: '\e815'; } /* 'î •' */
.icon-th-large:before { content: '\e816'; } /* 'î –' */
.icon-th-list-outline:before { content: '\e817'; } /* 'î —' */
.icon-th-list:before { content: '\e818'; } /* 'î ˜' */
.icon-bookmark-empty:before { content: '\e819'; } /* 'î ™' */
.icon-bookmark:before { content: '\e81a'; } /* 'î š' */
.icon-menu:before { content: '\f008'; } /* '' */
.icon-twitter-circled:before { content: '\f057'; } /* '' */
.icon-pinterest-squared:before { content: '\f0d3'; } /* '' */
.icon-gplus-squared:before { content: '\f0d4'; } /* '' */
.icon-mail-alt:before { content: '\f0e0'; } /* 'ïƒ ' */
.icon-angle-double-left:before { content: '\f100'; } /* 'ï„€' */
.icon-angle-double-right:before { content: '\f101'; } /* '' */
.icon-angle-double-up:before { content: '\f102'; } /* 'ï„‚' */
.icon-angle-double-down:before { content: '\f103'; } /* '' */
.icon-star-half-alt:before { content: '\f123'; } /* 'ï„£' */
.icon-angle-circled-left:before { content: '\f137'; } /* 'ï„·' */
.icon-angle-circled-right:before { content: '\f138'; } /* '' */
.icon-minus-squared:before { content: '\f146'; } /* 'ï…†' */
.icon-ok-squared:before { content: '\f14a'; } /* 'ï…Š' */
.icon-youtube-squared:before { content: '\f166'; } /* 'ï…¦' */
.icon-drupal:before { content: '\f1a9'; } /* '' */
.icon-tree:before { content: '\f1bb'; } /* '' */
.icon-git-squared:before { content: '\f1d2'; } /* '' */
.icon-hacker-news:before { content: '\f1d4'; } /* '' */
.icon-copyright:before { content: '\f1f9'; } /* '' */
.icon-at:before { content: '\f1fa'; } /* '' */
.icon-facebook-official:before { content: '\f230'; } /* '' */
.icon-whatsapp:before { content: '\f232'; } /* '' */
.icon-commenting-o:before { content: '\f27b'; } /* '' */
.icon-twitter-squared:before { content: '\f304'; } /* '' */
.icon-linkedin-squared:before { content: '\f30c'; } /* '' */

body{
    font-family: ishdi,Sans-Serif;
    font-size: 16px;
    color: #625D5D;
    background: #ffffff;
}

h1, h2, h3, h4, h6 {
    font-family: ishdi,Sans-Serif;
}
h5{
    font-family: ishdi,Sans-Serif;
    text-transform: capitalize;
    font-size: 1.25rem;
    font-weight: bold;
}
h1 span{
   word-break: break-word;
}

.article-full ul li {
  list-style: none;
  padding: 0px 0px 0px 10px;
}

.article-full ul li:before {
  content: '\f138';
  font-family: 'spider-icon';
  display: inline-block;
  color: #FF7F00;
  padding-right: 5px;
}

.article-full ol {
  padding: 0px;
  margin: 0px 20px;
}

.article-full ol li {
  padding: 0px 0px 0px 12px;
}

blockquote {
  background: #f9f9f9;
  border-left: 10px solid #c1c1c1;
  margin: 1.5em 10px;
  padding: 0.5em 10px;
  quotes: "\201C""\201D""\2018""\2019";
}
blockquote:before {
  color: #c1c1c1;
  content: open-quote;
  font-size: 4em;
  line-height: 0.1em;
  margin-right: 0.25em;
  vertical-align: -0.4em;
}
blockquote p {
  display: inline;
  font-style: italic;
  font-weight: bold;
}
.page-wrapper{
    width: 100%;
    padding: 0;
    margin: 0;
    border: 0;
    min-width: 250px;
}
img{
    width: auto;
    height: auto;
    margin: 0;
    padding: 0;
    max-width: 100%;
}
a {
    color: #625D5D;
    text-decoration: none;
    font-size: 1.125rem;
}
a:hover{
    color: #2040a5;
    text-decoration: none;
    font-size: 1.125rem;
}
ul li a.is-active{
    color: #2040a5 !important;
}
a:focus,a:visited{
  text-decoration: none;  
}
.text-right{
    width: 100%;
    text-align: right;
    display: inline-block;
}
p{
  font-size: 1rem;
  margin-bottom: .625rem;
  line-height: 1.75rem;
}
h2{
    font-size: 1.6rem;
    text-transform: capitalize;
}
h3{
    font-size: 1.2rem;   
}
h4{
    font-size: .875rem;  
}
h6{
    font-size: .6rem;
}
.list-style-none{
    margin: 0px;
    padding: 0px;
}
.list-style-none li{
    list-style: none;
    margin: 0px;
    padding: 0px;
}
.list-style-two li{
   list-style: none;
   margin: 0px;
   padding: 0px; 
}
.max-width-container{
    width:100%;
    max-width: 1200px;
    margin: 0 auto;
}
.top-p-8{
   padding-top: 8rem; 
}
h1 {
    font-size: 2.5rem;
}
.title{
    margin-top: 2rem;
}

.wpforms-container, .wpforms-container-full, .wpforms-render-modern {
    width: 100% !important;
}

.wpforms-field-label{
    color: #625D5D !important;
    margin: 0px 0px 5px 0px !important;
}

.tiny-head-h6{
    font-size: 1.125rem;
}

.tiny-head1-h6{
    font-size: 1.125rem;
    margin-top: .825rem;
}

.box-margin{
    margin:0 0 1rem 0;
}

.tiny-head-h5{
    margin-top: 0px;
}

.wpforms-container .wpforms-field, .wp-core-ui div.wpforms-container .wpforms-field{
    padding: 8px 0px !important;
}

#wpforms-field-limit-text-157-4{
    display: none !important;
}

.wpforms-form{
    max-width: 600px;
}
.content-container{
    margin: 1.5rem 0 3rem 0;
}
.all-0{
    margin: 0 !important;
    padding: 0;
}
.header{
  margin-top: 1.5rem;
  border-bottom: 3px solid #2040a5;
  min-height: 100px;
  max-height: 100px;
}
.header ul li{
    display: inline-block;
    border-right: 1px solid #fff;
    padding:0 .5rem;
    line-height: 1.2rem;
    list-style: none; 
}
.footer-box{
   padding-top: 1.5rem; 
}
.footer-box .site-branding__logo{
    display: flex;
    background: #fff;
    padding: 5px;
}
.contact-footer{
    display: flex;
    flex-direction: row;
    width: 100%;
    align-items: center;
    justify-content: left;
    margin-bottom: 1rem;
}
.contact-footer-icon{
    display: flex;
}
.contact-footer a{
    color:#fff;
}
.contact-footer-icon {
  width:60px;
}
.footer-menu{
    margin-top: 2rem;
}
.footer-menu ul{
   margin: 0 auto;
   display: table;
   text-align: center;
}
h5{
   margin-top: 2rem;
}
.footer-box ul li{
  list-style: none;
  color: #fff; 
  padding: .25rem 0; 
}

.footer-box ul li a{
  color: #fff;  
}

.footer-menu ul li {
    list-style: none;
    display: inline-flex;
    padding: .5rem;
}
.footer-menu ul li a{
   color:#ffffff;
}
.main{
    font-family: ishdi,Sans-Serif;
    min-height: 500px;
    padding: 3.5rem 0;
}
.slogan-text {
    margin-top: 1.5rem;
    font-family: ishdi,Sans-Serif;
    text-align: center;
}
.container-fluid{
    margin-left: 15px;
    margin-right:15px;
}
.service-tiny-box{
    background: #00a4eb;
    padding: 1rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: #fff;
    min-height: 285px;
}
.service-tiny-box h3{
    font-size: 1.75rem;
    font-weight: bold;
    margin-bottom: 1rem;
}
.tiny-box-wrapper{
    margin-bottom: 2rem;
}
.tiny-box-wrapper a{
  font-size: 1.125rem;
  font-weight: bold;
  color:#fff;
}
.svg-icon-1{
    width: 50%;
    height: 50%;
}
.footer{
    background: #2040a5;
    min-height: 100px;
    position: relative;
    width: 100%;
    padding-bottom: 1rem;
    margin-top: 3rem;
}
.hightlighted-text{
  color: #2040a5;
}
.stunningspider-logo{
    margin-top: .813rem;
}
.burger-menu{
    float:right;
}
.burger-menu ul {
   margin-top: 1.5rem; 
}
.footer-container{
    margin-top: 2rem;
    margin-bottom: 3rem;
}
.footer-section h2{
    margin-bottom: .875rem;
}
.footer-section p{
    margin-bottom: 0rem;
}
.footer-section ul li{
   list-style: none; 
}
ul{
    padding: 0px;
    margin: 0px;
}
.copy-right{
    text-align: center;
    font-size: .875rem;
    margin-top: 1.5rem;
    color:#ffffff;
}
.logo{
    max-width: 220px;
}
.search-form{
    max-width: 550px;
    margin: 1.5rem auto;
    position: relative;
}
.input-search-icon{
    position: absolute;
    padding: 1rem 1rem;
}

.input-search-icon::after{
    font-size: 1rem;
    color:#F7BFBF;
}
.input-search-button{
    position: absolute;
    left: 14px;
    top: 10px;
    z-index: 100;
}
.search-form .form-actions{
    position: absolute;
    right: 0px;
    bottom: 12px;
    background: #ffa500;
}
.search-result-content div,.search-result-content h3{
    width:100%;
    clear: both;
}
.title{
    margin-bottom: 1rem;
    text-transform: capitalize;
}
.icon-info-circled,.icon-ok-circled{
    padding-right: 1rem;
    position: relative;
}
.info-button a{
    color: black;
    background: #ffa500;
    border: 1px solid #ffa500;
    border-radius: 50px;
    outline: none;
    text-decoration: none;
    padding: 0.875rem 1rem;
    font-family: 'ishdi';
    font-weight: bold;
    text-transform: uppercase;
    font-size: 1rem;
}
.icon-info-circled::after,.icon-ok-circled::after{
    color:#ffa500;
    font-size: 2rem;
    position: absolute;
    top: 13px;
    left: -15px;
}
.info-button{
    margin-top: 2rem;
    text-align: center;
}
.contact-content{
    margin-bottom:2rem;
}
.fields-required{
    font-size: .875rem;
    margin-left: 1rem;
}
 .menu-list-header{
    display: none;
    float:right;
 }
 .burger-menu-mobile{
    display: none;
}
.burger-menu{
    display: block;
}
.desktop-show{
    display: block;
}
.desktop-hide{
    display: none;
}
.full-width{
    width:100%;
}

.box-text{
    width: 100%;
    clear: both;
    min-height: 260px;
}
.wp-block-code{
    padding: 1rem;
    clear: both;
    color: #fff;
    background: #1b1b1b;
    padding: 0;
    -moz-tab-size: 2;
    -o-tab-size: 2;
    tab-size: 2;
    -ms-word-break: normal;
    word-break: normal;
    -webkit-hyphens: none;
    -ms-hyphens: none;
    hyphens: none;
    position: relative;
    line-height: 28px;
    border-radius: 8px;
    overflow: hidden;
}
pre code {
    background: none;
    white-space: pre;
    -webkit-overflow-scrolling: touch;
    overflow-x: scroll;
    display: block;
    max-width: 100%;
    min-width: 100px;
    font-size: 16px;
    padding: 15px 20px 12px 22px;
    line-height: 1.75;
    color: #f5d67b;
}
.content-main-front{
    margin: 2rem 0;
}
.article-teaser{
    margin: 1rem 0;
}
.article-read{
    font-size: .75rem;
    color: #2040a5;
    padding-bottom: .5rem;
    font-weight: bold;
}
.article-read .article-date{
    padding-right: 2rem;
    text-align: left;
}
.article-read .article-readtime{
    text-align: right;
}
.inerCnt{
   background: #ffa500;
}
.rate-text-score{
    padding: 0 .25rem 0 .5rem;
}
#sfsi_floater{
    display: none;
}
.single-post #sfsi_floater{
    display: block;
}
aside {
  width: 30%;
  padding-left: 15px;
  margin-left: 15px;
  float: right;
  font-style: italic;
  background-color: #faeb36;
}
.article-center{
    width:100%;
    text-align: center;
}
.article-center p{
    font-size: 1.5rem;
}
    .tech-row-1 {
  position: relative;
  animation: example2 5s infinite;
}

.icon-content{
    clear: both;
    width:100%;
    text-align: center;
}

.icon-content-heading{
    text-align: center;
    padding-top: .825rem;
    font-size: 1.25rem;
    font-weight: bold;
}

.box-icon q{
    font-size: 1.125rem;
    font-weight: bold;
}

.box-section  h1,.sub-head h2{
    font-size: 2rem;
}

.sub-head, .box-section  h1{
    margin-bottom: 1rem;
}

.box-icon-right{
    display: flex;
    align-items: center;
    justify-items: center;
    text-align: center;
}

.icon-content-fixed{
    height: 120px;
}

.icon-content-fixed .svg-icon{
    width: 100%;
    height: 100%;
}

.svg-icon{
    width: 40%;
    height: 40%;
}
 .page-content ul{
    margin: 1rem 2rem;
    list-style: none;
 }

 .page-content ul li{
    padding: 0rem  0rem .7rem 0rem;
 }

 .page-content ul li::before {
    font-family: 'spider-icon';
    content: '\f123';
    padding:0rem .5rem 0rem 0rem;
    font-size: 1rem;
    color:#f01381;
 }

 .page-content blockquote{
    color:#f01381;
    margin: 1rem;
    font-style: italic;
    font-size: 1rem;
 }

 .page-content blockquote p{
    font-style: italic;
    font-size: 1rem;
 }

 .page-content code {
    background: #f7f5ed;
    display: inline-block;
    font-size: 1rem;
    color: #d63384;
    word-wrap: break-word;
    padding: 0.1rem 0.5rem;
}

.pager{
    width:100%;
    margin: 1rem 0;
}

.pager .pager__items{
  margin: 0 auto;
  display: table;
}

.pager .pager__items li{
   list-style: none;
   padding: .25rem .5rem;
   margin: 0 .25rem;
   float:left;
}

.first-h2{
 margin-top: 1rem;
}

.header ul li:last-child{
    padding-right: 0px;
}
.content-wrapper h6{
    font-size: 1.125rem;
    font-weight: bold;
}
.page-head{
    margin-top: 1rem;
    margin-bottom: 1rem;
}

.page-head h1{
    margin-bottom: .25rem;
}

.header-contact{
    width: 100%;
    clear: both;
    display: flex;
    flex-direction: row;
    gap:.625rem;
    justify-content: end;
    align-items: center;
}

.header-contact span{
    float:right;
}

.header-contact span a{
    font-size: 1rem;
    color:#0000FF;
}
.header-menu{
    width: 100%;
    clear: both;
}
.content-wrapper{
   margin-top: 2rem; 
   width: 100%;
}
.box{
    border: 1px solid #ff5a47;
    padding: 0 1rem;
    min-height: 390px;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.site-breadcrumb{
    width:100%;
    clear: both;
}

.package-box{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.package-box ul{
    min-height: 225px;
}
.box-1{
    border: 1px solid #625D5D;
    padding: 1rem 1rem;
    min-height: 550px;
    position: relative;
}

.box-1 ul li::before{
    content: "";
    background: url(../images/list-check.svg) no-repeat;
    width:24px;
    height:24px;
    position: absolute;
    display: inline-block;
    left:0;
}

.box-1 ul li{
  list-style: none;
  font-size: 1rem;
  position: relative;
  padding-left: 1.5rem;
}

.box-section{
  margin: 1.5rem 0 1.5rem 0 !important;
}
.contact-content-heading{
    font-size: 2.5rem;
}
.contact-box{
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    text-align: center;
}
.button-blue1, .button-blue {
    background-image: linear-gradient(to right, #2040a5 0%, #ff5a47  51%, #00a4eb  100%)
}
.button-blue1, .button-blue {
    margin: 10px;
    padding: 15px 45px;
    text-align: center;
    text-transform: uppercase;
    transition: 0.5s;
    background-size: 200% auto;
    color: white;            
    box-shadow: 0 0 20px #eee;
    border-radius: 10px;
    display: block;
}

.button-blue2 {
    background-image: linear-gradient(to right, #2040a5 0%, #625D5D 51%, #2040a5  100%)
}
.button-blue2 {
    margin: 10px;
    padding: 15px 45px;
    text-align: center;
    text-transform: uppercase;
    transition: 0.5s;
    background-size: 200% auto;
    color: white;            
    box-shadow: 0 0 20px #eee;
    border-radius: 10px;
    display: block;
}
.button-blue2:hover {
    background-position: right center; /* change the direction of the change here */
    color: #fff;
    text-decoration: none;
}

.button-blue3 {
    background-image: linear-gradient(to right, #2040a5 0%, #625D5D 51%, #2040a5  100%) !important;
}
.button-blue3 {
    margin: 10px !important;
    padding: 20px 45px !important;
    text-align: center !important;
    text-transform: uppercase !important;
    transition: 0.5s !important;
    background-size: 200% auto !important;
    color: white !important;            
    box-shadow: 0 0 20px #eee !important;
    border-radius: 10px !important;
    display: flex !important;
    height: auto !important;
}
.button-blue3:hover {
    background-position: right center !important; /* change the direction of the change here */
    color: #fff !important;
    text-decoration: none !important;
}
.banner{
    width:100%;
}
.banner img{
   object-fit: cover; 
   width:100%;
   height:100%;
}

.box-3 h3{
    font-size: 1.5rem;
    margin-top:1rem;
    font-weight: bold;
}

.box-3 h5{
    font-size: 1.125rem;
    font-weight: normal;
    margin-top:1.125rem;
}

.button-blue1:hover, .button-blue:hover {
    background-position: right center; /* change the direction of the change here */
    color: #fff;
    text-decoration: none;
}
.bold-text{
   font-family: 'ishdi'; 
   font-weight: bold;
}
.article-teaser h2{
    font-size: 1rem;
}
.header-h1{
   margin-bottom: 20px; 
}
.tech-container{
    margin: 20px 0;
}

.tech-row{
   display: flex;
   flex-direction:row;
   font-weight: bold;
}
.tech-row-1{
    width:16.6666666667%;
}
.tech-row-2{
    width:20%;
}
.tech-row-3{
    width:25%;
}
.tech-row-4{
    width:33.3333333333%;
}
.tech-row-5{
    width:50%;
}
.tech-row-6{
    width:100%;
}
.tech-row-item{
    text-align: center;
    padding: 10px 0;
}
.clr-red{
    color: #e81416;
}
.clr-orange{
    color: #ff5a47;
}
.clr-yellow{
    color: #faeb36;
}
.clr-green{
    color: #79c314;
}
.clr-blue{
    color: #00a4eb;
}
.clr-indigo{
    color: #4b369d;
}
.clr-violet{
    color: #2040a5;
}
.tech-row{
    font-size: 1.25rem;
}
.button-wrapper{
  display: flex;
  align-items: center;
  justify-content: center;
}
.member-photo img{
    width: 100%;
}
.social-icon{
    width: 32px;
    height: 32px;
}
.social-icon-footer{
    width: 50px;
    height: 50px; 
}
.content-wrapper-margin{
    margin-left: 15px;
    margin-right: 15px;
}

/**Media query**/
@media (max-width: 1199px){
    .article-full{
        margin: 0 1.5rem;
    }
}
 @media (max-width: 991px){
    .tiny-margin, .box-3, .box-1{
      margin-bottom: 1.5rem;
    }
     .footer-menu ul li a{
         font-size: .825rem;
     }
     .footer-box .site-branding__logo{
        max-width: 225px;
        text-align: center;
     }
     .menu-label{
        margin-top: -.35rem;
    }
    .menu-icon{
        display: flex !important;
        flex-direction: row;
    }
     .logo {
         max-width: 200px;
     }
    .mobile-show{
      display: block;
    }
    .mobile-hide, .single-post #sfsi_floater{
        display: none;
    }
     .main {
        margin-left: 15px;
        margin-right: 15px;
     }
     .content-wrapper .box{
         border: 0px;
         min-height: 200px;
         padding: 0;
     }
     .content-wrapper .box-text{
         border: 0px;
         min-height: 100px;
         padding: 0;
     }
     .footer{
    position: relative;
}
     .slogan-text{
         margin-bottom: 3rem;
     }
    .menu-list-header{
      display: block;
      margin-top: 1rem;
    }
    .burger-menu{
        display: none;
    }
    .menu-icon .icon-menu,.menu-icon .icon-cancel-circled{
      padding-right: .5rem;
    }
    .menu-icon{
        cursor: pointer;
    }
    .burger-menu-mobile{
        background: #fff;
        width: 100%;
        position: relative;
        z-index: 1000;
        left: 0;
        top: .7rem;
        height: 100%;
        opacity: .9;
        padding-bottom: 1rem;
    }
    .burger-menu-mobile-inner{
        position: relative;
    }
    .burger-menu-mobile-inner ul{
        padding-left: 1rem;
    padding-top: 1rem;
    }
    .burger-menu-mobile-inner ul li {
    display: block;
    line-height: 1.2rem;
    list-style: none;
    padding: 0.875rem 0rem;
}
 }
@media only screen and (max-width: 768px) {
    .tech-row{
      font-size: 1rem;
    }
    .box-1{
        min-height: 400px;
    }
}

@media only screen and (min-width: 769px) {
@keyframes example {
  0%   {left:0px; top:20px;}
  25%  {left:0px; top:10px;}
  50%  {left:0px; top:-50px;}
  75%  {left:0px; top:80px;}
  100% {left:0px; top:50px;}
}

.tech-row-2 {
  position: relative;
  animation: example1 5s infinite;
}

@keyframes example1 {
 0%   {left:0px; top:20px;}
  25%  {left:0px; top:10px;}
  50%  {left:0px; top:20px;}
  75%  {left:0px; top:-60px;}
  100% {left:0px; top:20px;}
}

.tech-row-3 {
  position: relative;
  animation: example2 5s infinite;
}

@keyframes example2 {
  0%   {left:0px; top:20px;}
  25%  {left:0px; top:10px;}
  50%  {left:0px; top:50px;}
  75%  {left:0px; top:10px;}
  100% {left:0px; top:20px;}
}
.tech-row-4 {
  position: relative;
  animation: example4 5s infinite;
}

@keyframes example4 {
  0%   {left:0px; top:20px;}
  25%  {left:0px; top:10px;}
  50%  {left:0px; top:-50px;}
  75%  {left:0px; top:10px;}
  100% {left:0px; top:20px;}
}
.tech-row-5 {
  position: relative;
  animation: example5 5s infinite;
}

@keyframes example5 {
  0%   {left:0px; top:20px;}
  25%  {left:0px; top:10px;}
  50%  {left:0px; top:-40px;}
  75%  {left:0px; top:10px;}
  100% {left:0px; top:20px;}
}
.tech-row-6 {
  position: relative;
  animation: example6 5s infinite;
}

@keyframes example6 {
  0%   {left:0px; top:20px;}
  25%  {left:0px; top:-60px;}
  50%  {left:0px; top:20px;}
  75%  {left:0px; top:-40px;}
  100% {left:0px; top:20px;}
}

}
@media (max-width: 500px){
    .box-1{
        min-height: 300px;
    }
     .logo {
         max-width: 140px;
     }
     .social-icon{
        width: 16px;
        height: 16px;
    }
    .social-icon-footer{
     width: 25px;
     height: 25px; 
   }
    .footer-box ul li a,.contact-footer a{
        font-size: 1rem;
    }
    .contact-footer a{
        padding-left: .5rem;
    }
}
@media (max-width: 330px){
     .logo {
         max-width: 80px;
     }
     .social-icon{
        width: 12px;
        height: 12px;
        display: block;
    }
    .social-icon-footer{
        width: 15px;
        height: 15px; 
    }
}