:root {
    --black: #000000;
    --black-color-400: #141414;
    --blue-color-700: #083A54;
    --skyblue-color-900: #0B6862;
    --skyblue-color-700: #23BAB1;
    --grey-light-color-700: #D0E0E8;
    --grey-color-400: #E0DFDF;
    --Poppin-font: "Poppins", sans-serif;
}
h1, .h1,
h2, .h2,
h3, .h3,
h4, .h4,
h5, .h5,
h6, .h6 {
  font-weight: 600;
  line-height: 1.3;
  line-height: normal;
}
h1, .h1 {   
    font-size: 2.5rem;
}
@media (max-width:1199.99px){
    h1, .h1 {   
        font-size: 2.2rem;
    } 
}
@media (max-width:991.99px){
    h1, .h1 {   
        font-size: 2rem;
    } 
}
@media (min-width:1250px) and (max-width: 1400px) {
    .container {max-width: 1100px!important;}
}
 
.cursor-pointer {cursor: pointer;}

label {
    font-weight: 600;
}
.btn-secondary { 
    background: linear-gradient(90deg, var(--skyblue-color-700) 0%, var(--skyblue-color-900) 100%);
    border: 1px solid var(--skyblue-color-700)!important;
    border-radius: 7px;
}
@media (min-width:1440.99px) {
    .btn-secondary { 
        min-height: 54px;
    }
}
@media (max-width:1440px) {
    .btn-secondary { 
        min-height: 48px;
    }
}

.text-grey {
    color: rgba(0,0,0,.55);
}

/* Checkbox */
.checkbox {
    display: grid;
    grid-template-columns: 1em auto;
    gap: 20px;
}
input[type="checkbox"] {
    -webkit-appearance: none;
    appearance: none;
    background-color: var(--bs-white);
    border-radius: 4px;
    width: 24px;
    height: 24px;
    border: 1px solid var(--skyblue-color-900);
    display: grid;
    place-content: center;
}
input[type="checkbox"]::before {
    content: "";
    width: 16px;
    height: 16px;
    transform: scale(0);
    transition: 120ms transform ease-in-out;
    -webkit-transition: 120ms transform ease-in-out;
    box-shadow: inset 1em 1em var(--skyblue-color-900);
}
input[type="checkbox"]:checked::before {
    transform: scale(1);
    -webkit-transform: scale(1);
}
.checkbox span {
    font-weight: 300;
}
.font-light {
    font-weight: 300;
}
/* End Checkbox */

/* Radio */
.radiobox {
    display: grid;
    grid-template-columns: 1em auto;
    gap: 20px;
}
input[type="radio"] {
    -webkit-appearance: none;
    appearance: none;
    background-color: var(--bs-white);
    border-radius: 4px;
    width: 26px;
    height: 26px;
    display: grid;
    border-radius: 16px;
    place-content: center;
    border: 1px solid var(--skyblue-color-900);
}
input[type="radio"]::before {
    content: "";
    width: 16px;
    height: 16px;
    border-radius: 16px;
    transform: scale(0);
    -webkit-transform: scale(0);
    transition: 120ms transform ease-in-out;
    -webkit-transition: 120ms transform ease-in-out;
    box-shadow: inset 1em 1em var(--skyblue-color-900);
}
input[type="radio"]:checked::before {
    transform: scale(1);
    -webkit-transform: scale(1);
}
/* End Radio */

@media (min-width:1399.99px){
    .spacer-100 {height: 100px;}
}
@media (max-width:1400px){
    .spacer-100 {height: 80px;}
    .spacer-80 {height: 60px;}
}
@media (max-width:991px){
    .spacer-100 {height: 60px;}
}
@media (max-width:767px){
    .spacer-80 {height: 50px;}
}

