.elementor-24290 .elementor-element.elementor-element-1d91999{--display:flex;--min-height:350px;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--justify-content:center;--overlay-opacity:0.59;--overlay-mix-blend-mode:multiply;--margin-top:0px;--margin-bottom:20px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-24290 .elementor-element.elementor-element-1d91999:not(.elementor-motion-effects-element-type-background), .elementor-24290 .elementor-element.elementor-element-1d91999 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:var( --e-global-color-text );background-image:url("https://gridtechpedia.inl.gov/content/uploads/32/2024/12/Banner_LinkedIn_Opt02.png");background-position:center center;background-repeat:no-repeat;background-size:cover;}.elementor-24290 .elementor-element.elementor-element-1d91999::before, .elementor-24290 .elementor-element.elementor-element-1d91999 > .elementor-background-video-container::before, .elementor-24290 .elementor-element.elementor-element-1d91999 > .e-con-inner > .elementor-background-video-container::before, .elementor-24290 .elementor-element.elementor-element-1d91999 > .elementor-background-slideshow::before, .elementor-24290 .elementor-element.elementor-element-1d91999 > .e-con-inner > .elementor-background-slideshow::before, .elementor-24290 .elementor-element.elementor-element-1d91999 > .elementor-motion-effects-container > .elementor-motion-effects-layer::before{background-color:transparent;--background-overlay:'';background-image:linear-gradient(270deg, #00000000 44%, #000000 85%);}.elementor-24290 .elementor-element.elementor-element-1d91999.e-con{--align-self:center;}.elementor-24290 .elementor-element.elementor-element-fa5e15d{width:var( --container-widget-width, 80% );max-width:80%;--container-widget-width:80%;--container-widget-flex-grow:0;}.elementor-24290 .elementor-element.elementor-element-fa5e15d.elementor-element{--align-self:center;}.elementor-24290 .elementor-element.elementor-element-8aaffcc{--display:flex;}.elementor-24290 .elementor-element.elementor-element-2413da9{width:var( --container-widget-width, 70% );max-width:70%;--container-widget-width:70%;--container-widget-flex-grow:0;}.elementor-24290 .elementor-element.elementor-element-2413da9.elementor-element{--align-self:center;}body.elementor-page-24290:not(.elementor-motion-effects-element-type-background), body.elementor-page-24290 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-image:url("https://gridtechpedia.inl.gov/content/uploads/32/2024/12/hex-2-scaled.jpg");background-position:center right;background-repeat:no-repeat;background-size:auto;}@media(min-width:1025px){.elementor-24290 .elementor-element.elementor-element-1d91999:not(.elementor-motion-effects-element-type-background), .elementor-24290 .elementor-element.elementor-element-1d91999 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-attachment:scroll;}}/* Start custom CSS *//* Basic Accordion Styling */

.elementor-accordion {
    margin:0 0 50px 0px;
}

.parent-categories h2 {
    line-height: 1em;
}

.parent-categories h2:after, .elementor-tab-content h3:after {
background: rgb(141,195,64);
background: linear-gradient(-90deg, rgba(141,195,64,1) 30%, rgba(242,242,242,1) 100%);
 content: "";
 display: inline-block;
 height: 3px;
 position: absolute;
 vertical-align: middle;
 width: 70%;
 margin-top:.4em;
 right:0px;
 z-index: -1;
}
.elementor-tab-content h3:after {
background: rgb(43,168,224);
background: linear-gradient(-90deg, rgba(43,168,224,1) 30%, rgba(255,255,255,1) 100%);
z-index: inherit;
margin-right:15px;
}


.elementor-accordion .elementor-accordion-item {
    border: 1px solid #e5e5e5;
    margin-bottom: 10px;
    border-radius: 0; /* Remove border radius */
    overflow: hidden;
}

.elementor-accordion .elementor-tab-title {
    background-color: #f7f7f7;
    padding: 15px;
    cursor: pointer;
    font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative;
    border-radius: 0; /* Remove border radius */
}

.elementor-accordion .elementor-tab-title a {
    text-decoration: none;
    color: inherit;
    flex: 1;
}

.elementor-accordion .elementor-tab-title:hover {
    background-color: #b2bdc9;
}

.elementor-accordion .elementor-tab-title.active {
    background-color: #07519E;
    color: white; /* Ensures text is readable on the blue background */
}

.elementor-accordion .elementor-tab-content {
    display: none;
    padding: 15px;
    background-color: #ffffff;
    border-radius: 0; /* Remove border radius */
}

.elementor-accordion .elementor-tab-title.active + .elementor-tab-content {
    display: block;
}

.elementor-accordion-icon {
    font-size: 16px;
    position: absolute;
    right: 15px;
}

.elementor-accordion-icon-opened {
    display: none;
}

.elementor-tab-title.active .elementor-accordion-icon-opened {
    display: inline-block;
}

.elementor-tab-title.active .elementor-accordion-icon-closed {
    display: none;
}

.elementor-tab-content h3 {
    color:#8DC340;
}

/* Flip Box Styling */
.flip-box-container {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    justify-content: flex-start; /* Justify cards to the left */
}

.flip-box {
    background-color: transparent;
    width: 300px; /* Adjust as needed */
    height: 300px; /* Adjust as needed */
    perspective: 1000px;
    margin-bottom: 15px;
    border-radius: 0; /* Remove border radius */
}

.flip-box-inner {
    position: relative;
    width: 100%;
    height: 100%;
    text-align: center;
    transition: transform 0.6s;
    transform-style: preserve-3d;
    border-radius: 0; /* Remove border radius */
}

.flip-box:hover .flip-box-inner {
    transform: rotateY(180deg);
}

.flip-box-front, .flip-box-back {
    position: absolute;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
    border: 1px solid #e5e5e5;
    border-radius: 0; /* Remove border radius */
    overflow: hidden;
}

.flip-box-front {
    background-size: cover; /* Ensure the background image covers the entire card */
    background-position: center;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white; /* Ensure the headline is white */
}

.flip-box-front .technology-title {
    background: rgba(0, 0, 0, 0.6); /* Optional: Add a semi-transparent background for readability */
    padding: 10px;
    width: 100%; /* Make the background stretch across the entire card */
    border-radius: 0; /* Remove border radius */
    text-align: center;
}

.flip-box-front .technology-title h4 {
    margin: 0;
    font-size: 1.5em; /* Adjust as needed */
    color: white; /* Ensure the text color is white */
}

.flip-box-back {
    background-color: #f7f7f7;
    color: black;
    transform: rotateY(180deg);
    padding: 15px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    font-size: 0.8em; /* Reduce text size to 80% */
    border-radius: 0; /* Remove border radius */
}

/* Add background image styling for the back */
.flip-box-back {
    position: relative;
}

/* Ensure the back title is visible over the background */
.flip-box-back .technology-back-title {
    position: relative;
    z-index: 1;
    margin-bottom: 10px;
}

.flip-box-back .technology-back-title h5 {
    margin: 0;
    font-size: 1.4em; /* Increase the back headline size a little */
    color: #2BA8E0; /* Green color */
}

/* Style the Read More button */
.technology-link {
    margin-top: 10px; /* Add spacing from the paragraph above */
}

.technology-link a.read-more {
    text-decoration: none;
    color: white;
    background-color: #07519E; /* INL blue color */
    padding: 5px 10px; /* Shrink the button size */
    border-radius: 3px; /* Add slight border radius */
    font-weight: bold;
    display: inline-block;
    font-size: 0.9em; /* Slightly reduce the font size */
    position: relative;
    z-index: 1;
}

.technology-link a.read-more:hover {
    background-color: #2BA8E0; /* Darker shade for hover effect */
}/* End custom CSS */