
.responsive { width: 100%; height: auto;} 
html, body { height: 100%; margin: 0; padding: 0; display: flex; flex-direction: column; position: relative; background-color: rgb(224, 247, 229); font-family: 'Roboto', sans-serif;}
#wrapper { flex: 1; /* Pushes the footer to the bottom */}

/**Common style**/
.crpheight{ box-shadow: 4px 7px 7px -5px;width:200px;height:200px;}
.crpheight:hover { box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.5) !important; transform: scale(1.05) !important; transition: all 0.3s ease-in-out !important; }
.cropcontent{ margin: 10px !important; margin-right: -10px !important; margin-left: -10px !important;  justify-content: center !important;box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.175) !important; /* large shadow */ border-radius: 0.5rem !important; background-color: rgba(255, 255, 255, 0.5) !important; align-items: center !important; padding: 1rem !important; }
/* Base font styles */
h1, h2, h3, h4, h5, h6, p, ul, table {
  font-family:'Roboto', sans-serif;
  line-height: 1.4;
  margin-bottom: 0.75rem;
  color: #222;
}

/* Default (desktop) font sizes */
body { font-size: 18px !important; }
h1 { font-size: 2.2rem !important;margin: 0px !important; }
h2 { font-size: 1.8rem !important;margin: 0px !important; }
h3 { font-size: 1.5rem !important;margin: 0px !important; }
h4 { font-size: 1.3rem !important;margin: 0px !important; }
h5 { font-size: 1.1rem !important;margin: 0px !important; }
h6 { font-size: 0.9rem !important;margin: 0px !important; }
p {text-indent: 2em; line-height: 1.6; margin: 1em 0; font-size: 1rem;}
  ul, table{ font-size: 1rem !important; text-align: justify !important;}
