/*
=============
 Global
=============
*/

i{
    -webkit-transition: 0.3s;
    -moz-transition: 0.3s;
    transition: 0.3s;
}

a{
    -webkit-transition: 0.3s;
    -moz-transition: 0.3s;
    -o-transition: 0.3s;
    transition: 0.3s;
}

/* Start Skick Slider*/


.dreamit-slick-slider {
    position: relative;
    min-height: 875px;
    z-index: 1;
}
.single-slick.style_one{
      position: relative;
    min-height: 800px;
}
.slide-img, .parallax-img {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: -1;
}

.dreamit-slick-slider .hero-text-wrap {
    width: 100%;
    position: relative;
    z-index: 2;
}
.dreamit-slick-slider .hero-text-wrap h4 {
    padding: 0 0 10px 56px;
    position: relative;
    z-index: 1;
    -webkit-animation: 0.8s 0.8s fadeInUp both;
    animation: 0.8s 0.8s fadeInUp both;
    margin: 0 0 5px;
    font-size: 20px;
    letter-spacing: -1px;
    text-transform: uppercase;
    font-weight: 600;
    color: #e53925;
}
.dreamit-slick-slider .hero-text-wrap h4:before {
    position: absolute;
    content: "";
    left: 0;
    top: 10px;
    width: 40px;
    height: 2px;
    background: #e53925;
}
.dreamit-slick-slider .hero-text-wrap h1 {
    animation: 1s 1.6s fadeInUp both;
    font-size: 68px;
    line-height: 80px;
    color: #e2eef5;
    font-weight: 700;
}
.dreamit-slick-slider .hero-text-wrap h1 span{
	color: #e53925;
}
.dreamit-slick-slider .hero-text-wrap p {
    -webkit-animation: 1s 2s fadeInUp both;
    animation: 1s 2s fadeInUp both;
    margin: 0 0 0;
    padding: 12px 0 43px;
    width: 50%;
    font-size: 18px;
    line-height: 30px;
    color: rgb(255 255 255 / 60%);
    font-weight: 400;
}
.dreamit-slick-slider .text-center .hero-text-wrap p {
    margin: auto;
}
.dreamit-slick-slider .text-center .slider-buttons {
    text-align: center;
    display: inline-block !important; 
}
.dreamit-slick-slider .single-slick.style_one .hero-text-wrap .btn {
    -webkit-animation: 1s 2s fadeInUp both;
    animation: 1s 2s fadeInUp both;
    position: relative;
    z-index: 1;
    overflow: hidden;
    display: inline-block;
    background: #e53925;
    -webkit-transition: 0.4s;
    transition: 0.4s;
    border: none;
    padding: 15px 30px 15px;
    font-size: 18px;
    line-height: 28px;
    color: #ffffff;
    font-weight: 500;
    font-family: "Space Grotesk";
    border-radius: 0;
}
.dreamit-slick-slider .single-slick.style_one .hero-text-wrap .btn i {
    display: inline-block;
    font-size: 20px;
    margin-left: 8px;
    transform: rotate(-45deg);
}
.dreamit-slick-slider .single-slick.style_one .hero-text-wrap .btn:before {
    position: absolute;
    content: "";
    height: 0;
    width: 0;
    background: #ffffff;
    right: 0;
    bottom: 0;
    z-index: -1;
    transition: 0.5s;
}
.dreamit-slick-slider .single-slick.style_one .hero-text-wrap .btn:hover:before {
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
}
.dreamit-slick-slider .single-slick.style_one .hero-text-wrap .btn:hover, 
.dreamit-slick-slider .single-slick.style_one .hero-text-wrap .btn:hover i {
    color: #0f1d37;
}


span.slick_img {
    padding: 0 84px;
}



/* Slick Slider Next */
.slick-prev,
.slick-next {
	font-size: 0;
	line-height: 0;
	position: absolute;
	top: 50%;
	display: block;
	width: 20px;
	height: 20px;
	padding: 0;
	-webkit-transform: translate(0, -50%);
	-ms-transform: translate(0, -50%);
	    transform: translate(0, -50%);
	cursor: pointer;
	color: transparent;
	border: none;
	outline: none;
	background: transparent;
}
.slick-prev {
    background-color: rgba(0,0,0,0.40);
    border-radius: 100%;
    -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
    height: 80px;
    top: 50%;
    -webkit-transform: translate(0px, -50%);
    -ms-transform: translate(0px, -50%);
    transform: translate(0px, -50%);
    width: 80px;
    z-index: 1;
    -webkit-transition: all 0.3s ease 0s;
    -o-transition: all 0.3s ease 0s;
    transition: all 0.3s ease 0s;
    line-height: 80px;
    color: #fff;
    border: 0;
}
.slick-next {
    background-color: rgba(0,0,0,0.40);
    border-radius: 100%;
    -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
    height: 80px;
    top: 50%;
    width: 80px;
    line-height: 80px;
    color: #fff;
    border: 0;
}
 .slick-next:hover{
    background-color: #52614e;
    color: #FFF;
}
.slick-next:hover:before{
    color: #FFF;
}
.slick-next::before {
    font-size: 26px;
    color: #fff;
}
.dreamit-slick-slider .slick-prev {
	left: -94px;
}
.dreamit-slick-slider .slick-next {
    right: -80px;
    top: 50%;
    opacity: 1;
    color: #fff;
    transition: .5s;
}
.dreamit-slick-slider:hover .slick-prev {
	left: 50px;
}
.dreamit-slick-slider:hover .slick-next {
	right: 50px;
}
.dreamit-slick-slider .slick-prev::before,
.dreamit-slick-slider .slick-next::before {
	color: #fff;
	font-size: 25px;
	-webkit-transition: all 0.3s ease 0s;
	-o-transition: all 0.3s ease 0s;
	transition: all 0.3s ease 0s;
	content: "\f104";
	font-family: FontAwesome;
}
.dreamit-slick-slider .slick-next:before {
	content: "\f105";
	font-family: FontAwesome;
}
.slick-prev:hover,
.slick-prev:focus,
.slick-next:hover,
.slick-next:focus {
	background-color: #52614e;
	color: #FFF;
	border: 0;
	outline:0;
}

.slick-prev:hover:before,
.slick-prev:focus:before,
.slick-next:hover:before,
.slick-next:focus:before {
	color: #fff;
}





/*service box style four*/
.service-box.style4 {
    position: relative;
    z-index: 1;
    border-radius: 20px;
    padding: 44px 50px 44px 40px;
    transition: all 300ms ease;
    display: flex;
}
.service-box.style4 .content {
    display: block!important;
}
.service-box.style4:hover:before{
    width: 100%;
    left: 0;
}
.service-box.style4 .icon { 
    display: inline-block;
    height: 90px;
    width: 90px;
    line-height: 122px;
    border: 1px solid#403D6A;
    text-align: center;
    border-radius: 100%;
    background: #2A244D;
    transition: .5s;
    flex-shrink: 0;
    margin-right: 28px; 
}
.service-box.style4 .icon img{
    transition:.5s;
}
.service-box.style4:hover .icon{ 
   border-color:#6766FF;
}
.service-box.style4 h3.title {
    margin: 0 0 14px;
    color: #fff;
    font-size: 32px;
    font-weight: 600;
}
.service-box.style4 p.description {
    color: #fff;
    opacity: 0.6;
    margin: 0 0 25px;
}
.service-box.style4 .service-btn a {
    font-size: 20px;
    color: #fff;
    transition: .5s;
    display: inline-block;
    font-family: "Rajdhani";
}
.service-box.style4 .hover-bx {
    left: 0;
    -webkit-transition-delay: 0.105s;
    transition-delay: 0.105s;
    border-radius: 20px 0px 0px 20px;
}
.service-box.style4 .hover-bx2 {
    left: 25%;
    -webkit-transition-delay: 0.105s;
    transition-delay: 0.105s;
}
.service-box.style4 .hover-bx3 {
    left: 50%;
    -webkit-transition-delay: 0.105s;
    transition-delay: 0.105s;
}
.service-box.style4 .hover-bx4 {
    left: 75%;
    -webkit-transition-delay: 0s;
    transition-delay: 0s;
    border-radius: 0px 20px 20px 0px;
}
.service-box.style4 .ai-hover-box {
    background-color: var(--theme-color2);
    height: 100%;
    top: 0;
    opacity: 0;
    position: absolute;
    -webkit-transform: scaleX(0);
    transform: scaleX(0);
    -webkit-transition: all 0.5s ease 0s;
    transition: all 0.5s ease 0s;
    width: 25%;
    z-index: -1;
}
.service-box.style4:hover .ai-hover-box {
    opacity: 1;
    -webkit-transform: scale(1);
    transform: scale(1);
}



/* Solar Home Start */


.services-carousel-box.style1 {
    padding: 0 0 60px;
    margin-bottom: 20px;
}

.services-carousel-thumb {
    position: relative;
    z-index: 1;
}

.services-content {
    position: absolute;
    z-index: 1;
    width: 92%;
    right: 0;
    bottom: -82px;
    background: #0C2318;
    border-radius: 20px;
    padding: 21px 0px 35px 35px;
    transition: 0.5s;
}

.services-content::before {
    position: absolute;
    content: "";
    left: 0;
    bottom: 0;
    height: 0%;
    width: 100%;
    background: #243B30;
    transition: 0.5s;
    z-index: -1;
    border-radius: 20px;
    top: auto;
}


.services-carousel-icon img {
    width: auto !important;
    display: inline-block !important;
}

.services-carousel-thumb img {
    border-radius: 20px;
}

.services-carousel-icon {
    float: right;
    width: 70px;
    height: 70px;
    line-height: 95px;
    background: #6766FF;
    text-align: center;
    border-radius: 10px 0px 0px 10px;
    margin-top: -70px;
    position: relative;
    z-index: 1;
    transition: 0.5s;
}

.services-carousel-icon::before {
    position: absolute;
    z-index: -1;
    content: "";
    left: 0;
    top: 0;
    height: 100%;
    width: 100%;
    transform: scale(0);
    border-radius: 10px 0px 0px 10px;
    background-color: #FF853F;
    transition: all 500ms ease;
}

.services-carousel_content h4 a {
    transition: .5s;
}

.services-carousel-icon:hover:before {
    transform: scale(1);
}

.style1.services-carousel-box:hover .services-content:before {
    height: 100%;
    top: 0;
}

.services-carousel-box:hover .services-carousel_content h4 a {
    color: #FF853F;
}

 .services-carousel .owl-nav {
    position: absolute;
    top: -166px;
    right: 0;
}

 .services-carousel button.owl-prev i, .services-carousel button.owl-next i {
    font-size: 24px;
    height: 56px;
    line-height: 56px;
    width: 56px;
    border-radius: 50%;
    transition: all 0.3s ease 0s;
    color: rgba(255, 255, 255, 0.5);
    background: transparent;
    border: 1px dashed rgba(255, 255, 255, 0.5);
    z-index: 5;
    display: inline-block;
}

