/*1. @media screen and (min-width:0\0)
- IE

2. @media screen and (-webkit-min-device-pixel-ratio:0)
- Chrome/Safari

3. @media screen and (min-width: 1780px) and (max-width: 1980px)
- Larger Screens

4. @media screen and (min-width: 1500px) and (max-width: 1600px)
- Larger Screens

5. @media screen and (max-width : 1280px)
- Macbook and other devices

6. @media screen and (max-width : 1024px)
- iPad devices Landscape

7. @media screen and (max-width : 991px)
- Tabs and Tablets Landscape

8. @media screen and (max-width : 800px)
- iPad Potrait and other devices

9. @media screen and (max-width : 767px)
- iPhone 6Plus/Nexus 6 Landscape

10. @media screen and (max-width : 680px)
- iPhone 6 Landscape

11. @media screen and (max-width : 580px)
- iPhone 5 Landscape

12. @media screen and (max-width : 480px)
- iPhone 4 Landscape and iPhone 6/6Plus Potrait

13. @media screen and (max-width : 420px)
- iPhone 6/6Plus Potrait/Nexus 5/Samsung Galaxy Potrait

*/

@media screen and (min-width: 1920px) {
    .explore-slider {
        max-width: 1920px;
    }
}

/* @media screen and (min-width: 768px) {
    .slider-nav .slick-track {
        max-width: 100% !important;
        transform: translate3d(0, 0, 0) !important;
        perspective: 100px;
    }

    .slider-nav .slick-slide {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        margin: auto;
        opacity: 0;
        width: 100% !important;
        transform: translate3d(0, 0, 0);
        transition: transform 1s, opacity 1s;
        filter: blur(2px);
    }

    .slider-nav .slick-slide img {
        transform: rotate(180deg);
        transform-origin: 50% 50%;
    }

    .slick-custom-arrow img {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: rotate(180deg) translate(50%, 50%);
    }

    .slick-snext,
    .slick-sprev,
    .slick-snext2,
    .slick-sprev2,
    .slick-snext3,
    .slick-sprev3,
    .slick-snext4,
    .slick-sprev4 {
        display: block;
    }

    .slider-nav .slick-current {
        opacity: 1;
        position: relative;
        display: block;
        z-index: 2;
        filter: blur(0px);
    }

    .slick-snext {
        opacity: 1 !important;
        transform: translate3d(20%, 0, -8px) !important;
        z-index: 1;
        perspective: 1000px;
    }

    .slick-snext2 {
        opacity: 1 !important;
        transform: translate3d(40%, 0, -16px) !important;
        z-index: 0;
        perspective: 1000px;
    }

    .slick-snext3 {
        opacity: 1 !important;
        transform: translate3d(60%, 0, -24px) !important;
        z-index: -1;
        perspective: 1000px;
    }

    .slick-snext4 {
        opacity: 1 !important;
        transform: translate3d(80%, 0, -32px) !important;
        z-index: -2;
        perspective: 1000px;
    }

    .slick-sprev {
        opacity: 1 !important;
        transform: translate3d(-20%, 0, -16px) !important;
    }

    .slick-sprev2 {
        opacity: 1 !important;
        transform: translate3d(-40%, 0, -16px) !important;
    }

    .slick-sprev3 {
        opacity: 1 !important;
        transform: translate3d(-60%, 0, -24px) !important;
    }

    .slick-sprev4 {
        opacity: 1 !important;
        transform: translate3d(-80%, 0, -32px) !important;
    }

    .explore {
        height: 500px;
        align-items: center;
    }

    .explore .slick-arrow {
        bottom: 0;
        left: 0;
    }

    .explore .slick-next {
        bottom: 0;
        left: 55px;
    }

    .left-slider {
        transform: translateX(-6%);
        padding-left: 15px;
    }

    .right-slider {
        transform: translateX(6%);
    }

    .slider-nav {
        transform: rotate(180deg);
    }
} */

@media screen and (max-width: 1440px) {
    .slick-snext4 {
        transform: translate3d(83%, 0, -32px) !important;
    }

    .announcement-outer {
        padding: 0 15px;
    }

    .announcement-box .announcement-text {
        /* width: 92%; */
    }
}

