/* =========================
   GLOBAL
========================= */

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html{
    font-size: 100%;
}

body{
    font-family: "DM Sans", sans-serif;
    background: linear-gradient(
        160deg,
        #f7f1ea 0%,
        #ede4d8 30%,
        #e8ddd0 60%,
        #f0e8de 100%
    );
    min-height: 100vh;
    overflow-x: hidden;
    position: relative;
    padding: 1.25rem;
}

h1,
h2,
h3{
    font-family: "Playfair Display", serif;
    color: #2d4a3e;
    font-weight: 700;
}

h1{
    font-size: 2rem !important;
    line-height: 1.3;
}

h2{
    font-size: 1.9rem !important;
    line-height: 1.3;
}

h3{
    font-size: 1.6rem;
    line-height: 1.3;
}




      /* =========================
   TOP HEADER
========================= */

.top-header{
    width: 100%;
    padding: 10px 20px;
    background: rgb(181 122 0 / 65%);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid rgba(255,255,255,0.08);
    position: sticky;
    top: 0;
    z-index: 999;
    border-radius:50px;
}

.top-header-wrapper{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    flex-wrap: wrap;
}

.top-left span{
    color: #fff;
    font-size: 15px;
    font-weight: 600;
    letter-spacing: 0.5px;
}

.top-right{
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.top-right button{
    border: none;
    outline: none;
    padding: 8px 14px;
    border-radius: 10px;
    background: #554b00;
    color: #fff;
    font-size: 14px;
    font-weight: 500;
    transition: 0.3s ease;
    backdrop-filter: blur(8px);
}

.top-right button:hover{
    background: rgba(255,255,255,0.22);
    transform: translateY(-2px);
}

/* DARK MODE */

body.dark-mode{
    background: #0f172a;
    color: #fff;
}

/* RESPONSIVE */

@media(max-width:768px){

    .top-header-wrapper{
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .top-right{
        justify-content: center;
    }

    .top-right button{
        padding: 7px 12px;
        font-size: 13px;
    }

}


/* =========================
   FLOATING SHAPES
========================= */

.floating-shape{
    position: fixed;
    border-radius: 50%;
    opacity: 0.10;
    animation: floatShape 8s ease-in-out infinite;
    z-index: -1;
    pointer-events: none;
}

.shape-1{
    width: 16.25rem;
    height: 16.25rem;
    background: #2d4a3e;
    top: -5rem;
    right: -5rem;
}

.shape-2{
    width: 11.25rem;
    height: 11.25rem;
    background: #c4a882;
    bottom: 10%;
    left: -3.75rem;
    animation-delay: 2s;
}

.shape-3{
    width: 8.125rem;
    height: 8.125rem;
    background: #2d4a3e;
    bottom: 5%;
    right: 8%;
    animation-delay: 4s;
}

@keyframes floatShape{
    0%,100%{
        transform: translateY(0) rotate(0deg);
    }
    50%{
        transform: translateY(-1.125rem) rotate(5deg);
    }
}

/* =========================
   MAIN CARD
========================= */

.main-card{
    position: relative;
    z-index: 2;
    max-width: 100%;
    margin: 1.875rem auto;
}

/* =========================
   GLASS CARD
========================= */

.glass-card{
    background: rgba(255,255,255,0.82);
    backdrop-filter: blur(1.125rem);
    border: 0.0625rem solid rgba(255,255,255,0.6);
    border-radius: 1.5rem;
    box-shadow: 0 0.625rem 2.1875rem rgba(0,0,0,0.08);
}

/* =========================
   HEADER
========================= */

.header-section{
    padding: 2.1875rem 1.875rem;
    display: flex;
    align-items: center;
    gap: 1.5625rem;
    flex-wrap: wrap;
    margin-bottom: 1.5625rem;
}

.header-section p{
    color: #8b7355;
    font-size: 1.2rem;
    margin-bottom: 0;
    font-weight: bold;
}

/* =========================
   LOGO & ICONS
========================= */

.ncert-logo{
    width: auto;
    height: 7.5rem;
    object-fit: contain;
}

.icon{
    width: 2.3125rem;
    height: auto;
}

.login-input-icon{
    width: 2.3125rem;
    height: auto;
}


/* =========================
   CONTENT AREA
========================= */

.content-area{
    width: 100%;
}

/* =========================
   CUSTOM SECTION
========================= */

.custom-section{
    padding: 2.1875rem;
    margin-bottom: 1.5625rem;
}

/* =========================
   SECTION TITLE
========================= */

.section-title{
    display: flex;
    align-items: center;
    gap: 0.9375rem;
    margin-bottom: 1.5625rem;
    flex-wrap: wrap;
}

.section-title p{
    margin: 0;
    color: #8b7355;
    font-size: 1.2rem;
    font-weight: bold;
}

/* =========================
   SECTION ICON
========================= */

.section-icon{
    width: 3.4375rem;
    height: 3.4375rem;
    border-radius: 1rem;
    background: #2d4a3e;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}


/* FLOOR DROPDOWN */

select.form-select{
    width: 100%;
    height: 55px;
    padding: 0 18px;
    border-radius: 14px;
    border: 1.5px solid rgba(255,255,255,0.25);
    background: rgba(255,255,255,0.08);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
   
    font-size: 15px;
    font-weight: 500;
    outline: none;
    transition: all 0.3s ease;
    box-shadow: inset 0 1px 2px rgba(255,255,255,0.08);
    appearance: none;

    /* Custom Arrow */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' fill='white' viewBox='0 0 16 16'%3E%3Cpath d='M1.5 5l6 6 6-6' stroke='white' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    
    background-repeat: no-repeat;
    background-position: right 16px center;
    background-size: 14px;
    padding-right: 45px;
}

/* HOVER */

select.form-select:hover{
    border-color: rgba(255,255,255,0.45);
    background: rgba(255,255,255,0.12);
}

/* FOCUS */

select.form-select:focus{
    border-color: #4a7c6b;
    box-shadow: 0 0 0 4px rgba(74,124,107,0.18);
    background: rgba(255,255,255,0.15);
}

/* DROPDOWN OPTIONS */

select.form-select option{
    border-color: rgba(255,255,255,0.45);
    
    padding: 10px;
}

/* RESPONSIVE */

@media (max-width: 768px){

    select.form-select{
        height: 50px;
        font-size: 14px;
        border-radius: 12px;
        padding-left: 14px;
    }

}

@media (max-width: 480px){

    select.form-select{
        height: 48px;
        font-size: 13px;
        border-radius: 10px;
    }

}


/* =========================
   FORM LABEL
========================= */

.form-label{
    color: #6b5b4e;
    font-weight: 600;
    margin-bottom: 0.625rem;
    display: block;
    font-size: 1.25rem;
}

/* =========================
   INPUTS
========================= */

input,
textarea,
select{
    width: 100%;
    border: 0.125rem solid #e2d5c3 !important;
    border-radius: 3.125rem !important;
    padding: 0.875rem 1.125rem !important;
    background: rgba(255,255,255,0.7) !important;
    transition: all 0.3s ease;
    font-size: 1rem;
}

textarea{
    border-radius: 1.25rem !important;
    min-height: 8.125rem;
    resize: none;
}

input:focus,
textarea:focus,
select:focus{
    border-color: #2d4a3e !important;
    box-shadow: 0 0 0 0.25rem rgba(45,74,62,0.1) !important;
    outline: none;
}

/* =========================
   NOTE BOX
========================= */

.note-box{
    padding: 1.5625rem;
    border-left: 0.3125rem solid #c4a882;
    margin-bottom: 1.5625rem;
}

.note-box strong{
    color: #2d4a3e;
}

.note-box p{
    margin: 0;
    color: #6b5b4e;
    line-height: 1.8;
    font-size: 1rem;
    font-weight: bold;
}

/* =========================
   RATING OPTIONS
========================= */


.rating-options{
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}
/* DJANGO RADIO DIV */


/* HIDE RADIO */

.rating-options input[type="radio"]{
    position: absolute;
    opacity: 0;
}

/* =========================
   LABEL STYLE
========================= */

.rating-options label{
    position: relative;
    overflow: hidden;
    /* display: inline-flex; */
    align-items: center;
    justify-content: center;
    min-width: 13rem;
    padding: 0.5rem 0.8rem;
    border-radius: 3.125rem;
    background: #ffffff; /* NORMAL WHITE */
    border: 0.125rem solid #e2d5c3;
    cursor: pointer;
    transition: all 0.4s ease;
    font-weight: 600;
    color: #6b5b4e;
    z-index: 1;
}

/* =========================
   LEFT TO RIGHT EFFECT
========================= */

.rating-options label::before{
    content: "";
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    z-index: -1;
    transition: all 0.45s ease;
}

/* HOVER + ACTIVE */

.rating-options label:hover::before,
.rating-options > div > div:has(input:checked) label::before{
    left: 0;
}

.rating-options label:hover,
.rating-options > div > div:has(input:checked) label{
    color: #fff;
    transform: translateY(-0.15rem);
}

/* VERY POOR - RED */

.rating-options > div > div:nth-child(1) label{
    border-color: #ff0000;
}

.rating-options > div > div:nth-child(1) label::before{
    background: red;
}


/* POOR - ORANGE */
.rating-options > div > div:nth-child(2) label{
    border-color: #ffd700;
}

.rating-options > div > div:nth-child(2) label::before{
    background: #ffd700;
}



/* AVERAGE - YELLOW */



.rating-options > div > div:nth-child(3) label{
    border-color: #ff8800;
}

.rating-options > div > div:nth-child(3) label::before{
    background: #ff8800;
}


/* GOOD - LIGHT GREEN */

.rating-options > div > div:nth-child(4) label{
    border-color: #66cc66;
}

.rating-options > div > div:nth-child(4) label::before{
    background: rgb(70, 232, 70);
}


/* EXCELLENT - DARK GREEN */

.rating-options > div > div:nth-child(5) label{
    border-color: #006400;
}

.rating-options > div > div:nth-child(5) label::before{
    background: linear-gradient(135deg, #369036, #009933);
}
/* =========================
   SHADOWS
========================= */

.rating-options > div > div:nth-child(1):has(input:checked) label,
.rating-options > div > div:nth-child(1) label:hover{
    box-shadow: 0 0.5rem 1.5rem rgba(255,0,0,0.35);
}

.rating-options > div > div:nth-child(2):has(input:checked) label,
.rating-options > div > div:nth-child(2) label:hover{
    box-shadow: 0 0.5rem 1.5rem rgba(255,152,0,0.35);
}

.rating-options > div > div:nth-child(3):has(input:checked) label,
.rating-options > div > div:nth-child(3) label:hover{
    box-shadow: 0 0.5rem 1.5rem rgba(250,204,21,0.35);
}

.rating-options > div > div:nth-child(4):has(input:checked) label,
.rating-options > div > div:nth-child(4) label:hover{
    box-shadow: 0 0.5rem 1.5rem rgba(74,222,128,0.35);
}

.rating-options > div > div:nth-child(5):has(input:checked) label,
.rating-options > div > div:nth-child(5) label:hover{
    box-shadow: 0 0.5rem 1.5rem rgba(5,150,105,0.35);
}

/* =========================
   MOBILE
========================= */

@media (max-width:48rem){

    .rating-options > div{
        flex-direction: column;
        width: 100%;
    }

    .rating-options label{
        width: 100%;
    }
}

/* =========================
   BUTTONS
========================= */

.btn-submit,
.btn-export,
.btn-home{
    background: linear-gradient(135deg,#2d4a3e,#4a7c6b);
    border: none;
    color: white;
    padding: 1rem 2.5rem;
    border-radius: 3.125rem;
    font-size: 1rem;
    font-weight: 600;
    transition: all 0.3s ease;
    box-shadow: 0 0.5rem 1.5625rem rgba(45,74,62,0.25);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.625rem;
}

.btn-submit:hover,
.btn-export:hover,
.btn-home:hover{
    transform: translateY(-0.1875rem);
    color: #fff;
    box-shadow: 0 0.75rem 1.875rem rgba(45,74,62,0.35);
}

.btn-clear{
    background: #ffffff;
    border: 0.125rem solid #c4a882;
    color: #6b5b4e;
    padding: 1rem 2.5rem;
    border-radius: 3.125rem;
    font-size: 1rem;
    font-weight: 600;
    transition: all 0.3s ease;
}

.btn-clear:hover{
    background: #c4a882;
    color: #ffffff;
}

/* =========================
   DASHBOARD
========================= */

.dashboard-card{
    padding: 1.875rem;
}

.top-bar{
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.9375rem;
    margin-bottom: 1.5625rem;
}

.table-responsive{
    overflow-x: auto;
    border-radius: 1.125rem;
}

table{
    min-width: 162.5rem;
    background: #fff;
}

th{
    background: #2d4a3e !important;
    color: #fff !important;
    vertical-align: middle;
    white-space: nowrap;
    font-size: 0.95rem;
    padding: 1.125rem 0.9375rem !important;
}

td{
    vertical-align: middle;
    white-space: nowrap;
    padding: 0.875rem !important;
    font-size: 0.9rem;
    background: rgba(255,255,255,0.92);
}

.question-head{
    min-width: 16.25rem;
    line-height: 1.5;
}

.question-head small{
    color: #ddd;
    font-size: 0.75rem;
}

.answer-cell{
    font-weight: 600;
    color: #2d4a3e;
}

/* =========================
   STICKY COLUMNS
========================= */

.sticky-col{
    position: sticky;
    background: #fff;
    z-index: 2;
}

thead .sticky-col{
    background: #2d4a3e !important;
    z-index: 5;
}

.col-guest{
    left: 0;
    min-width: 11.25rem;
}

.col-floor{
    left: 11.25rem;
    min-width: 6.25rem;
}

.col-room{
    left: 17.5rem;
    min-width: 7.5rem;
}

.col-date{
    left: 25rem;
    min-width: 8.75rem;
}

.col-overall{
    left: 33.75rem;
    min-width: 11.25rem;
}

.col-suggestions{
    min-width: 15.625rem;
}

/* =========================
   SUCCESS PAGE
========================= */

.success-card{
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: 40.625rem;
    padding: 1.25rem;
    margin: auto;
}

.success-glass-card{
    padding: 3.75rem 2.5rem;
    text-align: center;
}

.success-icon{
    width: 6.25rem;
    height: 6.25rem;
    border-radius: 50%;
    background: linear-gradient(135deg,#2d4a3e,#4a7c6b);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1.5625rem;
    box-shadow: 0 0.625rem 1.875rem rgba(45,74,62,0.3);
}

.success-icon i{
    color: #fff;
    font-size: 2.625rem;
}

.success-glass-card p{
    color: #6b5b4e;
    font-size: 1rem;
    line-height: 1.8;
    margin-bottom: 0.75rem;
}

.thank-text{
    color: #8b7355;
    font-size: 1rem;
    margin-top: 0.625rem;
}

/* =========================
   ANIMATION
========================= */

.stagger-in{
    animation: fadeUp 0.6s ease forwards;
    opacity: 0;
    transform: translateY(1.25rem);
}

@keyframes fadeUp{
    from{
        opacity: 0;
        transform: translateY(1.875rem);
    }
    to{
        opacity: 1;
        transform: translateY(0);
    }
}

/* =========================
   TABLET
========================= */

@media (max-width: 62rem){

    .shape-1{
        width: 11.25rem;
        height: 11.25rem;
        top: -3.125rem;
        right: -3.125rem;
    }

    .shape-2{
        width: 8.125rem;
        height: 8.125rem;
        left: -2.5rem;
    }

    .shape-3{
        width: 6.25rem;
        height: 6.25rem;
    }

    .header-section{
        padding: 1.875rem 1.5625rem;
    }

    .custom-section{
        padding: 1.875rem;
    }
}

/* =========================
   MOBILE
========================= */

@media (max-width: 48rem){

    body{
        padding: 0.9375rem;
    }

    .floating-shape{
        opacity: 0.06;
    }

    .shape-1{
        width: 7.5rem;
        height: 7.5rem;
        top: -1.875rem;
        right: -1.875rem;
    }

    .shape-2{
        width: 5.625rem;
        height: 5.625rem;
        left: -1.5625rem;
        bottom: 12%;
    }

    .shape-3{
        width: 4.375rem;
        height: 4.375rem;
        right: -0.625rem;
        bottom: 8%;
    }

    .glass-card{
        border-radius: 1.25rem;
    }

    .header-section{
        flex-direction: column;
        justify-content: center;
        align-items: center;
        text-align: center;
        padding: 1.5625rem 1.25rem;
        gap: 1.125rem;
    }

    .header-section .text-start{
        text-align: center !important;
    }

    .header-section p{
        font-size: 0.95rem;
    }

    .ncert-logo{
        height: 5.625rem;
    }

    .custom-section{
        padding: 1.375rem;
    }

    .section-title{
        gap: 0.75rem;
    }

    .section-icon{
        width: 3rem;
        height: 3rem;
    }

    .icon{
        width: 1.75rem;
    }

    input,
    textarea,
    select{
        font-size: 0.95rem;
        padding: 0.75rem 1rem !important;
    }

    .rating-options{
        flex-direction: column;
    }

    .rating-options label{
        width: 100%;
        text-align: center;
    }

    .btn-submit,
    .btn-clear,
    .btn-export,
    .btn-home{
        width: 100%;
        padding: 0.9375rem 1.25rem;
        font-size: 1rem;
    }

    .dashboard-card{
        padding: 1.25rem;
    }

    .success-glass-card{
        padding: 2.5rem 1.5625rem;
    }

    .success-icon{
        width: 5rem;
        height: 5rem;
    }

    .success-icon i{
        font-size: 2rem;
    }
}

/* =========================
   SMALL MOBILE
========================= */

@media (max-width: 30rem){

    body{
        padding: 0.625rem;
    }

    .floating-shape{
        display: none;
    }

    .header-section{
        padding: 1.25rem 0.9375rem;
    }

    .header-section p{
        font-size: 0.9rem;
    }

    .ncert-logo{
        height: 6.375rem;
    }

    .custom-section{
        padding: 1.125rem;
    }

    .section-title h3{
        font-size: 1.3rem;
    }

    .form-label{
        font-size: 1.2rem;
    }

    input,
    textarea,
    select{
        font-size: 0.875rem;
    }

    .btn-submit,
    .btn-clear,
    .btn-export,
    .btn-home{
        font-size: 0.95rem;
    }
}

/* =========================
   MOBILE HEADER
========================= */

@media (max-width:768px){

    /* HIDE DATE & TIME */

    .top-left{
        display: none;
    }

    /* CENTER BUTTONS */

    .top-header-wrapper{
        justify-content: center;
    }

    .top-right{
        width: 100%;
        justify-content: center;
    }

}




/* =========================================================
   PREMIUM DARK MODE COMPLETE FIXED VERSION
========================================================= */

body.dark-mode{

   

    color:#f5f5f5;

    transition:
    background 0.4s ease,
    color 0.4s ease;

}


/* =========================================================
   GLASS CARDS
========================================================= */

body.dark-mode .glass-card,
body.dark-mode .custom-section,
body.dark-mode .note-box,
body.dark-mode .header-section{

    background:rgba(255,255,255,0.06);

    backdrop-filter:blur(18px);

    -webkit-backdrop-filter:blur(18px);

    border:1px solid rgba(255,255,255,0.08);

    box-shadow:
        0 10px 35px rgba(0,0,0,0.35);

    transition:
    background 0.4s ease,
    color 0.4s ease,
    border 0.4s ease,
    box-shadow 0.4s ease;

}


/* =========================================================
   HEADINGS
========================================================= */

body.dark-mode h1,
body.dark-mode h2,
body.dark-mode h3,
body.dark-mode h4,
body.dark-mode h5,
body.dark-mode h6{

    color:#ffffff;

}


/* =========================================================
   TEXT
========================================================= */

body.dark-mode p,
body.dark-mode span,
body.dark-mode label,
body.dark-mode li,
body.dark-mode a{

    color:#e5e5e5;

}


/* =========================================================
   INPUT FIELDS
========================================================= */

body.dark-mode .form-control{

    background:rgba(255,255,255,0.10);

    border:1px solid rgba(255,255,255,0.12);

    color:#ffffff;

    backdrop-filter:blur(10px);

    border-radius:18px;

    transition:0.3s ease;

}


/* INPUT FOCUS */

body.dark-mode .form-control:focus{

    background:rgba(255,255,255,0.14);

    border-color:#c4a882;

    box-shadow:
        0 0 0 4px rgba(196,168,130,0.15);

    color:#fff;

}


/* PLACEHOLDER */

body.dark-mode .form-control::placeholder{

    color:#d4d4d4;

}


/* =========================================================
   SELECT BOX
========================================================= */

body.dark-mode select.form-control{

    color:#ffffff;

    background-color:rgba(255,255,255,0.10);

}


/* =========================================================
   TOP HEADER
========================================================= */

body.dark-mode .top-header{

    background:rgba(20,20,28,0.75);

    backdrop-filter:blur(12px);

    border-bottom:1px solid rgba(255,255,255,0.08);

}


/* =========================================================
   HEADER SECTION
========================================================= */

body.dark-mode .header-section{

    background:rgba(255,255,255,0.05);

}


/* =========================================================
   BUTTONS
========================================================= */

body.dark-mode .btn-submit{

    background:
    linear-gradient(
        135deg,
        #c4a882,
        #e0c097
    );

    color:#fff;

    border:none;

    box-shadow:
        0 8px 20px rgba(196,168,130,0.25);

    transition:0.3s ease;

}


/* BUTTON HOVER */

body.dark-mode .btn-submit:hover{

    transform:translateY(-3px);

    box-shadow:
        0 12px 30px rgba(196,168,130,0.35);

}


/* CLEAR BUTTON */

body.dark-mode .btn-clear{

    background:rgba(255,255,255,0.08);

    border:1px solid rgba(255,255,255,0.08);

    color:#fff;

    transition:0.3s ease;

}

body.dark-mode .btn-clear:hover{

    background:rgba(255,255,255,0.14);

}


/* =========================================================
   RATING BUTTONS
========================================================= */

body.dark-mode .rating-options label{

    background:rgba(255,255,255,0.10);

    color:#fff;

    border:1px solid rgba(255,255,255,0.08);

    transition:0.3s ease;

}


/* RATING HOVER */

body.dark-mode .rating-options label:hover{

    transform:translateX(5px);

    background:rgba(255,255,255,0.16);

}


/* =========================================================
   SECTION ICONS
========================================================= */

body.dark-mode .section-icon{

    background:
    linear-gradient(
        135deg,
        #3d5a50,
        #54796d
    );

}


/* =========================================================
   THEME TOGGLE BUTTON
========================================================= */

body.dark-mode #themeToggle{

    background:#ffffff;

    color:#222;

    border-radius:50%;

}


/* =========================================================
   DATE TIME
========================================================= */

body.dark-mode #liveDateTime{

    color:#f5f5f5;

}


/* =========================================================
   LINKS
========================================================= */

body.dark-mode a{

    color:#f0d9b5;

}

body.dark-mode a:hover{

    color:#ffffff;

}


/* =========================================================
   SCROLLBAR
========================================================= */

body.dark-mode::-webkit-scrollbar{

    width:10px;

}

body.dark-mode::-webkit-scrollbar-track{

    background:#1f1f28;

}

body.dark-mode::-webkit-scrollbar-thumb{

    background:#555;

    border-radius:20px;

}

body.dark-mode::-webkit-scrollbar-thumb:hover{

    background:#777;

}

body.dark-mode strong{

    color:#f0d9b5;

    font-weight:700;

}


/* =========================================================
   FLOATING SHAPES
========================================================= */

body.dark-mode .floating-shape{

    opacity:0.12;

    filter:blur(10px);

}


/* =========================================================
   ICONS
========================================================= */

body.dark-mode .icon{

    filter:brightness(1.1);

}


/* =========================================================
   BORDER COLORS
========================================================= */

body.dark-mode .activity-card{

    border-color:rgba(255,255,255,0.08);

}


/* =========================================================
   SMOOTH TRANSITION FOR WHOLE PAGE
========================================================= */

body,
.glass-card,
.custom-section,
.note-box,
.form-control,
.btn-submit,
.btn-clear,
.top-header{

    transition:all 0.35s ease;

}