/* ========================================
   HOMEPAGE STYLES
   Extracted from inline CSS in index.php
   ======================================== */

/* Submit Button */
#fbsubmit {
    margin-bottom: 25px;
    background-color: #ffd223 !important;
    margin-top: 20px;
    width: 200px;
}

/* Sections */
.solid {
    margin-top: -60px !important;
}

/* Reading Material Cards */
.home_page_reading_material .card-content img {
    height: 150px;
}

.home_page_reading_material .card-content {
    padding: 0px;
}

.home_page_reading_material .card-content a {
    padding: 0px;
    line-height: 1;
}

/* Important Links */
.home_page_imp_links .card .card-image .card-title {
    position: unset;
}

.home_page_imp_links .card .card-image img:hover {
    padding: 20px 20px 0px 20px;
}

.home_page_imp_links .card .card-image img {
    transition: all 0.2s ease;
}

/* Registration Form Styles */
#student_form .input-field,
#school_form .input-field {
    margin-top: 0.25rem;
    margin-bottom: 0.25em;
}

#student_form .dropdown-content li>a,
.dropdown-content li>span {
    padding: 8px 16px;
    font-size: 13px;
}

.dropdown-content li>a,
.dropdown-content li>span {
    font-size: 12px;
    line-height: 0px;
}

/* Input Fields */
input:not([type]),
input[type=text]:not(.browser-default),
input[type=password]:not(.browser-default),
input[type=email]:not(.browser-default),
input[type=url]:not(.browser-default),
input[type=time]:not(.browser-default),
input[type=date]:not(.browser-default),
input[type=datetime]:not(.browser-default),
input[type=datetime-local]:not(.browser-default),
input[type=tel]:not(.browser-default),
input[type=number]:not(.browser-default),
input[type=search]:not(.browser-default),
textarea.materialize-textarea {
    font-size: 13px;
    background-color: transparent;
    border: none;
    border-bottom: 1px solid #9e9e9e;
    border-radius: 0;
    outline: none;
    height: 2rem !important;
}

.input-field>label:not(.label-icon).active {
    display: none;
}

.input-field>label:not(.label-icon).active {
    top: 48px;
    -webkit-transform: translateY(-11px) scale(0.8) !important;
}

/* Input Focus States */
input:not([type]):focus.invalid ~ label,
input[type=text]:not(.browser-default):focus.invalid ~ label,
input[type=password]:not(.browser-default):focus.invalid ~ label,
input[type=email]:not(.browser-default):focus.invalid ~ label,
input[type=url]:not(.browser-default):focus.invalid ~ label,
input[type=time]:not(.browser-default):focus.invalid ~ label,
input[type=date]:not(.browser-default):focus.invalid ~ label,
input[type=datetime]:not(.browser-default):focus.invalid ~ label,
input[type=datetime-local]:not(.browser-default):focus.invalid ~ label,
input[type=tel]:not(.browser-default):focus.invalid ~ label,
input[type=number]:not(.browser-default):focus.invalid ~ label,
input[type=search]:not(.browser-default):focus.invalid ~ label,
textarea.materialize-textarea:focus.invalid ~ label {
    color: #F44336;
    top: 15px !important;
}

input:not([type]):focus:not([readonly])+label,
input[type=text]:not(.browser-default):focus:not([readonly])+label,
input[type=password]:not(.browser-default):focus:not([readonly])+label,
input[type=email]:not(.browser-default):focus:not([readonly])+label,
input[type=url]:not(.browser-default):focus:not([readonly])+label,
input[type=time]:not(.browser-default):focus:not([readonly])+label,
input[type=date]:not(.browser-default):focus:not([readonly])+label,
input[type=datetime]:not(.browser-default):focus:not([readonly])+label,
input[type=datetime-local]:not(.browser-default):focus:not([readonly])+label,
input[type=tel]:not(.browser-default):focus:not([readonly])+label,
input[type=number]:not(.browser-default):focus:not([readonly])+label,
input[type=search]:not(.browser-default):focus:not([readonly])+label,
textarea.materialize-textarea:focus:not([readonly])+label {
    top: 12px !important;
    display: none !important;
}