@media screen and (max-width: 1300px) {
    .banner-content h1 {
        font-size: 44px;
        padding-bottom: 50px;
    }

    .hero .item {
        padding: 60px 0 0 50px;
    }

    /* For banner images  */
    .scroll-to-bottom {
        bottom: 12px;
    }

    .mobile-image {
        max-width: 290px;
        margin: 0 auto;
    }

    .mobile-footer-nav {
        bottom: -5px;
        right: -60px;
        width: 400px;
    }

    .phyll {
        position: absolute;
        bottom: 132px;
        left: -20px;
        width: 140px;
    }

    .mobile-image-wrapper {
        max-width: 420px;
        margin: 15px auto 0px;
    }

    .leaderboard {
        right: -26px;
        top: 10px;
        width: 240px;
    }

    .challenge {
        left: 5px;
        bottom: 180px;
        transform: none;
        width: 100px;
    }

    .reward {
        bottom: -6px;
        left: 0px;
        width: 280px;
    }

    .position {
        right: -20px;
        bottom: 145px;
        width: 240px;
    }

    .hero .slick-custom-arrow,
    .hero .slick-arrow {
        left: 50px;
        bottom: 110px;
    }

    .hero .slick-custom-arrow-right,
    .hero .slick-next.slick-arrow {
        left: 105px;
    }

    .explore-bg-image1 {
        height: 200px;
        width: 180px;
    }

    .explore-bg-image3 {
        left: 1%;
    }

    .explore-bg-image2 {
        width: 209px;
        height: 245px;
        bottom: -5px;
    }

}

@media screen and (max-width: 1200px) {
    .video-box {
        max-width: 1000px;
    }

    .video-wrapper.section-padding::before {
        right: 2%;
    }

    .video-box::after {
        right: 0;
        width: 130px;
        height: 120px;
    }

}

@media screen and (max-width: 1150px) {
    .announcement-box .announcement-text {
        /* width: 91%; */
    }
}

@media screen and (max-width: 1025px) {
    .hero .item {
        padding: 30px 0 0 20px;
    }

    .banner-content h1 {
        font-size: 34px;
    }

    .mobile-image {
        max-width: 240px;
        margin: 0 auto;
    }

    .mobile-nav {
        width: 280px;
    }

    .mobile-footer-nav {
        bottom: 0;
        right: -50px;
        width: 330px;
    }

    .phyll {
        position: absolute;
        bottom: 110px;
        left: -10px;
        width: 120px;
    }

    .event-date {
        margin: 10px auto 25px;
    }

    .mobile-image-wrapper {
        max-width: 320px;
        margin: 20px auto 40px;
    }

    .leaderboard {
        right: -10px;
        top: 0;
        width: 180px;
    }

    .challenge {
        left: 10px;
        bottom: 155px;
        transform: none;
        width: 70px;
    }

    .reward {
        bottom: -6px;
        left: 0px;
        width: 216px;
    }

    .position {
        right: -10px;
        bottom: 120px;
        width: 178px;
    }

    .hero .slick-custom-arrow,
    .hero .slick-arrow {
        left: 20px;
        bottom: 40px;
    }

    .hero .slick-custom-arrow-right,
    .hero .slick-next.slick-arrow {
        left: 75px;
    }

    .scroll-to-bottom {
        bottom: 8px;
    }

    .announcement-box .announcement-text {
        /* width: 90%; */
    }

    .announcement-images {
        width: 140px;
        left: 0px;
    }
}

