body {
  width: 100%;
  height: 100%;
  font-family: "Lora", "Helvetica Neue", Helvetica, Arial, sans-serif;
  background-color: #f0f0f0;
}
html {
  width: 100%;
  height: 100%;
}
h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 0 0 20px;
  text-transform: uppercase;
  font-family: "Montserrat", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: 700;
  letter-spacing: 1px;
}
p {
  margin: 0 0 25px;
  font-size: 18px;
  line-height: 1.5;
}
@media (min-width: 768px) {
  p {
    margin: 0 0 35px;
    font-size: 20px;
    line-height: 1.6;
  }
}
/*a {
  color: #42DCA3;
  -webkit-transition: all 0.2s ease-in-out;
  -moz-transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out;
}*/
/*a:hover,
a:focus {
  text-decoration: none;
  color: #1d9b6c;
}*/
.light {
  font-weight: 400;
}
.navbar-custom {
  margin-bottom: 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.3);
  text-transform: uppercase;
  font-family: "Montserrat", "Helvetica Neue", Helvetica, Arial, sans-serif;
}
.navbar-custom .navbar-toggle {
  color: white;
  background-color: rgba(255, 255, 255, 0.2);
  font-size: 12px;
}
.navbar-custom .navbar-toggle:focus,
.navbar-custom .navbar-toggle:active {
  outline: none;
}
.navbar-custom .navbar-brand {
  font-weight: 700;
}
.navbar-brand {padding: 0;}
.navbar-custom .navbar-brand:focus {
  outline: none;
}
.navbar-custom a {
  color: white;
}
.navbar-custom .nav li a {
    background: transparent;
    padding: 8px 15px;
    font-size: 11px;
    border-radius: 5px;
}
.nav-link:before{
  background: rgba(225, 225, 225, 0.42) !important;
}
.btn-full:before{
  background: #e95c53 !important;
}
.btn-light:before{
  background: transparent !important;
}
.navbar-custom .nav li a:focus,
.navbar-custom .nav li a:active {
  outline: none;
  background-color: transparent;
}
.navbar-custom .nav li.active {
  outline: none;
}
.navbar-custom .nav li.active a {
  background-color: rgba(255, 255, 255, 0.3);
}
.navbar-custom .nav li.active a:hover {
  color: white;
}
.navbar-nav>li{
  margin: 7px 0;
  float: left;
}

  .navbar-custom {
    padding: 15px 0;
    border-bottom: none;
    letter-spacing: 1px;
    background: transparent;
    -webkit-transition: background 0.5s ease-in-out, padding 0.5s ease-in-out;
    -moz-transition: background 0.5s ease-in-out, padding 0.5s ease-in-out;
    transition: background 0.5s ease-in-out, padding 0.5s ease-in-out;
  }
  .navbar-custom.top-nav-collapse {
    padding: 0;
    background: rgba(42, 58, 81, 0.82);
    border-bottom: 1px solid rgba(255, 255, 255, 0.3);
  }

.intro {
  display: table;
  width: 100%;
  height: auto;
  padding: 100px 0;
  text-align: center;
  color: white;
  background: url("https://toplist.pk/assets/images/cover2.jpg") no-repeat bottom center scroll;
  background-color: #555;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  background-size: cover;
  -o-background-size: cover;
}
.intro .intro-body {
  display: table-cell;
  vertical-align: middle;
}
.intro .intro-body .brand-heading {
  font-size: 40px;
}

.spacer{
  padding: 60px 0
}

.spacer1{
  padding-top: 40px
}

.intro .fa-check-circle{
  color: rgba(0, 212, 0, 0.78);
  font-size: 22px;
}