.services-carousel .owl-nav button.owl-prev {
    margin-right: 10px;
    
}


 .services-carousel button.owl-prev:hover i, .services-carousel button.owl-next:hover i {
   background: var(--theme-color2);
   color: #fff;
}


/*Style two*/

.services-carousel-box.style2 {
    border-radius: 20px;
    padding: 20px 20px 40px;
    margin-bottom: 20px;
    background: #182F24;
}

.style2 .services-carousel-thumb {
    padding-bottom: 17px;
    overflow: hidden;
}

.services-carousel-thumb::before {
    position: absolute;
    z-index: -1;
    content: "";
    width: 100%;
    height: 96%;
    background-image: url("data:image/svg+xml,%3Csvg%20width%3D%22362%22%20height%3D%22255%22%20viewBox%3D%220%200%20362%20255%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M0%2020C0%208.95431%208.9543%200%2020%200H342C353.046%200%20362%208.9543%20362%2020V234.607C362%20246.544%20351.611%20255.823%20339.749%20254.48L17.7492%20218.01C7.63905%20216.865%200%20208.312%200%20198.137V20Z%22%20fill%3D%22%2341C575%22%2F%3E%3C%2Fsvg%3E");
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    top: -1px;
    left: 0;
    border-radius: 20px;
    transform: translateY(-7px);
    transition: 0.5s;
    opacity: 0;
}

.style2.services-carousel-box .services-carousel-icon::before {
    border-radius: 10px;
}

.style2 .services-carousel_content {
    padding: 28px 20px 0 20px;
}

.style2.services-carousel-box .service-btn a {
    display: flex;
    justify-content: space-between;
    color: var(--theme-color-white);
    border: 1px solid rgba(255, 255, 255, 0.15);
    font-family: var(--title-font);
    font-weight: 500;
    font-size: 16px;
    padding: 10px 30px;
    border-radius: 40px;
    transition: 0.5s;
    position: relative;
    z-index: 1;
    overflow: hidden;
}

.style2.services-carousel-box .service-btn a::before {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    bottom: 0;
    left: -15%;
    right: 0;
    width: 0;
    height: 106%;
    background: #FF853F;
    transform: skew(45deg);
    transition: all 0.4s ease-in-out;
    z-index: -1;
}

.style2.services-carousel-box:hover .service-btn a:before {
    width: 100%;
    transform: skew(0deg);
    left: 0;
}

.style2.services-carousel-box:hover .services-carousel-thumb::before {
    transform: translateY(8px);
    opacity: 1;
}
.style2 .services-carousel-icon {
    float: left;
    border-radius: 10px;
    left: 20px;
    margin-top: -52px;
    width: 66px;
    height: 66px;
}

.style2.services-carousel-box:hover .services-carousel-icon::before {
    transform: scale(1);
}






/*Counter CSS*/

.single-counter.style_four {
    border-radius: 20px;
    padding: 50px 40px 32px 40px;
    position: relative;
    z-index: 1;
    overflow: hidden;
    overflow: hidden;
}


.style_four.single-counter:before {
    content: "";
    position: absolute;
    width: 200%;
    height: 0%;
    left: 50%;
    top: 50%;
    background-color: rgba(255, 255, 255, 0.3);
    transform: translate(-50%, -50%) rotate(-45deg);
    z-index: 1;
}

.style_four.style_four.single-counter:hover:before{
    height: 250%;
    transition: all 600ms linear;
    background-color: transparent;
}


/* Icon box style four*/

.icon-box.style4 {
    display: flex;
    background: rgba(255, 255, 255, 0.6);
    align-items: center;
    border-radius: 70px;
    margin-bottom: 22px;
    box-shadow: 0px 5px 40px 10px rgba(65, 197, 117, 0.1019607843);
    padding: 15px 40px 15px 20px;
    position: relative;
    z-index: 1;
    transition: 0.5s;
}

.icon-box.style4 .img-icon {
    display: inline-block;
    width: 60px;
    height: 60px;
    line-height: 80px;
    background: #6766FF;
    border-radius: 50%;
    text-align: center;
    transition: 0.5s;
}



h4.title {
    transition: .5s;
}


.ai-hover-box {
            background-color: #6766FF;
            height: 100%;
            top: 0;
            opacity: 0;
            position: absolute;
            -webkit-transform: scaleX(0);
            transform: scaleX(0);
            -webkit-transition: all 0.5s ease 0s;
            transition: all 0.5s ease 0s;
            width: 25%;
            z-index: -1;
        }
        .hover-bx {
            left: 0;
            -webkit-transition-delay: 0.105s;
            transition-delay: 0.105s;
            border-radius: 70px 0px 0px 70px;
        }
        .hover-bx2 {
            left: 25%;
            -webkit-transition-delay: 0.105s;
            transition-delay: 0.105s;
        }
        .hover-bx3 {
            left: 50%;
            -webkit-transition-delay: 0.105s;
            transition-delay: 0.105s;
        }
        .hover-bx4 {
            left: 75%;
            -webkit-transition-delay: 0s;
            transition-delay: 0s;
            border-radius: 0px 70px 70px 0px;
        }
        
        .icon-box.style4:hover .ai-hover-box {
            opacity: 1;
            -webkit-transform: scale(1);
            transform: scale(1);
        }
        
        .icon-box.style4:hover .img-icon {
            background: #fff;
        }
        
        .img-icon img{
            transition: .5s;
        }
        
        .icon-box.style4:hover .img-icon img {
            filter: brightness(1) invert(1);
            animation: bd-bounce 800ms ease-out alternate;
            -webkit-animation: bd-bounce 800ms ease-out alternate;
        }
        
        .icon-box.style4:hover .img-icon {
            background: #fff;
        }
        
        .icon-box.style4:hover .icon-box-content h4.title{
            color: #fff;
        }
        
        .box-style2 .ai-hover-box {
            background-color: #FF853F;
        }
        
        .box-style2 .icon-box.style4 .img-icon {
            background: #FF853F;
        }
        
        .box-style2 .icon-box.style4:hover .img-icon {
            background: #fff;
        }
        
        .box-style3 .ai-hover-box {
            background-color: #0C2318;
        }
        
        .box-style3 .icon-box.style4 .img-icon {
            background: #0C2318;
        }
        
        .box-style3 .icon-box.style4:hover .img-icon {
            background: #fff;
        }
        


@keyframes bd-bounce {
    0%, 100%, 20%, 50%, 80% {
      -webkit-transform: translateY(0);
      -ms-transform: translateY(0);
      transform: translateY(0) translateX(0%);
    }
    40% {
      -webkit-transform: translateY(-8px);
      -ms-transform: translateY(-8px);
      transform: translateY(-8px) translateX(0%);
    }
    60% {
      -webkit-transform: translateY(-4px);
      -ms-transform: translateY(-4px);
      transform: translateY(-4px) translateX(0%);
    }
  }


/*Start Case Study CSS*/

.style2.case-study .dreamit-single-cases-study {
    background: var(--theme-color4);
    border-radius: 24px;
    padding: 17px 17px 20px;
    position: relative;
    margin-bottom: 20px;
    transition: .5s;
}

