/*==================================================
 NIHAR ❤️ DHVANI WEDDING WEBSITE
 responsive.css
 Part 1
==================================================*/


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

@media (max-width:767px){

html{

font-size:14px;

}

body{

overflow-x:hidden;

}


/*=========================
 CONTAINER
=========================*/

.container{

padding:20px;

}


/*=========================
 CARD
=========================*/

.card,

.groom-card,

.bride-card,

.rsvp-card,

.bride-rsvp-card{

padding:25px;

border-radius:20px;

}


/*=========================
 TITLES
=========================*/

.title{

font-size:52px;

}

.subtitle{

font-size:18px;

}

.groom-title,

.bride-title{

font-size:56px;

}

.groom-name,

.bride-name{

font-size:34px;

}

.groom-subtitle,

.bride-subtitle{

font-size:18px;

letter-spacing:2px;

}


/*=========================
 BUTTONS
=========================*/

.btn,

.groom-btn,

.bride-btn,

.rsvp-btn,

.bride-rsvp-btn{

width:100%;

margin:12px 0;

padding:16px;

font-size:18px;

}


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

.groom-hero,

.bride-hero{

padding:80px 20px;

min-height:90vh;

}


/*=========================
 SECTIONS
=========================*/

.groom-section,

.bride-section{

padding:70px 20px;

}


/*=========================
 SECTION TITLE
=========================*/

.groom-section-title,

.bride-section-title{

font-size:34px;

}


/*=========================
 GALLERY
=========================*/

.groom-gallery,

.bride-gallery{

grid-template-columns:1fr;

gap:18px;

}

.groom-gallery img,

.bride-gallery img{

height:240px;

}


/*=========================
 FAMILY
=========================*/

.groom-family,

.bride-family{

grid-template-columns:1fr;

}


/*=========================
 EVENTS
=========================*/

.event-grid,

.bride-event-grid{

grid-template-columns:1fr;

}


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

.contact-grid,

.bride-contact-grid{

grid-template-columns:1fr;

}


/*=========================
 TIMELINE
=========================*/

.timeline::before,

.bride-timeline::before{

left:18px;

}

.timeline-item,

.bride-timeline-item{

width:100%;

left:0 !important;

padding-left:55px;

padding-right:10px;

text-align:left;

}

.timeline-dot,

.bride-timeline-dot{

left:8px !important;

right:auto !important;

}


/*=========================
 MUSIC BUTTON
=========================*/

#musicToggle{

width:50px;

height:50px;

top:15px;

right:15px;

}


/*=========================
 INTRO
=========================*/

.intro-name{

font-size:46px;

}

.intro-subtitle{

font-size:16px;

}

}


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

@media(max-width:992px){

.groom-gallery-grid{

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

    grid-template-rows:auto;

}

.box1,
.box2,
.box3,
.box4,
.box5,
.box6,
.box7,
.box8{

    grid-column:auto;

    grid-row:auto;

    height:260px;

}

}

@media(max-width:576px){

.groom-gallery-grid{

    grid-template-columns:1fr;

}

.gallery-box{

    height:260px;

}

}

/*==================================================
 NIHAR ❤️ DHVANI WEDDING WEBSITE
 responsive.css
 Part 2
==================================================*/


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

@media (min-width:768px) and (max-width:1024px){

html{

font-size:15px;

}

.container{

padding:30px;

}

.card,

.groom-card,

.bride-card{

max-width:720px;

padding:35px;

}

.title{

font-size:64px;

}

.groom-title,

.bride-title{

font-size:72px;

}

.subtitle,

.groom-subtitle,

.bride-subtitle{

font-size:22px;

}

.btn,

.groom-btn,

.bride-btn{

padding:16px 30px;

font-size:18px;

}

.groom-gallery,

.bride-gallery{

grid-template-columns:

repeat(2,1fr);

gap:22px;

}

.groom-gallery img,

.bride-gallery img{

height:280px;

}

.groom-family,

.bride-family,

.event-grid,

.bride-event-grid,

.contact-grid,

.bride-contact-grid{

grid-template-columns:

repeat(2,1fr);

}

.timeline,

.bride-timeline{

max-width:760px;

}

}


/*=========================================
 LAPTOPS
=========================================*/

@media (min-width:1025px) and (max-width:1440px){

.container{

max-width:1320px;

margin:auto;

}

.groom-gallery,

.bride-gallery{

grid-template-columns:

repeat(3,1fr);

}

.groom-family,

.bride-family{

grid-template-columns:

repeat(3,1fr);

}

.event-grid,

.bride-event-grid{

grid-template-columns:

repeat(3,1fr);

}

.contact-grid,

.bride-contact-grid{

grid-template-columns:

repeat(3,1fr);

}

}


/*=========================================
 LARGE DESKTOP
=========================================*/

@media (min-width:1441px){

html{

font-size:17px;

}

.container{

max-width:1500px;

margin:auto;

}

.title{

font-size:84px;

}

.groom-title,

.bride-title{

font-size:110px;

}

.subtitle,

.groom-subtitle,

.bride-subtitle{

font-size:28px;

}

.groom-gallery,

.bride-gallery{

grid-template-columns:

repeat(4,1fr);

}

.groom-gallery img,

.bride-gallery img{

height:360px;

}

.groom-family,

.bride-family{

grid-template-columns:

repeat(4,1fr);

}

.event-grid,

.bride-event-grid{

grid-template-columns:

repeat(4,1fr);

}

.contact-grid,

.bride-contact-grid{

grid-template-columns:

repeat(4,1fr);

}

}


/*=========================================
 ULTRA-WIDE MONITORS
=========================================*/

