/* ============================================================
   THE DIGITAL NEWS
   Responsive Stylesheet v1.0
   Website: https://thedigitalnews24by7.in
============================================================ */


/* ============================================================
   LARGE DESKTOP
   1400px and above
============================================================ */

@media (min-width:1400px){

    .container{

        max-width:1320px;

    }

    .hero h1{

        font-size:4rem;

    }

}


/* ============================================================
   DESKTOP
   1200px
============================================================ */

@media (max-width:1200px){

    .container{

        width:94%;

    }

    .hero-grid{

        gap:40px;

    }

}


/* ============================================================
   SMALL LAPTOP
============================================================ */

@media (max-width:992px){

    h1{

        font-size:2.6rem;

    }

    h2{

        font-size:2rem;

    }

    h3{

        font-size:1.4rem;

    }

    .hero{

        padding:70px 0;

    }

    .hero-grid{

        grid-template-columns:1fr;

        text-align:center;

    }

    .hero h1{

        font-size:2.8rem;

    }

    .grid-4{

        grid-template-columns:repeat(2,1fr);

    }

    .grid-3{

        grid-template-columns:repeat(2,1fr);

    }

    .footer-grid{

        grid-template-columns:1fr 1fr;

    }

}


/* ============================================================
   TABLETS
============================================================ */

@media (max-width:768px){

    .navbar{

        display:flex;

        flex-direction:row;

        justify-content:space-between;

        align-items:center;

    }

    nav ul{

        flex-wrap:wrap;

        justify-content:center;

        gap:18px;

    }

    .logo{

        justify-content:center;

    }

    .hero{

        padding:60px 0;

    }

    .hero h1{

        font-size:2.3rem;

    }

    .hero p{

        font-size:1rem;

    }

    .grid-2{

        grid-template-columns:1fr;

    }

    .grid-3{

        grid-template-columns:1fr;

    }

    .grid-4{

        grid-template-columns:1fr;

    }

    .section{

        padding:60px 0;

    }

    .btn{

        width:100%;

        text-align:center;

    }

    input,
    textarea{

        font-size:16px;

    }

    .footer-grid{

        grid-template-columns:1fr;

        text-align:center;

    }

}


/* ============================================================
   LARGE MOBILE
============================================================ */

@media (max-width:576px){

    body{

        font-size:15px;

    }

    .container{

        width:92%;

    }

    .hero{

        padding:50px 0;

    }

    .hero h1{

        font-size:2rem;

        line-height:1.25;

    }

    h2{

        font-size:1.7rem;

    }

    h3{

        font-size:1.3rem;

    }

    .card{

        padding:22px;

    }

    .logo img{

        width:55px;

    }

    .logo-text{

        font-size:1.1rem;

    }

    nav ul{

        gap:12px;

    }

    .btn{

        padding:14px 18px;

        font-size:15px;

    }

}


/* ============================================================
   SMALL MOBILE
============================================================ */

@media (max-width:420px){

    .hero h1{

        font-size:1.8rem;

    }

    h2{

        font-size:1.5rem;

    }

    h3{

        font-size:1.2rem;

    }

    p{

        font-size:15px;

    }

    .card{

        padding:18px;

    }

    .section{

        padding:50px 0;

    }

    .footer-bottom{

        font-size:14px;

    }

}


/* ============================================================
   EXTRA SMALL DEVICES
============================================================ */

@media (max-width:360px){

    .hero h1{

        font-size:1.6rem;

    }

    .logo{

        flex-direction:column;

        gap:8px;

    }

    .logo-text{

        text-align:center;

        line-height:1.3;

    }

    nav ul{

        gap:10px;

    }

}


/* ============================================================
   LANDSCAPE MOBILE
============================================================ */

@media (max-height:500px) and (orientation:landscape){

    .hero{

        padding:35px 0;

    }

}


/* ============================================================
   HIGH RESOLUTION DISPLAYS
============================================================ */

@media (-webkit-min-device-pixel-ratio:2),
(min-resolution:192dpi){

    img{

        image-rendering:auto;

    }

}


/* ============================================================
   PRINT
============================================================ */

@media print{

    header,
    footer,
    nav,
    .btn{

        display:none;

    }

    body{

        background:#fff;

        color:#000;

    }

    .container{

        width:100%;

    }

}

/* ==========================================
   MOBILE MENU
========================================== */