.style2.case-study .dreamit-single-cases-study::after {
    position: absolute;
    z-index: -2;
    content: "";
    width: 93%;
    height: 100%;
    background-image: url(https://wp.ditsolution.net/ai/wp-content/uploads/2025/08/shape.png);
    background-repeat: no-repeat;
    background-position: center center;
    left: 0;
    right: 0;
    top: 310px;
    margin: 0 auto;
    transform: translateY(0px);
    transition: 0.5s;
}

.style2.case-study .dreamit-single-cases-study:hover:after {
    transform: translateY(15px);
}

.ai-bf {
    position: relative;
    z-index: 1;
    overflow: hidden;
}

.ai-bf::before {
    content: "";
    position: absolute;
    width: 200%;
    height: 0%;
    left: 50%;
    top: 50%;
    background-color: rgba(255, 255, 255, 0.3);
    transform: translate(-50%, -50%) rotate(-45deg);
    z-index: 1;
}

.style2.case-study .dreamit-single-cases-study:hover .ai-bf::before {
    height: 200%;
    transition: all 600ms linear;
    background-color: transparent;
}


.case-study.style2 .case-study-thumb img {
    width: 100%;
    border-radius: 15px;
}

.cases-study-content {
    display: flex;
    justify-content: space-between;
    align-items: end;
    padding: 45px 26px 15px;
}

.case-study.style2 span.category-item {
    display: inline-block;
    background: var(--theme-color5);
    font-size: 16px;
    padding: 6px 24px;
    border-radius: 20px;
    margin-bottom: 11px;
}


.case-study.style2 .single_case_study h2.title a {
    display: inline-block;
    transition: .5s;
}

.case-study.style2 .single_case_study h2.title a:hover {
    color: var(--theme-color7);
    color: fff;
}


.style2 .single_case_study .case-study-btn a {
    display: inline-block;
    width: 58px;
    height: 58px;
    line-height: 58px;
    color: var(--theme-color2);
    background: var(--theme-color5);
    border-radius: 50%;
    text-align: center;
    transform: rotate(-45deg);
    position: relative;
    z-index: 1;
}

.style2 .single_case_study .case-study-btn a::before {
    position: absolute;
    z-index: -1;
    content: "";
    left: 0;
    top: 0;
    height: 100%;
    width: 100%;
    transform: scale(0);
    border-radius: 50%;
    background-color: var(--theme-color2);
    transition: all 500ms ease;
}

.style2 .single_case_study:hover .case-study-btn a::before {
    transform: scale(1);
}

.style2 .single_case_study:hover .case-study-btn a {
    color: #fff;
}



.icon2 .work-process.style1 .icon {
    background-color: #fff;;
    border: 2px solid var(--theme-color2);
}


/*Counter CSS*/

.form-group input {
    transition: 0.3s;
    outline: 0;
    width: 100%;
    height: 54px;
    border: 1px solid rgba(12, 35, 24, 0.15);
    background: transparent;
    border-radius: 50px;
    padding: 0 35px 0 30px;
}

.form-group textarea.wpcf7-form-control.wpcf7-textarea {
    transition: 0.3s;
    outline: 0;
    width: 100%;
    height: 137px;
    border: 1px solid rgba(12, 35, 24, 0.15);
    background: transparent;
    border-radius: 30px;
    padding: 20px 35px 0 30px;
}


.option-box select{
    color: var(--theme-color2);
    font-family: var(--text-font);
    font-weight: 400;
    font-size: 16px;
    border: 1px solid rgba(12, 35, 24, 0.15);
    background: transparent;
    width: 100%;
    padding: 13px 30px 13px 30px;
    border-radius: 50px;
    display: inline-block !important;
}


.form-group .buttons input {
    font-family: var(--title-font);
    font-weight: 500;
    font-size: 18px;
    display: inline-block;
    color: #fff;
    background: var(--theme-color2);
    border-radius: 45px;
    padding: 13px 35px;
    position: relative;
    z-index: 1;
    margin-top: 5px;
    width: inherit;
    border: 0;
}


.form-group .buttons input:hover {
    background: #fff;
    color: #6766FF;
}

.form-group .buttons p {
    margin: 0;
}


.form-group input.wpcf7-form-control.wpcf7-text.wpcf7-validates-as-required.form-control::placeholder {
    color: #4D6459!important;
}

.form-group textarea.wpcf7-form-control.wpcf7-textarea.form-control::placeholder {
    color: #4D6459 !important;
}


.box-style3 .testimonial-item.style3 {
    background-image: url("data:image/svg+xml,%3Csvg%20width%3D%22536%22%20height%3D%22350%22%20viewBox%3D%220%200%20536%20350%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M0%2020C0%208.9543%208.95431%200%2020%200H459.659C469.168%200%20477.362%206.69508%20479.258%2016.0131L482.969%2034.256C484.514%2041.8509%20490.308%2047.8694%20497.838%2049.702L520.729%2055.2725C529.692%2057.4536%20536%2065.4813%20536%2074.7054V330C536%20341.046%20527.046%20350%20516%20350H20C8.95432%20350%200%20341.046%200%20330V20Z%22%20fill%3D%22%23182F24%22%2F%3E%3C%2Fsvg%3E");
    background-repeat: no-repeat;
    background-size: auto;
    background-position: center center;
    border-radius: 20px;
    padding: 35px 38px 25px;
    position: relative;
    z-index: 1;
}

.box-style3 .testimonial-item.style3::before {
    position: absolute;
    content: "";
    height: 100%;
    width: 0;
    background-image: url(https://wp.ditsolution.net/ai/wp-content/uploads/2025/08/testi-box.png);
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    border-radius: 20px;
    left: 0;
    top: 0;
    z-index: -1;
    transition: 0.5s;
}

.box-style3 .testimonial-item.style3:hover:before {
    width: 100%;
}

.box-style3 .single-counter.style_three {
    background: #243B30;
    padding: 38px 25px 29px;
}

/* Button Style CSS*/

.hero-text.style2 a.button {
    display: inline-block;
    font-family: "Outfit", sans-serif;
    color: #fff;
    background-color: #6766FF;
    padding: 18px 35px;
    font-weight: 400;
    font-size: 18px;
    border-radius: 45px;
    position: relative;
    z-index: 1;
    transition: all 500ms ease;
    margin-top: 14px;
}

.hero-text.style2 a.button::before {
    position: absolute;
    content: "";
    height: 16px;
    width: 1px;
    background-color: #fff;
    left: 175px;
    top: 26px;
}

.hero-text.style2 a.button::after {
    position: absolute;
    content: "";
    width: 0;
    height: 100%;
    left: 50%;
    top: 0;
    background: #0C2318;
    z-index: -1;
    border-radius: 45px;
    transition: all 300ms ease;
}

.hero-text.style2 a.button i {
    display: inline-block;
    margin-left: 22px;
    font-size: 16px;
    font-weight: 400;
    position: relative;
    top: 2px;
}

.hero-text.style2 a.button:hover:after{
    left: 0;
    width: 100%;
}

.hero-text.style2 a.button:hover{
    color: #fff;
}




/*animation circle*/
.creative-btn.style-one {
    position: relative;
    top: 90px;
    left: 33%;
    z-index: 1;
}
.creative-btn.style-one .text_inner {
    animation: circle 15s linear infinite;
    position: relative;
    z-index: 22;
    fill: rgb(255 255 255 / 0%);
}
.creative-btn.style-one .text_inner svg {
    width: 100px;
    max-width: 100%;
    height: auto;
    overflow: visible;
    word-spacing: 12px;
    transform: rotate(0) scaleX(1) scaleY(1);
    position: relative;
}
.creative-btn.style-one .text_inner text {
    fill: #121212;
    direction: ltr;
    transition: 0.3s stroke, 0.3s stroke-width, 0.3s fill;
    font-size: 36px;
    font-weight: 500;
    position: relative;
    z-index: 2;
}
.creative-btn.style-one a.banner-play-batn {
    overflow: hidden;
    position: relative;
    display: inline-block;
    width: 162px;
    height: 162px;
    line-height: 162px;
    text-align: center;
    border-radius: 50%;
    background: #6766FF;
}
.creative-btn.style-one .likee {
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    left: 50%;
    display: inline-block;
    z-index: 99;
    background: #111A3A;
    height: 50px;
    width: 50px;
    line-height: 50px;
    text-align: center;
    border-radius: 50%;
}
.creative-btn.style-one .likee i {
    /* -webkit-animation: wooo 5s linear infinite; */
    /* animation: wooo 5s linear infinite; */
    /* transition: .5s; */
    position: relative;
    /* font-size: 22px; */
    /* background-image: linear-gradient(0deg, #fbff00 0%, #fbff00 1%, #c1ff00 100%); */
    /* -webkit-text-fill-color: transparent; */
    /* -webkit-background-clip: text; */
    font-weight: 900;
    font-size: 16px;
    transform: rotate(-45deg) !important;
    color: #CDFF01;
    display: inline-block;
}

/*wood animation*/
@keyframes wooo {
    0% {
      transform: rotate3d(0, 0, 0);
    }
    50% {
      transform: rotate3d(0, 1, 0, 180deg);
    }
    100% {
      transform: rotate3d(0, 1, 0, 359deg);
    }
  }
@keyframes circle {
    0% {
        transform: rotate(0);
    }
    100% {
        transform: rotate(-360deg);
    }
    }
    .circle {
        animation: circle 15s linear infinite;
    }
    .right {
        animation: right 15s linear infinite;
    }
    .spin2 {
        animation: spin2 15s linear infinite;
    }
    @keyframes right {
    0% {
        transform: rotate(0);
    }
    100% {
        transform: rotate(360deg);
    }
}



.chat-window {
    height: 262px!important;
    overflow-y: auto;
    margin-bottom: 10px;
    padding: 17px;
    border: 1px solid #6766FF!important;
    background: #231F3A;
    display: flex;
    flex-direction: column;
    border-radius: 10px;
}



/*================================================
                ai-marketing-agency 
=================================================*/

/*========================== ai-marketing-agency==section 01 ============================================*/

.js-particles {
    position: relative!important;
    top: 0;
    left: 0;
    width: 100%!important;
    height: 100%!important;
    z-index: 22;
}
canvas.particles-js-canvas-el {
    position: absolute;
    height: 100%;
    z-index: 22;
    top: 0;
    width: 100%;
    z-index: -1;
}
.js-particles {
    position: absolute;
    z-index: 2;
}

.js-particles-testimonial{
    position: relative;
    top: 0;
    left: 0;
    width: 100%!important;
    height: 100%!important;
    z-index: 1;
}
.js-particles-testimonial canvas.particles-js-canvas-el {
    position: absolute;
    height: 100%;
    z-index: 22;
    top: 0;
    width: 100%;
    z-index: -1;
}

.section-title.style5 .subtitle {
    font-size: 16px;
    font-weight: 600;
    display: inline-block;
    color: #fff;
    padding: 7px 23px;
    border-radius: 30px;
    margin: 0 0 22px;
    backdrop-filter: blur(20px);
}
.section-title.style5 .subtitle:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: 40px;
    border: 1.5px solid transparent;
    background: linear-gradient(91.06deg, #6766FF 6.82%, rgba(103, 102, 255, 0.2) 37.09%, rgba(103, 102, 255, 0.2) 67.36%, #6766FF 96.43%) border-box;
    -webkit-mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: destination-out;
    mask-composite: exclude;
}
.section-title.style5 .icon {
    display: inline-block;
}
.section-title.style5 .title {
    color: #fff;
    margin: 0px 0 0;
    font-size: 80px;
    line-height: 85px;
    font-weight: 700;
}
.section-title.style5 .description {
    font-size: 18px;
    padding: 15px 0 0px;
    line-height: 28px;
    color: rgb(255 255 255 / 70%);
    font-weight: 400;
    margin: 0;
}




/*style three*/
.dreamit-button.style3 .dreamit-button a {
    display: inline-block;
    color: #fff;
    background-color: rgba(255, 255, 255, 0.15);
    padding: 13px 36px;
    font-weight: 600;
    font-size: 20px;
    border-radius: 45px;
    position: relative;
    z-index: 1;
    transition: all 300ms ease;
    overflow: hidden;
    backdrop-filter: blur(20px);
    font-family: "Rajdhani", sans-serif;
}
.dreamit-button.style3 .dreamit-button a i{
    display: inline-block;
    margin-left: 10px;
    position: relative;
    top: 2px; 
}
.dreamit-button.style3 .dreamit-button a::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: 40px;
    border: 1.5px solid transparent;
    background: linear-gradient(91.06deg, #6766FF 6.82%, rgba(103, 102, 255, 0.2) 37.09%, rgba(103, 102, 255, 0.2) 67.36%, #6766FF 96.43%) border-box;
    -webkit-mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: destination-out;
    mask-composite: exclude;
}
.dreamit-button.style3 .dreamit-button a::after {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    bottom: 0;
    left: -15%;
    right: 0;
    width: 0;
    height: 106%;
    background: #6766FF;
    transform: skew(45deg);
    transition: all 0.4s ease-in-out;
    z-index: -1;
}
.dreamit-button.style3 .dreamit-button a:hover::after {
    width: 100%;
    transform: skew(0deg);
    left: 0;
}

/*style four*/
.dreamit-button.style4 .dreamit-button a {
    display: inline-block;
    color: #fff;
    background-color: #6766FF;
    padding: 13px 36px;
    font-weight: 600;
    font-size: 20px;
    border-radius: 45px;
    position: relative;
    z-index: 1;
    transition: all 300ms ease;
    overflow: hidden;
    backdrop-filter: blur(20px);
    font-family: "Rajdhani", sans-serif;
}
.dreamit-button.style4 .dreamit-button a i{
    display: inline-block;
    margin-left: 10px;
    position: relative;
    top: 2px; 
}
.dreamit-button.style4 .dreamit-button a::after {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    bottom: 0;
    left: -15%;
    right: 0;
    width: 0;
    height: 106%;
    background: #fff;
    transform: skew(45deg);
    transition: all 0.4s ease-in-out;
    z-index: -1;
}
.dreamit-button.style4 .dreamit-button a:hover::after {
    width: 100%;
    transform: skew(0deg);
    left: 0;
}
.dreamit-button.style4 .dreamit-button a:hover {
   color:#6766FF;
}



.dreamit-media.style2 {
    line-height: 0;
}
.about-border {
    position: relative;
    z-index: 1;
    border-radius: 40px;
    /* overflow: hidden; */
}
/* rotate border */
.about-border::after {
    content: "";
    position: absolute;
    inset: 0;
    padding: 2px;
    border-radius: 20px;
    background: conic-gradient(from var(--r), #6766FF 8.88%, rgba(103, 102, 255, 0.1) 67.66%);
    z-index: 2;
    animation: rotating 5s linear infinite;
    -webkit-mask: linear-gradient(#fff 0 0) content-box, 
        linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
}

@property --r {
    syntax: '<angle>';
    inherits: false;
    initial-value: 0deg;
}

@keyframes rotating {
    0% { --r: 0deg; }
    100% { --r: 360deg; }
}

.section-title.style6 h5 {
    color: #6766FF;
    font-weight: 600;
    font-size: 24px;
    margin: 0 0 14px;
}
.section-title.style6 h3 {
    color: #fff;
    font-weight: 700;
    font-size: 40px;
    line-height: 50px;
    margin: 0;
}
.section-title.style6 p {
    color: #fff;
    margin: 0;
}

.brand.style3 .brand-item {
    display: inline-block;
    padding: 0 0;
    animation: none;
}
.brand.style3 .brand-item img {
    width: 90%!important;
    transition: .5s;
    display: inline-block;
}


/*========================== ai-marketing-agency==section 02 ============================================*/




/*========================== ai-marketing-agency==section 03 ============================================*/


.feature-box.style3 {
    align-items: center;
    padding: 43px 44px 36px;
    transition: 0.5s;
    position: relative;
    z-index: 1;
    border-radius: 20px;
}
.feature-box.style3 .feature-box-icon {
    width: 50px;
    height: 50px;
    line-height: 63px;
    text-align: center;
    border-radius: 50%;
    flex-shrink: 0;
    transition: 0.5s;
    position: relative;
    z-index: 1;
    border: 1px solid #6766ff;
    background: linear-gradient(0deg, rgba(19, 13, 43, 0) 0%, rgba(61, 58, 149, 0.2) 50%, rgba(103, 102, 255, 0.5) 100%);
    display: inline-block;
}
.feature-box.style3 .feature-box-icon::before {
    position: absolute;
    z-index: -1;
    content: "";
    left: 0;
    top: 0;
    height: 100%;
    width: 100%;
    transform: scale(0);
    border-radius: 50%;
    background-color: #6766FF;
    transition: all 300ms ease;
}
.feature-box.style3 .feature-box-icon img{
    transition: .5s;
}
.feature-box.style3:hover .feature-box-icon{
    border-color: #fff;
}
.feature-box.style3:hover .feature-box-icon img{
    filter: brightness(0) invert(1);
}
.feature-box.style3:hover .feature-box-icon::before {
    transform: scale(1);
}
.feature-box.style3 .feature-box-title h2 {
    font-weight: 600;
    font-size: 24px;
    margin: 22px 0 8px;
    color: #fff;
}
.feature-box.style3 p.feature-box-desc {
    color: #fff;
    opacity: 0.6;
    margin: 0 0 0;
}


.feature-box.style3 .hover-bx {
    left: 0;
    -webkit-transition-delay: 0.105s;
    transition-delay: 0.105s;
    border-radius: 20px 0px 0px 20px;
}
.feature-box.style3 .hover-bx2 {
    left: 25%;
    -webkit-transition-delay: 0.105s;
    transition-delay: 0.105s;
}
.feature-box.style3 .hover-bx3 {
    left: 50%;
    -webkit-transition-delay: 0.105s;
    transition-delay: 0.105s;
}
.feature-box.style3 .hover-bx4 {
    left: 75%;
    -webkit-transition-delay: 0s;
    transition-delay: 0s;
    border-radius: 0px 20px 20px 0px;
}
.feature-box.style3 .ai-hover-box {
    background-color: var(--theme-color2);
    height: 100%;
    top: 0;
    opacity: 0;
    position: absolute;
    -webkit-transform: scaleX(0);
    transform: scaleX(0);
    -webkit-transition: all 0.5s ease 0s;
    transition: all 0.5s ease 0s;
    width: 25%;
    z-index: -1;
}
.feature-box.style3:hover .ai-hover-box {
    opacity: 1;
    -webkit-transform: scale(1);
    transform: scale(1);
}



.icon-box.style8 {
    display: flex;
    gap: 18px;
}
.icon-box.style8 .icon i{
    font-size: 10px;
    font-weight: 600;
}
.icon-box.style8 .img-icon {
    width: 60px;
    height: 60px;
    border-radius: 10px;
    text-align: center;
    line-height: 85px;
    background: #FFFFFF1A;
    border: 1px solid #FFFFFF1A;
    transition: .5s;
}
.icon-box.style8 .img-icon:hover {
    background: #6766FF;
}
.icon-box.style8 .img-icon:hover img  {
    filter: brightness(0) invert(1);
}
.icon-box.style8 .icon i {
    display: inline-block;
}
.icon-box.style8 .icon-box-content {
    display: inline-block;
}
.icon-box.style8 .icon-box-content h4 {
    margin: 0 0 12px;
    font-size: 22px;
    color: #ffffff;
    font-weight: 600;
}
.icon-box.style8 .description {
    color: #fff;
    opacity: 0.5;
    font-size: 18px;
    line-height: 26px;
    font-weight: 400;
}




/*========================== ai-marketing-agency = Integration-section 04 =======================================*/




/*========================== ai-marketing-agency = Goal-section 05 ============================================*/




/*========================== ai-marketing-agency = Benifit-section 06 ===========================================*/




/*========================== ai-marketing-agency = Testimonial-section 07 ========================================*/



/*teastimonial style 5*/

.testimonial-grid-5 {
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    grid-auto-rows: auto;
    gap: 20px;
}

.testimonial-grid-5 .first-item {
    grid-column: 1 / -1;
}

.testimonial-grid-5 .seceond-item {
    grid-column: 1 / -1;
}

.testimonial-grid-5 .first-item {
    grid-column: 1 / -1;
}

.testimonial-item.style5 {
    background: linear-gradient(0deg, #211B39 0%, #0B0523 100%);
    padding: 34px 30px 34px;
    border-radius: 20px;
}
.testimonial-item.style5 .author img {
    width: 65px !important;
}
.testimonial-item.style5 .testi-star i {
    display: inline;
    color: #FF9F31;
    font-size: 16px;
    margin-right: 3px;
}

.testimonial-item.style5 p.quote {
    font-family: Nunito;
    font-weight: 400;
    font-size: 24px;
    line-height: 34px;
    margin: 0;
    color: #ffffff8a;
}
.testimonial-item.style5 h4.name {
    font-family: Rajdhani;
    font-weight: 500;
    font-size: 24px;
    color: #fff;
    margin: 0;
}
.testimonial-item.style5 h5.designation {
    font-family: Nunito;
    font-weight: 400;
    font-size: 17px;
    color: rgba(255,255,255, 0.7);
    margin: 4px 0 0;
}
.testimonial-item.style5 .author_content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    margin-top: 32px;
}

/*owl dots*/
.testimonial.style5 .owl-dots {
    position: relative;
    top: 40px;
}
.testimonial.style5 .owl-dot.owl-dot {
    background: url('https://wp.dreamitworld.com/ai/wp-content/uploads/2026/01/testi-1.png');
    width: 147px;
    height: 147px;
    display: inline-block;
    margin: 0 14px 0;
    border-radius: 25px;
    position: absolute;
    right: -14px;
    top: -10px;
    z-index: 22!important;
    background-repeat: no-repeat;
    background-size: cover;
}
.testimonial.style5 .owl-dot.owl-dot:before{
    position:absolute;
    content:"";
    top:0;
    left:0;
    height:100%;
    width:100%;
    border-radius:25px;
   border: 1.5px solid transparent;
    background: linear-gradient(90.32deg, rgba(255, 255, 255, 0.1) 20.17%, rgba(255, 255, 255, 0.3) 50%, rgba(255, 255, 255, 0.3) 50%, rgba(255, 255, 255, 0.1) 79.83%);
    -webkit-mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: destination-out;
    mask-composite: exclude;

}
.testimonial.style5 button.owl-dot.active:before {
    position: absolute;
    content: "";
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    border-radius: 25px;
    background: #6766FF;
    z-index: 22;
}
.testimonial.style5 .owl-dot.owl-dot:nth-child(2) {
    background: url('https://wp.dreamitworld.com/ai/wp-content/uploads/2026/01/testi-2.png');
    right: inherit;
    top: -10px!important;
    position: absolute;
    z-index: 22!important;
    background-repeat: no-repeat;
    background-size: cover;
    left: -11px;
}
.testimonial.style5 .owl-dot.owl-dot:nth-child(3) {
    background: url('https://wp.dreamitworld.com/ai/wp-content/uploads/2026/01/testi-3.png');
    right: inherit;
    position: absolute;
    top: -10px;
    z-index: 22!important;
    background-repeat: no-repeat;
    background-size: cover;
    left: 152px;
}
.testimonial.style5 .owl-dot.owl-dot:nth-child(4) {
    background: url('https://wp.ditsolution.net/intellio/wp-content/uploads/2025/12/img3.png');
    right: 149px;
    position: absolute;
    top: -10px;
    z-index: 22!important;
    background-repeat: no-repeat;
    background-size: cover;
}

/*========================== ai-marketing-agency = Pricing-section 08 ============================================*/

.pricing.style2 {
    padding: 36px 30px 34px;
    position: relative;
    z-index: 1;
    overflow: hidden;
    transition: 0.5s;
    border-radius: 30px;
}
.pricing.style2:before {
    content: "";
    position: absolute;
    width: 100%;
    height: 36%;
    top: 0;
    left: 0;
    border-radius: 30px;
    visibility: hidden;
    opacity: 0;
    transition: 0.9s;
    transform: perspective(500px) rotateX(90deg);
    z-index: -1;
    background: #0d6efd;
}
.pricing.style2:hover:before {
  visibility: visible;
  opacity: 0.9;
  transform: perspective(500px) rotateX(0deg);
}
.pricing.style2::after {
    content: "";
    position: absolute;
    inset: 0;
    padding: 1px;
    border-radius: 30px;
    background: linear-gradient(
        90.32deg,
        rgba(255, 255, 255, 0.1) 20.17%,
        rgba(255, 255, 255, 0.3) 50%,
        rgba(255, 255, 255, 0.3) 50%,
        rgba(255, 255, 255, 0.1) 79.83%
    );
    -webkit-mask: 
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
}
.pricing.style2:hover::after {
    background: linear-gradient(90.32deg, rgba(103, 102, 255, 0.3) 20.17%, #6766FF 50%, #6766FF 50%, rgba(103, 102, 255, 0.3) 79.83%);
}
.pricing.style2 .pricing-head {
    border-bottom: 1px solid #FFFFFF26;
    padding: 0 0 40px;
    transition: 0.5s;
}
.pricing.style2:hover .pricing-head {
    border-bottom: 1px solid transparent;
}
.pricing.style2 .price_top_content {
    display: flex;
    align-items: center;
    gap: 20px;
    justify-content: center;
    padding: 0 0 25px;
    border-bottom: 1px solid #FFFFFF26;
    margin: 0 0 42px;
}
.pricing.style2:hover .pricing_img {
    filter: brightness(0) invert(1);
}
.pricing.style2 h3.pricing-title {
    margin: 0;
    font-size: 36px;
    color: #fff;
    transition: 0.5s;
    font-weight: 600;
}
.pricing.style2 .price-item {
    display: flex;
    align-items: center;
    gap: 10px;
}
.pricing.style2 .price-item span {
    font-size: 48px;
    color: #fff;
    font-weight: 600;
    transition: 0.5s;
    font-family: 'Rajdhani';
    display: block;
}
.pricing.style2:hover h3.pricing-title,
.pricing.style2:hover .price-item span,
.pricing.style2:hover span.month{
    color:#fff;
}
.pricing.style2 span.month {
    font-size: 16px;
    color: #fff;
    font-weight: 400;
    font-family: "Nunito";
    transition: 0.5s;
    margin: 20px 0 0;
    opacity: 0.6;
}
.pricing.style2 p.pricing-p {
    color: #fff;
    font-family: "Rajdhani";
    font-size: 22px;
    font-weight: 500;
    margin: 25px 0 28px;
}
.pricing.style2 .pricing-body ul{
    margin: 0;
    padding: 0;
    list-style: none;
}
.pricing.style2 .pricing-body ul li {
    margin-bottom: 10px;
    transition: .5s;
    font-size: 18px;
    color: #fff;
    font-weight: 400;
    font-family: "Nunito";
    display: flex;
    align-items: center;
    gap: 10px;
}
.pricing.style2 .pricing-body ul li img {
    filter: brightness(0) invert(1);
    transition: .5s;
}
.pricing.style2:hover .pricing-body ul li img {
    filter: brightness(1) invert(0);
}
.pricing.style2 .pricing-body ul li span {
    color: #fff;
}
.pricing.style2 .pricing-body ul li i {
    display: inline-block;
    color: #52614e;
    font-size: 16px;
    margin-right: 6px;
}
.pricing.style2 .pricing-button {
    display: inline-block;
    padding: 12px 58px;
    font-family: "Rajdhani";
    border: 1px solid transparent;
    font-size: 20px;
    color: #ffffff;
    font-weight: 600;
    background-color: #1F1936;
    text-transform: capitalize;
    margin-top: 30px;
    text-align: center;
    border-radius: 30px;
    position: relative;
    transition: .5s;
    z-index: 1;
}
.pricing.style2 .pricing-button:hover{
    color:#fff;
}
.pricing.style2 .pricing-button:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: 40px;
    border: 1.5px solid transparent;
    background: linear-gradient(91.06deg, #6766FF 6.82%, rgba(103, 102, 255, 0.2) 37.09%, rgba(103, 102, 255, 0.2) 67.36%, #6766FF 96.43%) border-box;
    -webkit-mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: destination-out;
    mask-composite: exclude;
}
.pricing.style2 .pricing-button:after {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    border-radius: 30px;
    visibility: hidden;
    opacity: 0;
    -webkit-transition: 0.9s;
    transition: 0.9s;
    transform: perspective(500px) rotateX(90deg);
    z-index: -1;
    background: #0d6efd;
}
.pricing.style2:hover .pricing-button:after {
  visibility: visible;
  opacity: 0.9;
  transform: perspective(500px) rotateX(0deg);
}
.pricing.style2 h3.pricing-name {
    padding: 5px 17px;
    font-family: "Rajdhani";
    border: 1px solid #636073;
    margin: 0;
    position: relative;
    z-index: 1;
    font-size: 14px;
    color: #ffffff;
    font-weight: 600;
    background-color: #1F1936;
    display: inline-block;
    border-radius: 30px;
    position: absolute;
    right: 16px;
    top: 18px;
    text-transform: uppercase;
    opacity: 0.7;
}



/*========================== ai-marketing-agency = Faq-section 09 ============================================*/


.faq-imag {
      -webkit-animation: danc 2s alternate infinite;
}
@keyframes danc {
  0% {
    -webkit-transform: scale(0.5);
  }
  100% {
    -webkit-transform: scale(1.2);
  }
}


/*========================== ai-marketing-agency = Footer-section 10 ============================================*/


.icon-box.style10 {
    display: flex;
    align-items: center;
    gap: 20px;
    justify-content: center;
}
.icon-box-content p {
    color: rgba(255,255,255,0.70);
    font-size: 20px;
    font-weight: 600;
}


.subscribe .mc4wp-form-fields {
    text-align: center;
}
.subscribe .mc4wp-form-fields input[type="email"] {
    width: 52%;
    height: 50px;
    border-radius: 50px;
    border: 1px solid rgba(103,102, 255, 0.5);
    padding: 0 0 0 35px;
    color: #fff;
    background: linear-gradient(176.42deg, rgba(255, 255, 255, 0.1) 2.94%, rgba(255, 255, 255, 0) 97.43%);
    outline: 0;
    margin: 0 auto 0;
}
.subscribe .mc4wp-form-fields button {
    color: var(--theme-color8);
    font-family: var(--title-font);
    background: var(--theme-color2);
    font-weight: 600;
    font-size: 17px;
    border-radius: 50px;
    position: relative;
    z-index: 1;
    display: inline-block;
    border: none;
    height: 50px;
    width: 50px;
    line-height: 50px;
    text-align: center;
    right: 0;
    top: 0;
    transform: translate(0%, 0%);
}
.subscribe .mc4wp-form-fields button i {
    display: inline-block;
    margin-left: 0;
    transform: rotate(0deg);
}


.heading.style7 h4 {
    color: #fff;
    font-size: 22px;
    font-weight: 600;
}
.social-links.style4 ul li {
    list-style: none;
    display: inline-block;
    margin-right: 8px;
}
.social-links.style4 ul li a {
    display: inline-block;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0) 100%);
    height: 40px;
    width: 40px;
    line-height: 40px;
    text-align: center;
    color: #fff;
    border-radius: 50%;
    position: relative;
    z-index: 1;
    transition: .5s;
}
.social-links.style4 ul li a:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: 40px;
    border: 1.5px solid transparent;
    background: linear-gradient(91.06deg, #6766FF 6.82%, rgba(103, 102, 255, 0.2) 37.09%, rgba(103, 102, 255, 0.2) 67.36%, #6766FF 96.43%) border-box;
    -webkit-mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: destination-out;
    mask-composite: exclude;
}
.social-links.style4 ul li a:after {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    background: #6766FF;
    border-radius: 50%;
    transition: all 0.4s ease-in-out;
    z-index: -1;
    transform: scale(0);
}
.social-links.style4 ul li a:hover:after {
    transform: scale(1);
}




/*================================================
                ai-online-course
=================================================*/

/*========================== ai-online-course==section 01 ============================================*/

.online-course .icon-box.style10 {
    justify-content: right;
}



/*========================== ai-online-course==section 02 ============================================*/
.single-video.style-three .video-icon {
    left: 50%;
    position: absolute;
    top: 50%;
    -webkit-transform: translateX(-50%) translateY(-50%);
    -ms-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%);
}
.single-video.style-three .video-icon a {
    display: inline-block;
    position: relative;
    z-index: 1;
    transition: .5s;
}

.single-video.style-three .video-icon a::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    height: 99px;
    width: 99px;
    background: rgba(12, 90, 219,1);
    z-index: -1;
    border-radius: 50%;
    -webkit-transform: translate(-50%,-50%);
    -ms-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);
    -webkit-animation: pulse-border 1500ms ease-out infinite;
    animation: pulse-border 1500ms ease-out infinite;
}
@keyframes pulse-border {
  0% {
    -webkit-transform: translateX(-50%) translateY(-50%) translateZ(0) scale(1);
            transform: translateX(-50%) translateY(-50%) translateZ(0) scale(1);
	opacity: 1;
	}
  100% {
    -webkit-transform: translateX(-50%) translateY(-50%) translateZ(0) scale(1.5);
            transform: translateX(-50%) translateY(-50%) translateZ(0) scale(1.5);
	opacity: 0;
	}
}
.single-video.style-three .video-icon a i {
    display: inline-block;
    background: #6766FF;
    height: 90px;
    width: 90px;
    line-height: 90px;
    top: 50%;
    left: 0;
    right: 0;
    margin: auto;
    text-align: center;
    border-radius: 50%;
    color: #fff;
    font-size: 26px;
    position: relative;
}




