.header-wrapper{
    animation: backgroundFadeIn 2s ease-in-out;
}


@keyframes backgroundFadeIn {
    0% {
        transform: scale(1.1);
    }
    100% {
        transform: scale(1);
    }
}

#SliderSection{
background-color: var(--primary);
}
#SliderSection .slider-slick span,#SliderSection .slider-slick{
color: #fff;
font-size: 32px;
font-weight: 600;
line-height: 51.2px;
padding: 19px;
text-align: left;
}


.circle-frame {
display: flex;
justify-content: center;
align-items: center;
position: relative;
width: 573px;
height: 573px;
}

.circle-frame .circle-frame-1,
.circle-frame .circle-frame-2,
.circle-frame .circle-frame-3 {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-size: 100%;
z-index: 1;
}

.circle-frame-1 {
width: 100%;
height: 100%;
}

.circle-frame-2 {
width: calc(100% - 93px);
height: calc(100% - 93px);
}

.circle-frame-3 {
width: calc(100% - 188px);
height: calc(100% - 188px);
}

.circle-frame .rotate-wrapper {
position: absolute;
width: 100%;
height: 100%;
background-image: url("../../theme/img/Ellipse.svg");
background-size: 100%;
animation: rotate-left-right 24s ease-in-out infinite;
}

.circle-frame .img-frame {
    width: calc(100% - 300px);
    height: auto;
    object-fit: contain;
    left: 26%;
    position: absolute;
    top: 12%;
    z-index: 0;
}

.circle-frame .card {
position: absolute;
bottom: -6%;
right: -3%;
box-shadow: 0px 10px 50px 0px #D7D7D74D;
border: none;
outline: none;
padding: 20px !important;
z-index: 2;
}

.circle-frame .card .card-icon {
width: 64px;
height: 64px;
display: flex;
align-items: center;
justify-content: center;
background-color: #2ABC17;
border-radius: 50%;
}

.circle-frame .card .card-text {
color: #2ABC17;
font-size: 22px;
font-weight: 500;
line-height: 35.2px;
text-align: left;
margin-top: 20px;
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
}

@keyframes rotate-left-right {
0% {
    transform: rotate(0deg);
    animation-timing-function: cubic-bezier(0.5, 0, 0.75, 0.75); 
}
25% {
    transform: rotate(-360deg);
    animation-timing-function: cubic-bezier(0.5, 0, 0.75, 0.5); 
}
50% {
    transform: rotate(-360deg);
 
}
75% {
    transform: rotate(360deg);
    animation-timing-function: cubic-bezier(0.5, 0, 0.75, 0.75); 
}
100% {
    transform: rotate(0deg); 
    animation-timing-function: cubic-bezier(0.5, 0, 0.75, 0.75); 
}
}

.form-control,.form-select {
border: 1px solid #E0E0E0;
background-color: #FFFFFF;
padding: 18px 32px !important;
border-radius: 20px;
font-size: 24px !important;
font-weight: 400;
line-height: 38.4px;
text-align: left;
color: #425166;
}
.form-select{
background-image:url("../../theme/icons/arrow-down.svg") !important;
background-size: 32px !important;
background-position: right 32px center;
}
.form-control::placeholder{
opacity: 1;
}
input[type="date"]::-webkit-calendar-picker-indicator{
background-image: url('../../theme/icons/calendar.svg') !important;
background-size: 24px;
width: 24px;
height: 24px;
}
input[type="time"]::-webkit-calendar-picker-indicator{
background-image: url('../../theme/icons/clock.svg') !important;
background-size: 24px;
width: 24px;
height: 24px;
}
textarea{
min-height: 187px;
}

@media only screen and (max-width:1199.98px)  {
.circle-frame{
   width: 430px ;
   height: 430px !important;
} 

.circle-frame .img-frame {
    left: 33%;
    top: 20%;
    width: calc(100% - 290px);
}
}

@media only screen and (max-width: 991.98px)  {


.circle-frame{
 
   margin: auto;
   margin-bottom: 3rem !important;
}


.form-control, .form-select{ 
    font-size: 20px !important;
}

}

@media only screen and (max-width: 768px){
#SliderSection .slider-slick span, #SliderSection .slider-slick
{
    font-size: 24px !important;
    line-height: 38.4px !important;
}

.circle-frame{
   width: 320px ;
   height: 320px !important;
   margin: auto;
   margin-bottom: 4rem !important;
}

.circle-frame .img-frame {
    left: 35%;
    top: 30%;
    width: calc(100% - 230px);
}

.circle-frame .card {
    bottom: -25%;
    right: 3%;
}

.circle-frame .card .card-icon{
    width: 50px !important;
    height: 50px !important; 
}

.circle-frame .card .card-icon img{
    width: 40px !important;
}

.circle-frame .card .card-text{
    font-size: 15px;
}
}

@media (min-width: 992px) {
.flex-lg-nowrap {
    flex-wrap: nowrap !important;
}
}