:root {
    --frame-height: 40.375rem;
    --frame-bottom: 8.625rem;
    --item-width: 32.125rem;
    --item-height: 30.875rem;
    --item-padding: 5rem;
    --item-radius: 1.5rem;
    --item-active-margin-top: 3.625rem;
    --item-active-margin-inline: -2.5rem;
    --item-content-gap: 1.5rem;
    --header-dsp-max-width: 68.25rem;
}
.all-in-one-grid::after {
    position: absolute;
    bottom: -16%;
    left: 0;
    right: 0;
    margin: auto;
    width: 100%;
    border-radius: 50%;
    background: radial-gradient(212.17% 154.6% at 112.61% -10.92%, #C2E3FF 0%, #FFF 100%);
    content: '';
    width: 68%;
    padding-bottom: 6%;

}
.all-in-one-section {
    background: linear-gradient(0deg, #FFF 0%, var(--light-blue, #E5F3FF) 100%);
    position: relative;
    padding-block: var(--sectionInnerSpaceLarge);
    margin-top: calc(var(--sectionSpace) * -1);
}
.all-in-one-frame {
    position: absolute;
    bottom: 0;
    height: var(--frame-height);
    max-width: 40%;
}
.all-in-one-section .container {
    position: relative;
}
.all-in-one-frame.left {
    left: 10px;
}
.all-in-one-frame.right {
    right: 10px;
}
.all-in-one-frame img {max-height: 100%;max-width: 100%;}
.all-in-one-section .section-header, .all-in-one-section .all-in-one-grid {
    position: relative;
    z-index: 1;
}
.all-in-one-item {
    border-radius: var(--item-radius);
    background: linear-gradient(0deg, rgba(255, 255, 255, 0.90) 0%, rgba(255, 255, 255, 0.90) 100%), radial-gradient(212.17% 154.6% at 112.61% -10.92%, #C2E3FF 0%, #FFF 100%);
    box-shadow: 0 18px 28px 0 rgba(153, 198, 255, 0.30);
    display: flex;
    width: var(--item-width);
    height: var(--item-height);
    padding: var(--item-padding);
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-start;
    flex-shrink: 0;
    position: relative;
    z-index: 1;
}
.all-in-one-grid {
    display: flex;
    justify-content: center;
}
.all-in-one-icon .active{
    display: none;
}
.all-in-one-content{
    display: flex;
    flex-direction: column;
    gap: var(--item-content-gap);
}
.features-list-box{
    padding: var(--sectionInnerSpaceLarge) 0;
    border-radius: 0;
}
.features-list-holder .two-columns{
    padding-top: 0;
}

.header-img dotlottie-player {
    height: auto;
}
body .program-management-wrapper  .slick-dots li button {
	background-color: #3F71FF;
}
body .program-management-wrapper  .slick-dots li.slick-active button {
	background-color: var(--white);
}
@media screen and (min-width: 767px) {
    .all-in-one-item.active {
        margin-inline: var(--item-active-margin-inline);
        z-index: 2;
        border: 1px solid var(--Brand-400, #294FFF);
        background: linear-gradient(180deg, rgba(8, 26, 102, 0.90) 0%, rgba(16, 52, 204, 0.90) 100%);
        margin-top: var(--item-active-margin-top);
    }
    .all-in-one-section .section-header .text-xl {
        max-width: var(--header-dsp-max-width);
    }
    .active > .all-in-one-icon .active{
        display: block;
    }
    .active > .all-in-one-icon .inactive{
        display: none;
    }
    .all-in-one-item.active h5, .all-in-one-item.active .text-xl p{
        color: var(--white, #FFFFFF);
    }   
}

@media screen and (max-width: 1600px) {
    :root {
        --frame-height: 28.375rem;
        --frame-bottom: 6.875rem;
        --item-width: 22.375rem;
        --item-height: 24.75rem;
        --item-padding: 3.5rem;
        --item-active-margin-top: 1.75rem;
        --item-active-margin-inline: -1.875rem;
        --item-content-gap: 1rem;
    }
    .all-in-one-icon img {
        width: 4rem;
        height: auto;
    }
    .all-in-one-grid::after {
        bottom: -12%;
        max-width: 65.85%;
        padding-bottom: 5.72%;
    }
}
@media screen and (max-width: 1199px) {
    :root {
        --frame-height: 22.375rem;
        --frame-bottom: 5rem;
        --item-width: 17rem;
        --item-height: 18.75rem;
        --item-padding: 2rem;
        --item-active-margin-top: 1.875rem;
        --item-active-margin-inline: -1.75rem;
        --item-content-gap: 0.75rem;
        --header-dsp-max-width: 38.125rem;
        --item-radius: 1rem;
    }
    .all-in-one-icon img {
        width: 3rem;
    }
}
@media screen and (max-width: 991px) {
    :root {
        --frame-height: 18.625rem;
        --frame-bottom: 5rem;
        --item-width: 13.875rem;
        --item-height: 16.5rem;
        --item-padding: 1.5rem;
        --item-active-margin-top: 1.5rem;
        --item-active-margin-inline: -1px;
        --item-content-gap: 0.75rem;
        --header-dsp-max-width: 38.125rem;
    }
    .all-in-one-icon img {
        width: 2rem;
    }
}

@media screen and (max-width: 767px) {
    :root {
        --item-width: 15.25rem;
        --item-height: 15.375rem;
        --item-active-margin-top: 0;
        --item-active-margin-inline: 0;
    }
    .all-in-one-item{
      display: flex !important;
    }
    .all-in-one-grid {
        display: block;
        margin: 0 -1.5rem;
        overflow-x: hidden;
    }
    .all-in-one-grid .slick-track {
        display: flex;
        gap: 1rem;
        z-index: 1;
        position: relative;
    }
    .all-in-one-frame{
        display: none;
    }
    .all-in-one-item.slick-current {
        border: 1px solid var(--Brand-400, #294FFF);
        background: linear-gradient(180deg, rgba(8, 26, 102, 0.90) 0%, rgba(16, 52, 204, 0.90) 100%);
    }
    .all-in-one-item.slick-current > .all-in-one-icon .active{
        display: block;
    }
    .all-in-one-item.slick-current > .all-in-one-icon .inactive{
        display: none;
    }
    .all-in-one-item.slick-current h5, 
    .all-in-one-item.slick-current .text-xl p{
        color: var(--white, #FFFFFF);
    }  
    .all-in-one-grid .slick-dots {
        justify-content: center;
    }
    .all-in-one-grid::after{
        width: 20.5rem;
        height: 1.75rem;
        max-width: inherit;
        padding: 0;
        bottom: 32px;
        z-index: -1;
    }
    
}
/* two columns css Starts ==================== */

.features-list-holder .section-header {
    gap: 2rem;
    margin-bottom: 5rem;
    max-width: 76%;
}
.hwd-sect {
    display: flex;
    gap: 2rem;
    align-items: flex-start;
}
.hwd-sect > div {
    flex: 1;
}
.hwd-sect-list ul {
    gap: 80px;
}
.hwd-sect-list ul li {
    position: relative;
    gap: 24px;
    display: flex;
    flex-direction: column;
    border-left: 2px solid var(--orange);
    /*opacity: 0.7;*/
    padding-inline: 72px 0;
    transition: var(--transitionDefault);
}
.bg-blue .hwd-sect-list ul li {
    border-color: #294FFF;
}
.bg-blue-light .hwd-sect-list ul li {
    border-color: #99C6FF;
}
.hwd-sect-list ul li:before {
    content: '';
    position: absolute;
    left: -2px;
    width: 2px;
    height: 0;
    background-color: var(--orange);
    transition: var(--transitionDefault);
}
.hwd-sect-list ul li:hover:before,
.hwd-sect-list ul li.active:before {
	height: 100%;
}
.hwd-sect-list ul li:hover,
.hwd-sect-list ul li.active{
	opacity: 1;
}
.hwd-sect-img {
    text-align: right;
    display: flex;
    justify-content: flex-start;
}
.features-list-bg-decor {
    position: absolute !important;
    bottom: 0;
    left: 30%;
    z-index: 0;
    width: 1661px;
    height: 1276px;
}
.features-list-bg-decor svg {
    height: 100%;
    width: 100%;
}
.hwd-sect-main {
    position: relative;
    overflow: hidden;
    background-color: var(--blue);
    color: #fff;
    padding: var(--sectionInnerSpaceLarge) 0;
}
.hwd-sect-img img {
    width: 715px;
	object-fit: cover;
	border-radius: var(--borderRadiusLarge);
}
.hwd-sect-main .container {
    position: relative;
    z-index: 1;
}
.hwd-sect-main .section-header {
    margin-bottom: 4rem;
}
.hwd-sect-list .section-header {
    max-width: 746px;
}
.hwd-sect-list ul{
	max-width: 716px;
}

@media screen and (max-width: 1600px) {
	.hwd-sect-img img {
		width: 82.5%;
	}
	.hwd-sect-main .section-header {
		margin-bottom: 3rem;
	}
	.hwd-sect {
		gap: 1.5rem;
		align-items: stretch;
	}
	.features-list-holder .section-header {
		max-width: 100%;
	}
	.hwd-sect-list ul {
		gap: 32px;
	}
	.hwd-sect-list ul li {
        padding-inline: 40px;
    }
}
@media screen and (max-width: 1199px) {
	.hwd-sect-main .section-header {
		gap: 1.5rem;
		margin-bottom: 2.5rem;
	}
	.hwd-sect-list ul {
		gap: 32px;
	}
	.hwd-sect-img img {
		width: 82.8%;
	}
	.hwd-sect-list ul li {
        padding-inline: 24px;
        gap: 16px;
    }
	.hwd-sect-img {
	    margin-right: 0;
	}
	.features-list-bg-decor {
		left: 20%;
	}
}
@media screen and (max-width: 991px) {
	.features-list-holder .section-header {
		margin-bottom: 2rem;
	}
	.hwd-sect-list ul li {
		gap: 16px;
		padding-inline: 24px 20px;
	}
	.features-list-bg-decor {
		left: 10%;
	}
	.hwd-sect {
		align-items: flex-start;
	}
	.hwd-sect-img img {
		width: 80.46%;
		height: 367px;
	}
}
@media screen and (max-width: 767px) {
	.features-list-holder .section-header {
		gap: 1rem;
		margin-bottom: 2.5rem;
	}
	.hwd-sect {
        gap: 2.5rem;
        flex-direction: column-reverse;
    }
	.hwd-sect-list ul li {
        padding-inline: 16px 0px;
    }
	.hwd-sect-img {
		margin-right: 0;
	}
	.features-list-bg-decor {
		left: -20%;
	}
    .hwd-sect-img img {
        width: 87.8%;
		height: auto;
		margin: auto;
    }
	.hwd-sect-list ul {
        gap: 24px;
    }
	.program-management-slides-container .slide.slick-current::after {
    	background: linear-gradient(180deg, rgba(0, 0, 0, 0) -9.37%, #1434CB 100%);
	}	
}

/* two columns css Ends  ==================== */