/*========================== ai-online-course==section 03 ============================================*/

.section-title.style9 .subtitle {
    font-size: 16px;
    font-weight: 600;
    display: inline-block;
    color: #fff;
    padding: 10px 30px;
    border-radius: 30px;
    margin: 0 0 22px;
    backdrop-filter: blur(20px);
}
.section-title.style9 .subtitle:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: 40px;
    border: 1.5px solid transparent;
    background: linear-gradient(91.06deg, #6766FF 6.82%, rgba(103, 102, 255, 0.2) 37.09%, rgba(103, 102, 255, 0.2) 67.36%, #6766FF 96.43%) border-box;
    -webkit-mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: destination-out;
    mask-composite: exclude;
}
.section-title.style9 .icon {
    display: inline-block;
}
.section-title.style9 .title {
    color: #fff;
    margin: 0px 0 0;
    font-size: 50px;
    line-height: 56px;
    font-weight: 700;
}
.section-title.style9 .description {
    font-size: 18px;
    padding: 15px 0 0px;
    line-height: 28px;
    color: rgb(255 255 255 / 70%);
    font-weight: 400;
    margin: 0;
}


.work_progress.style-two {
    text-align: center;
    padding: 40px 20px 10px;
    position: relative;
    z-index: 1;
    transition: .5s;
    background: linear-gradient(138.31deg, rgba(255, 255, 255, 0.03) 14.02%, rgba(255, 255, 255, 0.1) 46.84%, rgba(255, 255, 255, 0.1) 46.84%, rgba(255, 255, 255, 0.03) 79.66%);
    border-radius: 10px;
}
.work_progress.style-two:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: 10px;
    border: 1.5px solid transparent;
    background: linear-gradient(90.32deg, rgba(255, 255, 255, 0.1) 20.17%, rgba(255, 255, 255, 0.3) 50%, rgba(255, 255, 255, 0.3) 50%, rgba(255, 255, 255, 0.1) 79.83%);
    -webkit-mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: destination-out;
    mask-composite: exclude;
}
.work_progress.style-two .icon {
    background: linear-gradient(180deg, #0B0523 0%, #26203E 100%);
    width: 90px;
    height: 90px;
    line-height: 120px;
    text-align: center;
    border-radius: 24px;
    position: absolute;
    border: 1px solid rgba(103, 102, 255, 0.3);
    margin: 0 auto 0;
    top: -45px;
    left: 0;
    right: 0;
}

.work_progress.style-two .icon i {
    sition: relative;
    width: 145px;
    height: 145px;
    line-height: 143px;
    border-radius: 150px;
    display: inline-block;
    color: #0c5adb;
    font-size: 65px;
    border: 2px solid #ededed;
        -webkit-transition: all 500ms ease;
    -moz-transition: all 500ms ease;
    -ms-transition: all 500ms ease;
    -o-transition: all 500ms ease;
    transition: all 500ms ease;
    text-align:center;
}
.work_progress.style-two:hover .icon i {
    color:#fff;
    transform: rotateY(180deg);
    border-color: #0c5adb;
    background-color: #0c5adb;
}

.work_progress.style-two .content h3 {
    font-weight: 700;
    font-size: 30px;
    line-height: 40px;
    margin: 28px 0 8px;
    color: #fff;
    font-family: "Rajdhani", sans-serif;
}
.process-shap_one {
    position: relative;
    text-align: center;
}
.work_progress.style-two p.description {
    color: rgba(255, 255, 255, 0.7);
    font-weight: 400;
    font-size: 16px;
    line-height: 26px;
    margin: 0 auto 20px;
}

.work_progress.style-two .work_progress-number span {
    transition: .5s;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.25) 0%, rgba(255, 255, 255, 0.1) 100%);
    display: inline-block;
    font-family: "Rajdhani", sans-serif;
    font-weight: 600;
    font-size: 46px;
    line-height: 50px;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    color: transparent;
}


