:root {
    --radius: min(1200px, calc(100vw - 60px));;
    --ratio-increment: .2;
    --circle-1-end-size: calc( var(--radius) *  calc( 1 - ( var(--ratio-increment) * 2 ) ) );
    --circle-1-start-size: calc( var(--radius) *  calc( 1 - ( var(--ratio-increment) * 3 ) ) );
    --circle-2-end-size: calc( var(--radius) *  calc( 1 - ( var(--ratio-increment) * 1 ) ) );
    --circle-2-start-size: calc( var(--radius) *  calc( 1 - ( var(--ratio-increment) * 2 ) ) );
    --circle-3-end-size: calc( var(--radius) );
    --circle-3-start-size: calc( var(--radius) * calc( 1 - ( var(--ratio-increment) * 1 ) ) );
}
#main {position: relative;}
.dealerfest-cta-block { z-index: 1; padding: 96px 0; background-color: #e7effe; border-top-left-radius: 50px; border-top-right-radius: 50px; margin-top: -50px; position: relative;}
.dealerfest-cta-block p { color: #0A1B5F; line-height: 1.5; font-size: 16px; }
.dealerfest-cta-block .subheading { font-size: 24px; color: #0A1B5F; font-weight: 500; line-height: 1.1; margin-bottom: 25px;;}
.dealerfest-cta-block .heading { font-size: 56px; color: #0061FF; font-weight: 600; line-height: 1.1; margin-bottom: 25px;;}
.dealerfest-cta-block .container { text-align: center; max-width: 600px;;}
.dealerfest-cta-block .radiatingBox { position: relative; max-width: 1200px; margin: 0px auto; background: transparent; -webkit-box-shadow: inset 0 0 40px 20px rgba(30, 102, 246, .3); box-shadow: inset 0 0 40px 20px rgba(30, 102, 246, .3); padding: 0 64px; border-radius: 40px; }
.dealerfest-cta-block .radiatingBox a {   display: flex; gap: 25px;  justify-content: center; align-items: center; text-decoration: none; }
.dealerfest-cta-block .radiatingBox a .button {   padding: 16px 40px; line-height: 1; border-radius: 115px;   text-decoration: none;  font-weight: 600; color: #0061FF; border: 2px solid #0061FF; transition: 0.3s; background-color: #0061FF; color: white;  }
.dealerfest-cta-block .radiatingBox a .button:hover { background-color: #0A1B5F; color: white; border: 2px solid #0A1B5F; }
.dealerfest-cta-block .radiatingBox .radiatingBox-copy { z-index: 1; position: relative;}
.dealerfest-cta-block .radiatingBox .radiatingBox-header { color: #0A1B5F; line-height: 1.1; font-size: 36px; margin-bottom: 32px;}
.dealerfest-cta-block .radiatingBox .radiatingBox-inner { margin: 36px auto 48px; padding: 72px 104px; }
.dealerfest-cta-block .ctaImage { margin: 0 auto -19px; max-width: min(1200px, calc(100vw - 60px)); z-index: 100;}
.dealerfest-cta-block .ctaImageWrapper { z-index: 100; display: flex; justify-content: center; align-items: center; position: relative; }
.dealerfest-cta-block .body-copy { margin-bottom: 0px; }


.circle-wrapper {position: absolute; bottom: 0; width: 1200px; height: 100%; margin: auto auto -100px auto; z-index: 0;}
.circle {
border-radius: 50%; /* Makes the div a circle */
position: absolute; /* Allows precise positioning for overlap */
display: flex;
justify-content: center;
align-items: center;
top: 100%;
left: 50%;
transform: translate(-50%, -50%);
color: white;
font-weight: bold;
box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.2); /* Optional shadow for depth */
background: transparent;
-webkit-box-shadow: inset 0 0 40px 20px rgba(30, 102, 246, .3);
box-shadow: inset 0 0 40px 20px rgba(30, 102, 246, .3);
animation-timing-function: linear;
animation-duration: 2s;
opacity: 0;

  transition: 0s;
animation-fill-mode: forwards;
}




        .circle-1 {

            z-index: 3; /* Bring this circle to the front */
            
        }

        .circle-2 {

            z-index: 2; /* Place this behind circle-1 but in front of circle-3 */
            
        }

        .circle-3 {

            z-index: 1; /* Place this at the back */
            
        }
 .is-inViewport .circle-1 { animation-name: circle1Animation; animation-delay: 0; transition: 2s;}
 .is-inViewport .circle-2 { animation-name: circle2Animation; animation-delay: .25s; transition: 2s;}
 .is-inViewport .circle-3 { animation-name: circle3Animation; animation-delay: .5s; transition: 2s;}

        @keyframes circle1Animation {
            0% {
                height: var(--circle-1-start-size);
                width: var(--circle-1-start-size);
                opacity: 0;
            }
            100% {
                height: var(--circle-1-end-size);
                width: var(--circle-1-end-size);
                opacity: 1;
            }
        }
        @keyframes circle2Animation {
            0% {
                height: var(--circle-2-start-size);
                width: var(--circle-2-start-size);
                opacity: 0;
            }
            100% {
                height: var(--circle-2-end-size);
                width: var(--circle-2-end-size);
                opacity: .5;
            }
        }
        @keyframes circle3Animation {
            0% {
                height: var(--circle-3-start-size);
                width: var(--circle-3-start-size);
                opacity: 0;
            }
            100% {
                height: var(--circle-3-end-size);
                width: var(--circle-3-end-size);
                opacity:.3;
            }
        }
@media only screen and (max-width: 1280px) {
    .dealerfest-cta-block .heading { font-size: 56px; }
    .dealerfest-cta-block .radiatingBox { max-width: 900px; }    
    .dealerfest-cta-block .radiatingBox { padding: 0 4vw; }
    .dealerfest-cta-block .radiatingBox .radiatingBox-inner {}

}
@media only screen and (max-width: 1199px) {
.dealerfest-cta-block .subheading { font-size: 20px; }
    .dealerfest-cta-block .ctaImage { margin-bottom: -13px; }
    .dealerfest-cta-block .heading { font-size: 48px; }
    
}
@media only screen and (max-width: 1024px) {
    .dealerfest-cta-block .radiatingBox { max-width: calc(100vw - 30px); }   
    .dealerfest-cta-block .ctaImage { margin-bottom: 0px; } 
.circle-wrapper { margin: auto auto -50px auto;}
}
@media only screen and (max-width: 991px) {
.dealerfest-cta-block .subheading { font-size: 16px; }
    .dealerfest-cta-block .heading { font-size: 40px; }
}
@media only screen and (max-width: 880px) {
    .dealerfest-cta-block .ctaImage { margin-bottom: 5px; } 
}
@media only screen and (max-width: 767px) {

/* .circle-1 {
    height: var(--circle-1-end-size);
    width: var(--circle-1-end-size);
    opacity: 1;
}
.circle-2 {
    height: var(--circle-2-end-size);
    width: var(--circle-2-end-size);
    opacity: .5;
}
.circle-3 {
    height: var(--circle-3-end-size);
    width: var(--circle-3-end-size);
    opacity:.3;
} */
    .dealerfest-cta-block .ctaImage { margin-bottom: 13px; } 
    .dealerfest-cta-block { padding-top: 56px; }
    .dealerfest-cta-block .heading { font-size: 32px; max-width: 50%; margin-left: auto; margin-right: auto; }
    .dealerfest-cta-block .body-copy { max-width: 80%; margin-left: auto; margin-right: auto; }
    .dealerfest-cta-block p { font-size: 16px; }
    .dealerfest-cta-block .container { max-width: calc(100vw - 30px); margin-left: 15px; margin-right: 15px; }
    .dealerfest-cta-block .radiatingBox .radiatingBox-inner { padding: 56px 48px; }
    .dealerfest-cta-block .radiatingBox .radiatingBox-header { font-size: 24px; width: 80%; margin-left: auto; margin-right: auto; }
    .dealerfest-cta-block .ctaImage { max-width: 200vw; width: 200vw;}
    .dealerfest-cta-block .ctaImage { margin-bottom: 0%; max-width: 130%; } 
.circle-wrapper {     margin: auto auto 0px auto; transform: scale(2);}
}
@media only screen and (max-width: 575px) {
    .dealerfest-cta-block .heading { font-size: 32px; max-width: 90%; margin-left: auto; margin-right: auto; }
    .dealerfest-cta-block .body-copy { max-width: 90%; margin-left: auto; margin-right: auto; }
    .dealerfest-cta-block .ctaImage { margin-bottom: 2% } 
    .circle-wrapper {
    margin: auto auto 50px auto;
    transform: scale(1.5);
  }
}
@media only screen and (max-width: 420px) {
    .dealerfest-cta-block .ctaImage { margin-bottom: 5% } 
    .openlane-dealerfest-2025-hero-block .container * { padding-left: 0; padding-right: 0px;}
    .dealerfest-cta-block .radiatingBox .radiatingBox-header { margin-bottom: 24px;}
    .dealerfest-cta-block .radiatingBox .radiatingBox-header { width: 100%;}
    .dealerfest-cta-block .radiatingBox .radiatingBox-inner { padding: 56px 24px;}
}