:root{
    --clr-primary: #6d28d9;
	--clr-primary-light: #f5f3ff;
    --clr-red: #FF0000;
    --clr-black: #000000;
    --clr-yellow: #ffe135;
    --clr-white: #FFFFFF;
    --clr-slate-500: #64748b;
    --clr-slate-800: #1e293b;
    --clr-gray-100: #f3f4f6;
    --clr-gray-300: #d1d5db;
    --clr-blue-50: #eff6ff;
    --clr-blue-100: #dbeafe;
    --clr-blue-200: #bfdbfe;
    --clr-blue-300: #93c5fd;
    --clr-blue-400: #60a5fa;
    --clr-blue-500: #3b82f6;
    --clr-blue-900: #1e3a8a;
    --clr-violet-50: #f5f3ff;
    --clr-violet-100: #ede9fe;
    --clr-violet-200: #ddd6fe;
    --clr-violet-300: #c4b5fd;
    --clr-violet-400: #a78bfa;
    --clr-green-500: #22c55e;
    --clr-cyan-50: #ecfeff;
    --icon-font: "Font Awesome 6 Free";
	--body-font-family: 'Poppins', sans-serif;
	--title-font-family: 'Poppins', sans-serif;
}
h1,h2,h3,h4,h5,h6{
    font-family: var(--title-font-family);
}
body{
    font-family: var(--body-font-family);
    font-size: 1rem;
    font-weight: 400;
    color: var(--clr-black);
}
.container{
    max-width: 78rem;
}

