/* --------------- section head styles --------------- */ .section-head{ h6{ font-size: 13px; letter-spacing: 2px; margin-bottom: 20px; } } .section-head.style-3{ margin-bottom: 50px; h3{ font-size: 27px; text-transform: capitalize; span{ font-weight: 400; color: var(--color-blue2); font-style: italic; position: relative; &::after{ position: absolute; content: ""; background-image: url(../img/section_head/title_shap1.png); left: 0; bottom: -15px; width: calc(100% + 40px); height: 30px; background-size: contain; background-repeat: no-repeat; } } } &.long-shape{ h3{ span{ &::after{ background-image: url(../img/section_head/title_shap2.png); bottom: -15px; } } } } } /* --------------- section style-4 --------------- */ .section-head.style-4{ .title_small{ font-size: 12px; padding: 5px 10px; background-color: #f7f4ff; border-radius: 5px; color: var(--color-blue4); margin-bottom: 20px; } h2{ font-size: 40px; line-height: 1.3; color: #000; span{ -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-image: linear-gradient(to right, #501e9c 0%,#8169f1 30%,#8169f1 30%,#a44cee 73%,#ff847f 100%); } } h5{ font-size: 16px; font-weight: bold; color: #a44cee; display: inline-block; text-transform: capitalize; margin: 0 10px; } } /* --------------- section style-5 --------------- */ .section-head.style-5{ h2{ font-size: 45px; span{ color: var(--color-blue5); position: relative; display: inline-block; padding: 0 5px; margin: 0 5px; &::after{ position: absolute; content: ""; left: 0; bottom: 0; width: 100%; height: 40%; background-color: var(--color-blue5); opacity: 8%; } } } p{ color: #666; font-size: 15px; } } /* --------------- section style-6 --------------- */ .section-head.style-6{ h2{ color: #000; font-size: 45px; span{ position: relative; padding: 10px 20px; small{ position: relative; z-index: 2; font-size: 45px; color: #fff; } &::before{ position: absolute; content: ""; left: 0; top: 0; height: 100%; width: 100%; background-image: url(../img/shap_style_6.png); background-size: contain; background-repeat: no-repeat; background-position: center; z-index: 1; } } } } /* --------------- section style-8 --------------- */ .section-head.style-8{ h6{ font-weight: normal; font-size: 14px; color: var(--color-main); text-decoration: underline; text-transform: uppercase; margin-bottom: 10px; } h3{ font-size: 40px; text-transform: capitalize; } } /* --------------- section style-9 --------------- */ .section-head.style-9{ h6{ letter-spacing: 0.5s; text-transform: uppercase; color: var(--color-darkBlue2); display: inline-block; position: relative; font-weight: bold; padding: 0 25px; &::after{ position: absolute; content: ""; right: 0; top: 4px; width: 9px; height: 9px; background-color: #6c41ff; transform: rotate(45deg); } &::before{ position: absolute; content: ""; left: 0; top: 4px; width: 9px; height: 9px; background-color: #6c41ff; transform: rotate(45deg); } } h2{ font-size: 40px; color: var(--color-darkBlue2); margin-bottom: 15px; } p{ font-size: 18px; color: #666666; } } /* --------------- section style-12 --------------- */ .section-head.style-12{ h6{ font-size: 14px; font-weight: 400; text-transform: uppercase; letter-spacing: inherit; display: flex; align-items: center; .icon{ width: 25px; } } h2{ font-weight: 600; font-size: 50px; span{ color: transparent; -webkit-text-stroke: 1px var(--color-yellowGreen); } } } /* --------------- section style-13 --------------- */ .section-head.style-13{ h6{ color: #000; font-size: 14px; text-transform: uppercase; position: relative; z-index: 10; &::before{ position: absolute; content: ""; left: calc(50% - 18px); top: calc(50% - 18px); width: 36px; height: 36px; border-radius: 50%; background-color: var(--color-orange3); z-index: -1; animation: scale_up_down linear 1s infinite alternate; } } h2{ font-size: 40px; } &.side-title{ h6{ padding-left: 20px; &::before{ left: 0; } } } }