@media (min-width:1920px){

.container{

max-width:1700px;

}

.groom-section,

.bride-section{

padding:140px 30px;

}

.groom-gallery img,

.bride-gallery img{

height:420px;

}

.title{

font-size:96px;

}

.groom-title,

.bride-title{

font-size:130px;

}

}


/*=========================================
 SHORT HEIGHT SCREENS
=========================================*/

@media (max-height:700px){

.groom-hero,

.bride-hero{

min-height:auto;

padding:100px 20px;

}

.intro-name{

font-size:54px;

}

}


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

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

.groom-hero,

.bride-hero{

padding:40px;

}

.intro-name{

font-size:42px;

}

.card{

padding:20px;

}

}

/*==================================================
 NIHAR ❤️ DHVANI WEDDING WEBSITE
 responsive.css
 Part 3 (Final)
==================================================*/


/*=========================================
 LARGE TEXT ACCESSIBILITY
=========================================*/

@media (prefers-contrast: more){

body{

color:#ffffff;

background:#000000;

}

.card,
.groom-card,
.bride-card{

border:2px solid #FFD700;

}

.btn,
.groom-btn,
.bride-btn,
.rsvp-btn,
.bride-rsvp-btn{

border:2px solid #ffffff;

}

}


/*=========================================
 REDUCED MOTION
=========================================*/

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

*,
*::before,
*::after{

animation:none !important;

transition:none !important;

scroll-behavior:auto !important;

}

html{

scroll-behavior:auto;

}

}


/*=========================================
 HIGH DPI (RETINA)
=========================================*/

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

img{

image-rendering:auto;

}

.groom-gallery img,
.bride-gallery img{

filter:contrast(1.02);

}

}


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

@media print{

body{

background:#ffffff !important;

color:#000000 !important;

}

#intro,
#musicToggle,
.particle-container,
.loader,
.gold-orb,
.bride-glow,
.groom-glow,
.sparkle,
.star,
.gold-particle,
.sakura,
.rose-petal{

display:none !important;

}

.btn,
.groom-btn,
.bride-btn,
.rsvp-btn,
.bride-rsvp-btn,
.map-btn,
.bride-map-btn{

display:none !important;

}

.card,
.groom-card,
.bride-card{

box-shadow:none;

border:1px solid #999;

background:#fff;

color:#000;

}

a{

text-decoration:none;

color:#000;

}

}


/*=========================================
 KEYBOARD ACCESSIBILITY
=========================================*/

a:focus-visible,
button:focus-visible{

outline:3px solid #FFD700;

outline-offset:4px;

border-radius:8px;

}


/*=========================================
 FORM ELEMENTS
=========================================*/

input,
textarea,
select{

max-width:100%;

font:inherit;

}

img{

max-width:100%;

height:auto;

display:block;

}


/*=========================================
 SAFE AREA (iPhone Notch)
=========================================*/

body{

padding-left:env(safe-area-inset-left);

padding-right:env(safe-area-inset-right);

padding-top:env(safe-area-inset-top);

padding-bottom:env(safe-area-inset-bottom);

}


/*=========================================
 SMOOTH IMAGE LOADING
=========================================*/

img{

transition:opacity .4s ease;

}

img[data-src]{

opacity:.5;

}

img.loaded{

opacity:1;

}


/*=========================================
 TOUCH DEVICES
=========================================*/

@media (hover:none){

.btn:hover,
.groom-btn:hover,
.bride-btn:hover,
.family-card:hover,
.bride-family-card:hover,
.event-card:hover,
.bride-event-card:hover{

transform:none;

}

}


/*=========================================
 FLEXIBLE EMBEDS
=========================================*/

iframe,
video{

max-width:100%;

height:auto;

border-radius:20px;

}


/*=========================================
 GLOBAL SPACING
=========================================*/

section{

scroll-margin-top:100px;

}


/*=========================================
 SELECTION
=========================================*/

::selection{

background:#FFD700;

color:#000;

}

::-moz-selection{

background:#FFD700;

color:#000;

}


/*=========================================
 SCROLLBAR
=========================================*/

::-webkit-scrollbar{

width:10px;

}

::-webkit-scrollbar-track{

background:#111;

}

::-webkit-scrollbar-thumb{

background:#FFD700;

border-radius:20px;

}

::-webkit-scrollbar-thumb:hover{

background:#ffea70;

}


/*=========================================
 FINAL OPTIMIZATION
=========================================*/

*{

box-sizing:border-box;

-webkit-tap-highlight-color:transparent;

}

html{

text-size-adjust:100%;

-webkit-text-size-adjust:100%;

}

body{

text-rendering:optimizeLegibility;

-webkit-font-smoothing:antialiased;

-moz-osx-font-smoothing:grayscale;

}


/*=========================================
        GROOM CAROUSEL RESPONSIVE
=========================================*/

@media (max-width:1400px){

.track img{

    width:190px;

    height:260px;

}

.track{

    gap:16px;

}

}

@media (max-width:1200px){

.track img{

    width:170px;

    height:235px;

}

.track{

    gap:15px;

}

}

@media (max-width:992px){

.track img{

    width:155px;

    height:215px;

}

.track{

    gap:14px;

}

}

@media (max-width:768px){

.track img{

    width:140px;

    height:190px;

}

.track{

    gap:12px;

}

}

@media (max-width:576px){

.track img{

    width:120px;

    height:165px;

}

.track{

    gap:10px;

}

}

@media (max-width:420px){

.track img{

    width:105px;

    height:145px;

}

.track{

    gap:8px;

}

}

/*=========================================
 END OF RESPONSIVE.CSS
==================================================*/


/*=========================================
 END OF RESPONSIVE.CSS
==================================================*/