@media (min-width: 768px) {
  .intro {
    padding: 80px 0 0;
  }
  .intro .intro-body .brand-heading {
    font-size: 100px;
  }

}
/*
.btn-circle {
  width: 70px;
  height: 70px;
  margin-top: 15px;
  padding: 7px 16px;
  border: 2px solid white;
  border-radius: 100% !important;
  font-size: 40px;
  color: white;
  background: transparent;
  -webkit-transition: background 0.3s ease-in-out;
  -moz-transition: background 0.3s ease-in-out;
  transition: background 0.3s ease-in-out;
}
.btn-circle:hover,
.btn-circle:focus {
  outline: none;
  color: white;
  background: rgba(255, 255, 255, 0.1);
}
.btn-circle i.animated {
  -webkit-transition-property: -webkit-transform;
  -webkit-transition-duration: 1s;
  -moz-transition-property: -moz-transform;
  -moz-transition-duration: 1s;
}
.btn-circle:hover i.animated {
  -webkit-animation-name: pulse;
  -moz-animation-name: pulse;
  -webkit-animation-duration: 1.5s;
  -moz-animation-duration: 1.5s;
  -webkit-animation-iteration-count: infinite;
  -moz-animation-iteration-count: infinite;
  -webkit-animation-timing-function: linear;
  -moz-animation-timing-function: linear;
}*/
@-webkit-keyframes pulse {
  0% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
  50% {
    -webkit-transform: scale(1.2);
    transform: scale(1.2);
  }
  100% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}
@-moz-keyframes pulse {
  0% {
    -moz-transform: scale(1);
    transform: scale(1);
  }
  50% {
    -moz-transform: scale(1.2);
    transform: scale(1.2);
  }
  100% {
    -moz-transform: scale(1);
    transform: scale(1);
  }
}
.content-section {
  padding-top: 100px;
}
.download-section {
  width: 100%;
  padding: 50px 0;
  color: white;
  background: url(../img/downloads-bg.jpg) no-repeat center center scroll;
  background-color: black;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  background-size: cover;
  -o-background-size: cover;
}
#map {
  width: 100%;
  height: 200px;
  margin-top: 100px;
}
@media (min-width: 767px) {
  .content-section {
    padding-top: 250px;
  }
  .download-section {
    padding: 100px 0;
  }
  #map {
    height: 400px;
    margin-top: 250px;
  }
}
/*.btn {
  text-transform: uppercase;
  font-family: "Montserrat", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: 400;
  -webkit-transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
  border-radius: 0;
}
*/
ul.banner-social-buttons {
  margin-top: 0;
}
@media (max-width: 1199px) {
  ul.banner-social-buttons {
    margin-top: 15px;
  }
}
@media (max-width: 767px) {
  ul.banner-social-buttons li {
    display: block;
    margin-bottom: 20px;
    padding: 0;
  }
  ul.banner-social-buttons li:last-child {
    margin-bottom: 0;
  }
}

::-moz-selection {
  text-shadow: none;
  background: #fcfcfc;
  background: rgba(255, 255, 255, 0.2);
}
::selection {
  text-shadow: none;
  background: #fcfcfc;
  background: rgba(255, 255, 255, 0.2);
}
img::selection {
  background: transparent;
}
img::-moz-selection {
  background: transparent;
}
body {
  webkit-tap-highlight-color: rgba(255, 255, 255, 0.2);
}








/* DEMO 5 */

.wrapper-dropdown-5 {
    /* Size & position */
    position: relative;
    width: 110px;
    margin: 0 auto;
    padding: 11px 15px;
    font-size: 11px;
    color: white;
    background: transparent;
    /* Styles */
    cursor: pointer;
    outline: none;
    -webkit-transition: all 0.3s ease-out;
    -moz-transition: all 0.3s ease-out;
    -ms-transition: all 0.3s ease-out;
    -o-transition: all 0.3s ease-out;
    transition: all 0.3s ease-out;
}

.wrapper-dropdown-5:after { /* Little arrow */
    content: "";
    width: 0;
    height: 0;
    position: absolute;
    top: 50%;
    right: 15px;
    margin-top: -3px;
    border-width: 5px 5px 0 5px;
    border-style: solid;
    border-color: #fff transparent;
}

.wrapper-dropdown-5 .dropdown {
    /* Size & position */
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;

    /* Styles */
    background: rgba(80, 67, 50, 0.68);
    border-radius: 0 0 2px 2px;
    border: 1px solid rgba(0,0,0,0.2);
    border-top: none;
    border-bottom: none;
    list-style: none;
    -webkit-transition: all 0.3s ease-out;
    -moz-transition: all 0.3s ease-out;
    -ms-transition: all 0.3s ease-out;
    -o-transition: all 0.3s ease-out;
    transition: all 0.3s ease-out;

    /* Hiding */
    max-height: 0;
    overflow: hidden;
}
.login-user-name{
      padding: 5px;
}

