* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    text-decoration: none;
    font-family: 'Poppins', sans-serif;
    
}

a {
    text-decoration: none;
    color:inherit;
}
.nav-links li a:hover {
    background-color: var(--gradiant-color);
}
nav {
    background: linear-gradient(to top, var(--gradiant-text), var(--background-color));
}
footer {
    background: linear-gradient(to top, var(--gradiant-text), var(--background-color));
    /*    text-shadow: 1px 1px 2px var(--gradiant-color), 0 0 25px blue, 0 0 5px var(--gradiant-text);
*/
    text-align: center;
    padding: 10px 0px;
}


.close-btn {
    visibility: hidden;
}

.nav-links .drop-menu {
    position: absolute;
    background-color: var(--background-color);
    width: 180px;
    line-height: 45px;
    top: 85px;
    opacity: 0;
    visibility: hidden;
    box-shadow: 0 6px 10px rgba(0,0,0,0.15);
}

.nav-links li:hover .drop-menu,
.nav-links li:hover .mega-box {
    transition: all 0.3s ease;
    top: 70px;
    opacity: 1;
    visibility: visible;
    transition: all 0.3s ease;
}

.drop-menu li a {
    width: 100%;
    display: block;
    padding: 0 0 0 15px;
    font-weight: 400;
    border-radius: 0px;
}

.mega-box {
    position: absolute;
    left: 0;
    width: 100%;
    padding: 0 10px;
    top: 85px;
    opacity: 0;
    visibility: hidden;
    overflow-y: auto;
    max-height: calc(85vh - 10px);
}

    .mega-box .content {
        background: linear-gradient(var(--gradiant-color), var(--background-color));
        /*background-color: var(--background-color);*/
        padding: 25px 20px;
        display: flex;
        width: 100%;
        justify-content: space-between;
        box-shadow: 0 6px 10px rgba(0,0,0,0.15);
    }

        .mega-box .content .row {
            width: calc(25% - 30px);
            line-height: 25px;
        }

.content .row header {
    color: var(--text-color);
    font-size: 20px;
    font-weight: 500;
    text-shadow: 1px 1px 1px var(--gradiant-text), 0 0 10px var(--gradiant-color);
}

.content .row .mega-links {
    margin-left: 10px;
    border-left: 1px solid rgba(255,255,255,0.09);
}

.row .mega-links li {
    padding: 0 20px;
    text-shadow: 1px 1px 2px var(--gradiant-color), 0 0 3px var(--gradiant-text);
    padding: 5px 5px 5px 5px;
}


    .row .mega-links li a {
        padding: 0px;
        padding: 0 20px;
        color: var(--text-color);
        font-size: 17px;
        display: block;
    }

    .row .mega-links li:hover {
        color: var(--text-color);
    }

.wrapper .btn {
    color: var(--text-color);
    font-size: 20px;
    cursor: pointer;
    display: none;
}

    .wrapper .btn.close-btn {
        position: absolute;
        right: 30px;
        top: 10px;
    }

::-webkit-scrollbar-track {
    background-color: var(--background-color);
}

::-webkit-scrollbar-thumb {
    background-color: var(--gradiant-color);
}

nav input {
    display: none;
}

.fa-times:before {
    content: url('images/menu.png');
    cursor: pointer;
}

.nav-left-menu {
    position: absolute;
    display: flex;
    /*background-color: var(--background-color);*/
}

    .nav-left-menu img {
        width: 16px;
        max-width: 16px;
    }

.nav-left-submenu {
    padding: 0;
    margin: 0;
    /*left: -100px;*/
    width: 150px;
    display: none;
    position: absolute;
    border: 1px solid rgba(204, 204, 204, 0.5);
    z-index: 1;
    overflow-y: auto;
    max-height: calc(85vh - 10px);
    background-color: #fff;
    color: crimson;
}

.nav-left-menu > li {
    padding: 5px;
    position: relative;
	list-style:none;
}

    .nav-left-menu > li:hover .nav-left-submenu {
        display: block;
        /*float: left;*/
        float: right;
        list-style: none;
    }


.nav-left-submenu > li:hover {
    background-color: #f1f1f1;
}

.nav-left-submenu li {
    padding: 10px;
    display: list-item;
}

.notification-counter {
    background-color: #ff3c7e;
    border-radius: 50px;
    color: #fff;
    font-size: 8px;
    line-height: 1;
    padding: 2px 3.5px;
    position: absolute;
    right: 6px;
    top: 10px;
}

.left-head-strip {
    margin: 10px 0px 0px 5px;
}
/*text shadow effect*/
.shadow {
    text-shadow: 1px 1px 2px var(--gradiant-color), 0 0 3px var(--gradiant-text);
}

.icon-holder {
    border-radius: 3px;
    display: inline-block;
    font-size: 12px;
    height: 16px;
    left: 0;
    line-height: 14px;
    margin-right: 14px;
    /*position: relative;*/
    text-align: center;
    -webkit-transition: all .3s ease;
    -o-transition: all .3s ease;
    transition: all .3s ease;
    width: 16px;
}

/*desk top, tab*/
@media (min-width: 768px) {
    .logo {
        position: static;
        width: fit-content;
    }
    #hot-links {
        position: absolute;
        margin-left: 300px;
        color: var(--text-color);
        width: 100%;
    }
    nav {
        /*position: fixed;*/
        z-index: 9999;
        width: 100%;
    }

        nav .wrapper {
            position: static;
            padding: 5px 5px;
            height: 70px;
            margin: auto;
            display: flex;
            justify-content: space-between;
          
        }

    .wrapper .logo a {
        color: var(--text-color);
        font-size: 30px;
        font-weight: 600;
        text-decoration: none;
    }

    .wrapper .nav-links {
        display: inline-flex;
        align-items: end;
    }

    .nav-links li {
        list-style: none;
        white-space: nowrap;
    }

        .nav-links li a {
            color: var(--text-color);
            text-decoration: none;
            font-size: 18px;
            font-weight: 500;
            padding: 5px 5px 15px 5px;
            border-radius: 5px;
            transition: all 0.3s ease;
            text-shadow: 1px 1px 2px var(--gradiant-color), 0 0 3px var(--gradiant-text);
        }

   
    .nav-links .mobile-item {
        display: none;
    }
    .row .mega-links li a {
        padding: 0px;
        padding: 0 20px;
        color: var(--text-color);
        font-size: 17px;
        display: block;
        padding: 5px 5px 5px 5px;
    }


}

/*mobile screen*/
@media screen and (max-width: 767px) {
    .logo {
        position: fixed;
        visibility: visible;
        /*background-color: var(--background-color);*/
        background: linear-gradient(to top, var(--background-color), var(--gradiant-color));
        width: 100%;
        height: 100px;
        z-index: 99;
    }

    .close-btn {
        position: relative;
        visibility: visible;
        left: 15px;
    }

    #hot-links {
        position: fixed;
        padding: 10px;
        margin-top: 57px;
        color: var(--text-color);
        width: 100%;
        z-index: 99;
    }

    .wrapper .btn {
        display: block;
    }

    nav .wrapper .nav-links {
        height: 100vh;
        width: 100%;
        top: 0;
        left: -100%;
        background-color: var(--background-color);
        display: block;
        padding: 80px 10px;
        line-height: 50px;
        overflow-y: auto;
        box-shadow: 0px 15px 15px rgba(0,0,0,0.18);
        transition: all 0.3s ease;
    }

    ::-webkit-scrollbar {
        width: 10px;
    }

    #menu-btn:checked ~ .nav-links {
        left: 0%;
    }

    #menu-btn:checked ~ .btn.menu-btn {
        display: none;
    }

    #close-btn:checked ~ .btn.menu-btn {
        display: block;
    }

    .nav-links li {
        margin: 15px 10px;
    }

        .nav-links li a {
            padding: 0 20px;
            display: block;
            font-size: 20px;
            color: var(--text-color);
        }

    nav .wrapper .nav-links .drop-menu {
        position: static;
        opacity: 1;
        top: 65px;
        visibility: visible;
        padding-left: 20px;
        width: 100%;
        max-height: 0px;
        overflow: hidden;
        box-shadow: none;
        transition: all 0.3s ease;
    }

    #showDrop0:checked ~ .drop-menu,
    #showDrop1:checked ~ .drop-menu,
    #showDrop2:checked ~ .drop-menu,
    #showMega19:checked ~ .mega-box,
    #showMega18:checked ~ .mega-box,
    #showMega17:checked ~ .mega-box,
    #showMega16:checked ~ .mega-box,
    #showMega15:checked ~ .mega-box,
    #showMega14:checked ~ .mega-box,
    #showMega13:checked ~ .mega-box,
    #showMega12:checked ~ .mega-box,
    #showMega11:checked ~ .mega-box,
    #showMega10:checked ~ .mega-box,
    #showMega9:checked ~ .mega-box,
    #showMega8:checked ~ .mega-box,
    #showMega7:checked ~ .mega-box,
    #showMega6:checked ~ .mega-box,
    #showMega5:checked ~ .mega-box,
    #showMega4:checked ~ .mega-box,
    #showMega3:checked ~ .mega-box,
    #showMega2:checked ~ .mega-box,
    #showMega1:checked ~ .mega-box,
    #showMega0:checked ~ .mega-box {
        max-height: 100%;
    }


    .nav-links .desktop-item {
        display: none;
    }

    .nav-links .mobile-item {
        display: block;
        color: var(--gradiant-text ); /*#f2f2f2;*/
        font-size: 20px;
        font-weight: 500;
        padding-left: 20px;
        cursor: pointer;
        border-radius: 5px;
        transition: all 0.3s ease;
    }

        .nav-links .mobile-item:hover {
            background-color: var(--gradiant-color );
        }

    .drop-menu li {
        margin: 0;
    }

        .drop-menu li a {
            border-radius: 5px;
            font-size: 18px;
        }

    .mega-box {
        position: static;
        top: 65px;
        opacity: 1;
        visibility: visible;
        padding: 0 20px;
        max-height: 0px;
        overflow: hidden;
        transition: all 0.3s ease;
    }

        .mega-box .content {
            box-shadow: none;
            flex-direction: column;
            padding: 20px 20px 0 20px;
        }

            .mega-box .content .row {
                width: 100%;
                margin-bottom: 15px;
                border-top: 1px solid rgba(255,255,255,0.08);
            }

                .mega-box .content .row:nth-child(1),
                .mega-box .content .row:nth-child(2) {
                    border-top: 0px;
                }

    .content .row .mega-links {
        border-left: 0px;
        padding-left: 15px;
    }

    .row .mega-links li {
        margin: 0;
        padding: 5px 5px 5px 5px;
    }

    .content .row header {
        font-size: 19px;
    }
}
/*css9 is renamed and original mstlayout contents appended on 13.03.2024*/
#DetailControls {
    display: none;
}


.edit-item display-mode {
}

.save-item edit-mode {
}

.display-mode {
    width: 30px;
    height: 30px;
}

.hide-mode {
    display: none;
}

.cancel-item {
}

.delete-item {
    width: 30px;
    height: 30px;
}


table.FormattedReport td:nth-child(1) {
    display: none;
}

table.FormattedReport th:nth-child(1) {
    display: none;
}

table.table-dropDown td:nth-child(1) {
    display: none;
}

table.table-dropDown th:nth-child(1) {
    display: none;
}

table.webgrid-table td:nth-child(2) {
    display: none;
}

table.webgrid-table td:nth-child(3) {
    display: none;
}

table.webgrid-table th:nth-child(2) {
    display: none;
}

table.webgrid-table th:nth-child(3) {
    display: none;
}

.webgrid-table {
    font-family: Arial,Helvetica,sans-serif;
    font-size: 14px;
    font-weight: normal;
    width: 650px;
    display: table;
    border-collapse: collapse;
    border: solid 1px #C5C5C5;
    /* background-color: white;*/
}

.html-table {
    font-family: Arial,Helvetica,sans-serif;
    font-size: 14px;
    font-weight: normal;
    width: 650px;
    display: table;
    border-collapse: collapse;
    border: solid 1px #C5C5C5;
    /*  background-color: white;*/
}

    .html-table td, th {
        border: 1px solid #C5C5C5;
        padding: 3px 7px 2px;
    }

.webgrid-table td, th {
    border: 1px solid #C5C5C5;
    padding: 3px 7px 2px;
}

.webgrid-header th {
    white-space: nowrap;
    padding: 5px 10px;
    font-size: 15px;
}

.webgrid-header, .webgrid-header a {
    background-color: rgba(227, 227, 227, 0.4);
    color: black;
    text-align: left;
    text-decoration: none;
}

.webgrid-footer {
}

.webgrid-row-style {
    padding: 3px 7px 2px;
}

.webgrid-alternating-row {
    background-color: rgba(245, 245, 245, 1);
    padding: 3px 7px 2px;
}


#HeaderControls {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly;
    gap: 30px;
    padding: 10px 10px;
}

.table-dropDown {
    border-collapse: collapse;
}

    .table-dropDown tr:hover {
        background-color: rgba(221, 221, 221, 1);
    }

    .table-dropDown th {
        background-color: rgba(227, 227, 227, 0.4); /*auto complete table header background color*/
        font-size: small;
        text-align: Left;
    }

    .table-dropDown td, th {
        border: 1px solid #C5C5C5;
    }

.searchtext_highlight {
    background-color: yellow; /*highlighted text style*/
}

input.hidden {
    position: absolute;
    left: -9999px;
}

#dropTable {
    position: absolute;
    left: -1500px;
    border: 1px solid rgba(204, 204, 204, 0.5);
    max-width: 500px;
    max-height: 400px;
    background: var(--background-color);
    overflow: auto;
    z-index: 99;
}

.panel {
    margin: 40px 40px 40px 40px;
    padding: 4px 4px 4px 4px;
    background-color: #F5F5F5;
    border: 1px solid transparent;
    border-radius: 4px;
    box-shadow: 0 1px 1px #ebccd1;
}

/****end***tables, control styles*/

.col-lg, .btn {
    float: left;
    padding-left: 2px;
    padding-right: 2px;
    display: table-column;
}

#DBController .btn {
    /*background-color: #b14c9c;*/
    /*font-size: 10px;*/
    width: 170px;
    height: 140px;
    text-align: center;
    /* color: #b14c9c;*/
    border-radius: 3px 30px 3px 30px;
    box-shadow: 0 1px 6px 4px rgba(0, 0, 0, 0.07) inset, 0 0 0 3px #b14c9c, 0 5px 3px 3px #D2D2D2;
}

#DBController img {
    max-width: 90px;
    padding: 5px;
}
#frmHeader{
    width: 100%;
}
.col-lg-4 {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

    .col-lg-4 label {
        font-weight: 700 !important;
    }
.col-lg-4 div label{
    font-size: 20px;
    text-transform: capitalize;
}
.col-lg-4 input,.col-lg-4 select{
    width: 220px;
    height: 48px;
    margin-top: 8px;
    padding: 10px 12px;
    font-size: 18px;
    flex: 0 0 auto;
    border: 1px solid black;
    border-radius: 5px;
    box-shadow: 2px 3px 2px rgba(92, 92, 92, 0.7);
    outline: none;
    &:focus{
        border: 2px solid rgb(4, 119, 165);
        box-shadow: 2px 3px 2px rgba(46, 92, 122, 0.7);
    }
}
.divTable {
  display: flex;
  flex-direction: column; /* Stack child .divRow elements vertically */
  gap: 20px
}
.divRow {
    display: flex;
    flex-wrap: wrap;
}

.divCell {
    float: left;
    display: table-column;
    background-color: rgba(204, 204, 204, 1);
}
.col-lg {
    flex: 1; /* Makes each cell take equal space */
}
#suggestion,#comments{
	padding: 10px 10px;
    border: 1px solid black;
    border-radius: 5px;
    box-shadow: 2px 3px 2px rgba(92, 92, 92, 0.7);
}
.tabcontent {
    float: left;
    padding: 0px 2px;
    width: 100%;
    display: none;
    border: 1px solid rgba(204, 204, 204, 0.5);
}
/* IMAGE SECTION TOP OF FROM */
.photo-section{
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-evenly;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom:20px ;
}
.photo-section div div label{
    font-weight: 400;
}
.pro_img{
    width: 220px;
    height: 220px;
    border-radius: 10px;
    
}
#chkClear{
	height:40px;
}
#actionBar{
    width: 100%;
    padding: 20px 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 30px;
    flex-wrap: wrap;
}
#actionBar input{
    width: 100px;
    padding: 10px 0px;
    border: 1px solid black;
    border-radius: 5px;
    cursor: pointer;
    &:hover{
    background-color: rgb(4, 44, 95);
    }
}
#RepoSetting{
	margin-top:10px;
	width: 100%;
    display: flex;
    gap: 20px;
    justify-content: center;
    align-items: center;	
}
#RepoSetting select{
    border: 1px solid black;
    border-radius: 5px;
	height:40px;
}
#pnlRepHeader h1{
	width:100%;
	line-height:normal;
	margin:20px;
	text-align:left;
}
#pGateWindow {
    z-index: 100;
    position: fixed; /* Stay in place */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    /*background-color: rgb(0,0,0);  Fallback color */
    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
    color: rgba(0,0,0,0.6);
    text-align: left;
}

#PayTab {
    padding: 5px;
    width: 278px;
    height: 450px;
    margin-top: 100px;
    display: block;
    margin-left: auto;
    margin-right: auto;
    background-color: #b14c9c;
    color: #fff;
    border-radius: 3px 30px 3px 30px;
    box-shadow: 0 1px 6px 4px rgba(0, 0, 0, 0.07) inset, 0 0 0 3px #FEFEFE, 0 5px 3px 3px #D2D2D2;
    background-image: url('../images/bg-pg.png');
}

.payHead {
    font-weight: 700;
}

.paybuton {
}

.paycontent {
    float: left;
    padding: 0px 2px;
    width: 100%;
    display: none;
    border: 1px solid rgba(204, 204, 204, 0.5);
    padding-left: 22px;
}

.paymnutab button {
    display: block;
    background-color: skyblue;
    float: left;
    border: none;
    outline: none;
    cursor: pointer;
    padding: 2px 3px;
    transition: 0.3s;
    font-size: 14px;
    margin: 0px 1px;
    border-radius: 6px;
    text-align: left;
    cursor: pointer;
    transition: 0.3s;
}

.IcoL {
    /*padding-right: 5px;
            padding-left: 5px;
            margin-right: 5px;
            text-align: center;
            width: 15px;
            height: 15px;
            border: solid 1px #555;*/
    -webkit-box-shadow: 2px -2px rgba(0,0,0,0.6);
    -o-box-shadow: 2px -2px rgba(0,0,0,0.6);
    border-radius: 180px;
}

.mnutab {
    overflow: hidden;
}



    /* Change background color of buttons on hover */
    .mnutab button:hover {
        background-color: rgba(221, 221, 221, 1);
    }

    /* Create an active/current tablink class */
    .mnutab button.active {
        background-color: rgba(204, 204, 204, 1);
    }


/* Style the tab */
.mnutab {
    float: left;
    padding: 0px 0px 0px 0px;
    border: 1px solid rgba(204, 204, 204, 0.5);
    background-color: #f1f1f1;
    height: 20px;
}

    /* Style the buttons that are used to open the tab content */
    .mnutab button {
        display: block;
        /*background-color: inherit;
                color: black;
                padding: 0px 0px 0px 0px;
                border: none;
                outline: none;*/
        background-color: skyblue;
        float: left;
        border: none;
        outline: none;
        cursor: pointer;
        padding: 3px 5px;
        transition: 0.3s;
        font-size: 13px;
        margin: 0px 1px;
        border-radius: 6px;
        text-align: left;
        cursor: pointer;
        transition: 0.3s;
    }

        /* Change background color of buttons on hover */
        .mnutab button:hover {
            background-color: rgba(221, 221, 221, 1);
        }

        /* Create an active/current "tab button" class */
        .mnutab button.active {
            background-color: rgba(204, 204, 204, 1);
        }

/* Style the tab content */
.tabcontent {
    float: left;
    padding: 0px 2px;
    width: 100%;
    display: none;
    border: 1px solid rgba(204, 204, 204, 0.5);
}

/*.tabcontent {
            display: none;
            border: 1px solid rgba(204, 204, 204, 0.5);
        }*/
#pGateWindow {
    z-index: 100;
    position: fixed; /* Stay in place */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    /*background-color: rgb(0,0,0);  Fallback color */
    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
    color: rgba(0,0,0,0.6);
    text-align: left;
}

#PayTab {
    padding: 5px;
    width: 278px;
    height: 450px;
    margin-top: 100px;
    display: block;
    margin-left: auto;
    margin-right: auto;
    background-color: #b14c9c;
    color: #fff;
    border-radius: 3px 30px 3px 30px;
    box-shadow: 0 1px 6px 4px rgba(0, 0, 0, 0.07) inset, 0 0 0 3px #FEFEFE, 0 5px 3px 3px #D2D2D2;
    background-image: url('../images/bg-pg.png');
}

.payHead {
    font-weight: 700;
}

.paybuton {
}

.paycontent {
    float: left;
    padding: 0px 2px;
    width: 100%;
    display: none;
    border: 1px solid rgba(204, 204, 204, 0.5);
    padding-left: 22px;
}
.submits {
    width: 100%;
}
.paymnutab button {
    display: block;
    background-color: skyblue;
    float: left;
    border: none;
    outline: none;
    cursor: pointer;
    padding: 2px 3px;
    transition: 0.3s;
    font-size: 14px;
    margin: 0px 1px;
    border-radius: 6px;
    text-align: left;
    cursor: pointer;
    transition: 0.3s;
}

.IcoL {
    /*padding-right: 5px;
            padding-left: 5px;
            margin-right: 5px;
            text-align: center;
            width: 15px;
            height: 15px;
            border: solid 1px #555;*/
    -webkit-box-shadow: 2px -2px rgba(0,0,0,0.6);
    -o-box-shadow: 2px -2px rgba(0,0,0,0.6);
    border-radius: 180px;
}

.mnutab {
    overflow: hidden;
}



    /* Change background color of buttons on hover */
    .mnutab button:hover {
        background-color: rgba(221, 221, 221, 1);
    }

    /* Create an active/current tablink class */
    .mnutab button.active {
        background-color: rgba(204, 204, 204, 1);
    }

.mm-navbar_tabs span {
    display: inline-block;
    margin-left: 8px;
}




.pro_img {
    cursor: pointer;
}

.HiddenCol {
    display: none;
}

.SelectedRow {
    background-color: #c4e3f0;
}


.img_Table {
    width: 40px;
    height: 60px;
}

*:focus {
    outline: 3px solid #27B;
}

/* .combo {
    background-image: url('../images/combo.jpg');
}

#HeaderControls .date {
    background-image: url('../images/date.jpg');
}

.datetime-local {
    background-image: url('../images/datetime-local.jpg');
}

.text {
    background-image: url('../images/text.jpg');
} */
#WET,#WEF{
	font-size:medium;
}
#RepoData{
    width: 100%;
    height: 62vh;
    overflow: auto;
}
#pnlRepHeader{
 width: 100%;
 text-align: center;
 margin-bottom: 40px;
}table{
 width: max-content;
 border-collapse: collapse;   
}
table tbody{
    border: 1px solid #C5C5C5;
    
} 

 thead{
    border: 1px solid #C5C5C5;
    text-align: left;
    position: sticky;
    top: 0;
    z-index: 99;
    background-color: var(--background-color);
    
}
table tbody tr td ,tfoot tr td{
    border: 1px solid #C5C5C5;
    padding: 10px 10px;
    text-align: left;
    font-size: larger;
}
table tbody tr, tfoot tr{
    width: 100%;
    
}
tfoot{
	width: 100%;
    position: sticky;
    bottom: 0;
    background-color: var(--background-color);
}
.fStlInt,.fStlBoo,.fStlStr,.fStlDat,.fStlDec{
	width:max-content;
}
.select {
   
    background-position: left;
    padding-left: 22px;
    background-size: 20px;
    background-repeat: no-repeat;
    border-radius: 8px;
}

.mcombo {
    
    background-position: left;
    padding-left: 22px;
    background-size: 20px;
    background-repeat: no-repeat;
    border-radius: 8px;
}
/* 
#HeaderControls .email {
    background-image: url('../images/email.jpg');
}

#HeaderControls .mobile {
    background-image: url('../images/mobile.jpg');
}

#HeaderControls .number {
    background-image: url('../images/number.jpg');
}

#HeaderControls .date, .number, .email, .text, .mobile, .combo, .mcombo, .select, .checkbox, .datetime-local {
    height: 34px;
    background-position: left;
    padding-left: 22px;
    background-size: 20px;
    background-repeat: no-repeat;
    border: 1px solid rgba(204, 204, 204, 0.5);
    border-radius: 8px;
} */

.IsRequired {
    background-color: #a6ffcc;
}

input[type="button"], input[type="submit"] {
    background: none repeat scroll 0 0 #363333;
    border: 1px solid rgba(204, 204, 204, 0.5);
    border-radius: 3px 3px 3px 3px;
    box-shadow: 0 1px 6px 4px rgba(0, 0, 0, 0.07) inset, 0 0 0 3px #FEFEFE, 0 5px 3px 3px #D2D2D2;
    color: #FFFFFF;
    cursor: pointer;
    font-family: 'BebasNeueRegular','Arial Narrow',Arial,sans-serif;
    font-size: 15px;
    margin: 0;
    padding: 5px;
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.5);
    transition: all 0.2s linear 0s;
}
    input[type="button"]:disabled, input[type="submit"]:disabled {
        background-color: #aaa;
        cursor: not-allowed;
    }

/* Style changes when button is enabled */
    input[type="button"].enabled, input[type="submit"].enabled {
        background: none repeat scroll 0 0 #363333;
    }

/*image attached for add-on js functionality--begin*/
 .btnLink {
    position: relative;
    display: inline-block;
  }
    .btnLink input /*[type="text"]*/ {
        padding-right: 30px; /* Space for the icon */
        width: 200px; /* Adjust as needed */
        height: 30px; /* Adjust as needed */
    }
    .btnLink img {
        position: absolute;
        top: 0;
        right: 0;
        cursor: pointer;
        width: 24px; /* Adjust icon size as needed */
        height: 24px;
        padding: 3px;
    }
/*image attached for add-on js functionality--end*/
.nav-left {
    margin-top: 45px;
}

.IcoS0 {
    color: #FFFF00;
    background: #0000FF;
}

.IcoS1 {
    color: #FF7F00;
    background: #00FF00;
}

.IcoS2 {
    color: #FF0000;
    background: #4B0082;
}

.IcoS3 {
    color: #9400D3;
    background: #FF7F00;
}

.IcoS4 {
    color: #4B0082;
    background: #FF0000;
}

.IcoS5 {
    color: #00FF00;
    background: #9400D3;
}

.IcoS6 {
    color: #0000FF;
    background: #FFFF00;
}

.LmenuClass:hover {
    opacity: 20;
    width: 120%;
}

.LogClick {
    cursor: pointer;
}

.HideControls {
    display: none;
}

.BgColor {
    width: 400px;
    height: 50px;
    background: linear-gradient(to right, blue 70%, yellow 50%);
}
/*scrollbar styling*/
::-webkit-scrollbar {
    width: 5px;
}

/* Track */
::-webkit-scrollbar-track {
    box-shadow: inset 0 0 5px grey;
    border-radius: 2px;
}

/* Handle */
::-webkit-scrollbar-thumb {
    background: #A9CAE7;
    border-radius: 8px;
}

    /* Handle on hover */
    ::-webkit-scrollbar-thumb:hover {
        background: #9FB2C2;
    }
/*scrollbar styling*/

/*chat box styling*/
/* Button used to open the chat form - fixed at the bottom of the page */
.open-button {
	width:80px;
	height:63vh;
    background-color:var(--background-color);
    color: white;
    border: none;
    cursor: pointer;
    opacity: 1;
    position: fixed;
    bottom: 12vh;
    right: 0px;
    display:flex;
	flex-direction:row;
	align-items:center;
	box-shadow: 0 3px 10px rgba(0, 0, 0, 0.7);
	z-index:299;
	border-radius:10px 0px 0px 10px;
	transform: translateX(15px);
	transition:all 0.2s ease;
	&:hover{
	transform: translateX(0px);
	}
}
.marquee {
    overflow: hidden;
    position: absolute;
    height: 60vh;
}

.marquee span {
  display: inline-block;
  white-space: nowrap;
  color: var(--text-color);
  text-transform:uppercase;
  font-weight:700;
  animation: marquee-scroll 15s linear infinite;
}

@keyframes marquee-scroll {
  from {
    transform: translateY(100%);
  }
  to {
    transform: translateY(-100%);
  }
}

.chatHead{
	font-size:17px;
	font-weight: 600;
	width: 100%;
    height: 62vh;
    position: relative;
}
.Agents-Available {
    height:100%;
	display:flex;
	flex-direction:column;
	gap:10px;
	justify-content:space-evenly;
	align-items:center;
	padding:5px 10px;
	
}
.Agents-Available img{
	border-radius:50%;
	object-fit:cover;
	object-position:center;
	border:1px solid gray;
	box-shadow: 0 3px 10px rgba(0, 0, 0, 0.7);
}
/* The popup chat - hidden by default */
.chat-popup {
    display: none;
    position: fixed;
    font-size: 12px;
    bottom: 0;
    right: 0;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.7);
    z-index: 399;
}

/* Add styles to the form container */
.form-container {
    max-width: 310px;
    width: 310px;
	height:80vh;
    background-color: white;
	display:flex;
	align-items:center;
	justify-content:center;
	position:relative;
}
#cancel-ChatEnroll{
	font-size:18px;
	position:absolute;
	right:10px;
	top:10px;
	cursor:pointer;
	color:black;
	z-index:999;
}
#ChatEnroll{
	width:85%;
	height:100%;
	display:flex;
	flex-direction:column;
	gap:30px;
	align-items:center;
	justify-content:center;
    
}
.form-container input, .form-container select ,#ChatVerify input , #ChatVerify button{
	width:100%;
	height:60px;
	padding:0px 10px;
	font-size:18px	
}
#ChatVerify{
    width:95%;
	display:none;
	flex-direction:column;
	gap:40px;
	align-items:center;
	justify-content:center;
}
#Chatting{
    display: none;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
    /* Full-width textarea */
    .form-container textarea {
        width: 280px;
        padding: 5px;
        margin: 5px 0 5px 0;
        border: groove;
        background: #f1f1f1;
        resize: none;
        min-height: 30px;
    }

        /* When the textarea gets focus, do something */
        .form-container textarea:focus {
            background-color: rgba(221, 221, 221, 1);
            outline: none;
        }

#usrChoice {
    width: 280px;
    padding: 5px;
    margin: 5px 0 5px 0;
    border: groove;
    background: #f1f1f1;
    min-height: 30px;
}
/* Set a style for the submit/send button */
.form-container .btn {
    background-color: #4CAF50;
    color: white;
    padding: 16px 20px;
    border: none;
    cursor: pointer;
    width: 100%;
    margin-bottom: 10px;
    opacity: 1;
}

/* Add a red background color to the cancel button */
.form-container .cancel {
    background-color: red;
}

/* Add some hover effects to buttons */
/*.form-container .btn:hover, .open-button:hover {
                opacity: 0.8;
            }*/
/*chat box styling*/

.msAgent {
    border: 2px solid #dedede;
    background-color: #f1f1f1;
    border-radius: 5px;
    padding: 10px;
    margin: 10px 0;
}

.msUser {
    border-color: rgba(204, 204, 204, 0.5);
    background-color: rgba(221, 221, 221, 1);
}

.msAgent::after {
    content: "";
    clear: both;
    display: table;
}

.msAgent img {
    float: left;
    max-width: 60px;
    /*width: 100%;*/
    margin-right: 20px;
    border-radius: 50%;
    height: 40px
}

    .msAgent img.right {
        float: right;
        margin-left: 20px;
        margin-right: 0;
    }

.time-right {
    float: right;
    color: #aaa;
}

.time-left {
    float: left;
    color: #999;
}