@media (max-width:768px){

    .logo img {

        width: 100px;

    }

    .menu-toggle{

        display:flex;

        align-items:center;

        justify-content:center;

    }

    #main-nav{

        display:none;

        width:100%;

        margin-top:20px;

    }

    #main-nav.active{

        display:block;

    }

    #main-nav ul{

        flex-direction:column;

        align-items:center;

    }

    .navbar{

        flex-wrap:wrap;

    }

    .navbar > .btn{

        width:100%;

        margin-top:20px;

    }

}

/* ==========================================
   FOOTER RESPONSIVE
========================================== */

@media (max-width:768px){

    .footer-column{

        align-items:center;

        text-align:center;

    }

    .footer-links,
    .footer-contact{

        width:100%;

    }

    .social-links{

        display:flex;

        justify-content:center;

    }

}

/* ==========================================
   HERO RESPONSIVE
========================================== */

@media (max-width:768px){

    .hero-buttons{

        flex-direction:column;

    }

    .hero-buttons .btn{

        justify-content:center;

        width:100%;

    }

}

/* ==========================================
   INSTAGRAM RESPONSIVE
========================================== */

@media(max-width:768px){

    .integration-features{

        grid-template-columns:1fr;

    }

}

/* ==========================================
   PAGE HEADER RESPONSIVE
========================================== */

@media (max-width:768px){

    .page-header{

        padding:60px 20px;

    }

    .page-header h1{

        font-size:2rem;

    }

    .page-header p{

        font-size:1rem;

    }

}

/* ==========================================================
   CONTACT PAGE
========================================================== */

@media (max-width: 992px) {

    .contact-grid {

        grid-template-columns: 1fr;

    }

    .contact-details {

        position: static;

    }

}

@media (max-width: 768px) {

    .contact-form,

    .contact-details {

        padding: 1.5rem;

    }

}

/* ==========================================================
   GET IN TOUCH
========================================================== */

@media (max-width:992px){

    .contact-card-grid{

        grid-template-columns:repeat(2,1fr);

    }

}

@media (max-width:768px){

    .contact-card-grid{

        grid-template-columns:1fr;

    }

}

/* ==========================================================
   CONTACT FORM
========================================================== */

/* ==========================================================
   Large Tablet
========================================================== */

@media (max-width: 1199px) {

    .contact-layout {

        grid-template-columns: 1.45fr 1fr;

        gap: 32px;

    }

}

/* ==========================================================
   Tablet
========================================================== */

@media (max-width: 991px) {

    .contact-layout {

        grid-template-columns: 1fr;

    }

    .contact-form-card,
    .contact-team-card {

        padding: 32px;

    }

    .contact-team-card {

        margin-top: 0;

    }

}

/* ==========================================================
   Mobile Landscape
========================================================== */

@media (max-width: 767px) {

    .contact-form-grid {

        grid-template-columns: 1fr;

        gap: 20px;

    }

    .form-group-full {

        grid-column: auto;

    }

    .contact-form-card,
    .contact-team-card {

        padding: 28px 24px;

    }

    .contact-submit-btn {

        width: 100%;

        min-width: 100%;

    }

    .contact-team-item {

        gap: 16px;

    }

}

/* ==========================================================
   Small Mobile
========================================================== */

@media (max-width: 575px) {

    .contact-form-card,
    .contact-team-card {

        padding: 24px 20px;

        border-radius: var(--radius);

    }

    .contact-team-icon {

        width: 46px;

        height: 46px;

    }

    .contact-team-icon .material-symbols-outlined {

        font-size: 22px;

    }

    .contact-privacy-note {

        padding: 16px;

        gap: 12px;

    }

    .contact-privacy-note p {

        font-size: 0.9rem;

    }

    textarea.form-control {

        min-height: 160px;

    }

}

/* ==========================================================
   Extra Small Devices
========================================================== */

@media (max-width: 420px) {

    .contact-form-card,
    .contact-team-card {

        padding: 20px 16px;

    }

    .form-control {

        padding: 13px 16px;

        font-size: 0.95rem;

    }

    .contact-submit-btn {

        min-height: 52px;

    }

    .contact-team-item {

        align-items: flex-start;

    }

}

/* ==========================================================
   LEGAL PAGES RESPONSIVE
   Privacy Policy | Terms | Disclaimer | Refund | Shipping
========================================================== */

/* ==========================================================
   TABLETS
========================================================== */

@media (max-width: 991px) {

    .policy-wrapper{

        max-width:100%;

    }

    .policy-section h2{

        font-size:1.55rem;

    }

}


/* ==========================================================
   MOBILE
========================================================== */

