@media (max-width: 1024px) {
/*Header Mobile Tab Stylings*/
	.e-search-input-wrapper{
		align-items: end !important;
	}
	#search-57023e3{
		padding: 0px;
    text-indent: -999px;
    width: 30px;
	}
	.e-search-form svg{
		padding-left: 11px !important;
	}
	.elementskit-menu-hamburger{
		padding: 0px !important;
	}
}
/* Mobile Stylings */
@media (min-width: 290px) and (max-width: 767px) {
	.e-search-form svg{
		padding-left: 6px !important;
	}
	    #search-57023e3 {
        width: 36px;
        height: 36px;
    }
}
/* Main menu iteme hover changed box shadow */
#menu-menu li a:hover{
box-shadow: 0px 2px 14px -4px #139BAE;
}
/*Orange Arrow Buttons Stylings*/
	.gernal-btn .elementor-button-icon{
    padding: 8px 10px !important;
    border-left: 1px solid;
}
.gernal-btn .elementor-button-text{
        padding: 8px 0px 8px 16px !important;
}
.gernal-btn:hover .elementor-button-icon svg path{ 
    fill: #001f23;
}
	.gernal-btn .elementor-button-icon svg{
    height: 12px !important;
	}

/* Hero section synamic values stylings */
.dynamic-vlaue span{
	font-family: "Inter", Sans-serif;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    line-height: 1em;
    color: var(--e-global-color-secondary);
} 
/* new Comaptibilty Cards Background */
.new-comapibilty-card{
   background: linear-gradient(180deg, #FFFFFF 0%, rgba(255, 255, 255, 0) 100%);

}
/* hero section orange btn  styling*/
.orange-btn a:hover .elementor-button-icon svg g path{
	fill: var(--e-global-color-accent) !important;
}
/* Hover animation of hero section 
 * CSS */
/* Make section position relative so grid sits inside it */
.hero-section {
    position: relative;
    overflow: hidden;
}

/* Grid background layer */
.grid-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    pointer-events: none;
}

/* Allow mouse events on grid only */
.hero-section .grid-bg {
    pointer-events: all;
}

/* Push all other content above the grid */
.hero-section .elementor-widget-wrap > *:not(.elementor-widget-html) {
    position: relative;
    z-index: 1;
}

/* Dots */
.square {
    position: absolute;
    width: 3px;
    height: 3px;
    background: #139bae;
    opacity: 0;
    transform: scale(0.8);
    transition:
        opacity 1.2s cubic-bezier(.22,1,.36,1),
        transform 1.2s cubic-bezier(.22,1,.36,1),
        background-color 1.2s cubic-bezier(.22,1,.36,1),
        box-shadow 1.2s cubic-bezier(.22,1,.36,1);
}

/* Hover state */
.square.active {
    opacity: 1;
    background: #fe8444;
    transform: scale(1.8);
    box-shadow:
        0 0 8px rgba(254,132,68,0.8),
        0 0 20px rgba(254,132,68,0.45),
        0 0 40px rgba(254,132,68,0.2);
}
/* Hero Section Top ICons display flex CSS */
.hero-top-icon-html{
	display: flex;
	    min-width: 18px !important;
}
/* Mouse hover animation */
/* ???????????????????????????????????????????
   HOVER FADE ANIMATION — ALL 4 CONTAINERS
   ??????????????????????????????????????????? */
/* ?? Parent Containers ?? */
.github-parent,
.github-parent-2,
.github-parent-3,
.github-parent-4 {
    position: relative !important;
    overflow: visible !important;
    opacity: 1 !important;
    visibility: visible !important;
    display: flex !important;
}

/* ?????????????????????????????????????????? */
/* CONTAINER 1 — GitHub Stars / Join Club    */
/* ?????????????????????????????????????????? */
.github-stars {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: all;
    transition:
        opacity 0.6s cubic-bezier(0.4, 0, 0.2, 1),
        visibility 0s linear 0s;
}
.join-club {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none;
    position: absolute !important;
    top: 0; left: 0;
    width: 100%; height: 100%;
    transition:
        opacity 0.6s cubic-bezier(0.4, 0, 0.2, 1),
        visibility 0s linear 0.6s;
}
.github-parent:hover .github-stars {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none;
    transition:
        opacity 0.6s cubic-bezier(0.4, 0, 0.2, 1),
        visibility 0s linear 0.6s;
}
.github-parent:hover .join-club {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: all;
    transition:
        opacity 0.6s cubic-bezier(0.4, 0, 0.2, 1),
        visibility 0s linear 0s;
}

