.elementor-45 .elementor-element.elementor-element-2c60ff4{--display:flex;--min-height:100vh;--align-items:stretch;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--gap:10px 10px;--row-gap:10px;--column-gap:10px;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-45 .elementor-element.elementor-element-3eeddeb{padding:0px 0px 0px 0px;color:#050505;}/* Start custom CSS */.main-card {
  transition: none!important;
  opacity: 0;
  
}

.grad-card{
    transition: none!important;
}
.grad-card-content{
    transition: none!important;
}
.reveal{
    transition: none!important;
}
/* ---- Cards ---- */

.grad-card {
  background-color: rgba(255, 255, 255, 0.1);
  height: 100%;
  width: 100%;
  position: relative;
  border-radius: 100px;
  padding: 0px;
}
.grad-card:hover::before {
  opacity: 1;
  pointer-events: none !important;
}
/* Card Glow Effect */

#grad-cards-1:hover > .grad-card > .grad-card-border {
  opacity: 1;
  pointer-events: none !important;
}

.grad-card::before,
.grad-card > .grad-card-border {
  content: "";
  height: 100%;
  width: 100%;
  opacity: 0;
  transition: opacity 500ms;
  position: absolute;
  border-radius: inherit;
  z-index: 2;
  top: 0px;
  left: 0px;
  pointer-events: none !important;
}

.grad-card::before {
  background: radial-gradient(
    800px circle at var(--mouse-x) var(--mouse-y),
    rgba(255, 255, 255, 0.06),
    transparent 40%
  );
  z-index: 3;
  pointer-events: none !important;
}

.grad-card > .grad-card-border {
  background: radial-gradient(
    400px circle at var(--mouse-x) var(--mouse-y),
    rgba(255, 255, 255, 0.3),
    transparent 40%
  );
  z-index: 1;
  pointer-events: none !important;
}

.grad-card > .grad-card-content {
  height: calc(100% - 2px);
  width: calc(100% - 2px);
  background-color: var(--card-color);
  border-radius: 100px;
  margin: 1px;
  position: relative;
  z-index: 2;
  
}

/* small screens bento box*/

.main-card {
  background-color: rgba(255, 255, 255, 0.1);
  height: 100%;
  width: 100%;
  position: relative;
  border-radius: 20px;
  padding: 0px;
  min-height: 300px;

}

.main-card > .main-card-content {
  height: calc(100% - 2px);
  width: calc(100% - 2px);
  background-color: var(--card-color);
  border-radius: 20px;
  margin: 1px;
  position: relative;
  z-index: 2;
  padding: 25px;
}

/* medium screens and above*/

@media (min-width: 768px) {

.main-card > .main-card-content {
  padding: 40px;
}
}


/* For large screens and above*/

@media (min-width: 1200px) {


.main-card > .main-card-content {
  padding: 50px;
}
} 



/* small screens grid*/
body {
  background-color: var(--global-bg-color) !important;
    color: var(--global-text-color) !important;
  background-image: url("data:image/svg+xml,\
    <svg xmlns='http://www.w3.org/2000/svg' width='50' height='50'>\
      <rect width='50' height='50' fill='transparent'/>\
      <path d='M 0 0 L 50 0' stroke='rgba(128, 128, 128, 0.2)' stroke-opacity='0.4' stroke-width='1'/>\
      <path d='M 50 0 L 50 50' stroke='rgba(128, 128, 128, 0.2)' stroke-opacity='0.4' stroke-width='1'/>\
      <path d='M 0 50 L 50 50' stroke='rgba(128, 128, 128, 0.2)' stroke-opacity='0.4' stroke-width='0.5'/>\
      <path d='M 0 0 L 0 50' stroke='rgba(128, 128, 128, 0.2)' stroke-opacity='0.4' stroke-width='1'/>\
    </svg>");
  background-size: 55px 55px;
}



/* For large screens and above grid*/

@media (min-width: 1200px) {
body {
    background-color: var(--global-bg-color) !important;
    color: var(--global-text-color) !important;
   background-image: url("data:image/svg+xml,\
    <svg xmlns='http://www.w3.org/2000/svg' width='50' height='50'>\
      <rect width='50' height='50' fill='transparent'/>\
      <path d='M 0 0 L 50 0' stroke='rgba(128, 128, 128, 1)' stroke-opacity='0.2' stroke-width='0.5'/>\
      <path d='M 50 0 L 50 50' stroke='rgba(128, 128, 128, 1)' stroke-opacity='0.2' stroke-width='0.5'/>\
      <path d='M 0 50 L 50 50' stroke='rgba(128, 128, 128, 0)' stroke-opacity='0.2' stroke-width='0.5'/>\
      <path d='M 0 0 L 0 50' stroke='rgba(128, 128, 128, 0)' stroke-opacity='0.2' stroke-width='0.5'/>\
    </svg>");
}
} 


/* Default Dark Mode */
:root {
    --global-bg-color: #050505 !important;
    --global-text-color: #ffffff !important;
    
    --e-global-color-primary: #050505 !important;
    --e-global-color-secondary: #ffffff !important;
    
    --card-color: #171717;
    
    --hero-bg-image: url('https://synergy-aviation.smartedgedesign.com/wp-content/uploads/2025/02/MainJetDuskWeb.webp');
    
    --header-bg-color: rgba(0, 0, 0, 0.5) !important;
}

/* Light Mode */
.light-mode {
    --global-bg-color: #ffffff !important;
    --global-text-color: #050505 !important;
    
    --e-global-color-primary: #ffffff !important;
    --e-global-color-secondary: #050505 !important;
    
    --card-color: #dfdfdf !important;
    
    --hero-bg-image: url('https://synergy-aviation.smartedgedesign.com/wp-content/uploads/2025/02/MainJetDawnWeb.webp');
    
    --header-bg-color: rgba(255, 255, 255, 0.5) !important;
}

/* Apply to Elementor Global Colors */
:root {
    --e-global-color-primary: var(--global-text-color) !important;
    --e-global-color-secondary: var(--global-bg-color) !important;
}

.light-mode .invert-on-dark {
    filter: invert(1);
}/* End custom CSS */