.input-field.col .prefix ~ label,
.input-field.col .prefix ~ .validate ~ label {
    top: 1px !important;
}

#student_form .input-field,
#school_form .input-field {
    margin-top: 0.25rem !important;
    background-color: #fff;
    margin-bottom: 0.25em;
    padding: 0px 10px 0px 11px;
    margin-left: 32px;
}

.white-text {
    padding: 10px 10px 5px 15px;
    line-height: 1em;
}

.input-field .prefix {
    position: absolute;
    font-size: 1.51rem;
}

/* Tabs */
.tabs .indicator {
    background-color: #ffd223;
}

.tabs .tab a {
    color: #000;
    font-size: 14px;
    text-transform: none;
}

.tabs .tab a:hover,
.tabs .tab a.active {
    background-color: #ffd223 !important;
    color: #000 !important;
    font-weight: 700 !important;
    font-size: 14px !important;
}

.tabsdiv.col.s6 {
    background-color: #ffd223 !important;
    color: #000 !important;
    font-weight: 700 !important;
    font-size: 14px !important;
    padding: 15px;
    text-align: center;
    border: 1px solid #efefef;
}

.tabsdiv.col.s6:hover {
    background-color: #fff !important;
    color: #000 !important;
    font-weight: 700 !important;
    font-size: 14px !important;
    padding: 15px;
    text-align: center;
    border: 1px solid #efefef;
}

/* ========================================
   SERVICE CARDS (Consolidated & Optimized)
   ======================================== */

/* Base Service Card Styles */
.service,
.service_1,
.service_2,
.service_3,
.service_4,
.service_5,
.service_6,
.service_7 {
    height: 300px;
    box-shadow: 0 0 13px rgba(0, 0, 0, 0.1);
    padding: 0 10%;
    position: relative;
    text-align: center;
}

/* Service Card Bottom Border (Color Variants) */
.service::before {
    background: #ffd223 none repeat scroll 0 0;
    bottom: 0;
    content: "";
    height: 5px;
    left: 0;
    position: absolute;
    width: 100%;
    box-shadow: 8px 0 10px rgba(0, 0, 0, 0.2);
}

.service_1::before {
    background: #f5594e none repeat scroll 0 0;
    bottom: 0;
    content: "";
    height: 5px;
    left: 0;
    position: absolute;
    width: 100%;
    box-shadow: 8px 0 10px rgba(0, 0, 0, 0.2);
}

.service_2::before {
    background: #68b9d8 none repeat scroll 0 0;
    bottom: 0;
    content: "";
    height: 5px;
    left: 0;
    position: absolute;
    width: 100%;
    box-shadow: 8px 0 10px rgba(0, 0, 0, 0.2);
}

.service_3::before {
    background: #b1c642 none repeat scroll 0 0;
    bottom: 0;
    content: "";
    height: 5px;
    left: 0;
    position: absolute;
    width: 100%;
    box-shadow: 8px 0 10px rgba(0, 0, 0, 0.2);
}

.service_4::before {
    background: #ffd223 none repeat scroll 0 0;
    bottom: 0;
    content: "";
    height: 5px;
    left: 0;
    position: absolute;
    width: 100%;
    box-shadow: 8px 0 10px rgba(0, 0, 0, 0.2);
}

.service_5::before {
    background: #f5594e none repeat scroll 0 0;
    bottom: 0;
    content: "";
    height: 5px;
    left: 0;
    position: absolute;
    width: 100%;
    box-shadow: 8px 0 10px rgba(0, 0, 0, 0.2);
}

.service_6::before {
    background: #68b9d8 none repeat scroll 0 0;
    bottom: 0;
    content: "";
    height: 5px;
    left: 0;
    position: absolute;
    width: 100%;
    box-shadow: 8px 0 10px rgba(0, 0, 0, 0.2);
}

.service_7::before {
    background: #b1c642 none repeat scroll 0 0;
    bottom: 0;
    content: "";
    height: 5px;
    left: 0;
    position: absolute;
    width: 100%;
    box-shadow: 8px 0 10px rgba(0, 0, 0, 0.2);
}

