html,
            body {
                position: relative;
                height: 100%;
                scroll-behavior: smooth;
            }
            
            body {
                font-family: 'Rubik', sans-serif;
                font-size: 14px;
                color: #211f1f;
                margin: 0;
                padding: 0;
                background: white;
            }
            
            .top-header {
                background-color: #2c3494;
                color: white;
            }
            
            .top-header .btn {
                border-radius: unset;
                font-size: 13px;
                -moz-border-radius: unset;
                -ms-border-radius: unset;
                -o-border-radius: unset;
            }
            
            .top-header .btn {
                background: #0092dd;
                color: white;
                border-radius: 2px;
                transition: all 0.7s;
                -webkit-border-radius: 2px;
                -moz-border-radius: 2px;
                -ms-border-radius: 2px;
                -o-border-radius: 2px;
                -webkit-transition: all 0.7s;
                -moz-transition: all 0.7s;
                -ms-transition: all 0.7s;
                -o-transition: all 0.7s;
            }
            
            .top-header .btn:hover {
                background: #FF9C00;
                color: white;
                border-radius: 2px;
                -webkit-border-radius: 2px;
                -moz-border-radius: 2px;
                -ms-border-radius: 2px;
                -o-border-radius: 2px;
            }
            
            .top-header .btn {
                background: #0092dd;
                color: white;
                border-radius: 2px;
                transition: all 0.7s;
                -webkit-border-radius: 2px;
                -moz-border-radius: 2px;
                -ms-border-radius: 2px;
                -o-border-radius: 2px;
                -webkit-transition: all 0.7s;
                -moz-transition: all 0.7s;
                -ms-transition: all 0.7s;
                -o-transition: all 0.7s;
            }
            
            .top-header .btn:hover {
                background: #FF9C00;
                color: white;
                border-radius: 2px;
                -webkit-border-radius: 2px;
                -moz-border-radius: 2px;
                -ms-border-radius: 2px;
                -o-border-radius: 2px;
            }
            
            .marquee {
                padding: 10px 0 0;
            }
            
            .marquee {
                margin: 0 auto;
                white-space: nowrap;
                overflow: hidden;
                box-sizing: border-box;
            }
            
            .marquee span {
                display: inline-block;
                padding-left: 100%;
                text-indent: 0;
                animation: marquee 15s linear infinite;
                -webkit-animation: marquee 15s linear infinite;
            }
            
            .marquee span:hover {
                animation-play-state: running;
            }
            /* make it move */
            
            @keyframes marquee {
                0% {
                    transform: translate(0, 0);
                    -webkit-transform: translate(0, 0);
                    -moz-transform: translate(0, 0);
                    -ms-transform: translate(0, 0);
                    -o-transform: translate(0, 0);
                }
                100% {
                    transform: translate(-100%, 0);
                    -webkit-transform: translate(-100%, 0);
                    -moz-transform: translate(-100%, 0);
                    -ms-transform: translate(-100%, 0);
                    -o-transform: translate(-100%, 0);
                }
            }
            /*================================== start Navbar ========================================= */
            
            #header {
                background: #fff;
                transition: all 0.5s;
                z-index: 997;
                height: 86px;
                box-shadow: 0px 2px 15px rgba(0, 0, 0, 0.1);
            }
            
            #header.fixed-top {
                height: 70px;
            }
            
            #header .logo {
                font-size: 30px;
                margin: 0;
                padding: 0;
                line-height: 1;
                font-weight: 600;
                letter-spacing: 0.8px;
            }
            
            #header .logo a {
                color: #251e63;
            }
            
            #header .logo a span {
                color: #0092dd;
            }
            
            #header .logo img {
                max-height: 80px;
            }
            
            .scrolled-offset {
                margin-top: 70px;
            }
            
            .navbar {
                padding: 0;
            }
            
            .navbar ul {
                margin: 0;
                padding: 0;
                display: flex;
                list-style: none;
                align-items: center;
            }
            
            .navbar li {
                position: relative;
            }
            
            .navbar>ul>li {
                white-space: nowrap;
                padding: 10px 0 10px 28px;
            }
            
            .navbar a,
            .navbar a:focus {
                display: flex;
                align-items: center;
                justify-content: space-between;
                padding: 0 3px;
                font-size: 15px;
                font-weight: 600;
                color: #222222;
                white-space: nowrap;
                transition: 0.3s;
                position: relative;
            }
            
            .navbar a i,
            .navbar a:focus i {
                font-size: 12px;
                line-height: 0;
                margin-left: 5px;
            }
            
            .navbar>ul>li>a:before {
                content: "";
                position: absolute;
                width: 100%;
                height: 2px;
                bottom: -6px;
                left: 0;
                background-color: #0092dd;
                visibility: hidden;
                width: 0px;
                transition: all 0.3s ease-in-out 0s;
            }
            
            .navbar a:hover:before,
            .navbar li:hover>a:before,
            .navbar .active:before {
                visibility: visible;
                width: 100%;
            }
            
            .navbar a:hover,
            .navbar .active,
            .navbar .active:focus,
            .navbar li:hover>a {
                color: #0092dd;
            }
            
            .navbar .dropdown ul {
                display: block;
                position: absolute;
                left: 28px;
                top: calc(100% + 30px);
                margin: 0;
                padding: 10px 0;
                z-index: 99;
                opacity: 0;
                visibility: hidden;
                background: #fff;
                box-shadow: 0px 0px 30px rgba(127, 137, 161, 0.25);
                transition: 0.3s;
            }
            
            .navbar .dropdown ul li {
                min-width: 200px;
            }
            
            .navbar .dropdown ul a {
                padding: 10px 20px;
                font-weight: 400;
            }
            
            .navbar .dropdown ul a i {
                font-size: 12px;
            }
            
            .navbar .dropdown ul a:hover,
            .navbar .dropdown ul .active:hover,
            .navbar .dropdown ul li:hover>a {
                color: #0092dd;
            }
            
            .navbar .dropdown:hover>ul {
                opacity: 1;
                top: 100%;
                visibility: visible;
            }
            
            .navbar .dropdown .dropdown ul {
                top: 0;
                left: calc(100% - 30px);
                visibility: hidden;
            }
            
            .navbar .dropdown .dropdown:hover>ul {
                opacity: 1;
                top: 0;
                left: 100%;
                visibility: visible;
            }
            
            @media (max-width: 1366px) {
                .navbar .dropdown .dropdown ul {
                    left: -90%;
                }
                .navbar .dropdown .dropdown:hover>ul {
                    left: -100%;
                }
            }
            /**  Mobile Navigation **/
            
            .mobile-nav-toggle {
                color: #222222;
                font-size: 28px;
                cursor: pointer;
                display: none;
                line-height: 0;
                transition: 0.5s;
            }
            
            .mobile-nav-toggle.bi-x {
                color: #fff;
            }
            
            @media (max-width: 991px) {
                .mobile-nav-toggle {
                    display: block;
                }
                .navbar ul {
                    display: none;
                }
            }
            
            .navbar-mobile {
                position: fixed;
                overflow: hidden;
                top: 0;
                right: 0;
                left: 0;
                bottom: 0;
                background: rgba(9, 9, 9, 0.9);
                transition: 0.3s;
                z-index: 999;
            }
            
            .navbar-mobile .mobile-nav-toggle {
                position: absolute;
                top: 15px;
                right: 15px;
            }
            
            .navbar-mobile ul {
                display: block;
                position: absolute;
                top: 55px;
                right: 15px;
                bottom: 15px;
                left: 15px;
                padding: 10px 0;
                background-color: #fff;
                overflow-y: auto;
                transition: 0.3s;
            }
            
            .navbar-mobile a,
            .navbar-mobile a:focus {
                padding: 10px 20px;
                font-size: 15px;
                color: #222222;
            }
            
            .navbar-mobile>ul>li {
                padding: 0;
            }
            
            .navbar-mobile a:hover:before,
            .navbar-mobile li:hover>a:before,
            .navbar-mobile .active:before {
                visibility: hidden;
            }
            
            .navbar-mobile a:hover,
            .navbar-mobile .active,
            .navbar-mobile li:hover>a {
                color: #0092dd;
            }
            
            .navbar-mobile .getstarted,
            .navbar-mobile .getstarted:focus {
                margin: 15px;
            }
            
            .navbar-mobile .dropdown ul {
                position: static;
                display: none;
                margin: 10px 20px;
                padding: 10px 0;
                z-index: 99;
                opacity: 1;
                visibility: visible;
                background: #fff;
                box-shadow: 0px 0px 30px rgba(127, 137, 161, 0.25);
            }
            
            .navbar-mobile .dropdown ul li {
                min-width: 200px;
            }
            
            .navbar-mobile .dropdown ul a {
                padding: 10px 20px;
            }
            
            .navbar-mobile .dropdown ul a i {
                font-size: 12px;
            }
            
            .navbar-mobile .dropdown ul a:hover,
            .navbar-mobile .dropdown ul .active:hover,
            .navbar-mobile .dropdown ul li:hover>a {
                color: #0092dd;
            }
            
            .navbar-mobile .dropdown>.dropdown-active {
                display: block;
            }
            /* ==================================== End Navbar =============================== */
            /*=============================== carousel ======================================*/
            
            .carousel-inner {
                height: 500px;
            }
            
            .carousel-inner img {
                width: 100%;
                height: 100%;
            }
            
            .carousel-indicators {
                display: flex;
                align-items: center;
            }
            
            .carousel-indicators li {
                width: 4px !important;
                height: 20px !important;
                border-top: unset !important;
                border-bottom: unset !important;
                opacity: unset;
            }
            
            .carousel-indicators .active {
                background: #0092dd;
            }
            
            .carousel-caption {
                bottom: unset;
                top: 150px;
                right: unset;
                max-width: 600px;
                text-align: left;
            }
            
            .banner-desc {
                color: #ffc917;
                font-weight: 700;
                font-size: 50px;
            }
            /*=============================== end carousel ======================================*/
            /* ========================= footer ============================== */
            
            a {
                text-decoration: none;
                color: unset;
            }
            
            a:active,
            a:hover,
            a:focus {
                text-decoration: none;
            }
            
            a:active,
            a:hover,
            a:focus {
                outline: 0 none;
            }
            
            .theme-orange {
                background: #0092dd;
                color: white;
                transition: all 0.7s;
                -webkit-transition: all 0.7s;
                -moz-transition: all 0.7s;
                -ms-transition: all 0.7s;
                -o-transition: all 0.7s;
            }
            
            .theme-orange:hover {
                background: #FF9C00;
                color: white;
            }
            
            .theme-blue {
                background: #2c3358;
                color: white;
            }
            
            .theme-footer {
                background: linear-gradient(rgba(21, 0, 97, 0.37), rgba(21, 0, 97, 0.37)), url(../img/contact-bg.jpg) center center no-repeat;
                color: white;
                background-size: cover;
            }
            
            .bottom-footer {
                flex-direction: column;
                text-align: center;
            }
            
            footer h5 {
                font-family: 'poppins', sans-serif;
            }
            
            footer p {
                color: #c5c5c5;
                line-height: 2;
            }
            
            footer ul {
                list-style: none;
                padding-left: 0;
                color: #c5c5c5;
            }
            
            footer ul li {
                padding-bottom: 0.5rem;
            }
            
            footer .fas {
                font-size: 20px;
                color: #0092dd;
            }
            
            footer ul li a:hover {
                color: #0092dd;
                transition: all 0.5s;
                -webkit-transition: all 0.5s;
                -moz-transition: all 0.5s;
                -ms-transition: all 0.5s;
                -o-transition: all 0.5s;
            }
            
            .address-icon .fa {
                font-size: 25px;
            }
            
            .social-icon li {
                display: inline-block;
                font-size: 16px;
            }
            
            .social-links a {
                display: inline-block;
                height: 30px;
                width: 30px;
                background-color: rgba(255, 255, 255, 0.959);
                margin: 0 10px 10px 0;
                text-align: center;
                line-height: 31px;
                border-radius: 50%;
                color: #0092dd;
                transition: all 0.7s ease;
                -webkit-border-radius: 50%;
                -moz-border-radius: 50%;
                -ms-border-radius: 50%;
                -o-border-radius: 50%;
                -webkit-transition: all 0.7s ease;
                -moz-transition: all 0.7s ease;
                -ms-transition: all 0.7s ease;
                -o-transition: all 0.7s ease;
            }
            
            .social-links a:hover {
                color: #ffffff;
                background-color: #0092dd;
            }
            /* ======================================================= */
            /* ========================= blog ================================ */
            
            .blog {
                position: relative;
            }
            
            .counter-section,
            .target,
            .our-team,
            .online-course,
            .search-course,
            .event-listing,
            .event-gallery,
            .blog,
            .blog-detail,
            .aboutus,
            .abt-counter,
            .timeline,
            .result,
            .result-list,
            .student,
            .faculties,
            .course,
            .blog-block,
            .contact-section {
                padding: 50px 0;
            }
            
            .sec-title .title {
                position: relative;
                display: block;
                font-size: 20px;
                line-height: 1.2em;
                color: #0092dd;
                font-weight: 600;
                margin-bottom: 20px;
                text-transform: uppercase;
                font-family: 'poppins', sans-serif;
            }
            
            .sec-title h2 {
                position: relative;
                display: block;
                line-height: 1.2em;
                color: #150061;
                font-weight: 700;
            }
            
            .sec-title .divider {
                position: relative;
                display: inline-block;
                margin: 10px 0;
                width: 150px;
                text-align: center;
            }
            
            .sec-title .divider::before,
            .sec-title .divider::after {
                position: absolute;
                left: 0;
                top: 9px;
                height: 1px;
                width: 52px;
                background-color: #0092dd;
                content: "";
            }
            
            .bg-fill .divider:before,
            .bg-fill .divider:after {
                background-color: white !important;
            }
            
            .sec-title .divider:after {
                left: auto;
                right: 0;
            }
            
            .divider .fa {
                color: #0c0b39;
            }
            
            .bg-fill .divider .fa {
                color: white;
            }
            
            .slick-prev:hover,
            .slick-prev:focus,
            .slick-next:hover,
            .slick-next:focus {
                background: #0c0b39 !important;
            }
            
            .blog {
                position: relative;
            }
            
            .read-more {
                border: 1px solid #0092dd;
                border-radius: 22px;
                font-size: 15px;
                transition: all 0.5s;
                -webkit-transition: all 0.5s;
                -moz-transition: all 0.5s;
                -ms-transition: all 0.5s;
                -o-transition: all 0.5s;
            }
            
            .read-more:hover {
                background-color: #0092dd;
                color: white;
            }
            
            .post_inner {
                background: #f4faff;
            }
            
            .post:hover {
                box-shadow: 0 0 30px 0 rgba(0, 0, 0, .2);
                background-color: #fff;
            }
            
            .post:hover .post_inner {
                background: white !important;
            }
            
            .post {
                transition: all 0.3s;
                -webkit-transition: all 0.3s;
                -moz-transition: all 0.3s;
                -ms-transition: all 0.3s;
                -o-transition: all 0.3s;
            }
            
            .post:hover {
                -webkit-box-shadow: 0 5px 35px 0 rgba(51, 51, 51, 0.05);
                box-shadow: 0 5px 35px 0 rgba(51, 51, 51, 0.05);
                transform: translateY(-10px);
                -webkit-transform: translateY(-10px);
                -moz-transform: translateY(-10px);
                -ms-transform: translateY(-10px);
                -o-transform: translateY(-10px);
            }
            
            .post img {
                height: 233px;
                object-fit: cover;
                width: 100%;

            }
            
            .joinus {
                padding: 50px 0;
            }
            
            .joinus-content {
                padding: 3rem;
                margin-top: -40px;
            }
            
            .joinus-content .read-more {
                font-size: 16px;
            }
            
            .left-mr {
                margin-left: -9rem;
                margin-top: 2.5rem;
            }
            
            .p-10 {
                padding: 10rem;
            }
            
            .color-orange {
                color: #0092dd;
            }
            /* ============================================================================== */
            /*scroll to top*/
            
            #scroll {
                position: fixed;
                right: 15px;
                bottom: 15px;
                cursor: pointer;
                width: 50px;
                height: 50px;
                background-color: #0092dd;
                text-indent: -9999px;
                display: none;
                -webkit-border-radius: 60px;
                -moz-border-radius: 60px;
                border-radius: 60px;
            }
            
            #scroll {
                display: inline;
            }
            
            #scroll span {
                position: absolute;
                top: 50%;
                left: 50%;
                margin-left: -8px;
                margin-top: -12px;
                height: 0;
                width: 0;
                border: 8px solid transparent;
                border-bottom-color: #ffffff;
            }
            
            #scroll:hover {
                background-color: white;
                opacity: 1;
                filter: "alpha(opacity=100)";
                -ms-filter: "alpha(opacity=100)";
                box-shadow: 0 0 18px 0 rgba(0, 0, 0, 0.12);
            }
            
            #scroll:hover span {
                border-bottom-color: #0092dd;
            }
            /* ============================================= */
            /*10. Online course*/
            
            .pa-2 {
                padding: 2rem;
            }
            
            .online-course-inner {
                color: white;
                background: rgba(16, 11, 57, 0.82);
                padding: 50px 0px 50px;
            }
            
            .online-course-inner input {
                padding: 1.6rem;
            }
            
            .online-course img {
                width: 75px;
            }
            
            .theme-box {
                background-color: #0092dd;
                color: white;
            }
            /*================================= features ===========================*/
            
            .target {
                background: linear-gradient(rgba(16, 11, 57, 0.400), rgba(16, 11, 57, 0.400)), url(../img/bg_1.jpg) center center no-repeat;
                background-size: cover;
            }
            
            .target-block {
                border: 1px solid rgba(255, 255, 255, 0.356);
                position: relative;
            }
            
            .border-line {
                width: 100%;
                height: 100%;
                position: absolute;
                border: 1px solid #0092dd81;
                top: 5px;
                left: 5px;
                z-index: -1;
            }
            
            .target-block {
                -webkit-transition: all 300ms ease;
                -ms-transition: all 300ms ease;
                -o-transition: all 300ms ease;
                -moz-transition: all 300ms ease;
                transition: all 300ms ease;
            }
            
            .target-block:hover {
                transform: scale(1.02);
                -webkit-transform: scale(1.02);
                -moz-transform: scale(1.02);
                -ms-transform: scale(1.02);
                -o-transform: scale(1.02);
            }
            
            .target-block:hover .target-icon {
                transform: rotateY(190deg);
                -webkit-transform: rotateY(190deg);
                -moz-transform: rotateY(190deg);
                -ms-transform: rotateY(190deg);
                -o-transform: rotateY(190deg);
            }
            
            .target-block .target-icon {
                transform: rotateY(190deg);
                -webkit-transition: all 0.7s ease-in-out;
                -moz-transition: all 0.7s ease-in-out;
                -ms-transition: all 0.7s ease-in-out;
                -o-transition: all 0.7s ease-in-out;
                transition: all 0.7s ease-in-out;
            }
            
            .target-block .border-line {
                z-index: unset;
            }
            /* ======================== about ===================================== */
            
            .about-school {
                padding: 50px 0px 0px;
            }
            
            .about-img {
                position: relative;
            }
            
            .img-border {
                position: relative;
                max-width: fit-content;
                padding: 1rem;
            }
            
            .about-img .img_1 {
                border: 1px solid #1e008a;
                position: relative;
                max-width: fit-content;
                padding: 1rem;
            }
            
            .about-img .img_2 {
                position: absolute;
                right: 25%;
                bottom: 35px;
                padding: 1rem;
                background: #0092dd;
                justify-content: space-between;
                width: 200px;
            }
            
            .event-info ul li {
                display: inline;
            }
            
            .event-info a:hover {
                color: #0092dd;
                transition: all 0.3s;
                -webkit-transition: all 0.3s;
                -moz-transition: all 0.3s;
                -ms-transition: all 0.3s;
                -o-transition: all 0.3s;
            }
            /* ================================================================== */
            /* ---------------------------------- course ---------------------------------- */
            
            .search-course {
                background: linear-gradient(rgba(16, 11, 57, 0.82), rgba(16, 11, 57, 0.82)), url(../img/online-course-bg.jpg) center center no-repeat;
                background-size: cover;
            }
            
            .online-course-inner {
                color: white;
                background: rgba(16, 11, 57, 0.82);
                padding: 50px 0px 50px;
            }
            
            .online-course-inner input {
                padding: 1.6rem;
            }
            
            .online-course img {
                width: 75px;
            }
            
            .counter-section {
                position: relative;
                z-index: 100;
            }
            
            .counter {
                border: 1px solid #0092dd;
                position: relative;
                padding: 3rem;
                margin-bottom: 1.5rem;
            }
            
            .counter-box {
                text-align: center;
            }
            
            .count-title {
                position: absolute;
                bottom: -36px;
                padding: 0.5rem;
                color: white;
                background: #0092dd;
                left: 0;
                right: 0;
                margin-left: auto;
                margin-right: auto;
                max-width: 130px;
            }
            
            .counter-section .counter-box .count-title {
                background: #0c0b39 !important;
            }
            
            .counter .fa {
                color: #0092dd;
            }
            
            .margin-bottom {
                margin-bottom: 2rem !important;
            }
            /*===================================  slider ===================================*/
            
            .carousel {
                position: relative
            }
            
            .carousel.pointer-event {
                touch-action: pan-y
            }
            
            .carousel-inner {
                position: relative;
                width: 100%;
                overflow: hidden
            }
            
            .carousel-inner::after {
                display: block;
                clear: both;
                content: ""
            }
            
            .carousel-item {
                position: relative;
                display: none;
                float: left;
                width: 100%;
                margin-right: -100%;
                -webkit-backface-visibility: hidden;
                backface-visibility: hidden;
                transition: transform .6s ease-in-out
            }
            
            @media (prefers-reduced-motion:reduce) {
                .carousel-item {
                    transition: none
                }
            }
            
            .carousel-item-next,
            .carousel-item-prev,
            .carousel-item.active {
                display: block
            }
            
            .active.carousel-item-end,
            .carousel-item-next:not(.carousel-item-start) {
                transform: translateX(100%)
            }
            
            .active.carousel-item-start,
            .carousel-item-prev:not(.carousel-item-end) {
                transform: translateX(-100%)
            }
            
            .carousel-fade .carousel-item {
                opacity: 0;
                transition-property: opacity;
                transform: none
            }
            
            .carousel-fade .carousel-item-next.carousel-item-start,
            .carousel-fade .carousel-item-prev.carousel-item-end,
            .carousel-fade .carousel-item.active {
                z-index: 1;
                opacity: 1
            }
            
            .carousel-fade .active.carousel-item-end,
            .carousel-fade .active.carousel-item-start {
                z-index: 0;
                opacity: 0;
                transition: opacity 0s .6s
            }
            
            @media (prefers-reduced-motion:reduce) {
                .carousel-fade .active.carousel-item-end,
                .carousel-fade .active.carousel-item-start {
                    transition: none
                }
            }
            
            .carousel-control-next,
            .carousel-control-prev {
                position: absolute;
                top: 0;
                bottom: 0;
                z-index: 1;
                display: flex;
                align-items: center;
                justify-content: center;
                width: 15%;
                padding: 0;
                color: #fff;
                text-align: center;
                background: 0 0;
                border: 0;
                opacity: .5;
                transition: opacity .15s ease
            }
            
            @media (prefers-reduced-motion:reduce) {
                .carousel-control-next,
                .carousel-control-prev {
                    transition: none
                }
            }
            
            .carousel-control-next:focus,
            .carousel-control-next:hover,
            .carousel-control-prev:focus,
            .carousel-control-prev:hover {
                color: #fff;
                text-decoration: none;
            }
            
            .carousel-control-prev {
                left: 0
            }
            
            .carousel-control-next {
                right: 0
            }
            
            .carousel-control-next-icon,
            .carousel-control-prev-icon {
                display: inline-block;
                width: 2rem;
                height: 2rem;
                background-repeat: no-repeat;
                background-position: 50%;
                background-size: 100% 100%
            }
            
            .carousel-control-prev-icon {
                background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23fff'%3e%3cpath d='M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z'/%3e%3c/svg%3e")
            }
            
            .carousel-control-next-icon {
                background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23fff'%3e%3cpath d='M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e")
            }
            
            .carousel-indicators {
                position: absolute;
                right: 0;
                bottom: 0;
                left: 0;
                z-index: 2;
                display: flex;
                justify-content: center;
                padding: 0;
                margin-right: 15%;
                margin-bottom: 1rem;
                margin-left: 15%;
                list-style: none
            }
            
            .carousel-indicators [data-bs-target] {
                box-sizing: content-box;
                flex: 0 1 auto;
                width: 30px;
                height: 3px;
                padding: 0;
                margin-right: 3px;
                margin-left: 3px;
                text-indent: -999px;
                cursor: pointer;
                background-color: #0092dd;
                background-clip: padding-box;
                border: 0;
                border-top: 10px solid transparent;
                border-bottom: 10px solid transparent;
                opacity: .5;
                transition: opacity .6s ease
            }
            
            @media (prefers-reduced-motion:reduce) {
                .carousel-indicators [data-bs-target] {
                    transition: none
                }
            }
            
            .carousel-indicators .active {
                opacity: 1
            }
            /* .carousel-caption {
        position: absolute;
        right: 15%;
        bottom: 1.25rem;
        left: 15%;
        padding-top: 1.25rem;
        padding-bottom: 1.25rem;
        color: #fff;
        text-align: center
    } */
            
            .carousel-dark .carousel-control-next-icon,
            .carousel-dark .carousel-control-prev-icon {
                filter: invert(1) grayscale(100)
            }
            
            .carousel-dark .carousel-indicators [data-bs-target] {
                background-color: #000
            }
            
            .carousel-dark .carousel-caption {
                color: #000
            }
            /********************************* gallery ************************************/
            
            .autoplay img {
                height: 270px;
            }
            
            .result_img {
                position: relative;
            }
            
            .result_img img {
                object-fit: cover;
            }
            
            .overlay {
                background-color: #0c0b39c5;
                position: absolute;
                width: 100%;
                height: 100%;
                bottom: 0;
                left: 0px;
                right: 0px;
                top: 0px;
                margin: auto;
                transition: all ease .5s;
                opacity: 0;
            }
            
            .overlay-text {
                opacity: 0;
                position: absolute;
                top: 50px;
                left: 50px;
                color: white;
            }
            
            .result_img:hover .overlay,
            .result_img:hover .overlay-text,
            .Portfolio:hover .overlay,
            .Portfolio:hover .overlay-text {
                opacity: 1;
            }
            /* ========================= sub page inner banner ================================== */
            
            .inner-banner {
                padding: 100px 0;
                /* background: url("../img/inner-bg.jpg"); */
                background: linear-gradient(hsla(200, 100%, 43%, 0.300), hsla(253, 100%, 27%, 0.300)), url(../img/inner-bg.jpg) center center no-repeat;
                background-position: top;
                background-size: cover;
                position: relative;
                color: white;
            }
            /*********************************Contact Page************************************/
            
            .contact-form {
                border: 1px solid #1e008a;
                position: relative;
                padding-right: 170px !important;
                /* z-index: -1; */
            }
            
            .form-control:focus {
                border-color: #0c0b39;
                box-shadow: unset;
            }
            
            .contact-icon {
                cursor: pointer;
                margin-right: -65px;
                background: #0092dd;
                padding: 1rem;
                width: 70px;
                transition: all 0.3s ease-in-out;
                -webkit-transition: all 0.3s ease-in-out;
                -moz-transition: all 0.3s ease-in-out;
                -ms-transition: all 0.3s ease-in-out;
                -o-transition: all 0.3s ease-in-out;
            }
            
            .contact-icon:hover {
                background: #f1ae4a;
            }
            
            .media img:hover {
                transform: scale(1.1);
                -webkit-transform: scale(1.1);
                -moz-transform: scale(1.1);
                -ms-transform: scale(1.1);
                -o-transform: scale(1.1);
            }
            
            .contact-form input {
                border-radius: unset;
            }
            
            .contact-form .mb-3 label {
                position: relative;
                color: #222222;
                font-size: 16px;
                font-weight: 400;
            }
            
            label {
                margin-bottom: 0.5rem;
            }
            
            .contact-form ::placeholder {
                font-size: 14px;
            }
            
            .ms-minus {
                padding: 3rem 0 0;
                margin-left: -113px;
                z-index: 9999;
            }
            
            .contact-section .media {
                padding: 2rem !important;
                margin-right: 5rem;
                min-height: 146px;
            }
            
            .coming-soon {
                color: #251e63;
                border-bottom: 2px solid #251e63;
            }
            
            .accordion-item {
                background-color: #d7f2ff;
            }
            
            .accordion-button:not(.collapsed) {
                background-color: #f0a040;
            }
            
            .accordion-button {
                background-color: #61cbff;
            }

            /*------------------------------------ dowonload ---------------------------------- */
            .download {
                display: flex;
                align-items: center;
                background-color: #2c3494;
                border-radius: 10px !important;
                color: #ffffff;
                height: 50px !important;
            }

