/* =============================================================================

[Table of contents]

0.0 Common CSS START 
1.0 HEADER AREA START 
2.0 BANNER AREA START
3.0 FEATURE AREA START
4.0 ABOUT AREA START
5.0 GALLERY AREA START
6.0 PRODUCT AREA START
7.0 TEAM AREA START
8.0 PRICE AREA START
9.0 REVIEW AREA START
10.0 CONTACT AREA START 
11.0 BLOG AREA START 
12.0 SUBSCRIBE AREA START 
13.0 FOOTER AREA START 
14.0 COPY_RIGHT AREA START 
 
/*===========================
0.0 *** Common CSS START ***
=============================*/
* {
    margin: 0;
    padding: 0;
    outline: 0;
}

ul,
ol {
    list-style-type: none;
}

a,
a:focus,
a:hover {
    text-decoration: none;
    outline: 0;
}

img {
    overflow: hidden;
    border: 0;
    vertical-align: middle;
}

.zindex {
    position: relative;
    z-index: 999;
}

.clr {
    clear: both;
}

.vbox-overlay {
    z-index: 999999;
}

h1,
h2,
h3,
h4,
h5,
h6,
p,
ul,
ol {
    margin: 0;
    padding: 0;
}

p {
    line-height: 26px;
}

#dark-mode {
    background: #121212;
    overflow-x: hidden;
    position: relative;
    height: 100%;
}

@font-face {
    src: url(../fonts/Poppins-Bold.ttf);
    font-family: pb;
}

@font-face {
    src: url(../fonts/Poppins-Regular.ttf);
    font-family: pr;
}

@font-face {
    src: url(../fonts/Poppins-Light.ttf);
    font-family: pl;
}

/* model */
.modal-content {
    background: #121212;
}

.modal-title {
    font-size: 26px;
    color: white;
    font-family: pb;
}

.modal-header {
    border-bottom: 1px dashed #222;
    background-color: #ff7657;
}

.modal-body {
    padding: 42px 30px 30px;
}

.dropboxx {
    background: #151515;
}

.dropboxx,
.dropboxx2 {
    padding: 12px 20px;
    font-size: 17px;
    color: white;
    border: none;
    border-radius: 3px;
    font-family: pb;
}

.dropboxx:focus,
.dropboxx2:focus {
    outline: 0;

}

.dropboxx2 {
    background: #ff7657;
}

.close {
    color: white;
}

.close:hover,
.close:focus {
    color: #fff;
    outline: 0;
}

.modal-footer {
    border-top: 1px dashed #222;
    padding: 25px;
}


/* preloader */
.preloader {
    position: fixed;
    width: 100%;
    height: 100%;
    background: #161616;
    z-index: 9999999;
    top: 0;
    left: 0;
}

.frame {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 400px;
    height: 400px;
    margin-top: -200px;
    margin-left: -200px;
    border-radius: 2px;
    background: #161616;
    color: #fff;
}

.center {
    position: absolute;
    width: 220px;
    height: 220px;
    top: 90px;
    left: 90px;
}

.dot-1 {
    position: absolute;
    z-index: 3;
    width: 30px;
    height: 30px;
    top: 95px;
    left: 95px;
    background: #fff;
    border-radius: 50%;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
    -webkit-animation: jump-jump-1 2s cubic-bezier(0.21, 0.98, 0.6, 0.99) infinite alternate;
    animation: jump-jump-1 2s cubic-bezier(0.21, 0.98, 0.6, 0.99) infinite alternate;
}

.dot-2 {
    position: absolute;
    z-index: 2;
    width: 60px;
    height: 60px;
    top: 80px;
    left: 80px;
    background: #fff;
    border-radius: 50%;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
    -webkit-animation: jump-jump-2 2s cubic-bezier(0.21, 0.98, 0.6, 0.99) infinite alternate;
    animation: jump-jump-2 2s cubic-bezier(0.21, 0.98, 0.6, 0.99) infinite alternate;
}

.dot-3 {
    position: absolute;
    z-index: 1;
    width: 90px;
    height: 90px;
    top: 65px;
    left: 65px;
    background: #fff;
    border-radius: 50%;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
    -webkit-animation: jump-jump-3 2s cubic-bezier(0.21, 0.98, 0.6, 0.99) infinite alternate;
    animation: jump-jump-3 2s cubic-bezier(0.21, 0.98, 0.6, 0.99) infinite alternate;
}

@-webkit-keyframes jump-jump-1 {

    0%,
    70% {
        -webkit-box-shadow: 2px 2px 3px 2px rgba(0, 0, 0, 0.2);
        box-shadow: 2px 2px 3px 2px rgba(0, 0, 0, 0.2);
        -webkit-transform: scale(0);
        transform: scale(0);
    }

    100% {
        -webkit-box-shadow: 10px 10px 15px 0 rgba(0, 0, 0, 0.3);
        box-shadow: 10px 10px 15px 0 rgba(0, 0, 0, 0.3);
        -webkit-transform: scale(1);
        transform: scale(1);
    }
}