/*========================== ai-online-course==section 04 ============================================*/




/*========================== ai-online-course==section 05 ============================================*/




/*========================== ai-online-course==section 06 ============================================*/

.service-box.style7 {
    background: linear-gradient(180deg, #0B0523 0%, #211B39 100%);
    padding: 20px 20px 25px;
    border-radius: 20px;
    text-align: center;
    position: relative;
    z-index: 1;
}
.service-box.style7:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: 20px;
    border: 1.5px solid transparent;
    background: linear-gradient(360deg, rgba(255, 255, 255, 0.15) 0%, rgba(103, 102, 255, 0.35) 100%);
    -webkit-mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: destination-out;
    mask-composite: exclude;
}
.service-box.style7 .content {
    position: relative;
}
.service-box.style7 .service-btn {
    position: absolute;
    left: 0;
    right: 0;
    top: -62px;
}
.service-box.style7 .service-btn a {
    display: inline-block;
    background: linear-gradient(180deg, #0B0523 0%, #26203E 100%);
    width: 46px;
    height: 46px;
    line-height: 46px;
    border-radius: 50%;
    transition: .5s;
    position: relative;
    z-index: 1;
    transform: rotate(-45deg);
}
.service-box.style7 .service-btn a:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: 50%;
    border: 1.5px solid transparent;
    background: linear-gradient(360deg, rgba(255, 255, 255, 0.15) 0%, rgba(103, 102, 255, 0.35) 100%);
    -webkit-mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: destination-out;
    mask-composite: exclude;
}
.service-box.style7 .service-btn a:after {
    position: absolute;
    content: "";
    z-index: -1;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    border-radius: 50%;
    background: #6766FF;
    transform: scale(0);
    transition: .5s;
}
.service-box.style7:hover .service-btn a:after {
    transform: scale(1);
}
.service-box.style7:hover .service-btn a {
    color:#fff;
}
.service-box.style7 .service-title h3 {
    color: #fff;
    font-size: 30px;
    font-weight: 600;
    margin: 32px 0 0;
}
.service-box.style7 .content p {
    color: rgba(255,255,255,0.7);
    font-size: 16px;
    line-height: 22px;
    margin: 12px 0 0;
}