@media (max-width: 767px) {

    .policy-meta{

        padding:18px;

        margin-bottom:32px;

        font-size:.95rem;

    }

    .policy-section{

        margin-bottom:40px;

        padding-bottom:32px;

    }

    .policy-section h2{

        font-size:1.4rem;

        margin-bottom:16px;

    }

    .policy-section p{

        line-height:1.8;

    }

    .policy-list{

        padding-left:20px;

    }

    .policy-highlight{

        margin-top:40px;

        padding:24px 20px;

    }

}


/* ==========================================================
   SMALL MOBILE
========================================================== */

@media (max-width: 575px) {

    .policy-meta{

        padding:16px;

    }

    .policy-section{

        margin-bottom:32px;

        padding-bottom:28px;

    }

    .policy-section h2{

        font-size:1.3rem;

    }

    .policy-highlight{

        padding:20px 18px;

    }

}


/* ==========================================================
   EXTRA SMALL DEVICES
========================================================== */

@media (max-width: 420px) {

    .policy-meta{

        font-size:.9rem;

        line-height:1.7;

    }

    .policy-section h2{

        font-size:1.2rem;

    }

    .policy-section p,

    .policy-list li,

    .policy-highlight p{

        font-size:.95rem;

    }

}

/* ==========================================================
   FAQ
========================================================== */

@media (max-width:768px){

    .faq-question{
        padding:18px;
        font-size:.95rem;
    }

    .faq-answer{
        padding:0 18px 18px;
    }

    .faq-answer p{
        font-size:.95rem;
    }

}

/* ==========================================================
   ADVERTISEMENTS
========================================================== */

@media(max-width:768px){

    .section-heading{

        margin-bottom:45px;

    }

    .section-heading h2{

        font-size:2rem;

    }

    .feature-grid{

        grid-template-columns:1fr;

        gap:20px;

    }

    .feature-card{

        padding:25px;

    }

}

/* ==========================================================
   FOOTER - TABLET (992px)
========================================================== */

@media (max-width: 992px){

    .footer-top{
        grid-template-columns:1fr;
        gap:50px;
        padding:60px 0;
    }

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

    .footer-description{
        margin:0 auto 30px;
        max-width:600px;
    }

    .footer-buttons{
        justify-content:center;
    }

    .footer-links-wrapper{
        grid-template-columns:repeat(3,1fr);
        gap:35px 25px;
    }

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

}

/* ==========================================================
   FOOTER - MOBILE (768px)
========================================================== */

@media (max-width:768px){

    .site-footer{
        margin-top:60px;
    }

    .footer-top{
        padding:50px 0;
    }

    .footer-brand img{
        width:140px;
    }

    .footer-brand h3{
        font-size:26px;
    }

    .footer-tagline{
        font-size:16px;
    }

    .footer-description{
        font-size:15px;
        line-height:1.8;
    }

    .footer-buttons{
        flex-direction:column;
        align-items:center;
    }

    .footer-buttons .btn{
        width:100%;
        max-width:320px;
        justify-content:center;
    }

    .footer-links-wrapper{
        grid-template-columns:repeat(2,1fr);
        gap:35px 20px;
    }

    .footer-column h4{
        font-size:17px;
    }

    .footer-column li{
        margin-bottom:12px;
    }

    .footer-social{
        justify-content:flex-start;
    }

}

/* ==========================================================
   FOOTER - SMALL MOBILE (576px)
========================================================== */

@media (max-width:576px){

    .footer-top{
        padding:40px 0;
    }

    .footer-links-wrapper{
        grid-template-columns:1fr;
        gap:30px;
    }

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

    .footer-description{
        max-width:100%;
    }

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

    .footer-column h4::after{
        left:50%;
        transform:translateX(-50%);
    }

    .footer-contact li{
        justify-content:center;
        text-align:left;
    }

    .footer-social{
        justify-content:center;
        margin-top:20px;
    }

    .footer-bottom{
        padding:22px 0;
    }

    .footer-bottom p{
        font-size:14px;
        line-height:1.6;
    }

}

/* ==========================================================
   SERVICES PAGE RESPONSIVE
========================================================== */

/* ==========================================================
   Large Devices (≤1400px)
========================================================== */

@media (max-width:1400px){

    .hero-content h1{
        font-size:3.2rem;
    }

}

/* ==========================================================
   Large Laptops (≤1200px)
========================================================== */