/* ?????????????????????????????????????????? */
/* CONTAINER 2 — Contributors / Leaderboard  */
/* ?????????????????????????????????????????? */
.contributer {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: all;
    transition:
        opacity 0.6s cubic-bezier(0.4, 0, 0.2, 1),
        visibility 0s linear 0s;
}
.leaderboard {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none;
    position: absolute !important;
    top: 0; left: 0;
    width: 100%; height: 100%;
    transition:
        opacity 0.6s cubic-bezier(0.4, 0, 0.2, 1),
        visibility 0s linear 0.6s;
}
.github-parent-2:hover .contributer {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none;
    transition:
        opacity 0.6s cubic-bezier(0.4, 0, 0.2, 1),
        visibility 0s linear 0.6s;
}
.github-parent-2:hover .leaderboard {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: all;
    transition:
        opacity 0.6s cubic-bezier(0.4, 0, 0.2, 1),
        visibility 0s linear 0s;
}

/* ?????????????????????????????????????????? */
/* CONTAINER 3 — PyPI Download / GitHub      */
/* ?????????????????????????????????????????? */
.pupl-download {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: all;
    transition:
        opacity 0.6s cubic-bezier(0.4, 0, 0.2, 1),
        visibility 0s linear 0s;
}
.github {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none;
    position: absolute !important;
    top: 0; left: 0;
    width: 100%; height: 100%;
    transition:
        opacity 0.6s cubic-bezier(0.4, 0, 0.2, 1),
        visibility 0s linear 0.6s;
}
.github-parent-3:hover .pupl-download {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none;
    transition:
        opacity 0.6s cubic-bezier(0.4, 0, 0.2, 1),
        visibility 0s linear 0.6s;
}
.github-parent-3:hover .github {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: all;
    transition:
        opacity 0.6s cubic-bezier(0.4, 0, 0.2, 1),
        visibility 0s linear 0s;
}

/* ?????????????????????????????????????????? */
/* CONTAINER 4 — Community / Join Slack      */
/* ?????????????????????????????????????????? */
.community {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: all;
    transition:
        opacity 0.6s cubic-bezier(0.4, 0, 0.2, 1),
        visibility 0s linear 0s;
}
.join-slack {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none;
    position: absolute !important;
    top: 0; left: 0;
    width: 100%; height: 100%;
    transition:
        opacity 0.6s cubic-bezier(0.4, 0, 0.2, 1),
        visibility 0s linear 0.6s;
}
.github-parent-4:hover .community {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none;
    transition:
        opacity 0.6s cubic-bezier(0.4, 0, 0.2, 1),
        visibility 0s linear 0.6s;
}
.github-parent-4:hover .join-slack {
	 transition:
        opacity 0.6s cubic-bezier(0.4, 0, 0.2, 1),
        visibility 0s linear 0s;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: all;
   
}
/* Github Parents Mobile Stylings */
@media (min-width: 290px) and (max-width: 767px) {
	.github-parent,
.github-parent-2,
.github-parent-3,
	.github-parent-4{
		max-width: 162.8px !important;
	}
}
/* ???????????????????????????????????????????????????
   DARK MODE V4 — Global Color Variables Override
   ??????????????????????????????????????????????????? */

/* ?? Smooth color transition ?? */


/* ?? Light Mode (Default — Elementor already sets these) ?? */
:root {
    --e-global-color-a0275c8: #F0FAFB;
    --e-global-color-primary: #139BAE;
    --e-global-color-secondary: #FE8444;
    --e-global-color-text: #001F23;
    --e-global-color-accent: #FFFFFF;
    --e-global-color-a2d7e12: #006573;
    --e-global-color-781113a: #013138;
    --e-global-color-fc30139: #ABCCCF;
    --e-global-color-f575cfc: #1C616A;
    --e-global-color-1f09e3a: #146773;
    --e-global-color-e004461: #528E94;
	--e-global-color-165842d: #F2ECE5;
	 --e-global-color-0bbccac: #171717;
}

/* ?? Dark Mode — Only override the 3 colors that change ?? */
body.dark-mode {
    --e-global-color-a0275c8: #001f23;
    --e-global-color-1f09e3a: #FFFFFF;
    --e-global-color-e004461: #ABCCCF;
	--e-global-color-fc30139: #006573;
	--e-global-color-accent: #013138;
--e-global-color-e004461: #ABCCCF;
	--e-global-color-4595327: #FE8444;
	--e-global-color-165842d: #FE84441F;
	    --e-global-color-0bbccac: #fff;
}


/* ???????????????????????????????????????????????????
   TOGGLE BUTTON ICON BACKGROUNDS
   ??????????????????????????????????????????????????? */
 
/* ?? Light mode — sun button active style ?? */
.light-mode-btn svg,
.light-mode-btn i,
.light-mode-btn .elementor-icon {
    background-color: #ffffff !important;
    border-radius: 100px !important;
}
/* Light and Dark btn sizing fixes  */
.light-mode-btn .elementor-icon,
.dark-mode-btn .elementor-icon{
	    width: 24px;
    height: 24px;
    display: flex;
    justify-content: center;
    align-items: center;
}
/* ?? Dark mode — moon button active style ?? */
body.dark-mode .dark-mode-btn svg,
body.dark-mode .dark-mode-btn i,
body.dark-mode .dark-mode-btn .elementor-icon {
    background-color: #013138 !important;
    border-radius: 100px !important;
}
 
