<style>
    /*.page-header .card-header {
            border-radius: 11px;
     background-image: linear-gradient(-225deg, #7111f5 14%, #03A9F4 72%, #ffbc00 100%);
     box-shadow: none;
    }
    .page-header .card-header h4{
        color: var(--bs-white);
    }
    */

    h6, .h6, h5, .h5, h4, .h4, h3, .h3, h2, .h2, h1, .h1 {
        margin-top: 0;
        margin-bottom: 0.5rem;
        font-weight: 500;
        line-height: 1.2;
        font-family: 'Montserrat';
    }

    .pc-sidebar .pc-navbar > .pc-item .pc-submenu .pc-item.pc-trigger > .pc-link:after, .pc-sidebar .pc-navbar > .pc-item .pc-submenu .pc-item.active > .pc-link:after, .pc-sidebar .pc-navbar > .pc-item .pc-submenu .pc-item:focus > .pc-link:after, .pc-sidebar .pc-navbar > .pc-item .pc-submenu .pc-item:hover > .pc-link:after {
        background: #f57e00;
    }

    .pc-sidebar .pc-navbar > .pc-item .pc-submenu .pc-item > .pc-link:after {
        content: "";
        position: absolute;
        top: 19px;
        left: 45px;
        height: 7px;
        width: 7px;
        border-radius: 50%;
        background: transparent;
    }

    .page-header h4 {
        font-size: 1.4rem;
        width: 45%;
        background: -webkit-linear-gradient(to right, #d0e0f2, #e4dfe8));
        background: linear-gradient(to right, #d0e0f2, #e4dfe8);
        border-radius: 15px 50px 50px 15px;
        height: 62px;
        background-size: 100%;
        position: relative;
        margin-left: 0px;
        line-height: 31px;
        color: #5366d1;
        padding-left: 20px;
        display: -webkit-flex;
        -webkit-align-items: center;
    }

    .page-header h4:before {
        content: '';
        background: url(https://preadmin.dreamstechnologies.com/assets/img/img-left-attach.png);
        height: 30px;
        position: absolute;
        width: 50px;
        top: 39px;
        left: 0px;
        background-repeat: no-repeat;
        z-index: -1;
        opacity: 0.3;
    }

    .profile-intro {
        background-image: linear-gradient(60deg, #f56600, #FF9800);
        border-radius: 15px;
    }

    .profile-intro .table td, .profile-intro .table th {
        border-top: 1px solid #FF9800;
        border-bottom: none;
        font-size: 17px;
        font-weight: 300;
    }

    [data-pc-preset=preset-1] .card {
        transition: all 1.5s;
        background-image: linear-gradient(120deg, #ffffff 0%, #edf9ff 100%);
        border: none;
        /*box-shadow: 0px 4px 34px #e0ebff !important;
        border: 1px solid #d6e0efd1;*/
    }

    .card:hover {
        transform: translateY(-10px);
    }

    .card-header:first-child {
        border-radius: 15px;
    }

    .card__head {
        background: transparent;
        padding: 21px 0px;
        /*background-image: linear-gradient(109.6deg, #3aa6d745 11.2%, #4caf5017 98.6%);*/
        border-radius: 9px;
    }

    .card__head .form-group {
        margin-bottom: 0 !important;
    }

    .card__head .form-group button {
        height: 45px;
        width: 99px;
        padding: 0 15px;
        border-radius: 4px;
        font-size: 15px;
    }

    .card__head .form-control {
        height: 49px;
        font-size: 15px;
        border: 1px solid #dbdbdb;
    }
    .btn__search{
        height: 47px;
        width: 104px;
        text-align: center;
        font-size: 17px;
        font-weight: 300;
        letter-spacing: .8px;
        background: #0abb75 !important;
        border: 1px solid #0abb75 !important;
        color: #ffffff;
        border-radius: 5px;
    }
    .form-control:focus{
        box-shadow: none;
    }
    .data__table .table .bg__highlight{
        background: #e1ecff;
    }
    .data__table .table .bg__highlight td {
        color: #377dff;
    }

    .card.bg-grd-primary .title h1, .card.bg-grd-primary .title h5 {
        color: #fa7f00 !important;
    }

    .card.bg-grd-primary .icon {
        background: #f3e9db;
    }

    .std__summary .icon svg {
        stroke: #fa7f00;
    }

    .card.bg-grd-success .title h1, .card.bg-grd-success .title h5 {
        color: #276e57 !important;
    }

    .card.bg-grd-success .icon {
        background: #276e5724;
    }

    .card.bg-grd-warning .title h1, .card.bg-grd-warning .title h5 {
        color: #277cdd !important;
    }

    .card.bg-grd-warning .icon {
        background: #277cdd1f;
    }

    .card.bg-grd-custom .title h1, .card.bg-grd-custom .title h5 {
        color: #c31a67 !important;
    }

    .card.bg-grd-custom .icon {
        background: #c31a6721;
    }

    .card.bg-grd-deeporng .title h1, .card.bg-grd-deeporng .title h5 {
        color: #727c0d !important;
    }

    .card.bg-grd-deeporng .icon {
        background: #727c0d26;
    }

    .std__summary .icon {
        width: 75px;
        height: 75px;
        border-radius: 50%;
        padding: 16px;
    }

    .std__summary .icon svg {
        width: 45px;
        height: 45px;
    }

    .card.bg-grd-purple .title h1, .card.bg-grd-purple .title h5 {
        color: #682df4 !important;
    }

    .card.bg-grd-purple .icon {
        background: #682df41f;
    }


    .pc-container {
        position: relative;
        background-image: linear-gradient(-225deg, #fddfdc 0%, #cfe0f2 52%, #ece2e3 100%);
        background-repeat: no-repeat;
        background-position: center;
        background-size: cover;
        min-height: 1000px;
        z-index: 0;
    }

    .pc-footer {
        background-image: linear-gradient(-225deg, #d0e0f1 0%, #dde1eb 52%, #ece2e3 100%);
    }

    .profile-intro svg.svg-intro-bottom {
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 25%;
        z-index: -1;
        border-radius: 15px;

    }

    .profile-intro svg.svg-intro-bottom-2 {
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 50%;
        z-index: 555;
        border-radius: 15px;
    }

    .profile-intro svg.svg-intro-bottom-3 {
        position: absolute;
        bottom: 0;
        left: 20px;
        width: 100%;
        height: 80%;
        border-radius: 15px;
    }

    .std__block .content .heading {
        padding-top: 10px;
        padding-left: 13px;
    }

    .class__timetable .card-body .list-group-item {
        background: transparent;
    }

    .profile-detail-item {
        padding: 10px 12px;
        border-bottom: none;
        background: #e6edfd;
        margin-bottom: 10px;
        border-radius: 5px;
    }

    .profile-detail-item i {
        color: #ff9800cf;
        margin-right: 3px;
    }

    .profile-detail-item .value {
        color: #3c3c3c;
        font-weight: 300;
        margin-top: 7px;
        display: block;
        margin-left: 19px;
    }

    .profile-detail-item .label {
        font-weight: 300;
        margin-right: 8px;
        color: #000000;
        font-size: 17px;
    }

    .student__profile .info__title {
        font-size: 17px;
        color: #673AB7;
        margin-bottom: 12px;
    }



    @keyframes up-down {
        0% {
            transform: translateY(10px);
        }
        100% {
            transform: translateY(-10px);
        }
    }

    .shapes-two {
        position: absolute;
        right: 2rem;
        bottom: 0;
        top: 6rem;
        animation: up-down 3s ease-in-out infinite alternate-reverse both;
    }

    .shapes-two.bottom {
        position: absolute;
        left: 2rem;
        bottom: 0;
        top: 70%;
        animation: up-down 3s ease-in-out infinite alternate-reverse both;
    }


    @media (max-width: 991px) {
        .page-header h4 {
            width: 100%;
        }

        .card__head {
            padding: 8px 0;
        }

        .shapes-two {
            position: absolute;
            right: 1rem;
            bottom: 0;
            top: 1%;
            animation: up-down 3s ease-in-out infinite alternate-reverse both;
            width: 27%;
        }


        .std__summary .card h1 {
            font-size: 1.8rem;
        }

        .std__summary .card h5 {
            font-size: 1rem;
            margin-bottom: 0;
            font-family: system-ui;
            letter-spacing: .5px;
            font-weight: 500;
        }
    }
</style>
<link
    href="https://fonts.googleapis.com/css2?family=Lora:ital,wght@0,400..700;1,400..700&family=Montserrat:ital,wght@0,100..900;1,100..900&family=Oswald:wght@200..700&family=Source+Sans+3:ital,wght@0,200..900;1,200..900&display=swap"
    rel="stylesheet">
<header class="pc-header">
    <div class="m-header">
        <a href="{{ route('student.dashboard') }}" class="b-brand text-primary">
            <!-- ========   Change your logo from here   ============ -->
            <img src="https://www.jabalunnur.com/front/assets/img/logo-light.png" alt="logo image"
                 class="logo-lg">
        </a>
    </div>
    <div class="header-wrapper"> <!-- [Mobile Media Block] start -->
        <div class="me-auto pc-mob-drp">
            <ul class="list-unstyled">
                <!-- ======= Menu collapse Icon ===== -->
                <li class="pc-h-item pc-sidebar-collapse">
                    <a href="#" class="pc-head-link ms-0" id="sidebar-hide">
                        <i class="ph ph-list"></i>
                    </a>
                </li>
                <li class="pc-h-item pc-sidebar-popup">
                    <a href="#" class="pc-head-link ms-0" id="mobile-collapse">
                        <i class="ph ph-list"></i>
                        {{-- <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none"
                            stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" width="42"
                            height="42" stroke-width="1.5">
                            <path d="M4 3h16"></path>
                            <path d="M4 9h16"></path>
                            <path d="M4 15h16"></path>
                            <path d="M4 21h16"></path>
                        </svg> --}}
                    </a>
                </li>
                <li class="dropdown pc-h-item">
                    <a class="pc-head-link dropdown-toggle arrow-none m-0" data-bs-toggle="dropdown"
                       href="#" role="button" aria-haspopup="false" aria-expanded="false">
                        <!--                        <i class="ph ph-magnifying-glass"></i>-->
                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none"
                             stroke="#ffffff" stroke-linecap="round" stroke-linejoin="round" width="42"
                             height="42" stroke-width="1.5">
                            <path
                                d="M10 5a2 2 0 0 1 4 0a7 7 0 0 1 4 6v3a4 4 0 0 0 2 3h-16a4 4 0 0 0 2 -3v-3a7 7 0 0 1 4 -6">
                            </path>
                            <path d="M9 17v1a3 3 0 0 0 6 0v-1"></path>
                            <path d="M21 6.727a11.05 11.05 0 0 0 -2.794 -3.727"></path>
                            <path d="M3 6.727a11.05 11.05 0 0 1 2.792 -3.727"></path>
                        </svg>
                    </a>
                    <a class=" m-0 d-block d-md-none d-lg-none text-white" href="/student/dashboard">Dashboard</a>
                    <div class="dropdown-menu pc-h-dropdown drp-search">
                        <form class="px-3">
                            <div class="form-group mb-0 d-flex align-items-center">
                                <input type="search" class="form-control border-0 shadow-none"
                                       placeholder="Search here. . .">
                                <button class="btn btn-light-secondary btn-search">Search</button>
                            </div>
                        </form>
                    </div>
                </li>
            </ul>
        </div>
        <!-- [Mobile Media Block end] -->
        <div class="ms-auto">
            <ul class="list-unstyled">
                <li class="dropdown pc-h-item header-user-profile">
                    <a class="pc-head-link dropdown-toggle arrow-none me-0" data-bs-toggle="dropdown"
                       href="#" role="button" aria-haspopup="false" data-bs-auto-close="outside"
                       aria-expanded="false">
                      
                        <img
                            src="{{ Auth()->user()->profile_image_path ?? asset('uploads/student/graduated_student.png') }}"
                            alt="{{ Auth()->user()->name ?? '' }}" class="user-avtar">

                    </a>
                    <div class="dropdown-menu dropdown-user-profile dropdown-menu-end pc-h-dropdown">
                        <div class="dropdown-body">
                            <div class="profile-notification-scroll position-relative">
                                <ul class="list-group list-group-flush w-100">

                                    <li class="list-group-item">
                                        <a href="{{route('student.profile')}}" class="dropdown-item">
                                            <span class="d-flex align-items-center">
                                                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"
                                                     fill="none" stroke="#000000" stroke-linecap="round"
                                                     stroke-linejoin="round" width="48" height="48"
                                                     stroke-width="0.75">
                                                    <path d="M8 7a4 4 0 1 0 8 0a4 4 0 0 0 -8 0"></path>
                                                    <path d="M6 21v-2a4 4 0 0 1 4 -4h1.5"></path>
                                                    <path d="M18 18m-3 0a3 3 0 1 0 6 0a3 3 0 1 0 -6 0"></path>
                                                    <path d="M20.2 20.2l1.8 1.8"></path>
                                                </svg>
                                                <span>Profile</span>
                                            </span>
                                        </a>
{{--                                        <a href="#" class="dropdown-item">--}}
{{--                                            <span class="d-flex align-items-center">--}}
{{--                                                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"--}}
{{--                                                     fill="none" stroke="currentColor" stroke-linecap="round"--}}
{{--                                                     stroke-linejoin="round" width="32" height="32"--}}
{{--                                                     stroke-width="0.75">--}}
{{--                                                    <path--}}
{{--                                                        d="M10 5a2 2 0 0 1 4 0a7 7 0 0 1 4 6v3a4 4 0 0 0 2 3h-16a4 4 0 0 0 2 -3v-3a7 7 0 0 1 4 -6">--}}
{{--                                                    </path>--}}
{{--                                                    <path d="M9 17v1a3 3 0 0 0 6 0v-1"></path>--}}
{{--                                                    <path d="M21 6.727a11.05 11.05 0 0 0 -2.794 -3.727"></path>--}}
{{--                                                    <path d="M3 6.727a11.05 11.05 0 0 1 2.792 -3.727"></path>--}}
{{--                                                </svg>--}}
{{--                                                <span>Notifications</span>--}}
{{--                                            </span>--}}
{{--                                        </a>--}}
                                        <a href="{{route('student.password-change')}}" class="dropdown-item">
                                            <span class="d-flex align-items-center">
                                                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"
                                                     fill="none" width="32" height="32"
                                                     stroke-width="0.75" stroke-linejoin="round"
                                                     stroke-linecap="round" stroke="currentColor">
                                                    <path
                                                        d="M5 11m0 2a2 2 0 0 1 2 -2h10a2 2 0 0 1 2 2v6a2 2 0 0 1 -2 2h-10a2 2 0 0 1 -2 -2z">
                                                    </path>
                                                    <path d="M12 16m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path>
                                                    <path d="M8 11v-5a4 4 0 0 1 8 0"></path>
                                                </svg>
                                                <span>Change Password</span>
                                            </span>
                                        </a>
                                        <form action="{{route('student.logout')}}" method="post">
                                            @csrf
                                            <button class="dropdown-item" style="padding: 10px 19px">
                                                <span class="d-flex align-items-center">
                                                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"
                                                         fill="none" stroke="currentColor" stroke-linecap="round"
                                                         stroke-linejoin="round" width="32" height="32"
                                                         stroke-width="0.75">
                                                        <path
                                                            d="M14 8v-2a2 2 0 0 0 -2 -2h-7a2 2 0 0 0 -2 2v12a2 2 0 0 0 2 2h7a2 2 0 0 0 2 -2v-2">
                                                        </path>
                                                        <path d="M9 12h12l-3 -3"></path>
                                                        <path d="M18 15l3 -3"></path>
                                                    </svg>
                                                    <span>Logout</span>
                                                </span>
                                            </button>
                                        </form>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </li>
            </ul>
        </div>
    </div>
</header>
