/*-----------------------------------------------------------------------------------

    Template Name: Eduhome - Educational HTML Template
    Template URI: 
    Description: This is html5 template
    Author: HasTech
    Author URI: 
    Version: 1.0

-----------------------------------------------------------------------------------
    
    CSS INDEX
    ===================
	
    1. Default CSS
    2. Header CSS
    3. Slider CSS
    4. Notice CSS
    5. Choose CSS
    6. Courses CSS
    7. Event CSS
    8. Testimonial CSS
    9. Blog CSS
    10. Subscribe CSS
    11. Scrollup CSS
    12. Footer CSS
    13. Service CSS
    14. About CSS
    15. Teacher CSS
    16. Contact CSS
    17. Login CSS
    18. Register CSS

-----------------------------------------------------------------------------------*/

/*----------------------------------------*/
/*  1. Default CSS
/*----------------------------------------*/
/*@import url('https://fonts.googleapis.com/css?family=Open+Sans:400,600,700,800');

body {
    color: #606060;
    font-size: 0.875rem;*/ /* 14px */
    /*font-style: normal;
    font-weight: 400;
    line-height: normal;
    font-family: 'Poppins', sans-serif;
}*/
@import url('https://fonts.googleapis.com/css?family=Open+Sans:400,600,700,800&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;600;700;800&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Mulish:wght@400;600;700;800&display=swap');

body {
    color: #606060;
    font-size: 0.875rem; /* 14px */
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    font-family: 'Poppins', sans-serif;
}

.clear {
    clear: both
}

.fix {
    overflow: hidden
}

.block {
    display: block
}

img {
    max-width: 100%;
    -webkit-transition: all 0.3s ease-out 0s;
    transition: all 0.3s ease-out 0s;
    height: auto;
}

h1, h2, h3, h4, h5, h6 {
    font-weight: 700;
    margin: 0;
    padding: 0
}

a {
    text-decoration: none;
    -webkit-transition: all 0.3s ease-out 0s;
    transition: all 0.3s ease-out 0s;
}

    a:focus {
        text-decoration: none;
    }

    a:focus,
    a:hover {
        color: #BBA687;
        text-decoration: none;
    }

    a:active, a:hover {
        outline: 0 none;
    }

a,
button,
input {
    outline: medium none;
    color: #606060;
    -webkit-transition: all 0.3s ease 0s;
    transition: all 0.3s ease 0s
}

button {
    border: 0
}

h1 a, h2 a, h3 a, h4 a, h5 a, h6 a {
    color: inherit
}

label {
    font-size: 0.9375rem; /* 15px */
    font-weight: 400;
    color: #606060;
}

*::-moz-selection {
    background: #b3d4fc;
    color: #fff;
    text-shadow: none;
}

::-moz-selection {
    color: #fff;
    background: #b3d4fc;
    text-shadow: none;
}

::selection {
    background: #b3d4fc;
    text-shadow: none;
    color: #fff;
}

.browserupgrade {
    margin: 0.2em 0;
    background: #ccc;
    color: #000;
    padding: 0.2em 0;
}

.mark, mark {
    background: #4fc1f0 none repeat scroll 0 0;
    color: #ffffff;
    font-weight: 600;
}

.f-left {
    float: left
}

.f-right {
    float: right
}

p {
    font-size: 0.875rem; /* 14px */
    line-height: 24px;
    color: #666666;
    font-family: 'Poppins', sans-serif;
}

/*ul {
    list-style: outside none none;
    margin: 0;
    padding: 0
}*/

::-webkit-input-placeholder {
    color: #969696;
}

::-moz-placeholder {
    color: #969696;
    opacity: 1;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
}

:-ms-input-placeholder {
    color: #969696;
}

:-moz-placeholder {
    color: #969696;
}

.bg-light {
    background: #FAFAFA
}

.default-btn {
    /* color: #fff;*/
    color: #000;
    display: inline-block;
    /*font-family: 'Poppins', sans-serif;*/
    font-family: 'Poppins', sans-serif;
    font-size: 1rem; /* 16px */
    font-weight: 700;
    overflow: hidden;
    padding: 8px 25px 9px;
    position: relative;
    text-transform: uppercase;
    z-index: 9;
    background: #BBA687;
    border-radius: 6px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.12);
}






/*    .default-btn:hover {
        color: #BBA687;
        background: #fff
    }*/

    .default-btn:hover {
        color: #fff;
        background: #000
    }

.banner-btn span {
    transition: all 0.3s ease 0s;
}

input,
select,
textarea {
    -webkit-transition: all 0.5s ease-out 0s;
    transition: all 0.5s ease-out 0s;
}

.banner-area {
    background: rgba(0, 0, 0, 0) url("../img/banner/banner.jpg") no-repeat scroll center center / cover;
    position: relative;
    width: 100%;
    z-index: 1;
}

.banner-content {
    padding: 132px 0 134px;
}

    .banner-content h2 {
        font-size: 2.5rem; /* 40px */
        color: #fff;
        font-family: 'Poppins', sans-serif;
        font-weight: 700;
        text-transform: uppercase;
        z-index: 1;
        position: relative;
    }

.banner-breadcrumb ul li {
    display: inline-block;
    padding: 30px 0;
}

    .banner-breadcrumb ul li a, .banner-breadcrumb ul li {
        font-size: 0.875rem; /* 14px */
        color: #fff;
        font-weight: 600;
        font-family: 'Poppins', sans-serif;
        font-style: italic;
        text-transform: capitalize;
        -webkit-transition: all 0.5s ease 0s;
        -o-transition: all 0.5s ease 0s;
        transition: all 0.5s ease 0s;
    }

        .banner-breadcrumb ul li:hover a {
            color: #471A72
        }
/*************************
     Basic margin padding
*************************/
.m-0 {
    margin-top: 0;
    margin-right: 0;
    margin-bottom: 0;
    margin-left: 0;
}

.p-0 {
    padding-top: 0;
    padding-right: 0;
    padding-bottom: 0;
    padding-left: 0;
}
/*************************
        Margin top
*************************/
.mt-0 {
    margin-top: 0
}

.mt-10 {
    margin-top: 10px
}

.mt-15 {
    margin-top: 15px
}

.mt-20 {
    margin-top: 20px
}

.mt-23 {
    margin-top: 23px
}

.mt-25 {
    margin-top: 25px
}

.mt-30 {
    margin-top: 30px
}

.mt-35 {
    margin-top: 35px
}

.mt-40 {
    margin-top: 40px
}

.mt-45 {
    margin-top: 45px
}

.mt-50 {
    margin-top: 50px
}

.mt-55 {
    margin-top: 55px
}

.mt-58 {
    margin-top: 58px
}

.mt-60 {
    margin-top: 60px
}

.mt-65 {
    margin-top: 65px
}

.mt-70 {
    margin-top: 70px
}

.mt-75 {
    margin-top: 75px
}

.mt-80 {
    margin-top: 80px
}

.mt-85 {
    margin-top: 85px
}

.mt-90 {
    margin-top: 90px
}

.mt-95 {
    margin-top: 95px
}

.mt-96 {
    margin-top: 96px
}

.mt-100 {
    margin-top: 100px
}

.mt-105 {
    margin-top: 105px
}

.mt-110 {
    margin-top: 110px
}

.mt-115 {
    margin-top: 115px
}

.mt-120 {
    margin-top: 120px
}

.mt-125 {
    margin-top: 125px
}

.mt-130 {
    margin-top: 130px
}

.mt-135 {
    margin-top: 135px
}

.mt-140 {
    margin-top: 140px
}

.mt-145 {
    margin-top: 145px
}

.mt-150 {
    margin-top: 150px
}

.mt-157 {
    margin-top: 157px
}

.mt-195 {
    margin-top: 195px
}
/*************************
      Margin right
*************************/
.mr-0 {
    margin-right: 0px
}

.mr-2 {
    margin-right: 2px
}

.mr-10 {
    margin-right: 10px
}

.mr-15 {
    margin-right: 15px
}

.mr-20 {
    margin-right: 20px
}

.mr-30 {
    margin-right: 30px
}

.mr-40 {
    margin-right: 40px
}

.mr-50 {
    margin-right: 50px
}

.mr-60 {
    margin-right: 60px
}

.mr-66 {
    margin-right: 66px
}

.mr-70 {
    margin-right: 70px
}

.mr-80 {
    margin-right: 80px
}

.mr-90 {
    margin-right: 90px
}

.mr-100 {
    margin-right: 100px
}

.mr-110 {
    margin-right: 110px
}

.mr-120 {
    margin-right: 120px
}

.mr-130 {
    margin-right: 130px
}

.mr-140 {
    margin-right: 140px
}

.mr-150 {
    margin-right: 150px
}
/*************************
    Margin bottom
*************************/
.mb-0 {
    margin-bottom: 0px
}

.mb-2 {
    margin-bottom: 2px
}

.mb-5 {
    margin-bottom: 5px
}

.mb-10 {
    margin-bottom: 10px
}

.mb-15 {
    margin-bottom: 15px
}

.mb-20 {
    margin-bottom: 20px
}

.mb-22 {
    margin-bottom: 22px
}

.mb-23 {
    margin-bottom: 23px
}

.mb-25 {
    margin-bottom: 25px
}

.mb-30 {
    margin-bottom: 30px
}

.mb-33 {
    margin-bottom: 33px
}

.mb-35 {
    margin-bottom: 35px
}

.mb-38 {
    margin-bottom: 38px
}

.mb-40 {
    margin-bottom: 40px
}

.mb-45 {
    margin-bottom: 45px
}

.mb-47 {
    margin-bottom: 47px
}

.mb-48 {
    margin-bottom: 48px
}

.mb-50 {
    margin-bottom: 50px
}

.mb-55 {
    margin-bottom: 55px
}

.mb-58 {
    margin-bottom: 58px
}

.mb-60 {
    margin-bottom: 60px
}

.mb-65 {
    margin-bottom: 65px
}

.mb-70 {
    margin-bottom: 70px
}

.mb-75 {
    margin-bottom: 75px
}

.mb-80 {
    margin-bottom: 80px
}

.mb-85 {
    margin-bottom: 85px
}

.mb-90 {
    margin-bottom: 90px
}

.mb-95 {
    margin-bottom: 95px
}

.mb-96 {
    margin-bottom: 96px
}

.mb-100 {
    margin-bottom: 100px
}

.mb-105 {
    margin-bottom: 105px
}

.mb-110 {
    margin-bottom: 110px
}

.mb-115 {
    margin-bottom: 115px
}

.mb-120 {
    margin-bottom: 120px
}

.mb-125 {
    margin-bottom: 125px
}

.mb-128 {
    margin-bottom: 128px
}

.mb-130 {
    margin-bottom: 130px
}

.mb-135 {
    margin-bottom: 135px
}

.mb-140 {
    margin-bottom: 140px
}

.mb-145 {
    margin-bottom: 145px
}

.mb-150 {
    margin-bottom: 150px
}

.mb-220 {
    margin-bottom: 220px
}

.mb-350 {
    margin-bottom: 350px
}
/*************************
    Margin left
*************************/
.ml-0 {
    margin-left: 0
}

.ml-10 {
    margin-left: 10px
}

.ml-15 {
    margin-left: 15px
}

.ml-20 {
    margin-left: 20px
}

.ml-30 {
    margin-left: 30px
}

.ml-40 {
    margin-left: 40px
}

.ml-50 {
    margin-left: 50px
}

.ml-60 {
    margin-left: 60px
}

.ml-70 {
    margin-left: 70px
}

.ml-85 {
    margin-left: 85px
}

.ml-80 {
    margin-left: 80px
}

.ml-90 {
    margin-left: 90px
}

.ml-100 {
    margin-left: 100px
}

.ml-110 {
    margin-left: 110px
}

.ml-120 {
    margin-left: 120px
}

.ml-130 {
    margin-left: 130px
}

.ml-140 {
    margin-left: 140px
}

.ml-150 {
    margin-left: 150px
}
/*************************
    Padding top
*************************/
.pt-0 {
    padding-top: 0
}

.pt-10 {
    padding-top: 10px
}

.pt-12 {
    padding-top: 12px
}

.pt-15 {
    padding-top: 15px
}

.pt-20 {
    padding-top: 20px
}

.pt-23 {
    padding-top: 23px
}

.pt-25 {
    padding-top: 25px
}

.pt-30 {
    padding-top: 30px
}

.pt-35 {
    padding-top: 35px
}

.pt-38 {
    padding-top: 38px
}

.pt-40 {
    padding-top: 40px
}

.pt-45 {
    padding-top: 45px
}

.pt-50 {
    padding-top: 50px
}

.pt-55 {
    padding-top: 55px
}

.pt-58 {
    padding-top: 58px
}

.pt-60 {
    padding-top: 60px
}

.pt-65 {
    padding-top: 65px
}

.pt-66 {
    padding-top: 66px
}

.pt-70 {
    padding-top: 70px
}

.pt-72 {
    padding-top: 72px
}

.pt-75 {
    padding-top: 75px
}

.pt-77 {
    padding-top: 77px
}

.pt-80 {
    padding-top: 80px
}

.pt-85 {
    padding-top: 85px
}

.pt-90 {
    padding-top: 90px
}

.pt-93 {
    padding-top: 93px
}

.pt-95 {
    padding-top: 95px
}

.pt-96 {
    padding-top: 96px
}

.pt-98 {
    padding-top: 98px
}

.pt-100 {
    padding-top: 100px
}

.pt-104 {
    padding-top: 104px
}

.pt-105 {
    padding-top: 105px
}

.pt-110 {
    padding-top: 110px
}

.pt-112 {
    padding-top: 112px
}

.pt-113 {
    padding-top: 113px
}

.pt-115 {
    padding-top: 115px
}

.pt-117 {
    padding-top: 117px
}

.pt-120 {
    padding-top: 120px
}

.pt-122 {
    padding-top: 122px
}

.pt-123 {
    padding-top: 123px
}

.pt-124 {
    padding-top: 124px
}

.pt-125 {
    padding-top: 125px
}

.pt-130 {
    padding-top: 130px
}

.pt-135 {
    padding-top: 135px
}

.pt-140 {
    padding-top: 140px
}

.pt-145 {
    padding-top: 145px
}

.pt-150 {
    padding-top: 150px
}

.pt-152 {
    padding-top: 152px
}

.pt-155 {
    padding-top: 155px
}

.pt-157 {
    padding-top: 157px
}

.pt-160 {
    padding-top: 160px
}

.pt-195 {
    padding-top: 195px
}

.pt-220 {
    padding-top: 220px
}
/*************************
    Padding right
*************************/
.pr-0 {
    padding-right: 0
}

.pr-10 {
    padding-right: 10px
}

.pr-15 {
    padding-right: 15px
}

.pr-20 {
    padding-right: 20px
}

.pr-30 {
    padding-right: 30px
}

.pr-40 {
    padding-right: 40px
}

.pr-50 {
    padding-right: 50px
}

.pr-58 {
    padding-right: 58px
}

.pr-60 {
    padding-right: 60px
}

.pr-63 {
    padding-right: 63px
}

.pr-70 {
    padding-right: 70px
}

.pr-80 {
    padding-right: 80px
}

.pr-90 {
    padding-right: 90px
}

.pr-100 {
    padding-right: 100px
}

.pr-110 {
    padding-right: 110px
}

.pr-120 {
    padding-right: 120px
}

.pr-130 {
    padding-right: 130px
}

.pr-140 {
    padding-right: 140px
}
/*************************
    Padding bottom
*************************/
.pb-0 {
    padding-bottom: 0
}

.pb-10 {
    padding-bottom: 10px
}

.pb-12 {
    padding-bottom: 12px
}

