/*=== responsive for mobile===*/

/* mobile menu css */
    .mobile-menu {
    display: block;
    margin-top: 0px;
    padding-top: 0px;
    padding-bottom: 0px;
    position: relative;
    z-index: 10000;
    }
	.menu-toogle-icon {
		position: relative;
		right: 0;
		background-color: transparent;
		top: 0;
		padding: 6px;
		border-radius: 4px;
		display: inline-block;
		/*margin-right: 26px;*/
	}

    .hamburger {
    /* position: absolute;
    right: 150px;
    top: 36px;*/
    display: flex;
    height: 18px;
    width: 24px;
    flex-direction: column;
    justify-content: space-between;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    z-index: 1;
	margin-bottom: 0px;
    }
      .hamburger__icon {
        display: inline-block;
        height: 2px;
        width: 24px;
        background: rgb(255, 255, 255);
        border-radius: 2px;
      }

      #header.fixed .hamburger__icon {
        background: rgb(0, 0, 0);
      }

      .sidebar {
        height: 100%;
        width: 320px;
        background: #fff;
        position: fixed;
        top: 0;
        right: 0;
        padding: 18px 0px;
        display: flex;
        flex-direction: column;
        transform: translatex(100%);
        transition: transform 0.4s ease-in-out;
        z-index: 100;
    }
      .sidebar__close {
        position: absolute;
        top: 0%;
        right: 4px;
        background: #fff;
        height: 40px;
        width: 40px;
        border-radius: 50%;
        box-shadow: 0 0 20px 20px rgba(0, 0, 0, 0.03);
        display: flex;
        justify-content: center;
        align-items: center;
        transform: translatex(-100%);
        cursor: pointer;
        transition: transform 0.4s ease-in-out 0.2s;
		transform: rotate(45deg);
      }
      .sidebar__close::before, .sidebar__close::after {
        content: "";
        height: 2px;
        background: #898989;
        width: 24px;
        display: block;
        position: absolute;
      }
      .sidebar__close::after {
        transform: rotate(90deg);
      }
      .sidebar__menu {
        display: flex;
        flex-direction: column;
        flex: 1;
        justify-content: space-around;
        font-size: 36px;
        margin-top: 80px;
        margin-bottom: 80px;
        color: #898989;
      }
      .sidebar__menu a {
        color: currentcolor;
        text-decoration: none;
        transform: translatex(-80%);
        transition: transform 0.4s ease-in-out;
      }
      .sidebar__menu a::before {
        content: "";
        height: 2px;
        background: #898989;
        width: 120px;
        position: absolute;
        bottom: -2px;
        left: 0;
        transform: translatex(-50%);
        opacity: 0;
        transition: transform 0.4s ease-in-out, opacity 0.4s linear;
      }
      .sidebar__menu a:hover::before {
        transform: translatex(0);
        opacity: 1;
      }
      .sidebar__menu a:nth-child(1) {
        transition-delay: 0.05s;
      }
      .sidebar__menu a:nth-child(2) {
        transition-delay: 0.1s;
      }
      .sidebar__menu a:nth-child(3) {
        transition-delay: 0.15s;
      }
      .sidebar__menu a:nth-child(4) {
        transition-delay: 0.2s;
      }
      .sidebar__menu a:nth-child(5) {
        transition-delay: 0.25s;
      }
      .sidebar__social {
        display: flex;
        list-style: none;
        padding: 0;
      }
      .sidebar__social li {
        margin: 4px;
      }
      .sidebar__social a, .sidebar__social svg {
        display: inline-block;
        height: 18px;
        width: 18px;
      }

      .menu-control {
        display: none;
      }
      .menu-control:checked + .sidebar {
        transform: translatex(0);
      }
      .menu-control:checked + .sidebar .sidebar__close {
       /* transform: translatex(0) rotate(45deg);*/
      }
      .menu-control:checked + .sidebar .sidebar__menu a {
        /*transform: translatex(0);*/
      }

      .sidebar-navigation {
        width: auto;
        height: auto;
        background-color: #fff;
        margin: 24px 0px auto;

      }
      .sidebar-navigation .title {
        display: block;
        font-size: 1.2em;
        background-color: #1e1e1e;
        padding: 20px 25px;
        color: #fff;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.1em;
      }

      .sidebar-navigation ul {
        margin: 0;
        padding: 0;
      }
      .sidebar-navigation ul li {
        display: block;
      }
      .sidebar-navigation ul li a {
        position: relative;
        display: block;
        font-size: 0.9em;
        font-family: 'Montserrat', sans-serif;
        font-weight: 500;
        padding: 10px 25px;
        text-decoration: none;
        color: #1729ab;
        letter-spacing: 0.02em;
        border-bottom: 1px solid #eee;
        -webkit-transition: all 0.3s linear;
        -moz-transition: all 0.3s linear;
        -o-transition: all 0.3s linear;
        transition: all 0.3s linear;
      }
      .sidebar-navigation ul li a em {
        font-size: 24px;
        position: absolute;
        right: 20px;
        top: 50%;
        transform: translateY(-50%);
        padding: 5px;
        border-radius: 50%;
      }
      .sidebar-navigation ul li:hover > a, .sidebar-navigation ul li.selected > a {
        background-color: #ecf0f1;
        color: #0b1364;
        border-color: rgba(255, 255, 255, 0.1);
      }
      .sidebar-navigation ul li ul {
        display: none;
      }
      .sidebar-navigation ul li ul.open {
        display: block;
      }
      .sidebar-navigation ul li ul li a {
        color: #495d62;
        border-color: rgba(255, 255, 255, 0.1);
      }

      .sidebar-navigation ul li ul li:hover > a, .sidebar-navigation ul li ul li.selected > a {
        background-color: #e6ebed;
      }
      .sidebar-navigation ul li ul li:hover > a:before, .sidebar-navigation ul li ul li.selected > a:before {
        margin-right: 10px;
      }
      .sidebar-navigation ul li ul li.selected.selected--last > a {
        background-color: #94aab0;
        color: #fff;
      }
      .sidebar-navigation ul li ul li.selected.selected--last > a:before {
        background-color: #fff;
      }



      /* end mobile menu */