/* 991 */
@media screen and (max-width: 991px) {
    .wrapper {
        padding-top: 90px;
    }

    .header-section,
    .header-section.sticky-header {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: auto;
        min-height: 92px;
        ;
        z-index: 999;
        background: #fff;
        transition: .2s ease;
        box-shadow: -2px -3px 5px #000;
    }

    .download-banner::before {
        width: 200px;
        height: 180px;
    }

    .download-banner::after {
        width: 450px;
        height: 380px;
    }

    .navbar-collapse {
        position: absolute;
        top: 100%;
        width: 100%;
        left: 0;
        background-color: #ffffff;
        box-shadow: 0px 3px 8px rgb(0 0 0 / 30%);
    }

    .header-section .nav-link:hover:after,
    .header-section .nav-item.active .nav-link:after {
        display: none;
    }

    .navbar-nav {
        padding: 15px 8px;
    }

    .copyright>.d-flex:first-child {
        display: block !important;
        text-align: center;
    }

    .copyright>.d-flex>.d-flex {
        justify-content: center !important;
    }

    .needHelp-box {
        width: 300px;
        margin: 0 auto 20px;
    }

    ul.d-flex.align-items-start.store-links li a {
        height: 50px;
        width: 150px;
    }

    .store-links li a {
        width: 150px;
        height: 45px;
    }

    .banner-content ul {
        padding: 30px 0;
    }

    .explore>div {
        padding: 0 15px 50px;
    }

    .right-slider,
    .left-slider {
        transform: none;
    }

    .video-wrap {
        max-width: 650px;
    }

    .inner-header:after {
        width: 350px;
        height: 100%;
    }

    .inner-header::before {
        right: 8%;
        width: 250px;
        height: 170px;
    }

    .inner-header .container::after {
        width: 130px;
        height: 90px;
    }

    .announcement-box .announcement-text {
        /* width: 89%;
        padding: 15px 50px 15px 60px; */
    }

    .announcement-box .announcement-text p {
        font-size: 14px;
        line-height: 18px;
    }

    .about-phyll img {
        width: 150px;
    }
}

