/* SHUBMANGAL WEDDING PLANNERS */
/* Developed by AK Designs */


/* Fonts */
@import url('https://fonts.googleapis.com/css?family=Great+Vibes&display=swap');

@import url('https://fonts.googleapis.com/css?family=Radley:400,400i&display=swap');

@import url('https://fonts.googleapis.com/css?family=Raleway:300,400,500,600&display=swap');

/* Set Default */
body, div, p, h1, h2, h3, h4, h5, h6, span, table, tr, td, ul, ol, li, header, section, footer { margin: 0; padding: 0; }

li { list-style-type: none; }

a, img { text-decoration: none; border: none; }


/* Viewport Styles */
@-webkit-viewport { width: device-width; }
@-moz-viewport { width: device-width; }
@-ms-viewport { width: device-width; }
@-o-viewport { width: device-width; }
@viewport { width: device-width; }


/* Common Styles */
body, div, p, span, table, tr, td, ul, ol, li, header, section, footer, a, img, h1, h2, h3, h4, h5, h6  {
	font-family: 'Radley', serif;
	font-weight: 400;
}

h1, h2, h3, h4, h5, h6 {
	font-family: 'Great Vibes', cursive;
	font-weight: 500;
	letter-spacing: 2px;
}


/* Viewport Styles */
@-webkit-viewport { width: device-width; }
@-moz-viewport { width: device-width; }
@-ms-viewport { width: device-width; }
@-o-viewport { width: device-width; }
@viewport { width: device-width; }


/* slightly enhanced, universal clearfix hack */
.clearfix:after {
    visibility: hidden;
    display: block;
    font-size: 0;
    content: " ";
    clear: both;
    height: 0;
}
.clearfix { display: inline-block; }
/* start commented backslash hack \*/
* html .clearfix { height: 1%; }
.clearfix { display: block; }
/* close commented backslash hack */


/* CUSTOM HOME PAGE STYLES */

body {
	width: 100%;
	position: relative;
	background: rgba(255,255,255,1);
}

div.bodyBgPattern {
	width: 100%;
	height: 100%;
	position: absolute;
	background-image: url(../images/global/body-bg-pattern.jpg);
	background-repeat: repeat;
	opacity: 0.05;
	z-index: 990;
}


/* Left Navigation (Header) Styles */

header {
	width: 240px;
	height: 100vh;
	position: fixed;
	background-color: rgba(64,20,50,1);
	box-sizing: border-box;
	padding: 24px 8px;
    z-index: 1000;
    display: flex;
}

.navBgPattern {
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	background-image: url(../images/global/side-bar-bg.jpg);
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center center;
	opacity: 0.15;
	z-index: 999;
}

.headContents {
    width: 100%;
    margin: 0 auto;
    align-self: flex-start;
}

.brandLogo {
	width: 140px;
	margin: 0 auto;
	position: relative;
	z-index: 1000;
}

.brandLogo > img {
	width: 140px;
}

.mainNav {
	width: 140px;
	margin: 48px auto 0 auto;
	position: relative;
	z-index: 1000;
}

.mainNav > div {
	text-align: right;
	margin: 32px 0;
	box-sizing: border-box;
}

.mainNav > div:hover {
	border-left: 4px solid rgba(255,255,255,0.12);
}

.mainNav > div.active {
	border-left: 4px solid rgba(255,255,255,1);
}

.mainNav > div > a {
	font-family: 'Raleway', sans-serif;
	font-size: 18px;
	display: inline-block;
	padding: 2px 0;
	color: rgba(255,255,255,1);
}

.headContacts {
    width: 200px;
    margin-left: 12px;
    position: absolute;
    bottom: 24px;
    z-index: 1000;
    justify-self: center;
}

.headContacts h6 {
    font-family: 'Raleway', sans-serif;
    font-size: 16px;
    font-weight: 600;
    color: rgba(255,255,255,0.24);
    margin: 12px 0;
}

.headContacts span {
    width: 32px;
    height: 32px;
    margin-right: 16px;
}

.headContacts > span > a > i.fi {
    font-size: 18px;
    color: rgba(255,255,255,0.64);
}

