html { line-height: 1.15; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; } html { scroll-behavior: smooth; } body { margin: 0; font-family: "Montserrat", sans-serif; } @font-face { font-family: "allison_script"; src: url("../webfonts/fontsfree-net-allison-scriptregular_1.woff2") format("woff2"), url("../webfonts/fontsfree-net-allison-scriptregular_1.woff") format("woff"); font-weight: normal; font-style: normal; } @import url('https://fonts.googleapis.com/css2?family=Lora:ital,wght@0,400..700;1,400..700&family=Playwrite+IE:wght@100..400&display=swap'); article, aside, footer, header, nav, section { display: block; } h1 { font-size: 2em; margin: 0.67em 0; } figcaption, figure, main { display: block; } figure { margin: 1em 40px; } hr { -webkit-box-sizing: content-box; box-sizing: content-box; height: 0; overflow: visible; } pre { font-family: monospace, monospace; font-size: 1em; } a { background-color: transparent; -webkit-text-decoration-skip: objects; color: inherit; text-decoration: none; } abbr[title] { border-bottom: none; text-decoration: underline; -webkit-text-decoration: underline dotted; text-decoration: underline dotted; } b, strong { font-weight: inherit; } b, strong { font-weight: bolder; } code, kbd, samp { font-family: monospace, monospace; font-size: 1em; } dfn { font-style: italic; } mark { background-color: #ff0; color: #000; } small { font-size: 80%; } sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; } sub { bottom: -0.25em; } sup { top: -0.5em; } audio, video { display: inline-block; } audio:not([controls]) { display: none; height: 0; } img { border-style: none; } svg:not(:root) { overflow: hidden; } button, input, optgroup, select, textarea { font-family: sans-serif; font-size: 100%; line-height: 1.15; margin: 0; } button, input { overflow: visible; } button, select { text-transform: none; } button, html [type="button"], [type="reset"], [type="submit"] { -webkit-appearance: button; } button::-moz-focus-inner, [type="button"]::-moz-focus-inner, [type="reset"]::-moz-focus-inner, [type="submit"]::-moz-focus-inner { border-style: none; padding: 0; } button:-moz-focusring, [type="button"]:-moz-focusring, [type="reset"]:-moz-focusring, [type="submit"]:-moz-focusring { outline: 1px dotted ButtonText; } fieldset { padding: 0.35em 0.75em 0.625em; } legend { -webkit-box-sizing: border-box; box-sizing: border-box; color: inherit; display: table; max-width: 100%; padding: 0; white-space: normal; } progress { display: inline-block; vertical-align: baseline; } textarea { overflow: auto; } [type="checkbox"], [type="radio"] { -webkit-box-sizing: border-box; box-sizing: border-box; padding: 0; } [type="number"]::-webkit-inner-spin-button, [type="number"]::-webkit-outer-spin-button { height: auto; } [type="search"] { -webkit-appearance: textfield; outline-offset: -2px; } [type="search"]::-webkit-search-cancel-button, [type="search"]::-webkit-search-decoration { -webkit-appearance: none; } ::-webkit-file-upload-button { -webkit-appearance: button; font: inherit; } details, menu { display: block; } summary { display: list-item; } canvas { display: inline-block; } template { display: none; } [hidden] { display: none; } *, *:before, *:after { -webkit-box-sizing: inherit; box-sizing: inherit; } a{ transition: all .3s ease; } .swiper-container{ overflow: hidden; } .desktop-none{ display: none; } @media(max-width:992px){ .mobile-none{ display: none; } .desktop-none{ display: block; } .product-box .read-btn { font-size: 15px; } } header { padding: 15px; } header .row{ align-items: center; } ul.header-menu { justify-content: center; padding: 0; list-style-type: none; display: flex; align-items: center; font-size: 15px; gap: 15px; font-weight:600; text-align: center; } img{ max-width: 100%; } .popular-products { padding: 100px 0; } .popular-products .top-title { font-size: 32px; margin-bottom: 40px; font-weight: 600; color: #0d7aa2; font-family: 'Poppins'; } .product-box { display: block; padding: 20px; border: solid 1px #d4d4d4; border-radius: 13px; text-align: center; height: 100%; } .product-box img { height: 400px; width: 100%; object-fit: cover; border-radius: 10px; margin-bottom: 24px; } .product-box .title { font-size: 18px; font-weight: 600; margin-bottom: 24px; } .product-box .read-btn { display: inline-block; padding: 8px 20px; background: #f48574; border-radius: 29px; font-size: 20px; color: white; font-weight: 500; font-family: 'Poppins'; } .slogan-home { text-align: center; margin-top: 25px; margin-bottom: 100px; font-size: 75px; font-weight: 600; } .slogan-home span:nth-child(2) { color: #F48574; font-weight: bold; } .slogan-home span:nth-child(3) { color: #FFC965; font-weight: bold; } .slogan-home span:nth-child(4) { color: #8DCEB6; font-weight: bold; } .slogan-home span:nth-child(5) { color: #65BBD8; font-weight: bold; } .slogan-home span:nth-child(6) {color: #E06A8B;font-weight: bold;} .slogan-home span:nth-child(7) {color: #E06A8B;font-weight: bold;} .slogan-home .kesfet-btn { margin-bottom: 80px; } .slogan-home .kesfet-btn img { width: 140px; } .slogan-home .bg { position: absolute; left: 50%; transform: translateX(-50%); z-index: -1; top: 90px; } .slogan-home { position: relative; } .seo-component { padding: 50px 0 100px 0; } .seo-wrapper { max-height: 500px; overflow-y: auto; } .popular-products .col-md-4 { margin-bottom: 30px; } /**/ .menu-btn{ width:45px; height:45px; border:none; background: #0d7aa2; border-radius:12px; cursor:pointer; display:none; align-items:center; justify-content:center; flex-direction:column; gap:5px; } .menu-btn span{ width:20px; height:2px; background:white; border-radius:10px; transition:.3s; } .mobile-menu{ position:fixed; top:0; right:-100%; width:280px; height:100vh; background:#1f2937; padding:90px 25px 25px; transition:.4s ease; box-shadow:-10px 0 30px rgba(0,0,0,.3); z-index: 999; } .mobile-menu.active{ right:0; } .mobile-menu a{ display:block; color:white; text-decoration:none; padding:16px 0; border-bottom:1px solid rgba(255,255,255,.08); font-size:18px; transform:translateX(30px); opacity:0; transition:.4s; } .mobile-menu.active a{ transform:translateX(0); opacity:1; } .mobile-menu.active a:nth-child(1){ transition-delay:.1s; } .mobile-menu.active a:nth-child(2){ transition-delay:.15s; } .mobile-menu.active a:nth-child(3){ transition-delay:.2s; } .mobile-menu.active a:nth-child(4){ transition-delay:.25s; } .overlay{ position:fixed; inset:0; background:rgba(0,0,0,.4); opacity:0; visibility:hidden; transition:.3s; } .overlay.active{ opacity:1; visibility:visible; z-index: 999; } .menu-btn.active span:nth-child(1){ transform:rotate(45deg) translateY(10px); } .menu-btn.active span:nth-child(2){ opacity:0; } .menu-btn.active span:nth-child(3){ transform:rotate(-45deg) translateY(-10px); } @media(max-width:992px){ ul.header-menu { display: none; } .menu-btn{ display: flex; } header .container { display: flex; align-items: center; justify-content: space-between; } .slogan-home { font-size: 58px; margin-bottom: 50px; } .product-box { padding: 10px; } .product-box img { height: 220px; } .product-box .title { font-size: 16px; } } footer .footer-bottom-wrapper { padding: 30px; text-align: center; background: #65BBD8; color: white; font-size: 18px; } footer .footer-bottom-wrapper .copyright { margin-bottom: 10px; } .bottom-desc a { color: #E06A8B; font-weight: bold; } /* whatsapp animation */ .animated.infinite { -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; } .mypage-alo-ph-circle { width: 90px; height: 90px; top: 12px; left: 12px; position: absolute; background-color: transparent; -webkit-border-radius: 100%; -moz-border-radius: 100%; border-radius: 100%; border: 2px solid rgba(30, 30, 30, 0.4); opacity: .1; opacity: .5; } .zoomIn { -webkit-animation-name: zoomIn; animation-name: zoomIn; } .animated { -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-fill-mode: both; animation-fill-mode: both; } .mypage-alo-ph-circle-fill { width: 60px; height: 60px; top: 28px; left: 28px; position: absolute; -webkit-transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; -ms-transition: all 0.2s ease-in-out; -o-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out; -webkit-border-radius: 100%; -moz-border-radius: 100%; border-radius: 100%; border: 2px solid transparent; -webkit-transition: all .5s; -moz-transition: all .5s; -o-transition: all .5s; transition: all .5s; opacity: .4 !important; } .mypage-alo-ph-img-circle { width: 30px; height: 30px; top: 43px; left: 43px; position: absolute; background: rgba(30, 30, 30, 0.1) url(../front/assets/images/whatsap-1.png) no-repeat center center; -webkit-border-radius: 100%; -moz-border-radius: 100%; opacity: 1; -webkit-transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; -ms-transition: all 0.2s ease-in-out; -o-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out; -webkit-transform-origin: 50% 50%; -moz-transform-origin: 50% 50%; -ms-transform-origin: 50% 50%; -o-transform-origin: 50% 50%; transform-origin: 50% 50%; background-size: 100%; } .tada { -webkit-animation-name: tada; animation-name: tada; } @-webkit-keyframes tada { from { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } 10%, 20% { -webkit-transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg); transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg); } 30%, 50%, 70%, 90% { -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg); transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg); } 40%, 60%, 80% { -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg); transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg); } to { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } } @keyframes tada { from { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } 10%, 20% { -webkit-transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg); transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg); } 30%, 50%, 70%, 90% { -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg); transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg); } 40%, 60%, 80% { -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg); transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg); } to { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } } @keyframes pulse { from { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } 50% { -webkit-transform: scale3d(1.05, 1.05, 1.05); transform: scale3d(1.05, 1.05, 1.05); } to { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } } @-webkit-keyframes zoomIn { from { opacity: 0; -webkit-transform: scale3d(.3, .3, .3); transform: scale3d(.3, .3, .3); } 50% { opacity: 1; } } @keyframes zoomIn { from { opacity: 0; -webkit-transform: scale3d(.3, .3, .3); transform: scale3d(.3, .3, .3); } 50% { opacity: 1; } } .header .container { position: relative; } .mypage-alo-phone { position: absolute; top: -10px; right: 0px; z-index: 9999999; } .mypage-alo-ph-circle { border-color: #43b91e; } .mypage-alo-ph-circle-fill { background-color: #43b91e; } .mypage-alo-ph-img-circle { background-color: #43b91e; } .mypage-alo-phone:hover .mypage-alo-ph-circle { border-color: #43b91e; } .mypage-alo-phone:hover .mypage-alo-ph-circle-fill { background-color: #43b91e; } .mypage-alo-phone:hover .mypage-alo-ph-img-circle { background-color: #43b91e; } .hotlinemp { position: fixed; bottom: 80px; right: 40px; width: 77px; height: 73px; z-index: 999; } *, *::before, *::after { box-sizing: border-box; }