@keyframes jump-jump-1 {

    0%,
    70% {
        -webkit-box-shadow: 2px 2px 3px 2px rgba(0, 0, 0, 0.2);
        box-shadow: 2px 2px 3px 2px rgba(0, 0, 0, 0.2);
        -webkit-transform: scale(0);
        transform: scale(0);
    }

    100% {
        -webkit-box-shadow: 10px 10px 15px 0 rgba(0, 0, 0, 0.3);
        box-shadow: 10px 10px 15px 0 rgba(0, 0, 0, 0.3);
        -webkit-transform: scale(1);
        transform: scale(1);
    }
}

@-webkit-keyframes jump-jump-2 {

    0%,
    40% {
        -webkit-box-shadow: 2px 2px 3px 2px rgba(0, 0, 0, 0.2);
        box-shadow: 2px 2px 3px 2px rgba(0, 0, 0, 0.2);
        -webkit-transform: scale(0);
        transform: scale(0);
    }

    100% {
        -webkit-box-shadow: 10px 10px 15px 0 rgba(0, 0, 0, 0.3);
        box-shadow: 10px 10px 15px 0 rgba(0, 0, 0, 0.3);
        -webkit-transform: scale(1);
        transform: scale(1);
    }
}

@keyframes jump-jump-2 {

    0%,
    40% {
        -webkit-box-shadow: 2px 2px 3px 2px rgba(0, 0, 0, 0.2);
        box-shadow: 2px 2px 3px 2px rgba(0, 0, 0, 0.2);
        -webkit-transform: scale(0);
        transform: scale(0);
    }

    100% {
        -webkit-box-shadow: 10px 10px 15px 0 rgba(0, 0, 0, 0.3);
        box-shadow: 10px 10px 15px 0 rgba(0, 0, 0, 0.3);
        -webkit-transform: scale(1);
        transform: scale(1);
    }
}

@-webkit-keyframes jump-jump-3 {

    0%,
    10% {
        -webkit-box-shadow: 2px 2px 3px 2px rgba(0, 0, 0, 0.2);
        box-shadow: 2px 2px 3px 2px rgba(0, 0, 0, 0.2);
        -webkit-transform: scale(0);
        transform: scale(0);
    }

    100% {
        -webkit-box-shadow: 10px 10px 15px 0 rgba(0, 0, 0, 0.3);
        box-shadow: 10px 10px 15px 0 rgba(0, 0, 0, 0.3);
        -webkit-transform: scale(1);
        transform: scale(1);
    }
}

@keyframes jump-jump-3 {

    0%,
    10% {
        -webkit-box-shadow: 2px 2px 3px 2px rgba(0, 0, 0, 0.2);
        box-shadow: 2px 2px 3px 2px rgba(0, 0, 0, 0.2);
        -webkit-transform: scale(0);
        transform: scale(0);
    }

    100% {
        -webkit-box-shadow: 10px 10px 15px 0 rgba(0, 0, 0, 0.3);
        box-shadow: 10px 10px 15px 0 rgba(0, 0, 0, 0.3);
        -webkit-transform: scale(1);
        transform: scale(1);
    }
}

/* Back to top */
.backtotop {
    position: fixed;
    right: 25px;
    bottom: 25px;
    z-index: 9999;
    display: none;
}

.backtotop i {
    color: #ff7657;
    text-align: center;
    font-size: 25px;
    line-height: 65px;
    width: 65px;
    height: 65px;
    -webkit-box-shadow: 0 0 7px rgba(46, 59, 125, 0.23);
    box-shadow: 0 0 7px rgba(46, 59, 125, 0.23);
    border-radius: 50%;
    background: #161616;
    -webkit-box-shadow: 0 31px 35px rgba(0, 0, 0, .1);
    box-shadow: 0 31px 35px rgba(0, 0, 0, .1);
}

.backtotop:hover {
    cursor: pointer;
}

/* Version 3 */
.particles-js-canvas-el {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
}

/* Version 4 */
#ckLine {
    display: none;
    position: absolute;
    width: 100%;
    height: 100%;
}

/*===========================
1.0 *** HEADER AREA START ***
=============================*/
.navbar {
    position: fixed;
    width: 100%;
    z-index: 9999;
    -weebkit-transition: all linear .3s;
    -webkit-transition: all linear .3s;
    -o-transition: all linear .3s;
    transition: all linear .3s;
    padding-top: 30px;
    background: transparent !important;
}

.menu-item {
    padding-right: 30px;

}

.navbar-light .navbar-nav .nav-link {
    color: #fff;
    font-family: pr;
    font-size: 17px;
    font-weight: 500;
    -webkit-transition: all linear .3s;
    -o-transition: all linear .3s;
    transition: all linear .3s;
    position: relative;
    margin-right: 18px;
}

.bor {
    background: #161616;
    padding: 10px 25px !important;
    position: relative;
    border-radius: 3px;
    -webkit-transition: all linear .3s;
    -o-transition: all linear .3s;
    transition: all linear .3s;
}

.bor:after {
    position: absolute;
    content: '';
    width: 100%;
    height: 44px;
    top: 7px;
    left: 0;
    background: #212121;
    z-index: -1;
    border-radius: 3px;
    -webkit-transition: all linear .3s;
    -o-transition: all linear .3s;
    transition: all linear .3s;
    -webkit-box-shadow: 0 0 40px rgba(0, 0, 0, .67);
    box-shadow: 0 0 40px rgba(0, 0, 0, .67);
}

.bor:hover:after,
.bor:focus:after {
    top: 0;
}

.bor:focus:after {
    top: 0;
}