@media (max-width: 767px) {

    /*=== Heading style====*/

	#header{
		padding: 0px 0px;
	}

	.topnav-container {
       width: 91vw;
	}

   .mobile-logo{
        width: 100%;
        text-align: center;
    }


      .banner-text-block h3{
        font-size: 32px;
      }

      .banner-learn-more-btn {
        padding-top: 24px;
      }



    .right-top-nav {
        text-align: left;
    }



    .topnav-text ul li{
        padding: 2px 6px;
    }

    .topnav-text ul li a{
        font-size: 15px;
    }

    .top-center-text p{
        font-size: 14px;
        padding-left: 6px;
        margin: 0px;
        line-height: 18px;
        text-align: left;
    }

    #navbarSupportedContent .navbar-nav {
        margin-top: 0px;
    }

    #header .navbar-light .navbar-toggler-icon {
        top: -38px;
        display: none;
    }

    .top-header{
        margin-top: 6px;
    }

    #header .start-header{
        box-shadow: none;
    }

    .logo{
       text-align: left;
       padding: 0px 0;
    }

	.tp-nav-row .col-lg-3{
		width: 50%;
	}

	.tp-nav-row .col-lg-9{
		width: 50%;
	}

    .logo .navbar-brand{
        margin-right: 0px;
		padding: 2px 0px 0px 0px;
    }

    .top-free-estimate {
        padding-top: 1px;
    }

    .top-free-estimate p {
        font-family: 'Ek Mukta';
        font-size: 16px;
        line-height: 20px;
    }

    .top-call-section {
        display: flex;
        padding-top: 2px;
        padding-left: 0%;
        justify-content: center;
    }

	.hamburger{
		height: 14px;
		width: 22px;
	}

	.hamburger__icon{
		width: 22px;
	}

	.top-user-icon .user {
       width: auto;
       height: 29px;
	   line-height: 25px;
	   font-size: 24px;
	}

	.right-icons{
	padding-right: 0px;
}


    #header .navbar-brand img{
        width: 160px;
		position: relative;
        top: 2px;
    }

    #header .dropdown-menu {
        padding: 0px!important;
    }

    #header .nav-link::after{
        display: none;
    }

    #header .nav-item{
        padding-left: 0px !important;
    }

    #header .nav-link{
        font-size: 15px;
        padding: 5px 10px !important;
        display: block;
    }



	.categories-list {
       margin-top: 20px;
	   flex-wrap: wrap;
	}

	.categoris-item {
    text-align: center;
    width: 33.33%;
}

   .category-icon {
    width: 80px;
    height: 72px;
    border-radius: 20px;
    padding: 8px 10px 10px 10px;
}



  .top-game-slider {
    margin-top: 20px;
}

   .top-categories-section{
	   padding-top: 6px;
       padding-bottom: 18px;
   }

   .categoris-item p{
	font-size: calc((130vw - 5em) / 40);
    margin-top: 10px;
	font-weight: 500;
	margin-bottom: 0px;
   }

   /*.menu-toogle-icon{
	  margin-right: 16px;
   }*/

   .home-banner img{
	   border-top-left-radius: 18px;
       border-top-right-radius: 18px;
   }

   .page-heading-2{
	   font-size: calc((100vw - 5em) / 20);
	   font-weight: 600;
	}

	.home-banner .heading-block {
		margin-bottom: 18px;
		margin-top: 8px;
	}

	.page-heading-normal{
			font-size: calc((100vw - 5em) / 20);
	}

	.page-heading{
		font-size: calc((100vw - 5em) / 20);
	}

	.custom-container {
      width: 97vw;
	}

	.row{
		margin: 0px;
	}

	.best-game-section {
    padding-top: 32px;
    padding-bottom: 32px;
    }

  .tp-nav-row{
	margin-left: -15px;
    margin-right: -15px;
   }
   .top-ten-games {
    padding-top: 24px;

}


   .footer-useful-links ul {
    padding-left: 4px;
}



   .heading-block{
	  flex-direction: row;
	  align-items: center;
	  margin-bottom: 6px;
   }



   .see-more-btn a{
	  font-size: calc((100vw - 5em) / 20);
      margin-top: 0px;
      padding: 4px 12px;
   }

   .game_title{
       font-size: calc((120vw - 5em) / 35);
       margin-top: 10px;
   }

