:root{
      --main_top:#4db7a5;           /* page bg */
      --teal:#00687a;           /* page bg */
      --teal-dark:#08565c;      /* darker shade */
      --sky:#bdeef1;            /* header gradient start */
      --sky-2:#e6fffb;          /* header gradient end */
      --brand:#ffe000;          /* button bg */
      --brand-2:#ffd100;        /* button hover */
      --ink:#0d2b5a;            /* deep blue ink */
      --white:#ffffff;
      --shadow:0 10px 25px rgba(0,0,0,.08);
      --radius-2xl: 24px;
    }
 @font-face {
  font-family: 'ComicSansMS';
  src: url('fonts/ComicSansMS.woff') format('woff'),
       url('fonts/ComicSansMS.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}


    .topbar {
      background: #4db7a5;
      box-shadow: 0 5px 15px rgba(0,0,0,.1);
    }
    .topbar .navbar-brand img {
      height: 80px;
    }
    .pill {
      font-weight: 700;
      color: #0000ff;
      background: #ffe000;
      padding: 8px 18px;
      border-radius: 50px;
      border: 2px solid #ffe973;
      text-decoration: none;
    }
    .pill:hover {
      background: #ffd100;
    }
    .welcome-sm {
      font-family: "Baloo 2", cursive;
      font-size: 40px;
      color: #f266ab;
      font-weight: bold;
    }
    .brand-big {
      font-family: "Baloo 2", cursive;
      font-size: 90px;
      color: #ffde59;
      text-shadow: 0 4px 0 rgba(0,0,0,.2);
    }
    .tag {
      font-weight: 800;
      color: #72ff73;text-align: center;
    }
    /* Slider */
    .carousel-inner img {
      border-radius: 20px;
      object-fit: cover;
      width: 100%;
      height: 400px;
    }
    /* Menu buttons */
    .menu a {
      display: block;
      background: #ffe000;
      padding: 15px;
      border-radius: 20px;
      text-align: center;
      font-size: 22px;
      font-weight: 800;
      margin-bottom: 15px;
      color: #0b2d4d;
      text-decoration: none;
      border: 3px solid #ffe973;
    }
    .menu a:hover {
      background: #ffd100;
    }

 *{box-sizing:border-box}
    html,body{height:100%}
    body{ 
      margin:0;
      font-family:"Nunito", system-ui, -apple-system, Segoe UI, Roboto;
      color:var(--white);
      background:var(--teal);
    }
.topbar-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 14px 20px;
  display: flex;
  align-items: center;
  justify-content: center;   center everything  
  position: relative;
}   

.top-actions { font-family: "Baloo 2", cursive;
  position: absolute;
  right: 20px; /* push Join/Login to the right */  
  top: 50%;
  transform: translateY(-50%); font-weight: 800;
}    
    .topbar{  font-family: "Baloo 2", cursive;
      position:sticky; top:0; z-index: 10;
      background: var(--main_top);;
      color:#083b52; font-weight: 800;
      box-shadow: var(--shadow);
    }
    
    .brand{
      display:flex; align-items:center; gap:14px;
    }
    .brand-logo{
      width:58px; height:58px; border-radius:50%; background:#fff; display:grid; place-items:center;
      box-shadow: var(--shadow);
      font-weight:800; color:#0a6b73; border:3px solid #e8f9fb;
    }
    .brand-title{  font-size:22px; line-height:1; }

    
    .pill{
      font-weight:800; text-decoration:none; color:#0000ff;
      background:var(--brand);
      padding:10px 18px; border-radius:1000px; box-shadow: var(--shadow);
      border:3px solid #ffe973; transition:.2s ease transform, .2s ease background;
      letter-spacing:.2px;  display: inline-table;
  margin-bottom: 12px;
    }
    .pill:hover{ background:var(--brand-2); transform:translateY(-1px); }

    /* Layout */
    .wrap{ max-width:1200px; margin:0 auto; padding:32px 20px 60px; position:relative;}
    .hero{
      display:grid; grid-template-columns: 1.15fr 0.85fr; gap:32px; align-items:start;
    }
    @media (max-width: 980px){
      .hero{ grid-template-columns: 1fr; }
      .menu{ position:static; }
    }

    /* Left hero column */
    .welcome-sm{   font-size:42px;   color: #f266ab;
  font-weight: bold;margin:0 0 8px; }
    .brand-big{     font-weight: bold;font-size:92px; margin:0; line-height:.9; color:#ffde59; text-shadow: 0 6px 0 rgba(0,0,0,.09);  font-family: "Nunito", system-ui, -apple-system, Segoe UI, Roboto; }
    .tag{      font-family: 'Comic Neue', cursive; /* Or any other desired font */ font-weight:900; letter-spacing:1px; margin:12px 0 22px; color:#72ff73; }
 
/* ...and so on for all letters */
    /* Slider */
    .slider{
      position:relative; overflow:hidden; border-radius: 28px; box-shadow: var(--shadow); background:#06484e;
      border:4px solid rgba(255,255,255,.08);
    }
    .slides{ display:flex; width:100%; transition: transform .6s cubic-bezier(.2,.7,.2,1); }
    .slide{ min-width:100%; aspect-ratio: 16/10; display:grid; place-items:center; }
    .slide img{ width:100%; height:100%; object-fit:cover; display:block; }
    .slider-dots{
      position:absolute; inset:auto 0 10px; display:flex; gap:8px; justify-content:center;
    }
    .dot{
      width:12px; height:12px; border-radius:999px; background:rgba(255,255,255,.55); border:2px solid rgba(0,0,0,.08);
      cursor:pointer; transform: scale(1); transition: transform .2s ease, background .2s ease;
    }
    .dot.active{ background:#fff; transform:scale(1.15); }
    .slider-nav{
      position:absolute; inset:0; display:flex; align-items:center; justify-content:space-between; padding:0 6px;
    }
    .nav-btn{
      width:44px; height:44px; border-radius:50%; background:rgba(0,0,0,.25); border:2px solid rgba(255,255,255,.6);
      backdrop-filter: blur(4px); color:#fff; font-weight:900; display:grid; place-items:center; cursor:pointer;
    }

    /* Right column menu */
    .menu{ position:sticky; top:90px; display:flex; flex-direction:column; gap:16px; }
    .menu a{
      align-items:center; justify-content:space-between; gap:16px;
      text-decoration:none; color:#0000ff; background:var(--brand); border-radius: 20px;
      padding:18px 22px; font-weight:900; font-size:22px; line-height:1; letter-spacing:.3px;
      box-shadow: var(--shadow); border:4px solid #ffe973; transition:.2s ease transform, .2s ease background;
	  text-align:center;
    }
    .menu a:hover{ background:var(--brand-2); transform: translateY(-2px); }
/* ✅ Active menu item */
.menu a.active {
   background: #0000ff;
  color: #ffe000;
  border-color: #0000ff;
}
    /* Footer */
    footer{ margin-top:25px; border-top:1px dashed rgba(255,255,255,.25); padding-top:14px; font-size:14px; color:#c5f7ff;}
    footer a{ color:#fff; text-decoration:none; font-weight:800; }
    footer a:hover{ text-decoration:underline; }
	
	a {
  text-decoration: none !important; /* removes underline from all links */
  color: inherit; /* inherit text color instead of default blue */
}

a:hover {
  text-decoration: none; /* no underline on hover also */
}
	 
    .box { 
        padding: 30px 30px;
         
        font-size: 24px;
        font-weight: bold;
        text-align: center;
        color: white;
 
        line-height: 1.4;
		border-radius: 56px 66px 77px 63px; /* irregular rounded corners */
    }

    .blue {
        background-color: #63D2E0; /* light blue */
    }

    .green {
        background-color: #6CFD84; /* light green */
    }

    .pink {
        background-color: #FFD6E0; /* light pink */
        
    }
	.box_heading{
		font-weight: bold;
  font-size: 19px;
 text-align:center;
  color: #0000ff;
 
 
	}
    .blue_text {
        color: #63D2E0; /* light blue */
    }

    .green_text  {
		color: #6CFD84; /* light green */
    }

    .pink_text {
         
        color: #FFD6E0; /* white text */
    }
	 
		.main_heading{
		
     font-weight: bold;
    font-size: 60px;
    color: #FFC107; /* A bright orange/yellow */

 
text-shadow:
        -1px -1px 0 #FFFFFF,
        1px -1px 0 #FFFFFF,
        -1px 1px 0 #FFFFFF,
        1px 1px 0 #FFFFFF; /* Creates a solid white outline */
	}
	
.product-card  {
   margin-bottom:25px;

  }
  
  
	.product-card img {
  
width:100%; object-fit:cover; border-top-left-radius:1rem; border-top-right-radius:1rem;

  }
  
  .newstyleback{
	  margin-top:15%;
  }
  .brand-big_new {
  font-weight: bold;
  font-size: 62px;
  margin: 0;
  line-height: .9;
  color: #ffde59;
  text-shadow: 0 6px 0 rgba(0, 0, 0, .09);
  font-family: "Nunito", system-ui, -apple-system, Segoe UI, Roboto;
}
	@media (max-width: 760px) {
  .product-card img {
  
  }  .newstyleback{
	  margin-top:0;
  }
		  .brand-big_new {
    
      font-size: 40px;
      
    }.main_heading{
		
    
    font-size: 40px;
     
	}
	 .pill {
    
    }
}


.term_accept{
	  color: #ffe000;
  font-weight: bold;
  font-size: 17px;
}
 
.term_accept:hover{
	  color: #0d6efd;
 
}
 
.newstyle{
	display: flex
;
  align-content: center;
  justify-content: center;
  align-items: center;
  flex-direction: row;
  flex-wrap: nowrap;
} .newstyleback{
	  display: inline;
  }.data_copy{
	   color: #ffc107;
  font-weight: bold;
  font-size: 17px;
  }
  
.tag {
  font-family: 'ComicSansMS', cursive;
  font-weight: 900;
  letter-spacing: 1px;
  margin: 12px 0 22px;
  color: #72ff73;
  font-size: 25px;
}