.pb-14 {
    padding-bottom: 14px
}

.pb-15 {
    padding-bottom: 15px
}

.pb-20 {
    padding-bottom: 20px
}

.pb-25 {
    padding-bottom: 25px
}

.pb-27 {
    padding-bottom: 27px
}

.pb-30 {
    padding-bottom: 30px
}

.pb-35 {
    padding-bottom: 35px
}

.pb-38 {
    padding-bottom: 38px
}

.pb-40 {
    padding-bottom: 40px
}

.pb-45 {
    padding-bottom: 45px
}

.pb-50 {
    padding-bottom: 50px
}

.pb-55 {
    padding-bottom: 55px
}

.pb-60 {
    padding-bottom: 60px
}

.pb-65 {
    padding-bottom: 65px
}

.pb-66 {
    padding-bottom: 66px
}

.pb-70 {
    padding-bottom: 70px
}

.pb-75 {
    padding-bottom: 75px
}

.pb-78 {
    padding-bottom: 78px
}

.pb-80 {
    padding-bottom: 80px
}

.pb-83 {
    padding-bottom: 83px
}

.pb-85 {
    padding-bottom: 85px
}

.pb-88 {
    padding-bottom: 88px
}

.pb-90 {
    padding-bottom: 90px
}

.pb-93 {
    padding-bottom: 93px
}

.pb-95 {
    padding-bottom: 95px
}

.pb-96 {
    padding-bottom: 96px
}

.pb-100 {
    padding-bottom: 100px
}

.pb-105 {
    padding-bottom: 105px
}

.pb-110 {
    padding-bottom: 110px
}

.pb-115 {
    padding-bottom: 115px
}

.pb-118 {
    padding-bottom: 118px
}

.pb-120 {
    padding-bottom: 120px
}

.pb-125 {
    padding-bottom: 125px
}

.pb-128 {
    padding-bottom: 128px
}

.pb-130 {
    padding-bottom: 130px
}

.pb-135 {
    padding-bottom: 135px
}

.pb-140 {
    padding-bottom: 140px
}

.pb-145 {
    padding-bottom: 145px
}

.pb-150 {
    padding-bottom: 150px
}

.pb-155 {
    padding-bottom: 155px
}

.pb-185 {
    padding-bottom: 185px
}

.pb-190 {
    padding-bottom: 190px
}

.pb-195 {
    padding-bottom: 195px
}

.pb-220 {
    padding-bottom: 220px
}
/*************************
    Padding left
*************************/
.pl-0 {
    padding-left: 0
}

.pl-10 {
    padding-left: 10px
}

.pl-15 {
    padding-left: 15px
}

.pl-20 {
    padding-left: 20px
}

.pl-30 {
    padding-left: 30px
}

.pl-40 {
    padding-left: 40px
}

.pl-50 {
    padding-left: 50px
}

.pl-60 {
    padding-left: 60px
}

.pl-70 {
    padding-left: 70px
}

.pl-80 {
    padding-left: 80px
}

.pl-90 {
    padding-left: 90px
}

.pl-100 {
    padding-left: 100px
}

.pl-110 {
    padding-left: 110px
}

.pl-120 {
    padding-left: 120px
}

.pl-130 {
    padding-left: 130px
}

.pl-140 {
    padding-left: 140px
}

.pl-150 {
    padding-left: 150px
}
/***************************
    Page section padding 
****************************/
.ptb-0 {
    padding: 0
}

.ptb-10 {
    padding: 10px 0
}

.ptb-18 {
    padding: 18px 0
}

.ptb-20 {
    padding: 20px 0
}

.ptb-30 {
    padding: 30px 0
}

.ptb-40 {
    padding: 40px 0
}

.ptb-50 {
    padding: 50px 0
}

.ptb-60 {
    padding: 60px 0
}

.ptb-70 {
    padding: 70px 0
}

.ptb-80 {
    padding: 80px 0
}

.ptb-90 {
    padding: 90px 0
}

.ptb-100 {
    padding: 100px 0
}

.ptb-110 {
    padding: 110px 0
}

.ptb-120 {
    padding: 120px 0
}

.ptb-130 {
    padding: 130px 0
}

.ptb-140 {
    padding: 140px 0
}

.ptb-150 {
    padding: 150px 0
}
/***************************
    Page section margin 
****************************/
.mtb-0 {
    margin: 0
}

.mtb-10 {
    margin: 10px 0
}

.mtb-15 {
    margin: 15px 0
}

.mtb-20 {
    margin: 20px 0
}

.mtb-30 {
    margin: 30px 0
}

.mtb-40 {
    margin: 40px 0
}

.mtb-50 {
    margin: 50px 0
}

.mtb-60 {
    margin: 60px 0
}

.mtb-70 {
    margin: 70px 0
}

.mtb-80 {
    margin: 80px 0
}

.mtb-90 {
    margin: 90px 0
}

.mtb-100 {
    margin: 100px 0
}

.mtb-110 {
    margin: 110px 0
}

.mtb-120 {
    margin: 120px 0
}

.mtb-130 {
    margin: 130px 0
}

.mtb-140 {
    margin: 140px 0
}

.mtb-150 {
    margin: 150px 0;
}
/*----------------------------------------*/
/*  2. Header CSS
/*----------------------------------------*/
.logo a {
    display: inline-block
}

.logo {
    -webkit-transition: all 0.5s ease 0s;
    -o-transition: all 0.5s ease 0s;
    transition: all 0.5s ease 0s;
}

.header-area.two .logo {
    padding: 40px 0 33px;
}

.header-area.two.sticky .logo {
    padding: 15px 0 7px;
    width: 60%;
    -webkit-transition: all 0.6s ease 0s;
    -o-transition: all 0.6s ease 0s;
    transition: all 0.6s ease 0s;
}

.header-area.two.sticky .search {
    top: 43px;
}

.header-area.two.sticky .main-menu > nav > ul > li > a {
    line-height: 58px;
    -webkit-transition: all 0.6s ease 0s;
    -o-transition: all 0.6s ease 0s;
    transition: all 0.6s ease 0s;
}

.one.mobile-menu a.meanmenu-reveal span {
    background-color: #fff;
}

.one.mobile-menu a.meanmenu-reveal {
    border: 1px solid #fff;
    color: #fff;
}

.header-area {
    background: transparent none repeat scroll 0 0;
}

.fixed {
    left: 0;
    position: absolute;
    width: 100%;
    z-index: 99;
}

.main-menu {
    display: inline-block
}

    .main-menu ul li {
        display: inline-block;
        position: relative;
    }

.header-contact > a {
    font-size: 0.875rem; /* 14px */
    font-weight: 600;
    text-transform: uppercase;
    font-family: 'Poppins', sans-serif;
    border: 1px solid #471a72;
    border-radius: 25px;
    color: #666666;
    margin-top: 13px;
}

.content-wrapper {
    text-align: right;
}

.main-menu nav > ul > li > a {
    color: #fff;
    display: inline-block;
    font-family: 'Poppins', sans-serif;
    font-size: 0.875rem; /* 14px */
    font-weight: 600;
    line-height: 158px;
    padding: 0 15px;
    position: relative;
    text-transform: uppercase;
    transition: all 0.4s ease 0s;
}

.header-area.two .main-menu nav > ul > li > a {
    color: #303030;
    font-size: 1rem; /* 16px */
    line-height: 130px;
}

.main-menu ul li:last-child a {
    padding-right: 0px;
}

.main-menu nav ul > li:hover > a {
    color: #BBA687;
}

.one.main-menu ul li ul {
    top: 75%
}

.sticky .one.main-menu ul li ul {
    top: 100%
}

.main-menu ul li ul {
    background: #ffffff none repeat scroll 0 0;
    left: 0;
    opacity: 0;
    padding: 10px 18px;
    position: absolute;
    text-align: left;
    top: 100%;
    transition: all 0.3s ease 0s;
    visibility: hidden;
    width: 185px;
    z-index: 999;
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.176);
}

.main-menu ul li:hover > ul {
    opacity: 1;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
    visibility: visible;
}

.main-menu ul li ul li {
    display: block;
    margin: 0;
    padding: 7px 0;
}

.main-menu nav ul li ul li a {
    color: #252525;
    display: block;
    font-size: 0.875rem; /* 14px */
    line-height: 26px;
    padding: 0;
    text-transform: capitalize;
}

.main-menu ul li ul span {
    float: right;
    font-size: 0.9375rem; /* 15px */
    line-height: 20px;
    margin-right: 22px;
}

.main-menu ul li ul li:hover > a {
    padding-left: 5px;
    color: #BBA687
}

.main-menu ul li ul li a:before {
    display: none;
}

.main-menu ul li ul li > ul {
    left: 100%;
    opacity: 0;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    position: absolute;
    top: 17%;
    visibility: hidden;
}

.main-menu.text-start span {
    float: right;
}

.mobile-menu-area, .mean-container .mean-bar:after {
    display: none
}

.mean-container .mean-bar {
    background: transparent none repeat scroll 0 0;
    min-height: 0;
    padding: 0;
}

.sticky .header-social ul li a {
    line-height: 69px;
}

.mean-container a.meanmenu-reveal {
    border: 1px solid #2C2B5E;
    color: #000;
    margin-top: -94px;
    padding: 4px 5px;
    position: absolute;
    -webkit-transition: all 0.6s ease 0s;
    -o-transition: all 0.6s ease 0s;
    transition: all 0.6s ease 0s;
}

.header-area.two .mean-container a.meanmenu-reveal {
    margin-top: -84px;
}

.header-area.two.sticky .mean-container a.meanmenu-reveal {
    margin-top: -49px;
}

.mean-container a.meanmenu-reveal span {
    background-color: #2C2B5E
}

.mean-container .mean-nav {
    border-right: 1px solid rgba(0, 0, 0, 0.5);
    margin-top: 0;
}

.headroom {
    -webkit-transition: -webkit-transform 200ms linear 0s;
    transition: -webkit-transform 200ms linear 0s;
    transition: transform 200ms linear 0s;
    transition: transform 200ms linear 0s, -webkit-transform 200ms linear 0s;
    will-change: transform;
}

.headroom--pinned {
    -webkit-transform: translateY(0%);
    transform: translateY(0%);
}

.headroom--unpinned {
    -webkit-transform: translateY(-100%);
    transform: translateY(-100%);
}

.intelligent-header {
    left: 0;
    position: fixed;
    right: 0;
    top: 0;
    z-index: 10;
}

    .intelligent-header.headroom--not-top {
        background: #ffffff none repeat scroll 0 0;
        padding: 10px 0;
    }

.header-sticky.sticky {
    -webkit-transition: all 0.6s ease 0s;
    -o-transition: all 0.6s ease 0s;
    transition: all 0.6s ease 0s;
   /* background: rgba(0, 0, 0, 0.5);
    box-shadow: 0 0 25px 0 rgba(0, 0, 0, 0.04);*/
    left: 0;
    padding: 0;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 999;
}

    .header-sticky.sticky.two {
        background: rgba(255, 255, 255, 0.8);
    }

.sticky .main-menu > nav > ul > li > a {
    line-height: 69px;
}

.sticky .header-contact a {
    margin-top: 25px
}

.sticky .logo {
    padding: 12px 0 8px;
}

.header-area .sticky {
    background: rgba(255, 255, 255, 0.8) none repeat scroll 0 0;
    box-shadow: 0 1px 3px rgba(50, 50, 50, 0.4)
}

.menu-style-toggle nav {
    margin-right: -30px;
    opacity: 0;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    visibility: hidden;
}

    .menu-style-toggle nav.menu-open {
        margin-right: 0;
        opacity: 1;
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
        visibility: visible;
    }

.menu-style-toggle nav {
    float: left;
    -webkit-transition: all 0.3s ease 0s;
    transition: all 0.3s ease 0s;
}

.main-menu.mean-menu.menu-style-toggle.text-right {
    float: right;
}

.mobile-header {
    background: #ffffff none repeat scroll 0 0;
    display: none;
    left: 0;
    margin: auto;
    padding: 15px 20px;
    position: absolute;
    right: 0;
    top: 0;
    width: 100%;
    z-index: 999;
}

.mobile-logo img {
    width: 40px;
}

.menu-icon {
    border: 1px solid #464646;
    box-sizing: content-box;
    color: #464646;
    cursor: pointer;
    font-weight: 700;
    height: 22px;
    line-height: 22px;
    padding: 4px 5px;
    position: absolute;
    right: 20px;
    text-decoration: none;
    top: 25px;
    width: 22px;
}

    .menu-icon span {
        background-color: #333333;
        display: block;
        height: 3px;
        margin-top: 3px;
        box-sizing: content-box
    }

.mobile-menu-area {
    background-color: #fff;
    display: block;
    height: 100%;
    left: 0;
    overflow-y: scroll;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 999999;
}

    .mobile-menu-area .menu-close {
        background-color: transparent;
        border: 2px solid #858585;
        border-radius: 50%;
        color: #858585;
        height: 40px;
        padding: 0;
        width: 40px;
        margin-bottom: 30px;
    }

        .mobile-menu-area .menu-close:hover {
            color: #433a8b;
            border-color: #433a8b;
        }

        .mobile-menu-area .menu-close i {
            display: block;
            font-size: 1.875rem; /* 30px */
            line-height: 30px;
            padding-right: 2px;
        }

.sticky .menu-toggle {
    margin-top: 32px;
}

.header-social ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

    .header-social ul li {
        display: inline-block;
        -webkit-transition: all 0.5s ease 0s;
        -o-transition: all 0.5s ease 0s;
        transition: all 0.5s ease 0s;
    }

        .header-social ul li a {
            display: block;
            font-size: 1rem; /* 16px */
            color: #191919;
            line-height: 100px;
            padding: 0 13px;
        }

        .header-social ul li:last-child a {
            padding-right: 0px;
        }

        .header-social ul li:first-child a {
            padding-left: 0px;
        }

        .header-social ul li:hover a {
            color: #BBA687
        }

.search-btn {
    cursor: pointer;
    display: inline-block;
    margin-left: 28px;
    position: relative;
    top: -11px;
}

.search {
    background: #ffffff none repeat scroll 0 0;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
    opacity: 0;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    position: absolute;
    right: 0;
    top: 62px;
    height: 40px;
    -webkit-transition: all 0.5s ease 0s;
    transition: all 0.5s ease 0s;
    visibility: hidden;
    width: 216px;
    z-index: 9999;
}

#search-form > input {
    background: rgba(0, 0, 0, 0) none repeat scroll 0 0;
    border: 2px solid #cacaca;
    color: #252525;
    height: 40px;
    padding: 0 40px 0 10px;
    width: 100%;
}

    #search-form > input::-moz-placeholder {
        color: #252525;
    }

    #search-form > input::-webkit-input-placeholder {
        color: #252525;
    }

#search-form > button {
    background: #000 none repeat scroll 0 0;
    border: 2px solid #939369;
    color: #ffffff;
    font-size: 0.9375rem; /* 15px */
    height: 100%;
    padding: 0;
    position: absolute;
    right: 0;
    top: 0;
    width: 43px;
}

    #search-form > button:hover {
        background: #BBA687;
        border: 2px solid #939369;
    }

.search-menu {
    background: #000 none repeat scroll 0 0;
    border-radius: 50%;
    color: #fff;
    display: inline-block;
    height: 31px;
    position: relative;
    text-align: center;
    transition: all 0.5s ease 0s;
    width: 31px;
    line-height: 25px;
}

    .search-menu i {
        font-size: 0.75rem; /* 12px */
        line-height: 30px;
    }

    .search-menu:hover {
        background: #BBA687
    }