.navbar-light .navbar-nav .nav-link:focus {
    color: white;
}

.navbar-light .navbar-nav .nav-link:hover {
    color: #ff7657;
}

.navbar-light .navbar-nav .nav-link.active {
    color: #ff7657;
}

.navbar-light .navbar-brand {
    color: #fff;
    font-family: pb;
    font-size: 26px;
    -webkit-transition: all linear .3s;
    -o-transition: all linear .3s;
    transition: all linear .3s;

}

.navbar-light .navbar-brand b {
    color: #ff7657;
}

.navbar-light .navbar-brand:focus {
    color: #ff7657;
}

.navbar-light .navbar-brand:hover {
    color: #ff7657;
}

.nav-bg {
    background: #161616 !important;
    padding: 25px 0;
    -webkit-box-shadow: 0 31px 35px rgba(0, 0, 0, .1);
    box-shadow: 0 31px 35px rgba(0, 0, 0, .1);
}

.nav-bg .navbar-brand {
    color: #fff;
    font-size: 26px;
    -webkit-transition: all linear .3s;
    -o-transition: all linear .3s;
    transition: all linear .3s;
}

.nav-bg .navbar-brand:hover {
    color: #fff;
}

.nav-bg .bor {
    background: #ff7657;
}

.nav-bg .bor:after {
    background: #db5536;
}

.nav-bg .bor:hover {
    color: white !important;
}

.nav-bg .navbar-nav .nav-link {
    color: #fff;
}

/*===========================
2.0 *** BANNER AREA START ***
=============================*/
#banner {
    padding: 260px 0 100px;
    position: relative;
    width: 100%;
}

#banner::after {
    position: absolute;
    content: '';
    top: 170px;
    right: 80%;
    overflow: hidden;
    width: 800px;
    height: 800px;
    border: 2px solid #ededed;
    display: block;
    border-color: #1d1d1d;
    -webkit-transform: rotate(30deg);
    -ms-transform: rotate(30deg);
    transform: rotate(30deg);
}

#banner::before {
    position: absolute;
    content: '';
    top: -349px;
    right: -300px;
    overflow: hidden;
    width: 800px;
    height: 800px;
    border: 2px solid #ededed;
    display: block;
    border-color: #1d1d1d;
    -webkit-transform: rotate(-60deg);
    -ms-transform: rotate(-60deg);
    transform: rotate(-60deg);
}

.banner-txt h3 {
    font-size: 36px;
    font-family: pb;
    color: #ff7657;
    line-height: 45px;
    padding-bottom: 23px;
    padding-top: 16px;
}

.banner-txt p {
    font-size: 17px;
    color: #787878;
    padding-right: 40px;
    line-height: 26px;
    padding-bottom: 45px;
}

.separate-p {
    padding-bottom: 40px;
}

.banner-txt a {
    padding: 14px 20px;
    background: #ff7657;
    color: white;
    font-family: pb;
    font-size: 18px;
    position: relative;
}

.banner-txt a:hover:after {
    top: 7px;
}

.banner-txt a::after {
    width: 100%;
    height: 100%;
    position: absolute;
    content: '';
    top: 10px;
    left: 0;
    background: #db5536;
    z-index: -1;
    -webkit-transition: all linear .3s;
    -o-transition: all linear .3s;
    transition: all linear .3s;
}

.design-layer {
    position: absolute;
    width: 100%;
    height: 100%;
}

.design-layer::after {
    position: absolute;
    content: '';
    top: 380px;
    right: 0;
    width: 170px;
    height: 140px;
    background: #ff7657;
    z-index: -1;
    -webkit-clip-path: polygon(34% 32%, 64% 46%, 100% 31%, 100% 55%, 65% 70%, 33% 56%, 0 61%, 0 39%);
    clip-path: polygon(34% 32%, 64% 46%, 100% 31%, 100% 55%, 65% 70%, 33% 56%, 0 61%, 0 39%);
    -webkit-box-shadow: 0 31px 35px rgba(0, 0, 0, .1);
    box-shadow: 0 31px 35px rgba(0, 0, 0, .1);
}

.design-layer::before {
    position: absolute;
    content: '';
    top: 430px;
    right: 0;
    width: 170px;
    height: 140px;
    background: #ff7657;
    z-index: -1;
    -webkit-clip-path: polygon(34% 32%, 64% 46%, 100% 31%, 100% 55%, 65% 70%, 33% 56%, 0 61%, 0 39%);
    clip-path: polygon(34% 32%, 64% 46%, 100% 31%, 100% 55%, 65% 70%, 33% 56%, 0 61%, 0 39%);
    -webkit-box-shadow: 0 31px 35px rgba(0, 0, 0, .1);
    box-shadow: 0 31px 35px rgba(0, 0, 0, .1);
}

/*===========================
3.0 *** FEATURE AREA START ***
=============================*/
#overview {
    padding: 80px 0;
}

.over-pa {
    padding-top: 60px;
}

.over-item {
    background: #161616;
    -webkit-box-shadow: 0 31px 35px rgba(0, 0, 0, .1);
    box-shadow: 0 31px 35px rgba(0, 0, 0, .1);
    padding: 35px 31px;
    margin-top: 30px;
}

.unique-style,
.unique-style2 {
    position: relative;
}

