/*.e-con{
	padding:0!important;
}*/

.e-con>.e-con-inner {
    gap: var(--row-gap) var(--column-gap);
    height: 100%;
    margin: 0 auto;
    max-width: 1750px !important;
    padding-inline-end: 0;
    padding-inline-start: 0;
    width: 100%;
}
/* =========================================
   GLOBAL RESET
========================================= */
body {
    margin: 0;
    padding: 0;
/*     font-family: "Inter", sans-serif; */
    overflow-x: hidden;
}

/* =========================================
   HERO SECTION (DESKTOP)
========================================= */
/*.ad360-hero-section {
    width: 100vw;
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
    min-height: 500px !important;
    display: flex;
    overflow: hidden;
    box-sizing: border-box;
    flex-direction: row;
    align-items: center;
}*/

/* Background Image */
.ad360-hero-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
}

.ad360-hero-bg img {
    width: 100%;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center;
}

/* =========================================
   INNER CONTAINER (FIXED FOR LAPTOPS)
========================================= */
.ad360-container {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: 1750px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 40px;
}

/* =========================================
   LEFT SIDE: CONTENT
========================================= */
.ad360-hero-content {
    flex: 1; /* Isse ye available space lega */
    min-width: 0; /* Text ko wrap hone ke liye force karega */
}

.ad360-headline {
    font-size: 54px;
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -0.02em;
    margin: 0 0 20px 0;
    display: flex;
    color: #16101e;
}

.ad360-gradient-text {
    background-image: linear-gradient(113deg, rgb(212, 0, 0) 0%, rgb(0, 41, 170) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.ad360-subtext {
    font-size: 17px;
    line-height: 1.6;
    margin: 0 0 30px 0;
    font-weight: 500;
    max-width: 95%;
}

/* Buttons */
.ad360-btn-wrapper {
    display: flex;
    gap: 16px;
/*     flex-wrap: wrap; */
}

.ad360-btn-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px 24px;
    border-radius: 8px;
    background: linear-gradient(104deg, #d40000 0%, #0029aa 100%);
    color: #ffffff;
    font-size: 15px;
    font-weight: 400;
    text-decoration: none;
    transition: transform 0.2s ease;
    border: none;
    cursor: pointer;
    white-space: nowrap;
	gap: 10px;
}

.ad360-btn-secondary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px 24px;
    border-radius: 8px;
    gap: 10px;
    background-color: #f0f0f0;
    color: #0f0f0f;
    font-size: 16px;
    font-weight: 600;
    text-decoration: none;
    transition: background 0.2s ease;
    cursor: pointer;
    white-space: nowrap;
	border: 1px solid rgba(0, 0, 0, 0.1);
}

/*.ad360-btn-primary:hover,
.ad360-btn-secondary:hover {
    transform: translateY(-2px);
}*/

/* =========================================
   RIGHT SIDE: FORM (FIXED)
========================================= */
.ad360-form-card {
    background: #ffffff;
    width: 100%;
    /* Form ki width thodi compact rakhi hai */
    max-width: 450px; 
    padding: 24px;
    border-radius: 16px;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.08);
    box-sizing: border-box;
    flex-shrink: 0; /* Form ko sikudne se rokega */
}

.ad360-form-row {
    display: flex;
    gap: 12px;
    margin-bottom: 12px;
}

.ad360-input-full {
    width: 100%;
    margin-bottom: 12px;
}

.ad360-input {
    width: 100%;
    height: 40px;
    padding: 0 16px;
    background: #f9f9f9;
    border: 1px solid #eeeeee;
    border-radius: 8px;
    font-size: 14px;
    color: #333;
    outline: none;
    box-sizing: border-box;
    font-family: inherit;
}

.ad360-input:focus {
    background: #fff;
    border-color: #ccc;
}

.ad360-select {
    appearance: none;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 14px center;
    background-size: 14px;
    cursor: pointer;
}

.ad360-checkbox-wrapper {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-top: 5px;
    margin-bottom: 20px;
}

.ad360-checkbox {
    margin-top: 3px;
    accent-color: #d40000;
    cursor: pointer;
}

.ad360-consent-text {
    font-size: 12px;
    color: #666;
    line-height: 1.4;
}