.open.search {
    display: block;
    opacity: 1;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
    visibility: visible;
    z-index: 20;
}

.header-top {
    background: #BBA687;
    position: relative;
}

    .header-top:after {
        background: #787676;
        position: absolute;
        right: 0;
        top: 0;
        content: "";
        height: 100%;
        width: 40%;
    }

    .header-top::before {
        background: #FFF none repeat scroll 0 0;
        content: "";
        height: 105px;
        position: absolute;
        right: 42.8%;
        top: -18px;
        transform: rotate(-45deg);
        width: 8px;
        z-index: 1;
    }

.header-top-right {
    position: relative
}

    .header-top-right::after {
        background: #BBA687 none repeat scroll 0 0;
        content: "";
        height: 100px;
        left: -32%;
        position: absolute;
        top: -38px;
        transform: rotate(-45deg);
        width: 60px;
    }

    .header-top-right ul li {
        display: inline-block;
        margin-right: 38px;
    }

        .header-top-right ul li:last-child {
            margin-right: 0px;
        }

        .header-top-left p, .header-top-right ul li a {
            font-size: 0.875rem; /* 14px */
            font-weight: 600;
            font-family: 'Poppins', sans-serif;
            color: #fff;
            text-transform: uppercase;
            line-height: 68px;
            position: relative;
            z-index: 1;
        }

        .header-top-right ul li:hover a {
            color: #BBA687;
        }

.header-area.two .main-menu > ul > li > a {
    color: #303030;
    line-height: 132px;
}

.header-area.two .main-menu > ul > li:hover > a {
    color: #BBA687;
}
/*----------------------------------------*/
/*  3. Slider CSS
/*----------------------------------------*/
.slider-area, .single-banner {
    position: relative;
    overflow: hidden
}

.single-slide:after, .banner-area:after {
    position: absolute;
    left: 0;
    top: 0;
    content: "";
    background: rgba(0, 0, 0, 0.32);
    width: 100%;
    height: 100%;
}

.two .single-slide:after {
    background: rgba(0, 0, 0, 0.55);
}

.three .single-slide:after, .banner-area:after {
    background: rgba(0, 0, 0, 0.80);
}

.slider-img {
    z-index: 1;
    position: relative;
    margin-right: -25px
}

.slider-area img {
    width: 100%;
}

.slide-content, .text-content {
    z-index: 99;
    position: relative
}

.text-content-wrapper, .slider-area img {
    width: 100%;
}

.slide-content-wrapper {
    display: inline-table;
    width: 100%;
}

.slide-content {
    display: table-cell;
    text-align: left;
    vertical-align: middle;
}

.slider-area.two .slide-content {
    text-align: center;
}

.slide-content h3 {
    color: #fff;
    font-family: 'Poppins', sans-serif;
    font-size: 3.25rem; /* 52px */
    font-weight: 800;
    line-height: 58px;
    padding-top: 80px;
    text-transform: capitalize;
    -webkit-animation-delay: 0.7s;
    animation-delay: 0.7s;
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
    -webkit-animation-name: fadeOutDown;
    animation-name: fadeOutDown;
}

.slider-img {
    -webkit-animation-delay: 0.2s;
    animation-delay: 0.2s;
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
    -webkit-animation-name: fadeInRight;
    animation-name: fadeInRight;
}

.slide-content h2 {
    color: #fff;
    font-family: 'Poppins', sans-serif;
    font-size: 3.625rem; /* 58px */
    font-weight: 800;
    line-height: 64px;
    text-transform: capitalize;
    -webkit-animation-delay: 1.5s;
    animation-delay: 1.5s;
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
    -webkit-animation-name: fadeOutDown;
    animation-name: fadeOutDown;
}

.slider-area.two .slide-content h2 {
    line-height: 82px;
}

.slider-area.two .slide-content p {
    margin-bottom: 40px;
}

.slide-content p {
    color: #fff;
    font-family: 'Poppins', sans-serif;
    margin-top: 12px;
    font-size: 1rem; /* 16px */
    font-weight: 400;
    margin-bottom: 35px;
    -webkit-animation-delay: 0.8s;
    animation-delay: 0.8s;
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
    -webkit-animation-name: fadeOutDown;
    animation-name: fadeOutDown;
}

.slider-area .default-btn {
    -webkit-animation-delay: 1.4s;
    animation-delay: 1.4s;
    -webkit-animation-duration: .8s;
    animation-duration: .8s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
    -webkit-animation-name: fadeOutDown;
    animation-name: fadeOutDown;
}

.slider-area .owl-item.active .slide-content h2, .slider-area .owl-item.active .slide-content h3, .slider-area .owl-item.active .slide-content p, .slider-area .owl-item.active .default-btn {
    -webkit-animation-name: fadeInUp;
    animation-name: fadeInUp;
}

.slider-area .owl-item.active .default-btn {
    -webkit-animation-name: fadeInUp;
    animation-name: fadeInUp;
}

.slider-area .owl-item.active .slider-img img {
    animation-delay: 0.2s;
    animation-duration: 1s;
    animation-fill-mode: both;
    animation-name: fadeInRight;
}

.owl-item.active .slider-img {
    animation-delay: 0.2s;
    animation-duration: 1s;
    animation-fill-mode: both;
    animation-name: fadeInRight;
}

.single-banner .slide-content h2, .single-banner .slide-content h3, .single-banner .slide-content p, .single-banner .banner-btn {
    -webkit-animation-name: fadeInUp;
    animation-name: fadeInUp;
}

.slider-area .owl-item.active .slide-content h3 {
    -webkit-animation-delay: 500ms;
    animation-delay: 500ms
}

.slider-area .owl-item.active .slide-content h2 {
    -webkit-animation-delay: 750ms;
    animation-delay: 750ms
}

.slider-area .owl-item.active .slide-content p {
    -webkit-animation-delay: 1100ms;
    animation-delay: 1100ms
}

.slider-area .owl-item.active .slide-content .banner-btn {
    -webkit-animation-delay: 1700ms;
    animation-delay: 1700ms
}

.owl-nav div {
    background: rgba(236, 28, 35, 0.64);
    color: #ddd;
    font-size: 1.125rem; /* 18px */
    border-radius: 3px;
    height: 40px;
    left: -46px;
    line-height: 40px;
    margin-top: -20px;
    position: absolute;
    text-align: center;
    top: 50%;
    -webkit-transition: all 0.4s ease 0s;
    transition: all 0.4s ease 0s;
    width: 35px;
    z-index: 999;
}

.owl-nav .owl-next {
    left: auto;
    right: -46px;
}

.slider-area:hover .owl-nav div {
    left: 0;
}

.slider-area:hover .owl-nav .owl-next {
    left: auto;
    right: 0;
}

.owl-nav div:hover {
    color: #fff
}

.single-slide {
    background-position: top center;
    background-size: cover
}

.animated.infinite {
    animation-iteration-count: infinite;
}

.fadeInDown {
    animation-name: fadeInDown;
}

.slider-area {
    height: 100vh;
}

    .slider-area div {
        height: 100%
    }

.fix {
    overflow: hidden
}

.slider-area .owl-nav div {
    height: auto;
}

.owl-carousel .owl-item .slider-img > img {
    bottom: 0;
    position: absolute;
    right: 0;
    width: 70%;
}
/*----------------------------------------*/
/*  4. Notice CSS
/*----------------------------------------*/
.notice-left, .notice-right {
    padding: 45px 55px 70px 55px;
    box-shadow: 0px 0px 6px 0px rgba(0, 0, 0, 0.15);
    position: relative;
}

.notice-area.three .notice-left {
    padding: 35px 55px 30px 55px;
}

.notice-right {
    padding: 40px 50px 50px;
}

.notice-left h3, .notice-left-wrapper h3, .notice-right-wrapper h3 {
    font-family: 'Poppins', sans-serif;
    font-size: 800;
    color: #2c2b5e;
    font-size: 1.75rem; /* 28px */
    text-transform: uppercase;
    margin-bottom: 55px;
}

.notice-right-wrapper h3, .notice-left-wrapper h3 {
    margin-bottom: 33px
}

.notice-right-wrapper {
    margin-right: 27px
}

.single-notice-left, .single-notice-right {
    border-bottom: 1px solid #E7E7E7
}

.col-md-6 .single-notice-left:last-child, .col-md-6 .single-notice-left:nth-child(3), .col-md-6 .single-notice-left:nth-child(6), .col-md-6 .single-notice-right:last-child {
    border-bottom: none
}

.single-notice-left h4 {
    font-family: 'Poppins', sans-serif;
    font-size: 700;
    font-size: 1rem; /* 16px */
    color: #BBA687;
    margin-bottom: 5px;
}

.single-notice-left p, .single-notice-right p {
    font-family: 'Poppins', sans-serif;
    font-size: 0.875rem; /* 14px */
    color: #303030;
    margin-bottom: 0px;
}

.single-notice-right h3 {
    font-family: 'Poppins', sans-serif;
    font-size: 1.25rem; /* 20px */
    color: #2c2b5e;
    text-transform: uppercase;
    margin-bottom: 15.5px;
    font-size: 700;
}

.video-icon a i {
    font-size: 2.375rem; /* 38px */
    color: #2B2A5A;
    background: #FFFFFF;
    height: 55px;
    width: 55px;
    border-radius: 50%;
    line-height: 56px;
    text-align: center;
    -webkit-transition: all 0.5s ease 0s;
    -o-transition: all 0.5s ease 0s;
    transition: all 0.5s ease 0s;
}

.video-icon a:hover i {
    color: #BBA687;
}

.notice-video {
    background: rgba(0, 0, 0, 0) url("../img/notice/video.jpg") repeat scroll 0 0;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
    position: relative;
    height: 382px;
    width: 100%;
}

.video-icon {
    left: 50%;
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: 1;
}

.notice-video::after {
    background: rgba(44, 43, 94, 0.90);
    content: "";
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
}

.notice-area.two .notice-left {
    padding: 33px 58px 31px;
    max-height: 380px;
    overflow-y: auto;
}

