/*////////////////////////////////////////////////////// Responsive CSS Structure //////////////////////////////////////////////////////*/

@media (min-width: 1400px) {
    .container {max-width: 1370px;}
}

@media (min-width: 1300px) and (max-width: 1399px) {
    /* About Start */
    .about-main {top: 70px;}
    /* About End */

    /* Tokenomics Start */
    .kandil {max-width: 170px;}
    /* Tokenomics End */

    /* Roadmap Start */
    .block-2 { margin: 20px 0 0 170px; }
    .block-3 { margin: 40px 0 0 0; }
    .block-2, .block-3 {max-width: 218px;}
    /* Roadmap End */
}

@media (min-width: 1200px) and (max-width: 1299px) {
    /* About Start */
    .about-main {top: 70px;}
    /* About End */

    /* Tokenomics Start */
    .kandil {max-width: 140px;}
    /* Tokenomics End */

    /* Roadmap Start */
    .block-2 { margin: 20px 0 0 170px; }
    .block-3 { margin: 40px 0 0 0; }
    .block-2, .block-3 {max-width: 218px;}
    /* Roadmap End */
}

@media (min-width: 992px) and (max-width: 1199px) {
    /* Common Style Start */
    .banner-title { font-size: 125.81px; }
    .section-title { font-size: 62px; }
    /* Common Style End */
    
    /* Banner Start */
    .banner-main {top: 130px;}
    .banner-text { margin: -40px 0 30px; }
    .panda-images img {max-width: 350px;}
    .banner-logos {bottom: 20px;}
    .banner-logos ul {flex-direction: column;}
    .banner-logos ul li {padding: 0 0 15px 0;}
    .banner-logos ul li:last-child {padding-bottom: 0;}
    /* Banner End */

    /* About Start */
    .about-main {top: 50px;}
    .about-left { margin: 0 0 0 30px; }
    /* About End */

    /* Tokenomics Start */
    .tokenomics-wrp { padding: 165px 0 180px; }
    .cloud-2 {max-width: 250px; top: 60px; }
    .cloud-1 {max-width: 210px; bottom: 212px;}
    .kandil {max-width: 110px;}
    /* Tokenomics End */

    /* Roadmap Start */
    .roadmap-top {top: -120px;}
    .roadmap-block .section-title {line-height: 62px;}
    .block-1 {margin: 0 0 -80px;}
    .roadmap-content, .block-2, .block-3 { max-width: 180px; }
    .roadmap-icon { width: 70px; height: 70px; }
    .block-2 { margin: 20px 0 0 170px; }
    .block-3 { margin: 40px 0 0 0; }
    .block-2, .block-3 {max-width: 218px;}
    .roadmap-main {left: 70px; right: 0; bottom: 10px;}
    /* Roadmap End */

    /* Footer Start */
    .footer-main { margin: 0 0 -61px; }
    /* Footer End */
}