.ad360-submit-btn {
    width: 100%;
    height: 40px;
    border: none;
    border-radius: 10px;
    background: linear-gradient(104deg, #d40000 0%, #0029aa 100%);
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: opacity 0.2s;
}

.ad360-submit-btn:hover {
    opacity: 0.95;
}


/* =========================================
   🔥 RESPONSIVE MEDIA QUERIES (UPDATED) 🔥
========================================= */

/* LAPTOP SCREEN FIX (1024px - 1300px) 
   Yahan par content cut raha tha, ab ye scale down hoga.
*/
@media (max-width: 1300px) {
    .ad360-container {
        max-width: 100%;
    }

    .ad360-headline {
        font-size: 42px; /* Font thoda chhota kiya taaki fit aaye */
    }

    .ad360-form-card {
        max-width: 400px; /* Form ko thoda compact kiya */
        padding: 20px;
    }
    
    .ad360-hero-bg img {
        height: 100% !important;
    }
}

/* TABLET MODE (Max-width 1024px) - STACK LAYOUT */
@media (max-width: 1024px) {
    .ad360-hero-section {
        min-height: auto !important;
        height: auto !important;
    }

    /* Ab ye column ban jayega (Upar Text, Niche Form) */
    .ad360-container {
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 10px;
		
    }

    .ad360-hero-content {
        width: 100%;
        margin-bottom: 0;
    }

    .ad360-headline {
        font-size: 35px; /* Tablet ke liye decent size */
    }

    .ad360-subtext {
        margin: 0 auto 30px auto;
    }

    .ad360-btn-wrapper {
        justify-content: center;
    }

    .ad360-form-card {
        width: 100%;
        max-width: 400px; /* Form wapis normal width */
    }
    
    /* Slider Tablet Fix */
    .ad360-slide {
        width: 400px;
    }
}

/* MOBILE MODE (Max-width 600px) */
@media (max-width: 600px) {
    /*.ad360-hero-section {
        padding: 40px 0;
    }*/

    .ad360-headline {
        font-size: 30px;
        line-height: 1.2;
    }

    .ad360-subtext {
        font-size: 16px;
    }

    /*.ad360-btn-wrapper {
        flex-direction: column;
        width: 100%;
    }*/

    .ad360-btn-primary, 
    .ad360-btn-secondary {
/*         width: 100%; */
    }

    .ad360-form-row {
        flex-direction: column;
        gap: 12px;
    }
    
    .ad360-slide {
        width: 280px;
    }
}

/* Testimonial Slider  */


.ad360-slider-container {
        width: 100%;
        max-width: 1200px; /* Adjust as needed */
        margin: 0 auto;
        overflow: hidden; /* Hide scrollbars */
        position: relative;
        /* Fade Effect on Sides */
        mask-image: linear-gradient(to right, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 10%, rgba(0,0,0,1) 90%, rgba(0,0,0,0) 100%);
        -webkit-mask-image: linear-gradient(to right, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 10%, rgba(0,0,0,1) 90%, rgba(0,0,0,0) 100%);
    }

    /* 2. Moving Track */
    .ad360-slider-track {
        display: flex;
        gap: 32px; /* Gap between cards */
        width: max-content; /* Ensure track is as wide as content */
        padding: 20px 0;
        list-style: none;
        margin: 0;
        /* Animation Logic */
		animation: ad360-scroll 40s linear infinite reverse;
    }

    /* The Animation Keyframes */
    @keyframes ad360-scroll {
        0% {
            transform: translateX(0);
        }
        100% {
            /* Move exactly half the width (since we duplicated content) */
            transform: translateX(-50%);
        }
    }

    /* Pause on Hover (Optional) */
    .ad360-slider-track:hover {
        animation-play-state: paused;
    }

    /* 3. Testimonial Card */
    .ad360-slide {
        flex-shrink: 0;
        width: 524px; /* Fixed width for each card */
/*         background: #ffffff; */
        /* Optional: Add border or shadow if needed, clean for now */
        display: flex;
        flex-direction: column;
        gap: 16px;
    }

    /* Stars */
    .ad360-stars {
        display: flex;
        gap: 4px;
    }
    
 .ad360-star-icon{
    font-size: 15px; /* Size control */
    color: #FFD700;  /* Gold color (Fill nahi chalega) */
    margin-right: 2px; /* Thoda gap stars ke beech */
}
    /* Quote Text */
    .ad360-quote {
        font-size: 14px;
        line-height: 1.6;
        color: #333333;
        margin: 0;
		text-align: start;
    }

    /* Author Section */
    .ad360-author {
        display: flex;
/*         align-items: center; */
        gap: 12px;
        margin-top: auto;
    }

    .ad360-author-img {
        width: 48px;
        height: 48px;
        border-radius: 50%;
        object-fit: cover;
        background-color: #eee;
    }

    .ad360-author-info {
        display: flex;
        flex-direction: column;
    }

    .ad360-author-name {
        font-size: 15px;
        font-weight: 700;
        color: #000;
        margin: 0;
    }

    .ad360-author-role {
        font-size: 13px;
        color: #666;
        margin: 0;
    }

    /* Mobile Adjustment */
    @media (max-width: 768px) {
        .ad360-slide {
            width: 300px; /* Smaller cards on mobile */
			
        }
        .ad360-quote {
            font-size: 14px;
        }
    }


/* =========================================
   FONTS & GLOBAL
========================================= */
/* @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&family=Mulish:wght@400;700&display=swap'); */

.elementor-element.elementor-element-22ff9d4.e-con-full.e-flex.e-con.e-parent.e-lazyloaded {
    padding: 0 !important;
    margin: 0 !important;
}

/* =========================================
   MAIN WRAPPER
========================================= */
.ad360-performance-wrapper {
    width: 100%;
    max-width: 1500px;
    margin: auto;
    background-color: #ffffff;
    padding: 0 80px;
}

/* =========================================
   1. HEADING SECTION
========================================= */
.ad360-header-row {
/*     display: flex; */
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    gap: 40px;
}

.ad360-gradient-title {
    font-size: 36px;
    font-weight: 700;
    line-height: 40px;
    letter-spacing: -0.01em;
    margin: 0;
/*     max-width: 800px; */
    background-image: linear-gradient(281deg, #0029AA 0%, #D40000 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    color: transparent;
}

/* Arrow Button */
.ad360-arrow-circle {
    width: 64px;
    height: 64px;
    border: 1px solid #333;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    cursor: pointer;
    transition: all 0.3s ease;
}

.ad360-arrow-circle:hover {
    background-color: #f5f5f5;
    transform: rotate(45deg);
}

/* Button Icon Fix */
.ad360-btn-secondary i,
.cta-btn-light i {
    font-size: 20px; 
    margin-right: 5px; 
}

/* Arrow Circle Icon Styling (Font Awesome) */
.ad360-arrow-circle i {
    font-size: 24px; /* Icon Size */
    color: #333;     /* Icon Color */
    transition: all 0.3s ease;
}

/* Hover Effect (Rotate Arrow) */
.ad360-arrow-circle:hover i {
    transform: rotate(45deg); 
}

/* =========================================
   2. SCROLLING TAGS
========================================= */
.ad360-tags-container {
    width: 100%;
    overflow: hidden;
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 24px;
    margin-bottom: 20px;
    mask-image: linear-gradient(to right, transparent 0%, black 15%, black 85%, transparent 100%);
    -webkit-mask-image: linear-gradient(to right, transparent 0%, black 15%, black 85%, transparent 100%);
    padding: 10px 20px;
}

.ad360-tags-track {
    display: flex;
    gap: 33px;
    width: max-content;
}

/* Animations */
.track-left { animation: scrollLeft 18s linear infinite; }
.track-right { animation: scrollRight 18s linear infinite; }

@keyframes scrollLeft { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }
@keyframes scrollRight { 0% { transform: translateX(-50%); } 100% { transform: translateX(0); } }

/* Pill Style */
.ad360-tag-pill {
    background: #fff;
    border-radius: 100px;
    padding: 15px 35px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: rgba(0, 0, 0, 0.18) 0px 0.6px 0.6px -1.25px, rgba(0, 0, 0, 0.16) 0px 2.3px 2.3px -2.5px, rgba(0, 0, 0, 0.06) 0px 10px 10px -3.75px;
    white-space: nowrap;
    transition: transform 0.6s;
	
	border-bottom-width: 1px; border-color: rgb(240, 240, 240); border-left-width: 1px; border-right-width: 1px; border-style: solid; --border-top-width: 1px; background-color: var(--token-7cfab920-9d1e-4f38-8c7a-a58d533b8508, rgb(255, 255, 255)); border-radius: 228px; box-shadow: rgba(0, 0, 0, 0.18) 0px 0.602187px 0.602187px -1.25px, rgba(0, 0, 0, 0.16) 0px 2.28853px 2.28853px -2.5px, rgba(0, 0, 0, 0.06) 0px 10px 10px -3.75px; opacity: 1;
}

.ad360-tag-pill:hover {
    transform: translateY(-2px);
}

.ad360-tag-text {
/*     font-family: "Inter", sans-serif; */
    font-size: 16px;
    font-weight: 400;
    background: linear-gradient(110deg, #D40000 0%, #0029AA 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* =========================================
   3. STATS SECTION
========================================= */
.ad360-stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 40px;
    padding-top: 40px;
}

.ad360-stat-item {
    display: flex;
    flex-direction: column;
    gap: 8px;
	background-color: rgb(255, 255, 255);
    border-radius: 14px;
    padding: 16px 24px;
    transition: transform 0.3s ease;
    box-shadow: rgba(0, 0, 0, 0.1) 0px 5px 12px 0px, rgba(0, 0, 0, 0.09) 0px 21px 21px 0px;
    border: 1px solid rgba(0, 0, 0, 0.05);
}

.ad360-stat-number {
    font-size: 65px;
    font-weight: 400;
    line-height: 1;
    color: #0F0F0F;
    display: flex;
    align-items: baseline;
}

.ad360-stat-suffix {
    font-size: 54px;
    font-weight: 500;
    color: #d40000;
    margin-left: 4px;
}

.ad360-stat-small {
    font-size: 20px;
    color: #d40000;
    font-weight: 500;
    margin-left: 5px;
}

.ad360-stat-desc {
    font-size: 16px;
    line-height: 1.5;
    color: #212121;
    font-weight: 400;
    max-width: 290px;
	margin: 0;
}

/* =========================================
   🔥 RESPONSIVE FOR ALL SCREENS 🔥
   (Tablet, Mobile, Small Mobile)
========================================= */
@media (max-width: 1200px) {
.ad360-stat-number{
		  font-size: 55px; 
	}
	.ad360-stat-suffix{
		font-size: 45px; 
	
	}
}
@media (max-width: 1024px) {
    .ad360-performance-wrapper {
        padding: 60px 40px; 
    }
	.ad360-stat-number{
		  font-size: 45px; 
	}
	.ad360-stat-suffix{
		font-size: 35px; 
	
	}
	 .ad360-gradient-title {
        font-size: 30px; 
        max-width: 100%;
    }
    .ad360-stats-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 60px;
        text-align: center; 
    }

    .ad360-stat-item {
        align-items: center; 
    }

    .ad360-stat-desc {
        max-width: 100%; 
    }
}

/* Mobile (Max-width 768px) */
@media (max-width: 768px) {
    .ad360-performance-wrapper {
        padding: 0 16px;
    }

    /* Header Stack */
   .ad360-header-row {
    flex-direction: column;
    align-items: center;
    gap: 4px;
    margin-bottom: 0;
    text-align: center;
}

    .ad360-gradient-title {
        font-size: 25px; 
        max-width: 100%;
    }
	.ad360-stat-desc{
		font-size:14px;
	}
.ad360-arrow-circle {
    align-self: center;
    width: 50px;
    height: 50px;
}

    .ad360-tags-container {
        margin-bottom: 0;
        padding: 10px 0;
    }

    .ad360-tag-pill {
        padding: 15px 25px; 
    }

    .ad360-tag-text {
        font-size: 16px;
    }

    /* Stats Grid 1 Column */
    .ad360-stats-grid {
        grid-template-columns: 1fr;
        gap: 20px;
        text-align: center;
    }

    .ad360-stat-item {
        align-items: center;
    }

    .ad360-stat-number {
        font-size: 40px; 
        justify-content: center;
    }

    .ad360-stat-suffix {
        font-size: 30px; 
    }
}

/* Very Small Mobile (Max-width 480px) */
@media (max-width: 480px) {
    .ad360-gradient-title {
        font-size: 20px;
    }

    .ad360-stat-number {
        font-size: 34px; /* Aur chhota kiya taaki screen se bahar na jaye */
    }

    .ad360-stat-suffix {
        font-size: 25px;
    }
}

/* =========================================
       SECTION CONTAINER
    ========================================= */
#cta-section-1.ad360-cta-section {
    background: linear-gradient(110deg, #D40000 0%, #0029AA 100%);
    border-radius: 50px;
    padding: 70px 40px;
    text-align: center;
    color: #ffffff;
    box-sizing: border-box;
    gap: 32px;
    box-shadow: 0 20px 40px rgba(0, 41, 170, 0.15);
	max-width: 1200px;
	margin: 0 auto;
}
.ad360-cta-section {
	display: flex;
    flex-direction: column;
    align-items: center;
	width: 100%;
	gap: 24px;
}
    /* =========================================
       HEADLINE (GRADIENT TEXT)
    ========================================= */
 .ad360-cta-title {
    letter-spacing: -0.01em;
    margin: 0;
    color: #0f0f0f;
}
#cta-section-1 .ad360-cta-title {
	color: #ffffff;
}

    /* =========================================
       DESCRIPTION TEXT
    ========================================= */
    .ad360-cta-desc {
        font-size: 18px;
        line-height: 1.5;
        margin: 0;
        max-width: 850px;
        font-weight: 400;
		text-align: center;
    }
#cta-section-1 .ad360-cta-desc{
	color: #ffffff !important;
}