.unique-style::after {
    position: absolute;
    content: '';
    top: 50%;
    right: -145px;
    height: 2px;
    width: 190px;
    border: 2px solid #ededed;
    border-color: #1d1d1d;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    z-index: -11;
}

.unique-style::before {
    position: absolute;
    content: '';
    top: 50%;
    right: -152px;
    height: 10px;
    border-radius: 50%;
    width: 10px;
    background: #ff7657;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    z-index: -1;
}

.unique-style2:after {
    position: absolute;
    content: '';
    top: 50%;
    left: -170px;
    height: 2px;
    width: 230px;
    border: 2px solid #ededed;
    border-color: #1d1d1d;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    z-index: -11;
}

.unique-style2:before {
    position: absolute;
    content: '';
    top: 50%;
    left: -171px;
    height: 10px;
    border-radius: 50%;
    width: 10px;
    background: #ff7657;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    z-index: -1;
}

.unique-style3::after {
    position: absolute;
    content: '';
    top: -70px;
    left: 20px;
    height: 230px;
    width: 2px;
    border: 2px solid #ededed;
    border-color: #1d1d1d;
    z-index: -11;
}

.unique-style3::before {
    position: absolute;
    content: '';
    top: -76px;
    left: 16px;
    height: 10px;
    border-radius: 50%;
    width: 10px;
    background: #ff7657;
    z-index: -1;
}

.unique-style4::after {
    position: absolute;
    content: '';
    bottom: -105px;
    right: 20px;
    height: 230px;
    width: 2px;
    border: 2px solid #ededed;
    border-color: #1d1d1d;
    z-index: -11;
}

.unique-style4::before {
    position: absolute;
    content: '';
    bottom: -106px;
    right: 17px;
    height: 10px;
    border-radius: 50%;
    width: 10px;
    background: #ff7657;
    z-index: -1;
}

.header-text h3 {
    font-size: 37px;
    font-family: pb;
    color: white;
    letter-spacing: 10px;
    position: relative;
    display: inline-block;
}

.header-text h3:after {
    position: absolute;
    content: '';
    bottom: 0;
    left: 50%;
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    transform: translateX(-50%);
    width: 240px;
    height: 2px;
    background: #1d1d1d;

}

.header-text h3 span {
    color: #ff7657;
}

.over-i {
    font-size: 27px;
    color: #fff;
    width: 60px;
    height: 60px;
    line-height: 60px;
    border-radius: 50%;
    text-align: center;
    background: #f8615a;
}

.over-item h3 {
    font-size: 24px;
    color: white;
    font-family: pb;
    padding: 20px 0;
    position: relative;
}

.over-item p {
    font-size: 17px;
    color: #787878;
    line-height: 26px;
}

.over-btn {
    padding-top: 15px;
}

.over-btn a {
    color: #ff7657;
    font-size: 17px;
    font-family: pb;
}

over-btn a i {
    padding-right: 5px;
}

.txt-right {
    text-align: right;
}

.txt-right p {
    padding-left: 20px;
}

.txt-left p {
    padding-right: 20px;
}

/*===========================
4.0 *** ABOUT AREA START ***
=============================*/
#about {
    padding: 80px 0;
}

.about-header h3:after {
    width: 192px;
}

.about-img {
    background: #151515;
    -webkit-box-shadow: 0 31px 35px rgba(0, 0, 0, .1);
    box-shadow: 0 31px 35px rgba(0, 0, 0, .1);
    border-radius: 10px;

}

.about-pa {
    padding-top: 25px;
}

.about-item {
    padding-top: 90px;
}

.about-img {
    position: relative;
}

.ai-one::after {
    position: absolute;
    content: '';
    top: 350px;
    left: -65px;
    width: 120px;
    height: 120px;
    border: 25px solid #161616;
    z-index: -1;
    border-radius: 50%;
}

.ai-two::after {
    position: absolute;
    content: '';
    top: 344px;
    right: -55px;
    width: 120px;
    height: 120px;
    border: 25px solid #161616;
    z-index: -1;
    -webkit-transform: rotate(35deg);
    -ms-transform: rotate(35deg);
    transform: rotate(35deg);
}

.ai-three::after {
    position: absolute;
    content: '';
    top: 350px;
    left: -65px;
    width: 120px;
    height: 120px;
    border: 25px solid #161616;
    z-index: -1;
    border-radius: 50%;
}


.about-img img {
    -webkit-filter: grayscale(100%);
    filter: grayscale(100%);
    -webkit-transition: all linear .3s;
    -o-transition: all linear .3s;
    transition: all linear .3s;
}

.about-img:hover img {
    -webkit-filter: grayscale(0);
    filter: grayscale(0);
}

.separet-span {
    font-family: pr;
    font-size: 19px;
    color: #ff7657;
}

.about-txt {
    padding-top: 30px;
}

.about-txt h3 {
    font-family: pb;
    font-size: 26px;
    color: #fff;
    padding-bottom: 16px;
    padding-top: 8px;
}

.about-txt p {
    font-size: 17px;
    color: #787878;
    line-height: 27px;
    padding-bottom: 30px;
}

.separate-p {
    padding-bottom: 50px !important;
}

.about-txt a {
    padding: 14px 20px;
    background: #ff7657;
    color: #fff;
    font-size: 18px;
    font-family: pb;
    position: relative;
}

.about-txt a i {
    padding-left: 8px;
}

