/******************************************/
/******** GENERAL STYLES ********/
/******************************************/

	/** LANDING PAGE **/
:root{
  --ink:#0e2e36;             /* deep teal for text */
  --nav:#2f6d75;             /* dark navbar */
  --nav-accent:#2f6d75;      /* same as nav */
  --brand:#bfe7ef;           /* light cyan */
  --sky:#6ed0e4;             /* bright sky blue */
  --mint:#6fd3c7;            /* mint */
  --card:#eff7f8;            /* light bg */
  --dot:#5ab7c1;
}
body{ color:var(--ink); background:#ffffff; }

/* Main navbar */
#front .topbar{ background:var(--nav); }
#front .navbar-brand{ letter-spacing:1px; font-weight:800; color:#fff !important; padding-right:20px; border-right:1px solid white; }
#front .nav-link{ color:#cfe9ee !important; padding:5px 25px 5px 25px; margin-right: 20px; border-radius:10px;}
#front .nav-link.active, #front .nav-link:hover{border-radius:10px; background: #6ed0e4; color:#0e2e36 !important; }

#front .auth-links a{ color:#0b3b44; font-weight:600; text-decoration:none; }
#front .auth-links a:hover{ color: white; }

/* Hero */
.hero{ padding:4rem 0 2rem; background:linear-gradient(#fff,#fff) padding-box, radial-gradient(1200px 600px at 90% 90%, #b5eef8 0, rgba(255,255,255,0) 60%) border-box; border-bottom:8px solid #2b5e66; }
.hero h1{ font-weight:900; font-size:clamp(2rem,4vw,3rem); }
.hero h1 span{ display:block; }
.hero p.lead{ color:#2a6871; max-width:34ch; }
.dots{ position:absolute; right:1rem; bottom:1rem; display:grid; grid-template-columns:repeat(4,10px); gap:6px; }
.dots span{ width:10px; height:10px; border-radius:50%; background:var(--dot); opacity:.6; }

/* Section mini-nav bar (decor element) */
.section-strip{ border-top:6px solid #2b5e66; border-bottom:6px solid #2b5e66; background:var(--sky); }
.section-strip .nav-link{ color:#073740 !important; }
.section-strip .nav-link.active{ background:rgba(255,255,255,.6); border-radius:999px; padding:.25rem .8rem; }
.ghost-burger{ width:38px; height:38px; border-radius:50%; display:flex; align-items:center; justify-content:center; background:rgba(255,255,255,.35); }

/* About */
.about{ background:#f6fbfc; }
.about .card{ border:0; background:transparent; }
.about h2{ font-weight:900; }
.cta-pill{ background:var(--mint); color:#06353d; border:0; border-radius:999px; padding:.6rem 1.2rem; font-weight:700; }

/* Mission / Vision */
.badge-tab{ position:relative; display:inline-block; padding:0.65rem 1.5rem; background:var(--sky); border-radius:1.25rem; font-weight:800; letter-spacing:1px; box-shadow:0 .25rem 0 rgba(0,0,0,.12) inset; }
.mv-card{ background:var(--card); border:0; border-radius:1rem; }
.mv-card ul{ margin-left:1rem; }
.mv-icon{ width:80px; height:80px; opacity:.9; }

/* Utilities */
.divider-bold{ height:12px; background:#2b5e66; }
.divider-slim{ height:8px; background:#2b5e66; }

.pull-right{float:right !important;}
.text-right{text-align:right !important;}
.active-menu{background: #f6f9ff !important;color: #4154f1 !important;}

.hidden{display:none !important;}

/** ACCOUNTS **/

.dropdown-menu {
  max-width: 100% !important;
  width: auto;
  right: 0 !important;  /* force align to right */
  left: auto !important;
}
/* Profile image size */
.nav-profile img {
  max-width: 32px;
  height: auto;
}

.addbtn:hover{
	background: #9dcfcc;
	border-color: #9dcfcc;
	color:green;
}
.submitbtn{
	background: #48888A;
	border-color: #48888A;
}
.submitbtn:hover{
	background: #258888;
	border-color: #258888;
}

/** PRICING **/
.pricing-content{position:relative;}
.pricing_design{
    position: relative;
    margin: 10px 15px;
}
.pricing_design .single-pricing{
    background:#554c86;
    padding: 60px 40px;
    border-radius:30px;
    box-shadow: 0 10px 40px -10px rgba(0,64,128,.2);
    position: relative;
    z-index: 1;
}
.pricing_design .single-pricing:before{
    content: "";
    background-color: #fff;
    width: 100%;
    height: 100%;
    border-radius: 18px 18px 190px 18px;
    border: 1px solid #eee;
    position: absolute;
    bottom: 0;
    right: 0;
    z-index: -1;
}
.price-head{}
.price-head h2 {
	margin-bottom: 20px;
	font-size: 26px;
	font-weight: 600;
}
.price-head h1 {
	font-weight: 600;
	margin-top: 30px;
	margin-bottom: 5px;
}
.price-head span{}

.single-pricing ul{list-style:;margin-left:-35px;margin-top: 30px;text-align:left !important;}
.single-pricing ul li {
	line-height: 36px;
	margin-bottom:5px;
	font-size:16px;
}
.single-pricing ul li i {
	background: #554c86;
	color: #fff;
	width: 50px;
	height: 20px;
	border-radius: 30px;
	font-size: 11px;
	text-align: center;
	line-height: 20px;
	margin-right: 6px;
}
.pricing-price{}

.price_btn {
	background: #554c86;
	padding: 10px 30px;
	color: #fff;
	display: inline-block;
	margin-top: 20px;
	border-radius: 2px;
	-webkit-transition: 0.3s;
	transition: 0.3s;
}
.price_btn:hover{background:#3c24bb;color:white;}
a{
text-decoration:none;    
}

.section-title {
    margin-bottom: 60px;
}
.text-center {
    text-align: center!important;
}

.section-title h2 {
    font-size: 45px;
    font-weight: 600;
    margin-top: 0;
    position: relative;
    text-transform: capitalize;
}

/* -------------------------------------
    INVOICE
    Styles for the billing table
------------------------------------- */
.invoice {
    margin: 40px auto;
    text-align: left;
    width: 100%;
}
.invoice td {
    padding: 5px 0;
}
.invoice .invoice-items {
    width: 100%;
}
.invoice .invoice-items td {
    border-top: #eee 1px solid;
}
.invoice .invoice-items .total td {
    border-top: 2px solid #333;
    border-bottom: 2px solid #333;
    font-weight: 700;
}

/* Upload with Preview */

#upload,#upload2,#upload3 {
    opacity: 0;
}

#upload-label,#upload-label2,#upload-label3 {
    position: absolute;
    top: 50%;
    left: 1rem;
    transform: translateY(-50%);
}

.image-area {
    border: 2px dashed rgba(255, 255, 255, 0.7);
    padding: 1rem;
    position: relative;
}

.image-area::before {
    content: 'Uploaded image result';
    color: #fff;
    font-weight: bold;
    text-transform: uppercase;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 0.8rem;
    z-index: 1;
}

.image-area img {
    z-index: 2;
    position: relative;
}