.wrapper-dropdown-5 .dropdown li {
        border-top: 1px solid #797979;
}

.wrapper-dropdown-5 .dropdown li a {
    display: block;
    text-decoration: none;
    color: #fff;
    padding: 10px;
    transition: all 0.3s ease-out;
}


.wrapper-dropdown-5 .dropdown li:last-of-type a {
    border: none;
}

.wrapper-dropdown-5 .dropdown li i {
    margin-right: 5px;
    color: inherit;
    vertical-align: middle;
}

/* Hover state */
/*
.wrapper-dropdown-5 .dropdown li:hover a {
    color: #57a9d9;
}
*/
/* Active state */

/*.wrapper-dropdown-5.active {
    border-radius: 5px 5px 0 0;
    background: #4cbeff;
    box-shadow: none;
    border-bottom: none;
    color: white;
}

.wrapper-dropdown-5.active:after {
    border-color: #82d1ff transparent;
}*/

.wrapper-dropdown-5.active .dropdown {
    border-bottom: 1px solid rgba(0,0,0,0.2);
    max-height: 400px;
    min-width: 150px;
    margin-top: 2px;
}

.logo{
    width: 250px;
}

/* Search Input Style */

.form-style-8{
    background: #3a514b;
    padding: 10px;
    margin: auto;
    display: inline-block;
}
.banner-heading{
  font-size: 30px;
  margin-bottom: 20px;
}
.form-style-8{width: 93%;}
.form-style-8 select{width: 49%; margin-bottom: 10px;}
.form-style-8 input[type="text"]{ width: 68%;}
.banner-heading{
    font-size: 19px;
    margin-bottom: 15px;
}
.intro .intro-body .intro-text {
    font-size: 14px;
    margin-bottom: 15px;
}

@media (min-width: 460px){
    .form-style-8{width: 93%;}
    .form-style-8 select{width: 49%; margin-bottom: 10px;}
    .form-style-8 input[type="text"]{ width: 75%;}
    .banner-heading{
        font-size: 20px;
        margin-bottom: 5px;
    }   
    .intro .intro-body .intro-text {
        font-size: 16px;
        margin-bottom: 15px;
    }
}

@media (min-width: 768px){
    .form-style-8{width: 93%;}
    .form-style-8 select{width: 138px;}
    .form-style-8 input[type="text"]{ width: 555px;}
    .banner-heading{
        font-size: 27px;
        margin-bottom: 15px;
    }
    
    .intro .intro-body .intro-text {
        font-size: 23px;
        margin-bottom: 15px;
    }
    
}
@media (min-width: 992px){
    .form-style-8{width: 80%;}
    .form-style-8 select{width: 138px;}
    .form-style-8 input[type="text"]{ width: 555px;}
    .banner-heading{
        font-size: 30px;
        margin-bottom: 1px;
    }
    .intro .intro-body .intro-text {
        font-size: 23px;
        margin-bottom: 15px;
    }
}
@media (min-width: 1200px){
    .form-style-8{width: 65%;}
    .form-style-8 select{width: 148px;}
    .form-style-8 input[type="text"]{ width: 627px}
    .banner-heading{
        font-size: 30px;
        margin-bottom: 1px;
    }
}



.form-style-8 input[type="text"]{
    border-radius: 0px 4px 4px 0px;
}


.form-style-8 input[type="text"],
.form-style-8 input[type="date"],
.form-style-8 input[type="datetime"],
.form-style-8 input[type="email"],
.form-style-8 input[type="number"],
.form-style-8 input[type="search"],
.form-style-8 input[type="time"],
.form-style-8 input[type="url"],
.form-style-8 input[type="password"],
.form-style-8 textarea,
.form-style-8 select 
{
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    outline: none;
    display: block;
    padding: 7px;
    color: #999;
    float: left;
    border: none;
    /* border-right: 3px dotted #ddd;*/
    background: white;
    font: 13px Arial, Helvetica, sans-serif;
    height: 35px;
}
.form-style-8 textarea{
    resize:none;
    overflow: hidden;
}

.btn-banner {
    border: 1px solid #e95c53;
    color: white;
    background-color: #e95c53;
    font-size: 12px;
    padding: 8px 13px;
    float: left;
    border-radius: 4px;
    margin-left: 15px;
}
.btn-banner:hover,
.btn-banner:focus {
    border: 1px solid #e95c53;
    outline: none;
    color: white;
    background-color: #e87169;
}