.about-txt a::after {
    width: 100%;
    height: 100%;
    position: absolute;
    content: '';
    top: 10px;
    left: 0;
    background: #db5536;
    z-index: -1;
    -webkit-transition: all linear .3s;
    -o-transition: all linear .3s;
    transition: all linear .3s;
}

.about-txt a:hover:after {
    top: 6px;
}

.p-bar span {
    font-size: 18px;
    color: #787878;
}

.p-bars {
    padding-top: 35px;
}

.progress-bar {
    background: #ff7657;
    transition: width 0.5s ease-in-out;
}

.progress {
    background: #151515;
}

.p-bar {
    margin-bottom: 20px;
}

.counter-main {
    padding-top: 50px;
}

.counter-1 h5 {
    font-size: 18px;
    color: #ff7657;
    margin-top: -56px;
    margin-left: 28px;
    padding-bottom: 38px;
}

.counter-1 span {
    font-size: 18px;
    color: #787878;
}

.progress-cycle {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.progress-cycle div {
    margin-left: 28px;
}

.progress-cycle h5 {
    margin-left: 58px;
}

/*===========================
5.0 *** GALLERY AREA START ***
=============================*/
#gallery {
    padding: 80px 0;
}

.gallery-pa {
    padding-top: 80px;
}

.gallery-img img {
    border-radius: 5px;
}

.g-mar {
    margin-top: 25px;
}

.sp-img2 {
    height: 340px;
}

.sp-img {
    height: 320px;
}

/*===========================
6.0 *** PRODUCT AREA START ***
=============================*/
#product {
    padding: 80px 0;
}

.product-pa {
    padding-top: 145px;
    padding-bottom: 110px;
}

.product-item {
    background: #151515;
    -webkit-box-shadow: 0 31px 35px rgba(0, 0, 0, .1);
    box-shadow: 0 31px 35px rgba(0, 0, 0, .1);
    border-radius: 10px;
    padding: 40px 30px;
    position: relative;
}

.product-item img {
    position: absolute;
    top: -100px;
}

.product-txt span {
    color: #ff7657;
    font-family: pr;
    font-size: 18px;
}

.product-txt h3 {
    font-size: 25px;
    font-family: pb;
    color: white;
    padding-top: 6px;
    padding-bottom: 23px;
}

.product-txt p {
    color: #787878;
    font-family: pr;
    padding-bottom: 33px;
}

.next-p {
    padding-right: 17px;
    padding-top: 0;
}

.single-button a {
    padding: 14px 20px;
    background: #ff7657;
    color: #fff;
    font-size: 18px;
    font-family: pb;
}

.product-txt a {
    padding: 14px 20px;
    background: #ff7657;
    color: #fff;
    font-size: 18px;
    font-family: pb;
}

.product-slider {
    background: #151515;
    -webkit-box-shadow: 0 31px 35px rgba(0, 0, 0, .1);
    box-shadow: 0 31px 35px rgba(0, 0, 0, .1);
    border-radius: 4px;
    padding: 30px 0 20px;
}

.pro-img {
    padding: 30px 0;
}

.pro-img img {
    border: 5px solid #ff7657;
    border-radius: 50%;
    display: inline-block;
}

.product-slider h3 {
    font-size: 26px;
    color: white;
    font-family: pb;
    padding-bottom: 6px;
}

.product-slider a {
    color: #ff7657;
}

.stars {
    padding-right: 35px;
}

.stars i {
    color: #fbaa33;
    margin: 0 1px;
}

.product-slider span {
    color: #787878;
    font-family: pr;
}

.border-style {
    border-bottom: 1px dashed #222;
    padding-bottom: 30px;
}

.pro-info {
    padding: 20px 0 0;
}

/*===========================
7.0 *** TEAM AREA START ***
=============================*/
#team {
    padding: 80px 0;
    position: relative;
}

.team-header h3:after {
    width: 164px;
}

#team::after {
    position: absolute;
    content: '';
    top: 380px;
    left: -25px;
    width: 170px;
    height: 140px;
    background: #ff7657;
    z-index: -1;
    -webkit-clip-path: polygon(34% 32%, 64% 46%, 100% 31%, 100% 55%, 65% 70%, 33% 56%, 0 61%, 0 39%);
    clip-path: polygon(34% 32%, 64% 46%, 100% 31%, 100% 55%, 65% 70%, 33% 56%, 0 61%, 0 39%);
    -webkit-box-shadow: 0 31px 35px rgba(0, 0, 0, .1);
    box-shadow: 0 31px 35px rgba(0, 0, 0, .1);
}

#team::before {
    position: absolute;
    content: '';
    top: 430px;
    left: -25px;
    width: 170px;
    height: 140px;
    background: #ff7657;
    z-index: -1;
    -webkit-clip-path: polygon(34% 32%, 64% 46%, 100% 31%, 100% 55%, 65% 70%, 33% 56%, 0 61%, 0 39%);
    clip-path: polygon(34% 32%, 64% 46%, 100% 31%, 100% 55%, 65% 70%, 33% 56%, 0 61%, 0 39%);
    -webkit-box-shadow: 0 31px 35px rgba(0, 0, 0, .1);
    box-shadow: 0 31px 35px rgba(0, 0, 0, .1);
}

.team-pa {
    padding-top: 85px;
}

