body{font-family:"Poppins";background:#0e022d;}
a {text-decoration: none;}
ul{margin: 0; padding: 0;}
html{overflow-x: hidden;}

.dis-flex{display:flex;flex-wrap: wrap;}

.sticky_menu{position: fixed; top: 20px; transition: all 0.5s;}

.top_banner{background-color: #0e022d;background-image: url(../images/top_back.webp);background-position: center;background-repeat: no-repeat;padding: 50px 0 0;}
.top_banner_left{position: relative;display: flex; width: 100%;}
.tilt_area{position: absolute; left: 0;}
.top_banner_right{position: relative;}
.logo_area{text-align: center;}
.fl2_img{position: absolute;left: 40px;top: 50px;animation: move1 10s linear infinite; -webkit-animation: move1 10s linear infinite;}
@keyframes move1{
    0% {-webkit-transform: rotate(0deg);transform: rotate(0deg);}
	100% {-webkit-transform: rotate(360deg);ransform: rotate(360deg); }
}
.fl1_img{position: absolute;right: 40px;top: 150px;animation: move2 5s infinite; -webkit-animation: move2 5s infinite;}
@keyframes move2 {
    0% {
        -webkit-transform: rotate(-10deg) translate(-2px, -2px);
        transform: rotate(-10deg) translate(-2px, -2px);
    }
    50% {
        -webkit-transform: rotate(10deg) translate(2px, 2px);
        transform: rotate(10deg) translate(2px, 2px);
    }
    100% {
        -webkit-transform: rotate(-10deg) translate(-2px, -2px);
        transform: rotate(-deg) translate(-2px, -2px);
    }
}
.banner_cont{position: relative; z-index: 1;margin: auto 0; width: 100%;}
.banner_cont h1{color: #fff; font-weight: bold;font-size: 36px;}
.banner_cont p{margin: 10px 0 0; font-size: 24px;font-weight: 600;color: #fff;}

.price_area{background: #0e022d;padding: 0 0 70px;overflow: hidden;}
.plan_sec {border-radius: 15px;position: relative;}
.pearl-sec {background: url(../images/preal_bg.webp) no-repeat 40% 0;border-radius: 15px;padding:0 0 30px;position: relative;background-size: cover;}
.pearl-box {width: 100px;background-color: #034de3;box-shadow: 2px 2px 3px #333;color: #fff;position: absolute;text-transform: uppercase;font-size: 24px;line-height: 60px;left: 50%;top: -12px;text-align: center;transform: translateX(-50%);border-radius: 0 0 15px 15px;}
.pricing_grid_top {text-align: center;border-bottom:1px solid #c1c1c1;margin: 10px 0;}
.pricing_grid_top h3 {font-size: 30px;color: #fff;font-weight: bold;}
.pricing_grid_top h3 i {line-height: 36px;}
.plan-grid li {list-style-type: none;padding:12px 5px;border-bottom: 1px solid #c1c1c1;font-size: 14px;color: #fff;text-align: center;display: block;}
.plan-grid span {display: block;color: #fff700;font-size: 22px;font-weight: 800;}
.buy_grid {position: absolute;left: 50%;margin-top: -15px;transform: translateX(-50%);}
.buy_grid i {line-height: 33px;}
.pearl-button {background: #023fbb;border-radius: 6px;color: #fff !important;text-align: center;width: 133px;line-height: 33px;display: block;}
.pearl_text{background: #034de3; border-radius: 15px 15px 0 0;padding: 42px 15px;border-bottom: 2px solid #fff;}
.pearl_text h3{margin: 0; color: #fff;text-transform: uppercase; font-weight: bold; font-size: 22px;position: relative;}
.pearl_text h3 img{position: absolute; right: 0; top: 50%; transform: translateY(-50%);width:55px}

.emerald-sec {background: url(../images/emerald_bg.webp) no-repeat 40% 0;background-size: cover;}
.emerald_text{background: #00a856;}
.emerald-button{background: #00a856;}

.ruby-sec {background: url(../images/ruby_bg.webp) no-repeat 40% 0;background-size: cover;}
.ruby_text{background: #d8008e;}
.ruby-button{background: #d8008e;}

.diamond-sec {background: url(../images/diamond_bg.webp) no-repeat 40% 0;background-size: cover;}
.diamond_text{background: #870bee;}
.diamond-button{background: #870bee;}

.tabbed-content .tabs {display: none;}
.tabbed-content .item {min-height: 2em;}
.tabbed-content .item::before {content: attr(data-title);display: block;color: #000;text-decoration: none;font-weight: bold;font-size: 16px;text-transform: uppercase;line-height: 20px;padding: 15px;background: #edf3f6;border-radius: 10px;width: 100%;transition: all 0.3s;text-align: center;}
.tabbed-content .item .item-content {opacity: 0;visibility: hidden;height: 0;margin:10px 0;width: 100%;}
.tabbed-content .item.active .item-content {opacity: 1;visibility: visible;height: auto;}
.tabbed-content .item.active::before{background: #cbb26a; color: #fff;}

.tabbed-content{position:relative;}
.tabbed-content .tabs {display: block;border-radius: 10px;}
.tabbed-content .tabs ul{padding:0;margin:0;}
.tabbed-content .tabs ul li{list-style: none;}
.tabbed-content .tabs ul li a{color: #000; font-size: 28px; font-weight: bold;writing-mode: vertical-rl;transform: rotate(-180deg);padding: 30px 22px;border-radius: 10px;text-transform: uppercase; position: relative;text-decoration:none;cursor:pointer}
.tabbed-content .tabs ul li:first-child a{background: #dfd200;}
.tabbed-content .tabs ul li:first-child a.active:after{content: "";width: 0px;height: 0px;border-top: 25px solid transparent;border-bottom: 25px solid transparent;border-right: 30px solid #dfd200;position: absolute;left: -30px;top: 50%;transform: translateY(-50%);}
.tabbed-content .tabs ul li:last-child a{background: #00c4d4;}
.tabbed-content .tabs ul li:last-child a.active:after{content: "";width: 0px;height: 0px;border-top: 25px solid transparent;border-bottom: 25px solid transparent;border-right: 30px solid #00c4d4;position: absolute;left: -30px;top: 50%;transform: translateY(-50%);}
.tabbed-content .item {min-height: 0;padding-left: 20px;position: relative;margin: 0;}
.tabbed-content .item::before {display: none;}
.tabbed-content.tabs-side .tabs {width: 150px;float: left;}
.tabbed-content.tabs-side .tabs li {display: block;}
.tabbed-content.tabs-side .item {margin-left: 150px;}
.tabbed-content .item .item-content{margin: 0;}

.inner_tab{display:none;}

/*===============Responsive Starts===============*/
@media all and (min-width: 800px) {
}
@media (min-width:981px) and (max-width:1366px){
}

@media (min-width:768px) and (max-width:980px){
    .top_banner_right video{width: 100%;}
    .plan_sec{margin-bottom: 30px;}
}

@media (max-width:767px){
    .top_banner_right video{width: 100%;}
    .logo_area img{width: 200px;}
    .banner_cont h1{font-size: 24px; text-align: center;margin: 20px 0 0;}
    .banner_cont p{font-size: 18px; text-align: center;}
    .tabbed-content .tabs ul li a{font-size: 20px;padding: 16px 12px;}
    .tabbed-content .tabs ul li:first-child a.active:after {border-top: 10px solid transparent;border-bottom: 10px solid transparent;border-right: 14px solid #dfd200;left: -14px;}
    .tabbed-content .item{padding-left: 0;}

    .plan_sec{margin-bottom: 30px;}
    .pearl_text h3{font-size: 18px;}
}

/*===============Responsive Ends===============*/