.btn-md {
    padding: 10px 20px;
    min-width: 190px;
}
.btn-primary {
    background-color: var(--blue-color-700);
    border-color: var(--blue-color-700);
}
.btn-primary:hover {
    background-color: var(--skyblue-color-900);
}
.btn-radius{
    border-radius: 30px;
}
.analyze-hero-section {
    padding: 20px 0;
    background-color: #F0F2FE;
}   
.analyze-hero-section::before {
    content: '';
    background: url(../assets/images/slider-bg.jpg) no-repeat;
    opacity: .05;
    background-size: cover;
    position: absolute;
    top: 0; right: 0;
    left: 0; bottom: 0;
    height: 100%;
    width: 100%;
}
.arrow_intro {
    left: -10px;
    bottom: -150px; 
    z-index: 1;
}
.arrow_intro svg {animation: rotate1 3s linear infinite; width: 90px;}
@media (max-width: 767px){
    .arrow_intro { display: none!important;}
}
.analyze-hero-section .btn-44 {
    position: absolute;
    right: 0;
    bottom: 0;
}
.btn-44 {
    width: 44px;
    height: 44px;
    padding: 2px;
}
@keyframes rotate1 {
    0% {
        transform: rotate(-35deg);
    }
    50% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(-35deg);
    }
}

.attraction-main .container-fluid {
    padding-inline: 0;
}

/* Adjust content z-index to be higher */
.swiper-slide .content_des {
    position: relative;
    z-index: 10; /* Higher z-index than buttons */
}

@media (max-width: 767px) {
    .swiper-full {
        padding: 30px 0 50px;
    }
}

/* Fix for swiper pagination */
.swiper-full .swiper-pagination {
    pointer-events: none;
    top: auto;
    bottom: 20px;
    z-index: 10;
}
.swiper-full .swiper-pagination-bullet {
    pointer-events: auto;
}

@media (max-width: 767px) {
    .swiper-full .swiper-pagination {
        bottom: 40px;
    }
}

@media (max-width:767px) {
    .swiper-full {padding: 30px 0 50px;}
    .group_images {margin-left: auto;}    
}