/*------------------------------------ Thought of the day start ---------------------------- */

.herobtn {
    position: absolute;
    z-index: 990;
    height: 300px;
    width: 300px;
    right: 14px;
    top: 94px;
    /* background: #ffd921; */
    /* padding: 10px; */
    border-radius: 10px;
    text-align: right;
}

.thought {
    border-radius: 5px;
}

.thought-caption {
    font-size: 1.25rem !important ;
    color: #000000;
    font-weight: 700;
    /*margin: 0;*/
}


.main-border-button1 {
    display: inline-block;
}



@media only screen and (max-width: 300px) and (min-width: 100px) {
    .herobtn{
        display: none;
    }
    .herobtn1 {
        display: none;
    }
    .swing {
        display: none;
    }
}

@media only screen and (min-width: 300px) and (max-width: 500px) {
    /* .herobtn {
        width: 100px;
        height: 100px;
        padding: 5px;
    } */
     .herobtn{
        width: 86px;
        height: 87px;
        top: 43px;
     }
    .thought-caption {
        font-size: 10px !important;
    }

}

@media only screen and (min-width: 500px) and (max-width: 700px) {
    .herobtn {
        width: 150px;
        height: 150px;
        padding: 5px;
        top: 51px;
    }
    .thought-caption {
        font-size: 14px !important;
    }
}