/*========================== ai-online-course==section 07 ============================================*/

/* Accordion CSS */
.my-accordion3 li {
    position: relative;
    margin-bottom: 0;
    list-style: none;
    z-index: 1;
}
.my-accordion3 li p {
    display: none;
    padding: 0;
    color: rgba(255,255,255,0.80);
    font-size: 16px;
}
.my-accordion3 span.box-number {
    padding: 0 15px 0 0px;
    position: relative;
    z-index: 1;
    font-size: 20px;
    color: #ffffff;
    font-weight: 600;
    font-family: "Open Sans";
}

ul.my-accordion3.style3 a {
    position: relative;
    width: 100%;
    display: block;
    cursor: pointer;
    border: 0;
    border-top: 1px solid rgb(217 217 217 / 20%);
    border-bottom: 1px solid rgb(217 217 217 / 20%);
    padding: 20px 0 20px;
    border-radius: 0;
    z-index: 1;
    font-size: 20px;
    color: #ffffff;
    font-weight: 600;
    background: transparent;
}
ul.my-accordion3.style3 a:hover {
    color: #6766FF;
}
.my-accordion3 li a.active {
    border-bottom: 1px solid rgb(217 217 217 / 20%);
    color: #fff;
    border: none;
    border-radius: 0;
    background: #1C1633;
    border-top: 1px solid rgb(217 217 217 / 20%);
}
.my-accordion3 a:after {
    width: 14px;
    height: 2px;
    background: #fff;
    position: absolute;
    right: 26px;
    content: " ";
    top: 34px;
    transition: all 0.2s ease-in-out;
}
.my-accordion3 a:before {
    width: 2px;
    height: 14px;
    background: #fff;
    position: absolute;
    right: 32px;
    content: " ";
    top: 28px;
    transform: rotate(0);
    transition: all 0.2s ease-in-out;
}
.my-accordion li p {
    display: none;
    font-size: 16px;
    padding: 23px;
    padding: 0 77px 32px 32px;
    margin: 0;
    background: #1C1633;
    overflow: hidden;
    font-size: 17px;
    color: #ffffffa1;
    font-weight: 500;
    border-radius: 0 0 20px 20px;
    border-bottom: 1px solid#6766FF;
}

a.active:after {
    transform: rotate(0deg);
    -webkit-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
    background: #fff;
}
a.active:before {
 display: none;
}

/*========================== ai-online-course==section 08 ============================================*/
/*pricing style three*/

.pricing.style-three {
    border-radius: 30px;
    display: flex;
    padding: 31px 32px 19px;
    gap: 80px;
    transition: .5s;
    border: 1px solid #3A354E;
}
.pricing.style-three:hover{
    border-color:#6766FF;
}
.pricing.style-three h5.title {
    font-size: 24px;
    color: #fff;
    font-weight: 500;
    margin: 0 0 23px;
}
.pricing.style-three .price-item span {
    font-family: Rajdhani;
    font-weight: 600;
    font-size: 48px;
    color: #fff;
}
.pricing.style-three p.description {
    color: #fff;
    margin: 8px 0 34px;
    opacity: 0.6;
}
.pricing.style-three a.pricing-button {
    list-style: none;
    color: #fff;
    display: inline-block;
    font-family: "Rajdhani", sans-serif;
    font-weight: 600;
    font-size: 20px;
    background: linear-gradient(360deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0) 80%);
    border-radius: 24px;
    padding: 12px 53px;
    position: relative;
    z-index: 1;
    overflow: hidden;
    margin-right: 7px;
    cursor: pointer;
}
.pricing.style-three a.pricing-button::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: 24px;
    border: 1.5px solid transparent;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.4) 11.41%, rgba(103, 102, 255, 0.2) 21.67%, rgba(103, 102, 255, 0.2) 79.49%, rgba(255, 255, 255, 0.4) 87.5%);
    -webkit-mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: destination-out;
    mask-composite: exclude;
}
.pricing.style-three a.pricing-button i{
    margin-left:6px;
}
.pricing.style-three a.pricing-button::after {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    bottom: 0;
    left: -15%;
    right: 0;
    width: 0;
    height: 106%;
    background: #6766FF;
    transform: skew(45deg);
    transition: all 0.4s ease-in-out;
    z-index: -1;
}
.pricing.style-three:hover a.pricing-button::after {
    width: 100%;
    transform: skew(0deg);
    left: 0;
}
.pricing.style-three:hover  a.pricing-button {
    color: #fff;
}

.pricing.style-three h3.pricing-title {
    color: #fff;
    font-size: 22px;
    margin: 0 0 22px;
    font-size: 500;
}
.pricing.style-three ul.features li {
    list-style: none;
    color: #ABA9BA;
    margin-bottom: 4px;
}
.pricing.style-three ul.features li img{
  position:relative;
  top:6px;
  margin-right:6px;
}


.pricing-wrapper {
    position: relative;
    padding-top: 120px;
}

/* Common Card Style */
.pricing-wrapper {
    position: relative;
    padding-top: 120px;
}

/* Default (Active / Normal state) */
.pricing-card {
    position: relative;
    border-radius: 22px;
    margin-bottom: 40px;
    transition: all 0.4s ease;
}

/* Scroll শুরু হলে sticky হবে */
@media (min-width: 768px) {
    .pricing-card {
        position: sticky;
        top: 120px;
    }
}

/* Stack order */
.card-1 { z-index: 1; }
.card-2 {
    z-index: 2;
    margin-top: -80px;
}
.card-3 {
    z-index: 3;
    margin-top: -80px;
}


/*========================== ai-online-course==section 09 ============================================*/

/*teastimonial style 6*/


