/* 01 - global area - start ==================================================================================================== */ body { margin: 0px; padding: 0px; font-size: 16px; font-weight: 400; line-height: 1.667; font-style: normal; color: $default-color; font-family: $body-font; text-rendering: optimizelegibility; -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; } main { overflow: hidden; } ::selection { color: #ffffff; background-color: $default-purple; } ::-moz-selection { color: #ffffff; background-color: $default-purple; } .container { max-width: 1200px; } a, button { cursor: pointer; display: inline-block; text-decoration: none; font-family: $body-font; &:hover { text-decoration: none; } } button { margin: 0px; padding: 0px; border: none; background: none; &:focus { outline: none; } } img { height: auto; max-width: 100%; } [data-background] { background-size: cover; background-repeat: no-repeat; background-position: center center; } .deco-wrap { z-index: 1; position: relative; } .deco-image { z-index: -1; position: absolute; } h1,h2,h3,h4,h5,h6 { font-weight: 700; color: $default-black; font-family: $heading-font; } strong,span,small,label,i { font-family: $body-font; } strong { font-weight: 700; } .form-item { position: relative; margin-bottom: 30px; input,textarea { width: 100%; outline: none; box-shadow: none; border-radius: 6px; border: 1px solid #e9eaea; transition: $default-transition; &:focus { outline: none; box-shadow: none; border-color: $default-purple; } } input { height: 50px; padding: 0px 20px; } textarea { width: 100%; padding: 20px; display: block; min-height: 140px; } } :-moz-placeholder { text-transform: capitalize; } ::-moz-placeholder { text-transform: capitalize; } :-ms-input-placeholder { text-transform: capitalize; } ::-webkit-input-placeholder { text-transform: capitalize; } /* owl settings - start ================================================== */ .owl-theme { .owl-dots { .owl-dot { span { width: 8px; height: 8px; background: #c0c9d7; transition: $default-transition; } &:hover { span { transform: scale(1.2); background: $default-purple; } } } .owl-dot.active { span { transform: scale(1.2); background: $default-purple; } } } .owl-nav { .owl-next, .owl-prev { margin: 0px; width: 50px; height: 50px; overflow: hidden; position: relative; border-radius: 100%; border: 1px solid $default-color !important; >span { display: none; } &:before { top: 0; left: 0; right: 0; bottom: 0; z-index: 1; font-size: 18px; font-weight: 400; line-height: 50px; text-align: center; position: absolute; color: $default-color; transition: $default-transition; font-family: 'Font Awesome 5 Pro'; } &:hover { background: $default-purple; border-color: $default-purple !important; &:before { color: #ffffff; } } } .owl-prev { margin-right: 15px; &:before { content: '\f060'; } } .owl-next { &:before { content: '\f061'; } } } &.arrow-right-left { .owl-nav { margin: 0px !important; .owl-prev, .owl-next { top: 50%; position: absolute; transform: translateY(-50%); } .owl-prev { left: 60px; } .owl-next { right: 60px; } } } } /* owl settings - end ================================================== */ /* list style settings - start ================================================== */ .ul-li { >ul { margin: 0px; padding: 0px; display: table; >li { float: left; list-style: none; display: inline-block; } } } .ul-li-block { >ul { width: 100%; margin: 0px; padding: 0px; display: table; >li { width: 100%; display: table; list-style: none; } } } .ul-li-right { >ul { margin: 0px; padding: 0px; float: right; display: table; >li { float: left; list-style: none; display: inline-block; } } } .ul-li-center { >ul { padding: 0px; margin: 0 auto; display: table; >li { float: left; list-style: none; display: inline-block; } } } /* list style settings - end ================================================== */ /* pagination nav - start ================================================== */ .pagination-nav { margin-top: 60px; >ul { >li { height: 50px; min-width: 50px; text-align: center; margin-right: 20px; &:last-child { margin-right: 0px !important; } >a { width: 100%; height: 100%; color: #4b4b4b; display: block; font-size: 18px; line-height: 54px; text-align: center; border-radius: 45px; background-color: #ffffff; box-shadow: 0px 8px 104px 0px rgba(37, 43, 62, 0.2); &:hover { color: #ffffff; background-color: $default-purple; } } &.active { >a { color: #ffffff; background-color: $default-purple; } } &:last-child, &:first-child { >a { font-size: 16px; background: none; box-shadow: none; text-transform: uppercase; &:hover { color: $default-purple; } } } } } } /* pagination nav - end ================================================== */ /* padding - margin setting - start ================================================== */ .sec-ptb-120 {padding: 120px 0px;} .sec-ptb-100 {padding: 100px 0px;} .mb-15 {margin-bottom: 15px;} .mb-30 {margin-bottom: 30px;} .mb-60 {margin-bottom: 60px;} .mb-100 {margin-bottom: 100px;} /* padding - margin setting - end ================================================== */ /* button style - start ================================================== */ .btn { z-index: 1; height: 50px; color: #ffffff; font-size: 16px; min-width: 140px; font-weight: 500; padding: 0px 30px; line-height: 50px; border-radius: 3px; text-align: center; display: inline-block; text-transform: capitalize; font-family: $heading-font; transition: 0.6s cubic-bezier(0.165, 0.84, 0.44, 1); &:hover { color: #ffffff; transform: translateY(-4px); } &.bg-default-purple { box-shadow: 0px 20px 30px 0px rgba(147, 76, 242, 0.2); } &.bg-default-yellow { color: $default-black; box-shadow: 0px 20px 30px 0px rgba(65, 87, 102, 0.2); } &.bg-white { color: $default-purple; box-shadow: 0px 20px 30px 0px rgba(0, 0, 0, 0.2); } &.bg-default-pink { box-shadow: 0px 20px 30px 0px rgba(216, 61, 105, 0.2); } &.bg-default-green { box-shadow: 0px 20px 30px 0px rgba(143, 209, 61, 0.2); } &.bg-default-orange { box-shadow: 0px 20px 30px 0px rgba(252, 100, 43, 0.2); } } .btn-text { font-size: 16px; font-weight: 700; color: $default-black; font-family: $body-font; transition: 0.6s cubic-bezier(0.165, 0.84, 0.44, 1); i { margin-left: 2px; color: $default-black; transform: translateY(2px); transition: 0.6s cubic-bezier(0.165, 0.84, 0.44, 1); } &:hover { color: $default-purple; i { color: $default-purple; transform: translate(5px, 2px); } } } /* button style - end ================================================== */ /* title text - start ================================================== */ .section-title { .sub-title { font-size: 16px; font-weight: 600; letter-spacing: 1px; color: $default-purple; text-transform: uppercase; font-family: $heading-font; } .title-text { font-size: 40px; font-weight: 700; line-height: 1.35; strong { font-family: $heading-font; } } p { font-size: 18px; strong { color: #212121; } } &.size-increase { .title-text { font-size: 50px; } } } .text-white { .section-title { .title-text { color: #ffffff; } p { strong { color: #ffffff; } } } } /* title text - end ================================================== */ /* bootstrap reset - start ================================================== */ .rounded { overflow: hidden; border-radius: 6px !important; } blockquote { z-index: 1; color: #ffffff; border-radius: 6px; position: relative; padding: 40px 35px; padding-left: 90px; margin-bottom: 50px; background-color: $default-purple; .quote-icon { top: 30px; left: 35px; z-index: -1; opacity: .15; line-height: 1; font-size: 72px; position: absolute; } p { font-size: 18px; } } /* bootstrap reset - end ================================================== */ /* back to top - start ================================================== */ #thetop { top: 0; left: 0; right: 0; z-index: -1; position: absolute; } #backtotop { right: 15px; width: 40px; height: 40px; z-index: 999; bottom: 58px; display: none; position: fixed; border-radius: 100%; background-color: $default-black; box-shadow: 0px 3px 15px 1px rgba(0,0,0,0.3); } #backtotop #scroll { z-index: 1; width: 100%; height: 100%; display: block; color: #ffffff; font-size: 18px; line-height: 44px; text-align: center; position: relative; } /* back to top - end ================================================== */ /* preloader - start ================================================== */ #preloader { top: 0; left: 0; width: 100%; height: 100%; z-index: 1005; position: fixed; overflow: visible; background: #ffffff url('../images/preloader.svg') no-repeat center center; } /* preloader - end ================================================== */ /* custom colors - start ================================================== */ .bg-default-pink {background-color: $default-pink;} .bg-default-green {background-color: $default-green;} .bg-default-black {background-color: $default-black;} .bg-default-orange {background-color: $default-orange;} .bg-default-purple {background-color: $default-purple;} .bg-default-yellow {background-color: $default-yellow;} .bg-default-brinjal {background-color: $default-brinjal;} /* custom colors - end ================================================== */ /* transition - start ================================================== */ a, button { transition: $default-transition; } /* transition - end ================================================== */ /* 01 - global area - end ==================================================================================================== */