/* Import Theme */
 @import "./theme.css";

 /* Responsive Styles */

 /* Mobile (portrait & small devices) */
 @media (max-width: 767px) {
     body {
         padding: 0px;
         display: block;
     }

     .btn,
     .tag {
         font-size: 12px;
         padding: 10px 20px;
     }

     .tag-light {
         font-size: 12px;
     }

     .hero h1.brand-style-1,
     h1.brand-style-1,
     .about-us-section .heading,
     .partners-section h1.heading,
     .cta h1,
     .app-developers-hero .hero-content h1,
     .monetization .main-heading,
     .careers-hero h1.brand-style-1,
     .opportunities .main-heading,
     .case-studies-hero h1.brand-style-1,
     .case-studies .slide h1,
     .policy .section-header h1 {
         font-size: 35px;
         line-height: 45px;
     }

     .hero .tag,
     .hero .btn,
     .transforming-workflow-card,
     .sdk,
     .careers-hero .tag,
     .careers-hero .hero-actions,
     .opportunities .job-card,
     .case-studies-hero .tag {
         margin: 0 auto;
     }

     .hero,
     .why-adelement-content,
     .features-section,
     .how-it-works,
     .how-it-works-content,
     .publishers-stats,
     .about-us-section,
     .about-us-section-content,
     .app-developers-hero .hero-content,
     .ad-formats .interstitial-section,
     .ad-formats .rewarded-video-section,
     .sdk .sdk-comparison,
     .case-studies .case-study-content,
     .case-studies-hero .container {
         flex-direction: column;
     }

     .about-us-section,
     .how-it-works,
     .why-adelement,
     .transforming-workflow-card,
     .sdk,
     .marketplace .container,
     .monetization .container,
     .opportunities .job-card,
     .opt-out, .advertising-policy {
         width: 93%;
     }
     
     .careers-hero .hero-actions{
        display: block;
     }

     .monetization .description img,
     .case-studies-hero .hero-image img{
        width: 100%;
     }
     .monetization .content-column,
     .case-studies .slide h1{
        z-index: 1;
        position: relative;
     }

     .case-studies-hero .hero-content{
        text-align: center; 
        margin-bottom: 0px;
     }
     .case-studies-hero .hero-images{
        display: block;
        height: auto;
    }
     .case-studies-hero .container{
        /* background-size: 60%;
        background-position: bottom; */
        background-image: none;
     }
     .case-studies .challenge-approach{
        border-right: none;
     }

     header .nav-links {
         position: fixed;
         top: 55px;
         right: -100%;
         background: #fff;
         box-shadow: 0px 20px 50px 0px rgba(0, 0, 0, 0.1);
         -webkit-box-shadow: 0px 20px 50px 0px rgba(0, 0, 0, 0.1);
         -moz-box-shadow: 0px 20px 50px 0px rgba(0, 0, 0, 0.1);
         width: 100%;
         height: 100vh;
         flex-direction: column;
         align-items: start;
         padding: 40px 20px;
         gap: 20px;
         transition: right 0.3s ease-in-out;
     }

     header .nav-links.active {
         right: 0;
     }

     header .menu-toggle {
         display: flex;
     }

     header .contact-btn {
         display: none;
         /* You can move it into nav-links if needed */
     }

     .navbar {
         /* flex-direction: column; */
         align-items: flex-start;
         gap: 20px;
     }

     .nav-links {
         flex-direction: column;
         align-items: flex-start;
         width: 100%;
         gap: 10px;
         margin-left: 0;
     }

     .nav-links a {
         padding: 5px 0;
     }

     .contact-btn {
         margin-left: 0;
         width: 100%;
         text-align: center;
     }

     .hero,
     .careers-hero {
         padding: 60px 0;
     }

     .hero h1,
     .careers-hero h1 {
         font-size: 50px;
     }

     .hero p,
     .careers-hero p {
         font-size: 16px;
     }

     .hero .container,
     .careers-hero .container {
         padding: 50px 0;
         flex-direction: column;
     }

     .hero-actions,
     .careers-hero .hero-actions {
         /* flex-direction: column; */
         width: 100%;
     }

     .careers-hero .container {
         background: #ffffffcc;
     }

     .careers-hero,
     .careers-hero .container {
         height: unset;
     }

     .opportunities .job-card{
        flex-direction: column;
        justify-content: flex-start;
        align-items: flex-start;
     }
     .opportunities .open-modal-btn{
        margin-top: 10px;
     }
     .opportunities .modal-header h4{
        font-size: 14px;
     }
     .opportunities .modal-header h2{
        font-size: 35px;
        line-height: 45px;
        margin-bottom: 10px;
     }

     /* .btn {
        width: 100%;
    } */

     .hero-images {
         display: flex;
         width: 100%;
         max-width: 100% !important;
         grid-template-columns: 1fr;
         grid-auto-rows: 200px;
         position: relative;
         z-index: -1;
         /* right: -90px;
         bottom: 150px;
         transform: scale(0.5); */
     }

     .hero-image:nth-child(1),
     .hero-image:nth-child(4) {
         grid-row: auto;
         /* Reset grid-row span */
         height: 200px;
         /* Reset height */
     }

     .hero {
         height: 160vh;
         flex-direction: column;
         text-align: center;
     }


     .hero-content,
     .careers-hero .hero-content {
         max-width: 100%;
         margin-bottom: 80px;
         text-align: center;
     }

     .hero-content {
         text-align: center;
     }


     .hero-images,
     .careers-hero .hero-images {
         justify-content: center;
     }

     .contact-card .card-content {
         /* Stacks the columns vertically */
         flex-direction: column;
     }

     .contact-card {
         padding: 32px;
     }

     .contact-card .info-column h1 {
         font-size: 2.5rem;
     }


     .why-adelement-content {
         flex-direction: column;
         text-align: center;
     }

     .why-adelement .illustration {
         order: 1;
         /* Show illustration first */
         min-height: 350px;
         /* Reduce height */
         margin-bottom: 30px;
         width: 100%;
         flex-direction: column;
     }

     .why-adelement .content {
         order: 2;
         /* Show content second */
         padding-left: 0;
         display: flex;
         flex-direction: column;
         align-items: center;
     }

     .why-adelement .description {
         max-width: 500px;
         /* Allow a bit more width in the center */
     }

     /* Reposition tags for mobile */
     .why-adelement .illustration .tag {
         position: absolute;
         /* Change to relative for stacking */
         width: fit-content;
         margin: 8px auto;
         /* Center the tags */
     }

     .why-adelement-content .tag:nth-of-type(1),
     .tag:nth-of-type(2),
     .tag:nth-of-type(3),
     .tag:nth-of-type(4) {
         top: auto;
         left: auto;
         right: auto;
         bottom: auto;
     }

     .why-adelement .why-adelement-img {
         display: block;
     }

     /* Hide central image on small screens */

     /* Adjust decorative circles */
     .why-adelement .pink-circle {
         left: calc(100% - 270px);
     }

     .why-adelement .blue-circle {
         left: -10px;
         top: 850px;
     }

     .why-adelement .yellow-circle {
         left: -50px;
         top: -50px;
     }

     .how-it-works .illustration {
         left: -55%;
         transform: scale(0.6);
     }

     .how-it-works .blue-circle {
         top: 110vh;
     }

     .testimonial-section h1.brand-style-1 {
         width: 100%;
         display: inline-block;
         margin: 0 auto;
         padding: 0px 40px;
         white-space: normal;
     }

     .testimonial-section .carousel-wrap {
         margin: 0 auto;
     }

     .testimonial-section .controls {
         top: 100%;
     }

     .testimonial-section .slide {
         --wslide: unset;
         width: 96%;
     }

     .features-grid {
         grid-template-columns: 1fr;
     }

     .footer-grid {
         grid-template-columns: 1fr;
     }

     .footer-col {
         text-align: center;
     }

     .social-icons {
         justify-content: center;
     }

     .cta h2 {
         font-size: 24px;
     }

     .footer-content {
         flex-direction: column;
         text-align: center;
     }

     .footer-col.about,
     .footer-col.links {
         max-width: 100%;
         flex: 1 1 100%;
     }

     .footer-about {
         max-width: 100%;
         margin: 0 auto 40px;
     }
     .app-developers-hero{
        padding: 60px 0px 0px 0;
     }
     .app-developers-hero .hero-content {
         padding: 20px;
     }

     .app-developers-hero .hero-content p {
         font-size: 18px;
     }

     .app-developers-hero .content {
         padding-bottom: 40px;
         text-align: left;
     }

     .app-developers-hero .hero-image img {
         max-width: 250px;
     }

     .app-developers-hero .yellow-circle {
         top: calc(100% + 400px);
     }

     .transforming-workflow-grid {
         grid-template-columns: 1fr;
     }

     .marketplace .marketplace-card {
         padding: 40px 25px;
     }

     .marketplace .marketplace-header h2 {
         font-size: 2rem;
     }

     .marketplace .flow-row {
         flex-direction: column;
         gap: 10px;
     }

     /* For mobile, use a vertical arrow instead of horizontal */
     .marketplace .arrow {
         width: 0px;
         height: 20px;
         border-top: none;
         border-left: 1px dashed var(--border-color-white-20);
         margin: 5px 0;
     }

     .marketplace .arrow::after {
         content: '▼';
         left: 50%;
         top: 60%;
         transform: translateX(-55%);
     }

     .marketplace .vertical-connector::after {
         content: '▼';
         left: 50%;
         top: 80%;
         transform: translateX(-55%);
         color: var(--border-color-white-20);
         position: absolute;
         font-size: 12px;
     }

     .marketplace .horizontal-connector {
         width: 80%;
         top: 0px;
         display: none;
     }

     .marketplace .categories {
         margin-top: 0px;
         align-items: center;
         padding: 10px;
         border: 1px solid var(--border-color-white-20);
         border-radius: 20px;
     }

     .marketplace .vertical-connector {
         display: block;
         margin: 0 auto;
         left: unset;
         bottom: unset;
     }

     .ad-formats .interstitial-section .phone-mockup {
         right: 0px;
     }

     .ad-formats .rewarded-video-section .decorative-circles {
         top: -50px;
     }
     .monetization .monetization-card{
        display: block;
     }

 }

 /* Tablet & small laptops */
 @media (min-width: 768px) and (max-width: 1023px) {
     body {
         /* padding: 15px;
         display: block; */
     }

     .hero {
         flex-direction: column;
         align-items: center;
         text-align: center;
     }

     .hero-content,
     .hero-images {
         /* flex: none; */
         /* Disable flex growing/shrinking */
         width: 100%;
         /* Take full width */
     }

     .hero h1 {
         font-size: 50px;
     }

     .hero-actions {
         justify-content: flex-start;
     }

     .careers-hero .container {
         background: #ffffffcc;
     }

     .careers-hero,
     .careers-hero .container {
         height: unset;
     }

     .nav-links {
         gap: 20px;
     }

     .case-studies-hero .hero-content{
        text-align: left;  
     }
     .case-studies-hero .container{
        background-size: 50%;
        background-position: bottom;
     }

     header .nav-links {
         position: fixed;
         top: 55px;
         right: -100%;
         background: #fff;
         box-shadow: 0px 20px 50px 0px rgba(0, 0, 0, 0.1);
         -webkit-box-shadow: 0px 20px 50px 0px rgba(0, 0, 0, 0.1);
         -moz-box-shadow: 0px 20px 50px 0px rgba(0, 0, 0, 0.1);
         width: 250px;
         height: 100vh;
         flex-direction: column;
         align-items: start;
         padding: 40px 20px;
         gap: 20px;
         transition: right 0.3s ease-in-out;
     }

     header .nav-links.active {
         right: 0;
     }

     header .menu-toggle {
         display: flex;
     }

     header .contact-btn {
         display: none;
         /* You can move it into nav-links if needed */
     }

     .how-it-works .illustration {
         left: -30%;
         transform: scale(0.8);
     }

     .app-developers-hero .hero-content {
         padding: 40px;
     }

     .app-developers-hero .hero-content h1 {
         font-size: 85px;
         line-height: 95px;
     }

     .app-developers-hero .hero-content p {
         font-size: 20px !important;
     }

     .app-developers-hero .content {
         padding-bottom: 40px;
     }

     .app-developers-hero .hero-image img {
         max-width: 300px;
     }

     .transforming-workflow-grid {
         grid-template-columns: 1fr 1fr;
     }

 }

 /* Laptop */
 @media (min-width: 1024px) and (max-width: 1439px) {
     body {
         /* Styles for laptops */
     }
     .hero .container,
     header .container,
     .container,
     .why-adelement, .why-adelement .container, .why-adelement .background-circle,
     .how-it-works, .how-it-works .container, .how-it-works-content,
     .about-us-section, .about-us-section .container, .about-us-section-content,
     .partners-section .content-wrapper, .contact-card, .footer-content, .footer-bottom,
     .app-developers-hero, .app-developers-hero .background-circle,
     .marketplace .container, .marketplace-card, .marketplace .background-circle, .monetization .container, 
     .ad-formats .container, .ad-formats .interstitial-section, .ad-formats .rewarded-video-section, 
     .sdk .sdk-section, .careers-hero .container, .opportunities .opportunities-container, .opportunities .modal,
     .case-studies-hero .container, .case-studies .slider-container, .case-studies .slide,
     .case-studies .background-circle, .policy .privacy-container, .opt-out, .advertising-policy,.policy .section-header{
         max-width: var(--max-container);
     }
     .app-developers-hero .hero-content p{
        font-size: 24px !important;
     }
 }

 /* Desktop (large screens) */ 
 @media (min-width: 1440px) and (max-width: 1919px) {
     body {
         /* Styles for desktops */
     }
     .hero .container,
     header .container,
     .container,
     .why-adelement, .why-adelement .container, .why-adelement .background-circle,
     .how-it-works, .how-it-works .container, .how-it-works-content,
     .about-us-section, .about-us-section .container, .about-us-section-content,
     .partners-section .content-wrapper, .contact-card, .footer-content, .footer-bottom,
     .app-developers-hero, .app-developers-hero .background-circle,
     .marketplace .container, .marketplace-card, .marketplace .background-circle, .monetization .container, 
     .ad-formats .container, .ad-formats .interstitial-section, .ad-formats .rewarded-video-section, 
     .sdk .sdk-section, .careers-hero .container, .opportunities .opportunities-container, .opportunities .modal,
     .case-studies-hero .container, .case-studies .slider-container, .case-studies .slide,
     .case-studies .background-circle, .policy .privacy-container, .opt-out, .advertising-policy,.policy .section-header{
         max-width: 1200px;
     }
     .app-developers-hero .hero-content p{
        font-size: 24px !important;
     }
 }
 @media (min-width: 1920px) {
    body {
        /* Styles for desktops */
    }
    .hero .container,
    header .container,
    .container,
    .why-adelement, .why-adelement .container, .why-adelement .background-circle,
    .how-it-works, .how-it-works .container, .how-it-works-content,
    .about-us-section, .about-us-section .container, .about-us-section-content,
    .partners-section .content-wrapper, .contact-card, .footer-content, .footer-bottom,
    .app-developers-hero, .app-developers-hero .background-circle,
    .marketplace .container, .marketplace-card, .marketplace .background-circle, .monetization .container, 
    .ad-formats .container, .ad-formats .interstitial-section, .ad-formats .rewarded-video-section, 
    .sdk .sdk-section, .careers-hero .container, .opportunities .opportunities-container, .opportunities .modal,
    .case-studies-hero .container, .case-studies .slider-container, .case-studies .slide,
    .case-studies .background-circle, .policy .privacy-container, .opt-out, .advertising-policy,.policy .section-header{
        max-width: var(--max-container-lg);
    }
    .app-developers-hero .hero-content p{
       font-size: 24px !important;
    }
}