/* 767 */
@media screen and (max-width: 767px) {
    .hero-banner .container {
        padding: 0;
    }

    body {
        font-size: 14px;
    }

    h3 {
        font-size: 28px;
    }

    h5 {
        font-size: 18px;
    }

    h6 {
        font-size: 18px;
    }

    .medium-font {
        font-size: 15px;
        line-height: 20px;
    }

    .section-padding {
        padding: 40px 0 0;
    }

    .wrapper .inner-page-padding {
        padding: 40px 0;
    }

    .video-wrapper {
        height: auto;
    }

    .common-padding {
        padding: 15px 0 25px;
    }

    .btn {
        padding: 10px 30px;
        font-size: 14px;
        line-height: 14px;
    }

    .slick-custom-arrow {
        height: 30px;
        width: 30px;
        line-height: 30px;
        font-size: 20px;
    }

    .navbar-brand {
        max-width: 70px;
        margin-bottom: 5px;
    }

    .hero .slick-custom-arrow,
    .hero .slick-arrow {
        left: 15px;
        bottom: -20px;
    }

    .hero .slick-custom-arrow-right,
    .hero .slick-next.slick-arrow {
        left: auto;
        right: 15px;
    }

    .hero-banner {
        margin-top: 0px;
    }

    .hero-wrap {
        background-image: none;
        background-color: rgb(22 112 0 / 5%);
        padding-bottom: 50px;
    }

    .hero .item {
        display: block !important;
        padding: 20px 15px 0;
    }

    .hero .item>div {
        width: 100%;
    }

    .banner-content h1 {
        font-size: 30px;
    }

    .banner-content h1:after {
        bottom: 20px;
        left: 50%;
        transform: translate(-50%);
    }

    .banner-content ul {
        padding: 25px 0 30px;
    }

    .banner-content .btn {
        margin-bottom: 15px;
    }

    .scroll-to-bottom {
        display: none;
    }

    .events.row .col-12 {
        margin-bottom: 80px;
    }

    .events.row .col-12:last-child {
        margin-bottom: 40px;
    }

    .video-wrapper {
        padding: 40px 0 100px;
    }

    .video-wrap {
        margin: -100px auto 0;
        height: auto;
        max-width: 440px;
    }

    .explore {
        display: block !important;
        height: 100%;
    }

    .explore>div {
        width: 100%;
    }

    .right-slider {
        transform: none;
        padding: 60px 15px 30px;
    }

    .left-slider {
        transform: none;
        padding: 0 15px;
    }

    .right-slider .item-nav>div p {
        padding-bottom: 0;
    }

    .explore .slick-arrow {
        bottom: -50px;
        /* left: 50%; */
    }

    .explore .slick-next {
        bottom: -50px;
        right: 0;
        left: auto;
    }

    .explore .slick-dots {
        top: auto;
        left: 0;
        transform: none;
        width: 100%;
        margin: 0 auto;
        right: 0;
        text-align: center;
    }

    .wrapper .explore-outer {
        padding-bottom: 150px;
    }

    .explore-bg-image3 {
        width: 145px;
        height: 142px
    }

    .explore-bg-image2 {
        width: 130px;
        height: 150px;
        bottom: 0px;
    }

    .explore .slick-slide img {
        max-width: 180px;
    }

    .right-slider .item-nav>div {
        margin: auto;
    }

    .right-slider .item-nav>div {
        text-align: center;
    }

    .about-content {
        margin: 0 auto 40px;
        text-align: center;
    }

    .about-images {
        max-width: 380px;
        margin: 0 auto;
    }

    .park-gallery {
        margin-top: 20px;
    }

    .about-phyll {
        top: 26%;
        width: 120px;
        width: 200px;
    }

    .park-gallery a {
        margin-bottom: 15px;
    }

    .download-section {
        padding: 25px 0 40px;
    }

    .footer-row,
    .footer-links {
        justify-content: center !important;
    }

    .footer-row {
        padding: 20px 0;
    }

    .footer-logo {
        max-width: 70px;
    }

    .footer-row .col-12 {
        text-align: center;
        margin-bottom: 20px;
    }

    .footer-row .col-12:last-child {
        margin-bottom: 0;
    }

    .copyright>.d-flex:first-child {
        display: block !important;
    }

    .copyright>.d-flex:first-child>p {
        margin-bottom: 6px;
    }

    .inner-header .bg-image1 {
        zoom: .3;
    }

    .inner-header .bg-image2 {
        zoom: .4;
        right: 0;
    }

    .inner-header .bg-image3 {
        zoom: .6;
        bottom: -45px;
        right: 0;
    }

    .inner-header {
        min-height: 250px;
    }

    .innerHeader-content h3 {
        padding-bottom: 45px;
    }

    .needHelp-wrap {
        display: block !important;
    }

    .bg-image1 {
        zoom: .4;
    }

    .bg-image2 {
        zoom: .6;
        right: 0;
    }

    .bg-image3 {
        right: 0;
        zoom: .8;
    }

    .modal-content {
        padding: 40px 0 20px;
    }

    .modal-content h3 {
        font-size: 24px;
    }

    .modal-content .bg-image1 {
        zoom: .4;
    }

    .modal-content .bg-image2 {
        zoom: .5;
    }

    button.close {
        position: absolute;
        right: 20px;
        top: 15px;
    }

    .modal-btns .btn {
        padding: 13px 20px;
        margin: 0 4px;
        font-size: 13px;
    }

    .sidebar-wrapper {
        width: 100%;
    }

    .dropdown-box {
        position: relative;
    }

    .dropdown-box>a {
        font-size: 14px;
        text-align: left;
        display: block;
        padding: 15px 20px;
        width: 100%;
        background-color: #ffffff;
        border: 1px solid #aaa;
        margin-bottom: 20px;
        border-radius: 5px;
    }

    .dropdown-box a i {
        position: absolute;
        right: 12px;
        font-size: 25px;
        top: 50%;
        transform: translate(-50%, -50%);
    }

    .sidebar-wrapper {
        width: 100%;
        height: 0;
        padding: 0;
        position: absolute;
        background: #D0E2CC;
        left: 0;
        top: 50px;
        opacity: 0;
        margin-right: 0;
        /* transition: .2s ease; */
        z-index: -1;
    }

    .sidebar-wrapper .sidebar {
        height: 0;
        padding: 0 0;
        min-height: auto;
    }

    .sidebar-wrapper .side-link {
        padding: 8px 6px;
        margin-bottom: 10px;
    }

    .sidebar {
        background-color: #D0E2CC;
        background-image: none;
    }

    .sidebar-wrapper .sidebar a:last-child {
        margin-bottom: 0;
    }

    .sidebar-wrapper.active {
        width: 100%;
        height: 300px;
        overflow: auto;
        opacity: 1;
        transition: .3s ease;
        z-index: 1;
    }

    .sidebar-wrapper.active::-webkit-scrollbar {
        -webkit-appearance: none;
    }

    .sidebar-wrapper.active::-webkit-scrollbar:vertical {
        width: 0;
    }

    .sidebar-wrapper.active::-webkit-scrollbar:horizontal {
        height: 0;
    }

    .sidebar-wrapper.active::-webkit-scrollbar-thumb {
        border-radius: 2px;
        background: #fff;
    }

    .sidebar-wrapper.active::-moz-scrollbar-track {
        border-radius: 10px;
        background-color: #ffffff;
    }

    .sidebar-wrapper.active::-moz-scrollbar {
        -webkit-appearance: none;
    }

    .sidebar-wrapper.active .sidebar {
        height: auto;
        padding: 30px 15px;
        background-color: #D0E2CC;
    }

    .sidebar::before,
    .sidebar::after,
    .dropdown-content:after {
        display: none;
    }

    .slick-initialized .slick-slide {
        text-align: center;
    }

    .slider-nav {
        transform: rotate(0deg);
    }

    .slick-dots {
        top: auto;
        bottom: -40px;
    }

    .main-content {
        width: 100%;
    }

    .second-box>div {
        display: block !important;
    }

    .close-btn {
        position: absolute;
        right: 0;
        top: 10px;
        z-index: 9;
        height: 40px;
        width: 40px;
        font-size: 25px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    #videoModal .video-container {
        height: 350px;
    }

    #videoModal .modal-content {
        max-width: 500px;
        margin: auto;
    }

    #signup {
        margin: 0px 0 100px;
    }

    .field-agree1 {
        top: 40px;
    }

    .aboutpage-content {
        padding-bottom: 40px;
    }

    .forgot-section {
        min-height: auto;
        padding-bottom: 40px;
    }

    .announcement-outer {
        margin-bottom: 15px;
    }

    .announcement-box .announcement-text {
        /* width: 89%; */
    }

    .announcement-images {
        width: 120px;
    }

    .about-phyll img {
        width: 120px;
    }

    .download-banner {
        opacity: .9;
    }

    .download-banner p {
        color: #3A3937;
    }

    .store-links {
        justify-content: center;
    }

    .banner-image {
        padding-right: 0;
    }

    .download-banner::after {
        width: 340px;
        height: 100%;
    }

    .download-banner {
        min-height: 285px;
    }
}