.btn{ font-size:1rem  !important;margin: 0px !important;}
/**head**/
.header{background-color: rgb(224, 247, 229); display: flex; align-items: center; justify-content: space-between; padding: 5px 5px; /* Adjust padding if needed */}
.cel_icon{padding: 0px;align-items:left; width:120px; max-height: 160px;}
.cel_icon img{ width:100%;height: 160px;}
.kau_icon{padding: 0px; align-items:right; width:120px; max-height: 200px;}
.kau_icon img{ width:85%;height: 150px;}
.portal_text_box{padding: 0px 20px;text-align: left; width:55%;}  
.portal_text { font-family:  'Roboto Slab', serif !important; font-size: 3vw !important; font-weight: 900 !important; }
.portal_text_box h3{ font-size:2vw;font-style:oblique; font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;text-shadow: 0px 0px 2px #000000;}
.portal_text_box marquee{ width:80%;}
.celkau_text_box{padding: 0px 40px 0px 0px;text-align: left; width:45%;}
.cel_text { font-family:'Roboto Slab', serif !important; font-size: 2vw !important; font-weight: 900 !important; text-align: right !important; }
.kau_text { font-size: 2vw !important; font-style: oblique !important; font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif !important; text-align: right !important; }
.livetime_box{text-align:right;width: 100%;}
.livetime{color:white;font-weight:bold;font-size:0.8vw;}

/* Menu */


.navbar, .dropdown-menu{ background-color: #63a874 !important; font-weight: 900 !important; font-size: large !important;}
.navbar .lang{border-radius: 5px !important; margin-right: 30px !important;margin-top: 0px !important;}
.lang .btn{height: 28px !important;text-align: center !important; padding: 0px 5px 2px 5px !important;}
.navbar :hover{background-color: #63a874 !important;   color: rgb(224, 247, 229) !important;}
.nav-link.active {background-color: #4c8661 !important;color: white !important; border-radius: 5px !important;}
.dropdown-menu{ background-color: #63a874 !important; color: rgb(13, 13, 14) !important; font-weight: 900 !important; font-size: large !important; }
.dropdown-menu:hover { background-color: #4c8661 !important; color: white !important; }

  /* Latest News */
#news{padding: 5px;}
.lnews { height: auto; width: 100%; font-style:oblique; font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif; display: flex; align-items: center; background-color: #c2fbd7; border-radius: 5px; box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.2); padding: 5px; text-align: right;  text-shadow: 0px 0px 1px #000000; }
.lnews:hover { box-shadow: rgba(44, 187, 99, .35) 0 -25px 18px -14px inset, rgba(44, 187, 99, .25) 0 1px 2px, rgba(44, 187, 99, .25) 0 2px 4px, rgba(44, 187, 99, .25) 0 4px 8px, rgba(44, 187, 99, .25) 0 8px 16px, rgba(44, 187, 99, .25) 0 16px 32px; transform: scale(1.001); }
.news-title { font-style: oblique; font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif; text-shadow: 0px 0px 2px #000000; font-size: 1.2rem; color: #000; white-space: nowrap; }
.news-marquee { width: 100%; }
.news-link { text-decoration: none; color: green; font-size: 1.1rem; margin-right: 20px; }

/* footer */
#footer { background-color: #198754; /* Bootstrap success color */ padding: 0; text-align: center; width: 100%; }
.social-icon { height: 30px; margin: 0 5px; transition: transform 0.3s ease-in-out; }/* Social Media Icons */
.social-icon:hover { transform: scale(1.1); }
.admin-icon { height: 30px; margin: 0 5px; float: right; transition: transform 0.3s ease-in-out; }/* Admin Icon */
.admin-icon:hover { transform: scale(1.1); }

/* General Content Section */
.content{background-color: #c9eeba;}
  #contentbox { margin: 5px !important;}
  .lbox { margin: 0px !important; padding:5px !important; width: 15% !important;height:64vh!important; }
  .cbox { margin: 0px !important; padding: 5px 10px 5px 10px!important; width: 60% !important;height:64vh!important;}
  .rbox{ margin: 0px !important; padding: 5px !important;width: 25% !important;height:64vh!important;}
  .lbox1 {padding: 10px !important; height:49% !important;margin: 0px !important;justify-content: center;align-items: center; display: flex;border: 1px solid #000 !important;}
  .lbox2 {padding: 5px !important;height:49% !important;margin-top: 10px !important;justify-content: center;align-items: center; display: flex;border: 1px solid #000 !important;}
  .agri{margin: 0px !important; text-align: center; border-radius: 0px 0px 5px 5px;height: auto; padding: 5px; justify-content: center;align-items: center; display: flex;}
  .agribox{margin: 0px !important;padding: 5px 15px 0px 15px !important;height: 19.5vh !important;}
  .picheight { height: 13vh !important; box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.3) !important; border: 1px solid #000000 !important; }
  .picheight:hover { box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.5) !important; transform: scale(1.05) !important; transition: all 0.3s ease-in-out !important; }
  .agribox h6{margin: 0px !important; padding-top: 5px;}
  .rbox1{ margin: 0px !important; height:50% !important;}
  .rbox2{ margin: 0px !important; height:50% !important; padding: 2vh 0px 0px 0px !important;} 
  .rpicheight{ height:29vh !important; margin: 0px;}
  .lbox1 .lpicheight{height:22vh !important; margin: 0px; }
  .lpicheight{height:29vh !important; margin: 0px;}


  /* Responsive Fixes */
/* Extra Small devices (tablets, 576px and up)(col) */
@media (max-width: 576px){
  body { font-size: 13px !important; }
  h1 { font-size: 1.6rem !important; }
  h2 { font-size: 1.4rem !important; }
  h3 { font-size: 1.2rem !important; }
  h4 { font-size: 1rem !important; }
  h5 { font-size: 0.9rem !important; }
  h6 { font-size: 0.8rem !important; }
  p  { font-size: 0.8rem !important; text-align: justify !important;}
    ul, table{ font-size: 0.8rem !important; text-align: justify !important;}

    /**head**/
.header{display: flex !important; align-items: center !important; justify-content: space-between !important; /* Adjust padding if needed */}
.cel_icon{ width:100px !important;align-items:left !important; max-height: 120px !important;}
.cel_icon img{ width:100% !important;height: 120px !important;}
.kau_icon{ max-height: 120px !important;width:90px !important;}
.kau_icon img{width:100% !important;height: 110px !important;}
.portal_text_box{padding: 0px !important;text-align: center !important; width:100% !important;}  
.portal_text {font-size: 3.5vw !important; font-weight: 900 !important;margin: 0 !important; padding: 0px !important;}
.portal_text_box h3{ font-size:3vw  !important;margin: 0 !important; padding: 0px !important;}
.portal_text_box marquee{ width:100% !important;}
.celkau_text_box{padding: 0px 10px 0px 0px;text-align: center !important; width:50%;}
.cel_text { font-size: 3vw !important; text-align: center !important; }
.kau_text { font-size: 3.2vw !important; text-align: center !important;}
.livetime_box{text-align:center !important;}
.livetime{font-size:2vw !important;}
/* Menu */

.navbar, .dropdown-menu{ background-color: #63a874; font-weight: 900; font-size: small;}
.navbar .lang{border-radius: 5px; margin-right: 30px;margin-top: 0px;}
.lang .btn{height: 30px;text-align: center; padding: 0px 5px 2px 5px;}
.navbar :hover{background-color: #63a874;   color: rgb(224, 247, 229);}
.nav-link.active {  background-color: #4c8661;  color: #fff !important;  border-radius: 5px;}
.dropdown-menu{ background-color: #63a874; color: rgb(13, 13, 14); font-weight: 900; font-size: small; }
.dropdown-menu:hover { background-color: #4c8661; color: white; }

/* General Content Section */
#contentbox {  height:auto !important;}
.lbox {padding:10px !important; width: 100% !important;height:74vh!important; }
.cbox {padding: 5px 10px 5px 10px!important; width: 100% !important;height:auto !important;}
.rbox{padding: 10px !important;width: 100% !important;height:74vh!important;}
.lbox1 {height:49.5% !important;margin: 0px !important;}
.lbox2 {height:47.5% !important;margin-top: 20px !important;}
.rpicheight{ height:34vh !important;}
.lbox1 .lpicheight{height:22vh !important;}
.lpicheight{height:31vh !important;}
.agribox{margin: 0px !important;padding: 5px 25px 5px 25px !important;height: 22vh !important;}
.picheight { height: 16vh !important; }
}

/* Small devices (tablets, 576px and up)(col-sm) */
@media (min-width: 576px) and (max-width: 767.98px) {
  body { font-size: 14px !important; }
  h1 { font-size: 1.8rem !important; }
  h2 { font-size: 1.6rem !important; }
  h3 { font-size: 1.3rem !important; }
  h4 { font-size: 1.1rem !important; }
  h5 { font-size: 0.95rem !important; }
  h6 { font-size: 0.85rem !important; }
  p  { font-size: 0.85rem !important;  text-align: justify !important;}
    ul, table{ font-size: 0.85rem !important; text-align: justify !important;}

  /**head**/
.header{display: flex !important; align-items: center !important; justify-content: space-between !important; /* Adjust padding if needed */}
.cel_icon{ width:100px !important;align-items:left !important; max-height: 120px !important; }
.cel_icon img{ width:100% !important;height: 120px !important;}
.kau_icon{ max-height: 120px !important;width:90px !important;}
.kau_icon img{width:100% !important;height: 110px !important;}
.portal_text_box{padding: 0px !important;text-align: center !important; width:100% !important;}  
.portal_text {font-size: 3.5vw !important; font-weight: 900 !important;margin: 0 !important; padding: 0px !important;}
.portal_text_box h3{ font-size:3vw  !important;margin: 0 !important; padding: 0px !important;}
.portal_text_box marquee{ width:100% !important;}
.celkau_text_box{padding: 0px 10px 0px 0px;text-align: center !important; width:50%;}
.cel_text { font-size: 3vw !important; text-align: center !important; }
.kau_text { font-size: 3.2vw !important; text-align: center !important;}
.livetime_box{text-align:center !important;}
.livetime{font-size:2vw !important;}


/* .cel_icon{padding: 0px !important; align-items:left !important; width:120px !important; max-height: 140px !important;background-color: #222 !important; }
.cel_icon img{ width:100% !important;height: 140px !important;}
.kau_icon{padding: 0px !important; align-items:right !important; width:100px !important; max-height: 140px !important;}
.kau_icon img{ width:100% !important;height: 130px !important;}
.portal_text_box{padding: 0px 0px 0px 0px!important;text-align: center !important; width:100% !important;}
.portal_text {font-size: 0.75rem !important; font-weight: 900 !important;margin: 0 !important; padding: 0px !important;}
.portal_text_box h3{ font-size:0.7rem  !important;margin: 0 !important; padding: 0px !important;}
.portal_text_box marquee{ width:100% !important;}
.celkau_text_box{padding: 0px 0px 0px 0px;text-align: left; width:47%;}
.cel_text { font-family: 'Noto Sans Malayalam', sans-serif !important; font-size: 0.7rem !important; font-weight: 900 !important; text-align: center !important;margin: 0 !important; padding: 0px !important;}
.kau_text { font-size: 0.7rem !important;margin: 0 !important; padding: 0px !important;font-style: oblique !important; font-family: 'Noto Sans Malayalam', sans-serif !important; text-align: center !important; }
.livetime_box{text-align:center !important;width: 100% !important;margin: 0 !important; padding: 0px !important;}
.livetime{color:white !important;font-weight:bold !important;font-size:0.55rem !important;margin: 0 !important; } */

/* General Content Section */
#contentbox {  height:auto !important;}
.lbox {padding:10px !important; width: 33.33% !important;height:74vh!important; }
.cbox {padding: 5px 10px 5px 10px!important; width: 100% !important;height:auto !important;}
.rbox{padding: 10px !important;width: 66.33% !important;height:74vh!important;}
.lbox1 {height:49.5% !important;margin: 0px !important;}
.lbox2 {height:47.5% !important;margin-top: 20px !important;}
.rpicheight{ height:34vh !important;}
.lbox1 .lpicheight{height:22vh !important;}
.lpicheight{height:31vh !important;}
.agribox{margin: 0px !important;padding: 5px 25px 5px 25px !important;height: 25vh !important;}
.picheight { height: 18vh !important; }
}

/* Medium devices (tablets, 768px and up)(col-md) */
@media (min-width: 768px) and (max-width: 991.98px) {
  /* Base font styles */
  body { font-size: 15px !important; }
  h1 { font-size: 2rem !important; }
  h2 { font-size: 1.6rem !important; }
  h3 { font-size: 1.3rem !important; }
  h4 { font-size: 1.1rem !important; }
  h5 { font-size: 0.9rem !important; }
  h6 { font-size: 0.8rem !important; }
  p  { font-size: 0.85rem !important; text-align: justify !important;}
    ul, table{ font-size: 0.85rem !important; text-align: justify !important;}

/**head**/
.cel_icon{ width:100px !important; max-height: 120px !important;}
.cel_icon img{ width:100% !important;height: 120px !important;}
.kau_icon{ max-height: 120px !important;width:80px !important;}
.kau_icon img{width:100% !important;height: 110px !important;}
.portal_text_box{padding: 0px !important;text-align: left !important; width:50% !important;}  
.portal_text {font-size: 3vw !important; font-weight: 900 !important;margin: 0 !important; padding: 0px !important;}
.portal_text_box h3{ font-size:2.5vw  !important;margin: 0 !important; padding: 0px !important;}
.portal_text_box marquee{ width:100% !important;}
.celkau_text_box{padding: 0px 10px 0px 0px;text-align: left; width:50%;}
.cel_text { font-size: 2.6vw !important; }
.kau_text { font-size: 2.8vw !important;}
.livetime{font-size:1.4vw !important;}


/* General Content Section */
#contentbox {  height:auto !important;}
.lbox {padding:10px !important; width: 33.33% !important;height:74vh!important; }
.cbox {padding: 5px 10px 5px 10px!important; width: 100% !important;height:64vh!important;}
.rbox{padding: 10px !important;width: 66.33% !important;height:74vh!important;}
.lbox1 {height:49.5% !important;margin: 0px !important;}
.lbox2 {height:47.5% !important;margin-top: 20px !important;}
.rpicheight{ height:34vh !important;}
.lbox1 .lpicheight{height:22vh !important;}
.lpicheight{height:31vh !important;}
}



/* Large devices (desktops, 992px and up)(col-lg) */
@media (min-width: 992px) and (max-width: 1199.98px) {/* Styles for tablets */
  /* Base font styles */
  body { font-size: 16px !important; }
  h1 { font-size: 2rem !important; }
  h2 { font-size: 1.6rem !important; }
  h3 { font-size: 1.3rem !important; }
  h4 { font-size: 1.1rem !important; }
  h5 { font-size: 0.9rem !important; }
  h6 { font-size: 0.8rem !important; }
  p  { font-size: 0.9rem !important; text-align: justify !important;}
    ul, table{ font-size: 0.9rem !important; text-align: justify !important;}
  

/**head**/
.cel_icon{ width:100px !important; max-height: 120px !important;}
.cel_icon img{ width:100% !important;height: 120px !important;}
.kau_icon{ max-height: 120px !important;width:80px !important;}
.kau_icon img{width:100% !important;height: 110px !important;}
.portal_text_box{padding: 0px !important;text-align: left !important; width:55% !important;}  
.portal_text {font-size: 2.5vw !important; font-weight: 900 !important;margin: 0 !important; padding: 0px !important;}
.portal_text_box h3{ font-size:2vw  !important;margin: 0 !important; padding: 0px !important;}
.portal_text_box marquee{ width:100% !important;}
.celkau_text_box{padding: 0px 10px 0px 0px;text-align: left; width:45%;}
.cel_text { font-size: 2.5vw !important; }
.kau_text { font-size: 2.4vw !important;}
.livetime{font-size:1.2vw !important;}

 /* Menu */
.navbar, .dropdown-menu {  font-size: 1.2vw !important;}
.lang .btn {height: 28px !important;padding: 5px 5px 2px 5px !important;font-size: 1.2vw !important;}
.dropdown-menu {font-size: 1.2vw !important;}

/* General Content Section */
  #contentbox {  height:auto !important;}
  .lbox {padding:10px !important; width: 33.33% !important;height:74vh!important; }
  .cbox {padding: 5px 10px 5px 10px!important; width: 100% !important;height:64vh!important;}
  .rbox{padding: 10px !important;width: 66.33% !important;height:74vh!important;}
  .lbox1 {height:49.5% !important;margin: 0px !important;}
  .lbox2 {height:47.5% !important;margin-top: 20px !important;}
  .rpicheight{ height:34vh !important;}
  .lbox1 .lpicheight{height:22vh !important;}
  .lpicheight{height:31vh !important;}

}



/* Extra large devices (large desktops, 1281px and up) */
@media (min-width: 1200px) and (max-width: 1399.98px) {
  /* Base font styles */
  body { font-size: 17px !important; }
  h1 { font-size: 2.1rem !important; }
  h2 { font-size: 1.7rem !important; }
  h3 { font-size: 1.4rem !important; }
  h4 { font-size: 1.2rem !important; }
  h5 { font-size: 1rem !important; }
  h6 { font-size: 0.78rem !important; }
  p  { font-size: 0.9rem !important;  text-align: justify !important;}
    ul, table{ font-size: 0.9rem !important; text-align: justify !important;}

/**head**/
.cel_icon{ width:110px !important; max-height: 140px !important;}
.cel_icon img{ width:100% !important;height: 140px !important;}
.kau_icon{ max-height: 120px !important;width:80px !important;}
.kau_icon img{width:100% !important;height: 130px !important;}
.portal_text_box{padding: 0px !important;text-align: left !important; width:55% !important;}  
.portal_text {font-size: 2.5vw !important; font-weight: 900 !important;margin: 0 !important; padding: 0px !important;}
.portal_text_box h3{ font-size:2vw  !important;margin: 0 !important; padding: 0px !important;}
.portal_text_box marquee{ width:100% !important;}
.celkau_text_box{padding: 0px 10px 0px 0px;text-align: left; width:45%;}
.cel_text { font-size: 2.5vw !important; }
.kau_text { font-size: 2.4vw !important;}
.livetime{font-size:1vw !important;}

/* Menu */
.navbar, .dropdown-menu { font-size: 1.1vw !important;}
.lang .btn {height: 28px !important;padding: 5px 5px 2px 5px !important;font-size: 1.1vw !important;}
.dropdown-menu { font-size: 1.1vw !important;}

/* General Content Section */
  .lbox {height:60vh!important; }
  .cbox {height:60vh!important;}
  .rbox{height:60vh!important;}
  .lbox1 h5 { font-size: 1vw !important; }
  .agribox{height: 18.3vh !important;}
  .picheight { height: 12vh !important;} 
  .rpicheight{ height:27.5vh !important;}
  .lbox1 .lpicheight{height:18vh !important; }
  .lpicheight{height:25vh !important;}


}
/* Extra Extra large devices (large desktops, 1281px and up) */
@media (min-width: 1400px) {
  /* .cel_icon { background-color: #cbcfda !important;} */
  /* Base font styles */
  body { font-size: 18px !important; }
  h1 { font-size: 2.2rem !important; }
  h2 { font-size: 1.8rem !important; }
  h3 { font-size: 1.5rem !important; }
  h4 { font-size: 1.3rem !important; }
  h5 { font-size: 1.1rem !important; }
  h6 { font-size: 1rem !important; }
  p  { font-size: 1rem !important; text-align: justify !important;}
  ul, table{ font-size: 1rem !important; text-align: justify !important;}


  /* Menu */
.navbar, .dropdown-menu {  font-size: 0.95vw !important;}
.lang .btn {height: 28px !important;padding: 1px 5px 2px 5px !important;font-size: 0.95vw !important;}

.dropdown-menu {font-size: 0.95vw !important;}
  }