.group_images {
    content: '';  
    border: 1px dashed var(--skyblue-color-900);
    background-color: #F0F2FE;
    border-radius: 100%; 
    display: inline-block;
    position: absolute;
}
.group_images::before { 
    content: '';
    background-color: var(--bs-white);
    border-radius: 100%;
    --size-400: 400px;
    width: var(--size-400);
    height: var(--size-400);
    display: inline-block;
    position: absolute;
    top: 50px;
    left: 50px; 
}
@media (min-width:1199.99px){
    .group_images { 
        --size-500: 500px;
        width: var(--size-500);
        height: var(--size-500);
    }
}
@media (max-width:1200px){ 
    .content_des .btn {margin-top: 0;}
    .group_images { 
        --size-370: 370px;
        width: var(--size-370);
        height: var(--size-370);
    }
    .group_images::before { 
        --size-300: 300px;
        width: var(--size-300);
        height: var(--size-300);
        top: 35px;
        left: 35px; 
    }
    .swiper-full .swiper-pagination { bottom: 10px!important;}
}
@media (max-width:991px){  
    .group_images { 
        --size-330: 330px;
        width: var(--size-330);
        height: var(--size-330);
        margin-inline: auto;
    }
    .group_images::before { 
        --size-280: 280px;
        width: var(--size-280);
        height: var(--size-280);
        top: 25px;
        left: 25px; 
    }
}
.group_images img{
    position: absolute;
    width: 70%;
    padding: 5px;
    object-fit: contain;
    background-color: var(--bs-white); 
    border: 1px solid var(--grey-light-color-700);
    border-radius: 7px;
}
.group_images img:first-child{
    left: 0;
    top: 60%;
    transform: translateY(-60%);
    -webkit-transform: translateY(-60%);
}
.group_images img:nth-child(2){
    right: 0;
    box-shadow: 0 0 10px rgba(0,0,0, .14);
    top: 50%;
    transform: translateY(-55%);
    z-index: 1;
}
.title_h2 p {
    color: rgba(8,58,84, .60);
}
.content_des .h2 {
    color: #020202;
    margin-bottom: 20px;
}
.tagline {
    background-color: #9FD7D3;
    border-radius: 25px;
    color: var(--black);
    font-size: .825rem;
    padding: 7px 1.2rem;
    margin-bottom: 10px;
    display: inline-block;
}
.content_des .h1 {font-weight: 600;}
.content_des .btn {margin-top: 10px;}
.content_des p {color: #74757B;}
@media (min-width:1439.99px){
    .content_des p {font-size: 1.125rem;}
}
@media (max-width:1440px){
    .content_des p {font-size: 1rem;}
}

/* Swiper pagination */
.swiper-pagination-bullet { background-color: #B2B3BB; font-size: 0; width: 10px; height: 10px; padding: 7px;}
.swiper-pagination-bullet-active {
    background-color: var(--skyblue-color-900);
}

/* Video Sec */
.poster_thumbnail img {
    border-radius: 10px;
    object-fit: cover;
}
.play_btn {
    --size-60: 60px;
    border: 0; background-color: var(--bs-white);
    border-radius: 50%;
    width: var(--size-60); height:var(--size-60);
    position: absolute;
    top: calc(50% - (60px/2)); left: calc(50% - (60px/2));
    box-shadow: 0 0 10px rgba(0,0,0,.2);
    z-index: 1;
}
.play_btn svg {position: relative; left: 2px; width: 13px;}
@media (max-width:1200px){
    .play_btn { width: 50px; height:50px; top: calc(50% - (50px / 2)); left: calc(50% - (50px / 2));} 
    .play_btn svg {width: 12px;}
}


/*  */
.work_wrap {background-color: var(--blue-color-700);border-radius: 20px;}
.work-col{color: var(--bs-white); padding: 40px 30px; position: relative; z-index: 1;}
.work-col svg {margin-bottom: 20px;}
.work-col svg path { stroke: var(--bs-white)!important;}
.work-col .h4{color: inherit;}
.work-col p{margin-bottom: 0; font-size: .875rem;}
.work-col:nth-child(2)::before {
    content: ''; 
    box-shadow: 0 0 10px rgba(0,0,0,.2);
    background-color: var(--skyblue-color-700);
    border: 1px solid var(--bs-white);
    height: calc(100% + 80px);
    width: 100%;
    border-radius: 20px;
    position: absolute;
    left: 0;
    top: -40px;
    z-index: -1;
}
@media (max-width:767px){
    .work-col p {font-size: .875rem;}
    .work-col:nth-child(2) {
        margin-block: 20px;
    }
    .work-col:nth-child(2)::before {
        top: -10px;
        left: -10px;
        height: calc(100% + 20px);
        width: calc(100% + 20px);
    }
}
.achive_col {width: 100%; display: block; margin-top: 30px; position: relative; text-align: center; padding: 30px 80px; min-height: 210px;}
.achive_col .h4 {font-weight: 700;}
.achive_col::before, .achive_col::after {
    content: '';
    background-image: url(../assets/images/icons/leaf-patner.png);
    background-repeat: no-repeat;
    background-size: 88px;
    object-fit: contain;
    position: absolute; 
    top: 0;
    height: 220px;
    width: 100px; 
}
.achive_col::before {
    left: 0;
}
.achive_col::after{
    right: 0;
    transform: scaleX(-1);
} 
.achive_col i{ margin-bottom: 12px; display: block;}
.achive_col span{ color: var(--blue-color-700); line-height: 1.3; display: block; font-size: 14px;}

/* What You Get section - Background on RIGHT */
.plan-list-section.upload_screenplay_sec {
    background: #E9F8FF; 
    padding-inline: 20px; 
    z-index: 1;
}

.plan-list-section.upload_screenplay_sec::before {
    content: '';
    background-color: rgba(0,0,0, .05);
    border-radius: 0 100px 0 0;
    position: absolute;
    right: 20px; /* Position on RIGHT */
    top: 20px;
    width: calc(50% - 20px);
    height: calc(100% - 40px);
    z-index: -1;
}

/* Upload Your Screenplay section - Background on LEFT */
.upload-form-section.upload_screenplay_sec {
    background: #E9F8FF; 
    padding-inline: 20px; 
    z-index: 1;
}

.upload-form-section.upload_screenplay_sec::before {
    content: '';
    background-color: rgba(0,0,0, .05);
    border-radius: 0 100px 0 0;
    position: absolute;
    left: 20px; /* Position on LEFT */
    top: 20px;
    width: calc(50% - 20px);
    height: calc(100% - 40px);
    z-index: -1;
}

/* Responsive adjustments */
@media (max-width: 991px) {
    .plan-list-section.upload_screenplay_sec::before,
    .upload-form-section.upload_screenplay_sec::before {
        width: calc(100% - 40px);
        height: calc(100% - 40px);
        border-radius: 30px;
        z-index: -1;
        right: 20px;
        left: 20px;
    }
}

/* Upload Sec */
.upload_screenplay_sec {background:#E9F8FF; padding-inline: 20px; z-index: 1;}
.upload_screenplay_sec::before {
    content: '';
    background-color: rgba(0,0,0, .05);
    border-radius: 0 100px 0 0;
    position: absolute;
    left: 20px; top: 20px;
    width: calc(50% - 20px);
    height: calc(100% - 40px);
    z-index: -1;
}
.price-plan .card-header .h5 {
    min-width: 50%;
    padding: 18px 20px;
    display: inline-block;
    color: var(--bs-white);
    border-radius: 8px 8px 0 0;
    background-color: var(--skyblue-color-900);
}
@media (min-width:1440.99px){
    .upload_screenplay_sec {
        padding-block: 80px;
    }
    .plan-list {
        padding-right: 30px;
    }
    #file-upload-form {
        padding-left: 30px;
        padding-right: 20px;
    }
}
@media (max-width:1440px){
    .upload_screenplay_sec {
        padding-block: 50px;
    }
}
@media (max-width:991px){
    .price-plan .card-header .h5 {
        min-width: 260px;
    }
    .upload_screenplay_sec::before {
        width: calc(100% - 40px);
        height: calc(100% - 40px);
        border-radius: 30px;
        z-index: -1;
    } 
    .upload_screenplay_sec {
        padding-block: 35px;
    }
}
@media (max-width:575px){
    .price-plan .card-header .h5 {
        min-width: 220px;
    }
}

.top-left-radius-none {
    border-top-left-radius: 0!important;
}
.top-right-radius-none {
    border-top-right-radius: 0!important;
}
.price-plan .price .h1 {font-weight: 700;}
.price-plan .card-body {
    border-width: 4px 1px 1px 1px; 
    border-style:solid;
    border-color: var(--skyblue-color-900);
    background-color: var(--bs-white);
    border-radius: 8px;
    padding: 30px;
    box-shadow: 0 0 15px rgba(0,0,0, .14);
}
.price-plan .price .text-small {font-size: 12px; color: rgba(0,0,0, .8);}
.price-plan ul li { background-color: #E9F7FF; border-radius: 7px; margin-top:10px; padding: 14px 16px; display: flex; align-items: center;
justify-content: space-between; cursor: pointer; transition: all .5s ease-in-out; -webkit-transition: all .5s ease-in-out;}
.price-plan ul li:hover { 
    transform:scale(1.02);
    -webkit-transform:scale(1.02);
}

.price-plan ul li span {
    display: inline-block;
    font-size: 1rem;
}

.btn-link {
    background-color: var(--skyblue-color-900);
    width: 32px; height: 32px;
    border-radius: 50%;
    padding: 3px;
    border: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease-in-out;
} 
.btn-link img { width: 12px; height: 12px;}
.price-plan ul li:hover .btn-link {
    background-color: var(--skyblue-color-700);
}

@media (max-width: 767px){
    .price-plan .card-body {
        padding: 20px;
    }
    .price-plan ul li span {
        font-size: 14px;
        max-width: calc(100% - 33px);
        word-wrap: normal;
        word-break: break-word;
    }
}

#file-upload-form .form-control {
    border:1px solid var(--grey-color-400)!important;
    min-height: 48px;
}
#file-upload-form p strong {
    color: var(--black-color-400);
}
@media (min-width:1440.99px){
    #file-upload-form .form-control { 
        min-height: 54px;
        padding-inline: 20px;
    }
}