/****************************************/
.header {
    /* background-color: #fff;*/
    background: var(--background-color);
    border-bottom: 1px solid rgba(0,0,0,.0625);
    display: block;
    height: 80px;
    margin-bottom: 0;
    padding: 0;
    position: fixed;
    -webkit-transition: all .2s ease;
    -o-transition: all .2s ease;
    transition: all .2s ease;
    width: 100%; /*calc(100% - 280px);*/
    z-index: 800;
}

    .header .header-container:after {
        display: block;
        clear: both;
        content: "";
    }

    .header .header-container .nav-left, .header .header-container .nav-right {
        list-style: none;
        margin-bottom: 0;
        padding-left: 0;
        position: relative;
    }

        .header .header-container .nav-left > li, .header .header-container .nav-right > li {
            float: left;
        }

            .header .header-container .nav-left > li > a, .header .header-container .nav-right > li > a {
                color: #72777a;
                display: block;
                line-height: 65px;
                min-height: 65px;
                max-width: 65px;
                padding: 0 15px;
                -webkit-transition: all .2s ease-in-out;
                -o-transition: all .2s ease-in-out;
                transition: all .2s ease-in-out;
            }

                .header .header-container .nav-left > li > a i, .header .header-container .nav-right > li > a i {
                    font-size: 17px;
                }

                .header .header-container .nav-left > li > a:focus, .header .header-container .nav-left > li > a:hover, .header .header-container .nav-right > li > a:focus, .header .header-container .nav-right > li > a:hover {
                    color: #313435;
                    text-decoration: none;
                }


        .header .header-container .nav-left .notifications, .header .header-container .nav-right .notifications {
            position: relative;
        }

.notification-counter {
    background-color: #ff3c7e;
    border-radius: 50px;
    color: #fff;
    font-size: 8px;
    line-height: 1;
    padding: 2px 3.5px;
    position: absolute;
    right: 6px;
    top: 10px;
}

.header .header-container .nav-left .notifications .dropdown-menu, .header .header-container .nav-right .notifications .dropdown-menu {
    min-width: 350px;
    padding: 0;
}


.header .header-container .dropdown-menu {
    display: block;
    margin: 0;
    -webkit-transform-origin: top right;
    -ms-transform-origin: top right;
    transform-origin: top right;
    -webkit-transform: scale(0);
    -ms-transform: scale(0);
    transform: scale(0);
    -webkit-transition: -webkit-transform .15s ease-out;
    transition: -webkit-transform .15s ease-out;
    -o-transition: transform .15s ease-out;
    transition: transform .15s ease-out;
    transition: transform .15s ease-out,-webkit-transform .15s ease-out;
}

    .header .header-container .dropdown-menu .divider {
        border-bottom: 1px solid rgba(0,0,0,.0625);
        height: 1px;
        overflow: hidden;
    }

    .header .header-container .dropdown-menu > li > a {
        -webkit-transition: all .2s ease-out;
        -o-transition: all .2s ease-out;
        transition: all .2s ease-out;
    }

.header .header-container .show .dropdown-menu {
    -webkit-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1);
}

.header .header-container .nav-left {
    float: left;
    margin-left: 15px;
}

.header .header-container .nav-right {
    float: right;
}

    .header .header-container .nav-right .dropdown-menu {
        left: auto;
        right: 0;
    }

        .header .header-container .nav-right .dropdown-menu > li {
            width: 100%;
        }

            .header .header-container .nav-right .dropdown-menu > li > a {
                line-height: 1.5;
                min-height: auto;
                padding: 10px 15px;
            }

.header .search-box.active .search-icon, .header .search-box .search-icon-close {
    display: none;
}

.header .search-box.active .search-icon-close {
    display: inline-block;
}

.header .search-input {
    display: none;
}

    .header .search-input.active {
        display: inline-block;
    }

    .header .search-input input {
        background-color: transparent;
        border: 0;
        -webkit-box-shadow: none;
        box-shadow: none;
        font-size: 18px;
        height: 40px;
        margin-top: 12px;
        outline: none;
        padding: 5px;
    }


        .header .search-input input::-webkit-input-placeholder {
            color: #a6aaac;
            font-style: italic;
        }

        .header .search-input input:-moz-placeholder, .header .search-input input::-moz-placeholder {
            color: #a6aaac;
            font-style: italic;
        }

        .header .search-input input:-ms-input-placeholder {
            color: #a6aaac;
            font-style: italic;
        }

.is-collapsed .header {
    width: calc(100% - 70px);
}
/*
@media print {
     .no-print, .no-print * {
       display: none !important;
    }

    #RepoData tbody {
        display: block;
        max-height: calc(100vh - 280px);
    }
}

@media screen {
    #RepoData tbody {
        display: block; 06052023
        display: block;
        max-height: calc(100vh - 280px);
        overflow-x: hidden;
    }
*/

/*

			  @media screen and (max-width:767px) {
                   .header .header-container .nav-left .notifications .dropdown-menu, .header .header-container .nav-right .notifications .dropdown-menu {
                       max-width: 300px;
                   }
              
                   .header .search-input input {
                       width: 85px;
                   }
               }

    */

/*.dropdown-menu*/
.show {
    display: block;
}
/*.dropdown-menu*/
.hides {
    display: none;
}

.droplist {
    margin-left: 0;
    padding-left: 0;
    list-style: none;
    text-decoration: none;
    border: 1px solid rgba(204, 204, 204, 0.5);
    background-color: #fff;
    overflow: auto;
    z-index: 99;
}

    .droplist li:hover {
        background-color: rgba(0,0,0,.075);
    }
/*.dropdown-usc {
    display:inline-block; 
}
*/ .cAlign {
    margin: auto;
    text-align: center;
    padding: 5px;
    border: solid 1px #C5C5C5;
}

.fill {
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
}

    .fill img {
        flex-shrink: 0;
        min-width: 100%;
        min-height: 100%;
    }

.formattedReport {
    border-collapse: collapse;
}

    .formattedReport th {
        border: 1px solid #C5C5C5;
		width: max-content;
   		white-space: nowrap;
   		padding: 5px 10px;
    
    }
    .formattedReport td {
        border: 1px solid #C5C5C5;
   		padding: 5px 10px;
    
    }
/*#RepoData table, tr td {
        border: 1px solid red;
    }*/

/* #RepoData tfoot, #RepoData thead, #RepoData tbody tr {
    display: table;
    width: 100%;
    table-layout: fixed;
}

#RepoData > tfoot, #RepoData > thead {
    width: calc( 100% - 1em );
} */

#FormTitle {
    font-size: 2rem;
    text-align: center;
    width: 100%;
    color:var(--text-color);
    background: rgba(204, 204, 204, 0.5);
    padding: 10px;
    box-shadow: 0px 3px 10px;
    border-radius: 5px;
    margin-bottom: 10px;
}
/*
.TitleForm {
    overflow: no-display;
    color: #000;
    background: rgba(204, 204, 204, 0.5);
    padding-left: 5px;
    padding-right: 5px;
    -webkit-box-shadow: 2px -2px rgba(0,0,0,0.6);
    -o-box-shadow: 2px -2px rgba(0,0,0,0.6);
    border-radius: 180px;
}*/
/*left menu added styles 18022023*/
.HeaderDropMenu {
    float: right;
    width: 100%;
    display: flex;
    justify-content: flex-end;
    /*  text-align: right;*/
}

.contentList {
    margin-right: 15px;
    float: left;
    border: 1px solid rgba(204, 204, 204, 0.5);
    border-radius: 8px;
}

.content-delete-button {
    width: 20px;
    height: 20px;
    background-image: url('images/Delete.gif');
    background-position: center;
    background-repeat: no-repeat;
    padding-left: 10px;
    background-size: 10px;
}

/*notice board css settings*/
.NBHeader {
    background-color: white;
    border-radius: 2px;
    border: 1px solid;
    border-color: #d1d1d1;
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05);
    -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05);
    -moz-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05);
    margin-bottom: 15px;
}

.FloatL {
    float: left;
    position: relative;
    display: flex;
    list-style: none;
    margin-left: 5px;
}

.NBHeader li {
    padding: 10px;
    background-color: #fff;
}    

/*test css before appening*/
#detailsgrid{
  	width: 100%;
}
#DetailGrid1,#DetailGrid2,#DetailGrid3,#DetailGrid4,#DetailGrid5,#DetailGrid6,#DetailGrid7{
	width: 100%;
    overflow-x: auto;
    padding-bottom: 20px;
}
.body-text {
    width: 100%;
    padding-top: 80px;
    font-size: var(--font-size);
    color: var(--text-color);
	padding: 100px 30px;
    /*display: flex; 
    flex-wrap: wrap;
    flex-direction: row; 
    justify-content: space-between;*/
    min-height: 110vh;
    background: linear-gradient(to bottom, var(--background-color), var(--gradiant-text));
    overflow: auto;
    /*************/
    /*************/
}


    .body-text pb {
        margin: 10px; /* Optional: Add some space between paragraphs */
        width: 31.5%;
        float: left;
        padding: 10px;
        border-radius: 3px 30px 3px 30px;
        box-shadow: 0 1px 6px 4px rgba(0, 0, 0, 0.07) inset, 0 0 0 3px #FEFEFE, 0 5px 3px 3px #D2D2D2;
        min-height: 350px;
        background: linear-gradient(var(--background-color), var(--gradiant-color));
    }
/*.ovBox {
    width: 48.5%;
    float: left;
    padding: 10px;
    border-radius: 3px 30px 3px 30px;
    box-shadow: 0 1px 6px 4px rgba(0, 0, 0, 0.07) inset, 0 0 0 3px #FEFEFE, 0 5px 3px 3px #D2D2D2;
    min-height: 350px;
    background: linear-gradient(var(--background-color), var(--gradiant-color));
}

.genViews p {
    float: left;
    padding: 10px;
    border-radius: 3px 30px 3px 30px;
    box-shadow: 0 1px 6px 4px rgba(0, 0, 0, 0.07) inset, 0 0 0 3px #FEFEFE, 0 5px 3px 3px #D2D2D2;
    background: linear-gradient(var(--background-color), var(--gradiant-color));
}*/
.dialog {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    min-width: 40%;
    max-width: 70%;
    border: none;
    border-radius: 8px;
    padding: 20px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.2);
    z-index: 9999;
}

    .dialog::backdrop {
        background: rgba(0, 0, 0, 0.5);
    }

#alertOk {
    margin-top: 10px;
    margin-left: 50%;
}
/*test css before appening*/

/* LANDING PAGES STYLING BY ANUJ */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
}
:root {
  
  --button-background:#1265e2;
}
body,
html {
  width: 100%;
  height: 100%;
  scroll-behavior: smooth;
}
main {
  width: 100%;
  height: max-content;
}
.new-hero {
  width: 100%;
  display: flex;
  align-items: start;
  flex-direction: column;
  flex-wrap: wrap;
  background-color:var(--background-color);
  position: relative;
  overflow: hidden;
}

.new-hero-container {
  width: 100%;
  display: flex;
  
  
}
.new-bg-img-box {
  position: absolute;
  right: -230px;
  top: -50px;
  height: 700px;
  width: 800px;
  border-radius: 50%;
  border: 2px solid rgb(179, 202, 223);
  overflow: hidden;
  background-image: url("/images/bg4.png");
  background-size:100% 100%;
  background-repeat: no-repeat;
  background-position: left center;
  box-shadow: 2px 2px 10px var(--text-button-color);
}
.new-left-hero {
  min-width: 350px;
  width: 100%;
  height: 100%;
  min-height:61vh;
  display: flex;
  align-items: start;
  flex-direction: column;
  gap: 20px;
  padding: 20px 20px;
  margin-top:30px;
  z-index: 99;
}
.new-hero-subHeading{
  width: 50%;
  font-size: 30px;
  font-weight: 500;
  color: var(--text-color);

}
.new-left-hero h1 {
  font-size: 50px;
  padding: 5px 5px;
  text-transform: capitalize;
  color: var(--text-color);
}
.new-left-hero-btn-box{
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}
#request-btn,#enquiry-btn {
  width:180PX;
  padding: 12px 15px;
  border-radius: 10px;
  font-size: 20px;
  border: 1px solid white;
  cursor: pointer;
  background-color: var( --button-background);
 color: var(--text-color);
  transition: all 0.new-3s ease;
  box-shadow: 2px 2px 10px gray;
  &:active {
    transform: scale(0.9);
  }
  &:hover{
    background-color: var(--background-color);
    color: var(--text-color);
  }
}
.new-left-hero ul {
  width: 100%;
  display: flex;
  gap: 20px;
  list-style: none;
  color: var(--text-color);
}
.new-left-hero ul li {
  font-weight: 500;
}
.new-right-hero{
  width: 100%;
  height: 100%;
  z-index: 99;
  position: absolute;
  display: none;

}
.new-cross-box{
text-align: end;
cursor: pointer;
}
.new-right-hero-info {
  width: 400px;
  height:100%;
  background-color: rgba(0, 0, 0, 0.945);
  padding: 20px 20px;
  overflow:auto;
  
}
#heading{
  width: 100%;
  text-align: center;
  font-size: 25px;
  color: var(--text-color);
  text-decoration: underline;
}
#enquiry-subHeading{
  font-size: 20px;
  font-weight: 600;
  color: var(--text-color);
  margin-bottom: 10px;
  text-align: center;

}
.new-enquiry-box form{
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.new-enquiry-box input,.new-enquiry-box select{
  height: 40px;
  outline: none;
  border: 1px solid var(--muted);
  border-radius: 8px;
  padding: 0px 15px;
}
#message{
  height: 80px;
  outline: none;
  border: 1px solid var(--muted);
  border-radius: 8px;
  padding: 0px 15px;
  
}
.new-enquiry-btn {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
#requestDemoForm button {
  width: 100%;
  padding: 12px 15px;
  border-radius: 5px;
  border: 1px solid white;
  cursor: pointer;
  background-color: var( --button-background);
  color: var(--text-color);
  transition: all 0.new-3s ease;
  &:active {
    transform: scale(0.9);
    box-shadow: 2px 2px 10px gray;
  }
}
.blogs-link{
  text-decoration:underline;
  cursor: pointer;
  font-size: 20px;
  color: var(--text-color);
  padding-left: 5px;
  font-weight: 700;
  transition: transform linear 0.2s;
  &:hover{
    transform: scale(1.05);
  }
}
.new-what-we-do {
  width: 100%;
  height: max-content;
  padding: 20px 40px;
  background-color:var(--background-color);
  line-height:normal;
  text-align:start;
  margin-top:2px;
}
.new-what-we-do-container {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: space-between;
  gap: 20px;
}
.new-what-we-do h2 {
  font-size: 30px;
  text-align: center;
  color: var(--text-color);
}
.new-left-what-we-do h3 {
  font-size: 18px;
  font-weight: 400;
  color: var(--text-color);
}
.new-left-what-we-do {
  min-width: 350px;
  width: 50%;
  display: flex;
  flex-direction: column;
  align-items: start;
  flex-wrap: wrap;
}
.new-left-what-we-do h2 {
  font-size: 30px;
  color: var(--text-color);
}
.new-left-what-we-do-ul {
  margin-top: 40px;
  margin-left: 20px;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 8px;
  list-style: circle;
  text-transform: capitalize;
}
.new-left-what-we-do-li{
  font-weight: 500;
  color: var(--text-color);
  font-size: 18px;
}
.new-left-what-we-do button {
  margin-top: 30px;
  width:max-content;
  padding: 10px 30px;
  border-radius: 5px;
  border: 1px solid white;
  cursor: pointer;
  background-color: var( --button-background);
  color: var(--text-color);
  transition: all 0.new-3s ease;
  &:active {
    transform: scale(0.9);
    box-shadow: 2px 2px 10px gray;
  }
}
.new-left-what-we-do button a{
  color: var(--text-color);
  font-size: 18px;
  text-decoration: none;
  
}
.new-right-what-we-do {
  width: 45%;
  min-width: 350px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: start;
  height: 420px;
}
.new-right-what-we-do h2 {
  width: 100%;
  text-align: center;
  color: var(--text-color);
}
.new-product-box {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}
.new-product {
  width: 200px;
  height: 175px;
  border: 2px solid silver;
  position: relative;
  border-radius: 10px;
  overflow: hidden;
  cursor: pointer;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.7);
  transition: all 0.3s ease;
  &:hover {
    transform: scale(0.9);
  }
}
.new-product img {
  width: 100%;
  height: 100%;
}
.new-product-info {
  background-color: var(--background-color);
  width: 100%;
  height: 50px;
  border-top: 1.new-5px solid black;
  height: max-content;
  display: flex;
  flex-direction: column;
  bottom: 0px;
  padding: 5px 10px;
  position: absolute;
  z-index: 33;
}
.new-product-para {
  color: var(--text-color);
  font-size:15px;
  line-height: normal;
  letter-spacing: normal;
}
.new-product-name {
  text-transform: capitalize;
  color: var(--text-color);
  font-size:16px;
}
.new-our-solution {
  padding-bottom:20px;
  width: 100%;
  height: max-content;
  background-color: var(--background-color);
   margin-top:2px;
}
.new-solution-heading{
  font-size: 40px;
  width: 100%;
  text-align: center;

}
.new-solution-sub-heading{
  width: 100%;
  font-size: 20px;
  font-weight: 400;
  text-align: center;
}
.new-project-container {
  width: 100%;
  height: 100%;
  margin-top: 40px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 30px;
}
.new-project {
  min-width: 250px;
  width: 350px;
  min-height: 300px;
  height: max-content;
  background-color: var(--background-color);
  border-radius: 15px;
  padding-bottom:10px;
  overflow: hidden;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.5);
  transition: all 0.3s ease;
  &:hover {
    transform: translateY(-10px);
  }
}
.new-project img {
  width: 100%;
  height: 100%;
}
.new-project-heading{
  font-size: 30px;
  font-weight: 500;
  color: var(--text-color);
  padding: 10px 20px;
}
.new-project p {
  color: var(--text-color);
  font-weight: 500;
  padding-left: 20px;
  text-align:start;	
}
.new-project a {
  font-size: 18px;
  color: var(--text-color);
  cursor: pointer;
  text-decoration: none;
  padding-left: 20px;
  &:hover {
    text-decoration: underline;
  }
}
.new-our-solution-btn {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 20px;
}
.new-our-solution-btn button {
  width: max-content;
  padding: 10px 45px;
  border-radius: 5px;
  border: 1px solid white;
  cursor: pointer;
  background-color: var(--button-background);
  transition: all 0.new-3s ease;
  &:active {
    transform: scale(0.9);
    
  }
}
.new-our-solution-btn button a {
  text-decoration: none;
  color: var(--text-color);
  font-size: 20px;
  border-radius:none;
}
.new-we-deliver {
  width: 100%;
  height: max-content;
  padding: 20px 20px;
  color: var(--text-color);
  background-color: var(--background-color);
  text-align:none;
  margin-top:2px;
}

.deliver-heading {
  font-size: 30px;
  text-align: center;
  margin-bottom: 10px;
 color: var(--text-color);
}

.new-process {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  position: relative;
  margin-top: 20px;
  text-align: start;
}

.new-step {
  flex: 1;
  min-width: 250px;
  max-width: 280px;
  min-height:470px;
  margin: 0 15px 30px;
  padding: 10px 25px;
  background-color: var(--background-color);
  border-radius: 8px;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.7);
  position: relative;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  z-index: 1;
}

.new-step:hover {
  transform: translateY(-5px);
}

.new-step::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 5px;
  background-color: #3498db;
  border-radius: 8px 8px 0 0;
}

.new-step:nth-child(2)::before {
  background-color: #2ecc71;
}

.new-step:nth-child(3)::before {
  background-color: #e74c3c;
}

.new-step:nth-child(4)::before {
  background-color: #f39c12;
}

.deliver-subHeading {
  font-size: 20px;
  margin-bottom: 15px;
  color: var(--text-color);
  position: relative;
  padding-bottom: 10px;
  line-height:normal;
  letter-spacing:normal;
}

.deliver-subHeading::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 40px;
  height: 2px;
 background-color: #3498db;
}

.new-step:nth-child(2) h3::after {
  background-color: #2ecc71;
}

.new-step:nth-child(3) h3::after {
  background-color: #e74c3c;
}

.new-step:nth-child(4) h3::after {
  background-color: #f39c12;
}

.deliver-para{
  margin-bottom: 20px;
  color: var(--text-color);
  font-size:1rem;
  line-height:normal;
  letter-spacing:normal;
  
}

.new-step ul {
  list-style-type: none;
  padding: 0;
  margin: 0;
}

.new-step ul li {
  position: relative;
  padding-left: 25px;
  margin-bottom: 12px;
  font-size: 1.1rem;
  font-weight: 500;
  line-height: 1.5;
  color: var(--text-color);
}

.new-step ul li::before {
  content: "✓";
  position: absolute;
  left: 0;
  top: 0;
  color: #3498db;
  font-weight: bold;
}

.new-step:nth-child(2) ul li::before {
  color: #2ecc71;
}

.new-step:nth-child(3) ul li::before {
  color: #e74c3c;
}

.new-step:nth-child(4) ul li::before {
  color: #f39c12;
}

/* Step number indicator */
.new-step::after {
  content: attr(data-step);
  position: absolute;
  top: -15px;
  right: 20px;
  width: 30px;
  height: 30px;
 background-color:#3498db;
  color: var(--text-color);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  font-size: 0.rem;
}

.new-step:nth-child(2)::after {
  background-color: #2ecc71;
}

.new-step:nth-child(3)::after {
  background-color: #e74c3c;
}

.new-step:nth-child(4)::after {
  background-color: #f39c12;
}
.quote-form{
    padding: 20px;
    width: 100%;
    height: max-content;
    background-color: var(--background-color);
    margin-top: 2px;
}
.new-tursted {
  padding: 20px 20px;
  text-align: center;
  background-color: var(--background-color);
  margin-top:2px;
}

.new-tursted h2 {
  font-size: 40px;
  color: var(--text-color);
  text-transform: capitalize;
}

.new-tursted h3 {
  font-size: 20px;
  font-weight: 400;
  text-align: center;
  color: var(--text-color);
  margin-bottom:10px;
}

.new-company-box {
  overflow: hidden;
  position: relative;
  width: 100%;
  padding: 20px 0;
  margin-top: 50px;
}
.new-all-company{
    display: flex;
    width: max-content;
	margin-top:50px 0px ;
    animation: slider 15s linear infinite;
}
.new-companies {
    flex: 0 0 auto;
    width: 200px;
    height: 200px;
    background-color:var(--background-color);
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    border-radius: 10px;
    padding: 0px 10px;
    margin: 0 10px;
	box-shadow:0px 3px 10px rgb(0,0,0,0.5);
	
}
.new-companies img {
  height: 80px;
  width: auto;
  margin-bottom: 15px;
  object-fit: contain;
  mix-blend-mode: darken;
}
.new-companies h4 {
  font-size: 20px;
  font-weight: 400;
  margin: 0 0 10px;
  color: var(--text-color);
  text-transform: capitalize;
}

.new-companies a {
  color: var(--text-color);
  text-decoration: none;
  font-weight: 600;
}


.new-company-box::before,
.new-company-box::after {
  content: "";
  position: absolute;
  top: 0;
  width: 100px;
  height: 100%;
  z-index: 1;
  pointer-events: none;
}



@keyframes slider {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}

.new-about-us{
  width: 100%;
  height: max-content;
  padding: 20px 40px;
  background-color: var(--background-color);
  margin-top:2px;
}
.about-heading{
  width: 100%;
  font-size: 40px;
  text-align: center;
  color: var(--text-color);
}
.new-about-container{
  width: 100%;
  height: 100%;
  display: flex;
  gap: 10px;
}
.new-about-left{
  width: 60%;
  height:100%;
  display: flex;
  flex-direction: column;
  gap: 30px;
  flex-wrap: wrap;
  align-items: start;
}
.about-subHeading{
  margin-top: 20px;
  font-size: 25px;
  color: var(--text-color);
}
.about-para{
  font-size: 18px;
  color: var(--text-color);
  font-weight: 400;
}
.new-about-left ul{
  width: 100%;
  margin-left: 20px;
}
.new-about-left ul li{
  font-weight: 500;
  color: var(--text-color);
  list-style: circle;
  font-size: 18px;
}
.new-about-left a {
  width:max-content;
  padding: 12px 35px;
  border-radius: 5px;
  border: 1px solid white;
  cursor: pointer;
  background-color: var( --button-background);
  color: var(--text-color);
  text-decoration: none;
  transition: all 0.new-3s ease;
  &:active {
    transform: scale(0.9);
    box-shadow: 2px 2px 10px gray;
  }
}
.new-about-right{
  width: 40%;
  height: 100%;
  margin-top: 40px;
}
.new-about-images{
  width: 100%;
  height: 100%;
  position: relative;
  padding-left: 20px;
  
}
.new-about-img-one{
 width: 350px;
 height: 270px;
 position:absolute;
 bottom:-70px;
 right: 20px;
 box-shadow: 2px 2px 10px gray;
 border-radius: 10px;
 cursor: pointer;
 transition: all 0.1s ease;
 &:hover{
  transform: scale(1.1);
   border: 2px solid rgb(146, 146, 146);
 }
}
.new-about-img-two{
 width:400px;
 height: 300px;
 box-shadow: 2px 2px 10px rgb(83, 83, 83);
 border-radius: 10px;
 border: 2px solid rgb(146, 146, 146);
  cursor: pointer;
 transition: all 0.2s ease;
 &:hover{
  transform: scale(1.05);
  z-index: 99;
 }
}

.new-faq-section {
  width: 100%;
  padding: 20px 20px;
  background-color: var(--background-color);
  margin-top:2px;
}
.new-faq-box{
  width: 100%;
  display: flex;
  gap: 20px;
  padding: 20px 40px;
}

.faq-heading{
  width: 100%;
  font-size: 30px;
  text-align: center;
  margin-bottom: 20px;
  color: var(--text-color);
}
.new-faqs-info{
  width: 60%;
  display: flex;
  justify-content:center;
  align-items: start;
  flex-wrap: wrap;
  gap: 30px;
}
.new-faq {
  width: 100%;
  border-bottom: 1px solid #ddd;
  padding: 15px 0;
  cursor: pointer;
}

.new-faq-question {
  font-size: 20px;
  font-weight: 600;
  display: flex;
  justify-content: space-between;
}

.new-faq-answer {
  margin-top: 10px;
  display: none;
  font-size: 16px;
  color: var(--text-color);
}

.new-faq.new-active .new-faq-answer {
  display: block;
}
.new-faq-link{
  width: 100%;
  text-align:start;
  padding: 10px 40px;
}
.new-faq-link a{
  width: max-content;
  font-size: 20px;
  border-radius: 5px;
  padding: 10px 30px;
  background-color: var( --button-background);
  color: var(--text-color);
  text-decoration: none;
  border:1px solid white;
  transition: all 0.new-3s ease;
  &:active{
    transform: scale(0.9);
    box-shadow: 2px 2px 10px gray;
  }
}
.new-faq-img{
    width: 40%;
    display: flex;
    justify-content: center;
    align-items: center;
    mix-blend-mode:darken;
  }
.new-contact {
  width: 100%;
  height: 100%;
  padding: 20px 20px;
  text-align: center;
  background-color: var(--background-color);
  margin-top:2px;
}

.new-contact h2 {
  font-size: 2.5rem;
  margin-bottom: 15px;
  color: var(--text-color);
}

.new-contact h3 {
  font-size: 20px;
  font-weight: 400;
  margin-bottom: 40px;
 color: var(--text-color);
  max-width: 700px;
  margin-left: auto;
  margin-right: auto;
}

.new-contac-info {
  width: 100%;
  height: 100%;
  display: flex;
  gap: 10px;
  text-align: left;
}

.new-contact form {
  width: 50%;
  height: 100%;
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  gap: 15px;
}

.new-contact input,
.new-contact textarea {
  padding: 15px;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 1rem;
}

.new-contact input::placeholder,
.new-contact textarea::placeholder {
  color: gray;
}

.new-contact textarea {
  min-height: 120px;
  resize: vertical;
}

.new-contact form div {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 15px;
}

.new-contact button {
  padding: 10px 15px;
  background-color: var( --button-background);
  color: var(--text-color);
  border: none;
  border-radius: 4px;
  font-size: 1.5rem;
  cursor: pointer;
  border:1px solid white;
  transition: background-color 0.3s;
}


.new-loaction {
  width: 50%;
  height: 100%;
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  gap: 20px;
}


.new-location-info {
  padding: 20px;
 background-color: var(--background-color);
  border-radius: 4px;
}

.new-location-info h2 {
  font-size: 1.5rem;
  margin-bottom: 10px;
  color: var(--text-color);
}

.new-location-info h3 {
  font-size: 1rem;
  margin-bottom: 15px;
  color: var(--text-color);
}

.new-location-info p {
  margin: 8px 0;
  cursor: pointer;
  color: var(--text-color);
  &:hover{
    color: #1265e2;
  }
}
footer {
  background-color: var(--background-color);
  color: var(--text-color);
  padding: 40px 20px;
  text-align: center;
   margin-top:2px;
}

.new-footer-info {
  display: flex;
  justify-content: center;
  gap: 30px;
  margin-bottom: 20px;
}
.new-social {
  width: 100%;
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
}

.new-social a {
  width: 40px;
  height: 40px;
  border: 1px solid white;
  border-radius: 50%;
  overflow: hidden;
  transition: all 0.3s ease;
  cursor: pointer;
  &:hover {
    transform: scale(0.9);
    box-shadow: 2px 2px 10px gray;
  }
}
.new-social a img {
  width: 100%;
  height: 100%;
}

.new-social a:hover,
.other-web a:hover {
  background-color: var(--background-color);
}


/*OUR SOLUIONS STYLE*/
/*our solution */
	.our-solution {
  width: 100%;
  height: max-content;
  margin-top: 10px;
  padding: 0px 10px;
}
.solution-heading {
  width: 100%;
  text-align: center;
}
.our-solution h2 {
  font-size: 20px;
  text-align: center;
  font-weight: 400;
}
.project-container {
  width: 100%;
  margin-top: 40px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 30px;
  padding-bottom: 30px;
}
.project {
  min-width: 250px;
  width: 350px;
  min-height: 300px;
  height: max-content;
  background-color: var(--background-color);
  border-radius: 15px;
  overflow: hidden;
  box-shadow: 2px 2px 10px rgb(0,0,0,0.5);
  transition: all 0.3s ease;
  &:hover {
    transform: translateY(-10px);
    
  }
}
.project img {
  width: 100%;
  height: 100%;
}
.project h1 {
  font-size: 30px;
  font-weight: 500;
  color: var(--text-color);
  padding: 10px 20px;
}
.project p {
  color: var(--text-color);
  font-weight: 500;
  padding-left: 20px;
}
.project a {
  font-size: 18px;
  color: var(--text-color);
  cursor: pointer;
  text-decoration: none;
  padding-left: 20px;
  &:hover {
    text-decoration: underline;
  }
}


/* FEATURES STYLE */
.feature-container {
    max-width: 1100px;
    margin: 0 auto;
    padding: 40px 20px;
}

/* --- Section Header --- */
.process-header {
    text-align: center;
    margin-bottom: 60px;
    width: 100%;
    padding: 20px 36px;
    box-shadow: 2px 2px 10px gray;
    border-radius: 10px;
	 background-color:var(--background-color);
	
}

.process-header h1 {
    font-size: 2.8rem;
    font-weight: 500;
    color: var(--text-color);
    margin-bottom: 15px;
    text-align: start;
}

.process-header p {
    font-size: 1.3rem;
    font-weight: 400;
    color: var(--text-color);
    text-align: start;
}

/* --- Timeline Styles --- */
.process-timeline {
    position: relative;
    display: flex;
    justify-content: space-between;
    margin-bottom: 80px;
	flex-wrap: wrap;
    gap: 20px;
}

/* The connecting line */
.process-timeline::before {
    content: '';
    position: absolute;
    top: 30px;
    left: 50px; /* Aligns with the center of the first step number */
    right: 50px; /* Aligns with the center of the last step number */
    height: 4px;
    background-color:var(--background-color);
    z-index: 1;
}

.process-step {
   position: relative;
    z-index: 2;
    flex: 1;
    text-align: center;
    padding: 0 20px;
    border-radius: 10px;
    text-align: start;
    box-shadow: 2px 2px 5px gray;
	background-color:var(--background-color);
}

.step-number {
    width: 60px;
    height: 60px;
    background-color:var(--gradiant-color);
    color: var(--text-color);;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    font-weight: 600;
    margin: 0 auto 20px auto;
	box-shadow: 2px 2px gray;
    transition: transform 0.3s ease, background-color 0.3s ease;
}

.process-step:hover .step-number {
    transform: scale(1.1);
   background-color:var(--background-color);
}

.process-step h3 {
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--text-color);
    margin: 0 0 5px 0;
}

.step-percentage {
    font-size: 0.9rem;
    color: var(--text-color);
    margin-bottom: 15px;
}

.process-step p {
    font-size: 0.95rem;
    margin-bottom: 15px;
}

.process-step ul {
    list-style: none;
    padding: 0;
    text-align: left;
    font-size: 0.9rem;
}

.process-step ul li {
    position: relative;
    padding-left: 20px;
    margin-bottom: 8px;
	font-weight:700;
}