p.sec-text{
	    margin-top: 20px;
}
    /* =========================================
       BUTTON GROUP
    ========================================= */
    .ad360-btn-group {
        display: flex;
        gap: 16px;
        margin-top: 10px;
        flex-wrap: wrap; /* Wraps on very small screens */
    }

    /* 1. Primary Button (Gradient) */
   /*.ad360-btn-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 8px 16px;
    border-radius: 8px;
    background: linear-gradient(104deg, #d40000 0%, #0029aa 100%);
    color: #ffffff;
    font-size: 18px;
    font-weight: 600;
    text-decoration: none;
    transition: transform 0.2s ease, opacity 0.2s ease;
    border: none;
    cursor: pointer;
	gap: 10px;
}*/

    .ad360-btn-primary:hover {
        color: #ffffff;
		text-decoration: none;
    }
.ad360-btn-secondary:hover{
	color: #0f0f0f;
}

    /* 2. Secondary Button (Phone / Light Gray) */
   /*.ad360-btn-secondary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 8px 16px;
    border-radius: 8px;
    gap: 10px;
    background-color: #f0f0f0;
    border: none;
    color: #333333;
    font-size: 18px;
    font-weight: 600;
    text-decoration: none;
    transition: background 0.2s ease, transform 0.2s ease;
    cursor: pointer;
}*/

    /*.ad360-btn-secondary:hover {
        background-color: #e5e5e5;
        transform: translateY(-2px);
    }*/

    /*.ad360-btn-secondary svg {
        width: 20px;
        height: 20px;
        fill: currentColor;
    }*/

    /* =========================================
       RESPONSIVE MEDIA QUERIES
    ========================================= */
    @media (max-width: 810px) {
       .ad360-cta-section {
    margin: 4px auto;
    align-items: center;
    text-align: center ;
		   margin: 0;
		   padding: 0;
}
		#cta-section-1.ad360-cta-section {
			padding: 60px 24px;
			border-radius: 30px;
			gap: 24px;
		}

      /*.ad360-cta-title {
    font-size: 14px !important;
    line-height: 1.3;
    max-width: 800px;
}*/
  .ad360-desc-wrapper {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
	.sec-text {
    font-size: 15px ;
    max-width: 500px;
    text-align: center;
    /* display: flex; */
}

      .ad360-cta-desc {
    font-size: 16px;
    max-width: 800px;
    text-align: center;
}
        .ad360-btn-group {
         display:none!important;
           
        }
    }