.bg-cyan-50{
    background-color: var(--clr-cyan-50);
}
.bg-blue-50{
    background-color: var(--clr-blue-50);
}
.bg-blue-100{
    background-color: var(--clr-blue-100);
}
.bg-blue-200{
    background-color: var(--clr-blue-200);
}
.bg-blue-300{
    background-color: var(--clr-blue-300);
}
.bg-blue-400{
    background-color: var(--clr-blue-400);
}
.bg-blue-500{
    background-color: var(--clr-blue-500);
}
.bg-violet-50{
    background-color: var(--clr-violet-50);
}
.bg-violet-100{
    background-color: var(--clr-violet-100);
}
.bg-violet-200{
    background-color: var(--clr-violet-200);
}
.bg-violet-300{
    background-color: var(--clr-violet-300);
}
.bg-violet-400{
    background-color: var(--clr-violet-400);
}
.text-blue-500{
    color: var(--clr-blue-500);
}
.text-primary{
    color: var(--clr-primary) !important;
}
@media (min-width: 992px){
    section p{
        font-size: 1.125rem;
    }
}
/*|==================================================================================
    Topbar Section
====================================================================================|*/
/* .topbar-section{
    padding: .625rem 0;
    border-bottom: 1px solid #dee2de;
}
.topbar-section ul{
    display: flex;
    align-items: center;
}
.topbar-section ul li{}
.topbar-section ul li a{
    display: block;
    color: var(--clr-black);
    padding: .25rem 0;
}
.topbar-section ul li a:hover{
    color: var(--clr-primary);
}
.topbar-section .topbar-left ul li:last-child a{
    border-left: 1px solid #dee2de;
    padding-left: 1.25rem;
    margin-left: 1.25rem;
}
.topbar-section .topbar-left ul li a i{
    margin-right: .25rem;
}
.topbar-section .topbar-right{
    display: flex;
    align-items: center;
    justify-content: center;
}
.topbar-section .topbar-right ul{
    padding-right: .5rem;
    margin-right: 1rem;
    border-right: 1px solid #dee2de;
}
.topbar-section .topbar-right .btn-text{
    color: var(--clr-black);
}
.topbar-section .topbar-right .btn-text:hover{
    color: var(--clr-primary);
    text-decoration: none;
}
.topbar-section .topbar-right .btn-text i{
    margin-right: .25rem;
}
.social-list{
    display: flex;
    align-items: center;
}
.social-list li{}
.social-list li .social-link{
    display: block;
    padding: .25rem .75rem;
}
.social-list li .social-link:hover{
    color: var(--clr-primary);
} 
.scroll-top {
    position: fixed;
    bottom: 105%;
    right: 20px;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    cursor: pointer;
    z-index: 11;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: all .5s linear;
}
.scroll-top.scrolltopactive {
    bottom: 30px;
    opacity: 1;
    visibility: visible;
    pointer-events: all;
}
.scroll-top:hover .scroll-top-inner {
    color: #fff
}
.scroll-top:after {
    position: absolute;
    z-index: -1;
    content: "";
    top: 100%;
    left: 5%;
    height: 10px;
    width: 90%;
    opacity: 1;
    background: radial-gradient(ellipse at center,rgba(0,0,0,.25) 0,transparent 80%);
}
.scroll-top-inner {
    transition: all .3s linear;
    color: #fff;
    background: var(--clr-primary);
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    border-radius: 50%;
} */
/*| Media Query ====================================================================|*/
/* @media (min-width: 992px){
    .topbar-section .topbar-right{
        justify-content: flex-end;
    }
}
@media (max-width: 575.98px){
    .scroll-top{
        display: none;
    }
} */
/*|==================================================================================
    Header
====================================================================================|*/
/* .header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    background-color: var(--clr-white);
    transition: top 0.5s ease; 
    box-shadow: rgba(33, 35, 38, 0.1) 0px 10px 10px -10px;
    z-index: 1000;
} */
/* #header.fixed-top{
    box-shadow: 0 9px 54px 0 rgba(32,32,32,.1);
    background-color: #fff;
    animation: fadeInDown .5s running;
    transition: all .5s;
} */
#header .navbar{
    padding: 0;
}
#header .navbar .navbar-brand img{
    width: 170px;
}
#header .navbar-nav .nav-item .nav-link{
    position: relative;
    overflow: hidden;
    color: var(--clr-gray-800);
    font-size: 1rem;
    font-weight: 500;
    padding: .5rem 0;
}
#header .navbar-nav .nav-item .nav-link.active,#header .navbar-nav .nav-item .nav-link:hover{
    color: var(--clr-primary);
}
#header .navbar-nav .dropdown-toggle::after{
    border: none;
    content: '\f107';
    font-family: var(--icon-font);
    font-weight: 900;
    font-size: .875rem;
    vertical-align: middle;
}
#header .navbar-nav .dropdown-menu{
    margin: 0;
    padding: 0;
    border-radius: 0 0 12px 12px;
    border-top: 2px solid var(--clr-primary);
}
#header .navbar-nav .dropdown-menu .dropdown-item{
    padding: .5rem 1rem;
}
#header .navbar-nav .dropdown-menu .dropdown-item:focus,.dropdown-menu .dropdown-item:active{
    color: var(--clr-primary);
    background-color: transparent;
}
#header .navbar-nav .dropdown-menu li .dropdown-item:hover{
    color: var(--clr-white);
    background-color: var(--clr-primary);
}
#header .navbar-nav .dropdown-menu li:last-child .dropdown-item:hover{
    border-radius: 0 0 12px 12px;
}
/* .mega-menu{}
.mega-menu .container{
    border: 1px solid #dee2de;
    border-top: 2px solid var(--clr-primary);
    border-radius: 0 0 12px 12px;
    position: relative;
    padding: 0;
    background-color: var(--clr-white);
}
.mega-menu .mega-dropdown-bg{
    position: absolute;
    top: 0;
    right: 0;
}
.mega-menu .mega-dropdown-bg img{
    height: 297px;
    border-bottom-right-radius: 12px;
}
.mega-menu .dropdown-header{
    padding: 0 0 1rem;
}
.mega-menu .dropdown-header .title{
    color: var(--clr-black);
    font-size: 1.25rem;
    font-weight: 700;
    margin-bottom: 0;
}
.mega-menu .dropdown-submenu{
    padding: 1.5rem 1rem 1rem;
}
.mega-menu ul{}
.mega-menu ul li a{
    display: block;
    color: #777;
    padding: .25rem 0;
}
.mega-menu .menu-bottom{
    position: relative;
    display: flex;
    gap: 1.25rem;
    flex-direction: column;
    align-items: center;
    padding: 1.25rem 1rem;
    border-radius: 0 0 12px 12px;
    border-top: 1px solid #dee2de;
}
.mega-menu .menu-bottom .menu-bottom-left,.mega-menu .menu-bottom .menu-bottom-right{
    position: relative;
}
.mega-menu .menu-bottom .title{
    font-size: 1.25rem;
    font-weight: 600;
}
.mega-menu .menu-bottom .btn i{
    margin-left: 6px;
} */
/*| Media Query |====================================================================|*/
@media (min-width: 992px){
    #header .navbar-nav .dropdown:hover > .dropdown-menu{
		display: block;
	}
	#header .navbar-nav .dropdown >.dropdown-toggle:active{
		pointer-events: none;
	}
    #header .navbar-nav .nav-item .nav-link{
        padding: 1.75rem 1rem;
    }
    #header .navbar-nav .dropdown-menu .dropdown-item{
        padding: .625rem 1.25rem;
    }
    /* .navbar .has-megamenu{
        position: static;
    }
    .navbar .mega-menu{
        right: 0;
        left: 0;
        width: 100%;
        border: none;
        background-color: transparent;
    }
    .mega-menu .dropdown-submenu{
        padding: 2rem 1.5rem 1.5rem;
    }
    .mega-menu ul{
        padding: 0 0;
    }
    .mega-menu .menu-bottom{
        gap: 3.5rem;
        flex-direction: row;
        padding: 1.5rem;        
    }
    .mega-menu .menu-bottom::before{
        display: block;
        content: '';
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 100%;
        border-radius: 0 0 12px 12px;
        background-color: rgba(255, 255, 255, 0.7);
    }
    .mega-menu .menu-bottom p{
        margin-bottom: 0;
    }
    .menu-bottom-right span{
        margin: 0 20px;
    } */
}
@media (max-width: 991.98px){
    /* .mega-menu .mega-dropdown-bg{
        display: none;
    }
    .mega-menu .dropdown-header{
        padding: 0 0 .75rem;
    } */
}
/* @media (max-width: 320.98px){
    .mega-menu .menu-bottom{
        padding: 1rem 0 0;
    }
    .mega-menu .menu-bottom p{
        margin-bottom: 0;
    }
    .mega-menu .menu-bottom .menu-bottom-left{
        margin-bottom: 1rem;
    }
    .menu-bottom-left,.menu-bottom-right{
        text-align: center;
    }
    .menu-bottom-right span{
        display: none;
    }
} */
/*|==================================================================================
    Image Upload Section
====================================================================================|*/
.image-upload-section{
    padding-top: 100px;
}
.uploadimage, .resized_image {
    border: 1px solid #ccc;
    margin: 10px 0;
    max-width: 100%;
}
.uploadimage{
    width: auto;
    max-height: 300px;
    border-radius: .75rem;
}
.resized_image{
    width: auto;
    max-height: 300px;
    border-radius: .75rem;
}
.uploadImage-metadata, .resizedImage-metadata {
    margin: 10px 0;
    padding: 10px;
    border: 1px solid #ccc;
}
#uploadArea {
    /* border: 2px dashed #0d6efd;*/
    border: 2px dashed var(--clr-primary);
    padding: 1.25rem;
    border-radius: 1rem;
    text-align: center;
    margin: 10px 0;
}
#uploadArea.dragover {
    border-color: var(--clr-primary);
    /* border-color: #007bff; */
}
/* Hide metadata and preview areas initially */
#imageMetadata, #resizedImage, #resizedImageMetadata, #uploadImage {
    display: none;
}
.resizedImage-metadata{
    text-align: start;
}
.controls .form-range{}
.form-label{
    color: var(--clr-black);
    font-weight: 600;
}
.form-control,.form-select{
    height: 40px;
    border-color: rgba(0, 0, 0, 0.2);
}
.form-control:focus,.form-select:focus{
    border-color: var(--clr-primary);
    box-shadow: 0 0 0 .25rem rgba(28, 167, 40,.25);
}
#customFileName{
    font-size: .875rem;
    font-weight: 500;
}
#customFileNam::placeholder{
    font-size: .875rem;
}
#qualityValueInput{
    font-size: 1rem;
    font-weight: 600;
    height: 32px;
    padding: .25rem;
}
/* Styling the range track */
input[type="range"] {
    -webkit-appearance: none; 
    appearance: none;
    width: 100%;
    height: 8px;
    background: #ddd; 
    border-radius: 5px;
    outline: none; 
    position: relative;
}
/* Track styles */
input[type="range"]::-webkit-slider-runnable-track {
    width: 100%;
    height: 8px; 
    /* background: linear-gradient(to right, #007bff, #28a745); */
    background-color: #dadada;
    border-radius: 5px;
    position: relative;
}
input[type="range"]::-moz-range-track {
    width: 100%;
    height: 8px; 
    /* background: linear-gradient(to right, #007bff, #28a745);  */
    background-color: #dadada;
    border-radius: 5px;
}
/* Thumb (the handle) styles */
input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 20px;
    height: 20px; 
    background: var(--clr-primary);
    border-radius: 50%;
    cursor: pointer;
    border: 2px solid var(--clr-primary); 
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
    position: relative;
    top: -2px; 
}
input[type="range"]::-moz-range-thumb {
    width: 20px;
    height: 20px;
    background: var(--clr-primary); 
    border-radius: 50%;
    cursor: pointer;
    border: 2px solid var(--clr-primary); 
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
    position: relative;
    top: -2px; 
}
input[type="range"]:focus::-webkit-slider-thumb {
    background: var(--clr-primary);
    border-color: var(--clr-primary);
    box-shadow: 0 0 0 .25rem rgba(28, 167, 40,.25);
}
input[type="range"]:focus::-moz-range-thumb {
    background: var(--clr-primary);
    border-color: var(--clr-primary);
    box-shadow: 0 0 0 .25rem rgba(28, 167, 40,.25);
}
/*| Media Query ====================================================================|*/
@media (min-width: 768px){}
@media (min-width: 992px){
    #uploadArea {
        padding: 2rem;
    }
}
@media (max-width: 991.98px){}
/*|==================================================================================
    Welcome Section
=====================================================================================|*/
.welcome-section{}
.welcome-section .section-header .welcome-title{}
.welcome-section .welcome-content{}
.welcome-section .section-header .welcome-title,.welcome-section .welcome-content .welcome-title{
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1.5;
}
.welcome-section .welcome-content p{
    line-height: 1.6;
}
/*| Media Query ====================================================================|*/
@media (min-width: 768px){}
@media (min-width: 992px){
    .welcome-section .section-header .welcome-title,.welcome-section .welcome-content .welcome-title{
        font-size: 3rem;
        line-height: 1.4;
    }
    .welcome-section .welcome-content p{
        font-size: 1.125rem;
    }
}
@media (min-width: 991.98px){}
/*|==================================================================================
    Featured Section
====================================================================================|*/
.featured-section{}
.featured-section .card{
    padding: 1rem;
    border-radius: 1rem;
    border: 1px solid #dee2de;
}
.featured-section .card .icon-box{
    margin-bottom: 1rem;
}
.featured-section .card .icon-box i{
    color: var(--clr-primary);
    font-size: 1.5rem;
}
.featured-section .card .card-body{
    padding: 0;
}
.featured-section .card .card-body .title{
    font-size: 1.25rem;
    font-weight: 600;
    margin-bottom: 1rem;
}
.featured-section .card .card-body p{
    margin-bottom: 0;
}
.home-featured-2 .card{
    border: 2px solid var(--clr-primary);
    background-color: var(--clr-violet-200);
    box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
}
.home-featured-2 .card .icon-box i{
    color: var(--clr-primary);
}
.home-featured-2 .card .card-body .title,.home-featured-2 .card .card-body p{
    color: var(--clr-black);
}
/*| Media Query ====================================================================|*/
@media (min-width: 768px){}
@media (min-width: 992px){
    .featured-section .card{
        padding: 1.5rem;
        height: 100%;
    }
    .featured-section .card .icon-box{
        margin-bottom: 2rem;
    }
    .featured-section .card .icon-box i{
        font-size: 2.5rem;
    }
    .featured-section .card .card-body .title{
        font-size: 1.5rem;
    }
    .featured-section .card .card-body p{
        font-size: 1.125rem;
    }
}
@media (max-width: 991.98px){
    .featured-section .card{
        margin-bottom: 1.25rem;
    }
}
/*|==================================================================================
    Zigzag Section
=====================================================================================|*/
.zigzag-section{}
.zigzag-section .zigzag-container .row{
    padding: 1rem;
    border-radius: 1rem;
}
.zigzag-section .zigzag-container .row:nth-child(1){
    background-color: #f1faff;
}
.zigzag-section .zigzag-container .row:nth-child(2){
    background-color: #fef1eb;
}
.zigzag-section .zigzag-container .row:nth-child(3){
    background-color: #e7e3fd;
}
.zigzag-section .zigzag-content{}
.zigzag-section .zigzag-content p{}
/*| Media Query ====================================================================|*/
@media (min-width: 768px){}
@media (min-width: 992px){
    .zigzag-section .zigzag-content p{
        font-size: 1.125rem;
    }
}
@media (min-width: 991.98px){}
/*|==================================================================================
    Section
=====================================================================================|*/