.headContacts > span > a > i.fi:hover {
    font-size: 18px;
    color: rgba(255,255,255,1);
}


/* Main Section Styles */

section {
	width: 100%;
	box-sizing: border-box;
	padding: 120px 4px 0 244px;
	position: relative;
	z-index: 999;
}

section > h1, footer > div.sectionContact > h1 {
	width: 90%;
	margin: 0 auto;
	font-size: 72px;
	text-align: center;
	color: rgba(24,8,16,1);
	padding: 32px 0;
}

section > h4 {
	width: 90%;
	margin: 0 auto;
	font-size: 24px;
	letter-spacing: 0;
	font-family: 'Radley', serif;
	text-align: center;
	color: rgba(24,8,16,1);
	padding: 32px 0;
}

section > h3 {
	width: 90%;
	margin: 0 auto;
	font-size: 32px;
	letter-spacing: 0;
	font-family: 'Radley', serif;
	font-weight: 400;
	text-align: center;
	color: rgba(64,20,50,1);
	padding: 64px 0 0 0;
}

.contactCard {
	width: 100%;
	margin: 0 auto;
	padding-bottom: 48px;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: flex-start;
	box-shadow: 0 -4px 8px rgba(0,0,0,0.08);
}

.contactCard li {
	margin: 24px 48px;
	padding: 0 10px;
	display: flex;
	justify-content: center;
	align-items: center;
	border-radius: 12px;
	background: rgba(255,255,255,1);
}

.contactCard li > span > span, .contactCard li > span > a {
	display: block;
	text-align: left;
	font-size: 18px;
	margin: 8px 0 8px 24px;
	color: rgba(64,20,50,1);
}

.contactCard li > span > a:hover {
	text-decoration: underline;
}

.contactCard li > span.contactDP {
	width: 80px;
	height: 80px;
	background-size: cover;
	border-radius: 50%;
}

.contactCard li > span.viveksDP {
	background-image: url(../images/global/viveks.jpg);
}

.contactCard li > span.sarathyDP {
	background-image: url(../images/global/sarathy.jpeg);
}

.copyrights {
	font-size: 14px;
	padding: 12px 0;
}

section > p {
	width: 80%;
	margin: 0 auto;
	font-size: 18px;
	line-height: 32px;
	text-align: center;
	color: rgba(96,96,120,1);
}

section > p.emphasis {
	font-size: 20px;
	font-weight: 600;
	color: rgba(0,30,60,1);
}

section > p.goBack {
	width: auto;
	position: absolute;
	top: 64px;
	left: 272px;
}

section > p.goBack > a {
	display: inline-block;
	display: flex;
	justify-content: center;
	align-items: center;
	color: rgba(64,20,50,1);
}

section > p.goBack > a > i.material-icons-round {
	margin-right: 8px;
}

section > div.divSectionTitle {
	width: 100%;
	height: 320px;
	margin: 48px 0;
	display: flex;
	justify-content: center;
	align-items: center;
	position: relative;
	background-attachment: fixed;
	background-position: top left;
	background-repeat: no-repeat;
	background-size: cover;
	border-radius: 12px;
	z-index: 1000;
	overflow: hidden;
}

section > div.divSectionTitle > h1 {
	font-size: 72px;
	text-align: center;
	color: rgba(255,255,255,1);
	text-shadow: 2px 2px 4px rgba(0,0,0,0.24);
	position: relative;
	z-index: 1002;
}

section > div.bgPlanning {
	background-image: url(../images/home/Original/preparation-7.jpg);
}

section > div.bgFamily {
	background-image: url(../images/home/Optimized/family.jpg);
}

section > div.bgTradition {
	background-image: url(../images/home/Optimized/culture.jpg);
}

section > div.bgDecorations {
	background-image: url(../images/home/Optimized/decoration.jpg);
}

section > div.bgTravel {
	background-image: url(../images/home/Optimized/travel.jpg);
}

section > div.bgMoments {
	background-image: url(../images/home/Optimized/moments.jpg);
}

section > div.bgHospitality {
	background-image: url(../images/home/Optimized/hospitality.jpg);
}

