/**=====================================================================
* Frontend CSS custom developed for the LTcms and further adjusted to
* UCOLD specs. Thanks to team at - by LWEGATECH
============================================================================**/
:root {
    --ltc-font: 'Fira Sans', 'Segoe UI', sans-serif;
    --ltc-font-2: "Open Sans", sans-serif;
    --ltc-font-3: "Poppins", sans-serif;
    --ltc-base: #000000;
    --ltc-base-rgb: 17, 26, 76;
    --ltc-orange: #bf0c10;
    --ltc-orange-rgb: 191, 12, 16;
    --ltc-yellow: #f5d800;
    --ltc-yellow-rgb: 245, 216, 0;
    --ltc-white: #ffffff;
    --ltc-white-rgb: 255, 255, 255;
    --ltc-black: #1E3717;
    --ltc-black-rgb: 51, 51, 51;
    --ltc-gray: #777777;
    --ltc-gray-rgb: 119, 119, 119;
    --ltc-primary: #116939;
    --ltc-primary-rgb: 240, 240, 240;
    --ltc-font-size: 15px;
    --gradient-primary: linear-gradient(135deg, var(--ltc-base) 0%, var(--ltc-primary) 100%);
    --gradient-accent: linear-gradient(135deg, var(--ltc-orange) 0%, #f5a76e 100%);
    --gradient-dark-to-medium: linear-gradient(135deg, var(--ltc-base) 0%, var(--ltc-primary) 100%);
    --gradient-top: linear-gradient(135deg, rgba(26,54,93,1) 0%, rgba(66,153,225,0.8) 100%);
    --gradient-logo: linear-gradient(135deg, #ffffff 0%, #ebf8ff 100%);
    --accent: #f6ad55;
    --accent-dark: #dd6b20;
    --light: #ebf8ff;
    --text: #2d3748;
    --text-light: #f7fafc;
    --sidebar-width: 250px;
    --sidebar-collapsed-width: 80px;
    --transition-speed: 0.3s;
  }


::-webkit-scrollbar {width: 5px; background:var(--ltc-primary);}
::-webkit-scrollbar-thumb {	background: rgba(var(--ltc-primary-rgb), 0.4); }
::selection {background:var(--ltc-primary);color:#FFF;text-shadow:none;}
::-webkit-selection {background:var(--ltc-primary);color:#FFF;text-shadow:none;}
::-moz-selection {background:var(--ltc-primary);color:#FFF;text-shadow:none;}
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Poppins', 'Segoe UI', sans-serif;
}
/* WebKit-based browsers (Chrome, Safari, Edge) */
.scroll-container::-webkit-scrollbar {
    width: 12px;
    background: var(--ltc-primary);
}

.scroll-container::-webkit-scrollbar-thumb {
    background: rgba(var(--ltc-primary-rgb), 0.4);
    border-radius: 6px;
    border: 3px solid var(--ltc-primary);
}

.scroll-container::-webkit-scrollbar-thumb:hover {
    background: rgba(var(--ltc-primary-rgb), 0.6);
}

/* Firefox */
.scroll-container {
    scrollbar-width: thin;
    scrollbar-color: rgba(var(--ltc-primary-rgb), 0.4) var(--ltc-primary);
}
body {overflow-x: hidden;color: var(--text);font-weight:300;}
 /* Custom slider animations - won't conflict with AOS */
.slider-fade-up {animation: sliderFadeUp 0.8s ease 1.4s both;}
.slider-fade-left {animation: sliderFadeLeft 1.1s ease 1.4s both;}
.slider-fade-right {animation: sliderFadeRight 1.2s ease 1.6s both;}
@keyframes sliderFadeUp {
    0% { opacity: 0; transform: translateY(20px); }
    100% { opacity: 1; transform: translateY(0); }
}

@keyframes sliderFadeLeft {
    0% { opacity: 0; transform: translateX(-20px); }
    100% { opacity: 1; transform: translateX(0); }
}

@keyframes sliderFadeRight {
    0% { opacity: 0; transform: translateX(20px); }
    100% { opacity: 1; transform: translateX(0); }
}

.fade-up {opacity: 0;transform: translateY(20px);transition: opacity 0.6s ease-out, transform 0.6s ease-out;    will-change: opacity, transform;}
.fade-up.active {opacity: 1;transform: translateY(0);}
.fade-up.delay-1 { transition-delay: 0.2s; }
.fade-up.delay-2 { transition-delay: 0.4s; }
.fade-up.delay-3 { transition-delay: 0.6s; }

/*==================================================================
* Header
*====================================================================*/
.header{background:rgba(var(--ltc-primary-rgb),0.05);color:var(--ltc-base);min-height:80px;height:100%;}
.navbar-brand img{width:100%;height:60px;object-fit:contain;}
.header .socials-login ul{display:inline-flex;}
.header .socials-login ul li{justify-content: space-around;list-style-type: none;display: flex;padding-right:5px;}
.header .socials-login a{padding: 10px;background: rgba(var(--ltc-gray-rgb),0.15);border-radius: 50%;width: 50px;height: 50px;align-items: center;display: flex;color:var(--ltc-gray);transition:0.2s all;text-decoration:none;}
.header .socials-login a.login{background:var(--ltc-primary);color:var(--ltc-white);}
.header .socials-login i{margin: 0 auto;font-size:30px;}
.header .socials-login a:hover{background:var(--ltc-primary);color:var(--ltc-white);}
/*==================================================================
* Sidebar
*====================================================================*/
#sidebar {position: sticky;top: 0;left: 0;height: 100vh;width: var(--sidebar-width);transition: all var(--transition-speed) ease;z-index: 1000;box-shadow: 2px 0 5px rgba(0, 0, 0, 0.1);background-color:var(--ltc-primary);color: #ecf0f1;overflow-y: auto;}
#sidebar.collapsed {width: var(--sidebar-collapsed-width);}
#sidebar .sidebar-header {padding: 20px;border-bottom: 1px solid rgba(255, 255, 255, 0.1);position: sticky;top: 0;z-index: 1010;}
.sidebar ul {list-style: none;padding: 0;margin: 0;}
.sidebar .menu-item{position: relative;}
.sidebar .menu-link{padding: 15px;cursor: pointer;width: 100%;display: inline-block;text-decoration:none;color:var(--ltc-white);}
.sidebar .menu-item:hover {background-color:var(--ltc-base);}
.sidebar .dropdown {display: none;background-color: #555;}
.sidebar .dropdown-item {padding: 10px;cursor: pointer;}
.sidebar .dropdown-item:hover {background-color: var(--ltc-yellow);}
.sidebar .dropdown-link{color:var(--ltc-white);text-decoration:none;font-size:90%;}
.sidebar .menu-item:focus-within .dropdown {display: block;}
.sidebar .icon {margin-right: 10px;}
.sidebar .toggle-icon {cursor: pointer;font-size: 1.5em;color: var(--ltc-white);}      
       
        
/*==================================================================
* CONTENT AREA
*====================================================================*/
#content { transition: all var(--transition-speed) ease;min-height: 100vh;position: relative;}
#content.expanded {margin-left: auto;}
.header-wrap {min-height:350px;position:relative;overflow:hidden;border-radius:20px;} 
.header-wrap .overlay {position:absolute;height:100%;width:100%;top:0;left:0;background:linear-gradient(to top, #00000069, #00000003);color:white;display:flex;align-items: center;justify-content:flex-start;padding:0 0 0 70px;box-sizing:border-box;}
.header-wrap .page-title{width:85%;}
.header-wrap .page-title h1{color:var(--ltc-white);font-size:2.5rem;font-weight:700;text-shadow:0 1px 6px rgba(0, 0, 0, 0.52);margin:0;width:auto;max-width:100%;text-align:left;box-sizing:border-box;} 
.carbon-card .card{background:rgba(var(--ltc-primary-rgb), 0.05);height:100%;border-radius:0px 0px 15px 0px !important;}
.carbon-card .card img{height:100px;width:100%;border-radius:0px 20px 20px 0px;}
.carbon-list-ordered {list-style: none;counter-reset: list-counter;padding-left: 0;}
.carbon-list-ordered li {position: relative;padding-left: 40px;margin-bottom: 1rem;}
.carbon-list-ordered li::before {content: counter(list-counter);counter-increment: list-counter;position: absolute;left: 0;width: 30px;height: 30px; background-color: var(--ltc-black);color: var(--ltc-white);display: flex;align-items: center;justify-content: center;border-radius: 5px;}
.contact-card .card{background:rgba(var(--ltc-gray-rgb), 0.05);}
.contact-card .card .display-6{font-weight:200 !important;margin-bottom:15px;text-align: center;}
.contact-card .card .icon{background:var(--ltc-white);color: var(--ltc-gray);height: 50px;width: 50px;align-self: center;font-size: 25px;padding: 10px;
  justify-content: center;display: inline-flex;}
.contact-card .card strong{display:flex;margin-bottom:5px;margin-top: 10px;font-weight: 500;}
.csocials {list-style-type:none;}
.csocials li{display:inline-block;gap:10px;}
.csocials a {padding: 10px;background: rgba(var(--ltc-gray-rgb),0.15);border-radius: 50%;width: 50px;height: 50px;align-items: center;display: flex;
	color: var(--ltc-gray);transition: 0.2s all;text-decoration: none;}
.csocials i {margin: 0 auto;font-size: 30px;}
.csocials a:hover {color: var(--ltc-white);background: var(--ltc-primary);}


        /* Number circles */
        .number-circle {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 40px;
            height: 40px;
            border-radius: 50%;
            background-color: #2c3e50;
            color: white;
            font-weight: bold;
            margin-right: 15px;
        }
/** ===================================================================
* Footer
*========================================================================*/
.footer{font-size:12px;background-color: var(--ltc-white);color: var(--ltc-gray);padding: 20px 0;margin-top: 40px;}
    .footer a{color:var(--ltc-gray);text-decoration:none;}
    
/*===========================================================
# Back to top button
===========================================================*/
.back-to-top {  position: fixed;  visibility: hidden;  opacity: 0;  right: 15px;  bottom: 15px;  z-index: 99999;  background: var(--ltc-base);  width: 40px;  height: 40px;  border-radius: 4px;  transition: all 0.4s;}
.back-to-top i {  font-size: 24px;  color: var(--ltc-white);  line-height: 0;}
.back-to-top:hover {background: var(--ltc-orange);  color:var(--ltc-white);}
.back-to-top.active {visibility: visible;  opacity: 1;}

/**==========================================================================
* RESPONSIVE
*========================================================================*/     
    @media (max-width: 768px) 
    {
        #sidebar {width: var(--sidebar-collapsed-width);}
        #sidebar .menu-text,
        #sidebar .dropdown-toggle::after {
            display: none !important;
        }
        .header-wrap .page-title h1 {font-size: 1.8rem;}
        .header-wrap .page-title {width: 100%;}
        .header-wrap .overlay { padding: 0 0 0 20px;}
        #content {width: calc(100% - var(--sidebar-collapsed-width));}
    }