.testimonial-item.style6 .testi_content {
    background: linear-gradient(0deg, #211B39 0%, #0B0523 100%);
    padding: 30px 32px 30px;
    border-radius: 20px;
    display: inline-block;
}
.testimonial-item.style6 .reviews_rating {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.testimonial-item.style6 .testi-star i {
    display: inline;
    color: #FF9F31;
    font-size: 16px;
    margin-right: 3px;
}

.testimonial-item.style6 p.quote {
    font-family: Nunito;
    font-weight: 400;
    font-size: 20px;
    line-height: 28px;
    margin: 15px 0 0;
    color: rgba(255,255,255, 0.70);
}
.testimonial-item.style6 h4.name {
    font-family: Rajdhani;
    font-weight: 600;
    font-size: 22px;
    color: #fff;
    margin: 0;
}
.testimonial-item.style6 h5.designation {
    font-family: Nunito;
    font-weight: 400;
    font-size: 15px;
    color: #ffff;
    margin: 4px 0 0;
}
.testimonial-item.style6 .author_content {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-top: 32px;
}




/*========================== ai-online-course==section 10 ============================================*/




/*========================== ai-online-course==section 11 ============================================*/

.blog-post.style5 .post-item {
    position: relative;
    z-index: 1;
    transition: .5s;
}
.blog-post.style5 .post-thumb {
    position: relative;
    overflow: hidden;
    line-height: 0;
}
.blog-post.style5 .post-thumb img {
    overflow: hidden;
    transition: .5s;
    width: 100%;
    border-radius: 20px;
}

.blog-post.style5 .user_thumb {
    display: inline-block;
}
.blog-post.style5 .single_blog_post_content {
    padding: 33px 14px 0px;
    position: relative;
}
.blog-post.style5 .categories {
    display: inline-block;
}
.blog-post.style5 .user_author {
    display: inline-block;
    margin-right: 11px;
}
.blog-post.style5 .categories a {
    position: relative;
    z-index: 1;
    display: inline-block;
    font-weight: 500;
    font-size: 14px;
    background: linear-gradient(360deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0) 80%);
    color: #fff;
    padding: 3px 22px 2px;
    border-radius: 20px;
    text-transform: uppercase;
    margin-right: 10px;
}
.blog-post.style5 .categories a:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: 40px;
    border: 1.5px solid transparent;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.2) 11.41%, rgba(255, 255, 255, 0.05) 21.67%, rgba(255, 255, 255, 0.05) 79.49%, rgba(255, 255, 255, 0.2) 87.5%);
    -webkit-mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: destination-out;
    mask-composite: exclude;
}
.blog-post.style5 .post-item .blog_post_inner_content {
    padding: 25px 20px 33px;
}
.blog-post.style5 .post-item .content .meta {
    display: flex;
    align-items: center;
    margin-bottom: 12px;
    color: #52614e;
}
.blog-post.style5 .meta i {
    color: #52614e;
    display: inline-block;
    margin-right: 3px;
}
.blog-post.style5 ul.post-categories {
    list-style: none;
}
.blog-post.style5 h3.title a {
    display: inline-block;
    font-size: 22px;
    line-height: 30px;
    color: #ffffff;
    font-weight: 500;
    margin-top: 5px;
}
.blog-post.style5 h3.title a:hover{
    color:#52614e ;
}
.blog-post.style5 .single_blog_post_content h3 {
    margin: 0 0 0;
}
.blog-post.style5 .single_blog_post_content h3 a {
    display: inline-block;
    font-weight: 600;
    font-size: 29px;
    line-height: 36px;
    border-bottom: 1px solid rgba(12, 35, 24, 0.1);
    margin: 24px 0 10px;
    transition: 0.5s;
    color: #fff;
}
.blog-post.style5 .single_blog_post_content h3 a:hover {
    color: #6766FF;
}
.blog-post.style5 .Comment {
    color: #fff;
    font-size: 20px;
    font-family: "Rajdhani";
    font-weight: 600;
}
.blog-post.style5 .meta {
    display: inline-block;
    font-family: 'Rajdhani';
    font-weight: 500;
    text-transform: uppercase;
}
.blog-post.style5 .date {
    color: #fff;
    margin: 0;
    font-weight: 400;
    font-size: 16px;
    text-transform: capitalize;
}
.blog-post.style5 .date span {
    display: inline-block;
    font-size: 20px;
    text-transform: uppercase;
    color: #ffffff;
    font-weight: 600;
    text-align: center;
    position: relative;
    top: 8px;
}
.blog-post.style5 .user_thumb {
    display: inline-block;
    height: 30px;
    width: 30px;
    margin-right: 9px;
    float: left;
}
.blog-post.style5 .user_thumb img{
    border-radius: 100%;
}
.blog-post.style5 .blog_post_user {
    padding: 23px 0px 0;
    border-top: 1px solid #ffffff4a;
    margin-top: 20px;
}
.blog-post.style5 .author {
    display: inline-block;
}
.blog-post.style5 .author a {
    display: inline-block;
    color: #fff;
    font-size: 16px;
    margin: 0;
    font-weight: 500;
    text-transform: capitalize; 
}
.blog-post.style5 .bottom_content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 15px;
}
.blog-post.style5 .blog_btn a {
    display: inline-block;
    height: 46px;
    width: 46px;
    line-height: 46px;
    border: 1px solid#3A3575;
    text-align: center;
    border-radius: 100%;
    transition: .5s;
    color: #fff;
    transform: rotate(-45deg);
}
.blog-post.style5 .post-item.style1:hover .blog_btn a{
    background:#6766FF ;
    border-color: #6766FF;
}

.blog-post.style5 .blog_btn a i {
    font-size: 13px;
    display: inline-block;
    font-weight: 600;
    margin-left: 1px;
}
.blog-post.style5 p.description {
    color: rgba(255,255,255, 0.70);
    font-size: 16px;
    line-height: 22px;
    margin: 0;
}


/*========================== ai-online-course==section 12 ============================================*/





/*==========================Home: ai saas for developer tools ============================================*/


