* {
  margin: 0;
  padding: 0;
}

body {
  color: #FFF;
  font-size: 18px;
  font-weight: 400;
  background: #111827;
  line-height: 1.4;
  overflow-x: hidden;
  font-family: 'Readex Pro', sans-serif;
}

a,
i,
.btn,
button,
img,
span,
.dropdown-item,
.hover-translate {
  -webkit-transition: all 0.3s ease-in-out 0s;
  -moz-transition: all 0.3s ease-in-out 0s;
  -ms-transition: all 0.3s ease-in-out 0s;
  -o-transition: all 0.3s ease-in-out 0s;
  transition: all 0.3s ease-in-out 0s;
}

dl,
ol,
ul {
  margin-bottom: 0;
}

a {
  color: #777575;
  text-decoration: none;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  padding-bottom: 20px;
  margin: 0;
}

h1 {
  font-size: 46px;
  font-weight: 700;
}

h2 {
  font-size: 36px;
  font-weight: 600;
}

p {
  line-height: 1.5;
  padding-bottom: 20px;
  margin: 0;
  color: #7C859A;
}

img {
  max-width: 100%;
  vertical-align: middle;
}

li {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* custom scrollbar */
::-webkit-scrollbar {
  width: 8px;
}

::-webkit-scrollbar-track {
  box-shadow: inset 0 0 5px grey;
  border-radius: 10px;
}

::-webkit-scrollbar-thumb {
  background: #069ee2;
  border-radius: 10px;
}

::-webkit-scrollbar-thumb:hover {
  background: #005f88;
}

/* Header css starts */

.header {
  margin: 0 0 52px 0;
  padding: 12px 0;
  position: sticky;
  top: 0;
  background: #111827;
  z-index: 999;
}

.header .navbar {
  padding: 0;
}

.header .navbar-nav {
  width: 70%;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  flex-direction: row;
}

.header .navbar .navbar-brand {
  padding: 1px 0;
  width: 30%;
}

.header ul li a {
  color: #bcbec3;
  padding: 0 !important;
  margin: 0 34px;
  text-transform: uppercase;
  font-size: 18px;
}

.header .collapse {
  max-width: 74%;
  width: 100%;
}

.menuwrapp {
  width: 70%;
}

.menuwrapp .dropdown-toggle {
  background: #2C66B8;
  border-radius: 8px;
  color: #FFF !important;
  padding: 0 17px !important;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  height: 26px;
}

.menuwrapp .dropdown-toggle:after {
  margin: 2px 0 0 30px;
}

.header ul li.disabled a:hover,
.header ul li.dropdown a:hover {
  color: rgb(0 0 0 / 50%);
  border: none;
}

.header ul li.dropdown a:hover {
  color: #FFF;
}

.header ul li a.active {
  color: #FFF;
}


.headcommon {
  max-width: 959px;
  margin: 0 auto;
}

.headcommon h6 {
  font-size: 20px;
  padding: 0;
  font-weight: 400;
}

.headcommon h2 {
  color: #C9CBD0;
  font-size: 48px;
  font-weight: 400;
  padding: 0;
  margin: 0 0 22px 0;
}

.headcommon p {
  padding-bottom: 0;
}

.headcommon h2 span {
  color: #069EE2;
  font-weight: 700;
}

.navbar-drawer-list {
  list-style: none;
  padding: 0;
  margin: 0 0 auto 0;
  width: 100%;
  max-width: 400px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  flex-shrink: 0;
}

.navbar-drawer-list li {
  font-size: 18px;
  font-weight: 600;
  color: #bcbec3;
  margin: 0;
  padding: 16px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  width: 100%;
  text-align: center;
  transition: all 0.3s ease;
}

.navbar-drawer-list li:hover {
  color: #069EE2;
  background: rgba(6, 158, 226, 0.05);
  transform: scale(1.02);
}

.navbar-drawer-list li a {
  color: inherit;
  text-decoration: none;
  display: block;
  width: 100%;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-weight: 600;
}

.navbar-drawer-list li:first-child {
  border-top: none;
  margin-top: 0;
}

.navbar-drawer-list li:last-child {
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

/* Drawer footer with logout button */
.drawer-footer {
  border-top: 1px solid #ffffff33;
  width: 100%;
  max-width: 400px;
  text-align: center;
  padding-top: 20px;
  margin-top: auto;
  padding-bottom: 20px;
  flex-shrink: 0;
}

/* Drawer styling */
.ant-drawer-content-wrapper {
  height: 100vh !important;
}

.ant-drawer-content {
  background: #111827 !important;
  height: 100% !important;
}

.ant-drawer-body {
  background: #111827 !important;
  display: flex !important;
  align-items: flex-start !important;
  justify-content: center !important;
  min-height: calc(100vh - 80px) !important;
  padding: 20px !important;
  padding-top: 20px !important;
}

/* Center Menu title and fix close button alignment */
.ant-drawer-header {
  text-align: center !important;
  position: relative !important;
}

.ant-drawer-header-title {
  justify-content: center !important;
}

.ant-drawer-close {
  position: absolute !important;
  left: 20px !important;
  right: auto !important;
}

/* Responsive Drawer Widths */
@media (min-width: 769px) {
  /* Desktop and large tablets - smaller sidebar */
  .ant-drawer-content-wrapper {
    max-width: 350px !important;
  }
}

@media (min-width: 481px) and (max-width: 768px) {
  /* iPads and medium tablets - medium sidebar */
  .ant-drawer-content-wrapper {
    max-width: 400px !important;
  }
  
  .navbar-drawer-list {
    max-width: 350px;
  }
  
  .drawer-footer {
    max-width: 350px;
  }
}

@media (max-width: 480px) {
  /* Small mobile devices - wider sidebar */
  .ant-drawer-content-wrapper {
    width: 85% !important;
    max-width: 320px !important;
  }
  
  .navbar-drawer-list {
    max-width: 100%;
  }
  
  .drawer-footer {
    max-width: 100%;
  }
  
  .navbar-drawer-list li {
    font-size: 16px;
    padding: 14px 0;
  }
}

@media (max-width: 360px) {
  /* Extra small devices */
  .ant-drawer-content-wrapper {
    width: 90% !important;
  }
  
  .navbar-drawer-list li {
    font-size: 15px;
    padding: 12px 0;
  }
}


.gradient-btn {
  background: linear-gradient(to right, #2c3c87 0%, #07a0e4 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#2c3c87', endColorstr='#07a0e4', GradientType=1);
  color: #FFFFFF;
  border-radius: 10px;
  border: 0;
  font-weight: 600;
  font-size: 18px;
  padding: 10px 18px;
}

.gradient-btn:hover {
  background: #07a0e4;
  background: -moz-linear-gradient(left, #07a0e4 0%, #2c3c87 100%);
  background: -webkit-linear-gradient(left, #07a0e4 0%, #2c3c87 100%);
  background: linear-gradient(to right, #07a0e4 0%, #2c3c87 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#07a0e4', endColorstr='#2c3c87', GradientType=1);
}

.account-info label {
  padding: 8px 14px;
  border-radius: 6px;
  box-shadow: 4px 2px 4px rgba(0, 0, 0, 0.1), inset 1px 1px 4px rgba(0, 0, 0, 0.1);
  display: flex;
  justify-content: space-between;
}

/* hero area cs starts */

.header-banner {
  padding: 112px 0;
  position: relative;
}

.positiona {
  position: absolute;
  z-index: -1;
}

.bg-light1 {
  left: 50%;
  transform: translate(-50%, 0);
  top: 0;
}

.bannerline {
  right: 47px;
  top: 108px;
  opacity: 67%;
}

.bannerline2 {
  right: auto;
  left: 73px;
  top: auto;
  bottom: 182px;
}

.header-banner .col-lg-5 {
  width: 48%;
}

.directionr {
  position: relative;
  width: 52%;
}

.directionryt {
  top: 108px;
  right: -94px;
}

.uploadimage {
  background: #192339;
  border: 1px dashed #545F78;
  border-radius: 10px;
  margin: 0 0 48px 0;
}

/* Result container styling with proper spacing */
.result-container {
  padding: 20px;
  margin-top: 60px;
  width: 100%;
}

.result-container img {
  margin-bottom: 20px;
  border-radius: 10px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.result-container .btn {
  min-width: 200px;
  padding: 12px 24px;
  font-weight: 600;
  border-radius: 8px;
}

/* Responsive adjustments for result */
@media (max-width: 991px) {
  .result-container {
    margin-top: 40px;
    padding: 15px;
  }
  
  .result-container img {
    width: 100% !important;
    max-width: 400px !important;
  }
}

@media (max-width: 767px) {
  .result-container {
    margin-top: 30px;
    padding: 10px;
  }
}

.headingtxt h1 span {
  color: #069ee2;
  background: url(../img/circlebg.svg);
  background-size: 100% 100%;
  padding: 16px 38px;
  overflow: visible;
}

.uploadimage h3 {
  color: #069ee2;
  font-size: 26px;
  font-weight: 600;
  padding: 0 0 10px 0;
}

.uploadimage h6 {
  font-size: 15px;
  padding: 0;
}

.headingtxt h1 {
  font-size: 52px;
  line-height: 85px;
  padding: 0 10px 30px 0;
  font-weight: 600;
}

.headingtxt p {
  color: #c9cbd0;
  padding: 0 50px 38px 0;
}

.headingtxt h6 {
  color: #c9cbd0;
  padding: 0;
  font-size: 15px;
}

.trydiv h5 {
  font-weight: 600;
  font-size: 18px;
  padding: 0;
}

.trydiv h5 span {
  display: block;
  font-weight: 600;
}

.sampleimgs {
  margin: 0 0 0 30px;
}

.sampleimgs a {
  display: inline-block;
  margin: 0 3px;
}

/* quality checker css starts */

.bgsection {
  background: #192339;
}

.comparisionslider {
  padding: 95px 0;
}

.options-area ul {
  margin: 0;
  text-align: center;
  display: flex;
  justify-content: center;
  margin: 0 0 38px 0;
  border: 0;
}

.options-area h6 {
  padding: 8px 20px;
  display: inline-block;
  font-size: 16px;
  margin: 0;
  color: #C9CBD0;
}

.options-area ul li button {
  border-radius: 5px;
  font-weight: 400;
  color: #C9CBD0;
  padding: 9px 19px;
  margin: 0 10px;
  border: 0;
}

.options-area ul li button:hover,
.options-area .nav-tabs li button.active {
  background: #2B3E8F;
  color: #FFF;
  border: 1px solid transparent !important;
}

/* what removal css starts */

.candowrapp {
  padding: 112px 0 160px 0;
}

.candowrapp .row {
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}

.candotxt h4 {
  font-size: 26px;
  font-weight: 600;
  line-height: 40px;
  padding: 0 0 14px 0;
}

.candotxt p {
  padding: 0 0 30px 0;
}

.candowrapp .headcommon p {
  padding-bottom: 50px;
  padding-top: 0;
}

/* how to Remove Background css starts */

.howtowrapp {
  padding: 80px 0;
}

.howtowrapp .headcommon {
  max-width: 100%;
  margin: 0 0 58px 0;
}

.howsec .notxt {
  background: rgb(255 255 255 / 13%);
  width: 68px;
  height: 68px;
  display: inline-block;
  border-radius: 50%;
  line-height: 68px;
  font-size: 36px;
  font-weight: 500;
  margin: 0 0 30px 0;
  border: 1px solid rgb(255 255 255 / 13%);
}

.howsec h2 {
  padding: 0 0 25px 0;
  line-height: 48px;
}

.howsec h2 span {
  display: block;
}

.howsec p {
  color: #C9CBD0;
  padding: 0 0 44px 0;
  min-height: 124px;
}

.howsec {
  border-radius: 10px;
  padding: 28px 14px 38px 14px;
  min-height: 530px;
  position: relative;
  height: 100%;
  z-index: 1;
  background: #2B3E8F;
}

.howsec:after {
  position: absolute;
  content: "";
  background: url(../img/cardbg.svg) no-repeat;
  border-radius: 10px;
  background-size: cover;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: -1;
  opacity: 65%;
}

.howtorow {
  margin: 0 0 66px 0;
}

.howtorow .col-md-4 {
  padding: 0 20px;
}

/* built for everyone css starts */

.builtwrapp {
  padding: 104px 0;
}

.detaildiv em {
  background: #2c3c87;
  background: -moz-linear-gradient(left, #2c3c87 0%, #07a0e4 100%);
  background: -webkit-linear-gradient(left, #2c3c87 0%, #07a0e4 100%);
  background: linear-gradient(to right, #2c3c87 0%, #07a0e4 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#2c3c87', endColorstr='#07a0e4', GradientType=1);
  width: 56px;
  height: 57px;
  line-height: 56px;
  display: inline-block;
  border-radius: 50%;
  font-size: 36px;
  font-weight: 500;
  margin: 0 0 24px 0;
  text-align: center;
}

.detaildiv h5 {
  font-size: 24px;
  padding: 0 0 16px 0;
  font-weight: 600;
}

.detaildiv {
  padding: 30px 18px 0 30px;
  background: #172036;
  border-radius: 10px;
  min-height: 280px;
  margin: 0 0 30px 0;
  border: 2px solid transparent;
}

.detaildiv:hover {
  border: 2px solid #069EE2;
}

.detaildiv p {
  font-size: 17px;
}

/* pricing css starts */

.pricingplan-wrapp {
  padding: 80px 0 70px 0;
}

.pricingplandiv>div {
  width: 33%;
}

.pricingplan-wrapp .headcommon h2 {
  margin: 0 0 10px 0;
}

.planscard {
  background: #2B3E8F;
  border-radius: 10px;
  padding: 30px 30px;
  position: relative;
  margin: 0 0 0 34px;
}

.planscard h6 {
  font-size: 20px;
  color: #C9CBD0;
  font-weight: 400;
  padding: 0 0 15px 0;
}

.planscard h3 {
  font-size: 48px;
  padding: 0 0 44px 0;
}

.planscard h3 span {
  font-size: 20px;
}

.planscard ul {
  padding: 0;
}

.planscard ul li {
  list-style: none;
  font-size: 17px;
  color: #B7BDD8;
  padding: 0 0 30px 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}

.planscard ul li img {
  margin: 0 20px 0 0;
}

.activatetxt a {
  background: #111827;
  color: #FFF;
  border-radius: 10px;
  font-weight: 500;
  width: 100%;
  display: inline-block;
  padding: 18px 0;
  text-align: center;
  margin: 15px 0 0 0;
  border: 2px solid #111827;
}

.activatetxt a:hover {
  background: #FFF;
  color: #111827;
}

.planscardpink {
  background: #f2e9f9;
  background: -moz-linear-gradient(left, #f2e9f9 0%, #fee6f3 100%);
  background: -webkit-linear-gradient(left, #f2e9f9 0%, #fee6f3 100%);
  background: linear-gradient(to right, #f2e9f9 0%, #fee6f3 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f2e9f9', endColorstr='#fee6f3', GradientType=1);
  color: #111827;
  padding-bottom: 50px;
}

.planscardpink ul li {
  color: #111827;
}

.planscardpink h6 {
  color: #111827;
}

.whitebg {
  position: absolute;
  right: 48px;
  top: 56px;
}

.mostpopuler {
  right: -128px;
  top: -12px;
  z-index: 1;
}

.pricingplan-wrapp .headcommon h6 {
  padding: 0 0 10px 0;
}

/* faq css starts */

.faqwrapp {
  padding: 88px 0 94px 0;
}

.faqwrapp p a {
  color: #069EE2;
}

.faqwrapp .headcommon {
  margin-bottom: 26px;
}

.faqwrapp .headcommon h2 {
  margin: 0 0 20px 0;
}

.faqwrapp .accordion-item {
  background: #192339;
  border-radius: 10px;
  margin: 0 0 15px 0;
}

.faqwrapp .accordion-collapse {
  border-top: 1px solid rgb(201 203 208 / 33%);
}

.faqwrapp .accordion-item h2 {
  padding: 0;
}

.faqwrapp .accordion-button {
  font-size: 20px;
  color: #C9CBD0;
  font-weight: 500;
  background: none;
  padding: 20px 36px 20px 26px;
}

.faqwrapp .accordion-button:focus {
  box-shadow: none;
}

.faqwrapp .accordion-button:after {
  width: 0;
  height: 0;
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
  border-left: 10px solid #C9CBD0;
}

.faqwrapp .accordion-button:not(.collapsed)::after {
  transform: rotate(90deg);
}

.faqwrapp .accordion-body {
  padding: 18px 26px 28px 26px;
}

.faqwrapp .accordion-body p {
  padding: 0;
}

/* review css starts */

.reviewwrapp {
  padding: 52px 0;
}

.reviewwrapp .owl-item {
  background: #111827;
  border-radius: 10px;
  padding: 40px 38px;
}

.reviewwrapp .owl-carousel {
  max-width: 880px;
  margin: 0 auto;
}

.reviewicon {
  margin: 0 0 20px 0;
}

.reviewicon span {
  margin: 0 2px;
}

.reviewheading h6 {
  font-size: 22px;
  font-weight: 500;
}

.reviewheading p {
  font-size: 15px;
  line-height: 26px;
}

.reviewheading h2 {
  font-size: 27px;
  font-weight: 500;
  padding: 0;
}

.buttonbg a {
  color: #FFF;
}

/* Center the View All Reviews button */
.reviewwrapp .buttonbg {
  display: inline-block;
  margin: 0 auto;
}

.reviewwrapp .text-center {
  display: flex;
  justify-content: center;
  align-items: center;
}

/* advance editing css starts */

.getdiv {
  background: #2c3c87;
  background: -moz-linear-gradient(left, #2c3c87 0%, #07a0e4 100%);
  background: -webkit-linear-gradient(left, #2c3c87 0%, #07a0e4 100%);
  background: linear-gradient(to right, #2c3c87 0%, #07a0e4 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#2c3c87', endColorstr='#07a0e4', GradientType=1);
  border-radius: 10px;
  max-width: 1200px;
  margin: 0 auto;
}

.getdiv h4 {
  font-size: 54px;
  font-weight: 700;
  line-height: 72px;
}

.getlft {
  padding: 38px 48px 38px 48px;
  width: 62%;
  display: flex;
  align-content: center;
  flex-wrap: wrap;
}

.getlft a {
  background: #111827;
  color: #FFF;
  border-radius: 10px;
  font-weight: 500;
  font-size: 22px;
  display: inline-block;
  padding: 18px 30px;
  text-align: center;
  border: 2px solid #111827;
}

.getlft a:hover {
  background: #FFF;
  color: #111827;
}

.getstar-wrapp {
  padding: 72px 0;
}

.getlft p {
  color: #C9CBD0;
}

/* blogs css starts */

.relatedpost-wrapp {
  padding: 65px 0;
}

.relatedpost-wrapp h3 {
  padding: 0 0 64px 0;
  font-size: 36px;
  font-weight: 600;
}

.relatedpostimg {
  margin: 0 0 20px 0;
}

.relatedpostimg img {
  border-radius: 8px;
}

.relatedpostdiv span {
  color: #C9CBD0;
  font-size: 14px;
  padding: 0 0 10px 0;
}

.relatedpostdiv h5 {
  font-size: 24px;
  line-height: 38px;
}

.blogbannerimg img {
  width: 100%;
}

.relatedpostdiv a {
  color: #FFF;
  display: inline-block;
  border: 1px solid transparent;
}

.blog-txt {
  font-size: 16px;
  color: #C9CBD0;
  margin-bottom: 50px;
}

/* Blog detail css starts */

.announcementtxt {
  font-size: 18px;
  color: #069EE2;
  font-weight: 400;
}

.announcement-wrapp h2 {
  font-size: 36px;
  margin: 0 0 16px 0;
  padding: 0 20px 0 0;
  line-height: 55px !important;
}

.announcementdetail {
  margin: 0 0 18px 0;
}

.announcementdetailtxt {
  font-size: 16px;
  color: #C9CBD0;
  margin: 0 0 20px 0;
}

.announcement-wrapp p {
  color: #C9CBD0;
  padding: 0 0 22px 0
}

.announcementdetail h5 {
  font-size: 24px;
  padding: 0 0 14px 0;
}

.blogimg {
  margin: 0 0 40px 0;
}

.branddetaillist ul li {
  color: #C9CBD0;
  margin: 0 0 30px 0;
}

.branddetaillist {
  margin: 0 0 50px 0;
}

.othertipswrapp {
  background: #192339;
  border-radius: 10px;
}

.othertipswrapp h5 {
  font-size: 22px;
  padding: 18px;
  border-bottom: 1px solid rgb(201 203 208 / 20%);
  margin: 0 0 20px 0;
}

.othertips {
  padding: 0 18px 0 18px;
  height: 400px;
  overflow-y: scroll;
}

.othertips::-webkit-scrollbar {
  width: 0;
}

.tipsdiv {
  margin: 0 0 34px 0;
}

.tittleimg {
  width: auto;
}

.tipsheading {
  width: 73%;
  margin: 0 0 0 20px;
}

.tipsheading h4 {
  font-size: 15px;
  padding: 0 0 5px 0;
}

.tipsheading p {
  font-size: 12px;
  padding: 0;
}

/* price page css starts */

.pricewrap {
  width: 100%;
  padding: 0 0 60px;
}

.pricewrap h2 {
  font-size: 2.7rem;
  font-weight: 600;
  line-height: 72px;
  text-align: center;
}

.pricewrap .nav-tabs {
  border: 0px;
  text-align: center;
}

.pricewrap .nav {
  display: block;
  width: 250px;
  margin: 0 auto 40px;
}

.pricewrap .nav-link {
  display: inline-block;
  float: left;
}

.pricewrap .nav-tabs .nav-link {
  background: #192339;
  border-radius: 0;
  padding: 12px 25px;
  color: rgb(255 255 255 / 85%);
  border: 0px;
}

.pricewrap .nav-tabs .nav-item.show .nav-link,
.pricewrap .nav-tabs .nav-link.active {
  background: linear-gradient(90deg, #2C3C87 0%, #07A0E4 100%);
  border: 0;
  color: #fff;
}

.pricewrap .nav-tabs .nav-link:focus,
.pricewrap .nav-tabs .nav-link:hover {
  border: 0;
}

.pricewrap .planscard {
  padding: 20px 15px;
  margin: 0px;
}

.pricewrap .planscard ul li {
  font-weight: 400;
}

.pricewrap .planscard p {
  font-weight: 400;
  text-align: center;
  font-size: 14px;
}

.pricewrap .planscard.bg-light-blue {
  background: #192346;
}

.pricewrap .planscard .activatetxt a {
  background: linear-gradient(90deg, #2C3C87 0%, #07A0E4 100%);
}

.pricewrap .planscard .activatetxt a:hover {
  background: #07a0e4;
  background: -moz-linear-gradient(left, #07a0e4 0%, #2c3c87 100%);
  background: -webkit-linear-gradient(left, #07a0e4 0%, #2c3c87 100%);
  background: linear-gradient(to right, #07a0e4 0%, #2c3c87 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#07a0e4', endColorstr='#2c3c87', GradientType=1);
  color: #FFF;
}

/* Pricing Responsive Styles */
.pricing-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 20px;
}

.pricing-col {
  margin-bottom: 20px;
}

/* Desktop - 4 columns */
@media (min-width: 1200px) {
  .pricing-col {
    flex: 0 0 calc(25% - 20px);
    max-width: calc(25% - 20px);
  }
  
  .planscard {
    margin: 0 !important;
  }
}

/* Large tablets and small desktops - 2 columns */
@media (min-width: 768px) and (max-width: 1199px) {
  .pricing-col {
    flex: 0 0 calc(50% - 20px);
    max-width: calc(50% - 20px);
  }
  
  .pricewrap h2 {
    font-size: 2.2rem;
    line-height: 1.3;
  }
  
  .planscard {
    margin: 0 !important;
    padding: 25px 20px !important;
  }
  
  .planscard h3 {
    font-size: 40px;
    padding: 0 0 30px 0;
  }
  
  .planscard ul li {
    font-size: 16px;
    padding: 0 0 25px 0;
  }
}

/* Small tablets - 2 columns, more compact */
@media (min-width: 577px) and (max-width: 767px) {
  .pricing-col {
    flex: 0 0 calc(50% - 15px);
    max-width: calc(50% - 15px);
  }
  
  .pricewrap h2 {
    font-size: 1.8rem;
    line-height: 1.2;
    padding: 0 15px;
  }
  
  .planscard {
    margin: 0 !important;
    padding: 20px 15px !important;
  }
  
  .planscard h6 {
    font-size: 18px;
    padding: 0 0 10px 0;
  }
  
  .planscard h3 {
    font-size: 36px;
    padding: 0 0 25px 0;
  }
  
  .planscard ul li {
    font-size: 15px;
    padding: 0 0 20px 0;
  }
  
  .planscard ul li img {
    margin: 0 15px 0 0;
    width: 20px;
  }
}

/* Mobile - 1 column, full width */
@media (max-width: 576px) {
  .pricing-row {
    gap: 15px;
  }
  
  .pricing-col {
    flex: 0 0 100%;
    max-width: 100%;
  }
  
  .pricewrap {
    padding: 0 0 40px;
  }
  
  .pricewrap h2 {
    font-size: 1.5rem;
    line-height: 1.2;
    padding: 0 15px;
    margin-bottom: 15px;
  }
  
  .pricewrap .blog-txt {
    font-size: 14px;
    padding: 0 15px;
    margin-bottom: 20px;
  }
  
  .planscard {
    margin: 0 !important;
    padding: 20px 15px !important;
  }
  
  .planscard h6 {
    font-size: 16px;
    padding: 0 0 10px 0;
  }
  
  .planscard h3 {
    font-size: 32px;
    padding: 0 0 20px 0;
  }
  
  .planscard h3 span {
    font-size: 18px;
  }
  
  .planscard ul li {
    font-size: 14px;
    padding: 0 0 15px 0;
  }
  
  .planscard ul li img {
    margin: 0 12px 0 0;
    width: 18px;
  }
  
  .planscard p {
    font-size: 13px;
  }
  
  .activatetxt a {
    padding: 15px 0;
    font-size: 15px;
  }
}

.AllPlns {
  width: 100%;
  background: #192339;
  ;
  padding: 40px 0 20px;
}

.AllPlns h2 {
  font-size: 1.7rem;
  font-weight: 600;
  line-height: 72px;
  text-align: center;
  margin-bottom: 25px;
}

/* Check Out css starts */

.checkoutwrap {
  width: 100%;
  padding: 0 0 40px;
}

.checkoutwrap h2 {
  font-size: 2.7rem;
  font-weight: 600;
  line-height: 72px;
  text-align: center;
}

.cardview {
  width: 100%;
  padding: 0 0 40px;
}

.cardview .pricewrap .nav {
  display: block;
  margin: 0 auto 25px;
}

.cardview .card {
  background: #192339;
  border-radius: 10px;
}

.cardview .card-header {
  text-align: center;
  padding: 15px 0 0;
  border-color: rgb(238 238 238 / 15%);
}

.cardview h3 {
  font-size: 1.5rem;
  color: #fff;
}

.cardview .card-body {
  padding: 25px 35px;
}

.cardview .card-body table tr td {
  padding: 20px 0;
  font-size: 18px;
}

.checkout-plans .ant-radio-wrapper span.ant-radio+* {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.pay-btn {
  background: linear-gradient(90deg, #2C3C87 0%, #07A0E4 100%);
  padding: 12px 25px;
  border-radius: 7px;
  border: 0px;
  color: #fff;
}

.pay-btn:hover {
  background: #07a0e4;
  background: -moz-linear-gradient(left, #07a0e4 0%, #2c3c87 100%);
  background: -webkit-linear-gradient(left, #07a0e4 0%, #2c3c87 100%);
  background: linear-gradient(to right, #07a0e4 0%, #2c3c87 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#07a0e4', endColorstr='#2c3c87', GradientType=1);
  color: #FFF;
}

.paypal-btn {
  background: #F6C657;
  border-radius: 7px;
  padding: 12px 35px;
  margin-left: 10px;
}

.paypal-btn img {
  width: auto;
  height: 22px;
}

#paycard .modal-content {
  background: #2B3E8F;
  border-radius: 10px;
  border: 0px;
}

#paycard .modal-header {
  padding: 10px;
  text-align: center;
  border-color: rgb(238 238 238 / 15%);
}

#paycard h4 {
  margin: 0px;
  padding: 0px;
}

#paycard .btn-close {
  background: none;
  opacity: 1;
  position: absolute;
  top: 20px;
  right: 20px;
  width: 23px;
  height: 23px;
  padding: 0px;
}

#paycard .modal-body {
  padding: 15px 50px 0px;
}

.click-txt {
  background: rgb(17 24 39 / 45%);
  border-radius: 10px;
  padding: 12px 15px;
  text-align: center;
  color: #fff;
  font-size: 16px;
}

#paycard .form-control {
  height: 60px;
  border-radius: 7px;
  padding: 7px 10px 7px 60px;
  font-size: 16px;
  color: #111827;
}

#paycard .icon-card {
  position: absolute;
  left: 15px;
  top: 15px;
}

.btn-pay {
  background: #111827;
  color: #fff;
  border-radius: 7px;
  padding: 15px 15px;
  border: 0px;
  font-size: 18px;
}

.PaymentData {
  width: 100%;
  padding: 0 0 50px;
}

.PaymentData .container {
  width: 100%;
  max-width: 800px;
}

.PaymentData h2 {
  font-size: 2rem;
  font-weight: 500;
  line-height: 25px;
  text-align: center;
}

.PaymentData h3 {
  font-size: 1.8rem;
  font-weight: 500;
  text-align: center;
}

.PaymentData .form-control {
  height: 50px;
  border-radius: 7px;
  padding: 7px 10px 7px 50px;
  font-size: 16px;
  color: #111827;
}
 .form-control-code {
  height: 50px;
  width: 100%;
  border-radius: 7px;
  padding: 7px 10px 7px;
  font-size: 16px;
  color: #111827;
}

.PaymentData .icon-card {
  position: absolute;
  left: 18px;
  top: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.pl-5 {
  padding-left: 20px !important;
}

/* payment status css starts */
.PaymentData .payment-receipt {
  background-color: #fff;
  border-radius: 16px;
  box-shadow: 0 0 20px rgba(255, 255, 255);
  padding: 1rem 2.5rem;
  font-size: 16px;
}

.PaymentData .payment-receipt .transaction-data {
  color: #bcbec3;
  font-size: 16px;
}

.PaymentData .payment-receipt .transaction-data b {
  color: #00000096;
}

.PaymentData .payment-receipt .amoput-details {
  background-color: #f2f2f2;
  width: fit-content;
  margin: 0 auto;
  padding: 0.5rem 1.5rem;
  border-radius: 8px;
  box-shadow: 0 0 3px rgba(0, 0, 0, 0.2);
  text-align: center;
  color: #bcbec3;
}

.PaymentData .payment-receipt .amoput-details h2 {
  margin: 8px 0 0;
  padding: 0;
  color: #000;
  font-size: 28px;
}

/* Payment Process Page Responsive Styles */
.payment-wrapper {
  display: flex;
  gap: 30px;
  align-items: flex-start;
}

.billing-section {
  flex: 1.5;
  min-width: 0;
}

.order-section {
  flex: 1;
  min-width: 0;
}

.order-card {
  width: 100%;
  max-width: 380px;
  height: auto;
  min-height: 490px;
  overflow-y: auto;
  background-color: #1c33b4;
  border-radius: 10px;
  padding: 30px;
}

/* Responsive breakpoints for Payment Page */
@media (min-width: 992px) {
  .PaymentData .container {
    max-width: 1100px;
  }
}

@media (max-width: 991px) {
  .payment-wrapper {
    flex-direction: column;
    gap: 30px;
  }
  
  .billing-section,
  .order-section {
    flex: 1;
    width: 100%;
  }
  
  .order-card {
    max-width: 100%;
    margin: 0 auto;
  }
  
  .PaymentData h3 {
    font-size: 1.5rem;
    text-align: left;
  }
}

@media (max-width: 767px) {
  .PaymentData {
    padding: 20px 0 40px;
  }
  
  .PaymentData .container {
    padding: 0 15px;
  }
  
  .payment-wrapper {
    gap: 25px;
  }
  
  .PaymentData h3 {
    font-size: 1.3rem;
    margin-bottom: 15px;
  }
  
  .PaymentData .form-control,
  .form-control-code {
    height: 45px;
    font-size: 15px;
  }
  
  .order-card {
    padding: 20px;
    min-height: auto;
  }
  
  .order-card > div:first-child {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 10px;
  }
  
  .order-card > div:first-child > div:first-child {
    font-size: 24px !important;
  }
  
  .order-card > div:first-child > div:last-child > div {
    font-size: 32px !important;
  }
}

@media (max-width: 576px) {
  .PaymentData h3 {
    font-size: 1.2rem;
  }
  
  .PaymentData .col-md-11 {
    padding: 0;
  }
  
  .PaymentData .form-control {
    padding: 7px 10px 7px 45px;
  }
  
  .PaymentData .icon-card {
    left: 12px;
  }
  
  .order-card {
    padding: 15px;
  }
  
  .order-card > div:first-child > div:first-child {
    font-size: 20px !important;
  }
  
  .order-card > div:first-child > div:last-child > div {
    font-size: 28px !important;
  }
  
  .order-card hr {
    margin: 15px 0;
  }
  
  .order-card .d-flex {
    font-size: 14px;
  }
  
  .order-card .btn {
    font-size: 15px;
    padding: 12px !important;
  }
  
  .form-control-code {
    font-size: 14px;
    height: 42px;
  }
  
  .order-card .small {
    font-size: 13px;
  }
}

@media (max-width: 480px) {
  .PaymentData {
    padding: 15px 0 30px;
  }
  
  .payment-wrapper {
    gap: 20px;
  }
  
  .PaymentData h3 {
    font-size: 1.1rem;
    margin-bottom: 12px;
  }
  
  .order-card {
    padding: 12px;
  }
  
  .order-card > div:first-child > div:first-child {
    font-size: 18px !important;
  }
  
  .order-card > div:first-child > div:last-child > div {
    font-size: 24px !important;
  }
  
  .order-card .mt-3 {
    margin-top: 15px !important;
  }
}

@media (max-width: 360px) {
  .PaymentData .form-control,
  .form-control-code {
    height: 40px;
    font-size: 13px;
  }
  
  .order-card > div:first-child > div:first-child {
    font-size: 16px !important;
  }
  
  .order-card > div:first-child > div:last-child > div {
    font-size: 22px !important;
  }
}

/* footer css starts */
.footer {
  background: #060B14;
  padding: 118px 0 40px 0;
}

.socialicon h6 {
  font-size: 18px;
  font-weight: 600;
}

.sociallink a {
  margin: 0 7px;
  display: inline-block;
}

.sociallink a:hover img {
  transform: scale(1.1);
}

/* notification modal css */
.notification-modal .ant-modal-content {
  border-radius: 15px !important;
  padding: 0 !important;
}

.notification-modal .ant-modal-body {
  padding: 0 !important;
}

.notification-modal .ant-modal-confirm-content {
  margin: 8px 15px !important;
}

.notification-modal .ant-modal-confirm-title {
  border-bottom: 1px solid #d1d1d1 !important;
  padding: 5px 0 !important;
  font-weight: 700 !important;
  text-align: center !important;
}

.notification-modal .ant-modal-confirm-btns {
  width: 100% !important;
  margin: 10px 0 !important;
  text-align: center !important;
}

.notification-modal p {
  margin-bottom: 6px !important;
}

.ant-spin-text {
  color: #FFFFFF !important;
  font-weight: 500 !important;
  font-size: 18px !important;
}

span.ant-spin-dot.ant-spin-dot-spin {
  width: 35px !important;
  height: 35px !important;
}

.ant-spin-dot-item {
  color: #FFF !important;
  height: 14px !important;
  width: 14px !important;
  margin-top: 20px !important;
}

/* login */

.auth-card {
  color: #000 !important;
  background: #fff !important;
  border-radius: 10px;
  padding: 40px 30px;
  box-shadow: 0px 0px 15px 0px rgba(255, 255, 255, 0.5), inset 0px 0px 13px 0px rgba(0, 0, 0, 0.5);
  max-width: 500px;
  margin: 0 auto;
}

.auth-card h2 {
  text-align: center;
  font-size: 28px;
  font-weight: 700;
  margin-bottom: 30px !important;
  color: #000 !important;
}

.google-loginbar {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  margin-bottom: 20px !important;
  width: 100% !important;
  text-align: center !important;
}

.google-loginbar > div {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  width: 100% !important;
  margin: 0 auto !important;
}

.google-loginbar iframe {
  margin: 0 auto !important;
  display: block !important;
  max-width: 100% !important;
}

/* Additional Google button wrapper support */
.google-loginbar div[role="button"],
.google-loginbar button {
  margin: 0 auto !important;
}

/* Ensure Google One Tap container is centered */
#credential_picker_container,
.google-loginbar [data-client-id] {
  display: flex !important;
  justify-content: center !important;
  margin: 0 auto !important;
}

/* Force all nested divs in google-loginbar to center */
.google-loginbar * {
  margin-left: auto !important;
  margin-right: auto !important;
}

.google-loginbar > div > div {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
}

/* "or" separator styling */
.auth-card p.text-center {
  margin: 20px 0;
  color: #999;
  font-size: 16px;
  font-weight: 500;
  position: relative;
}

.auth-card p.text-center::before,
.auth-card p.text-center::after {
  content: '';
  position: absolute;
  top: 50%;
  width: 40%;
  height: 1px;
  background: #ddd;
}

.auth-card p.text-center::before {
  left: 0;
}

.auth-card p.text-center::after {
  right: 0;
}

/* Bottom links styling */
.auth-card .d-flex.align-items-center.justify-content-between {
  flex-wrap: wrap;
  gap: 10px;
}

.auth-card .d-flex.align-items-center.justify-content-between a {
  color: #2c3c87;
  text-decoration: none;
  font-weight: 500;
  font-size: 14px;
  transition: color 0.3s ease;
}

.auth-card .d-flex.align-items-center.justify-content-between a:hover {
  color: #069EE2;
  text-decoration: underline;
}

/* Signup page bottom link */
.auth-bottom-link {
  color: #2c3c87 !important;
  font-weight: 500 !important;
  font-size: 15px !important;
  transition: all 0.3s ease;
  text-decoration: none !important;
}

.auth-bottom-link:hover {
  color: #069EE2 !important;
  text-decoration: underline !important;
}

/* Responsive adjustments for auth card */
@media (max-width: 767px) {
  .auth-card {
    padding: 30px 20px;
  }
  
  .auth-card h2 {
    font-size: 24px;
  }
  
  .auth-card .d-flex.align-items-center.justify-content-between {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }
  
  .auth-card .d-flex.align-items-center.justify-content-between a {
    font-size: 13px;
  }
  
  .google-loginbar {
    overflow: visible !important;
    padding: 0 !important;
    display: flex !important;
    justify-content: center !important;
  }
  
  .google-loginbar > div {
    max-width: 350px !important;
    overflow: visible !important;
    display: flex !important;
    justify-content: center !important;
  }
  
  .google-loginbar iframe {
    max-width: 350px !important;
    width: 350px !important;
    transform: none !important;
    transform-origin: center;
    display: block !important;
    margin: 0 auto !important;
  }
}

@media (max-width: 480px) {
  .auth-card {
    padding: 25px 15px;
  }
  
  .google-loginbar {
    padding: 0 !important;
  }
  
  .google-loginbar iframe {
    max-width: 320px !important;
    width: 320px !important;
    transform: none !important;
  }
}

@media (max-width: 360px) {
  .auth-card {
    padding: 20px 10px;
  }
  
  .google-loginbar iframe {
    max-width: 280px !important;
    width: 280px !important;
    transform: none !important;
  }
}


/* dashboard css starts */
.dashboard {
  display: flex;
  height: 100vh;
}

.dashboard .dashboard-side {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  border-right: 1px solid #ffffff33;
  padding: 0 15px;
  margin: 15px 0;
  width: 250px;
  min-width: 250px;
  max-width: 250px;
  flex-shrink: 0;
}

.dashboard .dashboard-side .side-logo {
  border-bottom: 1px solid #ffffff33;
  padding-bottom: 10px;
  margin-bottom: 15px;
}

.dashboard .dashboard-side .side-navbar ul {
  padding: 0;
  margin: 0;
}

.dashboard .dashboard-side .side-navbar li {
  cursor: pointer;
  border-bottom: 1px solid #ffffff15;
  padding: 15px;
  font-size: 16px;
  transition: all 0.3s ease;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.dashboard .dashboard-side .side-navbar li:last-child {
  border-bottom: none;
}

.dashboard .dashboard-side .side-navbar li:hover,
.dashboard .dashboard-side .side-navbar li.active {
  color: #069ee2;
  background: rgba(6, 158, 226, 0.1);
}

.dashboard .dashboard-side .side-navbar li span {
  margin-right: 8px;
}

.dashboard .dashboard-side .side-footer {
  border-top: 1px solid #ffffff33;
  width: 100%;
  text-align: center;
  padding-top: 15px;
}

.dashboard .dashboard-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow: hidden;
}

.dashboard .dashboard-content .content-header {
  text-align: end;
  margin: 15px;
  padding-bottom: 15px;
  border-bottom: 1px solid #ffffff33;
}

.dashboard .dashboard-content .content-header .gradient-btn {
  padding: 8px 14px;
  width: fit-content;
  align-items: center;
}

.dashboard .dashboard-content .content-header .credits-info {
  display: flex;
  align-items: center;
  gap: 8px;
}

.dashboard .dashboard-content .content-main {
  padding: 0 15px;
  height: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  width: 100%;
}

/* Mobile menu buttons - hidden by default on desktop */
.mobile-menu-toggle,
.mobile-menu-close,
.mobile-overlay {
  display: none;
}

/* Home page mobile menu button (hamburger) */
.mobile-menu-btn {
  background: transparent !important;
  border: none !important;
  padding: 8px !important;
  color: #fff !important;
  font-size: 24px !important;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
  box-shadow: none !important;
}

.mobile-menu-btn:hover {
  background: transparent !important;
  color: #069EE2 !important;
  transform: scale(1.1);
}

.mobile-menu-btn:active {
  transform: scale(0.95);
}

.mobile-menu-btn .anticon {
  color: inherit !important;
  font-size: 24px;
  line-height: 1;
}

/* Dashboard Responsive Styles */
@media (max-width: 991px) {
  /* Hide desktop sidebar on tablets and mobile */
  .dashboard .dashboard-side {
    position: fixed;
    left: -100%;
    top: 0;
    width: 280px;
    height: 100vh;
    z-index: 1000;
    transition: left 0.3s ease;
    background: #111827;
    margin: 0;
    padding: 20px 15px;
  }

  /* Show sidebar when mobile menu is open */
  .dashboard .dashboard-side.mobile-open {
    left: 0;
  }

  /* Show mobile menu toggle button */
  .mobile-menu-toggle {
    display: flex !important;
    background: transparent;
    border: none;
    padding: 8px;
    color: #fff;
    font-size: 24px;
    cursor: pointer;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
  }

  .mobile-menu-toggle:hover {
    color: #069EE2;
    transform: scale(1.1);
  }

  /* Show close button in mobile sidebar */
  .mobile-menu-close {
    display: flex !important;
    position: absolute;
    top: 20px;
    right: 20px;
    background: transparent;
    border: none;
    padding: 0;
    color: #fff;
    font-size: 24px;
    cursor: pointer;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    z-index: 1001;
    width: 32px;
    height: 32px;
    line-height: 1;
  }

  .mobile-menu-close .anticon {
    font-size: 24px;
    line-height: 1;
  }

  .mobile-menu-close:hover {
    color: #069EE2;
    transform: scale(1.1);
  }

  .mobile-menu-close:active {
    transform: scale(0.95);
  }

  /* Adjust sidebar logo padding to avoid overlap with close button */
  .dashboard .dashboard-side.mobile-open .side-logo {
    padding-right: 50px;
  }

  /* Show overlay when mobile menu is open */
  .mobile-overlay {
    display: block !important;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 999;
  }

  /* Adjust dashboard content for mobile */
  .dashboard .dashboard-content {
    width: 100%;
  }

  .dashboard .dashboard-content .content-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
  }
}

@media (max-width: 767px) {
  .dashboard .dashboard-side {
    width: 100%;
    max-width: 300px;
  }
}

@media (max-width: 480px) {
  .dashboard .dashboard-side {
    max-width: 280px;
  }

  .mobile-menu-toggle {
    font-size: 22px;
  }
}