.team-item img {
    border-radius: 30% 84% 28% 76% / 87% 23% 69% 29%;
    border: 6px solid #ff7657;
    -webkit-filter: grayscale(100%);
    filter: grayscale(100%);
    -webkit-transition: all linear .3s;
    -o-transition: all linear .3s;
    transition: all linear .3s;
}

.team-item:hover img {
    -webkit-filter: grayscale(0);
    filter: grayscale(0);
}

.team-item h3 {
    font-family: pb;
    font-size: 26px;
    color: white;
    padding: 30px 0 14px;
}

.team-item p {
    font-family: pr;
    font-size: 18px;
    color: #787878;
    padding-bottom: 14px;
}

.team-item a {
    font-family: pb;
    font-size: 16px;
    color: #ff7657;

}

.team-btn a {
    padding: 14px 20px;
    background: #ff7657;
    color: #fff;
    font-size: 18px;
    font-family: pb;
    position: relative;
}

/*===========================
8.0 *** FOLLOW AREA START ***
=============================*/
#follow {
    padding: 80px 0;
}

.price-pa {
    padding-top: 80px;
}

.price-table {
    background: #151515;
    -webkit-box-shadow: 0 31px 35px rgba(0, 0, 0, .1);
    box-shadow: 0 31px 35px rgba(0, 0, 0, .1);
    padding: 30px 0 45px;
    border-radius: 4px;
}

.price-table h3 {
    color: white;
    font-family: pb;
    font-size: 18px;
    text-align: center;
    padding-bottom: 30px;
}

.gold {
    color: #ff7657 !important;
}

.gold-bg {
    border: 2px solid #ff7657;
}

.price-table h4 {
    font-size: 40px;
    font-family: pb;
    color: white;
    text-align: center;
    padding-bottom: 30px;
}

.price-table sub {
    font-family: pr;
    color: #ff7657;
    font-size: 16px;
}

.price-table p {
    color: #787878;
    font-family: pr;
    padding-bottom: 15px;
    padding-left: 35px;
}

.price-table p i {
    color: #ff7657;
    font-size: 18px;
    padding-right: 4px;
}

.price-table a {
    padding: 14px 20px;
    font-family: pb;
    font-size: 16px;
    color: #161616;
    background: white;
    text-align: center;
    border-radius: 50px;
    -webkit-transition: all linear .3s;
    -o-transition: all linear .3s;
    transition: all linear .3s;
}

.price-table a:hover {
    background: #ff7657;
    color: white;
}

.price-btn {
    padding-top: 35px;
}

.gold-bg2 a {
    background: #ff7657;
    color: white;
}

/*===========================
9.0 *** PARTNER AREA START ***
=============================*/
#partner {
    padding: 80px 0;
    position: relative;
}

#partner:after {
    position: absolute;
    content: '';
    top: -40px;
    right: -280px;
    width: 800px;
    height: 800px;
    border: 80px solid #161616;
    border-radius: 50%;
    z-index: -1;
    -webkit-box-shadow: 0 25px 60px rgba(0, 0, 0, .67), inset 0 25px 60px rgba(0, 0, 0, .67);
    box-shadow: 0 25px 60px rgba(0, 0, 0, .67), inset 0 25px 60px rgba(0, 0, 0, .67);
}

.review-pa {
    padding-top: 80px;
}

.review-item {
    background: #151515;
    -webkit-box-shadow: 0 31px 35px rgba(0, 0, 0, .1);
    box-shadow: 0 31px 35px rgba(0, 0, 0, .1);
    padding: 40px 0 30px;
    border-radius: 3px;
}

.comment {
    padding: 0 25px 30px;
}

.comment p {
    color: #787878;
    font-family: pr;
    font-size: 17px;
}

.comment p i {
    color: #ff7657;
    font-size: 22px;
    padding: 0 3px;
}

.user {
    padding: 30px 40px 0;
    border-top: 2px dashed #222;
}

.user-img img {
    background: #ff7657;
    border: 2px solid #ff7657;
    border-radius: 50%;
}

.user-txt h3 {
    font-size: 24px;
    font-family: pb;
    color: white;
    padding-bottom: 10px;
}

.user-txt span {
    color: #787878;
}

.star2 i {
    color: #fbaa33;
    margin: 0 4px;
}

/*===========================
10.0 *** CONTACT AREA START ***
=============================*/
#contact {
    padding: 80px 0;
    position: relative;
}

.contact-pa {
    padding-top: 80px;
}

.faq-icon {
    background: #151515;
    border: 1px solid #151515;
}

.faq-icon i {
    color: #ff7657;
}

.contact-icon i {
    color: #ff7657;

}

.form-control:focus {
    -webkit-box-shadow: none;
    box-shadow: none;
}

.zom {
    font-size: 17px;
}

.box-bg {
    background: #151515;
    border: 1px solid #151515;
    color: #fffbfb;
}

.box-bg:focus {
    color: #fff;
    background: #151515;
    border: 1px solid #151515;
}

.info-txt {
    background: #151515;
    border: 1px solid #151515;
    color: #ffffff;
    margin-bottom: 20px;
    font-size: larger;
}

.info-txt.middle-align {
    display: flex;
    justify-content: center;
    align-items: center;
}

.info-txt:focus {
    color: #ffffff;
    background: #151515;
    border: 1px solid #151515;
}

.info-txt div {
    margin-bottom: 10px;
}