@media (min-width: 768px) and (max-width: 991px) {
    /* Common Style Start */
    .banner-title { font-size: 125.81px; }
    .section-title { font-size: 50px; }
    /* Common Style End */
    
    /* Banner Start */
    .banner-main {top: 130px;}
    .banner-text { margin: -40px 0 30px; }
    .panda-images img {max-width: 250px;}
    .banner-logos {bottom: 20px;}
    .banner-logos ul {flex-direction: column;}
    .banner-logos ul li {padding: 0 0 15px 0;}
    .banner-logos ul li:last-child {padding-bottom: 0;}
    .banner-img img {height: 600px;}
    /* Banner End */

    /* About Start */
    .about-main {top: 30px;}
    .about-left { margin: 0; max-width: 370px; }
    .about-img img {height: 460px;}
    /* About End */

    /* Tokenomics Start */
    .tokenomics-wrp { padding: 165px 0 160px; }
    .total-supply h3, .total-supply ul li {font-size: 28px;}
    .total-supply span {font-size: 28px;}
    .tokenomics-img {margin-right: 0;}
    .tokenomics-right { padding: 0; }
    .total-supply ul li::before {width: 32px; height: 32px; border-width: 6px;}
    .total-supply ul li {padding: 0 0 0 50px;}
    .total-supply ul { margin: 15px 0 25px; }
    .tokenomics-main .copytext span, .tokenomics-main .copytext p { font-size: 24px; }
    .cloud-2 {max-width: 150px; top: 0; }
    .cloud-1 {max-width: 170px; bottom: 200px;}
    .kandil {max-width: 110px; top: -40px; left: 15px; }
    /* Tokenomics End */

    /* Roadmap Start */
    .roadmap-top {top: -90px;}
    .roadmap-img img {height: 370px; object-position: bottom;}
    .roadmap-block .section-title {line-height: 50px; text-align: center;}
    .roadmap-content, .block-2, .block-3 { max-width: 100%; }
    .roadmap-icon { width: 70px; height: 70px; }
    .block-2 { margin: 0; }
    .block-3 { margin: 0; }
    .block-2, .block-3 {max-width: 100%;}
    .roadmap-main {left: 0; right: 0; bottom: 0; position: relative; margin: 80px 0 0;}
    .roadmap-wrp {display: flex; flex-direction: column-reverse; background-color: transparent;}
    .roadmap-block-bottom {padding: 0; opacity: 0;}
    .roadmap-block-bottom.slick-initialized {opacity: 1;}
    .roadmap-section {max-width: 350px; width: 100%; margin: 0 auto;}
    .roadmap-block {padding: 0 15px;}
    /* Roadmap End */

    /* Footer Start */
    .footer-main { margin: 0 0 -50px; }
    .copyright {bottom: 15px;}
    /* Footer End */
}

@media (max-height: 700px) {
    .banner-img img {height: auto;}
}