@media only screen and (min-width: 700px) and (max-width: 900px) {
    .herobtn {
        width: 200px;
        height: 200px;
    }
}

/*------------------------------------ Thought of the day end -------------------------- */
.herobtn1 {
    position: absolute;
    z-index: 1;
    width:auto;
    height:auto;
    right: 7px;
    top: 19px;
}

.text{
    height: auto;
        font-family: "Kalam", cursive;
        font-weight: 700;
        font-style: normal;
      
}

@media only screen and (max-width: 300px) and (min-width: 100px) {
    .herobtn .herobtn1 {
        display: none;
    }
    
    .text{
        display: none;
    }
}

@media only screen and (min-width: 300px) and (max-width: 500px) {
    .herobtn1 {
        top: -16px;
    }
    .thought-caption {
        font-size: 5px !important;
    }
    .text{
        display: none;
    }
}

@media only screen and (min-width: 500px) and (max-width: 700px) {
    .herobtn1 {
        top: -10px;
    }
    .thought-caption {
        font-size: 14px !important;
    }
    .text{
        display: inline;
    }
}

/* Hanging style */
.swing {
    animation: swing ease-in-out 1s infinite alternate;
    transform-origin: center -20px;
    float:left;
    box-shadow: 5px 5px 10px rgba(0,0,0,0.5);
}
.swing img {
    border: 5px solid #f8f8f8;
    display: block;
}
.swing:after{
    content: '';
    position: absolute;  
    width: 20px; height: 20px;  
    border: 1px solid #262525;
    top: -10px; left: 47%;
    z-index: 0;
    border-bottom: none;
    border-right: none;
    transform: rotate(45deg);
}
/* nail */
.swing:before{
    content: '';
    position: absolute;
    width: 6px;
    height: 6px;
    top: -15px;
    left: 50.5%;
    z-index: 5;
    border-radius: 62% 73%;
    background: #000;
}
 
