body{
  margin:0;
  padding:0;
  overflow-x:hidden;
  font-size:14px;
}

.main{
  margin:0;
  padding:0;
  display:block;
     /* ✅ Mobile view same on desktop */
  margin:auto;
}

/* CONTAINERS */
.container{
  margin-bottom:1vh;
  min-height:100vh;
  padding:26vh 30px 0px 30px;
  display:flex;
  flex-direction:column;
  justify-content:flex-start;
  align-items:center;
  background-image:url(asset/background.jpg);
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
}

.container1{
  margin-bottom:1vh;
  min-height:120vh;
  padding:10vh 30px 20px 30px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  background-image:url(asset/background.jpg);
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
}

/* TEXT */
.top-text{
  display:flex;
  justify-content:space-between;
  font-size:12px;
  width:100%;
  color:white;
  font-weight:bold;
  margin-bottom:15px;
  -webkit-text-stroke:.5px gold;
  text-shadow:0 0 5px black,0 0 10px black;
}

.mantra{
  width:100%;
  text-align:center;
  font-size:12px;
  margin-top:10px;
  color:white;
}

/* IMAGES */
img{
  max-width:100%;
  height:auto;
  display:block;
}

.image-box{
  text-align:center;
}

.ganes{
  height:30px;
  width:30px;
}

.img1{
  margin-top:20px;
  height:100px;
  width:100px;
}

/* MAIN TEXT */
.main-text{
  display:flex;
  justify-content:space-around;
  align-items:center;
  font-family:serif;
  font-size:15px;
  color:white;
  font-weight:bold;
  padding:20px;
  text-shadow:0 0 5px gold;
}

.main-text img{
  width:70px;
  height:60px;
  margin:0 15px;
}

/* INLINE */
.inline-text{
  display:flex;
  font-size:12px;
  width:100%;
  justify-content:center;
  align-items:center;
}

.intext{
  display:flex;
  justify-content:center;
  align-items:center;
  color:white;
}

.intext1{
  display:flex;
  justify-content:center;
  align-items:center;
  margin-left:10px;
  width:100%;
  max-width:50%;
  color:white;
  border-bottom:1px solid white;
}

/* INVITATION */
.invitation{
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  padding-top:10px;
  color:white;
}

.in-text{
  display:flex;
  justify-content:center;
  align-items:center;
  font-size:15px;
  text-align:center;
}

.in-text1{
  display:flex;
  justify-content:center;
  align-items:center;
  font-size:12px;
  text-align:center;
}

/* BUTTON */
.goo-text{
  text-decoration:none;
  border:1px solid black;
  border-radius:25px;
  background:green;
  color:white;
  padding:5px 10px;
}

/* AVASAR */
.avasar{
  width:100%;
  font-size:15px;
  font-family:cursive;
  color:white;
  display:flex;
  justify-content:center;
  align-items:center;
}

.avasar img{
  width:25px;
  height:25px;
  margin:0 10px;
}

/* GRID */
.murat{
  margin-top:5px;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:5px;
  text-align:center;
  font-size:12px;
}

.cardid{
  display:flex;
  justify-content:center;
  align-items:center;
}

.cardid div{
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
}

/* SMALL TEXT */
.per{
  text-align:center;
  font-size:10px;
  margin-top:5px;
  font-family:serif;
  color:white;
}

.hedtes{
  color:white;
  font-size:12px;
}

.namemama{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:20px;
}

.sec{
  margin-left:10px;
}

.mosatpax{
  width:100%;
  padding-top:5px;
  font-size:12px;
  color:white;
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
}

.mmtex{
  font-size:12px;
  color:white;
  width:100%;
  font-family:serif;
}

.h31{
  font-size:12px;
  color:white;
  text-align:center;
}

.frt{
  text-align:center;
  width:100%;
}

.areatex{
  font-size:12px;
  text-align:center;
  color:white;
}

/* MID AREA */
.midarea{
  padding-top:10px;
  display:flex;
  justify-content:center;
  align-items:center;
}

.textare2{
  margin:0 15px;
  text-align:center;
  color:white;
  font-family:serif;
}

.textare2 h2{
  font-size:15px;
}

.textare2 p{
  font-size:12px;
}

.midarea div img{
  width:50px;
}

/* ✅ DESKTOP SAME AS MOBILE */
@media(min-width:768px){

  .main{
    display:flex;
    overflow-x:auto;
    scroll-snap-type:x mandatory;
    gap:20px;
    padding:20px;
  }

  .main::-webkit-scrollbar{
    display:none;
  }

  .container,
  .container1{
    min-width:350px;   /* card width */
    max-width:420px;
    flex:0 0 auto;
    scroll-snap-align:center;
    border-radius:10px;
  }
}