.notice-left {
    height: 540px;
    overflow-y: auto;
}
/*-----------------------------------------*/
/*  5. Choose CSS
/*----------------------------------------*/
.choose-area {
    background: url(../img/choose/choose-bd.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed;
    background-position: center center;
    position: relative;
}

    .choose-area:after {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        content: "";
        background: rgba(44, 43, 94, 0.9);
    }

    .choose-area:before {
        position: absolute;
        right: 130px;
        bottom: 0;
        width: 293px;
        height: 506px;
        content: "";
        background: url(../img/choose/choose.png);
        background-repeat: no-repeat;
        z-index: 1;
    }

.choose-content {
    position: relative;
    z-index: 1;
    margin-right: 50px;
}

    .choose-content h2 {
        color: #fefefe;
        font-size: 2.125rem; /* 34px */
        font-family: 'Poppins', sans-serif;
        font-weight: 700;
        text-transform: uppercase;
        margin-bottom: 15px;
    }

    .choose-content p {
        color: #fff;
        font-size: 0.875rem; /* 14px */
        font-family: 'Poppins', sans-serif;
        margin-bottom: 20px;
    }

    .choose-content a {
        margin-top: 15px;
    }
/*----------------------------------------*/
/*  6. Courses CSS
/*----------------------------------------*/
.section-title h2 {
    font-size: 2.125rem; /* 34px */
    color: #000;
    font-weight: 700;
    font-family: 'Poppins', sans-serif;
    margin-bottom: 62px;
    text-transform: uppercase;
}

.section-title > img {
    margin-bottom: 2px;
}

.course-content {
    padding: 22px 30px 25px;
    text-align: left;
    box-shadow: 0px 0px 6px 0px rgba(0, 0, 0, 0.15);
}

.course-img img {
    width: 100%;
}

.course-content h3 {
    font-size: 1.375rem; /* 22px */
    color: #303030;
    text-transform: uppercase;
    font-weight: 700;
    font-family: 'Poppins', sans-serif;
    margin-bottom: 10px;
}

.course-content p {
    font-size: 0.875rem; /* 14px */
    color: #606060;
    font-family: 'Poppins', sans-serif;
    margin-bottom: 20px;
}

.course-content .default-btn {
    font-size: 0.875rem; /* 14px */
    padding: 9px 16px;
    transition: all 0.5s ease 0s;
}

    .course-content .default-btn:hover {
        background: #2C2B5E;
        color: #fff;
    }

.course-img {
    position: relative
}

    .course-img a {
        display: block;
        line-height: 0;
        position: relative;
    }

        .course-img a:after {
            position: absolute;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            content: "";
            background: rgba(236, 28, 35, 0.3);
            opacity: 0;
            -webkit-transition: all 0.5s ease 0s;
            -o-transition: all 0.5s ease 0s;
            transition: all 0.5s ease 0s;
        }

.course-hover, .blog-hover {
    position: absolute;
    left: 50%;
    top: 50%;
    content: "";
    opacity: 0;
    transform: translate(-50% -50%) margin: auto;
    z-index: 1;
    -webkit-transition: all 0.5s ease 0s;
    -o-transition: all 0.5s ease 0s;
    transition: all 0.5s ease 0s;
}

    .course-hover i {
        color: #fff;
        font-size: 1.25rem; /* 20px */
        -webkit-transition: all 0.5s ease 0s;
        -o-transition: all 0.5s ease 0s;
        transition: all 0.5s ease 0s;
    }

        .course-hover i:hover {
            color: #2C2B5E;
        }

.course-img a:hover::after, .course-img:hover .course-hover {
    opacity: 1
}

.courses-area.two {
    position: relative;
    background: url(../img/course/course-bg.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
    background-attachment: fixed;
}

    .courses-area.two:after {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        content: "";
        background: rgba(44, 43, 94, 0.92);
    }

    .courses-area.two .section-title h2 {
        color: #fff
    }

    .courses-area.two .section-title, .courses-area.two .single-course {
        z-index: 1;
        position: relative
    }

    .courses-area.two .course-content {
        background: #fff
    }

.course-title h3 {
    background: #2C2B5E;
    color: #fff;
    text-transform: uppercase;
    font-weight: 700;
    font-size: 1.375rem; /* 22px */
    font-family: 'Poppins', sans-serif;
    padding: 16px 93px 16px 27px;
    display: inline-block;
    position: relative;
}

    .course-title h3::after {
        background: #fff none repeat scroll 0 0;
        content: "";
        height: 85px;
        position: absolute;
        right: -26px;
        top: -17px;
        transform: rotate(-30deg);
        width: 45px;
    }

.course-form form {
    position: relative;
    margin-bottom: 50px
}

    .course-form form input {
        width: 100%;
        border: 1px solid #EBEBEB;
        background: #F8F8F8;
        padding: 14px 195px 14px 25px;
    }

    .course-form form button {
        position: absolute;
        right: 0;
        top: 0;
        background: #BBA687;
        color: #fff;
        height: 50px;
        width: 185px;
        content: "";
        color: #fff;
        font-weight: 700;
        text-transform: uppercase;
        font-family: 'Poppins', sans-serif;
        font-size: 1.125rem; /* 18px */
    }

.course-details-content {
    padding-top: 35px;
    overflow: hidden
}

    .course-details-content h2 {
        font-size: 1.75rem; /* 28px */
        color: #303030;
        font-weight: 700;
        text-transform: uppercase;
        margin-bottom: 15px;
        font-family: 'Poppins', sans-serif;
    }

    .course-details-content p {
        font-size: 0.875rem; /* 14px */
        color: #606060;
        margin-bottom: 35px;
        font-family: 'Poppins', sans-serif;
    }

.course-details-left {
    float: left;
    padding-right: 50px;
    width: 58%
}

.course-details-right {
    overflow: hidden;
    width: 42%
}

    .course-details-left h3, .course-details-right h3 {
        font-weight: 700;
        text-transform: uppercase;
        font-family: 'Poppins', sans-serif;
        font-size: 1.25rem; /* 20px */
        color: #303030;
        margin-bottom: 14px;
    }

.course-details-right {
    padding: 45px 35px 45px;
    border: 1px solid #E1E1E1
}

    .course-details-right h3 {
        margin-bottom: 50px
    }

    .course-details-right ul li {
        display: block;
        font-size: 0.875rem; /* 14px */
        color: #303030;
        font-weight: 600;
        text-transform: uppercase;
        font-family: 'Poppins', sans-serif;
        margin-bottom: 15px;
        padding-bottom: 15px;
        border-bottom: 1px solid #EBEBEB;
    }

        .course-details-right ul li:last-child {
            border-bottom: none;
        }

        .course-details-right ul li span {
            float: right
        }

    .course-details-right h3.red {
        color: #BBA687;
        margin-bottom: 0;
    }

.course-details-content p.margin {
    margin-bottom: 15px
}
/*----------------------------------------*/
/*  7. Event CSS
/*----------------------------------------*/
.single-event {
    box-shadow: 0px 0px 6px 0px rgba(0, 0, 0, 0.15);
}

.event-date {
    float: left;
    background: #000;
    margin-right: 20px;
    -webkit-transition: all 0.5s ease 0s;
    -o-transition: all 0.5s ease 0s;
    transition: all 0.5s ease 0s;
    border-top-left-radius: 5px; /* added */

    height: 100%; /* added */
    border-bottom-left-radius: 5px; /* added */
}

    .event-date h3 {
        color: #fefefe;
        font-size: 1.875rem; /* 30px */
        line-height: 32px;
        padding: 11px 18px 11px;
        text-align: center;
    }

.event-img img {
    width: 100%;
}

.event-date h3:hover a {
    color: #fefefe;
}

.event-date h3 span {
    font-size: 1rem; /* 16px */
    text-transform: uppercase;
    display: block;
}

.event-content {
    overflow: hidden;
    padding: 18px 0 20px
}

.event-content-left {
    float: left
}

    .event-content-left h4 {
        font-size: 1rem; /* 16px */
        color: #303030;
        font-weight: 700;
        font-family: 'Poppins', sans-serif;
        text-transform: uppercase;
        margin-bottom: 5px;
    }

    .event-content-left ul li {
        display: inline-block;
        margin-right: 15px;
        font-family: 'Poppins', sans-serif;
        font-size: 0.875rem; /* 14px */
        color: #606060;
    }

        .event-content-left ul li:last-child {
            margin-right: 0px;
        }

        .event-content-left ul li i {
            color: #606060;
            font-weight: 300;
            margin-right: 8px;
        }

.event-content-right {
    padding: 6px 0
}

    .event-content-right a {
        float: right;
        margin-right: 22px;
        font-size: 0.875rem; /* 14px */
        color: #303030;
        background: transparent;
        border: 1px solid #E1E1E1;
        font-weight: 400;
        padding: 8px 15px 8px;
        -webkit-transition: all 0.5s ease 0s;
        -o-transition: all 0.5s ease 0s;
        transition: all 0.5s ease 0s;
    }

        .event-content-right a:hover {
            color: #fff;
            background: #BBA687;
            border: 1px solid #BBA687;
        }

.single-event:hover .event-date {
    background: #BBA687
}

.event-area.two .event-img {
    float: left;
    margin-right: 25px;
}

.event-area.two .event-content {
    padding: 22px 0 25px;
}

.event-area.two .event-content {
    overflow: hidden;
}

    .event-area.two .event-content h3 {
        font-size: 1.25rem; /* 20px */
        font-weight: 700;
        color: #2c2b5e;
        font-family: 'Poppins', sans-serif;
        margin-bottom: 5px;
    }

    .event-area.two .event-content h4 {
        margin-bottom: 5px;
        -webkit-transition: all 0.5s ease 0s;
        -o-transition: all 0.5s ease 0s;
        transition: all 0.5s ease 0s;
    }

        .event-area.two .event-content h4 a {
            font-size: 1.125rem; /* 18px */
            font-weight: 700;
            color: #606060;
            font-family: 'Poppins', sans-serif;
            text-transform: uppercase;
            -webkit-transition: all 0.5s ease 0s;
            -o-transition: all 0.5s ease 0s;
            transition: all 0.5s ease 0s;
        }

            .event-area.two .event-content h4 a:hover {
                color: #BBA687;
            }

    .event-area.two .event-content ul {
        margin-bottom: 15px;
    }

        .event-area.two .event-content ul li {
            color: #606060;
            display: inline-block;
            font-size: 0.875rem; /* 14px */
            margin-right: 15px;
            font-family: 'Poppins', sans-serif;
        }

            .event-area.two .event-content ul li i {
                margin-right: 10px;
            }

.event-area.two .event-content-right {
    float: left;
}

.event-area.three .event-img, .event-details-img {
    position: relative
}

    .event-area.three .event-img a {
        position: relative;
        line-height: 0;
        display: block;
    }

        .event-area.three .event-img a:after {
            background: rgba(236, 28, 35, 0.3) none repeat scroll 0 0;
            content: "";
            height: 100%;
            left: 0;
            opacity: 0;
            position: absolute;
            top: 0;
            transition: all 0.5s ease 0s;
            width: 100%;
        }

        .event-area.three .event-img a:hover::after, .event-area.three .event-img a:hover .course-hover {
            opacity: 1;
        }

    .event-area.three .event-date, .event-details-img .event-date {
        position: absolute;
        left: 0;
        top: 30px;
        width: 70px;
        height: 85px;
        background: rgba(44, 43, 94, 0.79);
        content: "";
    }

    .event-area.three .event-img h3 {
        font-size: 1.75rem; /* 28px */
        font-weight: 700;
        font-family: 'Poppins', sans-serif;
        z-index: 1;
        color: #fefefe;
        line-height: 22px;
        text-align: center;
        padding: 20px 0;
    }

        .event-area.three .event-img h3 span {
            font-size: 1.125rem; /* 18px */
            font-weight: 400;
            font-family: 'Poppins', sans-serif;
            z-index: 1;
            color: #fefefe;
            text-transform: uppercase;
            line-height: 30px;
        }

.event-area.three .event-content h4 a {
    font-size: 1.125rem; /* 18px */
    font-weight: 700;
    font-family: 'Poppins', sans-serif;
    color: #303030;
    text-transform: uppercase;
    -webkit-transition: all 0.5s ease 0s;
    -o-transition: all 0.5s ease 0s;
    transition: all 0.5s ease 0s;
}

.event-area.three .event-content h4:hover a {
    color: #BBA687
}

.event-area.three .event-content {
    padding: 23px 35px 25px;
}

    .event-area.three .event-content h4 {
        margin-bottom: 12px;
    }

    .event-area.three .event-content ul {
        margin-bottom: 15px
    }

        .event-area.three .event-content ul li {
            margin-bottom: 10px
        }

            .event-area.three .event-content ul li span {
                font-size: 0.875rem; /* 14px */
                font-weight: 700;
                color: #606060;
                text-transform: capitalize;
            }

.event-area.three .event-content-right {
    float: left;
}

    .event-area.three .event-content-right a {
        background: #BBA687 none repeat scroll 0 0;
        color: #fff;
        margin-right: 0;
        padding: 8px 20px;
        font-weight: 700;
    }

        .event-area.three .event-content-right a:hover {
            background: #2C2B5E;
            border: 1px solid #2C2B5E;
        }

.event-img {
    line-height: 0px;
    display: block;
}

.event-details-content {
    margin-top: 25px
}

    .event-details-content h2 {
        font-size: 1.5rem; /* 24px */
        font-weight: 700;
        font-family: 'Poppins', sans-serif;
        color: #303030;
        text-transform: uppercase;
        margin-bottom: 10px;
    }

    .event-details-content ul {
        margin-bottom: 28px
    }

        .event-details-content ul li {
            display: inline-block;
            margin-right: 15px;
            color: #606060;
            font-size: 0.875rem; /* 14px */
            font-weight: 400;
            text-transform: capitalize;
        }

            .event-details-content ul li:last-child {
                margin-right: 0
            }

            .event-details-content ul li span {
                font-weight: 700;
            }

    .event-details-content p {
        font-size: 0.875rem; /* 14px */
        font-family: 'Poppins', sans-serif;
        color: #606060;
        margin-bottom: 22px;
    }

.speakers-area {
    margin-top: 50px;
    margin-bottom: 70px;
}

    .speakers-area h4 {
        font-size: 1.125rem; /* 18px */
        color: #303030;
        text-transform: uppercase;
        font-family: 'Poppins', sans-serif;
        margin-bottom: 35px;
    }

.speaker-img {
    float: left;
    margin-right: 25px
}

.speaker-content {
    overflow: hidden
}

.speaker-name {
    display: table-cell;
    padding-top: 16px;
}

    .speaker-name h5 {
        font-size: 1.125rem; /* 18px */
        color: #303030;
        font-weight: 600;
        font-family: 'Poppins', sans-serif;
    }

    .speaker-name p {
        font-size: 0.875rem; /* 14px */
        color: #303030;
        font-weight: 600;
        font-family: 'Poppins', sans-serif;
        margin-bottom: 0px;
    }

.single-speaker {
    display: table-cell;
    padding-right: 65px;
}
/*----------------------------------------*/
/*  8. Testimonial CSS
/*----------------------------------------*/
.testimonial-area {
    background: url(../img/testimonial/testimonial-bg.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
    background-attachment: fixed;
    position: relative;
}

    .testimonial-area:after {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        content: "";
        background: rgba(44, 43, 94, 0.9);
    }

    .testimonial-area.three {
        background: #FAFAFA
    }

        .testimonial-area.three:after {
            display: none
        }

        .testimonial-area.three .testimonial-content p {
            color: #606060
        }

        .testimonial-area.three .testimonial-content h4, .testimonial-area.three .testimonial-content h5 {
            color: #303030
        }

.testimonial-img {
    height: 77px;
    margin: auto auto 28px;
    width: 77px;
}

    .testimonial-img img {
        border-radius: 50%;
        border: 1px solid #FFFFFF;
    }

.three .testimonial-img img {
    border: 1px solid #f1f1f1;
}

.testimonial-content {
    padding: 0 35px;
}

    .testimonial-content p, .testimonial-content h5 {
        font-family: 'Poppins', sans-serif;
        font-size: 1rem; /* 16px */
        color: #fff;
        font-weight: 400;
        margin-bottom: 15px;
    }

    .testimonial-content h5 {
        margin-bottom: 0px;
    }

    .testimonial-content h4 {
        font-family: 'Poppins', sans-serif;
        font-size: 1.125rem; /* 18px */
        font-weight: 600;
        color: #fff;
        margin-bottom: 4px;
    }

.testimonial-owl .owl-nav {
    display: none
}
/*----------------------------------------*/
/*  9. Blog CSS
/*----------------------------------------*/
.single-blog {
    box-shadow: 0px 0px 6px 0px rgba(0, 0, 0, 0.15)
}

.blog-area .section-title h2 {
    margin-bottom: 55px;
}

.blog-img {
    line-height: 0;
    position: relative
}

    .blog-img a:after {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        content: "";
        background: rgba(236, 28, 35, 0.5);
        opacity: 0;
        -webkit-transition: all 0.5s ease 0s;
        -o-transition: all 0.5s ease 0s;
        transition: all 0.5s ease 0s;
    }

    .blog-img img {
        width: 100%;
    }

.blog-hover i {
    color: #fff;
    font-size: 1.25rem; /* 20px */
    z-index: 1;
    opacity: 0;
    top: 50%;
    left: 50%;
    position: absolute;
    transform: translate(-50%, -50%);
    -webkit-transition: all 0.5s ease 0s;
    -o-transition: all 0.5s ease 0s;
    transition: all 0.5s ease 0s;
}

    .blog-hover i:hover {
        color: #2C2B5E;
    }

.single-blog:hover .blog-img a:after, .single-blog:hover .blog-hover, .single-blog:hover .blog-hover i {
    opacity: 1
}

.blog-top p {
    font-size: 0.875rem; /* 14px */
    color: #606060;
    font-family: 'Poppins', sans-serif;
    padding: 15px 20px 10px 25px;
    border-bottom: 1px solid #E1E1E1;
}

    .blog-top p i {
        font-size: 1rem; /* 16px */
        color: #606060;
        margin-left: 5px;
    }

.blog-bottom {
    padding: 26px 15px 30px 25px
}

    .blog-bottom h2 {
        margin-bottom: 14px
    }

        .blog-bottom h2 a {
            font-size: 1.125rem; /* 18px */
            color: #303030;
            font-weight: 700;
            font-family: 'Poppins', sans-serif;
            text-transform: uppercase;
            -webkit-transition: all 0.5s ease 0s;
            -o-transition: all 0.5s ease 0s;
            transition: all 0.5s ease 0s;
        }

            .blog-bottom h2 a:hover {
                color: #BBA687;
            }

    .blog-bottom a {
        font-size: 0.875rem; /* 14px */
        color: #BBA687;
        font-weight: 700;
        font-family: 'Poppins', sans-serif;
        text-transform: uppercase;
        -webkit-transition: all 0.5s ease 0s;
        -o-transition: all 0.5s ease 0s;
        transition: all 0.5s ease 0s;
    }

        .blog-bottom a:hover {
            color: #2C2B5E;
        }

.single-blog-widget h3 {
    font-size: 1.25rem; /* 20px */
    color: #303030;
    font-weight: 600;
    font-family: 'Poppins', sans-serif;
    text-transform: uppercase;
    margin-bottom: 35px;
    line-height: 26px;
}

.blog-search form input {
    border: 1px solid #E1E1E1;
    padding: 11px 43px 11px 12px;
    width: 100%;
    font-size: 0.875rem; /* 14px */
    color: #606060;
    font-weight: 400;
    font-family: 'Poppins', sans-serif;
}

.blog-search form {
    position: relative;
}

    .blog-search form button {
        position: absolute;
        right: 0;
        top: 0;
        background: #EBEBEB;
        width: 43px;
        height: 43px;
        -webkit-transition: all 0.5s ease 0s;
        -o-transition: all 0.5s ease 0s;
        transition: all 0.5s ease 0s;
    }

        .blog-search form button:hover {
            background: #BBA687;
        }

        .blog-search form button i {
            font-size: 1rem; /* 16px */
            color: #606060;
            line-height: 25px;
        }

        .blog-search form button:hover i {
            color: #fff;
        }

.single-blog-widget ul li {
    display: block;
    padding-bottom: 27px;
}

    .single-blog-widget ul li:last-child {
        padding-bottom: 5px;
    }

    .single-blog-widget ul li a {
        font-size: 0.875rem; /* 14px */
        font-family: 'Poppins', sans-serif;
        font-weight: 600;
        color: #606060;
        -webkit-transition: all 0.5s ease 0s;
        -o-transition: all 0.5s ease 0s;
        transition: all 0.5s ease 0s;
    }

    .single-blog-widget ul li:hover a {
        color: #BBA687;
    }

.single-blog-banner a {
    position: relative;
    display: block
}

    .single-blog-banner a img {
        line-height: 0;
        display: block
    }

    .single-blog-banner a:after {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.48);
        content: "";
    }

.single-blog-banner {
    position: relative
}

    .single-blog-banner h2 {
        position: absolute;
        left: 20px;
        bottom: 25px;
        font-size: 1.875rem; /* 30px */
        font-weight: 700;
        font-family: 'Poppins', sans-serif;
        text-transform: uppercase;
        color: #fefefe;
        z-index: 9;
        line-height: 35px;
    }

.blog-sidebar.left {
    margin-right: 70px;
}

.single-post-img a {
    float: left;
    margin-right: 20px;
    position: relative
}

    .single-post-img a:after {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        content: "";
        background: rgba(236, 28, 35, 0.5) none repeat scroll 0 0;
        opacity: 0;
        -webkit-transition: all 0.5s ease 0s;
        -o-transition: all 0.5s ease 0s;
        transition: all 0.5s ease 0s;
    }

    .single-post-img a:hover::after, .single-post-img a:hover .blog-hover, .single-post-img a:hover .blog-hover i {
        opacity: 1
    }

.blog-img > a, .single-post-img a {
    display: block;
    line-height: 0;
}

.blog-sidebar.right {
    margin-left: 70px
}

.blog-area .pagination {
    margin-bottom: 0
}

.single-post-content {
    overflow: hidden
}

    .single-post-content h4 {
        color: #303030;
        font-size: 1rem; /* 16px */
        font-weight: 600;
        font-family: 'Poppins', sans-serif;
        margin-bottom: 8px;
        margin-top: 5px;
    }

    .single-post-content p {
        color: #606060;
        font-size: 0.75rem; /* 12px */
        font-family: 'Poppins', sans-serif;
        margin-bottom: 0px;
    }

.single-tag a {
    float: left;
    text-transform: capitalize;
    border: 1px solid #E1E1E1;
    padding: 6px 14px;
    font-size: 0.875rem; /* 14px */
    font-weight: 300;
    font-family: 'Poppins', sans-serif;
    display: block;
    color: #606060;
    -webkit-transition: all 0.5s ease 0s;
    -o-transition: all 0.5s ease 0s;
    transition: all 0.5s ease 0s;
}

    .single-tag a:hover {
        color: #fff;
        background: #2C2B5E;
        border: 1px solid #2C2B5E;
    }

.blog-details-content {
    padding-top: 30px
}

    .blog-details-content h2 {
        font-size: 1.5rem; /* 24px */
        color: #303030;
        text-transform: uppercase;
        font-family: 'Poppins', sans-serif;
        margin-bottom: 5px;
    }

    .blog-details-content h6 {
        font-size: 1rem; /* 16px */
        color: #606060;
        font-family: 'Poppins', sans-serif;
        font-weight: 400;
        margin-bottom: 35px;
    }

    .blog-details-content p {
        font-family: 'Poppins', sans-serif;
        font-size: 0.875rem; /* 14px */
        color: #606060;
        margin-bottom: 25px;
    }

        .blog-details-content p.quote {
            font-family: 'Poppins', sans-serif;
            font-size: 1rem; /* 16px */
            color: #606060;
            margin-bottom: 25px;
            font-style: italic;
            line-height: 25px;
            margin-top: 35px;
        }

.reply-area h3 {
    font-size: 1.25rem; /* 20px */
    color: #303030;
    text-transform: uppercase;
    font-family: 'Poppins', sans-serif;
    margin-top: 58px;
    margin-bottom: 15px;
}

.reply-area form {
    position: relative
}

.reply-area p {
    font-size: 0.875rem; /* 14px */
    color: #606060;
    font-weight: 400;
    margin-bottom: 26px;
}

.reply-area form p {
    font-size: 0.875rem; /* 14px */
    color: #030303;
    font-weight: 600;
    margin-bottom: 10px;
}

.reply-area form input, .reply-area form textarea {
    border: 1px solid #E1E1E1;
    height: 42px;
    width: 100%;
    margin-bottom: 20px;
    padding: 0 15px;
}

.reply-area form textarea {
    height: auto;
    margin-bottom: 40px;
    padding: 15px;
}

.reply-area form .reply-btn {
    background: #2C2B5E;
    color: #fff;
    text-transform: uppercase;
    font-family: 'Poppins', sans-serif;
    padding: 8px 25px;
    font-weight: 700;
    display: inline-block;
}

    .reply-area form .reply-btn:hover {
        background: #BBA687;
        -webkit-transition: all 0.5s ease 0s;
        -o-transition: all 0.5s ease 0s;
        transition: all 0.5s ease 0s;
    }

#contact-form .form-message {
    margin-top: 15px;
    margin-bottom: 0;
}
/*----------------------------------------*/
/*  10. Subscribe CSS
/*----------------------------------------*/
.subscribe-area {
    background: #FAFAFA
}

.subscribe-content h2 {
    margin-bottom: 5px;
}

.subscribe-content p {
    margin-bottom: 16px;
    color: #606060;
    font-family: 'Poppins', sans-serif;
    margin-bottom: 25px;
}

.newsletter-form form {
    position: relative;
}

    .newsletter-form form input {
        border: 1px solid #E1E1E1;
        width: 100%;
        background: transparent;
        padding: 13px 180px 13px 30px;
    }

    .newsletter-form form button {
        padding: 11px 30px 12px;
        position: absolute;
        right: 1px;
        top: 1px;
    }

        .newsletter-form form button:hover {
            background: #2C2B5E;
            color: #fff;
        }

.mc-news {
    left: -5000px;
    position: absolute;
}
/*----------------------------------------*/
/*  11. Scrollup CSS
/*----------------------------------------*/
#scrollUp {
    border-radius: 2px;
    bottom: 15px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.05);
    color: #ffffff;
    font-size: 1.5rem; /* 24px */
    height: 40px;
    line-height: 45px;
    position: fixed;
    right: 15px;
    text-align: center;
    transition: all 0.3s ease 0s;
    width: 40px;
    z-index: 200;
}