section > div.bgSurprises {
	background-image: url(../images/home/Optimized/surprise.jpg);
}

section > div.bgEntertainment {
	background-image: url(../images/home/Optimized/entertainment.jpg);
}

section > div.bgCatering {
	background-image: url(../images/home/Optimized/catering.jpg);
}

section > div.bgMemories {
	background-image: url(../images/home/Optimized/photography.jpg);
}

section > div.bgFarewell {
	background-image: url(../images/home/Optimized/farewell.jpg);
}

section > div.divSectionTitle > div.bgTint {
	position: absolute;
	width: 100%;
	height: 100%;
	background-color: rgba(64,20,50,0.16);
	z-index: 1001;
}

section > div.divDetails {
	padding: 24px;
	display: -ms-flexbox;
	-ms-flex-wrap: wrap;
	-ms-flex-direction: column;
	-webkit-flex-flow: row wrap; 
	flex-flow: row wrap; 
	display: -webkit-box;
	display: flex;
}

section > div.divDetails > ul.itemCard {
	margin: 12px;
	position: relative;
	box-sizing: border-box;
	-webkit-box-flex: auto;
	-ms-flex: auto;
	flex: auto; 
	width: 280px; 
}

section > div.divDetails > ul.itemCard > li:nth-child(1) {
	/*width: 280px;*/
	height: 240px;
	border-radius: 4px;
	box-sizing: border-box;
	background-color: rgba(64,20,50,0.05);
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center center;
}

section > div.divDetails > ul.itemCard > li:nth-child(1) > a {
	display: inline-block;
	width: 100%;
	height: 100%;
}

section > div.divDetails > ul.itemCard > li:nth-child(2) {
	/*width: 280px;*/
	font-size: 14px;
	text-align: center;
	padding: 8px 12px 0 12px;
	box-sizing: border-box;
}


/* Footer Styles */

footer {
	width: 100%;
	min-height: 100vh;
	margin: 48px 0 0 0;
	display: flex;
	justify-content: center;
	align-items: center;
	position: relative;
	flex-wrap: wrap;
	background-color: rgba(64,20,50,1);
	z-index: 1010;
	box-shadow: 0 -1px 0 rgba(30,5,10,1);
}

footer.contactPageStyle {
	box-sizing: border-box;
	padding: 0 4px 0 284px;
	background-color: rgba(255,255,255,0);
	z-index: 999;
	box-shadow: none;
	margin: 0;
}

footer > div.navBgPattern {
	opacity: 0.25;
}

footer > div.sectionContact {
	width: 100%;
	position: relative;
	z-index: 1010;
	margin: 0 auto;
}

footer > div.sectionContact > img {
	display: block;
	width: 300px;
	margin: 0 auto;
}

footer > div.sectionContact > ul {
	width: 90%;
	position: relative;
	margin: 16px auto 0 auto;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-wrap: wrap;
}

footer > div.sectionContact > ul > li {
	position: relative;
	margin: 16px;
	font-family: 'Raleway', sans-serif;
	font-size: 16px;
	color: rgba(255,255,255,0.48);
	text-align: center;
	line-height: 28px;
}

footer.contactPageStyle > div.sectionContact > ul > li {
	color: rgba(40,4,16,1);
}

footer > div.sectionContact > ul > li > a {
	color: rgba(40,4,16,1);
	font-family: 'Raleway', sans-serif;
	font-size: 16px;
}

footer > div.sectionContact > ul > li > a > i.material-icons-outlined {
	font-size: 14px;
	color: rgba(255,255,255,0.32);
}

footer.contactPageStyle > div.sectionContact > ul > li > a > i.material-icons-outlined {
	color: rgba(40,4,16,1);
}

footer > div.sectionContact > ul > li > a > i.fi {
	font-size: 20px;
}

footer > div.sectionContact > ul.contactDetails > li {
	text-align: left;
	box-sizing: border-box;
	padding: 16px 32px;
	background: rgba(40,4,16,0.40);
	border-radius: 12px;
}

footer.contactPageStyle > div.sectionContact > ul.contactDetails > li {
	background-color: rgba(255,255,255,0);
	border: 1px solid rgba(40,4,16,1);
}