@media (max-width: 1024px) {


      /*.ad360-cta-title {
    font-size: 32px !important;
    line-height: 1.3;
    max-width: 700px;
}*/
        .ad360-cta-desc {
            font-size: 14px;
        }
}
@media (max-width: 1200px) and (min-width:810px){
.sec-text{
	 margin-top:20px;
		display:none;
	}
}
/*  call to action end*/


/* card */


html, body {
    overflow-x: clip !important; 
}

.ad360-stack-section {
    overflow: visible !important;
}

/* =========================================
   1. MAIN LAYOUT
========================================= */
.ad360-stack-section {
    display: flex;
    gap: 40px;
    width: 100%;
    max-width: 1400px;
    margin: 0 auto;
    padding: 20px 0 0 0;
    box-sizing: border-box;
    position: relative;
    justify-content: space-evenly;
}
/* =========================================
   2. LEFT SIDE (Sticky Text)
========================================= */
.ad360-stack-left {
    flex: 1;
    max-width: 400px;
    
    /* Sticky Logic */
    position: -webkit-sticky;
    position: sticky;
    top: 40%; 
    height: fit-content;
}

.ad360-stack-section .ad360-heading {
    font-weight: 600;
    line-height: 1em;
    margin: 0;
    background-image: linear-gradient(94deg, var(--token-d740e542-a7f8-4fa8-8d82-14b3e2f72c80, rgb(212, 0, 0)) 0%, var(--token-0cbd564a-2170-47b7-8dbe-29300ae55864, rgb(0, 41, 170)) 98.2982738597973%, var(--token-e5e17deb-5e9d-44d5-81ea-49cd744eb462, rgb(33, 33, 33)) 98.37838937570383%);
    display: inline-block;
    background-clip: text;
    -webkit-text-fill-color: transparent;
	font-size: 32px;
}