.intro-search-sections{
    width: 65%;
    margin: 25px auto 0;
    display: inline-block;
}
.intro-section-outer{
    width: 16.5%;
    float: left;
    padding: 5px;
    /*background: rgba(218, 218, 218, 0.37);
    border-radius: 5px;*/
}
.intro-section-inner{
    background: rgba(218, 218, 218, 0.55);
    padding: 28px 5px;
    border-radius: 5px;
}
.intro-section-inner span{
    font-size: 12px;
}
.intro-section-inner .fa{
    font-size: 22px;
}
hr.hr-under-bg:after{
  background: #f0f0f0;
}

  #cate_sections{
    background: #fff;
  }
  .cate-sections, .howToWork-section{
    width: 70%;
    margin: 30px auto 0;
    display: block
  }
  .cate-sections h4{
    font-size: 14px;
    padding: 12px 5px;
    margin: 0;
  }
  .cate-sections-outer{
    /*background: #999;*/
    position: relative;
    border-radius: 5px;
    border: 1px solid #ddd;
  }
  .cate-sections-inner{
    background: #189cd8;
    color: white;
    border-radius: 50%;
    text-align: center;
    cursor: pointer;
  }
  .cate-sections-inner:hover{
    background: #e95c53;
    color: white;
  }

  .cate-sections-inner span{
      color: white;
      border-radius: 20px;
      background: #8BC34A;
  }
  .bg-purple{
    background: #c743de;
  }
  .bg-lblue{
    background: #5fd8ed;
  }
  .bg-yellow{
    background: #f1c353;
  }
  .bg-blue{
    background: #45afff;
  }
  .listing-head h2{
    font-size: 26px;
  }
  .listing-head p{
    font-size: 14px;
    margin:0;
  }
  .grid-box{
      margin: 0;
      border-radius: 4px 4px 0px 0px;
  }
  .grid-box-heading {
      font-size: 16px;
      margin: 0;
      padding: 5px 0;
  }
  .grid-box-sub-heading{
    font-size: 12px;
    margin: 0;
    padding: 5px 0;
  }
  .grid-box-stars{
    font-size: 16px;
    float: left;
  }
  .grid-box-rev{
    font-size: 12px;
    float: right;
    padding: 5px 0;
  }
  .grid-box-footer{
    display: -webkit-box;
    padding: 10px;
    border-right: 1px solid #ddd;
    border-left: 1px solid #ddd;
    width: 100%;
  }
  .grid-box-footer-green{
    border-bottom: 3px solid #7adb8c;
    background: rgba(122, 219, 140, 0.12);
  }
  .grid-box-footer-blue{
    border-bottom: 3px solid #45afff;
    background: rgba(69, 175, 255, 0.12);
  }  
  .grid-box-footer-yellow{
    border-bottom: 3px solid #f1c353;
    background: rgba(241, 195, 83, 0.12);
  }  
    .grid-box-footer-purple{
    border-bottom: 3px solid #c743de;
    background: rgba(199, 67, 222, 0.12);
  }  

  .grid-box-footer-red {
      border-bottom: 3px solid #d6667e;
      background: rgba(214, 102, 126, 0.12);
  }
  .grid-box-footer-grey {
      border-bottom: 3px solid #606060;
      background: rgba(96, 96, 96, 0.12);
  }
  .grid-box-footer-brown {
      border-bottom: 3px solid #7a5543;
      background: rgba(122, 85, 67, .12);
  }
  .grid-box-footer-orange {
    border-bottom: 3px solid #ef7b52;
    background: rgba(239, 123, 82, 0.12);
  }
  #how_to_work {
    /*background: url("https://toplist.pk/assets/images/how_to_work.jpg");
    background-repeat: no-repeat;
    color: white;
    background-size: 100% 100%;*/
  }
  hr.hr-under-blue:after{
    background: #313b47;
  }
  hr.hr-under-grey:after{
    background: #f0f0f0;
  }
  .howToWork-section h3{
    font-size: 15px;
    margin-bottom: 8px;
  }
  .howToWork-section p{
    font-size: 11px;
    margin: 0;s
  }
  .howToWork-section img{
      margin: 16px 12px;
  }

  .howToWork-outer{
    width: 100px;
    height: 100px;
    margin: auto;
    margin-bottom: 15px;
    border: 2px solid #ddd;
    border-radius: 20px;
  }
  .howToWork-outer-arrow:before{
    content: "\2212 \00a0 \2212 \00a0 \2212 \00a0 \2212 \00a0 \2212 \00a0 \003E";
    position: absolute;
    top: 39px;
    left: -44px;
    font-size: 18px;
  }

  .stories-section{
        padding: 30px;
  }
  .stories-section img{
      height: 100%;
      width: 100%;
      border-radius: 15px;
  }
  .stories-section-left-side1, .stories-section-right-side2{
    height: 260px;
    padding-right: 0;
  }
  .stories-section-right-side1, .stories-section-left-side2{
    background: white;
    margin: 18px 0;
    border-radius: 0 15px 15px 0;
  }
  .stories-section-right-side1 div, .stories-section-left-side2 div{
    padding: 25px;
  }
  .stories-section-right-side1 h3, .stories-section-left-side2 h3{
      font-size: 18px;
      margin-bottom: 12px;
  }
  .stories-section-right-side1 .story-detail, .stories-section-left-side2 .story-detail{
      font-size: 12px;
      margin: 0;
  }  
  .stories-date{
    font-size: 12px;
    color: #ababab;
    margin-bottom: 10px;
  }
  .stories-date span{
    color: #e95c53;
    font-size: 12px;
    font-weight: 600;
    padding: 0 3px;
  }
  .stories-section-left-side2{
    border-radius: 14px 0 0 14px;
  }
  .stories-section-right-side2{
        padding-left: 0;
  }
  #welcome_section{
    background: white;
  }
  .welcome-right-section {
    padding: 20px 60px 20px 50px;
  }
  .welcome-right-section p{
    font-size: 14px;
    margin: 0;
  }
  .welcome-left-section {
      padding: 20px 60px;
  }
  .welcome-left-section p{
    font-size: 18px;
    margin: 0;
  }
  #footer{
    background: url('https://toplist.pk/assets/images/footer_bg.jpg'); 
    background-size: 100% 100%;
  }
  .footer_section h3{
    font-size: 16px;
  }
  .newsletter_form{
    padding: 20px 25px 20px 0px;
  }
  .newsletter_form input{
    margin-bottom: 15px;
  }
  .newsletter_form input[type="submit"]{
    margin: 0px;
  }
  .footer_section ul li{
    padding: 6px;
    color: #a7a5a5;
    border-bottom: 1px solid rgba(167, 165, 165, 0.22);
  }
  .footer_section p {
    font-size: 12px;
    margin: 10px;
  }
  .footer_section p .fa{
      margin-right: 8px;
  }
  .footer_section img{
      margin-top: -10px;
  }

  .footer-bottom{
    background: #3d3d47;
    display: -webkit-box;
    padding: 35px;
    font-size: 12px;
  }
  .footer-bottom .payment-icons .fa{
    margin-right: 10px;
    font-size: 18px;
  }

  .searchbox span.srch-divider {
    float: left;
    border-left: 2px dashed #ddd;
    height: 35px;
    background: white;
  }

    .list-group-item{
    /*background: rgba(255, 200, 200, 0.41);*/
    background: rgba(233, 92, 83, 0.91);
    border: 1px solid #e95c53;
    color: white;
    padding: 10px;
    border-radius: 5px;
    margin: 5px 0;
  }

  .list-group-item a{
    color: white;
  }
  .sub-cate-section{
    width: 70%;
    margin: 0px auto;
    display: -webkit-box;
  }
  .sub-cate-section-remove{
    position: absolute;
    top: 5px;
    right: 8px;
    color: white;
    font-size: 18px;
    cursor:pointer;
  }
  .sub-cate-section div{ 
      background: rgba(42, 58, 81, 0.82);
      padding: 10px 25px;
      border-radius: 10px;
      width: 95%;
      margin: 0 20px;
      position: relative;
      color: white;
  }
  .list-group-item-heading{
    font-size: 12px !important;
    padding: 0 !important;
    font-weight: normal;
    margin: 0;
    letter-spacing: 0px;
  }
