/*
 * Responsee CSS - v3 - 2015-08-22
 * http://www.myresponsee.com
 * Copyright 2015, Vision Design - graphic zoo
 * Free to use under the MIT license.
*/
* {  
  -webkit-box-sizing:border-box;
  -moz-box-sizing:border-box;
  box-sizing:border-box;
  margin:0;	
}

body {
    background: linear-gradient(to bottom, #d3d3d3, #b5f8f4); /* Enhanced gradient for appealing look */
    font-size: 100%;
    font-family: "Open Sans", Arial, sans-serif;
    color: #333333; /* Darker text for better readability */
}

p {
    margin-left: 20px;
    margin-right: 10px; 
    line-height: 1.6; /* Improved line-height */
    text-align: justify;
    text-indent: 2.8em;
}

p.small { 
    line-height: 0.7; 
} 

p.big { 
    line-height: 1.8; 
} 

h1, h2, h3, h4, h5, h6 {
    color: #444;
    font-weight: normal;
    margin: 0.2em 0 0.2em 0;    
}

h1 {font-size:2.4em; color: #800000; text-shadow:1px 1px 2px rgba(0,0,0,0.2);} /* Softer shadow */
h2 {font-size:2.2em; color: #800000; text-shadow:1px 1px 2px rgba(0,0,0,0.2);}  
h3 {font-size:1.8em; color: #800000; text-shadow:1px 1px 2px rgba(0,0,0,0.2);}  
h4 {font-size:1.4em;}  
h5 {font-size:1.2em;}  
h6 {font-size:1em;}    

a, a:link, a:visited, a:hover, a:active {
    text-decoration:none;
    color:#650e03;
    transition: color 0.3s ease; /* Smooth color transition */
}

a:hover {
    color: #04aa6d; /* Vibrant hover color */
}

img {
    border:0;
    display:block;
    height:auto;
    max-width:100%;
    width:auto;
    border-radius: 8px; /* Rounded corners for modern look */
    transition: transform 0.3s ease;
}

img:hover {
    transform: scale(1.02); /* Subtle zoom on hover */
}

.owl-item img, .full-img {
    max-width: none;
    width:100%;
}  

table {
    background: #fff;
    border:1px solid #d0d0d0;
    border-collapse:collapse;
    border-spacing:0;
    text-align:left;
    width:100%;
    border-radius: 8px; /* Rounded tables */
    overflow: hidden; /* For rounded corners */
}

table tr td, table tr th {padding:0.625em;}

table tfoot, table thead {background: #e0e0e0;}

table tr:nth-of-type(2n) {background: #f0f0f0;} /* Alternating rows with lighter color */

th {border-right:1px solid #fff;}

td {border-right:1px solid #e0e0e0;}

.size-960 .line {
    margin:0 auto;
    max-width:60em;
    padding:0 0.625em;
}

.size-1140 .line {
    margin:0 auto;
    max-width:71.25em;
    padding:0 0.625em;
}

.size-960.align-content-left .line, .size-1140.align-content-left .line {margin-left:0;}

form {line-height:1.4em;}

nav {
    display:block;
    width:100%;
    background: #075546;
    box-shadow: 0 2px 10px rgba(0,0,0,0.2); /* Shadow for depth */
}

.line:after, nav:after, .center:after, .box:after {
    clear:both;
    content:".";
    display:block;
    height:0;
    line-height:0;
    visibility:hidden;
}

.top-nav ul {padding:0;}

.top-nav ul ul {
    position:absolute;
    background:#262626;
    border-radius: 0 0 8px 8px; /* Rounded dropdown */
}

.top-nav li {
    float:left;
    list-style:none outside none;
    cursor:pointer;
}

.top-nav li a {
    padding:1.25em;
    display:block;
    color:#fff; 
    transition: background 0.3s ease;
}

.top-nav li ul li a {
    background:none repeat scroll 0 0 #222;
    min-width:100%;
    padding:0.625em;
}

.top-nav li a:hover, .aside-nav li a:hover {background:#999;}

.top-nav li ul {display:none;}

.top-nav li ul li {
    float:none;
    list-style:none outside none;
    min-width:100%;
    padding:0;
}

.top-nav li ul li ul li {
    float:none;
    list-style:none outside none;
    min-width:100%;
    padding:0;
}

.count-number {
    background:none repeat scroll 0 0 #777;
    -webkit-border-radius:10em;
    -moz-border-radius:10em;
    border-radius:10em;
    display:inline-block;
    font-size:0.7em;
    line-height:1.8em;
    margin-left:0.3125em;
    text-align:center;
    width:1.8em;  
    color:#fff; 
    margin-bottom:-0.3125em; 
}

ul.chevron .count-number {display:none;}

ul.chevron .submenu > a:after, ul.chevron .sub-submenu > a:after,ul.chevron .aside-submenu > a:after, ul.chevron .aside-sub-submenu > a:after {
    content:"\f006";
    display:inline-block;
    font-family:mfg;
    font-size:0.7em;
    margin:0 0.625em;
}

.top-nav .active-item a {background:none repeat scroll 0 0 #999;}

.aside-nav > ul > li.active-item > a:link, .aside-nav > ul > li.active-item > a:visited {
    background:none repeat scroll 0 0 #999;
    color:#fff;
}

.centerImage {
    text-align:center;
    display:block;
}

.hangingindent {
    padding-left: 25px ;
    text-indent: -25px ;
}

.newspaper {
    -moz-column-count:3; /* Firefox */
    -webkit-column-count:3; /* Safari and Chrome */
    column-count:3;

    -moz-column-gap:3px; /* Firefox */
    -webkit-column-gap:3px; /* Safari and Chrome */
    column-gap:3px;

    background:skyblue;
    text-align:justify;
    margin-left: 20px;
    margin-right: 10px; 
    line-height:200%
}

ul.svertical {
    overflow: auto;
    background: #075546; /* background of menu */
    margin: 0;
    padding: 0;
    padding-top: 7px; /* top padding */
    list-style-type: none;
}

ul.svertical li {
    text-align: right; /* right align menu links */
}

ul.svertical li a {
    position: relative;
    display: inline-block;
    text-indent: 5px;
    overflow: hidden;
    background: rgb(108, 243, 232); /* initial background color of links */
    font: bold 16px Germand;
    text-decoration: none;
    padding: 5px;
    margin-bottom: 7px; /* spacing between links */
    color: black;
    -moz-box-shadow: inset -7px 0 5px rgba(114,114,114, 0.8); /* inner right shadow added to each link */
    -webkit-box-shadow: inset -7px 0 5px rgba(114,114,114, 0.8);
    box-shadow: inset -7px 0 5px rgba(114,114,114, 0.8);
    -moz-transition: all 0.2s ease-in-out; /* CSS3 transition of hover properties */
    -webkit-transition: all 0.2s ease-in-out;
    -o-transition: all 0.2s ease-in-out;
    -ms-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
}

ul.svertical li a:hover {
    padding-right: 30px; /* add right padding to expand link horizontally to the left */
    color: black;
    background: rgb(153,249,75);
    -moz-box-shadow: inset -3px 0 2px rgba(114,114,114, 0.8); /* contract inner right shadow */
    -webkit-box-shadow: inset -3px 0 5px rgba(114,114,114, 0.8);
    box-shadow: inset -3px 0 5px rgba(114,114,114, 0.8);
}

ul.svertical li a:before{ /* CSS generated content: slanted right edge */
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    border-style: solid; 
    border-width: 70px 0 0 20px; /* Play around with 1st and 4th value to change slant degree */
    border-color: transparent transparent transparent black; /* change black to match the background color of the menu UL */
}

.topnav {
    overflow: hidden;
    background-color: #333;
    border-radius: 8px; /* Rounded nav */
    box-shadow: 0 2px 10px rgba(0,0,0,0.2);
}

.topnav a {
    float: left;
    color: #f2f2f2;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    font-size: 17px;
    transition: background 0.3s ease, color 0.3s ease;
}

.topnav a:hover {
    background-color: #ddd;
    color: black;
}

.topnav a.active {
    background-color: #04aa6d;
    color: white;
}

.sidebar {
    margin: 0;
    padding: 0;
    width: 200px;
    background-color: #f1f1f1;
    position: fixed;
    height: 100%;
    overflow: auto;
    box-shadow: 2px 0 10px rgba(0,0,0,0.1); /* Shadow for depth */
}

.sidebar a {
    display: block;
    color: black;
    padding: 16px;
    text-decoration: none;
    transition: background 0.3s ease;
}

.sidebar a.active {
    background-color: #04aa6d;
    color: white;
}

.sidebar a:hover:not(.active) {
    background-color: #555;
    color: white;
}

div.content {
    margin-left: 200px;
    padding: 1px 16px;
    height: 1000px;
}

@media screen and (max-width: 700px) {
    .sidebar {
        width: 100%;
        height: auto;
        position: relative;
    }
    .sidebar a {float: left;}
    div.content {margin-left: 0;}
}

@media screen and (max-width: 400px) {
    .sidebar a {
        text-align: center;
        float: none;
    }
}

.dropbtn {
    background-color: #006699;
    color: white;
    padding: 16px;
    font-size: 16px;
    border: none;
    cursor: pointer;
    border-radius: 4px;
    transition: background 0.3s ease;
}

.dropdown {
    position: relative;
    display: inline-block;
}

.dropdown-content {
    display: none;
    position: absolute;
    right: 0;
    background-color: #f9f9f9;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
    border-radius: 8px;
}

.dropdown-content a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    transition: background 0.3s ease;
}

.dropdown-content a:hover {background-color: #f1f1f1;}

.dropdown:hover .dropdown-content {display: block;}

.dropdown:hover .dropbtn {background-color: #3e8e41;}