@import url('https://fonts.googleapis.com/css2?family=Dancing+Script:wght@400;500;600&family=Josefin+Sans:wght@100;200;300;400;500;600;700&family=WindSong:wght@400;500&display=swap'); *{ margin: 0; padding: 0; box-sizing: border-box; font-family: 'Josefin Sans', sans-serif; } *,::before,::after{ box-sizing: border-box; } :root{ --main-color: #8D7B68; --based-color:#c4b7a6; --light-color:#bab7ac; --white-color:white; --dark-color:black; --transition-color: color 0.3s; --transition-background: background-color 0.3s; --trabsition-border: border 0.3s; --trabsition-transform: transform 0.3s; --shadow: 0px 10px 20px 0px rgb(0 0 0 /20%); --fade: fade-bottom 0.3s cubic-bezier(0.3, 0.5, 0.5, 1) both; } .grey-color{ color: grey; } html{ scroll-behavior: smooth; overflow-x: hidden; } body{ font-size: 18px; font-weight: 500; line-height: 1.8; color: var(--main-color); background-color: var(--white-color); overflow: hidden; } a{ text-decoration: none; color: inherit; -webkit-tap-highlight-color: transparent; } img{ max-width: 100%; vertical-align: middle; } ul{ list-style: none; } p{ margin: 0 0 15px; } input, textarea, select{ font: inherit; width: 100%; } input[type=checkbox], input[type=radio]{ width: auto; } input::placeholder, textarea::placeholder{ color: inherit; } button{ font: inherit; } strong{ font-weight: 500; } h1, h2, h3, h4{ font-weight: 400; line-height: normal; } h1{ font-size: 2.7rem; } h2{ font-size: 2.5rem; } h3{ font-size: 2rem; } h4{ font-size: 1rem; } .container{ max-width: var(--mx-width, 1200px); padding: 0 var(--gutter, 15px); margin: 0 auto; } .header-center .branding{ display: flex; align-items: center; justify-content: center; margin-top: 20px; } .list-block a{ position: relative; font-size: 16px; color: var(--dark-color); padding: 5px 0; display: inline-block; transition: var(--transition-color); } .list-block a:hover{ color: var(--based-color); } nav.menu{ padding: 5px 30px; } .inner-header{ line-height: 90px; } .inner-header :where(.wrap, .menu > ul), .list-inline > ul{ display: flex; align-items: center; } .header-left, .header-right{ flex-grow: 1; } .header-left .menu-bar{ font-size: 24px; } .header-left .list-inline .bx-user, .header-right .list-inline .bx-user{ display: none; } .header-center nav{ display: none; grid-template-columns: 1fr 1fr; gap: 180px; max-width: 1020px; margin-top: 20px; } .header-center .branding{ position: absolute; left: 0; right: 0; top: 0; pointer-events: none; } .header-center .branding a{ font-size: 30px; line-height: inherit; pointer-events: auto; } .header-center .menu > ul > li > a{ font-size: 12px; text-transform: uppercase; letter-spacing: 2px; font-weight: 700; padding: 0 15px; } .header-right ul{ justify-content: flex-end; } .overlay, .mobile-menu, .cart-menu, .sidebar{ position: fixed; top: 0; left: 0; right: 0; bottom: 0; } .overlay{ background-color: var(--dark-color); opacity: 0; visibility: hidden; pointer-events: none; z-index: 999; transition: opacity 0.3s, visibility 0.3s; } .overlay.active{ opacity: 0.5; visibility: visible; pointer-events: all; } /*---------- mobile navbar ----------*/ .mobile-menu, .cart-menu, .sidebar{ pointer-events: none; z-index: 1001; visibility: hidden; opacity: 0; } .mobile-menu.active{ visibility: visible; opacity: 1; } .mobile-menu .wrap{ position: relative; max-width: calc(100% - 40px); width: 300px; height: 100%; background-color: var(--white-color); pointer-events: auto; transition: var(--trabsition-transform); transform: translateX(var(--transX, -100%)); } .mobile-menu.active .wrap{ transform: translateX(0); } .mobile-menu .close-trigger{ display: flex; position: absolute; top: 0; right: -40px; width: 40px; height: 40px; color: var(--dark-color); align-items: center; justify-content: center; font-size: 30px; } .mobile-menu .main-menu{ display: flex; height: 100%; padding: 0 20px; flex-direction: column; text-align: center; justify-content: center; } .mobile-menu nav>ul{ text-align: center; } .mobile-menu nav>ul>li>a{ position: relative; padding: 12px 0; font-weight: 600; font-size: 18px; line-height: 2.5rem; } .mobile-menu nav li :where(li, a){ display: block; } .mobile-menu nav>ul>li>a:hover{ color: var(--dark-color); } /*---------------------------------- main ----------------------------------*/ /*----- home-slide -----*/ .load{ animation: slide 0.2s; } .home-slider{ background-repeat: no-repeat; background-size: cover; background-position: center; width: 100%; height: 70vh; animation: slide 15s infinite; margin-top: 10px; } @keyframes slide{ 0%{ background-image: url(images/home-1.jpg); } 20%{ background-image: url(images/home-1.jpg); } 20.01%{ background-image: url(images/home-2.jpg); } 40%{ background-image: url(images/home-2.jpg); } 40.01%{ background-image: url(images/home-3.jpg); } 60%{ background-image: url(images/home-3.jpg); } 60.01%{ background-image: url(images/home-4.jpg); } 80%{ background-image: url(images/home-4.jpg); } 80.01%{ background-image: url(images/home-5.jpg); } 100%{ background-image: url(images/home-5.jpg); } } /*----- home-content -----*/ .home-content .container{ max-width: 60%; display: flex; flex-wrap: wrap; margin-top: 50px; margin-bottom: 50px; } .content p { letter-spacing: 1px; color: #8D7B68; text-align: center; word-spacing: 1px; } .content span{ font-family: 'WindSong'; font-size: 22px; color: #3F4E4F; } /*----- line -----*/ .line .container{ max-width: 40%; margin-top: -30px; } .line .content-line{ width: 100%; height: 0; border: 1px solid #3F4E4F; opacity: 0.3; display:inline-block; } /*----- contenr-2 -----*/ .home-content-2 .container{ display: flex; max-width: 80%; margin-top: 20px; margin-bottom: 20px; justify-content: center; align-items: center; } .content-detail{ display: inline-block; padding: 0 50px; } .content-detail p{ font-size: 12px; text-transform: uppercase; font-weight: 600; color: #8D7B68; letter-spacing: 1px; } .content-detail span{ margin-left: 30px; font-family: 'WindSong'; font-size: 24px; font-style: italic; font-weight: 500; color: #3F4E4F; } /*----- content-3 -----*/ .home-content-3 .container{ max-width: 100%; height: 85vh; width: 100%; display: flex; align-items: center; justify-content: center; background: #DCD7C9; } .content-3-detail{ max-width: 800px; padding: 50px 0; position: relative; width: 100%; overflow: hidden; } .content-note-title h3{ margin-top: 50px; display: flex; justify-content: center; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 2px; color: #3F4E4F; } .content-note-title h4{ display: flex; justify-content: center; margin-top: 20px; font-family: 'WindSong'; font-size: 24px; font-style: italic; font-weight: 500; color: #3F4E4F; } .content-3-detail .image{ height: auto; width: 500px; } .content-3-detail .slide{ display: flex; align-items: center; justify-content: center; flex-direction: column; row-gap: 30px; } .slide p{ padding: 0 160px; text-align: center; font-size: 14px; color: #3F4E4F; } .slide .note-name{ font-size: 12px; text-transform: uppercase; letter-spacing: 2px; } .swiper-btn{ transform: translateY(10px); } .swiper-btn::after, .swiper-btn::before{ color: #3F4E4F; } .swiper-pagination{ display: none; } /*----- footer -----*/ footer .container{ padding-top: 100px; width: 100vw; color: #3F4E4F; max-width: 60%; } .footer-content{ display: flex; align-items: center; justify-content: center; text-align: center; flex-direction: column; } .footer-content p{ font-size: 12px; } .social{ display: flex; align-items: center; justify-content: center; margin: 10px 0 20px 0; } .social li{ margin: 0 10px; font-size: 20px; } .footer-content .copyright p{ margin-top: 10px; font-size: 10px; text-transform: capitalize; } @media screen and (max-width:1200px){ .swiper-btn::after, .swiper-btn::before{ display: none; } } @media (width < 990px) { .home-slider{ margin-top: 45px; height: 50vh; } .home-content .container{ max-width: 70%; } } @media screen and (max-width:695px){ .home-content-2 .container{ display: flex; flex-direction: column; } .line .container{ max-width: 60%; } .content-detail{ margin-top: 20px; } .content-3-detail .image{ width: 350px; } .slide p{ padding: 0 200px; font-size: 14px; } .home-content-3 .container{ height: -60vh; } footer .container{ max-width: 80%; } } @media (width < 420px){ .content-3-detail .image{ width: 300px; } .slide p{ padding: 0 250px; font-size: 14px; } } @media (width < 390px){ .home-content-3 .container{ height: 100vh; } .footer-content p{ font-size: 8px; } } @media(min-width: 992px){ .menu-trigger{ display: none; } .header-center nav{ display: grid; } }