﻿.banner {
    display: flex;
    justify-content: space-between;
    width: 100%;
    position: fixed;
    z-index: 9999;
    top: 0;
    background-color: #171717;
}

.semi-circle {
    width: 4rem;
    height: 3rem;
    background-color: #48abe0;
    border-radius: 0 5rem 5rem 0;
    display: inline-block;
}

.circle {
    width: 26rem;
    height: 3rem;
    background-color: #e20177;
    border-radius: 5rem;
    margin-left: 5%;
    display: inline-block;
}

.logo1 {
    justify-content: space-between;
    display: flex;
    align-content: space-around;
    align-items: center;
    color: white;
}    
  
.logo1 a {
        font-size: 20px;
        text-decoration: none;
        /* margin-top: 42%; */
        color: white;
    }

   
.logo-img {
    display: inline-block;
    width: 35%;
}

.logo-right {
    display: inline-block;
    width: 25%;
    float: right;
}


.circleright {
    width: 26rem;
    height: 3rem;
    background-color: #54b848;
    border-radius: 5rem;
    margin-left: 2%;
    display: inline-block;
    float: right;
}

.circlem {
    width: 9rem;
    height: 3rem;
    background-color: #1a3f90;
    border-radius: 5rem;
    display: inline-block;
    float: right;
}

.container-fluid {
    margin-top: 7%;
}

.btnTopReg {
    width: 22%;
    padding: 2%;
}
.centerDiv {
    width: 100%;
    margin-top: -4%;
   /* height:100vh;*/
}
.textDiv{
    font-size:35px;
}
.containt3 {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    justify-content: center;
    font-size:28px
}
.calanderimg {
    width: 5%;
    height: 1%;
    margin-right: 1%;
}

.agendaDiv{
    width:60%;
}
.leftimage {
    position: fixed;
    left: 0;
    display: table-cell;
    bottom: 0%;
    width: 22%;
    max-width: 100%;
    height: auto;
    vertical-align: middle;
    border-style: none;
}

.rightimage {
    position: fixed;
    right: 0;
    display: table-cell;
    bottom: 0%;
    width: 22%;
    max-width: 100%;
    height: auto;
    vertical-align: middle;
    border-style: none;
}

.footerDiv {
    background: #171717;
    color: white;
    bottom: 0;
    width: 100%;
    position:relative;
}
/* width */
::-webkit-scrollbar {
    width: 5px;
    background-color: white;
}

/* Track */
::-webkit-scrollbar-track {
    box-shadow: inset 0 0 1px grey;
    border-radius: 5px;
}

/* Handle */
::-webkit-scrollbar-thumb {
    background: #e20177;
    border-radius: 5px;
}

    /* Handle on hover */
    ::-webkit-scrollbar-thumb:hover {
        background: #e20177;
    }

/* Tabs*/
section {
    padding: 60px 0;
}

    section .section-title {
        text-align: center;
        color: #007b5e;
        text-transform: uppercase;
        display: flex;
        align-content: space-around;
        flex-direction: column-reverse;
        flex-wrap: wrap;
    }

#tabs {  
    color: #eee;
}
.nav-tabs {
    --bs-nav-tabs-border-width: var(--bs-border-width);
    --bs-nav-tabs-border-color: #e20177;
    --bs-nav-tabs-border-radius: var(--bs-border-radius);
    --bs-nav-tabs-link-hover-border-color: var(--bs-secondary-bg) var(--bs-secondary-bg) var(--bs-border-color);
    --bs-nav-tabs-link-active-color: var(--bs-emphasis-color);
    --bs-nav-tabs-link-active-bg: var(--bs-body-bg);
    --bs-nav-tabs-link-active-border-color: #009ddc #009ddc #007eb1;
    border-bottom: var(--bs-nav-tabs-border-width) solid var(--bs-nav-tabs-border-color);
}

    #tabs h6.section-title {
        color: #eee;
    }

    #tabs .nav-tabs .nav-item.show .nav-link, .nav-tabs .nav-link.active {
        color: #f3f3f3;
        background-color: transparent;
        border-color: transparent transparent #f3f3f3;
        border-bottom: 4px solid !important;
        font-size: 20px;
        font-weight: bold;
    }

    #tabs .nav-tabs .nav-link {
        border: 1px solid transparent;
        border-top-left-radius: .25rem;
        border-top-right-radius: .25rem;
        color: #eee;
        font-size: 20px;
    }

.switchdiv {
    margin-bottom: 2%;
    margin-top: 2%;
}

.switch {
    --_switch-bg-clr: #e20177;
    --_switch-padding: 4px;
    --_slider-bg-clr: rgb(0 157 220);
    --_slider-bg-clr-on: rgb(0 157 220);
    --_slider-txt-clr: #ffffff;
    --_label-padding: 1rem 2rem; /* padding around the labels -  this gives the switch it's global width and height */
    --_switch-easing: cubic-bezier( 0.47, 1.64, 0.41, 0.8 ); /* easing on toggle switch */
    color: white;
    width: fit-content;
    display: flex;
    justify-content: center;
    position: relative;
    border-radius: 9999px;
    cursor: pointer;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    position: relative;
    isolation: isolate;
}

    .switch input[type="checkbox"] {
        position: absolute;
        width: 1px;
        height: 1px;
        padding: 0;
        margin: -1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
        border-width: 0;
    }

    .switch > span {
        display: grid;
        place-content: center;
        transition: opacity 300ms ease-in-out 150ms;
        padding: var(--_label-padding);
    }

    .switch::before,
    .switch::after {
        content: "";
        position: absolute;
        border-radius: inherit;
        transition: inset 150ms ease-in-out;
    }
    /* switch slider */
    .switch::before {
        background-color: var(--_slider-bg-clr);
        inset: var(--_switch-padding) 50% var(--_switch-padding) var(--_switch-padding);
        transition: inset 500ms var(--_switch-easing), background-color 500ms ease-in-out;
        z-index: -1;
        box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.3), 0 1px rgba(255, 255, 255, 0.3);
    }
    /* switch bg color */
    .switch::after {
        background-color: var(--_switch-bg-clr);
        inset: 0;
        z-index: -2;
    }
    /* switch hover & focus */
    .switch:focus-within::after {
        inset: -0.25rem;
    }

    .switch:has(input:checked):hover > span:first-of-type,
    .switch:has(input:not(:checked)):hover > span:last-of-type {
        opacity: 1;
        transition-delay: 0ms;
        transition-duration: 100ms;
    }
    /* switch hover */
    .switch:has(input:checked):hover::before {
        inset: var(--_switch-padding) var(--_switch-padding) var(--_switch-padding) 45%;
    }

    .switch:has(input:not(:checked)):hover::before {
        inset: var(--_switch-padding) 45% var(--_switch-padding) var(--_switch-padding);
    }
    /* checked - move slider to right */
    .switch:has(input:checked)::before {
        background-color: var(--_slider-bg-clr-on);
        inset: var(--_switch-padding) var(--_switch-padding) var(--_switch-padding) 50%;
    }
    /* checked - set opacity */
    .switch > span:last-of-type,
    .switch > input:checked + span:first-of-type {
        opacity: 0.75;
    }

    .switch > input:checked ~ span:last-of-type {
        opacity: 1;
    }