::selection {
  background: #3a514b; 
  color:white;
}
::-moz-selection {
  background: #3a514b;
  color:white; 
}


/* Footer Section Starts From Here*/


footer {background:#393941 url("https://toplist.pk/assets/images/footer_bg.jpg") fixed; padding-top:20px; color:#c0c2cd; font-size:13px;}
footer h4 {color:#FFF; margin-bottom:20px; text-transform:uppercase;}

footer ul {margin:0; padding:0; list-style:none;}
footer ul li {padding:5px 0;}

footer ul.social        {list-style:none; padding:0;}
footer ul.social li     {display:inline-block;}
footer ul.social li a   {text-decoration:none; line-height:30px; font-size:14px;}
footer ul.social li a i {width:30px; height:30px; line-height:30px; border-radius:50%; background-color:#2a2d34; color:#FFF; margin-right:10px; text-align:center;}
footer ul.social li a:hover i {background-color:#FFF; color:#2a2d34;}

footer a {color:#c0c2cd; text-decoration:none;}
footer a:hover {color:#FFF;}

footer .copy {padding:20px 0; background-color:#32353c; text-align:center; border-top:#4b4b53 1px solid;}

/* Footer Section CSS Ending Here=================================*/

  .sub-cate-section{
    width: 70%;
    margin: 0px auto;
    display: -webkit-box;
  }
  .sub-cate-section-remove{
    position: absolute;
    top: 5px;
    right: 8px;
    color: white;
    font-size: 18px;
    cursor:pointer;
  }
  .sub-cate-section div{ 
      background: rgba(42, 58, 81, 0.82);
      padding: 10px 25px;
      border-radius: 10px;
      width: 95%;
      margin: 0;
      position: relative;
      color: white;
  }

/*For Mobile View*/

@media (max-width: 768px){
  .cate-sections-outer{
      padding: 24px 27px;
  }
  .cate-sections-inner{
    height: 80px;
    width: 80px;
    font-size: 27px;
    padding: 20px;
    margin: auto;
  }
  .cate-sections-inner span{
    padding: 8px 1PX;
    position: absolute;
    top: 14%;
    left: 24%;
    height: 31px;
    width: 31px;
    font-size: 11px;
  }
}

/* For Tablet View */
@media (min-width: 768px){
  .cate-sections-outer{
      padding: 27px;
  }
  .cate-sections-inner{
    height: 90px;
    width: 90px;
    font-size: 35px;
    padding: 19px;
    margin: auto;
  }
  .cate-sections-inner span{
    padding: 10px 7PX;
    position: absolute;
    top: 15%;
    left: 28%;
    height: 34px;
    width: 34px;
    font-size: 12px;
  }
}

/* For Medium View */
@media (min-width: 992px){
  .cate-sections-outer{
      padding: 20px;
  }
  .cate-sections-inner{
    height: 90px;
    width: 90px;
    font-size: 35px;
    padding: 19px;
    margin: auto;
  }
  .cate-sections-inner span{
    padding: 10px 7PX;
    position: absolute;
    top: 12px;
    left: 15px;
    height: 34px;
    width: 34px;
    font-size: 12px;
  }
}

/* For Large View  */
@media (min-width: 1200px){
  .cate-sections-outer{
      padding: 32px;
  }
  .cate-sections-inner{
    height: 100px;
    width: 100px;
    font-size: 40px;
    padding: 22px;
    margin: auto;
  }
  .cate-sections-inner span{
      padding: 10PX;
      position: absolute;
      top: 30px;
      left: 30px;
      height: 34px;
      width: 34px;
      font-size: 12px;
  }

} 

/*For Extra Small Mobile View*/

@media (max-width: 450px){
  .cate-sections-outer{
      padding: 24px 27px;
  }
  .cate-sections-inner{
    height: 80px;
    width: 80px;
    font-size: 27px;
    padding: 20px;
    margin: auto;
  }
  .cate-sections-inner span{
    padding: 8px 1PX;
    position: absolute;
    top: 14%;
    left: 24%;
    height: 31px;
    width: 31px;
    font-size: 11px;
  }
  .cate-sections, .howToWork-section{
    width: 95%;
  }
  .sub-cate-section{
    width: 99%;
  }
  .sub-cate-section div{
    width: 100%;
  }
}