.ad360-desc {
    font-size: 17px;
    line-height: 1.6;
}

/* =========================================
   3. RIGHT SIDE (Stacking Cards)
========================================= */
.ad360-stack-right {
    flex: 1.3;
    display: flex;
    flex-direction: column;
    width: 100%;
	max-width:550px;
    position: relative;
    /* Yaha overflow hidden nahi hona chahiye */
}

/* =========================================
   4. CARD DESIGN (Stacking Logic)
========================================= */
.ad360-stack-card {
    /* 🔥 STICKY MAGIC 🔥 */
    position: -webkit-sticky;
    position: sticky;
    top: 150px; /* Cards yaha aake rukenge */
    
    display: flex;
    align-items: flex-start;
    gap: 24px;
    
    /* Styling */
    background-color: #ffffff; /* White bg overlap ke liye zaruri hai */
    border: 1px solid #eeeeee;
    border-radius: 24px;
    padding: 40px;
    
    /* Scroll Space */
    margin-bottom: 40px; 
    
    /* Shadow */
    box-shadow: 0px 10px 40px rgba(0,0,0,0.08);
    
    /* Z-index */
    z-index: 1;
/* width:100%;
  max-width:550px; */
}

.ad360-stack-card:nth-child(1) { top: 100px; }
    .ad360-stack-card:nth-child(2) { top: 120px; } /* +40px */
    .ad360-stack-card:nth-child(3) { top: 140px; } /* +40px */
    .ad360-stack-card:nth-child(4) { top: 160px; } /* +40px */
    .ad360-stack-card:nth-child(5) { top: 180px; } /* +40px */
    .ad360-stack-card:nth-child(6) { top: 200px; } /* +40px */
    .ad360-stack-card:nth-child(7) { top: 220px; } /* +40px */