.best-game-item img {
   border-top-left-radius: 12px;
    border-top-right-radius: 12px;
}

.best-game-item {
    margin-top: 15px;
}

.heading-left-info{
	width: calc( 100% - 130px);
}

.see-more-btn{
	padding-right: 4px;
	    width: 130px;
}

.main-p-heading {
	    margin-bottom: 14px;
}

.action-heading {
	    margin-bottom: 4px;
}

 .best-game-section .col-lg-4 {
	       width: 33.33%;
		   padding-right: 4px;
           padding-left: 4px;
   }

  .game-recomend-section .col-lg-4 {
	       width: 33.33%;
		   padding-right: 4px;
           padding-left: 4px;
   }

   .footer-section .col-lg-4{
	    padding-right: 6px;
        padding-left: 6px;
   }

   .action-games-section {
    padding-top: 24px;
    padding-bottom: 24px;
}

  /*action page css*/

  .breadcrum-section .breadcrumb .breadcrumb-item.active{
	      font-size: calc((100vw - 5em) / 25);
  }

  .breadcrum-section .breadcrumb .breadcrumb-item a{
	   font-size: calc((100vw - 5em) / 25);
  }

  .breadcrum-section .breadcrumb .breadcrumb-item{
	  font-size: calc((100vw - 5em) / 25);
  }

  .breadcrum-section .breadcrumb{
	  padding: 1rem 0rem;
  }

   .action-game-banner {
    position: relative;
    margin-top: 5px;
}

  .action-game-tumb {
		margin-top: 20px;
	}

	.action-games-section .col-lg-4 {
		width: 33.33%;
		padding-right: 4px;
		padding-left: 4px;
	}


/* game play page css */

.game-playing-title h2{
	font-size: calc((100vw - 5em) / 18);
}



.footer-section{
   padding-top: 0px;
   padding-bottom: 0px;
}

.footer-inner {
    padding-top: 20px;
    padding-bottom: 0px;
    padding-left: 0px;
    padding-right: 0px;
}