/* 620 */
@media screen and (max-width: 620px) {
    .text-group {
        display: block !important;
        margin: 0;
    }

    .text-group>div {
        padding: 0;
        width: 100%;
    }

    .inner-header:after {
        width: 300px;
        height: 100%;
    }

    .inner-header::before {
        right: 1%;
        width: 210px;
        height: 150px;
    }

    .inner-header .container::after {
        right: 8%;
    }

    .field-agree1 {
        top: 45px;
    }

    .download-banner::before {
        width: 135px;
        height: 120px;
    }

    .announcement-box .announcement-text {
        /* width: 88%;
        padding: 15px 50px 15px 55px; */
    }

    .announcement-images {
        width: 110px;
        top: 10px;
        left: -15px;
    }

    .custom-control-label::before,
    .custom-control-label::after {
        width: 20px;
        height: 20px;
    }

    .custom-radio .custom-control-input:checked~.custom-control-label::after {
        top: 45%;
        left: -41px;
        width: 12px;
        height: 12px;
    }

    .modal-dialog {
        max-width: 550px;
    }
}

/* 475 */
@media screen and (max-width: 475px) {
    .video-box {
        max-width: 100%;
        margin: 0 20px;
    }

    .inner-header:after {
        width: 160px;
    }

    .inner-header::before {
        width: 182px;
        height: 100px;
    }

    .announcement-images {
        display: none;
    }

    .announcement-box .announcement-text {
        /* width: 100%;
        padding: 15px 45px 15px 25px; */
    }

    .explore-bg-image1 {
        height: 160px;
        width: 130px;
    }

    .announcement-box .announcement-text p {
        font-size: 12px;
        line-height: 16px;
    }
}

/* 375 */
@media screen and (max-width: 375px) {
    .g-recaptcha>div {
        width: 250px;
    }

    .download-banner::after {
        width: 370px;
        left: -90px;
    }

    .store-links li a {
        width: 130px;
        height: 45px;
    }

    .download-banner {
        display: inline-block;
    }

    .img-content {
        height: 85px;
        width: 120px;
    }

    .no-results-found .search-inner-box .txt h5 {
        font-size: 18px;
        line-height: 24px;
    }

    .forgot-section{
        display: flex;
    }
}