@keyframes scroll-top {
    0% {
        bottom: 0;
        opacity: 0;
    }

    50% {
        bottom: 50%;
        opacity: 1;
    }

    100% {
        bottom: 75%;
        opacity: 0;
    }
}

#scrollUp:hover i {
    animation: 800ms linear 0s normal none infinite running scroll-top;
    bottom: 0;
    height: 100%;
    left: 0;
    margin-bottom: -25px;
    position: absolute;
    width: 100%;
}

#scrollUp i {
    color: #ffffff;
}

#scrollUp {
    background: #BBA687 none repeat scroll 0 0;
}
/*----------------------------------------*/
/*  12. Footer CSS
/*----------------------------------------*/
.footer-area.three .main-footer {
    padding-bottom: 50px;
}

.footer-area.two .main-footer {
    padding-top: 85px;
    padding-bottom: 60px
}

.single-widget h3 {
    font-size: 1.25rem; /* 20px */
    font-weight: 700;
    text-transform: uppercase;
    font-family: 'Poppins', sans-serif;
    color: #606060;
    margin-bottom: 45px;
    position: relative;
}

    .single-widget h3::after {
        background: #606060 none repeat scroll 0 0;
        bottom: -10px;
        content: "";
        height: 1px;
        left: 0;
        position: absolute;
        width: 57px;
    }

    .single-widget h3::before {
        background: #606060 none repeat scroll 0 0;
        bottom: -13px;
        content: "";
        height: 1px;
        left: 0;
        position: absolute;
        width: 45px;
    }

.single-widget p {
    color: #606060; /* #7d7d7d */
    font-family: 'Poppins', sans-serif;
    font-size: 0.875rem; /* 14px */
    font-weight: 400;
    line-height: 23px;
    margin-bottom: 15px;
}

.single-widget ul {
    margin-top: 25px
}

.footer-social ul li {
    display: inline-block;
    margin-right: 13px;
}

    .footer-social ul li:last-child {
        margin-right: 0px;
    }

.single-widget ul li {
    color: #606060; /* #7d7d7d */
    font-family: 'Poppins', sans-serif;
    font-size: 0.875rem; /* 14px */
    font-weight: 400;
    margin-bottom: 16px;
    text-transform: capitalize;
}

.footer-social ul li a {
    border: 1px solid #DADADA;
    color: #606060; /* #7d7d7d */
    height: 28px;
    width: 28px;
    border-radius: 50%;
    display: block;
    text-align: center;
    line-height: 26px;
    -webkit-transition: all 0.5s ease 0s;
    -o-transition: all 0.5s ease 0s;
    transition: all 0.5s ease 0s;
}

.footer-area.two .footer-social ul li a {
    border: 1px solid #7A7A93;
    color: #c7c7c7;
}

.footer-social ul li:hover a, .footer-area.two .footer-social ul li:hover a {
    border: 1px solid #BBA687;
    background: #BBA687;
    color: #fff;
}

.single-widget ul li:last-child {
    margin-right: 0px;
}

.footer-bottom {
    background: #000
}

    .footer-bottom p {
        color: #fff;
        font-size: 0.875rem; /* 14px */
        /* line-height: 60px;*/
        margin-bottom: 2px;
        font-family: 'Poppins', sans-serif;
        text-wrap-style: balance;
    }

.footer-area.three .footer-bottom.two p {
    line-height: 48px;
    margin-bottom: 0;
}

.footer-area.three .footer-bottom.two .footer-social ul {
    padding: 15px 0 15px;
}

.footer-bottom p a {
    color: #BBA687;
    font-weight: 600;
    -webkit-transition: all 0.5s ease 0s;
    -o-transition: all 0.5s ease 0s;
    transition: all 0.5s ease 0s;
}

    .footer-bottom p a:hover {
        text-decoration: underline;
    }

.main-footer .col-md-3:last-child {
    padding-left: 75px
}

.footer-area.two .single-widget a {
    float: left;
    display: block
}

.footer-area.two .single-widget ul li a {
    float: none
}

.footer-area.two .main-footer .col-md-3:last-child {
    padding-left: 50px;
}

.footer-area.three .footer-bottom {
    background: #fafafa none repeat scroll 0 0;
    padding: 75px 0 55px;
}

    .footer-area.three .footer-bottom p a {
        color: #c7c7c7;
    }

    .footer-area.three .footer-bottom p {
        margin-bottom: 10px;
    }

.footer-bottom .footer-social ul {
    padding: 17px 0 15px;
}

.single-widget.instagram a {
    position: relative;
    line-height: 0;
}

    .single-widget.instagram a:after {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        opacity: 0;
        content: "";
        background: rgba(236, 28, 35, 0.5) none repeat scroll 0 0;
        -webkit-transition: all 0.5s ease 0s;
        -o-transition: all 0.5s ease 0s;
        transition: all 0.5s ease 0s;
    }

    .single-widget.instagram a:hover::after, .single-widget.instagram a:hover i {
        opacity: 1
    }

    .single-widget.instagram a i {
        position: absolute;
        z-index: 1;
        color: #fff;
        opacity: 0;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        -webkit-transition: all 0.5s ease 0s;
        -o-transition: all 0.5s ease 0s;
        transition: all 0.5s ease 0s;
    }
/*----------------------------------------*/
/*  13. Service CSS
/*----------------------------------------*/
.single-service {
    padding: 40px 40px;
    box-shadow: 0 0 4px 0 #ddd;
}

.service-area h3 {
    font-size: 1.25rem; /* 20px */
    color: #303030;
    font-weight: 700;
    font-family: 'Poppins', sans-serif;
    margin-bottom: 12px;
}

.service-area p {
    font-size: 0.875rem; /* 14px */
    color: #606060;
    font-family: 'Poppins', sans-serif;
    margin-bottom: 0px;
}
/*----------------------------------------*/
/*  14. About CSS
/*----------------------------------------*/
.about-content h2 {
    font-size: 2.125rem; /* 34px */
    color: #303030;
    font-weight: 700;
    font-family: 'Poppins', sans-serif;
    margin-top: 100px;
    margin-bottom: 10px;
    text-transform: uppercase;
}

    .about-content h2 span {
        color: #BBA687;
    }

.about-content p {
    font-size: 0.875rem; /* 14px */
    color: #606060;
    font-family: 'Poppins', sans-serif;
    margin-bottom: 10px;
}

.about-content a {
    margin-top: 25px;
    padding: 10px 44px;
    -webkit-transition: all 0.5s ease 0s;
    -o-transition: all 0.5s ease 0s;
    transition: all 0.5s ease 0s;
}

    .about-content a:hover {
        color: #fff;
        background: #2C2B5E;
    }

.about-img {
    position: relative;
    z-index: 1;
    margin-right: -30px;
    padding: 0 20px;
}

    .about-img:after {
        position: absolute;
        border: 10px solid #EBEBEB;
        left: 0;
        bottom: -5px;
        width: 100%;
        content: "";
        height: 88%;
        z-index: -1;
    }
/*----------------------------------------*/
/*  15. Teacher CSS
/*----------------------------------------*/
.single-teacher {
    position: relative;
    box-shadow: 0px 0px 6px 0px rgba(0, 0, 0, 0.15);
    overflow: hidden;
}

.single-teacher-img {
    line-height: 0;
    padding-bottom: 91px;
}

    .single-teacher-img a {
        position: relative;
        display: block;
    }

        .single-teacher-img a:after {
            position: absolute;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            content: "";
            background: rgba(231, 231, 231, 0.84);
            opacity: 0;
            -webkit-transition: all 0.5s ease 0s;
            -o-transition: all 0.5s ease 0s;
            transition: all 0.5s ease 0s;
        }

.single-teacher:hover .single-teacher-img a:after {
    opacity: 1
}

.single-teacher-content {
    background: #fff none repeat scroll 0 0;
    bottom: -70px;
    left: 0;
    padding: 20px 0 30px;
    position: absolute;
    width: 100%;
    -webkit-transition: all 0.5s ease 0s;
    -o-transition: all 0.5s ease 0s;
    transition: all 0.5s ease 0s;
}

.single-teacher-img img {
    width: 100%;
}

.single-teacher:hover .single-teacher-content {
    bottom: 00px
}

.single-teacher-content h2 {
    color: #303030;
    font-family: 'Poppins', sans-serif;
    font-size: 1.375rem; /* 22px */
    font-weight: 700;
    margin-bottom: 3px;
    text-transform: uppercase;
}

.single-teacher-content h4 {
    color: #929292;
    font-size: 0.875rem; /* 14px */
    font-weight: 600;
    font-family: 'Poppins', sans-serif;
    text-transform: capitalize;
    margin-bottom: 20px;
}

.single-teacher-content ul li {
    display: inline-block;
    margin-right: 5px;
}

    .single-teacher-content ul li:last-child {
        margin-right: 0px;
    }

    .single-teacher-content ul li a i {
        font-size: 0.9375rem; /* 15px */
        color: #2c2b5e;
        background: #F6F6F6;
        height: 40px;
        width: 38px;
        text-align: center;
        line-height: 40px;
        -webkit-transition: all 0.5s ease 0s;
        -o-transition: all 0.5s ease 0s;
        transition: all 0.5s ease 0s;
    }

    .single-teacher-content ul li:hover a i {
        color: #fff;
        background: #BBA687;
    }

.pagination ul {
    margin-top: 24px
}

    .pagination ul li {
        display: inline-block;
        margin-right: 12px
    }

        .pagination ul li:last-child {
            margin-right: 0px
        }

        .pagination ul li a {
            font-size: 1.125rem; /* 18px */
            font-weight: 600;
            font-family: 'Poppins', sans-serif;
            color: #606060;
            background: #fff;
            text-align: center;
            line-height: 36px;
            height: 38px;
            width: 38px;
            display: block;
            border: 1px solid #EBEBEB;
            -webkit-transition: all 0.5s ease 0s;
            -o-transition: all 0.5s ease 0s;
            transition: all 0.5s ease 0s;
        }

        .pagination ul li:hover a {
            color: #fff;
            background: #2C2B5E;
        }