/*==========================Home:ai saas for developer tools:section 01 ============================================*/
.section-title.style11 .subtitle {
    font-size: 16px;
    font-weight: 600;
    color: #fff;
    padding: 8px 30px;
    border-radius: 30px;
    margin: 0 0 22px;
    backdrop-filter: blur(20px);
    display: inline-block;
    position: relative;
    z-index: 1;
    transition: .5s;
}
.section-title.style11 .subtitle .icon {
    position: relative;
    top: 4px;
    margin-right: 7px;
}
.section-title.style11 .subtitle:after {
    content: "";
    position: absolute;
    inset: 0;
    padding: 1px;
    border-radius: 20px;
    background: conic-gradient(from var(--r), #6766FF 8.88%, rgba(103, 102, 255, 0.1) 67.66%);
    z-index: 2;
    animation: rotating 5s linear infinite;
    -webkit-mask: linear-gradient(#fff 0 0) content-box, 
        linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    opacity:1;
}
.section-title.style11 .title {
    color: #fff;
    margin: 0px 0 0;
    font-size: 50px;
    line-height: 56px;
    font-weight: 700;
}
.section-title.style11 .description {
    font-size: 20px;
    padding: 15px 0 0px;
    line-height: 30px;
    color: rgb(255 255 255 / 70%);
    font-weight: 400;
    margin: 0;
}
/*==========================Home:ai saas for developer tools:section 02 ============================================*/

.service-box.style10 {
    background: linear-gradient(0deg, #0B0523 0%, #211B39 100%);
    border-radius: 20px;
    padding: 40px 30px 25px;
    position: relative;
    z-index: 1;
    transition: .5s;
}
.service-box.style10:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: 20px;
    border: 1.5px solid transparent;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.06) 0%, rgba(255, 255, 255, 0) 100%);
    -webkit-mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: destination-out;
    mask-composite: exclude;
}
.service-box.style10:after {
    content: "";
    position: absolute;
    inset: 0;
    padding: 2px;
    border-radius: 20px;
    background: conic-gradient(from var(--r), #6766FF 8.88%, rgba(103, 102, 255, 0.1) 67.66%);
    z-index: 2;
    animation: rotating 5s linear infinite;
    -webkit-mask: linear-gradient(#fff 0 0) content-box, 
        linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    opacity:0;
}
.service-box.style10:hover:after {
    opacity:1;
}
.service-box.style10 .content h3 {
    font-size: 26px;
    color: #fff;
    font-weight: 600;
    margin: 0 0 0;
    transition: .5s;
}
.service-box.style10:hover .content h3 {
    color: #6766FF;
}
.service-box.style10 .content p {
    font-size: 17px;
    color: rgba(255,255,255, 0.70);
    line-height: 26px;
    margin: 10px 0 45px;
}


/*==========================Home:ai saas for developer tools:section 03 ============================================*/

.service-box.style11 {
    background: linear-gradient(138.31deg, rgba(255, 255, 255, 0.03) 14.02%, rgba(255, 255, 255, 0.1) 46.84%, rgba(255, 255, 255, 0.1) 46.84%, rgba(255, 255, 255, 0.03) 79.66%);
    padding: 40px 40px;
    border-radius: 20px;
    position: relative;
    z-index: 1;
    transition: .5s;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.service-box.style11:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: 20px;
    border: 1.5px solid transparent;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.06) 0%, rgba(255, 255, 255, 0) 100%);
    -webkit-mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: destination-out;
    mask-composite: exclude;
}
.service-box.style11:after {
    content: "";
    position: absolute;
    inset: 0;
    padding: 2px;
    border-radius: 20px;
    background: conic-gradient(from var(--r), #6766FF 8.88%, rgba(103, 102, 255, 0.1) 67.66%);
    z-index: 2;
    animation: rotating 5s linear infinite;
    -webkit-mask: linear-gradient(#fff 0 0) content-box, 
        linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    opacity: 0;
}
.service-box.style11:hover:after {
    opacity: 1;
}
.service-box.style11 .content h3 {
    color: #fff;
    font-weight: 600;
    font-size: 36px;
    margin: 0 0 0;
}
.service-box.style11 .content p {
    color: rgba(255,255,255,0.70);
    font-weight: 400;
    font-size: 18px;
    line-height: 28px;
    margin: 15px 0 0;
}
.service-box.style11 .content ul.features {
    margin: 40px 0 90px;
}
.service-box.style11 .content ul.features li {
    list-style: none;
    color: #fff;
    font-weight: 400;
    font-size: 18px;
    line-height: 26px;
}
.service-box.style11 .service-btn a {
    display: inline-block;
    color: #fff;
    background-color: #FFFFFF1A;
    padding: 13px 36px;
    font-weight: 600;
    font-size: 20px;
    border-radius: 36px;
    position: relative;
    z-index: 1;
    transition: all 300ms ease;
    overflow: hidden;
    backdrop-filter: blur(20px);
    font-family: "Rajdhani", sans-serif;
}
.service-box.style11 .service-btn a:before {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    bottom: 0;
    left: -15%;
    right: 0;
    width: 0;
    height: 106%;
    background: #6766FF;
    transform: skew(45deg);
    border-radius: 36px;
    transition: all 0.4s ease-in-out;
    z-index: -1;
}
.service-box.style11:hover .service-btn a:before {
    width: 100%;
    transform: skew(0deg);
    left: 0;
}
.service-box.style11 .service-btn a:after {
    content: "";
    position: absolute;
    inset: 0;
    padding: 1px;
    border-radius: 36px;
    background: conic-gradient(from var(--r), #6766FF 8.88%, rgba(103, 102, 255, 0.1) 67.66%);
    z-index: 2;
    animation: rotating 5s linear infinite;
    -webkit-mask: linear-gradient(#fff 0 0) content-box, 
        linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    opacity: 1;
}
.service-box.style11 .icon {
    position: absolute;
    left: 30%;
    bottom: 55px;
    animation-name: float-bob2;
    animation-duration: 5s;
    animation-iteration-count: infinite;
}

.service-box.style12 .icon {
    position: absolute;
    left: inherit;
    right: 50px;
    bottom: 30px;
}
/*==========================Home:ai saas for developer tools:section 04 ============================================*/

.service-box.style13 {
    background: linear-gradient(138.31deg, rgba(255, 255, 255, 0.03) 14.02%, rgba(255, 255, 255, 0.1) 46.84%, rgba(255, 255, 255, 0.1) 46.84%, rgba(255, 255, 255, 0.03) 79.66%);
    padding: 42px 30px 40px;
    border-radius: 10px;
    position: relative;
    z-index: 1;
    transition: .5s;
    display: flex;
    gap: 30px;
}
.service-box.style13:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: 10px;
    border: 1.5px solid transparent;
    -webkit-mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: destination-out;
    mask-composite: exclude;
    background: linear-gradient(90.32deg, rgba(255, 255, 255, 0.1) 20.17%, rgba(255, 255, 255, 0.3) 50%, rgba(255, 255, 255, 0.3) 50%, rgba(255, 255, 255, 0.1) 79.83%);
}
.service-box.style13:after {
    content: "";
    position: absolute;
    inset: 0;
    padding: 2px;
    border-radius: 10px;
    background: conic-gradient(from var(--r), #6766FF 8.88%, rgba(103, 102, 255, 0.1) 67.66%);
    z-index: 2;
    animation: rotating 5s linear infinite;
    -webkit-mask: linear-gradient(#fff 0 0) content-box, 
        linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    opacity: 0;
}
.service-box.style13:hover:after {
    opacity: 1;
}
.service-box.style13 .icon {
    flex-shrink: 0;
    background: #FFFFFF1A;
    width: 60px;
    height: 60px;
    line-height: 89px;
    border-radius: 10px;
    text-align: center;
    position: relative;
    z-index: 1;
    transition: .5s;
}
.service-box.style13:hover .icon {
    background: #6766FF;
}
.service-box.style13 .icon:after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: 10px;
    border: 1.5px solid transparent;
    -webkit-mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: destination-out;
    mask-composite: exclude;
    background: linear-gradient(90.32deg, rgba(103, 102, 255, 0.2) 20.17%, #6766FF 50%, #6766FF 50%, rgba(103, 102, 255, 0.2) 79.83%);
}
.service-box.style13:hover .icon img {
    filter: brightness(0)invert(1);
}
.service-box.style13 .content h3 {
    color: #fff;
    font-weight: 600;
    font-size: 24px;
    margin: 0 0 0;
}
.service-box.style13 .content p {
    color: rgba(255,255,255,0.70);
    font-weight: 400;
    font-size: 18px;
    margin: 15px 0 23px;
}
.service-box.style13 .service-btn a {
    display: inline-block;
    color: rgba(255,255,255,0.70);
    font-weight: 600;
    font-size: 20px;
    margin: 0 0 0;
    transition: .5s;
}
.service-box.style13:hover .service-btn a {
    color: #6766FF;
}


/*==========================Home:ai saas for developer tools:section 05 ============================================*/

.service-box.style14 {
    background: linear-gradient(138.31deg, rgba(255, 255, 255, 0.03) 14.02%, rgba(255, 255, 255, 0.1) 46.84%, rgba(255, 255, 255, 0.1) 46.84%, rgba(255, 255, 255, 0.03) 79.66%);
    padding: 42px 30px 40px;
    border-radius: 10px;
    position: relative;
    z-index: 1;
    transition: .5s;
}
.service-box.style14:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: 10px;
    border: 1.5px solid transparent;
    -webkit-mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: destination-out;
    mask-composite: exclude;
    background: linear-gradient(90.32deg, rgba(255, 255, 255, 0.1) 20.17%, rgba(255, 255, 255, 0.3) 50%, rgba(255, 255, 255, 0.3) 50%, rgba(255, 255, 255, 0.1) 79.83%);
}
.service-box.style14:after {
    content: "";
    position: absolute;
    inset: 0;
    padding: 2px;
    border-radius: 10px;
    background: conic-gradient(from var(--r), #6766FF 8.88%, rgba(103, 102, 255, 0.1) 67.66%);
    z-index: 2;
    animation: rotating 5s linear infinite;
    -webkit-mask: linear-gradient(#fff 0 0) content-box, 
        linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    opacity: 0;
}
.service-box.style14:hover:after {
    opacity: 1;
}
.service-box.style14 .service-inner {
    position: relative;
    z-index: 1;
    transition: .5s;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.service-box.style14 .icon {
    flex-shrink: 0;
    background: #FFFFFF1A;
    width: 60px;
    height: 60px;
    line-height: 89px;
    border-radius: 10px;
    text-align: center;
    position: relative;
    z-index: 1;
    transition: .5s;
}
.service-box.style14:hover .icon {
    background: #6766FF;
}
.service-box.style13 .icon:after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: 10px;
    border: 1.5px solid transparent;
    -webkit-mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: destination-out;
    mask-composite: exclude;
    background: linear-gradient(90.32deg, rgba(103, 102, 255, 0.2) 20.17%, #6766FF 50%, #6766FF 50%, rgba(103, 102, 255, 0.2) 79.83%);
}
.service-box.style14:hover .icon img {
    filter: brightness(0)invert(1);
}
.service-box.style14  h3 {
    color: #fff;
    font-weight: 600;
    font-size: 28px;
    margin: 0 0 0;
}
.service-box.style14 .content p {
    color: rgba(255,255,255,0.70);
    font-weight: 300;
    font-size: 16px;
    line-height: 27px;
    margin: 20px 0 0px;
    text-transform: capitalize;
}
.service-box.style14 .service-btn a {
    display: inline-block;
    color: rgba(255,255,255,0.70);
    font-weight: 600;
    font-size: 20px;
    margin: 0 0 0;
    transition: .5s;
}
.service-box.style14:hover .service-btn a {
    color: #6766FF;
}
/*==========================Home:ai saas for developer tools:section 06 ============================================*/
.testimonial-item.style8 {
    display: flex;
    gap: 50px;
    align-items: center;
    transition: .5s;
    position: relative;
    z-index: 1;
}
.testimonial-item.style8 .quote_image {
    display: inline-block;
    float: left;
}
.testimonial-item.style8 .client_image {
    flex-shrink: 0;
}
.testimonial-item.style8 .client_image img {
    border-radius: 20px;
}
.testimonial-item.style8 .bio {
    display: flex;
    justify-content: space-between;
    align-items: anchor-center;
    gap: 90px;
    margin-top: 10px;
    padding-left: 15px;
}
.testimonial-item.style8 h3 {
    color: #fff;
    font-weight: 600;
    font-size: 25px;
    margin: 0;
}
.testimonial-item.style8 .author {
    display: flex;
    align-items: center;
    gap: 20px;
}
.testimonial-item.style8 p.quote {
    font-family: Rajdhani;
    font-weight: 400;
    font-size: 24px;
    line-height: 38px;
    color: rgba(255,255,255, 0.70);
    margin: 27px 0 70px;
}
.testimonial-item.style8 h4.name {
    font-family: Rajdhani;
    font-weight: 600;
    font-size: 24px;
    line-height: 32px;
    color: #fff;
    margin: 0 0 4px;
}
.testimonial-item.style8 h5.designation {
    margin: 0 0 0;
    font-family: Nunito;
    font-weight: 400;
    font-size: 15px;
    color: #fff;
    opacity: 0.7;
}
.testimonial-item.style8 i.active {
    color: #FF9F31;
}
.testimonial-item.style8 .reviews_rating {
    margin-right: 26px;
}

/*owl nav*/

.testimonial.style8 .owl-nav {
    display: inline-block;
    position: absolute;
    right: 65px;
    bottom: 70px;
}
.testimonial.style8 button.owl-prev i{
    margin-right:6px;
}
.testimonial.style8 button.owl-prev i, .testimonial.style8 button.owl-next i {
    background: linear-gradient(180deg, #0B0523 0%, #26203E 100%);
    display: inline-block;
    border-image-source: linear-gradient(136.7deg, rgba(255, 255, 255, 0.6) 6.8%, rgba(103, 102, 255, 0.3) 18.42%, rgba(103, 102, 255, 0.3) 83.88%, rgba(255, 255, 255, 0.6) 92.96%);
    height: 60px;
    width: 60px;
    line-height: 60px;
    border-radius: 5px;
    color: #fff;
    border: 1px solid#100A28;
    position: relative;
    z-index: 1;
    transition: .5s;
}
.testimonial.style8 button.owl-prev i:hover,
.testimonial.style8 button.owl-next i:hover{
    background:#6766FF;
}
.testimonial.style8 button.owl-prev i:after ,
.testimonial.style8 button.owl-next i:after {
    content: "";
    position: absolute;
    inset: 0;
    padding: 1px;
    border-radius: 5px;
    background: conic-gradient(from var(--r), #6766FF 8.88%, rgba(103, 102, 255, 0.1) 67.66%);
    z-index: 2;
    animation: rotating 5s linear infinite;
    -webkit-mask: linear-gradient(#fff 0 0) content-box, 
        linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    opacity: 1;
}

/*==========================Home:ai saas for developer tools:section 07 ============================================*/

.blog-post.style6 .categories {
    display: inline-block;
}
.blog-post.style6 .categories ul li {
    list-style: none;
    display: inline-block;
}
.blog-post.style6 .categories a {
    position: relative;
    z-index: 1;
    display: inline-block;
    font-weight: 500;
    font-size: 14px;
    background: #6766FF;
    color: #fff;
    padding: 2px 22px;
    border-radius: 20px;
    text-transform: uppercase;
    margin-right: 10px;
}
.blog-post.style6 .date {
    color: #fff;
    margin: 0;
    font-weight: 400;
    font-size: 18px;
    text-transform: capitalize;
    float: right;
}
.blog-post.style6 .single_blog_post_content h3 {
    margin: 18px 0 13px;
}
.blog-post.style6 .single_blog_post_content h3 a {
    color: #fff;
    font-weight: 600;
    font-size: 28px;
    line-height: 36px;
}
.blog-post.style6 .user_author {
    float: left;
}
.blog-post.style6 .user_author a {
    color: #fff;
    text-transform: capitalize;
}
.blog-post.style6 .user_author i {
    display: inline-block;
    color: rgba(255,255,255,0.6);
    background: linear-gradient(176.42deg, rgba(255, 255, 255, 0.1) 2.94%, rgba(255, 255, 255, 0) 97.43%);
    width: 46px;
    height: 46px;
    line-height: 46px;
    text-align: center;
    border-radius: 30px;
    position: relative;
    z-index: 1;
    transition: .5s;
}
.blog-post.style6 .blog_btn a {
    float: right;
    display: inline-block;
    background: linear-gradient(176.42deg, rgba(255, 255, 255, 0.1) 2.94%, rgba(255, 255, 255, 0) 97.43%);
    width: 46px;
    height: 46px;
    line-height: 46px;
    text-align: center;
    border-radius: 30px;
    position: relative;
    z-index: 1;
    transition: .5s;
}
.blog-post.style6 .blog_btn a:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: 30px;
    border: 1.5px solid transparent;
    -webkit-mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: destination-out;
    mask-composite: exclude;
    background: linear-gradient(90.32deg, rgba(255, 255, 255, 0.1) 20.17%, rgba(255, 255, 255, 0.3) 50%, rgba(255, 255, 255, 0.3) 50%, rgba(255, 255, 255, 0.1) 79.83%);
}
.blog-post.style6 .post-thumb img {
    margin: 35px 0 0;
    border-radius: 20px;
}
.blog-post.style6 .owl-dots {
    position: absolute;
    right: -60px;
    bottom: 33%;
    transform: rotate(90deg);
}
.blog-post.style6 button.owl-dot {
    position: relative;
    z-index: 22;
    height: 10px;
    width: 10px;
    margin: 0 4px;
    display: inline-block;
    border-radius: 10px;
    background: #FFFFFF4D;
}
.blog-post.style6 button.owl-dot.active {
    background: #6766FF;
    width: 30px;
}

/*==========================Home:ai saas for developer tools:section 0 ============================================*/

/* The End Of CSS */