footer > div.sectionContact > ul.contactDetails > li > svg {
	width: 16px;
	opacity: 0.64;
}

footer > div.sectionContact > ul.contactDetails > li > span {
	display: flex;
	align-items: center;
	box-sizing: border-box;
	padding: 4px;
}

footer > div.sectionContact > ul.contactDetails > li > span > a {
	margin-left: 12px;
	font-family: 'Raleway', sans-serif;
	font-size: 16px;
}

footer > p {
	position: absolute;
	display: block;
	bottom: 16px;
	font-family: 'Raleway', sans-serif;
	font-size: 14px;
	color: rgba(255,255,255,0.48);
}

footer.contactPageStyle > p {
	color: rgba(40,4,16,1);
}

a#marginLeft36 {
	margin-left: 36px;
}

a#linkColor {
	font-style: italic;
	color: rgba(255,255,255,0.48);
}

a#cpLinkColor {
	font-style: italic;
	color: rgba(40,4,16,1);
}

a#linkColor:hover {
	text-decoration: underline;
	color: rgba(255,255,255,1);
}

a#cpLinkColor:hover {
	text-decoration: underline;
}

a#whatsapp:hover, footer.contactPageStyle > div.sectionContact > ul > li > a#whatsapp {
	color: rgba(18,140,126,1);
}

a#messenger:hover, footer.contactPageStyle > div.sectionContact > ul > li > a#messenger {
	color: rgba(0,132,255,1);
}

a#facebook:hover, footer.contactPageStyle > div.sectionContact > ul > li > a#facebook {
	color: rgba(59,89,152,1);
}

a#twitter:hover, footer.contactPageStyle > div.sectionContact > ul > li > a#twitter {
	color: rgba(29,161,242,1);
}

a#instagram:hover, footer.contactPageStyle > div.sectionContact > ul > li > a#instagram {
	color: rgba(188,42,141,1);
}

#birthdayPic {
	background-image: url(../images/home/Optimized/birthday.jpeg);
}

#weddingPic {
	background-image: url(../images/home/Optimized/wedding.jpeg);
}

#babyShowerPic {
	background-image: url(../images/home/Optimized/baby-shower.jpg);
}



/* Gallery Page Styles */

#preWeddingPics {
	background-image: url(../images/gallery/album-1/Optimised/pre-wedding.jpg);
}

#stageDecoration {
	background-image: url(../images/gallery/album-1/Optimised/decoration.jpg);
}

#candidPics {
	background-image: url(../images/gallery/album-1/Optimised/candid.jpg);
}

#specialEntry {
	background-image: url(../images/gallery/album-1/Optimised/specialEntry.jpg);
}

#entertainment {
	background-image: url(../images/gallery/album-1/Optimised/entertainment.jpg);
}

#surprises {
	background-image: url(../images/gallery/album-1/Optimised/surprise.jpg);
}

#catering {
	background-image: url(../images/gallery/album-1/Optimised/catering.jpg);
}

#specialVideo {
	background-image: url(../images/gallery/album-1/Optimised/specialVideo.jpg);
}

#farewell {
	background-image: url(../images/gallery/album-1/Optimised/farewell.jpg);
}

#traveldesk {
	background-image: url(../images/gallery/album-1/Optimised/travel.jpg);
}



/* Individual Gallery Album Styles */

section > .pictures { 
	padding: 24px;
	display: -ms-flexbox;
	-ms-flex-wrap: wrap;
	-ms-flex-direction: column;
	-webkit-flex-flow: row wrap; 
	flex-flow: row wrap; 
	display: -webkit-box;
	display: flex;
}

section > .pictures > div { 
	-webkit-box-flex: auto;
	-ms-flex: auto;
	flex: auto; 
	width: 280px; 
	margin: 4px; 
	line-height: 0;
	border-radius: 4px;
	overflow: hidden;
  }

  section > .pictures > div > img { 
	width: 100%; 
	height: auto;
  }

  @media screen and (max-width: 400px) {
	section > .pictures > div { margin: 0; }
	section > .pictures { padding: 0; }
	
  }