.teacher-details-content {
    margin-top: 26px
}

    .teacher-details-content h2 {
        color: #303030;
        font-family: 'Poppins', sans-serif;
        font-size: 2rem; /* 32px */
        margin-bottom: 3px;
        text-transform: uppercase;
    }

    .teacher-details-content h5 {
        font-size: 1.375rem; /* 22px */
        color: #929292;
        font-family: 'Poppins', sans-serif;
        margin-bottom: 40px;
        font-weight: 400;
    }

    .teacher-details-content h4 {
        font-size: 1.5rem; /* 24px */
        color: #303030;
        font-family: 'Poppins', sans-serif;
        margin-bottom: 18px;
        font-weight: 700;
        text-transform: uppercase;
    }

    .teacher-details-content p {
        font-size: 0.875rem; /* 14px */
        color: #606060;
        font-family: 'Poppins', sans-serif;
        margin-bottom: 38px;
    }

    .teacher-details-content ul li span {
        font-size: 0.875rem; /* 14px */
        color: #303030;
        font-family: 'Poppins', sans-serif;
        font-weight: 700;
        text-transform: uppercase;
    }

    .teacher-details-content ul li {
        font-weight: 600;
        margin-bottom: 15px;
    }

.teacher-contact, .skill-area {
    margin-top: 58px
}

.skill-area {
    margin-left: 40px
}

    .teacher-contact h4, .skill-area h4 {
        font-size: 1.25rem; /* 20px */
        color: #303030;
        text-transform: uppercase;
        margin-bottom: 25px;
    }

.teacher-contact p span {
    font-size: 0.875rem; /* 14px */
    font-weight: 700;
    color: #303030;
    text-transform: uppercase;
}

.teacher-contact p {
    font-weight: 600;
    color: #606060;
    margin-bottom: 10px;
}

.teacher-contact ul {
    margin-top: 30px
}

    .teacher-contact ul li {
        font-weight: 600;
        color: #606060;
        display: inline-block;
        margin-right: 5px;
    }

        .teacher-contact ul li a i {
            font-size: 0.9375rem; /* 15px */
            color: #2c2b5e;
            background: #F6F6F6;
            text-align: center;
            line-height: 30px;
            width: 34px;
            height: 32px;
            -webkit-transition: all 0.5s ease 0s;
            -o-transition: all 0.5s ease 0s;
            transition: all 0.5s ease 0s;
        }

        .teacher-contact ul li:hover a i {
            color: #F6F6F6;
            background: #2c2b5e;
        }

.skill-bar-item > span {
    color: #606060;
    display: block;
    font-family: 'Poppins', sans-serif;
    font-size: 0.875rem; /* 14px */
    font-weight: 600;
    margin-bottom: 12px;
    text-transform: capitalize;
}

.skill-bar-item {
    overflow: hidden;
    padding-top: 5px;
    margin-left: 40px
}

.progress {
    background-color: #e8e8e8;
    border-radius: 0;
    height: 10px;
    margin-bottom: 40px;
    overflow: visible;
}

.progress-bar {
    background-color: #d4d3d3;
    position: relative;
    box-shadow: none;
    overflow: visible;
}

    .progress-bar span.text-top {
        background: #e6e6e6 none repeat scroll 0 0;
        color: #606060;
        font-size: 0.75rem; /* 12px */
        font-weight: 600;
        padding: 2px 10px;
        position: absolute;
        right: 0;
        top: -38px;
        z-index: 8;
    }

.skill-bar-item .text-top::after {
    -moz-border-bottom-colors: none;
    -moz-border-left-colors: none;
    -moz-border-right-colors: none;
    -moz-border-top-colors: none;
    border-color: #e6e6e6 rgba(0, 0, 0, 0) rgba(0, 0, 0, 0);
    border-image: none;
    border-style: solid;
    border-width: 7px;
    bottom: -14px;
    content: "";
    height: 0;
    left: 0;
    margin: auto;
    position: absolute;
    right: 0;
    width: 0;
}
/*----------------------------------------*/
/*  16. Contact CSS
/*----------------------------------------*/
.contact-contents {
    box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.13);
    padding: 55px 0;
    margin-right: 65px;
}

.contact-icon {
    border: 1px solid #e3e3e3;
    border-radius: 50%;
    height: 50px;
    margin: auto auto 20px;
    position: relative;
    text-align: center;
    width: 50px;
}

    .contact-icon img {
        bottom: 0;
        margin: auto;
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
    }

.contact-add h3 {
    font-size: 1.125rem; /* 18px */
    color: #303030;
    font-weight: 600;
    font-family: 'Poppins', sans-serif;
    text-transform: capitalize;
    margin-bottom: 8px;
}

.contact-add p {
    font-size: 1rem; /* 16px */
    color: #606060;
    font-family: 'Poppins', sans-serif;
    margin-bottom: 0px;
}

.contact-area .reply-area h3 {
    margin-top: 0
}
/*---------------------
  17. Login CSS
-------------------------*/
.login-form-container {
    background: #f5f5f5 none repeat scroll 0 0;
    overflow: hidden;
    padding: 37px 40px;
    text-align: left;
}

.login-text {
    text-align: center;
    margin-bottom: 30px;
}

    .login-text h2 {
        color: #444;
        font-size: 1.875rem; /* 30px */
        margin-bottom: 5px;
        text-transform: capitalize;
    }

    .login-text span {
        font-size: 0.9375rem; /* 15px */
    }

.login-form-container input {
    background: #ffffff none repeat scroll 0 0;
    border-radius: 3px;
    color: #666666;
    margin-bottom: 20px;
    font-size: 0.875rem; /* 14px */
    height: 40px;
    padding-left: 10px;
    width: 100%;
    border: medium none rgba(0, 0, 0, 0);
    box-shadow: none;
}

    .login-form-container input::-moz-placeholder {
        color: #666666;
    }

    .login-form-container input::-webkit-input-placeholder {
        color: #666666;
        opacity: 1;
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
    }

.login-toggle-btn {
    padding-top: 20px;
}

.login-form-container input[type="checkbox"] {
    height: 15px;
    margin: 0;
    position: relative;
    top: 1px;
    width: 17px;
}

.login-form-container label {
    color: #606060;
    font-size: 0.9375rem; /* 15px */
    font-weight: 400;
}

.login-toggle-btn > a {
    color: #BBA687;
    float: right;
    -webkit-transition: all 0.2s ease 0s;
    transition: all 0.2s ease 0s;
}

    .login-toggle-btn > a:hover {
        color: #444;
    }

.button-box .default-btn {
    background: transparent none repeat scroll 0 0;
    border: 1px solid #BBA687;
    border-radius: 30px;
    color: #BBA687;
    font-size: 0.875rem; /* 14px */
    margin-top: 40px;
    padding: 8px 36px;
    text-transform: uppercase;
    -webkit-transition: all 0.5s ease 0s;
    transition: all 0.5s ease 0s;
}

    .button-box .default-btn:after, .button-box .default-btn:before {
        display: none
    }

    .button-box .default-btn:hover {
        background-color: #BBA687;
        border: 1px solid #BBA687;
        color: #fff;
    }




/* Carousel styling */

/* Responsive improvements for #siteCarousel */

/* Make carousel images respect aspect ratio and scale responsively */
#siteCarousel {
    margin-bottom: 2rem;
    overflow: hidden;
}

    /* Use aspect-ratio when supported; fall back to vh heights */
    /*#siteCarousel .carousel-image {
        width: 100%;
        height: auto;
        object-fit: cover;
        object-position: center;
        display: block;*/
        /* Prefer a responsive aspect ratio for consistent layout */
        /*aspect-ratio: 16 / 7;
        max-height: 70vh;
    }*/

/* Carousel - hidden by default, positioned absolutely to prevent layout shift */
    #siteCarousel .carousel-image {
        transition: opacity 0.4s ease-in-out;
        aspect-ratio: 16 / 7;
        max-height: 70vh;
        border-radius: 15px;
        z-index: 1;
        width: 100%;
        height: auto;
        object-fit: cover;
        object-position: center;
        display: block;
    }

/* Fallback for browsers not supporting aspect-ratio:
   maintain a sensible height on large screens, smaller on mobile */
@supports (aspect-ratio: 1 / 1) {
    /* handled above */
}

@supports not (aspect-ratio: 1 / 1) {
    #siteCarousel .carousel-image {
        height: 60vh;
    }

    @media (max-width: 767.98px) {
        #siteCarousel .carousel-image {
            height: 40vh;
        }
    }
}

/* Ensure each item centers content and doesn't collapse */
#siteCarousel .carousel-item {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 0;
}

/* Caption container: responsive widths and safe padding */
#siteCarousel .carousel-caption {
    background: linear-gradient(180deg, rgba(0,0,0,0.35) 0%, rgba(0,0,0,0.45) 100%);
    border-radius: 8px;
    padding: 1rem 1.25rem;
    max-width: 55%;
    margin: 0;
    box-sizing: border-box;
}

    /* Responsive caption positioning */
    #siteCarousel .carousel-caption.text-start {
        left: 2rem;
        right: auto;
        text-align: left;
        transform: none;
    }

    #siteCarousel .carousel-caption.text-end {
        right: 2rem;
        left: auto;
        text-align: right;
        transform: none;
    }

@media (max-width: 1199.98px) {
    #siteCarousel .carousel-caption {
        max-width: 65%;
    }
}

@media (max-width: 991.98px) {
    #siteCarousel .carousel-caption {
        max-width: 85%;
        left: 1rem;
        right: 1rem;
        text-align: center;
        margin: 0 auto;
    }

        #siteCarousel .carousel-caption.text-start,
        #siteCarousel .carousel-caption.text-end {
            left: 1rem;
            right: 1rem;
            text-align: center;
        }
}

@media (max-width: 575.98px) {
    #siteCarousel .carousel-caption {
        padding: .75rem;
        max-width: calc(100% - 2rem);
    }
}

/* Fluid, accessible font sizing using clamp() so text scales smoothly */
#siteCarousel .carousel-title {
    color: #ffffff;
    font-size: clamp(1.25rem, 3.6vw, 1.75rem);
    font-weight: 700;
    margin-bottom: .25rem;
    line-height: 1.08;
}

#siteCarousel .carousel-subtitle {
    color: rgba(255,255,255,0.92);
    font-size: clamp(.9rem, 2.2vw, 1rem);
    margin-bottom: .75rem;
}

/* CTA button responsive */
#siteCarousel .btn-cta {
    background-color: #BBA687;
    color: #111;
    border: 0;
    padding: .5rem .9rem;
    font-weight: 700;
    border-radius: 6px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.12);
    text-decoration: none;
    display: inline-block;
    font-size: clamp(.85rem, 1.8vw, 1rem);
}

    #siteCarousel .btn-cta:hover,
    #siteCarousel .btn-cta:focus {
        background-color: #897962;
        color: #fff;
        outline: none;
    }

/* Indicators: keep visible and tappable on mobile */
#siteCarousel .carousel-indicators {
    bottom: 1rem;
}

    #siteCarousel .carousel-indicators [data-bs-target] {
        width: 10px;
        height: 10px;
        border-radius: 50%;
        background-color: rgba(255,255,255,0.5);
        margin: 0 .5rem; /* changed from .25rem */
    }

    #siteCarousel .carousel-indicators .active {    
        background-color: #BBA687;
        box-shadow: 0 0 0 3px rgba(187, 166, 135,0.15);
    }

/* Controls: ensure they don't overlap caption on small screens */
.carousel-control-prev,
.carousel-control-next {
    width: 56px;
    height: 56px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border-radius: 50%;
}

.carousel-control-prev-icon,
.carousel-control-next-icon {
    filter: invert(1) brightness(2);
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background-color: rgba(0,0,0,0.45);
    background-size: 100% 100%;
}

/* On very small screens, reduce control size and move indicators up */
@media (max-width: 575.98px) {
    .carousel-control-prev,
    .carousel-control-next {
        width: 44px;
        height: 44px;
    }

    #siteCarousel .carousel-indicators {
        bottom: .5rem;
    }
}

/* Crossfade timing tuned */
#siteCarousel.carousel-fade .carousel-item {
    transition: opacity .7s ease-in-out;
}

/* Ensure captions and CTA are above the image overlay */
#siteCarousel .carousel-caption,
#siteCarousel .btn-cta {
    z-index: 3;
}

    /* Make sure long caption text wraps and is readable */
    #siteCarousel .carousel-caption p,
    #siteCarousel .carousel-caption h2 {
        word-wrap: break-word;
        overflow-wrap: break-word;
    }

/* If you need a tighter mobile image crop */
@media (max-width: 767.98px) {
    #siteCarousel .carousel-image {
        object-position: center top;
        aspect-ratio: 16 / 9;
    }
}

/* Optional: keep layout stable when images load late */
#siteCarousel .carousel-item img {
    display: block;
    width: 100%;
    height: auto;
    min-height: 1px;
}

#siteCarousel .carousel-inner {
    border-radius: 15px;
}




.main-footer .container {
    background: #fff;
}

header .container {
    background: #fff;
}

body {
    /*  background: #787676;*/
    background: #fff;
}



.container:has(#main-content) {
    background: #fff;
}

/*.single-service {
    text-align: center;
}*/

.event-area .card-body {
    padding: inherit;
}



.event-date div.header {
    color: #fefefe; /*#BBA687;*/ /* #fefefe */
    font-size: 1.875rem;
    line-height: 32px;
    padding: 11px 18px 11px;
    text-align: center;
    font-weight: 700;
    margin: 0;
}


.event-content-left div.header {
    font-size: 1rem;
    color: #303030;
    font-weight: 700;
    font-family: 'Poppins', sans-serif;
    text-transform: uppercase;
    margin-bottom: 5px;
}

/* Varsity custom font */
/*@font-face {
    font-family: "Varsity";
    src: url("/assets/fonts/varsity_regular.woff2") format("woff2"), url("/assets/fonts/varsity_regular.woff") format("woff"), url("/assets/fonts/varsity_regular.ttf") format("truetype");*/ /* if you have .ttf */
    /*  font-weight: 400;*/
    /*font-style: normal;
    font-display: swap;
   
}*/


/* Logo Container - Flexbox Layout */
/*.logo-container {
    display: flex;
    align-items: center;*/
   /* gap: 15px;*/
    /*flex-wrap: nowrap;
}*/

/* Logo Image - Responsive Sizing */
/*.logo img {*/
   /* width: 100%;*/
    /*max-width: 100px;
    height: auto;
    display: block;
    transition: max-width 0.3s ease;
    flex-shrink: 0;*/ /* Prevent logo from shrinking */
/*}*/

/* Logo Text - Always to the right */
/*.logoText {
    display: inline-block;
    line-height: 1.3;
    font-weight: 700;
    text-transform: uppercase;
    white-space: nowrap;*/ /* Keep on one line initially */
    /*font-family: "Varsity", "cursive","Open Sans", sans-serif;*/
    /*font-family: "Mulish","Open Sans";
}

.logo-title,
.logo-subtitle {
    font-size: clamp(.75rem, 5vw, 3.1rem);
    color: #000;
}*/

/* Tablet sizing (below 1024px) */
/*@media (max-width: 1399px) {
    .logo img {
        max-width: 80px;
    }

    .logo-container {
        gap: 12px;
    }*/

   /* .logo-title,
    .logo-subtitle {
        font-size: clamp(1.25rem, 2.2vw, 3rem);
    }*/

    /*.logo-title,
    .logo-subtitle {
        font-size: clamp(.75rem, 3vw, 3rem);
    }

}*/

/* Tablet sizing (below 1024px) */
/*@media (max-width: 1199px) {
    .logo img {
        max-width: 80px;
    }

    .logo-container {
        gap: 12px;
    }*/

    /*.logo-title,
    .logo-subtitle {
        font-size: clamp(1.25rem, 2.2vw, 2.3rem);
    }*/

    /*.logo-title,
    .logo-subtitle {
        font-size: clamp(1.25rem, 2.8vw, 2.3rem);
    }
}*/



