/*** ============================================= About style1 Css ============================================= ***/ .about-style1 { padding: 130px 0px 140px; } .about-style1 .sec-title { padding-bottom: 52px; } .about-style1__img-box { position: relative; display: block; max-width: 500px; width: 100%; padding-top: 60px; margin-top: 17px; } .about-style1__img-box .round-text { position: relative; display: block; } .about-style1__img-box .round-text { position: absolute; top: 38px; right: -108px; width: 160px; height: 160px; z-index: 3; } .about-style1__img-box .round-text .curved-circle { position: absolute; top: 0px; left: 0px; bottom: 0; right: 0; color: var(--thm-primary-color); font-size: 14px; font-weight: 700; text-transform: uppercase; transform: rotate(90deg); } .about-style1__img-box .inner { position: relative; display: block; border-radius: var(--thm-border-radius); overflow: hidden; z-index: 1; } .about-style1__img-box .inner::before { background: rgba(255, 255, 255, 0.5); content: ""; position: absolute; left: 0; top: 0; width: 0%; height: 100%; opacity: 1; z-index: 9; pointer-events: none; } .about-style1__img-box:hover .inner::before { width: 100%; opacity: 0; -webkit-transition: all 400ms linear; transition: all 400ms linear; } .about-style1__img-box .inner img { width: 100%; transition: .5s ease; transform: scale(1.05); } .about-style1__img-box:hover .inner img { transform: scale(1); } .about-style1__img-box .text-box { position: relative; display: block; padding-right: 26px; text-align: right; margin-top: 22px; } .about-style1__img-box .text-box p { color: var(--thm-black); font-size: 14px; line-height: 24px; font-weight: 700; text-transform: uppercase; font-family: var(--thm-font-2); } .about-style1__img-box .text-box .round { position: absolute; top: 7px; right: 0; width: 12px; height: 12px; border-radius: 50%; background: var(--thm-primary-color); } .about-style1__content-box { position: relative; display: block; } .about-style1__content-box-inner { position: relative; display: block; } .about-style1__content-box-inner p { margin: 0; } .about-style1__content-box-inner .btn-box { position: relative; display: block; margin-top: 22px; margin-bottom: 44px; } .about-style1__content-box-inner .btn-box a { position: relative; display: inline-flex; align-items: center; color: var(--thm-black); font-size: 16px; line-height: 26px; font-weight: 700; text-transform: capitalize; font-family: var(--thm-font-2); } .about-style1__content-box-inner .btn-box a:hover { color: var(--thm-primary-color); } .about-style1__content-box-inner .btn-box a span { position: relative; display: inline-block; padding-right: 5px; color: var(--thm-primary-color); font-size: 34px; line-height: 34px; font-weight: 400; } .about-style1__content-box-inner .img-box { position: relative; display: block; border-radius: var(--thm-border-radius); overflow: hidden; margin-bottom: 51px; } .about-style1__content-box-inner .img-box::before { background: rgba(255, 255, 255, 0.3); content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 0; opacity: 1; z-index: 9; pointer-events: none; } .about-style1__content-box-inner .img-box:hover::before { height: 100%; opacity: 0; -webkit-transition: all 400ms linear; transition: all 400ms linear; } .about-style1__content-box-inner .img-box img { width: 100%; transition: .5s ease; transform: scale(1.05); } .about-style1__content-box-inner .img-box:hover img { transform: scale(1); } .about-style1__content-box-inner h2 { color: transparent; font-size: 24px; line-height: 34px; font-weight: 600; background: -webkit-linear-gradient(var(--thm-primary-color), var(--thm-secondary-color)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } .about-style1__content-box-inner .author-info { position: relative; display: flex; align-items: center; margin-top: 27px; } .about-style1__content-box-inner .author-info .text-box { position: relative; display: block; margin-right: 30px; } .about-style1__content-box-inner .author-info .text-box h3 { font-size: 19px; line-height: 26px; text-transform: capitalize; } .about-style1__content-box-inner .author-info .text-box p { margin: 0; } .about-style1__content-box-inner .author-info .social-links { position: relative; display: flex; align-items: center; padding-left: 30px; } .about-style1__content-box-inner .author-info .social-links::before { position: absolute; top: 0; left: 0; bottom: 0; width: 1px; background: var(--thm-border-color); content: ""; } .about-style1__content-box-inner .author-info .social-links a { position: relative; display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; background: #3b5998; border-radius: 50%; } .about-style1__content-box-inner .author-info .social-links a.clr2 { background: #55acee; } .about-style1__content-box-inner .author-info .social-links a+a { margin-left: 10px; } .about-style1__content-box-inner .author-info .social-links a span { position: relative; display: inline-block; color: #ffffff; font-size: 15px; line-height: 15px; } /*** ============================================= About style2 Css ============================================= ***/ .about-style2 { position: relative; display: block; padding: 140px 0px 140px; z-index: 1; } .about-style2__dashboard { position: relative; display: block; padding-left: 100px; margin-top: 40px; z-index: 1; } .about-style2__dashboard .shape1 { position: absolute; top: -40px; left: 0; z-index: -1; } .about-style2__dashboard .inner { position: relative; display: block; overflow: hidden; max-width: 370px; width: 100%; border-radius: var(--thm-border-radius); box-shadow: 0px 0px 50px 0px rgba(0, 0, 0, 0.1); border-radius: 10px; z-index: 1; } .about-style2__dashboard .inner img { width: 100%; } .about-style2__content { position: relative; display: block; } .about-style2__content .sec-title { padding-bottom: 33px; } .about-style2__content .text-box { position: relative; display: block; margin-bottom: 29px; } .about-style2__content .text-box p { margin: 0; } .about-style2__content-list { position: relative; display: block; } .about-style2__content-list li { position: relative; display: block; padding-left: 40px; margin-bottom: 15px; } .about-style2__content-list li:last-child { margin-bottom: 0px; } .about-style2__content-list li .icon { position: absolute; top: 0; left: 0; } .about-style2__content-list li .icon span { position: relative; display: inline-block; color: var(--thm-primary-color); font-size: 25px; line-height: 25px; font-weight: 500; top: 1px; } .about-style2__content-list li p { margin: 0; } .about-style2__content .btn-box { position: relative; display: block; margin-top: 47px; } /*** ============================================= About style3 Css ============================================= ***/ .about-style3 { position: relative; display: block; padding: 124px 0px 133px; z-index: 1; } .about-style3__left-content { position: relative; display: block; margin-right: 45px; } .about-style3__left-content ul { position: relative; display: block; } .about-style3__left-content ul li { position: relative; display: block; border-bottom: 1px solid var(--thm-border-color); padding-bottom: 60px; margin-top: 52px; } .about-style3__left-content ul li:first-child { margin-top: 0px; } .about-style3__left-content ul li:last-child { border-bottom: none; padding-bottom: 0px; } .about-style3__left-content ul li .title-box { position: relative; display: block; } .about-style3__left-content ul li .title-box p { font-size: 14px; line-height: 24px; font-weight: 700; text-transform: uppercase; font-family: var(--thm-font-2); margin-bottom: 6px; margin-top: -7px; } .about-style3__left-content ul li .title-box h2 { font-size: 24px; line-height: 32px; } .about-style3__left-content ul li .title-box h2 a { color: var(--thm-white); } .about-style3__left-content ul li .title-box h2 a:hover { color: var(--thm-primary-color); } .about-style3__left-content ul li .bottom-content { position: relative; display: flex; align-items: center; margin-top: 35px; } .about-style3__left-content ul li .bottom-content .icon-box { position: relative; display: flex; align-items: center; justify-content: center; width: 170px; height: 90px; border-radius: 45px; background: var(--thm-black-bg-2); } .about-style3__left-content ul li .bottom-content .icon-box span { position: relative; display: inline-block; color: var(--thm-primary-color); font-size: 35px; line-height: 35px; -webkit-transition: all 0.4s ease; -o-transition: all 0.4s ease; transition: all 0.4s ease; } .about-style3__left-content ul li .bottom-content .icon-box a { position: relative; display: inline-block; font-size: 30px; line-height: 0; margin: 0 7px; } .about-style3__left-content ul li .bottom-content .icon-box a:hover span { color: var(--thm-white); } .about-style3__left-content ul li .bottom-content .text-box { position: relative; display: block; margin-left: 30px; flex: 1; } .about-style3__left-content ul li .bottom-content .text-box p { margin: 0; } .about-style3__left-content ul li .bottom-content .text-box .btn-box { position: relative; display: block; margin-top: 12px; } .about-style3__left-content ul li .bottom-content .text-box .btn-box a { position: relative; display: inline-block; color: var(--thm-white); font-size: 16px; line-height: 20px; font-weight: 700; text-transform: capitalize; } .about-style3__left-content ul li .bottom-content .text-box .btn-box a:hover { color: var(--thm-primary-color); padding-left: 30px; } .about-style3__left-content ul li .bottom-content .text-box .btn-box a::before { position: absolute; top: -1px; left: 0; color: var(--thm-primary-color); font-size: 25px; line-height: 25px; font-weight: 400; transform: scale(0); transition: width 0.5s ease; transition: all 0.5s ease; font-family: 'icomoon' !important; content: "\e90a"; } .about-style3__left-content ul li .bottom-content .text-box .btn-box a:hover::before { transform: scale(1.0); } .about-style3__right-content { position: relative; display: block; margin-left: -15px; padding-left: 60px; } .about-style3__right-content::before { position: absolute; top: 7px; left: 0; bottom: 7px; width: 1px; background: var(--thm-border-color); content: ""; } .about-style3__right-content .sec-title { padding-bottom: 31px; } .about-style3__right-content .text1 { font-size: 22px; line-height: 32px; margin-bottom: 25px; } .about-style3__right-content h3 { color: var(--thm-white); font-size: 19px; line-height: 26px; margin-bottom: 27px; } .about-style3__right-content .text3 { margin: 0; } .about-style3__right-content .btn-box { position: relative; display: block; margin-top: 36px; } .about-style3__right-content .btn-box a { position: relative; display: inline-flex; align-items: center; color: var(--thm-white); font-size: 16px; line-height: 26px; font-weight: 600; text-transform: capitalize; } .about-style3__right-content .btn-box a span { position: relative; display: inline-block; font-size: 32px; line-height: 32px; padding-right: 4px; } .about-style3__right-content .btn-box a:hover { color: var(--thm-primary-color); } /*** ============================================= About style4 Css ============================================= ***/ .about-style4 { position: relative; display: block; padding: 0px 0px 140px; z-index: 1; } .about-style4__content { position: relative; display: block; margin-right: 10px; z-index: 1; } .about-style4__content .shape1 { position: absolute; top: -25px; right: 0; opacity: 0.1; z-index: -1; } .about-style4__content .sec-title { padding-bottom: 59px; } .about-style4-tab__button { position: relative; display: block; } .about-style4-tab__button ul { position: relative; display: block; margin-left: -10px; margin-right: -10px; } .about-style4-tab__button ul li { position: relative; display: block; float: left; padding-left: 10px; padding-right: 10px; margin-bottom: 20px; } .about-style4-tab__button ul li span { position: relative; display: block; color: var(--thm-white); font-size: 16px; line-height: 50px; font-weight: 700; text-transform: capitalize; border-radius: 25px; background: #212322; border: 1px solid #212322; font-family: var(--thm-font-2); padding: 0px 25px 0px; transition: all 400ms linear; transition-delay: 0.1s; cursor: pointer; } .about-style4-tab__button ul li:hover span, .about-style4-tab__button ul li.active-btn-item span { background: transparent; border-color: var(--thm-primary-color); } .about-style4__tab .tabs-content-box { position: relative; display: block; top: -9px; } .about-style4__tab .tab-content-box-item { position: absolute; left: 0px; top: 0px; width: 100%; height: auto; visibility: hidden; } .about-style4__tab .tab-content-box-item.tab-content-box-item-active { position: relative; visibility: visible; z-index: 5; } .about-style4__tab .tab-content-box-item .about-style4-tab-content-box-item { opacity: 0; transform: scaleY(1.0); transform-origin: top bottom; transition: opacity 0.7s ease, transform 0.3s ease, visibility 0.3s ease; } .about-style4__tab .tab-content-box-item.tab-content-box-item-active .about-style4-tab-content-box-item { opacity: 1.0; transform: scaleY(1); transform-origin: bottom top; } .about-style4__img { position: relative; display: block; margin-left: 10px; } .about-style4__img .title-box { position: relative; display: block; margin-bottom: 43px; } .about-style4__img .title-box h2 { font-size: 24px; line-height: 34px; text-transform: capitalize; margin-bottom: 26px; } .about-style4__img .title-box p { margin: 0; } .about-style4__img1 { position: relative; display: block; overflow: hidden; border-radius: var(--thm-border-radius); z-index: 1; } .about-style4__img1::before { background: rgba(255, 255, 255, 0.3); content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 0; opacity: 1; z-index: 9; pointer-events: none; } .about-style4__img1:hover::before { height: 100%; opacity: 0; -webkit-transition: all 400ms linear; transition: all 400ms linear; } .about-style4__img1 img { width: 100%; transition: .5s ease; transform: scale(1.05); } .about-style4__img1:hover img { transform: scale(1); } /*** ============================================= About Style5 Css ============================================= ***/ .about-style5 { position: relative; display: block; padding: 140px 0px 140px; overflow: hidden; z-index: 10; } .about-style5__bg { position: absolute; top: 0; right: 0; bottom: 0; width: calc((100% + 900px) / 2); background-size: auto; background-repeat: no-repeat; background-position: center top; z-index: -1; } .about-style5__img-box { position: relative; display: block; overflow: hidden; border-radius: 10px; margin-right: -30px; } .about-style5__img-box::before { position: absolute; content: ''; top: 0; left: 0; right: 0; bottom: 0; background-color: #000000; opacity: 0; z-index: 1; transition: opacity 0.5s ease; transition: all 0.5s ease; } .about-style5__img-box:hover::before { opacity: 0.30; } .about-style5__img-box img { width: 100%; transform: scale(1.0); transition: all 1500ms ease; } .about-style5__img-box:hover img { transform: scale(1.05) rotate(0deg); } .about-style5__content { position: relative; display: block; padding-top: 60px; padding-left: 100px; margin-right: -20px; } .about-style5__content .sec-title { padding-bottom: 11px; } .about-style5__content .inner { position: relative; display: block; } .about-style5__content .inner ul { position: relative; display: block; } .about-style5__content .inner ul li { display: inline-flex; align-items: center; color: var(--thm-black); font-size: 44px; line-height: 64px; font-weight: 600; font-family: var(--thm-font-2); } .about-style5__content .inner ul li span { color: #cec8c7; } .about-style5__content .inner ul li:nth-child(3) span { margin-left: 15px; } .about-style5__content .inner ul li:nth-child(6) span { margin-left: 15px; } .about-style5__content .inner ul li span.color2 { color: var(--thm-primary-color); } .about-style5__content .inner ul li a { position: relative; display: inline-block; } .about-style5__content .inner ul li a i { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 60px; height: 60px; border-radius: 50%; background-color: var(--thm-primary-color); color: var(--thm-white); font-size: 30px; margin-left: 20px; margin-right: 20px; } .about-style5__content .inner ul li a.bg-color i { background-color: var(--thm-black); } .about-style5__content .inner ul li a.bg-gray i { color: var(--thm-black); background-color: #f5f0ea; } .about-style5__content .author-info { position: relative; display: flex; align-items: center; margin-top: 40px; } .about-style5__content .author-info .text-box { position: relative; display: block; margin-right: 30px; } .about-style5__content .author-info .text-box h3 { font-size: 19px; line-height: 26px; text-transform: capitalize; padding-bottom: 3px; } .about-style5__content .author-info .text-box p { margin: 0; } .about-style5__content .author-info .social-links { position: relative; display: flex; align-items: center; padding-left: 31px; } .about-style5__content .author-info .social-links::before { position: absolute; top: 0; left: 0; bottom: 0; width: 1px; background: var(--thm-border-color); content: ""; } .about-style5__content .author-info .social-links a { position: relative; display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; background: #3b5998; border-radius: 50%; } .about-style5__content .author-info .social-links a.clr2 { background: #55acee; } .about-style5__content .author-info .social-links a+a { margin-left: 10px; } .about-style5__content .author-info .social-links a span { position: relative; display: inline-block; color: #ffffff; font-size: 15px; line-height: 15px; } /*** ============================================= End Css ============================================= ***/