@media (max-width: 767px) {
    /* Common Style Start */
    .container {padding: 0 20px;}
    .banner-title { font-size: 60px; line-height: 70px; }
    .section-title {line-height: 70px;}
    .btn {padding: 12px 30px;}
    body {font-size: 20px; line-height: 30px;}
    /* Common Style End */

    /* Header Start */
    .header .navbar-brand {max-width: 118px;}
    /* Header End */

    /* Banner Start */
    .banner-wrp {overflow: hidden; padding: 0;}
    .banner-content .banner-title {margin: 0 0 7px;}
    .banner-main {top: 158px;}
    .banner-text { margin: 0 0 28px; }
    .banner-text p { font-size: 25px; line-height: 25px; }
    .panda-images img {max-width: 166px;}
    .banner-logos {bottom: 30px;}
    .banner-logos ul {flex-direction: column;}
    .banner-logos ul li {padding: 0 0 15px 0;}
    .banner-logos ul li:last-child {padding-bottom: 0;}
    .banner-img img {height: 656px;}
    .social-media ul li a {width: 26px; height: 26px; padding: 5px;}
    .social-media ul li {padding: 3px; margin: 0 4px 0 0;}
    .banner-btns {margin: 0 0 34px;}
    .copytext span { font-size: 20px; line-height: 20px; }
    .copytext p {font-size: 20px; line-height: 20px; padding: 0 27px 0 9px;}
    .panda-images {left: -14px; right: -14px;}
    .banner-logos ul li:first-child img {max-width: 118px;}
    .banner-logos ul li:nth-child(2) img {max-width: 79px;}
    .banner-logos ul li:last-child img {max-width: 89px;}
    /* Banner End */

    /* About Start */
    .about-wrp {padding: 70px 0 0; display: flex; flex-direction: column-reverse;}
    .about-main {top: 0; position: relative;}
    .about-left .section-title {margin: 0 0 20px;}
    .about-left { margin: 0 auto; max-width: 370px; text-align: center; }
    .about-img img {height: 281px; object-fit: cover; object-position: right;}
    /* About End */

    /* Tokenomics Start */
    .tokenomics-wrp { padding: 55px 0 30px; }
    .tokenomics-section .row {flex-direction: column-reverse;}
    .total-supply h3 {font-size: 35px; line-height: 35px; margin: 0 0 18px; }
    .total-supply span {font-size: 32px; line-height: 32px;}
    .tokenomics-img {margin-right: 0;}
    .tokenomics-right { padding: 0 0 0 19px; margin: -45px 0 30px; }
    /* .total-supply ul li::before {width: 32px; height: 32px; border-width: 6px;} */
    .total-supply ul li { font-size: 32px; margin: 0 0 20px; }
    .total-supply ul { margin: 20px 0 30px; }
    .total-supply ul li::before {top: 3px;}
    .total-supply ul li:last-child:before {background-color: var(--yellow);}
    .tokenomics-main .copytext span, .tokenomics-main .copytext p { font-size: 20px; }
    .tokenomics-main .copytext p { padding: 0 27px 0 9px; }
    .tokenomics-right .section-title {margin: 0 0 20px;}
    .tokenomics-section { margin: 0 0 72px; }
    .cloud-2 {max-width: 215px; top: 0; margin: 202px 0 0; right: -46px;}
    .cloud-2 img {height: 75px;}
    .cloud-1 {max-width: 236px; bottom: 75px;}
    .kandil { position: relative; max-width: 145px; top: 0; left: -10px; }
    /* Tokenomics End */

    /* Roadmap Start */
    .roadmap-top {top: 0;}
    .roadmap-img {margin: -86px 0 0;}
    .roadmap-block .section-title {line-height: 150%; text-align: center;}
    .roadmap-content, .block-2, .block-3 { max-width: 100%; }
    .block-2 { margin: 0; }
    .block-3 { margin: 0; }
    .block-2, .block-3 {max-width: 100%;}
    .roadmap-main {left: 0; right: 0; bottom: 0; position: relative; margin: 175px 0 0;}
    .roadmap-wrp {display: flex; flex-direction: column-reverse; background-color: transparent;}
    .roadmap-block-bottom {padding: 0; opacity: 0; margin: 0 -15px;}
    .roadmap-block-bottom.slick-initialized {opacity: 1;}
    .roadmap-section {max-width: 286px; width: 100%; margin: 0 auto;}
    .roadmap-block {padding: 0 15px;}
    .roadmap-block .common-detail {font-size: 22px; line-height: 150%;}
    /* Roadmap End */

    /* Footer Start */
    .footer {padding: 80px 0 0;}
    .footer-main { margin: 0; }
    .copyright {bottom: 27px;}
    .footer-section .common-detail { font-size: 22px; line-height: 150%; margin: 0 0 30px; }
    .copyright p { font-size: 18px; line-height: 18px; }
    .footer-section .social-media ul li { padding: 6px; margin: 0 16px 0 0; }
    .footer-section .social-media ul li a { width: 42px; height: 42px; padding: 6px; }
    /* Footer End */
}

/*---------- Small Mobile , IPhone Start ----------*/

/*=== Screen Size = 240, 320, 360, 480, 568 ===*/
@media (min-width: 576px) and (max-width: 767px){
}

@media (max-width: 400px) {
    /* Common Style Start */
    .section-title { font-size: 50px; line-height: 50px;}
    .btn { padding: 12px 15px; }
    /* Common Style End */

    /* Banner Start */
    .panda-images img { max-width: 110px; }
    .copytext {flex-wrap: wrap;}    
    .copytext span { font-size: 18px; line-height: 18px; }
    .copytext p { font-size: 18px; line-height: 18px; }
    /* Banner End */

    /* Tokenomics Start */
    .total-supply h3 { font-size: 28px; line-height: 28px; }
    .total-supply span { font-size: 26px; line-height: 26px; }
    .total-supply ul li { font-size: 26px; padding: 0 0 0 40px; }
    .total-supply ul li::before { width: 25px; height: 25px; border-width: 4px;  }
    .cloud-1 { max-width: 176px; bottom: 105px; }
    /* Tokenomics End */

    /* Roadmap Start */
    .roadmap-main {margin: 130px 0 0;}
    /* Roadmap End */

    /* Footer Start */
    .copyright p { font-size: 16px; line-height: 16px; } 
    .copyright { bottom: 20px; }
    /* Footer End */
}