.info-txt p, .info-txt h3, .info-txt ul {
    margin-bottom: 1em; /* Adjusts space below each paragraph, heading, and list */
}

.info-txt ul li {
    margin-bottom: 0.5em; /* Adjusts space between list items, if needed */
}

input::-webkit-input-placeholder,
textarea::-webkit-input-placeholder,
input:focus,
input:hover,
input::-moz-placeholder,
textarea::-moz-placeholder,
input:-ms-input-placeholder,
textarea:-ms-input-placeholder {
    color: white !important;
}

.contact-input {
    height: 55px;
    margin-bottom: 29px !important;
}

.form-group {
    margin-bottom: 20px;
}

.con-btn {
    padding: 15px 40px;
    color: white;
    font-family: pb;
    background: #ff7657;
    border-radius: 50px;
    font-size: 18px;
    border: none;
    -webkit-transition: all linear .3s;
    -o-transition: all linear .3s;
    transition: all linear .3s;
}

.con-btn:hover {
    -webkit-box-shadow: none;
    box-shadow: none;
    cursor: pointer;
}

.card-header {
    background: #151515;
    border: 1px solid #151515;
}

.card-body {
    background: #161616;
    color: #ccc;
    padding: 26px 40px;
    line-height: 28px;
    font-family: pr;
}

.card {
    border: none;
}

.btn-link {
    color: #ff7657;
    font-family: pb;
}

.btn-link:hover,
.btn-link:focus {
    text-decoration: none;
    color: #ff7657;
}

input::placeholder,
textarea::placeholder {
    color: white !important;
}

/*===========================
11.0 *** BLOG AREA START ***
=============================*/
#airdrop {
    padding: 80px 0;
}

.blog-header h3:after {
    width: 186px;
}

.blog-pa {
    padding-top: 80px;
}

.tags {
    padding-top: 60px;
}

.tags h4 {
    color: white;
    font-family: pb;
    padding-bottom: 45px;
    font-size: 21px;
}

.tags a {
    padding: 12px 17px;
    background: #151515;
    color: #787878;
    margin-right: 8px;
}

.tag-pa {
    padding-top: 48px;
}

.blog-item-txt h3 {
    color: white;
    font-size: 24px;
    font-family: pb;
    padding: 22px 0 16px;
}

.blog-item-txt p {
    color: #787878;
    padding-bottom: 14px;
}

.blog-item-txt a {
    color: #ff7657;
    font-size: 17px;
    font-family: pb;
    padding-top: 5px;
}

.blog-shadow {
    background: #151515;
    border-radius: 6px;
}

.blog-item-txt {
    padding-left: 23px;
    padding-bottom: 25px;
}

.claim-airdrop {
    margin-top: 20px;
    padding: 30px 0;
    background: #ff7657;
    border-radius: 50px;
    margin-bottom: 20px;
}

.claim-airdrop h3 {
    padding-left: 60px;
    font-size: 26px;
    color: white;
    font-family: pb;
}

.claim-airdrop a {
    background: white;
    padding: 15px 25px;
    border-radius: 50px;
    font-family: pb;
    color: #ff7657;
    font-size: 18px;
}

.check-btn {
    width: 60px;
    background: #ff7657;
    color: white;
    border: 1px solid #ff7657;
}

/*===========================
12.0 *** SUBSCRIBE AREA START ***
=============================*/
#subscribe {
    padding: 30px 0;
    margin-bottom: -70px;
}

.sub-main {
    padding: 30px 0;
    background: #ff7657;
    border-radius: 50px;
}

.sub-main h3 {
    padding-left: 60px;
    font-size: 26px;
    color: white;
    font-family: pb;
}

.sub-main a {
    background: white;
    padding: 15px 25px;
    border-radius: 50px;
    font-family: pb;
    color: #ff7657;
    font-size: 18px;
}

/*===========================
13.0 *** FOOTER AREA START ***
=============================*/

#footer {
    padding: 120px 0 85px;
    background: #151515;
    border-bottom: 1px solid #151515;
    border-top: 2px dashed #222;
}

.footer-logo p {
    color: #787878;
    font-family: pr;
    padding-top: 10px;
    line-height: 29px;
    font-size: 16px;
    padding-bottom: 13px;
}

.footer-social {
    padding-top: 11px;
}

.footer-social i {
    width: 45px;
    height: 45px;
    border: 1px solid #fff;
    line-height: 45px;
    text-align: center;
    border-radius: 50%;
    color: #ff7657;
    background: white;
    font-size: 20px;
    margin-right: 13px;
    -webkit-transition: all linear .3s;
    -o-transition: all linear .3s;
    transition: all linear .3s;
}

.footer-social i:hover {
    background: #ff7657;
    color: #fff;
    border: 1px solid #ff7657;
}

.links h3 {
    font-size: 21px;
    font-family: pb;
    color: #fff;
    font-weight: 600;
    text-transform: capitalize;
    padding-bottom: 4px;
}

.links ul li a {
    color: #787878;
    text-transform: capitalize;
    line-height: 38px;
    font-size: 16px;
    -webkit-transition: all linear .3s;
    -o-transition: all linear .3s;
    transition: all linear .3s;
    font-family: pr;
}

.links ul li a:hover {
    color: #ff7657;
    padding-left: 10px;
}