.process-step ul li::before {
    content: '✓';
    position: absolute;
    left: 0;
    color: var(--text-color);
    font-weight: bold;
}

/* --- Flexibility Section --- */
.flexibility-section {
    padding: 40px;
    border-radius: 8px;
    margin-bottom: 40px;
	text-align: start;
    box-shadow: 3px 3px 10px gray;
	background-color:var(--background-color);
}

.flexibility-section h2 {
    font-size: 2rem;
    font-weight: 600;
    color: var(--text-color);
    text-align: center;
    margin-top: 0;
    margin-bottom: 20px;
}

.flexibility-section p {
    margin: 0 auto 30px auto;
}

.optional-components-grid ul {
    list-style: none;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 15px;
}

.optional-components-grid ul li {
    background-color:var(--gradiant-color);
    padding: 15px;
    border-radius: 5px;
	font-weight: 600;
    border-left: 4px solid var(--secondary-color);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.optional-components-grid ul li:hover {
    transform: translateY(-5px);
    box-shadow: 0 4px 10px rgba(0,0,0,0.08);
}

/* --- Footer --- */
.process-footer {
    text-align:start;
	box-shadow: 3px 3px gray;
	border-radius:10px
}

.process-footer p {
    font-weight: 400;
    color: var(--text-color);
}

/* --- Responsive Design --- */
@media (max-width: 768px) {
    .container {
        padding: 20px 15px;
    }

    .process-header h1 {
        font-size: 2.2rem;
    }

    /* Change timeline to vertical */
    .process-timeline {
        flex-direction: column;
        align-items: flex-start;
    }

    .process-timeline::before {
        top: 30px;
        bottom: 30px; /* instead of right */
        left: 30px;
        right: auto;
        width: 4px;
        height: auto;
    }

    .process-step {
        width: 100%;
        text-align: left;
        padding-left: 70px; /* Space for the circle and line */
        margin-bottom: 40px;
    }

    .step-number {
        position: absolute;
        left: 0;
        top: 0;
        margin: 0;
    }
    
    .flexibility-section {
        padding: 20px;
    }
}


/* ABOUT STYLE */
about-page {
    font-family: "Inter", "Segoe UI", Arial, sans-serif;
    padding: 80px 0;
    background: linear-gradient(180deg, #f5f8ff 0%, #ffffff 100%);
}

/* ------------------------------
   CONTAINER
--------------------------------*/
.about-page .container {
    width: 90%;
    max-width: 1150px;
    margin: 0 auto;
}

/* ------------------------------
   SECTION CARD
--------------------------------*/
.about-page .section {
    background-color:var(--background-color);
    padding: 50px 45px;
    margin-bottom: 50px;
    border-radius: 16px;
    border: 1px solid #e5e9f2;
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.06);
    transition: all 0.3s ease;
}

.about-page .section:hover {
    transform: translateY(-4px);
    box-shadow: 0 15px 45px rgba(0, 0, 0, 0.08);
}

/* ------------------------------
   TITLES
--------------------------------*/
.about-page h2 {
    font-weight: 800;
    margin-bottom: 18px;
    color: var(--text-color);
    letter-spacing: -0.5px;
    position: relative;
    padding: 10px 10px;
    width: max-content;
    background-color: var(--gradiant-color);
	border-radius:0px 5px 5px 0px;
	overflow:hidden;
}

.about-page h2::before {
    content: "";
    width: 6px;
    height: 100%;
    background: var(--text-color);
    position: absolute;
    left: 0;
    top: 0;
    border-radius: 10px;
}

.about-page h3 {
    font-size: 24px;
    font-weight: 700;
    margin-top: 25px;
    color: var(--text-color);
}

/* ------------------------------
   PARAGRAPHS
--------------------------------*/
.about-page p {
    font-size: 17px;
    line-height: 1.8;
    margin-bottom: 18px;
    color: var(--text-color);
}

/* ------------------------------
   LISTS
--------------------------------*/
.about-page ul {
    margin: 18px 0;
    padding-left: 25px;
	list-style:none;
}

.about-page ul li {
    margin-bottom: 12px;
    font-size: 17px;
    line-height: 1.7;
    color: var(--text-color);
    position: relative;
}

.about-page ul li::before {
    content: "•";
    color: #0051ff;
    position: absolute;
    left: -18px;
    font-size: 20px;
}

/* ------------------------------
   SECTION SPACING
--------------------------------*/
.about-page .section + .section {
    margin-top: 60px;
}

/* FAQ STYLE*/
 .faq-header {
        padding: 60px 20px;
        width:100%;
        color: var(--text-color);
	 	background-color:var(--background-color);
    }
    .faq-header h1 {
        font-size: 40px;
        margin-bottom: 10px;
		color: var(--text-color);
    }
    .faq-header p {
		width:80%;
        font-size: 18px;
        opacity: 0.9;
		 color: var(--text-color);
    }

    .faq-container {
        max-width: 900px;
        margin: 50px 0px;
        padding: 0 20px;
		
    }

    .faq {
        border-radius: 10px;
        margin-bottom: 15px;
        padding: 20px;
        cursor: pointer;
        border: 1px solid #ddd;
        transition: all 0.3s ease;
		background-color:var(--background-color);
    }

    .faq h3 {
        margin: 0;
        font-size: 20px;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .faq p {
        margin-top: 10px;
        display: none;
        line-height: 1.7;
        font-size: 16px;
    }

    .faq.active p {
        display: block;
		transition: all 0.3s ease;
    }

    .icon {
        font-size: 24px;
        transition:all 0.3s ease;
    }

    .faq.active .icon {
        transform: rotate(45deg);
    }
 /* BLOG STYLING */
  .sidebar-container{
    width: 100%;
    min-height: 300px;
    padding: 20px 20px;
    display: flex;
    gap: 30px;
  }
  .company-blog{
    width: 74%;
    display: flex;
    flex-direction: column;
    align-items:start;
    justify-content: end;
    background-image: url('/images/ScholarSYS.jpg');
    background-size: cover;
    background-position: 100% 100%;
    box-shadow: 2px 2px 5px gray;
    border-radius: 10px;
    padding: 10px 20px;
    color:white;
    font-weight: 600;
    font-size: 22px;
     text-transform: capitalize;
  }
  .company-blog a{
    font-size: 20px;
    text-decoration: none;
    font-weight: 600;
    cursor: pointer;
    text-decoration: underline;
    color: white;
    &:hover{
      color:#2757be;
    }
  }
  .sidebar{
    width: 25%;
    display: flex;
    flex-direction: column;
    align-items: center;
    border-radius: 10px;
    padding: 10px 20px;
    border-left: 3px solid var(--text-color);
    box-shadow: 2px 2px 5px gray;
    background-color: var(--background-color);
    
  }
  .sidebar h3{
    font-size: 25px;
  }
  .sidebar ul{
    display: flex;
    flex-direction: column;
    list-style: none;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 20px;
    margin-top: 30px;
  }
  .sidebar ul li{
    padding: 8px 12px;
    border-radius: 5px;
    &:hover{
      background-color:var(--gradiant-text);
    }
  }
  .sidebar ul li a{
    font-size: 20px;
    text-decoration: none;
    cursor: pointer;
    color:var(--text-color);
  }
  .container{
    width: 100%;
    padding: 20px 20px;
    position: relative;
  }
  .all-blog{
    width: 100%;
    margin-top: 40px;
    height: max-content;
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: center;
    flex-wrap: wrap;
    gap: 30px;
  }
  .blog-info-details{
    position: absolute;
    width: 98%;
    min-height:max-content;
    height: 100%;
    background-color:#e4f1f8;
    display:none;
    flex-direction: column;
    align-items: center;
    gap: 40px;
  }
  .blog-info-details img{
    margin-top: 40px;
    max-width: 400px;
    max-height: 300px;
    border-radius: 10px;
    box-shadow: 2px 2px 10px gray;
  }
  .blog-info-details h2{
    font-size: 30px;
    width: 100%;
    text-align: center;
  }
  .details{
    width: 90%;
    text-align: center;
    padding: 20px 20px;
    border: 1px solid black;
    border-radius: 10px;
    text-align: start;
  }
  .details p{
    font-size: 18px;
    padding: 20px 20px;
    width: 100%;
  }
  .technology,.life-style,.design,.bussiness{
    width: 100%;
    scrollbar-width: none;
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: center;
    flex-wrap: wrap;
    gap:10px;
  }
  .blog-card{
    width: 90%;
    min-height: 250px;
    border-radius: 10px;
    padding: 20px;
    box-shadow: gray 2px 2px 5px;
    background-color: var(--background-color);
    border-left: 3px solid var(--text-color);
    display: flex;
    gap: 30px;
    color: var(--text-color);
    
  }
  .blog-card img{
    max-width: 300px;
    max-height: 350px;
    border-radius: 10px;
    box-shadow: 2px 2px 5px gray;
  }
  .blog-info p{
    margin-top: 10px;
    font-size: 18px;
    color:var(--text-color);
  }
  .blog-info span{
    font-size: 20px;
    color:var(--text-color);
    cursor: pointer;
  }
  .blog-heads{
    width: 100%;
    display: flex;
    justify-content: end;
    align-items:center;
    flex-wrap: wrap;
    gap: 10px;
    
  }
  .show-heading-category,.add-blogs{
    width:max-content;
    padding: 15px 30px;
    font-size: 30px;
    text-transform: capitalize;
    font-weight: 400;
    border-radius: 8px;
    border-left: 3px solid var(--text-color);
    background-color: var(--background-color);
	color:var(--text-color);
  }
  .add-blogs{
    cursor: pointer;
    padding: 15px 30px;
    font-size: 28px;
  }
  .descriptions2{
    display: none;
  }
  .showDescriptions{
    display: block;
  }
  
  #description2{
    height: 80px;
    font-size: 17px;
    resize: none;
    padding: 10px 5px;
    outline: none;
  }
 .read-more{
	font-weight:700;
}

  @media (max-width: 768px) {
   .blog-card{
    flex-wrap: wrap;
   }
   .sidebar-container{
    flex-direction: column;
   }
   .company-blog{
    width: 99%;
    min-height: 250px;
   }
   .sidebar{
    width: 99%;
   }
   .sidebar ul{
    flex-direction: row;
    justify-content: space-evenly;
    margin-top: 10px;
   }
  }


  @media (max-width:560px) {
    .blog-card img{
      width: 200px;
    }
  }

@media (max-width: 992px) {
    .about-page .section {
        padding: 40px 30px;
    }

    .about-page h2 {
        font-size: 30px;
    }

    .about-page h3 {
        font-size: 22px;
    }
}

@media (max-width: 600px) {
    .about-page .section {
        padding: 30px 22px;
        border-radius: 12px;
    }

    .about-page h2 {
        font-size: 26px;
        padding-left: 14px;
    }

    .about-page h2::before {
        width: 4px;
    }

    .about-page p,
    .about-page ul li {
        font-size: 16px;
    }
}


@media (max-width: 768px) {
  .new-hero-container,
  .new-what-we-do-container {
    flex-wrap: wrap;
    justify-content: center;
  }
  .new-left-hero,
  .new-left-what-we-do {
    width: 100%;
  }
  .new-right-what-we-do {
    width: 100%;
    height: max-content;
  }
  .new-bg-img-box{
    opacity: 10%;
  }
  .new-faqs-info{
    width: 100%;
  }
  .new-faq-box{
    flex-wrap: wrap;
  }
  .new-faq-img{
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
	mix-blend-mode:darken;
    
  }
  .new-faq-img img{
    width: 350px;
    border-radius: 10px;
  }

  .new-contact form div {
    grid-template-columns: 1fr;
  }
 
}
@media (max-width: 900px) {
  .new-contac-info{
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }
  .new-loaction,.new-contac-info form{
    width: 90%;
  }
}
@media (max-width:991px) {
  .new-product-box{
    overflow: auto;
    scrollbar-width: none;
  }
}
@media (max-width: 1020px){
.new-bg-img-box{
  opacity: 50%;
}
.new-about-container{
  flex-wrap: wrap;
}
.new-about-left{
  width: 100%;
}
.new-about-right{
  display: none;
}
}

/* NAVBAR CSS */
/* About Us Section */
#About_Us.genViews {
    margin: 60px auto;
    padding: 20px 50px;
    border-radius: 18px;
    animation: fadeIn 0.8s ease-in-out;
}

/* Individual Content Boxes */
#About_Us .ovBox {
    background: var(--background-color);;
    padding: 30px;
    margin-bottom: 25px;
    border-radius: 14px;
    border-left: 6px solid #0b4da2;
    transition: 
        transform 0.35s ease,
        box-shadow 0.35s ease,
        border-color 0.35s ease;
    position: relative;
    overflow: hidden;
}

/* Hover Effect */
#About_Us .ovBox:hover {
    transform: translateY(-6px);
    box-shadow: 0 14px 28px rgba(0, 0, 0, 0.15);
    border-left-color:var(--text-color);
}

/* Decorative Hover Glow */
#About_Us .ovBox::before {
    content: "";
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        120deg,
        transparent,
        rgba(11, 77, 162, 0.08),
        transparent
    );
    transition: left 0.6s ease;
}

#About_Us .ovBox:hover::before {
    left: 100%;
}

/* Text Styling */
#About_Us .ovBox p {
    font-size: 16.5px;
    line-height: 1.85;
    color:var(--text-color);;
    margin: 0;
}

/* Smooth entrance animation */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(25px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Responsive Tweaks */
@media (max-width: 768px) {
    #About_Us.genViews {
        padding: 30px 20px;
    }

    #About_Us .ovBox {
        padding: 22px;
    }

    #About_Us .ovBox p {
        font-size: 15.5px;
    }
}


/* Nav Contact US CSS*/ 
#Contact_Us{
    margin: 10px 250px;
}
}
.contact-table-horizontal {
    width: 100%;
    border-collapse: collapse;
    font-family: Arial, Helvetica, sans-serif;
    border: 1px solid var(--text-color);
}

.contact-table-horizontal th {
    background:var(--background-color);
    color: var(--text-color);
    font-weight: 600;
    padding: 12px;
    text-align: center;
    border: 1px solid var(--text-color);
}

.contact-table-horizontal td {
    padding: 12px;
    vertical-align: top;
    border: 1px solid var(--text-color);
    color: var(--text-color);
}

.company-name {
    color:var(--text-color)
}

.contact-table-horizontal a {
    color: var(--text-color);
    text-decoration: none;
}

.contact-table-horizontal a:hover {
    text-decoration: underline;
}

.description {
    text-align: center;
    color:var(--text-color);
    line-height: 1.6;
     background:var(--background-color);
}

.cta-row td {
    text-align: center;
     background:var(--background-color);
    font-weight: 600;
}

.cta-row a {
    margin: 0 6px;
}
/*MISSION CSS */
    .about-stc {
    margin: 0 auto;
    padding: 40px 20px;
    font-family: "Segoe UI", Arial, Helvetica, sans-serif;
    color: var(--text-color);
    background:var(--background-color);
}

/* Intro Text */
.intro-text {
    font-size:20px;
    color: var(--text-color);
    margin-bottom: 20px;
    transition: color 0.3s ease;
}

.intro-text:hover {
    color: #0033cc;
}

/* Section Heading */
.section-heading {
    margin-top: 35px;
    font-size: 26px;
    color: var(--text-color);
    position: relative;
    display: inline-block;
}



/* Mission Text */
.mission-text {
    font-size: 15px;
    color: var(--text-color);
    margin-bottom: 12px;
}

/* Principles Grid */
.principles {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: 22px;
    margin-top: 30px;
}

/* Principle Card */
.principle {
   background:var(--gradiant-color);
    border-radius: 14px;
    padding: 22px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.06);
    transition: transform 0.4s ease, box-shadow 0.4s ease;
    position: relative;
    overflow: hidden;
}

/* Accent Glow */
.principle::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 5px;
}

/* Hover Effect */
.principle:hover {
    transform: translateY(-8px) scale(1.02);
    box-shadow: 0 18px 45px rgba(0, 51, 204, 0.25);
}

/* Card Heading */
.principle h3 {
    
    margin-bottom: 10px;
    color: var(--text-color);
}

/* Card Text */
.principle p {
    color: var(--text-color);
    line-height: 1.6;
}

/* Divider */
.divider {
    margin: 50px auto 30px;
    width: 120px;
    height: 4px;
    border: none;
    border-radius: 10px;
}

/* Highlight Quote */
.highlight-text {
    text-align: center;
    font-size: 16px;
    font-weight: 600;
   color: var(--text-color);
    padding: 18px 25px;
    background:var(--gradiant-color);
    border-radius: 12px;
    animation: pulseGlow 3s infinite;
}

/* Subtle Pulse Animation */
@keyframes pulseGlow {
    0% {
        box-shadow: 0 0 0 rgba(0, 51, 204, 0.4);
    }
    50% {
        box-shadow: 0 0 20px rgba(0, 51, 204, 0.3);
    }
    100% {
        box-shadow: 0 0 0 rgba(0, 51, 204, 0.4);
    }
}

/* Responsive Tweaks */
@media (max-width: 600px) {
    .section-heading {
        font-size: 22px;
    }

    .principle {
        padding: 18px;
    }
}

/* SKILLS CSS*/
    /* Our Skills Section */
#Our_Skills.genViews {
	
    margin: 0 auto;
    padding: 40px 28px;
    font-family: "Segoe UI", Arial, Helvetica, sans-serif;
    background:var(--background-color);
    border-radius: 16px;
    box-shadow: 0 14px 40px rgba(0, 0, 0, 0.06);
}

/* Paragraph Styling */
#Our_Skills.genViews p {
    font-size: 22px;
    line-height: 1.9;
    color: var(--text-color);
    margin-bottom: 22px;
    padding-left: 20px;
    position: relative;
}

/* Vertical Accent Line */
#Our_Skills.genViews p::before {
    content: "";
    position: absolute;
    left: 0;
    top: 12px;
    width: 4px;
    height: calc(100% - 20px);
    background: linear-gradient(180deg, #0033cc, #6aa7ff);
    border-radius: 4px;
}

/* Last Paragraph Highlight */
#Our_Skills.genViews p:last-child {
    font-weight: 600;
    color:var(--text-color);
}

/* Improve Readability on Hover */
#Our_Skills.genViews p:hover {
    color: #0033cc;
    transition: color 0.3s ease;
}

/* Responsive Optimization */
@media (max-width: 768px) {
    #Our_Skills.genViews {
        padding: 26px 18px;
        border-radius: 12px;
    }

    #Our_Skills.genViews p {
        font-size: 14.5px;
        line-height: 1.75;
        padding-left: 16px;
    }
}
/* ===============================
   Quality Management – Interactive
================================== */

.quality-management {
    
    margin: 0 auto;
    padding: 45px 30px;
    font-family: "Segoe UI", Arial, Helvetica, sans-serif;
    background:var(--background-color);
    border-radius: 18px;
    position: relative;
    overflow: hidden;
}

/* Soft animated glow background */
.quality-management::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at top right,
        rgba(0, 51, 204, 0.08),
        transparent 60%);
    pointer-events: none;
}

/* Intro Text */
.quality-management .intro-text {
    line-height: 1.9;
    color: var(--text-color);
    margin-bottom: 30px;
    transition: color 0.3s ease;
}

.quality-management .intro-text:hover {
    color: #0033cc;
}

/* Subtitle */
.section-subtitle {
    font-size: 24px;
    color: var(--text-color);
    margin-bottom: 22px;
    position: relative;
    display: inline-block;
}

/* Animated underline */
.section-subtitle::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -8px;
    width: 100%;
    height: 3px;
    background: linear-gradient(90deg, #0033cc, #6aa7ff);
    border-radius: 6px;
    transform: scaleX(0.35);
    transform-origin: left;
    transition: transform 0.4s ease;
}

.section-subtitle:hover::after {
    transform: scaleX(1);
}

/* Quality List */
.quality-list {
    list-style: none;
    padding: 0;
    margin: 35px 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 22px;
}

/* Quality Cards */
.quality-list li {
    background:var(--gradiant-color);
    border-radius: 16px;
    padding: 24px 22px 26px;
    position: relative;
    font-size: 15px;
    line-height: 1.7;
    color: var(--text-color);
    box-shadow: 0 12px 35px rgba(0, 0, 0, 0.07);
    transition: transform 0.45s ease, box-shadow 0.45s ease;
    overflow: hidden;
}

/* Top accent strip */
.quality-list li::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 5px;
    background: linear-gradient(90deg, #0033cc, #6aa7ff);
}

/* Hover lift */
.quality-list li:hover {
    transform: translateY(-10px) scale(1.02);
    box-shadow: 0 22px 60px rgba(0, 51, 204, 0.28);
}

/* Headings */
.quality-list strong {
    display: block;
    margin-bottom: 8px;
    font-size: 16px;
    color:var(--text-color);
}

/* Closing Text */
.closing-text {
    margin-top: 35px;
    padding: 22px;
    font-size: 15.5px;
    line-height: 1.85;
    color: var(--text-color);
    text-align: center;
    background: var(--gradiant-color);
    border-radius: 14px;
    animation: softPulse 3.5s infinite;
}

/* Pulse animation */
@keyframes softPulse {
    0% {
        box-shadow: 0 0 0 rgba(0, 51, 204, 0.3);
    }
    50% {
        box-shadow: 0 0 22px rgba(0, 51, 204, 0.35);
    }
    100% {
        box-shadow: 0 0 0 rgba(0, 51, 204, 0.3);
    }
}

/* Responsive */
@media (max-width: 768px) {
    .quality-management {
        padding: 30px 20px;
    }

    .section-subtitle {
        font-size: 21px;
    }

    .quality-list li {
        padding: 20px;
    }
}
  /* ===============================
   Success – Our Customers
================================ */

.success-customers {
    margin: 0 auto;
    padding: 50px 30px;
	width:100%;
    position: relative;
    overflow: hidden;
}

/* Soft background accent */
.success-customers::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at bottom left,
        rgba(0, 51, 204, 0.08),
        transparent 60%);
    pointer-events: none;
}

/* Intro text */
.success-customers .intro-text {
    font-size: 20px;
    line-height: 1.9;
    color: var(--text-color);
    max-width: 900px;
    margin-bottom: 40px;
    transition: color 0.3s ease;
}

/* Grid layout */
.success-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 24px;
}

/* Cards */
.success-card {
    background:var(--background-color); 
    border-radius: 18px;
    padding: 26px 24px 30px;
    box-shadow: 0 14px 40px rgba(0, 0, 0, 0.08);
    position: relative;
    transition: transform 0.45s ease, box-shadow 0.45s ease;
    overflow: hidden;
}

/* Top gradient bar */
.success-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    height: 5px;
    width: 100%;
    background: linear-gradient(90deg, #0033cc, #6aa7ff);
}

/* Hover interaction */
.success-card:hover {
    transform: translateY(-12px) scale(1.03);
    box-shadow: 0 28px 70px rgba(0, 51, 204, 0.3);
}

/* Card heading */
.success-card h3 {
    margin-bottom: 10px;
    color: var(--text-color);
}

/* Card text */
.success-card p {
    line-height: 1.7;
    color:var(--text-color);
}

/* Responsive */
@media (max-width: 768px) {
    .success-customers {
        padding: 32px 20px;
        border-radius: 14px;
    }

    .success-card {
        padding: 22px;
    }

    .success-card h3 {
        font-size: 17px;
    }
}
/*WHAT STC OFFER CSS */
.stc-offers {
   padding: 90px 20px;
  
}

.section-subtitle {
    color: var(--text-color);
}

.stc-offer-intro-text {
    margin: 0 auto 60px;
    font-size: 15.5px;
    line-height: 1.8;
    color: var(--text-color);
}

.offers-grid {
    margin: auto;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 30px;
}

.offer-card {
    background:var(--background-color);
    padding: 32px 28px;
    border-radius: 18px;
    position: relative;
    overflow: hidden;
    transition: all 0.35s ease;
    box-shadow: 0 12px 32px rgba(0,0,0,0.08);
}

.offer-card::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(120deg, #0d6efd, #6610f2);
    opacity: 0;
    transition: opacity 0.35s ease;
}

.offer-card:hover::before {
    opacity: 0.06;
}

.offer-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 22px 45px rgba(0,0,0,0.14);
}

.offer-card h3 {
    position: relative;
    z-index: 1;
    margin-bottom: 14px;
    color: var(--text-color);
}

.offer-card p {
    position: relative;
    z-index: 1;
    line-height: 1.7;
    color: var(--text-color);
}

.offer-card:hover h3 {
    color: #0d6efd;
}

.cta-text {
    margin-top: 60px;
    text-align: center;
    color: var(--text-color);
    background:var(--background-color);
    padding: 22px 30px;
    border-radius: 14px;
    max-width: 900px;
    margin-left: auto;
    margin-right: auto;
}
/*WEB APPLICATION DEVELOPMENT*/
/* Main container */
.genViews.webAppView {
    padding: 32px;
    background: var(--background-color);
    animation: webFadeSlide 0.6s ease-in-out;
    transition: box-shadow 0.3s ease, transform 0.3s ease;
}

/* Hover effect for section */
.genViews.webAppView:hover {
    box-shadow: 0 18px 40px rgba(37, 99, 235, 0.18);
    transform: translateY(-3px);
}

/* Heading */
.genViews.webAppView h3 {
    font-size: 26px;
    line-height: 1.4;
    margin-bottom: 24px;
    color: var(--text-color);
    position: relative;
}

/* Heading underline */
.genViews.webAppView h3::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -10px;
    width: 80px;
    height: 3px;
    background: linear-gradient(to right, #2563eb, #60a5fa);
    border-radius: 2px;
}

/* Paragraphs */
.genViews.webAppView .ccfs {
    font-size: 16px;
    line-height: 1.8;
    color: #4b5563;
    margin-bottom: 16px;
    transition: transform 0.3s ease, color 0.3s ease;
}

/* Interactive paragraph hover */
.genViews.webAppView .ccfs:hover {
    transform: translateX(8px);
    color: #111827;
}