/* Card Number */
.ad360-num {
    font-size: 40px;
    font-weight: 700;
    line-height: 100%;
/*     font-family: "Inter", sans-serif; */
    flex-shrink: 0;
    letter-spacing: -0.02em;
    background-image: linear-gradient(124deg, #d40000 0%, #0029aa 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    color: transparent;
}

/* Text Content */
.ad360-content {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.ad360-card-head {
    font-size: 24px;
    font-weight: 500;
    margin: 0;
	letter-spacing: -0.03em;
    line-height: 1em;
}

.ad360-card-p {
    font-size: 16px;
    line-height: 1.5;
    margin: 0;
}

/* =========================================
   5. MOBILE FIX
========================================= */
@media (max-width: 900px) {
    .ad360-stack-section {
        flex-direction: column;
    }
    
	..ad360-card-head{
		font-size:20px;
	}
    .ad360-stack-left {
        position: relative;
        top: 0;
/*         margin-bottom: 40px; */
        max-width: 100%;
    }

    .ad360-stack-card {
        position: relative; 
        top: 0;
        margin-bottom: 20px;
    } 
}
@media (max-width: 768px) {
	.ad360-desc {
   text-align:center;
}
}




@media (max-width: 1200px) {
    .ad360-stack-section {
        gap: 40px;
    }
    
    .ad360-stack-left {
        max-width: 350px; 
    }
}


@media (max-width: 900px) {
    
    .ad360-stack-section {
        flex-direction: column; 
        align-items: center;    
    }

    /* --- STICKY TEXT ON MOBILE --- */
   .ad360-stack-left {
    max-width: 400px;
    text-align: left;
    position: -webkit-sticky !important;
    position: sticky !important;
    top: 0 !important;
    background-color: #ffffff;
    padding: 0;
    margin-bottom: 0;
}

    .ad360-stack-section .ad360-heading {
        text-align: center;
        margin-bottom: 0;
    }

    .ad360-desc {
    font-size: 15px;
    max-width: 450px;
		margin: 0;
}

    /* --- STICKY CARDS ON MOBILE --- */
    .ad360-stack-right {
        width: 100%;
        max-width: 500px; /* Full width */
        align-items: center; /* Cards ko center me rakhega */
    }

    .ad360-stack-card {
        width: 100%;
        
        /* 🔥 Re-enabling Sticky Overlay on Mobile 🔥 */
        position: -webkit-sticky !important;
        position: sticky !important;
        
        /* Top value badhayi taaki Text ke niche chipke */
        top: 100px !important; 
        
        margin-bottom: 20px !important; /* Stacking gap */
        padding: 30px 20px; /* Padding adjust */
    }

    /* Card ke andar ka content adjust */
    .ad360-content {
        gap: 8px;
    }

    .ad360-num {
        font-size: 32px;
    }

 .ad360-card-head {
    font-size: 20px;
    font-weight: 700;
}
}
/* card-end */


/* =========================================
       1. OUTER WRAPPER (Light Grey Background)
    ========================================= */
    .cta-box-section {
        width: 100%;
        background-color: #fff; /* Outer Background Color */
        padding: 14px 80px;
        box-sizing: border-box;
    }

    /* =========================================
       2. INNER CARD (White Rounded Box)
    ========================================= */
.cta-box-card {
    position: relative;
    width: 100%;
    max-width: 1200px;
    min-height: 350px;
    margin: 0 auto;
    background-color: #ffffff;
    border-radius: 32px;
    overflow: hidden;
    box-shadow: 0px 8px 32px rgba(0, 0, 0, 0.08);
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}
    /* Background Image Layer */
    .cta-box-bg {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 0;
    }

    .cta-box-bg img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center;
    }

    /* Content Overlay Layer */
.cta-box-content {
    position: relative;
    z-index: 1;
    max-width: 1200px;
    padding: 60px 30px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;
	
	    background: linear-gradient(281deg, #0029aa 0%, #d40000 100%);
    line-height: 160%;
    color: rgb(255, 255, 255);
}

    /* =========================================
       3. TEXT STYLES
    ========================================= */
.cta-main-title {
    font-size: 36px;
    font-weight: 700;
    line-height: 1.1;
    margin: 0;
    background-image: linear-gradient(114deg, #ffffff 0%, #ffffff 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    color: transparent;
}

    .cta-sub-desc {
        font-size: 17px;
        line-height: 1.6;
        margin: 0;
        max-width: 90%;
		color: #fff !important;
    }

    /* =========================================
       4. BUTTONS
    ========================================= */
    .cta-action-group {
        display: flex;
        gap: 20px;
        margin-top: 12px;
        flex-wrap: wrap;
        justify-content: center;
    }

    /* Primary Button (Gradient) */
   .cta-btn-gradient {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 46px;
    padding: 0 30px;
    background: linear-gradient(104deg, #d40000 0%, #0029aa 100%);
    color: #ffffff;
    font-size: 16px;
    font-weight: 600;
    border-radius: 8px;
    text-decoration: none;
    transition: transform 0.2s ease, opacity 0.2s;
    border: none;
    cursor: pointer;
}

    .cta-btn-gradient:hover {
        color: #ffffff;
    }

    /* Secondary Button (Grey) */
  .cta-btn-light {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    height: 46px;
    padding: 0 20px;
    background-color: #ededed;
    color: #212121;
    font-size: 16px;
    font-weight: 600;
    border-radius: 8px;
    text-decoration: none;
    transition: background 0.2s ease;
    border: 1px solid rgba(0, 0, 0, 0.1);
    cursor: pointer;
}
    .cta-btn-light:hover {
        background-color: #e0e0e0;
		color: #212121;
    }

    /* Icon Style */
    .cta-icon-svg {
        width: 22px;
        height: 22px;
        stroke: currentColor;
        stroke-width: 2;
        fill: none;
    }

    /* =========================================
       RESPONSIVE (Mobile)
    ========================================= */
    @media (max-width: 768px) {
        .cta-main-title {
            font-size: 36px;
        }
        
        .cta-sub-desc {
            font-size: 16px;
        }

        .cta-action-group {
            flex-direction: column;
            width: 100%;
        }

        .cta-btn-gradient, 
        .cta-btn-light {
            width: 100%; /* Full width on mobile */
        }
}

/* =========================================
   🔥 RESPONSIVE FIXES (Add at Bottom) 🔥
========================================= */

/* 1. Tablet & Small Laptops (Max-width 1024px) */
@media (max-width: 1024px) {

    /* Font thoda chhota kiya taaki break na ho */
    .cta-main-title {
        font-size: 34px !important;
        line-height: 1.3;
    }

    .cta-sub-desc {
        font-size: 16px !important;
        max-width: 100%;
    }
}

/* 2. Mobile Phones (Max-width 768px) */
@media (max-width: 768px) {

    .cta-box-section {
        padding: 0;
    }

    .cta-box-content {
        padding: 0 16px;
    }

    .cta-main-title {
        font-size: 28px !important;
    }

    .cta-sub-desc {
        font-size: 15px !important;
    }

    .cta-action-group {
        flex-direction: column !important;
        width: 100%;
        gap: 16px;
    }

    .cta-btn-gradient, 
    .cta-btn-light {
        width: 100% !important;
        justify-content: center;
    }
}

.svg-star-icon-wrap{
	--1m6trwb: 1;
    --21h8s6: #fff700;
    --pgex8v: 1.5;
    flex: 0 0 auto;
    height: var(--framer-aspect-ratio-supported, 12px);
    position: relative;
    width: 12px;
}
.ad360-bg-arrow-circle{
	cursor: pointer;
    height: min-content;
    overflow: var(--overflow-clip-fallback, clip);
    will-change: var(--framer-will-change-override, transform);
    flex-flow: row;
    place-content: center;
    align-items: center;
    gap: 10px;
    width: min-content;
    padding: 12px;
    display: flex;
    position: relative;
}
.svg-arrow-bg-icon {
    height: 24px;
    flex: none;
    width: 24px;
    position: relative;
    --18mrqx2: rgb(255, 255, 255);
}

.svg-arrow-bg-icon-02 {
    height: 24px;
    flex: none;
    width: 24px;
    position: relative;
    --18mrqx2: rgb(0 0 0);
}

svg.telephone-icon {
    height: var(--framer-aspect-ratio-supported, 24px);
    flex: none;
    width: 24px;
    position: relative;
}

.red-banner1{
	position: absolute;
    width: 100%;
    height: 100%;
    /*clip-path: polygon(0 0, 100% 0%, 100% 64%, 0% 100%);*/
    background: #ee3636;
}
.ad360-form-card{
	position: relative;
}
@media screen and (max-width: 809px) {
	/*.ad360-container{
		padding: 60px 16px;
		margin-top: 41px;
	}*/
}

@media screen and (max-width: 767px) {
	body{
		overflow-x: hidden;
	}
	.cta-box-card {
		min-height: 220px;
	}
	.heading-wrapper-icon{
		justify-content: center;
	}
}

.cta-btn-wrapper {
    flex: 0 0 auto;
    height: auto;
    position: relative;
    width: auto;
}
.cta-btn-wrapper .cta-btn {
    place-content: center;
    align-items: center;
    cursor: pointer;
    display: flex;
    flex-flow: row;
    gap: 10px;
    height: min-content;
    overflow: hidden;
    padding: 10px 20px;
    position: relative;
    text-decoration: none;
    width: min-content;
    will-change: var(--framer-will-change-override, transform);
}
.cta-btn-wrapper .cta-btn-text-wrap {
    place-content: center;
    align-items: center;
    display: flex;
    flex: 0 0 auto;
    flex-flow: row;
    gap: 10px;
    height: min-content;
    overflow: hidden;
    padding: 0px;
    position: relative;
    width: min-content;
}
.cta-btn-wrapper .cta-btn-text {
    flex: 0 0 auto;
    height: auto;
    position: relative;
    white-space: pre;
    width: auto;
}
.cta-btn-wrapper .cta-btn-icon {
    flex: 0 0 auto;
    height: 16px;
    position: relative;
    width: 16px;
}
.cta-btn-wrapper .cta-btn.hover{
	gap: 10px;
    padding: 0px;
}
.cta-btn-wrapper .cta-btn.hover .cta-btn-text-wrap.gbtn-text{
	padding: 10px 15px;
}
.cta-btn-wrapper .cta-btn.hover .cta-btn-text-wrap.gbtn-icon{
	align-self: stretch;
    height: auto;
    padding: 10px 15px;
}

.cta-btn-wrapper .cta-btn {
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.cta-btn-text-wrap {
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.heading-wrapper-icon{
	display: flex;
    align-items: center;
    gap: 10px;
	margin-bottom: 20px;
}
.heading-wrapper-icon img{
	width: 30px;
	height: 30px;		
}
.bullet-design .services-card-layout{
	grid-row-gap: 10px;
}
p.cta-sub-desc {
    color: white !important;
}


/* grid cards section starts here */


.services-card-container {
    width: 100%;
    padding: 20px;
    box-sizing: border-box;
}

.services-card-heading {
    text-align: center;
    margin-bottom: 10px;
}

.services-card-grid {
    width: 100%;
    max-width: 1300px;
    margin: 0 auto 80px auto;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    grid-column-gap: 40px;
    grid-row-gap: 40px;
    justify-content: center;
}


.main-card {
    padding: 25px;
    background: #e1e1e180;
    height: 250px;
    position: relative;
    overflow: hidden;
}

.ad360-num-01 {
	position: absolute;
    top: -20px;
    left: -20px;
    padding: 0px;
    font-size: 110px;
    font-weight: 900;
    color: #E4E4E4;
    -webkit-text-stroke: 1px rgba(255,255,255,0.08);
    transform: rotate(90deg);
    z-index: 0;
}
.ad360-num-all {
    position: absolute;
    top: -10px;
    left: -30px;
    padding: 0px;
    font-size: 110px;
    font-weight: 900;
    color: #E4E4E4;
    -webkit-text-stroke: 1px rgba(255,255,255,0.08);
    transform: rotate(90deg);
    z-index: 0;
}

.services-card-box {
    position: relative;
    top: 60%;
    z-index: 2;
}

.services-card-box h3 {
    margin-top: 0;
    font-size: 1.5rem;
}

@media (max-width: 480px) {
    .services-card-grid {
        grid-template-columns: 1fr; 
		margin: 0;
    }
	
	.services-card-box {
		top: 60%;
	}
    
    .main-card {
        height: auto;
        min-height: 200px;
    }
}

/* grid cards section ends here */