/* Service Card Icons */
.service .service__icon,
.service_1 .service__icon,
.service_2 .service__icon,
.service_3 .service__icon,
.service_4 .service__icon,
.service_5 .service__icon,
.service_6 .service__icon,
.service_7 .service__icon {
    background: #fff none repeat scroll 0 0;
    border-radius: 100%;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    height: 85px;
    left: 50%;
    line-height: 85px;
    margin: auto;
    position: absolute;
    text-align: center;
    top: -43px;
    transform: translateX(-50%);
    width: 85px;
    -webkit-transition: 0.3s;
    -moz-transition: 0.3s;
    -ms-transition: 0.3s;
    -o-transition: 0.3s;
    transition: 0.3s;
}

/* Service Card Details */
.service .service__details,
.service_1 .service__details,
.service_2 .service__details,
.service_3 .service__details,
.service_4 .service__details,
.service_5 .service__details,
.service_6 .service__details,
.service_7 .service__details {
    padding-bottom: 38px;
    padding-top: 62px;
}

.service .service__details h6 a,
.service_1 .service__details h6 a,
.service_2 .service__details h6 a,
.service_3 .service__details h6 a,
.service_4 .service__details h6 a,
.service_5 .service__details h6 a,
.service_6 .service__details h6 a,
.service_7 .service__details h6 a {
    color: #000;
    display: block;
    font-size: 17px;
    font-weight: 700;
    margin-bottom: 21px;
}

.service .service__details p,
.service_1 .service__details p,
.service_2 .service__details p,
.service_3 .service__details p,
.service_4 .service__details p,
.service_5 .service__details p,
.service_6 .service__details p,
.service_7 .service__details p {
    color: #000;
    line-height: 20px;
}

/* Service Card Buttons */
.service .service__btn {
    margin-top: 19px;
}

.service_1 .service__btn,
.service_4 .service__btn,
.service_6 .service__btn,
.service_7 .service__btn {
    margin-top: 28px;
}

.service_2 .service__btn,
.service_5 .service__btn {
    margin-top: 28px;
}

.service_3 .service__btn {
    margin-top: -5px;
}

/* Service Button Style */
.dcare__btn {
    transform: perspective(1px) translateZ(0px);
    transition-duration: 0.5s;
    background: #fe5629 none repeat scroll 0 0;
    box-shadow: 0 0 1px transparent;
    border-radius: 5px;
    color: #fff;
    cursor: pointer;
    display: inline-block;
    font-size: 16px;
    font-weight: 700;
    height: 48px;
    line-height: 48px;
    overflow: hidden;
    padding: 0 24px;
    position: relative;
    text-transform: capitalize;
    z-index: 2;
}

/* ========================================
   CAROUSEL STYLES
   ======================================== */

.carousel .carousel-item {
    left: 263px !important;
    visibility: hidden;
    width: 259px;
    height: 260px;
}

.carousel .carousel-item>img:hover {
    width: 100%;
    opacity: 3;
}

.carousel-item {
    position: relative;
    height: 100%;
    width: auto;
}

.img__description {
    font-size: 14px;
    position: absolute;
    top: -15px;
    bottom: 0;
    left: 0;
    padding: 25px;
    right: 0;
    width: 259px;
    height: 260px;
    background: #ffd223;
    color: #000;
    visibility: hidden;
    opacity: 0;
    transition: opacity .2s, visibility .2s;
}

.carousel-item:hover .img__description {
    visibility: visible;
    opacity: 1;
}

div#square a {
    color: #3dbdb8 !important;
    text-align: center;
    margin-left: 222px;
    position: relative;
    z-index: 1;
}

#square {
    margin-top: -42px;
}

/* ========================================
   RESPONSIVE STYLES
   ======================================== */

/* Tablet (600px - 767px) */
@media screen and (min-width:600px) and (max-width:767px) {
    .row .col.m8 {
        width: 51%;
    }

    .row .col.m4 {
        width: 49%;
    }

    .tabs {
        overflow-x: hidden;
    }
}

/* Medium Screens (768px - 1199px) */
@media screen and (min-width:768px) and (max-width:1199px) {
    .row .col.s6 {
        width: 50%;
    }
}