/* Stack text internally below 900px, but keep to the right of logo */
/*@media (max-width: 991px) {
    .logoText {
        white-space: normal;*/ /* Allow text to wrap/stack */
        /*line-height: 1.2;
    }

    .logo-title {
        display: block;
    }

    .logo-subtitle {
        display: block;
    }

    .logo-title,
    .logo-subtitle {
        font-size: clamp(1.25rem, 2.2vw, 1.6rem);
    }
}*/

/* Further reduce sizes on smaller tablets */
/*@media (max-width: 768px) {
    .logo img {
        max-width: 80px;
    }

    .logo-container {
        gap: 10px;
        width: 450px;
    }

    .logo-title,
    .logo-subtitle {
        font-size: clamp(1rem, 2vw, 1.4rem);
    }
}*/

/* Mobile sizing (below 576px) - logo stays to left, text to right */
/*@media (max-width: 576px) {
    .logo img {
        max-width: 60px;
    }

    .logo-container {
        gap: 8px;
        width: 350px;
    }

    .logo-title {
        font-size: 1rem;
    }

    .logo-subtitle {
        font-size: 1rem;
    }
}*/

/* Extra small devices */
/*@media (max-width: 400px) {
    .logo img {
        max-width: 50px;
    }

    .logo-container {
        gap: 6px;
        width:350px;
    }

    .logo-title {
        font-size: 0.80rem;
    }

    .logo-subtitle {
        font-size: 0.80rem;
    }
}*/



/* Logo layout: title on top, subtitle below; responsive break behavior */
.logo-container {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: nowrap;
}

.logo {
    flex-shrink: 0;
}

    .logo img {
        max-width: 100px;
        height: auto;
        display: block;
        transition: max-width 0.3s ease;
    }

.logoText {
    display: flex;
    flex-direction: column; /* title above subtitle */
    justify-content: center;
    align-items: flex-start;
    line-height: 1.1;
}

/* Title and subtitle styles */
.logo-title {
    font-weight: 700;
    color: #000;
    font-size: 2.5rem;
    line-height: 1.05;
    display: inline; /* allows inline on large screens */
}

.logo-subtitle {
    font-size: 1rem;
    font-style: italic;
    color: #6b6b6b;
    margin-top: 4px;
    display: inline-block;
}

@media (max-width: 1199px) {
    .logo-title {
        font-size: 2rem;
    }

    .logo-subtitle {
        font-size: 1rem;
    }
}



@media (max-width: 991px) {
    .logo-title {
        font-size: 1.45rem;
    }
    .logo-subtitle {
        font-size: 1rem;
    }
}


/* Responsive: below 768px hide subtitle and force title to stack */
@media (max-width: 767.98px) {
    .logo img {
        max-width: 80px;
    }

    /* hide subtitle on small screens */
    .logo-subtitle {
        display: none !important;
    }

    /* Force title to stack into two lines if HTML contains separate spans
       (.line1 and .line2). If not, the max-width will encourage wrapping. */
    .logo-title {
        display: block;
        white-space: normal;
        width: 380px; /* tweak to control where wrapping occurs */
        font-size: 1.5rem;
    }

        /* If you adopt the .line1/.line2 HTML approach, show them as blocks */
        .logo-title .line1,
        .logo-title .line2 {
            display: block;
        }


  /*  .header-sticky .container {
        border-top-left-radius: 0px !important;
        border-top-right-radius: 0px !important;
        
    }*/

}

@media (max-width: 576px) {
    .logo img {
        max-width: 80px;
    }

    /* hide subtitle on small screens */
    .logo-subtitle {
        display: none !important;
    }

    /* Force title to stack into two lines if HTML contains separate spans
       (.line1 and .line2). If not, the max-width will encourage wrapping. */
    .logo-title {
        display: block;
        white-space: normal;
        width: 180px; /* tweak to control where wrapping occurs */
        font-size: 1.1rem;
    }

        /* If you adopt the .line1/.line2 HTML approach, show them as blocks */
        .logo-title .line1,
        .logo-title .line2 {
            display: block;
        }

   
}

/* Minor adjustments for very small screens */
@media (max-width: 400px) {
    .logo img {
        max-width: 60px;
    }

    .logo-title {
        max-width: 200px;
        font-size: 0.95rem;
    }
}

/* Adjust service-area.two to leave 50px space on each side (responsive) */
.service-area.two {
    width: calc(100% - 100px); /* full width minus 50px each side */
    margin: 0px 50px 0; /* preserve overlap and center with 50px side gutters */
    position: relative;
    z-index: 20;
    /* box-shadow: 0 5px 5px rgba(0,0,0,0.12);*/
    /*  background-color: #fff;*/
    /*  box-sizing: border-box;
    border-radius: 5px;*/
    /* background-color: rgb(243 202 79)*/
    /* Gradient background */
   /* border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    background: linear-gradient(180deg, rgb(243 202 79) 0%, rgb(243 202 79) 0%, #ffffff 100%);*/
}
  



    /* Slightly smaller gutters on medium screens */
    @media (max-width: 991.98px) {
    .service-area.two {
        width: calc(100% - 80px);
        margin: -75px 40px 0;
    }
}

/* Reduce overlap and gutters on tablets */
@media (max-width: 767.98px) {
    .service-area.two {
        width: calc(100% - 40px);
       /* margin: -50px 20px 0;*/
        margin: 50px 20px 0;
    }
}

/* Mobile: small gutters so content remains usable */
@media (max-width: 575.98px) {
    .service-area.two {
        width: calc(100% - 30px);
        margin: 40px 15px 0;
        /*margin: -40px 15px 0;*/
    }
}


/* Raise carousel captions and indicators so they sit above the overlapping .service-area.two */
#siteCarousel .carousel-caption {
    bottom: calc(1rem + 75px) !important;
    z-index: 40; /* above .service-area.two (z-index:20) */
    transition: bottom 0.25s ease;
}

#siteCarousel .carousel-indicators {
    bottom: calc(1rem + 25px) !important;
    z-index: 40;
    transition: bottom 0.25s ease;
}

/* Match the service-area.two overlap adjustments at breakpoints */
@media (max-width: 991.98px) {
    #siteCarousel .carousel-caption {
        bottom: calc(1rem + 50px) !important;
    }


  
    #siteCarousel .carousel-indicators {
        bottom: calc(1rem + 0px) !important;
    }
}

@media (max-width: 767.98px) {
    #siteCarousel .carousel-caption {
        bottom: calc(1rem + 25px) !important;
    }


    #siteCarousel .carousel-indicators {
        bottom: calc(1rem - 25px) !important;
    }
}

@media (max-width: 575.98px) {
    /* indicators used .5rem on very small screens earlier — keep that and add the overlap */
    #siteCarousel .carousel-caption {
        bottom: calc(.5rem + 20px) !important;
    }



    #siteCarousel .carousel-indicators {
        bottom: calc(.5rem - 25px) !important;
    }
}

.carousel-caption {
    display: none;
}


.mainIconsBottomBorder {
    border-bottom: 2px solid #BBA687; /* Adjust the width, style, and color as needed */
    padding-bottom: 5px; /* Optional: Add padding for space between icon and border */
}

/*.mainIconsBottomBorder:hover {
    border-bottom: 2px solid #000;*/ /* Adjust the width, style, and color as needed */
    /*padding-bottom: 5px;*/ /* Optional: Add padding for space between icon and border */
/*}*/

.makePop:hover {
    color: #BBA687;

    .mainIconsBottomBorder {
        border-bottom: 2px solid #000; /* Adjust the width, style, and color as needed */
        padding-bottom: 5px; /* Optional: Add padding for space between icon and border */
    }
}

/*.btnOne {
    --fa-primary-color: #2C2B5E;
    --fa-secondary-color: #3f6b3b;
}

    .btnOne:hover {
        --fa-primary-color: #BBA687;
        --fa-secondary-color: #000;
    }

.btnTwo {
    --fa-primary-color: #197ce3;
    --fa-secondary-color: #6ca8e8;
}

.btnTwo:hover {
    --fa-primary-color: #BBA687;
    --fa-secondary-color: #000;
}

.btnThree {
    --fa-primary-color: #8537e9;
    --fa-secondary-color: #BBA687;
}

.btnThree:hover {
    --fa-primary-color: #BBA687;
    --fa-secondary-color: #000;
}


.btnFour {
    --fa-primary-color: red;
    --fa-secondary-color: gray;
}

.btnFour:hover {
    --fa-primary-color: #BBA687;
    --fa-secondary-color: #000;
}


.btnFive {
    --fa-primary-color: #d0b057;
    --fa-secondary-color: black;
    --fa-secondary-opacity: 1;
}

.btnFive:hover {
    --fa-primary-color: gray;
    --fa-secondary-color: orange;
}

.btnSix {
    --fa-primary-color: #BBA687;
    --fa-secondary-color:#000;
}

    .btnSix:hover {
        --fa-primary-color: #000;
        --fa-secondary-color: #BBA687;
    }
*/


/* Accordion header: closed = black bg with white text; opened = #BBA687 bg with black text */
/*.event-area .accordion .accordion-button {
    background: #000;*/ /* closed background */
    /*color: #fff;*/ /* closed text */
    /*border: none;
    font-weight: 700;
    transition: background-color 160ms ease, color 160ms ease;
    box-shadow: none;*/ /* override default focus shadow */
/*}*/

    /* Ensure the caret/inset icon follows the text color where possible */
    /*.event-area .accordion .accordion-button::after {*/
        /* Some bootstrap implementations use background-image for caret; keeping color/invert as fallback */
        /*filter: none;
        color: inherit;
        opacity: 0.95;
    }*/

    /* Open state (button does NOT have .collapsed): gold background with black text */
    /*.event-area .accordion .accordion-button:not(.collapsed) {
        background: #BBA687;
        color: #000;
    }*/

    /* Keep hover on closed state readable */
    /*.event-area .accordion .accordion-button.collapsed:hover {
        background: #000;
        color: #fff;
    }*/

    /* Tidy focus appearance */
    /*.event-area .accordion .accordion-button:focus {
        outline: none;
        box-shadow: 0 0 0 0.25rem rgba(187, 166, 135,0.18);
    }*/


/* Accordion header: closed = black bg with white text; opened = #BBA687 bg with black text */
.accordion .accordion-button {
    background: #000; /* closed background */
    color: #fff; /* closed text */
    border: none;
    font-weight: 700;
    transition: background-color 160ms ease, color 160ms ease;
    box-shadow: none; /* override default focus shadow */
}

    /* Ensure the caret/inset icon follows the text color where possible */
     .accordion .accordion-button::after {
        /* Some bootstrap implementations use background-image for caret; keeping color/invert as fallback */
        filter: none;
        color: inherit;
        opacity: 0.95;
    }

    /* Open state (button does NOT have .collapsed): gold background with black text */
     .accordion .accordion-button:not(.collapsed) {
        background: #BBA687;
        color: #000;
    }

    /* Keep hover on closed state readable */
     .accordion .accordion-button.collapsed:hover {
        background: #000;
        color: #fff;
    }

    /* Tidy focus appearance */
     .accordion .accordion-button:focus {
        outline: none;
        box-shadow: 0 0 0 0.25rem rgba(187, 166, 135,0.18);
    }


/*.header-social ul li {
    display: inline-block;
    margin-right: 13px;
}

    .header-social ul li:last-child {
        margin-right: 0px;
    }
*/


.header-social ul li a {
    border: 1px solid #000;
    color: #FFF; /* #7d7d7d */
    height: 28px;
    width: 28px;
    border-radius: 50%;
    display: block;
    text-align: center;
    line-height: 26px;
    -webkit-transition: all 0.5s ease 0s;
    -o-transition: all 0.5s ease 0s;
    transition: all 0.5s ease 0s;
    padding: 0px 0px;
    margin-right: 13px;
    background-color: #000;
}

    .header-social ul li a:hover {
        /* color: #BBA687;*/
        color: #BBA687;
        background-color: #000;
    }
    /*    .header-social ul li:hover a, .footer-area.two .header-social ul li:hover a {
        border: 1px solid #BBA687;
        background: #BBA687;
        color: #fff;
    }


.footer-area.three .footer-bottom.two .footer-social ul {
    padding: 15px 0 15px;
}*/


.headerColor {
    /* background-color: #787676*/
    background-color: #000;
}

/*.header-sticky .container {
    border-top-left-radius: 15px;
    border-top-right-radius: 15px;
}
.header-area.header-sticky.sticky .container {
    border-top-left-radius: 0px;
    border-top-right-radius: 0px;
}*/





/* Error / 404 styles to match site */
.error-card .card-body {
    padding: 2.25rem;
    background: linear-gradient(180deg, rgba(255,255,255,0.98) 0%, rgba(250,250,250,0.98) 100%);
}

@media (max-width: 767.98px) {
    .error-card .card-body {
        padding: 1.25rem;
    }
}

.btn-primary{
    background-color: #BBA687;
    border-color: #BBA687;
    color: #fff;
}

.btn-primary:hover {
    background-color: #897962;
    border-color: #897962;
    color: #fff !important;
}



@font-face {
    font-family: 'varsity_regular';
    src: url('/assets/fonts/varsity_regular.woff2') format('woff2');
}


/* Minimal CSS to position the backdrop and keep content above it.
   Add or adapt inside your existing stylesheet.
*/
.varsity-backdrop {
    color: #000;
    position: absolute; /* fill the container */
    inset: 0;
    z-index: 1;
    /*    pointer-events: none;
    user-select: none;*/
    background-repeat: repeat;
    background-position: 0 0;
    background-color: rgba(187,166,135, 1);
    /*    background-color: rgba(187, 166, 135, 1);*/
    /*  background-color: rgba(187, 166, 135,1);*/
    /*background-color: rgba(187, 166, 135,0.15);*/ /* light gold overlay for better text contrast */
    /* background-image and background-size will be set by JS */
    /*background: linear-gradient( to bottom, rgba(248, 186, 1, 0) 0%,*/ /* Transparent top */
    /*rgba(248, 186, 1, 0.15) 20%,*/ /* Full color start */
    /*rgba(248, 186, 1, 0.15) 80%,*/ /* Full color end */
    /*rgba(248, 186, 1, 0) 100%*/ /* Transparent bottom */
    /*);*/
    min-height: 100px;
    margin-left: -12px;
    margin-right: -12px;
}

    .varsity-backdrop .breadcrumb-item {
        color: #000;
    }

    .varsity-backdrop .breadcrumb-item a{
        color: #000;
    }

        .varsity-backdrop .breadcrumb-item a:hover {
            color: #FFF;
        }


    /* Ensure the visible content sits above the backdrop */
    .dynamic-content > * {
        position: relative;
        z-index: 3;
    }

/*.content-body[data-ishomepage="True"] p a  {
    color: #0000FF;
    text-decoration: underline;
}

    .content-body[data-ishomepage="True"] p a:hover {
        color: #BBA687;
        text-decoration: underline;
    }*/


.content-body[data-ishomepage="True"] .card-body a {
    color: #0000FF;
    text-decoration: underline;
}

    .content-body[data-ishomepage="True"] .card-body a:hover {
        color: #BBA687;
        text-decoration: underline;
    }




.content-body[data-ishomepage="True"] ul a {
    color: #0000FF;
    text-decoration: underline;
}

    .content-body[data-ishomepage="True"] ul a:hover {
        color: #BBA687;
        text-decoration: underline;
    }


.content-body[data-ishomepage="False"] {
    margin-top: 15px;
}

