.container-fluid {
    height: 750px;
	width: 1320px;
    background-color: #51446F;
}

.purple-ballon-txt{ margin-bottom: 1rem; font-family: 'Candal', serif; color: #51456f; font-size: 60px;}
.orange-ballon-txt{ margin-bottom: 1rem; font-family: 'Candal', serif; color: #fe5663; font-size: 30px;}  

.img-fluid {
    height: 700px;
    display: block;
    margin: 0 auto;
    transition: transform 0.5s ease;
}
  .dotted-square2 {
    position: absolute;
    top: 80px;
    left: 200px;
    width: 560px;
    height: 492px;
    border: 3px dotted white;
    border-radius: 30px;
    background-color: transparent;
  }
  .colu {
    background-color: #51446F;
    width: 100%;
    height: 170px;
  }
  .logo{ width: 245px; margin-top: 20px;}
  .margin-top-ballons{ top:-150px;}
  .never-miss { transform: translate(-49%, -46%) !important;}
  .top-left { left: 51% !important; top: 48% !important;}
  .play-btn{ margin-top:3rem; background-image: url('../images/play-button.png'); background-size: cover; width: 130px; height: 130px; border: none !important; background-color: transparent !important;}
  .view-domo{font-size: 21px; color: #fe5663;margin-top: 1.5rem !important; margin-bottom: 1.5rem !important;}
  .nmbox{ height:775px;}
    
  .celeb2{ margin: 0px auto 40px !important;}
  .celeb2 p{ text-align:center !important; margin: 0 auto;}
  .celeb-img img{ width:410px;}

  .purple-bg{ background-color: #51456f; border-radius: 40px; height: 100%;}
  .hbbox-left{ position: relative; height: 585px; margin: 0; left: 6%;  transform: translate(-5%, 13%);}
  .hbbox-left img{ width: 85%; position: absolute; top: 0; bottom: 0; margin: auto;}
  .hbbox-right{ position: relative; height: 585px; right:2%; transform: translate(0%, 13%);}
  .dotted-square { width: 94%; height:560px; position: absolute; top: 0; bottom: 0; margin: auto; border: 3px dotted white; border-radius: 30px; padding:20px 50px; }
  .orange-bold-txt{ margin:0 0 20px 0; font-family: 'Candal', serif; color: #fe5663; font-size: 26px; text-align: left;}
  
  .orange-bg{ background-color: #ff5763; border-radius: 40px; height: 100%;}
  .gibox-left{ position: relative; height: 585px; left:0; transform: translate(5%, 13%);}
  .gibox-right{ position: relative; height: 585px; margin: 0; left: 6%;  transform: translate(-5%, 13%);}
  .gibox-right img{ width: 85%; position: absolute; top: 0; bottom: 0; margin: auto;}
  .purple-bold-txt{ margin:0 0 20px 0; font-family: 'Candal', serif; color: #51456f; font-size: 26px; text-align: left;}

  .white-heading{ margin:20px 0 10px 0; font-family: 'Candal', serif; color: #fff; font-size: 28px; text-align: left;}
  .small-txt{margin:40px 0 20px 0; color: #fff; font-size: 18px; text-align: left;}
  
  .button{ padding: 15px 40px; color: #fff; border-radius: 30px; float: left; font-size: 18px; text-decoration: none;}
  .orange-btn-bg{background-color: #fe5663;}
  .button{ padding: 15px 40px; background-color: #fe5663; color: #fff; border-radius: 30px; margin-top: 35px; float: left; font-size: 18px; text-decoration: none;}
  .purple-btn-bg{background-color: #51456f;}
  .button:hover{ text-decoration:underline;}
  
  .next-birthday-bg{ background-image: url(../images/frame-birthday.png); width: 100%; height: 100%; background-repeat: no-repeat;}
  .nb-content{ margin-top:165px !important;}
  .nb-content p{ text-align:center !important; margin: 0 auto;}
  .nb-black-text{ padding: 10px 265px; margin-top: 35px !important; color: #000; font-size: 18px;}
  .content-center{margin:0 auto;display: flex; justify-content: center; text-align:center; }
  .join-sign-btns a{ width: 210px; margin-left: 10px; margin-right: 10px; }
  .purple-bg-footer{ background-color: #51456f; width:100%; height: 211px; padding:55px 55px 22px 55px;}
  .purple-bg-footer img{ margin-top:22px;}
  .logo-footer{ text-align:left;}
  .social-icons-footer a{ padding:0 50px;}
  .contact-footer{ text-align:right;}
  
@media all and (min-width:320px) and (max-width: 667px) {
    .logo{ width:170px;}
	.margin-top-ballons {margin-top: 65px;}
	.container-fluid { height: 365px;}
	.purple-bg, .orange-bg{ height: 750px;}
	.purple-ballon-txt{ font-size: 16px;}
	.orange-ballon-txt{ font-size: 12px;}  
	.never-miss {transform: translate(-49%, -42%) !important;}
	.play-btn {width: 40px;height: 40px;margin-top: 1px;}
    .view-domo{font-size: 15px; margin-top: 0.7rem !important; margin-bottom: 0.7rem !important;}
	
	.hbbox-left{ display: inline;  height: 290px; transform: translate(2%, 0%); left: 0;}
	.hbbox-left img{ width: 90%; display: block; margin: 20px auto;}

	.hbbox-right{position: relative; height: 320px; right: 0; transform: translate(0%, 32%);}
	.dotted-square { width: 94%; height: 100%; margin-top:15px; padding: 20px 30px;}	

	.gibox-left{position: relative; height: 315px; right: 0; transform: translate(0%, 3%);}
	.gibox-right{height: auto; position: relative; margin: 0 auto;left: 2%; transform: translate(0%, 16%);}
	.gibox-right img{ width: 90%; display: block; margin: 0 auto; top: 45px; }
	
	.white-heading{ margin:0; font-size: 17px;}
	.orange-bold-txt{ margin:0; font-size: 16px;}
	.purple-bold-txt{ margin:0; font-size: 16px;}
	.small-txt{margin:10px 0 0 0; font-size: 15px;}

	.nmbox { height: 240px;}
	.button { padding: 7px 20px; font-size: 14px; margin-top: 15px;}	
	
    .next-birthday-bg{ background-repeat:no-repeat; background-size:contain; background-position:inherit; height: 71%;}
	.nb-content { margin-top: 55px !important;}
	.nb-black-text {  padding: 10px 55px;  margin-top: 15px !important; font-size: 15px;}
	.celeb-img img{ width:80%;}
	.purple-bg-footer{ margin-top: 270px; display: inline-table;padding: 15px 30px 25px 30px;}
	.logo-footer{ text-align:center; margin-bottom:20px;}
	.social-icons-footer a { padding: 0px;}
	.social-icons-footer a img{ width: 70px;}
	.social-icons-footer img{ width: 3px; margin:0 3px;}
	.contact-footer{ text-align:center; margin-top:10px !important;margin-bottom:10px !important;}
	.contact-footer img{ width: 75px;}
	
}