/*| Media Query ====================================================================|*/
@media (min-width: 576px){}
@media (min-width: 768px){}
@media (min-width: 992px){}
@media (min-width: 991.98px){}
/*|==================================================================================
    Section
=====================================================================================|*/

/*| Media Query ====================================================================|*/
@media (min-width: 768px){}
@media (min-width: 992px){}
@media (min-width: 991.98px){}
/*|==================================================================================
    Testimonial Section
=====================================================================================|*/
.testimonial-section{}
.testimonial-container .card{
    border: none;
    border-radius: .75rem;
    box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
}
.testimonial-container .card .card-body{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
}
.testimonial-container .card .card-body p{}
.testimonial-container .card .card-body .author-name{
    font-size: 1.25rem;
}
.testimonial-container .card .card-body .author-position{
    font-size: .875rem;
}
/*| Media Query ====================================================================|*/
@media (min-width: 768px){}
@media (min-width: 992px){
    /* .testimonial-container .card{
        height: 100%;
    } */
    .testimonial-container .card .card-body{
        padding: 1.5rem;
    }
    .testimonial-container .card .card-body p{
        font-size: 1.125rem;
    }
}
@media (min-width: 991.98px){
    .testimonial-container .card{
        margin-bottom: 1.25rem;
    }
}
/*|==================================================================================
    CTA Section
=====================================================================================|*/
.cta-section{
    background-color: var(--clr-violet-400);
}
.cta-section .cta-content .cta-title{
    font-size: 1.5rem;
    line-height: 1.5;
    font-weight: 600;
}
.cta-section .cta-content p{}
/*| Media Query ====================================================================|*/
@media (min-width: 768px){}
@media (min-width: 992px){
    .cta-section .cta-content .cta-title{
        font-size: 3rem;
    }
    .cta-section .cta-content p{
        font-size: 1.125rem;
    }
}
@media (min-width: 991.98px){}
/*|==================================================================================
    Post Section
====================================================================================|*/
.post-sectiontion{
	/* background-color: #ecf1f7; */
}
.post-section .card{
	border-radius: 0;
	border: none;
    margin-bottom: 1rem;
    /* box-shadow: 0 2px 3px rgba(0, 0, 0, .16); */
    transition: all .3s ease-in;
}
.post-section .img-box{
	position: relative;
	border-radius: 0;
	z-index: 1;
}
.post-section .img-box a{
	display: block;
} 
.post-section .img-box img{
	position: relative;
	width: 100%;
    border-radius: .5rem;
	object-fit: cover;
}
.post-section .card-body{
    padding: 1rem 0;
}
.post-section .card .title{
	font-size: 1.125rem;
    /* font-weight: 600; */
	display: -webkit-box;
	--webkit-line-clamp: 2;
	--webkit-box-orient: vertical;
	text-overflow: ellipsis;
	overflow: hidden;
}
/*| Media Query ====================================================================|*/
@media (min-width: 768px) {
    .post-section .card.web-story .img-box img{
		max-width: 274px;
		max-height: 365px;
	}
    .post-section .img-box img{
        height: 280px;
    }
}
@media (min-width: 992px) {
	.post-section .card{
		margin-bottom: 1.5rem;
	}
    .post-section .img-box img{
        height: 310px;
        border-radius: .75rem;
    }
    .post-section .card-body{
        padding: 1.5rem 0;
    }
    .post-section .card-body .title{
        font-size: 1.25rem;
    }
}
/*|==================================================================================
    Footer
=====================================================================================|*/
.footer{
    background-color: #0f172a;
}
.footer-widget{
    margin-bottom: 1.25rem;
}
.footer-widget .footer-title{
    color: var(--clr-white);
    font-size: 1.25rem;
    margin-bottom: .75rem;
}
.disclaimer{
    padding: 1rem 0;
}
.disclaimer p{
    color: var(--clr-white);
}
.footer-about{}
.footer-about p,.footer-about p a{
    color: var(--clr-white);
    line-height: 1.6;
}
.footer-about .social-list{
    display: flex;
    gap: .75rem;
    align-items: center;
}
.footer-about .social-list li .social-link{
    display: block;
    width: 40px;
    height: 40px;
    padding: 0;
    font-size: 1.125rem;
    line-height: 40px;
    text-align: center;
    border-radius: .325rem;
    background-color: var(--clr-white);
    box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
}
.footer-about .social-list li .social-link.facebook{
    color: #1877F2;
}
.footer-about .social-list li .social-link.twitter{
    color: #14171A;
}
.footer-about .social-list li .social-link.instagram{
    color: #e03955;
}
.footer-about .social-list li .social-link.linkedin{
    color: #0077B5;
}
.footer-about .social-list li .social-link.facebook:hover{
    color: var(--clr-white);
    background-color: #1877F2;
}
.footer-about .social-list li .social-link.twitter:hover{
    color: var(--clr-white);
    background-color: #14171A;
}
.footer-about .social-list li .social-link.instagram:hover{
    color: var(--clr-white);
    background-color: #e03955;
}
.footer-about .social-list li .social-link.linkedin:hover{
    color: var(--clr-white);
    background-color: #0077B5;
}
.footer-links{}
.footer-links ul li a{
    display: block;
    color: var(--clr-white);
    font-family: var(--title-font-family);
    font-size: 1rem;
    font-weight: 400;
    padding: .375rem 0;
}
.footer-links ul li:first-child a{
    padding-top: 0;
}
.footer-links ul li a:hover{
    color: var(--clr-primary);
}
.footer-contact{}
.footer-contact .footer-contact-item{
    display: flex;
    gap: .75rem;
    align-items: center;
    margin-bottom: 1rem;
}
.footer-contact .footer-contact-item .title{
    font-size: 1.125rem;
    font-weight: 600;
}
.footer-contact .footer-contact-item :is(span, p, a){
    display: block;
    font-size: 1rem;
    font-weight: 400;
}
.footer-contact .footer-contact-item :is(span, p, a, i){
    color: var(--clr-white);
}
.copyright{
    padding: 1.25rem 0;
    border-top: 1px solid #e4e7ec;
}
.copyright p{
    color: var(--clr-white);
    font-size: 1rem;
    font-weight: 500;
    margin-bottom: 0;
}
.copyright p a{
    color: var(--clr-primary);
}
.copyright .copyright-nav{
    display: flex;
    gap: 1rem;
    align-items: center;
    justify-content: center;
}
.copyright .copyright-nav li{}
.copyright .copyright-nav li a{
    display: block;
    color: var(--clr-white);
    font-family: var(--title-font-family);
    font-size: 1rem;
    font-weight: 400;
    padding-inline: 1rem;
    /* padding: .325rem 1rem; */
    /* border-radius: 2rem;
    border: 1px solid #dee2de; */
    transition: all 0.4s linear;
}
.copyright .copyright-nav li a:hover{
    color: var(--clr-white);
    /* border-color: var(--clr-primary);
    background-color: var(--clr-primary); */
}
/*| Media Query ====================================================================|*/
@media (min-width: 992px){
    .footer-widget .footer-title{
        font-size: 1.5rem;
    }
    .disclaimer{
        padding: 1.5rem 0;
    }
    .copyright .copyright-nav{
        justify-content: flex-end;
    }
}
@media (min-width: 991.98px){}
/*|==================================================================================
    Banner Section
====================================================================================|*/
.banner-section{
    background-color: #f4f4f9;
}
.banner-section .banner-content{}
.banner-section .banner-content .banner-title{
    font-size: 1.5rem;
    font-weight: 600;
    line-height: 1.5;
    color: var(--clr-black);
    margin-bottom: 1rem;
}
.banner-section .banner-content .post-meta{}
.banner-section .banner-content .post-meta .meta-item{}
.banner-section .banner-content .post-meta .meta-item i{
    color: var(--clr-primary);
}
.banner-section .banner-content .post-meta .meta-item.categories a+a{
    margin-left: .375rem;
}
.banner-section .banner-content .breadcrumb{
    margin-bottom: 0;
    padding-bottom: 1.25rem;
}
.banner-section .banner-content .breadcrumb-item{
    font-size: 1rem;
}
.banner-section .banner-content .breadcrumb-item+.breadcrumb-item::before{
    content: '\f101';
    font-family: var(--icon-font);
    font-weight: 900;
    color: var(--clr-primary);
}
.banner-section .banner-content .breadcrumb-item.active{
    color: var(--clr-primary);
}
/*| Media Query ====================================================================|*/
@media (min-width: 992px){
    .banner-section{
        padding-top: 120px !important;
    }
    .banner-section .banner-content .banner-title{
        font-size: 2.25rem;
    }
    .banner-section .banner-content .breadcrumb{
        padding-bottom: 4rem;
    }
    .banner-section .banner-content .breadcrumb-item{
        font-size: 1.125rem;
    }
}
/*|===================================================================================
    Faqs Section
======================================================================================|*/
.home-faq{
    background-color: #f0fdf4;
}
.faq-section{
    /* background-color: #f0fdf4; */
    background-color: #fff0f6;
}
.faq-section .accordion{}
.faq-section .accordion .accordion-item{
    margin-bottom: 20px;
    /* border: 1px solid #dbdbdb; 
    box-shadow: 0 2px 3px rgba(20, 27, 202, .17);*/
    border: none;
    border-bottom: 1px solid rgba(33, 35, 38, 0.1);
    box-shadow: rgba(33, 35, 38, 0.1) 0px 10px 10px -10px;
    border-radius:0;
}
.faq-section .accordion-item .accordion-header{}
.faq-section .accordion-item .accordion-header .accordion-button{
    box-shadow: none;
    font-size: 1.125rem;
    font-weight: 500;
}
.faq-section .accordion-item .accordion-header .accordion-button .number{
    width: 2rem;
    height: 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    font-weight: 500;
    border-radius: 50%;
    color: var(--clr-white);
    background-color: var(--clr-black);
    margin-right: 1rem;
}
.faq-section .accordion-item .accordion-header .accordion-button[aria-expanded="true"] .number{
    background-color: var(--clr-primary);
}
.accordion-button:not(.collapsed) {
    color: var(--text-color);
    background-color: var(--clr-green-200);
}
.accordion-button:not(.collapsed)::after { }
.faq-section .accordion-item .accordion-collapse{}
.faq-section .accordion-item .accordion-body{}
.faq-section .accordion-item .accordion-body p{
    margin-bottom: 0;
}
.faq-section .accordion-item .accordion-body p:not(:first-child){
    margin-top: 1rem;
}
.faq-section .accordion-item .accordion-body :is(ul, ol){
    margin-bottom: 1rem;
    margin-top: .5rem;
}
.faq-section .accordion-item .accordion-body :is(ul li, ol li){
    margin-bottom: .5rem;
}
/*| Media Query |=====================================================================|*/
@media (min-width: 768px){
    .faq-section .accordion-item .accordion-header .accordion-button{
        font-size: 1.25rem;
    }
    .faq-section .accordion-item .accordion-body :is(ul, ol){
        padding-left: 1.25rem;
    }
}
/*|==================================================================================
    Single Blog Section
====================================================================================|*/
.post-details-section{ 
    padding-top: 80px !important;
}
.post-content{
	margin-bottom: 1.25rem;
    /* padding: 16px; */
	/* box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px; */
}
.post-content .post-header{}
.post-content .post-header .post-title{
	font-size: calc(1.5rem + .6vw);
	font-weight: 600;
    line-height: 1.5;
    margin-top: 0 !important;
}
.post-content .post-meta{
	padding: 10px 0;
	margin-bottom: 1rem;
	border-bottom: 1px solid #eee;
}
.post-content .post-meta .publisher{}
.post-content .post-meta .meta-item{
    font-size: .875rem;
    font-weight: 500;
}
.post-content .post-meta .meta-item i{
    color: var(--clr-primary);
}
.post-content .wp-block-image{
    padding: 1rem;
    border-radius: .5rem;
}
.post-content .wp-block-image img{
    width: 100%;
    height: 100%;
    padding: .75rem;
    padding-bottom: 0;
    border-radius: .5rem;
    border: 1px solid var(--clr-primary);
    object-fit: cover;
}
.post-content .wp-block-image .wp-element-caption{
    /* border: 1px solid #dee2de;
    border-bottom-left-radius: .5rem;
    border-bottom-right-radius: .5rem; */
    margin: 0;
    padding: .75rem 0 1rem;
}
.post-content p{
	line-height: 1.5;
	font-size: 1rem;
	word-wrap: break-word;
}
.post-content p a,.post-content h2,.post-content h3,.post-content h4,.post-content h2 a,.post-content h3 a{
	color: var(--clr-black);
}
.post-content h1,.post-content h2,.post-content h3,.post-content h4{
    margin-top: 1rem;
	margin-bottom: 1rem;
	text-transform: capitalize;
}
.post-content h1,.post-content h2{
	font-size: 1.25rem;
	font-weight: 600;
}
.post-content h3{
	font-size: 1.125rem;
	font-weight: 600;
}
.post-content ol{
	padding-left: 1.5rem;
	margin-bottom: .5rem;
}
.post-content ul{
	margin-bottom: .75rem;
	padding-left: 16px;
}
.post-content ul li,.post-content ul li ul li{
    margin-bottom: .5rem;
}
.wp-block-list{
    margin-bottom: .75rem;
}
.wp-block-list li{
    position: relative;
    margin-bottom: .5rem;
}
.wp-block-list li::before{
    content: "\f00c";
    /* position: absolute; */
    font-family: var(--icon-font);
    font-weight: 900;
    margin-right: .5rem;
    color: var(--clr-primary);
}
.wp-block-list li:has(strong)::before {
    content: none;
}
.wp-block-buttons{
    margin-top: 1rem;
}
.wp-block-buttons .wp-block-button{}
.post-content .wp-block-quote{
    padding: 1rem;
    margin: 1.25rem 0 1rem;
    border: .25rem solid var(--clr-primary);
    background-color: var(--clr-violet-300);
}
.wp-block-quote p{
    margin-bottom: 0;
}
.post-content h4{
	font-size: 1rem;
}
.post-content p{}
.post-content p a{
	color: var(--clr-primary);
}
.post-content p a:hover{
	color: var(--clr-secondary);
}
.post-content p.has-background{
	padding: .75rem 1rem;
	border-radius: .3rem;
	/* border: 3px solid #e7e7e7;
	box-sizing: content-box;
	margin: 5px; */
}
.post-content p.has-background a{
	color: inherit;
}
.post-content p.has-background a:hover{
	color: inherit;
}
#rank-math-toc{
    padding: 1rem;
    border-radius: .5rem;
    background-color: #fef9c3;
}
#rank-math-toc h2{
    margin: 0 0 .75rem;
}
#rank-math-toc nav{}
#rank-math-toc nav ul{}
#rank-math-toc nav ul li{
    margin-bottom: 0;
}
#rank-math-toc nav ul li a{
    display: block;
    padding: .375rem 0;
}
.wp-block-image.is-resized{
    margin-top: 1rem;
}
/*| Edit Post ==============================================================|*/
.edit-post{
	margin-bottom: .75rem;
}
.edit-post a{
	color: var(--clr-primary);
}
.edit-post a:hover{
	color: var(--clr-secondary);
}
/*| Tag Widget ==============================================================|*/
.tags-widget{}
.tags-widget ul{
	padding-left: 0;
	margin-bottom: 0;
} 
.tags-widget ul li{
	padding-left: 0;
    display: inline-block;
	margin-bottom: 0;
}
.tags-widget ul li span{
    display: inline-block;
    font-weight: 500;
}
#ez-toc-container ul li::before,.tags-widget ul li::before{
	display: none;
}
.tags-widget ul li+li{}
.tags-widget ul li a{
    display: block;
    color: var(--clr-white);
    font-size: .75rem;
    text-transform: uppercase;
    letter-spacing: .5px;
    font-weight: 500;
    padding: .25rem .5rem;
    margin-left: .25rem;
    margin-bottom: .5rem;
	border-radius: .25rem;
    border: 1px solid var(--clr-primary);
    background-color: var(--clr-primary);
	transition: all 0.4s ease-in;
}
.tags-widget ul li a:hover{
    border-color: #1e3a8a;
    background-color: #1e3a8a;
}
/*| Entry Footer ==============================================================|*/
.entry-footer .tags-widget ul li a{
	margin-bottom: 0;
}
.entry-footer .tags-widget{
	display: flex;
	align-items: center;
    margin-bottom: 1rem;
    padding-bottom: .75rem;
}
.entry-footer .tags-widget .widget-title{
    font-size: 1rem;
    font-weight: 500;
	margin-bottom: 0;
}
.entry-footer{
    align-items: flex-start;
    flex-direction: column;
}
/*| Artical Helpful ==============================================================|*/
.article-helpful{
	position: relative;
}
.article-helpful button{
	position: relative;
	width: 35px;
	height: 35px;
	background-color:#eeca00;
}
.article-helpful .post-like::before, .article-helpful .post-dislike::before{
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	font-family: var(--icon-fs);
	font-weight: 400;
}
/*| Post like ==============================================================|*/
.post-like::before{
	content: "\f164";
}
.post-dislike::before{
	content: "\f165";
}
/*| Media Query ====================================================================|*/
@media (min-width: 768px){
    .post-details-section{
        padding-top: 110px !important;
    }
	/* .post-content{
		padding: 20px;
	} */
	.post-content h1,.post-content h2{
		font-size: 1.5rem;
	}
	.post-content h3{
		font-size: 1.25rem;
	}
}
@media (min-width: 992px){
    .post-details-section{
        padding-top: 150px !important;
    }
	/* .post-content{
		padding: 24px;
	} */
    .post-content h1,.post-content h2,.post-content h3,.post-content h4{
        margin-top: 1.75rem;
        margin-bottom: 1.25rem;
    }
	/* .post-content h1,.post-content h2{
		font-size: 1.75rem;
	} */
	.post-content h3{
		font-size: 1.5rem;
	}
	.post-content p{
        font-size: 1.125rem;
		line-height: 1.7;
	}
    .wp-block-list li{
        font-size: 1.125rem;
    }
    /* #rank-math-toc h2{
        margin: 0 0 1rem;
    } */
    .wp-block-buttons{
        margin-top: 3rem;
        margin-bottom: 3rem;
    }
    #rank-math-toc nav ul li a{
        font-size: 1.125rem;
    }
    .wp-block-list li ul li{
        font-size: 1.125rem;
    }
    .wp-block-image.is-resized{
        margin-top: 1.75rem;
    }
    .post-content .wp-block-quote{
        margin: 1.75rem 0 1.5rem;
    }

}
@media (max-width: 575.98px){
	.post-content .post-header .post-title {
		font-size: calc(1.325rem + 0.6vw);
	}
}
/*|=====================================================================================
    Blog Author
========================================================================================|*/
.post-content .author-bio{
    align-items: flex-start;
	padding: 1rem;
	border-radius: .5rem;
	border: 1px solid #e0e7f5;
}
.author-bio .author-avatar{}
.author-bio .author-avatar img{
	width: 90px;
	height: 90px;
	border-radius: .5rem;
}
.author-info{}
.author-info .author-name{
	font-size: 1rem;
	margin-bottom: .5rem;
    margin-top: 0;
}
.author-info .author-description{
	font-size: .9rem;
	line-height: 1.5;
}
.author-info .author-links{}
.author-info .author-links a{
    color: var(--clr-primary);
}
/*| Media Query ====================================================================|*/
@media (min-width: 768px){
    .author-info .author-name{
        font-size: 1.25rem;
    }
}
/*|==================================================================================
    Rank Math Plugins
=====================================================================================|*/
.rank-math-block{
	margin-bottom: 2rem;
}
.rank-math-list{}
.rank-math-list-item{
	padding: 1rem;
	border-radius: 7px;
	background-color: #ffffff;
	box-shadow: 0 0 8px rgba(0, 0, 0, .17);
	margin-bottom: 1.125rem;
}
.rank-math-list-item .rank-math-question{
	position: relative;
	font-size: 1.5rem;
	font-weight: 600;
	margin-bottom: .75rem;
}
.rank-math-list-item .rank-math-question strong{
	font-weight: 600;
}
.rank-math-list-item .rank-math-question::after{
	position: absolute;
	top: 0;
	right: 0;
	content: "?";
	width: 30px;
	height: 30px;
	line-height: 30px;
	font-size: 1rem;
	text-align: center;
	border-radius: 50px;
	background-color: #e0e7f5;
	opacity: .7;
}
.rank-math-list-item .rank-math-answer{}
.rank-math-list-item .rank-math-answer p{
	margin-bottom: 0;
	line-height: 1.7;
}
/*|==================================================================================
    Comment
=====================================================================================|*/
.entry-summary a,
.comment-content a{
	-webkit-box-shadow: inset 0 -1px 0 rgba(15, 15, 15, 1);
	box-shadow: inset 0 -1px 0 rgba(15, 15, 15, 1);
	-webkit-transition: color 80ms ease-in, -webkit-box-shadow 130ms ease-in-out;
	transition: color 80ms ease-in, -webkit-box-shadow 130ms ease-in-out;
	transition: color 80ms ease-in, box-shadow 130ms ease-in-out;
	transition: color 80ms ease-in, box-shadow 130ms ease-in-out, -webkit-box-shadow 130ms ease-in-out;
}
.comment-navigation a,
.comment-metadata a,
.comment-metadata a.comment-edit-link,
.comment-reply-link,
.comments-pagination a{
	-webkit-box-shadow: inset 0 -1px 0 rgba(255, 255, 255, 1);
	box-shadow: inset 0 -1px 0 rgba(255, 255, 255, 1);
	text-decoration: none;
	-webkit-transition: color 80ms ease-in, -webkit-box-shadow 130ms ease-in-out;
	transition: color 80ms ease-in, -webkit-box-shadow 130ms ease-in-out;
	transition: color 80ms ease-in, box-shadow 130ms ease-in-out;
	transition: color 80ms ease-in, box-shadow 130ms ease-in-out, -webkit-box-shadow 130ms ease-in-out;
}
.comment-content a:focus,
.comment-content a:hover,
.comment-metadata a:focus,
.comment-metadata a:hover,
.comment-metadata a.comment-edit-link:focus,
.comment-metadata a.comment-edit-link:hover,
.comment-reply-link:focus,
.comment-reply-link:hover,
.comments-pagination a:not(.prev):not(.next):focus,
.comments-pagination a:not(.prev):not(.next):hover{
	color: #000;
	-webkit-box-shadow: inset 0 0 0 rgba(0, 0, 0, 0), 0 3px 0 rgba(0, 0, 0, 1);
	box-shadow: inset 0 0 0 rgba(0, 0, 0, 0), 0 3px 0 rgba(0, 0, 0, 1);
}
/* Fixes linked images */
.comment-content a img{
	-webkit-box-shadow: 0 0 0 8px #fff;
	box-shadow: 0 0 0 8px #fff;
}
#comments {
	clear: both;
	padding: 2em 0 0.5em;
}
.comments-title {
	font-size: 20px;
	font-size: 1.25rem;
	margin-bottom: 1.5em;
}
.comment-list,
.comment-list .children {
	list-style: none;
	margin: 0;
	padding: 0;
}
.comment-list li:before {
	display: none;
}
.comment-body {
	margin-left: 65px;
}
.comment-author {
	font-size: 16px;
	font-size: 1rem;
	margin-bottom: 0.4em;
	position: relative;
	z-index: 2;
}
.comment-author.vcard{
	padding-left: 65px;
}
.comment-author .avatar {
	height: 50px;
	left: 0;
	position: absolute;
	width: 50px;
}
.comment-author .says {
	display: none;
}
.comment-meta {
	margin-bottom: 1.5em;
	margin-left: 65px;
}
.comment-metadata {
	color: #767676;
	font-size: 10px;
	font-size: 0.625rem;
	font-weight: 800;
	letter-spacing: 0.1818em;
	text-transform: uppercase;
}
.comment-metadata a {
	color: #767676;
}
.comment-metadata a.comment-edit-link {
	color: #222;
	margin-left: 1em;
}
.comment-body {
	color: #333;
	font-size: 14px;
	font-size: 0.875rem;
	margin-bottom: 2em;
}
.comment-reply-link {
	color: #000000;
	font-weight: 800;
	position: relative;
	padding-left: 20px;
}
.comment-reply-link .icon {
	color: #222;
	left: 0;
	height: 1em;
	position: absolute;
	top: 0;
	width: 1em;
}
#comments .children .comment-author .avatar {
	height: 30px;
	left: -45px;
	width: 30px;
}
.bypostauthor > .comment-body > .comment-meta > .comment-author .avatar {
	border: 1px solid #333;
	padding: 2px;
}
.no-comments,
.comment-awaiting-moderation {
	color: #767676;
	font-size: 14px;
	font-size: 0.875rem;
	font-style: italic;
}
.comments-pagination {
	margin: 2em 0 3em;
}
#comments .form-submit {
	text-align: right;
}
.comment-form #wp-comment-cookies-consent {
	margin: 0 10px 0 0;
}
.comment-form .comment-form-cookies-consent label {
	display: inline;
}
.comments-pagination {
	border-top: 1px solid #eee;
	font-size: 14px;
	font-size: 0.875rem;
	font-weight: 800;
	padding: 2em 0 3em;
	text-align: center;
}
.comments-pagination .icon {
	width: 0.666666666em;
	height: 0.666666666em;
}
.comments-pagination {
	border: 0;
}
/* Recent Comments */
.widget_recent_comments table,
.widget_recent_comments th,
.widget_recent_comments td {
	border: 0;
}
.comment-respond .comment-reply-title{
	margin-bottom: 10px;
}
.comment-respond #cancel-comment-reply-link{}
.comment-form{}
.comment-form .comment-notes{}
.comment-form .comment-notes .required-field-message{}
.comment-form p .required{
	color: #ff0000;
}
.comment-form p{}
.comment-form p label{
	display: block;
	font-size: 18px;
	font-weight: 600;
	margin-bottom: 8px;
}
.comment-form p textarea{
	width: 100%;
	border: 1px solid #dee2de;
}
.comment-form p input{
	width: 100%;
	padding: 8px 16px;
	border: 1px solid #dee2de;
}
.comment-form .comment-form-cookies-consent{}
.comment-form .comment-form-cookies-consent input[type="checkbox"]{
	width: 16px;
	height: 16px;
}
.comment-form .form-submit input{
	color: #fff;
	padding: 8px 20px;
	border-color: #000000;
	background-color: #000000;
}
/*| Media Query ====================================================================|*/
@media (min-width: 768px) {
	.comments-pagination{
		clear: both;
	}
	#comments {
		padding-top: 3em;
	}
	.comments-title {
		margin-bottom: 2.5em;
	}
	#comments ol.children .children {
		padding-left: 2em;
	}
}
@media ( min-width: 992px ) {
	.comment-body {
		margin-left: 0;
	}
}
/*|==================================================================================
    sidebar
=====================================================================================|*/
.sidebar .widget{
    padding: 1rem;
    margin-bottom: 1.25rem;
    background-color: var(--clr-violet-100);
    /* background-color: #dcfce7; */
}
.sidebar .widget .widget-title{
    font-size: 1.25rem;
    margin-bottom: .75rem;
}
.sidebar .card{}
.media-widget{
    border-radius: .75rem;
}
.media-widget .card{
    border: none;
    /* margin-bottom: 1rem; */
    background-color: transparent;
}
.media-widget .card .img-box{}
.media-widget .card .img-box img{
    width: 100%;
    height: 100%;
    border-radius: .5rem;
    object-fit: cover;
}
.media-widget .card .card-body{
    padding: 1rem 0;
}
.media-widget .card .post-title{
    font-size: 1rem;
    margin-bottom: 0;
}
.categories-widget{
    border-radius: .75rem;
    background-color: #dcfce7;
}
.sidebar .widget-links ul{}
.sidebar .widget-links ul li{}
.sidebar .widget-links ul li a{
    display: block;
    padding: .375rem 0;
}
.sidebar .widget-links ul li a::before{
    content: '\f061';
    font-family: var(--icon-font);
    font-weight: 900;
    color: var(--clr-primary);
    margin-right: .5rem;
}
/*| Media Query ====================================================================|*/
@media (min-width: 992px){
    .sidebar .widget{
        padding: 1.5rem;
        margin-bottom: 1.5rem;
    }
    .sidebar .widget .widget-title{
        /* font-size: 1.5rem; */
        margin-bottom: 1rem;
    }
    .media-widget .card{}
    .media-widget .card .post-title{
        font-size: 1.125rem;
    }
}
@media (min-width: 991.98px){}
/*|====================================================================================
    Image flip Page
=======================================================================================|*/
.image-flip-section .image-container {
    position: relative;
    display: inline-block;
}
.image-flip-section .image-container img{
    width: 100%;
    height: auto;
    border-radius: .75rem;
    object-fit: cover;
}
.upload-area {
    border-radius: .75rem;
    border: 2px dashed var(--clr-primary);
    padding: 20px;
    text-align: center;
    margin-bottom: 10px;
    cursor: pointer;
    position: relative;
}
.upload-area.dragover {
    background-color: #f0f0f0;
}
.upload-area input[type="file"] {
    display: none;
}
.image-flip-section .flip-controls .action-btns{
    display: flex;
    gap: 1rem;
    align-items: center;
}
.image-flip-section .flip-controls .form-label{
    font-size: 1rem;
    font-weight: 500;
}
.image-flip-section .flip-controls .btn-icon{
    padding: 0;
    border: none;
    background-color: transparent;
} 
.image-flip-section .flip-controls .btn:focus,.image-flip-section .flip-controls .btn:active{
    border: none;
    box-shadow: none;
}
.image-flip-section .flip-controls .btn-icon img{
    height: 28px;
    margin: auto;
}
.image-flip-section .flip-controls .icon-box{
    display: flex;
    margin-bottom: .75rem;
    padding: 1rem;
    width: 136px;
    height: 80px;
    text-align: center;
    border-radius: .75rem;
    border: 2px solid var(--clr-primary);
    /* background-color: var(--clr-violet-300); */
}
.image-flip-section .flip-controls .icon-box:hover{
    border-color: var(--clr-primary);
    background-color: var(--clr-primary);
} 
.image-flip-section .flip-controls .icon-box:hover img{
    filter: brightness(100) invert(100);
}
.image-flip-section #downloadImage {
    display: none;
}
/*| Media Query |======================================================================|*/
@media (min-width: 768px){}
@media (min-width: 992px){
    .image-flip-section .upload-area{
        padding: 2.5rem;
    }
    .image-flip-section .flip-controls .action-btns{
        justify-content: center;
    }
    .image-flip-section .flip-controls .icon-box{
        width: 175px;
        height: 90px;
    }
}
@media (max-width: 991.98px){}
/*|==================================================================================
    Color Palette Page
=====================================================================================|*/
.color-palette-section{}
.color-palette-section #upload-area {
    border: 2px dashed var(--clr-primary);
    border-radius: 8px;
    padding: 20px;
    text-align: center;
    cursor: pointer;
    position: relative;
    margin-bottom: 20px;
    background-color: #fff;
    transition: background-color 0.3s ease;
}
.color-palette-section #upload-area.dragover {
    background-color: #e0ffe0;
}
.color-palette-section #upload-area p {
    margin: 0;
    font-size: 16px;
    color: #333;
}
/* .color-palette-section #upload-area button {
    margin-top: 10px;
    padding: 10px 20px;
    font-size: 16px;
    cursor: pointer;
    background-color: #4caf50;
    color: white;
    border: none;
    border-radius: 4px;
} */
.color-palette-section .palette-container{
    border-radius: .5rem;
}
.color-palette-section #image-preview-container {
    display: none;
    margin-top: 20px;
}
.color-palette-section #image-preview {
    width: 100%;
    height: 250px;
    object-fit: cover;
    object-position: center;
    border-top-left-radius: .5rem;
    border-top-right-radius: .5rem;
}
.color-palette-section #file-name {
    display: none;
    font-size: 16px;
    color: #555;
}
.color-palette-section #color-palette {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
}
.color-palette-section .color-info{
    text-align: center;
}
.color-palette-section .color-box {
    /* width: 50px;
    height: 50px; 
    margin-right: 10px;
    border: 2px solid #333;*/
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    position: relative;
    transition: background-color 0.3s ease;
    margin-bottom: 1rem;
}
.color-palette-section .color-box:first-child{
    border-bottom-left-radius: .5rem;
}
.color-palette-section .color-box:last-child{
    border-bottom-right-radius: .5rem;
}
.color-palette-section .color-info .colorcode-info{
    display: flex;
    flex-direction: column;
    row-gap: .25rem;
    align-items: center;
    justify-content: center;
}
.color-palette-section .color-info .colorcode-info span{
    display: block;
    font-size: .875rem;
    font-weight: 500;
}
.color-palette-section .color-info .colorcode-info span+span{
    color: rgba(17, 23, 29, .6);
    font-weight: 400;
}
.color-palette-section #dominant-color {
    font-size: 18px;
    margin-top: 10px;
}
/*| Media Query ====================================================================|*/
@media (min-width: 768px){}
@media (min-width: 992px){
    .color-palette-section #image-preview {
        height: 400px;
    }
    .color-palette-section .color-box {
        height: 100px;
    }
}
@media (min-width: 991.98px){}
/*|==================================================================================
    Section
=====================================================================================|*/