.arrow_curve {
    right: 0;
    top: -40px;
    transition: all .5s ease-in-out;
    -webkit-transition: all .5s ease-in-out;
    animation: rotate 3s linear infinite;
}

@keyframes rotate {
    0% {
        transform: rotate(0deg);
    }
    50% {
        transform: rotate(30deg);
    }
    100% {
        transform: rotate(0deg);
    }
}

/* Testimonail */
.testimonial_sec {
    background: #E9F8FF; 
    padding-inline: 20px; 
    z-index: 1;
}

.swiper-testimonial .swiper-pagination {
    top: auto;
    bottom: auto;
    margin-top: 30px;
}
.swiper-testimonial .swiper-pagination .swiper-pagination-bullet {
    background-color: #C1C1C1;
    opacity: 1;
}
.swiper-testimonial .swiper-pagination-bullet.swiper-pagination-bullet-active {
    background-color: var(--skyblue-color-900);
}

.review-box {
    background-color: var(--bs-white);
    border: 1px solid #B0D0E1;
    border-radius: 25px;
    padding: 40px;
    /* height: 100%; */
    position: relative;
}
/* .swiper-testimonial .swiper-slide.swiper-slide-active .review-box {
    border-color: var(--skyblue-color-900);
} */
.review-box::before {
    content: '';
    background-image: url(../assets/images/icons/quote_icon.svg);
    background-size: 100%;
    transform: scale(-1);
    background-repeat: no-repeat;
    width: 44px; height: 32px;
    position: absolute;
    left: 10px;
    top: 10px;
}
.review-box::after {
    content: '';
    background-image: url(../assets/images/icons/quote_icon.svg);
    background-repeat: no-repeat;
    background-size: 100%;
    /* background-color: var(--bs-white); */
    padding: 25px;
    width: 48px; height: 36px;
    position: absolute;
    right: -10px;
    bottom: -10px;
}
.review-box p{
    color: var(--blue-color-700);
}
.user-detail figure img{
    width: 50px;
    height: 50px;
    object-fit: contain;
}

