/* =====================================================
   Dial Dynamic Ltd
   Enterprise Responsive V5
   Part 1
======================================================*/

/* ===============================
   Large Desktop
================================ */

@media (max-width:1400px){

.container{

max-width:1200px;

}

.hero-title{

font-size:58px;

}

#globe-container{

width:560px;

height:560px;

}

}

/* ===============================
   Laptop
================================ */

@media (max-width:1200px){

section{

padding:100px 0;

}

.hero-title{

font-size:50px;

}

.section-title{

font-size:42px;

}

.hero-description{

font-size:17px;

}

.hero-visual{

height:600px;

}

#globe-container{

width:500px;

height:500px;

}

.ecosystem-grid{

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

}

.services-grid{

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

}

.industry-grid{

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

}

.brand-slider{

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

}

}

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

@media (max-width:992px){

.header{

padding:15px 0;

}

.main-navbar{

min-height:70px;

}

.logo img{

height:48px;

}

.nav-menu{

display:none;

}

.nav-actions{

display:none;

}

.menu-toggle{

display:block;

}

.hero{

padding-top:150px;

text-align:center;

}

.hero-content{

margin:auto;

}

.hero-title{

font-size:44px;

}

.hero-buttons{

justify-content:center;

}

.hero-stats{

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

margin-top:40px;

}

.hero-visual{

margin-top:60px;

height:500px;

}

#globe-container{

width:420px;

height:420px;

}

.about-grid{

grid-template-columns:1fr;

gap:50px;

}

.ecosystem-grid,

.services-grid,

.industry-grid{

grid-template-columns:1fr 1fr;

}

.footer{

text-align:center;

}

.footer-social{

justify-content:center;

}

.footer-bottom{

text-align:center;

}

}



/* =====================================================
   Dial Dynamic Ltd
   Enterprise Responsive V5
   Part 2 (Mobile)
====================================================== */

/* ===============================
   Mobile Devices
================================ */

@media (max-width:768px){

.container{

padding:0 18px;

}

section{

padding:80px 0;

}

/* Hero */

.hero{

padding-top:130px;

min-height:auto;

text-align:center;

}

.hero-title{

font-size:36px;

line-height:1.2;

}

.hero-description{

font-size:16px;

margin:20px auto 30px;

max-width:100%;

}

.hero-buttons{

flex-direction:column;

align-items:center;

gap:15px;

}

.hero-buttons .btn-primary,
.hero-buttons .btn-secondary{

width:100%;

max-width:320px;

justify-content:center;

}

.hero-stats{

grid-template-columns:1fr;

gap:15px;

margin-top:35px;

}

.stat-card{

padding:20px;

}

.hero-visual{

height:380px;

margin-top:50px;

}

#globe-container{

width:320px;

height:320px;

margin:auto;

}

.hero-logo img{

width:120px;

}

/* Floating */

.floating-icon{

display:none;

}

.orbit-3{

display:none;

}

/* Sections */

.section-title{

font-size:34px;

}

.section-description{

font-size:16px;

}

.about-grid,
.ecosystem-grid,
.services-grid,
.industry-grid{

grid-template-columns:1fr;

gap:25px;

}

.about-image{

margin-bottom:25px;

}

.service-card,
.ecosystem-card,
.industry-card{

padding:25px;

}

/* Trusted */

.brand-slider{

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

gap:15px;

}

.brand-item{

padding:20px;

}

/* CTA */

.cta-box{

padding:35px 25px;

}

.cta-box h2{

font-size:32px;

}

.cta-box p{

font-size:16px;

}

/* Footer */

.footer{

padding:70px 0 30px;

text-align:center;

}

.footer-logo img{

margin:auto;

}

.footer-social{

justify-content:center;

}

.footer-bottom{

text-align:center;

}

.footer-bottom .text-end{

text-align:center !important;

margin-top:15px;

}

/* Back To Top */

.back-top{

right:15px;

bottom:15px;

width:48px;

height:48px;

font-size:16px;

}

}

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

@media (max-width:576px){

.hero-title{

font-size:30px;

}

.hero-badge{

font-size:13px;

padding:10px 16px;

}

.hero-description{

font-size:15px;

}

#globe-container{

width:260px;

height:260px;

}

.section-title{

font-size:28px;

}

.section-subtitle{

font-size:12px;

}

.btn-primary,
.btn-secondary{

padding:14px 22px;

font-size:15px;

}

.logo img{

height:42px;

}

.brand-slider{

grid-template-columns:1fr;

}

.stat-card h2{

font-size:28px;

}

}



/* =====================================================
   Dial Dynamic Ltd
   Enterprise Responsive V5
   Part 3 (Final)
======================================================*/

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

@media (max-width:420px){

.container{

padding:0 15px;

}

.hero{

padding-top:120px;

}

.hero-title{

font-size:28px;

line-height:1.25;

}

.hero-description{

font-size:15px;

line-height:1.7;

}

.hero-buttons{

gap:12px;

}

.hero-buttons .btn-primary,
.hero-buttons .btn-secondary{

width:100%;

}

.hero-stats{

grid-template-columns:1fr;

}

.stat-card{

padding:18px;

}

#globe-container{

width:230px;

height:230px;

}

.hero-logo img{

width:100px;

}

.section-title{

font-size:26px;

}

.section-description{

font-size:15px;

}

.service-card,
.ecosystem-card,
.industry-card{

padding:22px;

}

.brand-slider{

grid-template-columns:1fr;

}

.footer{

text-align:center;

}

.footer-social{

justify-content:center;

}

.footer-bottom{

font-size:14px;

}

}

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

@media (max-height:500px){

.hero{

min-height:auto;

padding:140px 0 80px;

}

.hero-visual{

display:none;

}

.hero-content{

max-width:100%;

text-align:center;

margin:auto;

}

.hero-stats{

margin-top:30px;

}

}

/* ==========================================
   Ultra Wide Monitor
========================================== */

@media (min-width:1600px){

.container{

max-width:1500px;

}

.hero-title{

font-size:78px;

}

.hero-description{

font-size:20px;

max-width:650px;

}

#globe-container{

width:720px;

height:720px;

}

.hero-visual{

height:760px;

}

.section-title{

font-size:60px;

}

}

/* ==========================================
   Hover Optimization
========================================== */

@media (hover:none){

.glass:hover,
.service-card:hover,
.ecosystem-card:hover,
.industry-card:hover,
.brand-item:hover{

transform:none;

}

.btn-primary:hover,
.btn-secondary:hover{

transform:none;

}

}

/* ==========================================
   Print
========================================== */

@media print{

.header,
.footer,
.back-top,
.scroll-down,
.hero-blob,
.hero-glow,
.mouse-glow,
.progress-bar{

display:none !important;

}

body{

background:#fff !important;

color:#000 !important;

}

section{

padding:20px 0;

}

}

/* ==========================================
   Performance
========================================== */

@media (prefers-reduced-motion:reduce){

*{

animation:none !important;

transition:none !important;

scroll-behavior:auto !important;

}

}

/* ==========================================
   Image Responsive
========================================== */

img{

max-width:100%;

height:auto;

}

/* ==========================================
   Video Responsive
========================================== */

video,
iframe{

max-width:100%;

height:auto;

}

/* ==========================================
   Table Responsive
========================================== */

table{

width:100%;

display:block;

overflow-x:auto;

}

/* ==========================================
   Final Responsive Utilities
========================================== */

.hide-mobile{

display:block;

}

.show-mobile{

display:none;

}

@media (max-width:768px){

.hide-mobile{

display:none !important;

}

.show-mobile{

display:block !important;

}

}