/*| Media Query ====================================================================|*/
@media (min-width: 576px){}
@media (min-width: 768px){}
@media (min-width: 992px){}
@media (min-width: 991.98px){}
/*|==================================================================================
    Section
=====================================================================================|*/

/*| Media Query ====================================================================|*/
@media (min-width: 576px){}
@media (min-width: 768px){}
@media (min-width: 992px){}
@media (min-width: 991.98px){}
/*|==================================================================================
    Section
=====================================================================================|*/

/*| Media Query ====================================================================|*/
@media (min-width: 576px){}
@media (min-width: 768px){}
@media (min-width: 992px){}
@media (min-width: 991.98px){}
/*|==================================================================================
    KeyFrames
=====================================================================================|*/
/* @keyframes fadeInDown {
    0% {
        opacity: 0;
        transform: translate3d(0,-100%,0)
    }

    to {
        opacity: 1;
        transform: translateZ(0)
    }
}
@-webkit-keyframes ripple {
    0% {
        -webkit-box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.2), 0 0 0 5px rgba(255, 255, 255, 0.2), 0 0 0 20px rgba(255, 255, 255, 0.2), 0 0 0 35px rgba(255, 255, 255, 0.2);
        box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.2), 0 0 0 5px rgba(255, 255, 255, 0.2), 0 0 0 20px rgba(255, 255, 255, 0.2), 0 0 0 35px rgba(255, 255, 255, 0.2);
    }

    100% {
        -webkit-box-shadow: 0 0 0 5px rgba(255, 255, 255, 0.2), 0 0 0 20px rgba(255, 255, 255, 0.2), 0 0 0 35px rgba(255, 255, 255, 0.2), 0 0 0 45px rgba(255, 255, 255, 0);
        box-shadow: 0 0 0 5px rgba(255, 255, 255, 0.2), 0 0 0 20px rgba(255, 255, 255, 0.2), 0 0 0 35px rgba(255, 255, 255, 0.2), 0 0 0 45px rgba(255, 255, 255, 0);
    }
}
@keyframes ripple {
    0% {
        -webkit-box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.2), 0 0 0 5px rgba(255, 255, 255, 0.2), 0 0 0 20px rgba(255, 255, 255, 0.2), 0 0 0 35px rgba(255, 255, 255, 0.2);
        box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.2), 0 0 0 5px rgba(255, 255, 255, 0.2), 0 0 0 20px rgba(255, 255, 255, 0.2), 0 0 0 35px rgba(255, 255, 255, 0.2);
    }

    100% {
        -webkit-box-shadow: 0 0 0 5px rgba(255, 255, 255, 0.2), 0 0 0 20px rgba(255, 255, 255, 0.2), 0 0 0 35px rgba(255, 255, 255, 0.2), 0 0 0 45px rgba(255, 255, 255, 0);
        box-shadow: 0 0 0 5px rgba(255, 255, 255, 0.2), 0 0 0 20px rgba(255, 255, 255, 0.2), 0 0 0 35px rgba(255, 255, 255, 0.2), 0 0 0 45px rgba(255, 255, 255, 0);
    }
}
@-webkit-keyframes rippleprimary {
    0% {
        -webkit-box-shadow: 0 0 0 0 rgba(255, 75, 52, 0.2), 0 0 0 5px rgba(255, 75, 52, 0.2), 0 0 0 20px rgba(255, 75, 52, 0.2), 0 0 0 35px rgba(255, 75, 52, 0.2);
        box-shadow: 0 0 0 0 rgba(255, 75, 52, 0.2), 0 0 0 5px rgba(255, 75, 52, 0.2), 0 0 0 20px rgba(255, 75, 52, 0.2), 0 0 0 35px rgba(255, 75, 52, 0.2);
    }

    100% {
        -webkit-box-shadow: 0 0 0 5px rgba(255, 75, 52, 0.2), 0 0 0 20px rgba(255, 75, 52, 0.2), 0 0 0 35px rgba(255, 75, 52, 0.2), 0 0 0 45px rgba(255, 75, 52, 0);
        box-shadow: 0 0 0 5px rgba(255, 75, 52, 0.2), 0 0 0 20px rgba(255, 75, 52, 0.2), 0 0 0 35px rgba(255, 75, 52, 0.2), 0 0 0 45px rgba(255, 75, 52, 0);
    }
}
@keyframes rippleprimary {
    0% {
        -webkit-box-shadow: 0 0 0 0 rgba(255, 75, 52, 0.2), 0 0 0 5px rgba(255, 75, 52, 0.2), 0 0 0 20px rgba(255, 75, 52, 0.2), 0 0 0 35px rgba(255, 75, 52, 0.2);
        box-shadow: 0 0 0 0 rgba(255, 75, 52, 0.2), 0 0 0 5px rgba(255, 75, 52, 0.2), 0 0 0 20px rgba(255, 75, 52, 0.2), 0 0 0 35px rgba(255, 75, 52, 0.2);
    }

    100% {
        -webkit-box-shadow: 0 0 0 10px rgba(255, 75, 52, 0.2), 0 0 0 20px rgba(255, 75, 52, 0.2), 0 0 0 35px rgba(255, 75, 52, 0.2), 0 0 0 45px rgba(255, 75, 52, 0);
        box-shadow: 0 0 0 10px rgba(255, 75, 52, 0.2), 0 0 0 20px rgba(255, 75, 52, 0.2), 0 0 0 35px rgba(255, 75, 52, 0.2), 0 0 0 45px rgba(255, 75, 52, 0);
    }
}
@keyframes fadeInLeft {
    from {
        opacity: 0;
        transform: translate3d(-100%, 0, 0);
    }

    to {
        opacity: 1;
        transform: none;
    }
} */