/* Entry animation */
@keyframes webFadeSlide {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Responsive */
@media (max-width: 768px) {
    .genViews.webAppView {
        padding: 22px;
    }

    .genViews.webAppView h3 {
        font-size: 22px;
    }

    .genViews.webAppView .ccfs {
        font-size: 15px;
    }
}
/*UNIVERSAL SERVICES */
/* Main container */
.genViews.universalServiceView {
    padding: 30px;
    background: var(--background-color);
    animation: universalFade 0.6s ease-in-out;
    transition: box-shadow 0.35s ease, transform 0.35s ease;
}

/* Section hover effect */
.genViews.universalServiceView:hover {
    box-shadow: 0 18px 40px rgba(16, 185, 129, 0.18);
    transform: translateY(-4px);
}

/* Heading */
.genViews.universalServiceView h3 {
    font-size: 25px;
    color: var(--text-color);
    margin-bottom: 18px;
    position: relative;
}



/* Paragraph */
.genViews.universalServiceView .ccfs {
    line-height: 1.8;
    color: var(--text-color);
    transition: color 0.3s ease, transform 0.3s ease;
}



/* Fade animation */
@keyframes universalFade {
    from {
        opacity: 0;
        transform: translateY(18px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Responsive */
@media (max-width: 768px) {
    .genViews.universalServiceView {
        padding: 22px;
    }

    .genViews.universalServiceView h3 {
        font-size: 22px;
    }

    .genViews.universalServiceView .ccfs {
        font-size: 15px;
    }
}

/*OFFSHRING STAFF CSS*/
/* Main container */
.genViews.offshoreStaffingView {
    padding: 30px;
    background: var(--background-color) ;
    animation: offshoreFade 0.6s ease-in-out;
    transition: box-shadow 0.35s ease, transform 0.35s ease;
}

/* Paragraphs */
.genViews.offshoreStaffingView .ccfs {
	width:80%;
	font-size:20px;
    line-height: 1.85;
    color: var(--text-color);
    margin-bottom: 16px;
    transition: color 0.3s ease, transform 0.3s ease;
}



/* Entry animation */
@keyframes offshoreFade {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .genViews.offshoreStaffingView {
        padding: 22px;
    }

    .genViews.offshoreStaffingView .ccfs {
        font-size: 15px;
    }
}
/*RESELLE PROGRAM */ 
/* Main container */
.genViews.resellerProgramView {
    padding: 32px;
	background:var(--background-color);
}



/* Main heading */
.genViews.resellerProgramView h1 {
    font-size: 35px;
    color:var(--text-color);
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    gap: 10px;
}

/* Join icon hover */
.genViews.resellerProgramView h1 img  {
   /* transition: transform 0.3s ease, filter 0.3s ease;*/
	display:none;
}

.genViews.resellerProgramView h1 img:hover {
    transform: scale(1.15);
    filter: brightness(1.2);
}

/* Section headings */
.genViews.resellerProgramView h3 {
    font-size: 25px;
    color:var(--text-color);
    margin: 22px 0 10px;
    position: relative;
}

/* Heading underline */
.genViews.resellerProgramView h3::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -6px;
    width: 60px;
    height: 3px;
    background: linear-gradient(to right, #2563eb, #60a5fa);
    border-radius: 2px;
}

/* Paragraphs */
.genViews.resellerProgramView .ccfs {
    font-size: 16px;
    line-height: 1.85;
    color:var(--text-color);
    margin-bottom: 16px;
    transition: color 0.3s ease, transform 0.3s ease;
}



/* Advantages title */
.genViews.resellerProgramView .boldblue {
    font-weight: 600;
    color:var(--text-color);
    margin: 14px 0 8px;
}

/* Bullet table styling */
.genViews.resellerProgramView table.ccfs tr {
    transition: background 0.3s ease;
}
.genViews.resellerProgramView table.ccfs tr td{
	font-size:20px;
}
.genViews.resellerProgramView table.ccfs tr td img{
	display:none;
}


/* HR styling */
.genViews.resellerProgramView hr {
    border: none;
    height: 2px;
    background: linear-gradient(to right, #336699, #93c5fd);
    margin: 18px 0;
}

/* Entry animation */
@keyframes resellerFade {
    from {
        opacity: 0;
        transform: translateY(22px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Responsive */
@media (max-width: 768px) {
    .genViews.resellerProgramView {
        padding: 22px;
    }

    .genViews.resellerProgramView h1 {
        font-size: 24px;
        flex-wrap: wrap;
    }

    .genViews.resellerProgramView h3 {
        font-size: 20px;
    }

    .genViews.resellerProgramView .ccfs {
        font-size: 15px;
    }
}
/*PERSONALIZED */
/* Main container */
.genViews.personalizedSupportView {
    padding: 28px 32px;
    background: var(--background-color);
}

/* Paragraph styling */
.genViews.personalizedSupportView .ccfs {
    
    line-height: 1.85;
    color:var(--text-color);
    margin-top: 16px;

}

/* Highlight first paragraph */
.genViews.personalizedSupportView .ccfs:first-child {
	font-size:20px;
    font-weight: 700;
    color:var(--text-color);
}



/* Responsive tweaks */
@media (max-width: 768px) {
    .genViews.personalizedSupportView {
        padding: 20px;
    }

    .genViews.personalizedSupportView .ccfs {
        font-size: 15px;
    }
}
/*SOFTWARE RESCUE */
/* Main container */
.genViews.softwareRescueView {
    padding: 34px;
	border:1px solid white;
	background:var(--background-color);

}

/* Hover emphasis */
.genViews.softwareRescueView:hover {
    box-shadow: 0 22px 50px rgba(220, 38, 38, 0.25);
    transform: translateY(-4px);
}

/* Paragraphs */
.genViews.softwareRescueView .ccfs {
    font-size:20px;
    line-height: 1.85;
    margin-bottom: 16px;
    color:var(--text-color);
	
    
}

/* Emphasize key warning text */
.genViews.softwareRescueView .ccfs:first-child {
	font-size:25px;
    font-weight: 600;
    color: var(--text-color);
}

/* Bullet table base */
.genViews.softwareRescueView table.ccfs {
    margin: 10px 0 18px;
}


/* Nested bullet indentation */
.genViews.softwareRescueView table table.ccfs {
    margin-top: 6px;
    border-left: 3px solid rgba(220, 38, 38, 0.25);
    padding-left: 8px;
}

.genViews.softwareRescueView table.ccfs tr img{
	display:none;
}

/* Responsive */
@media (max-width: 768px) {
    .genViews.softwareRescueView {
        padding: 22px;
    }

    .genViews.softwareRescueView .ccfs {
        font-size: 15px;
    }
}

   /* ==================================================
   DOWNLOADS SECTION – SAFE ENHANCEMENTS
   ================================================== */

.genViews--downloads {
    padding: 16px 20px;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 13px;
    color:var(--text-color);
    background-color:var(--background-color);
}

/* Main notice */
.genViews--downloads > .boldblue {
    margin-bottom: 14px;
    display: block;
}

/* Table base */
.genViews--downloads table {
    width: 100%;
    border-collapse: collapse;
}

/* Table rows */
.genViews--downloads td {
    padding: 6px 8px;
    vertical-align: middle;
}

/* Product title row */
.genViews--downloads tr:nth-child(6n + 1) td {
    padding-top: 14px;
    font-size: 14px;
}

/* Product name */
.genViews--downloads .boldblue {
    color: #0033cc;
    font-weight: bold;
}

/* Meta labels */
.genViews--downloads .ccfs {
    color:var(--text-color);
}

/* Icons */
.genViews--downloads img {
    vertical-align: middle;
}

/* New badge */
.genViews--downloads img[src*="new.gif"] {
    margin-left: 6px;
}

/* Try it button */
.genViews--downloads a[href*="Register"],
.genViews--downloads a[href*="download"] {
    display: inline-block;
    padding: 5px 14px;
    background-color:var(--gradiant-color);
    color:var(--text-color);
    font-size: 12px;
    text-decoration: none;
    border-radius: 3px;
    transition: background-color 0.2s ease;
}


/* Top link */
.genViews--downloads a[href="#top"] {
    font-size: 11px;
    color: #0033cc;
    text-decoration: none;
}

.genViews--downloads a[href="#top"]:hover {
    text-decoration: underline;
}

/* Divider */
.genViews--downloads hr {
    border: none;
    border-top: 1px solid #0033cc;
    margin: 10px 0 14px;
}

/* Responsive improvement */
@media (max-width: 768px) {
    .genViews--downloads td {
        display: block;
        width: 100%;
    }

    .genViews--downloads tr {
        display: block;
        margin-bottom: 12px;
    }

    .genViews--downloads hr {
        margin-top: 14px;
    }
}
/*PART OF SITE */

.stc-offer-section-title {
    text-align: center;
    font-size: 34px;
    font-weight: 700;
    color:var(--text-color);
}

.stc-offer-section-subtitle {
	font-size:25px;
	text-align:left;
    max-width: 720px;
    margin: 10px auto 50px;
    color:var(--text-color);
}

.offsite-content {
    width;100%;
    margin: auto;
}

.offsite-text {
    font-size: 15.5px;
    line-height: 1.8;
    color:var(--text-color);
    margin-bottom: 18px;
}

.offsite-cards {
    max-width: 1000px;
    margin: 50px auto;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
}

.offsite-card {
    background: var(--background-color);
    padding: 30px;
    border-radius: 16px;
    position: relative;
    transition: all 0.35s ease;
    box-shadow: 0 12px 30px rgba(0,0,0,0.07);
}

.offsite-card::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 16px;
    opacity: 0;
    transition: opacity 0.35s ease;
}

.offsite-card.advantage::before {
    background: linear-gradient(120deg, #0d6efd, #20c997);
}

.offsite-card.disadvantage::before {
    background: linear-gradient(120deg, #dc3545, #fd7e14);
}

.offsite-card:hover::before {
    opacity: 0.07;
}

.offsite-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 22px 45px rgba(0,0,0,0.12);
}

.offsite-card h3 {
    position: relative;
    z-index: 1;
    font-size: 22px;
    margin-bottom: 15px;
}

.offsite-card ul {
    position: relative;
    z-index: 1;
    list-style: none;
    padding: 0;
}

.offsite-card ul li {
    padding-left: 28px;
    margin-bottom: 12px;
    position: relative;
    font-size: 15px;
    color:var(--text-color);
}

.offsite-card ul li::before {
    content: "✔";
    position: absolute;
    left: 0;
    color:var(--text-color);
    font-weight: 600;
}

.offsite-card.disadvantage ul li::before {
    content: "⚠";
    color:var(--text-color);
}

.offsite-recommendation {
    text-align: center;
    margin: auto;
    font-size: 16px;
    color:var(--text-color);
    background: var(--background-color);
    padding: 20px 30px;
    border-radius: 12px;
}
.part-offsite {
    padding: 40px 20px;
}

/*PARTNERSHIP*/
/* Main container */
.genViews.partnershipView {
    padding: 28px 32px;
    background: var(--background-color);
}



/* Paragraph */
.genViews.partnershipView .ccfs {
    font-size: 20px;
    line-height: 1.85;
    color:var(--text-color);
    transition: color 0.3s ease, transform 0.3s ease;
}


/* Links */
.genViews.partnershipView a {
    color:var(--text-color);
    font-weight: 500;
    text-decoration: none;
    position: relative;
    transition: color 0.3s ease;
}

/* Animated underline */
.genViews.partnershipView a::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -2px;
    width: 100%;
    height: 2px;
    background: currentColor;
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.3s ease;
}

/* Responsive */
@media (max-width: 768px) {
    .genViews.partnershipView {
        padding: 20px;
    }

    .genViews.partnershipView .ccfs {
        font-size: 15px;
    }
}
/*OVERVIEW*/
.partnership-overview {
    padding: 40px 20px;
    
}

.overview-section-title {
    text-align: center;
    font-size: 36px;
    font-weight: 700;
    color:var(--text-color);
}

.overview-section-subtitle {
    text-align: center;
    font-size: 25px;
    margin: 12px auto 40px;
    color: var(--text-color);
	border-bottom:1px solid var(--text-color);
	padding-bottom:5px;
}

.overview-text {
   
    margin: 0 auto 70px;
    text-align:left;
    font-size: 20px;
    line-height: 1.8;
    color:var(--text-color);
}

.partner-programs {
    margin: auto;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
}

.program-card {
    background: var(--background-color);
    padding: 34px 30px;
    border-radius: 20px;
    box-shadow: 0 14px 35px rgba(0,0,0,0.08);
    transition: all 0.35s ease;
    position: relative;
    overflow: hidden;
}

.program-card::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(120deg, #0d6efd, #6610f2);
    opacity: 0;
    transition: opacity 0.35s ease;
}

.program-card:hover::before {
    opacity: 0.06;
}

.program-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 24px 50px rgba(0,0,0,0.14);
}

.program-card h3 {
    position: relative;
    z-index: 1;
    font-size: 22px;
    margin-bottom: 10px;
    color:var(--text-color);
}

.program-card:hover h3 {
    color: #0d6efd;
}

.for-whom {
    position: relative;
    z-index: 1;
    font-size: 14.5px;
    color: var(--text-color);
    margin-bottom: 18px;
}

.program-card ul {
    position: relative;
    z-index: 1;
    list-style: none;
    padding: 0;
    margin-bottom: 25px;
}

.program-card ul li {
    padding-left: 26px;
    margin-bottom: 10px;
    font-size: 14.8px;
    color: var(--text-color);
    position: relative;
}

.program-card ul li::before {
    content: "✔";
    position: absolute;
    left: 0;
    color: #0d6efd;
    font-weight: 600;
}

.program-actions {
    position: relative;
    z-index: 1;
    display: flex;
    gap: 15px;
    justify-content: center;
    flex-wrap: wrap;
    align-items: center;
}

.learn-more {
    font-size: 14.5px;
    font-weight: 600;
    color: var(--text-color);
    text-decoration: none;
    padding-bottom: 2px;
    border-bottom: 2px solid transparent;
    transition: all 0.3s ease;
}

.learn-more:hover {
    border-color: #0d6efd;
}

.join-btn {
    padding: 10px 22px;
    font-size: 14.5px;
    font-weight: 600;
    color: var(--text-color);
    border-radius: 30px;
    text-decoration: none;
    transition: all 0.35s ease;
	background:var(--gradiant-text);
}

.join-btn:hover {
    transform: translateY(-3px);
}
/*OUT SURCING*/
.genViews.outsourcing {
    background: var(--background-color);
    padding: 40px;
    
  
}



/* Headings */
.outsource-section-title {
	width:max-content;
    font-size: 28px;
    color:var(--text-color);
    margin-bottom: 20px;
    border-left: 5px solid var(--text-color);
    padding: 10px 15px;
	border-radius:8px;
	background:var(--gradiant-text);
}

.sub-title {
	width:max-content;
    font-size: 22px;
    color: var(--text-color);
    margin: 30px 0 15px;
}

/* Text */
.section-text {
    font-size: 16px;
    line-height: 1.7;
    color: var(--text-color);
    margin-bottom: 15px;
}

/* Highlight paragraph */
.section-text.highlight {
	width:max-content;
    background: var(--gradiant-text);
    padding: 15px 20px;
    border-left: 4px solid var(--text-color);
    border-radius: 6px;
}

/* Advantages List */
.advantages-list {
    list-style: none;
    padding: 0;
    margin: 20px 0;
}

.advantages-list li {
    position: relative;
    padding-left: 30px;
    margin-bottom: 14px;
    font-size: 16px;
    color: var(--text-color);
    transition: color 0.3s ease;
}

.advantages-list li::before {
    content: "✔";
    position: absolute;
    left: 0;
    top: 0;
    color: #0b4da2;
    font-weight: bold;
}

.advantages-list li:hover {
    color: #0b4da2;
}
/*MIGRATION AND UPGRADES*/
/* Interactive enhancement */
.genViews--interactive {
    padding: 24px;
    background:var(--background-color);
    transform: translateY(20px);
    opacity: 0;
    animation: genViewFadeUp 0.6s ease forwards;
}

/* Text styling */
.genViews--interactive .ccfs {
    line-height: 1.7;
    color: var(--text-color);
    transition: color 0.3s ease;
	font-size: 20px;
}

/* Hover interaction */
.genViews--interactive:hover {
    box-shadow: 0 14px 35px rgba(0, 0, 0, 0.12);
    transform: translateY(-4px);
}



/* Entry animation */
@keyframes genViewFadeUp {
    from {
        opacity: 0;
        transform: translateY(25px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
/*JOB AT STC */
    .jobs-stc {
	width:100%;
    padding: 90px 20px;
}

.job-stc-section-title {
    text-align: center;
    font-size: 30px;
    font-weight: 700;
	margin: 12px auto 60px;
    color: var(--text-color);
}



.jobs-list {
    width:100vw;
    margin: auto;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 30px;
}

.job-card {
    background: var(--background-color);
    padding: 30px;
    border-radius: 18px;
    transition: all 0.35s ease;
    box-shadow: 0 12px 32px rgba(0,0,0,0.08);
    position: relative;
    overflow: hidden;
}

.job-card::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(120deg, #0d6efd, #6610f2);
    opacity: 0;
    transition: opacity 0.35s ease;
}

.job-card:hover::before {
    opacity: 0.06;
}

.job-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 22px 45px rgba(0,0,0,0.14);
}

.job-card h3 {
    position: relative;
    z-index: 1;
    font-size: 20px;
    margin-bottom: 14px;
    color: var(--text-color);
}

.job-card ul {
    position: relative;
    z-index: 1;
    padding-left: 0;
    list-style: none;
}

.job-card ul li {
    padding-left: 26px;
    margin-bottom: 10px;
    font-size: 14.8px;
    color:var(--text-color);
    position: relative;
}

.job-card ul li::before {
    content: "✔";
    position: absolute;
    left: 0;
    color: #0d6efd;
    font-weight: 600;
}

.job-requirements {
    max-width: 900px;
    margin: 70px auto 40px;
    background:var(--background-color);
    padding: 35px;
    border-radius: 16px;
}

.job-requirements h3 {
    text-align: center;
    margin-bottom: 20px;
    font-size: 22px;
}

.job-requirements ul {
    list-style: none;
    padding: 0;
    max-width: 500px;
    margin: auto;
}

.job-requirements ul li {
    text-align: center;
    margin-bottom: 12px;
    font-size: 15px;
    color: var(--text-color);
}

.jobs-cta {
    text-align: center;
    margin-top: 40px;
}

.apply-btn {
    display: inline-block;
    padding: 14px 34px;
    font-size: 16px;
    font-weight: 600;
    color: var(--text-color);
    background: var(--background-color);
    border-radius: 50px;
    text-decoration: none;
    transition: all 0.35s ease;
    box-shadow: 0 12px 28px rgba(13,110,253,0.4);
}

.apply-btn:hover {
    transform: translateY(-4px);
    box-shadow: 0 18px 40px rgba(13,110,253,0.6);
}
/*CONTRACTUAL SCHEMAS */
    .how-we-work {
    padding: 80px 20px;
  
}

.how-we-work-section-title {
    text-align: center;
    font-size: 20px;
    font-weight: 700;
     margin: 0 auto 50px;
    color: var(--text-color);
	border-bottom:1px solid var(--text-color);
	padding-bottom:5px;
}

.work-steps {
    margin: auto;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 25px;
}

.work-step {
    background:var(--background-color);
    padding: 30px;
    border-radius: 14px;
    position: relative;
    transition: all 0.35s ease;
    box-shadow: 0 10px 30px rgba(0,0,0,0.06);
    overflow: hidden;
}

.work-step::before {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--text-color);
    opacity: 0;
    transition: opacity 0.35s ease;
    z-index: 0;
}

.work-step:hover::before {
    opacity: 0.05;
}

.work-step:hover {
    transform: translateY(-10px);
    box-shadow: 0 20px 40px rgba(0,0,0,0.12);
}

.step-number {
    font-size: 48px;
    font-weight: 800;
    color:var(--text-color);
    opacity: 0.15;
    position: absolute;
    top: 15px;
    right: 20px;
}

.work-step h3 {
    position: relative;
    z-index: 1;
    font-size: 20px;
    margin-bottom: 12px;
    color: var(--text-color);
}

.work-step p {
    position: relative;
    z-index: 1;
    font-size: 15px;
    line-height: 1.7;
    color: var(--text-color);
}

/*WORK FLOW*/
/* ===============================
   Process Flow – Container
================================= */
.genViews--processFlow {
    padding: 32px 34px;
    opacity: 0;
    transform: translateY(28px);
    animation: processFlowEnter 0.55s ease-out forwards;
}

/* ===============================
   Paragraph Text
================================= */
.genViews--processFlow .ccfs {
	font-size:20px;
    line-height: 1.8;
    color:var(--text-color);
    margin-bottom: 12px;
	margin-left:20px;
}

/* Intro paragraph emphasis */
.genViews--processFlow .ccfs:first-of-type {
    font-size: 30px;
     color:var(--text-color);
}

/* ===============================
   Phase Titles
================================= */
.genViews--processFlow .boldblue {
    margin: 26px 0 6px;
    font-size: 35px;
    font-weight: 600;
    color:var(--text-color);
    position: relative;
    padding-left: 44px;
}

/* Numbered timeline dot */
.genViews--processFlow .boldblue::before {
    counter-increment: flowStep;
    content: counter(flowStep);
    position: absolute;
    left: -5px;
    top: -6px;
    width: 38px;
    height: 38px;
    line-height: 28px;
    text-align: center;
    font-size: 13px;
    font-weight: 600;
     color:var(--text-color);
    background: linear-gradient(135deg, #1e5fa3, #3a7bd5);
    border-radius: 50%;
}

/* Vertical timeline line */
.genViews--processFlow .boldblue::after {
    content: "";
    position: absolute;
    left: 13px;
    top: 34px;
    width: 2px;
    height: calc(100% + 22px);
    background: #e3e8f0;
}

/* Remove line after last step */
.genViews--processFlow .boldblue:last-of-type::after {
    display: none;
}

/* Reset counter */
.genViews--processFlow {
    counter-reset: flowStep;
}

/* ===============================
   Hover polish (subtle)
================================= */
.genViews--processFlow:hover {
    box-shadow: 0 16px 42px rgba(0, 0, 0, 0.09);
    transform: translateY(-3px);
}

/* Phase hover highlight */
.genViews--processFlow .boldblue:hover {
    color: #154a82;
}

/* ===============================
   Entry animation
================================= */
@keyframes processFlowEnter {
    from {
        opacity: 0;
        transform: translateY(36px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ===============================
   Responsive tuning
================================= */
@media (max-width: 768px) {
    .genViews--processFlow {
        padding: 22px;
    }

    .genViews--processFlow .boldblue {
        padding-left: 38px;
    }

    .genViews--processFlow .boldblue::before {
        width: 24px;
        height: 24px;
        line-height: 24px;
        font-size: 12px;
    }
}

/*E WELL MEN */
/* ===============================
   Product Detail Section
================================= */
.genViews--productDetail {
    padding: 32px;
    opacity: 0;
    transform: translateY(30px);
    animation: productFadeIn 0.6s ease forwards;
	background:var(--background-color);
}

/* ===============================
   Header Layout
================================= */
.genViews--productDetail .productHeader {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-bottom: 22px;
}

/* Product image */
.genViews--productDetail .productImage {
    width: 180px;
    height: auto;
    border-radius: 10px;
    box-shadow: 0 6px 16px rgba(0,0,0,0.12);
    transition: transform 0.3s ease;
}

/* Logo */
.genViews--productDetail .productLogo {
    max-height: 46px;
}

/* CTA Button */
.genViews--productDetail .productCTA {
    margin-left: auto;
    padding: 10px 18px;
    background: linear-gradient(135deg, #1e5fa3, #3a7bd5);
    color: #ffffff;
    font-weight: 600;
    text-decoration: none;
    border-radius: 6px;
    transition: all 0.3s ease;
}

/* CTA hover */
.genViews--productDetail .productCTA:hover {
    background: linear-gradient(135deg, #154a82, #2f6fc0);
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(30,95,163,0.35);
}

/* ===============================
   Text Content
================================= */
.genViews--productDetail .ccfs {
    font-size: 20px;
    line-height: 1.8;
    color:var(--text-color);
    margin-bottom: 12px;
}

/* ===============================
   Hover polish
================================= */
.genViews--productDetail:hover {
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.1);
    transform: translateY(-3px);
}

.genViews--productDetail:hover .productImage {
    transform: scale(1.03);
}

/* ===============================
   Animation
================================= */
@keyframes productFadeIn {
    from {
        opacity: 0;
        transform: translateY(36px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ===============================
   Responsive
================================= */
@media (max-width: 768px) {
    .genViews--productDetail .productHeader {
        flex-direction: column;
        align-items: flex-start;
    }

    .genViews--productDetail .productCTA {
        margin-left: 0;
        margin-top: 10px;
    }

    .genViews--productDetail .productImage {
        width: 140px;
    }
}

/*SOUTHERN TEACHNOLOGY */
/* ===============================
   About Company Section
================================= */
.genViews--aboutCompany {
    padding: 28px 32px;
    border-radius: 12px;
    border: 1px solid #e4ebf5;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.05);
    opacity: 0;
    transform: translateY(30px);
    animation: aboutCompanyFade 0.5s ease forwards;

    position: relative;
}

/* Paragraph styling */
.genViews--aboutCompany .ccfs {
    font-size: 16px;              /* increased font size */
    line-height: 1.85;            /* better readability */
    margin-bottom: 18px;
    transition: transform 0.25s ease;
}

/* Subtle hover interaction */
.genViews--aboutCompany .ccfs:hover {
    transform: translateX(6px);
}

/* Left accent bar (no color set) */
.genViews--aboutCompany::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 4px;
    border-radius: 12px 0 0 12px;
}

/* Entry animation */
@keyframes aboutCompanyFade {
    from {
        opacity: 0;
        transform: translateY(36px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ===============================
   Responsive support
================================= */
@media (max-width: 768px) {
    .genViews--aboutCompany {
        padding: 20px 22px;
    }

    .genViews--aboutCompany .ccfs {
        font-size: 15px;
    }
}


/* ===============================
   Offshore Services Section
================================= */
.genViews--offshoreServices {
    padding: 30px 34px;
    border: 1px solid #e2e6ef;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.05);
	background:var(--backgroun-color);
    opacity: 0;
    transform: translateY(30px);
    animation: offshoreReveal 0.5s ease forwards;

    position: relative;
}

/* Text readability */
.genViews--offshoreServices .ccfs {
    font-size: 20px;
    line-height: 1.85;
    margin-bottom: 18px;
}

/* ===============================
   Clean list styling
================================= */
.genViews--offshoreServices .offshore-list {
    margin: 10px 0 18px;
    border-collapse: separate;
    border-spacing: 0 10px;
}

.genViews--offshoreServices .offshore-list td {
    font-size: 18px;
    padding-left: 18px;
    position: relative;
    transition: transform 0.25s ease;
	
}

/* Custom bullet using CSS (no images) */
.genViews--offshoreServices .offshore-list td::before {
    content: "•";
    position: absolute;
    left: 0;
    top: 0;
}

/* Hover interaction */
.genViews--offshoreServices .offshore-list tr:hover td {
    transform: translateX(6px);
}

/* ===============================
   Entry animation
================================= */
@keyframes offshoreReveal {
    from {
        opacity: 0;
        transform: translateY(36px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ===============================
   Responsive support
================================= */
@media (max-width: 768px) {
    .genViews--offshoreServices {
        padding: 20px 22px;
    }

    .genViews--offshoreServices .ccfs,
    .genViews--offshoreServices .offshore-list td {
        font-size: 14px;
    }
}
/* ===============================
   Maintenance & Support Section
================================= */
.genViews--maintenanceSupport {
    padding: 30px 34px;
    border: 1px solid #e2e6ef;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.05);
    opacity: 0;
    transform: translateY(28px);
    animation: maintenanceFade 0.5s ease forwards;
	background:var(--background-color);
    position: relative;
}

/* Improved readability */
.genViews--maintenanceSupport .ccfs {
    font-size: 20px;
    line-height: 1.85;
    margin-bottom: 18px;
    transition: transform 0.25s ease;
}

/* Decorative left accent (theme-neutral) */
.genViews--maintenanceSupport::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 4px;
    border-radius: 12px 0 0 12px;
}

/* Entry animation */
@keyframes maintenanceFade {
    from {
        opacity: 0;
        transform: translateY(36px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ===============================
   Responsive support
================================= */
@media (max-width: 768px) {
    .genViews--maintenanceSupport {
        padding: 20px 22px;
    }

    .genViews--maintenanceSupport .ccfs {
        font-size: 14px;
    }
}

/* ===============================
   Business Analysis & Consulting
================================= */
.genViews--businessConsulting {
    padding: 30px 34px;;
    border: 1px solid #e2e6ef;
	background:var(--background-color);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.05);
    opacity: 0;
    transform: translateY(30px);
    animation: consultingFade 0.5s ease forwards;
    position: relative;
}

/* Content readability */
.genViews--businessConsulting .ccfs {
    font-size: 20px;
    line-height: 1.85;
    margin-bottom: 18px;
    transition: transform 0.25s ease;
}

/* Subtle hover interaction */
.genViews--businessConsulting .ccfs:hover {
    transform: translateX(6px);
}

/* Decorative left accent (theme-neutral) */
.genViews--businessConsulting::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 4px;
    border-radius: 12px 0 0 12px;
}

/* Entry animation */
@keyframes consultingFade {
    from {
        opacity: 0;
        transform: translateY(36px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ===============================
   Responsive support
================================= */
@media (max-width: 768px) {
    .genViews--businessConsulting {
        padding: 20px 22px;
    }

    .genViews--businessConsulting .ccfs {
        font-size: 14px;
    }
}
/* ===============================
   Legacy Applications Modernization
================================= */
.genViews--legacyModernization {
    background:var(--background-color);
    padding: 30px 34px;
    border: 1px solid #e2e6ef;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.05);
    opacity: 0;
    transform: translateY(28px);
    animation: legacyFade 0.5s ease forwards;
    position: relative;
}

/* Improved readability */
.genViews--legacyModernization .ccfs {
    font-size: 20px;
    line-height: 1.85;
    margin-bottom: 18px;
    transition: transform 0.25s ease;
}

/* Subtle hover interaction */
.genViews--legacyModernization .ccfs:hover {
    transform: translateX(6px);
}

/* Decorative left accent (theme-neutral) */
.genViews--legacyModernization::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 4px;
    border-radius: 12px 0 0 12px;
}

/* Entry animation */
@keyframes legacyFade {
    from {
        opacity: 0;
        transform: translateY(36px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ===============================
   Responsive support
================================= */
@media (max-width: 768px) {
    .genViews--legacyModernization {
        padding: 20px 22px;
    }

    .genViews--legacyModernization .ccfs {
        font-size: 14px;
    }
}
/* ===============================
   Product Manuals & Documentation
================================= */
.genViews--documentation {
    
    padding: 28px 34px;
    border: 1px solid #e3e7f2;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.04);

    opacity: 0;
    transform: translateY(24px);
    animation: docFadeIn 0.45s ease forwards;
	background: var(--background-color);
    position: relative;
}

/* Text readability */
.genViews--documentation .ccfs {
    font-size: 20px;
    line-height: 1.8;
    margin-bottom: 16px;
    transition: transform 0.25s ease;
}

/* Gentle interaction */
.genViews--documentation .ccfs:hover {
    transform: translateX(6px);
}

/* Left-side accent for section identity */
.genViews--documentation::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 4px;
    border-radius: 12px 0 0 12px;
}

/* Fade-in animation */
@keyframes docFadeIn {
    from {
        opacity: 0;
        transform: translateY(32px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .genViews--documentation {
        padding: 20px 22px;
    }

    .genViews--documentation .ccfs {
        font-size: 14px;
    }
}
/* ===============================
   Products & Solutions Section
================================ */
.genViews--products {
    padding: 30px 36px;
    border: 1px solid #e2e6f0;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.05);
	background: var(--background-color);
    opacity: 0;
    transform: translateY(22px);
    animation: productsFadeIn 0.45s ease forwards;

    position: relative;
}

/* Text improvements */
.genViews--products .ccfs {
    font-size: 20px;
    line-height: 1.8;
    margin-bottom: 16px;
    transition: transform 0.25s ease;
}

/* Subtle hover interaction */
.genViews--products .ccfs:hover {
    transform: translateX(6px);
}

/* Section accent (non-color intrusive) */
.genViews--products::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 2px;
    opacity: 0.4;
}

/* Fade-in animation */
@keyframes productsFadeIn {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Responsive */
@media (max-width: 768px) {
    .genViews--products {
        padding: 20px 22px;
    }

    .genViews--products .ccfs {
        font-size: 14px;
    }
}

/* ===============================
   Online Support Section
================================ */
.genViews--online-support {
    padding: 28px 34px;
    border: 1px solid #e5e9f2;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.04);
    opacity: 0;
    transform: translateY(18px);
    animation: onlineSupportFade 0.4s ease forwards;
    position: relative;
	background: var(--background-color);
}

/* Paragraph readability + interaction */
.genViews--online-support .ccfs {
    font-size: 20px;
    line-height: 1.8;
    margin-bottom: 16px;
    transition: transform 0.25s ease;
}

/* Subtle hover motion */
.genViews--online-support .ccfs:hover {
    transform: translateX(6px);
}

/* Soft divider accent */
.genViews--online-support::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 2px;
    opacity: 0.35;
}

/* Fade-in animation */
@keyframes onlineSupportFade {
    from {
        opacity: 0;
        transform: translateY(26px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Mobile optimization */
@media (max-width: 768px) {
    .genViews--online-support {
        padding: 20px 22px;
    }

    .genViews--online-support .ccfs {
        font-size: 14px;
    }
}

}
/* ===============================
   Product Download View
================================ */
.productDownloadView {
    padding: 32px 36px;
    opacity: 0;
    transform: translateY(20px);
    animation: productDownloadFade 0.35s ease forwards;
}

/* Center alignment helper */
.productDownloadView .center {
    text-align: center;
	background: var(--background-color);
    border: 1px solid white
}

/* Remove default list styling */
.productDownloadView ul {
    list-style: none;
    padding: 0;
    margin: 14px 0;
    display: flex;
    justify-content: center;
    gap: 22px;
    flex-wrap: wrap;
}

/* List items */
.productDownloadView li {
	border:1px solid var(--text-color);
	border-radius:10px;
    font-size: 16px;
    transition: transform 0.25s ease;
	background:var(--gradiant-text);
}

/* Hover lift */
.productDownloadView li:hover {
    transform: translateY(-4px);
}

/* Links */
.productDownloadView a {
    text-decoration: none;
    font-weight: 500;
	color:var(--text-color);
    padding: 8px 14px;
    border-radius: 8px;
    display: inline-block;
    transition: all 0.25s ease;
}

/* Hover interaction */
.productDownloadView a:hover {
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08);
}

/* Highlight primary action */
.productDownloadView .l1 a {
    font-weight: 600;
    transform: scale(1.02);
}

/* Divider spacing */
.productDownloadView br {
    display: block;
    margin: 10px 0;
}

/* Entry animation */
@keyframes productDownloadFade {
    from {
        opacity: 0;
        transform: translateY(28px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Mobile adjustments */
@media (max-width: 768px) {
    .productDownloadView {
        padding: 22px 20px;
    }

    .productDownloadView ul {
        gap: 14px;
    }

    .productDownloadView li {
        font-size: 14px;
    }
}
/* ===============================
   STC Team Section
================================ */
.stcTeamView {
    padding: 36px 40px;
    border: 1px solid #e5e9f2;
	background:var(--background-color);
    opacity: 0;
    transform: translateY(28px);
    animation: teamFadeIn 0.45s ease forwards;
}
/* Animated underline */
.stcTeamTitle::after {
    content: "";
    display: block;
    width: 0;
    height: 3px;
    margin-top: 8px;
    border-radius: 3px;
    background: currentColor;
    transition: width 0.4s ease;
}

.stcTeamView:hover .stcTeamTitle::after {
    width: 72px;
}

/* Text blocks */
.stcTeamText {
    font-size: 20px;
    line-height: 1.75;
    margin-bottom: 18px;
	color:var(--text-color);
    opacity: 0.85;
    transform: translateY(6px);
    transition: all 0.3s ease;
}

/* Paragraph interaction */
.stcTeamText:hover {
    opacity: 1;
    transform: translateY(0);
}

/* Card hover */
.stcTeamView:hover {
    box-shadow: 0 14px 36px rgba(0, 0, 0, 0.08);
    transform: translateY(-4px);
    transition: all 0.3s ease;
}

/* Animation */
@keyframes teamFadeIn {
    from {
        opacity: 0;
        transform: translateY(32px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Responsive */
@media (max-width: 768px) {
    .stcTeamView {
        padding: 24px;
    }

    .stcTeamTitle {
        font-size: 24px;
    }

    .stcTeamText {
        font-size: 15.5px;
    }
}

/* ===============================
   Engagement Models Section
================================ */
.engagementModelView {
    padding: 40px 42px;
    border: 1px solid #e4e8f0;
    border-radius: 18px;
	background:var(--background-color);
    opacity: 0;
    transform: translateY(30px);
    animation: engagementFade 0.45s ease forwards;
}

/* Section title */
.engagementTitle {
    font-size: 30px;
    font-weight: 700;
    margin-bottom: 28px;
	color:var(--text-color);
}

/* Individual blocks */
.engagementBlock {
    margin-bottom: 26px;
    padding-left: 18px;
    border-left: 4px solid transparent;
    transition: all 0.3s ease;
}

.engagementBlock:hover {
    border-left-color: currentColor;
    transform: translateX(6px);
}

/* Headings */
.engagementHeading {
    font-size: 20px;
    font-weight: 600;
    margin-bottom: 10px;
    position: relative;
	color:var(--text-color);
}

/* Text */
.engagementText {
    font-size: 17px;
    line-height: 1.7;
    opacity: 0.9;
	color:var(--text-color);
    transition: opacity 0.3s ease;
}

.engagementBlock:hover .engagementText {
    opacity: 1;
}

/* Footer note */
.engagementNote {
    margin-top: 30px;
    font-size: 16px;
    line-height: 1.6;
    font-style: italic;
    opacity: 0.85;
	color:var(--text-color);
}

/* Animation */
@keyframes engagementFade {
    from {
        opacity: 0;
        transform: translateY(34px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Responsive */
@media (max-width: 768px) {
    .engagementModelView {
        padding: 26px;
    }

    .engagementTitle {
        font-size: 24px;
    }

    .engagementHeading {
        font-size: 18px;
    }

    .engagementText {
        font-size: 15.5px;
    }
}
/* ===============================
   Web Application Development
================================ */
.webAppDevelopmentView {
    padding: 42px 44px;
    border: 1px solid #e3e7ef;
    border-radius: 18px;
	background:var(--background-color);
    opacity: 0;
    transform: translateY(28px);
    animation: webAppFadeIn 0.45s ease forwards;
}

/* Title */
.webAppTitle {
    font-size: 30px;
    font-weight: 700;
    margin-bottom: 26px;
    line-height: 1.3;
	color:var(--text-color);
}

.webAppTitle span {
    display: block;
    font-size: 20px;
    font-weight: 500;
    opacity: 0.75;
    margin-top: 6px;
	color:var(--text-color);
}

/* Text blocks */
.webAppText {
    font-size: 17px;
    line-height: 1.75;
    margin-bottom: 18px;
    transition: transform 0.25s ease, opacity 0.25s ease;
	color:var(--text-color);
}



/* Call-to-action paragraph */
.webAppCTA {
    margin-top: 26px;
    font-size: 17px;
    font-weight: 600;
    line-height: 1.7;
    position: relative;
    padding-left: 14px;
	color:var(--text-color);
}

.webAppCTA::before {
    content: "→";
    position: absolute;
    left: 0;
    top: 0;
    font-weight: bold;
}

/* Entrance animation */
@keyframes webAppFadeIn {
    from {
        opacity: 0;
        transform: translateY(32px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Responsive */
@media (max-width: 768px) {
    .webAppDevelopmentView {
        padding: 28px;
    }

    .webAppTitle {
        font-size: 24px;
    }

    .webAppTitle span {
        font-size: 17px;
    }

    .webAppText,
    .webAppCTA {
        font-size: 15.5px;
    }
}
/* ===============================
   Solved Cases Search
================================ */
.solvedCasesView {
    padding: 36px 40px;
    border: 1px solid #e5e9f2;
    background:var(--background-color);
    opacity: 0;
    transform: translateY(30px);
    animation: solvedCasesFade 0.45s ease forwards;
}

/* Title */
.solvedCasesTitle {
    font-size: 28px;
    font-weight: 700;
    margin-bottom: 14px;
	color:var(--text-color);
}

/* Intro text */
.solvedCasesIntro {
    font-size: 16.5px;
    line-height: 1.7;
    margin-bottom: 26px;
    opacity: 0.85;
	color:var(--text-color);
}

/* Form layout */
.solvedCasesForm {
    display: flex;
    flex-direction: column;
    gap: 22px;
}

/* Search input */
.searchRow {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.searchLabel {
    font-weight: 600;
}

.searchInput {
    padding: 10px 14px;
    font-size: 16px;
    border-radius: 8px;
    border: 1px solid #ccd3e0;
    transition: border 0.25s ease, box-shadow 0.25s ease;
}

.searchInput:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.08);
}

/* Group blocks */
.searchGroup {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 10px 20px;
}

.groupTitle {
    grid-column: 1 / -1;
    font-weight: 600;
    margin-bottom: 6px;
}

/* Radio labels */
.searchGroup label {
    cursor: pointer;
    transition: transform 0.2s ease;
}

.searchGroup label:hover {
    transform: translateX(4px);
}

/* Actions */
.searchActions {
    display: flex;
    gap: 14px;
    margin-top: 10px;
}

/* Buttons */
.btnPrimary,
.btnSecondary {
    padding: 10px 22px;
    font-size: 15.5px;
    border-radius: 10px;
    cursor: pointer;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
	background:var(--background-color);
}

.btnPrimary:hover,
.btnSecondary:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 14px rgba(0, 0, 0, 0.12);
}

/* Animation */
@keyframes solvedCasesFade {
    from {
        opacity: 0;
        transform: translateY(34px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Responsive */
@media (max-width: 768px) {
    .solvedCasesView {
        padding: 24px;
    }

    .solvedCasesTitle {
        font-size: 23px;
    }
}
/* ===============================
   Case Management View
================================ */
.caseManagementView {
    padding: 34px 38px;
    border: 1px solid #e4e8f1;
    background:var(--background-color);
    opacity: 0;
    transform: translateY(28px);
    animation: caseMgmtFade 0.4s ease forwards;
}



/* Text */
.caseManagementText {
    font-size: 20px;
    line-height: 1.7;
    margin-bottom: 16px;
    opacity: 0.9;
    transition: transform 0.25s ease, opacity 0.25s ease;
}

.caseManagementText:hover {
    transform: translateX(6px);
    opacity: 1;
}

/* Link section */
.caseManagementLinks {
    margin-top: 22px;
}

/* Action link */
.caseLink {
    font-size: 26px;
    font-weight: 600;
    text-decoration: none;
    position: relative;
    padding-right: 18px;
    transition: transform 0.25s ease;
}



.caseLink:hover {
    transform: translateX(4px);
}


/* Entrance animation */
@keyframes caseMgmtFade {
    from {
        opacity: 0;
        transform: translateY(32px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Responsive */
@media (max-width: 768px) {
    .caseManagementView {
        padding: 24px;
    }

    .caseManagementTitle {
        font-size: 23px;
    }

    .caseManagementText,
    .caseLink {
        font-size: 15.5px;
    }
}
/* ===============================
   ScholarSYS – PDF Viewer
================================ */
.scholarSysView {
    padding: 18px;
    height: 100%;
    border-radius: 14px;

    opacity: 0;
    transform: translateY(24px);
    animation: scholarSysFade 0.35s ease forwards;
}

/* Frame container */
.scholarSysFrameWrapper {
    height: 100%;
    width: 100%;
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid #e2e6ef;

    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* Hover effect */
.scholarSysFrameWrapper:hover {
    transform: scale(1.01);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.12);
}

/* Iframe */
.scholarSysFrame {
    width: 100%;
    height: 70vh;
    border: none;
}

/* Fade animation */
@keyframes scholarSysFade {
    from {
        opacity: 0;
        transform: translateY(28px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Responsive */
@media (max-width: 768px) {
    .scholarSysView {
        padding: 10px;
    }
}
/* ===============================
   CuringCare – Document Viewer
================================ */
.curingCareView {
    padding: 16px;
    height: 100%;
    border-radius: 14px;

    opacity: 0;
    transform: translateY(26px);
    animation: curingCareFade 0.35s ease forwards;
}

/* Frame wrapper */
.curingCareFrameWrapper {
    width: 100%;
    height: 100%;
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid #e3e7ef;

    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* Hover interaction */
.curingCareFrameWrapper:hover {
    transform: scale(1.01);
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.12);
}

/* Iframe */
.curingCareFrame {
    width: 100%;
    height: 70vh;
    border: none;
}

/* Fade-in animation */
@keyframes curingCareFade {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Responsive */
@media (max-width: 768px) {
    .curingCareView {
        padding: 10px;
    }
}

/* ===============================
   SellSYS – Product Overview
================================ */
.sellSYSView {
    padding: 18px;
    border-radius: 14px;
	background;var(--background--color);
    opacity: 0;
    transform: translateY(24px);
    animation: sellSYSFade 0.35s ease forwards;
}

/* Table layout */
.sellSYSLayout {
    border-collapse: collapse;
}

/* Image */
.sellSYSImage {
    transition: transform 0.3s ease;
}

.sellSYSImageCell:hover .sellSYSImage {
    transform: scale(1.04);
}

/* Content */
.sellSYSContent {
    padding-left: 22px;
}

/* Title */
.sellSYSTitle {
    font-size: 30px;
    font-weight: 600;
    margin: 6px 0 8px;
}

/* Description */
.sellSYSDesc {
    font-size: 20px;
    line-height: 1.6;
}

/* Action link */
.sellSYSLink {
	margin-top:10px;
    font-size: 20px;
    font-weight: 600;
    text-decoration: none;
    position: relative;
    padding: 5px 10px;
	border-radius:5px;
	background:var(--gradiant-text);
}
.sellSYSLink:hover::after {
    width: 100%;
}

/* Fade animation */
@keyframes sellSYSFade {
    from {
        opacity: 0;
        transform: translateY(28px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Responsive */
@media (max-width: 768px) {
    .sellSYSLayout tr {
        display: block;
    }

    .sellSYSImageCell,
    .sellSYSContent {
        display: block;
        width: 100%;
        padding-left: 0;
        text-align: center;
    }

    .sellSYSContent {
        margin-top: 14px;
    }
}
/* ===============================
   bestHOST – Product Card
================================ */
.bestHostView {
    padding: 18px;
    opacity: 0;
    transform: translateY(22px);
    animation: bestHostFade 0.35s ease forwards;
	background:var(--background-color);
}

/* Layout */
.bestHostLayout {
    border-collapse: collapse;
}

/* Image */
.bestHostImage {
    transition: transform 0.3s ease;
}

.bestHostImageCell:hover .bestHostImage {
    transform: scale(1.05);
}



/* Title */
.bestHostTitle {
    font-size: 20px;
    font-weight: 600;
	color:var(--text-color);
}

/* Description */
.bestHostDesc {
    font-size: 20px;
    line-height: 1.6;
	color:var(--text-color);
}

/* Main clickable area */
.bestHostMainLink {
    text-decoration: none;
    display: inline-block;
	
}

/* CTA */
.bestHostCta {
    margin-top:20px;
    font-size: 20px;
    font-weight: 600;
    text-decoration: none;
    position: relative;
    background:var(--gradiant-text);
	padding:5px 10px;
	color:var(--text-color);
	border-radius:5px;
}
.bestHostAction{
	margin-top: 20px;
	
}
/* Entrance animation */
@keyframes bestHostFade {
    from {
        opacity: 0;
        transform: translateY(28px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Responsive */
@media (max-width: 768px) {
    .bestHostLayout tr {
        display: block;
    }

    .bestHostImageCell,
    .bestHostContent {
        display: block;
        width: 100%;
        padding-left: 0;
        text-align: center;
    }

    .bestHostContent {
        margin-top: 14px;
    }
}
/* =====================================
   Request for Quote Section – STCERP
===================================== */

.rfq-section {
    max-width: 1100px;
    margin: 70px auto;
    padding: 50px 35px;
    background:var(--background-color);
    border-radius: 20px;
    box-shadow: 0 18px 45px rgba(0, 0, 0, 0.08);
    font-family: "Segoe UI", Arial, sans-serif;
    position: relative;
}

/* Header */
.rfq-header {
    text-align: center;
    margin-bottom: 45px;
}

.rfq-header h2 {
    font-size: 32px;
    font-weight: 700;
    margin-bottom: 12px;
}

.rfq-header p {
    max-width: 720px;
    margin: 0 auto;
    font-size: 20px;
    line-height: 1.7;
}

/* Form Layout */
.rfq-form {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 24px;
}

/* Form Groups */
.form-group {
    display: flex;
    flex-direction: column;
}

.form-group label {
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 6px;
}

/* Inputs & Selects */
.form-group input,
.form-group select,
.form-group textarea {
    padding: 13px 14px;
    font-size: 14.5px;
    border-radius: 10px;
    border: 1px solid #d5ddee;
    background-color: #fafcff;
    transition: all 0.25s ease;
}

/* Focus & Hover */
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    outline: none;
    border-color: #0033cc;
    background-color: #ffffff;
    box-shadow: 0 0 0 3px rgba(0, 51, 204, 0.15);
}

/* Textarea */
.form-group textarea {
    min-height: 130px;
    resize: vertical;
}

/* Full-width fields */
.full-width {
    grid-column: 1 / -1;
}

/* Submit Button */
.form-group button {
    margin: 0px auto;
    padding: 15px;
    font-size: 16px;
    font-weight: 600;
    color: #ffffff;
    background:var(--gradiant-text);
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: transform 0.25s ease, box-shadow 0.25s ease,
                background-color 0.25s ease;
}

/* Button Hover */
.form-group button:hover {
    background-color: #0026a3;
    transform: translateY(-2px);
    box-shadow: 0 10px 25px rgba(0, 51, 204, 0.35);
}

/* Button Active */
.form-group button:active {
    transform: translateY(0);
    box-shadow: 0 6px 15px rgba(0, 51, 204, 0.25);
}

/* Responsive */
@media (max-width: 768px) {
    .rfq-section {
        padding: 35px 22px;
    }

    .rfq-header h2 {
        font-size: 26px;
    }

    .rfq-header p {
        font-size: 15px;
    }
}
/*MULTI-SITE PROJECT*/
   .multi-site {
    padding: 80px 20px;
    background: var(--background-color);
}

.section-title {
    text-align: center;
    font-size: 34px;
    font-weight: 700;
 
}

.multi-section-subtitle {
    text-align: center;
    max-width: 720px;
    margin: 12px auto 50px;
    font-size: 16px;

}

.multi-site-content {
    max-width: 1000px;
    margin: auto;
}

.multi-site-text {
    font-size: 15.5px;
    line-height: 1.8;

    margin-bottom: 20px;
}

.multi-site-highlights {
    margin-top: 50px;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 30px;
}

.highlight-card {
    background:var(--gradiant-text);
    padding: 28px;
    border-radius: 16px;
    transition: all 0.35s ease;
    box-shadow: 0 10px 28px rgba(0,0,0,0.06);
    position: relative;
    overflow: hidden;
}

.highlight-card::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(120deg, #0d6efd, #6610f2);
    opacity: 0;
    transition: opacity 0.35s ease;
}

.highlight-card:hover::before {
    opacity: 0.06;
}

.highlight-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 40px rgba(0,0,0,0.12);
}

.highlight-card h3 {
    position: relative;
    z-index: 1;
    font-size: 20px;
    margin-bottom: 12px;
}

.highlight-card p {
    position: relative;
    z-index: 1;
    font-size: 15px;
    line-height: 1.7;
   
}

.highlight-card:hover h3 {
    color: #0d6efd;
}

/* ===============================
   CirculateR – Product View
================================ */
.circulateRView {
    padding: 18px;
	background:var(--background-color);
    opacity: 0;
    transform: translateY(22px);
    animation: circulateRFade 0.35s ease forwards;
}

/* Layout */
.circulateRLayout {
    border-collapse: collapse;
}

/* Image */
.circulateRImage {
    transition: transform 0.3s ease;
}

.circulateRImageCell:hover .circulateRImage {
    transform: scale(1.05);
}

/* Content */
.circulateRContent {
    padding-left: 22px;
}

/* Title */
.circulateRTitle {
    font-size: 25px;
    font-weight: 600;
    margin: 6px 0;
}

/* Description */
.circulateRDesc {
    font-size: 15px;
    line-height: 1.6;
    margin-bottom: 10px;
}

/* CTA */
.circulateRCta {
    font-size: 20px;
    font-weight: 600;
    text-decoration: none;
    position: relative;
    padding: 5px 10px;
	border-radius:5px;
	background:var(--gradiant-color);
}


.circulateRCta:hover::after {
    width: 100%;
}

/* Entrance animation */
@keyframes circulateRFade {
    from {
        opacity: 0;
        transform: translateY(28px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Responsive */
@media (max-width: 768px) {
    .circulateRLayout tr {
        display: block;
    }

    .circulateRImageCell,
    .circulateRContent {
        display: block;
        width: 100%;
        padding-left: 0;
        text-align: center;
    }

    .circulateRContent {
        margin-top: 14px;
    }
}
.flat-mega-menu {
  position: relative;
  z-index: 999;
  font-size: 1em;
  width: 100%;
  font-family: "nunito regular";
}
.flat-mega-menu > ul {
  width: 100%;
  display:flex;
  justify-content:center;
  align-items:center;
  flex-wrap:wrap;
}
.flat-mega-menu > ul > li {
  min-height: 60px;
  line-height: 60px;
  color: #fff;
  border-left: 1px solid #0b70bd;
}

.flat-mega-menu > ul > li.home a img {
  margin-left: 3px;
  margin-right: 0;
}
.flat-mega-menu > ul > li > a {
  line-height: 60px;
  color: #fff;
  text-align: center;
  width: 100%;
  padding-left: 10px;
  padding-right: 10px;
  font-size: 1em;
}
.flat-mega-menu > ul > li:hover > a {
  background: #fff;
  color: #2888d2;
  transition:
    background 0.3s linear 0s,
    color 0.3s linear 0s;
  -moz-transition:
    background 0.3s linear 0s,
    color 0.3s linear 0s;
  -ms-transition:
    background 0.3s linear 0s,
    color 0.3s linear 0s;
  -o-transition:
    background 0.3s linear 0s,
    color 0.3s linear 0s;
  -webkit-transition:
    background 0.3s linear 0s,
    color 0.3s linear 0s;
}
.flat-mega-menu > ul > .title {
  border-left: none;
  min-width: 25%;
}
.flat-mega-menu > ul > .title > a {
  text-transform: uppercase;
  font-size: 1.4em;
  line-height: 60px;
  padding-left: 20px;
  text-align: left;
  padding-right: 20px;
}
.flat-mega-menu > ul > .title:hover > a {
  background: inherit;
  color: inherit !important;
}
.flat-mega-menu ul .login-form {
  min-width: 6%;
  text-align: center;
  cursor: pointer;
  float: right;
  padding-left: 10px;
  padding-right: 10px;
  position: relative;
}
.flat-mega-menu ul .search-bar {
  min-width: 6%;
  text-align: center;
  cursor: pointer;
  float: right;
  padding-left: 10px;
  padding-right: 10px;
}
.flat-mega-menu .login-form table,
.flat-mega-menu .login-form tbody {
  width: 100%;
}
.flat-mega-menu .login-form input {
  width: 100%;
  margin: 0 0 3px;
  padding: 0 10px;
  display: block;
  border-radius: 3px;
  background-color: #f4f4f4;
  box-shadow: inset 0.5px 1px 3px 0 rgba(0, 0, 0, 0.1);
  -webkit-box-shadow: inset 0.5px 1px 3px 0 rgba(0, 0, 0, 0.1);
  border: none;
  height: 30px;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  outline: 0;
}
.flat-mega-menu .login-form input[type="submit"] {
  border: 1px solid rgba(0, 0, 0, 0.15);
  border-radius: 3px;
  opacity: 0.81;
  box-shadow: inset 0.5px 0.87px 0 0 rgba(255, 248, 68, 0.106);
  background: #2888d2;
  color: #fff;
  height: 35px;
  width: 75pt;
  font-size: 1em;
  font-family: "nunito regular";
  margin-top: 10px;
  cursor: pointer;
  outline: 0;
}
.flat-mega-menu .login-form input[type="submit"]:hover {
  opacity: 1;
}
.flat-mega-menu .login-form input[type="checkbox"] {
  float: left;
  display: block;
  height: 35px;
  width: auto;
  cursor: pointer;
  outline: 0;
  background-color: #fff;
}
.flat-mega-menu .login-form label {
  color: #7d7d7d;
  font-family: "nunito regular";
  font-size: 0.8em;
  font-weight: 400;
  height: 35px;
  display: block;
  margin: 10px 0 0;
  padding: 0;
  line-height: 35px;
  white-space: nowrap;
  cursor: pointer;
  -webkit-user-select: none;
  -ms-user-select: none;
  -moz-user-select: none;
  -o-user-select: none;
}
.flat-mega-menu .login-form ul {
  position: absolute;
  right: 0;
  width: 300px;
  padding: 15px 15px 10px;
}
.flat-mega-menu .login-form:hover {
  background-color: #fff;
  color: #2888d2;
  transition:
    background 0.3s linear 0s,
    color 0.3s linear 0s;
  -moz-transition:
    background 0.3s linear 0s,
    color 0.3s linear 0s;
  -ms-transition:
    background 0.3s linear 0s,
    color 0.3s linear 0s;
  -o-transition:
    background 0.3s linear 0s,
    color 0.3s linear 0s;
  -webkit-transition:
    background 0.3s linear 0s,
    color 0.3s linear 0s;
}
.flat-mega-menu .search-bar:hover {
  background-color: #fff;
  color: #2888d2;
  transition:
    background 0.3s linear 0s,
    color 0.3s linear 0s;
  -moz-transition:
    background 0.3s linear 0s,
    color 0.3s linear 0s;
  -ms-transition:
    background 0.3s linear 0s,
    color 0.3s linear 0s;
  -o-transition:
    background 0.3s linear 0s,
    color 0.3s linear 0s;
  -webkit-transition:
    background 0.3s linear 0s,
    color 0.3s linear 0s;
}
.flat-mega-menu .search-bar ul {
  position: absolute;
  right: 0;
  width: 50%;
}
.flat-mega-menu .search-bar ul input[type="text"] {
  background-color: #fff;
  box-shadow: inset 0 0 2px 0 rgba(0, 0, 0, 0.55);
  -webkit-box-shadow: inset 0 0 2px 0 rgba(0, 0, 0, 0.55);
  border: none;
  padding: 10px;
  width: 100%;
  float: left;
  border-right: 10px solid transparent;
  border-left: 20px solid transparent;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  height: 40px;
  outline: 0;
}
.flat-mega-menu .search-bar ul input[type="submit"] {
  border: none;
  width: 85%;
  cursor: pointer;
  font-size: 0.9em;
  font-family: "nunito regular";
  float: left;
  height: 40px;
  outline: 0;
  border: 1px solid rgba(0, 0, 0, 0.15);
  opacity: 0.81;
  box-shadow: inset 0.5px 0.87px 0 0 rgba(255, 248, 68, 0.106);
  background: #2888d2;
  color: #fff;
}
.flat-mega-menu .search-bar ul input[type="submit"]:hover {
  opacity: 1;
  outline: 0;
}
.flat-mega-menu .search-bar table {
  width: 100%;
}
.flat-mega-menu .search-bar table tr td:last-child {
  width: 90pt;
}
.flat-mega-menu .fa-user tbody {
  width: 100%;
}
.flat-mega-menu .drop-down {
  position: absolute;
  background: #fff;
  z-index: 999;
  margin-left: 0;
  width: 100%;
  float: left;
  width: 150px;
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-top: none;
  padding-top: 10px;
  padding-bottom: 10px;
  border-bottom: 3px solid;
  border-bottom-color: #2888d2;
}
.flat-mega-menu .drop-down .drop-down {
  border-top: 1px solid rgba(0, 0, 0, 0.1);
  left: 100%;
  top: -10px;
  width: 150px;
}
.flat-mega-menu .drop-down .drop-down.one-column {
  width: 200px;
}
.flat-mega-menu .drop-down .drop-down.two-column {
  width: 322px;
}
.flat-mega-menu .drop-down .drop-down.two-column ul {
  float: left;
  width: 10pc;
  margin: 0;
  padding: 0;
}
.flat-mega-menu .drop-down li {
  float: left;
  width: 100%;
  position: relative;
}
.flat-mega-menu .drop-down li a {
  color: #555658;
  font-size: 0.9em;
  text-align: left;
  padding: 10px 20px 10px 25px;
  background-color: #fff;
  transition:
    color 0.2s linear 0s,
    padding-left 0.2s linear 0s;
  -moz-transition:
    color 0.2s linear 0s,
    padding-left 0.2s linear 0s;
  -ms-transition:
    color 0.2s linear 0s,
    padding-left 0.2s linear 0s;
  -o-transition:
    color 0.2s linear 0s,
    padding-left 0.2s linear 0s;
  -webkit-transition:
    color 0.2s linear 0s,
    padding-left 0.2s linear 0s;
}
.flat-mega-menu .drop-down li:hover > a {
  color: #000;
  padding-left: 30px;
}
.flat-mega-menu .drop-down li:hover .drop-down {
  display: block;
}
.flat-mega-menu .drop-down li:hover > .drop-down {
  display: block;
}
.flat-mega-menu .drop-down li i {
  position: absolute;
  z-index: 999;
  top: 0;
  right: 20px;
  bottom: 0;
  height: 1pc;
  margin: auto;
  color: #555658;
}
.flat-mega-menu .drop-down.one-column {
  width: 230px;
}
.flat-mega-menu .drop-down.full-width {
  width: 100%;
  margin-left: 0;
  left: 0;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
.flat-mega-menu .drop-down.full-width ul {
  float: left;
  width: 25%;
  cursor: default;
}
.flat-mega-menu .drop-down.full-width ul li {
  margin: 0;
  padding: 10px 0;
  float: left;
  width: 100%;
  list-style:none;
}
.flat-mega-menu .drop-down.full-width ul li a {
  margin: 0;
  border: none;
  padding: 0;
  float: left;
  font-size: 15px;
  margin-right: 10%;
  margin-left: 10%;
  transition: text-indent 0.2s linear 0s;
  -moz-transition: text-indent 0.2s linear 0s;
  -ms-transition: text-indent 0.2s linear 0s;
  -o-transition: text-indent 0.2s linear 0s;
  -webkit-transition: text-indent 0.2s linear 0s;
}
.flat-mega-menu .drop-down.full-width ul li a h4{
  font-size:17px;
}
.flat-mega-menu .drop-down.full-width ul li:hover a {
  text-indent: 5px;
}
.flat-mega-menu .drop-down.full-width ul li p {
  margin: 0;
  padding: 10px 10px 10px 11%;
  float: left;
  width: 100%;
  clear: both;
  font-size: 0.9em;
  color: #949598;
}
.flat-mega-menu .drop-down.full-width.wider ul {
  float: left;
  width: 30%;
  cursor: default;
}
.flat-mega-menu .drop-down.social-bar {
  width: 200px;
}
.flat-mega-menu hr {
  margin: 0;
  padding: 0;
  display: block;
}
.imgModMenu {
  width: 60px;
}
.flat-mega-menu img {
  float: left;
  border-style: solid;
  border-width: 4px;
  border-color: #fff;
  background-color: #ebebeb;
  box-shadow:
    0 0 5px 0 rgba(0, 0, 0, 0.078),
    inset 0 0 76px 0 rgba(0, 0, 0, 0.039);
}
.flat-mega-menu img:hover {
  opacity: 0.8;
}
.flat-mega-menu h2 {
  color: #535456;
  font-size: 1.2em;
  font-weight: 400;
  margin: 0;
  padding: 5px 5px 5px 10%;
  padding-top: 15px;
  padding-bottom: 10px;
}
.flat-mega-menu .social-bar {
  position: relative;
}
.flat-mega-menu .social-bar ul {
  width: 262px;
  padding: 10px;
  position: absolute;
  background-color: #fff;
  border-bottom: 3px solid;
  border-bottom-color: #2888d2;
  right: 0;
}
.flat-mega-menu .social-bar ul li {
  float: left;
  width: 40px;
  height: 40px;
  margin: 10px;
  padding: 0;
}
.flat-mega-menu .social-bar ul a {
  margin: 0;
  padding: 0;
  display: block;
  height: 40px;
  width: 40px;
  position: relative;
}
.flat-mega-menu .social-bar ul a i {
  text-align: center;
  padding: 0;
  margin: 0;
  height: 40px;
  width: 40px;
  position: absolute;
  top: 0;
  left: 0;
  border: 1px solid rgba(0, 0, 0, 0.1);
  line-height: 40px;
  border-radius: 5px;
  color: #797979;
  font-size: 1.3em;
  border-radius: 4px;
  background-image: -moz-linear-gradient(90deg, #e9e9e9 0, #e9e9e9 100%);
  background-image: -webkit-linear-gradient(90deg, #e9e9e9 0, #e9e9e9 100%);
  background-image: -ms-linear-gradient(90deg, #f0f0f0 0, #f3f3f3 100%);
  background-image: -o-linear-gradient(90deg, #e9e9e9 0, #e9e9e9 100%);
  background-image: linear-gradient(0deg, #e9e9e9 0, #e9e9e9 100%);
}
.flat-mega-menu .social-bar ul a:hover i {
  background: #c7c7c7;
  color: #000;
}
.flat-mega-menu > label {
  display: none;
}
.flat-mega-menu > input {
  display: none;
}
@media only screen and (max-width: 100px) {
  .flat-mega-menu {
    display: none;
  }
}
@media print {
  .flat-mega-menu {
    display: none;
  }
}
.flat-mega-menu {
  min-height: 30px;
}
.flat-mega-menu .drop-down {
  background-color: #fffde8;
  border-bottom: 10px solid #87b8b7;
}
.flat-mega-menu .drop-down.full-width ul.topic {
  width: 18%;
}
.flat-mega-menu .drop-down.full-width ul.img-col {
  width: 21%;
}
.flat-mega-menu .drop-down.full-width ul.full-col {
  width: 100%;
}
.flat-mega-menu .drop-down.full-width ul .book-bg li p {
  padding: 10px 10px 10px 10px;
}
.flat-mega-menu .drop-down.full-width ul li {
  padding: 6px 0;
}
.flat-mega-menu .drop-down.full-width ul li p {
  font-size: 1em;
  font-family: verdana;
  font-weight: 400;
  color: #555;
}
.flat-mega-menu .drop-down.full-width ul li p.book-date {
  color: #687e3e;
  font-family: "nunito regular";
}
.flat-mega-menu .drop-down.full-width ul li p.welcome-quote {
  font-size: 9pt;
  font-style: italic;
  color: #3c5cae;
}
.flat-mega-menu .drop-down.full-width ul li p.red-text {
  color: #900;
  font-weight: 700;
  padding-top: 0;
}
.flat-mega-menu .drop-down.full-width ul li p.green {
  font-family: "nunito regular";
  font-size: 1.2em;
  color: #687e3e;
  border-bottom: none;
}
.flat-mega-menu .drop-down.full-width ul li .bold {
  font-weight: 700;
}
.flat-mega-menu .drop-down.full-width ul li .center {
  text-align: center;
  margin-left: 0;
  padding-left: 0;
}
.flat-mega-menu .drop-down.full-width ul li.list-item {
  background: url(/images/global/hg-icon.jpg) 9px 9px no-repeat;
  margin: 0 0 0 20px;
  padding: 0 20px 2px 10px;
}
.flat-mega-menu .drop-down.full-width ul li a.featured {
  margin-top: 5px;
  margin-left: 0;
}
.flat-mega-menu .drop-down.full-width ul li a.red-text {
  color: #900;
  font-weight: 700;
}
.flat-mega-menu .drop-down .book-bg {
  background: url(/images/feeling-loved-book/feeling-loved-book-cover-270.png) 0
    0 no-repeat;
  padding-left: 205px;
  min-height: 300px;
}
.flat-mega-menu .drop-down li a {
  font-size: 1.1em;
  background-color: #fffde8;
}
.flat-mega-menu .drop-down .donate-box p {
  color: #2d2d2d;
  font:
    9pt/18px verdana,
    sans-serif;
  font-weight: 400;
  margin: 5px;
}
.flat-mega-menu .drop-down .donate-box p.pullquote-full-width {
  font-family: verdana;
  font-style: italic;
  font-size: 13px;
  margin: 10px 0;
  color: #0e74bc;
}
.flat-mega-menu .drop-down .donate-box .message {
  color: #360;
  font-weight: 700;
}
.flat-mega-menu .book {
  background-color: #fff;
}
.flat-mega-menu .book li a {
  font-size: 1.1em;
  background-color: transparent;
}
.flat-mega-menu > ul {
  min-height: 30px;
  background-color: #d5ebfb;
  list-style:none;
}
.flat-mega-menu > ul > li {
  min-height: 30px;
  line-height: 30px;
  color: #3c5cae;
}
.flat-mega-menu > ul > li.donate,
.flat-mega-menu > ul > li.home {
  background: #fef1c5;
}
.flat-mega-menu > ul > li.donate > a,
.flat-mega-menu > ul > li.home > a {
  color: #900;
}
.flat-mega-menu > ul > li.donate > a:hover,
.flat-mega-menu > ul > li.home > a:hover {
  color: #3c5cae;
}
.flat-mega-menu > ul > li > a {
  font-size: 1.2em;
  line-height: 30px;
  color: #3c5cae;
  padding-left: 30px;
  padding-right: 30px;
}
.flat-mega-menu > ul > li > a > img.home-icon {
  width: 18px;
  vertical-align: bottom;
  margin-top: 5px;
  margin-left: 3px;
  margin-right: 0;
  border: none;
}
.flat-mega-menu h2 {
  font-size: 1.2em;
  color: #ad5836;
  padding-top: 0;
  padding-bottom: 5px;
}
.flat-mega-menu h2.welcome {
  color: #3c5cae;
  font-size: 20px;
  padding-top: 9pt;
}
.flat-mega-menu h2.blue {
  color: #3c5cae;
  border-bottom: none;
  display: inline;
  float: left;
  padding-left: 10px;
}
.flat-mega-menu .green {
  font-family: "nunito regular";
  font-size: 1.2em;
  color: #687e3e;
  padding: 20px 10px 5px 10px;
  border-bottom: none;
}
.flat-mega-menu > ul > li .drop-down.hover-fade {
  display: none;
}
.flat-mega-menu > ul > li .drop-down li:hover > .drop-down.hover-fade,
.flat-mega-menu > ul > li:hover > .drop-down.hover-fade {
  display: block;
  animation: hover-fade 0.3s linear 0s forwards;
  -moz-animation: hover-fade 0.3s linear 0s forwards;
  -ms-animation: hover-fade 0.3s linear 0s forwards;
  -o-animation: hover-fade 0.3s linear 0s forwards;
  -webkit-animation: hover-fade 0.3s linear 0s forwards;
}
@keyframes hover-fade {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@-moz-keyframes hover-fade {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@-ms-keyframes hover-fade {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@-o-keyframes hover-fade {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@-webkit-keyframes hover-fade {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
.flat-mega-menu > ul > li .drop-down.hover-zoom {
  display: none;
}
.flat-mega-menu > ul > li .drop-down li:hover > .drop-down.hover-zoom,
.flat-mega-menu > ul > li:hover > .drop-down.hover-zoom {
  display: block;
  animation: hover-zoom 0.2s linear 0s forwards;
  -moz-animation: hover-zoom 0.2s linear 0s forwards;
  -ms-animation: hover-zoom 0.2s linear 0s forwards;
  -o-animation: hover-zoom 0.2s linear 0s forwards;
  -webkit-animation: hover-zoom 0.2s linear 0s forwards;
}
@keyframes hover-zoom {
  0% {
    opacity: 0;
    transform: scale(0.8, 0.8);
  }
  100% {
    opacity: 1;
    transform: scale(1, 1);
  }
}
@-moz-keyframes hover-zoom {
  0% {
    opacity: 0;
    -moz-transform: scale(0.8, 0.8);
  }
  100% {
    opacity: 1;
    -moz-transform: scale(1, 1);
  }
}
@-ms-keyframes hover-zoom {
  0% {
    opacity: 0;
    -ms-transform: scale(0.8, 0.8);
  }
  100% {
    opacity: 1;
    -ms-transform: scale(1, 1);
  }
}
@-o-keyframes hover-zoom {
  0% {
    opacity: 0;
    -o-transform: scale(0.8, 0.8);
  }
  100% {
    opacity: 1;
    -o-transform: scale(1, 1);
  }
}
@-webkit-keyframes hover-zoom {
  0% {
    opacity: 0;
    -webkit-transform: scale(0.8, 0.8);
  }
  100% {
    opacity: 1;
    -webkit-transform: scale(1, 1);
  }
}
.flat-mega-menu > ul > li .drop-down.hover-expand {
  display: none;
}
.flat-mega-menu > ul > li .drop-down li:hover > .drop-down.hover-expand,
.flat-mega-menu > ul > li:hover > .drop-down.hover-expand {
  display: block;
  animation: hover-expand 0.2s linear 0s forwards;
  -moz-animation: hover-expand 0.2s linear 0s forwards;
  -ms-animation: hover-expand 0.2s linear 0s forwards;
  -o-animation: hover-expand 0.2s linear 0s forwards;
  -webkit-animation: hover-expand 0.2s linear 0s forwards;
}
@keyframes hover-expand {
  0% {
    opacity: 0;
    transform: rotateY(90deg);
  }
  100% {
    opacity: 1;
    transform: rotateY(0);
  }
}
@-moz-keyframes hover-expand {
  0% {
    opacity: 0;
    -moz-transform: rotateY(90deg);
  }
  100% {
    opacity: 1;
    -moz-transform: rotateY(0);
  }
}
@-ms-keyframes hover-expand {
  0% {
    opacity: 0;
    -ms-transform: rotateY(90deg);
  }
  100% {
    opacity: 1;
    -ms-transform: rotateY(0);
  }
}
@-o-keyframes hover-expand {
  0% {
    opacity: 0;
    -o-transform: rotateY(90deg);
  }
  100% {
    opacity: 1;
    -o-transform: rotateY(0);
  }
}
@-webkit-keyframes hover-expand {
  0% {
    opacity: 0;
    -webkit-transform: rotateY(90deg);
  }
  100% {
    opacity: 1;
    -webkit-transform: rotateY(0);
  }
}
.endpage-box {
  display: none;
  position: fixed;
  bottom: 20px;
  right: 20px;
  background: #fef1c5;
  width: 275px;
  padding: 35px 10px 10px 10px;
  border-top: 3px solid #4969bf;
  box-shadow: 0 2px 3px rgba(0, 0, 0, 0.5);
  -moz-box-shadow: 0 2px 3px rgba(0, 0, 0, 0.5);
  -webkit-box-shadow: 0 2px 3px rgba(0, 0, 0, 0.5);
}
a.close {
  background: transparent url(/images/global/close.png) no-repeat top left;
  width: 25px;
  height: 25px;
  position: absolute;
  cursor: pointer;
  top: 5px;
  right: 10px;
}

/*MAIN SCHOLARSYS  HERO SECTION */
 /* ===============================
   ROOT & VARIABLES
================================ */
:root {
    --primary: #7c3aed;
    --secondary: #9333ea;
    --text-dark: #0f172a;
    --text-body: #374151;
    --text-muted: #6b7280;
    --bg-soft: #f9fafb;
    --card-bg: #ffffff;
    --radius-lg: 16px;
    --radius-md: 12px;
    --shadow-soft: 0 10px 30px rgba(0, 0, 0, 0.08);
    --shadow-hover: 0 16px 40px rgba(124, 58, 237, 0.18);
}
 
/* ===============================
   BASE
================================ */
.pageContent {
    width: 90vw;
    margin: 0 auto;
    padding: 56px 20px;
    font-family: system-ui, -apple-system, BlinkMacSystemFont,
                 "Segoe UI", Roboto, sans-serif;
    background: #fff;
    color: var(--text-body);
}

.post-content--narrow {
    width: 90%;
}

/* ===============================
   HEADER
================================ */
.pageHeader {
    margin-bottom: 40px;
}

.pageTitle {
    font-size:40px;
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: -0.03em;
    color: var(--text-dark);
    padding: 20px 0px;
    border-bottom: 3px solid gray;
    border-radius: 1px;
}

/* ===============================
   CONTENT SECTIONS
================================ */
.contentSection {
    margin-bottom: 56px;
}
/* Our Plans Section */
.our-plans {
    padding: 80px 20px;
    background: linear-gradient(180deg, #f8fafc, #eef2ff);
    text-align: center;
}

.our-plans h2 {
    font-size: 2.6rem;
    font-weight: 700;
    color: #0f172a;
    margin-bottom: 12px;
    text-transform: capitalize;
}

.our-plans p {
    font-size: 1.05rem;
    color: #64748b;
    max-width: 520px;
    margin: 0 auto 50px;
}
.our-plans span{
  font-size:20px;
  font-weight:700;
  color:blue;
}
#our-plans-title1,#our-plans-title2,#our-plans-title3{
  margin: 0px auto;
  max-width: 1200px;
  text-align: center;
  font-size: 45px;
  padding-bottom: 10px;
  border-bottom: 2px solid black;

}
/* Plans Container */
.plan-box {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 28px;
    max-width: 1100px;
    margin: 0 auto;
}

/* Plan Card */
.plan-box a {
    text-decoration: none;
    color: inherit;
}

.plans {
    background: #ffffff;
    padding: 35px 30px;
    border-radius: 18px;
    box-shadow: 0 15px 40px rgba(15, 23, 42, 0.08);
    position: relative;
    overflow: hidden;
    transition: transform 0.35s ease, box-shadow 0.35s ease;
    text-align: start;
}

/* Gradient accent line */
.plans::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 5px;
    background: linear-gradient(90deg, #2563eb, #6366f1);
}

/* Plan Title */
.plans h2 {
    font-size: 1.6rem;
    font-weight: 700;
    color: #1e293b;
    margin-bottom: 14px;
}

/* Plan Description */
.plans p {
    font-size: 0.95rem;
    line-height: 1.6;
    color: #475569;
}

/* Hover Effects */
.plans:hover {
    transform: translateY(-12px);
    box-shadow: 0 25px 55px rgba(37, 99, 235, 0.18);
}

/* Highlight middle plan (Standard) */
.plan-box a:nth-child(2) .plans {
    background: linear-gradient(180deg, #2563eb, #1e40af);
    color: #ffffff;
}

.plan-box a:nth-child(2) .plans h2,
.plan-box a:nth-child(2) .plans p {
    color: #ffffff;
}

.plan-box a:nth-child(2) .plans::before {
    background: linear-gradient(90deg, #93c5fd, #e0e7ff);
}

/* Mobile Tweaks */
@media (max-width: 576px) {
    .our-plans h2 {
        font-size: 2.1rem;
    }
}
/* ===============================
   FEATURE GRID
================================ */
.featureGrid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 24px;
    margin-top: 28px;
}

.featureCard {
    background: var(--card-bg);
    padding: 26px 24px;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-soft);
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.featureCard::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
        120deg,
        transparent,
        rgba(124, 58, 237, 0.08),
        transparent
    );
    opacity: 0;
    transition: opacity 0.3s ease;
}

.featureCard:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow-hover);
}

.featureCard:hover::before {
    opacity: 1;
}

.featureTitle {
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 10px;
    color: var(--text-dark);
}

.featureDesc {
    font-size: 15px;
    line-height: 1.6;
    color: var(--text-muted);
}
/* ===============================
   MEDIA SECTION
================================ */
.mediaSection {
    /* background: linear-gradient(180deg, #fafafa, #ffffff); */
    padding: 40px 0;
}

/* Intro text */
.mediaIntro {
    max-width: 620px;
    margin-bottom: 28px;
}

/* Layout */
.mediaLayout {
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: 32px;
    align-items: start;
}

/* ===============================
   VIDEO CARD
================================ */
.videoCard {
    background: #ffffff;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-soft);
    overflow: hidden;
}

.videoWrapper {
    position: relative;
    padding-top: 56.25%; /* 16:9 */
    background: #000;
}

.videoWrapper iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.videoCaption {
    padding: 20px 22px;
}

.mediaTitle {
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 6px;
    color: var(--text-dark);
}

.mediaDesc {
    font-size: 14.5px;
    line-height: 1.6;
    color: var(--text-muted);
}

/* ===============================
   IMAGE GALLERY
================================ */
.imageGallery {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
}

.imageCard {
    position: relative;
    border-radius: var(--radius-md);
    overflow: hidden;
    background: #000;
    box-shadow: var(--shadow-soft);
}

.imageCard img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.35s ease;
}

.imageCard:hover img {
    transform: scale(1.08);
}

.imageLabel {
    position: absolute;
    left: 12px;
    bottom: 12px;
    background: rgba(0, 0, 0, 0.65);
    color: #fff;
    padding: 6px 10px;
    border-radius: 8px;
    font-size: 12.5px;
    font-weight: 600;
}

/* ===============================
   RESPONSIVE
================================ */
@media (max-width: 900px) {
    .mediaLayout {
        grid-template-columns: 1fr;
    }

    .imageGallery {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 480px) {
    .imageGallery {
        grid-template-columns: 1fr;
    }
}

/* ===============================
   BENEFITS
================================ */
.benefitGroup {
    margin-top: 32px;
	margin-bottom: 32px;
}

.benefitTitle {
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 14px;
    color: var(--text-dark);
}

.benefitList {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 12px;
}

.benefitItem {
    background: var(--bg-soft);
    padding: 14px 16px;
    border-radius: var(--radius-md);
    font-size: 14.5px;
    font-weight: 500;
    color: var(--text-body);
    position: relative;
}

.benefitItem::before {
    content: "✓";
    margin-right: 8px;
    color: var(--primary);
    font-weight: 700;
}

/* ===============================
   CALLOUT
================================ */
.cList {
    margin-top: 64px;
    padding: 26px 28px;
    border-radius: var(--radius-lg);
    background: linear-gradient(135deg, #7c3aed, #9333ea);
    color: #fefce8;
    font-size: 16px;
    font-weight: 600;
    text-align: center;
    box-shadow: var(--shadow-hover);
}

/* ===============================
   FOOTER NOTE
================================ */
.tnc {
    margin-top: 20px;
    text-align: center;
    color: var(--text-muted);
    font-size: 11px;
}

/* ===============================
   RESPONSIVE
================================ */
@media (max-width: 768px) {
    .pageContent {
        padding: 36px 16px;
    }

    .pageTitle {
        font-size: 30px;
    }

    .featureGrid {
        gap: 18px;
    }
}
.showAllBenefit{
    padding: 15px;
    background: var(--button-background);
    color: #fff;
    border-radius: var(--radius-md);
}

/* ===== FOOTER BASE ===== */
#footer1-9 {
  background: linear-gradient(180deg, #0f172a, #020617);
  padding: 60px 0 25px;
  color: #e5e7eb;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

#footer1-9 .container {
  max-width: 1280px;
  margin: auto;
}

/* ===== FOOTER CONTENT ROW ===== */
#footer1-9 .content {
  display: grid;
  grid-template-columns: 140px 1fr 2fr;
  gap: 40px;
  align-items: start;
}

/* ===== LOGO ===== */
#footer1-9 .media-wrap img {
  max-width: 120px;
}

/* ===== ADDRESS TEXT ===== */
#footer1-9 .display-7 p {
  font-size: 14px;
  line-height: 1.7;
  color: #cbd5f5;
}

/* ===== LINKS SECTION ===== */
#links {
  column-count: 2;
  column-gap: 30px;
      display: flex;
    flex-wrap: wrap;
}

#links h5 {
  column-span: all;
  font-size: 16px;
  margin-bottom: 18px;
  color: #ffffff;
  font-weight: 600;
}

#links li {
  list-style: none;
  margin-bottom: 10px;
  break-inside: avoid;
}

#links a {
  color: #94a3b8;
  font-size: 14px;
  text-decoration: none;
  transition: all 0.25s ease;
}

#links a:hover {
  color: #38bdf8;
  padding-left: 4px;
}

/* ===== DIVIDER ===== */
#footer1-9 hr {
  border: none;
  height: 1px;
  background: linear-gradient(to right, transparent, #334155, transparent);
  margin: 35px 0 25px;
}

/* ===== FOOTER LOWER ===== */
.footer-lower {
  margin-top: 20px;
}
 .media-container-row {
  width:100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  flex-direction:column;
}

/* ===== COPYRIGHT ===== */
.footer-lower .copyright p {
  font-size: 13px;
  color: #94a3b8;
  margin: 0;
}

.footer-lower .copyright a {
  text-decoration: none;
  color: inherit;
}

/* ===== SOCIAL ICONS ===== */
.social-list {
  display: flex;
  gap: 14px;
  justify-content: flex-end;
}

.soc-item {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: #1e293b;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.25s ease;
}

.soc-item:hover {
  background: #38bdf8;
  transform: translateY(-3px);
}

.soc-item span {
  font-size: 16px;
  color: #ffffff;
}

/* ===== RESPONSIVE ===== */
@media (max-width: 992px) {
  #footer1-9 .content {
    grid-template-columns: 1fr;
  }

  #links {
    column-count: 1;
  }

  .social-list {
    justify-content: center;
    margin-top: 15px;
  }

}
.footer-lower{
width:100%;
}

/* ENTRANCE TEXT AND ADMISSION CSS */
/* =========================
   HERO SECTION
========================= */
.entrance-heroSection { 
    position: relative;
    min-height: 320px;
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: center;
}

.entrance-heroOverlay,.transport-heroOverlay,.staff-heroOverlay,
.fee-heroOverlay,.result-heroOverlay,.studentInfo-heroOverlay,.examSchedule-heroOverlay{
    width: 100%;
    background: linear-gradient(135deg, rgba(15, 23, 42, 0.85), rgba(37, 99, 235, 0.75));
    padding: 80px 20px;
    border-radius: 20px;
    box-shadow: 10px 10px 3px rgb(179, 179, 179);
}

.entrance-heroContent {
    max-width: 1200px;
    margin: 0 auto;
}

.entrance-pageTitle {
    font-size: clamp(28px, 4vw, 44px);
    font-weight: 700;
    color: #fff;
    margin-bottom: 12px;
}

.entrance-breadcrumb {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.85);
    display: flex;
    gap: 8px;
    align-items: center;
}

.entrance-breadcrumb a {
    color: #9cd3ff;
}

.entrance-divider {
    opacity: 0.6;
}

/* =========================
   MAIN LAYOUT
========================= */
.entrance-contentLayout {
    max-width: 1200px;
    margin: 50px auto;
    padding: 0 20px;
    display: grid;
    grid-template-columns: 280px 1fr;
    gap: 32px;
}

/* =========================
   SIDEBAR
========================= */
.entrance-sidebar {
    position: relative;
}

.entrance-sidebarCard1 {
    background: #fff;
    border-radius: 14px;
    padding: 22px;
    margin-bottom: 24px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.06);
    position: sticky;
    top: 90px;
    z-index: 99;
}

.entrance-sidebarCard2 {
    background: #fff;
    border-radius: 14px;
    padding: 22px;
    margin-bottom: 24px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.06);
}

.entrance-sidebarTitle {
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 14px;
    color: #1f2937;
}

.entrance-sidebarLinks {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.entrance-sidebarLinks a {
    font-size: 14px;
    color: #374151;
    padding: 10px 12px;
    border-radius: 8px;
    transition: all 0.25s ease;
}

.entrance-sidebarLinks a:hover {
    background: #eef4ff;
    color: #2563eb;
}

.entrance-sidebarText {
    font-size: 14px;
    color: #6b7280;
    display: block;
    margin-bottom: 12px;
}

.entrance-sidebarButton {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 12px;
    font-size: 14px;
    font-weight: 600;
    border-radius: 10px;
    background: #f1f5f9;
    color: #1f2937;
    transition: all 0.25s ease;
}

.entrance-sidebarButton:hover {
    background: #e5e7eb;
}

.entrance-sidebarButton.entrance-primary {
    background: #2563eb;
    color: #fff;
}

.entrance-sidebarButton.entrance-primary:hover {
    background: #1d4ed8;
}

/* =========================
   CONTENT AREA
========================= */
.entrance-contentArea {
    background: #fff;
    border-radius: 16px;
    padding: 40px;
    box-shadow: 0 12px 35px rgba(0, 0, 0, 0.05);
}

.entrance-contentSection {
    margin-bottom: 48px;
}

.entrance-sectionTitle {
    font-size: 22px;
    font-weight: 700;
    margin-bottom: 18px;
    color: #111827;
}

.entrance-textBlock {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.entrance-textLine {
    font-size: 15px;
    color: #374151;
}

/* =========================
   FEATURE GRID
========================= */
.entrance-featureGrid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 18px;
}

.entrance-featureCard {
    background: #f8fafc;
    border-radius: 14px;
    padding: 18px;
    transition: all 0.25s ease;
    border: 1px solid #eef2f7;
}

.entrance-featureCard:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 20px rgba(37, 99, 235, 0.12);
    border-color: #c7d2fe;
}

.entrance-featureDesc {
    font-size: 14px;
    color: #1f2937;
}

/* =========================
   BENEFIT LIST
========================= */
.entrance-benefitList {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 14px;
}

.entrance-benefitItem {
    background: #f9fafb;
    border-radius: 12px;
    padding: 14px 16px;
    font-size: 14px;
    color: #374151;
    border-left: 4px solid #2563eb;
}

/* =========================
   CTA
========================= */
.entrance-cList {
    background: linear-gradient(135deg, #2563eb, #1e40af);
    color: #fff;
    padding: 26px 30px;
    border-radius: 18px;
    font-size: 16px;
    font-weight: 600;
    text-align: center;
}

/* =========================
   RESPONSIVE
========================= */
@media (max-width: 992px) {
    .entrance-contentLayout {
        grid-template-columns: 1fr;
    }

    .entrance-sidebarCard {
        position: relative;
        top: auto;
    }

    .entrance-contentArea {
        padding: 28px;
    }
}

@media (max-width: 576px) {
    .entrance-heroOverlay {
        padding: 60px 16px;
    }

    .entrance-contentArea {
        padding: 22px;
    }

    .entrance-sectionTitle {
        font-size: 20px;
    }
}

/* FEE COLLECTOIN AND OUSTANDING CSS */
/* ===============================
   ROOT VARIABLES
================================ */
:root {
  --fee-primary: #2563eb;
  --fee-primary-dark: #1e40af;
  --fee-dark: #0f172a;
  --fee-text: #374151;
  --fee-muted: #64748b;
  --fee-bg: #f8fafc;
  --fee-white: #ffffff;
  --fee-radius: 14px;
  --fee-radius-lg: 22px;
  --fee-shadow: 0 10px 30px rgba(0,0,0,0.08);
}

/* ===============================
   BASE
================================ */

.containertop img {
  display: block;
}

/* ===============================
   HERO
================================ */
.fee-heroSection {
  position: relative;
  min-height: 340px;
  background-size: cover;
  background-position: center;
  display: flex;
  align-items: center;
}

.fee-heroContent {
    max-width: 1200px;
    margin: 0 auto;
}

.fee-pageTitle {
  font-size: clamp(30px, 4vw, 44px);
  font-weight: 800;
  color: #fff;
  margin-bottom: 12px;
}

.fee-breadcrumb {
  display: flex;
  gap: 10px;
  font-size: 14px;
  color: rgba(255,255,255,0.85);
}

.fee-breadcrumb a {
  color: #9cd3ff;
}

.fee-divider {
  opacity: 0.6;
}

/* ===============================
   MAIN LAYOUT
================================ */
.fee-contentLayout {
  width: 100%;
  margin: 0px auto;
}

.fee-contentSection {
  margin-bottom: 70px;
}

/* ===============================
   INTRO SECTION
================================ */
.fee-introGrid {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: 40px;
}

@media (max-width: 992px) {
  .fee-introGrid {
    grid-template-columns: 1fr;
  }
}

.fee-sectionTitle {
  font-size: 26px;
  font-weight: 700;
  color: var(--fee-dark);
  margin-bottom: 14px;
}

.fee-highlightText {
  display: block;
  font-size: 15px;
  font-weight: 600;
  color: var(--fee-primary);
  margin-bottom: 22px;
}

.fee-primaryButton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 30px;
  border-radius: 999px;
  background: var(--fee-primary);
  color: #fff;
  font-weight: 600;
  transition: all 0.3s ease;
}

.fee-primaryButton:hover {
  background: var(--fee-primary-dark);
}

/* ===============================
   FEATURE GRID
================================ */
.fee-featureGrid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 20px;
}

.fee-featureCard {
  background: var(--fee-white);
  padding: 22px;
  border-radius: var(--fee-radius);
  box-shadow: var(--fee-shadow);
  transition: all 0.3s ease;
}

.fee-featureCard:hover {
  transform: translateY(-6px);
  box-shadow: 0 18px 40px rgba(37,99,235,0.18);
}

.fee-featureTitle {
  font-size: 16px;
  font-weight: 700;
  margin-bottom: 6px;
}

.fee-featureDesc {
  font-size: 14px;
  color: var(--fee-muted);
}

/* ===============================
   IMAGE + TEXT
================================ */
.fee-mediaGrid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  align-items: center;
}

@media (max-width: 992px) {
  .fee-mediaGrid {
    grid-template-columns: 1fr;
  }
}

.fee-mediaText .fee-textLine {
  display: block;
  margin-bottom: 12px;
  font-size: 15px;
}

/* ===============================
   TEXT BLOCK
================================ */
.fee-textBlock {
  border-bottom: 2px solid var(--fee-muted);
}

.fee-textLine {
  display: block;
  font-size: 20px;
  color: var(--fee-text);
  margin-bottom: 12px;
}

/* ===============================
   GALLERY
================================ */
.fee-gallerySection {
  display: flex;
  justify-content: center;
}

.fee-galleryCard {
  background: #fff;
  border-radius: var(--fee-radius-lg);
  box-shadow: var(--fee-shadow);
  overflow: hidden;
  max-width: 420px;
  transition: transform 0.3s ease;
}

.fee-galleryCard:hover {
  transform: scale(1.03);
}

.fee-galleryCaption {
  display: block;
  padding: 16px;
  font-weight: 600;
  text-align: center;
}

/* ===============================
   CTA STRIP
================================ */
.fee-ctaStrip {
  background: linear-gradient(
    135deg,
    var(--fee-primary),
    var(--fee-primary-dark)
  );
  color: #fff;
  padding: 36px 20px;
  border-radius: var(--fee-radius-lg);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  margin-bottom: 40px;
}

.fee-ctaText {
  font-size: 18px;
  font-weight: 600;
}

.fee-outlineButton {
  padding: 12px 28px;
  border-radius: 999px;
  border: 2px solid #fff;
  color: #fff;
  font-weight: 600;
  transition: all 0.3s ease;
}

.fee-outlineButton:hover {
  background: #fff;
  color: var(--fee-primary-dark);
}

/* ===============================
   SPLIT LIST
================================ */
.fee-splitGrid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 40px;
}

@media (max-width: 768px) {
  .fee-splitGrid {
    grid-template-columns: 1fr;
  }
}

.fee-listBlock {
  background: #fff;
  padding: 30px;
  border-radius: var(--fee-radius-lg);
  box-shadow: var(--fee-shadow);
}

.fee-listItem {
  display: block;
  padding-left: 18px;
  margin-bottom: 10px;
  font-size: 14px;
  position: relative;
}

.fee-listItem::before {
  content: "✔";
  position: absolute;
  left: 0;
  color: var(--fee-primary);
  font-size: 13px;
}

/* ===============================
   ALERT NOTE
================================ */
.fee-alertNote {
  margin-top: 60px;
  padding: 18px;
  background: #fee2e2;
  color: #991b1b;
  border-radius: var(--fee-radius);
  font-weight: 700;
  text-align: center;
}

/* RESULT AND PUBLISHING CSS */
/* ===============================
   RESULT HERO SECTION
================================ */
.result-heroSection {
    position: relative;
    min-height: 320px;
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: center;
}


.result-heroContent {
    max-width: 1200px;
    margin: 0 auto;
}

.result-pageTitle {
    font-size: clamp(28px, 4vw, 44px);
    font-weight: 700;
    color: #ffffff;
    margin-bottom: 12px;
}

.result-breadcrumb {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    color: rgba(255, 255, 255, 0.85);
}

.result-breadcrumb a {
    color: #93c5fd;
    text-decoration: none;
}

.result-divider {
    opacity: 0.6;
}

/* ===============================
   MAIN LAYOUT
================================ */
.result-contentLayout {
    max-width: 1200px;
    margin: 50px auto;
    padding: 0 20px;
    display: grid;
    grid-template-columns: 280px 1fr;
    gap: 32px;
}

/* ===============================
   SIDEBAR
================================ */
.result-sidebar {
    position: relative;
}

.result-sidebarCard {
    background: #ffffff;
    border-radius: 14px;
    padding: 22px;
    position: sticky;
    top: 90px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.06);
}

.result-sidebarTitle {
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 14px;
    color: #1f2937;
}

.result-sidebarLinks {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.result-sidebarLinks a {
    font-size: 14px;
    color: #374151;
    padding: 10px 12px;
    border-radius: 8px;
    text-decoration: none;
    transition: all 0.25s ease;
}

.result-sidebarButton {
    margin-top: 8px;
    text-align: center;
    padding: 12px;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 600;
    background: #2563eb;
    color: #ffffff !important;
    transition: all 0.25s ease;
}

.result-sidebarButton:hover {
    background: #1d4ed8;
}

/* ===============================
   CONTENT AREA
================================ */
.result-contentArea {
    background: #ffffff;
    border-radius: 16px;
    padding: 40px;
    box-shadow: 0 12px 35px rgba(0, 0, 0, 0.05);
}

.result-contentSection {
    margin-bottom: 46px;
}

.result-sectionTitle {
    font-size: 22px;
    font-weight: 700;
    margin-bottom: 16px;
    color: #111827;
}

.result-textLine {
    font-size: 15px;
    line-height: 1.65;
    color: #374151;
    margin-bottom: 12px;
}

/* ===============================
   TYPOGRAPHY ENHANCEMENTS
================================ */
.result-contentSection:last-child {
    margin-bottom: 0;
}

/* ===============================
   RESPONSIVE
================================ */
@media (max-width: 992px) {
    .result-contentLayout {
        grid-template-columns: 1fr;
    }

    .result-sidebarCard {
        position: relative;
        top: auto;
    }

    .result-contentArea {
        padding: 28px;
    }
}

@media (max-width: 576px) {
    .result-heroOverlay {
        padding: 60px 16px;
    }

    .result-contentArea {
        padding: 22px;
    }

    .result-sectionTitle {
        font-size: 20px;
    }
}

/* STUDENT INFORMATION AND ADMINISTRATIONS */
/* =========================
   HERO / BANNER
========================= */
.studentInfo-hero {
    position: relative;
    min-height: 320px;
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: center;
}



.studentInfo-heroTitle {
    font-size: clamp(28px, 4vw, 44px);
    font-weight: 700;
    color: #ffffff;
    margin-bottom: 12px;
}

/* =========================
   MAIN WRAPPER
========================= */
.studentInfo-wrapper {
    max-width: 1200px;
    margin: 60px auto;
    padding: 0 20px;
}

/* =========================
   SECTIONS
========================= */
.studentInfo-section {
    margin-bottom: 70px;
}

.studentInfo-alt {
    background: #f8fafc;
    border-radius: 18px;
    padding: 50px;
}
.studentInfo-highlight{
    font-size:25px;
    color: rgb(37, 99, 235);
}
.studentInfo-highlightBg {
    background: linear-gradient(135deg, #fff4ea, #ffffff);
    border-radius: 18px;
    padding: 50px;
}
a
/* =========================
   GRID LAYOUT
========================= */
.studentInfo-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 40px;
    align-items: center;
}

/* =========================
   CONTENT
========================= */
.studentInfo-content {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.studentInfo-title {
    font-size: 22px;
    font-weight: 700;
    color: #111827;
}

.studentInfo-subTitle {
    font-size: 15px;
    font-weight: 600;
    color: #2563eb;
}

.studentInfo-content p {
    font-size: 15px;
    color: #374151;
    line-height: 1.7;
}

/* =========================
   LIST
========================= */
.studentInfo-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 14px;
    list-style: none;
}

.studentInfo-list li {
    font-size: 14px;
    color: #374151;
    padding-left: 22px;
    position: relative;
}

.studentInfo-list li::before {
    content: "•";
    position: absolute;
    left: 0;
    color: #2563eb;
    font-size: 22px;
    line-height: 1;
}

/* =========================
   IMAGE
========================= */
.studentInfo-media img {
    margin-top: 20px;
    width: 300px;
    border-radius: 16px;
    box-shadow: 0 12px 35px rgba(0, 0, 0, 0.12);
}

/* =========================
   CTA SECTION
========================= */
.studentInfo-cta {
    background: linear-gradient(135deg, #2563eb, #1e40af);
    border-radius: 20px;
    padding: 50px;
    color: #ffffff;
}

.studentInfo-cta .studentInfo-title {
    color: #ffffff;
}
#studentInfo-callText{
    color:white;
    font-weight: 900;
    padding-bottom: 10px;
    border-bottom: 2px solid white;
}

.studentInfo-button {
    width: max-content;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 14px 30px;
    margin-top: 20px;
    font-size: 15px;
    font-weight: 600;
    border-radius: 30px;
    background: #ffffff;
    color: #1e40af;
    text-decoration: none;
    transition: all 0.25s ease;
}
.studentInfo-section{
  box-shadow: var(--shadow-soft);
}
.studentInfo-grid{
  padding: 32px;
  border-radius: 20px;
}
.studentInfo-button:hover {
    transform: translateY(-2px);
}

/* =========================
   RESPONSIVE
========================= */
@media (max-width: 992px) {
    .studentInfo-grid {
        grid-template-columns: 1fr;
    }

    .studentInfo-alt,
    .studentInfo-highlightBg,
    .studentInfo-cta {
        padding: 32px;
    }
}

@media (max-width: 576px) {
    .studentInfo-heroOverlay {
        padding: 60px 16px;
    }

    .studentInfo-title {
        font-size: 20px;
    }
}

/* EXAM SCHEDULING AND MANAGING */
/* ================================
   ROOT (USING PROVIDED VARIABLES)
================================ */
:root {
    --fee-primary: #2563eb;
    --fee-primary-dark: #1e40af;
    --fee-dark: #0f172a;
    --fee-text: #374151;
    --fee-muted: #64748b;
    --fee-bg: #f8fafc;
    --fee-white: #ffffff;
    --fee-radius: 14px;
    --fee-radius-lg: 22px;
    --fee-shadow: 0 10px 30px rgba(0,0,0,0.08);
}

/* ================================
   PAGE WRAPPER
================================ */
.examSchedule-contentLayout {
    background: var(--fee-bg);
    display: flex;
    flex-direction: column;
    gap: 90px;
}

/* ================================
   HERO SECTION
================================ */
.examSchedule-heroSection {
    position: relative;
    min-height: 70vh;
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: center;
}

.examSchedule-heroContent {
    max-width: 1100px;
    margin: auto;
    padding: 0 20px;
}

.examSchedule-pageTitle {
    font-size: clamp(32px, 5vw, 54px);
    font-weight: 800;
    color: #fff;
    line-height: 1.25;
}

/* ================================
   SECTION BASE
================================ */
.examSchedule-contentSection {
    padding: 0 20px;
}

.examSchedule-container {
    max-width: 1200px;
    margin: auto;
}

.examSchedule-sectionTitle {
    font-size: clamp(26px, 4vw, 36px);
    font-weight: 700;
    color: var(--fee-dark);
    margin-bottom: 30px;
}

/* ================================
   TEXT CONTENT
================================ */

.examSchedule-textBlock p {
    font-size: 16px;
    line-height: 1.9;
    color: var(--fee-text);
    margin-bottom: 18px;
}

/* ================================
   IMAGE + TEXT GRID
================================ */
.examSchedule-mediaGrid {
    max-width: 1200px;
    margin: auto;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 64px;
    align-items: center;
}

.examSchedule-mediaImage img {
    width: 100%;
    border-radius: var(--fee-radius-lg);
    box-shadow: var(--fee-shadow);
}

/* ================================
   FEATURE LIST CARD
================================ */
.examSchedule-listBlock {
    background: var(--fee-white);
    padding: 42px;
    border-radius: var(--fee-radius-lg);
    box-shadow: var(--fee-shadow);
}

.examSchedule-featureList {
    list-style: none;
    padding: 0;
    margin: 0;
}

.examSchedule-featureList li {
    margin-bottom: 26px;
    color: var(--fee-text);
    font-size: 15px;
    line-height: 1.7;
}

.examSchedule-featureList li strong {
    display: block;
    font-size: 18px;
    font-weight: 600;
    color: var(--fee-dark);
    margin-bottom: 6px;
}

/* ================================
   BENEFITS SECTION
================================ */
.examSchedule-benefitSection {
    background: var(--fee-white);
}

.examSchedule-benefitGrid {
    max-width: 1200px;
    margin: auto;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 64px;
    align-items: center;
}

.examSchedule-benefitImage img {
    width: 100%;
    border-radius: var(--fee-radius-lg);
    box-shadow: var(--fee-shadow);
}

.examSchedule-benefitList ul {
    padding-left: 0;
}

.examSchedule-benefitList ul li {
    position: relative;
    padding-left: 30px;
    margin-bottom: 18px;
    font-size: 15px;
    color: var(--fee-text);
}

.examSchedule-benefitList ul li::before {
    content: "✔";
    position: absolute;
    left: 0;
    color: var(--fee-primary);
    font-weight: 700;
}

/* ================================
   CTA SECTION
================================ */
.examSchedule-ctaSection {
    background: linear-gradient(
        135deg,
        var(--fee-primary),
        var(--fee-primary-dark)
    );
    padding: 80px 20px;
}

.examSchedule-ctaGrid {
    max-width: 1200px;
    margin: auto;
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 60px;
    align-items: center;
}

.examSchedule-ctaTitle {
    font-size: clamp(22px, 4vw, 32px);
    font-weight: 700;
    color: #fff;
    margin-bottom: 26px;
}

.examSchedule-primaryButton {
    display: inline-block;
    padding: 14px 38px;
    background: #fff;
    color: var(--fee-primary);
    font-weight: 700;
    border-radius: 999px;
    text-decoration: none;
    transition: all 0.3s ease;
}

.examSchedule-primaryButton:hover {
    background: var(--fee-bg);
    transform: translateY(-3px);
    box-shadow: 0 12px 25px rgba(0,0,0,0.2);
}

.examSchedule-ctaImage img {
    width: 100%;
}

/* ================================
   RESPONSIVE
================================ */
@media (max-width: 992px) {
    .examSchedule-mediaGrid,
    .examSchedule-benefitGrid,
    .examSchedule-ctaGrid {
        grid-template-columns: 1fr;
        text-align: center;
    }

    .examSchedule-benefitList ul li {
        padding-left: 0;
    }

    .examSchedule-benefitList ul li::before {
        position: relative;
        margin-right: 6px;
    }
}

@media (max-width: 576px) {
    .examSchedule-listBlock {
        padding: 30px 22px;
    }

    .examSchedule-pageTitle {
        text-align: center;
    }
}

/* TRANSPORTION AND ROUTE TRACKING CSS */
/* ROOT THEME */
:root {
  --fee-primary: #2563eb;
  --fee-primary-dark: #1e40af;
  --fee-dark: #0f172a;
  --fee-text: #374151;
  --fee-muted: #64748b;
  --fee-bg: #f8fafc;
  --fee-white: #ffffff;
  --fee-radius: 14px;
  --fee-radius-lg: 22px;
  --fee-shadow: 0 10px 30px rgba(0,0,0,0.08);
}

/* HERO */
.transport-heroSection {
  position: relative;
  background-size: cover;
  background-position: center;
}


.transport-heroContent {
  max-width: 1200px;
  margin: auto;
  padding: 0 24px;
  color: var(--fee-white);
}

.transport-pageTitle {
    font-size: clamp(28px, 4vw, 44px);
    font-weight: 700;
    color: #fff;
    margin-bottom: 12px;
}

.transport-breadcrumb {
  display: flex;
  gap: 8px;
  font-size: 14px;
  opacity: 0.9;
}

.transport-breadcrumb a {
  color: var(--fee-white);
  text-decoration: none;
}

.transport-breadcrumbDivider {
  opacity: 0.6;
}

/* MAIN LAYOUT */
.transport-contentLayout {
  padding: 80px 0;
}

.transport-contentSection {
  padding: 20px 24px;
}

.transport-container {
  max-width: 1200px;
  margin: auto;
}

/* TITLES */
.transport-sectionTitle {
  font-size: clamp(1.8rem, 3vw, 2.4rem);
  font-weight: 700;
  color: var(--fee-dark);
  margin-bottom: 24px;
}

.transport-textBlock p {
  margin-bottom: 18px;
}

/* MEDIA GRID */
.transport-mediaGrid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 48px;
  align-items: center;
}

.transport-mediaImage img {
  width: 100%;
  border-radius: var(--fee-radius-lg);
  box-shadow: var(--fee-shadow);
}

/* FEATURE LIST */
.transport-listBlock {
  background: var(--fee-white);
  padding: 32px;
  border-radius: var(--fee-radius-lg);
  box-shadow: var(--fee-shadow);
}

.transport-featureList {
  list-style: none;
}

.transport-featureList li {
  position: relative;
  padding-left: 28px;
  margin-bottom: 22px;
  color: var(--fee-text);
}

.transport-featureList li strong {
  display: block;
  color: var(--fee-dark);
  margin-bottom: 6px;
}

.transport-featureList li::before {
  content: "✔";
  position: absolute;
  left: 0;
  top: 2px;
  color: var(--fee-primary);
  font-size: 16px;
}

/* BENEFITS */
.transport-benefitSection {
  background: var(--fee-white);
}

.transport-benefitGrid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 48px;
  align-items: center;
}

.transport-benefitImage img {
  width: 100%;
  border-radius: var(--fee-radius-lg);
  box-shadow: var(--fee-shadow);
}

.transport-benefitList ul {
  list-style: none;
}

.transport-benefitList li {
  padding-left: 26px;
  margin-bottom: 16px;
  position: relative;
}

.transport-benefitList li::before {
  content: "→";
  position: absolute;
  left: 0;
  color: var(--fee-primary);
}

/* CTA */
.transport-ctaSection {
    margin-top: 40px;
  background: linear-gradient(135deg,var(--fee-primary),var(--fee-primary-dark));
  padding: 80px 24px;
  color: var(--fee-white);
  border-radius: 20px;
}

.transport-ctaGrid {
  max-width: 1200px;
  margin: auto;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 48px;
  align-items: center;
}

.transport-ctaTitle {
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  font-weight: 700;
  margin-bottom: 24px;
}

.transport-primaryButton {
  display: inline-block;
  background: var(--fee-white);
  color: var(--fee-primary);
  padding: 14px 32px;
  border-radius: var(--fee-radius);
  font-weight: 600;
  text-decoration: none;
  transition: 0.3s ease;
}

.transport-primaryButton:hover {
  transform: translateY(-2px);
  box-shadow: var(--fee-shadow);
}

.transport-ctaImage img {
  width: 100%;
  max-width: 420px;
  margin-left: auto;
}

/* RESPONSIVE */
@media (max-width: 768px) {
  .transport-pageTitle {
    font-size: 2rem;
  }

  .transport-contentSection {
    padding: 50px 20px;
  }

  .transport-ctaGrid {
    text-align: center;
  }

  .transport-ctaImage img {
    margin: auto;
  }
}
/* STAFF ATTENDENCE AND MANAGEMENT SYSTEM */
/* ==============================
   ROOT THEME
================================ */
:root {
  --fee-primary: #2563eb;
  --fee-primary-dark: #1e40af;
  --fee-dark: #0f172a;
  --fee-text: #374151;
  --fee-muted: #64748b;
  --fee-bg: #f8fafc;
  --fee-white: #ffffff;
  --fee-radius: 14px;
  --fee-radius-lg: 22px;
  --fee-shadow: 0 10px 30px rgba(0,0,0,0.08);
}

/* ==============================
   CONTAINERS
================================ */
.staff-container {
  max-width: 1200px;
  margin: auto;
  padding: 0 20px;
}

.staff-narrowContent {
  max-width: 900px;
  margin: auto;
}

/* ==============================
   HERO
================================ */
.staff-heroSection {
  background-size: cover;
  background-position: center;
  position: relative;
  padding: 50px 20px;

}


.staff-pageTitle {
  color: var(--fee-white);
  font-size: clamp(2rem, 4vw, 3rem);
  margin-bottom: 15px;
}

.staff-breadcrumb {
  display: flex;
  gap: 10px;
  font-size: 14px;
  color: #c7d2fe;
}

.staff-breadcrumb a {
  color: #e0e7ff;
}

.staff-breadcrumbDivider {
  opacity: 0.6;
}

/* ==============================
   SECTIONS
================================ */
.staff-contentSection {
  padding: 50px 20px;
  border-radius:20px;
  margin: 0 auto;
  background-color: var(--bg-soft);
}

.staff-bgLight {
  background: var(--fee-white);
}

/* ==============================
   FEATURE GRID
================================ */
.staff-featureGrid {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: 60px;
  align-items: start;
}

@media (max-width: 900px) {
  .staff-featureGrid {
    grid-template-columns: 1fr;
  }
}

.staff-featureTitle {
  font-size: 1.6rem;
  color: var(--fee-dark);
  margin-bottom: 20px;
}

.staff-highlightList {
  list-style: none;
  padding: 0;
  margin-bottom: 30px;
}

.staff-highlightList li {
  padding-left: 26px;
  position: relative;
  margin-bottom: 10px;
}

.staff-highlightList li::before {
  content: "✔";
  position: absolute;
  left: 0;
  color: var(--fee-primary);
  font-weight: 700;
}

/* ==============================
   BUTTONS
================================ */
.staff-primaryButton {
  display: inline-block;
  padding: 12px 28px;
  background: var(--fee-primary);
  color: var(--fee-white);
  border-radius: var(--fee-radius);
  box-shadow: var(--fee-shadow);
  transition: 0.3s ease;
}

.staff-primaryButton:hover {
  background: var(--fee-primary-dark);
  transform: translateY(-2px);
}

.staff-lightButton {
  background: var(--fee-white);
  color: var(--fee-primary);
}

/* ==============================
   FEATURE CARDS
================================ */
.staff-featureCards {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
}

@media (max-width: 600px) {
  .staff-featureCards {
    grid-template-columns: 1fr;
  }
}

.staff-card {
  background: var(--fee-white);
  padding: 24px;
  border-radius: var(--fee-radius);
  box-shadow: var(--fee-shadow);
  transition: 0.3s ease;
}

.staff-card:hover {
  transform: translateY(-6px);
}

.staff-cardIcon {
  font-size: 26px;
  margin-bottom: 12px;
  color: var(--fee-primary);
}

.staff-cardTitle {
  font-size: 1.1rem;
  margin-bottom: 6px;
  color: var(--fee-dark);
}

/* ==============================
   MEDIA GRID
================================ */
.staff-mediaGrid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 50px;
  align-items: center;
}

@media (max-width: 900px) {
  .staff-mediaGrid {
    grid-template-columns: 1fr;
  }
}

.staff-sectionTitle {
  font-size: 2rem;
  color: var(--fee-dark);
  margin-bottom: 20px;
}

.staff-subTitle {
  font-size: 1.1rem;
  margin-top: 20px;
  color: var(--fee-primary-dark);
}

/* ==============================
   LISTS
================================ */
.staff-numberList {
  padding-left: 22px;
  margin-bottom: 30px;
}

.staff-numberList li {
  margin-bottom: 8px;
  font-weight: 500;
}

/* ==============================
   CTA
================================ */
.staff-ctaSection {
  background: linear-gradient(
    135deg,
    var(--fee-primary),
    var(--fee-primary-dark)
  );
  color: var(--fee-white);
  padding: 70px 20px;
  border-radius: var(--fee-radius-lg);
  margin: 80px auto;
}

.staff-ctaContainer {
  max-width: 1000px;
  margin: auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 30px;
}

@media (max-width: 800px) {
  .staff-ctaContainer {
    flex-direction: column;
    text-align: center;
  }
}

.staff-ctaTitle {
  font-size: 1.8rem;
}

/* ==============================
   BENEFITS
================================ */
.staff-benefitBlock h4 {
  margin-top: 24px;
  color: var(--fee-dark);
}

/* ==============================
   GALLERY
================================ */
.staff-galleryGrid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
}

.staff-fullWidth {
  grid-column: span 2;
}

@media (max-width: 700px) {
  .staff-galleryGrid {
    grid-template-columns: 1fr;
  }
  .staff-fullWidth {
    grid-column: span 1;
  }
}

.staff-galleryCard {
  background: var(--fee-white);
  border-radius: var(--fee-radius);
  box-shadow: var(--fee-shadow);
  border: 1px solid var(--fee-dark);
  overflow: hidden;
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.staff-galleryCard span {
  display: block;
  padding: 14px;
  font-weight: 500;
}

/* ==============================
   FAQ
================================ */
.staff-faqItem {
  background: var(--fee-white);
  padding: 18px 22px;
  border-radius: var(--fee-radius);
  box-shadow: var(--fee-shadow);
  margin-bottom: 14px;
}

.staff-faqItem summary {
  cursor: pointer;
  font-weight: 600;
  color: var(--fee-dark);
}

.staff-faqItem p {
  margin-top: 10px;
  color: var(--fee-muted);
}

/*PAYROLL STATUORY AND RECORDS */
/* ===============================
   ROOT VARIABLES
================================ */
:root {
  --fee-primary: #2563eb;
  --fee-primary-dark: #1e40af;
  --fee-dark: #0f172a;
  --fee-text: #374151;
  --fee-muted: #64748b;
  --fee-bg: #f8fafc;
  --fee-white: #ffffff;

  --fee-radius: 14px;
  --fee-radius-lg: 22px;

  --fee-shadow-sm: 0 4px 14px rgba(15, 23, 42, 0.06);
  --fee-shadow-md: 0 10px 30px rgba(15, 23, 42, 0.08);
}


/* ===============================
   CONTAINER
================================ */
.payroll-container {
  max-width: 1200px;
  margin: auto;
  padding: 0 20px;
}

/* ===============================
   HERO SECTION
================================ */
.payroll-hero {
  position: relative;
  padding: 100px 0;
  color: var(--fee-white);
  border-radius:20px;
  box-shadow: 10px 10px 3px rgb(179, 179, 179);
}

.payroll-bg-cover {
  background-size: cover;
  background-position: center;
}

.payroll-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius:20px;
  background: linear-gradient(
    135deg,
    rgba(15, 23, 42, 0.85),
    rgba(37, 99, 235, 0.75)
  );
}

.payroll-hero-content {
  position: relative;
  z-index: 1;
  max-width: 700px;
}

.payroll-hero-title {
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 700;
  margin-bottom: 12px;
}

/* ===============================
   BREADCRUMB
================================ */
.payroll-breadcrumb-list {
  display: flex;
  gap: 10px;
  list-style: none;
  padding: 0;
  margin: 0;
  font-size: 14px;
}

.payroll-breadcrumb-list li {
  color: #e5e7eb;
}

.payroll-breadcrumb-list li a {
  color: #e5e7eb;
}

.payroll-breadcrumb-list li::after {
  content: "/";
  margin-left: 10px;
  opacity: 0.6;
}

.payroll-breadcrumb-list li:last-child::after {
  display: none;
}

/* ===============================
   PAGE LAYOUT
================================ */
.payroll-page {
  padding: 70px 0;
}

.payroll-layout {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 40px;
}

/* ===============================
   SIDEBAR
================================ */
.payroll-sidebar-inner {
  position: sticky;
  top: 110px;
  background: var(--fee-white);
  border-radius: var(--fee-radius-lg);
  padding: 24px;
  box-shadow: var(--fee-shadow-sm);
}

.payroll-nav-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.payroll-nav-list a {
  display: block;
  padding: 10px 14px;
  border-radius: var(--fee-radius);
  font-weight: 500;
  color: var(--fee-dark);
  transition: all 0.3s ease;
}

.payroll-nav-list a:hover {
  background: rgba(37, 99, 235, 0.1);
  color: var(--fee-primary);
}

/* ===============================
   BUTTONS
================================ */
.payroll-btn-outline {
  border: 2px solid var(--fee-primary);
  color: var(--fee-primary);
}

.payroll-btn-outline:hover {
  background: var(--fee-primary);
  color: var(--fee-white);
}

/* ===============================
   CONTENT AREA
================================ */
.payroll-content {
  background: var(--fee-white);
  padding: 40px;
  border-radius: var(--fee-radius-lg);
  box-shadow: var(--fee-shadow-md);
}

.payroll-intro {
  font-size: 16px;
  margin-bottom: 24px;
}

.payroll-section-title {
  font-size: 26px;
  font-weight: 700;
  margin-bottom: 24px;
  color: var(--fee-dark);
}

/* ===============================
   HIGHLIGHT SECTION
================================ */
.payroll-highlight {
  padding: 30px;
  border-radius: var(--fee-radius-lg);
  margin-bottom: 40px;
}

.payroll-bg-soft {
  background: linear-gradient(
    135deg,
    rgba(37, 99, 235, 0.08),
    rgba(37, 99, 235, 0.03)
  );
}

.payroll-accent-line {
  display: inline-block;
  width: 50px;
  height: 4px;
  background: var(--fee-primary);
  border-radius: 2px;
  margin-bottom: 14px;
}

.payroll-subtitle {
  font-size: 18px;
  font-weight: 600;
  color: var(--fee-dark);
  margin-bottom: 10px;
}

/* ===============================
   FEATURE SECTIONS
================================ */
.payroll-feature {
  margin-bottom: 36px;
}

.payroll-feature-title {
  font-size: 18px;
  font-weight: 600;
  color: var(--fee-dark);
  margin-bottom: 10px;
}

.payroll-feature p {
  margin-bottom: 12px;
  color: var(--fee-text);
}

/* ===============================
   RESPONSIVE
================================ */
@media (max-width: 992px) {
  .payroll-layout {
    grid-template-columns: 1fr;
  }

  .payroll-sidebar-inner {
    position: relative;
    top: auto;
  }
}

@media (max-width: 576px) {
  .payroll-hero {
    padding: 70px 0;
  }

  .payroll-content {
    padding: 24px;
  }
}


/* STOERS INVENTORY MANAGEMNET SYSTEM */
.inventory-container {
  max-width: 1200px;
  margin: auto;
  padding: 0 20px;
}

/* ===============================
   HERO
================================ */
.inventory-hero {
  position: relative;
  padding: 100px 0;
  color: var(--fee-white);
  border-radius:20px;
  box-shadow: 10px 10px 3px rgb(179, 179, 179);
}

.inventory-bg-cover {
  background-size: cover;
  background-position: center;
}

.inventory-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius:20px;
  background: linear-gradient(
    135deg,
    rgba(15, 23, 42, 0.85),
    rgba(37, 99, 235, 0.75)
  );
}

.inventory-hero-content {
  position: relative;
  z-index: 1;
  max-width: 720px;
}

.inventory-hero-title {
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 700;
  margin-bottom: 12px;
}

/* ===============================
   BREADCRUMB
================================ */
.inventory-breadcrumb-list {
  display: flex;
  gap: 10px;
  list-style: none;
  padding: 0;
  margin: 0;
  font-size: 14px;
}

.inventory-breadcrumb-list li,
.inventory-breadcrumb-list a {
  color: #e5e7eb;
}

.inventory-breadcrumb-list li::after {
  content: "/";
  margin-left: 10px;
  opacity: 0.6;
}

.inventory-breadcrumb-list li:last-child::after {
  display: none;
}

/* ===============================
   PAGE LAYOUT
================================ */
.inventory-page {
  padding: 70px 0;
}

.inventory-layout {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 40px;
}

/* ===============================
   SIDEBAR
================================ */
.inventory-sidebar-inner {
  position: sticky;
  top: 110px;
  background: var(--fee-white);
  padding: 24px;
  border-radius: var(--fee-radius-lg);
  box-shadow: var(--fee-shadow-sm);
}

.inventory-nav-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 30px;
}

.inventory-nav-list a {
  padding: 20px 14px;
  border-radius: var(--fee-radius);
  font-weight: 500;
  color: var(--fee-dark);
  transition: all 0.3s ease;
}

.inventory-nav-list a:hover {
  background: rgba(37, 99, 235, 0.1);
  color: var(--fee-primary);
}

/* ===============================
   BUTTON
================================ */
.inventory-btn {
  display: block;
  text-align: center;
  padding: 12px 18px;
  font-weight: 600;
  border-radius: var(--fee-radius);
}

.inventory-btn-outline {
  border: 2px solid var(--fee-primary);
  color: var(--fee-primary);
}

.inventory-btn-outline:hover {
  background: var(--fee-primary);
  color: var(--fee-white);
}

/* ===============================
   CONTENT
================================ */
.inventory-content {
  background: var(--fee-white);
  padding: 40px;
  border-radius: var(--fee-radius-lg);
  box-shadow: var(--fee-shadow-md);
}

.inventory-intro {
  font-size: 16px;
  margin-bottom: 24px;
}

.inventory-section-title {
  font-size: 26px;
  font-weight: 700;
  margin-bottom: 28px;
  color: var(--fee-dark);
}

/* ===============================
   FEATURES
================================ */
.inventory-feature {
  margin-bottom: 42px;
}

.inventory-feature-title {
  font-size: 18px;
  font-weight: 600;
  color: var(--fee-dark);
  margin-bottom: 10px;
}

/* ===============================
   GALLERY
================================ */
.inventory-gallery {
  margin-top: 20px;
  background: var(--fee-bg);
  border-radius: var(--fee-radius);
  padding: 16px;
  text-align: center;
  box-shadow: var(--fee-shadow-sm);
}

.inventory-gallery img {
  max-width: 100%;
  border-radius: var(--fee-radius);
  transition: transform 0.4s ease;
  width: 300px;
}

.inventory-gallery img:hover {
  transform: scale(1.03);
}

.inventory-gallery-title {
  margin-top: 12px;
  font-weight: 600;
  color: var(--fee-dark);
}

.inventory-gallery-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}

/* ===============================
   FAQ
================================ */
.inventory-faq details {
  background: var(--fee-bg);
  padding: 18px 22px;
  border-radius: var(--fee-radius);
  margin-bottom: 14px;
  box-shadow: var(--fee-shadow-sm);
}

.inventory-faq summary {
  font-weight: 600;
  cursor: pointer;
  color: var(--fee-dark);
}

.inventory-faq p {
  margin-top: 10px;
  color: var(--fee-text);
}

/* ===============================
   RESPONSIVE
================================ */
@media (max-width: 992px) {
  .inventory-layout {
    grid-template-columns: 1fr;
  }

  .inventory-sidebar-inner {
    position: relative;
    top: auto;
  }

  .inventory-gallery-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 576px) {
  .inventory-hero {
    padding: 70px 0;
  }

  .inventory-content {
    padding: 24px;
  }
}


/*FINANCIAL ACCOUNTING */
/* =====================================
   GLOBAL WRAPS
===================================== */
.financial-mainContent {
  background: var(--fee-bg);
  color: var(--fee-text);
  line-height: 1.7;
}

.financial-sectional-padding {
  height: 80px;
}

/* =====================================
   BANNER
===================================== */
.financial-banner {
  position: relative;
  min-height: 320px;
  display: flex;
  align-items: center;
  text-align: center;
  background-size: cover;
  background-position: center;
  color: var(--fee-white);
  padding: 0px 50px;
   border-radius:20px;
  box-shadow: 10px 10px 3px rgb(179, 179, 179);
}

.financial-banner::after {
  content: "";
  position: absolute;
  inset: 0;
   border-radius:20px;
  background: linear-gradient(
    135deg,
    rgba(15, 23, 42, 0.85),
    rgba(37, 99, 235, 0.85)
  );
}

.financial-banner .container {
  position: relative;
  z-index: 2;
}

.financial-banner-title {
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 700;
  text-align: start;
  margin: 20px auto;
}

/* =====================================
   SECTION HEADINGS
===================================== */
.financial-section-heading {
  font-size: clamp(1.8rem, 3vw, 2.4rem);
  font-weight: 700;
  color: var(--fee-dark);
  margin-bottom: 30px;
}

/* =====================================
   INTRO SECTION
===================================== */
.financial-intro-section {
  background: var(--fee-white);
}

.financial-intro-text {
  font-size: 1.05rem;
  color: var(--fee-text);
}

/* =====================================
   FEATURE SECTIONS
===================================== */
.financial-features-section,
.financial-advanced-section,
.financial-benefits-section {
  background: var(--fee-white);
}

/* =====================================
   IMAGE BLOCKS
===================================== */
.financial-app-image {
  background: var(--fee-bg);
  border-radius: var(--fee-radius-lg);
  padding: 20px;
  box-shadow: var(--fee-shadow);
}

.financial-img-app {
  border-radius: var(--fee-radius);
  width: 100%;
}

/* =====================================
   LISTS (FEATURES / BENEFITS)
===================================== */
.financial-feature-list,
.financial-advanced-list,
.financial-benefits-list {
  list-style: none;
  padding: 0;
  margin: 30px 0px;
}

.financial-feature-list li,
.financial-advanced-list li,
.financial-benefits-list li {
  font-weight: 600;
  color: var(--fee-dark);
  position: relative;
  padding-left: 28px;
}

.financial-feature-list li::before,
.financial-advanced-list li::before,
.financial-benefits-list li::before {
  content: "✔";
  position: absolute;
  left: 0;
  top: 2px;
  color: var(--fee-primary);
  font-size: 0.9rem;
}

.financial-feature-list p,
.financial-advanced-list p {
  color: var(--fee-muted);
  margin-bottom: 18px;
  margin-left: 28px;
  font-size: 0.95rem;
}

/* =====================================
   BENEFITS SECTION
===================================== */
.financial-benefits-list li {
  margin-bottom: 14px;
  font-size: 0.95rem;
}

/* =====================================
   CALL TO ACTION
===================================== */
.financial-cta {
  background: linear-gradient(
    135deg,
    var(--fee-primary),
    var(--fee-primary-dark)
  );
  color: var(--fee-white);
  padding: 10px 30px;
  border-radius: 20px;
}

.financial-cta-title {
  font-size: clamp(1.6rem, 2.5vw, 2.2rem);
  font-weight: 700;
  margin-bottom: 20px;
}

.financial-cta-button {
  display: inline-block;
  padding: 14px 34px;
  border-radius: var(--fee-radius);
  background:var(--fee-bg);
  color: var(--fee-primary);
  font-weight: 600;
  text-decoration: none;
  transition: all 0.3s ease;
}

.financial-cta-button:hover {
  transform: translateY(-2px);
}

/* =====================================
   RESPONSIVE
===================================== */
@media (max-width: 991px) {
  .financial-sectional-padding {
    height: 60px;
  }

  .financial-banner {
    min-height: 260px;
  }
}

@media (max-width: 575px) {
  .financial-banner-title {
    font-size: 1.8rem;
  }

  .financial-cta-title {
    text-align: center;
  }

  .financial-cta-button {
    display: block;
    margin: 20px auto 0;
  }
}

/*POINT OF SALE */
/* ===============================
  BANNER
================================ */
.pointSale-banner {
  position: relative;
  background-size: cover;
  background-position: center;
  padding: 110px 50px;
  color: var(--fee-white);
}

.pointSale-banner::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 20px;
  box-shadow: 10px 10px 3px rgb(172, 171, 171);
  background: linear-gradient(
    120deg,
    rgba(15, 23, 42, 0.9),
    rgba(37, 99, 235, 0.6)
  );
}

.pointSale-banner-content {
  position: relative;
  z-index: 1;
}

.pointSale-banner-title {
  font-size: 2.8rem;
  font-weight: 700;
  margin-bottom: 12px;
}

.pointSale-breadcrumb ul {
  display: flex;
  gap: 8px;
  list-style: none;
  padding: 0;
  margin: 0;
}

.pointSale-breadcrumb a {
  color: var(--fee-white);
  opacity: 0.85;
  text-decoration: none;
}

.pointSale-breadcrumb a:hover {
  opacity: 1;
}

/* ===============================
  PAGE CONTENT
================================ */
.pointSale-content {
  padding: 70px 0;
}

/* ===============================
  SIDEBAR
================================ */
.pointSale-sidebar {
  background: var(--fee-white);
  border-radius: var(--fee-radius);
  box-shadow: var(--fee-shadow);
  padding: 22px;
}

.pointSale-nav {
  list-style: none;
  padding: 0;
  margin: 0;
}

.pointSale-nav li {
  margin-bottom: 12px;
}

.pointSale-nav a {
  display: block;
  padding: 10px 14px;
  border-radius: 10px;
  color: var(--fee-text);
  text-decoration: none;
  transition: var(--fee-transition);
}



.pointSale-cta-btn {
  background: var(--fee-primary);
  color: var(--fee-white) !important;
  text-align: center;
  font-weight: 600;
}

.pointSale-cta-btn:hover {
  background: var(--fee-primary-dark);
}

/* ===============================
  MAIN CONTENT
================================ */
.pointSale-intro {
  margin-bottom: 40px;
}

.pointSale-intro p {
  color: var(--fee-text);
  line-height: 1.7;
}

.pointSale-section-title {
  font-size: 2rem;
  font-weight: 700;
  color: var(--fee-dark);
  margin: 30px 0 20px;
}

.pointSale-subtitle {
  font-size: 1.2rem;
  font-weight: 600;
  color: var(--fee-dark);
  margin-bottom: 10px;
}

.pointSale-section {
  background: var(--fee-white);
  padding: 30px;
  border-radius: var(--fee-radius-lg);
  box-shadow: var(--fee-shadow);
  margin-bottom: 40px;
}

.pointSale-section p {
  color: var(--fee-text);
  line-height: 1.7;
}

/* ===============================
  GALLERY
================================ */
.pointSale-gallery,
.pointSale-gallery-grid {
  margin-top: 25px;
}

.pointSale-gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 20px;
}

.pointSale-gallery-card {
  background: var(--fee-white);
  border-radius: var(--fee-radius);
  overflow: hidden;
  box-shadow: var(--fee-shadow);
  transition: var(--fee-transition);
  text-align: center;
}

.pointSale-gallery-card img {
  width: 100%;
  display: block;
}

.pointSale-gallery-card figcaption {
  padding: 14px;
  font-weight: 600;
  color: var(--fee-dark);
}

.pointSale-gallery-card:hover {
  transform: translateY(-6px);
}

/* ===============================
  FAQ
================================ */
.pointSale-faq {
  margin-top: 60px;
}

.pointSale-accordion {
  display: grid;
  gap: 18px;
}

.pointSale-faq-item {
  background: var(--fee-white);
  border-radius: var(--fee-radius);
  box-shadow: var(--fee-shadow);
  padding: 2px 24px;
}

.pointSale-faq-item h6 {
  font-size: 1rem;
  font-weight: 600;
  color: var(--fee-dark);
  margin-bottom: 8px;
}

.pointSale-faq-item p {
  color: var(--fee-muted);
  line-height: 1.6;
}

/* ===============================
  RESPONSIVE
================================ */
@media (max-width: 991px) {
  .pointSale-banner-title {
    font-size: 2.2rem;
  }

  .pointSale-sidebar {
    margin-bottom: 30px;
  }
}
/*time table generations */
/* ===============================
   GLOBAL WRAPPERS
================================ */
.timeTable-page {
  color: var(--fee-text);
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.timeTable-section-padding {
  height: 80px;
}

/* ===============================
   BANNER
================================ */
.timeTable-banner {
  position: relative;
  padding: 80px 40px;
  border-radius: 20px;
   box-shadow: 10px 10px 3px rgb(172, 171, 171); 
  background: linear-gradient(
      135deg,
      rgba(37, 99, 235, 0.85),
      rgba(30, 64, 175, 0.85)
    ),
    url("../images/banner/timetable.jpg") center/cover no-repeat;
  color: var(--fee-white);
  text-align: center;
}

.timeTable-banner-title {
  font-size: clamp(28px, 4vw, 48px);
  font-weight: 800;
  text-align: start;
  line-height: 1.2;
}

/* ===============================
   SECTION HEADINGS
================================ */
.timeTable-section-heading {
  font-size: clamp(24px, 3vw, 36px);
  font-weight: 700;
  color: var(--fee-dark);
  margin-bottom: 25px;
}

.timeTable-description {
  font-size: 16px;
  line-height: 1.8;
  color: var(--fee-text);
}

/* ===============================
   FEATURE SECTIONS
================================ */
.timeTable-intro,
.timeTable-features,
.timeTable-features-secondary,
.timeTable-benefits {
  position: relative;
}

/* ===============================
   IMAGE BOX
================================ */
.timeTable-image-box {
  background: var(--fee-white);
  border-radius: var(--fee-radius-lg);
  padding: 20px;
  box-shadow: 0 18px 40px rgba(15, 23, 42, 0.08);
  transition: transform 0.35s ease, box-shadow 0.35s ease;
}

.timeTable-image-box:hover {
  transform: translateY(-6px);
  box-shadow: 0 28px 60px rgba(15, 23, 42, 0.15);
}

.timeTable-image {
  width: 100%;
  height: auto;
  border-radius: var(--fee-radius);
}

/* ===============================
   FEATURE LIST
================================ */
.timeTable-feature-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.timeTable-feature-list li {
  background: var(--fee-white);
  padding: 20px 22px;
  border-radius: var(--fee-radius);
  margin-bottom: 16px;
  box-shadow: 0 10px 28px rgba(15, 23, 42, 0.06);
  border-left: 4px solid var(--fee-primary);
  transition: all 0.3s ease;
}

.timeTable-feature-list li:hover {
  transform: translateX(6px);
  border-left-color: var(--fee-primary-dark);
}

.timeTable-feature-list h5 {
  font-size: 16px;
  font-weight: 700;
  margin-bottom: 6px;
  color: var(--fee-dark);
}

.timeTable-feature-list p {
  font-size: 14.5px;
  margin: 0;
  color: var(--fee-muted);
  line-height: 1.6;
}

/* ===============================
   BENEFITS LIST
================================ */
.timeTable-benefit-list {
  list-style: none;
  padding: 0;
  margin: 20px 0px;
}

.timeTable-benefit-list li {
  position: relative;
  padding-left: 34px;
  margin-bottom: 14px;
  font-size: 15px;
  color: var(--fee-text);
}

.timeTable-benefit-list li::before {
  content: "✓";
  position: absolute;
  left: 0;
  top: 0;
  color: var(--fee-primary);
  font-weight: 700;
}

/* ===============================
   CTA SECTION
================================ */
.timeTable-cta {
    display: flex;
    background: linear-gradient(135deg, var(--fee-primary), var(--fee-primary-dark));
    color: var(--fee-white);
    border-radius: 30px;
    /* padding: 0px 40px;*/
}

.timeTable-cta-title {
  font-size: clamp(22px, 3vw, 32px);
  font-weight: 700;
  margin-bottom: 20px;
  line-height: 1.3;
}

.timeTable-cta-button {
  display: inline-block;
  background: var(--fee-white);
  color: var(--fee-primary-dark);
  padding: 14px 34px;
  border-radius: 999px;
  font-weight: 600;
  text-decoration: none;
  transition: all 0.3s ease;
}

.timeTable-cta-button:hover {
  background: var(--fee-dark);
  color: var(--fee-white);
  transform: translateY(-2px);
}

/* ===============================
   RESPONSIVE
================================ */
@media (max-width: 991px) {
  .timeTable-section-padding {
    height: 60px;
  }

  .timeTable-feature-list li:hover {
    transform: none;
  }
}

@media (max-width: 576px) {
  .timeTable-banner {
    padding: 90px 0 70px;
  }

  .timeTable-image-box {
    padding: 14px;
  }
}

/*HOSTEL MANAGEMENT CSS */
/* =========================
   HOSTEL ROOT (inherits your existing :root colors)
========================= */
.hostel-container {
  max-width: 1200px;
  padding-inline: 1.25rem;
}

/* =========================
   BANNER
========================= */
.hostel-banner {
  position: relative;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  min-height: 320px;
  display: flex;
  align-items: center;
}

.hostel-banner::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 20px;
   box-shadow: 10px 10px 3px rgb(172, 171, 171); 
   background: linear-gradient(
      135deg,
      rgba(37, 99, 235, 0.85),
      rgba(30, 64, 175, 0.85)
    );
}

.hostel-banner-content {
  position: relative;
  color: var(--fee-white);
}

.hostel-banner-title {
  font-size: clamp(2rem, 4vw, 2.75rem);
  font-weight: 700;
  margin-bottom: 0.75rem;
}

.hostel-breadcrumb-list {
  display: flex;
  gap: 0.5rem;
  list-style: none;
  padding: 0;
  margin: 0;
  font-size: 0.9rem;
  color: #cbd5f5;
}

.hostel-breadcrumb-item a {
  color: #cbd5f5;
  text-decoration: none;
}

.hostel-breadcrumb-item::after {
  content: "/";
  margin-inline: 0.5rem;
}

.hostel-breadcrumb-item:last-child::after {
  display: none;
}

/* =========================
   INTRO SECTION
========================= */
.hostel-intro {
  padding: 4rem 0;
  background: var(--fee-bg);
}

.hostel-grid {
  display: grid;
  gap: 2rem;
}

.hostel-grid--two {
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}

.hostel-intro-title {
  font-size: 1.75rem;
  font-weight: 700;
  color: var(--fee-dark);
}

.hostel-divider {
  width: 60px;
  height: 4px;
  background: var(--fee-primary);
  border-radius: 10px;
  margin: 1rem 0;
}

.hostel-intro-subtitle {
  color: var(--fee-muted);
  line-height: 1.6;
  margin-bottom: 1.75rem;
}

/* =========================
   BUTTONS
========================= */
.hostel-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.7rem 1.6rem;
  border-radius: var(--fee-radius);
  font-weight: 600;
  text-decoration: none;
  transition: all 0.3s ease;
}

.hostel-button--outline {
  border: 2px solid var(--fee-primary);
  color: var(--fee-primary);
  background: transparent;
}

.hostel-button--outline:hover {
  background: var(--fee-primary);
  color: var(--fee-white);
}

.hostel-button--light {
  border: 2px solid var(--fee-white);
  color: var(--fee-white);
}

.hostel-button--light:hover {
  background: var(--fee-white);
  color: var(--fee-primary-dark);
}

/* =========================
   FEATURE CARDS
========================= */
.hostel-features {
  display: flex;
  align-items: center;
}

.hostel-feature-card {
  background: var(--fee-white);
  border-radius: var(--fee-radius-lg);
  padding: 1.75rem;
  display: flex;
  gap: 1rem;
  box-shadow: 0 10px 30px rgba(15, 23, 42, 0.08);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.hostel-feature-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 18px 45px rgba(15, 23, 42, 0.12);
}

.hostel-feature-icon {
  width: 52px;
  height: 52px;
  border-radius: 14px;
  background: linear-gradient(
    135deg,
    var(--fee-primary),
    var(--fee-primary-dark)
  );
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--fee-white);
  font-size: 1.3rem;
  flex-shrink: 0;
}

.hostel-feature-title {
  font-size: 1.05rem;
  font-weight: 600;
  margin-bottom: 0.25rem;
  color: var(--fee-dark);
}

.hostel-feature-text {
  font-size: 0.9rem;
  color: var(--fee-muted);
  line-height: 1.5;
}

/* =========================
   CTA SECTION
========================= */
.hostel-cta {
  padding: 3rem 0;
  background-size: cover;
  background-position: center;
  position: relative;
}

.hostel-cta::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 20px;
  box-shadow: 10px 10px 3px rgb(172, 171, 171); 
  background: linear-gradient(
      135deg,
      rgba(37, 99, 235, 0.85),
      rgba(30, 64, 175, 0.85)
    );
}

.hostel-cta-inner {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.5rem;
  justify-content: space-between;
}

.hostel-cta-title {
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--fee-white);
  max-width: 700px;
}

/* =========================
   CONTENT & GALLERY
========================= */
.hostel-content {
  padding: 4rem 0;
  background: var(--fee-white);
}

.hostel-content-main {
  max-width: 900px;
}

.hostel-content-text {
  color: var(--fee-text);
  line-height: 1.75;
  margin: 1.75rem 0;
}

.hostel-gallery {
  margin: 2rem 0;
}

.hostel-gallery-card {
  border-radius: var(--fee-radius-lg);
  overflow: hidden;
  background: var(--fee-white);
  box-shadow: 0 12px 35px rgba(15, 23, 42, 0.1);
}

.hostel-gallery-card img {
  width: 50%;
  display: block;
}

.hostel-gallery-caption {
  padding: 0.85rem 1rem;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--fee-dark);
  text-align: center;
  background: var(--fee-bg);
}

/* =========================
   RESPONSIVE TWEAKS
========================= */
@media (max-width: 768px) {
  .hostel-banner {
    min-height: 260px;
  }

  .hostel-cta-inner {
    flex-direction: column;
    align-items: flex-start;
  }

  .hostel-cta-title {
    font-size: 1.35rem;
  }
}

/*QUESTIONS PAPER GENRATIONS OLINE */
/* =========================
   ROOT VARIABLES
========================= */
:root {
  --quesPaper-primary: #2563eb;
  --quesPaper-primary-dark: #1e40af;
  --quesPaper-dark: #0f172a;
  --quesPaper-text: #374151;
  --quesPaper-muted: #64748b;
  --quesPaper-bg: #f8fafc;
  --quesPaper-white: #ffffff;
  --quesPaper-border: #e5e7eb;
  --quesPaper-radius: 14px;
  --quesPaper-radius-lg: 22px;
  --quesPaper-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
}

/* =========================
   GLOBAL
========================= */
body {
  color: var(--quesPaper-text);
}

.quesPaper-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

/* =========================
   BANNER
========================= */
.quesPaper-banner {
  background: linear-gradient(
      135deg,
      rgba(37, 99, 235, 0.92),
      rgba(30, 64, 175, 0.92)
    ),
    url("../images/banner/question-paper.jpg") center/cover no-repeat;
  padding: 90px 0;
  border-radius: 20px;
  box-shadow: 10px 10px 3px rgb(175, 175, 175);
  color: var(--quesPaper-white);
}

.quesPaper-banner-content {
  max-width: 800px;
}

.quesPaper-banner-title {
  font-size: 42px;
  font-weight: 700;
  margin-bottom: 12px;
}

.quesPaper-breadcrumb-list {
  display: flex;
  gap: 8px;
  list-style: none;
  padding: 0;
  margin: 0;
}

.quesPaper-breadcrumb-item {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.85);
}

.quesPaper-breadcrumb-item a {
  color: #e0e7ff;
  text-decoration: none;
}

.quesPaper-breadcrumb-item a:hover {
  text-decoration: underline;
}

/* =========================
   LAYOUT
========================= */
.quesPaper-content {
  padding: 70px 0;
}

.quesPaper-layout {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 40px;
}

/* =========================
   SIDEBAR
========================= */
.quesPaper-sidebar {
  position: relative;
}

.quesPaper-sidebar-nav {
  position: sticky;
  top: 100px;
  background: var(--quesPaper-white);
  border-radius: var(--quesPaper-radius-lg);
  box-shadow: var(--quesPaper-shadow);
  padding: 24px;
}

.quesPaper-sidebar-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.quesPaper-sidebar-item {
  margin-bottom: 14px;
}

.quesPaper-sidebar-item:last-child {
  margin-bottom: 0;
}

.quesPaper-sidebar-item a {
  display: block;
  padding: 12px 16px;
  border-radius: 10px;
  font-weight: 500;
  color: var(--quesPaper-dark);
  text-decoration: none;
  transition: all 0.3s ease;
}

.quesPaper-sidebar-item a:hover {
  background: rgba(37, 99, 235, 0.08);
  color: var(--quesPaper-primary);
}

/* =========================
   MAIN CONTENT
========================= */
.quesPaper-main {
  width: 100%;
}

.quesPaper-section {
  background: var(--quesPaper-white);
  border-radius: var(--quesPaper-radius-lg);
  box-shadow: var(--quesPaper-shadow);
  padding: 40px;
  border: 2px solid  rgba(37, 99, 235, 0.92);
}

.quesPaper-section-inner {
  max-width: 760px;
}

.quesPaper-text {
  font-size: 16px;
  line-height: 1.8;
  margin-bottom: 20px;
  color: var(--quesPaper-text);
}

.quesPaper-text:last-child {
  margin-bottom: 0;
}

/* =========================
   RESPONSIVE
========================= */
@media (max-width: 992px) {
  .quesPaper-layout {
    grid-template-columns: 1fr;
  }

  .quesPaper-sidebar-nav {
    position: relative;
    top: auto;
  }
}

@media (max-width: 576px) {
  .quesPaper-banner-title {
    font-size: 32px;
  }

  .quesPaper-section {
    padding: 28px;
  }
}

/*LIBRARY MANAGEMENT CSS*/
/* =========================
   LIBRARY ROOT EXTENSION
========================= */
:root {
  --library-primary: var(--fee-primary);
  --library-primary-dark: var(--fee-primary-dark);
  --library-dark: var(--fee-dark);
  --library-text: var(--fee-text);
  --library-muted: var(--fee-muted);
  --library-bg: var(--fee-bg);
  --library-white: var(--fee-white);
  --library-radius: var(--fee-radius);
  --library-radius-lg: var(--fee-radius-lg);
}

/* =========================
   GLOBAL
========================= */
.library-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

.library-section {
  margin-bottom: 48px;
}

.library-text {
  font-size: 15.5px;
  line-height: 1.75;
  color: var(--library-text);
  margin-bottom: 16px;
}

/* =========================
   BANNER
========================= */
.library-banner {
  position: relative;
  background-size: cover;
  background-position: center;
  padding: 110px 0 80px;
  color: var(--library-white);
}

.library-banner::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 20px;
  box-shadow: 10px 10px 3px rgb(192, 192, 192);
  background: linear-gradient(
    120deg,
    rgba(15, 23, 42, 0.85),
    rgba(37, 99, 235, 0.75)
  );
}

.library-banner-content {
  position: relative;
  z-index: 2;
}

.library-banner-title {
  font-size: clamp(28px, 4vw, 42px);
  font-weight: 700;
  margin-bottom: 12px;
}

/* =========================
   BREADCRUMB
========================= */
.library-breadcrumb-list {
  display: flex;
  gap: 8px;
  list-style: none;
  padding: 0;
  margin: 0;
  font-size: 14px;
}

.library-breadcrumb-item a {
  color: #dbeafe;
  text-decoration: none;
}

.library-breadcrumb-item {
  color: #bfdbfe;
}

/* =========================
   LAYOUT
========================= */
.library-content {
  background: var(--library-bg);
  padding: 70px 0;
}

.library-layout {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 40px;
}

/* =========================
   SIDEBAR
========================= */
.library-sidebar-sticky {
  position: sticky;
  top: 100px;
}

.library-sidebar-list {
  list-style: none;
  padding: 20px;
  margin: 0;
  background: var(--library-white);
  border-radius: var(--library-radius);
  box-shadow: 0 10px 30px rgba(15, 23, 42, 0.06);
}

.library-sidebar-item + .library-sidebar-item {
  margin-top: 10px;
}

.library-sidebar-item a {
  display: block;
  padding: 10px 14px;
  border-radius: 10px;
  text-decoration: none;
  font-size: 14.5px;
  font-weight: 500;
  color: var(--library-dark);
  transition: all 0.25s ease;
}

.library-sidebar-item a:hover {
  background: #eef2ff;
  color: var(--library-primary);
}

.library-sidebar-button {
  margin-top: 14px;
  text-align: center;
  font-weight: 600;
  background: transparent;
  border: 2px solid var(--library-primary);
  color: var(--library-primary);
}

.library-sidebar-button:hover {
  background: var(--library-primary);
  color: var(--library-white);
}

/* =========================
   MAIN CONTENT
========================= */
.library-main {
  background: var(--library-white);
  padding: 40px;
  border-radius: var(--library-radius-lg);
  box-shadow: 0 20px 40px rgba(15, 23, 42, 0.06);
}

/* =========================
   HEADINGS
========================= */
.library-section-title {
  font-size: 28px;
  font-weight: 700;
  color: var(--library-dark);
  margin-bottom: 22px;
}

.library-subtitle {
  font-size: 20px;
  font-weight: 600;
  color: var(--library-primary-dark);
  margin-bottom: 14px;
}

/* =========================
   IMAGE
========================= */
.library-image-wrap {
  margin-top: 28px;
  text-align: center;
}

.library-image {
  max-width: 100%;
  border-radius: 18px;
  box-shadow: 0 15px 35px rgba(15, 23, 42, 0.15);
}

/* =========================
   RESPONSIVE
========================= */
@media (max-width: 992px) {
  .library-layout {
    grid-template-columns: 1fr;
  }

  .library-sidebar-sticky {
    position: relative;
    top: auto;
  }

  .library-main {
    padding: 28px;
  }
}

@media (max-width: 576px) {
  .library-banner {
    padding: 80px 0 60px;
  }

  .library-section-title {
    font-size: 24px;
  }

  .library-subtitle {
    font-size: 18px;
  }
}

/*SYLLABUS BOOKLIST AND INFO DETAILS CSS*/
/* =========================
   ROOT VARIABLES
========================= */
:root {
  --syllabus-primary: #2563eb;
  --syllabus-primary-dark: #1e40af;
  --syllabus-dark: #0f172a;
  --syllabus-text: #374151;
  --syllabus-muted: #64748b;
  --syllabus-bg: #f8fafc;
  --syllabus-white: #ffffff;
  --syllabus-radius: 14px;
  --syllabus-radius-lg: 22px;
  --syllabus-shadow: 0 10px 30px rgba(15, 23, 42, 0.08);
}



.syllabus-container {
  max-width: 1200px;
  margin: auto;
  padding: 0 20px;
}

/* =========================
   BANNER
========================= */
.syllabus-banner {
  position: relative;
  padding: 90px 0;
  background-size: cover;
  background-position: center;
  color: var(--syllabus-white);
}

.syllabus-banner::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 20px;
  box-shadow: 10px 10px 3px rgb(163, 163, 163);
  background: linear-gradient(
    120deg,
    rgba(15, 23, 42, 0.85),
    rgba(37, 99, 235, 0.85)
  );
}

.syllabus-banner-content {
  position: relative;
  z-index: 2;
}

.syllabus-banner-title {
  font-size: 2.6rem;
  font-weight: 700;
  margin-bottom: 12px;
}

.syllabus-breadcrumb-list {
  display: flex;
  gap: 10px;
  list-style: none;
  padding: 0;
}

.syllabus-breadcrumb-list li,
.syllabus-breadcrumb-list a {
  color: #e5e7eb;
  font-size: 0.95rem;
  text-decoration: none;
}

/* =========================
   LAYOUT
========================= */
.syllabus-content {
  padding: 80px 0;
}

.syllabus-layout {
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: 40px;
}

/* =========================
   SIDEBAR
========================= */
.syllabus-sidebar {
  position: sticky;
  top: 100px;
}

.syllabus-sidebar-list {
  list-style: none;
  padding: 24px;
  background: var(--syllabus-white);
  border-radius: var(--syllabus-radius);
  box-shadow: var(--syllabus-shadow);
}

.syllabus-sidebar-list li + li {
  margin-top: 12px;
}

.syllabus-sidebar-list a {
  display: block;
  padding: 10px 14px;
  border-radius: 10px;
  color: var(--syllabus-text);
  text-decoration: none;
  font-weight: 500;
  transition: all 0.3s ease;
}

.syllabus-sidebar-list a:hover {
  background: var(--syllabus-primary);
  color: var(--syllabus-white);
}

.syllabus-sidebar-button {
  margin-top: 15px;
  text-align: center;
  background: transparent;
  border: 2px solid var(--syllabus-primary);
  color: var(--syllabus-primary);
  font-weight: 600;
}

/* =========================
   MAIN CONTENT
========================= */
.syllabus-main {
  background: var(--syllabus-white);
  padding: 40px;
  border-radius: var(--syllabus-radius-lg);
  box-shadow: var(--syllabus-shadow);
}

.syllabus-intro p {
  margin-bottom: 16px;
  font-size: 1.05rem;
}

/* =========================
   GALLERY
========================= */
.syllabus-gallery {
  margin: 50px 0;
}

.syllabus-gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 24px;
}

.syllabus-gallery-card {
  background: var(--syllabus-white);
  border-radius: var(--syllabus-radius);
  overflow: hidden;
  box-shadow: var(--syllabus-shadow);
  transition: transform 0.35s ease, box-shadow 0.35s ease;
}

.syllabus-gallery-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 18px 40px rgba(15, 23, 42, 0.15);
}

.syllabus-gallery-card img {
  width: 100%;
  display: block;
}

.syllabus-gallery-card figcaption {
  padding: 16px;
  font-weight: 600;
  text-align: center;
  color: var(--syllabus-dark);
}

/* =========================
   SECTIONS
========================= */
.syllabus-section {
  margin-top: 50px;
}

.syllabus-section h2 {
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--syllabus-dark);
  margin-bottom: 14px;
}

.syllabus-section p {
  margin-bottom: 14px;
}

.syllabus-list {
  padding-left: 20px;
}

.syllabus-list li {
  margin-bottom: 8px;
  position: relative;
}

.syllabus-list li::marker {
  color: var(--syllabus-primary);
}

/* =========================
   IMAGES
========================= */
.syllabus-image {
  display: block;
  max-width: 100%;
  margin: 30px auto;
  border-radius: var(--syllabus-radius);
  box-shadow: var(--syllabus-shadow);
}

/* =========================
   RESPONSIVE
========================= */
@media (max-width: 992px) {
  .syllabus-layout {
    grid-template-columns: 1fr;
  }

  .syllabus-sidebar {
    position: relative;
    top: auto;
  }

  .syllabus-main {
    padding: 30px;
  }
}

@media (max-width: 576px) {
  .syllabus-banner-title {
    font-size: 2rem;
  }

  .syllabus-main {
    padding: 24px;
  }
}
/* ================================
   EVENT MODULE
   Uses existing root colors
================================ */

/* ---------- Banner ---------- */
.event-banner {
  position: relative;
  border-radius: 20px;
  box-shadow: 10px 10px 3px rgb(192, 192, 192);
  background: linear-gradient(
    120deg,
    rgba(15, 23, 42, 0.85),
    rgba(37, 99, 235, 0.75)
  );
  padding:80px 0px;
  color: var(--fee-white);
}

.event-banner-image {
  background-size: cover;
  background-position: center;
}

.event-banner-title {
  font-size: clamp(1.8rem, 3vw, 2.6rem);
  font-weight: 700;
  line-height: 1.3;
  
}

/* ---------- Layout ---------- */
.event-container {
  max-width: 1200px;
  margin: 0 auto;
  padding-inline: 1rem;
}

.event-main {
  background: var(--fee-bg);
  padding: clamp(3rem, 6vw, 4.5rem) 0;
}

.event-section {
  margin-bottom: 3rem;
}

.event-section-center {
  text-align: center;
}

/* ---------- Headings ---------- */
.event-section-heading {
  font-size: clamp(1.6rem, 2.5vw, 2.1rem);
  font-weight: 700;
  color: var(--fee-dark);
  margin-bottom: 1.2rem;
}

.event-section-heading::after {
  content: "";
  display: block;
  width: 70px;
  height: 4px;
  background: var(--fee-primary);
  margin: 0.75rem auto 0;
  border-radius: 99px;
}

/* ---------- Intro Text ---------- */
.event-section-description {
  max-width: 900px;
  margin: 0 auto;
}

.event-section-description p {
  color: var(--fee-text);
  font-size: 1rem;
  line-height: 1.75;
}

/* ---------- Features Section ---------- */
.event-features {
  background: var(--fee-white);
  padding: clamp(3rem, 6vw, 5rem) 0;
}

.event-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 3rem;
  align-items: center;
}

/* ---------- Feature Content ---------- */
.event-feature-content {
  background: var(--fee-bg);
  padding: 2rem;
  border-radius: var(--fee-radius-lg);
  box-shadow: 0 20px 45px rgba(0, 0, 0, 0.06);
}

.event-feature-list {
  list-style: none;
  padding: 0;
  margin-bottom: 1rem;
}

.event-feature-item {
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--fee-primary-dark);
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.event-feature-item::before {
  content: "✔";
  color: var(--fee-primary);
  font-weight: 700;
}

.event-feature-description {
  color: var(--fee-text);
  font-size: 0.95rem;
  line-height: 1.7;
}

/* ---------- Image ---------- */
.event-feature-media {
  display: flex;
  justify-content: center;
}

.event-app-image {
  background: var(--fee-white);
  padding: 1.5rem;
  border-radius: var(--fee-radius-lg);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.08);
  transition: transform 0.35s ease, box-shadow 0.35s ease;
}

.event-app-image:hover {
  transform: translateY(-6px);
  box-shadow: 0 28px 60px rgba(0, 0, 0, 0.12);
}

.event-image {
  max-width: 100%;
  height: auto;
  display: block;
}

/* ---------- Responsive ---------- */
@media (max-width: 768px) {
  .event-feature-content {
    padding: 1.5rem;
  }

  .event-section-description p {
    font-size: 0.95rem;
  }
}

/*FOOTER BASE */
/* ===========================
   ROOT / BASE
=========================== */
.footer-main {
  background: linear-gradient(135deg, #0f172a, #020617);
  color: #e5e7eb;
  padding: 70px 0 30px;
  font-family: "Inter", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
}

.footer-container {
  max-width: 1320px;
  margin: auto;
}

/* ===========================
   TOP CONTENT
=========================== */
.footer-content-row {
  display: flex;
  flex-wrap: wrap;
  gap: 40px;
}

/* Logo */
.footer-logo img {
  max-width: 120px;
  transition: transform 0.3s ease;
}

.footer-logo img:hover {
  transform: scale(1.05);
}

/* Address */
.footer-address {
  font-size: 14px;
  line-height: 1.8;
  color: #cbd5f5;
}

.footer-address strong {
  color: #ffffff;
  font-weight: 600;
}

/* ===========================
   LINKS
=========================== */
.footer-links {
  flex: 1;
}

.footer-links-title {
  font-size: 18px;
  font-weight: 600;
  color: #ffffff;
  margin-bottom: 16px;
  position: relative;
}

.footer-links-title::after {
  content: "";
  width: 40px;
  height: 3px;
  background: #2563eb;
  display: block;
  margin-top: 8px;
  border-radius: 10px;
}

/* ===========================
   ROW-WISE FOOTER LINKS
=========================== */

.footer-links-list {
  list-style: none;
  padding: 0;
  margin: 0;

  display: flex;
  flex-wrap: wrap;
  gap: 10px 24px; /* row gap | column gap */
}

.footer-links-list li {
  width: auto; /* important for row flow */
}

.footer-links-list li a {
  color: #c7d2fe;
  text-decoration: none;
  font-size: 14px;
  white-space: nowrap;
  transition: all 0.25s ease;
}

.footer-links-list li a:hover {
  color: #ffffff;
  padding-left: 6px;
}


/* ===========================
   DIVIDER
=========================== */
.footer-divider {
  border: none;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  margin: 40px 0 25px;
}

/* ===========================
   BOTTOM BAR
=========================== */
.footer-bottom-row {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 20px;
}

.footer-copyright p {
  margin: 0;
  font-size: 14px;
  color: #cbd5f5;
}

.footer-copyright a {
  color: inherit;
  text-decoration: none;
}

/* ===========================
   SOCIAL ICONS
=========================== */
.footer-social {
  display: flex;
  justify-content: flex-end;
}

.footer-social-list {
  display: flex;
  gap: 14px;
}

.footer-social-icon {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: all 0.3s ease;
  font-size: 16px;
  color: #e5e7eb;
}

.footer-social-icon:hover {
  background: #2563eb;
  transform: translateY(-4px);
  color: #ffffff;
}

/* ===========================
   RESPONSIVE
=========================== */
@media (max-width: 991px) {
  .footer-content-row {
    gap: 30px;
  }

  .footer-links-list {
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  }
}

@media (max-width: 767px) {
  .footer-main {
    padding: 50px 20px 25px;
  }

  .footer-content-row {
    flex-direction: column;
  }

  .footer-logo,
  .footer-address,
  .footer-links {
    text-align: center;
  }

  .footer-links-title::after {
    margin-left: auto;
    margin-right: auto;
  }

  .footer-links-list {
    grid-template-columns: 1fr 1fr;
  }

  .footer-bottom-row {
    flex-direction: column;
    text-align: center;
  }

  .footer-social {
    justify-content: center;
  }
}

@media (max-width: 480px) {
  .footer-links-list {
    grid-template-columns: 1fr;
  }
}


/*BENEFITS OF SCHOLARSYS */
    .benefits {
  font-family: system-ui, sans-serif;
  color: #1f2937;
}

.benefits-container {
  max-width: 1200px;
  margin: auto;
  padding: 60px 20px;
 
}

.benefits-block {
  padding: 40px 0;
}

.benefits-highlight {
  background: #fff3e8;
}

.benefits-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 40px;
  align-items: center;
}

.benefits-grid.reverse {
  direction: rtl;
}

.benefits-grid.reverse > * {
  direction: ltr;
}

.benefits-title {
  font-size: 28px;
  font-weight: 700;
  margin-bottom: 10px;
}

.benefits-eyebrow {
  color: #f97316;
  font-weight: 600;
  letter-spacing: 1px;
  margin-bottom: 8px;
}

.benefits-subtitle {
  font-size: 18px;
  color: #374151;
  margin-bottom: 15px;
}

.benefits-content p {
  line-height: 1.7;
  margin-bottom: 14px;
}

.benefits-list {
  padding-left: 18px;
}

.benefits-list li {
  margin-bottom: 8px;
}

.benefits-media img {
  width: 100%;
  max-width: 480px;
  display: block;
  margin: auto;
}

.benefits-cta {
  background: #2563eb;
  color: #fff;
}

.benefits-btn {
  display: inline-block;
  background: #fff;
  color: #2563eb;
  padding: 12px 24px;
  border-radius: 6px;
  font-weight: 600;
  text-decoration: none;
  margin-top: 10px;
}

@media (max-width: 768px) {
  .benefits-grid {
    grid-template-columns: 1fr;
  }
}
/*DEMO SCHOLARSYS Login css*/

/* Login card */
#LoginPage {
	margin: 0px auto;
    width: 360px;
    background: #fff;
    padding: 30px 28px 35px;
    border-radius: 14px;
    box-shadow: 0 20px 40px rgba(0,0,0,0.18);
    animation: fadeUp 0.6s ease;
}

/* Animation on load */
@keyframes fadeUp {
    from {
        opacity: 0;
        transform: translateY(25px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Form layout */
#LoginPage form p {
    margin-bottom: 22px;
    position: relative;
}

/* Labels */
#LoginPage label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    margin-bottom: 6px;
    color: #444;
    transition: color 0.3s ease;
}

/* Input fields */
#LoginPage .field {
    width: 100%;
    padding: 12px 14px;
    border-radius: 8px;
    border: 1.8px solid #d1d5db;
    font-size: 14px;
    outline: none;
    transition: all 0.3s ease;
    background: #fafafa;
}

/* Focus interaction */
#LoginPage .field:focus {
    border-color: #667eea;
    background: #fff;
    box-shadow: 0 0 0 4px rgba(102,126,234,0.15);
}

/* Change label color on focus */
#LoginPage .field:focus + label,
#LoginPage .field:focus ~ label {
    color: #667eea;
}

/* Placeholder animation */
#LoginPage .field::placeholder {
    color: #9ca3af;
    transition: opacity 0.3s ease;
}

#LoginPage .field:focus::placeholder {
    opacity: 0.5;
}

/* Button wrapper */
#LoginPage .signin {
    margin-top: 10px;
}

/* Login button */
#btnLogin {
    width: 100%;
    padding: 13px;
    border: none;
    border-radius: 10px;
    background: linear-gradient(135deg, #667eea, #764ba2);
    color: #fff;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.35s ease;
    box-shadow: 0 10px 22px rgba(102,126,234,0.35);
}

/* Hover effect */
#btnLogin:hover {
    transform: translateY(-2px);
    box-shadow: 0 14px 28px rgba(102,126,234,0.45);
}

/* Click effect */
#btnLogin:active {
    transform: translateY(0);
    box-shadow: 0 8px 18px rgba(102,126,234,0.3);
}

/* Required field hint */
.ImRequired {
    position: relative;
}

.ImRequired:focus {
    border-color: #4f46e5;
}

/* Responsive */
@media (max-width: 420px) {
    #LoginPage {
        width: 90%;
        padding: 24px;
    }
}