.content-body[data-ishomepage="False"] p a {
    color: #0000FF;
    text-decoration: underline;
}

    .content-body[data-ishomepage="False"] p a:hover {
        color: #BBA687;
        text-decoration: underline;
    }


    .content-body[data-ishomepage="False"] ul a {
        color: #0000FF;
        text-decoration: underline;
    }

        .content-body[data-ishomepage="False"] ul a:hover {
            color: #BBA687;
            text-decoration: underline;
        }


.breadcrumb-item.active {
    font-style: italic;
}





.footer-area ul {
    list-style: outside none none;
    margin: 0;
    padding: 0
}

.header-area ul {
    list-style: outside none none;
    margin: 0;
    padding: 0
}

/* Keep header actions (Select School + social icons) on one line and vertically centered.
   Add near header styles (place after existing header-area rules).
*/
.header-area .row > .col-12.text-end {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 12px; /* space between elements */
    flex-wrap: nowrap; /* prevent stacking/wrapping */
}

/* Prevent the Select School link from wrapping and keep its visual style */
.header-area .select-schools-link {
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    /* gap: 8px;*/
    /*padding: 0.25rem 0.5rem;*/ /* keep it clickable without forcing block layout */
    padding: 0.25rem 0.1rem;
    color: #FFF;
    text-decoration: none;
    font-weight: 600;
    text-transform: uppercase;
}

#lnkDistrictHomePage {
    display:block;
}





    .header-area .select-schools-link:hover {
        color: #BBA687;
    }

/* Social list inline and compact */
.header-area .header-social ul {
    display: inline-flex;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
    align-items: center;
}

    .header-area .header-social ul li {
        display: inline-flex;
        align-items: center;
    }

        /* Make sure icons don't force extra height */
        .header-area .header-social ul li a {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            line-height: 1;
            padding: 4px 6px;
        }

/* Small-screen fallback: allow horizontal scrolling instead of stacking */
@media (max-width: 420px) {
    .header-area .row > .col-12.text-end {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 4px; /* give space for scroll */
    }
}

div#a11y-content-wrapper {
    display: grid;
    grid-template-rows: auto 1fr auto; /* Assuming header/content, main content, footer */
    min-height: 100vh;
}

/* You might need to adjust grid-row for specific elements */
header.top { /* Example header */
    grid-row: 1;
    /*background-color: #787676;*/
    background-color: #000;
}

.container { /* Example main content */
    grid-row: 2;
}

footer.footer-area {
    grid-row: 3;
}





#translateDropdownToggle {
    color: #fff;
    font-weight: 600;
    text-transform: uppercase;
    text-decoration:none;
}

#translateDropdownToggle:hover {
    color: #BBA687;
    font-weight: 600;
    text-transform: uppercase;
    text-decoration: none;
}




/* Force all parent containers to allow dropdown visibility */
@media (max-width: 991px) {
    header.top,
    header.top * {
        overflow: visible !important;
    }

    /* Except for specific elements that need overflow control */
    .offcanvas-menu,
    .search {
        overflow: auto !important;
    }
}


.swal2-confirm{
    background-color: #BBA687;

}

.swal2-confirm:hover {
    background-color: #000;
}


.btn-primary {
    color: #000
}

    .btn-primary:hover {
        color: #000
    }


.btn-outline-primary {
    border-color: #000
}

    .btn-outline-primary:hover  {
        border-color: #000;
        background-color: #BBA687;
        color: #000 !important;
        text-decoration:none;
    }

    .btn-outline-primary:active {
        border-color: #000 !important;
        background-color: #BBA687 !important;
        color: #000 !important;
        text-decoration: none;
    }





    /*----------------------------------------*/
/*  Translation Dropdown                  */
/*----------------------------------------*/
.translate-lang-menu {
  min-width: 215px;
  max-height: 370px;
  overflow-y: auto;
  overflow-x: hidden;
}

/* On mobile the dropdown would overflow the left edge of the viewport
   because Popper anchors it to the right of the toggle button.
   Stretch it full-width instead so it can never overflow either side. */
/*@media (max-width: 767.98px) {
  .translate-lang-menu {*/
    /* Override Popper's inline transform/left/right with !important */
    /*left: 0 !important;
    right: 0 !important;
    min-width: unset !important;
    width: calc(100vw - 1rem) !important;
    max-height: 55vh !important;
    margin-right: 0.5rem !important;
  }
}*/



/* Google Translate: style to match the custom translate dropdown */
#google_translate_element {
    display: inline-block;
    position: relative;
    font-weight: 600;
    color: inherit;
    vertical-align: middle;
    min-width: 120px; /* adjust as needed */
}

    /* Remove google gadget chrome and force inherited font styling */
    #google_translate_element .goog-te-gadget,
    #google_translate_element .goog-te-gadget-simple {
        background: transparent !important;
        border: 0 !important;
        padding: 0 !important;
        font-family: inherit !important;
    }

    /* Hide Google logo/branding */
    #google_translate_element .goog-logo-link,
    #google_translate_element .goog-te-gadget-icon,
    #google_translate_element .goog-te-combo + .goog-te-spinner {
        display: none !important;
    }

    /* Style native select to blend with site, but we will add a styled button overlay */
    #google_translate_element .goog-te-combo {
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;
        background: transparent !important;
        border: 0 !important;
        color: inherit !important;
        font-weight: 600 !important;
        padding: 8px 28px 8px 6px !important;
        cursor: pointer;
        width: 100%;
        box-sizing: border-box;
    }

    /* Faux button to visually match translateDropdownToggle */
    #google_translate_element .gt-faux-btn {
        display: inline-flex;
        align-items: center;
        gap: .5rem;
        background: transparent;
        border: 0;
        font-weight: 600;
        color: inherit;
        cursor: pointer;
        padding: 6px 10px;
    }

        /* caret / globe icon on the faux button (FontAwesome is already loaded) */
        #google_translate_element .gt-faux-btn .fa-globe {
            color: #BBA687;
            font-size: 0.95rem;
        }

    /* Ensure the hidden select remains tabbable for accessibility but is visually hidden */
    #google_translate_element .goog-te-combo[aria-hidden="true"] {
        position: absolute !important;
        left: 0 !important;
        top: 0 !important;
        width: 100% !important;
        height: 100% !important;
        opacity: 0 !important;
        pointer-events: none !important;
    }

/* Small responsive tweak to align with your header area */
#google_translate_element {
    margin-left: .5rem;
}

    /* If you want the faux button to look exactly like the custom button in the header,
   add any additional color/hover rules here similar to your translate dropdown button */
    #google_translate_element .gt-faux-btn:hover {
        color: #897962;
    }


/*
.hero-video-wrapper {
    width: 100vw !important;
    margin-left: -100% !important;
    margin-right: -100% !important;
}
*/

.header-area .select-schools-link {
    padding: 0.25rem 0.9rem;
    
}

@media (max-width: 500px) {
    .header-area .select-schools-link {
        /* padding: 0.25rem 0.9rem;*/
        padding: 0rem;
    }

    #lnkDistrictHomePage {
        display: none;
    }

    #google_translate_element {
        margin-left: -10px;
    }
}


.accordion-button::after {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23ffffff'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e") !important;
}

.accordion-button:not(.collapsed)::after {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23000000'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e") !important;
}



@media (min-width: 990px) {

    .single-widget-right {
        text-align: right !important;
    }

    .single-widget-right h3::after {
        background: #606060 none repeat scroll 0 0;
        bottom: -10px;
        content: "";
        height: 1px;
        left: unset !important;
        right: 0;
        position: absolute;
        width: 57px;
    }

    .single-widget-right h3::before {
        background: #606060 none repeat scroll 0 0;
        bottom: -13px;
        content: "";
        height: 1px;
        left: unset !important;
        right: 0;
        position: absolute;
        width: 45px;
    }
}


.content-section {

    h2 {
        font-size: 1.6rem;
    }

    h3 {
        font-size: 1.4rem;
    }


    h4 {
        font-size: 1.2rem;
    }


    a {
        color: #0000FF;
        text-decoration: underline;
    }

        a:hover {
            color: #BBA687;
        }

        a.btn-primary {
            color: #000;
        }
}




/* ── Faculty section wrapper ───────────────────────────────────────────────── */

.faculty-section {
    border: 1px solid #d0d0d0;
    border-radius: 8px;
    overflow: hidden;
    margin-bottom: 1rem;
    background: #fff;
}

.faculty-section__toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 0.65rem 1rem;
    background: #2a2a2a;
    border: none;
    cursor: pointer;
    text-align: left;
    gap: 0.5rem;
    transition: background 0.15s ease;
}

    .faculty-section__toggle:hover,
    .faculty-section__toggle:focus-visible {
        background: #1a1a1a;
        outline: none;
    }

.faculty-section__title {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 600;
    font-size: 0.9rem;
    color: #ffffff;
}

.faculty-section__icon {
    color: #9a9a9a;
    font-size: 0.85rem;
}

.faculty-section-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #555555;
    color: #fff;
    font-size: 0.7rem;
    font-weight: 700;
    border-radius: 999px;
    min-width: 1.35rem;
    height: 1.35rem;
    padding: 0 0.35rem;
    line-height: 1;
}

.faculty-section__chevron {
    font-size: 0.75rem;
    color: #9a9a9a;
    flex-shrink: 0;
    transition: opacity 0.15s ease;
}

/* ── Collapsible section panel ─────────────────────────────────────────────── */

.faculty-section__panel {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.25s ease;
}

.faculty-section__panel--open {
    grid-template-rows: 1fr;
}

.faculty-section__body {
    overflow: hidden;
    padding: 0 0.75rem;
}

.faculty-section__panel--open .faculty-section__body {
    padding: 0.6rem 0.75rem 0.75rem;
}

/* ── Individual card ───────────────────────────────────────────────────────── */

.faculty-list {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    margin-bottom: 0.5rem;
    margin-top: 0.25rem;
}

.faculty-card {
    background: #ffffff;
    border: 1px solid #d0d0d0;
    border-left: 4px solid #2a2a2a;
    border-radius: 6px;
    overflow: hidden;
    transition: box-shadow 0.18s ease, transform 0.18s ease;
    padding: 10px;
}

.faculty-card--expandable {
    cursor: pointer;
}

    .faculty-card--expandable:hover,
    .faculty-card--expandable:focus-visible {
        box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12);
        transform: translateY(-1px);
        outline: none;
    }

/* ── Header row (always visible) ───────────────────────────────────────────── */

.faculty-card__header {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    padding: 0.65rem 0.9rem;
}

.faculty-avatar {
    font-size: 2rem;
    color: #b0b0b0;
    flex-shrink: 0;
    line-height: 1;
    margin-top: 2px;
}

.faculty-name {
    font-weight: 600;
    font-size: 0.97rem;
    color: #1a1a1a;
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.faculty-chevron {
    font-size: 0.7rem;
    color: #888888;
    transition: transform 0.22s ease;
    flex-shrink: 0;
}

.faculty-card--open .faculty-chevron {
    transform: rotate(180deg);
}

/* ── Collapsible detail panel ──────────────────────────────────────────────── */

.faculty-card__details {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.25s ease;
    background: #f5f5f5;
    border-top: 1px solid transparent;
    padding: 0;
}

.faculty-card--open .faculty-card__details {
    grid-template-rows: 1fr;
    border-top-color: #d0d0d0;
    padding: 0.5rem 0.9rem 0.65rem calc(0.9rem + 2rem + 0.85rem);
}

/* ── Detail items ──────────────────────────────────────────────────────────── */

.faculty-detail-item {
    display: block;
    font-size: 0.82rem;
    color: #2a2a2a;
    text-decoration: none;
    padding: 0.15rem 0;
    word-break: break-all;
}

    .faculty-detail-item:hover {
        text-decoration: underline;
        color: #000000;
    }

span.faculty-detail-item {
    color: #444444;
    background: #ebebeb;
    border-radius: 4px;
    padding: 0.1rem 0.45rem;
    white-space: nowrap;
    display: inline-block;
}

.faculty-desc-item {
    color: #6c6c6c;
    font-style: italic;
}


/* ── Individual card hover (all cards, not just expandable) ────────────────── */

.faculty-card:hover {
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12);
    border-left-color: #BBA687;
    background: #fafafa;
    transform: translateY(-1px);
}

    .faculty-card:hover .faculty-name {
        color: #000000;
    }

    .faculty-card:hover .faculty-avatar {
        color: #BBA687;
    }

/* ── Empty state ───────────────────────────────────────────────────────────── */

.faculty-empty {
    color: #888888;
    font-style: italic;
    font-size: 0.9rem;
    padding: 0.4rem 0;
}

/* ── Skeletons ─────────────────────────────────────────────────────────────── */

.faculty-skeleton {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.skeleton-card {
    height: 42px;
    border-radius: 6px;
    background: linear-gradient(90deg, #d8d8d8 25%, #ebebeb 50%, #d8d8d8 75%);
    background-size: 200% 100%;
    animation: skeleton-shimmer 1.4s infinite;
}

@keyframes skeleton-shimmer {
    0% {
        background-position: 200% 0;
    }

    100% {
        background-position: -200% 0;
    }
}

/* ── Responsive ────────────────────────────────────────────────────────────── */

@media (max-width: 576px) {
    .faculty-card--open .faculty-card__details {
        padding-left: 0.9rem;
    }

    .faculty-avatar {
        display: none;
    }

    .faculty-card {
        flex-direction: column;
        gap: 0.4rem;
    }
}



@media (max-width: 575.99px) {

    .container {
        /* max-width: 480px;*/


        max-width: calc(100vw - 6px);
       
    }
}


#main-content{

    min-height:700px;
}

.classic-title{


    margin-bottom:0.5rem;

}





/* ==========================================================================
   1. OPT-IN & CONFIGURATION
   ========================================================================== */

/**
 * Opt-in to native cross-document (MPA) view transitions.
 * Best practice: Only apply this to pages on the same origin.
 */
@view-transition {
    navigation: auto;
}

/* ==========================================================================
   2. ACCESSIBILITY OVERRIDES (The Core Pillar)
   ========================================================================== */

/**
 * Crucial WCAG Requirement: Respect system motion preferences.
 * Turning off or minimizing animations prevents vestibular disorders, 
 * motion sickness, and seizures.
 */
@media (prefers-reduced-motion: reduce) {
    /* Disable custom animations for all transition groups */
    ::view-transition-group(*),
    ::view-transition-old(*),
    ::view-transition-new(*) {
        animation: none !important;
    }

    /* Fall back to a standard, instant browser jump if motion is reduced */
    ::view-transition-old(root) {
        animation: 0s linear fade-out !important;
    }

    ::view-transition-new(root) {
        animation: 0s linear fade-in !important;
    }
}

/* ==========================================================================
   3. GLOBAL PAGE TRANSITION (Best-Practice Crossfade/Slide)
   ========================================================================== */

/**
 * Customizing the root (the entire page view).
 * Best Practice: Use hardware-accelerated properties (transform, opacity) only.
 * Avoid animating width, height, margins, or padding.
 */
::view-transition-old(root) {
    animation: 250ms cubic-bezier(0.4, 0, 0.2, 1) both slide-out-left;
}

::view-transition-new(root) {
    animation: 250ms cubic-bezier(0.4, 0, 0.2, 1) both slide-in-right;
}

/* Optimized Keyframes using transform instead of left/right offsets */
@keyframes slide-out-left {
    from {
        opacity: 1;
        transform: translateX(0);
    }

    to {
        opacity: 0;
        transform: translateX(-30px);
    }
}

@keyframes slide-in-right {
    from {
        opacity: 0;
        transform: translateX(30px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}