/* GLOBAL SETTINGS */
*{
  margin:0;
  padding:0;
  box-sizing:border-box;
  font-family: Arial, Helvetica, sans-serif;
}

html, body {
  width: 100%;
  overflow-x: hidden;
}


body { background-color: #fff; color: #333; overflow-x: hidden; }
.container { max-width: 1200px; margin: 0 auto; padding: 0 15px; }

/* HEADER */
.cs-header{background:linear-gradient(#3f3f3f,#1b1b1b);color:#fff;position:sticky;top:0;z-index:999}
.cs-inner{max-width:1200px;margin:auto;height:50px;padding:0 15px;display:flex;align-items:center;justify-content:space-between}
.cs-left{display:flex;align-items:center;gap:12px}
.cs-menu{display:none;font-size:20px;cursor:pointer}
.cs-logo{font-size:22px;font-weight:bold}
.cs-nav{display:flex;height:100%}
.cs-nav a{display:flex;align-items:center;gap:6px;padding:0 14px;font-size:13px;color:#ccc;text-decoration:none;border-right:1px solid #333}
.cs-nav a.active{background:#222;color:#fff;border-left:1px solid #333}
.cs-nav a:hover{background:#333;color:#fff}
.cs-right{cursor:pointer;font-size:16px}
.cs-search{display:none;position:absolute;right:10px;top:52px;background:#fff;padding:8px;border-radius:4px;box-shadow:0 4px 10px rgba(0,0,0,.3)}
.cs-search input{width:180px;padding:6px 30px 6px 8px;border:1px solid #ccc}
.cs-search i{position:absolute;right:14px;top:50%;transform:translateY(-50%);color:#333}
@media(max-width:992px){.cs-menu{display:block}.cs-logo{font-size:18px}.cs-nav{position:fixed;top:50px;left:0;width:100%;background:#111;flex-direction:column;transform:translateY(-110%);transition:.35s ease;z-index:998}.cs-nav.show{transform:translateY(0)}.cs-nav a{padding:14px 16px;border:none;border-bottom:1px solid #333;background:#000}}

/* HEROSECTION */
.hero{padding:100px 20px;background:#f5f5f5}
.hero-container{max-width:1100px;margin:auto;text-align:center}
.hero-title{font-size:48px;font-weight:900;line-height:1.2;margin-bottom:50px;color:#000}
.hero-questions{display:grid;grid-template-columns:1fr 1fr;gap:60px;margin-bottom:30px;align-items:center}
.question-item{display:flex;align-items:flex-start;gap:18px;text-align:left}
.question-item i{font-size:34px;color:#000;margin-top:5px}
.question-item p{font-size:22px;font-weight:700;line-height:1.4;margin:0}
.hero-description{font-size:14px;line-height:1.6;max-width:900px;margin:0 auto 50px;color:#222}
.hero-actions{text-align:center}
.btn{padding:18px 40px;font-size:18px;border-radius:50px;font-weight:600;cursor:pointer;transition:.3s ease}
.btn-outline{border:2px solid #444;background:#1F1F1F;color:#fff}
.btn-outline:hover{background:#000;border-color:#000}

@media(max-width:992px){
.hero-title{font-size:38px}
.hero-questions{gap:40px}
.question-item p{font-size:20px}
}

@media(max-width:600px){
.hero{padding:70px 20px}
.hero-title{font-size:28px}
.hero-questions{grid-template-columns:1fr;gap:30px}
.question-item{text-align:left}
.question-item p{font-size:18px}
.hero-description{font-size:16px;margin:0 auto 20px}
.btn{width:100%;font-size:16px;padding:16px}
}



/* category carosel GRID */
.promo-wrap{max-width:1400px;margin:0px auto;padding:20px;background:#1f1f1f;border-radius:0px}
.promo-title{ padding-bottom: 20px; display:flex;align-items:center;gap:8px;font-size:20px;color:#fff;margin-bottom:14px;justify-content: center;}
.promo-title i{color:#ffcc4d;font-size:18px}
.promo-strip{overflow:hidden;width:100%}
.promo-track{
  display:flex;
  gap:12px;
  padding-bottom:20px;
  width:max-content;
}

/* First row */
#promoTrack1{
  animation:slideLeft 28s linear infinite;
}

/* Second row */
#promoTrack2{
  animation:slideRight 28s linear infinite;
}

@keyframes slideLeft{
  from{transform:translateX(0)}
  to{transform:translateX(-50%)}
}

@keyframes slideRight{
  from{transform:translateX(-50%)}
  to{transform:translateX(0)}
}

.promo-strip:hover .promo-track{animation-play-state:paused}
.promo-item{display:flex;align-items:center;gap:6px;padding:8px 14px;background:#2c2c2c;border-radius:999px;font-size:14px;color:#e0e0e0;white-space:nowrap;cursor:pointer;transition:background .2s ease}
.promo-item i{font-size:13px;color:#bdbdbd}
.promo-item:hover{background:#3a3a3a;color:#fff}
@keyframes slide{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media(max-width:768px){.promo-title{font-size:18px}.promo-item{font-size:13px;padding:7px 12px}}
@media(max-width:480px){.promo-title{font-size:16px; text-align: center;}.promo-item{font-size:12px;padding:6px 10px}}
.promo-footer{text-align:center;margin-top:18px}.promo-viewall{display:inline-flex;align-items:center;gap:6px;padding:8px 18px;background:#2c2c2c;color:#fff;font-size:14px;text-decoration:none;border-radius:6px;transition:.3s ease}.promo-viewall:hover{background:#3a3a3a;transform:translateY(-2px)}
@media(max-width:480px){
  .promo-wrap {
    max-width: 1400px;
    margin: 0px auto;
    padding: 20px 0px 20px 0px ;
    background: #1f1f1f;
    border-radius: 0px;
}
}

 .promo-strip .promo-track a:hover{text-decoration:none;}

/* MAIN LAYOUT */
.main-layout { display: flex; gap: 30px; margin-top: 20px; }
.content-left { flex: 2; }
.sidebar { flex: 1; }

.block-header { background: #f6f6f6; border: 1px solid #ddd; padding: 10px; font-weight: bold; font-size: 14px; margin-bottom: 15px; display: flex; align-items: center; gap: 10px; }

/* SCRIPTS LIST */
.script-item { display: flex; gap: 20px; padding: 20px 0; border-bottom: 1px solid #eee; }
.script-img img { width: 150px; height: 100px; object-fit: cover; border: 1px solid #ddd; }
.script-info h2 { font-size: 20px; color:#585858; margin-bottom: 5px; font-weight: 500px; }
.script-info .meta { font-size: 11px; color: #000000; margin-bottom: 8px;     background:  #e0e0e0;
    inline-size: max-content; }
.script-info .summary { font-size: 13px; color: #555; line-height: 1.5; }
.view-more-bottom { margin: 20px 0; font-weight: bold; font-size: 14px; cursor: pointer; }
@media (max-width: 768px) {.container {flex-direction: column; /* Sidebar-ai kizhala kondu varum */}
.script-item {flex-direction: column; /* Image-ai mela, text-ai kizhala vaikum */}
.script-img img {width: 100%; /* Image full width-la irukkum */height: auto;}}
@media (max-width: 768px) {.script-img img{height: 200px;}}

/* SIDEBAR */
.sidebar-block { border: 1px solid #ddd; margin-bottom: 25px; background: #fff; }
.ad-space { padding: 10px; text-align: center; }
.ad-space img { width: 100%; margin-bottom: 10px; height:300px }
.contact-form { padding: 15px; display: flex; flex-direction: column; gap: 10px; }
.contact-form input, .contact-form textarea { padding: 8px; border: 1px solid #ccc; width: 100%; font-size: 13px; }
.contact-form button { background: #4a90e2; color: #fff; border: none; padding: 10px; border-radius: 4px; cursor: pointer; font-weight: bold; }
.badge-center { text-align: center; padding: 15px; }
.badge-center p { font-size: 12px; margin: 10px 0; color: #666; }
.badge-img { width: 180px; margin-bottom: 15px; }
.dl-btn { background: #ff0000; color: #fff; border: none; padding: 8px 15px; border-radius: 4px; cursor: pointer; }

/* FOOTER */
.footer { border-top: 1px solid #eee; padding: 30px 0; background: #fff; font-size: 13px; }
.footer-content { display: flex; justify-content: space-between; align-items: flex-start; }
.social-links { display: flex; gap: 8px; margin-bottom: 5px; }
.social-links i { font-size: 20px; color: #333; }
.footer-nav a { text-decoration: none; color: #333; margin: 0 5px; }
.online-widget { position: fixed; bottom: 0; right: 20px; background: #000; color: #fff; padding: 10px 40px; border-radius: 10px 10px 0 0; font-weight: bold; z-index: 2000; }

/* RESPONSIVE DESIGN */
@media (max-width: 992px) {
  .nav { display: none; }
  .category-grid { grid-template-columns: repeat(2, 1fr); }
  .main-layout, .promo-grid { flex-direction: column; display: block; }
}
@media (max-width: 600px) {
  .category-grid { grid-template-columns: 1fr; }
  .footer-content { flex-direction: column; text-align: center; gap: 20px; }
}


@media (max-width: 480px){
  .script-info .meta{
    inline-size: auto;
    display: block;
    white-space: normal;
    word-break: break-word;
  }
}


/* All links default state */
a {
    text-decoration: none; /* Default-aa underline-ai remove pannum */
    color: inherit;       /* Suthivulla text color-aiyae link-kum edukum (No Blue) */
    transition: 0.2s ease-in-out;
}

/* Hover state: Black Underline mattum varum */
a:hover {
    text-decoration: underline;
    text-decoration-color: #000; /* Underline black-aa irukkum */
    color: #000; /* Hover pannumpodu text black-aa maarum */
}

/* Navigation specific links hover bypass (if needed) */
.cs-nav a:hover {
    text-decoration: none; /* Nav menu-la underline vendam-na idhai use pannalam */
    background: #333;
    color: #fff;
}
.promo-viewall:hover {
    background: #ffffff;
    transform: translateY(-2px);
}