:root { --primary-color: #35374B; --secondary-color: #344955; --tertiary-color: #50727B; --light-color: #78A083; --dark-color: #bdbdbd; --default-font: "Open Sans", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; --heading-font: "Montserrat", sans-serif; --nav-font: "Poppins", sans-serif; } html, body { font-family: "Montserrat", sans-serif; line-height: 1.6; color: var(--dark-color); background-color: #1a1814; overflow-x: hidden; } h1, h2, h3, h4, h5, h6{ color: #cda45e; } .navbar { background-color: #000; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); transition: background-color 0.3s ease, box-shadow 0.3s ease; position: fixed; width: 100%; top: 0; z-index: 1000; display: flex; justify-content: center; } .navbar .container-fluid { display: flex; justify-content: space-between; align-items: center; width: 100%; } .navbar-brand { margin: 0 auto; } .navbar-nav { flex-grow: 1; justify-content: center; } .navbar-brand, .navbar-nav .nav-link { color: #fff; transition: color 0.3s ease; } .navbar-brand img { display: block; } @media (max-width: 768px) { .navbar-brand img { content: url(images/logo2.png); width: auto; } } footer { background-color: #212529; color: white; padding: 40px 0; margin-top: -1px; } .navbar .dropdown-menu { background-color: #000; border: none; transition: background-color 0.3s ease; } .navbar .dropdown-item { color: #fff; transition: text-shadow 0.3s ease, color 0.3s ease; } .navbar .dropdown-item:hover { background-color: transparent; color: #fff; } .navbar.scrolled { background-color: rgba(0, 0, 0, 0.7); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3); } .navbar.scrolled .navbar-brand, .navbar.scrolled .nav-link { color: #fff; text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.7); } .navbar.scrolled .dropdown-menu { background-color: rgba(0, 0, 0, 0.7); } .nav-item.dropdown:hover .dropdown-menu { display: block; } .nav-item.dropdown .dropdown-menu { margin-top: 0; transition: visibility 0.3s ease; } /**************LANDING PAGE HERO*********************/ .hero-section { position: relative; width: 100%; height: 100vh; overflow: hidden; } .hero-video { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; z-index: 1; } .hero-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.5); /* Dark overlay for readability */ z-index: 2; } .hero-content { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 3; text-align: center; color: #fff; padding: 15px; } .hero-title { font-size: 5rem; margin-bottom: 10px; } .hero-subtitle { font-size: 1.25rem; margin-bottom: 20px; } .hero-cta { font-size: 1rem; padding: 10px 20px; border-radius: 5px; } /* Responsive styles */ @media (max-width: 768px) { .hero-title { font-size: 2rem; } .hero-subtitle { font-size: 1rem; } } /*FOR THE SPECIAL DROP DOWN*/ @media only screen and (min-width: 1024px) { h1 { padding: 0 0; font-size: 3rem; } .section { margin: 0 auto; max-width: 1200px; } .button { padding: 0 2em; font-size: 1.2rem; } .extra-margin-b { margin-bottom: 3em; } } .specials { overflow: hidden; } .specials .nav-tabs { border: 0; } .specials .nav-link { border: 0; padding: 12px 15px; transition: 0.3s; color: #fff; border-radius: 0; border-right: 2px solid #cda45e; font-weight: 600; font-size: 15px; } .specials .nav-link:hover { color: #cda45e; } .specials .nav-link.active { color: #1a1814; background: #cda45e; border-color: #cda45e; } .specials .nav-link:hover { border-color: #cda45e; } .specials .tab-pane.active { -webkit-animation: fadeIn 0.5s ease-out; animation: fadeIn 0.5s ease-out; } .specials .details h3 { font-size: 26px; font-weight: 600; margin-bottom: 20px; color: #fff; } .specials .details p { color: #aaaaaa; } .specials .details p:last-child { margin-bottom: 0; } @media (max-width: 992px) { .specials .nav-link { border: 0; padding: 15px; } } /* NEW HERO TEST */ /* Base Styles */ * { margin-top: 0; padding: 0; box-sizing: border-box; } /* Hero Section */ .hero { width: 100vw; height: 100vh; position: relative; display: flex; justify-content: center; align-items: center; text-align: center; color: #CCC; text-transform: uppercase; font-family: 'Amatic SC', sans-serif; letter-spacing: 17.5px; flex-direction: column; padding-top: 70px; } /* Hero Background Sections */ .hero-one, .hero-two, .hero-three, .hero-four, .hero-five, .hero-six,.hero-seven,.hero-eight { position: absolute; top: 0; width: 60%; height: 100vh; z-index: 1; background-size: cover; background-repeat: no-repeat; background-position: center; } /* Individual Hero Sections */ .hero-one { left: 0; background-color: black; clip-path: polygon(0 0, 60vw 0, 40vw 100vh, 0 100vh); background-image: linear-gradient(rgba(0,0,0,.5), rgba(0,0,0,.5)), url(images/contact.jpg); } .hero-two { right: 0; background-color: rgb(0, 0, 0); background-image: linear-gradient(rgba(0,0,0,.2), rgba(0,0,0,.5)), url(images/hairsalon2.jpg); } .hero-three { left: 0; background-color: black; clip-path: polygon(0 0, 60vw 0, 40vw 100vh, 0 100vh); background-image: linear-gradient(rgba(0,0,0,.5), rgba(0,0,0,.5)), url(images/hero-three.jpg); } .hero-four { right: 0; background-color: rgb(0, 0, 0); background-image: linear-gradient(rgba(0,0,0,.2), rgba(0,0,0,.5)), url(images/hero-four.jpg); } .hero-five { left: 0; background-color: black; clip-path: polygon(0 0, 60vw 0, 40vw 100vh, 0 100vh); background-image: linear-gradient(rgba(0,0,0,.5), rgba(0,0,0,.5)), url(images/hairextension1.jpg); } .hero-six { right: 0; background-color: rgb(0, 0, 0); background-image: linear-gradient(rgba(0,0,0,.2), rgba(0,0,0,.5)), url(images/hairextension2.jpg); } .hero-seven { left: 0; background-color: rgb(0, 0, 0); background-image: linear-gradient(rgba(0,0,0,.2), rgba(0,0,0,.5)), url(images/microblading1.jpg); } .hero-eight { right: 0; background-color: rgb(0, 0, 0); background-image: linear-gradient(rgba(0,0,0,.2), rgba(0,0,0,.5)), url(images/microblading3.jpg); } /* Header Titles */ .header-title { z-index: 2; position: relative; text-align: center; margin-top: 1em; } .header-primary { font-size: 2em; font-weight: 700; } /* Responsive Styles */ @media (max-width: 768px) { .hero { flex-direction: column; height: auto; } .hero-one, .hero-two, .hero-three, .hero-four, .hero-five, .hero-six, .hero-seven, .hero-eight { width: 100%; height: 50vh; position: relative; } .hero-one, .hero-three, .hero-five, .hero-seven { order: 2; clip-path: none; } .hero-two, .hero-four, .hero-six, .hero-eight { order: 1; } .header-primary { font-size: 1.5em; } } /* BUTTON STYLES TEST */ .type--A{ --line_color : #ffffff ; --back_color : #ffffff ; } .type--B{ --line_color : #ffffff ; --back_color : #E9ECFF; } .type--C{ --line_color : #ffffff ; --back_color : #DEFFFA ; } .type--D{ --line_color : #cda45e ; --back_color : #cda45e ; } .btn{ position : relative ; z-index : 0 ; width : 240px ; height : 56px ; text-decoration : none ; font-size : 14px ; font-weight : bold ; color : var(--line_color) ; letter-spacing : 2px ; transition : all .3s ease ; } .btn__text{ display : flex ; justify-content : center ; align-items : center ; width : 100% ; height : 100% ; } .btn::before, .btn::after, .btn__text::before, .btn__text::after{ content : '' ; position : absolute ; height : 3px ; border-radius : 2px ; background : var(--line_color) ; transition : all .5s ease ; } .btn::before{ top : 0 ; left : 54px ; width : calc( 100% - 56px * 2 - 16px ) ; } .btn::after{ top : 0 ; right : 54px ; width : 8px ; } .btn__text::before{ bottom : 0 ; right : 54px ; width : calc( 100% - 56px * 2 - 16px ) ; } .btn__text::after{ bottom : 0 ; left : 54px ; width : 8px ; } .btn__line{ position : absolute ; top : 0 ; width : 56px ; height : 100% ; overflow : hidden ; } .btn__line::before{ content : '' ; position : absolute ; top : 0 ; width : 150% ; height : 100% ; box-sizing : border-box ; border-radius : 300px ; border : solid 3px var(--line_color) ; } .btn__line:nth-child(1), .btn__line:nth-child(1)::before{ left : 0 ; } .btn__line:nth-child(2), .btn__line:nth-child(2)::before{ right : 0 ; } .btn:hover{ letter-spacing : 6px ; } .btn:hover::before, .btn:hover .btn__text::before{ width : 8px ; } .btn:hover::after, .btn:hover .btn__text::after{ width : calc( 100% - 56px * 2 - 16px ) ; } .btn__drow1, .btn__drow2{ position : absolute ; z-index : -1 ; border-radius : 16px ; transform-origin : 16px 16px ; } .btn__drow1{ top : -16px ; left : 40px ; width : 32px ; height : 0; transform : rotate( 30deg ) ; } .btn__drow2{ top : 44px ; left : 77px ; width : 32px ; height : 0 ; transform : rotate(-127deg ) ; } .btn__drow1::before, .btn__drow1::after, .btn__drow2::before, .btn__drow2::after{ content : '' ; position : absolute ; } .btn__drow1::before{ bottom : 0 ; left : 0 ; width : 0 ; height : 32px ; border-radius : 16px ; transform-origin : 16px 16px ; transform : rotate( -60deg ) ; } .btn__drow1::after{ top : -10px ; left : 45px ; width : 0 ; height : 32px ; border-radius : 16px ; transform-origin : 16px 16px ; transform : rotate( 69deg ) ; } .btn__drow2::before{ bottom : 0 ; left : 0 ; width : 0 ; height : 32px ; border-radius : 16px ; transform-origin : 16px 16px ; transform : rotate( -146deg ) ; } .btn__drow2::after{ bottom : 26px ; left : -40px ; width : 0 ; height : 32px ; border-radius : 16px ; transform-origin : 16px 16px ; transform : rotate( -262deg ) ; } .btn__drow1, .btn__drow1::before, .btn__drow1::after, .btn__drow2, .btn__drow2::before, .btn__drow2::after{ background : var( --back_color ) ; } .btn:hover .btn__drow1{ animation : drow1 ease-in .06s ; animation-fill-mode : forwards ; } .btn:hover .btn__drow1::before{ animation : drow2 linear .08s .06s ; animation-fill-mode : forwards ; } .btn:hover .btn__drow1::after{ animation : drow3 linear .03s .14s ; animation-fill-mode : forwards ; } .btn:hover .btn__drow2{ animation : drow4 linear .06s .2s ; animation-fill-mode : forwards ; } .btn:hover .btn__drow2::before{ animation : drow3 linear .03s .26s ; animation-fill-mode : forwards ; } .btn:hover .btn__drow2::after{ animation : drow5 linear .06s .32s ; animation-fill-mode : forwards ; } @keyframes drow1{ 0% { height : 0 ; } 100% { height : 100px ; } } @keyframes drow2{ 0% { width : 0 ; opacity : 0 ;} 10% { opacity : 0 ;} 11% { opacity : 1 ;} 100% { width : 120px ; } } @keyframes drow3{ 0% { width : 0 ; } 100% { width : 80px ; } } @keyframes drow4{ 0% { height : 0 ; } 100% { height : 120px ; } } @keyframes drow5{ 0% { width : 0 ; } 100% { width : 124px ; } } .card-body { height: 200px; /* Adjust height as necessary */ } /* SVG DIVIDERS */ .custom-shape-divider-bottom-1728082217 { position: absolute; bottom: 0; left: 0; width: 100%; overflow: hidden; line-height: 0; } .custom-shape-divider-bottom-1728082217 svg { position: relative; display: block; width: calc(173% + 1.3px); height: 61px; } .custom-shape-divider-bottom-1728082217 .shape-fill { fill: #212529; }.custom-shape-divider-top-1728082384 { position: absolute; top: 0; left: 0; width: 100%; overflow: hidden; line-height: 0; } .custom-shape-divider-top-1728082384 svg { position: relative; display: block; width: calc(120% + 1.3px); height: 66px; } .custom-shape-divider-top-1728082384 .shape-fill { fill: #212529; } .custom-shape-divider-top-1728507760 { position: absolute; top: 0; left: 0; width: 100%; overflow: hidden; line-height: 0; } .custom-shape-divider-top-1728507760 svg { position: relative; display: block; width: calc(100% + 1.3px); height: 79px; } .custom-shape-divider-top-1728507760 .shape-fill { fill: #1A1814; } .custom-shape-divider-top-1728507625 { position: absolute; top: 0; left: 0; width: 100%; overflow: hidden; line-height: 0; } .custom-shape-divider-top-1728507625 svg { position: relative; display: block; width: calc(100% + 1.3px); height: 79px; transform: rotateY(180deg); } .custom-shape-divider-top-1728507625 .shape-fill { fill: #212529; } .custom-shape-divider-top-1728506922 { position: absolute; top: 0; left: 0; width: 100%; overflow: hidden; line-height: 0; } .custom-shape-divider-top-1728506922 svg { position: relative; display: block; width: calc(100% + 1.3px); height: 120px; transform: rotateY(180deg); } .custom-shape-divider-top-1728506922 .shape-fill { fill: #1A1814; } .custom-shape-divider-bottom-1728505830 { position: absolute; bottom: 0; left: 0; width: 100%; overflow: hidden; line-height: 0; transform: rotate(180deg); } .custom-shape-divider-bottom-1728505830 svg { position: relative; display: block; width: calc(100% + 1.3px); height: 100px; transform: rotateY(180deg); } .custom-shape-divider-bottom-1728505830 .shape-fill { fill: #1A1814; } .custom-shape-divider-top-1728505765 { position: absolute; top: 0; left: 0; width: 100%; overflow: hidden; line-height: 0; } .custom-shape-divider-top-1728505765 svg { position: relative; display: block; width: calc(100% + 1.3px); height: 150px; } .custom-shape-divider-top-1728505765 .shape-fill { fill: #1A1814; } .custom-shape-divider-top-1727816120 { position: absolute; top: 0; left: 0; width: 100%; overflow: hidden; line-height: 0; } .custom-shape-divider-top-1727816120 svg { position: relative; display: block; width: calc(100% + 1.3px); height: 59px; } .custom-shape-divider-top-1727816120 .shape-fill { fill: #1A1814; } .custom-shape-divider-bottom-1727816196 { position: absolute; bottom: 0; left: 0; width: 100%; overflow: hidden; line-height: 0; transform: rotate(180deg); } .custom-shape-divider-bottom-1727816196 svg { position: relative; display: block; width: calc(100% + 1.3px); height: 59px; transform: rotateY(180deg); } .custom-shape-divider-bottom-1727816196 .shape-fill { fill: #1A1814; } .custom-shape-divider-bottom-1727817789 { position: absolute; bottom: 0; left: 0; width: 100%; overflow: hidden; line-height: 0; transform: rotate(180deg); } .custom-shape-divider-bottom-1727817789 svg { position: relative; display: block; width: calc(100% + 1.3px); height: 59px; } .custom-shape-divider-bottom-1727817789 .shape-fill { fill: #1A1814; } .custom-shape-divider-top-1727890764 { position: absolute; top: 0; left: 0; width: 100%; overflow: hidden; line-height: 0; } .custom-shape-divider-top-1727890764 svg { position: relative; display: block; width: calc(100% + 1.3px); height: 70px; } .custom-shape-divider-top-1727890764 .shape-fill { fill: #1A1814; } /* SICK AF PHOTOGRID EFFECT */ .photo-grid { display: grid; grid-template-columns: 1fr 1fr; row-gap: 30px; column-gap: 30px; padding: 20px; margin-top: 20px; width: 100%; } .photo-grid img { position: absolute; max-width: 60%; border: 5px solid white; box-shadow: 0 0 15px rgba(0,0,0,0.2); transition: all 0.3s ease, transform 0.3s ease; } .photo-grid img::after { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: rgba(255,255,255,0.1); opacity: 0; transition: opacity 0.3s ease; } .photo-grid img:hover { transform: scale(1.08); z-index: 10; box-shadow: 0 8px 20px rgba(0,0,0,0.3); } .photo-grid img:hover::after { opacity: 1; } .photo-1 { top: 0; left: 0; z-index: 1; } .photo-2 { top: 50px; right: 0; z-index: 2; } .photo-3 { bottom: 86px; left: 50px; z-index: 3; } .photo-4 { bottom: 0; right: 50px; z-index: 4; } .haircut-section { display: flex; margin: 50px 0; background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%); border-radius: 15px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1); overflow: hidden; transition: all 0.3s ease; } .haircut-section:hover { transform: translateY(-5px); box-shadow: 0 15px 40px rgba(0, 0, 0, 0.15); } .image-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 15px; width: 50%; padding: 15px; } .image-grid img { width: 100%; height: auto; object-fit: cover; aspect-ratio: 1 / 1; border-radius: 10px; transition: all 0.3s ease; } .image-grid img:hover { transform: scale(1.05); box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2); } .haircut-content { width: 50%; padding: 30px; background-color: rgba(255, 255, 255, 0.8); border-radius: 15px; box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05); } .full-width-gallery { width: 100vw; margin-left: calc(-50vw + 50%); background-color: #f8f9fa; padding: 20px 0; overflow: hidden; } .img-container { display: flex; flex-wrap: wrap; max-width: 100%; padding: 0; margin: 0; } .img-wrapper { flex: 0 0 25%; max-width: 25%; padding: 5px; box-sizing: border-box; } .img-wrapper img { width: 100%; height: 400px; object-fit: cover; border-radius: 10px; transition: all 0.3s ease; transition: all 0.3s ease, filter 0.3s ease; } .img-wrapper img:hover { transform: scale(1.05); box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2); filter: brightness(1.1) contrast(1.1); } @media (max-width: 768px) { .content-section, .haircut-section { flex-direction: column; } .photo-grid, .image-grid, .haircut-content { width: 100%; } .photo-grid { height: auto; display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; } .photo-grid img { position: static; max-width: 100%; } .img-wrapper { flex: 0 0 50%; max-width: 50%; } .img-wrapper img { height: 250px; } } .pricing-section { padding: 4rem 0; } .pricing-section h2 { margin-bottom: 2rem; } .pricing-item { margin-bottom: 1rem; } #call-to-action, #call-to-action2 { position: relative; overflow: hidden; min-height: 400px; } .parallax-bg { background-image: url('images/gallery6.jpg'); background-attachment: fixed; background-position: center; background-repeat: no-repeat; background-size: cover; position: relative; min-height: 400px; padding: 100px 0; display: flex; justify-content: center; align-items: center; z-index: 1; } .parallax-bg2 { background-image: url('images/haircut1.jpg'); background-attachment: fixed; background-position: center; background-repeat: no-repeat; background-size: cover; position: relative; min-height: 400px; padding: 100px 0; display: flex; justify-content: center; align-items: center; z-index: 1; } .parallax-bg::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.5); z-index: -1; } /* Media query for mobile devices */ @media (max-width: 768px) { .parallax-bg, .parallax-bg2 { background-attachment: scroll; /* Disable parallax effect */ background-size: fit; /* Ensure the full image is visible */ min-height: auto; /* Adjust min-height for mobile */ padding: 50px 0; /* Adjust padding for mobile */ } .parallax-bg::before { background: rgba(0, 0, 0, 0.7); /* Retain overlay on mobile */ } } /* Custom styles for the about-section image */ .about-image { width: 100%; height: 100%; object-fit: cover; } /* Adjustments for non-desktop screens */ @media (max-width: 768px) { .about-image { height: 50vh; object-fit: cover; } } @media (max-width: 576px) { .about-image { height: 40vh; object-fit: cover; } } #galleryCarousel { width: 100vw; margin-left: calc(-50vw + 50%); background-color: #1a1814; padding: 20px 0; overflow: hidden; } .carousel-item img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 10px; transition: all 0.3s ease, filter 0.3s ease; } .carousel-item img:hover { transform: scale(1.05); box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2); filter: brightness(1.1) contrast(1.1); } @media (max-width: 992px) { .carousel-item img { aspect-ratio: 4 / 3; } } @media (max-width: 768px) { .carousel-item img { aspect-ratio: 4 / 3; } } @media (max-width: 575px) { .carousel-item .d-flex { justify-content: center; } .carousel-item .col-12 { max-width: 80%; } } /*IMAGE BORDER*/ .custom-image-style { border: 2px solid white; box-shadow: 0 4px 8px rgba(255, 255, 255, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.5); filter: drop-shadow(0 4px 8px rgba(255, 255, 255, 0.5)); } .custom-image-style2 { border: 2px solid white; box-shadow: 0 4px 8px rgba(255, 255, 255, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.5); filter: drop-shadow(0 4px 8px rgba(255, 255, 255, 0.5)); width: 100%; height: auto; object-fit: cover; display: block; } /* MAIN CSS FOR STATIC MASONRY GRID */ .image-grid-section * { margin: 0; padding: 0; box-sizing: border-box; margin-top: 1rem; } .image-grid-section { padding: 15px; } .image-grid-section img { max-width: 100%; height: auto; vertical-align: middle; display: inline-block; border: 2px solid white; border-radius: 5px; filter: drop-shadow(0 0 8px rgba(255, 255, 255, 0.7)); transition: transform 0.3s ease, filter 0.3s ease; } .image-grid-section img:hover { transform: scale(1.05); filter: drop-shadow(0 0 16px rgba(255, 255, 255, 0.9)); } .image-grid-section .grid-wrapper > div > img { width: 100%; height: 100%; object-fit: cover; } .image-grid-section .grid-wrapper { display: grid; grid-gap: 10px; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); grid-auto-rows: 200px; grid-auto-flow: dense; } .image-grid-section .grid-wrapper .wide { grid-column: span 2; } .image-grid-section .grid-wrapper .tall { grid-row: span 2; } .image-grid-section .grid-wrapper .big { grid-column: span 2; grid-row: span 2; } /* Pricing Section Styles */ .pricing-section { background-color: #1a1814; padding: 60px 0; } .section-title { font-size: 2.5rem; font-weight: 700; color: #cda45e; } .section-subtitle { font-size: 1.1rem; color: #e6cba8; } /* Pricing Card */ .pricing-card { background-color: #ffffff; border: 1px solid #e6cba8; border-radius: 15px; transition: all 0.3s ease; position: relative; overflow: hidden; } .pricing-card:hover { box-shadow: 0 15px 30px rgba(0, 0, 0, 0.2); transform: translateY(-10px); } .pricing-card::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 5px; background: linear-gradient(90deg, #cda45e, #b5914f); z-index: 1; } .pricing-category { font-size: 1.5rem; font-weight: 600; color: #cda45e; border-bottom: 2px solid #cda45e; padding-bottom: 10px; margin-bottom: 20px; text-align: center; } /* Pricing List */ .pricing-card ul { padding-left: 0; list-style: none; } .pricing-card ul li { font-size: 1.1rem; color: #1a1814; display: flex; justify-content: space-between; padding: 10px 0; border-bottom: 1px solid #e6cba8; } .pricing-card ul li:last-child { border-bottom: none; } .pricing-card ul li:hover { background-color: #f7f7f7; cursor: pointer; } @media (max-width: 768px) { .pricing-category { font-size: 1.3rem; } .pricing-card ul li { font-size: 1rem; } .section-title { font-size: 2rem; } } #familySection .image-container { width: 100%; height: 300px; /* Set a fixed height */ overflow: hidden; } #familySection .image-container img { width: 100%; height: 100%; object-fit: cover; /* Makes the image fill the container, maintaining aspect ratio */ } /* ABOUT-US CAROUSEL */ @media (max-width: 768px) { #familySection .image-container { height: 200px; /* Reduce height for smaller screens */ } } @media (max-width: 768px) { .carousel-inner img { height: auto; /* Make sure the image adjusts height correctly */ } .custom-heading { font-size: 1.5rem; /* Decrease the font size on smaller screens */ letter-spacing: normal; /* Optional: adjust letter-spacing for better readability */ } } .contact-section { padding: 3rem 0; } .contact-container { background-color: #ffffff; border-radius: 10px; box-shadow: 0 0 20px rgba(0,0,0,0.1); overflow: hidden; } .photo-container { height: 100%; background-image: url('images/1newcontactpic.jpg'); background-size: cover; background-position: center; } .form-container { padding: 2rem; } .form-control { border: none; border-bottom: 1px solid #ced4da; border-radius: 0; padding: 0.75rem 0; font-size: 1rem; background-color: transparent; transition: border-color 0.15s ease-in-out; } .form-control:focus { box-shadow: none; border-color: #007bff; } .form-group { margin-bottom: 1.5rem; } .btn-submit { background-color: #007bff; color: #ffffff; padding: 0.75rem 2rem; border-radius: 30px; border: none; transition: background-color 0.15s ease-in-out; } .btn-submit:hover { background-color: #0056b3; } .info-card { background-color: #ffffff; padding: 1.5rem; border-radius: 10px; box-shadow: 0 0 10px rgba(0, 0, 0, 0.05); margin-bottom: 1rem; height: 100%; /* Ensures both cards are of equal height */ } @media (min-width: 768px) { .info-card { display: flex; flex-direction: column; justify-content: center; /* Centers content vertically */ } } .info-card h3 { margin-bottom: 1rem; } .contact-info p { margin-bottom: 0.5rem; } .contact-info i { color: #007bff; margin-right: 0.5rem; width: 20px; } footer a { text-decoration: none; } .guideText { font-size: 17px; font-family: sans-serif; padding-bottom: 15px; line-height: 1.6; /* border: 2px solid aliceblue; border-radius: 13px; */ padding: 10px; margin-bottom: 25px; } .guideTitle { font-size: 20px; color: #2c2e30; font-family: 'Asap', sans-serif; } .guideContainer { margin-bottom: 80px; } .guideNum { font-size: 26px; background: aliceblue; padding: 6px 6px 6px 6px; } .guideIcon { width: 60px; } .guideNumContainer { /* background: aliceblue; */ display: flex; justify-content: center; align-items: center; } .guideNum-l { background: black; display: flex; justify-content: center; align-items: center; color: white; width: 100px; height: 100px; text-align: center; border-radius: 50%; font-size: 80px; font-size: 200px; font-family: 'Asap', sans-serif; min-width: 1vw; width: 300px; min-height: 1vh; height: auto; } .slider-container { padding: 0; position: relative; width: 100vw; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); } .slider-image { height: 350px; object-fit: cover; cursor: pointer; transition: transform 0.3s ease, box-shadow 0.3s ease; border-radius: 10px; border: 2px solid #fff; box-shadow: 0 4px 8px rgba(255, 255, 255, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.5); filter: drop-shadow(0 4px 8px rgba(255, 255, 255, 0.5)); } .slider-image:hover { transform: scale(1.05); } @media (min-width: 992px) { .slider-image { margin: 0 20px; } } @media (max-width: 768px) { .slider-image { height: 200px; margin: 0 10px; } .carousel-control-prev, .carousel-control-next { width: 40px; height: 40px; } } .carousel-control-prev, .carousel-control-next { top: 50%; transform: translateY(-50%); width: 50px; height: 50px; background-color: rgba(0, 0, 0, 0.3); border-radius: 50%; } .carousel-control-prev { left: 0; } .carousel-control-next { right: 0; } .modal-image { max-width: 100%; max-height: 80vh; margin: 0 auto; display: block; } .carousel-item { transition: transform 3.0s ease-in-out; } /* Styling for the appointment container */ .appointment-section { position: relative; padding: 4rem 0; background-color: #1a1814; color: #fff; } .appointment-container { display: flex; flex-wrap: wrap; margin: 0 auto; max-width: 1200px; } .photo-grid-container { flex: 1; min-width: 300px; position: relative; height: 600px; padding: 20px; } .photo-grid { position: relative; width: 100%; height: 100%; } .photo-grid img { position: absolute; max-width: 60%; border: 5px solid white; box-shadow: 0 0 15px rgba(0,0,0,0.2); transition: all 0.3s ease, transform 0.3s ease; } .photo-grid img:hover { transform: scale(1.08); z-index: 10; box-shadow: 0 8px 20px rgba(0,0,0,0.3); } .photo-1 { top: 0; left: 0; z-index: 1; } .photo-2 { top: 50px; right: 0; z-index: 2; } .photo-3 { bottom: 86px; left: 50px; z-index: 3; } .photo-4 { bottom: 0; right: 50px; z-index: 4; } .iframe-container { flex: 1; min-width: 300px; padding: 20px; display: flex; flex-direction: column; } .section-heading { text-align: center; margin-bottom: 1.5rem; color: #cda45e; } .iframe-wrapper { position: relative; height: 850px; overflow: hidden; border-radius: 8px; box-shadow: 0 4px 12px rgba(0,0,0,0.1); } .calendar-iframe { position: absolute; top: 0; left: 0; width: 100%; height: 1550px; border: none; } @media (max-width: 768px) { .photo-grid-container { height: 400px; } .photo-grid img { position: relative; max-width: 80%; display: block; margin: 10px auto; } .photo-1, .photo-2, .photo-3, .photo-4 { position: static; margin: 10px auto; } .iframe-wrapper { height: 800px; } }:root { --primary-color: #35374B; --secondary-color: #344955; --tertiary-color: #50727B; --light-color: #78A083; --dark-color: #bdbdbd; --default-font: "Open Sans", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; --heading-font: "Montserrat", sans-serif; --nav-font: "Poppins", sans-serif; } html, body { font-family: "Montserrat", sans-serif; line-height: 1.6; color: var(--dark-color); background-color: #1a1814; overflow-x: hidden; } h1, h2, h3, h4, h5, h6{ color: #cda45e; } .navbar { background-color: #000; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); transition: background-color 0.3s ease, box-shadow 0.3s ease; position: fixed; width: 100%; top: 0; z-index: 1000; display: flex; justify-content: center; } .navbar .container-fluid { display: flex; justify-content: space-between; align-items: center; width: 100%; } .navbar-brand { margin: 0 auto; } .navbar-nav { flex-grow: 1; justify-content: center; } .navbar-brand, .navbar-nav .nav-link { color: #fff; transition: color 0.3s ease; } .navbar-brand img { display: block; } @media (max-width: 768px) { .navbar-brand img { content: url(images/logo2.png); width: auto; } } footer { background-color: #212529; color: white; padding: 40px 0; margin-top: -1px; } .navbar .dropdown-menu { background-color: #000; border: none; transition: background-color 0.3s ease; } .navbar .dropdown-item { color: #fff; transition: text-shadow 0.3s ease, color 0.3s ease; } .navbar .dropdown-item:hover { background-color: transparent; color: #fff; } .navbar.scrolled { background-color: rgba(0, 0, 0, 0.7); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3); } .navbar.scrolled .navbar-brand, .navbar.scrolled .nav-link { color: #fff; text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.7); } .navbar.scrolled .dropdown-menu { background-color: rgba(0, 0, 0, 0.7); } .nav-item.dropdown:hover .dropdown-menu { display: block; } .nav-item.dropdown .dropdown-menu { margin-top: 0; transition: visibility 0.3s ease; } /**************LANDING PAGE HERO*********************/ .hero-section { position: relative; width: 100%; height: 100vh; overflow: hidden; } .hero-video { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; z-index: 1; } .hero-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.5); /* Dark overlay for readability */ z-index: 2; } .hero-content { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 3; text-align: center; color: #fff; padding: 15px; } .hero-title { font-size: 5rem; margin-bottom: 10px; } .hero-subtitle { font-size: 1.25rem; margin-bottom: 20px; } .hero-cta { font-size: 1rem; padding: 10px 20px; border-radius: 5px; } /* Responsive styles */ @media (max-width: 768px) { .hero-title { font-size: 2rem; } .hero-subtitle { font-size: 1rem; } } /*FOR THE SPECIAL DROP DOWN*/ @media only screen and (min-width: 1024px) { h1 { padding: 0 0; font-size: 3rem; } .section { margin: 0 auto; max-width: 1200px; } .button { padding: 0 2em; font-size: 1.2rem; } .extra-margin-b { margin-bottom: 3em; } } .specials { overflow: hidden; } .specials .nav-tabs { border: 0; } .specials .nav-link { border: 0; padding: 12px 15px; transition: 0.3s; color: #fff; border-radius: 0; border-right: 2px solid #cda45e; font-weight: 600; font-size: 15px; } .specials .nav-link:hover { color: #cda45e; } .specials .nav-link.active { color: #1a1814; background: #cda45e; border-color: #cda45e; } .specials .nav-link:hover { border-color: #cda45e; } .specials .tab-pane.active { -webkit-animation: fadeIn 0.5s ease-out; animation: fadeIn 0.5s ease-out; } .specials .details h3 { font-size: 26px; font-weight: 600; margin-bottom: 20px; color: #fff; } .specials .details p { color: #aaaaaa; } .specials .details p:last-child { margin-bottom: 0; } @media (max-width: 992px) { .specials .nav-link { border: 0; padding: 15px; } } /* NEW HERO TEST */ /* Base Styles */ * { margin-top: 0; padding: 0; box-sizing: border-box; } /* Hero Section */ .hero { width: 100vw; height: 100vh; position: relative; display: flex; justify-content: center; align-items: center; text-align: center; color: #CCC; text-transform: uppercase; font-family: 'Amatic SC', sans-serif; letter-spacing: 17.5px; flex-direction: column; padding-top: 70px; } /* Hero Background Sections */ .hero-one, .hero-two, .hero-three, .hero-four, .hero-five, .hero-six,.hero-seven,.hero-eight { position: absolute; top: 0; width: 60%; height: 100vh; z-index: 1; background-size: cover; background-repeat: no-repeat; background-position: center; } /* Individual Hero Sections */ .hero-one { left: 0; background-color: black; clip-path: polygon(0 0, 60vw 0, 40vw 100vh, 0 100vh); background-image: linear-gradient(rgba(0,0,0,.5), rgba(0,0,0,.5)), url(images/contact.jpg); } .hero-two { right: 0; background-color: rgb(0, 0, 0); background-image: linear-gradient(rgba(0,0,0,.2), rgba(0,0,0,.5)), url(images/hairsalon2.jpg); } .hero-three { left: 0; background-color: black; clip-path: polygon(0 0, 60vw 0, 40vw 100vh, 0 100vh); background-image: linear-gradient(rgba(0,0,0,.5), rgba(0,0,0,.5)), url(images/hero-three.jpg); } .hero-four { right: 0; background-color: rgb(0, 0, 0); background-image: linear-gradient(rgba(0,0,0,.2), rgba(0,0,0,.5)), url(images/hero-four.jpg); } .hero-five { left: 0; background-color: black; clip-path: polygon(0 0, 60vw 0, 40vw 100vh, 0 100vh); background-image: linear-gradient(rgba(0,0,0,.5), rgba(0,0,0,.5)), url(images/hairextension1.jpg); } .hero-six { right: 0; background-color: rgb(0, 0, 0); background-image: linear-gradient(rgba(0,0,0,.2), rgba(0,0,0,.5)), url(images/hairextension2.jpg); } .hero-seven { left: 0; background-color: rgb(0, 0, 0); background-image: linear-gradient(rgba(0,0,0,.2), rgba(0,0,0,.5)), url(images/microblading1.jpg); } .hero-eight { right: 0; background-color: rgb(0, 0, 0); background-image: linear-gradient(rgba(0,0,0,.2), rgba(0,0,0,.5)), url(images/microblading3.jpg); } /* Header Titles */ .header-title { z-index: 2; position: relative; text-align: center; margin-top: 1em; } .header-primary { font-size: 2em; font-weight: 700; } /* Responsive Styles */ @media (max-width: 768px) { .hero { flex-direction: column; height: auto; } .hero-one, .hero-two, .hero-three, .hero-four, .hero-five, .hero-six, .hero-seven, .hero-eight { width: 100%; height: 50vh; position: relative; } .hero-one, .hero-three, .hero-five, .hero-seven { order: 2; clip-path: none; } .hero-two, .hero-four, .hero-six, .hero-eight { order: 1; } .header-primary { font-size: 1.5em; } } /* BUTTON STYLES TEST */ .type--A{ --line_color : #ffffff ; --back_color : #ffffff ; } .type--B{ --line_color : #ffffff ; --back_color : #E9ECFF; } .type--C{ --line_color : #ffffff ; --back_color : #DEFFFA ; } .type--D{ --line_color : #cda45e ; --back_color : #cda45e ; } .btn{ position : relative ; z-index : 0 ; width : 240px ; height : 56px ; text-decoration : none ; font-size : 14px ; font-weight : bold ; color : var(--line_color) ; letter-spacing : 2px ; transition : all .3s ease ; } .btn__text{ display : flex ; justify-content : center ; align-items : center ; width : 100% ; height : 100% ; } .btn::before, .btn::after, .btn__text::before, .btn__text::after{ content : '' ; position : absolute ; height : 3px ; border-radius : 2px ; background : var(--line_color) ; transition : all .5s ease ; } .btn::before{ top : 0 ; left : 54px ; width : calc( 100% - 56px * 2 - 16px ) ; } .btn::after{ top : 0 ; right : 54px ; width : 8px ; } .btn__text::before{ bottom : 0 ; right : 54px ; width : calc( 100% - 56px * 2 - 16px ) ; } .btn__text::after{ bottom : 0 ; left : 54px ; width : 8px ; } .btn__line{ position : absolute ; top : 0 ; width : 56px ; height : 100% ; overflow : hidden ; } .btn__line::before{ content : '' ; position : absolute ; top : 0 ; width : 150% ; height : 100% ; box-sizing : border-box ; border-radius : 300px ; border : solid 3px var(--line_color) ; } .btn__line:nth-child(1), .btn__line:nth-child(1)::before{ left : 0 ; } .btn__line:nth-child(2), .btn__line:nth-child(2)::before{ right : 0 ; } .btn:hover{ letter-spacing : 6px ; } .btn:hover::before, .btn:hover .btn__text::before{ width : 8px ; } .btn:hover::after, .btn:hover .btn__text::after{ width : calc( 100% - 56px * 2 - 16px ) ; } .btn__drow1, .btn__drow2{ position : absolute ; z-index : -1 ; border-radius : 16px ; transform-origin : 16px 16px ; } .btn__drow1{ top : -16px ; left : 40px ; width : 32px ; height : 0; transform : rotate( 30deg ) ; } .btn__drow2{ top : 44px ; left : 77px ; width : 32px ; height : 0 ; transform : rotate(-127deg ) ; } .btn__drow1::before, .btn__drow1::after, .btn__drow2::before, .btn__drow2::after{ content : '' ; position : absolute ; } .btn__drow1::before{ bottom : 0 ; left : 0 ; width : 0 ; height : 32px ; border-radius : 16px ; transform-origin : 16px 16px ; transform : rotate( -60deg ) ; } .btn__drow1::after{ top : -10px ; left : 45px ; width : 0 ; height : 32px ; border-radius : 16px ; transform-origin : 16px 16px ; transform : rotate( 69deg ) ; } .btn__drow2::before{ bottom : 0 ; left : 0 ; width : 0 ; height : 32px ; border-radius : 16px ; transform-origin : 16px 16px ; transform : rotate( -146deg ) ; } .btn__drow2::after{ bottom : 26px ; left : -40px ; width : 0 ; height : 32px ; border-radius : 16px ; transform-origin : 16px 16px ; transform : rotate( -262deg ) ; } .btn__drow1, .btn__drow1::before, .btn__drow1::after, .btn__drow2, .btn__drow2::before, .btn__drow2::after{ background : var( --back_color ) ; } .btn:hover .btn__drow1{ animation : drow1 ease-in .06s ; animation-fill-mode : forwards ; } .btn:hover .btn__drow1::before{ animation : drow2 linear .08s .06s ; animation-fill-mode : forwards ; } .btn:hover .btn__drow1::after{ animation : drow3 linear .03s .14s ; animation-fill-mode : forwards ; } .btn:hover .btn__drow2{ animation : drow4 linear .06s .2s ; animation-fill-mode : forwards ; } .btn:hover .btn__drow2::before{ animation : drow3 linear .03s .26s ; animation-fill-mode : forwards ; } .btn:hover .btn__drow2::after{ animation : drow5 linear .06s .32s ; animation-fill-mode : forwards ; } @keyframes drow1{ 0% { height : 0 ; } 100% { height : 100px ; } } @keyframes drow2{ 0% { width : 0 ; opacity : 0 ;} 10% { opacity : 0 ;} 11% { opacity : 1 ;} 100% { width : 120px ; } } @keyframes drow3{ 0% { width : 0 ; } 100% { width : 80px ; } } @keyframes drow4{ 0% { height : 0 ; } 100% { height : 120px ; } } @keyframes drow5{ 0% { width : 0 ; } 100% { width : 124px ; } } .card-body { height: 200px; /* Adjust height as necessary */ } /* SVG DIVIDERS */ .custom-shape-divider-bottom-1728082217 { position: absolute; bottom: 0; left: 0; width: 100%; overflow: hidden; line-height: 0; } .custom-shape-divider-bottom-1728082217 svg { position: relative; display: block; width: calc(173% + 1.3px); height: 61px; } .custom-shape-divider-bottom-1728082217 .shape-fill { fill: #212529; }.custom-shape-divider-top-1728082384 { position: absolute; top: 0; left: 0; width: 100%; overflow: hidden; line-height: 0; } .custom-shape-divider-top-1728082384 svg { position: relative; display: block; width: calc(120% + 1.3px); height: 66px; } .custom-shape-divider-top-1728082384 .shape-fill { fill: #212529; } .custom-shape-divider-top-1728507760 { position: absolute; top: 0; left: 0; width: 100%; overflow: hidden; line-height: 0; } .custom-shape-divider-top-1728507760 svg { position: relative; display: block; width: calc(100% + 1.3px); height: 79px; } .custom-shape-divider-top-1728507760 .shape-fill { fill: #1A1814; } .custom-shape-divider-top-1728507625 { position: absolute; top: 0; left: 0; width: 100%; overflow: hidden; line-height: 0; } .custom-shape-divider-top-1728507625 svg { position: relative; display: block; width: calc(100% + 1.3px); height: 79px; transform: rotateY(180deg); } .custom-shape-divider-top-1728507625 .shape-fill { fill: #212529; } .custom-shape-divider-top-1728506922 { position: absolute; top: 0; left: 0; width: 100%; overflow: hidden; line-height: 0; } .custom-shape-divider-top-1728506922 svg { position: relative; display: block; width: calc(100% + 1.3px); height: 120px; transform: rotateY(180deg); } .custom-shape-divider-top-1728506922 .shape-fill { fill: #1A1814; } .custom-shape-divider-bottom-1728505830 { position: absolute; bottom: 0; left: 0; width: 100%; overflow: hidden; line-height: 0; transform: rotate(180deg); } .custom-shape-divider-bottom-1728505830 svg { position: relative; display: block; width: calc(100% + 1.3px); height: 100px; transform: rotateY(180deg); } .custom-shape-divider-bottom-1728505830 .shape-fill { fill: #1A1814; } .custom-shape-divider-top-1728505765 { position: absolute; top: 0; left: 0; width: 100%; overflow: hidden; line-height: 0; } .custom-shape-divider-top-1728505765 svg { position: relative; display: block; width: calc(100% + 1.3px); height: 150px; } .custom-shape-divider-top-1728505765 .shape-fill { fill: #1A1814; } .custom-shape-divider-top-1727816120 { position: absolute; top: 0; left: 0; width: 100%; overflow: hidden; line-height: 0; } .custom-shape-divider-top-1727816120 svg { position: relative; display: block; width: calc(100% + 1.3px); height: 59px; } .custom-shape-divider-top-1727816120 .shape-fill { fill: #1A1814; } .custom-shape-divider-bottom-1727816196 { position: absolute; bottom: 0; left: 0; width: 100%; overflow: hidden; line-height: 0; transform: rotate(180deg); } .custom-shape-divider-bottom-1727816196 svg { position: relative; display: block; width: calc(100% + 1.3px); height: 59px; transform: rotateY(180deg); } .custom-shape-divider-bottom-1727816196 .shape-fill { fill: #1A1814; } .custom-shape-divider-bottom-1727817789 { position: absolute; bottom: 0; left: 0; width: 100%; overflow: hidden; line-height: 0; transform: rotate(180deg); } .custom-shape-divider-bottom-1727817789 svg { position: relative; display: block; width: calc(100% + 1.3px); height: 59px; } .custom-shape-divider-bottom-1727817789 .shape-fill { fill: #1A1814; } .custom-shape-divider-top-1727890764 { position: absolute; top: 0; left: 0; width: 100%; overflow: hidden; line-height: 0; } .custom-shape-divider-top-1727890764 svg { position: relative; display: block; width: calc(100% + 1.3px); height: 70px; } .custom-shape-divider-top-1727890764 .shape-fill { fill: #1A1814; } /* SICK AF PHOTOGRID EFFECT */ .photo-grid { display: grid; grid-template-columns: 1fr 1fr; row-gap: 30px; column-gap: 30px; padding: 20px; margin-top: 20px; width: 100%; } .photo-grid img { position: absolute; max-width: 60%; border: 5px solid white; box-shadow: 0 0 15px rgba(0,0,0,0.2); transition: all 0.3s ease, transform 0.3s ease; } .photo-grid img::after { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: rgba(255,255,255,0.1); opacity: 0; transition: opacity 0.3s ease; } .photo-grid img:hover { transform: scale(1.08); z-index: 10; box-shadow: 0 8px 20px rgba(0,0,0,0.3); } .photo-grid img:hover::after { opacity: 1; } .photo-1 { top: 0; left: 0; z-index: 1; } .photo-2 { top: 50px; right: 0; z-index: 2; } .photo-3 { bottom: 86px; left: 50px; z-index: 3; } .photo-4 { bottom: 0; right: 50px; z-index: 4; } .haircut-section { display: flex; margin: 50px 0; background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%); border-radius: 15px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1); overflow: hidden; transition: all 0.3s ease; } .haircut-section:hover { transform: translateY(-5px); box-shadow: 0 15px 40px rgba(0, 0, 0, 0.15); } .image-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 15px; width: 50%; padding: 15px; } .image-grid img { width: 100%; height: auto; object-fit: cover; aspect-ratio: 1 / 1; border-radius: 10px; transition: all 0.3s ease; } .image-grid img:hover { transform: scale(1.05); box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2); } .haircut-content { width: 50%; padding: 30px; background-color: rgba(255, 255, 255, 0.8); border-radius: 15px; box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05); } .full-width-gallery { width: 100vw; margin-left: calc(-50vw + 50%); background-color: #f8f9fa; padding: 20px 0; overflow: hidden; } .img-container { display: flex; flex-wrap: wrap; max-width: 100%; padding: 0; margin: 0; } .img-wrapper { flex: 0 0 25%; max-width: 25%; padding: 5px; box-sizing: border-box; } .img-wrapper img { width: 100%; height: 400px; object-fit: cover; border-radius: 10px; transition: all 0.3s ease; transition: all 0.3s ease, filter 0.3s ease; } .img-wrapper img:hover { transform: scale(1.05); box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2); filter: brightness(1.1) contrast(1.1); } @media (max-width: 768px) { .content-section, .haircut-section { flex-direction: column; } .photo-grid, .image-grid, .haircut-content { width: 100%; } .photo-grid { height: auto; display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; } .photo-grid img { position: static; max-width: 100%; } .img-wrapper { flex: 0 0 50%; max-width: 50%; } .img-wrapper img { height: 250px; } } .pricing-section { padding: 4rem 0; } .pricing-section h2 { margin-bottom: 2rem; } .pricing-item { margin-bottom: 1rem; } #call-to-action, #call-to-action2 { position: relative; overflow: hidden; min-height: 400px; } .parallax-bg { background-image: url('images/gallery6.jpg'); background-attachment: fixed; background-position: center; background-repeat: no-repeat; background-size: cover; position: relative; min-height: 400px; padding: 100px 0; display: flex; justify-content: center; align-items: center; z-index: 1; } .parallax-bg2 { background-image: url('images/haircut1.jpg'); background-attachment: fixed; background-position: center; background-repeat: no-repeat; background-size: cover; position: relative; min-height: 400px; padding: 100px 0; display: flex; justify-content: center; align-items: center; z-index: 1; } .parallax-bg::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.5); z-index: -1; } /* Media query for mobile devices */ @media (max-width: 768px) { .parallax-bg, .parallax-bg2 { background-attachment: scroll; /* Disable parallax effect */ background-size: fit; /* Ensure the full image is visible */ min-height: auto; /* Adjust min-height for mobile */ padding: 50px 0; /* Adjust padding for mobile */ } .parallax-bg::before { background: rgba(0, 0, 0, 0.7); /* Retain overlay on mobile */ } } /* Custom styles for the about-section image */ .about-image { width: 100%; height: 100%; object-fit: cover; } /* Adjustments for non-desktop screens */ @media (max-width: 768px) { .about-image { height: 50vh; object-fit: cover; } } @media (max-width: 576px) { .about-image { height: 40vh; object-fit: cover; } } #galleryCarousel { width: 100vw; margin-left: calc(-50vw + 50%); background-color: #1a1814; padding: 20px 0; overflow: hidden; } .carousel-item img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 10px; transition: all 0.3s ease, filter 0.3s ease; } .carousel-item img:hover { transform: scale(1.05); box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2); filter: brightness(1.1) contrast(1.1); } @media (max-width: 992px) { .carousel-item img { aspect-ratio: 4 / 3; } } @media (max-width: 768px) { .carousel-item img { aspect-ratio: 4 / 3; } } @media (max-width: 575px) { .carousel-item .d-flex { justify-content: center; } .carousel-item .col-12 { max-width: 80%; } } /*IMAGE BORDER*/ .custom-image-style { border: 2px solid white; box-shadow: 0 4px 8px rgba(255, 255, 255, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.5); filter: drop-shadow(0 4px 8px rgba(255, 255, 255, 0.5)); } .custom-image-style2 { border: 2px solid white; box-shadow: 0 4px 8px rgba(255, 255, 255, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.5); filter: drop-shadow(0 4px 8px rgba(255, 255, 255, 0.5)); width: 100%; height: auto; object-fit: cover; display: block; } /* MAIN CSS FOR STATIC MASONRY GRID */ .image-grid-section * { margin: 0; padding: 0; box-sizing: border-box; margin-top: 1rem; } .image-grid-section { padding: 15px; } .image-grid-section img { max-width: 100%; height: auto; vertical-align: middle; display: inline-block; border: 2px solid white; border-radius: 5px; filter: drop-shadow(0 0 8px rgba(255, 255, 255, 0.7)); transition: transform 0.3s ease, filter 0.3s ease; } .image-grid-section img:hover { transform: scale(1.05); filter: drop-shadow(0 0 16px rgba(255, 255, 255, 0.9)); } .image-grid-section .grid-wrapper > div > img { width: 100%; height: 100%; object-fit: cover; } .image-grid-section .grid-wrapper { display: grid; grid-gap: 10px; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); grid-auto-rows: 200px; grid-auto-flow: dense; } .image-grid-section .grid-wrapper .wide { grid-column: span 2; } .image-grid-section .grid-wrapper .tall { grid-row: span 2; } .image-grid-section .grid-wrapper .big { grid-column: span 2; grid-row: span 2; } /* Pricing Section Styles */ .pricing-section { background-color: #1a1814; padding: 60px 0; } .section-title { font-size: 2.5rem; font-weight: 700; color: #cda45e; } .section-subtitle { font-size: 1.1rem; color: #e6cba8; } /* Pricing Card */ .pricing-card { background-color: #ffffff; border: 1px solid #e6cba8; border-radius: 15px; transition: all 0.3s ease; position: relative; overflow: hidden; } .pricing-card:hover { box-shadow: 0 15px 30px rgba(0, 0, 0, 0.2); transform: translateY(-10px); } .pricing-card::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 5px; background: linear-gradient(90deg, #cda45e, #b5914f); z-index: 1; } .pricing-category { font-size: 1.5rem; font-weight: 600; color: #cda45e; border-bottom: 2px solid #cda45e; padding-bottom: 10px; margin-bottom: 20px; text-align: center; } /* Pricing List */ .pricing-card ul { padding-left: 0; list-style: none; } .pricing-card ul li { font-size: 1.1rem; color: #1a1814; display: flex; justify-content: space-between; padding: 10px 0; border-bottom: 1px solid #e6cba8; } .pricing-card ul li:last-child { border-bottom: none; } .pricing-card ul li:hover { background-color: #f7f7f7; cursor: pointer; } @media (max-width: 768px) { .pricing-category { font-size: 1.3rem; } .pricing-card ul li { font-size: 1rem; } .section-title { font-size: 2rem; } } #familySection .image-container { width: 100%; height: 300px; /* Set a fixed height */ overflow: hidden; } #familySection .image-container img { width: 100%; height: 100%; object-fit: cover; /* Makes the image fill the container, maintaining aspect ratio */ } /* ABOUT-US CAROUSEL */ @media (max-width: 768px) { #familySection .image-container { height: 200px; /* Reduce height for smaller screens */ } } @media (max-width: 768px) { .carousel-inner img { height: auto; /* Make sure the image adjusts height correctly */ } .custom-heading { font-size: 1.5rem; /* Decrease the font size on smaller screens */ letter-spacing: normal; /* Optional: adjust letter-spacing for better readability */ } } .contact-section { padding: 3rem 0; } .contact-container { background-color: #ffffff; border-radius: 10px; box-shadow: 0 0 20px rgba(0,0,0,0.1); overflow: hidden; } .photo-container { height: 100%; background-image: url('images/1newcontactpic.jpg'); background-size: cover; background-position: center; } .form-container { padding: 2rem; } .form-control { border: none; border-bottom: 1px solid #ced4da; border-radius: 0; padding: 0.75rem 0; font-size: 1rem; background-color: transparent; transition: border-color 0.15s ease-in-out; } .form-control:focus { box-shadow: none; border-color: #007bff; } .form-group { margin-bottom: 1.5rem; } .btn-submit { background-color: #007bff; color: #ffffff; padding: 0.75rem 2rem; border-radius: 30px; border: none; transition: background-color 0.15s ease-in-out; } .btn-submit:hover { background-color: #0056b3; } .info-card { background-color: #ffffff; padding: 1.5rem; border-radius: 10px; box-shadow: 0 0 10px rgba(0, 0, 0, 0.05); margin-bottom: 1rem; height: 100%; /* Ensures both cards are of equal height */ } @media (min-width: 768px) { .info-card { display: flex; flex-direction: column; justify-content: center; /* Centers content vertically */ } } .info-card h3 { margin-bottom: 1rem; } .contact-info p { margin-bottom: 0.5rem; } .contact-info i { color: #007bff; margin-right: 0.5rem; width: 20px; } footer a { text-decoration: none; } .guideText { font-size: 17px; font-family: sans-serif; padding-bottom: 15px; line-height: 1.6; /* border: 2px solid aliceblue; border-radius: 13px; */ padding: 10px; margin-bottom: 25px; } .guideTitle { font-size: 20px; color: #2c2e30; font-family: 'Asap', sans-serif; } .guideContainer { margin-bottom: 80px; } .guideNum { font-size: 26px; background: aliceblue; padding: 6px 6px 6px 6px; } .guideIcon { width: 60px; } .guideNumContainer { /* background: aliceblue; */ display: flex; justify-content: center; align-items: center; } .guideNum-l { background: black; display: flex; justify-content: center; align-items: center; color: white; width: 100px; height: 100px; text-align: center; border-radius: 50%; font-size: 80px; font-size: 200px; font-family: 'Asap', sans-serif; min-width: 1vw; width: 300px; min-height: 1vh; height: auto; } .slider-container { padding: 0; position: relative; width: 100vw; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); } .slider-image { height: 350px; object-fit: cover; cursor: pointer; transition: transform 0.3s ease, box-shadow 0.3s ease; border-radius: 10px; border: 2px solid #fff; box-shadow: 0 4px 8px rgba(255, 255, 255, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.5); filter: drop-shadow(0 4px 8px rgba(255, 255, 255, 0.5)); } .slider-image:hover { transform: scale(1.05); } @media (min-width: 992px) { .slider-image { margin: 0 20px; } } @media (max-width: 768px) { .slider-image { height: 200px; margin: 0 10px; } .carousel-control-prev, .carousel-control-next { width: 40px; height: 40px; } } .carousel-control-prev, .carousel-control-next { top: 50%; transform: translateY(-50%); width: 50px; height: 50px; background-color: rgba(0, 0, 0, 0.3); border-radius: 50%; } .carousel-control-prev { left: 0; } .carousel-control-next { right: 0; } .modal-image { max-width: 100%; max-height: 80vh; margin: 0 auto; display: block; } .carousel-item { transition: transform 3.0s ease-in-out; } /* Styling for the appointment container */ .appointment-section { position: relative; padding: 4rem 0; background-color: #1a1814; color: #fff; } .appointment-container { display: flex; flex-wrap: wrap; margin: 0 auto; max-width: 1200px; } .photo-grid-container { flex: 1; min-width: 300px; position: relative; height: 600px; padding: 20px; } .photo-grid { position: relative; width: 100%; height: 100%; } .photo-grid img { position: absolute; max-width: 60%; border: 5px solid white; box-shadow: 0 0 15px rgba(0,0,0,0.2); transition: all 0.3s ease, transform 0.3s ease; } .photo-grid img:hover { transform: scale(1.08); z-index: 10; box-shadow: 0 8px 20px rgba(0,0,0,0.3); } .photo-1 { top: 0; left: 0; z-index: 1; } .photo-2 { top: 50px; right: 0; z-index: 2; } .photo-3 { bottom: 86px; left: 50px; z-index: 3; } .photo-4 { bottom: 0; right: 50px; z-index: 4; } .iframe-container { flex: 1; min-width: 300px; padding: 20px; display: flex; flex-direction: column; } .section-heading { text-align: center; margin-bottom: 1.5rem; color: #cda45e; } .iframe-wrapper { position: relative; height: 850px; overflow: hidden; border-radius: 8px; box-shadow: 0 4px 12px rgba(0,0,0,0.1); } .calendar-iframe { position: absolute; top: 0; left: 0; width: 100%; height: 1550px; border: none; } @media (max-width: 768px) { .photo-grid-container { height: 400px; } .photo-grid img { position: relative; max-width: 80%; display: block; margin: 10px auto; } .photo-1, .photo-2, .photo-3, .photo-4 { position: static; margin: 10px auto; } .iframe-wrapper { height: 800px; } }