@media (max-width:1200px){

    .hero-grid{

        grid-template-columns:1fr;

        gap:60px;

    }

    .hero-content{

        max-width:100%;

        text-align:center;

        margin:0 auto;

    }

    .hero-description{

        max-width:760px;

        margin-left:auto;

        margin-right:auto;

    }

    .hero-buttons{

        justify-content:center;

    }

    .hero-icons{

        max-width:700px;

        margin:0 auto;

    }

    .service-layout{

        grid-template-columns:1fr;

        gap:40px;

    }

    .service-sidebar{

        position:static;

    }

    .cta-wrapper{

        grid-template-columns:1fr;

        gap:45px;

    }

}

/* ==========================================================
   Tablets (≤992px)
========================================================== */

@media (max-width:992px){

    .hero-section{

        padding:80px 0;

    }

    .hero-content h1{

        font-size:2.8rem;

    }

    .hero-stats{

        grid-template-columns:repeat(2,1fr);

    }

    .services-grid{

        grid-template-columns:repeat(2,minmax(0,1fr));

    }

    .industries-grid{

        grid-template-columns:repeat(2,minmax(0,1fr));

    }

    .technology-grid{

        grid-template-columns:repeat(2,minmax(0,1fr));

    }

    .process-grid{

        grid-template-columns:repeat(2,minmax(0,1fr));

    }

    .process-timeline{

        grid-template-columns:repeat(2,minmax(0,1fr));

    }

}

/* ==========================================================
   Mobile Landscape (≤768px)
========================================================== */

@media (max-width:768px){

    .hero-section{

        padding:70px 0;

    }

    .hero-content{

        text-align:left;

    }

    .hero-content h1{

        font-size:2.3rem;

    }

    .hero-description{

        font-size:1rem;

    }

    .hero-buttons{

        justify-content:flex-start;

    }

    .hero-buttons .btn{

        width:100%;

    }

    .hero-stats{

        grid-template-columns:1fr;

    }

    .hero-icons{

        grid-template-columns:1fr;

    }

    .services-grid{

        grid-template-columns:1fr;

    }

    .industry-card{

        padding:28px;

    }

    .industries-grid{

        grid-template-columns:1fr;

    }

    .technology-grid{

        grid-template-columns:1fr;

    }

    .process-grid{

        grid-template-columns:1fr;

    }

    .process-timeline{

        grid-template-columns:1fr;

    }

    .service-block{

        padding:30px;

    }

    .sidebar-card{

        padding:28px;

    }

    .service-cta{

        padding:45px 30px;

    }

    .cta-card{

        padding:36px;

    }

    .cta-content h2{

        font-size:2.2rem;

    }

}

/* ==========================================================
   Small Mobiles (≤576px)
========================================================== */

@media (max-width:576px){

    .hero-content h1{

        font-size:2rem;

    }

    .hero-badge{

        width:100%;

        justify-content:center;

    }

    .hero-icon-card{

        padding:28px 22px;

    }

    .service-card{

        padding:30px;

    }

    .service-block{

        padding:24px;

    }

    .sidebar-card{

        padding:24px;

    }

    .technology-card{

        padding:28px;

    }

    .timeline-step{

        padding:28px;

    }

    .cta-card{

        padding:30px;

    }

}

/* ==========================================================
   Extra Small Mobiles (≤420px)
========================================================== */

@media (max-width:420px){

    .hero-content h1{

        font-size:1.8rem;

    }

    .hero-description{

        font-size:.95rem;

    }

    .hero-icon-card{

        padding:24px 18px;

    }

    .hero-icon-card .material-symbols-outlined{

        width:64px;

        height:64px;

        font-size:32px;

    }

    .service-card{

        padding:24px;

    }

    .service-card h3{

        font-size:1.3rem;

    }

    .service-block h3{

        font-size:1.5rem;

    }

    .cta-content h2{

        font-size:1.9rem;

    }

}

/* ==========================================================
   Very Small Devices (≤360px)
========================================================== */

@media (max-width:360px){

    .hero-content h1{

        font-size:1.6rem;

    }

    .hero-section{

        padding:60px 0;

    }

    .service-card{

        padding:20px;

    }

    .service-block{

        padding:20px;

    }

    .sidebar-card{

        padding:20px;

    }

    .cta-card{

        padding:24px;

    }

}

/* ==========================================================
   NEWS PAGE
   Hide Hero on Mobile & Tablet
========================================================== */

@media (max-width:1023px){

    .news-showcase{
        display:none;
    }

}


@media (max-width:768px){

    #site-header{

        padding:10px 0;

    }

    .navbar{

        min-height:72px;

    }

}

/* ==========================================================
   MOBILE HEADER LOGO
========================================================== */

@media (max-width:768px){

    .logo img{

        width:130px;

        height:auto;

    }

}