.swiper-testimonial .swiper-slide {
    height: auto;
}
.user-info .h6 {
    color: var(--blue-color-700);
}

@media (max-width:767px){
    .ratio-21x9 {
        --bs-aspect-ratio: 55%;
    }
    .review-box { 
        border-radius: 20px;
        padding: 40px 20px 20px;
    }
}

/* Modal */
#carouselModal .btn-close {
    padding: 2px;
    opacity: 1;
    box-shadow: 0 0 10px rgba(0,0,0, .4);
    background-color: var(--bs-white);
    text-align: center;
    position: absolute;
    right: 10px;
    top: 10px;
    width: 46px;
    height: 46px;
    border-radius: 40px;
    z-index: 11;
} 
.zoom_icon {
    position: absolute;
    right: 0; bottom: 0;
    width: 44px; height: 44px;
    padding: 6px;
    border-radius: 10px;
    background-color: rgba(0,0,0,.8);
    box-shadow: 0 0px 5px rgba(0,0,0, .35);
    border: 1px solid #eee;
    cursor: pointer;
}
.zoom_icon path{ stroke: var(--bs-white);}
/* Close button */
.btn-close-icon {
    display: none;
    position: absolute;
    padding: 2px;
    top: 10px;
    right: 10px;
    width: 46px;
    height: 46px;
    border-radius: 40px;
    background-color: var(--bs-white);
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23000'%3e%3cpath d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414z'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 1em;
    cursor: pointer;
}
@media (min-width:1024px){
    .zoom_icon {
        display: none;
    }
    .btn-close-icon {
        display: none;
    }
}
/* data src full screen */
.fullscreen-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.9);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 99999;
    transition: transform .3s ease-out;
    -webkit-transition: transform .3s ease-out; 
}
.fullscreen-image {
    max-width: 90%;
    max-height: 90%;
    opacity: 0; 
    -webkit-transform: scale(0.8);
    transform: scale(0.8);
    transition: transform 0.3s ease, opacity 0.3s ease;
    -webkit-transition: transform 0.3s ease, opacity 0.3s ease; 
}
.fullscreen-overlay .fullscreen-image {
    opacity: 1;
    transform: scale(1);
    -webkit-transform: scale(1);
} 
/* end */