/* ?? Reset inactive button backgrounds ?? */
body:not(.dark-mode) .dark-mode-btn svg,
body:not(.dark-mode) .dark-mode-btn i,
body:not(.dark-mode) .dark-mode-btn .elementor-icon {
    background-color: transparent !important;
}
 
body.dark-mode .light-mode-btn svg,
body.dark-mode .light-mode-btn i,
body.dark-mode .light-mode-btn .elementor-icon {
    background-color: transparent !important;
}
/* mobile social icons  stylings */
.mobile-social-icon{
	    display: flex;
    justify-content: center;
    align-items: center;
}
.mobile-social-icon:hover{
	box-shadow: 0px 2px 14px -5px #139BAE;
	border: 0.5px solid var(--e-global-color-primary) !important;
}
.mobile-social-icon:hover svg g path{
	    fill: var(--e-global-color-secondary);
} 
.mobile-social-icon:hover svg path{
	    fill: var(--e-global-color-secondary);
}
.mobile-social-icon a{
	display: flex;
}
.circle-bg{
	-webkit-backdrop-filter: blur(324px);
  backdrop-filter: blur(324px);
} 


/* Global Orange Button Styling */

.global-btn .elementor-button-link .elementor-button-icon{
    font-size: 20px!important;
    margin-top: -2px;
}
/* Updated CSS of Colors of Buttons */
.global-btn  svg rect{
   stroke: var(--e-global-color-4595327)!important;
}
.global-btn svg path{
	stroke: var(--e-global-color-4595327)!important;
}
.global-btn .elementor-button-link:hover .elementor-button-icon svg{
    fill: var(--e-global-color-4595327)!important;
}
.global-btn .elementor-button-link:hover  svg rect{
   stroke: var(--e-global-color-4595327)!important;
}
.global-btn .elementor-button-link:hover svg path{
	stroke: var(--e-global-color-accent) !important;
}
.global-btn .elementor-button-link:focus svg path{
	stroke: var(--e-global-color-accent) !important;
}
/* Tabs Icons cusotm stylings */
.elementskit-tab-title{
	display: flex;
    align-items: center;
    gap: 16px;
}
.custom-icon{
	    display: flex;
    background: var(--e-global-color-a0275c8) !important;
	
    align-items: end;
    text-align: center;
    border-radius: 6px;
}
.ekit-wid-con .custom-icon svg,
.ekit-wid-con .tab-content-top-icon svg{
    width: 36px !important;
    height: 36px !important;
}
/* Tabs stylingson Tab and Mobile */
@media (min-width: 290px) and (max-width: 1024px) {
	.nav-tabs{
		display: flex
;
    flex-direction: row !important;
		display: flex !important;
    width: 100% !important;
    flex-basis: 100% !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
		flex-direction: row !important;
		overflow-x: auto !important;
    overflow-y: hidden !important;
    gap: 15px;
	}
	.nav-tabs .elementkit-nav-item{
		min-width: 235px; 
	}
}
/* Homepage button icons color chnages to global color */
.global-color svg path{
	fill: var(--e-global-color-1f09e3a) !important;
}
.global-color:hover svg path{
	fill: var(--e-global-color-primary) !important;
}
/* Contact us page Form fields on active box shadoow chnaged */

#form-field-name:focus,
#form-field-email:focus,
#form-field-field_827833f:focus,
#form-field-field_e43a88b:focus,
#form-field-field_e43a88b:focus,
#form-field-message:focus{
	    box-shadow: 0px 0px 30px -10px #139BAE;
}
#submit-btn:hover{    
	box-shadow: 0px 0px 30px -10px #146773;}
/* Tab Mobile Popup Close button stylings */
.dialog-close-button{
	    padding: 10px !important;
    border-radius: 50px !important;
}
/* Sponserd section stylings  */
.sponsored-section a:hover svg rect{
	    fill: transparent;
}
/* popup light dark btn stylings */
.mbl-special-btn svg,
.mbl-special-btn svg path{
	stroke: var(--e-global-color-1f09e3a);
}
/* Roadmap Q3 and Q4 buttons */
.resources-q3 .elementor-button-content-wrapper,
.resources-q4 .elementor-button-content-wrapper{
	    align-items: center;
}
.resources-q3 .elementor-button-content-wrapper svg,
.resources-q4 .elementor-button-content-wrapper svg{
	    width: 20px;
}
.resources-q3 a:hover svg,
.resources-q4 a:hover svg{
	fill: var(--e-global-color-1f09e3a) !important; 
}
.resources-q3 a:hover svg path,
.resources-q4 a:hover svg path{
	stroke: var(--e-global-color-accent) !important;
}