.location p {
    padding-bottom: 5px;
}

.location a {
    color: #ccc;
    font-size: 15px;
    line-height: 25px;
}


.f-logo {
    font-size: 27px;
    color: #ff7657;
    font-family: pb;
}

.f-logo:hover {
    color: #ff7657;
}

.insta-item {
    color: white;
}

.fg2 input {
    border-radius: 50px;
    background: none;
    color: #fff;
    border: 1px solid #ff416c;
}

.fg2 input:focus {
    background: none;
    border: 1px solid #ff416c;
    position: relative;
    right: 0;
}

.fg2 input:hover {
    border-radius: 50px;
    border: 1px solid #ff416c;
}

.fg2 button i {
    -webkit-transition: all linear .3s;
    -o-transition: all linear .3s;
    transition: all linear .3s;
}

.fg2 button {
    border-radius: 50px;
    position: absolute;
    right: 16px;
    top: 65px;
    border: none;
    background: #ff416c;
    color: #fff;
}

.fg2 button:hover {
    border: none;
    background: #ff416c;
}

.fg2 button:hover i {
    padding-right: 8px;
}

/*===========================
14.0 *** COPY_RIGHT AREA START ***
=============================*/

#footer-btm {
    background: #161616;
    border-top: 2px dashed #222;
    padding: 25px 0;
}

.fop-btm h2 {
    color: #fff;
    font-size: 16px;
    font-family: pr;
    margin-bottom: 0;
}

.fop-btm a {
    color: #ff7657;
    font-family: pb;
}

.video-wrapper {
    position: relative;
    display: inline-block; /* Adjust as per your layout */
}

.video-play-button {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border: none;
    background: transparent;
    cursor: pointer;
    padding: 10px; /* Increase padding for larger button size */
}

.video-play-button i {
    font-size: 4em; /* Larger icon size */
    color: white; /* Icon color */
}

/* Hide the play button when the video is playing */
.video-playing .video-play-button {
    display: none;
}

/* Optional: Style the video tag */
.video-playing video {
    display: block;
}

.video-modal {
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: rgba(0,0,0,0.4);
    overflow: auto;
}

.video-modal-content {
    margin: 15% auto;
    width: 50%;
    background-color: transparent;
}

/* Media query for screens smaller than 768px */
@media screen and (max-width: 768px) {
    .video-modal-content {
        width: 90%;
    }
}

.video-modal-content iframe {
    width: 100%;
    height: auto;
    border: 0;
    aspect-ratio: 16 / 9;
}

.video-modal-close {
    color: #aaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
}

.video-modal-close:hover,
.video-modal-close:focus {
    color: black;
    text-decoration: none;
    cursor: pointer;
}

.error-message {
    color: red;
    margin-top: 5px;
}

.success-message {
    color: green;
    margin-top: 5px;
}

.address-container {
    display: flex;
    align-items: center;
    border: none;
    padding: 20px;
    justify-content: center; /* Centers items horizontally inside the container */
    margin: auto; /* Centers the container itself in the middle of the row */
    background-color: #444444; /* Dark grey background color for the container */
    border-radius: 10px; /* This value might need to be adjusted based on the container's height */
    margin-bottom: 15px !important; /* Adds 15px space above the username container */
    max-width: 1000px; /* or any other value that suits your design */
    margin-top: 20px; /* Adds 20px space at the top of the container */
}

.address-container input {
    border: none;
    margin-right: 10px;
    flex-grow: 1;
    background-color: #444444; /* Dark grey background color for the input */
    color: #fff; /* Adjust text color for better visibility, if necessary */
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 20px; /* Adjust the font size as needed */
}

/* You might also want to add some styles to handle the focus state of the input */
.address-container input:focus {
    outline: none; /* Removes the default outline */
    box-shadow: 0 0 0 2px #313131; /* Optional: Adds a grey glow when the input is focused */
}

.address-container button {
    border: none;
    background-color: #444444; /* Dark grey background color for the button */
    color: #fff; /* Set the button text/icon color to white */
    cursor: pointer;
    padding: 0;
    margin-left: 5px;
    font-size: 20px; /* Adjust as needed */
}

/* Optional: Style for hover state */
.address-container button:hover {
    background-color: #444444; /* Slightly lighter grey for hover state */
}

.airdropNumber, .airdropNumber2 {
    font-weight: bold;
    padding-left: 25px;
    padding-right: 25px;
}

.airdropNumber {
    color: #ff7657;
    font-size: 1.5em;
}

.airdropNumber2 {
    color: #e0e0e0;
    font-size: 1em;
}

#fireworks-container {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 9999; /* high z-index to ensure it's on top */
    display: none; /* initially hidden */
    background: transparent; /* ensures the background is transparent */
}

.disabled {
    pointer-events: none;
    opacity: 0.4; /* Grey out the container */
    filter: grayscale(100%); /* Optional: adds a grayscale effect */
}

/* Custom CSS for cookie consent modal animation */
.cookie-consent-dialog {
    position: fixed;
    bottom: 0;
    right: 0;
    left: 0;
    margin-right: auto;
    margin-left: auto;
    transform: translate(0, 100%); /* Start from below the viewport */
    transition: transform 0.3s ease-out; /* Smooth transition for sliding up */
}

.modal.show .cookie-consent-dialog {
    transform: translate(0, 0); /* Return to normal position */
}