.footer-heading {
    font-size: calc((100vw - 5em) / 15);
    margin-bottom: 10px;
    margin-top: 5px;
}

.uf-links {
    padding-left: 15px;
}

.footer-address{
	  font-size: calc((100vw - 5em) / 20);
	      line-height: 22px;
   }

.footer-useful-links ul li a{
	   font-size: calc((100vw - 5em) / 20);
   }

.footer-copy-right{
	font-size: calc((100vw - 5em) / 20);
	text-align: center;

}

.footer-social {
    text-align: center;
    margin-top: 10px;
}

.footer-social a{
	width: 34px;
    height: 34px;
	line-height: 20px;
    font-size: 18px;
}

.tc-links p a{
    font-size: 0.9rem;
}


}

    /*-- ======= Top Bar css ======= */

    @media only screen and (min-width: 768px) and (max-width: 1000px)  {

		.topnav-container {
			width: 90vw;
		}

        .custom-container {
            width: 92vw;
        }
        #navbarSupportedContent .navbar-nav {
            margin-top: 0px;
            margin-left: -10px;
        }

        #header .navbar-brand img {
			width: 196px;
		}
        #header .nav-item {
            position: relative;
            transition: all 200ms linear;
            margin-left: 1rem !important;
        }

        #header .nav-link i {
            font-size: 14px;
        }

       .logo {
        padding: 5px 0;
		}

        #header .nav-link {
			padding: 7px 6px !important;
			font-weight: 500;
			font-size: calc((100vw - 5em) / 60);
		}

		.top-categories-section{
			    padding-top: 12px;
		}

		.page-heading{
			 font-size: calc((100vw - 5em) / 25);
		}

		.categoris-item p{
			font-size: calc((100vw - 5em) / 50);
            font-weight: 500;
		}

		.categories-list {
          margin-top: 34px;
		}

		.category-icon {
			width: 140px;
			height: 140px;
			border-radius: 30px;
			padding: 12px 10px 10px 10px;
		}



		.game_title{
		    font-size: calc((100vw - 5em) / 50);
		}

		.page-heading-2{
			font-size: calc((100vw - 5em) / 25);
		}

		.page-heading-normal{
			font-size: calc((100vw - 5em) / 25);
		}

		.see-more-btn a{
			font-size: calc((100vw - 5em) / 45);
		}

		/*action page css */

  .breadcrum-section .breadcrumb .breadcrumb-item.active{
	         font-size: calc((100vw - 5em) / 38);
  }

  .breadcrum-section .breadcrumb .breadcrumb-item a{
	       font-size: calc((100vw - 5em) / 38);
  }

  .breadcrum-section .breadcrumb .breadcrumb-item{
	      font-size: calc((100vw - 5em) / 38);
  }

  .action-games-section {
    padding-top: 36px;
    padding-bottom: 36px;
}

/* game play page css */

.game-playing-title h2{
	font-size: calc((100vw - 5em) / 26);
}