/* Mobile (max-width: 768px) */
@media screen and (max-width: 768px) {
    .droopmenu-header,
    .droopmenu-mclose,
    .droopmenu-navbar,
    .droopmenu-offcanvas .droopmenu-nav {
        background: #fff;
    }

    .droopmenu-toggle {
        background-color: #000 !important;
    }

    li.droopmenu-parent .material-icons {
        display: none;
    }

    .droopmenu .droopmenu-tabheader {
        background-color: #26a69a;
    }

    .droopmenu .droopmenu-tabheader.droopmenu-tab-active {
        background: #ffd223;
        color: #000;
    }

    .droopmenu .dm-block-title,
    .droopmenu .droopmenu-content p,
    .droopmenu li li:hover>a,
    .droopmenu li ul li a,
    .droopmenu-col h4 {
        font-weight: 400 !important;
        font-size: 1em !important;
        color: #000;
        margin-bottom: 6px;
    }

    ul.droopmenu-col.droopmenu-col3 h5 {
        font-size: 20px;
        color: #8a8585;
        font-weight: 600;
        line-height: inherit;
    }

    .col.s4 {
        width: 100% !important;
    }

    .aboutclass {
        margin-top: 332px;
    }

    #register {
        margin-right: 12px;
        background-color: #71dad4 !important;
        border-radius: 3em;
        border: none;
        position: absolute;
        right: 0;
        z-index: 999;
        margin-top: -45px;
    }

    .service {
        margin-top: 60px;
    }

    .service_1 {
        margin-top: 65px;
        margin-bottom: 65px;
    }

    .service_3 {
        margin-top: 65px;
        margin-bottom: 65px;
    }

    .service_5 {
        margin-top: 65px;
        margin-bottom: 65px;
    }

    .service_7 {
        margin-top: 65px;
    }

    .carousel {
        height: 230px;
    }

    #fbsubmit {
        margin-left: 23.666667%;
    }

    .dropdown-content li>span {
        line-height: unset;
    }
}

/* Desktop (min-width: 768px) */
@media screen and (min-width: 768px) {
    .center-align {
        margin-top: 60px;
    }

    #sogeid {
        margin-top: 0px;
    }

    #register {
        background-color: #71dad4 !important;
        border-radius: 3em;
        border: none;
        position: absolute;
        right: 0;
        margin: 10px 26px;
        z-index: 1;
        margin-top: 66px;
    }

    .slider-main .sl-slider-wrapper {
        position: relative;
        width: 65%;
        height: 65%;
        top: 180px;
        left: 0;
    }

    .sl-slider {
        position: relative;
        top: 0;
        left: 0;
    }

    .sl-slide,
    .sl-slides-wrapper,
    .sl-slide-inner {
        position: relative;
    }
}

/* Landscape Mobile (320px - 768px, landscape) */
@media screen and (min-width:320px) and (max-width:768px) and (orientation:landscape) {
    #fbsubmit {
        width: 53%;
    }

    .service_3 {
        margin-top: 0px;
    }

    .service_5 {
        margin-top: 0px;
    }

    .service_7 {
        margin-top: 0px;
    }

    .row .col.m3 {
        width: 50%;
    }

    div#slider {
        margin-top: -55px;
    }

    .aboutclass {
        margin-top: -74px;
    }

    .col.s12.m4.l12.solid {
        width: 100%;
    }
}

/* Tablet and Up (min-width: 768px) */
@media only screen and (min-width: 768px) {
    #table-cont {
        overflow: hidden !important;
    }

    .carousel {
        height: 220px;
    }
}

/* Mobile Only (max-width: 768px) */
@media only screen and (max-width: 768px) {
    table.centered thead tr th {
        padding: 15px 18px;
    }

    #table-cont {
        overflow-x: scroll;
    }

    #regyousch {
        width: 185px;
    }

    #mainsogeid {
        margin-bottom: 113px;
    }

    .carousel {
        width: 87%;
    }
}

/* Syllabus Table */
#sylla_front_id {
    margin-top: 40px;
}