*,::after,::before{box-sizing:border-box}@media (prefers-reduced-motion:no-preference){:root{scroll-behavior:smooth}}.container,.container-fluid,.container-lg,.container-md,.container-sm,.container-xl,.container-xxl{--bs-gutter-x:1.5rem;--bs-gutter-y:0;width:100%;padding-right:calc(var(--bs-gutter-x) * .5);padding-left:calc(var(--bs-gutter-x) * .5);margin-right:auto;margin-left:auto}.row{--bs-gutter-x:1.5rem;--bs-gutter-y:0;display:flex;flex-wrap:wrap;margin-top:calc(-1 * var(--bs-gutter-y));margin-right:calc(-.5 * var(--bs-gutter-x));margin-left:calc(-.5 * var(--bs-gutter-x))}.row>*{flex-shrink:0;width:100%;max-width:100%;padding-right:calc(var(--bs-gutter-x) * .5);padding-left:calc(var(--bs-gutter-x) * .5);margin-top:var(--bs-gutter-y)}.col{flex:1 0 0%}.col-auto{flex:0 0 auto;width:auto}.col-1{flex:0 0 auto;width:8.33333333%}.col-2,.col-3{flex:0 0 auto}.col-2{width:16.66666667%}.col-3{width:25%}.col-4,.col-5{flex:0 0 auto}.col-4{width:33.33333333%}.col-5{width:41.66666667%}.col-6,.col-7{flex:0 0 auto}.col-6{width:50%}.col-7{width:58.33333333%}.col-8,.col-9{flex:0 0 auto}.col-8{width:66.66666667%}.col-9{width:75%}.col-10{flex:0 0 auto;width:83.33333333%}.col-11{flex:0 0 auto;width:91.66666667%}.col-12{flex:0 0 auto;width:100%}@media (min-width:576px){.container,.container-sm{max-width:100%}.col-sm{flex:1 0 0%}.col-sm-auto{flex:0 0 auto;width:auto}.col-sm-1{flex:0 0 auto;width:8.33333333%}.col-sm-2{flex:0 0 auto;width:16.66666667%}.col-sm-3{flex:0 0 auto;width:25%}.col-sm-4{flex:0 0 auto;width:33.33333333%}.col-sm-5{flex:0 0 auto;width:41.66666667%}.col-sm-6{flex:0 0 auto;width:50%}.col-sm-7{flex:0 0 auto;width:58.33333333%}.col-sm-8{flex:0 0 auto;width:66.66666667%}.col-sm-9{flex:0 0 auto;width:75%}.col-sm-10{flex:0 0 auto;width:83.33333333%}.col-sm-11{flex:0 0 auto;width:91.66666667%}.col-sm-12{flex:0 0 auto;width:100%}}@media (min-width:768px){.container,.container-md,.container-sm{max-width:720px}.col-md{flex:1 0 0%}.col-md-auto{flex:0 0 auto;width:auto}.col-md-1{flex:0 0 auto;width:8.33333333%}.col-md-2{flex:0 0 auto;width:16.66666667%}.col-md-3{flex:0 0 auto;width:25%}.col-md-4{flex:0 0 auto;width:33.33333333%}.col-md-5{flex:0 0 auto;width:41.66666667%}.col-md-6{flex:0 0 auto;width:50%}.col-md-7{flex:0 0 auto;width:58.33333333%}.col-md-8{flex:0 0 auto;width:66.66666667%}.col-md-9{flex:0 0 auto;width:75%}.col-md-10{flex:0 0 auto;width:83.33333333%}.col-md-11{flex:0 0 auto;width:91.66666667%}.col-md-12{flex:0 0 auto;width:100%}}@media (min-width:992px){.container,.container-lg,.container-md,.container-sm{max-width:960px}.col-lg{flex:1 0 0%}.col-lg-auto{flex:0 0 auto;width:auto}.col-lg-1{flex:0 0 auto;width:8.33333333%}.col-lg-2{flex:0 0 auto;width:16.66666667%}.col-lg-3{flex:0 0 auto;width:25%}.col-lg-4{flex:0 0 auto;width:33.33333333%}.col-lg-5{flex:0 0 auto;width:41.66666667%}.col-lg-6{flex:0 0 auto;width:50%}.col-lg-7{flex:0 0 auto;width:58.33333333%}.col-lg-8{flex:0 0 auto;width:66.66666667%}.col-lg-9{flex:0 0 auto;width:75%}.col-lg-10{flex:0 0 auto;width:83.33333333%}.col-lg-11{flex:0 0 auto;width:91.66666667%}.col-lg-12{flex:0 0 auto;width:100%}}@media (min-width:1200px){.container,.container-lg,.container-md,.container-sm,.container-xl{max-width:1140px}.col-xl{flex:1 0 0%}.col-xl-auto{flex:0 0 auto;width:auto}.col-xl-1{flex:0 0 auto;width:8.33333333%}.col-xl-2{flex:0 0 auto;width:16.66666667%}.col-xl-3{flex:0 0 auto;width:25%}.col-xl-4{flex:0 0 auto;width:33.33333333%}.col-xl-5{flex:0 0 auto;width:41.66666667%}.col-xl-6{flex:0 0 auto;width:50%}.col-xl-7{flex:0 0 auto;width:58.33333333%}.col-xl-8{flex:0 0 auto;width:66.66666667%}.col-xl-9{flex:0 0 auto;width:75%}.col-xl-10{flex:0 0 auto;width:83.33333333%}.col-xl-11{flex:0 0 auto;width:91.66666667%}.col-xl-12{flex:0 0 auto;width:100%}}@media (min-width:1400px){.container,.container-lg,.container-md,.container-sm,.container-xl,.container-xxl{max-width:1320px}.col-xxl{flex:1 0 0%}.col-xxl-auto{flex:0 0 auto;width:auto}.col-xxl-1{flex:0 0 auto;width:8.33333333%}.col-xxl-2{flex:0 0 auto;width:16.66666667%}.col-xxl-3{flex:0 0 auto;width:25%}.col-xxl-4{flex:0 0 auto;width:33.33333333%}.col-xxl-5{flex:0 0 auto;width:41.66666667%}.col-xxl-6{flex:0 0 auto;width:50%}.col-xxl-7{flex:0 0 auto;width:58.33333333%}.col-xxl-8{flex:0 0 auto;width:66.66666667%}.col-xxl-9{flex:0 0 auto;width:75%}.col-xxl-10{flex:0 0 auto;width:83.33333333%}.col-xxl-11{flex:0 0 auto;width:91.66666667%}.col-xxl-12{flex:0 0 auto;width:100%}}.fade{transition:opacity .15s linear}@media (prefers-reduced-motion:reduce){.fade{transition:none}}.fade:not(.show){opacity:0} a.meanmenu-reveal{display:none}.mean-container .mean-bar{float:left;width:100%;position:relative;background:#0c1923;padding:4px 0;min-height:42px;z-index:999999}.mean-container a.meanmenu-reveal{width:22px;height:22px;padding:13px 13px 11px;position:absolute;top:0;right:0;cursor:pointer;color:#fff;text-decoration:none;font-size:16px;text-indent:-9999em;line-height:22px;font-size:1px;display:block;font-family:Arial,Helvetica,sans-serif;font-weight:700}.mean-container a.meanmenu-reveal span{display:block;background:#fff;height:3px;margin-top:3px}.mean-container .mean-nav{float:left;width:100%;background:#0c1923;margin-top:44px}.mean-container .mean-nav ul{padding:0;margin:0;width:100%;list-style-type:none}.mean-container .mean-nav ul li{position:relative;float:left;width:100%}.mean-container .mean-nav ul li a{display:block;float:left;width:90%;padding:1em 5%;margin:0;text-align:left;color:#fff;border-top:1px solid #383838;border-top:1px solid rgba(255,255,255,.5);text-decoration:none;text-transform:uppercase}.mean-container .mean-nav ul li li a{width:80%;padding:1em 10%;border-top:1px solid #f1f1f1;border-top:1px solid rgba(255,255,255,.25);opacity:.75;filter:alpha(opacity=75);text-shadow:none!important;visibility:visible}.mean-container .mean-nav ul li.mean-last a{border-bottom:0;margin-bottom:0}.mean-container .mean-nav ul li li li a{width:70%;padding:1em 15%}.mean-container .mean-nav ul li li li li a{width:60%;padding:1em 20%}.mean-container .mean-nav ul li li li li li a{width:50%;padding:1em 25%}.mean-container .mean-nav ul li a:hover{background:#252525;background:rgba(255,255,255,.1)}.mean-container .mean-nav ul li a.mean-expand{margin-top:1px;width:26px;height:32px;padding:12px!important;text-align:center;position:absolute;right:0;top:0;z-index:2;font-weight:700;background:rgba(255,255,255,.1);border:0!important;border-left:1px solid rgba(255,255,255,.4)!important;border-bottom:1px solid rgba(255,255,255,.2)!important}.mean-container .mean-nav ul li a.mean-expand:hover{background:rgba(0,0,0,.9)}.mean-container .mean-push{float:left;width:100%;padding:0;margin:0;clear:both}.mean-nav .wrapper{width:100%;padding:0;margin:0}.mean-container .mean-bar,.mean-container .mean-bar *{-webkit-box-sizing:content-box;-moz-box-sizing:content-box;box-sizing:content-box}.mean-remove{display:none!important} :root { --primary: #c9f31d; --secondary: #2c2c2c; --black: #000; --black-2: #121212; --black-3: #555; --black-4: #1d1d1d; --black-5: #343434; --black-6: #262626; --black-7: #555555; --black-13: #666; --white: #fff; --white-2: #efefef; --white-3: #e9e9e9; --white-4: #f0f0f0; --white-5: #fbfbfb; --white-6: #d7d7d7; --white-7: #F5F5F5; --gray: #c2c2c2; --gray-2: #999; --gray-3: #a8a8a8; --gray-4: #f6f6f6; --gray-5: #bbb; --gray-6: #2b2b2b; --gray-7: #b9b9b9; --gray-8: #8E8E8E; --gray-9: #aaa; --gray-10: #7c7c7c; --gray-11: #D9D9D9; --gray-12: #383838; --gray-13: #ccc; --gray-14: #dfdfdf; --gray-15: #C0C0C0; --gray-16: #939393; --pink: #FAEDE9; --pink-2: #FF9776; --pink-3: #F3ECEC; --pink-4: #FFFAF0; --pink-5: #E0E3CC; --bg-line: #1e1e1e; --d-gray: #6A6A6A; --d-black: #1A1A1A; --d-black-2: #171717; --d-black-3: #1A1A1A; } /*----------------------------------------*/ /* 03. SPACE CSS START /*----------------------------------------*/ .pb-60 { padding-bottom: 60px; } @media only screen and (min-width: 992px) and (max-width: 1199px) { .pb-60 { padding-bottom: 60px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .pb-60 { padding-bottom: 60px; } } @media only screen and (max-width: 767px) { .pb-60 { padding-bottom: 40px; } } .pb-100 { padding-bottom: 100px; } @media only screen and (min-width: 992px) and (max-width: 1199px) { .pb-100 { padding-bottom: 90px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .pb-100 { padding-bottom: 80px; } } @media only screen and (max-width: 767px) { .pb-100 { padding-bottom: 60px; } } .pb-110 { padding-bottom: 110px; } @media only screen and (min-width: 992px) and (max-width: 1199px) { .pb-110 { padding-bottom: 90px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .pb-110 { padding-bottom: 80px; } } @media only screen and (max-width: 767px) { .pb-110 { padding-bottom: 60px; } } .pb-120 { padding-bottom: 120px; } @media only screen and (min-width: 992px) and (max-width: 1199px) { .pb-120 { padding-bottom: 90px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .pb-120 { padding-bottom: 80px; } } @media only screen and (max-width: 767px) { .pb-120 { padding-bottom: 60px; } } .pb-130 { padding-bottom: 130px; } @media only screen and (min-width: 992px) and (max-width: 1199px) { .pb-130 { padding-bottom: 90px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .pb-130 { padding-bottom: 80px; } } @media only screen and (max-width: 767px) { .pb-130 { padding-bottom: 60px; } } .pb-140 { padding-bottom: 140px; } @media only screen and (min-width: 992px) and (max-width: 1199px) { .pb-140 { padding-bottom: 90px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .pb-140 { padding-bottom: 80px; } } @media only screen and (max-width: 767px) { .pb-140 { padding-bottom: 60px; } } .pb-150 { padding-bottom: 150px; } @media only screen and (min-width: 992px) and (max-width: 1199px) { .pb-150 { padding-bottom: 90px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .pb-150 { padding-bottom: 80px; } } @media only screen and (max-width: 767px) { .pb-150 { padding-bottom: 60px; } } .pb-200 { padding-bottom: 200px; } @media only screen and (min-width: 992px) and (max-width: 1199px) { .pb-200 { padding-bottom: 90px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .pb-200 { padding-bottom: 80px; } } @media only screen and (max-width: 767px) { .pb-200 { padding-bottom: 60px; } } .pt-80 { padding-top: 80px; } @media only screen and (min-width: 992px) and (max-width: 1199px) { .pt-80 { padding-top: 80px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .pt-80 { padding-top: 80px; } } @media only screen and (max-width: 767px) { .pt-80 { padding-top: 80px; } } .pt-100 { padding-top: 100px; } @media only screen and (max-width: 767px) { .pt-100 { padding-top: 60px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .pt-100 { padding-top: 80px; } } @media only screen and (min-width: 992px) and (max-width: 1199px) { .pt-100 { padding-top: 90px; } } .pt-110 { padding-top: 110px; } @media only screen and (max-width: 767px) { .pt-110 { padding-top: 60px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .pt-110 { padding-top: 80px; } } @media only screen and (min-width: 992px) and (max-width: 1199px) { .pt-110 { padding-top: 90px; } } .pt-120 { padding-top: 120px; } @media only screen and (max-width: 767px) { .pt-120 { padding-top: 60px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .pt-120 { padding-top: 80px; } } @media only screen and (min-width: 992px) and (max-width: 1199px) { .pt-120 { padding-top: 90px; } } .pt-130 { padding-top: 130px; } @media only screen and (max-width: 767px) { .pt-130 { padding-top: 60px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .pt-130 { padding-top: 80px; } } @media only screen and (min-width: 992px) and (max-width: 1199px) { .pt-130 { padding-top: 90px; } } .pt-140 { padding-top: 140px; } @media only screen and (max-width: 767px) { .pt-140 { padding-top: 60px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .pt-140 { padding-top: 80px; } } @media only screen and (min-width: 992px) and (max-width: 1199px) { .pt-140 { padding-top: 90px; } } .pt-150 { padding-top: 150px; } @media only screen and (max-width: 767px) { .pt-150 { padding-top: 60px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .pt-150 { padding-top: 80px; } } @media only screen and (min-width: 992px) and (max-width: 1199px) { .pt-150 { padding-top: 90px; } } .mt-60 { margin-top: 60px; } .ht-200 { padding-top: 200px; } @media only screen and (min-width: 992px) and (max-width: 1199px) { .ht-200 { padding-top: 180px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .ht-200 { padding-top: 160px; } } @media only screen and (max-width: 767px) { .ht-200 { padding-top: 130px; } } /*----------------------------------------*/ /* 04. ANIMATION CSS START /*----------------------------------------*/ @-webkit-keyframes wcRotate { 0% { -webkit-transform: rotate(0deg) scale(1.1); transform: rotate(0deg) scale(1.1); } 50% { -webkit-transform: rotate(5deg) scale(1.17); transform: rotate(5deg) scale(1.17); } 100% { -webkit-transform: rotate(0deg) scale(1.1); transform: rotate(0deg) scale(1.1); } } @keyframes wcRotate { 0% { -webkit-transform: rotate(0deg) scale(1.1); transform: rotate(0deg) scale(1.1); } 50% { -webkit-transform: rotate(5deg) scale(1.17); transform: rotate(5deg) scale(1.17); } 100% { -webkit-transform: rotate(0deg) scale(1.1); transform: rotate(0deg) scale(1.1); } } @-webkit-keyframes wcBubble { 0% { scale: 1; } 50% { scale: 1.5; } 100% { scale: 1; } } @keyframes wcBubble { 0% { scale: 1; } 50% { scale: 1.5; } 100% { scale: 1; } } @-webkit-keyframes wcZoom { 0% { scale: 1; } 50% { scale: 0.5; } 100% { scale: 1; } } @keyframes wcZoom { 0% { scale: 1; } 50% { scale: 0.5; } 100% { scale: 1; } } @-webkit-keyframes wcSlideBottom { 0% { -webkit-transform: translateY(0); transform: translateY(0); } 50% { -webkit-transform: translateY(50px); transform: translateY(50px); } 100% { -webkit-transform: translateY(0); transform: translateY(0); } } @keyframes wcSlideBottom { 0% { -webkit-transform: translateY(0); transform: translateY(0); } 50% { -webkit-transform: translateY(50px); transform: translateY(50px); } 100% { -webkit-transform: translateY(0); transform: translateY(0); } } @-webkit-keyframes reveal { to { opacity: 1; -webkit-filter: blur(0px); filter: blur(0px); } } @keyframes reveal { to { opacity: 1; -webkit-filter: blur(0px); filter: blur(0px); } } @-webkit-keyframes wcfadeUp { 0% { opacity: 0; -webkit-transform: translateY(50px); transform: translateY(50px); } 100% { opacity: 1; -webkit-transform: translateY(0); transform: translateY(0); } } @keyframes wcfadeUp { 0% { opacity: 0; -webkit-transform: translateY(50px); transform: translateY(50px); } 100% { opacity: 1; -webkit-transform: translateY(0); transform: translateY(0); } } @-webkit-keyframes wcSpinner { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 50% { -webkit-transform: rotate(180deg); transform: rotate(180deg); } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } @keyframes wcSpinner { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 50% { -webkit-transform: rotate(180deg); transform: rotate(180deg); } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } /*----------------------------------------*/ /* 05. THEME CSS START /*----------------------------------------*/ * { margin: 0; padding: 0; } body { font-family: "Ubuntu", sans-serif; background:#fff; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-smoothing: antialiased; } html { scroll-behavior: smooth; } h1, h2, h3, h4, h5, h6 { position: relative; z-index: 1; padding: 0; margin: 0; } ul, ol { padding: 0; margin: 0; } li { list-style: none; position: relative; z-index: 1; } a { text-decoration: none; -webkit-transition: all 0.3s; transition: all 0.3s; position: relative; z-index: 1; } button { background-color: transparent; border: 0; } p { padding: 0; margin: 0; font-style: normal; line-height: 1.5; font-weight: 400; font-size: 16px; color: var(--black-3); position: relative; z-index: 1; } video, iframe, img { margin: 0; padding: 0; position: relative; z-index: 1; } .line { position: relative; } .line::before { position: absolute; content: ""; width: 1px; height: 100%; top: 0; left: 0; background: var(--white-4); } .line::after { position: absolute; content: ""; width: 1px; height: 100%; left: calc(50% - 1px); top: 0; background: var(--white-4); } .line-3 { position: absolute; content: ""; width: 1px; height: 100%; right: 0; top: 0; background: var(--white-4); } .shape { position: absolute; left: -90px; bottom: -350px; } @media only screen and (min-width: 768px) and (max-width: 991px) { .shape { left: 200%; bottom: 0; } } @media only screen and (max-width: 767px) { .shape { left: 70%; bottom: 0; } } .shape .primary { width: 54px; height: 56px; background-color: var(--primary); margin-top: -37px; margin-left: 24px; } .shape .secondary { width: 53px; height: 56px; background-color: var(--secondary); } .pos-inherit { position: inherit; } @media only screen and (max-width: 767px) { .g-0 { padding-right: 15px; padding-left: 15px; } br { display: none; } } .sec-title-wrapper { position: relative; z-index: 9; } .footer-line { position: relative; } .footer-line::after { position: absolute; content: ""; width: 1px; height: 500px; left: 0; bottom: -400px; background: var(--white-4); } @media (max-width: 1023px) { .footer-line::after { height: 0; } } .scroll-top { width: 50px; height: 50px; position: fixed; right: 20px; bottom: 20px; z-index: 9991; border-radius: 100px; color: var(--white); background: var(--white); -webkit-transition: all 0.3s; transition: all 0.3s; display: none; mix-blend-mode: exclusion; } .scroll-top i { font-size: 18px; color: var(--black-2); } .scroll-top:hover { color: var(--gray-2); } @media only screen and (min-width: 992px) and (max-width: 1199px) { .scroll-top { bottom: 80px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .scroll-top { right: 10px; bottom: 60px; } } @media only screen and (max-width: 767px) { .scroll-top { right: 5px; bottom: 55px; } } .logo-light { display: none; } .logo-dark { display: block; } .font-20 { font-size: 20px !important; } /*----------------------------------------*/ /* 06. THEME DARK CSS START /*----------------------------------------*/ .dark { background-color: var(--black-2); } .dark .logo-light { display: block; } .dark .logo-dark { display: none; } .dark .blog__title, .dark .blog__title-3, .dark .blog__title-2 { color: var(--white); border-color: var(--secondary); } .dark .blog__title:hover, .dark .blog__title-3:hover, .dark .blog__title-2:hover { color: var(--gray-2); } .dark .blog__meta, .dark .blog__meta-2 { color: var(--gray-2); text-transform:uppercase; } .dark .blog__meta a, .dark .blog__meta-2 a { color: var(--gray-2); } .dark .blog__meta a:hover, .dark .blog__meta-2 a:hover { color: var(--white); } .dark .line::before, .dark .line::after, .dark .line-3 { background-color: var(--bg-line); } .dark .line::after {z-index:-1} .dark p { color: var(--gray-2); } .dark .sec-title, .dark .sec-title-2, .dark .sec-title-3, .dark .sec-sub-title { color: var(--white); } .dark .blog__title, .dark .blog__title-3, .dark .blog__title-2 { color: var(--white); border-color: var(--secondary); } .dark .development__content { border-color: var(--secondary); } .dark .wc-btn-secondary { background: #c0c0c0; color: var(--black-2); } /*----------------------------------------*/ /* 07. Button CSS START /*----------------------------------------*/ .wc-btn-primary, .wc-btn-black, .wc-btn-light, .wc-btn-pink, .wc-btn-secondary { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; width: 170px; height: 170px; font-weight: 400; font-size: 16px; line-height: 1.3; text-transform: capitalize; color: var(--black-3); border: 1px solid var(--gray); border-radius: 100%; position: relative; overflow: hidden; -webkit-transition: all 0.3s; transition: all 0.3s; } @media only screen and (max-width: 767px) { .wc-btn-primary, .wc-btn-black, .wc-btn-light, .wc-btn-pink, .wc-btn-secondary { padding: 30px; } } .wc-btn-primary:hover, .wc-btn-black:hover, .wc-btn-light:hover, .wc-btn-pink:hover, .wc-btn-secondary:hover { color: var(--black-2); border: 1px solid var(--primary); } .wc-btn-primary:hover span, .wc-btn-black:hover span, .wc-btn-light:hover span, .wc-btn-pink:hover span, .wc-btn-secondary:hover span { width: 350px; height: 350px; } .wc-btn-primary i, .wc-btn-black i, .wc-btn-light i, .wc-btn-pink i, .wc-btn-secondary i { -webkit-transform: rotate(-45deg); transform: rotate(-45deg); padding-left: 5px; } .wc-btn-primary span, .wc-btn-black span, .wc-btn-light span, .wc-btn-pink span, .wc-btn-secondary span { position: absolute; content: ""; width: 20px; height: 20px; left: 0; top: 0; background-color: var(--primary); z-index: -1; border-radius: 100%; -webkit-transition: all 0.7s; transition: all 0.7s; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } .wc-btn-secondary { border: 1px solid var(--secondary); color: var(--gray-2); } .wc-btn-pink { border: 1px solid var(--secondary); color: var(--gray-2); } .wc-btn-pink:hover { border-color: var(--pink-2); } .wc-btn-pink span { background-color: var(--pink-2); } .wc-btn-light { border: 1px solid var(--secondary); color: var(--gray-2); } .wc-btn-light:hover { border-color: var(--white); } .wc-btn-light span { background-color: var(--white); } .wc-btn-black:hover { color: var(--white); border-color: var(--black-2); } .wc-btn-black span { background-color: var(--black-2); } .wc-btn-dark { display: inline-block; font-weight: 400; font-size: 15px; line-height: 1.5; text-align: center; text-transform: uppercase; color: var(--black-2); border: 1.3px solid var(--black-2); border-radius: 33px; padding: 20px 54px; -webkit-transition: all 0.3s; transition: all 0.3s; } .wc-btn-dark:hover { color: var(--black-2); background-color: var(--white); border-color: var(--white); } .btn_wrapper, #btn_wrapper { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; position: relative; height: 250px; width: 250px; border-radius: 100%; margin-left: -40px; } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .btn_wrapper, #btn_wrapper { width: 220px; height: 220px; margin-left: -25px; } } @media only screen and (min-width: 992px) and (max-width: 1199px) { .btn_wrapper, #btn_wrapper { width: 190px; height: 190px; margin-left: -10px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .btn_wrapper, #btn_wrapper { width: 180px; height: 180px; margin-left: -5px; } } @media only screen and (max-width: 767px) { .btn_wrapper, #btn_wrapper { height: 175px; width: 175px; margin-left: -2.5px; } } .btn-item { position: absolute; } @media only screen and (min-width: 768px) and (max-width: 991px) { .service__top-btn .btn_wrapper, .service__top-btn #btn_wrapper { width: 170px; height: 170px; } .service__top-btn .btn_wrapper .btn-item, .service__top-btn #btn_wrapper .btn-item { top: 0; left: 0; } } .about_btn { font-size: 20px !important; position: relative; } @media only screen and (max-width: 767px) { .about_btn { font-size: 18px !important; } } .about_btn::before { position: absolute; content: ""; width: 100%; height: 1px; bottom: -10px; left: 0; background-color: var(--black-7); } /*----------------------------------------*/ /* 08. TITLE CSS START /*----------------------------------------*/ .sec-title { font-weight: 500; font-size: 50px; line-height: 1; color: var(--black-2); } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .sec-title { font-size: 50px; } } @media only screen and (min-width: 992px) and (max-width: 1199px) { .sec-title { font-size: 45px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .sec-title { font-size: 36px; } } @media only screen and (max-width: 767px) { .sec-title { font-size: 32px; } } .sec-title-2 { font-weight: 500; font-size: 120px; line-height: 0.9; color: var(--black-2); } @media only screen and (min-width: 1400px) and (max-width: 1919px) { .sec-title-2 { font-size: 100px; } } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .sec-title-2 { font-size: 90px; } } @media only screen and (min-width: 992px) and (max-width: 1199px) { .sec-title-2 { font-size: 72px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .sec-title-2 { font-size: 60px; } } @media only screen and (max-width: 767px) { .sec-title-2 { font-size: 45px; padding-top: 50px; } } .sec-title-3 { font-weight: 500; font-size: 130px; line-height: 1; color: var(--black-2); } @media only screen and (min-width: 1400px) and (max-width: 1919px) { .sec-title-3 { font-size: 100px; } } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .sec-title-3 { font-size: 100px; } } @media only screen and (min-width: 992px) and (max-width: 1199px) { .sec-title-3 { font-size: 80px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .sec-title-3 { font-size: 60px; } } @media only screen and (max-width: 767px) { .sec-title-3 { font-size: 48px; } } .sec-title-4 { font-size: 150px; line-height: 1; color: var(--black-2); text-transform: uppercase; } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .sec-title-4 { font-size: 120px; } } @media only screen and (min-width: 992px) and (max-width: 1199px) { .sec-title-4 { font-size: 100px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .sec-title-4 { font-size: 80px; } } @media only screen and (max-width: 767px) { .sec-title-4 { font-size: 48px; } } .sec-title-4 span { padding-left: 298px; display: block; } @media only screen and (max-width: 767px) { .sec-title-4 span { padding-left: 0; } } .sec-title-4 img { margin-top: -30px; -webkit-animation: wcSpinner 3s infinite linear; animation: wcSpinner 3s infinite linear; } @media only screen and (min-width: 768px) and (max-width: 991px) { .sec-title-4 img { max-width: 90px; } } @media only screen and (max-width: 767px) { .sec-title-4 img { display: none; } } .sec-title-5 { padding-left: 98px; } @media only screen and (max-width: 767px) { .sec-title-5 { padding-left: 0; } } @media only screen and (min-width: 992px) and (max-width: 1199px) { .sec-title-5 { font-size: 120px; line-height: 8.3rem; } } .sec-title-7 { padding-left: 185px; } .sec-title-8 { font-size: 130px; line-height: 1; font-weight: 500; color: var(--black-2); text-transform: uppercase; } @media only screen and (min-width: 992px) and (max-width: 1199px) { .sec-title-8 { font-size: 100px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .sec-title-8 { font-size: 72px; } } @media only screen and (max-width: 767px) { .sec-title-8 { font-size: 60px; } } .sec-title-8 a { text-transform: capitalize; } .sec-title-16 { font-weight: 500; font-size: 120px; line-height: 0.9; color: var(--black-2); text-indent: 120px; } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .sec-title-16 { font-size: 100px; text-indent: 90px; } } @media only screen and (min-width: 992px) and (max-width: 1199px) { .sec-title-16 { font-size: 90px; text-indent: 60px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .sec-title-16 { text-indent: 60px; font-size: 72px; } } @media only screen and (max-width: 767px) { .sec-title-16 { text-indent: 20px; font-size: 48px; } } .sec-title-16 span { color: var(--black-2); position: relative; } .sec-title-16 span::after { position: absolute; content: ""; width: 100%; height: 2px; bottom: 10px; left: 0; background-color: var(--black-2); } @media only screen and (max-width: 767px) { .sec-title-16 span::after { bottom: 0; } } .sec-sub-title { font-weight: 400; font-size: 18px; line-height: 1.2; color: var(--black-3); padding-bottom: 15px; text-transform: capitalize; } .hero-title { font-weight: 500; font-size: 80px; line-height: 1; color: var(--black); } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .hero-title { font-size: 60px; } } @media only screen and (min-width: 992px) and (max-width: 1199px) { .hero-title { font-size: 60px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .hero-title { font-size: 48px; } } @media only screen and (max-width: 767px) { .hero-title { font-size: 36px; } } .title-line { overflow: hidden; } @media (min-width: 1200px) { .img-anim { overflow: hidden; position: relative; width: 100%; height: 565px; } .img-anim img { position: absolute; bottom: 0; -o-object-fit: cover; object-fit: cover; width: 100%; height: 120%; margin-left: auto; margin-right: auto; } } .dark .sec-title-4 { color: var(--white); } .dark .sec-title-4 img { -webkit-filter: invert(1); filter: invert(1); } .dark .sec-title-8 { color: var(--white); } .dark .sec-title-16 { color: var(--white); } .dark .sec-title-16 span { color: var(--white); } .dark .sec-title-16 span::after { background-color: var(--white); } /*----------------------------------------*/ /* 09. MENU CSS START /*----------------------------------------*/ .main-menu>li, .main-menu-4>li { display: inline-block; margin: 0 32px; } @media only screen and (min-width: 992px) and (max-width: 1199px) { .main-menu>li, .main-menu-4>li { margin: 0 19px; } } .main-menu>li.has-megamenu, .main-menu-4>li.has-megamenu { position: static; } .main-menu>li:hover .main-dropdown, .main-menu-4>li:hover .main-dropdown { top: 75px; opacity: 1; visibility: visible; } .main-menu>li:hover .mega-menu, .main-menu>li:hover .mega-menu-2, .main-menu-4>li:hover .mega-menu, .main-menu-4>li:hover .mega-menu-2 { top: 75px; opacity: 1; visibility: visible; } .main-menu>li>a, .main-menu-4>li>a { display: block; font-weight: bold; font-size: 18px; line-height: 16px; color: var(--white); padding: 29px 0; outline: none; text-transform: capitalize; -webkit-transform: translateY(var(--y)) translateZ(0); transform: translateY(var(--y)) translateZ(0); -webkit-transition: 0.4s ease; } .sticky-2 .lang-switch, .sticky-2 .main-menu>li>a{padding:15px 0} svg#logo {width:220px;} svg#logo #digital {transition:0.4s;} .sticky-2 svg#logo #digital {opacity: 0;transition:0.4s;} svg#logo #th {transition:0.4s;transform: translateY(0);} .sticky-2 svg#logo #th {transition:0.4s;transform: translateY(15px)} svg#logo #thlogo {transition:0.4s;transform: scale(0.8) translateY(8px);} .main-menu>li>a .menu-text, .main-menu-4>li>a .menu-text { display: -webkit-box; display: -ms-flexbox; display: flex; overflow: hidden; text-shadow: 0 16px 0 var(--white); } .main-menu>li>a .menu-text span, .main-menu-4>li>a .menu-text span { display: block; -webkit-backface-visibility: hidden; backface-visibility: hidden; font-style: normal; -webkit-transition: -webkit-transform 0.4s ease; transition: -webkit-transform 0.4s ease; transition: transform 0.4s ease; transition: transform 0.4s ease, -webkit-transform 0.4s ease; -webkit-transform: translateY(var(--m)) translateZ(0); transform: translateY(var(--m)) translateZ(0); } .main-menu>li>a .menu-text span:nth-child(1), .main-menu-4>li>a .menu-text span:nth-child(1) { -webkit-transition-delay: 0.05s; transition-delay: 0.05s; } .main-menu>li>a .menu-text span:nth-child(2), .main-menu-4>li>a .menu-text span:nth-child(2) { -webkit-transition-delay: 0.1s; transition-delay: 0.1s; } .main-menu>li>a .menu-text span:nth-child(3), .main-menu-4>li>a .menu-text span:nth-child(3) { -webkit-transition-delay: 0.15s; transition-delay: 0.15s; } .main-menu>li>a .menu-text span:nth-child(4), .main-menu-4>li>a .menu-text span:nth-child(4) { -webkit-transition-delay: 0.2s; transition-delay: 0.2s; } .main-menu>li>a .menu-text span:nth-child(5), .main-menu-4>li>a .menu-text span:nth-child(5) { -webkit-transition-delay: 0.25s; transition-delay: 0.25s; } .main-menu>li>a .menu-text span:nth-child(6), .main-menu-4>li>a .menu-text span:nth-child(6) { -webkit-transition-delay: 0.3s; transition-delay: 0.3s; } .main-menu>li>a .menu-text span:nth-child(7), .main-menu-4>li>a .menu-text span:nth-child(7) { -webkit-transition-delay: 0.35s; transition-delay: 0.35s; } .main-menu>li>a .menu-text span:nth-child(8), .main-menu-4>li>a .menu-text span:nth-child(8) { -webkit-transition-delay: 0.4s; transition-delay: 0.4s; } .main-menu>li>a .menu-text span:nth-child(9), .main-menu-4>li>a .menu-text span:nth-child(9) { -webkit-transition-delay: 0.45s; transition-delay: 0.45s; } .main-menu>li>a .menu-text span:nth-child(10), .main-menu-4>li>a .menu-text span:nth-child(10) { -webkit-transition-delay: 0.5s; transition-delay: 0.5s; } .main-menu>li>a:hover, .main-menu-4>li>a:hover { --y: -4px; } .main-menu>li>a:hover span, .main-menu-4>li>a:hover span { --m: calc(16px * -1); } .main-menu .mega-menu li a, .main-menu .mega-menu-2 li a, .main-menu-4 .mega-menu li a, .main-menu-4 .mega-menu-2 li a { color: var(--white); } .main-dropdown { position: absolute; width: 300px; left: 0; top: 85px; z-index: 9; background-color: var(--black-2); text-align: left; padding: 15px 0; opacity: 0; visibility: hidden; -webkit-transition: all 0.3s; transition: all 0.3s; } .main-dropdown .sub-dropdown { position: absolute; width: 300px; left: 100%; top: 0; z-index: 9; background-color: var(--black-2); text-align: left; padding: 15px 0; opacity: 0; visibility: hidden; -webkit-transition: all 0.3s; transition: all 0.3s; } .main-dropdown li { display: block; margin: 0; padding: 0; } .main-dropdown li:hover .sub-dropdown { opacity: 1; visibility: visible; } .main-dropdown li a { color: var(--white); display: block; padding: 10px 20px; text-transform: capitalize; } .main-dropdown li a .menu-text { text-shadow: 0 16px 0 var(--white); } .main-dropdown li a:hover { letter-spacing: 1px; } .mega-menu, .mega-menu-2 { position: absolute; width: 100%; left: 0; top: 90px; z-index: 9; background-color: var(--black-2); text-align: left; padding: 40px 200px; display: -ms-grid; display: grid; -ms-grid-columns: 1fr 30px 1fr 30px 1fr 30px 1fr 30px 1fr; grid-template-columns: repeat(5, 1fr); grid-gap: 30px; opacity: 0; visibility: hidden; -webkit-transition: all 0.2s; transition: all 0.2s; } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .mega-menu, .mega-menu-2 { padding: 40px 100px; } } .mega-menu li, .mega-menu-2 li { padding: 0; margin: 0; } .mega-menu li a, .mega-menu-2 li a { color: var(--white); font-size: 20px; font-weight: 500; padding: 10px; margin-bottom: 10px; text-transform: capitalize; } .mega-menu li a .menu-text, .mega-menu-2 li a .menu-text { text-shadow: 0 16px 0 var(--white); } .mega-menu li a:hover, .mega-menu-2 li a:hover { letter-spacing: 1px; } .mega-menu li a:not([href]):not([class]), .mega-menu-2 li a:not([href]):not([class]) { color: var(--white); } .mega-menu li a:not([href]):not([class]):hover, .mega-menu-2 li a:not([href]):not([class]):hover { letter-spacing: 0; background-color: transparent; } .mega-menu li ul, .mega-menu-2 li ul { text-align: left; } .mega-menu li ul li, .mega-menu-2 li ul li { display: block; margin: 0; } .mega-menu li ul li a, .mega-menu-2 li ul li a { font-weight: 400; font-size: 16px; padding: 10px 12px; display: block; margin-bottom: 0; text-transform: capitalize; } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .mega-menu li ul li a, .mega-menu-2 li ul li a { padding: 6px 12px; } } .mega-menu-2 { width: 1160px; padding: 40px; left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%); -ms-grid-columns: 1fr 30px 1fr 30px 1fr 30px 1fr; grid-template-columns: repeat(4, 1fr); } .menu-heading { font-size: 20px; font-weight: 500; color: var(--white); padding-bottom: 10px; text-transform: capitalize; } .footer-menu, .footer-menu-2 { text-align: right; } @media only screen and (max-width: 767px) { .footer-menu, .footer-menu-2 { text-align: center; } } .footer-menu li, .footer-menu-2 li { display: inline-block; padding-left: 80px; } @media only screen and (min-width: 1400px) and (max-width: 1919px) { .footer-menu li, .footer-menu-2 li { padding-left: 60px; } } @media only screen and (min-width: 992px) and (max-width: 1199px) { .footer-menu li, .footer-menu-2 li { padding-left: 20px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .footer-menu li, .footer-menu-2 li { padding-left: 20px; } } @media only screen and (max-width: 767px) { .footer-menu li, .footer-menu-2 li { padding-left: 8px; padding-right: 8px; } } .footer-menu li a, .footer-menu-2 li a { display: block; font-weight: 400; font-size: 16px; line-height: 1; color: var(--black-2); text-transform: capitalize; } .footer-menu li a .menu-text, .footer-menu-2 li a .menu-text { display: -webkit-box; display: -ms-flexbox; display: flex; overflow: hidden; text-shadow: 0 16px 0 var(--black-2); } .footer-menu li a .menu-text span, .footer-menu-2 li a .menu-text span { display: block; -webkit-backface-visibility: hidden; backface-visibility: hidden; font-style: normal; -webkit-transition: -webkit-transform 0.4s ease; transition: -webkit-transform 0.4s ease; transition: transform 0.4s ease; transition: transform 0.4s ease, -webkit-transform 0.4s ease; -webkit-transform: translateY(var(--m)) translateZ(0); transform: translateY(var(--m)) translateZ(0); } .footer-menu li a .menu-text span:nth-child(1), .footer-menu-2 li a .menu-text span:nth-child(1) { -webkit-transition-delay: 0.05s; transition-delay: 0.05s; } .footer-menu li a .menu-text span:nth-child(2), .footer-menu-2 li a .menu-text span:nth-child(2) { -webkit-transition-delay: 0.1s; transition-delay: 0.1s; } .footer-menu li a .menu-text span:nth-child(3), .footer-menu-2 li a .menu-text span:nth-child(3) { -webkit-transition-delay: 0.15s; transition-delay: 0.15s; } .footer-menu li a .menu-text span:nth-child(4), .footer-menu-2 li a .menu-text span:nth-child(4) { -webkit-transition-delay: 0.2s; transition-delay: 0.2s; } .footer-menu li a .menu-text span:nth-child(5), .footer-menu-2 li a .menu-text span:nth-child(5) { -webkit-transition-delay: 0.25s; transition-delay: 0.25s; } .footer-menu li a .menu-text span:nth-child(6), .footer-menu-2 li a .menu-text span:nth-child(6) { -webkit-transition-delay: 0.3s; transition-delay: 0.3s; } .footer-menu li a .menu-text span:nth-child(7), .footer-menu-2 li a .menu-text span:nth-child(7) { -webkit-transition-delay: 0.35s; transition-delay: 0.35s; } .footer-menu li a .menu-text span:nth-child(8), .footer-menu-2 li a .menu-text span:nth-child(8) { -webkit-transition-delay: 0.4s; transition-delay: 0.4s; } .footer-menu li a .menu-text span:nth-child(9), .footer-menu-2 li a .menu-text span:nth-child(9) { -webkit-transition-delay: 0.45s; transition-delay: 0.45s; } .footer-menu li a .menu-text span:nth-child(10), .footer-menu-2 li a .menu-text span:nth-child(10) { -webkit-transition-delay: 0.5s; transition-delay: 0.5s; } .footer-menu li a:hover, .footer-menu-2 li a:hover { --y: -4px; } .footer-menu li a:hover span, .footer-menu-2 li a:hover span { --m: calc(16px * -1); } @media only screen and (min-width: 768px) and (max-width: 991px) { .footer-menu-2 { margin-bottom: 30px; } } @media only screen and (max-width: 767px) { .footer-menu-2 { margin-bottom: 30px; } } .footer-menu-2 li a { color: var(--white); text-transform: uppercase; } .footer-menu-2 li a .menu-text { text-shadow: 0 16px 0 var(--white); } /* mean menu customize */ .offcanvas__menu-wrapper.mean-container { padding-top: 160px; } @media only screen and (min-width: 1400px) and (max-width: 1919px) { .offcanvas__menu-wrapper.mean-container { padding-top: 92px; } } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .offcanvas__menu-wrapper.mean-container { padding-top: 93px; } } @media only screen and (min-width: 992px) and (max-width: 1199px) { .offcanvas__menu-wrapper.mean-container { padding-top: 93px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .offcanvas__menu-wrapper.mean-container { padding-top: 60px; } } @media only screen and (max-width: 767px) { .offcanvas__menu-wrapper.mean-container { padding-top: 40px; } } .offcanvas__menu-wrapper.mean-container .mean-nav>ul { padding: 0; margin: 0; width: 100%; list-style-type: none; display: block !important; } .offcanvas__menu-wrapper.mean-container .mean-nav>ul>li:last-child>a { border-bottom: 1px solid var(--black-4); } .offcanvas__menu-wrapper.mean-container .mean-nav { background: none; margin-top: 0; } .offcanvas__menu-wrapper.mean-container .mean-nav ul li a { width: 100%; padding: 20px 0 20px 100px; font-weight: 400; font-size: 80px; line-height: 1; color: var(--white); text-transform: capitalize; border-top: 1px solid var(--black-4); display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: center; -ms-flex-align: center; align-items: center; outline: none; -webkit-transform: translateY(var(--y)) translateZ(0); transform: translateY(var(--y)) translateZ(0); -webkit-transition: -webkit-transform 0.4s ease, -webkit-box-shadow 0.4s ease; transition: -webkit-transform 0.4s ease, -webkit-box-shadow 0.4s ease; transition: transform 0.4s ease, box-shadow 0.4s ease; transition: transform 0.4s ease, box-shadow 0.4s ease, -webkit-transform 0.4s ease, -webkit-box-shadow 0.4s ease; } .offcanvas__menu-wrapper.mean-container .mean-nav ul li a .menu-text { display: -webkit-box; display: -ms-flexbox; display: flex; overflow: hidden; text-shadow: 0 80px 0 var(--white); } .offcanvas__menu-wrapper.mean-container .mean-nav ul li a .menu-text span { display: block; -webkit-backface-visibility: hidden; backface-visibility: hidden; font-style: normal; -webkit-transition: -webkit-transform 0.4s ease; transition: -webkit-transform 0.4s ease; transition: transform 0.4s ease; transition: transform 0.4s ease, -webkit-transform 0.4s ease; -webkit-transform: translateY(var(--m)) translateZ(0); transform: translateY(var(--m)) translateZ(0); } .offcanvas__menu-wrapper.mean-container .mean-nav ul li a .menu-text span:nth-child(1) { -webkit-transition-delay: 0.0333333333s; transition-delay: 0.0333333333s; } .offcanvas__menu-wrapper.mean-container .mean-nav ul li a .menu-text span:nth-child(2) { -webkit-transition-delay: 0.0666666667s; transition-delay: 0.0666666667s; } .offcanvas__menu-wrapper.mean-container .mean-nav ul li a .menu-text span:nth-child(3) { -webkit-transition-delay: 0.1s; transition-delay: 0.1s; } .offcanvas__menu-wrapper.mean-container .mean-nav ul li a .menu-text span:nth-child(4) { -webkit-transition-delay: 0.1333333333s; transition-delay: 0.1333333333s; } .offcanvas__menu-wrapper.mean-container .mean-nav ul li a .menu-text span:nth-child(5) { -webkit-transition-delay: 0.1666666667s; transition-delay: 0.1666666667s; } .offcanvas__menu-wrapper.mean-container .mean-nav ul li a .menu-text span:nth-child(6) { -webkit-transition-delay: 0.2s; transition-delay: 0.2s; } .offcanvas__menu-wrapper.mean-container .mean-nav ul li a .menu-text span:nth-child(7) { -webkit-transition-delay: 0.2333333333s; transition-delay: 0.2333333333s; } .offcanvas__menu-wrapper.mean-container .mean-nav ul li a .menu-text span:nth-child(8) { -webkit-transition-delay: 0.2666666667s; transition-delay: 0.2666666667s; } .offcanvas__menu-wrapper.mean-container .mean-nav ul li a .menu-text span:nth-child(9) { -webkit-transition-delay: 0.3s; transition-delay: 0.3s; } .offcanvas__menu-wrapper.mean-container .mean-nav ul li a .menu-text span:nth-child(10) { -webkit-transition-delay: 0.3333333333s; transition-delay: 0.3333333333s; } .offcanvas__menu-wrapper.mean-container .mean-nav ul li a:hover { --y: -0px; background-color: transparent; } .offcanvas__menu-wrapper.mean-container .mean-nav ul li a:hover span { --m: calc(80px * -1); } @media only screen and (min-width: 1400px) and (max-width: 1919px) { .offcanvas__menu-wrapper.mean-container .mean-nav ul li a { font-size: 60px; padding-left: 60px; } } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .offcanvas__menu-wrapper.mean-container .mean-nav ul li a { font-size: 48px; padding-left: 50px; } } @media only screen and (min-width: 992px) and (max-width: 1199px) { .offcanvas__menu-wrapper.mean-container .mean-nav ul li a { font-size: 40px; padding-left: 30px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .offcanvas__menu-wrapper.mean-container .mean-nav ul li a { font-size: 30px; padding-left: 20px; } } @media only screen and (max-width: 767px) { .offcanvas__menu-wrapper.mean-container .mean-nav ul li a { font-size: 20px; padding-left: 15px; } } .offcanvas__menu-wrapper.mean-container .mean-nav ul li a.mean-expand { width: 60px; height: 96px; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; font-weight: 300; border: none !important; } @media only screen and (min-width: 1400px) and (max-width: 1919px) { .offcanvas__menu-wrapper.mean-container .mean-nav ul li a.mean-expand { height: 76px; } } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .offcanvas__menu-wrapper.mean-container .mean-nav ul li a.mean-expand { height: 64px; } } @media only screen and (min-width: 992px) and (max-width: 1199px) { .offcanvas__menu-wrapper.mean-container .mean-nav ul li a.mean-expand { height: 57px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .offcanvas__menu-wrapper.mean-container .mean-nav ul li a.mean-expand { height: 46px; width: 40px; } } @media only screen and (max-width: 767px) { .offcanvas__menu-wrapper.mean-container .mean-nav ul li a.mean-expand { height: 36px; width: 36px; padding: 11px 12px 13px !important; } } .offcanvas__menu-wrapper.mean-container .mean-nav ul li a.mean-expand:hover { background: var(--secondary); opacity: 1; } .offcanvas__menu-wrapper.mean-container .mean-nav ul li li:first-child { border-top: 1px solid var(--black-4); } .offcanvas__menu-wrapper.mean-container .mean-nav ul li li a { font-size: 24px; text-transform: capitalize; border-top: none !important; padding: 20px 0 20px 150px; -webkit-transition: all 0.3s; transition: all 0.3s; } .offcanvas__menu-wrapper.mean-container .mean-nav ul li li a:hover { letter-spacing: 1px; } @media only screen and (min-width: 1400px) and (max-width: 1919px) { .offcanvas__menu-wrapper.mean-container .mean-nav ul li li a { padding-left: 90px; } } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .offcanvas__menu-wrapper.mean-container .mean-nav ul li li a { padding-left: 80px; } } @media only screen and (min-width: 992px) and (max-width: 1199px) { .offcanvas__menu-wrapper.mean-container .mean-nav ul li li a { padding-left: 60px; font-size: 24px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .offcanvas__menu-wrapper.mean-container .mean-nav ul li li a { font-size: 20px; padding: 15px 0 15px 30px; } } @media only screen and (max-width: 767px) { .offcanvas__menu-wrapper.mean-container .mean-nav ul li li a { font-size: 18px; padding: 15px 0 15px 30px; } } .offcanvas__menu-wrapper.mean-container .mean-nav ul li li a.mean-expand { height: 40px; } @media only screen and (min-width: 768px) and (max-width: 991px) { .offcanvas__menu-wrapper.mean-container .mean-nav ul li li a.mean-expand { height: 25px; } } @media only screen and (max-width: 767px) { .offcanvas__menu-wrapper.mean-container .mean-nav ul li li a.mean-expand { height: 23px; } } .offcanvas__menu-wrapper.mean-container .mean-nav ul li li li:last-child { border-bottom: 1px solid var(--black-4); } .offcanvas__menu-wrapper.mean-container .mean-nav ul li li li a { padding-left: 180px; } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .offcanvas__menu-wrapper.mean-container .mean-nav ul li li li a { padding-left: 120px; } } @media only screen and (min-width: 992px) and (max-width: 1199px) { .offcanvas__menu-wrapper.mean-container .mean-nav ul li li li a { padding-left: 40px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .offcanvas__menu-wrapper.mean-container .mean-nav ul li li li a { padding-left: 30px; } } @media only screen and (max-width: 767px) { .offcanvas__menu-wrapper.mean-container .mean-nav ul li li li a { padding-left: 30px; } } .offcanvas__menu-wrapper.mean-container .mean-bar { padding: 0; background: none; } .offcanvas__menu-wrapper.mean-container a.meanmenu-reveal { display: none !important; } .header__area-2 .main-dropdown { background-color: var(--white); } .header__area-2 .main-dropdown li a { color: var(--black-2); } .header__area-2 .main-dropdown li a:hover { letter-spacing: 0; } .header__area-2 .main-dropdown li a .menu-text { text-shadow: 0 16px 0 var(--black-2); } .header__area-2 .main-dropdown .sub-dropdown { background-color: var(--white); } .header__area-2 .mega-menu, .header__area-2 .mega-menu-2 { background-color: var(--white); } .header__area-2 .mega-menu li a, .header__area-2 .mega-menu-2 li a { color: var(--black-2); } .header__area-2 .mega-menu li a:hover, .header__area-2 .mega-menu-2 li a:hover { letter-spacing: 1px; } .header__area-2 .mega-menu li a:not([href]):not([class]), .header__area-2 .mega-menu-2 li a:not([href]):not([class]) { color: var(--black-2); } .header__area-2 .mega-menu li a .menu-text, .header__area-2 .mega-menu-2 li a .menu-text { text-shadow: 0 16px 0 var(--black-2); } .dark .menu-heading { color: var(--black-2); } /*----------------------------------------*/ /* 11. CURSOR CSS START /*----------------------------------------*/ .cursor { position: fixed; left: 0; pointer-events: none; font-weight: 500; font-size: 16px; line-height: 23px; color: var(--white); background: var(--black-2); text-transform: capitalize; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; width: 100px; height: 100px; border-radius: 100%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); z-index: 999; opacity: 0; mix-blend-mode: hard-light; -webkit-transition: all 0.3s; transition: all 0.3s; } .cursor.large { width: 180px; height: 180px; text-align: center; font-size: 19px; font-weight: 400; } .cursor1 { position: fixed; width: 40px; height: 40px; border: 1px solid var(--primary); border-radius: 50%; left: 0; top: 0; pointer-events: none; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); -webkit-transition: 0.15s; transition: 0.15s; z-index: 999; mix-blend-mode: difference; } @media (max-width: 1200px) { .cursor1 { display: none; } } .cursor1.hide { opacity: 0; visibility: hidden; } .cursor2 { position: fixed; width: 8px; height: 8px; background-color: var(--primary); border-radius: 50%; left: 0; top: 0; pointer-events: none; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); -webkit-transition: 0.2s; transition: 0.2s; z-index: 999; mix-blend-mode: difference; } @media (max-width: 1200px) { .cursor2 { display: none; } } .cursor2.hide { opacity: 0; visibility: hidden; } .cursor2.circle { width: 60px; height: 60px; } /*----------------------------------------*/ /* 12. HEADER CSS START /*----------------------------------------*/ .header__area { position: fixed; width: 100px; height: 100%; left: 0; top: 0; z-index: 9991; border-right: 1px solid rgba(240, 240, 240, 0.07); mix-blend-mode: exclusion; -webkit-transition: all 0.5s; transition: all 0.5s; } @media only screen and (min-width: 1400px) and (max-width: 1919px) { .header__area { width: 62px; } } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .header__area { width: 62px; } } @media only screen and (min-width: 992px) and (max-width: 1199px) { .header__area { padding: 0 15px; width: 100%; height: auto; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .header__area { padding: 0 15px; width: 100%; height: auto; } } @media only screen and (max-width: 767px) { .header__area { padding: 0 15px; width: 100%; height: auto; } } .header__area button { display: block; margin-top: -58px; padding: 20px; } @media only screen and (min-width: 992px) and (max-width: 1199px) { .header__area button { margin-top: 0; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .header__area button { margin-top: 0; } } @media only screen and (max-width: 767px) { .header__area button { margin-top: 0; } } .header__area-2 { position: fixed; width: 100%; top: 0; z-index: 99; } .header__inner-2, .header__inner-3 { display: -ms-grid; display: grid; -ms-grid-columns: 150px auto 150px; grid-template-columns: 150px auto 150px; padding: 0 30px; } @media (max-width: 1199px) { .header__area-2.sticky-2 { background-color: #000; transition: background-color 0.3s ease; background-blend-mode:initial; mix-blend-mode: initial; } .header__inner-2, .header__inner-3 { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: center; -ms-flex-align: center; align-items: center; padding: 3px 15px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .header__inner-2, .header__inner-3 { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: center; -ms-flex-align: center; align-items: center; padding: 20px; } } @media only screen and (max-width: 767px) { .header__inner-2, .header__inner-3 { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: center; -ms-flex-align: center; align-items: center; padding: 3px 15px; } } .header__nav-2 { text-align: right; } @media only screen and (min-width: 992px) and (max-width: 1199px) { .header__nav-2 { display: none; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .header__nav-2 { display: none; } } @media only screen and (max-width: 767px) { .header__nav-2 { display: none; } } @media only screen and (min-width: 992px) and (max-width: 1199px) { .header__nav-icon { grid-column: -1; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .header__nav-icon { grid-column: -1; } } @media only screen and (max-width: 767px) { .header__nav-icon { grid-column: -1; } } .header__nav-icon-2 { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; height: 100%; } .header__nav-icon-2 .menu-icon-2::after { position: absolute; content: ""; width: 180px; height: 180px; right: -60px; top: -60px; border: 1px solid var(--black-4); border-radius: 100%; -webkit-transition: all 0.3s; transition: all 0.3s; } .header__logo-2 { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .dark .menu-icon img { -webkit-filter: invert(1); filter: invert(1); } /*----------------------------------------*/ /* 13. OFFCANVES CSS START /*----------------------------------------*/ .offcanvas__area { background-color: var(--black-2); position: fixed; width: 100%; height: 100vh; left: 0; top: 0; z-index: 9999; opacity: 0; visibility: hidden; -webkit-transition: all 0.3s; transition: all 0.3s; } .offcanvas__body { display: -ms-grid; display: grid; -ms-grid-columns: 0.9fr 3fr 1.3fr; grid-template-columns: 0.9fr 3fr 1.3fr; height: 100%; } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .offcanvas__body { -ms-grid-columns: 1.2fr 3fr 1.5fr; grid-template-columns: 1.2fr 3fr 1.5fr; } } @media only screen and (min-width: 992px) and (max-width: 1199px) { .offcanvas__body { -ms-grid-columns: 1.2fr 2fr 1.5fr; grid-template-columns: 1.2fr 2fr 1.5fr; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .offcanvas__body { -ms-grid-columns: 1.2fr 2.3fr 1.8fr; grid-template-columns: 1.2fr 2.3fr 1.8fr; } } @media only screen and (max-width: 767px) { .offcanvas__body { -ms-grid-columns: 1fr; grid-template-columns: 1fr; } } .offcanvas__left { /* display: -ms-grid; display: grid; -ms-grid-rows: 0.5fr 2.1fr 1fr; grid-template-rows: 0.5fr 2.1fr 1fr;*/ border-right: 1px solid #2d2d2d; min-width:440px; padding-right:15px; } @media only screen and (max-width: 767px) { .offcanvas__left { display: none; } } .offcanvas__mid { overflow: hidden; overflow-y: auto; } @media only screen and (max-width: 767px) { .offcanvas__mid { margin-top: 75px; } } .offcanvas__mid::-webkit-scrollbar { width: 5px; } .offcanvas__mid::-webkit-scrollbar-track { -webkit-box-shadow: inset 0 0 5px var(--black); box-shadow: inset 0 0 5px var(--black); border-radius: 10px; } .offcanvas__mid::-webkit-scrollbar-thumb { background: var(--primary); border-radius: 10px; } .offcanvas__right { background-color: var(--black-4); padding: 0 50px; position: relative; } @media only screen and (min-width: 1400px) and (max-width: 1919px) { .offcanvas__right { padding: 0 30px; } } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .offcanvas__right { padding: 0 30px; } } @media only screen and (min-width: 992px) and (max-width: 1199px) { .offcanvas__right { padding: 0 30px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .offcanvas__right { padding: 0 15px; } } @media only screen and (max-width: 767px) { .offcanvas__right { display: none; } } .offcanvas__right .shape-1 { position: absolute; bottom: 0; left: 125px; } @media only screen and (min-width: 1400px) and (max-width: 1919px) { .offcanvas__right .shape-1 { left: 20px; } } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .offcanvas__right .shape-1 { left: 0; } } @media only screen and (min-width: 992px) and (max-width: 1199px) { .offcanvas__right .shape-1 { left: 0; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .offcanvas__right .shape-1 { left: 0; } } .offcanvas__right .shape-2 { position: absolute; bottom: 90px; right: 110px; } @media only screen and (min-width: 768px) and (max-width: 991px) { .offcanvas__right .shape-2 { right: 30px; } } .offcanvas__logo { padding: 55px 0 55px 50px; border-bottom: 1px solid var(--black-4); opacity:0; } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .offcanvas__logo { padding: 30px 0 30px 50px; } } @media only screen and (min-width: 992px) and (max-width: 1199px) { .offcanvas__logo { padding: 30px 0 30px 15px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .offcanvas__logo { padding: 30px 0 30px 15px; } } .offcanvas__social { padding-left: 50px; /* padding-top: 220px;*/ border-bottom: 1px solid var(--black-4); } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .offcanvas__social { padding-left: 50px; padding-top: 30px; } } @media only screen and (min-width: 992px) and (max-width: 1199px) { .offcanvas__social { padding-left: 30px; padding-top: 50px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .offcanvas__social { padding-left: 15px; padding-top: 50px; } } .offcanvas__social .social-title { font-weight: 500; font-size: 24px; line-height: 1.5; color: var(--white); padding-top: 30px; } @media only screen and (min-width: 768px) and (max-width: 991px) { .offcanvas__social .social-title { font-size: 20px; } } .offcanvas__social ul li { padding-bottom: 2px; padding-top: 20px; } .offcanvas__social .follow li { padding-bottom: 10px; padding-top: 0px; } @media only screen and (min-width: 768px) and (max-width: 991px) { .offcanvas__social ul li { padding-bottom: 5px; } } .offcanvas__social ul li a { font-weight: 200; font-size: 18px; line-height: 1.5; color: var(--white); } .offcanvas__social ul li a:hover { color: var(--gray-2); } @media only screen and (min-width: 768px) and (max-width: 991px) { .offcanvas__social ul li a { font-size: 16px; } } .offcanvas__links { padding-left: 50px; padding-top: 110px; } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .offcanvas__links { padding-left: 30px; padding-top: 30px; } } @media only screen and (min-width: 992px) and (max-width: 1199px) { .offcanvas__links { padding-left: 30px; padding-top: 40px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .offcanvas__links { padding-left: 15px; padding-top: 40px; } } .offcanvas__links ul li { padding-bottom: 2px; } .offcanvas__links ul li a { font-weight: 400; font-size: 18px; line-height: 1.5; color: var(--white); } .offcanvas__links ul li a:hover { color: var(--gray-2); } .offcanvas__close { position: absolute; right: 14px; top: 39px; } @media only screen and (max-width: 767px) { .offcanvas__close { right: 15px; top: 15px; } } .offcanvas__close button { font-size: 30px; width: 60px; height: 60px; color: var(--white); background: #232323; border-radius: 100%; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-transition: all 0.3s; transition: all 0.3s; cursor:pointer; } .offcanvas__close button:hover { color: var(--gray-2); } @media only screen and (max-width: 767px) { .offcanvas__close button { font-size: 24px; width: 48px; height: 48px; right: 14px; top: 39px; } } /*----------------------------------------*/ /* 14. HERO CSS START /*----------------------------------------*/ .hero__area { background-color: var(--black); position: relative; overflow: hidden; } .hero__area::after { position: absolute; content: ""; width: 100%; height: 100%; left: 0; top: 0; background-color: rgba(0, 0, 0, 0.8); } .hero__area .hero1_bg { position: absolute; bottom: 0; z-index: 0; left: 0; width: 100%; height: auto; -webkit-animation: wcRotate 18s infinite linear; animation: wcRotate 18s infinite linear; } .hero__content-wrapper { display: -webkit-box; display: -ms-flexbox; display: flex; width: 100vw; height: 100vh; position: absolute; pointer-events: none; left: 0; top: 0; z-index: 1; } .hero__content-wrapper .text { mix-blend-mode: difference; opacity: 0; -webkit-filter: blur(10px); filter: blur(10px); } .hero__plane { width: 100%; height: 100vh; } .hero__plane img { display: none; } .hero__inner-2 { padding: 220px 100px 0; } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .hero__inner-2 { padding: 140px 100px 0; } } @media only screen and (min-width: 992px) and (max-width: 1199px) { .hero__inner-2 { padding: 120px 50px 60px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .hero__inner-2 { padding: 160px 30px 60px; } } @media only screen and (max-width: 767px) { .hero__inner-2 { padding: 120px 15px 60px; } } .hero__inner-3 { position: relative; } .hero__inner-3 .scroll-down { margin-top: 100px; } @media only screen and (min-width: 992px) and (max-width: 1199px) { .hero__inner-3 .scroll-down { margin-top: 40px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .hero__inner-3 .scroll-down { margin-top: 0; } } @media only screen and (max-width: 767px) { .hero__inner-3 .scroll-down { display: none; } } .hero__inner-3 .scroll-down button { border: 1px solid var(--gray-3); padding: 25px 10px; border-radius: 30px; -webkit-animation: wcSlideBottom 7s infinite linear; animation: wcSlideBottom 7s infinite linear; } @media only screen and (min-width: 768px) and (max-width: 991px) { .hero__inner-3 .scroll-down button { border-color: var(--white); } .hero__inner-3 .scroll-down button img { -webkit-filter: invert(1); filter: invert(1); } } .hero__text-2 { background-image: url(../imgs/icon/7.png); background-repeat: no-repeat; background-position: 64% 58%; padding-left: 32%; -webkit-transform: translateY(-30%); transform: translateY(-30%); } @media only screen and (min-width: 1400px) and (max-width: 1919px) { .hero__text-2 { padding-left: 30%; -webkit-transform: translateY(-30%); transform: translateY(-30%); } } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .hero__text-2 { padding-left: 20%; } } @media only screen and (min-width: 992px) and (max-width: 1199px) { .hero__text-2 { padding-left: 15%; -webkit-transform: translateY(-30px); transform: translateY(-30px); } } @media only screen and (min-width: 768px) and (max-width: 991px) { .hero__text-2 { padding-left: 5%; -webkit-transform: translateY(-20px); transform: translateY(-20px); } } @media only screen and (max-width: 767px) { .hero__text-2 { padding-left: 0; -webkit-transform: translateY(0); transform: translateY(0); } } .hero__text-2 p { max-width: 330px; font-weight: 400; font-size: 18px; line-height: 1.4; color: var(--white); padding-bottom: 5px; } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .hero__text-2 p { max-width: 380px; } } @media only screen and (min-width: 992px) and (max-width: 1199px) { .hero__text-2 p { padding-bottom: 30px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .hero__text-2 p { padding-bottom: 40px; } } @media only screen and (max-width: 767px) { .hero__text-2 p { padding-bottom: 40px; } } .hero__text-3 { max-width: 320px; padding-top: 90px; position: relative; z-index: 9; } @media only screen and (min-width: 1400px) and (max-width: 1919px) { .hero__text-3 { -webkit-transform: translateY(-30%); transform: translateY(-30%); } } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .hero__text-3 { padding-top: 50px; } } @media only screen and (min-width: 992px) and (max-width: 1199px) { .hero__text-3 { padding-top: 20px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .hero__text-3 { padding-bottom: 80px; padding-top: 20px; } } @media only screen and (max-width: 767px) { .hero__text-3 { padding-bottom: 30px; } } .hero__text-3 p { font-size: 18px; line-height: 1.4; } .hero__content { padding-top: 200px; padding-bottom: 80px; position: relative; z-index: 1; } @media only screen and (min-width: 1400px) and (max-width: 1919px) { .hero__content { padding-top: 80px; padding-bottom: 50px; } } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .hero__content { padding-top: 80px; padding-bottom: 50px; } } @media only screen and (min-width: 992px) and (max-width: 1199px) { .hero__content { padding-top: 120px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .hero__content { padding-top: 125px; } } @media only screen and (max-width: 767px) { .hero__content { padding-top: 150px; } } .hero__content a { display: inline-block; max-width: 300px; font-weight: 400; font-size: 20px; line-height: 1.5; color: var(--white); padding-bottom: 15px; border-bottom: 1px solid var(--white); position: relative; -webkit-transition: all 0.3s; transition: all 0.3s; overflow: hidden; } .hero__content a:hover i { -webkit-transform: translate(20px, -20px) rotate(-45deg); transform: translate(20px, -20px) rotate(-45deg); } .hero__content a:hover span::after { opacity: 1; visibility: visible; -webkit-transform: translate(20px, -20px) rotate(-45deg); transform: translate(20px, -20px) rotate(-45deg); } .hero__content a span { position: absolute; top: 0; right: 0; } .hero__content a span i { -webkit-transform: translate(0, 0) rotate(-45deg); transform: translate(0, 0) rotate(-45deg); -webkit-transition: all 0.3s; transition: all 0.3s; } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .hero__content img { max-width: 120px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .hero__content img { max-width: 120px; } } @media only screen and (max-width: 767px) { .hero__content img { max-width: 60px; } } .hero__content .experience { position: absolute; right: 30px; bottom: 70px; } @media only screen and (min-width: 768px) and (max-width: 991px) { .hero__content .experience { bottom: 60px; } } @media only screen and (max-width: 767px) { .hero__content .experience { position: unset; } } .hero__content .experience .title { font-weight: 400; font-size: 50px; line-height: 1.3; color: var(--white); } .hero__content .experience p { font-weight: 400; font-size: 18px; line-height: 1.4; color: var(--white); } .hero__title { font-weight: 500; font-size: 140px; line-height: 1; color: var(--white); margin-top: 55px; position: relative; } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .hero__title { font-size: 100px; line-height: 0.9; } } @media only screen and (min-width: 992px) and (max-width: 1199px) { .hero__title { font-size: 100px; line-height: 0.9; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .hero__title { font-size: 80px; } } @media only screen and (max-width: 767px) { .hero__title { font-size: 48px; } } /*.hero__title::after { position: absolute; content: "Pro"; width: 70px; height: 45px; right: -80px; top: 70px; border: 2px solid var(--white); border-radius: 15px; font-weight: 600; font-size: 24px; line-height: 1.3; color: var(--white); text-align: center; padding-top: 4px; }*/ @media only screen and (min-width: 1200px) and (max-width: 1399px) { .hero__title::after { right: -30px; top: 35px; } } @media only screen and (min-width: 992px) and (max-width: 1199px) { .hero__title::after { right: 60px; top: 35px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .hero__title::after { right: 95px; top: 30px; } } @media only screen and (max-width: 767px) { .hero__title::after { right: 0; top: -40px; } } .hero__title-wrapper { max-width: 990px; position: relative; margin-bottom: 105px; } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .hero__title-wrapper { max-width: 770px; } } @media only screen and (min-width: 992px) and (max-width: 1199px) { .hero__title-wrapper { max-width: 800px; margin-bottom: 20px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .hero__title-wrapper { margin-bottom: 50px; } } @media only screen and (max-width: 767px) { .hero__title-wrapper { margin-bottom: 0; } } .hero__sub-title { font-weight: 400; font-size: 18px; line-height: 1.4; color: var(--gray-3); max-width: 410px; position: absolute; right: 60px; bottom: -20px; } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .hero__sub-title { bottom: -70px; right: -30px; } } @media only screen and (min-width: 992px) and (max-width: 1199px) { .hero__sub-title { bottom: -10px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .hero__sub-title { font-size: 16px; bottom: -10px; right: 30px; } } @media only screen and (max-width: 767px) { .hero__sub-title { position: unset; padding-top: 15px; } } .hero__sub-title span { color: var(--white); } .hero__about-content { padding-top: 170px; } @media only screen and (max-width: 767px) { .hero__about-content { padding-top: 170px; } } .hero__about-content .hero-title { padding-bottom: 60px; } @media only screen and (max-width: 767px) { .hero__about-content .hero-title { padding-bottom: 30px; } } .hero__about-info { display: -ms-grid; display: grid; -ms-grid-columns: 1fr 30px 2.5fr 30px 2.5fr; grid-template-columns: 1fr 2.5fr 2.5fr; padding-bottom: 80px; grid-gap: 30px; } @media only screen and (min-width: 992px) and (max-width: 1199px) { .hero__about-info { -ms-grid-columns: 1fr 30px 2.5fr 30px 2fr; grid-template-columns: 1fr 2.5fr 2fr; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .hero__about-info { -ms-grid-columns: 1fr 20px 2.5fr 20px 1fr; grid-template-columns: 1fr 2.5fr 1fr; grid-gap: 20px; padding-bottom: 70px; } } @media only screen and (max-width: 767px) { .hero__about-info { padding-bottom: 60px; } } .hero__about-text { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } @media only screen and (max-width: 767px) { .hero__about-text { grid-column: 1/-1; -ms-grid-row: 1; grid-row: 1; margin-bottom: 20px; } } .hero__about-text p { font-size: 18px; line-height: 1.4; padding-left: 80px; } @media only screen and (min-width: 992px) and (max-width: 1199px) { .hero__about-text p { padding-left: 20px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .hero__about-text p { padding-left: 0; } } @media only screen and (max-width: 767px) { .hero__about-text p { padding-left: 0; } } .hero__about-award { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; -webkit-box-align: center; -ms-flex-align: center; align-items: center; position: relative; } .hero__about-award::before { position: absolute; content: ""; left: 75px; top: 50%; width: 250px; height: 1px; background-color: var(--white-4); } .hero__about-award img { z-index:0; } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .hero__about-award::before { left: 30px; } } @media only screen and (min-width: 992px) and (max-width: 1199px) { .hero__about-award::before { width: 150px; left: 0; } } @media only screen and (max-width: 767px) { .hero__about-award { position: absolute; top: 150px; } } #hero_texture { position: relative; } #hero_canvas { position: absolute; top: 0; right: 0; bottom: 0; left: 0; } .hero__content-8 { padding-top: 80px; } @media only screen and (min-width: 992px) and (max-width: 1199px) { .hero__content-8 { padding-top: 50px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .hero__content-8 { padding-top: 50px; } } @media only screen and (max-width: 767px) { .hero__content-8 { padding-top: 80px; text-align: center; } } .hero__content-8 .discription { padding-top: 40px; font-size: 18px; max-width: 330px; } @media only screen and (min-width: 768px) and (max-width: 991px) { .hero__content-8 .discription { padding-top: 20px; } } @media only screen and (max-width: 767px) { .hero__content-8 .discription { padding-top: 30px; padding-bottom: 30px; max-width: 100%; } } .hero__content-8 .scroll-wrapper { display: -ms-grid; display: grid; -ms-grid-columns: 300px auto; grid-template-columns: 300px auto; } @media only screen and (max-width: 767px) { .hero__content-8 .scroll-wrapper { display: block; } } .hero__content-8 .scroll-down { position: relative; padding-left: 100px; margin-top: 30px; } @media only screen and (max-width: 767px) { .hero__content-8 .scroll-down { display: none; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .hero__content-8 .scroll-down { padding-left: 120px; } } @media only screen and (min-width: 992px) and (max-width: 1199px) { .hero__content-8 .scroll-down { padding-left: 120px; } } .hero__content-8 .scroll-down span { position: absolute; left: 105px; top: -45px; -webkit-transform: rotate(-90deg); transform: rotate(-90deg); font-size: 14px; text-transform: uppercase; } .hero__content-8 .scroll-down img { -webkit-animation: wcSlideBottom 3s infinite; animation: wcSlideBottom 3s infinite; } @media only screen and (min-width: 992px) and (max-width: 1199px) { .hero__content-8 .scroll-down img { max-height: 100px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .hero__content-8 .scroll-down img { max-height: 100px; } } .bodypadding { padding: 110px 100px; } @media only screen and (min-width: 768px) and (max-width: 991px) { .bodypadding { padding: 70px 20px; } } @media only screen and (max-width: 767px) { .bodypadding { padding: 30px 15px; } } .bodypadding-2 { padding: 120px 50px; } @media only screen and (max-width: 767px) { .bodypadding-2 { padding: 30px 15px; } } .dark .hero__content-8 .scroll-down img { -webkit-filter: invert(1); filter: invert(1); } .dark .hero__content-8 .scroll-down span { color: var(--white); } /*----------------------------------------*/ /* 15. SLIDER CSS START /*----------------------------------------*/ .roll__area { background-color: var(--primary); padding: 31px 10px; } .roll__area-2 { padding: 31px 10px; background-color: var(--black-2); } .roll__area-2 .roll__slide h2 { color: var(--white); } .roll__area-3 { padding: 31px 10px; background-color: var(--pink-2); } .roll__area-3 .roll__slide h2 { color: var(--black-2); } .roll__wrapper { -webkit-transition-timing-function: linear; transition-timing-function: linear; } .roll__slide { text-align: center; } .roll__slide h2 { font-weight: 400; font-size: 26px; line-height: 1.1; text-transform: uppercase; color: var(--black); } .contact_wrap { position: relative; } @media only screen and (min-width: 768px) and (max-width: 991px) { .contact_wrap { margin-top: 60px; } } .contact_wrap:hover .link { opacity: 1; visibility: visible; } .contact_wrap .link { position: absolute; left: 50%; top: 50%; font-size: 18px; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); width: 160px; height: 160px; background: var(--black-2); border-radius: 100%; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; color: var(--white); text-transform: capitalize; opacity: 0; visibility: hidden; -webkit-transition: all 0.5s; transition: all 0.5s; } @media (max-width: 1365px) { .contact_wrap .link { width: 130px; height: 130px; } } @media (max-width: 1365px) { .contact_wrap .link { opacity: 1; visibility: visible; } } .rollslide_wrap { text-align: center; overflow: hidden; margin-bottom: -10px; } .rollslide_title { color: var(--black-2); font-size: 250px; line-height: 1; -webkit-transition: all 0.3s; transition: all 0.3s; text-transform: uppercase; } .rollslide_title-1 { color: var(--black-2); font-size: 245px; line-height: 0.75; text-transform: uppercase; } .rollslide_title-1 span {} @media only screen and (min-width: 1200px) and (max-width: 1399px) { .rollslide_title-1 { font-size: 160px; } } @media only screen and (min-width: 992px) and (max-width: 1199px) { .rollslide_title-1 { font-size: 120px; } } @media only screen and (min-width: 1200px) and (max-width: 1600px) { .rollslide_title-1 { font-size: 150px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .rollslide_title-1 { font-size: 90px; } } @media only screen and (max-width: 767px) { .rollslide_title-1 { font-size: 48px; } } .rollslide_title:hover { color: var(--black-3); } .rollslide_title span { font-weight: 400; } @media only screen and (max-width: 767px) { .rollslide_title { font-size: 48px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .rollslide_title { font-size: 100px; } } @media only screen and (min-width: 992px) and (max-width: 1199px) { .rollslide_title { font-size: 120px; } } @media only screen and (min-width: 1200px) and (max-width: 1600px) { .rollslide_title { font-size: 180px; } } @media only screen and (max-width: 767px) { footer .contact_wrap { margin-top: 40px; } } .dark .rollslide_title-1 { color: var(--white); } .dark .contact_wrap:hover .link { color: var(--black-2); background-color: var(--white); } @media (max-width: 1365px) { .dark .contact_wrap .link { color: var(--black-2); background-color: var(--white); } } /*----------------------------------------*/ /* 16. ABOUT CSS START /*----------------------------------------*/ .about__area { overflow: hidden; background-color: var(--white); } .about__area .sec-title { max-width: 800px; position: relative; z-index: 9; } @media only screen and (min-width: 768px) and (max-width: 991px) { .about__area .sec-title { max-width: 660px; } } .about__area-2 { overflow: hidden; background-color: var(--black-2); background-image: url(../imgs/shape/2.png); background-repeat: no-repeat; background-position: 0 31%; } @media only screen and (min-width: 1400px) and (max-width: 1919px) { .about__area-2 { background-position: 0 40%; } } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .about__area-2 { background-position: 0 37%; } } @media only screen and (min-width: 992px) and (max-width: 1199px) { .about__area-2 { background-position: 0 39%; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .about__area-2 { background-position: -15% 47%; } } @media only screen and (max-width: 767px) { .about__area-2 { background-size: 0; } } .about__area-2 .sec-title { color: var(--white); } .about__area-2 .sec-title-wrapper { max-width: 770px; padding-bottom: 70px; } @media only screen and (min-width: 992px) and (max-width: 1199px) { .about__area-2 .sec-title-wrapper { max-width: 600px; } } @media only screen and (max-width: 767px) { .about__area-2 .sec-title-wrapper { padding-bottom: 50px; } } .about__area-2 .sec-text { max-width: 440px; } @media only screen and (max-width: 767px) { .about__area-2 .sec-text { padding-bottom: 40px; } } .about__area-2 .sec-text p { font-size: 18px; line-height: 1.4; color: var(--gray-2); } .about__area-2 .sec-text-wrapper { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: right; -ms-flex-pack: right; justify-content: right; gap: 215px; } @media only screen and (min-width: 992px) and (max-width: 1199px) { .about__area-2 .sec-text-wrapper { gap: 50px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .about__area-2 .sec-text-wrapper { gap: 50px; -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; } } @media only screen and (max-width: 767px) { .about__area-2 .sec-text-wrapper { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; gap: 50px; } } .about__area-2 #btn_wrapper, .about__area-2 .btn_wrapper { margin-left: 0; margin-right: -40px; margin-top: -50px; } @media only screen and (min-width: 768px) and (max-width: 991px) { .about__area-2 #btn_wrapper, .about__area-2 .btn_wrapper { margin-left: auto; margin-right: 0; margin-top: -20px; } } .about__area-3 { background-image: url(../imgs/shape/7.png); background-repeat: no-repeat; background-position: 100% 30%; background-color: var(--black-2); position: relative; } .about__area-3::after { position: absolute; content: ""; width: 1px; height: 100%; left: 60%; bottom: 0px; background-color: var(--black-5); } @media only screen and (min-width: 992px) and (max-width: 1199px) { .about__area-3::after { left: 55%; } } @media only screen and (max-width: 767px) { .about__area-3::after { width: 0; } } @media only screen and (min-width: 992px) and (max-width: 1199px) { .about__area-3 .pt-140 { padding-top: 100px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .about__area-3 .pt-140 { padding-top: 90px; } } .about__area-3 .sec-title { color: var(--white); text-transform: uppercase; padding-bottom: 40px; background-color: var(--black-2); } .about__area-3 .sec-sub-title { color: var(--white); text-transform: uppercase; padding-top: 45px; background-color: var(--black-2); } @media only screen and (min-width: 768px) and (max-width: 991px) { .about__area-3 .sec-sub-title { padding-top: 0; } } .about__area-3 .sec-text p { max-width: 410px; font-size: 18px; line-height: 1.4; color: var(--gray-2); padding-bottom: 22px; } @media only screen and (max-width: 767px) { .about__area-3 .sec-text p { padding-bottom: 50px; } } .about__area-3 .sec-text-wrapper { padding-left: 210px; padding-top: 45px; } @media only screen and (min-width: 1400px) and (max-width: 1919px) { .about__area-3 .sec-text-wrapper { padding-left: 160px; } } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .about__area-3 .sec-text-wrapper { padding-left: 160px; } } @media only screen and (min-width: 992px) and (max-width: 1199px) { .about__area-3 .sec-text-wrapper { padding-left: 65px; padding-top: 0; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .about__area-3 .sec-text-wrapper { padding-left: 0; padding-top: 0; } } @media only screen and (max-width: 767px) { .about__area-3 .sec-text-wrapper { padding-left: 0; padding-top: 15px; } } .about__area-8 .about-sub-right { color: var(--black-7); padding-bottom: 10px; } .about__title-wrapper { padding-left: 190px; padding-bottom: 60px; } @media only screen and (min-width: 768px) and (max-width: 991px) { .about__title-wrapper { padding-left: 0; } } @media only screen and (max-width: 767px) { .about__title-wrapper { padding-left: 0; } } .about__content { padding-top: 65px; position: relative; z-index: 1; } @media only screen and (min-width: 768px) and (max-width: 991px) { .about__content { padding-top: 5px; } } @media only screen and (max-width: 767px) { .about__content { padding-top: 50px; } } .about__content p { max-width: 440px; font-weight: 400; font-size: 18px; line-height: 1.4; color: var(--black-3); margin-bottom: 60px; } @media only screen and (min-width: 992px) and (max-width: 1199px) { .about__content p { max-width: 90%; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .about__content p { margin-bottom: 30px; } } @media only screen and (max-width: 767px) { .about__content p { margin-bottom: 30px; } } .about__content-wrapper { display: -ms-grid; display: grid; -ms-grid-columns: 1fr 80px 1.8fr; grid-template-columns: 1fr 1.8fr; grid-gap: 80px; } @media only screen and (min-width: 992px) and (max-width: 1199px) { .about__content-wrapper { grid-gap: 30px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .about__content-wrapper { -ms-grid-columns: 1fr 30px 1.5fr; grid-template-columns: 1fr 1.5fr; grid-gap: 30px; } } @media only screen and (max-width: 767px) { .about__content-wrapper { -ms-grid-columns: 1fr; grid-template-columns: 1fr; grid-gap: 0; } } .about__img img { width: 100%; overflow: hidden; } .about__img-right { position: absolute; right: 0; top: 280px; } @media only screen and (min-width: 768px) and (max-width: 991px) { .about__img-right { position: relative; top: 30px; right: unset; } } @media only screen and (max-width: 767px) { .about__img-right { position: relative; top: 30px; right: unset; } } .about__img-right img { width: auto; } @media only screen and (min-width: 992px) and (max-width: 1199px) { .about__img-right img { display: none; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .about__img-right img { display: none; } } .about__img-2 { max-width: 1720px; margin: 0 auto; overflow: hidden; max-height: 800px; margin-bottom: 140px; } @media only screen and (min-width: 992px) and (max-width: 1199px) { .about__img-2 { margin-bottom: 35px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .about__img-2 { margin-bottom: 22px; } } @media only screen and (max-width: 767px) { .about__img-2 { margin-bottom: 0; } } .about__img-2 img { width: 100%; } .about__img-3 { overflow: hidden; position: relative; width: calc(100% - 85px); height: 770px; } .about__img-3 img { position: absolute; bottom: 0; -o-object-fit: cover; object-fit: cover; width: 100%; height: 110%; margin-left: auto; margin-right: auto; } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .about__img-3 { overflow: hidden; position: relative; width: calc(100% - 40px); height: 660px; } .about__img-3 img { position: absolute; bottom: 0; -o-object-fit: cover; object-fit: cover; width: 100%; height: 120%; margin-left: auto; margin-right: auto; } } @media only screen and (min-width: 992px) and (max-width: 1199px) { .about__img-3 { width: 100%; height: unset; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .about__img-3 { width: 100%; height: unset; } } @media only screen and (max-width: 767px) { .about__img-3 { width: 100%; height: unset; } } .about__img-3 img { width: 100%; } @media only screen and (min-width: 992px) and (max-width: 1199px) { .about__img-3 img { position: unset; height: auto; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .about__img-3 img { position: unset; height: auto; } } @media only screen and (max-width: 767px) { .about__img-3 img { position: unset; height: auto; } } .portfolio__item { -webkit-transform: perspective(4000px) rotateX(90deg); transform: perspective(4000px) rotateX(90deg); } .section_wrapper { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: center; -ms-flex-align: center; align-items: center; text-transform: capitalize; position: relative; margin-top: -25px; margin-bottom: 60px; } @media only screen and (max-width: 767px) { .section_wrapper { margin-bottom: 30px; } } .section_wrapper::before { content: ""; position: absolute; bottom: 48%; left: 60px; height: 1px; width: calc(100% - 60px); background-color: var(--gray-11); } @media only screen and (max-width: 767px) { .section_wrapper::before { left: 48px; width: calc(100% - 48px); } } .react_border { position: relative; height: 50px; width: 50px; text-align: center; line-height: 50px; display: inline-block; background-color: transparent; border: 1px solid var(--gray-11); -webkit-transform: rotate(45deg); transform: rotate(45deg); } @media only screen and (max-width: 767px) { .react_border { height: 40px; width: 40px; line-height: 36px; } } .react_border span { font-weight: 400; font-size: 16px; color: var(--black-2); display: inline-block; -webkit-transform: rotate(-45deg); transform: rotate(-45deg); } /*----------------------------------------*/ /* 17. SERVICE CSS START /*----------------------------------------*/ .service__area { background-color: var(--black-2); overflow: hidden; } @media only screen and (min-width: 992px) and (max-width: 1199px) { .service__area.pb-150 { padding-bottom: 100px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .service__area.pb-150 { padding-bottom: 90px; } } .service__area a:first-child .service__item { border-top: 1px solid var(--secondary); } .service__area .sec-title, .service__area .sec-sub-title { color: var(--white); } .service__area .sec-title-wrapper { display: -webkit-box; display: -ms-flexbox; display: flex; height: 100%; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } .service__area-6 { padding-left: 100px; background-color: var(--black-2); } @media only screen and (min-width: 1400px) and (max-width: 1919px) { .service__area-6 { padding-left: 70px; } } @media only screen and (min-width: 992px) and (max-width: 1199px) { .service__area-6 { padding-top: 100px; padding-left: 88px; padding-bottom: 40px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .service__area-6 { padding-top: 90px; padding-left: 0; } } @media only screen and (max-width: 767px) { .service__area-6 { padding-bottom: 0; padding-left: 0; } } .service__area-6 .inherit-row { margin-left: -180px; } @media only screen and (min-width: 1400px) and (max-width: 1919px) { .service__area-6 .inherit-row { margin-left: calc(-0.5 * var(--bs-gutter-x)); } } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .service__area-6 .inherit-row { margin-left: calc(-0.5 * var(--bs-gutter-x)); } } @media only screen and (min-width: 992px) and (max-width: 1199px) { .service__area-6 .inherit-row { margin-left: calc(-0.5 * var(--bs-gutter-x)); } } @media only screen and (min-width: 768px) and (max-width: 991px) { .service__area-6 .inherit-row { margin-left: calc(-0.5 * var(--bs-gutter-x)); } } @media only screen and (max-width: 767px) { .service__area-6 .inherit-row { margin-left: calc(-0.5 * var(--bs-gutter-x)); } } .service__area-6 .content-wrapper { display: -webkit-box; display: -ms-flexbox; display: flex; } @media only screen and (max-width: 767px) { .service__area-6 .content-wrapper { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } } .service__area-6 .left-content { width: 20%; } @media only screen and (min-width: 992px) and (max-width: 1199px) { .service__area-6 .left-content { width: 35%; padding-left: 50px; display: none; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .service__area-6 .left-content { width: 30%; display: none; } } @media only screen and (max-width: 767px) { .service__area-6 .left-content { display: none; } } .service__area-6 .right-content { width: 40%; padding-left: 80px; } @media only screen and (min-width: 1400px) and (max-width: 1919px) { .service__area-6 .right-content { padding-left: 40px; } } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .service__area-6 .right-content { padding-left: 0; } } @media only screen and (min-width: 992px) and (max-width: 1199px) { .service__area-6 .right-content { width: 100%; padding-left: 0; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .service__area-6 .right-content { width: 100%; padding-left: 20px; } } @media only screen and (max-width: 767px) { .service__area-6 .right-content { width: 100%; padding-left: 0; } } .service__area-6 .mid-content { width: 40%; height: 100vh; position: relative; } .service__area-6 .mid-content .service__image { position: absolute; top: 0; left: 0; width: 100%; height: 100%; overflow: hidden; } .service__area-6 .mid-content .service__image img { width: auto; height: 100vh; } @media only screen and (min-width: 992px) and (max-width: 1199px) { .service__area-6 .mid-content { display: none; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .service__area-6 .mid-content { display: none; } } .service__area-6 .mid-content #img1 { opacity: 1; visibility: visible; } @media screen and (max-width: 767px) { .service__area-6 .mid-content { display: none; } .service__area-6 .right-content { padding-left: 0; } } .service__top-text { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; height: 100%; } .service__top-text p { max-width: 505px; color: var(--gray-2); font-weight: 300; font-size: 20px; line-height: 1.4; } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .service__top-text p { font-size: 18px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .service__top-text p { font-size: 16px; } } @media only screen and (max-width: 767px) { .service__top-text p { font-size: 18px; margin: 30px 0; } } .service__top-text p span { color: var(--white); } .service__top-btn #btn_wrapper, .service__top-btn .btn_wrapper { margin-left: auto; margin-right: -40px; } @media only screen and (min-width: 992px) and (max-width: 1199px) { .service__top-btn #btn_wrapper, .service__top-btn .btn_wrapper { margin-right: -10px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .service__top-btn #btn_wrapper, .service__top-btn .btn_wrapper { margin-right: 0; } } @media only screen and (max-width: 767px) { .service__top-btn #btn_wrapper, .service__top-btn .btn_wrapper { margin-right: 0; margin-left: 0; } } .service__list-wrapper { margin-top: 40px; } .service__img { -webkit-transition: all 0.5s; transition: all 0.5s; opacity: 0; position: absolute; -webkit-transform: rotate(0deg) translateX(-100px); transform: rotate(0deg) translateX(-100px); } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .service__img { max-width: 260px; } } @media only screen and (min-width: 992px) and (max-width: 1199px) { .service__img { max-width: 200px; } } .service__img.active { opacity: 1; -webkit-transform: rotate(15deg) translateX(60px) translateY(30px); transform: rotate(15deg) translateX(60px) translateY(30px); } .service__img-wrapper { position: relative; width: 100%; height: 100%; overflow: hidden; } @media only screen and (min-width: 992px) and (max-width: 1199px) { .service__img-wrapper { display: none; } } .service__img-wrapper span { position: absolute; width: 175px; height: 70px; background-color: var(--primary); bottom: 0; left: 0; -webkit-transform: rotate(-26deg) translate(-100%, -100%); transform: rotate(-26deg) translate(-100%, -100%); -webkit-transition: all 0.3s; transition: all 0.3s; -webkit-transition-delay: 0.2s; transition-delay: 0.2s; z-index: 1; } @media only screen and (min-width: 992px) and (max-width: 1199px) { .service__img-wrapper span { bottom: 260px; height: 40px; width: 120px; } } .service__img-wrapper span.current { -webkit-transform: rotate(-26deg) translate(120px, -100%); transform: rotate(-26deg) translate(120px, -100%); } .service__img-3 { position: relative; } .service__img-3 img { top: -95px; position: absolute; -webkit-transform: translateY(-30%); transform: translateY(-30%); opacity: 0; -webkit-transition: all 0.5s; transition: all 0.5s; } .service__img-6 img { max-width: 100%; } @media only screen and (min-width: 768px) and (max-width: 991px) { .service__items-6 { padding-top: 0; } } @media only screen and (max-width: 767px) { .service__items-6 { padding-top: 60px; } } .service__item { display: -ms-grid; display: grid; -ms-grid-columns: 0.7fr 2fr 2.5fr 1fr; grid-template-columns: 0.7fr 2fr 2.5fr 1fr; -webkit-box-align: center; -ms-flex-align: center; align-items: center; padding: 35px 0; border-bottom: 1px solid var(--secondary); -webkit-transition: all 0.3s; transition: all 0.3s; } @media only screen and (min-width: 992px) and (max-width: 1199px) { .service__item { gap: 30px; } } @media only screen and (max-width: 767px) { .service__item { -ms-grid-columns: 1fr; grid-template-columns: 1fr; padding: 25px 0 10px; } } .service__item:hover .service__number span, .service__item:hover .service a { color: var(--white); } .service__item:hover .service__title { color: var(--white); } .service__item:hover .service__link p { color: var(--white); } .service__item-2 { position: relative; } .service__item-2::before { position: absolute; content: ""; width: 1px; height: 100%; left: -90px; top: 0; background-color: var(--black-2); } @media only screen and (min-width: 992px) and (max-width: 1199px) { .service__item-2::before { left: -40px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .service__item-2::before { left: -20px; } } .service__item-2:nth-child(3n+1)::before { position: unset; } .service__item-2 img { margin-bottom: 40px; } @media only screen and (max-width: 767px) { .service__item-2 img { margin-bottom: 20px; } } .service__item-2 p { color: var(--black-2); padding-bottom: 25px; } .service__item-2 ul li { font-weight: 400; font-size: 16px; line-height: 1.5; color: var(--black-2); } .service__item-6 { height: 100vh; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } .service__item-6 .image-tab { display: none; } @media only screen and (min-width: 992px) and (max-width: 1199px) { .service__item-6 { height: auto; -webkit-box-orient: unset; -webkit-box-direction: unset; -ms-flex-direction: unset; flex-direction: unset; display: -ms-grid; display: grid; -ms-grid-columns: 2fr 30px 3fr; grid-template-columns: 2fr 3fr; grid-column-gap: 30px; margin-bottom: 60px; } .service__item-6 .image-tab { display: block; } .service__item-6 .image-tab img { width: 100%; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .service__item-6 { height: auto; padding-bottom: 80px; } } @media only screen and (max-width: 767px) { .service__item-6 { height: auto; padding-bottom: 50px; } } .service__item-6 p { max-width: 550px; font-size: 18px; line-height: 1.4; color: var(--gray-2); padding-bottom: 30px; } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .service__item-6 p { padding-bottom: 20px; } } .service__item-6 ul { display: -ms-grid; display: grid; -ms-grid-columns: 240px auto; grid-template-columns: 240px auto; padding-bottom: 80px; } @media only screen and (min-width: 768px) and (max-width: 991px) { .service__item-6 ul { -ms-grid-columns: 1fr; grid-template-columns: 1fr; } } @media only screen and (max-width: 767px) { .service__item-6 ul { -ms-grid-columns: 1fr; grid-template-columns: 1fr; padding-bottom: 20px; } } .service__item-6 ul li { display: inline-block; padding-bottom: 10px; font-weight: 400; font-size: 18px; line-height: 1.5; color: var(--white); } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .service__item-6 ul li { font-size: 16px; padding-bottom: 5px; } } @media only screen and (min-width: 1400px) and (max-width: 1919px) { .service__item-6 ul { padding-bottom: 30px; } } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .service__item-6 ul { padding-bottom: 20px; } } @media only screen and (min-width: 992px) and (max-width: 1199px) { .service__item-6 ul { padding-bottom: 40px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .service__item-6 ul { padding-bottom: 50px; -ms-grid-columns: 240px auto; grid-template-columns: 240px auto; } } .service__hover-3 { width: 300px; height: 400px; position: absolute; top: 0; left: 0; background-size: cover; background-repeat: no-repeat; background-position-x: 75%; opacity: 0; -webkit-transition: opacity 0.3s, -webkit-transform 0.7s cubic-bezier(0.23, 1, 0.32, 1); transition: opacity 0.3s, -webkit-transform 0.7s cubic-bezier(0.23, 1, 0.32, 1); transition: opacity 0.3s, transform 0.7s cubic-bezier(0.23, 1, 0.32, 1); transition: opacity 0.3s, transform 0.7s cubic-bezier(0.23, 1, 0.32, 1), -webkit-transform 0.7s cubic-bezier(0.23, 1, 0.32, 1); margin: -200px 0 0 -150px; overflow: hidden; pointer-events: none; } @media (max-width: 1200px) { .service__hover-3 { width: 0; display: none; } } .service__number span { font-weight: 400; font-size: 28px; line-height: 1.2; color: var(--gray-2); -webkit-transition: all 0.3s; transition: all 0.3s; } .service__title { display: block; font-weight: 400; font-size: 28px; line-height: 1.3; color: var(--gray-2); } .service__title:hover { color: var(--white); } @media only screen and (max-width: 767px) { .service__title { padding: 10px 0 20px; } .service__title br { display: none; } } .service__title-2, .service__title-3 { font-weight: 500; font-size: 36px; line-height: 1.3; color: var(--black-2); padding-bottom: 25px; } @media only screen and (min-width: 768px) and (max-width: 991px) { .service__title-2, .service__title-3 { font-size: 24px; padding-bottom: 20px; } } @media only screen and (max-width: 767px) { .service__title-2, .service__title-3 { padding-bottom: 15px; } } .service__title-3 { text-transform: uppercase; } .service__title-3:hover { color: var(--black-2); } @media only screen and (max-width: 767px) { .service__title-3 { display: block; font-size: 30px; padding-bottom: 20px; } } .service__title-6 { font-weight: 500; font-size: 40px; line-height: 1.1; color: var(--white); padding-bottom: 20px; } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .service__title-6 { font-size: 32px; } } @media only screen and (min-width: 992px) and (max-width: 1199px) { .service__title-6 { font-size: 32px; padding-top: 15px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .service__title-6 { font-size: 30px; } } @media only screen and (max-width: 767px) { .service__title-6 { font-size: 30px; } } .service__text { max-width: 320px; } .service__text p { color: var(--gray-2); } .service__link { text-align: right; overflow: hidden; } .service__link p { display: inline-block; font-size: 48px; color: var(--gray-2); } .service__link p i { -webkit-transform: translate(0, 0) rotate(-45deg); transform: translate(0, 0) rotate(-45deg); -webkit-transition: all 0.3s; transition: all 0.3s; } .service__link p::after { position: absolute; content: "\f061"; font-family: "Font Awesome 6 Free"; font-weight: 900; left: -20px; bottom: -20px; -webkit-transform: translate(0, 0) rotate(-45deg); transform: translate(0, 0) rotate(-45deg); opacity: 0; visibility: hidden; -webkit-transition: all 0.3s; transition: all 0.3s; } .service__btn-2 a { color: var(--black-2); border-color: var(--black-2); } .service__btn-2#btn_wrapper, .service__btn-2.btn_wrapper { margin: 0 auto; margin-top: 100px; } @media only screen and (min-width: 992px) and (max-width: 1199px) { .service__btn-2#btn_wrapper, .service__btn-2.btn_wrapper { margin-top: 80px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .service__btn-2#btn_wrapper, .service__btn-2.btn_wrapper { margin-top: 80px; } } @media only screen and (max-width: 767px) { .service__btn-2#btn_wrapper, .service__btn-2.btn_wrapper { margin: 0; margin-top: 60px; } } .service__btn-3 { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: end; -ms-flex-align: end; align-items: flex-end; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; position: relative; z-index: 1; } @media only screen and (max-width: 767px) { .service__btn-3 { -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; margin-top: 30px; } } .service__btn-3 #btn_wrapper, .service__btn-3 .btn_wrapper { width: 200px; height: 200px; margin-right: -15px; } @media only screen and (min-width: 768px) and (max-width: 991px) { .service__btn-3 #btn_wrapper, .service__btn-3 .btn_wrapper { margin-left: auto; margin-right: 0; } } @media only screen and (max-width: 767px) { .service__btn-3 #btn_wrapper, .service__btn-3 .btn_wrapper { margin-left: -15px; } } .service__list .active .service__number span, .service__list .active .service__title, .service__list .active .service__link p { color: var(--white); } .service__list-2 { display: -ms-grid; display: grid; -ms-grid-columns: 1fr 120px 1fr 120px 1fr; grid-template-columns: repeat(3, 1fr); grid-gap: 120px; } @media only screen and (min-width: 992px) and (max-width: 1199px) { .service__list-2 { gap: 100px 60px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .service__list-2 { gap: 90px 30px; } } @media only screen and (max-width: 767px) { .service__list-2 { -ms-grid-columns: 1fr; grid-template-columns: repeat(1, 1fr); gap: 60px; } } .service__list-3 { padding-top: 70px; position: relative; } @media only screen and (max-width: 767px) { .service__list-3 { padding-top: 40px; } } .service__list-6 { padding-top: 160px; } @media only screen and (min-width: 1400px) and (max-width: 1919px) { .service__list-6 { padding-top: 80px; } } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .service__list-6 { padding-top: 80px; } } @media only screen and (min-width: 992px) and (max-width: 1199px) { .service__list-6 { padding-top: 60px; position: sticky; top: 40px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .service__list-6 { padding-top: 60px; position: sticky; top: 60px; } } @media only screen and (max-width: 767px) { .service__list-6 { padding-top: 60px; } } .service__list-6 li { padding-bottom: 40px; } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .service__list-6 li { padding-bottom: 30px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .service__list-6 li { padding-bottom: 20px; } } .service__list-6 li.active a { color: var(--white); } @media only screen and (max-width: 767px) { .service__list-6 li { padding-bottom: 20px; } } .service__list-6 li a { font-weight: 400; font-size: 22px; line-height: 1.5; color: var(--gray-2); } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .service__list-6 li a { line-height: 1.4; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .service__list-6 li a { font-size: 20px; } } @media only screen and (max-width: 767px) { .service__list-6 li a { font-size: 20px; } } .service__content-3 { max-width: 340px; position: relative; z-index: 1; } @media only screen and (min-width: 992px) and (max-width: 1199px) { .service__content-3 { padding-left: 30px; } } .service__content-3 p { font-size: 18px; line-height: 1.4; color: var(--black-2); } .service__content-3 ul { padding-top: 20px; position: relative; z-index: 1; } .service__content-3 ul li { font-size: 18px; color: var(--black-2); } .service3__img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-size: cover; } .service3__img-wrap { width: 20vw; position: absolute; top: 0; left: 0; overflow: hidden; pointer-events: none; visibility: hidden; padding-bottom: 25vw; } @media only screen and (max-width: 767px) { .service3__img-wrap { display: none; position: unset; } } .service__detail { overflow: hidden; } .service__detail .sec-title { max-width: 630px; font-size: 36px; line-height: 1.3; padding-bottom: 90px; } @media only screen and (min-width: 768px) and (max-width: 991px) { .service__detail .sec-title { font-size: 30px; } } @media only screen and (max-width: 767px) { .service__detail .sec-title { font-size: 30px; padding-bottom: 30px; } } .service__detail-circle { position: relative; z-index: 1; } @media only screen and (max-width: 767px) { .service__detail-circle { display: none; } } .service__detail-circle span { position: relative; display: block; width: 136px; height: 136px; background-color: var(--primary); border-radius: 100%; } .service__detail-circle span::before { position: absolute; content: ""; width: 6px; height: 6px; left: calc(50% - 3px); top: calc(50% - 3px); background-color: var(--black-2); border-radius: 100%; } .service__detail-circle span::after { position: absolute; content: ""; width: 170px; height: 2px; left: 50%; top: calc(50% - 1px); background-color: var(--black-2); border-radius: 100%; } .service__detail-img { padding-right: 1px; position: relative; margin-bottom: 60px; z-index: 9; } @media only screen and (max-width: 767px) { .service__detail-img { margin-top: 30px; } } .service__detail-img img { width: 100%; } .service__detail-img img.sd-shape { width: auto; position: absolute; bottom: -15px; right: 20px; } @media only screen and (max-width: 767px) { .service__detail-img img.sd-shape { right: 5px; bottom: -30px; } } .service__detail-content { display: -ms-grid; display: grid; -ms-grid-columns: 1fr 80px 1fr; grid-template-columns: 1fr 1fr; grid-gap: 80px; } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .service__detail-content { grid-gap: 40px; } } @media only screen and (min-width: 992px) and (max-width: 1199px) { .service__detail-content { grid-gap: 30px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .service__detail-content { grid-gap: 30px; } } @media only screen and (max-width: 767px) { .service__detail-content { -ms-grid-columns: 1fr; grid-template-columns: 1fr; grid-gap: 30px; } } .service__detail-content p { font-size: 18px; line-height: 1.4; } @media only screen and (min-width: 992px) and (max-width: 1199px) { .service-v2.pt-110 { padding-top: 150px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .service-v2.pt-110 { padding-top: 130px; } } @media only screen and (max-width: 767px) { .service-v2.pt-110 { padding-top: 120px; } } @media only screen and (min-width: 992px) and (max-width: 1199px) { .service-v3.pt-130 { padding-top: 150px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .service-v3.pt-130 { padding-top: 130px; } } @media only screen and (max-width: 767px) { .service-v3.pt-130 { padding-top: 120px; } } .service-v4.pb-150 { padding-bottom: 0; } @media only screen and (min-width: 992px) and (max-width: 1199px) { .service-v4 .pt-130 { padding-top: 150px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .service-v4 .pt-130 { padding-top: 130px; } } @media only screen and (max-width: 767px) { .service-v4 .pt-130 { padding-top: 120px; } } .service-v5 .portfolio__service-item, .service-v5.portfolio__service .sec-title, .service-v5.portfolio__service .sec-text, .service-v5.portfolio__service .sec-text p { opacity: 1; } .service-v5 .portfolio__service-item { margin-bottom: 25px; } @media only screen and (min-width: 992px) and (max-width: 1199px) { .service-v5.pt-140 { padding-top: 150px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .service-v5.pt-140 { padding-top: 130px; } } @media only screen and (max-width: 767px) { .service-v5.pt-140 { padding-top: 120px; padding-bottom: 40px; } } .service-v5.portfolio__service .sec-title { text-indent: 0; } .service__list-6 li a.active { -webkit-transition: all 0.2s; transition: all 0.2s; } .service__area-6 .mid-content .service__image:nth-child(1) { z-index: 9; } .service__image:nth-child(2) { z-index: 8; } .service__image:nth-child(3) { z-index: 7; } .service__image:nth-child(4) { z-index: 6; } .service__image:nth-child(5) { z-index: 5; } .service__image:nth-child(6) { z-index: 4; } .service__image:nth-child(7) { z-index: 3; } .service__image:nth-child(8) { z-index: 2; } .service__image:nth-child(9) { z-index: 1; } .service__hero-2 { padding-top: 150px; padding-bottom: 150px; background-image: url(../imgs/home-7/sh-bg.png); background-position: top center; background-repeat: no-repeat; position: relative; } @media only screen and (min-width: 992px) and (max-width: 1199px) { .service__hero-2 { padding-bottom: 100px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .service__hero-2 { padding-bottom: 90px; } } @media only screen and (max-width: 767px) { .service__hero-2 { padding-bottom: 60px; } } .service__hero-2 .shape-1 { position: absolute; width: 132px; height: auto; right: 165px; top: 275px; } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .service__hero-2 .shape-1 { right: 100px; top: 180px; } } @media only screen and (min-width: 992px) and (max-width: 1199px) { .service__hero-2 .shape-1 { right: 30px; top: 200px; width: 100px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .service__hero-2 .shape-1 { max-width: 80px; right: 10px; top: 200px; } } @media only screen and (max-width: 767px) { .service__hero-2 .shape-1 { width: 75px; right: 6px; top: 130px; } } .service__hero-inner-2 { display: -ms-grid; display: grid; -ms-grid-columns: 1fr 3fr; grid-template-columns: 1fr 3fr; } @media only screen and (max-width: 767px) { .service__hero-inner-2 { -ms-grid-columns: 1fr; grid-template-columns: 1fr; } } .service__hero-left-2 { position: relative; } @media only screen and (max-width: 767px) { .service__hero-left-2 { -ms-grid-row: 2; grid-row: 2; display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; gap: 15px; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; margin-top: 30px; } } .service__hero-left-2 img { margin-bottom: 15px; } @media only screen and (min-width: 992px) and (max-width: 1199px) { .service__hero-left-2 img { max-width: 200px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .service__hero-left-2 img { max-width: 150px; } } @media only screen and (max-width: 767px) { .service__hero-left-2 img { max-width: 160px; margin: 0; } } .service__hero-left-2 .image-1, .service__hero-left-2 .image-3 { -webkit-transform: translateX(-100px); transform: translateX(-100px); } @media only screen and (min-width: 1400px) and (max-width: 1919px) { .service__hero-left-2 .image-1, .service__hero-left-2 .image-3 { -webkit-transform: translateX(-40px); transform: translateX(-40px); } } @media only screen and (min-width: 992px) and (max-width: 1199px) { .service__hero-left-2 .image-1, .service__hero-left-2 .image-3 { -webkit-transform: translateX(-30px); transform: translateX(-30px); } } @media only screen and (min-width: 768px) and (max-width: 991px) { .service__hero-left-2 .image-1, .service__hero-left-2 .image-3 { -webkit-transform: translateX(-25px); transform: translateX(-25px); } } @media only screen and (max-width: 767px) { .service__hero-left-2 .image-1, .service__hero-left-2 .image-3 { -webkit-transform: translateX(0); transform: translateX(0); } } .service__hero-left-2 .image-2 { -webkit-transform: translateX(62px); transform: translateX(62px); } @media only screen and (max-width: 767px) { .service__hero-left-2 .image-2 { -webkit-transform: translateX(0); transform: translateX(0); } } .service__hero-left-2 .image-4 { position: absolute; left: 318px; bottom: 80px; } @media only screen and (min-width: 992px) and (max-width: 1199px) { .service__hero-left-2 .image-4 { left: 278px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .service__hero-left-2 .image-4 { left: 225px; bottom: 50px; } } @media only screen and (max-width: 767px) { .service__hero-left-2 .image-4 { position: unset; } } @media only screen and (max-width: 767px) { .service__hero-right-2 { -ms-grid-row: 1; grid-row: 1; } } .service__hero-right-2 .title { font-weight: 500; font-size: 130px; line-height: 1; color: var(--black); text-transform: capitalize; padding-bottom: 40px; padding-top: 80px; padding-left: 20px; } @media only screen and (min-width: 992px) and (max-width: 1199px) { .service__hero-right-2 .title { font-size: 110px; padding-top: 30px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .service__hero-right-2 .title { font-size: 90px; padding-bottom: 30px; padding-top: 30px; padding-left: 0; } } @media only screen and (max-width: 767px) { .service__hero-right-2 .title { font-size: 60px; padding-bottom: 20px; padding-top: 0; padding-left: 0; } } .service__hero-right-2 .title span { display: block; padding-left: 170px; } @media only screen and (min-width: 992px) and (max-width: 1199px) { .service__hero-right-2 .title span { padding-left: 120px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .service__hero-right-2 .title span { padding-left: 90px; } } @media only screen and (max-width: 767px) { .service__hero-right-2 .title span { padding-left: 60px; } } .service__hero-right-2 p { font-size: 18px; max-width: 340px; margin-left: 350px; } @media only screen and (min-width: 992px) and (max-width: 1199px) { .service__hero-right-2 p { margin-left: 300px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .service__hero-right-2 p { margin-left: 220px; } } @media only screen and (max-width: 767px) { .service__hero-right-2 p { font-size: 16px; margin-left: 65px; } } .service__hero-right-2 .scroll { margin-left: 350px; margin-top: 95px; -webkit-animation: wcSlideBottom 5s infinite linear; animation: wcSlideBottom 5s infinite linear; } @media only screen and (min-width: 992px) and (max-width: 1199px) { .service__hero-right-2 .scroll { margin-left: 300px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .service__hero-right-2 .scroll { margin-left: 220px; margin-top: 60px; } } @media only screen and (max-width: 767px) { .service__hero-right-2 .scroll { margin-left: 65px; margin-top: 40px; } } /*----------------------------------------*/ /* 19. WORKFLOW CSS START /*----------------------------------------*/ .workflow__area { overflow: hidden; } .workflow__area .sec-title-wrapper { text-align: center; padding-bottom: 60px; } .workflow__area-3 { overflow: hidden; background-color: var(--pink-4); padding-top: 60px; direction: ltr; } @media only screen and (min-width: 992px) and (max-width: 1199px) { .workflow__area-3 { padding-top: 90px; background-color: var(--pink-3); } } @media only screen and (min-width: 768px) and (max-width: 991px) { .workflow__area-3 { padding-top: 80px; background-color: var(--pink-3); } } @media only screen and (max-width: 767px) { .workflow__area-3 { padding-top: 60px; background-color: var(--pink-3); } } .workflow__area-3 .wf_panel { width: 100%; height: 100%; will-change: transform; opacity: 1 !important; } .workflow__area-6 { overflow: hidden; padding-top: 5px; } @media only screen and (max-width: 767px) { .workflow__area-6 .pb-130 { padding-bottom: 20px; } } .workflow__wrapper-3 { width: 400%; height: 100%; display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: no-wrap; flex-wrap: no-wrap; } @media only screen and (min-width: 992px) and (max-width: 1199px) { .workflow__wrapper-3 { width: 100%; height: auto; -ms-flex-wrap: wrap; flex-wrap: wrap; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .workflow__wrapper-3 { width: 100%; height: auto; -ms-flex-wrap: wrap; flex-wrap: wrap; } } @media only screen and (max-width: 767px) { .workflow__wrapper-3 { width: 100%; height: auto; -ms-flex-wrap: wrap; flex-wrap: wrap; } } .workflow__wrapper-6 { border-top: 1px solid var(--white-4); padding-top: 50px; } @media only screen and (max-width: 767px) { .workflow__wrapper-6 { border-top: none; padding-top: 0; } } .workflow__slide { text-align: center; position: relative; } @media only screen and (min-width: 992px) and (max-width: 1199px) { .workflow__slide { padding: 0 10px; } } .workflow__slide::before { position: absolute; content: ""; width: 100%; height: 1px; left: 0; top: 58px; background-color: var(--black-2); } .workflow__slide::after { position: absolute; content: ""; width: 18px; height: 18px; left: calc(50% - 9px); top: 50px; background-color: var(--primary); border: 3px solid var(--white); border-radius: 100%; -webkit-animation: wcBubble 1.5s 1s infinite; animation: wcBubble 1.5s 1s infinite; -webkit-transition: all 0.3s; transition: all 0.3s; } .workflow__slide p { max-width: 230px; margin: 0 auto; } .workflow__slide-6 { max-width: 270px; position: relative; } @media only screen and (max-width: 767px) { .workflow__slide-6 { max-width: 100%; padding-bottom: 40px; } } .workflow__slide-6::before { position: absolute; content: ""; width: 8px; height: 8px; left: 0; top: -54px; background-color: var(--black); border: 1px solid var(--white); border-radius: 100%; -webkit-animation: wcBubble 1.5s 1s infinite; animation: wcBubble 1.5s 1s infinite; -webkit-transition: all 0.3s; transition: all 0.3s; } @media only screen and (max-width: 767px) { .workflow__slide-6::before { width: 0; height: 0; } } .workflow__step { font-weight: 400; font-size: 18px; line-height: 1.3; color: var(--black-2); text-transform: capitalize; padding-bottom: 50px; } .workflow__number { font-size: 85px; font-weight: 500; color: var(--gray-4); } .workflow__title { font-weight: 500; font-size: 26px; line-height: 1.2; color: var(--black-2); padding-bottom: 15px; } .workflow__title-6 { font-weight: 500; font-size: 22px; line-height: 1.25; color: var(--black); padding-bottom: 15px; } @media only screen and (min-width: 768px) and (max-width: 991px) { .workflow__title-6 { font-size: 20px; } } @media only screen and (max-width: 767px) { .workflow__title-6 { padding-bottom: 10px; } } .choose-title { font-weight: 500; font-size: 200px; line-height: 1; text-transform: uppercase; color: var(--black); } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .choose-title { font-size: 160px; margin-top: -100px; } } @media only screen and (min-width: 992px) and (max-width: 1199px) { .choose-title { font-size: 48px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .choose-title { font-size: 40px; } } @media only screen and (max-width: 767px) { .choose-title { font-size: 40px; } } .choose-title-wrapper { text-align: center; } .choose-wrapper { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } /*----------------------------------------*/ /* 20. BRAND CSS START /*----------------------------------------*/ .brand__area { overflow: hidden; } .brand__area .pb-100 { padding-bottom: 50px; } @media only screen and (min-width: 768px) and (max-width: 991px) { .brand__area .pb-100 { padding-bottom: 0; } } @media only screen and (max-width: 767px) { .brand__area .pb-100 { padding-bottom: 0; } } .brand__area .sec-title-wrapper { padding-bottom: 60px; } .brand__list, .brand__list-3, .brand__list-2 { display: -ms-grid; display: grid; -ms-grid-columns: (1fr)[6]; grid-template-columns: repeat(6, 1fr); background-color: var(--white); border-bottom: 1px solid var(--white-3); position: relative; z-index: 1; margin-left: 1px; } @media only screen and (min-width: 992px) and (max-width: 1199px) { .brand__list, .brand__list-3, .brand__list-2 { -ms-grid-columns: (1fr)[4]; grid-template-columns: repeat(4, 1fr); } } @media only screen and (min-width: 768px) and (max-width: 991px) { .brand__list, .brand__list-3, .brand__list-2 { -ms-grid-columns: (1fr)[3]; grid-template-columns: repeat(3, 1fr); } } @media only screen and (max-width: 767px) { .brand__list, .brand__list-3, .brand__list-2 { -ms-grid-columns: (1fr)[2]; grid-template-columns: repeat(2, 1fr); margin-left: 0; } } .brand__item { padding: 40px; text-align: center; border-top: 1px solid var(--white-3); border-right: 1px solid var(--white-3); } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .brand__item { padding: 35px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .brand__item { padding: 30px 25px; } } @media only screen and (max-width: 767px) { .brand__item { padding: 30px 15px; border-left: 1px solid var(--white-3); } .brand__item:nth-child(even) { border-left: none; } } .brand__item-2 { text-align: center; } @media only screen and (min-width: 768px) and (max-width: 991px) { .brand__item-2 { padding-bottom: 20px; } } @media only screen and (max-width: 767px) { .brand__item-2 { padding-bottom: 20px; } } .brand__title-2 { font-weight: 400; font-size: 24px; line-height: 1.5; color: var(--white); padding-bottom: 50px; text-align: center; } .brand__title-3 { font-size: 18px; line-height: 1.4; color: var(--black-2); text-align: center; padding-bottom: 65px; font-weight: 400; text-transform: uppercase; } .brand-gap { gap: 50px 0; border: none; background-color: transparent; } /*----------------------------------------*/ /* 22. PORTFOLIO CSS START /*----------------------------------------*/ .portfolio__text { text-align: center; font-size: 150px; font-weight: 500; color: var(--white); text-transform: uppercase; padding: 120px 0 50px; opacity: 1; } @media only screen and (min-width: 992px) and (max-width: 1199px) { .portfolio__text { font-size: 110px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .portfolio__text { font-size: 90px; } } @media only screen and (max-width: 767px) { .portfolio__text { font-size: 45px; padding: 50px 0; } } .portfolio__area { position: relative; background-color: var(--black-2); overflow: hidden; } .portfolio__area-2 { overflow: hidden; position: relative; } .portfolio__area-2::after { position: absolute; content: ""; width: 1px; height: 100%; left: 84.6%; top: 0; background: var(--white-4); } @media only screen and (max-width: 767px) { .portfolio__area-2 { padding-bottom: 15px; } } .portfolio__area-2::after { z-index: 9; } @media only screen and (max-width: 767px) { .portfolio__area-2::after { z-index: unset; } } .portfolio__area-2 .swiper-slide-active .sec-title { -webkit-animation: wcfadeUp 1s 0.5s forwards; animation: wcfadeUp 1s 0.5s forwards; } .portfolio__area-2 .swiper-slide-active p { -webkit-animation: wcfadeUp 1s 0.7s forwards; animation: wcfadeUp 1s 0.7s forwards; } .portfolio__area-2 .swiper-slide-active .btn-common-wrap { -webkit-animation: wcfadeUp 1s 0.9s forwards; animation: wcfadeUp 1s 0.9s forwards; } .portfolio__area-2 .sec-title-wrapper { text-align: center; } @media only screen and (max-width: 767px) { .portfolio__area-2 .sec-title-wrapper { text-align: left; } } .portfolio__area-2 .sec-title-wrapper .sec-text { font-size: 24px; max-width: 410px; text-align: left; } @media only screen and (max-width: 767px) { .portfolio__area-2 .sec-title-wrapper .sec-text { font-size: 20px; } } .portfolio__area-2 .sec-title-3 { font-weight: 400; background-image: url(../imgs/shape/1.png); background-repeat: no-repeat; background-position: 70% 25px; display: inline-block; padding-bottom: 120px; padding-right: 320px; } @media only screen and (min-width: 992px) and (max-width: 1199px) { .portfolio__area-2 .sec-title-3 { background-size: 260px; background-position: 70% 20px; padding-right: 200px; padding-bottom: 90px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .portfolio__area-2 .sec-title-3 { background-size: 200px; background-position: 95% 0; padding-right: 100px; padding-bottom: 90px; } } @media only screen and (max-width: 767px) { .portfolio__area-2 .sec-title-3 { background-size: 150px; background-position: 60% 0; padding-left: 0; padding-bottom: 45px; padding-right: 0px; } } .portfolio__area-2 .sec-title-3 span { display: block; padding-left: 450px; } @media only screen and (min-width: 992px) and (max-width: 1199px) { .portfolio__area-2 .sec-title-3 span { padding-right: 0; padding-left: 300px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .portfolio__area-2 .sec-title-3 span { padding-right: 0; padding-left: 150px; } } @media only screen and (max-width: 767px) { .portfolio__area-2 .sec-title-3 span { padding-right: 0; padding-left: 85px; } } .portfolio__area-3 { background-color: var(--black-2); } .portfolio__area-3 .sec-sub-title { text-transform: uppercase; color: var(--white); } @media only screen and (min-width: 768px) and (max-width: 991px) { .portfolio__area-3 .sec-sub-title { padding-bottom: 50px; } } @media only screen and (max-width: 767px) { .portfolio__area-3 .sec-sub-title { padding-bottom: 45px; } } .portfolio__area-3 .swiper-btn { display: -webkit-box; display: -ms-flexbox; display: flex; gap: 30px; } .portfolio__area-3 .swiper-btn div { font-size: 20px; color: var(--white); border: 1px solid var(--white); width: 50px; height: 50px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; border-radius: 50%; -webkit-transition: all 0.3s; transition: all 0.3s; position: absolute; top: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%); z-index: 9; opacity: 0; visibility: hidden; } @media (max-width: 1365px) { .portfolio__area-3 .swiper-btn div { opacity: 1; visibility: visible; top: calc(50% - 100px); } } @media (max-width: 1023px) { .portfolio__area-3 .swiper-btn div { opacity: 1; visibility: visible; top: calc(50% - 25px); } } .portfolio__area-3 .swiper-btn div:hover { color: var(--black-2); background-color: var(--white); } .portfolio__area-3 .swiper-btn div.pp-prev { left: 26px; } .portfolio__area-3 .swiper-btn div.pp-next { right: 0; } @media (max-width: 1365px) { .portfolio__area-3 .swiper-btn div.pp-next { right: -24px; } } .portfolio__area-3 .swiper-pagination { width: 120px; left: 370px; top: 0; bottom: unset; font-weight: 400; font-size: 60px; line-height: 1; color: var(--white); } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .portfolio__area-3 .swiper-pagination { left: 300px; } } @media only screen and (min-width: 992px) and (max-width: 1199px) { .portfolio__area-3 .swiper-pagination { left: 180px; } } @media only screen and (max-width: 767px) { .portfolio__area-3 .swiper-pagination { left: -22px; padding-top: 10px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .portfolio__area-3 .swiper-pagination { left: 0; } } .portfolio__area-3 .swiper-pagination-total { font-size: 22px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; margin-top: -50px; } @media only screen and (min-width: 768px) and (max-width: 991px) { .portfolio__area-6 .line { padding-top: 160px; } } @media only screen and (max-width: 767px) { .portfolio__area-6 .line { padding-top: 0; } } .portfolio__area-6 .zi-9 { position: relative; z-index: 9; } .portfolio__area-6 .sec-title { font-size: 120px; padding-bottom: 20px; } .portfolio__area-6 .sec-title-wrapper { position: sticky; top: 130px; } .portfolio__area-6 .sec-title-wrapper p { font-size: 18px; line-height: 1.4; padding-left: 110px; position: relative; } @media only screen and (min-width: 768px) and (max-width: 991px) { .portfolio__area-6 .sec-title-wrapper p { padding-left: 60px; padding-right: 30px; } } @media only screen and (max-width: 767px) { .portfolio__area-6 .sec-title-wrapper p { padding-left: 60px; } } .portfolio__area-6 .sec-title-wrapper p::before { position: absolute; content: ""; width: 80px; height: 1px; background-color: var(--black-2); left: 0; top: 8px; } @media only screen and (min-width: 768px) and (max-width: 991px) { .portfolio__area-6 .sec-title-wrapper p::before { width: 50px; } } @media only screen and (max-width: 767px) { .portfolio__area-6 .sec-title-wrapper p::before { width: 50px; } } .portfolio__area-6 .sec-sub-title { font-size: 24px; padding-bottom: 0; } .portfolio__wrapper-6 { padding-left: 100px; } @media only screen and (min-width: 768px) and (max-width: 991px) { .portfolio__wrapper-6 { padding-left: 0; } } @media only screen and (max-width: 767px) { .portfolio__wrapper-6 { padding-left: 0; padding-top: 180px; } } .portfolio__item { padding-bottom: 30px; position: fixed; top: 0; left: 0; z-index: 999; scale: 0.5; opacity: 0; } .portfolio__item:nth-child(even) { top: 50%; } @media only screen and (max-width: 767px) { .portfolio__item:nth-child(even) { top: 0%; } } .portfolio__item:hover .portfolio__info { opacity: 1; visibility: visible; -webkit-transform: translateX(0); transform: translateX(0); } .portfolio__item .img-box { height: 100%; } .portfolio__item img { width: 100%; } .portfolio__info { width: 175px; padding: 15px; border-radius: 0; background-color: var(--primary); position: absolute; right: 0; bottom: 50px; z-index: 1; -webkit-transform: translateX(60px); transform: translateX(60px); -webkit-transition: all 0.3s; transition: all 0.3s; opacity: 0; visibility: hidden; } @media only screen and (min-width: 992px) and (max-width: 1199px) { .portfolio__info { opacity: 1; visibility: visible; right: 45px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .portfolio__info { opacity: 1; visibility: visible; right: 45px; } } @media only screen and (max-width: 767px) { .portfolio__info { opacity: 1; visibility: visible; right: 60px; } } .portfolio__info p { font-weight: 400; font-size: 12px; line-height: 1.3; color: var(--black-2); } .portfolio__title { font-weight: 500; font-size: 16px; line-height: 1.3; color: var(--black-2); padding-bottom: 3px; } .portfolio__title-3 { font-weight: 500; font-size: 180px; line-height: 1; text-transform: uppercase; color: var(--white); text-align: left; padding-top: 80px; position: absolute; z-index: 5; opacity: 0; } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .portfolio__title-3 { font-size: 130px; } } @media only screen and (min-width: 992px) and (max-width: 1199px) { .portfolio__title-3 { font-size: 120px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .portfolio__title-3 { font-size: 100px; } } @media only screen and (max-width: 767px) { .portfolio__title-3 { font-size: 60px; padding-top: 0; display: -webkit-box; display: -ms-flexbox; display: flex; height: 100%; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } } .portfolio__title-3 span { display: block; padding-left: 200px; } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .portfolio__title-3 span { padding-left: 120px; } } @media only screen and (min-width: 992px) and (max-width: 1199px) { .portfolio__title-3 span { padding-left: 100px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .portfolio__title-3 span { padding-left: 80px; } } @media only screen and (max-width: 767px) { .portfolio__title-3 span { padding-left: 60px; } } .portfolio__title-6 { font-weight: 500; font-size: 20px; line-height: 1.2; color: var(--white); padding-bottom: 5px; } .portfolio__date { font-weight: 400; font-size: 14px; line-height: 1.3; color: var(--white); } .portfolio__list-1 { display: -ms-grid; display: grid; -ms-grid-columns: 1fr 30px 1fr; grid-template-columns: 1fr 1fr; gap: 0px 30px; position: relative; margin-bottom: 0; } @media only screen and (max-width: 767px) { .portfolio__list-1 { -ms-grid-columns: 1fr; grid-template-columns: 1fr; gap: 0px; } } .portfolio__list-6 { overflow-x: hidden; overflow: hidden; } .portfolio__pagination-6 { padding-top: 430px; padding-left: 110px; font-weight: 300; font-size: 19px; line-height: 1.1; color: var(--black-3); display: -webkit-box; display: -ms-flexbox; display: flex; } @media only screen and (min-width: 1400px) and (max-width: 1919px) { .portfolio__pagination-6 { padding-top: 330px; } } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .portfolio__pagination-6 { padding-top: 130px; } } @media only screen and (min-width: 992px) and (max-width: 1199px) { .portfolio__pagination-6 { padding-top: 180px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .portfolio__pagination-6 { padding-top: 180px; padding-left: 60px; } } @media only screen and (max-width: 767px) { .portfolio__pagination-6 { padding-top: 80px; padding-left: 0; } } .portfolio__current { font-weight: 300; font-size: 60px; line-height: 1.1; color: var(--black); } .portfolio__btn { margin-top: 40px; } .portfolio__btn#btn_wrapper, .portfolio__btn.btn_wrapper { margin: 0 auto; } .portfolio__content-6 { position: absolute; top: 0%; right: 5%; background-color: var(--black-2); z-index: 9; padding: 20px 30px; opacity: 0; visibility: hidden; -webkit-transition: all 0.3s; transition: all 0.3s; } @media (max-width: 1200px) { .portfolio__content-6 { opacity: 1; visibility: visible; right: 0; } } .portfolio__detail { overflow: hidden; } .portfolio__detail img { width: 100%; } @media only screen and (min-width: 992px) and (max-width: 1199px) { .portfolio__detail-top .pt-110 { padding-top: 140px; } } .portfolio__detail-top .sec-title { font-size: 90px; } @media only screen and (min-width: 768px) and (max-width: 991px) { .portfolio__detail-top .sec-title { font-size: 72px; padding-top: 90px; } } @media only screen and (max-width: 767px) { .portfolio__detail-top .sec-title { font-size: 60px; padding-bottom: 50px; padding-top: 90px; } } .portfolio__detail-info { height: 100%; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; -webkit-box-align: end; -ms-flex-align: end; align-items: flex-end; } .portfolio__detail-info ul { display: -ms-grid; display: grid; -ms-grid-columns: auto 80px auto; grid-template-columns: auto auto; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; grid-gap: 25px 80px; } @media only screen and (min-width: 768px) and (max-width: 991px) { .portfolio__detail-info ul { -ms-grid-columns: 1fr 50px 1fr; grid-template-columns: 1fr 1fr; grid-gap: 20px 50px; } } @media only screen and (max-width: 767px) { .portfolio__detail-info ul { grid-gap: 20px 50px; } } .portfolio__detail-info ul li { font-weight: 400; font-size: 14px; line-height: 1.5; color: var(--gray-8); text-transform: capitalize; } .portfolio__detail-info ul li span, .portfolio__detail-info ul li a { display: block; font-weight: 500; font-size: 16px; line-height: 1.5; color: var(--black-3); text-transform: capitalize; } .portfolio__detail-thumb { overflow: hidden; position: relative; width: 100%; height: 70vh; } .portfolio__detail-thumb img { position: absolute; bottom: 0; -o-object-fit: cover; object-fit: cover; width: 100%; height: 130%; margin-left: auto; margin-right: auto; } @media only screen and (min-width: 1920px) { .portfolio__detail-thumb { padding-left: 100px; } } @media only screen and (min-width: 992px) and (max-width: 1199px) { .portfolio__detail-thumb { overflow: hidden; position: relative; width: 100%; height: auto; position: unset; } .portfolio__detail-thumb img { position: absolute; bottom: 0; -o-object-fit: cover; object-fit: cover; width: 100%; height: auto; margin-left: auto; margin-right: auto; } .portfolio__detail-thumb img { position: unset; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .portfolio__detail-thumb { overflow: hidden; position: relative; width: 100%; height: auto; position: unset; } .portfolio__detail-thumb img { position: absolute; bottom: 0; -o-object-fit: cover; object-fit: cover; width: 100%; height: auto; margin-left: auto; margin-right: auto; } .portfolio__detail-thumb img { position: unset; } } @media only screen and (max-width: 767px) { .portfolio__detail-thumb { overflow: hidden; position: relative; width: 100%; height: auto; position: unset; } .portfolio__detail-thumb img { position: absolute; bottom: 0; -o-object-fit: cover; object-fit: cover; width: 100%; height: auto; margin-left: auto; margin-right: auto; } .portfolio__detail-thumb img { position: unset; } } .portfolio__detail-title { max-width: 350px; font-weight: 500; font-size: 36px; line-height: 1.1; color: var(--black-2); } @media only screen and (min-width: 768px) and (max-width: 991px) { .portfolio__detail-title { font-size: 30px; } } @media only screen and (max-width: 767px) { .portfolio__detail-title { max-width: 500px; padding-bottom: 30px; } } .portfolio__detail-text { padding-bottom: 60px; } .portfolio__detail-text p { font-weight: 400; font-size: 18px; line-height: 1.4; color: var(--black-3); padding-bottom: 15px; } .portfolio__detail-text li { font-weight: 400; font-size: 18px; line-height: 1.5; color: var(--black-2); padding-bottom: 5px; } .portfolio__detail-text .fonts { display: -ms-grid; display: grid; -ms-grid-columns: 2fr 70px 3.5fr; grid-template-columns: 2fr 3.5fr; gap: 70px; padding-top: 60px; padding-bottom: 85px; } .portfolio__detail h2 {padding-bottom:20px;font-size:30px;} .portfolio__detail h3 {padding-bottom:20px;font-size:26px;} .portfolio__detail hr {margin:20px 0;} @media only screen and (min-width: 992px) and (max-width: 1199px) { .portfolio__detail-text .fonts { -ms-grid-columns: 1fr 30px 2fr; grid-template-columns: 1fr 2fr; gap: 30px; padding-bottom: 30px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .portfolio__detail-text .fonts { -ms-grid-columns: 1fr; grid-template-columns: 1fr; gap: 30px; padding-top: 40px; padding-bottom: 0; } } @media only screen and (max-width: 767px) { .portfolio__detail-text .fonts { -ms-grid-columns: 1fr; grid-template-columns: 1fr; gap: 30px; padding-top: 40px; padding-bottom: 0; } } .portfolio__detail-text .fonts img { width: auto; } @media only screen and (min-width: 992px) and (max-width: 1199px) { .portfolio__detail-text .fonts img { width: 100%; } } .portfolio__detail-text .fonts ul { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; } .portfolio__detail-text .fonts ul li { font-weight: 500; text-transform: capitalize; display: -ms-grid; display: grid; -ms-grid-columns: 1fr 2fr; grid-template-columns: 1fr 2fr; } .portfolio__detail-text .fonts ul .regular { font-weight: 400; color: var(--gray-9); } .portfolio__detail-text .fonts ul .medium { color: var(--gray-10); } .portfolio__detail-text .fonts ul .semibold { color: var(--black-3); } .portfolio__detail .block-thumb { overflow: hidden; position: relative; width: 100%; height: 65vh; z-index: 9; margin-bottom: 20px; } .portfolio__detail .block-thumb img { position: absolute; bottom: 0; -o-object-fit: cover; object-fit: cover; width: 100%; height: 120%; margin-left: auto; margin-right: auto; } @media only screen and (min-width: 768px) and (max-width: 991px) { .portfolio__detail .block-thumb { overflow: hidden; position: relative; width: 100%; height: auto; } .portfolio__detail .block-thumb img { position: absolute; bottom: 0; -o-object-fit: cover; object-fit: cover; width: 100%; height: auto; margin-left: auto; margin-right: auto; } .portfolio__detail .block-thumb img { position: unset; } } @media only screen and (max-width: 767px) { .portfolio__detail .block-thumb { overflow: hidden; position: relative; width: 100%; height: auto; } .portfolio__detail .block-thumb img { position: absolute; bottom: 0; -o-object-fit: cover; object-fit: cover; width: 100%; height: auto; margin-left: auto; margin-right: auto; } .portfolio__detail .block-thumb img { position: unset; } } .portfolio__detail .block-gallery { overflow: hidden; } .portfolio__detail .block-gallery img { width: 50%; float: left; padding-bottom: 20px; } .portfolio__detail .block-gallery img:nth-child(odd) { padding-right: 10px; } .portfolio__detail .block-gallery img:nth-child(even) { padding-left: 10px; } .portfolio__detail .block-img-text { display: -ms-grid; display: grid; -ms-grid-columns: 1fr 20px 1fr 20px 1.3fr; grid-template-columns: 1fr 1fr 1.3fr; grid-gap: 20px; } @media only screen and (max-width: 767px) { .portfolio__detail .block-img-text { -ms-grid-columns: 1fr 20px 1fr; grid-template-columns: repeat(2, 1fr); } } .portfolio__detail .block-img-text p { font-size: 18px; line-height: 1.4; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; padding-left: 60px; } @media only screen and (min-width: 992px) and (max-width: 1199px) { .portfolio__detail .block-img-text p { padding-left: 0; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .portfolio__detail .block-img-text p { padding-left: 0; } } @media only screen and (max-width: 767px) { .portfolio__detail .block-img-text p { grid-column: 1/-1; padding-left: 0; } } .portfolio__detail .block-content { position: relative; z-index: 1; } .portfolio__detail-btns { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } .portfolio__detail-btns a { margin: 0 -10px; } @media only screen and (min-width: 992px) and (max-width: 1199px) { .portfolio-v2.pt-150 { padding-top: 150px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .portfolio-v2.pt-150 { padding-top: 130px; } } @media only screen and (max-width: 767px) { .portfolio-v2.pt-150 { padding-top: 130px; } } .bg_image { position: absolute; top: 0; left: 0; width: 100%; height: 100vh; } .bg_image::before { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.5); z-index: 2; content: ""; } .bg_image img { width: 120%; } .row_bottom { margin-top: 80vh; } @media only screen and (max-width: 767px) { .row_bottom { margin-top: 30px; } } /*----------------------------------------*/ /* 24. BLOG CSS START /*----------------------------------------*/ .blog__area { overflow: hidden; } .blog__area .row { --bs-gutter-x: 60px; } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .blog__area .row { --bs-gutter-x: 40px; } } @media only screen and (min-width: 992px) and (max-width: 1199px) { .blog__area .row { --bs-gutter-x: 30px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .blog__area .row { --bs-gutter-x: 20px; } } .blog__area .sec-title-wrapper { text-align: center; padding-bottom: 60px; } .blog__area-6 { overflow: hidden; } .blog__area-6 .pb-110 { padding-bottom: 90px; } @media only screen and (min-width: 768px) and (max-width: 991px) { .blog__area-6 .pb-110 { padding-bottom: 25px; } } @media only screen and (max-width: 767px) { .blog__area-6 .pb-110 { padding-bottom: 15px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .blog__area-6 .sec-title-wrapper { padding-top: 90px; } } @media only screen and (max-width: 767px) { .blog__area-6 .sec-title-wrapper { padding-top: 60px; } } .blog__item, .blog__item-2 { padding-bottom: 55px; position: relative; z-index: 1; } .blog__img { width: 100%; -webkit-transform: scale(1.2); transform: scale(1.2); -webkit-transition: all 0.3s; transition: all 0.3s; } .blog__img-3 { width: 100%; } .blog__img-wrapper { overflow: hidden; margin-bottom: 25px; position: relative; z-index: 9; } .blog__meta, .blog__meta-2 { font-weight: 400; font-size: 15px; line-height: 1.3; color: var(--black-3); margin-bottom: 10px; } .blog__meta a, .blog__meta-2 a { color: var(--black-3); -webkit-transition: all 0.3s; transition: all 0.3s; } .blog__meta a:hover, .blog__meta-2 a:hover { color: var(--secondary); } .blog__meta-2 { color: var(--gray-2); } .blog__meta-2 a { color: var(--gray-2); } .blog__meta-2 a:hover { color: var(--white); } .blog__title, .blog__title-3, .blog__title-2 { display: block; font-weight: 500; font-size: 26px; line-height: 1.2; color: var(--black-2); border-bottom: 1px solid var(--gray-5); margin-bottom: 10px; padding-bottom: 20px; } .blog__title:hover, .blog__title-3:hover, .blog__title-2:hover { color: var(--black-3); } @media only screen and (min-width: 992px) and (max-width: 1199px) { .blog__title, .blog__title-3, .blog__title-2 { font-size: 22px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .blog__title, .blog__title-3, .blog__title-2 { font-size: 20px; } } .blog__title-2 { color: var(--white); border-bottom: 0; } .blog__title-2:hover { color: var(--gray-2); } .blog__title-3 { padding-bottom: 50px; } .blog__btn { display: inline-block; font-weight: 400; font-size: 16px; line-height: 1.3; color: var(--black-3); text-transform: capitalize; } .blog__btn span { overflow: hidden; position: absolute; top: 0; right: -28px; } .blog__btn span i { -webkit-transform: translate(0, 0) rotate(-45deg); transform: translate(0, 0) rotate(-45deg); -webkit-transition: all 0.5s; transition: all 0.5s; } .blog__btn span::after { position: absolute; content: "\f061"; font-family: "Font Awesome 6 Free"; font-weight: 900; left: -20px; bottom: -20px; -webkit-transform: translate(0, 0) rotate(-45deg); transform: translate(0, 0) rotate(-45deg); opacity: 0; visibility: hidden; -webkit-transition: all 0.5s; transition: all 0.5s; } .blog__btn:hover { color: var(--secondary); } .blog__btn:hover i { -webkit-transform: translate(20px, -20px) rotate(-45deg); transform: translate(20px, -20px) rotate(-45deg); } .blog__btn:hover span::after { opacity: 1; visibility: visible; -webkit-transform: translate(20px, -20px) rotate(-45deg); transform: translate(20px, -20px) rotate(-45deg); } .blog__text { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; height: 100%; } .blog__text p { font-size: 18px; line-height: 1.4; } @media only screen and (max-width: 767px) { .blog__text p { padding-top: 30px; } } .blog__detail { overflow: hidden; } .blog__detail-top { position: relative; z-index: 1; } @media only screen and (min-width: 768px) and (max-width: 991px) { .blog__detail-top { padding-top: 90px; } } @media only screen and (max-width: 767px) { .blog__detail-top { padding-top: 60px; } } .blog__detail-date { font-weight: 400; font-size: 16px; line-height: 1.5; color: var(--black-2); padding-bottom: 15px; } .blog__detail-date span { color: var(--black-3); position: relative; padding-left: 25px; } .blog__detail-date span::before { position: absolute; content: ""; width: 4px; height: 4px; top: 11px; left: 8px; background-color: var(--gray-5); border-radius: 50px; } .blog__detail-title { font-weight: 500; font-size: 80px; line-height: 1.15; color: var(--black-2); padding-bottom: 35px; } @media only screen and (min-width: 1400px) and (max-width: 1919px) { .blog__detail-title { font-size: 56px; } } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .blog__detail-title { font-size: 56px; } } @media only screen and (min-width: 992px) and (max-width: 1199px) { .blog__detail-title { font-size: 56px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .blog__detail-title { font-size: 48px; } } @media only screen and (max-width: 767px) { .blog__detail-title { font-size: 36px; } } .blog__detail-metalist { display: -webkit-box; display: -ms-flexbox; display: flex; gap: 50px; padding-bottom: 50px; } .blog__detail-meta { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 15px; } .blog__detail-meta p { font-weight: 400; font-size: 14px; line-height: 1.5; color: var(--gray-8); } .blog__detail-meta p span { display: block; color: var(--black-3); font-size: 16px; font-weight: 500; } .blog__detail-thumb { overflow: hidden; position: relative; width: 100%; height: 70vh; } .blog__detail-thumb img { position: absolute; bottom: 0; -o-object-fit: cover; object-fit: cover; width: 100%; height: 120%; margin-left: auto; margin-right: auto; } @media only screen and (max-width: 767px) { .blog__detail-thumb { height: initial; overflow: initial; } .blog__detail-thumb img{ position: relative; height: 100%; } } .blog__detail-thumb img { width: 100%; } .blog__detail-content { padding-top: 55px; padding-bottom: 30px; } .blog__detail-content p { font-size: 18px; line-height: 1.4; padding-bottom: 25px; } .blog__detail-content img { margin-bottom: 30px; max-width: 100%; } .blog__detail-content h1, .blog__detail-content h2 { font-weight: 500; font-size: 36px; line-height: 1.2; color: var(--black); padding-bottom: 15px; padding-top: 10px; } .blog__detail-content h3 { font-weight: 500; font-size: 30px; line-height: 1.2; color: var(--black); padding-bottom: 15px; padding-top: 10px; } .blog__detail-content h4 { font-weight: 500; font-size: 24px; line-height: 1.2; color: var(--black); padding-bottom: 15px; padding-top: 10px; } .blog__detail-content h5 { font-weight: 500; font-size: 20px; line-height: 1.2; color: var(--black); padding-bottom: 10px; padding-top: 10px; } .blog__detail-content h6 { font-weight: 500; font-size: 18px; line-height: 1.2; color: var(--black); padding-bottom: 10px; padding-top: 10px; } .blog__detail-content ul, .blog__detail-content ol { padding-bottom: 25px; } .blog__detail-content ul li, .blog__detail-content ol li { font-weight: 400; font-size: 18px; line-height: 1.5; color: var(--black-2); padding-bottom: 5px; padding-left: 25px; position: relative; } .blog__detail-content ul li::before, .blog__detail-content ol li::before { position: absolute; content: "+"; left: 0; font-size: 20px; } .blog__detail-tags p { font-weight: 400; font-size: 18px; line-height: 1.4; color: var(--black-2); text-transform: capitalize; } .blog__detail-tags p a { color: var(--black-3); text-transform: lowercase; text-decoration-line: underline; } .blog__related { overflow: hidden; } @media only screen and (max-width: 767px) { .blog__related .pb-140 { padding-bottom: 0; } } .blog__related .sec-title-wrapper { padding-bottom: 60px; } @media only screen and (min-width: 992px) and (max-width: 1199px) { .blog__related .pb-130 { padding-bottom: 40px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .blog__related .pb-130 { padding-bottom: 40px; } } @media only screen and (max-width: 767px) { .blog__related .pb-130 { padding-bottom: 0; } } .blog-v2 { padding-bottom: 80px; } @media only screen and (min-width: 768px) and (max-width: 991px) { .blog-v2 { padding-bottom: 30px; } } @media only screen and (max-width: 767px) { .blog-v2 { padding-bottom: 0; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .blog-v2 .pt-150 { padding-top: 130px; } } @media only screen and (max-width: 767px) { .blog-v2 .pt-150 { padding-top: 130px; } } .blog-v2 .sec-text p { padding-bottom: 70px; margin-left: auto; } @media only screen and (min-width: 768px) and (max-width: 991px) { .blog-v2 .sec-text p { padding-bottom: 50px; } } @media only screen and (max-width: 767px) { .blog-v2 .sec-text p { padding-bottom: 40px; } } .blog-v2 .blog__item-2 { margin-bottom: 50px; } @media only screen and (min-width: 768px) and (max-width: 991px) { .blog-v2 .blog__item-2 { margin-bottom: 20px; } } @media only screen and (max-width: 767px) { .blog-v2 .blog__item-2 { margin-bottom: 0; } } .blog-v3.blog__area-3 .sec-title-wrapper::after { position: unset; } .blog-v3 .line { padding-bottom: 70px; } @media only screen and (min-width: 992px) and (max-width: 1199px) { .blog-v3 .line { padding-top: 50px; padding-bottom: 50px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .blog-v3 .line { padding-top: 50px; padding-bottom: 50px; } } @media only screen and (max-width: 767px) { .blog-v3 .line { padding-top: 50px; padding-bottom: 30px; } } .blog-v3 .blog__item-3 { margin-bottom: 80px; position: relative; z-index: 1; } @media only screen and (min-width: 768px) and (max-width: 991px) { .blog-v3 .blog__item-3 { margin-bottom: 50px; } } @media only screen and (max-width: 767px) { .blog-v3 .blog__item-3 { margin-bottom: 50px; } } .img-box { position: relative; width: 100%; height: 500px; overflow: hidden; } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .img-box { height: 425px; } } @media only screen and (min-width: 992px) and (max-width: 1199px) { .img-box { height: 340px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .img-box { height: auto; } } @media only screen and (max-width: 767px) { .img-box { height: auto; } } .img-box img { position: absolute; top: 0; left: 0; width: auto; height: 100%; -webkit-transition: 0.5s; transition: 0.5s; background-size: cover; } @media (max-width: 1023px) { .img-box img { position: unset; width: 100%; height: auto; } } .img-box img:nth-child(1) { -webkit-transform: translatex(50%) scalex(2); transform: translatex(50%) scalex(2); opacity: 0; -webkit-filter: blur(10px); filter: blur(10px); } @media (max-width: 1023px) { .img-box img:nth-child(1) { display: none; } } .img-box:hover img:nth-child(2) { -webkit-transform: translatex(-50%) scalex(2); transform: translatex(-50%) scalex(2); opacity: 0; -webkit-filter: blur(10px); filter: blur(10px); } @media (max-width: 1023px) { .img-box:hover img:nth-child(2) { opacity: 1; } } .img-box:hover img:nth-child(1) { -webkit-transform: translatex(0) scalex(1); transform: translatex(0) scalex(1); opacity: 1; -webkit-filter: blur(0); filter: blur(0); } .row.reset-grid { --bs-gutter-x: 60px; } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .row.reset-grid { --bs-gutter-x: 40px; } } @media only screen and (min-width: 992px) and (max-width: 1199px) { .row.reset-grid { --bs-gutter-x: 30px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .row.reset-grid { --bs-gutter-x: 20px; } } /*----------------------------------------*/ /* 25. CTA CSS START /*----------------------------------------*/ .cta__area { overflow: hidden; } @media only screen and (min-width: 992px) and (max-width: 1199px) { .cta__area-2 .pb-120 { padding-bottom: 126px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .cta__area-2 .pb-120 { padding-bottom: 115px; } } @media only screen and (max-width: 767px) { .cta__area-2 .pb-120 { padding-bottom: 70px; } } .cta__area-2 .wc-btn-pink { color: var(--black-3); } .cta__area-2 .wc-btn-pink:hover { color: var(--black-2); } .cta__area-3 { background-color: var(--pink-5); } @media only screen and (min-width: 1920px) { .cta__area-3 { padding-top: 60px; } } @media only screen and (min-width: 1400px) and (max-width: 1919px) { .cta__area-3 { padding-top: 20px; } } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .cta__area-3 .pt-150 { padding-top: 125px; } } @media only screen and (min-width: 992px) and (max-width: 1199px) { .cta__area-3 { background-color: var(--white); } } @media only screen and (min-width: 768px) and (max-width: 991px) { .cta__area-3 { background-color: var(--white); padding-bottom: 10px; } } @media only screen and (max-width: 767px) { .cta__area-3 { background-color: var(--white); padding-bottom: 10px; } } .cta__content { width: 50%; margin: 0 auto; text-align: center; position: relative; z-index: 1; } @media only screen and (min-width: 992px) and (max-width: 1199px) { .cta__content { width: 80%; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .cta__content { width: 100%; } } @media only screen and (max-width: 767px) { .cta__content { width: 100%; } } .cta__content #btn_wrapper, .cta__content .btn_wrapper { margin: 0 auto; } .cta__content-2, .cta__content-3 { width: 80%; margin: 0 auto; text-align: center; } @media only screen and (min-width: 768px) and (max-width: 991px) { .cta__content-2, .cta__content-3 { width: 100%; } } @media only screen and (max-width: 767px) { .cta__content-2, .cta__content-3 { width: 100%; } } .cta__content-2 #btn_wrapper, .cta__content-3 #btn_wrapper, .cta__content-2 .btn_wrapper, .cta__content-3 .btn_wrapper { position: relative; z-index: 1; width: 350px; height: 350px; margin-left: auto; margin-right: auto; } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .cta__content-2 #btn_wrapper, .cta__content-3 #btn_wrapper, .cta__content-2 .btn_wrapper, .cta__content-3 .btn_wrapper { width: 260px; height: 260px; } } @media (max-width: 1200px) { .cta__content-2 #btn_wrapper, .cta__content-3 #btn_wrapper, .cta__content-2 .btn_wrapper, .cta__content-3 .btn_wrapper { width: 200px; height: 200px; } } .cta__content-2 #btn_wrapper .btn-item, .cta__content-3 #btn_wrapper .btn-item, .cta__content-2 .btn_wrapper .btn-item, .cta__content-3 .btn_wrapper .btn-item { top: 25px; } @media only screen and (max-width: 767px) { .cta__content-2 #btn_wrapper .btn-item, .cta__content-3 #btn_wrapper .btn-item, .cta__content-2 .btn_wrapper .btn-item, .cta__content-3 .btn_wrapper .btn-item { top: 0; } } .cta__content-2 a, .cta__content-3 a { width: 300px; height: 300px; font-size: 24px; } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .cta__content-2 a, .cta__content-3 a { width: 220px; height: 220px; } } @media only screen and (min-width: 992px) and (max-width: 1199px) { .cta__content-2 a, .cta__content-3 a { width: 200px; height: 200px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .cta__content-2 a, .cta__content-3 a { width: 200px; height: 200px; } } @media only screen and (max-width: 767px) { .cta__content-2 a, .cta__content-3 a { width: 200px; height: 200px; font-size: 20px; } } .cta__content-2 a:hover span, .cta__content-3 a:hover span { width: 800px; height: 800px; } .cta__content-2 a i, .cta__content-3 a i { font-size: 30px; -webkit-transform: rotate(0); transform: rotate(0); padding-left: 20px; } @media only screen and (min-width: 1400px) and (max-width: 1919px) { .cta__content-3 a { width: 220px; height: 220px; } } @media only screen and (min-width: 992px) and (max-width: 1199px) { .cta__content-3 #btn_wrapper .btn-item, .cta__content-3 .btn_wrapper .btn-item { top: 0; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .cta__content-3 #btn_wrapper .btn-item, .cta__content-3 .btn_wrapper .btn-item { top: 0; } } .cta__content-3 a { border-color: var(--black-2); } .cta__sub-title { font-weight: 400; font-size: 14px; line-height: 1.3; text-transform: uppercase; color: var(--black-3); border: 1px solid var(--gray); display: inline-block; padding: 5px 17px; border-radius: 30px; margin-bottom: 10px; } .cta__sub-title-2 { font-weight: 300; font-size: 28px; line-height: 1.3; color: var(--black-2); padding-bottom: 25px; } .cta__title { font-weight: 400; font-size: 50px; line-height: 1; color: var(--black-2); } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .cta__title { padding-bottom: 40px; } } @media only screen and (min-width: 992px) and (max-width: 1199px) { .cta__title { padding-bottom: 40px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .cta__title { padding-bottom: 40px; } } @media only screen and (max-width: 767px) { .cta__title { font-size: 36px; padding-bottom: 40px; } } .cta__title-2 { font-weight: 300; font-size: 100px; line-height: 1; color: var(--black-2); padding-bottom: 60px; } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .cta__title-2 { font-size: 75px; padding-bottom: 30px; } } @media only screen and (min-width: 992px) and (max-width: 1199px) { .cta__title-2 { font-size: 70px; padding-bottom: 40px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .cta__title-2 { font-size: 60px; padding-bottom: 40px; } } @media only screen and (max-width: 767px) { .cta__title-2 { font-size: 48px; } } /*----------------------------------------*/ /* 28. SOLUTION CSS START /*----------------------------------------*/ .solution__area { padding-left: 100px; position: relative; } @media only screen and (min-width: 768px) and (max-width: 991px) { .solution__area { padding-left: 10px; padding-top: 150px; } } @media only screen and (max-width: 767px) { .solution__area { padding-left: 15px; padding-right: 15px; padding-top: 90px; } } .solution__wrapper { display: -ms-grid; display: grid; -ms-grid-columns: 1.3fr 1.7fr 1fr; grid-template-columns: 1.3fr 1.7fr 1fr; } @media only screen and (min-width: 768px) and (max-width: 991px) { .solution__wrapper { -ms-grid-columns: (1fr)[12]; grid-template-columns: repeat(12, 1fr); } } @media only screen and (max-width: 767px) { .solution__wrapper { -ms-grid-columns: 1fr; grid-template-columns: 1fr; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .solution__left { -ms-grid-column: 1; -ms-grid-column-span: 6; grid-column: 1/7; } } .solution__mid { padding-left: 80px; } @media only screen and (min-width: 1400px) and (max-width: 1919px) { .solution__mid { padding-left: 50px; } } @media only screen and (min-width: 992px) and (max-width: 1199px) { .solution__mid { padding-left: 20px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .solution__mid { padding-left: 0; grid-column: 7/-1; -ms-grid-row: 1; grid-row: 1; } } @media only screen and (max-width: 767px) { .solution__mid { padding-left: 0; -ms-grid-row: 1; grid-row: 1; } } .solution__mid p { max-width: 580px; font-weight: 400; font-size: 18px; line-height: 1.4; color: var(--black-3); padding-left: 190px; position: relative; } @media only screen and (min-width: 1400px) and (max-width: 1919px) { .solution__mid p { padding-left: 110px; max-width: 480px; } } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .solution__mid p { padding-left: 80px; } } @media only screen and (min-width: 992px) and (max-width: 1199px) { .solution__mid p { padding-left: 50px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .solution__mid p { padding-left: 50px; } } @media only screen and (max-width: 767px) { .solution__mid p { padding-left: 80px; padding-bottom: 50px; } } .solution__mid p::before { position: absolute; content: ""; width: 140px; height: 1px; left: 0; top: 10px; background-color: var(--black-2); } @media only screen and (min-width: 1400px) and (max-width: 1919px) { .solution__mid p::before { width: 100px; } } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .solution__mid p::before { width: 70px; } } @media only screen and (min-width: 992px) and (max-width: 1199px) { .solution__mid p::before { width: 40px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .solution__mid p::before { width: 40px; } } @media only screen and (max-width: 767px) { .solution__mid p::before { width: 70px; } } .solution__right { padding-top: 260px; } @media only screen and (min-width: 768px) and (max-width: 991px) { .solution__right { padding-top: 0; grid-column: 1/-1; -ms-grid-row: 2; grid-row: 2; padding-bottom: 30px; } } @media only screen and (max-width: 767px) { .solution__right { padding-top: 60px; } } .solution__title { font-weight: 600; font-size: 150px; line-height: 1; color: var(--black-2); padding-top: 280px; padding-bottom: 20px; } @media only screen and (min-width: 1400px) and (max-width: 1919px) { .solution__title { font-size: 120px; padding-top: 200px; } } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .solution__title { padding-top: 80px; font-size: 100px; } } @media only screen and (min-width: 992px) and (max-width: 1199px) { .solution__title { padding-top: 80px; font-size: 72px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .solution__title { padding-top: 60px; font-size: 60px; } } @media only screen and (max-width: 767px) { .solution__title { padding-top: 30px; font-size: 45px; padding-top: 60px; } } .solution__img-1 { display: inline-block; position: relative; } @media only screen and (min-width: 992px) and (max-width: 1199px) { .solution__img-1 { margin-left: 30px; } } @media only screen and (min-width: 1400px) and (max-width: 1919px) { .solution__img-1 img { max-width: 400px; } } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .solution__img-1 img { max-width: 300px; } } @media only screen and (min-width: 992px) and (max-width: 1199px) { .solution__img-1 img { max-width: 240px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .solution__img-1 img { max-width: 260px; } } @media only screen and (max-width: 767px) { .solution__img-1 img { max-width: 300px; } } .solution__img-1::after { position: absolute; content: ""; width: 100%; height: calc(100% + 10px); left: 40px; top: 0; border: 1px solid var(--white-6); border-radius: 0 0 290px 230px; z-index: -1; } @media only screen and (max-width: 767px) { .solution__img-1::after { left: 20px; } } .solution__img-2 { position: relative; float: right; margin-top: 60px; } .solution__img-2::after { position: absolute; content: ""; width: 100%; height: 100%; right: 30px; top: 0; border: 1px solid var(--white-6); border-radius: 200px; z-index: -1; } .solution__img-3 { position: relative; float: right; margin-top: 60px; } @media only screen and (min-width: 1400px) and (max-width: 1919px) { .solution__img-3 img { max-width: 360px; } } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .solution__img-3 img { max-width: 300px; } } @media only screen and (min-width: 992px) and (max-width: 1199px) { .solution__img-3 img { max-width: 220px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .solution__img-3 img { max-width: 260px; } } @media only screen and (max-width: 767px) { .solution__img-3 img { max-width: 300px; } } .solution__img-3::after { position: absolute; content: ""; width: calc(100% + 20px); height: 100%; right: 0; top: -30px; border: 1px solid var(--white-6); border-radius: 280px 0 0 200px; z-index: -1; } @media only screen and (max-width: 767px) { .solution__btm { padding-top: 40px; } } .solution__btm ul { text-align: right; } .solution__btm li { display: inline; font-weight: 400; font-size: 18px; line-height: 1.4; color: var(--black-2); padding-right: 40px; position: relative; } .solution__btm li:last-child { padding-right: 0; } @media only screen and (max-width: 767px) { .solution__btm li { padding-right: 30px; } } .solution__btm li::after { position: absolute; content: ""; width: 5px; height: 5px; left: -20px; top: 12px; background-color: var(--black-2); } .solution__btm li:first-child::after { position: unset; } .solution__shape img { position: absolute; } .solution__shape .shape-1 { left: 80%; top: 25%; } .solution__shape .shape-2 { left: 10%; top: 75%; } .solution__shape .shape-3 { left: 33%; top: 45%; } .solution__shape .shape-4 { left: 72%; top: 70%; } .solution__shape .shape-5 { top: 42%; left: 68%; z-index: -1; } /*----------------------------------------*/ /* 29. DEVELOPMENT CSS START /*----------------------------------------*/ .development__area { overflow: hidden; } @media only screen and (min-width: 768px) and (max-width: 991px) { .development__area .pt-130 { padding-top: 150px; } } @media only screen and (max-width: 767px) { .development__area .pt-130 { padding-top: 120px; } } @media only screen and (max-width: 767px) { .development__area .pb-150 { padding-bottom: 40px; } } .development__content { display: -ms-grid; display: grid; -ms-grid-columns: 1fr 80px 1fr; grid-template-columns: 1fr 1fr; grid-gap: 80px; padding-bottom: 35px; margin-bottom: 30px; border-bottom: 1px solid var(--black-3); position: relative; z-index: 1; } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .development__content { grid-gap: 40px; } } @media only screen and (min-width: 992px) and (max-width: 1199px) { .development__content { grid-gap: 30px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .development__content { -ms-grid-columns: 1fr; grid-template-columns: 1fr; grid-gap: 30px; } } @media only screen and (max-width: 767px) { .development__content { padding-top: 30px; -ms-grid-columns: 1fr; grid-template-columns: 1fr; grid-gap: 30px; } } .development__content p { font-size: 18px; line-height: 1.4; } .development__wrapper { padding-bottom: 55px; } @media only screen and (max-width: 767px) { .development__wrapper { padding-bottom: 15px; } } .development__wrapper ul { display: -ms-grid; display: grid; -ms-grid-columns: 240px auto; grid-template-columns: 240px auto; -ms-grid-columns: 310px auto; grid-template-columns: 310px auto; } @media only screen and (min-width: 768px) and (max-width: 991px) { .development__wrapper ul { -ms-grid-columns: 1fr; grid-template-columns: 1fr; } } @media only screen and (max-width: 767px) { .development__wrapper ul { -ms-grid-columns: 1fr; grid-template-columns: 1fr; padding-bottom: 20px; } } .development__wrapper ul li { display: inline-block; padding-bottom: 10px; font-weight: 400; font-size: 18px; line-height: 1.5; color: var(--black-2); } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .development__wrapper ul li { font-size: 16px; padding-bottom: 5px; } } .development__img { overflow: hidden; position: relative; width: 100%; height: 400px; z-index: 9; } .development__img img { position: absolute; bottom: 0; -o-object-fit: cover; object-fit: cover; width: 100%; height: 150%; margin-left: auto; margin-right: auto; } @media only screen and (min-width: 768px) and (max-width: 991px) { .development__img { padding-bottom: 15px; overflow: hidden; position: relative; width: 100%; height: auto; } .development__img img { position: absolute; bottom: 0; -o-object-fit: cover; object-fit: cover; width: 100%; height: auto; margin-left: auto; margin-right: auto; } .development__img img { position: unset; } } @media only screen and (max-width: 767px) { .development__img { padding-bottom: 15px; overflow: hidden; position: relative; width: 100%; height: auto; } .development__img img { position: absolute; bottom: 0; -o-object-fit: cover; object-fit: cover; width: 100%; height: auto; margin-left: auto; margin-right: auto; } .development__img img { position: unset; } } .development__img img { width: 100%; } .header__area-9 { position: absolute; left: 0; right: 0; z-index: 9; } .hero_layer_9 { position: relative; } #main { display: -webkit-box; display: -ms-flexbox; display: flex; } .content { color: #fff; position: absolute; bottom: 120px; text-align: center; left: 50px; z-index: 99; font-size: 0.8em; text-transform: uppercase; } .content p { color: var(--white); } .hero9_title { font-size: 80px; font-weight: 500; margin-bottom: 30px; } .hero9_title span { position: relative; padding-left: 30px; } .hero9_title span::before { position: absolute; content: ""; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); left: -20%; height: 2px; width: 70px; background-color: var(--white); } .content a { color: rgba(227, 227, 227, 0.78); text-decoration: none; border-bottom: 1px solid currentColor; } .content a:hover { padding-bottom: 1px; } #main .part { -webkit-box-flex: 1; -ms-flex: 1; flex: 1; } #main .part .section { width: 100%; height: 100vh; position: relative; overflow: hidden; } #main .part .section img { width: 100vw; height: 100vh; -o-object-fit: cover; object-fit: cover; position: absolute; left: var(--x); pointer-events: none; } .section { display: block; width: 100%; height: 100%; } .part:first-child h2 { display: block; top: 45% !important; left: 49% !important; position: absolute; z-index: 9999999999999 !important; width: 500px; background: transparent; height: 400px; } .plr-50 { padding: 0 50px; } .title_right.w-300 { width: 300px; } .pl-100 { padding-left: 100px; } .showcase5_bottom { padding-left: 38px; position: relative; z-index: 2; } .showcase5_bottom span { color: var(--white); } @media only screen and (max-width: 767px) { .section_title_wrapperr { -ms-flex-wrap: wrap !important; flex-wrap: wrap !important; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .section_title_wrapperr { -ms-flex-wrap: wrap !important; flex-wrap: wrap !important; } } .logos_wrapper li { margin-bottom: 10px; } .logos_wrapper li a { text-transform: capitalize; color: var(--black-2); font-weight: 500; } .logo17 { margin-bottom: 90px; } .contactrow { padding-left: 450px; } @media only screen and (min-width: 992px) and (max-width: 1199px) { .contactrow { padding-left: 0; } } .nominateparagraph { max-width: 440px; margin: auto; } .nominateparagraph p { font-size: 18px; text-indent: 60px; } .overlay_text { display: -webkit-box; display: -ms-flexbox; display: flex; position: absolute; top: 75px; left: 80px; z-index: 9; color: var(--white); font-size: 14px; -webkit-box-align: center; -ms-flex-align: center; align-items: center; border-bottom: 1px solid var(--white); padding-bottom: 30px; } .overlay_text h4 { margin-right: 30px; } .tech_title { font-weight: 400; font-size: 80px; line-height: 1; color: var(--black-2); padding-bottom: 45px; text-transform: uppercase; } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .tech_title { font-size: 60px; } } @media only screen and (min-width: 992px) and (max-width: 1199px) { .tech_title { font-size: 48px; padding-bottom: 30px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .tech_title { font-size: 40px; } } @media only screen and (max-width: 767px) { .tech_title { font-size: 30px; line-height: 1.3; padding-bottom: 30px; } } .tech_title a { color: var(--black-2); position: relative; } .tech_title a::after { position: absolute; content: ""; width: 100%; height: 2px; left: 0; bottom: 10px; background-color: var(--black-2); } @media only screen and (min-width: 992px) and (max-width: 1199px) { .tech_title a::after { bottom: 7px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .tech_title a::after { bottom: 5px; } } @media only screen and (max-width: 767px) { .tech_title a::after { bottom: 3px; } } .tech_title span {} .single_dis { font-weight: 400; font-size: 24px; line-height: 1.5; color: var(--black-3); } @media only screen and (min-width: 992px) and (max-width: 1199px) { .single_dis { font-size: 20px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .single_dis { font-size: 18px; } } @media only screen and (max-width: 767px) { .single_dis { font-size: 18px; } } .single__thumb { position: relative; } .single__thumb img { max-width: 100%; } .single__thumb video { width: 100%; } .single__thumb .video-frame { position: absolute; left: 0; top: -1px; width: 100%; height: 100%; -webkit-filter: brightness(25); filter: brightness(25); } .single__thumb .shape-2 { position: absolute; bottom: -30px; left: 60%; } @media only screen and (max-width: 767px) { .single__thumb .shape-2 { bottom: -20px; max-width: 40px; } } .single__thumb .svgstar { position: absolute; left: 25%; top: 18%; } @media only screen and (min-width: 1400px) and (max-width: 1919px) { .single__thumb .svgstar { left: 24%; top: 15%; } } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .single__thumb .svgstar { left: 23%; top: 15%; } } @media only screen and (min-width: 992px) and (max-width: 1199px) { .single__thumb .svgstar { max-width: 90px; left: 23%; top: 15%; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .single__thumb .svgstar { max-width: 70px; left: 24%; top: 16%; } } @media only screen and (max-width: 767px) { .single__thumb .svgstar { max-width: 40px; left: 23%; top: 15%; } } .dark .tech_title, .dark .tech_title a { color: var(--white); } .dark .tech_title a::after { background-color: var(--white); } .dark .single__thumb .shape-2, .dark .single__thumb .svgstar { -webkit-filter: invert(1); filter: invert(1); } .dark .single__thumb .video-frame { -webkit-filter: unset; filter: unset; } .client__area-8 { background-color: var(--black-2); background-image: url("../imgs/essential-img/bg-axtra.png"); padding-top: 150px; padding-bottom: 140px; } @media only screen and (min-width: 992px) and (max-width: 1199px) { .client__area-8 { padding-top: 110px; padding-bottom: 110px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .client__area-8 { padding-top: 100px; padding-bottom: 100px; } } @media only screen and (max-width: 767px) { .client__area-8 { padding-top: 50px; padding-bottom: 50px; } } .client__area-8 .section_wrapper::before { background-color: #313131; } .client__area-8 .about-sub-right { font-weight: 400; font-size: 16px; line-height: 1.5; color: var(--white); padding-bottom: 10px; } .client__area-8 .react_border { border-color: #313131; } .client__area-8 .react_border span { letter-spacing: 1px; font-weight: 400; font-size: 16px; color: var(--white); display: inline-block; -webkit-transform: rotate(-45deg); transform: rotate(-45deg); } .client__section { display: -webkit-box; display: -ms-flexbox; display: flex; gap: 30px; margin-bottom: 110px; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } @media only screen and (max-width: 767px) { .client__section { -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; text-align: center; margin-bottom: 50px; } } .client__section__title { color: var(--white); font-size: 80px; line-height: 1; text-transform: uppercase; } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .client__section__title { font-size: 60px; } } @media only screen and (min-width: 992px) and (max-width: 1199px) { .client__section__title { font-size: 48px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .client__section__title { font-size: 40px; } } @media only screen and (max-width: 767px) { .client__section__title { font-size: 40px; } } .client__section__title span {} .client__section__dis { max-width: 240px; color: var(--gray-2); font-size: 18px; line-height: 1.5; } @media only screen and (max-width: 767px) { .client__section__dis { max-width: 100%; } } .client__logo { display: -ms-grid; display: grid; grid-gap: 120px 60px; -ms-grid-columns: 1fr 60px 1fr 60px 1fr 60px 1fr 60px 1fr 60px 1fr; grid-template-columns: repeat(6, 1fr); -webkit-box-align: center; -ms-flex-align: center; align-items: center; } @media only screen and (min-width: 992px) and (max-width: 1199px) { .client__logo { grid-gap: 80px 40px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .client__logo { grid-gap: 60px 40px; -ms-grid-columns: 1fr 40px 1fr 40px 1fr 40px 1fr; grid-template-columns: repeat(4, 1fr); } } @media only screen and (max-width: 767px) { .client__logo { grid-gap: 50px; -ms-grid-columns: 1fr 50px 1fr 50px 1fr; grid-template-columns: repeat(3, 1fr); } } .client__logo img { max-width: 100%; } /*----------------------------------------*/ /* 34. CONTACT CSS START /*----------------------------------------*/ .contact__area-6 { overflow: hidden; } @media only screen and (min-width: 768px) and (max-width: 991px) { .contact__area-6 .line { padding-top: 150px; } } @media only screen and (max-width: 767px) { .contact__area-6 .line { padding-top: 130px; } } .contact__text { max-width: 330px; margin-left: auto; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; height: 100%; } @media only screen and (max-width: 767px) { .contact__text { padding-top: 30px; } } .contact__text p { font-size: 18px; line-height: 1.4; } .contact__btm { padding-top: 65px; } @media only screen and (max-width: 767px) { .contact__btm { padding-top: 50px; } } .contact__info { padding-top: 15px; } @media only screen and (max-width: 767px) { .contact__info { padding-bottom: 50px; } } .contact__info h3 { font-weight: 500; font-size: 26px; line-height: 1.2; color: var(--black-2); padding-bottom: 30px; } .contact__info ul li a { text-decoration-line: underline; } .contact__info ul li a, .contact__info ul li span { font-weight: 300; font-size: 18px; line-height: 1.5; color: var(--black-2); display: block; margin-bottom: 10px; } .contact__form { position: relative; z-index: 9; } .contact__form input, .contact__form textarea { width: 100%; font-weight: 400; font-size: 16px; line-height: 1.5; color: var(--black-2); border: none; border-bottom: 1px solid var(--gray); padding: 15px 0; -webkit-transition: all 0.3s; transition: all 0.3s; outline: 0; position: relative; z-index: 1; background: transparent; margin-bottom: 35px; } @media only screen and (min-width: 992px) and (max-width: 1199px) { .contact__form input, .contact__form textarea { padding: 10px 0; margin-bottom: 25px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .contact__form input, .contact__form textarea { padding: 10px 0; margin-bottom: 25px; } } @media only screen and (max-width: 767px) { .contact__form input, .contact__form textarea { margin-bottom: 20px; } } .contact__form input:focus, .contact__form textarea:focus { border-bottom: 1px solid var(--black-2); } .contact__form input::-webkit-input-placeholder, .contact__form textarea::-webkit-input-placeholder { color: var(--black-2); opacity: 1; } .contact__form input::-moz-placeholder, .contact__form textarea::-moz-placeholder { color: var(--black-2); opacity: 1; } .contact__form input:-ms-input-placeholder, .contact__form textarea:-ms-input-placeholder { color: var(--black-2); opacity: 1; } .contact__form input::-ms-input-placeholder, .contact__form textarea::-ms-input-placeholder { color: var(--black-2); opacity: 1; } .contact__form input::placeholder, .contact__form textarea::placeholder { color: var(--black-2); opacity: 1; } .contact__form textarea { height: 55px; } .contact__form #btn_wrapper, .contact__form .btn_wrapper { margin-top: -20px; } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .contact__form #btn_wrapper, .contact__form .btn_wrapper { margin-top: -10px; } } @media (max-width: 1200px) { .contact__form #btn_wrapper, .contact__form .btn_wrapper { margin-top: 10px; } } /*----------------------------------------*/ /* 36. 404 CSS START /*----------------------------------------*/ .error__content { padding-top: 80px; height: 100vh; text-align: center; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; position: relative; z-index: 1; } @media only screen and (min-width: 768px) and (max-width: 991px) { .error__content { padding-top: 100px; } } .error__content::before { position: absolute; content: ""; width: 38px; height: 38px; top: 70%; left: 10%; background-image: url(../imgs/icon/6.png); background-repeat: no-repeat; -webkit-animation: wcZoom 2s infinite; animation: wcZoom 2s infinite; } .error__content::after { position: absolute; content: ""; width: 38px; height: 38px; top: 10%; right: 10%; background-image: url(../imgs/icon/3.png); background-repeat: no-repeat; -webkit-animation: wcZoom 2s infinite; animation: wcZoom 2s infinite; } @media only screen and (min-width: 768px) and (max-width: 991px) { .error__content::after { top: 20%; } } @media only screen and (max-width: 767px) { .error__content::after { top: 15%; } } .error__content h2 { font-weight: 500; font-size: 36px; line-height: 1.5; color: var(--black-2); padding-top: 25px; padding-bottom: 10px; } @media only screen and (max-width: 767px) { .error__content h2 { font-size: 30px; line-height: 1.3; } } .error__content p { max-width: 340px; margin: 0 auto; font-size: 18px; line-height: 1.4; padding-bottom: 50px; } @media only screen and (min-width: 768px) and (max-width: 991px) { .error__content p { padding-bottom: 30px; } } @media only screen and (max-width: 767px) { .error__content p { padding-bottom: 30px; } } .error__content a { margin: 0 auto; } .error__content img { max-width: 100%; } .error__content #btn_wrapper, .error__content .btn_wrapper { margin-left: 0; margin-top: -40px; } @media (max-width: 1400px) { .error__content #btn_wrapper, .error__content .btn_wrapper { margin-top: 0; } } /*----------------------------------------*/ /* 38. FOOTER CSS START /*----------------------------------------*/ .footer__area { overflow: hidden; } .footer__area-3 { background-color: var(--black-2); } .footer__top-3 { border-bottom: 1px solid var(--black-6); } .footer__top-wrapper-3 { padding: 0 50px; display: -ms-grid; display: grid; -ms-grid-columns: 30% 10% auto; grid-template-columns: 30% 10% auto; } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .footer__top-wrapper-3 { -ms-grid-columns: 35% 20px 15% 20px auto; grid-template-columns: 35% 15% auto; gap: 20px; } } @media only screen and (min-width: 992px) and (max-width: 1199px) { .footer__top-wrapper-3 { -ms-grid-columns: 35% 20px 20% 20px auto; grid-template-columns: 35% 20% auto; gap: 20px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .footer__top-wrapper-3 { -ms-grid-columns: 35% 25% auto; grid-template-columns: 35% 25% auto; } } @media only screen and (max-width: 767px) { .footer__top-wrapper-3 { padding: 0 15px; -ms-grid-columns: 1fr; grid-template-columns: 1fr; } } .footer__btm-3 { padding: 50px; } @media only screen and (min-width: 992px) and (max-width: 1199px) { .footer__btm-3 { padding: 40px 15px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .footer__btm-3 { padding: 40px 15px; } .footer__btm-3 .row { -webkit-box-orient: vertical; -webkit-box-direction: reverse; -ms-flex-direction: column-reverse; flex-direction: column-reverse; } } @media only screen and (max-width: 767px) { .footer__btm-3 { padding: 30px 10px; } .footer__btm-3 .row { -webkit-box-orient: vertical; -webkit-box-direction: reverse; -ms-flex-direction: column-reverse; flex-direction: column-reverse; } } .footer__logo { margin-bottom: 30px; } .footer__logo-3 img { margin-bottom: 30px; } .footer__logo-3 p { max-width: 380px; color: var(--gray-2); } .footer__social-3 { border-left: 1px solid var(--black-6); border-right: 1px solid var(--black-6); } @media only screen and (max-width: 767px) { .footer__social-3 { margin-top: 50px; border-top: 1px solid var(--black-6); border-bottom: 1px solid var(--black-6); } } .footer__social-3 li { display: block; border-bottom: 1px solid var(--black-6); } .footer__social-3 li:last-child { border-bottom: 0; } .footer__social-3 li a { display: block; font-weight: 400; font-size: 16px; line-height: 1.5; text-align: center; text-transform: uppercase; color: var(--white); padding: 38px 0; background-color: transparent; -webkit-transition: all 0.3s; transition: all 0.3s; } @media only screen and (min-width: 992px) and (max-width: 1199px) { .footer__social-3 li a { padding: 30px 0; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .footer__social-3 li a { padding: 30px 0; } } @media only screen and (max-width: 767px) { .footer__social-3 li a { padding: 30px 0; } } .footer__social-3 li a:hover { color: var(--black-2); background-color: var(--white); } .footer__contact-3 { text-align: right; padding-top: 90px; } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .footer__contact-3 { padding-top: 0; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; } } @media only screen and (min-width: 992px) and (max-width: 1199px) { .footer__contact-3 { padding-top: 0; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .footer__contact-3 { padding-top: 0; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; } } @media only screen and (max-width: 767px) { .footer__contact-3 { text-align: center; margin-bottom: 50px; padding-top: 60px; } } .footer__contact-3 a { font-weight: 400; font-size: 180px; line-height: 1; text-align: center; text-transform: uppercase; color: var(--white); } @media only screen and (min-width: 1400px) and (max-width: 1919px) { .footer__contact-3 a { font-size: 140px; } } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .footer__contact-3 a { font-size: 90px; } } @media only screen and (min-width: 992px) and (max-width: 1199px) { .footer__contact-3 a { font-size: 72px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .footer__contact-3 a { font-size: 48px; } } @media only screen and (max-width: 767px) { .footer__contact-3 a { font-size: 50px; } } .footer__copyright-3 p { color: var(--white); max-width: 235px; } @media only screen and (min-width: 768px) and (max-width: 991px) { .footer__copyright-3 p { max-width: 100%; text-align: center; } } @media only screen and (max-width: 767px) { .footer__copyright-3 p { max-width: 100%; text-align: center; } } .footer__copyright-3 p a { color: var(--white); } .footer__copyright-3 p a:hover { color: var(--gray-2); } .footer__nav { height: 100%; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; } @media only screen and (max-width: 767px) { .footer__nav { -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } } .footer__nav-2 { height: 100%; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; } @media only screen and (min-width: 768px) and (max-width: 991px) { .footer__nav-2 { -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } } @media only screen and (max-width: 767px) { .footer__nav-2 { -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } } footer #btn_wrapper, footer .btn_wrapper { margin: 0 auto; } .contact_title span { padding-left: 30px; } main { overflow: hidden; } @-webkit-keyframes leftmove { 0% { margin-left: 0; } 50% { margin-left: -20px; } 100% { margin-left: 0; } } @keyframes leftmove { 0% { margin-left: 0; } 50% { margin-left: -20px; } 100% { margin-left: 0; } } @-webkit-keyframes rightmove { 0% { margin-right: 0; } 50% { margin-right: 30px; } 100% { margin-right: 0; } } @keyframes rightmove { 0% { margin-right: 0; } 50% { margin-right: 30px; } 100% { margin-right: 0; } } @-webkit-keyframes move { 0% { margin-bottom: 0; } 50% { margin-bottom: -20px; } 100% { margin-bottom: 0; } } @keyframes move { 0% { margin-bottom: 0; } 50% { margin-bottom: -20px; } 100% { margin-bottom: 0; } } @keyframes move { 0% { margin-top: 0; } 50% { margin-top: -20px; } 100% { margin-top: 0; } } @-webkit-keyframes rotate-icon { from { -webkit-transform: rotate(0deg); transform: rotate(0deg); } to { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } @keyframes rotate-icon { from { -webkit-transform: rotate(0deg); transform: rotate(0deg); } to { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } .dark .line-col-4 div { background: var(--bg-line); } .dark .btn-view { color: var(--white); } .dark .btn-view::after { background-color: var(--white); } .dark .sec-subtile-6, .dark .sec-title-6, .dark .workflow__title-4, .dark .feature__content-item h5, .dark .service__item-title, .dark .service__right-4 p span, .dark .portfolio__title-4, .dark .portfolio__icon-4, .dark .testimonial__name-4, .dark .footer__item-title, .dark .footer__newsletter-6 button { color: var(--white); } .dark .title-wrapper-6 p, .dark .workflow__item-4 p, .dark .feature__content-item p, .dark .service__right-4 p, .dark .portfolio__subtitle-4, .dark .portfolio__sec-title p, .dark .testimonial__sec-title p, .dark .blog__area-4 .sec-title-wrapper p, .dark .testimonial__info-4 p, .dark .testimonial__role-4, .dark .footer__info-6 li, .dark .footer__chekbox label { color: var(--gray-2); } .dark .service__item-icon i { color: var(--white); } #main .part .section { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; } .part p { opacity: 0; } .part h2 { opacity: 0; }