.footer-inner{
		   padding-left: 4px;
           padding-right: 4px;
		}


		.footer-heading{
			font-size: calc((100vw - 5em) / 40);
		}

		.footer-address {
			font-size: calc((100vw - 5em) / 55);
			line-height: 22px;
		}

		.footer-useful-links ul li a{
			    font-size: calc((100vw - 5em) / 55);
		}

		.footer-copy-right{
			    font-size: calc((100vw - 5em) / 45);
		}

		.footer-social a{
	      width: 38px;
         height: 38px;
		 line-height: 22px;
		 font-size: 20px;
		}


    }




    @media only screen and (min-width: 1001px) and (max-width: 1199px)  {

        .custom-container {
            width: 92vw;
        }

		.topnav-container {
			width: 92vw;

		}
        #navbarSupportedContent .navbar-nav {
            margin-top: 0px;
            margin-left: -10px;
        }


        #header .nav-item {
            position: relative;
            transition: all 200ms linear;
            margin-left: 0.3rem!important;
        }

        #header .nav-link i {
            font-size: 14px;
        }


        #header .nav-link {
			padding: 7px 6px !important;
			font-weight: 500;
			font-size: calc((100vw - 5em) / 60);
		}

		.top-categories-section{
			    padding-top: 8px;
		}

		.categories-list {
          margin-top: 40px;
		}

		.categoris-item p{
			    font-size: calc((100vw - 5em) / 60);
		}

		.game_title {
            font-size: calc((100vw - 5em) / 55);
		}

		.see-more-btn a{
			font-size: calc((100vw - 5em) / 62);
		}

		.category-icon {
		width: 266px;
		height: 266px;
		border-radius: 50px;
       }

	   .best-game-item img {
			border-top-left-radius: 10px;
			border-top-right-radius: 10px;
		}



		/*healthy habbits-section */

	  .breadcrum-section .breadcrumb .breadcrumb-item.active{
				 font-size: calc((100vw - 5em) / 50);
	  }

	  .breadcrum-section .breadcrumb .breadcrumb-item a{
			   font-size: calc((100vw - 5em) / 50);
	  }

	  .breadcrum-section .breadcrumb .breadcrumb-item{
			  font-size: calc((100vw - 5em) / 50);
	  }

	.footer-inner{
		   padding-left: 4px;
           padding-right: 4px;
		}



		.footer-address {
			font-size: calc((100vw - 5em) / 70);
			line-height: 24px;
		}

		.footer-useful-links ul li a{
			font-size: calc((100vw - 5em) / 70);
		}

		.footer-copy-right{
			font-size: calc((100vw - 5em) / 60);
		}


    }


    @media only screen and (min-width: 1200px) and (max-width: 1280px)  {
        .custom-container {
            width: 90vw;
        }

		.topnav-container {
            width: 90vw;
		}
        #navbarSupportedContent .navbar-nav {
            margin-top: 0px;

        }

        #header .nav-link i {
            font-size: 16px;
        }


        #header .nav-item {
            position: relative;
            transition: all 200ms linear;
            margin-left: 0.3rem!important;
        }

        .topnav-text ul li{
            padding: 4px 4px;
        }

        .topnav-text ul li a{
            font-size: 15px;
            font-weight: normal;
        }

		.categories-list {
			margin-top: 54px;
		}

		.categoris-item p{
			font-size: calc((100vw - 5em) / 65);
		}

		.see-more-btn a{
		    font-size: calc((100vw - 5em) / 74);
		}

		.game_title {
          font-size: calc((100vw - 5em) / 70);
		}

		/*action game page css*/

	  .breadcrum-section .breadcrumb .breadcrumb-item.active{
				 font-size: calc((100vw - 5em) / 70);
	  }

	  .breadcrum-section .breadcrumb .breadcrumb-item a{
			   font-size: calc((100vw - 5em) / 70);
	  }

	  .breadcrum-section .breadcrumb .breadcrumb-item{
			  font-size: calc((100vw - 5em) / 70);
	  }






		.footer-address{
			    font-size: calc((100vw - 5em) / 70);
		}

		.footer-useful-links ul li a{
			    font-size: calc((100vw - 5em) / 70);
		}

		.footer-copy-right{
			font-size: calc((100vw - 5em) / 80);
		}


   }



    @media only screen and (min-width: 1281px) and (max-width: 1399px)  {

     .page-heading{
		     font-size: calc((100vw - 5em) / 40);
	 }

	 .page-heading-2{
		     font-size: calc((100vw - 5em) / 40);
	 }

	 .page-heading-normal{
			font-size: calc((100vw - 5em) / 40);
		}



    }

    @media only screen and (min-width: 1400px) and (max-width: 1440px)  {


		#header .nav-link{
			font-size: calc((100vw - 5em) / 80);
		}

		.page-heading{
		     font-size: calc((100vw - 5em) / 40);
	     }

		 .page-heading-2{
				 font-size: calc((100vw - 5em) / 40);
		 }

		 .page-heading-normal{
			font-size: calc((100vw - 5em) / 40);
		}


		 .footer-heading{
			 font-size: calc((100vw - 5em) / 60);
		 }



    }

	 @media only screen and (min-width: 1441px) and (max-width: 1599px)  {


		#header .nav-link{
			font-size: calc((100vw - 5em) / 80);
		}



    }

    @media only screen and (min-width: 1600px) and (max-width: 1680px)  {



    }