@keyframes swing {
    0% { transform: rotate(3deg); }
    100% { transform: rotate(-3deg); }
}


@media only screen and (max-width: 300px) and (min-width: 100px) {
    .swing{
        display: none;
    }
}

@media only screen and (min-width: 300px) and (max-width: 700px) {
    .swing{
        content: '';
        position: absolute;  
        width: -10px; height: 20px;  
        border: 1px solid #999;
        top: 10px; 
        right: 4%;
        z-index: 0;
        border-bottom: none;
        border-right: none;
        transform: rotate(45deg);
     }

}

/* @media only screen and (min-width: 600px) and (max-width: 700px) {
    .swing {
        width: 150px;
        padding: 0px;
        top: 10px;
    }
    .thought-caption {
        font-size: 14px !important;
    }
} */

@media only screen and (min-width: 700px) and (max-width: 900px) {
    .swing {
        width: 200px;
        height: 200px;
    }
}


/* 11 */
.custom-btn {
    /* width: 130px; */
    height: 40px;
    color: #fff;
    border-radius: 5px;
    padding: 10px 25px;
    font-family: 'Lato', sans-serif;
    font-weight: 500;
    background: transparent;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
    display: inline-block;
     box-shadow:inset 2px 2px 2px 0px rgba(255,255,255,.5),
     7px 7px 20px 0px rgba(0,0,0,.1),
     4px 4px 5px 0px rgba(0,0,0,.1);
    outline: none;
  }
  
  /* 11 */
  .btn-11 {
    border: none;
    background: rgb(251,33,117);
      background: linear-gradient(0deg, rgba(251,33,117,1) 0%, rgba(234,76,137,1) 100%);
      color: #fff;
      overflow: hidden;
  }
  .btn-11:hover {
      text-decoration: none;
      color: #fff;
  }
  .btn-11:before {
      position: absolute;
      content: '';
      display: inline-block;
      top: -180px;
      left: 0;
      width: 30px;
      height: 100%;
      background-color: #fff;
      animation: shiny-btn1 3s ease-in-out infinite;
  }
  .btn-11:hover{
    opacity: .7;
  }
  .btn-11:active{
    box-shadow:  4px 4px 6px 0 rgba(255,255,255,.3),
                -4px -4px 6px 0 rgba(116, 125, 136, .2), 
      inset -4px -4px 6px 0 rgba(255,255,255,.2),
      inset 4px 4px 6px 0 rgba(0, 0, 0, .2);
  }
  
  
  @-webkit-keyframes shiny-btn1 {
      0% { -webkit-transform: scale(0) rotate(45deg); opacity: 0; }
      80% { -webkit-transform: scale(0) rotate(45deg); opacity: 0.5; }
      81% { -webkit-transform: scale(4) rotate(45deg); opacity: 1; }
      100% { -webkit-transform: scale(50) rotate(45deg); opacity: 0; }
  }