.content-box .h3 {
    font-weight: 600; 
    color: var(--black-color-400);
}
.content-box p {
    color: rgba(0,0,0,.6);
    font-size: 1rem;
}
.content-box p:last-child {
    margin-bottom: 0;
}
.content-box figure{
    box-shadow: 0 0 20px rgba(0,0,0, .25);
    border: 1px solid var(--grey-color-400);
    border-radius: 10px;
    position: relative;
}
.content-box figure img{
    object-fit: contain;
    border-radius: 10px;
    max-height: 430px;
}
.swiper-btn {
    width: 50px;
    height: 50px;
    padding: 5px;
    top: 50%;
    border-radius: 50%;
    background-color: var(--skyblue-color-900);
}
.swiper-btn::after {
    font-size: 22px;
    color: var(--bs-white);
}

/* Svg Style for path line drawing */
.work-col svg path, .arrow_intro svg path {
    stroke-width: 2; 
    stroke: var(--black); 
    fill: none; 
    stroke-dasharray: 500; 
    stroke-dashoffset: 500; 
    animation: draw 5s ease-in-out infinite;
}

/* Animation keyframes */
@keyframes draw {
    to {
        stroke-dashoffset: 0; 
        /* End with no offset, drawing the line */
    }
}

/* Banner img hover */
.group_images img {
    transition: transform 0.3s ease-in-out;
    transform-origin: center right; 
    will-change: transform;
}
 
.group_images img.zoom:hover { 
    transform: translateY(-50%) scale(1.10)!important;
    top: 50%; 
    width: 100%;
    z-index: 11;
}
@media (max-width: 575px){
    .group_images img { 
        transform-origin: center;
    }
    .group_images img.zoom:hover {
        transform: translateY(-50%) scale(1.1)!important;
    }
}

.swiper-col-testimonial { overflow: hidden; position: relative; padding-bottom: 50px;}

/* Fix for hero buttons positioning */
.hero-btn-next,
.hero-btn-prev {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 50px;
  height: 50px;
  background-color: rgba(11, 104, 98, 0.8);
  border-radius: 50%;
  z-index: 5;
}

/* Position buttons on sides with appropriate spacing */
.hero-btn-next {
  right: 15px;
}

.hero-btn-prev {
  left: 15px;
}

/* Make content zone have higher z-index */
.swiper-slide .content_des {
  position: relative;
  z-index: 10;
  pointer-events: auto;
}

/* Make sure images are also clickable with appropriate z-index */
.swiper-slide figure {
  z-index: 10;
  position: relative;
}

/* Video section styling improvements */
.video-play {
  margin-top: 0;
  padding: 60px 0;
  position: relative;
  background-color: #f5f9fc;
  border-top: 1px solid rgba(0,0,0,0.05);
}
@media (max-width: 767px){
    .video-play { 
        padding-block: 30px;
    }
}

.third_party_link {
    gap: 10px;
}

/* Fix for testimonial carousel spacing */
.swiper-col-testimonial {
  overflow: hidden;
  position: relative;
  padding-bottom: 50px;
  margin-top: 20px;
}

.price_left .price-plan {
    position: sticky;
    top: 20px;
}

#announcement { margin-bottom: 0;}