/* Document ========================================================================== */ /** * 1. Correct the line height in all browsers. * 2. Prevent adjustments of font size after orientation changes in iOS. */ html { line-height: 1.15; /* 1 */ -webkit-text-size-adjust: 100%; /* 2 */ } /* Sections ========================================================================== */ /** * Remove the margin in all browsers. */ body { margin: 0; } /** * Render the `main` element consistently in IE. */ main { display: block; } /** * Correct the font size and margin on `h1` elements within `section` and * `article` contexts in Chrome, Firefox, and Safari. */ h1 { font-size: 2em; margin: 0.67em 0; } /* Grouping content ========================================================================== */ /** * 1. Add the correct box sizing in Firefox. * 2. Show the overflow in Edge and IE. */ hr { box-sizing: content-box; /* 1 */ height: 0; /* 1 */ overflow: visible; /* 2 */ } /** * 1. Correct the inheritance and scaling of font size in all browsers. * 2. Correct the odd `em` font sizing in all browsers. */ pre { font-family: monospace, monospace; /* 1 */ font-size: 1em; /* 2 */ } /* Text-level semantics ========================================================================== */ /** * Remove the gray background on active links in IE 10. */ a { background-color: transparent; } /** * 1. Remove the bottom border in Chrome 57- * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari. */ abbr[title] { border-bottom: none; /* 1 */ text-decoration: underline; /* 2 */ text-decoration: underline dotted; /* 2 */ } /** * Add the correct font weight in Chrome, Edge, and Safari. */ b, strong { font-weight: bolder; } /** * 1. Correct the inheritance and scaling of font size in all browsers. * 2. Correct the odd `em` font sizing in all browsers. */ code, kbd, samp { font-family: monospace, monospace; /* 1 */ font-size: 1em; /* 2 */ } /** * Add the correct font size in all browsers. */ small { font-size: 80%; } /** * Prevent `sub` and `sup` elements from affecting the line height in * all browsers. */ sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; } sub { bottom: -0.25em; } sup { top: -0.5em; } /* Embedded content ========================================================================== */ /** * Remove the border on images inside links in IE 10. */ img { border-style: none; } /* Forms ========================================================================== */ /** * 1. Change the font styles in all browsers. * 2. Remove the margin in Firefox and Safari. */ button, input, optgroup, select, textarea { font-family: inherit; /* 1 */ font-size: 100%; /* 1 */ line-height: 1.15; /* 1 */ margin: 0; /* 2 */ } /** * Show the overflow in IE. * 1. Show the overflow in Edge. */ button, input { /* 1 */ overflow: visible; } /** * Remove the inheritance of text transform in Edge, Firefox, and IE. * 1. Remove the inheritance of text transform in Firefox. */ button, select { /* 1 */ text-transform: none; } /** * Correct the inability to style clickable types in iOS and Safari. */ button, [type="button"], [type="reset"], [type="submit"] { -webkit-appearance: button; } /** * Remove the inner border and padding in Firefox. */ button::-moz-focus-inner, [type="button"]::-moz-focus-inner, [type="reset"]::-moz-focus-inner, [type="submit"]::-moz-focus-inner { border-style: none; padding: 0; } /** * Restore the focus styles unset by the previous rule. */ button:-moz-focusring, [type="button"]:-moz-focusring, [type="reset"]:-moz-focusring, [type="submit"]:-moz-focusring { outline: 1px dotted ButtonText; } /** * Correct the padding in Firefox. */ fieldset { padding: 0.35em 0.75em 0.625em; } /** * 1. Correct the text wrapping in Edge and IE. * 2. Correct the color inheritance from `fieldset` elements in IE. * 3. Remove the padding so developers are not caught out when they zero out * `fieldset` elements in all browsers. */ legend { box-sizing: border-box; /* 1 */ color: inherit; /* 2 */ display: table; /* 1 */ max-width: 100%; /* 1 */ padding: 0; /* 3 */ white-space: normal; /* 1 */ } /** * Add the correct vertical alignment in Chrome, Firefox, and Opera. */ progress { vertical-align: baseline; } /** * Remove the default vertical scrollbar in IE 10+. */ textarea { overflow: auto; } /** * 1. Add the correct box sizing in IE 10. * 2. Remove the padding in IE 10. */ [type="checkbox"], [type="radio"] { box-sizing: border-box; /* 1 */ padding: 0; /* 2 */ } /** * Correct the cursor style of increment and decrement buttons in Chrome. */ [type="number"]::-webkit-inner-spin-button, [type="number"]::-webkit-outer-spin-button { height: auto; } /** * 1. Correct the odd appearance in Chrome and Safari. * 2. Correct the outline style in Safari. */ [type="search"] { -webkit-appearance: textfield; /* 1 */ outline-offset: -2px; /* 2 */ } /** * Remove the inner padding in Chrome and Safari on macOS. */ [type="search"]::-webkit-search-decoration { -webkit-appearance: none; } /** * 1. Correct the inability to style clickable types in iOS and Safari. * 2. Change font properties to `inherit` in Safari. */ ::-webkit-file-upload-button { -webkit-appearance: button; /* 1 */ font: inherit; /* 2 */ } /* Interactive =========================================== =============================== */ /* * Add the correct display in Edge, IE 10+, and Firefox. */ details { display: block; } /* * Add the correct display in all browsers. */ summary { display: list-item; } /* Misc ========================================================================== */ /** * Add the correct display in IE 10+. */ template { display: none; } /** * Add the correct display in IE 10. */ [hidden] { display: none; } *:focus { outline: 0 !important; } *button:focus { border: none; outline: none; box-shadow: none; } * { list-style-type: none; font-family: "Work Sans", sans-serif !important; font-size: 14px; } *:focus, *:active { outline: none !important; } *:hover { transition: 0.5s; } *::selection { color: #c7505f; background-color: #191919; } *a, a:visited { color: #990000; text-decoration: none; } body { color: #535353; /* dark gray */ } .affix { top: 0; width: 100%; z-index: 9999 !important; } .heading h3 { color: #191919; font-size: 25px; text-align: center; text-transform: uppercase; letter-spacing: 1px; line-height: 2.8rem; } .heading p { text-align: center; padding: 15px 110px; font-size: 16px; line-height: 2rem; } @media screen and (max-width: 992px) { .heading p { padding: 15px 0px; } } .sub_heading h3 { color: #191919; font-family: myFirstFont; text-align: center; font-size: 70px; padding-top: 100px; letter-spacing: 2px; } @media screen and (max-width: 768px) { .sub_heading h3 { font-size: 50px; padding-top: 60px; } } .sub_heading p { text-align: center; color: #d16b6d; font-size: 16px; line-height: 2rem; } html { scroll-behavior: smooth; } .back-to-top { position: fixed; bottom: 25px; right: 25px; display: none; background-color: #f5f5f5 !important; } @font-face { font-family: myFirstFont; src: url(./../fonts/OstrichSans-Medium.otf); } .btn { outline: none !important; box-shadow: none !important; background: #191919; border: none; border-radius:0 !important; z-index: 3; padding: 10px 15px; } .btn-primary { background-color: #000 !important; border-color: #fff; color: #fff !important; font-size: 14px; font-weight: 600; border-radius: 0; border: 3px solid !important; animation: mainFadeIn 2s forwards; animation-delay: 1.6s; opacity: 0; } @media screen and (max-width: 576px) { .btn-primary { padding: 10px 19px; color: #fff !important; font-size: 13px; font-weight: 500; } } .btn-primary:hover { background-color: black !important; border: 1px solid !important; border-color: #191919 !important; color: #fff; } .btn-primaryt { background: #191919; padding: 10px 20px; border-radius: 3px; font-size: 20px; font-size: 16px; color: #fff; border: 1px solid !important; border-color: transparent !important; } @media screen and (max-width: 768px) { .btn-primaryt { padding: 8px 8px !important; font-size: 14px; } } .btn-primaryt:hover { background-color: black !important; border: 1px solid !important; border-color: #191919 !important; color: #fff; } .btn-black { background: #191919; padding: 10px 20px; border-radius: 0px; font-size: 20px; font-size: 16px; color: #fff; border: 1px solid !important; border-color: transparent !important; letter-spacing: 2px; transition: all 0.3s ease-in; } .btn-black:hover { background-color: black !important; border: 1px solid !important; border-color: #191919 !important; transition: all 0.3s ease-in; color: #fff; } .btn-error { background-color: #191919 !important; padding: 12px 36px; color: #fff !important; font-size: 16px; font-weight: 600; border-radius: 0; border: 3px solid !important; border-color: #191919 !important; } .btn-error:hover { background-color: black !important; border: 3px solid !important; border-color: #191919 !important; color: #fff; } .btn-light { color: #fff; background-color: #191919 !important; } .btn-light:hover { color: #252525; background-color: #9c9c9c !important; } .fixed-top { position: fixed !important; top: 30px; right: 0; left: 0; z-index: 1030; } .navbar { box-shadow: 0px 10px 8px 0px rgba(49, 49, 50, 0.15); padding: 8px 42px; border-radius: 24px; } .navbar .navbar-collapse { transition: all 0.35s ease-out; transform-origin: center left; } .navbar .navbar-nav { width: 100%; background: #fff; display: flex; } .navbar .navbar-nav .nav-item { padding: 0 15px; text-align: center; } .navbar .navbar-nav .nav-item .active { color: #000000 !important; } .navbar .navbar-nav .nav-link { color: #191919 !important; padding-left: 15px; font-weight: 700; transition: all 0.35s ease-out; transform-origin: center left; } .navbar .navbar-nav .nav-link:hover { color: #6c6a74; } .navbar .navbar-nav .nav-link img { width: 100%; max-width: 25px; } .navbar .nav-shop { margin-left: auto; } .navbar .nav-shop .nav-link { color: #000000; padding-left: 15px; } .navbar .nav-shop .nav-link:hover { color: rgba(0, 0, 0, 0.747); } .bg-light { background-color: white !important; } .navbar-light .navbar-brand { margin: auto; max-width: 45px; } .navbar-light .navbar-brand img { width: 100%; } @media screen and (max-width: 992px) { .navbar-light .navbar-brand { margin: 0 !important; } } @media screen and (max-width: 768px) { .navbar-light .navbar-brand { font-size: 25px; } } .navbar-light .brand-shop { color: #000000 !important; } .navbar-light .footer_icon { margin-left: auto; } @media screen and (max-width: 992px) { .navbar-light .footer_icon { text-align: center; margin-top: 30px; } } .navbar-light .footer_icon a { color: #000000; margin-right: 15px; } .navbar-light .footer_icon a:hover { color: #d4434c; } .navbar-light .navbar-nav .active > .nav-link, .navbar-light .navbar-nav .nav-link.active, .navbar-light .navbar-nav .nav-link.show, .navbar-light .navbar-nav .show > .nav-link { color: #191919; border: 1px solid; border-color: transparent; padding-bottom: 10px; } .new { fill: black; } .new:hover { fill: rgba(75, 75, 75, 0.747) !important; } .navbar-toggler span { display: block; background-color: #4f4f4f; height: 3px; width: 25px; margin-top: 5px; margin-bottom: 5px; position: relative; left: 0; opacity: 1; transition: all 0.35s ease-out; transform-origin: center left; } .dropdown-menu.show { display: none; } .dropdown .dropdown-menu { position: static; top: 90%; left: 0%; z-index: 1000; display: none !important; float: none; min-width: 10rem; padding: 0.5rem 0; margin: 0.125rem 0 0; font-size: 1rem; color: #212529; text-align: left; list-style: none; background-color: #ffffff; background-clip: padding-box; border: 1px solid rgba(0, 0, 0, 0.15); border-radius: 0.25rem; transition: all 0.5s; } .dropdown:hover .dropdown-menu { display: block !important; text-align: center; box-shadow: 0px 10px 18px 2px rgba(0, 0, 0, 0.35); border-color: transparent !important; border-bottom-color: #191919 !important; border: 2px solid; } .nav-item:hover .dropdown-menu .dropdown-item { padding-top: 10px; padding-bottom: 10px; font-weight: 400; } .nav-item:hover .dropdown-menu .dropdown-item:hover { background: #00000036; border: none; border-left: 1.5px solid #fff !important; border-radius: 0px 50px 50px 0px; padding-left: 30px; } /* top line needs a little padding */ .navbar-toggler span:nth-child(1) { margin-top: 0.3em; } /** * Animate collapse into X. */ /* top line rotates 45 degrees clockwise and moves up and in a bit to close the center of the X in the center of the button */ .navbar-toggler:not(.collapsed) span:nth-child(1) { transform: translate(15%, -33%) rotate(45deg); } /* center line goes transparent */ .navbar-toggler:not(.collapsed) span:nth-child(2) { opacity: 0; } /* bottom line rotates 45 degrees counter clockwise, in, and down a bit to close the center of the X in the center of the button */ .navbar-toggler:not(.collapsed) span:nth-child(3) { transform: translate(15%, 33%) rotate(-45deg); } /** * Animate collapse open into hamburger menu */ /* top line moves back to initial position and rotates back to 0 degrees */ .navbar-toggler span:nth-child(1) { transform: translate(0%, 0%) rotate(0deg); } /* middle line goes back to regular color and opacity */ .navbar-toggler span:nth-child(2) { opacity: 1; } /* bottom line goes back to initial position and rotates back to 0 degrees */ .navbar-toggler span:nth-child(3) { transform: translate(0%, 0%) rotate(0deg); } .banner { margin-bottom: 100px; } @media screen and (max-width: 768px) { .banner { margin-bottom: 50px; } } .banner .banner_bg { background-image: linear-gradient(#0003, #000000bf), url(./../img/banner/2.jpg); justify-content: center; height: 100vh; background-size: cover; width: 100%; background-repeat: no-repeat; background-position: center; position: relative; } .banner .banner_bg2 { background-image: linear-gradient(#0003, #000000bf), url(./../img/banner/1.jpg); justify-content: center; height: 100vh; background-size: cover; width: 100%; background-repeat: no-repeat; background-position: center; position: relative; } .banner .banner_bg3 { background-image: linear-gradient(#0003, #000000b5), url(./../img/banner/3.jpg); justify-content: center; height: 100vh; background-size: cover; width: 100%; background-repeat: no-repeat; position: relative; background-position: center; } .banner .banner_content { top: 70%; position: absolute; width: 100%; } @media screen and (max-width: 576px) { .banner .banner_content { top: 65%; } } .banner .owl-carousel { position: relative; } .banner .owl-carousel .owl-nav { position: absolute; display: none; right: 0%; bottom: 50%; width: 100%; text-align: center; padding-top: 23px; } @media screen and (max-width: 996px) { .banner .owl-carousel .owl-nav { right: 0%; bottom: 20%; } } @media screen and (max-width: 576px) { .banner .owl-carousel .owl-nav { right: 0%; bottom: 20%; } } .banner .owl-carousel .owl-prev { color: #fff; margin-right: 15px; position: absolute; left: 0; } .banner .owl-carousel .owl-prev:hover { color: #fff; transition: 0.5s; padding-right: 15px; } .banner .owl-carousel .owl-prev:hover i { font-size: 45px; transition: 0.5s; } .banner .owl-carousel .owl-prev i { font-size: 45px; padding: 15px; margin-left: -50px; } @media screen and (max-width: 576px) { .banner .owl-carousel .owl-prev i { font-size: 28px; } } .banner .owl-carousel .owl-next { color: #fff; position: absolute; right: 0; } .banner .owl-carousel .owl-next:hover { color: #fff; padding-left: 15px !important; transition: 0.5s; } .banner .owl-carousel .owl-next:hover i { font-size: 45px; padding: 15px; } .banner .owl-carousel .owl-next i { font-size: 45px; padding: 15px; } @media screen and (max-width: 576px) { .banner .owl-carousel .owl-next i { font-size: 28px; } } .banner .banner_lef .box { width: 500px; position: relative; display: flex; justify-content: center; flex-direction: column; } .banner .banner_lef .box .title { width: 100%; position: relative; display: flex; align-items: center; height: 50px; } .banner .banner_lef .box .title .block { width: 0%; height: inherit; background: #191919; position: absolute; animation: mainBlock 2s cubic-bezier(0.74, 0.06, 0.4, 0.92) forwards; animation-delay: 1s; display: flex; } .banner .banner_lef .box .title h1 { animation: mainFadeIn 2s forwards; animation-delay: 1.5s; opacity: 0; display: flex; align-items: baseline; position: relative; color: #fff; font-size: 35px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; font-family: "Julius Sans One", sans-serif !important; } @media screen and (max-width: 576px) { .banner .banner_lef .box .title h1 { font-size: 25px; } } .banner .banner_lef .box .title h1 span { width: 0px; height: 0px; border-radius: 50%; background: #ffb510; animation: popIn 0.8s cubic-bezier(0.74, 0.06, 0.4, 0.92) forwards; animation-delay: 2s; margin-left: 5px; margin-top: -50px; position: absolute; bottom: 13px; right: -12px; } .banner .banner_lef .box .role { width: 100%; position: relative; display: flex; align-items: center; height: 30px; margin-top: -10px; } @media screen and (max-width: 992px) { .banner .banner_lef .box .role { width: 100%; position: relative; display: flex; align-items: center; height: 30px; margin-top: -232px; } } @media screen and (max-width: 576px) { .banner .banner_lef .box .role { width: 100%; position: relative; display: flex; align-items: center; height: 30px; margin-top: -150px; } } .banner .banner_lef .box .role .block { width: 0%; height: inherit; background: #191919; position: absolute; animation: secBlock 2s cubic-bezier(0.74, 0.06, 0.4, 0.92) forwards; animation-delay: 2s; display: flex; } .banner .banner_lef .box .role p { animation: secFadeIn 2s forwards; animation-delay: 2.5s; opacity: 0; font-weight: 400; color: #fff; font-size: 18px !important; letter-spacing: 2px; text-transform: uppercase; } .banner:hover { transition: all 0.35s ease-out; transform-origin: center left; } .banner:hover .owl-nav { display: block !important; } .banner:hover .owl-prev i { margin-left: 0 !important; } /* Feel free to change duration */ .animated { animation-duration: 1000 ms; animation-fill-mode: both; } /* .owl-animated-out - only for current item */ /* This is very important class. Use z-index if you want move Out item above In item */ .owl-animated-out { z-index: 1; } /* .owl-animated-in - only for upcoming item /* This is very important class. Use z-index if you want move In item above Out item */ .owl-animated-in { z-index: 0; } /* .fadeOut is style taken from Animation.css and this is how it looks in owl.carousel.css: */ .fadeOut { animation-name: fadeOut; } @keyframes fadeOut { 0% { opacity: 1; } 100% { opacity: 0; } } @keyframes mainBlock { 0% { width: 0%; left: 0; } 50% { width: 100%; left: 0; } 100% { width: 0; left: 100%; } } @keyframes secBlock { 0% { width: 0%; left: 0; } 50% { width: 100%; left: 0; } 100% { width: 0; left: 100%; } } @keyframes mainFadeIn { 0% { opacity: 0; } 100% { opacity: 1; } } @keyframes popIn { 0% { width: 0px; height: 0px; background: #e9d856; border: 0px solid #ddd; opacity: 0; } 50% { width: 10px; height: 10px; background: #e9d856; opacity: 1; bottom: 45px; } 65% { width: 7px; height: 7px; bottom: 0px; width: 15px; } 80% { width: 10px; height: 10px; bottom: 20px; } 100% { width: 7px; height: 7px; background: #e9d856; border: 0px solid #222; bottom: 13px; } } @keyframes secFadeIn { 0% { opacity: 0; } 100% { opacity: 0.5; } } .footer .footer_top { padding: 40px 0; background: #f5f5f5; } .footer .footer_top .footer_icon { text-align: center; } .footer .footer_top a { color: #191919; margin-right: 15px; } .footer .footer_top a:hover { color: #d4434c; } .footer .footer_top a span { font-size: 25px; } .footer .footer_bottom { padding-top: 70px; padding-bottom: 50px; text-align: center; background: #e8e8e8; } .footer .footer_bottom span { text-transform: uppercase; color: #191919; font-weight: 700; font-size: 18px; } .footer .footer_bottom .bb { display: block ruby; } .footer .footer_bottom a { color: #191919; text-decoration: none; font-size: 16px; display: block; padding: 20px 0; } .footer .footer_bottom a:hover { color: #d16b6d; } .no-js #loader { display: none; } .js #loader { display: block; position: absolute; left: 100px; top: 0; } #i-w { z-index: 9999; visibility: visible; transform: translateY(0%); transition: transform 0.4s ease-in-out; will-change: transform; } #i-w.loaded { visibility: hidden; transform: translateY(-100%); transition: transform 1.3s cubic-bezier(0.96, 0, 0.07, 1), visibility 0s 1.9s; } #i-w .itr { z-index: 100000; position: fixed; width: 100%; height: 100%; top: 0; left: 0; background: #191919; display: flex; justify-content: center; align-items: center; text-align: center; } #i-w { position: fixed; width: 100%; height: 100%; top: 0; left: 0; } .main { background: transparent !important; transform: translateY(0); transition: transform 0.7s cubic-bezier(0.96, 0, 0.07, 1); will-change: transform; } .main.fd { transform: translateY(100%); transition: transform 0.1s cubic-bezier(0.96, 0, 0.07, 1); } .hdg { text-transform: uppercase; text-align: center; color: #000; font-size: 18vw; } .itr-hdg { font-family: myFirstFont !important; text-transform: uppercase; text-align: center; color: #d4434c; font-size: 5vw; opacity: 1; visibility: hidden; will-change: transform; transform: translate3d(0, 150%, 0) skewY(18deg) scale(1); animation: fd-i 1.3s 0.6s cubic-bezier(0.86, 0, 0.07, 1) forwards, trlt-i 1.5s 1s cubic-bezier(0.23, 1, 0.32, 1) forwards, trlt-o 0.5s 2.9s cubic-bezier(0.23, 1, 0.32, 1) forwards, fd-o 0.4s 3s ease forwards; } @keyframes trlt-i { to { transform: translateZ(0); } } @keyframes trlt-o { from { transform: translateZ(0); } to { transform: translate3d(0, -150%, 0) skewY(0deg) scale(1); } } @keyframes fd-i { 0% { opacity: 0; visibility: hidden; } to { opacity: 1; visibility: visible; } } @keyframes fd-o { 0% { opacity: 1; visibility: visible; } to { opacity: 0; visibility: hidden; } } .about_home .heading h3 { color: #191919; font-size: 25px; text-align: center; text-transform: uppercase; letter-spacing: 1px; line-height: 2.8rem; } .about_home .heading p { text-align: center; padding-top: 15px; font-size: 16px; } .about_home .wrapper { padding-top: 40px; } .about_home .wrapper .card { border: none; } .about_home .wrapper .card .card-img-top { border-radius: 0; } .about_home .wrapper .card .card-body { padding: 0; margin-top: 20px; } .about_home .wrapper .card .card-body .card-title { padding-top: 15px; text-align: center; color: #191919; font-size: 22px; letter-spacing: 1px; } .about_home .wrapper .card .card-body .card-text { font-size: 16px; font-variant: small-caps; color: #535353; padding-top: 10px; } .feature_bg1 { position: relative; margin-top: 100px; } .feature_bg1 .bg { background-image: linear-gradient(#0000005e, #0000005e), url(./../img/about/about-bg.jpg); height: 75vh; background-size: cover; width: 100%; background-repeat: no-repeat; background-position: center; background-repeat: no-repeat; background-attachment: fixed; background-position: center; } .feature_bg1 .abt_heading h3 { color: #fff; font-size: 65px; text-align: center; text-transform: uppercase; letter-spacing: 3px; line-height: 2.8rem; font-family: myFirstFont !important; letter-spacing: 8px !important; } .feature_bg1 .abt_heading h3::first-letter { font-size: 85px; } .feature_bg1 .abt_heading p { text-align: center; padding-top: 15px; font-size: 20px; letter-spacing: 3px; color: #fff; font-family: "Julius Sans One", sans-serif; padding-top: 25px; } @font-face { font-family: myFirstFont; src: url(./../fonts/OstrichSans-Medium.otf); } div { font-family: myFirstFont; } .part1 { margin-top: 100px; padding-top: 20px; padding-bottom: 50px; } .part1 .wrapper { margin-top: 70px; } .part1 .wrapper .img_warapper { max-width: 650px; } .part1 .wrapper .img_warapper img { width: 100%; } .part1 .wrapper .img_warapper2 { max-width: 1200px; margin-top: 30px; } .part1 .wrapper .img_warapper2 img { width: 100%; } .feature_bg2 { position: relative; margin-top: 100px; } .feature_bg2 .bg { background-image: linear-gradient(#0000005e, #0000005e), url(./../img/feature/7.jpg); height: 75vh; background-size: cover; width: 100%; background-repeat: no-repeat; background-position: center; background-repeat: no-repeat; background-attachment: fixed; background-position: center; } .feature_bg2 .abt_heading h3 { color: #fff; font-size: 65px; text-align: center; text-transform: uppercase; letter-spacing: 3px; line-height: 2.8rem; font-family: myFirstFont !important; letter-spacing: 8px !important; } .feature_bg2 .abt_heading h3::first-letter { font-size: 85px; } .feature_bg2 .abt_heading p { text-align: center; padding-top: 15px; font-size: 20px; letter-spacing: 3px; color: #fff; font-family: "Julius Sans One", sans-serif; padding-top: 25px; } @font-face { font-family: myFirstFont; src: url(./../fonts/OstrichSans-Medium.otf); } div { font-family: myFirstFont; } .part2 { margin-top: 100px; padding-top: 20px; padding-bottom: 50px; } .part2 .wrapper { margin-top: 70px; } .part2 .wrapper .img_warapper { max-width: 650px; } .part2 .wrapper .img_warapper img { width: 100%; } .part2 .wrapper .img_warapper2 { max-width: 1200px; margin-top: 30px; } .part2 .wrapper .img_warapper2 img { width: 100%; } .feature_bg3 { position: relative; margin-top: 100px; } .feature_bg3 .bg { background-image: linear-gradient(#0000005e, #0000005e), url(./../img/feature/pool.jpg); height: 75vh; background-size: cover; width: 100%; background-repeat: no-repeat; background-position: center; background-repeat: no-repeat; background-attachment: fixed; background-position: center; } .feature_bg3 .abt_heading h3 { color: #fff; font-size: 65px; text-align: center; text-transform: uppercase; letter-spacing: 3px; line-height: 2.8rem; font-family: myFirstFont !important; letter-spacing: 8px !important; } .feature_bg3 .abt_heading h3::first-letter { font-size: 85px; } .feature_bg3 .abt_heading p { text-align: center; padding-top: 15px; font-size: 20px; letter-spacing: 3px; color: #fff; font-family: "Julius Sans One", sans-serif; padding-top: 25px; } @font-face { font-family: myFirstFont; src: url(./../fonts/OstrichSans-Medium.otf); } div { font-family: myFirstFont; } .part3 { margin-top: 100px; padding-top: 20px; padding-bottom: 50px; } .part3 .wrapper { margin-top: 70px; } .part3 .wrapper .img_warapper { max-width: 650px; } .part3 .wrapper .img_warapper img { width: 100%; } .part3 .wrapper .img_warapper3 { max-width: 650px; margin-top: 30px; } .part3 .wrapper .img_warapper3 img { width: 100%; } .feature_bg4 { position: relative; margin-top: 100px; } .feature_bg4 .bg { background-image: linear-gradient(#0000005e, #0000005e), url(./../img/feature/light.jpg); height: 75vh; background-size: cover; width: 100%; background-repeat: no-repeat; background-position: center; background-repeat: no-repeat; background-attachment: fixed; background-position: center; } .feature_bg4 .abt_heading h3 { color: #fff; font-size: 65px; text-align: center; text-transform: uppercase; letter-spacing: 3px; line-height: 2.8rem; font-family: myFirstFont !important; letter-spacing: 8px !important; } .feature_bg4 .abt_heading h3::first-letter { font-size: 85px; } .feature_bg4 .abt_heading p { text-align: center; padding-top: 15px; font-size: 20px; letter-spacing: 3px; color: #fff; font-family: "Julius Sans One", sans-serif; padding-top: 25px; } @font-face { font-family: myFirstFont; src: url(./../fonts/OstrichSans-Medium.otf); } div { font-family: myFirstFont; } .part3 { margin-top: 100px; padding-top: 20px; padding-bottom: 50px; } .part3 .wrapper { margin-top: 70px; } .part3 .wrapper .img_warapper { max-width: 650px; } .part3 .wrapper .img_warapper img { width: 100%; } .part3 .wrapper .img_warapper4 { max-width: 1200px; margin-top: 30px; margin-bottom: 40px; } .part3 .wrapper .img_warapper4 img { width: 100%; } .h_full { display: flex; justify-content: center; height: 100%; align-items: center; } @media screen and (max-width: 576px) { .gap { padding-top: 30px !important; } } .flip-in-hor-bottom { animation: flip-in-hor-bottom 1s cubic-bezier(0.25, 0.46, 0.45, 0.94) 1s both; } @keyframes flip-in-hor-bottom { 0% { transform: rotateX(80deg); opacity: 0; } 100% { transform: rotateX(0); opacity: 1; } } .op_class { opacity: 1; } .about_main .banner { background-image: linear-gradient(#0000003d, #0000003d), url(./../img/banner/about/about_bg.jpg); justify-content: center; height: 70vh; background-size: cover; width: 100%; background-repeat: no-repeat; position: relative; background-position: center; font-family: myFirstFont; } .about_main .banner h2 { color: #fff; font-family: myFirstFont; text-align: center; font-size: 90px; vertical-align: auto; padding-top: 180px; letter-spacing: 2px; } @media screen and (max-width: 768px) { .about_main .banner h2 { font-size: 50px; padding-top: 240px; } } .about_main .banner p { font-family: myFirstFont; color: #fff; text-align: center; letter-spacing: 2px; font-size: 40px; } @media screen and (max-width: 768px) { .about_main .banner p { font-size: 30px; } } .about_main .about .heading { padding-bottom: 30px; } .about_main .about .heading h3 { color: #191919; font-size: 25px; text-align: center; text-transform: uppercase; letter-spacing: 1px; line-height: 3rem; } .about_main .about .heading p { text-align: center; padding-top: 15px; font-size: 16px; } .about_main .about .wrapper_bg { margin-top: 100px; background-image: url(./../img/banner/about/team_bg.jpg); justify-content: center; height: 70vh; background-size: cover; width: 100%; background-repeat: no-repeat; position: relative; background-position: center; font-family: myFirstFont; } @media screen and (max-width: 768px) { .about_main .about .wrapper_bg { height: 60vh; margin-top: 20px; } } .about_main .about .wrapper_bg::before { position: absolute; content: ""; background: rgba(0, 0, 0, 0.25); top: 0; bottom: 0; left: 0; right: 0; z-index: 1; } .about_main .about .wrapper_bg h2 { color: #fff; font-family: myFirstFont; text-align: center; font-size: 90px; vertical-align: auto; padding-top: 180px; letter-spacing: 2px; } @media screen and (max-width: 768px) { .about_main .about .wrapper_bg h2 { font-size: 50px; padding-top: 135px; } } .about_main .about .wrapper_bg p { font-family: myFirstFont; color: #fff; text-align: center; letter-spacing: 2px; font-size: 40px; } @media screen and (max-width: 768px) { .about_main .about .wrapper_bg p { font-size: 30px; } } .about_main .about .team { margin-top: 70px; } .about_main .about .team .card { border: none; } .about_main .about .team .card .card-img-top { border-radius: 0; } .about_main .about .team .card .card-body { padding: 0; margin-top: 20px; } .about_main .about .team .card .card-body .card-title { padding-top: 15px; text-align: center; color: #191919; font-size: 20px; letter-spacing: 1px; } .about_main .about .team .card .card-body .card-text { font-size: 16px; font-variant: small-caps; color: #535353; padding-top: 0px; text-align: center; } .about_main .partners .wrapper { margin-top: 50px; padding-bottom: 50px; } .about_main .partners .wrapper .staff { margin-top: 30px; } @media screen and (max-width: 576px) { .about_main .partners .wrapper .staff { margin-left: 20px; } } .about_main .partners .wrapper .staff h4 { color: #191919; font-size: 22px; } .about_main .partners .wrapper .staff p { font-size: 14px; } .about_main .recruit { margin-top: 100px; background-image: url(./../img/recruit/recruit.jpg); justify-content: center; height: 70vh; background-size: cover; width: 100%; background-repeat: no-repeat; position: relative; background-position: center; font-family: myFirstFont; } @media screen and (max-width: 768px) { .about_main .recruit { height: 60vh; margin-top: 20px; } } .about_main .recruit::before { position: absolute; content: ""; background: rgba(0, 0, 0, 0.336); top: 0; bottom: 0; left: 0; right: 0; z-index: 1; } .about_main .recruit h2 { color: #fff; font-family: myFirstFont; text-align: center; font-size: 90px; vertical-align: auto; padding-top: 180px; letter-spacing: 2px; } @media screen and (max-width: 768px) { .about_main .recruit h2 { font-size: 50px; padding-top: 135px; } } .about_main .recruit p { font-family: myFirstFont; color: #fff; text-align: center; letter-spacing: 2px; font-size: 40px; } @media screen and (max-width: 768px) { .about_main .recruit p { font-size: 30px; } } .about_main .fill_form { margin-bottom: 150px; } .about_main .fill_form .wrapper { margin-top: 70px; } .about_main .fill_form .wrapper .position { color: #191919; font-size: 35px; } @media screen and (max-width: 768px) { .about_main .fill_form .wrapper .position { padding-bottom: 20px; } } .about_main .fill_form .wrapper .fill_left ul { padding-left: 0; margin-top: 40px; list-style-type: disc !important; } .about_main .fill_form .wrapper .fill_left ul h4 { color: #191919; padding-bottom: 15px; } .about_main .fill_form .wrapper .fill_left ul li { padding-bottom: 10px; } .about_main .fill_form .wrapper .fill_left ul li::before { content: "\2022"; color: #191919; font-weight: bold; display: inline-block; width: 1em; } @media screen and (max-width: 768px) { .about_main .fill_form .wrapper .fill_left form { margin-top: 20px; } } .about_main .fill_form .wrapper .fill_left form .dropdownbox { border: 1px solid !important; box-shadow: none !important; border-color: #959191 !important !important; width: 55%; border-radius: 0; padding-bottom: 10px; } .about_main .fill_form .wrapper .fill_left form .dropdownbox p { padding: 5px 10px; font-size: 1.25em; line-height: 1.4em; user-select: none; -moz-user-select: none; margin-top: 10px; margin-bottom: 0; /* Safari */ -khtml-user-select: none; } .about_main .fill_form .wrapper .fill_left form .dropdownbox:focus { background-color: #fff !important; border: 1px solid !important; box-shadow: none !important; border-color: #f5f5f5 !important; box-shadow: none; border: 1px solid !important; } .about_main .fill_form .wrapper .fill_left form ul.menu { position: relative; width: 400px; overflow: hidden; height: 0; margin-top: 10px; transition: all 0.3s ease-in; /*-moz-transform:scale(0); */ background: transparent; color: #191919; cursor: pointer; user-select: none; -moz-user-select: none; /* Safari */ -khtml-user-select: none; } .about_main .fill_form .wrapper .fill_left form ul.menu li { padding: 2px 10px; font-size: 1.25em; line-height: 1.4em; transition: all 0.3s ease-in; border-bottom: 1px dotted #feeedf; } .about_main .fill_form .wrapper .fill_left form ul.menu li:hover { padding-left: 20px; color: #816f7f; background: #feeedf; } .about_main .fill_form .wrapper .fill_left form .menu.showMenu { /*-moz-transform:scale(1);*/ height: 165px; } .about_main .fill_form .wrapper .fill_left .contact-form { margin-top: 70px; } .about_main .fill_form .wrapper .fill_left .contact-form .form-control { display: block; width: 100%; height: calc(2.5em + 0.75rem + 2px); padding: 0.375rem 0.75rem; font-size: 1rem; font-weight: 400; line-height: 1.5; color: #495057; background-color: #fff; background-clip: padding-box; border: 1px solid white; border-bottom-color: #959191 !important; transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out; border-radius: 0; } .about_main .fill_form .wrapper .fill_left .contact-form .form-control:focus { border: 1px solid !important; box-shadow: none !important; border-color: #959191 !important !important; transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out; } .about_main .fill_form .wrapper .fill_left .contact-form .input-block { margin-bottom: 30px; } .about_main .fill_form .wrapper .fill_left .contact-form .input-block label { color: #6c6a74; } .recognition .banner { background-image: linear-gradient(#0000003d, #0000003d), url(./../img/banner/recognitioin/rec.jpg); justify-content: center; height: 70vh; background-size: cover; width: 100%; background-repeat: no-repeat; position: relative; background-position: center; font-family: myFirstFont; } .recognition .banner h2 { color: #fff; font-family: myFirstFont; text-align: center; font-size: 90px; vertical-align: auto; padding-top: 180px; letter-spacing: 2px; } @media screen and (max-width: 768px) { .recognition .banner h2 { font-size: 50px; padding-top: 240px; } } .recognition .banner p { font-family: myFirstFont; color: #fff; text-align: center; letter-spacing: 2px; font-size: 40px; } @media screen and (max-width: 768px) { .recognition .banner p { font-size: 30px; } } .recognition .recognition .our { line-height: 2.3rem; padding: 0px 100px; } @media screen and (max-width: 768px) { .recognition .recognition .our { padding: 0; } } .recognition .recognition .our .top::first-letter { font-size: 50px; color: #d4434c; margin-right: 5px; } .recognition .recognition .our a { color: #f5f5f5; } .recognition .recognition .wrapper { margin-top: 100px; } @media screen and (max-width: 768px) { .recognition .recognition .wrapper { margin-top: 50px; } } .recognition .recognition .wrapper .part_logo { padding-bottom: 50px; max-width: 150px; margin: auto; } @media screen and (max-width: 768px) { .recognition .recognition .wrapper .part_logo { padding-top: 50px; } } .recognition .recognition .wrapper .part_logo img { width: 100%; } .project .banner { background-image: linear-gradient(#0000003d, #0000003d), url(./../img/banner/project/project-bg.jpg); justify-content: center; height: 70vh; background-size: cover; width: 100%; background-repeat: no-repeat; position: relative; background-position: center; font-family: myFirstFont; } .project .banner h2 { color: #fff; font-family: myFirstFont; text-align: center; font-size: 90px; vertical-align: auto; padding-top: 180px; letter-spacing: 2px; } @media screen and (max-width: 768px) { .project .banner h2 { font-size: 50px; padding-top: 240px; } } .project .banner p { font-family: myFirstFont; color: #fff; text-align: center; letter-spacing: 2px; font-size: 40px; } @media screen and (max-width: 768px) { .project .banner p { font-size: 30px; } } .project .project_content { margin-bottom: 150px; } .project .project_content .wrapper { padding-top: 70px; } @media screen and (max-width: 768px) { .project .project_content .wrapper { padding-top: 0px; } } .project .project_content .wrapper .name { color: #191919; font-size: 35px; padding-bottom: 10px; } .project .project_content .wrapper .project_right .project_img { max-width: 650px; } .project .project_content .wrapper .project_right .project_img img { width: 100%; } .project .project_content .wrapper .project_right .project_details { margin-top: 30px; } .project .project_content .wrapper .project_right .project_details p { line-height: 2.3rem; } .project .project_content .wrapper .project_right .project_details a { color: #f5f5f5; } .project .project_content .wrapper .project_right .project_details a:hover { color: #191919; text-decoration: none; } .project .project_content .wrapper .pagination { margin-top: 70px; display: flex; width: 100%; align-items: center; justify-content: center; } .project .project_content .wrapper .pagination .pagination-item { text-decoration: none; position: relative; margin: 0 10px; width: 45px; height: 45px; border-radius: 50%; display: flex; align-items: center; justify-content: center; box-shadow: 0 5px 10px rgba(0, 0, 0, 0.3), inset 0 -5px 0px rgba(80, 80, 80, 0.1), inset 0 -10px 0px rgba(150, 150, 150, 0.1); overflow: hidden; color: #191919; cursor: pointer; transition: 0.3s ease-in-out; background-color: #efefef; } .project .project_content .wrapper .pagination .pagination-item:before, .project .project_content .wrapper .pagination .pagination-item:after { content: ""; display: flex; justify-content: center; align-items: center; position: absolute; width: 100%; height: 100%; z-index: 11; background-image: linear-gradient(135deg, #d4434c, #d16b6d); transform: translateX(-100px); transition: 0.3s ease-in-out; } .project .project_content .wrapper .pagination .pagination-item:after { content: "click"; color: #fff; background-image: linear-gradient(135deg, #d4434c, #d16b6d); transition-delay: 0.25s; transform: translateY(100px); } .project .project_content .wrapper .pagination .pagination-item:hover { box-shadow: 0 0px 20px rgba(0, 0, 0, 0.4), inset 0 -5px 0px rgba(80, 80, 80, 0), inset 0 -10px 0px rgba(150, 150, 150, 0); } .project .project_content .wrapper .pagination .pagination-item:hover:before, .project .project_content .wrapper .pagination .pagination-item:hover:after { transform: translateY(0); } .project .project_content .wrapper .pagination .pagination-item:active { box-shadow: none; } .project .project_content .wrapper .pagination .pagination-item.active { color: #fff; background-image: linear-gradient(135deg, #d4434c, #d4434c); } .project_single .banner { background-image: linear-gradient(#0000003d, #0000003d), url(./../img/banner/project-single/ps-bg.jpg); justify-content: center; height: 70vh; background-size: cover; width: 100%; background-repeat: no-repeat; position: relative; background-position: bottom; font-family: myFirstFont; } .project_single .banner h2 { color: #fff; font-family: myFirstFont; text-align: center; font-size: 90px; vertical-align: auto; padding-top: 180px; letter-spacing: 2px; } @media screen and (max-width: 768px) { .project_single .banner h2 { font-size: 50px; padding-top: 240px; } } .project_single .banner p { font-family: myFirstFont; color: #fff; text-align: center; letter-spacing: 2px; font-size: 40px; } @media screen and (max-width: 768px) { .project_single .banner p { font-size: 30px; } } .project_single .project_content { margin-bottom: 150px; } @media screen and (max-width: 768px) { .project_single .project_content { margin-bottom: 70px; } } .project_single .project_content .wrapper { padding-top: 70px; } @media screen and (max-width: 768px) { .project_single .project_content .wrapper { padding-top: 0px; } } .project_single .project_content .wrapper .shrink { padding: 0 50px; } @media screen and (max-width: 768px) { .project_single .project_content .wrapper .shrink { padding: 0 20px; } } .project_single .project_content .wrapper .details p { line-height: 2.3rem; padding-bottom: 20px; } .project_single .project_content .wrapper .details .single-p-img { max-width: 1010px; padding-bottom: 30px; } .project_single .project_content .wrapper .details .single-p-img img { width: 100%; } .wrapper_2 .bottom_img { max-width: 500px; } .wrapper_2 .bottom_img img { width: 100%; } .blog_main .banner { background-image: linear-gradient(#0000003d, #0000003d), url(./../img/banner/blog/blog-bg.jpg); justify-content: center; height: 70vh; background-size: cover; width: 100%; background-repeat: no-repeat; position: relative; background-position: bottom; font-family: myFirstFont; } .blog_main .banner h2 { color: #fff; font-family: myFirstFont; text-align: center; font-size: 90px; vertical-align: auto; padding-top: 180px; letter-spacing: 2px; } @media screen and (max-width: 768px) { .blog_main .banner h2 { font-size: 50px; padding-top: 240px; } } .blog_main .banner p { font-family: myFirstFont; color: #fff; text-align: center; letter-spacing: 2px; font-size: 40px; } @media screen and (max-width: 768px) { .blog_main .banner p { font-size: 30px; } } .blog_main .blog_content .wrapper { margin-bottom: 100px; } .blog_main .blog_content .wrapper .blog_s { padding: 0 186px; margin-top: 100px; } @media screen and (max-width: 992px) { .blog_main .blog_content .wrapper .blog_s { padding: 0 20px; } } .blog_main .blog_content .wrapper .blog_s .heading { text-align: center; padding-bottom: 40px; } .blog_main .blog_content .wrapper .blog_s .heading h4 { color: #191919; font-size: 35px; padding-bottom: 0px; } .blog_main .blog_content .wrapper .blog_s .heading p { padding: 0px 0px; } .blog_main .blog_content .wrapper .blog_s .blog_s_top { line-height: 2.3rem; } .blog_main .blog_content .wrapper .blog_s .blog_s_top a { color: #f5f5f5; } .blog_main .blog_content .wrapper .blog_s .blog_s_top a:hover { color: #191919; text-decoration: none; } .blog_main .blog_content .wrapper .blog_s .blog_s_img { max-width: 750px; margin: auto; padding: 30px 0; } .blog_main .blog_content .wrapper .blog_s .blog_s_img img { width: 100%; } .blog_main .blog_content .wrapper .pagination { margin-top: 70px; display: flex; width: 100%; align-items: center; justify-content: center; } .blog_main .blog_content .wrapper .pagination .pagination-item { text-decoration: none; position: relative; margin: 0 10px; width: 45px; height: 45px; border-radius: 50%; display: flex; align-items: center; justify-content: center; box-shadow: 0 5px 10px rgba(0, 0, 0, 0.3), inset 0 -5px 0px rgba(80, 80, 80, 0.1), inset 0 -10px 0px rgba(150, 150, 150, 0.1); overflow: hidden; color: #191919; cursor: pointer; transition: 0.3s ease-in-out; background-color: #efefef; } .blog_main .blog_content .wrapper .pagination .pagination-item:before, .blog_main .blog_content .wrapper .pagination .pagination-item:after { content: ""; display: flex; justify-content: center; align-items: center; position: absolute; width: 100%; height: 100%; z-index: 11; background-image: linear-gradient(135deg, #d4434c, #d16b6d); transform: translateX(-100px); transition: 0.3s ease-in-out; } .blog_main .blog_content .wrapper .pagination .pagination-item:after { content: "click"; color: #fff; background-image: linear-gradient(135deg, #d4434c, #d16b6d); transition-delay: 0.25s; transform: translateY(100px); } .blog_main .blog_content .wrapper .pagination .pagination-item:hover { box-shadow: 0 0px 20px rgba(0, 0, 0, 0.4), inset 0 -5px 0px rgba(80, 80, 80, 0), inset 0 -10px 0px rgba(150, 150, 150, 0); } .blog_main .blog_content .wrapper .pagination .pagination-item:hover:before, .blog_main .blog_content .wrapper .pagination .pagination-item:hover:after { transform: translateY(0); } .blog_main .blog_content .wrapper .pagination .pagination-item:active { box-shadow: none; } .blog_main .blog_content .wrapper .pagination .pagination-item.active { color: #fff; background-image: linear-gradient(135deg, #d4434c, #d4434c); } .blog_single .banner { background-image: linear-gradient(#0000003d, #0000003d), url(./../img/banner/blog-single/bs-bg.jpg); justify-content: center; height: 70vh; background-size: cover; width: 100%; background-repeat: no-repeat; position: relative; background-position: bottom; font-family: myFirstFont; } .blog_single .banner h2 { color: #fff; font-family: myFirstFont; text-align: center; font-size: 90px; vertical-align: auto; padding-top: 180px; letter-spacing: 2px; } @media screen and (max-width: 768px) { .blog_single .banner h2 { font-size: 50px; padding-top: 240px; } } .blog_single .banner p { font-family: myFirstFont; color: #fff; text-align: center; letter-spacing: 2px; font-size: 40px; } @media screen and (max-width: 768px) { .blog_single .banner p { font-size: 30px; } } .blog_single .blog_content .wrapper { padding-bottom: 100px; } @media screen and (max-width: 992px) { .blog_single .blog_content .wrapper { padding-bottom: 20px; } } .blog_single .blog_content .wrapper .blog_s { padding: 0 186px; margin-top: 100px; } @media screen and (max-width: 992px) { .blog_single .blog_content .wrapper .blog_s { padding: 0 20px; } } .blog_single .blog_content .wrapper .blog_s .heading { text-align: center; padding-bottom: 40px; } .blog_single .blog_content .wrapper .blog_s .heading h4 { color: #191919; font-size: 35px; padding-bottom: 0px; } .blog_single .blog_content .wrapper .blog_s .heading p { padding: 0px 0px; } .blog_single .blog_content .wrapper .blog_s .blog_s_top { line-height: 2.3rem; } .blog_single .blog_content .wrapper .blog_s .blog_s_top a { color: #f5f5f5; } .blog_single .blog_content .wrapper .blog_s .blog_s_top a:hover { color: #191919; text-decoration: none; } .blog_single .blog_content .wrapper .blog_s .blog_s_img { max-width: 750px; margin: auto; padding: 30px 0; } .blog_single .blog_content .wrapper .blog_s .blog_s_img img { width: 100%; } .blog_single .blog_content .wrapper .comment { padding: 0 186px; margin-top: 100px; margin-bottom: 75px; } @media screen and (max-width: 992px) { .blog_single .blog_content .wrapper .comment { padding: 0 20px; } } .blog_single .blog_content .wrapper .comment .top_comment { padding: 60px; display: flex; } @media screen and (max-width: 992px) { .blog_single .blog_content .wrapper .comment .top_comment { padding: 30px 0; } } .blog_single .blog_content .wrapper .comment .top_comment .img_wrapper { max-width: 150px; } .blog_single .blog_content .wrapper .comment .top_comment .img_wrapper img { width: 100%; } .blog_single .blog_content .wrapper .comment .top_comment .comment_details { padding-top: 10px; padding-left: 20px; } .blog_single .blog_content .wrapper .comment .top_comment .comment_details h6 { font-size: 18px; padding-bottom: 10px; color: #191919; font-weight: 600; } .blog_single .blog_content .wrapper .comment .top_comment .comment_details p { font-size: 14px; line-height: 2rem; letter-spacing: 1px; margin-bottom: 10px; } .blog_single .blog_content .wrapper .comment .replay { margin-top: 30px; } .blog_single .blog_content .wrapper .comment .replay h6 { font-size: 16px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; color: #191919; } .blog_single .blog_content .wrapper .comment .replay .top_comment { padding: 20px; display: flex; } .blog_single .blog_content .wrapper .comment .replay .top_comment .img_wrapper { max-width: 75px; } .blog_single .blog_content .wrapper .comment .replay .top_comment .img_wrapper img { width: 100%; border-radius: 50%; } .blog_single .blog_content .wrapper .comment .replay .top_comment .comment_details { padding-top: 10px; padding-left: 20px; } .blog_single .blog_content .wrapper .comment .replay .top_comment .comment_details .top { display: flex; justify-content: space-between; padding-bottom: 15px; } .blog_single .blog_content .wrapper .comment .replay .top_comment .comment_details .top span { color: #191919; font-size: 14px; font-weight: 700; } .blog_single .blog_content .wrapper .comment .replay .top_comment .comment_details .top span a { color: #f5f5f5; font-size: 14px; font-weight: 700; } .blog_single .blog_content .wrapper .comment .replay .top_comment .comment_details .top span a:hover { color: #191919; text-decoration: none; } .blog_single .blog_content .wrapper .comment .replay .top_comment .comment_details .date { padding-bottom: 15px; } .blog_single .blog_content .wrapper .comment .replay .top_comment .comment_details p { font-size: 14px; line-height: 2rem; letter-spacing: 1px; color: #191919; margin-bottom: 10px; } .blog_single .blog_content .wrapper .comment .replay .top_comment_1 { padding: 20px; margin-top: 30px; display: flex; } .blog_single .blog_content .wrapper .comment .replay .top_comment_1 .img_wrapper { max-width: 75px; } .blog_single .blog_content .wrapper .comment .replay .top_comment_1 .img_wrapper img { width: 100%; border-radius: 50%; } .blog_single .blog_content .wrapper .comment .replay .top_comment_1 .comment_details { padding-top: 10px; padding-left: 20px; } .blog_single .blog_content .wrapper .comment .replay .top_comment_1 .comment_details .top { display: flex; justify-content: space-between; padding-bottom: 15px; } .blog_single .blog_content .wrapper .comment .replay .top_comment_1 .comment_details .top span { color: #191919; font-size: 14px; font-weight: 700; } .blog_single .blog_content .wrapper .comment .replay .top_comment_1 .comment_details .top span a { color: #f5f5f5; font-size: 14px; font-weight: 700; } .blog_single .blog_content .wrapper .comment .replay .top_comment_1 .comment_details .top span a:hover { color: #191919; text-decoration: none; } .blog_single .blog_content .wrapper .comment .replay .top_comment_1 .comment_details .date { padding-bottom: 15px; } .blog_single .blog_content .wrapper .comment .replay .top_comment_1 .comment_details p { font-size: 14px; line-height: 2rem; letter-spacing: 1px; color: #191919; margin-bottom: 10px; } .blog_single .blog_content .wrapper .comment .replay .top_comment_2 { padding: 20px; margin-top: 30px; display: flex; margin-left: 75px; } .blog_single .blog_content .wrapper .comment .replay .top_comment_2 .img_wrapper { max-width: 75px; } .blog_single .blog_content .wrapper .comment .replay .top_comment_2 .img_wrapper img { width: 100%; border-radius: 50%; } .blog_single .blog_content .wrapper .comment .replay .top_comment_2 .comment_details { padding-top: 10px; padding-left: 20px; border: 1px solid; border-color: transparent; border-bottom-color: #6c6a74; } .blog_single .blog_content .wrapper .comment .replay .top_comment_2 .comment_details .top { display: flex; justify-content: space-between; padding-bottom: 15px; } .blog_single .blog_content .wrapper .comment .replay .top_comment_2 .comment_details .top span { color: #191919; font-size: 14px; font-weight: 700; } .blog_single .blog_content .wrapper .comment .replay .top_comment_2 .comment_details .top span a { color: #f5f5f5; font-size: 14px; font-weight: 700; } .blog_single .blog_content .wrapper .comment .replay .top_comment_2 .comment_details .top span a:hover { color: #191919; text-decoration: none; } .blog_single .blog_content .wrapper .comment .replay .top_comment_2 .comment_details .date { padding-bottom: 15px; } .blog_single .blog_content .wrapper .comment .replay .top_comment_2 .comment_details p { font-size: 14px; line-height: 2rem; letter-spacing: 1px; color: #191919; margin-bottom: 10px; } .blog_single .blog_content .wrapper .comment .replay .top_comment_3 { padding: 20px; margin-top: 30px; display: flex; margin-left: 125px; } .blog_single .blog_content .wrapper .comment .replay .top_comment_3 .img_wrapper { max-width: 75px; } .blog_single .blog_content .wrapper .comment .replay .top_comment_3 .img_wrapper img { width: 100%; border-radius: 50%; } .blog_single .blog_content .wrapper .comment .replay .top_comment_3 .comment_details { padding-top: 10px; padding-left: 20px; border: 1px solid; border-color: transparent; border-bottom-color: #6c6a74; } .blog_single .blog_content .wrapper .comment .replay .top_comment_3 .comment_details .top { display: flex; justify-content: space-between; padding-bottom: 15px; } .blog_single .blog_content .wrapper .comment .replay .top_comment_3 .comment_details .top span { color: #191919; font-size: 14px; font-weight: 700; } .blog_single .blog_content .wrapper .comment .replay .top_comment_3 .comment_details .top span a { color: #f5f5f5; font-size: 14px; font-weight: 700; } .blog_single .blog_content .wrapper .comment .replay .top_comment_3 .comment_details .top span a:hover { color: #191919; text-decoration: none; } .blog_single .blog_content .wrapper .comment .replay .top_comment_3 .comment_details .date { padding-bottom: 15px; } .blog_single .blog_content .wrapper .comment .replay .top_comment_3 .comment_details p { font-size: 14px; line-height: 2rem; letter-spacing: 1px; color: #191919; margin-bottom: 10px; } .blog_single .blog_content .wrapper .comment .replay .top_comment_4 { padding: 20px; margin-top: 30px; display: flex; margin-left: 50px; } .blog_single .blog_content .wrapper .comment .replay .top_comment_4 .img_wrapper { max-width: 75px; } .blog_single .blog_content .wrapper .comment .replay .top_comment_4 .img_wrapper img { width: 100%; border-radius: 50%; } .blog_single .blog_content .wrapper .comment .replay .top_comment_4 .comment_details { padding-top: 10px; padding-left: 20px; border: 1px solid; border-color: transparent; border-bottom-color: #6c6a74; } .blog_single .blog_content .wrapper .comment .replay .top_comment_4 .comment_details .top { display: flex; justify-content: space-between; padding-bottom: 15px; } .blog_single .blog_content .wrapper .comment .replay .top_comment_4 .comment_details .top span { color: #191919; font-size: 14px; font-weight: 700; } .blog_single .blog_content .wrapper .comment .replay .top_comment_4 .comment_details .top span a { color: #f5f5f5; font-size: 14px; font-weight: 700; } .blog_single .blog_content .wrapper .comment .replay .top_comment_4 .comment_details .top span a:hover { color: #191919; text-decoration: none; } .blog_single .blog_content .wrapper .comment .replay .top_comment_4 .comment_details .date { padding-bottom: 15px; } .blog_single .blog_content .wrapper .comment .replay .top_comment_4 .comment_details p { font-size: 14px; line-height: 2rem; letter-spacing: 1px; color: #191919; margin-bottom: 10px; } .blog_single .blog_content .wrapper .comment .post_replay { padding-top: 50px; } .blog_single .blog_content .wrapper .comment .post_replay h6 { font-size: 16px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; } .blog_single .blog_content .wrapper .comment .post_replay form { margin-top: 30px; } .blog_single .blog_content .wrapper .comment .post_replay form .form-group { margin-bottom: 30px; } .blog_single .blog_content .wrapper .comment .post_replay form .form-group .form-control { border-radius: 0; height: calc(3.5em + 0.95rem + 2px); padding: 0.575rem 0.75rem; box-shadow: none !important; } .blog_single .blog_content .wrapper .comment .post_replay form .form-group .form-control:focus { color: #5f5f5f; background-color: #fff; border-color: #d4434c; outline: 0; } .blog_single .blog_content .wrapper .comment .post_replay form textarea { border: 1px solid !important; border-top-color: #dedede !important; border-right-color: #dedede !important; border-bottom-color: #dedede !important; border-left-color: #dedede !important; padding: 30px 20px; } .contact { margin-bottom: 100px; } .contact .banner { background-image: linear-gradient(#0000003d, #0000003d), url(./../img/banner/contact/contact-bg.jpg); justify-content: center; height: 70vh; background-size: cover; width: 100%; background-repeat: no-repeat; position: relative; background-position: center; font-family: myFirstFont; } .contact .banner h2 { color: #fff; font-family: myFirstFont; text-align: center; font-size: 90px; vertical-align: auto; padding-top: 180px; letter-spacing: 2px; } @media screen and (max-width: 768px) { .contact .banner h2 { font-size: 50px; padding-top: 240px; } } .contact .banner p { font-family: myFirstFont; color: #fff; text-align: center; letter-spacing: 2px; font-size: 40px; } @media screen and (max-width: 768px) { .contact .banner p { font-size: 30px; } } .contact .contact_content .wrapper { padding-top: 50px; } .contact .contact_content .wrapper .address_wrapper .address { padding-bottom: 50px; } .contact .contact_content .wrapper .address_wrapper .address h4 { color: #191919; text-transform: uppercase; font-weight: 600; padding-bottom: 5px; } .contact .contact_content .wrapper .address_wrapper .address p { font-size: 18px; margin-bottom: 5px; } .contact .contact_content .wrapper .address_wrapper .address p a { color: #f5f5f5; } .contact .contact_content .wrapper .address_wrapper .address p a:hover { color: #191919; text-decoration: none; } .contact .contact_content .wrapper .social h4 { color: #191919; text-transform: uppercase; font-weight: 600; padding-bottom: 5px; } .contact .contact_content .wrapper .social .social_icon { margin-left: auto; padding-top: 15px; display: flex; } @media screen and (max-width: 992px) { .contact .contact_content .wrapper .social .social_icon { margin: auto; } } .contact .contact_content .wrapper .social .social_icon a { width: auto; display: block; padding: 6px 6px; background: black; border-radius: 7px; color: #fff; margin-right: 15px; } .contact .contact_content .wrapper .social .social_icon a:hover { color: #f5f5f5; } .contact .contact_content .wrapper .social .social_icon a span { font-size: 20px; } @media screen and (max-width: 768px) { .contact .contact_content .wrapper .post_replay form { margin-top: 70px; } } .contact .contact_content .wrapper .post_replay form .form-group { margin-bottom: 30px; } .contact .contact_content .wrapper .post_replay form .form-group .form-control { border-radius: 0; height: calc(3.5em + 0.95rem + 2px); padding: 0.575rem 0.75rem; box-shadow: none !important; } .contact .contact_content .wrapper .post_replay form .form-group .form-control:focus { color: #5f5f5f; background-color: #fff; border-color: #d4434c; outline: 0; } .contact .contact_content .wrapper .post_replay form textarea { padding: 30px 20px; } .contact .contact_content .wrapper .post_replay form .txt { border: 1px solid; border-color: transparent; border-top-color: #dedede !important; border-right-color: #dedede !important; border-bottom-color: #dedede !important; border-left-color: #dedede !important; } .contact .contact_content .wrapper .post_replay form .txt:focus { color: #5f5f5f; background-color: #fff; border-color: #fa3737 !important; outline: 0; } .contact .contact_content .wrapper .map { margin-top: 70px; .map-responsive{ overflow:hidden; padding-bottom:34.25%; position:relative; height:0; } .map-responsive iframe{ left:0; top:0; height:100%; width:100%; position:absolute; } } .blank { background-color: #fff; height: 100vh; width: auto; } .blank .wrapper { position: relative; height: 100vh; } .blank .wrapper h2 { position: absolute; font-size: 5vw; text-align: center; display: flex; justify-content: center; top: 43%; left: 31%; } .error { background-image: linear-gradient(#000000ab, #000000b5), url(./../img/banner/404/404.jpg); height: 100vh; background-size: cover; width: 100%; background-repeat: no-repeat; position: relative; background-position: center; } .error .h-full { height: 100vh; display: flex; justify-content: center; } .error .ct { align-items: center; display: flex; } .error .ct h1 { color: #fff; font-size: 10vw; text-align: center; margin: 0; font-family: myFirstFont; letter-spacing: 2rem; } .error .ct p { color: #fff; font-size: 2vw; text-align: center; } .error .ct .wrapper { display: flex; justify-content: center; } .login { background-image: linear-gradient(#11111100, #11111100), url(./../img/banner/2.jpg); justify-content: center; height: 100vh; background-size: cover; width: 100%; background-repeat: no-repeat; background-position: center; position: relative; } .login .h-full { height: 100vh; display: flex; justify-content: center; align-items: center; } .login .wrapper { position: relative; } .login .wrapper .login_form { background: aliceblue; padding: 40px 1px; border-radius: 25px; margin-top: 50px; } .login .wrapper .login_form h3 { color: #191919; font-family: myFirstFont; text-align: center; font-size: 40px; padding-bottom: 30px; letter-spacing: 2px; } .login .wrapper .login_form form .form-group { width: 70%; margin: auto; margin-bottom: auto; margin-bottom: 32px; } .login .wrapper .login_form form .form-group .form-control { border-radius: 0; height: calc(2.5em + 0.95rem + 2px); padding: 0.575rem 0.75rem; box-shadow: none !important; background-color: transparent !important; } .login .wrapper .login_form form .form-group .form-control:focus { color: #5f5f5f; background-color: #fff; border-color: #d4434c; outline: 0; } .login .wrapper .login_form form .txt { border: 1px solid; border-color: transparent; border-top-color: #dedede !important; border-right-color: #dedede !important; border-bottom-color: #dedede !important; border-left-color: #dedede !important; } .login .wrapper .login_form form .txt:focus { color: #5f5f5f; background-color: #fff; border-color: #fa3737 !important; outline: 0; } .login .wrapper .login_form form .check { display: flex; justify-content: end; } .register { background-image: linear-gradient(#11111100, #11111100), url(./../img/banner/2.jpg); justify-content: center; height: 100vh; background-size: cover; width: 100%; background-repeat: no-repeat; background-position: center; position: relative; } @media screen and (max-width: 992px) { .register { height: auto !important; } } .register .h-height { height: auto; display: flex; justify-content: center; align-items: center; } .register .wrapper { position: relative; } @media screen and (max-width: 992px) { .register .wrapper { padding-top: 100px; } } .register .wrapper .register_form { background: aliceblue; padding: 40px 96px; border-radius: 25px; margin-top: 175px; } @media screen and (max-width: 768px) { .register .wrapper .register_form { padding: 40px 40px; margin: 50px 30px; } } @media screen and (max-width: 992px) { .register .wrapper .register_form { padding: 40px 40px; margin: 75px 30px; } } .register .wrapper .register_form h3 { color: #191919; font-family: myFirstFont; text-align: center; font-size: 40px; padding-bottom: 30px; letter-spacing: 2px; } .register .wrapper .register_form form .form-group { width: 100%; margin-bottom: 15px; } .register .wrapper .register_form form .form-group .form-control { border-radius: 0; height: calc(2.5em + 0.95rem + 2px); padding: 0.575rem 0.75rem; box-shadow: none !important; background-color: transparent !important; } .register .wrapper .register_form form .form-group .form-control:focus { color: #5f5f5f; background-color: #fff; border-color: #d4434c; outline: 0; } .register .wrapper .register_form form .txt { border: 1px solid; border-color: transparent; border-top-color: #dedede !important; border-right-color: #dedede !important; border-bottom-color: #dedede !important; border-left-color: #dedede !important; } .register .wrapper .register_form form .txt:focus { color: #5f5f5f; background-color: #fff; border-color: #fa3737 !important; outline: 0; } .register .wrapper .register_form form .check { display: flex; justify-content: end; } @media screen and (max-width: 768px) { .register .wrapper .register_form form .check { justify-content: flex-start; margin-left: 15px; margin-bottom: 15px; } } .oe_website_sale .o_pricelist_dropdown > .btn, .oe_website_sale .o_pricelist_dropdown > .btn:hover, .oe_website_sale .o_pricelist_dropdown > .btn:focus, .oe_website_sale .o_pricelist_dropdown > .btn:active, .oe_website_sale .o_sortby_dropdown > .btn, .oe_website_sale .o_sortby_dropdown > .btn:hover, .oe_website_sale .o_sortby_dropdown > .btn:focus, .oe_website_sale .o_sortby_dropdown > .btn:active { background-color: #191919 !important; color: #fff !important; padding: 7px; padding-left: 7px !important; padding-right: 6px !important; } .css_quantity .btn { background: black !important; color: #fff !important; } .btn-fill-light:not(:disabled):not(.o_wysiwyg_loader):not(.disabled):active, .btn-light:not(:disabled):not(.o_wysiwyg_loader):not(.disabled):active, .btn-fill-light:not(:disabled):not(.o_wysiwyg_loader):not(.disabled).active, .btn-light:not(:disabled):not(.o_wysiwyg_loader):not(.disabled).active, .show > .btn-fill-light.dropdown-toggle, .show > .dropdown-toggle.btn-light { color: #fff; } .d-none.d-md-block.btn.btn-link.p-0.align-self-start.o_add_compare_dyn { padding: 8px !important; } .js_product .css_quantity .btn.btn-primary.float_left.js_add_cart_json { margin-left: inherit !important; margin-top: inherit !important; } .input-group-prepend > .btn, .input-group-append > .btn { height: inherit !important; margin-top: inherit !important; } /*# sourceMappingURL=style.css.map */