diff --git a/hesabixCore/src/Entity/BlogComment.php b/hesabixCore/src/Entity/BlogComment.php index 64412ae..8f4212d 100644 --- a/hesabixCore/src/Entity/BlogComment.php +++ b/hesabixCore/src/Entity/BlogComment.php @@ -31,6 +31,15 @@ class BlogComment #[ORM\Column(type: Types::BOOLEAN, nullable: true)] private ?bool $publish = null; + #[ORM\Column(length: 255)] + private ?string $name = null; + + #[ORM\Column(length: 255)] + private ?string $email = null; + + #[ORM\Column(length: 255, nullable: true)] + private ?string $website = null; + public function getId(): ?int { return $this->id; @@ -95,4 +104,40 @@ class BlogComment return $this; } + + public function getName(): ?string + { + return $this->name; + } + + public function setName(string $name): static + { + $this->name = $name; + + return $this; + } + + public function getEmail(): ?string + { + return $this->email; + } + + public function setEmail(string $email): static + { + $this->email = $email; + + return $this; + } + + public function getWebsite(): ?string + { + return $this->website; + } + + public function setWebsite(?string $website): static + { + $this->website = $website; + + return $this; + } } diff --git a/hesabixCore/src/Form/CommentType.php b/hesabixCore/src/Form/CommentType.php index a2d2769..b47591b 100644 --- a/hesabixCore/src/Form/CommentType.php +++ b/hesabixCore/src/Form/CommentType.php @@ -4,8 +4,11 @@ namespace App\Form; use App\Entity\BlogComment; use Symfony\Component\Form\AbstractType; +use Symfony\Component\Form\Extension\Core\Type\EmailType; use Symfony\Component\Form\Extension\Core\Type\SubmitType; +use Symfony\Component\Form\Extension\Core\Type\TextareaType; use Symfony\Component\Form\Extension\Core\Type\TextType; +use Symfony\Component\Form\Extension\Core\Type\UrlType; use Symfony\Component\Form\FormBuilderInterface; use Symfony\Component\OptionsResolver\OptionsResolver; @@ -14,7 +17,10 @@ class CommentType extends AbstractType public function buildForm(FormBuilderInterface $builder, array $options): void { $builder - ->add('body',TextType::class,['attr'=>['autocomplete'=>'off']]) + ->add('name',TextType::class) + ->add('email',EmailType::class) + ->add('website',UrlType::class) + ->add('body',TextareaType::class,['attr'=>['autocomplete'=>'off','rows'=>5]]) ->add('submit',SubmitType::class) ; } diff --git a/hesabixCore/templates/blog/post.html.twig b/hesabixCore/templates/blog/post.html.twig index 62464ca..fe95d5a 100644 --- a/hesabixCore/templates/blog/post.html.twig +++ b/hesabixCore/templates/blog/post.html.twig @@ -59,6 +59,22 @@
ارسال دیدگاه
{{ form_start(form) }} {{ form_errors(form) }} +
+
+
+ {{ form_row(form.name) }} +
+
+ {{ form_row(form.email) }} +
+
+ {{ form_row(form.website) }} +
+
+ {{ form_row(form.body) }} +
+
+
{{ form_end(form) }} {% endif %} diff --git a/public_html/css/style.css b/public_html/css/style.css new file mode 100644 index 0000000..f0b640a --- /dev/null +++ b/public_html/css/style.css @@ -0,0 +1,6005 @@ +/* + Theme Name: Xolio - Creative Agency HTML5 Template + Support: themegenix@gmail.com + Description: Xolio - Creative Agency HTML5 Template. + Version: 1.0 +*/ + +/* CSS Index +============================ +01. Variable CSS +02. Header +03. Mobile Menu +04. Breadcrumb +05. Banner +06. Slider +07. Services +08. About +09. Company +10. Success +11. History +12. Agency +13. Developr +14. Tools +15. Brand +16. Client +17. Team +18. Community +19. Counter +20. Project +21. Faq +22. Testimonial +23. Consultation +24. Pricing +25. Work +26. Blog +27. Pagination +28. Newsletter +29. Contact +30. Footer +31. Preloader +============================ +*/ + + + +/*============================= + 1. Google Fonts +===============================*/ + +/*============================= + 01. Variable CSS +===============================*/ +:root { + --tg-body-font-family: 'yekan', sans-serif; + --tg-heading-font-family: 'iransans', sans-serif; + --tg-primary-color: #F89E52; + --tg-secondary-color: #3482FF; + --tg-body-font-color: #666666; + --tg-heading-font-color: #0B0B0B; + --tg-banner-title-color: #2A2A2A; + --tg-paragraph-color: #666666; + --tg-body-font-size: 16px; + --tg-body-font-weight: 400; + --tg-heading-font-weight: 700; + --tg-body-line-height: 1.7; + --tg-heading-line-height: 1.2; + --tg-section-background: #292F3F; + --tg-section-background-two: #1F1D28; + --tg-section-background-three: #26242D; + --tg-menu-color: #252541; + --tg-arrow-color: #6F7C90; + --tg-border-color: #F3F3F3; + --tg-border-color-two: #D9D9D9; + --tg-form-border-color: #D5D5D5; + --tg-old-lace: #FFF2E4; + --tg-magnolia: #F0EBFF; + --tg-lavender: #E4F1FF; + --tg-blue: #2B78F3; + --tg-blue-two: #265FDB; + --tg-blue-two-three: #398DDB; + --tg-indigo: #A666F7; + --tg-purple: #9270FF; + --tg-dark-electric: #605E7A; + --tg-pink: #F84D55; + --tg-red: #F76766; + --tg-orange: #F26F3B; + --tg-yellow: #F1F026; + --tg-yellow-two: #F5A623; + --tg-yellow-three: #ECB321; + --tg-green: #1B9A81; + --tg-green-two: #7DDB39; + --tg-teal: #57C0CE; + --tg-cyan: #0dcaf0; + --tg-white: #ffffff; + --tg-black: #292930; + --tg-black-two: #1D1D25; + --tg-black-three: #1E1C1E; + --tg-black-four: #212737; + --tg-gray: #F4F3F9; + --tg-gray-two: #FBFDFF; + --tg-gray-three: #7E7E8C; + --tg-gray-four: #B8B8C5; + --tg-gray-five: #818080; + --tg-gray-six: #F7F7F7; + --tg-gray-seven: #6C7183; + --tg-gray-eight: #F4F4F4; + --tg-granite-gray: #6B645D; + --tg-bright-gray: #EDEEF1; + --tg-spanish-gray: #989898; + --tg-cadet-grey: #92A5B4; + --tg-cultured: #F3F7FA; + --tg-black-coral: #5F5F71; + --tg-silver: #C5C7CB; + --tg-silver-two: #AEAEAE; + --tg-silver-three: #AFAFAF; + --tg-silver-three: #8D959B; + --tg-silver-foil: #B0B0B0; + --tg-manatee: #9E9DA9; + --tg-onyx: #1D1D25; + --facebook: #3b5998; + --twitter: #00acee; + --linkedin: #1976d2; + --pinterest: #3b5998; + --youtube: #c4302b; + --skype: #00aff0; +} + +@font-face { + font-family: yekan; + font-style: normal; + font-weight: 300; + src: url('../fonts/yekan/yekanRegular.eot'); + src: url('../fonts/yekan/yekanRegulard41d.eot?#iefix') format('embedded-opentype'), + url('../fonts/yekan/yekanRegular.woff') format('woff'), + url('../fonts/yekan/yekanRegular.ttf') format('truetype'); + font-display: swap; +} +@font-face { + font-family: yekannormal; + font-style: normal; + font-weight: normal; + src: url('../fonts/yekan/yekanMedium.eot'); + src: url('../fonts/yekan/yekanMediumd41d.eot?#iefix') format('embedded-opentype'), + url('../fonts/yekan/yekanMedium.woff') format('woff'), + url('../fonts/yekan/yekanMedium.ttf') format('truetype'); + font-display: swap; +} +@font-face { + font-family: yekanbold; + font-style: normal; + font-weight: bold; + src: url('../fonts/yekan/yekanBold.eot'); + src: url('../fonts/yekan/yekanBoldd41d.eot?#iefix') format('embedded-opentype'), + url('../fonts/yekan/yekanBold.woff') format('woff'), + url('../fonts/yekan/yekanBold.ttf') format('truetype'); + font-display: swap; +} +@font-face { + font-family: IRANSans; + font-style: normal; + font-weight: bold; + src: url('../fonts/eot/IRANSansWeb(FaNum)_Bold.eot'); + src: url('../fonts/eot/IRANSansWeb(FaNum)_Bold.eot?#iefix') format('embedded-opentype'), /* IE6-8 */ + url('../fonts/woff2/IRANSansWeb(FaNum)_Bold.woff2') format('woff2'), /* FF39+,Chrome36+, Opera24+*/ + url('../fonts/woff/IRANSansWeb(FaNum)_Bold.woff') format('woff'), /* FF3.6+, IE9, Chrome6+, Saf5.1+*/ + url('../fonts/ttf/IRANSansWeb(FaNum)_Bold.ttf') format('truetype'); +} +body { + font-family: var(--tg-body-font-family); + font-weight: var(--tg-body-font-weight); + font-size: var(--tg-body-font-size); + line-height: var(--tg-body-line-height); + color: var(--tg-body-font-color); + font-style: normal; + direction:rtl; +} +.black-background { + background: var(--tg-black); +} +img, +.img { + max-width: 100%; + transition: all 0.3s ease-out 0s; +} +.f-left { + float: right +} +.f-right { + float: left +} +.fix { + overflow: hidden +} +a, +button { + -webkit-transition: all 0.3s ease-out 0s; + -moz-transition: all 0.3s ease-out 0s; + -ms-transition: all 0.3s ease-out 0s; + -o-transition: all 0.3s ease-out 0s; + transition: all 0.3s ease-out 0s; + text-decoration: none; +} +a:focus, +.btn:focus, +button:focus { + text-decoration: none; + outline: none; + box-shadow: none; +} + +a:hover, +.portfolio-cat a:hover, +.footer -menu li a:hover { + color: var(--tg-primary-color); + text-decoration: none; +} +a, +button { + color: var(--tg-primary-color); + outline: medium none; + text-decoration: none; +} +.btn:focus, +button:focus, +input:focus, +input:focus, +textarea, +textarea:focus { + outline: 0 +} +.uppercase { + text-transform: uppercase; +} +.capitalize { + text-transform: capitalize; +} +h1, +h2, +h3, +h4, +h5, +h6 { + font-family: var(--tg-heading-font-family); + color: var(--tg-heading-font-color); + margin-top: 0px; + margin-bottom: .7rem; + font-style: normal; + line-height: var(--tg-heading-line-height); + font-weight: var(--tg-heading-font-weight); + text-transform: inherit; +} +h1 a, +h2 a, +h3 a, +h4 a, +h5 a, +h6 a { + color: inherit; +} +h1 { + font-size: 2.5rem; +} +h2 { + font-size: 2rem; +} +h3 { + font-size: 1.75rem; +} +h4 { + font-size: 1.5rem; +} +h5 { + font-size: 1.25rem; +} +h6 { + font-size: 1rem; +} +.list-wrap { + margin: 0px; + padding: 0px; +} +.list-wrap li { + list-style: none +} +p { + font-size: var(--tg-body-font-size); + font-weight: var(--tg-body-font-weight); + line-height: var(--tg-body-line-height); + color: var(--tg-paragraph-color); + margin-bottom: 15px; +} +hr { + border-bottom: 1px solid var(--tg-primary-color); + border-top: 0 none; + margin: 30px 0; + padding: 0; +} +label { + color: var(--tg-body-font-color); + cursor: pointer; + font-size: 16px; + font-weight: 400; +} +*::-moz-selection { + background: var(--tg-primary-color); + color: var(--tg-white); + text-shadow: none; +} +::-moz-selection { + background: var(--tg-primary-color); + color: var(--tg-white); + text-shadow: none; +} +::selection { + background: var(--tg-primary-color); + color: var(--tg-white); + text-shadow: none; +} +*::-moz-placeholder { + color: var(--tg-body-font-color); + font-size: var(--tg-body-font-size); + opacity: 1; +} +*::placeholder { + color: var(--tg-body-font-color); + font-size: var(--tg-body-font-size); + opacity: 1; +} +.theme-overlay { + position: relative +} +.theme-overlay::before { + background: var(--tg-primary-color) none repeat scroll 100% 0; + content: ""; + height: 100%; + right: 0; + opacity: 0.6; + position: absolute; + top: 0; + width: 100%; +} +.separator { + border-top: 1px solid var(--tg-primary-color); +} + +/* Bootstrap 5 */ +.container { + padding-right: 15px; + padding-left: 15px; +} +.row { + --bs-gutter-x: 30px; +} +.row.g-0 { + --bs-gutter-x: 0; +} +.gutter-y-30 { + --bs-gutter-y: 30px; +} + +/*============================= + 1. Button style +===============================*/ +.btn { + user-select: none; + background: var(--tg-secondary-color) none repeat scroll 100% 0; + border: medium none; + border-radius: 20px; + color: var(--tg-white); + cursor: pointer; + display: inline-block; + font-size: 16px; + font-weight: 600; + letter-spacing: 0; + line-height: 1; + margin-bottom: 0px; + padding: 28px 55px; + text-align: center; + text-transform: capitalize; + touch-action: manipulation; + transition: all 700ms ease 0s; + vertical-align: middle; + white-space: nowrap; + position: relative; + overflow: hidden; + z-index: 1; +} +.btn span { + background: var(--tg-primary-color) none repeat scroll 100% 0; + border-radius: 50%; + display: block; + height: 0; + position: absolute; + transform: translate(50%, -50%); + -moz-transform: translate(50%, -50%); + -webkit-transform: translate(50%, -50%); + -ms-transform: translate(50%, -50%); + -o-transform: translate(50%, -50%); + transition: width 0.6s ease 0s, height 0.6s ease 0s; + -moz-transition: width 0.6s ease 0s, height 0.6s ease 0s; + -webkit-transition: width 0.6s ease 0s, height 0.6s ease 0s; + -ms-transition: width 0.6s ease 0s, height 0.6s ease 0s; + -o-transition: width 0.6s ease 0s, height 0.6s ease 0s; + width: 0; + z-index: -1; +} +.btn:hover > span { + height: 562.5px; + width: 562.5px; +} +.btn:hover { + color: var(--tg-white); +} +.breadcrumb > .active { + color: var(--tg-primary-color); +} + +/* scrollUp */ +.scroll-top { + width: 40px; + height: 40px; + line-height: 40px; + position: fixed; + bottom: -10%; + left: 30px; + font-size: var(--tg-body-font-size); + border-radius: 6px; + z-index: 99; + color: var(--tg-white); + text-align: center; + cursor: pointer; + background: var(--tg-primary-color); + transition: 1s ease; + border: none; +} +.scroll-top.open { + bottom: 30px; +} +.scroll-top::after { + position: absolute; + z-index: -1; + content: ''; + top: 100%; + right: 5%; + height: 10px; + width: 90%; + opacity: 1; + background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.25) 0%, rgba(0, 0, 0, 0) 80%); +} +.scroll-top:hover { + background: var(--tg-secondary-color); +} + + +/*============================= + 02. Header +===============================*/ +.custom-container { + max-width: 1400px; +} +.transparent-header { + position: absolute; + right: 0; + top: 0px; + width: 100%; + z-index: 9; + height: auto; +} +.menu-area { + padding: 7px 0; +} +.menu-nav { + display: flex; + align-items: center; + flex-wrap: wrap; + justify-content: flex-start; +} +.navbar-wrap { + display: flex; + flex-grow: 1; +} +.navbar-wrap ul { + display: flex; + flex-direction: row; + flex-wrap: wrap; + padding: 0 0; + margin: 0 auto 0 0; +} +.navbar-wrap ul li { + list-style: none; + display: block; + position: relative; +} +.navbar-wrap ul li a { + font-size: 16px; + font-weight: 500; + text-transform: capitalize; + color: var(--tg-menu-color); + padding: 35px 18px; + display: block; + line-height: 1; + position: relative; + z-index: 1; +} +.navbar-wrap > ul > li.active > a, +.navbar-wrap > ul > li:hover > a { + color: var(--tg-primary-color); +} +.navbar-wrap > ul > li.menu-item-has-children > a::after { + content: "\f078"; + font-family: "Font Awesome 5 Pro"; + font-weight: 400; + margin-right: 10px; +} +.main-menu .navigation li.menu-item-has-children .dropdown-btn { + display: none; +} +.header-action > ul { + display: flex; + align-items: center; + margin-right: 55px; +} +.header-action > ul li { + position: relative; + margin-right: 30px; +} +.header-action ul li:first-child { + margin-right: 0; +} +.header-action ul li a { + color: var(--tg-heading-font-color); + font-size: 14px; +} +.header-action .header-btn .btn { + color: var(--tg-white); + font-size: 16px; + padding: 19px 33px; + font-weight: 500; + background: var(--tg-primary-color); +} +.header-action .header-btn .btn span { + background: var(--tg-secondary-color); +} +.navbar-wrap ul li .sub-menu { + position: absolute; + right: 0; + left: 0; + top: 100%; + min-width: 230px; + border: 1px solid #f5f5f5; + background: var(--tg-white); + margin: 0 0; + transform: scale(1 , 0); + transform-origin: 100% 0; + -webkit-transition: all 0.3s ease-in-out; + -moz-transition: all 0.3s ease-in-out; + -ms-transition: all 0.3s ease-in-out; + -o-transition: all 0.3s ease-in-out; + transition: all 0.3s ease-in-out; + -webkit-box-shadow: 0px 30px 70px 0px rgba(137,139,142,0.15); + -moz-box-shadow: 0px 30px 70px 0px rgba(137,139,142,0.15); + box-shadow: 0px 30px 70px 0px rgba(137,139,142,0.15); + border-radius: 15px; + padding: 18px 0; + display: block; + visibility: hidden; + opacity: 0; + z-index: 9; +} +.navbar-wrap ul li .sub-menu .sub-menu { + left: auto; + right: 100%; + top: 0; +} +.navbar-wrap ul li .sub-menu li { + margin-right: 0; + text-align: right; + display: block; +} +.navbar-wrap ul li .sub-menu li a { + padding: 9px 25px 9px 15px; + line-height: 1.4; + font-weight: 500; + color: var(--tg-menu-color); + text-transform: capitalize; + -webkit-transition: all 0.3s ease-in-out; + -moz-transition: all 0.3s ease-in-out; + -ms-transition: all 0.3s ease-in-out; + -o-transition: all 0.3s ease-in-out; + transition: all 0.3s ease-in-out; +} +.navbar-wrap ul li .sub-menu li a:hover, +.navbar-wrap ul li .sub-menu li.active a { + color: var(--tg-primary-color); +} +.navbar-wrap ul li:hover > .sub-menu { + opacity: 1; + visibility: visible; + transform: scale(1); +} +.sticky-menu { + position: fixed; + right: 0; + margin: auto; + top: 0; + width: 100%; + z-index: 99; + background: var(--tg-white); + -webkit-animation: 1000ms ease-in-out 0s normal none 1 running fadeInDown; + animation: 1000ms ease-in-out 0s normal none 1 running fadeInDown; + -webkit-box-shadow: 0 10px 15px rgba(25, 25, 25, 0.1); + box-shadow: 0 10px 15px rgba(25, 25, 25, 0.1); + border-radius: 0; +} +.sticky-menu.menu-area { + padding: 0 0; +} +.sticky-menu .navbar-wrap ul li .sub-menu { + border-radius: 0 0 15px 15px; +} +.menu-style-two .navbar-wrap ul li .sub-menu { + background: var(--tg-black-two); + border-color: #2a2a34; + box-shadow: 0px 30px 70px 0px rgb(0 0 0 / 15%); +} + +/* header-two */ +.menu-style-two .navbar-wrap ul li a, +.menu-style-two .navbar-wrap ul li .sub-menu li a { + color: var(--tg-white); +} +.menu-style-two .navbar-wrap > ul > li.active > a, +.menu-style-two .navbar-wrap > ul > li:hover > a { + color: var(--tg-primary-color); +} +.menu-style-two.sticky-menu { + background: var(--tg-black); + box-shadow: 0 10px 15px rgb(0 0 0 / 10%); +} + +/*============================= + 03. Mobile Menu +===============================*/ +.nav-outer .mobile-nav-toggler { + position: relative; + float: left; + font-size: 40px; + line-height: 50px; + cursor: pointer; + display: none; + color: var(--tg-white); + margin-left: 30px; + top: 15px; +} +.nav-logo img { + max-width: 150px; +} +.mobile-menu { + position: fixed; + left: 0; + top: 0; + width: 300px; + padding-left: 30px; + max-width: 100%; + height: 100%; + z-index: 99; + border-radius: 0px; + transition: all 0.3s cubic-bezier(0.785, 0.135, 0.15, 0.86); + -moz-transition: all 0.3s cubic-bezier(0.785, 0.135, 0.15, 0.86); + -webkit-transition: all 0.3s cubic-bezier(0.785, 0.135, 0.15, 0.86); + -ms-transition: all 0.3s cubic-bezier(0.785, 0.135, 0.15, 0.86)e; + -o-transition: all 0.3s cubic-bezier(0.785, 0.135, 0.15, 0.86); + -webkit-transform: translateX(-101%); + -ms-transform: translateX(-101%); + transform: translateX(-101%); +} +.mobile-menu .navbar-collapse { + display: block !important; +} +.mobile-menu .nav-logo { + position: relative; + padding: 30px 25px; + text-align: right; +} +.mobile-menu-visible { + overflow: hidden; +} +.mobile-menu-visible .mobile-menu { + -webkit-transform: translateX(0%); + -ms-transform: translateX(0%); + transform: translateX(0%); +} +.mobile-menu .navigation li.current>a:before { + height: 100%; +} +.menu-backdrop { + position: fixed; + left: 0px; + top: 0px; + width: 100%; + height: 100%; + z-index: 2; + transition: all 700ms ease 0s; + opacity: 0; + visibility: hidden; + background: rgb(255 255 255 / 50%); +} +.mobile-menu-visible .menu-backdrop { + opacity: 1; + visibility: visible; +} +.mobile-menu .menu-box { + position: absolute; + right: 0px; + top: 0px; + width: 100%; + height: 100%; + max-height: 100%; + overflow-y: auto; + overflow-x: hidden; + background: var(--tg-white); + padding: 0px 0px; + z-index: 5; + box-shadow: 9px 0 14px 0px rgb(0 0 0 / 6%); +} +.mobile-menu-visible .mobile-menu .menu-box { + opacity: 1; + visibility: visible; +} +.mobile-menu .close-btn { + position: absolute; + left: 15px; + top: 28px; + line-height: 30px; + width: 35px; + text-align: center; + font-size: 20px; + color: var(--tg-primary-color); + cursor: pointer; + z-index: 10; + -webkit-transition: all 0.9s ease; + -o-transition: all 0.9s ease; + transition: all 0.9s ease; +} +.mobile-menu-visible .mobile-menu .close-btn { + -webkit-transform: rotate(-360deg); + -ms-transform: rotate(-360deg); + transform: rotate(-360deg); +} +.mobile-menu .navigation { + position: relative; + display: block; + width: 100%; + float: none; + margin: 0; + padding: 0; +} +.mobile-menu .navigation ul { + padding: 0; + margin: 0; +} +.mobile-menu .navigation li { + position: relative; + display: block; + border-top: 1px solid rgb(0 0 0 / 10%); +} +.mobile-menu .navigation:last-child { + border-bottom: 1px solid rgb(0 0 0 / 10%); +} +.mobile-menu .navigation li>ul>li:first-child { + border-top: 1px solid rgb(0 0 0 / 10%); +} +.mobile-menu .navigation li > a { + position: relative; + display: block; + line-height: 24px; + padding: 10px 25px 10px 60px; + font-size: 16px; + font-weight: 500; + color: var(--tg-heading-font-color); + text-transform: capitalize; + -webkit-transition: all 500ms ease; + -o-transition: all 500ms ease; + transition: all 500ms ease; + border: none; +} +.mobile-menu .navigation li ul li > a { + font-size: 16px; + margin-right: 20px; + text-transform: capitalize; +} +.mobile-menu .navigation li ul li ul li a { + margin-right: 40px; +} +.mobile-menu .navigation li ul li ul li ul li a { + margin-right: 60px; +} +.mobile-menu .navigation li > a:before { + content: ''; + position: absolute; + right: 0; + top: 0; + height: 0; + -webkit-transition: all 500ms ease; + -o-transition: all 500ms ease; + transition: all 500ms ease; +} +.mobile-menu .navigation li.menu-item-has-children .dropdown-btn { + position: absolute; + left: 15px; + top: 6px; + width: 32px; + height: 32px; + text-align: center; + font-size: 16px; + line-height: 32px; + color: var(--tg-white); + background: var(--tg-primary-color); + cursor: pointer; + border-radius: 2px; + -webkit-transition: all 500ms ease; + -o-transition: all 500ms ease; + transition: all 500ms ease; + z-index: 5; +} +.mobile-menu .navigation li.menu-item-has-children .dropdown-btn i { + -webkit-transition: all 500ms ease; + -o-transition: all 500ms ease; + transition: all 500ms ease; +} +.mobile-menu .navigation li.menu-item-has-children .dropdown-btn.open i { + -webkit-transform: rotate(-45deg); + -ms-transform: rotate(-45deg); + transform: rotate(-45deg); + color: var(--tg-primary-color); +} +.mobile-menu .navigation li > ul, +.mobile-menu .navigation li > ul > li > ul { + display: none; +} +.mobile-menu .social-links ul { + display: flex; + position: relative; + text-align: center; + padding: 30px 20px 20px; + align-items: center; + justify-content: center; + flex-wrap: wrap; +} +.mobile-menu .social-links li { + position: relative; + display: inline-block; + margin: 0px 6px 10px; +} +.mobile-menu .social-links li a { + display: flex; + align-items: center; + justify-content: center; + width: 40px; + height: 40px; + position: relative; + line-height: 32px; + font-size: 16px; + color: var(--tg-heading-font-color); + -webkit-transition: all 500ms ease; + -o-transition: all 500ms ease; + transition: all 500ms ease; + border: 1px solid var(--tg-gray); + border-radius: 3px; + -webkit-border-radius: 3px; + -moz-border-radius: 3px; + -ms-border-radius: 3px; + -o-border-radius: 3px; +} +.mobile-menu .social-links li a:hover { + border-color: var(--tg-primary-color); + background: var(--tg-primary-color); + color: var(--tg-white); +} +.menu-area .mobile-nav-toggler { + position: relative; + float: left; + font-size: 30px; + cursor: pointer; + line-height: 1; + color: var(--tg-primary-color); + display: none; + margin-top: 12px; +} + +/* header-contact */ +.header-contact-wrap { + border-top: 1px solid rgba(4, 22, 67, 0.1); + box-shadow: 0px 14px 44px rgba(0, 0, 0, 0.05); + border-bottom: 1px solid rgba(4, 22, 67, 0.1); + background: var(--tg-white); + position: absolute; + right: 0; + top: 100px; + left: 0; + z-index: 5; + padding: 25px 0 50px; + opacity: 0; + visibility: hidden; + transition: .4s ease; + transform: translateY(20px); +} +.header-contact-wrap.active { + opacity: 1; + visibility: visible; + transform: translateY(0); +} +.sticky-menu .header-contact-wrap { + top: 87px; +} +.body-contact-overlay { + position: fixed; + left: 0px; + top: 100px; + width: 100%; + height: 100%; + z-index: 2; + transition: .4s ease; + opacity: 0; + visibility: hidden; + background: rgb(255 255 255 / 50%); +} +.body-contact-overlay.active { + opacity: 1; + visibility: visible; +} +.header-contact-wrap .customer-support-wrap > .title, +.header-contact-wrap .left-side-content > .title { + margin-bottom: 0; + font-weight: 600; + font-size: 18px; + border-bottom: 1px solid var(--tg-border-color); + padding-bottom: 25px; + margin-bottom: 30px; +} +.header-contact-wrap .contact-info-list .list-wrap li { + display: flex; + align-items: flex-start; + line-height: 1.4; + margin-bottom: 20px; +} +.header-contact-wrap .contact-info-list .list-wrap li:last-child { + margin-bottom: 0; +} +.header-contact-wrap .contact-info-list .list-wrap li .icon { + width: 20px; + flex: 0 0 20px; + margin-left: 12px; +} +.header-contact-wrap .contact-info-list .list-wrap li .icon svg { + width: 100%; + height: 100%; + fill: var(--tg-black); +} +.header-contact-wrap .contact-info-list .list-wrap li .content span, +.header-contact-wrap .contact-info-list .list-wrap li .content a { + font-size: 15px; + color: var(--tg-heading-font-color); + display: block; +} +.header-contact-wrap .lats-chat { + margin-top: 20px; +} +.header-contact-wrap .lats-chat a { + font-weight: 600; + font-size: 16px; + text-decoration-line: underline; + text-transform: capitalize; + color: var(--tg-heading-font-color); + display: inline-block; +} +.header-contact-wrap .lats-chat a:hover { + color: var(--tg-primary-color); +} +.our-best-project { + display: flex; + align-items: center; + border: 1px solid rgba(0, 0, 0, 0.1); + border-radius: 20px; + overflow: hidden; + padding: 0 35px 0 0; + margin-right: 40px; +} +.our-best-project .content .title { + font-weight: 400; + font-size: 24px; + margin-bottom: 30px; +} +.our-best-project .content .title span { + font-weight: 700; +} +.our-best-project .content .btn { + background: var(--tg-primary-color); + padding: 17px 43px; + border-radius: 15px; +} +.our-best-project .content .btn span { + background: var(--tg-secondary-color); +} +.our-best-project .thumb { + width: 214px; + flex: 0 0 214px; +} +.customer-support-content { + border: 1px solid rgba(0, 0, 0, 0.1); + border-radius: 20px; + padding: 15px 22px 20px; + margin-bottom: 15px; +} +.customer-support-content .content-top { + display: flex; + align-items: center; + margin-bottom: 8px; +} +.customer-support-content .content-top img { + width: 35px; + flex: 0 0 35px; + margin-left: 11px; +} +.customer-support-content .content-top .title { + font-weight: 600; + font-size: 16px; + margin-bottom: 0; +} +.customer-support-content p { + margin-bottom: 0; + font-weight: 400; + font-size: 14px; + color: var(--tg-heading-font-color); +} +.customer-support-content p a { + text-decoration: underline; + color: #EF4C23; +} +.customer-support-wrap .content-bottom { + flex-direction: column; + align-items: flex-start; + gap: 10px; +} +.customer-support-wrap .content-bottom a { + color: var(--tg-heading-font-color); + font-weight: 600; + line-height: 1.2; +} +.customer-support-wrap .content-bottom a:hover { + color: var(--tg-primary-color); +} + + +.header-contact-wrap.black-background { + background: var(--tg-black); +} +.header-contact-wrap.black-background .contact-info-list .list-wrap li .icon svg { + fill: var(--tg-silver-two); +} +.header-contact-wrap.black-background .customer-support-wrap > .title, +.header-contact-wrap.black-background .left-side-content > .title { + border-bottom: 1px solid rgba(255 255 255 / 10%); + color: var(--tg-white); +} +.header-contact-wrap.black-background { + border-top: 1px solid rgba(255 255 255 / 10%); + border-bottom: 1px solid rgba(255 255 255 / 10%); +} +.header-contact-wrap.black-background .contact-info-list .list-wrap li .content span, +.header-contact-wrap.black-background .contact-info-list .list-wrap li .content a { + color: var(--tg-silver-two); +} +.header-contact-wrap.black-background .our-best-project .content .title { + color: var(--tg-white); +} +.header-contact-wrap.black-background .lats-chat a { + color: var(--tg-white); +} +.header-contact-wrap.black-background .our-best-project { + border: 1px solid rgba(255 255 255 / 10%); +} +.header-contact-wrap.black-background .customer-support-content { + border: 1px solid rgba(255, 255, 255, 0.1); +} +.header-contact-wrap.black-background .customer-support-content .content-top .title { + color: var(--tg-white); +} +.header-contact-wrap.black-background .customer-support-content p { + color: var(--tg-silver-two); +} +.header-contact-wrap.black-background .customer-support-wrap .content-bottom a { + color: var(--tg-white); +} +.body-contact-overlay.black { + background: rgb(0 0 0 / 50%); +} + +/*============================= + 04. Breadcrumb +===============================*/ +.breadcrumb-area { + position: relative; +} +.breadcrumb-content { + text-align: center; +} +.breadcrumb-content .title { + font-size: 78px; + margin-bottom: 45px; + line-height: 1; + color: var(--tg-banner-title-color); +} +.breadcrumb-content .breadcrumb { + display: inline-flex; + flex-wrap: wrap; + padding: 8px 26px; + margin-bottom: 0; + list-style: none; + justify-content: center; + background: var(--tg-gray); + border-radius: 32px; +} +.breadcrumb-content .breadcrumb .breadcrumb-item { + font-size: 18px; + font-weight: 500; + color: var(--tg-banner-title-color); +} +.breadcrumb-content .breadcrumb .breadcrumb-item a { + color: var(--tg-silver-three); +} +.breadcrumb-content .breadcrumb .breadcrumb-item a:hover { + color: var(--tg-primary-color); +} +.breadcrumb-content .breadcrumb-item+.breadcrumb-item::before { + float: right; + padding-left: 5px; + color: var(--tg-banner-title-color); + content: '/'; +} +.breadcrumb-content .breadcrumb-item+.breadcrumb-item { + padding-right: 5px; +} +.breadcrumb-shape-wrap img { + position: absolute; + z-index: -1; +} +.breadcrumb-shape-wrap img:nth-child(1) { + right: 18%; + top: 36%; + animation: animationFramesOne 20s infinite linear; +} +.breadcrumb-shape-wrap img:nth-child(2) { + bottom: 40%; + left: 29%; + animation: animationFramesOne 15s infinite linear; +} + +/* breadcrumb-three */ +.breadcrumb-area-three { + z-index: 1; +} +.breadcrumb-shape-wrap-two .parallax-shape { + position: absolute; + bottom: 20%; + left: 27%; + z-index: -1; +} +.breadcrumb-search { + padding: 0 65px; + margin-top: 45px; +} +.breadcrumb-search form { + position: relative; +} +.breadcrumb-search form label { + position: absolute; + top: 50%; + transform: translateY(-50%); + right: 44px; + color: #929EAF; + font-size: 14px; + line-height: 1; +} +.breadcrumb-search form input { + width: 100%; + border: none; + background: var(--tg-white); + box-shadow: 0px 34px 64px rgba(20, 28, 49, 0.11); + border-radius: 25px; + color: var(--tg-black-two); + font-weight: 400; + font-size: 15px; + padding: 32px 65px 32px 200px; +} +.breadcrumb-search form input::placeholder { + color: #AEB3BB; + font-weight: 400; + font-size: 15px; +} +.breadcrumb-search form .btn { + left: 12px; + top: 50%; + transform: translateY(-50%); + position: absolute; + padding: 24px 70px; +} + +/* breadcrumb-four */ +.breadcrumb-shape-wrap-three img { + position: absolute; + z-index: -1; +} +.breadcrumb-shape-wrap-three img:nth-child(1) { + right: 24%; + bottom: 22%; +} +.breadcrumb-shape-wrap-three img:nth-child(2) { + left: 27%; + top: 24%; +} +.breadcrumb-shape-wrap-three img:nth-child(3) { + bottom: 0; + left: 13%; +} + +/*============================= + 05. Banner +===============================*/ +.banner-bg { + background-image: url(../img/banner/banner_bg.jpg); + background-size: cover; + background-position: center; + padding: 220px 0 120px; + position: relative; + z-index: 1; +} +.banner-content .sub-title { + display: inline-block; + font-size: 18px; + font-weight: 500; + color: var(--tg-heading-font-color); + line-height: 1.2; + background: var(--tg-gray); + padding: 12px 23px; + border-radius: 32px; + margin-bottom: 35px; +} +.banner-content .sub-title strong { + font-weight: 500; + color: var(--tg-secondary-color); +} +.banner-content .title { + font-size: 72px; + margin-bottom: 75px; + text-transform: capitalize; + line-height: 1.10; + color: var(--tg-banner-title-color); +} +.banner-shape-wrap img { + position: absolute; + z-index: -1; +} +.banner-shape-wrap img:nth-child(1) { + right: 0; + top: 0; +} +.banner-shape-wrap img:nth-child(2) { + right: 4%; + top: 16%; +} +.banner-shape-wrap img:nth-child(3) { + right: 18.3%; + top: 20%; +} +.banner-shape-wrap img:nth-child(4) { + right: 11.6%; + top: 29%; +} +.banner-shape-wrap img:nth-child(5) { + right: 8%; + bottom: 27.5%; +} +.banner-shape-wrap img:nth-child(6) { + left: 17.25%; + top: 24%; +} +.banner-shape-wrap img:nth-child(7) { + left: 28.8%; + bottom: 19%; +} + +@-webkit-keyframes float-bob-x { + 0% { + transform: translateX(30px); + } + + 50% { + transform: translateX(10px); + } + + 100% { + transform: translateX(30px); + } +} + +@keyframes float-bob-x { + 0% { + transform: translateX(30px); + } + + 50% { + transform: translateX(10px); + } + + 100% { + transform: translateX(30px); + } +} + +.float-bob-x { + -webkit-animation-name: float-bob-x; + animation-name: float-bob-x; + -webkit-animation-duration: 3s; + animation-duration: 3s; + -webkit-animation-iteration-count: infinite; + animation-iteration-count: infinite; + -webkit-animation-timing-function: linear; + animation-timing-function: linear; +} + +@keyframes contactSwimmer { + + 0%, + 100% { + -webkit-transform: translateX(0) translateY(0) rotate(0); + transform: translateX(0) translateY(0) rotate(0); + } + + 25%, + 75% { + -webkit-transform: translateX(-15px) translateY(20px) rotate(-10deg); + transform: translateX(-15px) translateY(20px) rotate(-10deg); + } + + 50% { + -webkit-transform: translateX(-60px) translateY(35px) rotate(-15deg); + transform: translateX(-60px) translateY(35px) rotate(-15deg); + } +} + +.contactSwimmer { + -webkit-animation-name: contactSwimmer; + animation-name: contactSwimmer; + -webkit-animation-duration: 5s; + animation-duration: 5s; + -webkit-animation-iteration-count: infinite; + animation-iteration-count: infinite; + -webkit-animation-timing-function: linear; + animation-timing-function: linear; +} + +@keyframes ribbonRotate { + + 0%, + 100% { + -webkit-transform: rotate(0); + transform: rotate(0); + } + + 25%, + 75% { + -webkit-transform: rotate(-15deg); + transform: rotate(-15deg); + } + + 50% { + -webkit-transform: rotate(-30deg); + transform: rotate(-30deg); + } +} +.ribbonRotate { + -webkit-animation-name: ribbonRotate; + animation-name: ribbonRotate; + -webkit-animation-duration: 5s; + animation-duration: 5s; + -webkit-animation-iteration-count: infinite; + animation-iteration-count: infinite; + -webkit-animation-timing-function: linear; + animation-timing-function: linear; +} + +@keyframes animation1 { + + 0%, + 100% { + -webkit-transform: rotate(0deg) translateX(0); + transform: rotate(0deg) translateX(0); + } + + 25%, + 75% { + -webkit-transform: rotate(-5deg) translateX(-15px); + transform: rotate(-5deg) translateX(-15px); + } + + 50% { + -webkit-transform: rotate(-10deg) translateX(-30px); + transform: rotate(-10deg) translateX(-30px); + } +} + +.animation1 { + -webkit-animation-name: animation1; + animation-name: animation1; + -webkit-animation-duration: 5s; + animation-duration: 5s; + -webkit-animation-iteration-count: infinite; + animation-iteration-count: infinite; + -webkit-animation-timing-function: linear; + animation-timing-function: linear; +} + + +@keyframes rotateme { + from { + -webkit-transform: rotate(0deg); + transform: rotate(0deg); + } + to { + -webkit-transform: rotate(-360deg); + transform: rotate(-360deg); + } +} +@-webkit-keyframes rotateme { + from { + -webkit-transform: rotate(0deg); + } + to { + -webkit-transform: rotate(-360deg); + } +} + +.rotateme { + -webkit-animation-name: rotateme; + animation-name: rotateme; + -webkit-animation-duration: 8s; + animation-duration: 8s; + -webkit-animation-iteration-count: infinite; + animation-iteration-count: infinite; + -webkit-animation-timing-function: linear; + animation-timing-function: linear; +} + +@keyframes animationFramesOne { + 0% { + transform: translate(0px,0px) rotate(0deg) ; + } + 20% { + transform: translate(-73px,-1px) rotate(-36deg) ; + } + 40% { + transform: translate(-141px,72px) rotate(-72deg) ; + } + 60% { + transform: translate(-83px,122px) rotate(-108deg) ; + } + 80% { + transform: translate(40px,72px) rotate(-144deg) ; + } + 100% { + transform: translate(0px,0px) rotate(0deg) ; + } +} + +@-webkit-keyframes animationFramesOne { + 0% { + -webkit-transform: translate(0px,0px) rotate(0deg) ; + } + 20% { + -webkit-transform: translate(-73px,-1px) rotate(-36deg) ; + } + 40% { + -webkit-transform: translate(-141px,72px) rotate(-72deg) ; + } + 60% { + -webkit-transform: translate(-83px,122px) rotate(-108deg) ; + } + 80% { + -webkit-transform: translate(40px,72px) rotate(-144deg) ; + } + 100% { + -webkit-transform: translate(0px,0px) rotate(0deg) ; + } +} + +.animationFramesOne { + -webkit-animation: animationFramesOne 12s linear infinite; + animation: animationFramesOne 12s linear infinite; +} + +/* banner-two */ +.banner-area-two { + padding: 160px 0 130px; + position: relative; + overflow: hidden; +} +.banner-img-two { + margin-right: 80px; +} +.banner-content-two .sub-title { + font-weight: 500; + font-size: 20px; + display: block; + color: var(--tg-yellow); + margin-bottom: 20px; +} +.banner-content-two .title { + font-weight: 700; + font-size: 68px; + margin-bottom: 60px; + color: var(--tg-white); +} +.banner-content-two .title span { + color: var(--tg-purple); +} +.banner-content-two .banner-content-bottom { + display: flex; + align-items: center; + flex-wrap: wrap; + gap: 38px; +} +.banner-content-bottom .list-wrap { + display: flex; + align-items: center; + gap: 20px; +} +.banner-shape-wrap-two img { + position: absolute; + z-index: -1; +} +.banner-shape-wrap-two img:nth-child(1) { + right: 9.7%; + top: 25.4%; +} +.banner-shape-wrap-two img:nth-child(2) { + right: 10.4%; + bottom: 24.5%; +} +.banner-shape-wrap-two img:nth-child(3) { + right: 42%; + top: 17%; +} +.banner-shape-wrap-two img:nth-child(4) { + left: 14.3%; + bottom: 31.5%; + animation: animationFramesOne 25s infinite linear; +} + +/*============================= + 06. Slider +===============================*/ +.slider-area .slick-slide img { + display: inline-block; +} +.slider-area { + padding: 190px 0 150px; + position: relative; + overflow: hidden; +} +.slider-content .title { + font-size: 78px; + margin-bottom: 35px; +} +.slider-content p { + margin-bottom: 40px; + color: var(--tg-manatee); + font-size: 18px; + text-transform: capitalize; + width: 80%; +} +.slider-btn { + display: flex; + align-items: center; + gap: 10px 70px; +} +.slider-btn .popup-video { + color: #858585; + font-weight: 500; + display: flex; + align-items: center; +} +.slider-btn .popup-video i { + width: 72px; + height: 72px; + flex: 0 0 72px; + display: flex; + align-items: center; + justify-content: center; + background: var(--tg-primary-color); + color: var(--tg-white); + font-size: 18px; + border-radius: 50%; + margin-left: 18px; + position: relative; + z-index: 1; +} +.mfp-iframe-holder .mfp-content { + max-width: 1200px; +} +.mfp-image-holder .mfp-close, +.mfp-iframe-holder .mfp-close { + color: var(--tg-primary-color); +} +.slider-active .slick-dots { + margin: 0; + padding: 0; + display: flex; + align-items: center; + gap: 10px; + position: absolute; + right: 16.4%; + bottom: -50px; +} +.slider-active .slick-dots li { + list-style: none; + line-height: 0; +} +.slider-active .slick-dots li button { + text-indent: -999999999px; + width: 16px; + height: 16px; + border-radius: 50%; + border: 2px solid var(--tg-border-color-two); + background: transparent; + position: relative; + transition: .3s; +} +.slider-active .slick-dots li button::before { + content: ""; + position: absolute; + right: 50%; + top: 50%; + transform: translate(50%, -50%); + width: 7px; + height: 7px; + border-radius: 50%; + background: var(--tg-primary-color); + opacity: 0; + transition: .3s; +} +.slider-active .slick-dots li.slick-active button { + border-color: var(--tg-primary-color); +} +.slider-active .slick-dots li.slick-active button::before { + opacity: 1; +} +.slider-shape-wrap img { + position: absolute; + z-index: -1; +} +.slider-shape-wrap img:nth-child(1) { + right: 0; + top: 0; +} +.slider-shape-wrap img:nth-child(2) { + right: 7%; + top: 28%; + animation: animationFramesOne 25s infinite linear; +} +.slider-shape-wrap img:nth-child(3) { + right: 46%; + bottom: 37%; + animation: ribbonRotate 8s infinite linear; +} +.slider-shape-wrap img:nth-child(4) { + left: 47%; + top: 32%; + animation: contactSwimmer 10s infinite linear; +} +.slider-shape-wrap img:nth-child(5) { + left: 0; + top: 0; +} +.slider-shape-wrap img:nth-child(6) { + left: 12%; + top: 22%; + animation: alltuchtopdown 6s infinite linear; +} +.pulse::after { + content: ""; + position: absolute; + right: 50%; + top: 50%; + height: 100%; + width: 100%; + background: var(--tg-primary-color); + z-index: -1; + border-radius: 50%; + transform: translate(50%, -50%); + animation: pulse-border 1500ms ease-out infinite; +} +@keyframes pulse-border { + 0% { + transform: translateX(50%) translateY(-50%) translateZ(0) scale(1); + opacity: 1; + } + + 100% { + transform: translateX(50%) translateY(-50%) translateZ(0) scale(1.5); + opacity: 0; + } +} +@-webkit-keyframes pulse-border { + 0% { + transform: translateX(50%) translateY(-50%) translateZ(0) scale(1); + opacity: 1; + } + + 100% { + transform: translateX(50%) translateY(-50%) translateZ(0) scale(1.5); + opacity: 0; + } +} +@keyframes alltuchtopdown { + 0% { + transform: rotateX(0deg) translateY(0px); + } + 50% { + transform: rotateX(0deg) translateY(-40px); + } + 100% { + transform: rotateX(0deg) translateY(0px); + } +} + +/*============================= + 07. Services +===============================*/ +.services-item { + background: var(--tg-white); + box-shadow: 0px 15px 30px rgba(61, 90, 125, 0.08); + border-radius: 20px; + padding: 43px 38px 49px; + text-align: center; + margin-bottom: 30px; + border: 1px solid var(--tg-border-color); + transition: .3s linear; +} +.services-area .row [class*="col-"]:nth-child(even) .services-item { + margin-top: 50px; +} +.services-icon { + width: 87px; + height: 87px; + margin: 0 auto 35px; + position: relative; + z-index: 1; + transition: .3s linear; + display: flex; + align-items: center; + justify-content: center; +} +.services-icon::before { + content: ""; + position: absolute; + right: 0; + top: 0; + width: 100%; + height: 100%; + background: var(--tg-old-lace); + border-radius: 50%; + z-index: -1; +} +.services-icon img { + max-width: 66px; + transform: translate(10px, 15px); + transition: .4s linear; +} +.services-item:hover .services-icon img { + transform: translate(0) !important; +} +.services-content .title { + font-size: 24px; + margin-bottom: 12px; +} +.services-content p { + margin-bottom: 0; + color: var(--tg-granite-gray); + opacity: 0.7; +} +.services-area .row [class*="col-"]:nth-child(2) .services-item .services-icon::before { + background: var(--tg-magnolia); +} +.services-area .row [class*="col-"]:nth-child(3) .services-item .services-icon::before { + background: var(--tg-bright-gray); +} +.services-area .row [class*="col-"]:nth-child(4) .services-item .services-icon::before { + background: var(--tg-lavender); +} +.services-area .row [class*="col-"]:nth-child(2) .services-icon img { + transform: translate(-20px, 15px); +} +.services-area .row [class*="col-"]:nth-child(3) .services-icon img { + transform: translate(-20px, -20px); +} +.services-area .row [class*="col-"]:nth-child(4) .services-icon img { + transform: translate(30px, 18px); +} + +/* services-two */ +.services-area-two { + background: var(--tg-onyx); + padding: 200px 0 90px; + margin-top: -85px; +} +.services-item-two { + padding: 45px 35px 40px; + border-radius: 20px; + background: transparent; + transition: .3s; + margin-bottom: 30px; +} +.services-item-two.active, +.services-item-two:hover { + background: var(--tg-black); +} +.services-icon-two { + margin-bottom: 70px; + min-height: 67px; +} +.services-icon-two img { + max-width: 66px; +} +.services-content-two .title { + margin-bottom: 12px; + color: var(--tg-white); + font-size: 24px; +} +.services-content-two p { + margin-bottom: 0; + color: #A0A0A0; + opacity: 0.7; + text-transform: capitalize; + transition: .3s; +} + +/* services-three */ +.services-area-three { + position: relative; + overflow: hidden; + z-index: 1; +} +.section-title .title span { + color: var(--tg-blue); +} +.services-area-three .section-title.title-style-two .title { + margin-bottom: 20px; +} +.services-area-three .section-title p { + margin-bottom: 0; + color: var(--tg-black-coral); + opacity: 0.7; + text-transform: capitalize; + width: 95%; + margin: 0 auto; +} +.services-item-wrap { + background: var(--tg-cultured); + border-radius: 35px; + padding: 110px 155px 90px; +} +.services-item-three { + border-radius: 20px; + padding: 40px 35px; + transition: .3s ease-in; +} +.services-item-three:hover { + background: var(--tg-white); +} +.services-icon-three { + width: 55px; + margin-bottom: 15px; +} +.services-content-three .title { + font-size: 24px; + margin-bottom: 10px; +} +.services-content-three p { + margin-bottom: 25px; + color: var(--tg-granite-gray); + opacity: 0.7; + text-transform: capitalize; +} +.services-content-three .link-btn { + color: var(--tg-heading-font-color); + display: inline-flex; + align-items: center; +} +.services-content-three .link-btn i { + margin-right: 10px; +} +.services-content-three .link-btn:hover { + color: var(--tg-primary-color); +} +.services-active .slick-dots { + display: flex; + align-items: center; + justify-content: center; + padding: 0; + margin: 0; + gap: 10px; + margin-top: 60px; +} +.services-active .slick-dots li { + line-height: 0; + list-style: none; +} +.services-active .slick-dots li button { + text-indent: -9999999px; + width: 16px; + height: 16px; + border: 2px solid #E8D4C4; + border-radius: 50%; + background: transparent; + padding: 0; + position: relative; + transition: .3s; +} +.services-active .slick-dots li button::before { + content: ""; + position: absolute; + right: 50%; + top: 50%; + transform: translate(50%, -50%); + width: 7px; + height: 7px; + background: var(--tg-primary-color); + border-radius: 50%; + transition: .3s; + opacity: 0; +} +.services-active .slick-dots li.slick-active button { + border-color: var(--tg-primary-color); +} +.services-active .slick-dots li.slick-active button::before { + opacity: 1; +} +.services-active [class*="col-"] { + padding: 0 15px; +} +.services-area-three .services-shape img { + position: absolute; + left: 0; + top: 0; + z-index: -1; +} + +/* inner-services */ +.inner-services-item-wrap .row { + margin: 0 -10px; +} +.inner-services-item-wrap .row [class*="col-"] { + padding: 0 10px; +} +.services-item-four { + border: 1px solid #EDEDEE; + border-radius: 20px; + padding: 45px 35px 40px 35px; + text-align: center; + margin-bottom: 20px; +} +.services-icon-four { + width: 87px; + height: 87px; + margin: 0 auto; + background: #FFE9E4; + border-radius: 50%; + display: flex; + align-items: center; + justify-content: center; + margin-bottom: 45px; + transition: .5s ease; +} +.services-item-four:hover .services-icon-four { + transform: translateY(15px); +} +.services-icon-four img { + max-width: 52px; +} +.services-content-four .title { + margin-bottom: 13px; + font-size: 22px; +} +.services-content-four p { + margin-bottom: 0; + color: var(--tg-granite-gray); + text-transform: capitalize; + opacity: 0.7; +} +.inner-services-item-wrap .row [class*="col-"]:nth-child(2) .services-icon-four { + background: #EBF5FF; +} +.inner-services-item-wrap .row [class*="col-"]:nth-child(3) .services-icon-four { + background: #F2F0FD; +} +.inner-services-item-wrap .row [class*="col-"]:nth-child(4) .services-icon-four { + background: #FFF8E4; +} +.inner-services-item-wrap .row [class*="col-"]:nth-child(5) .services-icon-four { + background: #FFF4E4; +} +.inner-services-item-wrap .row [class*="col-"]:nth-child(6) .services-icon-four { + background: #EBF0FF; +} +.inner-services-item-wrap .row [class*="col-"]:nth-child(7) .services-icon-four { + background: #FDF0F2; +} +.inner-services-item-wrap .row [class*="col-"]:nth-child(8) .services-icon-four { + background: #E8E4FF; +} + +/* inner-services-two */ +.inner-services-area-two .section-title .title { + margin-bottom: 25px; +} +.inner-services-area-two .section-title p { + text-transform: capitalize; + color: var(--tg-silver-foil); + width: 75%; + margin: 0 auto; +} +.services-item-five { + text-align: center; + margin-bottom: 30px; +} +.services-icon-five { + width: 87px; + height: 87px; + margin: 0 auto 35px; + border-radius: 50%; + background: #E4FFEC; + transform: translateY(0); + transition: .4s ease; + display: flex; + align-items: center; + justify-content: center; +} +.services-item-five:hover .services-icon-five { + transform: translateY(10px); +} +.services-icon-five img { + max-width: 55px; +} +.services-content-five .title { + margin-bottom: 20px; + font-size: 22px; +} +.services-content-five span { + display: block; +} +.services-content-five p { + width: 80%; + margin: 0 auto; + color: var(--tg-granite-gray); + opacity: 0.7; + text-transform: capitalize; +} +.inner-services-wrap-two .row [class*="col-"]:nth-child(2) .services-item-five .services-icon-five { + background: #F0EBFF; +} +.inner-services-wrap-two .row [class*="col-"]:nth-child(3) .services-item-five .services-icon-five { + background: #FDF0F2; +} +.inner-services-wrap-two .row [class*="col-"]:nth-child(4) .services-item-five .services-icon-five { + background: #FFF8E4; +} + +/* services-details */ +.services-details-area { + position: relative; +} +.services-details img { + margin-bottom: 20px; +} +.services-details-content p { + margin-bottom: 0; + color: #9FA6AB; +} +.services-details-shape img { + position: absolute; + z-index: -1; + right: 50%; + transform: translateX(50%); + top: 39%; +} + + +/*============================= + 08. About +===============================*/ +.about-inner { + background: var(--tg-cultured); + padding: 115px 115px 139px 105px; + border-radius: 100px; +} +.about-inner .row .col-54 { + width: 54%; + flex: 0 0 auto; +} +.about-inner .row .col-46 { + width: 46%; + flex: 0 0 auto; +} +.section-title .sub-title { + font-size: 20px; + font-weight: 500; + display: block; + color: var(--tg-primary-color); + margin-bottom: 20px; +} +.section-title .title { + font-size: 50px; + margin-bottom: 0; +} +.about-content > p { + opacity: 0.7; + margin-bottom: 40px; + width: 70%; + color: var(--tg-black-coral); +} +.about-content .list-wrap { + margin-bottom: 45px; +} +.about-content .list-wrap li { + display: flex; + align-items: flex-start; + width: 75%; + margin-bottom: 30px; +} +.about-content .list-wrap li:last-child { + margin-bottom: 0; +} +.about-content .list-wrap li .icon { + width: 60px; + flex: 0 0 60px; + margin-left: 23px; +} +.about-content .list-wrap li .icon img { + max-width: 60px; +} +.about-content .list-wrap li .content .title { + font-size: 18px; + margin-bottom: 10px; +} +.about-content .list-wrap li .content p { + margin-bottom: 0; +} +.about-content-bottom { + display: flex; + align-items: center; + width: 85%; + position: relative; + padding-top: 24px; +} +.about-content-bottom::before { + content: ''; + position: absolute; + right: 0; + top: 0; + width: 100%; + height: 1px; + background: radial-gradient(circle, rgba(196, 208, 217, 1) 0%, rgba(218, 226, 233, 0.44021358543417366) 100%); +} +.about-content-bottom > span { + display: block; + color: var(--tg-heading-font-color); + font-size: 20px; + font-weight: 500; + width: 55%; + flex: 0 0 auto; +} +.about-content-bottom .read-more-btn { + width: 45%; + text-align: left; +} +.about-img img { + border-radius: 20px; +} + +/* about-two */ +.about-area-two { + position: relative; + padding: 120px 0 205px; +} +.section-title.title-style-two .title { + font-size: 55px; + margin-bottom: 0; +} +.about-content-two p { + margin-bottom: 60px; + text-transform: capitalize; + color: var(--tg-gray-three); + width: 89%; +} +.about-content-two a { + display: flex; + align-items: center; +} +.about-content-two a .text { + color: var(--tg-white); + opacity: .7; + transition: all 0.3s ease-out 0s; +} +.about-content-two a:hover .text { + opacity: 1; +} +.about-content-two a .arrow { + width: 72px; + height: 72px; + display: flex; + align-items: center; + justify-content: center; + border-radius: 50%; + background: var(--tg-primary-color); + margin-left: 18px; +} +.about-shape-wrap img { + position: absolute; + z-index: -1; +} +.about-shape-wrap .shape-one { + top: 20%; + left: 22%; +} +.about-shape-wrap .shape-two { + top: 25%; + left: 15%; + animation: rotateme 10s infinite linear; +} +.about-shape-wrap .shape-three { + bottom: 39%; + right: 44%; + animation: animationFramesOne 25s infinite linear; +} + +/*============================= + 09. Company +===============================*/ +.company-area { + background: var(--tg-section-background); + padding: 110px 0 120px; + position: relative; + z-index: 1; + overflow: hidden; +} +.company-shape-wrap img { + position: absolute; + left: 0; + top: 0; +} +.company-area .section-title p { + color: var(--tg-silver-foil); + text-transform: capitalize; + width: 75%; + margin: 0 auto; +} +.company-area .section-title .title { + margin-bottom: 25px; +} +.company-img { + position: relative; + text-align: left; + padding-bottom: 70px; +} +.company-img img:nth-child(2) { + position: absolute; + right: 0; + bottom: 0; +} +.company-content { + margin-right: 55px; +} +.company-content .title { + background: linear-gradient(-92.18deg, #6071D9 36.51%, #AA676F 63.73%, #CCB41A 97.49%); + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; + background-clip: text; + margin-bottom: 25px; + width: 60%; +} +.company-list .list-wrap { + margin-bottom: 60px; +} +.company-list .list-wrap li { + display: flex; + align-items: flex-start; + color: #959EB6; + font-weight: 500; + font-size: 18px; + line-height: 1.4; + margin-bottom: 16px; +} +.company-list .list-wrap li:last-child { + margin-bottom: 0; +} +.company-list .list-wrap li img { + width: 24px; + flex: 0 0 24px; + margin-left: 15px; +} + +/*============================= + 10. Success +===============================*/ +.success-area { + position: relative; +} +.success-content p { + margin-bottom: 35px; + text-transform: capitalize; + color: var(--tg-black-coral); + opacity: 0.7; + width: 90%; +} +.success-list .list-wrap { + width: 65%; +} +.success-list .list-wrap li { + display: flex; + align-items: center; + margin-bottom: 10px; +} +.success-list .list-wrap li:last-child { + margin-bottom: 0; +} +.success-list .list-wrap li .content { + display: flex; + align-items: center; + width: 50%; +} +.success-list .list-wrap li .content img { + max-width: 18px; + flex: 0 0 18px; + margin-left: 10px; + border-radius: 50%; +} +.success-list .list-wrap li .content span { + color: #7C8095; + font-size: 15px; +} +.success-list .list-wrap li .progress { + display: flex; + height: 7px; + overflow: hidden; + background-color: transparent; + border-radius: 0; + flex-grow: 1; + border-radius: 30.1494px; +} +.success-list .list-wrap li .progress .progress-bar { + background-color: var(--tg-green-two); + border-radius: 30.1494px; +} +.success-list .list-wrap li:nth-child(2) .progress .progress-bar { + background-color: var(--tg-orange); +} +.success-list .list-wrap li:nth-child(3) .progress .progress-bar { + background-color: var(--tg-blue-two-three); +} +.success-list .list-wrap li:nth-child(4) .progress .progress-bar { + background-color: var(--tg-yellow-three); +} +.success-img { + margin-right: 40px; +} +.success-img img { + max-width: unset; +} +.success-shape-wrap img { + position: absolute; + z-index: -1; +} +.success-shape-wrap img:nth-child(1) { + left: 40%; + top: 8%; + animation: ribbonRotate 5s infinite linear; +} +.success-shape-wrap img:nth-child(2) { + right: 42%; + bottom: 15%; + animation: float-bob-x 3s infinite linear; +} + + +/*============================= + 11. History +===============================*/ +.history-area { + background: var(--tg-section-background); + padding: 110px 0 120px; + position: relative; + z-index: 1; +} +.history-area .section-title .title { + margin-bottom: 25px; +} +.history-area .section-title p { + margin-bottom: 0; + color: var(--tg-silver-foil); +} +.history-inner { + background: var(--tg-black-four); + border-radius: 20px; + overflow: hidden; + position: relative; +} +.history-inner .history-img { + position: absolute; + width: 50%; + height: 100%; +} +.history-inner .history-img img { + width: 100%; + height: 100%; + object-fit: cover; +} +.history-content { + padding: 70px 70px 70px 120px; +} +.history-content .title { + font-size: 30px; + margin-bottom: 18px; + color: var(--tg-white); +} +.history-content p { + margin-bottom: 40px; + color: var(--tg-silver-foil); +} +.history-content .list-wrap li { + display: flex; + align-items: center; + font-size: 15px; + color: #7D8295; + margin-bottom: 15px; +} +.history-content .list-wrap li:last-child { + margin-bottom: 0; +} +.history-content .list-wrap li i { + color: var(--tg-green); + margin-left: 10px; +} +.history-roadmap-wrap { + position: relative; + margin-top: 60px; +} +.roadmap-line-shape { + position: absolute; + right: 50%; + top: 50%; + transform: translate(50%, -50%); + background-image: url(../img/images/line-shape.png); + background-position: center; + width: 100%; + height: 76px; + background-repeat: no-repeat; +} +.roadmap-line-shape .dot-two, +.roadmap-line-shape .dot-one { + position: absolute; + width: 20px; + height: 20px; + border-radius: 50%; + background: #EAB76A; + right: 0; + top: 50%; + transform: translateY(-50%); + z-index: 5 !important; +} +.roadmap-line-shape .dot-two { + right: auto; + left: 0; + background: #76EC97; +} +.roadmap-line-shape .dot-one.pulse::after { + background: #EAB76A; + z-index: -4; +} +.history-roadmap-wrap .list-wrap li { + display: flex; + align-items: center; + justify-content: flex-end; + flex-direction: column; + text-align: center; + width: 25%; +} +.history-roadmap-wrap .list-wrap li:nth-child(odd) { + flex-direction: column-reverse; +} +.history-roadmap-wrap .list-wrap li .dot { + width: 15px; + height: 15px; + background: #F26666; + border-radius: 50%; + position: relative; + margin-bottom: 35px; +} +.history-roadmap-wrap .list-wrap li:nth-child(2) .dot { + background: #D2F179; +} +.history-roadmap-wrap .list-wrap li:nth-child(3) .dot { + background: #64EEE6; +} +.history-roadmap-wrap .list-wrap li:nth-child(4) .dot { + background: #A672E9; +} +.history-roadmap-wrap .list-wrap li:nth-child(odd) .dot { + margin-bottom: 0; + margin-top: 35px; +} +.history-roadmap-wrap .list-wrap li .content .title { + font-size: 18px; + font-weight: 500; + color: var(--tg-white); + margin-bottom: 0; +} +.history-roadmap-wrap .list-wrap li .content p { + margin-bottom: 0; + font-size: 15px; + color: #757C8F; +} +.history-roadmap-wrap .list-wrap { + display: flex; + padding: 0 142px; +} +.history-roadmap-wrap .list-wrap li:nth-child(even) { + margin-top: 86px; +} +.history-shape-wrap img { + position: absolute; + z-index: -1; +} +.history-shape-wrap img:nth-child(1) { + left: 0; + top: 0; +} +.history-shape-wrap img:nth-child(2) { + right: 7.5%; + top: 20%; + animation: ribbonRotate 5s infinite linear; +} + + +.pulse-one { + animation: pulse-animation-one 2s linear infinite; +} +@keyframes pulse-animation-one { + 0% { + box-shadow: 0 0 0 0px rgba(90, 83, 60); + } + 100% { + box-shadow: 0 0 0 10px rgba(0, 0, 0, 0); + } +} +.pulse-two { + animation: pulse-animation-two 2s linear infinite; +} +@keyframes pulse-animation-two { + 0% { + box-shadow: 0 0 0 0px rgba(53, 88, 68); + } + 100% { + box-shadow: 0 0 0 10px rgba(0, 0, 0, 0); + } +} +.pulse-three { + animation: pulse-animation-three 2s linear infinite; +} +@keyframes pulse-animation-three { + 0% { + box-shadow: 0 0 0 0px rgba(109, 71, 58); + } + 100% { + box-shadow: 0 0 0 10px rgba(0, 0, 0, 0); + } +} +.pulse-four { + animation: pulse-animation-four 2s linear infinite; +} +@keyframes pulse-animation-four { + 0% { + box-shadow: 0 0 0 0px rgba(88 122 60); + } + 100% { + box-shadow: 0 0 0 10px rgba(0, 0, 0, 0); + } +} +.pulse-five { + animation: pulse-animation-five 2s linear infinite; +} +@keyframes pulse-animation-five { + 0% { + box-shadow: 0 0 0 0px rgba(59 123 118); + } + 100% { + box-shadow: 0 0 0 10px rgba(0, 0, 0, 0); + } +} +.pulse-six { + animation: pulse-animation-six 2s linear infinite; +} +@keyframes pulse-animation-six { + 0% { + box-shadow: 0 0 0 0px rgba(88 61 112); + } + 100% { + box-shadow: 0 0 0 10px rgba(0, 0, 0, 0); + } +} + +/*============================= + 12. Agency +===============================*/ +.agency-area { + position: relative; + overflow: hidden; +} +.agency-content p { + margin-bottom: 15px; + text-transform: capitalize; + width: 90%; + color: var(--tg-black-coral); +} +.agency-content .info-one { + opacity: 0.7; +} +.agency-content .info-two { + margin-bottom: 50px; +} +.agency-shape-wrap img { + position: absolute; + z-index: -1; +} +.agency-shape-wrap img:nth-child(1) { + bottom: 22%; + right: 7%; + animation: animationFramesOne 25s infinite linear; +} +.agency-shape-wrap img:nth-child(2) { + top: 18%; + right: 47%; + animation: rotateme 8s infinite linear; +} +.agency-shape-wrap img:nth-child(3) { + bottom: 25%; + right: 44%; + animation: ribbonRotate 8s infinite linear; +} +.agency-shape-wrap img:nth-child(4) { + bottom: 19%; + left: 12%; + animation: contactSwimmer 10s infinite linear; +} + +/*============================= + 13. Developr +===============================*/ +.developr-area { + background: linear-gradient(0deg, rgba(242, 250, 255, 1) 0%, rgba(248, 252, 255, 0) 100%, rgba(244, 250, 255, 1) 100%); +} +.developr-content .nav-tabs { + border-bottom: 1px solid #DDE0E3; + justify-content: space-between; + margin-bottom: 35px; +} +.developr-content .nav-tabs .nav-item { + margin-bottom: 10px; +} +.developr-content .nav-tabs .nav-link { + display: block; + padding: 0; + color: #898989; + text-decoration: none; + border: none; + background: transparent; + font-weight: 400; + font-size: 20px; + position: relative; +} +.developr-content .nav-tabs .nav-link.active { + color: var(--tg-heading-font-color); + font-weight: 700; +} +.developr-content .nav-tabs .nav-link::before { + content: ""; + position: absolute; + right: 0; + bottom: -11px; + width: 100%; + height: 4px; + background: var(--tg-primary-color); + border-radius: 2px; + transition: .3s linear; + opacity: 0; +} +.developr-content .nav-tabs .nav-link.active::before { + opacity: 1; +} +.developer-info-wrap .list-wrap li { + display: flex; + align-items: flex-start; + margin-bottom: 35px; +} +.developer-info-wrap .list-wrap li:last-child { + margin-bottom: 0; +} +.developer-info-wrap .list-wrap li .icon { + width: 18px; + margin-left: 15px; +} +.developer-info-wrap .list-wrap li .content { + font-size: 15px; + display: block; +} +.developer-info-wrap .list-wrap li .content p { + margin-bottom: 0; + font-weight: 600; + font-size: 15px; + color: var(--tg-heading-font-color); + line-height: 1.4; +} +.developr-img { + text-align: left; + position: relative; + padding-bottom: 80px; +} +.developr-img img { + border-radius: 42px; +} +.work-experience-wrap { + width: 196px; + min-height: 187px; + display: flex; + flex-direction: column; + justify-content: center; + align-items: flex-start; + background: var(--tg-white); + border: 1px solid var(--tg-border-color); + box-shadow: 0px 35px 54px rgba(61, 90, 125, 0.13); + border-radius: 20px; + padding: 30px; + position: absolute; + right: 50px; + top: 50px; +} +.work-experience-wrap .count { + display: flex; + align-items: center; + margin-bottom: 6px; + color: #FC201E; + font-size: 55px; + letter-spacing: -2px; + line-height: .8; +} +.project-completed-wrap p, +.work-experience-wrap p { + margin-bottom: 0; + text-align: right; + font-size: 20px; + font-weight: 500; + color: var(--tg-heading-font-color); + line-height: 1.3; +} +.project-completed-wrap { + width: 293px; + min-height: 219px; + display: flex; + justify-content: center; + flex-direction: column; + align-items: flex-start; + border: 1px solid var(--tg-border-color); + box-shadow: 0px 35px 54px rgba(61, 90, 125, 0.13); + border-radius: 20px; + background: var(--tg-white); + padding: 30px; + position: absolute; + left: 25px; + bottom: 0; +} +.project-completed-wrap .count { + display: flex; + align-items: center; + font-size: 55px; + color: #1EB9FC; + margin-bottom: 6px; + line-height: .8; +} + +/* developr-two */ +.developr-area-two { + background: linear-gradient(0deg, rgba(242, 250, 255, 1) 0%, rgba(248, 252, 255, 0) 100%, rgba(244, 250, 255, 1) 100%); +} +.developr-content-two p { + margin-bottom: 40px; + width: 80%; +} +.developr-content-two .developr-social .list-wrap { + display: flex; + align-items: center; + gap: 20px; +} +.developr-content-two .developr-social .list-wrap li a { + color: #999FAE; + font-size: 18px; + display: block; +} +.developr-content-two .developr-social .list-wrap li a:hover { + color: var(--tg-primary-color); +} + +/*============================= + 14. Tools +===============================*/ +.tools-area { + background: var(--tg-section-background-three); + padding: 110px 0 100px; +} +.tools-item-wrap .row { + margin: 0 -10px; +} +.tools-item-wrap .row [class*="col-"] { + padding: 0 10px; +} +.tools-item { + background: var(--tg-black-two); + box-shadow: 0px 35px 54px rgba(4, 13, 24, 0.13); + border-radius: 20px; + padding: 40px 35px; + margin-bottom: 20px; +} +.tools-icon { + margin-bottom: 75px; + transform: translateY(0px); + transition: .3s linear; +} +.tools-icon img { + max-width: 66px; +} +.tools-item:hover .tools-icon { + transform: translateY(7px); +} +.tools-content .title { + font-size: 24px; + margin-bottom: 15px; + color: var(--tg-white); +} +.tools-content p { + margin-bottom: 0; + color: var(--tg-gray-four); + opacity: 0.7; + text-transform: capitalize; +} + +/*============================= + 15. Brand +===============================*/ +.brand-active .col-12 { + padding: 0 10px; +} +.brand-item { + width: 100%; + min-height: 119px; + display: flex; + align-items: center; + justify-content: center; + background: var(--tg-black-two); + border-radius: 20px; + cursor: pointer; +} + +/* brand-two */ +.brand-area .title { + text-align: center; + display: block; + font-weight: 500; + font-size: 24px; + color: var(--tg-heading-font-color); + margin-bottom: 45px; +} +.brand-item-two { + min-height: 47px; + display: flex; + align-items: center; + justify-content: center; +} +.brand-item-two img { + cursor: pointer; +} + +.brand-area-two { + background: linear-gradient(-360deg, rgba(242, 250, 255, 0) 9.14%, rgba(243, 250, 255, 0.873284) 47.89%, rgba(248, 252, 255, 0) 90.86%); +} +.brand-area-two .section-title .title { + font-size: 34px; + font-weight: 500; +} + +/*============================= + 16. Client +===============================*/ +.client-area .section-title .title { + margin-bottom: 35px; +} +.client-area .section-title p { + color: var(--tg-gray-three); + text-transform: capitalize; + width: 90%; + margin: 0 auto; +} +.client-area .brand-item { + background: var(--tg-gray-eight); +} + + +/*============================= + 17. Team +===============================*/ +.team-area { + position: relative; +} +.team-content { + margin-right: 60px; +} +.team-content p { + color: var(--tg-black-coral); + opacity: .7; + margin-bottom: 60px; + width: 75%; +} +.team-img-wrap { + position: relative; + text-align: center; + width: 545px; + height: 545px; + border: 1px dashed #95BBD7; + border-radius: 76px; + margin: 73px auto 36px; +} +.team-img-wrap img { + position: absolute; + border-radius: 50%; +} +.team-img-wrap .img-shape { + right: 50%; + top: 50%; + transform: translate(50%, -50%); + border-radius: 66px; +} +.team-img-wrap .img-one { + top: -73px; + left: 20%; +} +.team-img-wrap .img-two { + right: -5%; + top: 14%; +} +.team-img-wrap .img-three { + right: 9.6%; + bottom: 43.9%; +} +.team-img-wrap .img-four { + left: -15px; + bottom: 32.8%; +} +.team-img-wrap .img-five { + bottom: -36px; + right: 12%; +} +.team-shape-wrap img { + position: absolute; + z-index: -1; +} +.team-shape-wrap img:nth-child(1) { + left: 31%; + top: 17%; +} +.team-shape-wrap img:nth-child(2) { + left: 25%; + bottom: 21%; +} + +/* team-two */ +.team-area-two .section-title .title { + margin-bottom: 30px; +} +.team-area-two .section-title p { + width: 85%; + margin: 0 auto; +} +.team-item { + position: relative; + margin-bottom: 20px; +} +.team-item .team-thumb { + border-radius: 20px; + overflow: hidden; +} +.team-item .team-content { + margin: 0; + background: var(--tg-white); + position: absolute; + right: 0; + bottom: 0; + min-width: 50%; + display: block; + border-radius: 20px 0 18px 0; + padding: 24px 30px 20px 30px; +} +.team-item .team-content .title { + margin-bottom: 5px; + font-size: 16px; +} +.team-item .team-content span { + display: block; + font-size: 15px; + color: #737373; +} +.team-social { + display: none; +} +.team-social ul { + display: flex; + align-items: center; + flex-wrap: wrap; + margin: 15px 0 0; + gap: 8px; +} +.team-social ul li a { + display: flex; + align-items: center; + justify-content: center; + width: 30px; + height: 30px; + font-size: 13px; + background: #A6A9C6; + border-radius: 50%; + color: var(--tg-white); +} +.team-social ul li a:hover { + background: var(--tg-secondary-color); +} +.team-active .slick-dots { + margin: 0; + padding: 0; + display: flex; + justify-content: center; + gap: 10px; + margin-top: 40px; +} +.team-active .slick-dots li { + list-style: none; + line-height: 0; +} +.team-active .slick-dots li button { + text-indent: -99999999px; + padding: 0; + width: 16px; + height: 16px; + border-radius: 50%; + border: 2px solid var(--tg-border-color-two); + background: transparent; + position: relative; + transition: .3s ease-in-out; +} +.team-active .slick-dots li.slick-active button { + border-color: var(--tg-primary-color); +} +.team-active .slick-dots li button::before { + content: ""; + position: absolute; + right: 50%; + top: 50%; + width: 7px; + height: 7px; + border-radius: 50%; + background: var(--tg-primary-color); + transform: translate(50%, -50%); + transition: .3s ease-in-out; + opacity: 0; +} +.team-active .slick-dots li.slick-active button::before { + opacity: 1; +} +.team-active [class*="col-"] { + padding: 0 15px; +} + +/*============================= + 18. Community +===============================*/ +.community-img { + text-align: center; + margin-bottom: 30px; +} +.community-content { + text-align: center; +} +.community-content p { + margin-bottom: 0; +} + +/*============================= + 19. Counter +===============================*/ +.counter-area { + margin-top: -85px; + z-index: 1; + position: relative; +} +.counter-item-wrap { + background: var(--tg-black-two); + border-radius: 20px; + padding: 50px 48px 20px 48px; + box-shadow: 0px 44px 64px rgba(0, 0, 0, 0.15); +} +.counter-item { + display: flex; + align-items: center; + position: relative; + padding: 0 20px; + margin-bottom: 30px; +} +.counter-item-wrap .counter-item::before { + content: ""; + position: absolute; + left: -15px; + top: 50%; + transform: translateY(-50%); + height: 60px; + width: 2px; + background: #35354F; + border-radius: 1px; +} +.counter-item-wrap .row [class*="col-"]:last-child .counter-item::before { + display: none; +} +.counter-item > span { + font-weight: 700; + font-size: 40px; + color: var(--tg-white); + display: block; + margin-left: 25px; +} +.counter-item p { + margin-bottom: 0; + font-weight: 500; + color: var(--tg-white); + font-size: 18px; + opacity: 0.7; +} +.counter-item p span { + display: block; +} + +/* counter-two */ +.counter-content .info { + margin-bottom: 50px; + width: 90%; + text-transform: capitalize; + opacity: 0.7; + color: var(--tg-black-coral); +} +.counter-item-wrap-two .list-wrap { + display: flex; + align-items: center; + flex-wrap: wrap; + gap: 30px; + justify-content: center; +} +.counter-item-two { + width: 250px; + min-height: 250px; + position: relative; + border-radius: 20px; + background: var(--tg-white); + border: 1px solid var(--tg-border-color); + box-shadow: 0px 35px 34px rgba(61, 90, 125, 0.06); + display: flex; + align-items: center; + justify-content: center; + z-index: 1; + overflow: hidden; + padding: 20px; +} +.counter-item-two .icon { + position: absolute; + left: 0; + bottom: 0; + z-index: -1; +} +.counter-item-two .content { + text-align: center; +} +.counter-item-two .content .count { + font-weight: 700; + font-size: 50px; + line-height: .8; + color: var(--tg-red); + margin-bottom: 12px; + display: flex; + align-items: center; +} +.counter-item-two .content > p { + color: var(--tg-granite-gray); + font-size: 18px; + font-weight: 500; + margin-bottom: 0; +} +.counter-item-wrap-two .list-wrap li:nth-child(2) .counter-item-two .content .count { + color: var(--tg-blue-two); +} +.counter-item-wrap-two .list-wrap li:nth-child(3) .counter-item-two .content .count { + color: var(--tg-teal); +} +.counter-item-wrap-two .list-wrap li:nth-child(4) .counter-item-two .content .count { + color: var(--tg-indigo); +} +.counter-item-wrap-two .list-wrap li:nth-child(3) .counter-item-two .icon, +.counter-item-wrap-two .list-wrap li:nth-child(4) .counter-item-two .icon { + left: auto; + right: 0; +} + +/* counter-three */ +.counter-area-three { + background: linear-gradient(-360deg, rgba(242, 250, 255, 0) 3.82%, rgba(243, 250, 255, 0.873284) 48.56%, #F3FAFF 63.29%, rgba(244, 250, 255, 0.688169) 79.47%, rgba(248, 252, 255, 0) 93.09%); +} +.counter-content-three p { + margin-bottom: 30px; +} +.counter-content-three img { + margin-bottom: 15px; +} +.counter-content-three .content-bottom { + display: block; +} +.counter-content-three .content-bottom .title-two { + margin-bottom: 5px; + font-size: 18px; +} +.counter-content-three .content-bottom .title-two span { + display: block; +} +.counter-item-wrap-three .list-wrap { + display: flex; + flex-wrap: wrap; + justify-content: center; + gap: 30px; +} +.counter-item-three { + border: 1px solid #F3F3F3; + box-shadow: 0px 35px 34px rgba(61, 90, 125, 0.06); + border-radius: 20px; + background: var(--tg-white); + width: 250px; + height: 250px; + display: flex; + align-items: center; + justify-content: center; + padding: 20px; + position: relative; + overflow: hidden; + z-index: 1; +} +.counter-item-three .icon { + position: absolute; + right: 0; + bottom: 0; + z-index: -1; +} +.counter-item-three .content { + text-align: center; +} +.counter-item-three .content .count { + display: flex; + align-items: center; + justify-content: center; + margin-bottom: 10px; + line-height: 1; + font-size: 50px; + color: var(--tg-red); + font-weight: 700; + letter-spacing: -1px; +} +.counter-item-three .content p { + margin-bottom: 0; + color: var(--tg-granite-gray); + font-weight: 500; + font-size: 18px; + line-height: 1.4; +} +.counter-item-three .content p span { + display: block; +} +.counter-item-wrap-three .list-wrap li:nth-child(2) .counter-item-three .content .count { + color: var(--tg-blue-two); +} +.counter-item-wrap-three .list-wrap li:nth-child(3) .counter-item-three .content .count { + color: var(--tg-teal); +} +.counter-item-wrap-three .list-wrap li:nth-child(4) .counter-item-three .content .count { + color: var(--tg-indigo); +} +.counter-item-wrap-three .list-wrap li:nth-child(2) .counter-item-three .icon { + left: 0; + right: auto; +} +.counter-item-wrap-three .list-wrap li:nth-child(1) .counter-item-three { + margin-top: 80px; +} +.counter-item-wrap-three .list-wrap li:nth-child(4) .counter-item-three { + margin-top: -80px; +} + +/* counter-four */ +.counter-area-four { + background: linear-gradient(0deg, rgba(242, 250, 255, 1) 0%, rgba(248, 252, 255, 0) 100%, rgba(244, 250, 255, 1) 100%); +} +.counter-item-wrap-four .list-wrap { + display: flex; + align-items: center; + flex-wrap: wrap; + gap: 30px; + justify-content: center; +} +.counter-item-four { + border: 1px solid var(--tg-border-color); + box-shadow: 0px 35px 34px rgba(61, 90, 125, 0.06); + border-radius: 20px; + background: var(--tg-white); + width: 250px; + min-height: 250px; + display: flex; + align-items: center; + justify-content: center; + flex-direction: column; + text-align: center; +} +.counter-item-four .count { + display: flex; + align-items: center; + font-weight: 700; + font-size: 50px; + line-height: .8; + margin-bottom: 15px; + color: var(--tg-red); +} +.counter-item-four p { + margin-bottom: 0; + color: var(--tg-granite-gray); + font-weight: 500; + font-size: 18px; + line-height: 1.3; +} +.counter-item-four p span { + display: block; +} +.counter-item-wrap-four .list-wrap li:nth-child(2) .counter-item-four .count { + color: var(--tg-blue-two); +} +.counter-item-wrap-four .list-wrap li:nth-child(3) .counter-item-four .count { + color: var(--tg-indigo); +} +.counter-item-wrap-four .list-wrap li:nth-child(4) .counter-item-four .count { + color: var(--tg-teal); +} + +/*============================= + 20. Project +===============================*/ +.project-area { + background: var(--tg-section-background); + padding: 140px 0; + border-radius: 0 150px 0 0; + overflow: hidden; + position: relative; + z-index: 1; +} +.section-title.white-title .title { + color: var(--tg-white); +} +.project-content p { + color: var(--tg-silver-foil); + width: 92%; + margin-bottom: 55px; +} +.project-area .row { + flex-wrap: nowrap; +} +.project-area .col-xl-8 { + overflow: hidden; + -ms-flex: 0 0 110%; + flex: 0 0 110%; + max-width: 110%; + margin-right: 40px; +} +.project-item { + width: 416px; +} +.project-item img { + max-width: 416px; + border-radius: 38px; + max-height: 579px; +} +.content-bottom { + display: flex; + align-items: center; +} +.project-nav { + display: flex; + align-items: center; + margin-right: auto; +} +.project-nav .swiper-button-prev, +.project-nav .swiper-button-next { + position: inherit; + margin: 0; + color: var(--tg-arrow-color); + padding: 0; + border: none; + background: transparent; + right: 0; + width: auto; + height: auto; +} +.project-nav .swiper-button-prev::before, +.project-nav .swiper-button-next:before { + content: "\f178"; + display: block; + font-size: 50px; + font-weight: 300; + line-height: 1; + font-family: "Font Awesome 5 Pro"; +} +.project-nav .swiper-button-prev::before { + content: "\f177"; +} +.project-nav .swiper-button-prev::after, +.project-nav .swiper-button-next::after { + display: none; +} +.project-nav .swiper-button-prev:hover, +.project-nav .swiper-button-next:hover { + color: var(--tg-secondary-color); +} +.project-nav .swiper-button-next { + margin-left: 30px; +} +.project-shape-wrap img { + position: absolute; + z-index: -1; +} +.project-shape-wrap .shape-one { + right: 7.4%; + top: 27.5%; +} +.project-shape-wrap .shape-two { + bottom: 8.4%; + right: 26.6%; +} + +/* project-two */ +.project-area-two { + position: relative; +} +.project-area-two .section-title .title { + margin-bottom: 20px; +} +.project-area-two .section-title p { + text-transform: capitalize; + width: 80%; + margin: 0 auto; + color: var(--tg-gray-three); +} +.project-menu-nav { + display: flex; + align-items: center; + justify-content: center; + margin-bottom: 50px; + flex-wrap: wrap; +} +.project-menu-nav button { + border: none; + background: transparent; + padding: 0; + font-size: 18px; + color: var(--tg-white); + margin: 0 27px; + position: relative; + padding-bottom: 12px; +} +.project-menu-nav button::before { + content: ""; + position: absolute; + right: 0; + bottom: 0; + width: 28px; + height: 2px; + background: var(--tg-border-color-two); + border-radius: 5px; + opacity: 0; +} +.project-menu-nav button.active { + color: var(--tg-primary-color); +} +.project-menu-nav button.active::before { + opacity: 1; +} +.project-item-two { + position: relative; + overflow: hidden; + margin-bottom: 25px; +} +.project-thumb-two { + border-radius: 18px; + overflow: hidden; +} +.project-thumb-two img { + transition: .3s ease-in-out; + transform: scale(1); +} +.project-item-two:hover .project-thumb-two img { + transform: scale(1.08); +} +.project-content-two { + position: absolute; + right: 22px; + left: 22px; + bottom: 22px; + box-shadow: 0px 35px 54px rgba(61, 90, 125, 0.13); + border-radius: 10px; + background: var(--tg-black-two); + padding: 25px 30px; + transition: .4s ease-in-out; + transform: translateY(150px); + opacity: 0; +} +.project-item-two:hover .project-content-two { + transform: translateY(0); + opacity: 1; +} +.project-content-two .title { + color: var(--tg-white); + margin-bottom: 6px; + font-size: 24px; +} +.project-content-two span { + display: block; + color: var(--tg-gray-four); + opacity: 0.7; +} +.project-active-two { + margin: 0 -14px; +} +.project-active-two [class*="col-"] { + padding: 0 14px; +} +.project-area-two .project-shape { + position: absolute; + left: 0; + z-index: -1; + top: 32%; +} + +/* project-three */ +.project-area-three { + background: var(--tg-cultured); + padding: 120px 0 120px; + overflow: hidden; + position: relative; + z-index: 1; +} +.project-tab-wrap .nav-tabs { + border-bottom: none; + display: block; +} +.project-tab-wrap .nav-tabs .nav-item { + margin-bottom: 40px; +} +.project-tab-wrap .nav-tabs .nav-item:last-child { + margin-bottom: 0; +} +.project-tab-wrap .nav-tabs .nav-link { + margin-bottom: 0; + background: transparent; + border: none; + border-radius: 0; + padding: 0; + color: var(--tg-cadet-grey); + font-weight: 500; + font-size: 18px; + position: relative; + transition: .3s ease-in; +} +.project-tab-wrap .nav-tabs .nav-link.active { + color: var(--tg-heading-font-color); +} +.project-tab-wrap .nav-tabs .nav-link::before { + content: ""; + position: absolute; + width: 33px; + height: 4px; + right: -75px; + top: 50%; + transform: translateY(-50%); + background: var(--tg-heading-font-color); + border-radius: 10px; + transition: .3s ease-in; + opacity: 0; +} +.project-tab-wrap .nav-tabs .nav-link.active::before { + opacity: 1; +} +.project-item-three { + background: var(--tg-white); + border-radius: 20px; + padding: 44px 44px 52px; +} +.project-content-three .title { + margin-bottom: 12px; + font-size: 24px; +} +.project-content-three p { + margin-bottom: 30px; + text-transform: capitalize; + width: 80%; + color: var(--tg-black-coral); + opacity: 0.7; +} +.project-thumb-three { + border-radius: 20px; + overflow: hidden; + margin-bottom: 40px; +} +.project-thumb-three img { + transform: scale(1); + transition: .3s linear; +} +.project-item-three:hover .project-thumb-three img { + transform: scale(1.1); +} +.project-details-btn a { + font-size: 16px; + font-weight: 600; + color: var(--tg-blue); + border: 1px solid var(--tg-secondary-color); + border-radius: 20px; + line-height: 1; + padding: 18px 25px; + display: inline-block; +} +.project-details-btn a:hover { + background: var(--tg-secondary-color); + color: var(--tg-white); +} +.project-top-content { + margin-right: 30px; +} +.project-active-three .col-12 { + padding: 0 15px; +} +.project-shape-wrap-two img { + position: absolute; + z-index: -1; + left: 0; + bottom: 50px; +} +.project-area-three .project-nav-wrap .col-xl-10 { + overflow: hidden; + -ms-flex: 0 0 110%; + flex: 0 0 110%; + max-width: 110%; +} +.project-area-three .row { + flex-wrap: nowrap; +} + +/* inner-project */ +.inner-project-area { + background: var(--tg-cultured); + padding: 110px 0 120px; +} +.inner-project-area .section-title .title { + margin-bottom: 20px; +} +.inner-project-area .section-title p { + color: var(--tg-silver-foil); + text-transform: capitalize; + width: 90%; + margin: 0 auto; +} +.inner-project-item { + margin-bottom: 20px; +} +.inner-project-item .inner-project-thumb { + border-radius: 20px; + overflow: hidden; + display: block; +} +.inner-project-item .inner-project-thumb img { + transform: scale(1); + transition: .3s; + width: 100%; +} +.inner-project-item:hover .inner-project-thumb img { + transform: scale(1.1); +} +.inner-project-item-wrap .row { + margin: 0 -10px; +} +.inner-project-item-wrap .row [class*="col-"] { + padding: 0 10px; +} +.inner-project-item-wrap .more-btn .btn { + background: var(--tg-primary-color); +} +.inner-project-item-wrap .more-btn .btn span { + background: var(--tg-secondary-color); +} + +/* inner-project-two */ +.inner-projcet-wrap-two .row [class*="col-"] { + display: flex; + align-items: center; + flex-direction: column; +} +.inner-projcet-wrap-two .row [class*="col-"]:nth-child(even) { + flex-direction: column-reverse; +} +.inner-project-active [class*="col-"] { + padding: 0 15px; +} +.inner-project-item.horizoital-item .inner-project-thumb img { + width: 410px; + height: 333px; + object-fit: cover; +} +.inner-project-item.vertical-item .inner-project-thumb img { + width: 410px; + height: 502px; + object-fit: cover; +} +.inner-project-item { + margin-bottom: 25px; + position: relative; + overflow: hidden; +} +.inner-project-content { + position: absolute; + right: 24px; + bottom: 24px; + left: 24px; + background: var(--tg-black-two); + padding: 25px 30px; + box-shadow: 0px 35px 54px rgba(61, 90, 125, 0.13); + border-radius: 10px; + opacity: 0; + transition: .3s; + transform: translateY(100px); +} +.inner-project-item:hover .inner-project-content { + opacity: 1; + transform: translateY(0); +} +.inner-project-content .title { + margin-bottom: 5px; + color: var(--tg-white); + font-size: 24px; +} +.inner-project-content p { + margin-bottom: 0; + color: var(--tg-gray-four); + opacity: 0.7; +} +.inner-project-nav { + display: flex; + align-items: center; + justify-content: flex-end; + margin-bottom: 60px; + gap: 10px; +} +.inner-project-nav .slick-arrow { + border: none; + width: 48px; + height: 48px; + display: flex; + align-items: center; + justify-content: center; + border-radius: 50%; + background: rgb(235 235 235 / 50%); + color: var(--tg-heading-font-color); + font-size: 20px; +} +.inner-project-nav .slick-arrow:hover { + background-color: var(--tg-secondary-color); + color: var(--tg-white); +} + +/* project-details */ +.project-details-area { + position: relative; + z-index: 1; + background: linear-gradient(0deg, rgba(242, 250, 255, 1) 0%, rgba(248, 252, 255, 0) 100%, rgba(244, 250, 255, 1) 100%); + overflow: hidden; +} +.project-shape-wrap img { + position: absolute; + right: 50%; + bottom: -50%; + transform: translateX(50%); + z-index: -1; +} +.project-details-inner { + padding: 0 85px; + text-align: center; +} +.project-details-img { + margin-bottom: 45px; +} +.project-details-img img { + border-radius: 20px; +} +.project-details-content p { + font-size: 18px; + width: 81%; + margin: 0 auto; +} +.project-details-content { + position: relative; + margin-bottom: 35px; +} +.project-details-content .title { + margin-bottom: 0; + background: linear-gradient(-182.06deg, #2F4C65 1.74%, rgba(47, 76, 101, 0) 146.53%); + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; + background-clip: text; + text-transform: uppercase; + opacity: 0.06; + font-size: 120px; + line-height: .8; + position: absolute; + right: 50%; + transform: translateX(50%); + bottom: -80px; + z-index: -1; + width: 100%; +} + +/*============================= + 21. Faq +===============================*/ +.faq-area { + position: relative; +} +.faq-shape-wrap img { + position: absolute; + z-index: -1; + right: 46%; + bottom: 3%; + animation: ribbonRotate 8s infinite linear; +} +.faq-img { + position: relative; + margin-bottom: 25px; +} +.faq-img img:nth-child(2) { + position: absolute; + left: 25%; + top: -25px; + animation: alltuchtopdown 6s infinite linear; +} +.faq-content .title-two { + background: linear-gradient(-92.18deg, #6071D9 36.51%, #AA676F 63.73%, #CCB41A 97.49%); + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; + margin-bottom: 18px; + font-weight: 500; + font-size: 24px; + background-clip: text; +} +.faq-content p { + margin-bottom: 0; + opacity: .7; + text-transform: capitalize; + width: 80%; +} +.faq-wrap { + margin-right: 80px; +} +.faq-wrap .accordion-item { + background-color: var(--tg-white); + border: 1px solid var(--tg-gray-eight); + box-shadow: 0px 15px 30px rgba(61, 90, 125, 0.05); + border-radius: 20px; + overflow: hidden; + margin-bottom: 15px; +} +.faq-wrap .accordion-item:last-child { + margin-bottom: 0; +} +.faq-wrap .accordion-button { + padding: 40px 80px 40px 30px; + font-weight: 700; + font-size: 18px; + color: var(--tg-heading-font-color); + text-align: right; + background-color: var(--tg-white); + border-bottom: 1px solid transparent; +} +.faq-wrap .accordion-button:not(.collapsed) { + font-weight: 700; + font-size: 18px; + background-color: var(--tg-white); + box-shadow: none; + border-bottom: 1px solid var(--tg-gray-eight); +} +.faq-wrap .accordion-button:focus { + border-color: var(--tg-gray-eight); + box-shadow: none; +} +.faq-wrap .accordion-item:first-of-type .accordion-button { + border-top-right-radius: 0; + border-top-left-radius: 0; +} +.faq-wrap .accordion-item:last-of-type .accordion-button.collapsed { + border-bottom-left-radius: 0; + border-bottom-right-radius: 0; +} +.faq-wrap .accordion-button::after { + position: absolute; + content: "\f067"; + top: 33px; + right: 25px; + width: 37px; + height: 37px; + display: flex; + align-items: center; + justify-content: center; + font-size: 16px; + font-weight: 300; + color: var(--tg-black); + border-radius: 50%; + background: #EDF2FA; + transition: .3s linear; + font-family: "Font Awesome 5 Pro"; +} +.faq-wrap .accordion-button:not(.collapsed)::after { + background-image: none; + transform: rotate(0); + content: '\f068'; +} +.faq-wrap .accordion-body { + padding: 17px 80px 30px 50px; +} +.faq-wrap .accordion-body p { + margin-bottom: 0; + opacity: 0.7; + text-transform: capitalize; +} + +/*============================= + 22. Testimonial +===============================*/ +.testimonial-area { + background: var(--tg-cultured); + border-radius: 0 0 0 150px; +} +.testimonial-item { + background: var(--tg-white); + border-radius: 20px; + padding: 50px 38px 38px; + box-shadow: 0px 15px 30px rgba(61, 90, 125, 0.08); + position: relative; + transition: .3s linear; +} +.testimonial-item::before { + content: "\f10d"; + position: absolute; + right: 38px; + top: 42px; + font-family: "Font Awesome 5 Pro"; + font-weight: 700; + font-size: 30px; + line-height: 1; + color: var(--tg-heading-font-color); + opacity: .1; +} +.testimonial-content > p { + color: var(--tg-granite-gray); + opacity: .7; + margin-bottom: 53px; + text-transform: capitalize; +} +.testimonial-info { + display: flex; + align-items: center; +} +.testimonial-info .thumb { + width: 41px; + flex: 0 0 41px; + margin-left: 18px; +} +.testimonial-info .thumb img { + border-radius: 50%; +} +.testimonial-info .content .title { + font-size: 16px; + margin-bottom: 10px; +} +.testimonial-info .content > p { + margin-bottom: 0; + font-size: 15px; + line-height: 1; +} +.testimonial-item-wrap .row [class*="col-"]:nth-child(even) .testimonial-item { + margin-top: 40px; +} +.testimonial-active [class*="col-"] { + padding: 0 10px; +} +.testimonial-active-two .slick-dots, +.testimonial-active .slick-dots { + padding: 0; + margin: 0; + display: flex; + align-items: center; + justify-content: center; + gap: 10px; + margin-top: 65px; +} +.testimonial-active-two .slick-dots li, +.testimonial-active .slick-dots li { + list-style: none; + line-height: 0; +} +.testimonial-active-two .slick-dots li button, +.testimonial-active .slick-dots li button { + border: 2px solid var(--tg-border-color-two); + padding: 0; + text-indent: -99999999px; + width: 16px; + height: 16px; + border-radius: 50%; + background: transparent; + position: relative; + transition: .3s linear; +} +.testimonial-active-two .slick-dots li.slick-active button, +.testimonial-active .slick-dots li.slick-active button { + width: 16px; + height: 16px; + border-color: var(--tg-primary-color); +} +.testimonial-active-two .slick-dots li button::before, +.testimonial-active .slick-dots li button::before { + content: ""; + position: absolute; + right: 50%; + top: 50%; + transform: translate(50%, -50%); + width: 8px; + height: 8px; + border-radius: 50%; + background: var(--tg-primary-color); + opacity: 0; + transition: .3s linear; +} +.testimonial-active-two .slick-dots li.slick-active button::before, +.testimonial-active .slick-dots li.slick-active button::before { + opacity: 1; +} + +/* testimonial-two */ +.testimonial-item-two { + border-radius: 20px; + background: var(--tg-black-two); + text-align: center; + padding: 40px 30px; +} +.testimonial-content-two .rating { + display: flex; + align-items: center; + justify-content: center; + margin-bottom: 25px; +} +.testimonial-content-two .rating i { + color: var(--tg-yellow-two); + font-size: 24px; + letter-spacing: 2px; +} +.testimonial-content-two .rating i:last-child { + color: var(--tg-silver-three); +} +.testimonial-content-two p { + margin-bottom: 40px; + color: var(--tg-gray-four); + text-transform: capitalize; + line-height: 1.5; +} +.testimonial-info-two .thumb { + margin-bottom: 10px; +} +.testimonial-info-two .thumb img { + max-width: 50px; + border-radius: 50%; + margin: 0 auto; +} +.testimonial-info-two .content .title { + font-weight: 600; + font-size: 16px; + margin-bottom: 5px; + color: var(--tg-white); +} +.testimonial-info-two .content span { + display: block; + text-transform: capitalize; + font-size: 14px; + color: var(--tg-dark-electric); +} +.testimonial-area-two .row { + margin: 0 -10px; +} +.testimonial-area-two .row [class*="col-"] { + padding: 0 10px; +} +.testimonial-active-two .slick-dots li button { + border-color: var(--tg-dark-electric); +} + +/* testimonial-three */ +.testimonial-area-three { + background: var(--tg-black-three); + padding: 110px 0 120px; + position: relative; + overflow: hidden; + z-index: 1; +} +.testimonial-item-three { + background: var(--tg-white); + border-radius: 20px; + padding: 60px 45px; + position: relative; + margin-top: 42px; +} +.testimonial-thumb-three { + position: absolute; + right: 45px; + top: -42px; +} +.testimonial-thumb-three img { + max-width: 83px; + border-radius: 50%; + border: 9px solid var(--tg-white); +} +.testimonial-content-three .title { + margin-bottom: 10px; + font-size: 20px; +} +.testimonial-content-three span { + display: block; + color: #616C7E; + opacity: 0.8; + font-size: 14px; + margin-bottom: 20px; +} +.testimonial-content-three p { + margin-bottom: 0; + color: var(--tg-black-two); +} +.testimonial-shape-wrap img { + position: absolute; + z-index: -1; +} +.testimonial-shape-wrap img:nth-child(1) { + right: 0; + top: 0; +} +.testimonial-shape-wrap img:nth-child(2) { + right: 6%; + bottom: 43%; + animation: animationFramesOne 20s infinite linear; +} +.testimonial-shape-wrap img:nth-child(3) { + left: 33.2%; + top: 15%; + animation: animationFramesOne 25s infinite linear; +} +.testimonial-shape-wrap img:nth-child(4) { + bottom: 10%; + left: 27%; + animation: rotateme 8s infinite linear; +} +.swiper-container.testimonial-active-three { + overflow: hidden; + margin-left: -460px; +} +.testimonial-nav { + display: flex; + align-items: center; + justify-content: flex-end; + gap: 38px; +} +.testimonial-nav .swiper-button-prev, +.testimonial-nav .swiper-button-next { + background: transparent; + position: unset; + top: 0; + width: auto; + height: auto; + margin-top: 0; + color: #fff; + padding: 0; + border: none; +} +.testimonial-nav .swiper-button-prev::before, +.testimonial-nav .swiper-button-next:before { + content: "\f177"; + display: block; + font-size: 20px; + font-weight: 300; + line-height: 1; + font-family: "Font Awesome 5 Pro"; +} +.testimonial-nav .swiper-button-next::before { + content: "\f178"; +} +.testimonial-nav .swiper-button-prev:after, +.testimonial-nav .swiper-button-next:after { + display: none; +} +.testimonial-swiper-pagination { + display: flex; + align-items: center; + gap: 8px; + margin-top: 60px; +} +.swiper-pagination-bullet { + width: 16px; + height: 16px; + border-radius: 50%; + background: transparent; + margin: 0 !important; + position: relative; + border: 2px solid #E8D4C4; + transition: .3s ease-in-out; + opacity: 1; +} +.swiper-pagination-bullet.swiper-pagination-bullet-active { + border-color: var(--tg-primary-color); +} +.swiper-pagination-bullet::before { + content: ""; + position: absolute; + width: 7px; + height: 7px; + right: 50%; + top: 50%; + transform: translate(50%, -50%); + border-radius: 50%; + background: var(--tg-primary-color); + opacity: 0; + transition: .3s ease-in-out; +} +.swiper-pagination-bullet.swiper-pagination-bullet-active::before { + opacity: 1; +} + +/* testimonial-four */ +.testimonial-area-four { + background: linear-gradient(-360deg, rgba(242, 250, 255, 0) 3.82%, rgba(243, 250, 255, 0.873284) 48.56%, #F3FAFF 63.29%, rgba(244, 250, 255, 0.688169) 79.47%, rgba(248, 252, 255, 0) 93.09%); +} +.testimonial-area-four .testimonial-nav { + gap: 20px; + margin-bottom: 40px; +} +.testimonial-area-four .testimonial-nav .swiper-button-prev, +.testimonial-area-four .testimonial-nav .swiper-button-next { + position: unset; + top: 0; + width: 48px; + height: 48px; + margin-top: 0; + color: var(--tg-heading-font-color); + padding: 0; + border: none; + display: flex; + align-items: center; + justify-content: center; + border-radius: 50%; + background: var(--tg-white); +} +.testimonial-area-four .testimonial-nav .swiper-button-prev:hover, +.testimonial-area-four .testimonial-nav .swiper-button-next:hover { + background: var(--tg-secondary-color); + color: var(--tg-white); +} + +/* testimonial-five */ +.testimonial-img { + position: relative; + margin-left: 102px; +} +.testimonial-img img { + border-radius: 42px; +} +.testimonial-img .play-btn { + position: absolute; + left: 45px; + bottom: 35px; + width: 80px; + height: 80px; + display: flex; + align-items: center; + justify-content: center; + background: var(--tg-white); + border-radius: 50%; + font-size: 24px; + color: #FE5A5A; +} +.testimonial-item-five { + background: var(--tg-white); + position: relative; + box-shadow: 0px 15px 30px rgba(61, 90, 125, 0.05); + border-radius: 20px; + border: 1px solid transparent; + padding: 30px 40px; + background-clip: padding-box; +} +.testimonial-item-five::before { + content: ""; + position: absolute; + right: 0; + top: 0; + left: 0; + bottom: 0; + background: #33276B; + border-radius: 20px; + margin: -2px; + z-index: -1; +} +.testimonial-item-five::after { + content: ""; + position: absolute; + right: 0; + top: 0; + left: 0; + bottom: 0; + margin: -2px; + background: linear-gradient(-90deg, rgba(230, 207, 64, 1) 0%, rgba(224, 64, 208, 1) 50%, rgba(165, 193, 104, 1) 100%); + border-radius: 20px; + transition: .3s linear; + z-index: -1; +} +.testimonial-item-five .testimonial-info { + margin-bottom: 28px; +} +.testimonial-item-five .testimonial-info .thumb { + width: 65px; + flex: 0 0 65px; +} +.testimonial-item-five .testimonial-info .content .title { + font-size: 20px; +} +.testimonial-content-five p { + margin-bottom: 0; + letter-spacing: 0.163636px; + color: var(--tg-heading-font-color); + width: 90%; +} + + +/*============================= + 23. Consultation +===============================*/ +.consultation-area { + position: relative; +} +.consultation-content .section-title img { + margin-bottom: 20px; +} +.consultation-content p { + margin-bottom: 65px; + width: 80%; + text-transform: capitalize; +} +.consultation-list ul { + display: flex; + align-items: center; + width: 65%; +} +.consultation-list ul li { + display: flex; + align-items: center; + width: 50%; + margin-bottom: 30px; +} +.consultation-list ul li .icon { + position: relative; + width: 50px; + flex: 0 0 50px; + margin-left: 15px; +} +.consultation-list ul li .icon span { + position: absolute; + width: 28px; + height: 28px; + border-radius: 50%; + font-size: 10px; + font-weight: 600; + color: var(--tg-white); + background: var(--tg-pink); + display: flex; + align-items: center; + justify-content: center; + left: -5px; + bottom: -10px; +} +.consultation-list ul li:nth-child(2) .icon span { + bottom: 0; + top: -10px; +} +.consultation-list ul li .content .title { + font-weight: 600; + font-size: 18px; + margin-bottom: 0; +} +.consultation-form-wrap { + background: var(--tg-white); + box-shadow: 0px 15px 30px rgba(61, 90, 125, 0.08); + border-radius: 20px; + border: 1px solid var(--tg-border-color); + padding: 62px 58px 44px; +} +.consultation-form-wrap .title { + font-weight: 500; + font-size: 30px; + margin-bottom: 30px; + line-height: 30px; +} +.consultation-form-wrap .form-grp { + margin-bottom: 20px; +} +.consultation-form-wrap .form-grp input { + width: 100%; + border: 1px solid var(--tg-form-border-color); + background: var(--tg-gray-two); + border-radius: 13px; + padding: 22px 28px; + font-weight: 400; + font-size: 16px; + color: var(--tg-heading-font-color); + height: 70px; +} +.consultation-form-wrap .form-grp input::placeholder { + font-weight: 400; + font-size: 16px; + color: var(--tg-heading-font-color); +} +.consultation-form-wrap .form-grp .form-select { + padding: 10px 16px 10px 70px; + font-size: 16px; + font-weight: 400; + line-height: 1.6; + color: var(--tg-heading-font-color); + vertical-align: middle; + background: url("../img/icon/select_down_arrow.png") no-repeat scroll 2.5% center; + background-color: var(--tg-gray-two); + border: 1px solid var(--tg-form-border-color); + border-radius: 13px; + box-shadow: none; + -webkit-appearance: none; + -moz-appearance: none; + appearance: none; + transition: .3s ease-in-out; + width: 100%; + height: 70px; +} +.consultation-form-wrap .btn { + width: 100%; +} +.consultation-shape-wrap img { + position: absolute; + z-index: -1; +} +.consultation-shape-wrap .shape-one { + right: 43.8%; + top: 21.5%; +} +.consultation-shape-wrap .shape-two { + left: 7%; + bottom: 105px; +} + +/* consultation-two */ +.consultation-area-two { + background: var(--tg-cultured); + z-index: 1; +} +.consultation-area-two .consultation-content > p { + width: 76%; +} +.consultation-area-two .consultation-list ul li { + display: block; +} +.consultation-area-two .consultation-list ul li .title { + font-weight: 700; + font-size: 30px; + color: var(--tg-red); + margin-bottom: 5px; +} +.consultation-area-two .consultation-list ul li p { + width: 100%; + margin-bottom: 0; + font-weight: 500; + font-size: 18px; + line-height: 1.3; +} +.consultation-area-two .consultation-list ul li p span { + display: block; +} +.consultation-area-two .consultation-list ul li:nth-child(2) .title { + color: var(--tg-blue-two); +} +.consultation-area-two .consultation-shape-wrap .shape-one { + right: 43.8%; + bottom: 28.5%; + top: auto; +} + +/*============================= + 24. Pricing +===============================*/ +.pricing-area .section-title .title { + margin-bottom: 20px; +} +.pricing-area .section-title p { + text-transform: capitalize; + width: 55%; + margin: 0 auto; + color: var(--tg-gray-three); +} +.pricing-item-wrap { + padding: 0 70px; +} +.pricing-item { + background: var(--tg-black-two); + border: 1px solid rgba(0, 0, 0, 0.1); + border-radius: 20px; + padding: 45px 50px; + margin-bottom: 30px; + position: relative; + z-index: 1; + overflow: hidden; +} +.pricing-icon { + position: absolute; + top: -58px; + left: -60px; + width: 182px; + height: 182px; + background: #161620; + border-radius: 50%; + display: flex; + align-items: flex-end; + padding: 28px; + z-index: -1; +} +.pricing-top { + width: 75%; +} +.pricing-top .title { + font-size: 24px; + margin-bottom: 24px; + color: var(--tg-white); +} +.pricing-top p { + margin-bottom: 32px; + color: var(--tg-silver-two); +} +.pricing-price .price { + display: flex; + margin-bottom: 35px; + font-size: 35px; + color: var(--tg-white); + letter-spacing: 2.15px; + line-height: 1; +} +.pricing-price .price span { + font-size: 16px; + color: var(--tg-silver-two); + font-weight: 400; +} +.pricing-price .price strong { + font-weight: 400; + font-size: 16px; + margin-top: auto; + color: var(--tg-silver-two); +} +.pricing-list .title { + color: var(--tg-white); + margin-bottom: 15px; + font-size: 16px; + letter-spacing: 0.145455px; +} +.pricing-list .list-wrap { + margin-bottom: 25px; +} +.pricing-list .list-wrap li { + display: flex; + align-items: baseline; + font-size: 15px; + margin-bottom: 5px; + color: var(--tg-silver-two); +} +.pricing-list .list-wrap li:last-child { + margin-bottom: 0; +} +.pricing-list .list-wrap li i { + color: var(--tg-green); + margin-left: 10px; +} +.pricing-btn .btn { + display: block; + font-size: 16px; + color: var(--tg-heading-font-color); + font-weight: 700; + background: var(--tg-white); + padding: 22px 55px; +} +.pricing-btn .btn:hover { + color: var(--tg-primary-color); +} +.pricing-item.active { + background: var(--tg-primary-color); + border: none; + padding: 68px 50px; +} +.pricing-item.active .pricing-icon { + background: #E68839; +} +.pricing-item.active .pricing-list .list-wrap li, +.pricing-item.active .pricing-top p { + color: var(--tg-white); +} +.pricing-item.active .pricing-price .price strong, +.pricing-item.active .pricing-price .price span { + color: #DEEDFF; +} +.pricing-item.active .pricing-btn .btn { + color: var(--tg-primary-color); +} +.pricing-item-wrap .pricing-tab { + text-align: center; + margin-bottom: 60px; +} +.pricing-item-wrap .nav-tabs { + border-bottom: none; + display: inline-flex; + background: var(--tg-onyx); + padding: 11px 14px; + border-radius: 10px; +} +.pricing-item-wrap .nav-tabs .nav-link { + margin-bottom: 0; + background: transparent; + border: none; + font-size: 16px; + border-radius: 10px; + padding: 10px 27px; + color: var(--tg-white); + font-weight: 400; +} +.pricing-item-wrap .nav-tabs .nav-link.active { + box-shadow: 0px 8px 22px rgba(0, 0, 0, 0.08); + font-weight: 700; + background: var(--tg-primary-color); +} + +/*============================= + 25. Work +===============================*/ +.work-area { + background: var(--tg-onyx); + position: relative; + z-index: 1; + overflow: hidden; +} +.work-content { + margin-right: 72px; +} +.work-list .list-wrap li { + display: flex; + align-items: flex-start; + margin-bottom: 30px; +} +.work-list .list-wrap li:last-child { + margin-bottom: 0; +} +.work-list .list-wrap .icon { + width: 60px; + flex: 0 0 60px; + margin-left: 23px; +} +.work-list .list-wrap .icon img { + border-radius: 50%; +} +.work-list .list-wrap .content .title { + margin-bottom: 15px; + font-size: 18px; + color: var(--tg-white); +} +.work-list .list-wrap .content p { + margin-bottom: 0; + color: var(--tg-gray-four); + opacity: 0.7; + text-transform: capitalize; + width: 80%; +} +.work-shape-wrap img { + position: absolute; + z-index: -1; +} +.work-shape-wrap img:nth-child(1) { + right: 8%; + top: 21%; + animation: animationFramesOne 25s infinite linear; +} +.work-shape-wrap img:nth-child(2) { + top: 18%; + right: 28%; +} +.work-shape-wrap img:nth-child(3) { + right: 16%; + bottom: 20%; + animation: ribbonRotate 12s infinite linear; +} +.work-shape-wrap img:nth-child(4) { + left: 11%; + top: 21%; + animation: ribbonRotate 10s infinite linear; +} +.work-shape-wrap img:nth-child(5) { + right: 48%; + bottom: 38%; + animation: animationFramesOne 30s infinite linear; +} + +/*============================= + 26. Blog +===============================*/ +.blog-area { + background: var(--tg-cultured); + padding: 110px 0 90px; +} +.blog-area .section-title .title { + margin-bottom: 17px; +} +.blog-area .section-title p { + margin-bottom: 0; +} +.blog-post-item { + margin-bottom: 30px; +} +.blog-post-thumb { + border-radius: 20px; + overflow: hidden; +} +.blog-post-thumb img { + transform: scale(1); + transition: .3s linear; +} +.blog-post-item:hover .blog-post-thumb img { + transform: scale(1.1); +} +.blog-post-content { + background: var(--tg-white); + border-radius: 20px 0 20px 20px; + width: 65%; + padding: 20px 28px 30px 18px; + margin-top: -148px; + position: relative; + z-index: 1; +} +.blog-post-content .tag { + font-size: 15px; + display: inline-block; + font-weight: 500; + margin-bottom: 16px; +} +.blog-post-content .tag:hover { + color: var(--tg-secondary-color); +} +.blog-post-content .title { + font-size: 18px; + margin-bottom: 13px; + line-height: 1.44; +} +.blog-meta .list-wrap { + display: flex; + align-items: center; + gap: 12px; +} +.blog-meta .list-wrap li.avatar-img { + width: 34px; + flex: 0 0 34px; +} +.blog-meta .list-wrap li.avatar-img a { + display: block; +} +.blog-meta .list-wrap li.avatar-img img { + border-radius: 50%; +} +.blog-meta .list-wrap li { + color: var(--tg-spanish-gray); + font-size: 15px; + font-weight: 500; +} +.blog-meta .list-wrap li a { + color: var(--tg-spanish-gray); +} +.blog-meta .list-wrap li a:hover { + color: var(--tg-primary-color); +} + +/* blog-two */ +.blog-item-two { + margin-bottom: 30px; +} +.blog-thumb-two { + position: relative; + border-radius: 20px; + overflow: hidden; + margin-bottom: 22px; +} +.blog-thumb-two img { + transition: .5s ease-in-out; + transform: scale(1); +} +.blog-item-two:hover .blog-thumb-two img { + transform: scale(1.05); +} +.blog-thumb-two .date { + position: absolute; + right: 15px; + bottom: 15px; + width: 55px; + height: 55px; + display: flex; + align-items: center; + justify-content: center; + background: var(--tg-primary-color); + flex-direction: column; + margin-bottom: 0; + border-radius: 10px; + font-size: 18px; + color: var(--tg-white); + line-height: 1.1; +} +.blog-thumb-two .date span { + display: block; + font-size: 14px; + font-weight: 400; +} +.blog-content-two .tag { + font-weight: 500; + font-size: 15px; + color: var(--tg-primary-color); + display: inline-block; + margin-bottom: 16px; +} +.blog-content-two .tag:hover { + color: var(--tg-white); +} +.blog-content-two .title { + font-size: 18px; + width: 85%; + margin-bottom: 15px; + color: var(--tg-white); + line-height: 1.45; +} +.blog-content-two p { + margin-bottom: 0; + color: var(--tg-gray-four); + font-size: 14px; + width: 90%; +} +.blog-content-two p a { + color: var(--tg-white); + text-decoration: underline; +} +.blog-content-two p a:hover { + color: var(--tg-primary-color); +} + +/* blog-three */ +.blog-item-three .blog-meta .list-wrap { + gap: 15px; + margin-bottom: 15px; +} +.blog-item-three .blog-meta .list-wrap li { + display: flex; + align-items: center; + font-size: 14px; + font-weight: 400; + color: var(--tg-gray-seven); +} +.blog-item-three .blog-meta .list-wrap li a { + color: var(--tg-gray-seven); +} +.blog-item-three .blog-meta .list-wrap li a:hover { + color: var(--tg-primary-color); +} +.blog-item-three .blog-meta .list-wrap li i { + color: var(--tg-primary-color); + margin-left: 8px; +} +.blog-item-three .blog-content-two .title { + color: var(--tg-heading-font-color); +} +.blog-item-three .blog-content-two p { + color: var(--tg-gray-seven); +} +.blog-item-three .blog-content-two p a { + color: var(--tg-heading-font-color); +} +.blog-item-three .blog-content-two p a:hover { + color: var(--tg-primary-color); +} +.blog-area-three .read-more-btn .btn { + background: var(--tg-primary-color); +} +.blog-area-three .read-more-btn .btn span { + background: var(--tg-secondary-color); +} + +/* inner-blog */ +.inner-blog-area .col-70 { + flex: 0 0 auto; + width: 69.8%; +} +.inner-blog-area .col-30 { + flex: 0 0 auto; + width: 30.2%; +} +.inner-blog-item { + margin-bottom: 55px; +} +.inner-blog-item:last-child { + margin-bottom: 0; +} +.inner-blog-thumb img { + border-radius: 20px; +} +.inner-blog-thumb { + margin-bottom: 50px; +} +.blog-meta-two .list-wrap { + display: flex; + align-items: center; + gap: 10px 0; + margin-bottom: 20px; + flex-wrap: wrap; +} +.blog-meta-two .list-wrap li { + position: relative; + margin-left: 16px; + padding-left: 16px; + line-height: 1.2; + font-size: 15px; + letter-spacing: 0.122727px; + color: #717171; +} +.blog-meta-two .list-wrap li:last-child { + margin-left: 0; + padding-left: 0; +} +.blog-meta-two .list-wrap li::before { + content: ""; + position: absolute; + left: 0; + top: 50%; + transform: translateY(-50%); + width: 2px; + height: 20px; + background: #F1F1F1; +} +.blog-meta-two .list-wrap li:last-child::before { + display: none; +} +.blog-meta-two .list-wrap li i { + color: #F04463; + margin-left: 6px; +} +.blog-meta-two .list-wrap li a { + color: #F04463; +} +.blog-meta-two .list-wrap li.tag { + padding-left: 0; +} +.blog-meta-two .list-wrap li.tag::before { + display: none; +} +.blog-meta-two .list-wrap li.tag a { + background: var(--tg-secondary-color); + color: var(--tg-white); + font-size: 15px; + border-radius: 7px; + padding: 3px 12px; + display: block; +} +.inner-blog-content .title { + margin-bottom: 15px; + font-weight: 600; + font-size: 30px; +} +.inner-blog-content p { + margin-bottom: 18px; + width: 94%; +} +.inner-blog-content .rade-more-btn { + font-weight: 600; + font-size: 16px; + text-decoration-line: underline; + color: #5A5A5A; +} +.inner-blog-content .rade-more-btn:hover { + color: var(--tg-primary-color); +} +.inner-blog-item:nth-child(2) .blog-meta-two .list-wrap li.tag a { + background: #FC1AE5; +} +.inner-blog-item:nth-child(3) .blog-meta-two .list-wrap li.tag a { + background: #FCBD1A; +} +.blog-sidebar { + margin-right: 15px; +} +.blog-sidebar .widget { + margin-bottom: 60px; +} +.blog-sidebar .widget:last-child { + margin-bottom: 0; +} +.rc-post-item { + display: flex; + align-items: center; + margin-bottom: 30px; +} +.rc-post-item:last-child { + margin-bottom: 0; +} +.rc-post-item .thumb { + width: 159px; + flex: 0 0 159px; + margin-left: 15px; +} +.rc-post-item .thumb img { + border-radius: 15px; +} +.rc-post-item .content .title { + margin-bottom: 0; + font-weight: 600; + font-size: 16px; +} +.rc-post-item .content .blog-meta-two .list-wrap { + margin-bottom: 13px; +} +.rc-post-item:nth-child(2) .content .blog-meta-two .list-wrap li.tag a { + background: #FCBD1A; +} +.rc-post-item:nth-child(3) .content .blog-meta-two .list-wrap li.tag a { + background: #FC1AE5; +} +.widget-title { + font-weight: 600; + font-size: 22px; + margin-bottom: 20px; +} +.blog-cat-list .list-wrap li { + border-bottom: 1px solid #E5E5E5; + padding: 10px 10px; +} +.blog-cat-list .list-wrap li a { + display: flex; + align-items: center; + font-weight: 600; + font-size: 15px; + color: var(--tg-paragraph-color); +} +.blog-cat-list .list-wrap li a span { + margin-right: auto; + font-weight: 400; + transition: all 0.3s ease-out 0s; +} +.blog-cat-list .list-wrap li a:hover { + color: var(--tg-primary-color); +} +.popular-post-item.big-post .thumb { + margin-bottom: 18px; +} +.popular-post-item.big-post .thumb img { + border-radius: 15px; + width: 100%; +} +.popular-post-item.big-post .content .title { + margin-bottom: 10px; + font-weight: 600; + font-size: 16px; +} +.popular-post-item .content span { + font-size: 14px; + display: block; +} +.popular-post-item .thumb { + margin-bottom: 20px; +} +.popular-post-item .thumb img { + border-radius: 10px; + width: 100%; +} +.popular-post-item .content .title { + font-size: 15px; + font-weight: 600; + margin-bottom: 10px; +} +.popular-post-list .list-wrap { + display: flex; + flex-wrap: wrap; + margin: 0 -10px; +} +.popular-post-list .list-wrap li { + width: 50%; + flex: 0 0 auto; + padding: 0 10px; +} +.popular-post-list .list-wrap li:first-child { + width: 100%; +} +.tag-list .list-wrap { + display: flex; + align-items: center; + flex-wrap: wrap; + gap: 10px; +} +.tag-list .list-wrap li a { + display: block; + font-size: 14px; + color: var(--tg-black); + background: #F5F5F5; + border-radius: 7px; + padding: 10px 22px; + line-height: 1; +} +.tag-list .list-wrap li a:hover { + color: var(--tg-white); + background: var(--tg-secondary-color); +} + +/* blog-details-area */ +.bd-content-top.text-center { + width: 78%; + margin: 0 auto 45px; +} +.bd-content-top .blog-meta-two .list-wrap { + justify-content: center; +} +.bd-content-top .title { + font-weight: 600; + font-size: 30px; + margin-bottom: 12px; +} +.bd-content-top p { + margin-bottom: 30px; +} +.blog-meta-two.bottom .avatar img { + width: 32px; + flex: 0 0 32px; + margin-left: 10px; +} +.blog-meta-two.bottom .list-wrap { + margin-bottom: 0; +} +.blog-details-img { + margin-bottom: 45px; +} +.blog-details-img img { + border-radius: 20px; +} +.bd-content-bottom { + width: 78%; +} +.bd-content-bottom .title { + font-weight: 600; + font-size: 30px; + margin-bottom: 20px; +} +.bd-content-bottom p { + margin-bottom: 30px; +} +.bd-content-bottom .list-wrap { + margin-top: 45px; + margin-bottom: 25px; +} +.bd-content-bottom .list-wrap li { + position: relative; + padding-right: 24px; + margin-bottom: 5px; +} +.bd-content-bottom .list-wrap li:last-child { + margin-bottom: 0; +} +.bd-content-bottom .list-wrap li::before { + content: ""; + position: absolute; + right: 10px; + top: 11px; + width: 5px; + height: 5px; + border-radius: 50%; + background: var(--tg-paragraph-color); +} +.bd-content-bottom .list-wrap li span { + font-weight: 700; + font-size: 16px; + margin-left: 10px; +} +.comment-wrap { + border-top: 1px solid rgb(151 151 151 / 50%); + border-bottom: 1px solid rgb(151 151 151 / 50%); + padding-top: 45px; + margin-top: 65px; + padding-bottom: 30px; + margin-bottom: 70px; +} +.comment-wrap > .title { + font-weight: 500; + font-size: 24px; + margin-bottom: 50px; +} +.comment-wrap .title span { + color: #969696; +} +.comments-box { + display: flex; + align-items: flex-start; + margin-bottom: 60px; +} +.comments-avatar { + width: 78px; + flex: 0 0 78px; + margin-left: 25px; +} +.comments-avatar img { + border-radius: 20px; +} +.comment-text .title { + font-weight: 500; + font-size: 18px; + margin-bottom: 10px; +} +.comment-text span { + display: flex; + align-items: center; + font-size: 15px; + color: #717171; + margin-bottom: 15px; +} +.comment-text span i { + margin-left: 6px; +} +.comment-text p { + margin-bottom: 25px; + color: #4A4A4A; + width: 70%; +} +.comment-text .comment-reply-link { + display: inline-flex; + align-items: center; + color: #8B8989; +} +.comment-text .comment-reply-link i { + margin-left: 10px; +} +.comment-text .comment-reply-link:hover { + color: var(--tg-primary-color); +} +.comments-box.children { + margin-right: 100px; + border-top: 1px solid rgb(151 151 151 / 50%); + padding-top: 60px; +} +.comments-box.children .comment-text p { + width: 78%; +} +.post-comments-form { + width: 80%; +} +.post-comments-title .title { + font-weight: 500; + font-size: 24px; + opacity: 0.64; + margin-bottom: 65px; +} +.comment-form .row { + margin: 0 -10px; +} +.comment-form .row [class*="col-"] { + padding: 0 10px; +} +.comment-form .form-grp { + margin-bottom: 22px; +} +.comment-form .form-grp textarea, +.comment-form .form-grp input { + width: 100%; + background: transparent; + border: 1px solid #E3E3E3; + backdrop-filter: blur(21px); + border-radius: 15px; + color: #818080; + font-size: 16px; + padding: 22px 30px; + display: block; + height: 72px; +} +.comment-form .form-grp textarea::placeholder, +.comment-form .form-grp input::placeholder { + color: #818080; + font-size: 16px; +} +.comment-form .form-grp textarea { + min-height: 180px; + max-height: 180px; +} +.comment-form .btn { + background: var(--tg-primary-color); + margin-top: 22px; +} +.comment-form .btn span { + background: var(--tg-secondary-color); +} + + +/*============================= + 27. Pagination +===============================*/ +.pagination-wrap .pagination.list-wrap { + gap: 10px; +} +.pagination-wrap .page-item .page-link { + z-index: 3; + color: #AAAAAA; + font-weight: 400; + font-size: 15px; + background: transparent; + border: 1px solid #AAAAAA; + width: 40px; + height: 40px; + display: flex; + align-items: center; + justify-content: center; + border-radius: 5px; +} +.pagination-wrap .pagination .page-item.active .page-link, +.pagination-wrap .pagination .page-link:hover { + background: #F1F1F1; +} +.pagination-wrap .pagination .page-link:focus { + background: #F1F1F1; + outline: 0; + box-shadow: none; +} + +/*============================= + 28. Newsletter +===============================*/ +.newsletter-area { + position: relative; + overflow: hidden; +} +.newsletter-form form { + display: flex; + align-items: center; +} +.newsletter-form input { + box-shadow: 0px 50px 130px rgba(31, 31, 31, 0.15); + border-radius: 20px; + border: none; + flex-grow: 1; + color: var(--tg-heading-font-color); + font-weight: 400; + font-size: 16px; + text-align: center; + padding: 26px 30px; + height: 80px; +} +.newsletter-form .btn { + padding: 28px 39px; + min-width: 160px; + background: var(--tg-primary-color); + margin-right: 24px; +} +.newsletter-form .btn span { + background: var(--tg-secondary-color); +} +.newsletter-shape-wrap img { + position: absolute; + z-index: -1; +} +.newsletter-shape-wrap .bg-shape { + right: 50%; + bottom: 40px; + transform: translateX(50%); +} +.newsletter-shape-wrap .shape-one { + right: 16.2%; + top: 32%; + animation: animationFramesOne 20s infinite linear; +} +.newsletter-shape-wrap .shape-two { + right: 17%; + bottom: 28%; + animation: contactSwimmer 20s infinite linear; +} +.newsletter-shape-wrap .shape-three { + bottom: 10%; + right: 24.7%; + animation: animationFramesOne 10s infinite linear; +} +.newsletter-shape-wrap .shape-four { + left: 21%; + top: 46%; + animation: rotateme 10s infinite linear; +} +.newsletter-shape-wrap .shape-five { + left: 13%; + top: 27%; + animation: animationFramesOne 35s infinite linear; +} +.newsletter-shape-wrap .shape-six { + left: 17%; + bottom: 24%; + animation: contactSwimmer 15s infinite linear; +} + +/* newsletter-two */ +.newsletter-wrap { + background: var(--tg-black-two); + padding: 110px 100px 120px; + position: relative; + border-radius: 20px 150px 20px 20px; + z-index: 1; +} +.newsletter-area-two .newsletter-form input { + border-radius: 20px; + flex-grow: 1; + font-weight: 400; + font-size: 16px; + text-align: center; + padding: 26px 30px; + height: 72px; + background: linear-gradient(-152.97deg, rgba(255, 255, 255, 0.185) 0%, rgba(255, 255, 255, 0.185) 100%); + backdrop-filter: blur(21px); + color: var(--tg-white); + border: none; + box-shadow: none; +} +.newsletter-area-two .newsletter-form input::placeholder { + color: #818080; +} +.newsletter-shape-wrap-two img { + position: absolute; + z-index: -1; +} +.newsletter-shape-wrap-two img:nth-child(1) { + left: -54px; + top: -43px; +} +.newsletter-shape-wrap-two img:nth-child(2) { + right: 0; + bottom: 0; +} +.newsletter-shape-wrap-two img:nth-child(3) { + right: 155px; + bottom: 103px; + animation: 10s linear 0s infinite normal none running contactSwimmer; +} +.newsletter-shape-wrap-two img:nth-child(4) { + top: 180px; + left: 240px; + animation: animationFramesOne 25s infinite linear; +} + + +/*============================= + 29. Contact +===============================*/ +.contact-area { + background: var(--tg-black-two); + padding: 110px 0 120px; +} +.contact-form-wrap { + margin-left: 38px; +} +.contact-form-wrap .form-grp { + margin-bottom: 22px; +} +.contact-form-wrap .row { + margin: 0 -10px; +} +.contact-form-wrap .row [class*="col-"] { + padding: 0 10px; +} +.contact-form-wrap .form-grp textarea, +.contact-form-wrap .form-grp input { + width: 100%; + background: transparent; + border: 1px solid rgba(227, 227, 227, 0.2); + backdrop-filter: blur(21px); + border-radius: 15px; + font-weight: 400; + font-size: 16px; + padding: 22px 35px; + color: var(--tg-white); + height: 72px; + display: block; +} +.contact-form-wrap .form-grp textarea::placeholder, +.contact-form-wrap .form-grp input::placeholder { + color: var(--tg-gray-five); + font-weight: 400; + font-size: 16px; +} +.contact-form-wrap .form-grp textarea { + min-height: 180px; + max-height: 180px; +} +.contact-form-wrap .btn { + background: var(--tg-primary-color); + padding: 28px 37px; +} +.contact-form-wrap .btn span { + background: var(--tg-secondary-color); +} +.contact-info-wrap { + margin-right: 50px; +} +.contact-info-wrap .list-wrap li { + margin-bottom: 40px; +} +.contact-info-wrap .list-wrap li:last-child { + margin-bottom: 0; +} +.contact-info-wrap .list-wrap li { + display: flex; + align-items: center; +} +.contact-info-wrap .list-wrap li { + display: flex; + align-items: center; +} +.contact-info-wrap .list-wrap li .icon { + width: 60px; + flex: 0 0 60px; + margin-left: 20px; +} +.contact-info-wrap .list-wrap li .icon img { + border-radius: 50%; +} +.contact-info-wrap .list-wrap li .content .title { + font-weight: 600; + font-size: 24px; + margin-bottom: 0; + color: var(--tg-white); +} +.contact-info-wrap .list-wrap li .content span { + display: block; + color: var(--tg-dark-electric); +} +.contact-info-wrap .list-wrap li .content a { + color: var(--tg-dark-electric); +} +.contact-info-wrap .list-wrap li .content a:hover { + color: var(--tg-primary-color); +} + +/* inner-contact */ +.inner-contact-area .section-title { + width: 65%; +} +.inner-contact-wrap { + position: relative; +} +#contact-map { + width: 100%; + height: 840px; + margin-bottom: 80px; +} +#contact-map iframe { + width: 100%; + height: 100%; + border-radius: 20px; +} +.inner-contact-info .list-wrap { + display: flex; + align-items: center; + justify-content: space-between; + flex-wrap: wrap; + gap: 30px; +} +.contact-info-item { + display: flex; + align-items: center; +} +.contact-info-item .icon { + width: 60px; + margin-left: 20px; + flex: 0 0 60px; +} +.contact-info-item .content .title { + font-weight: 600; + font-size: 24px; + margin-bottom: 5px; +} +.contact-info-item .content a, +.contact-info-item .content p { + margin-bottom: 0; + color: #605E7A; + line-height: 1.2; + display: block; +} +.contact-info-item .content a:hover { + color: var(--tg-primary-color); +} +.inner-contact-form-wrap { + border: 1px solid var(--tg-border-color); + box-shadow: 0px 35px 54px rgba(61, 90, 125, 0.03); + border-radius: 20px; + width: 610px; + padding: 45px 40px; + position: absolute; + left: 0; + top: 0; + background: var(--tg-white); +} +.inner-contact-form-wrap .form-grp { + position: relative; + margin-bottom: 24px; +} +.inner-contact-form-wrap .form-grp textarea, +.inner-contact-form-wrap .form-grp input { + width: 100%; + border: 1px solid #E3E3E3; + backdrop-filter: blur(21px); + background: transparent; + border-radius: 15px; + letter-spacing: 0.0833333px; + color: #818080; + font-size: 16px; + padding: 22px 55px 22px 30px; + height: 72px; + display: block; +} +.inner-contact-form-wrap .form-grp textarea::placeholder, +.inner-contact-form-wrap .form-grp input::placeholder { + color: #818080; + font-size: 16px; +} +.inner-contact-form-wrap .form-grp textarea { + min-height: 153px; + max-height: 153px; +} +.inner-contact-form-wrap .form-grp label { + position: absolute; + right: 28px; + color: #B1AEAE; + font-size: 15px; + z-index: 2; + top: 23px; +} +.inner-contact-form-wrap .btn { + background: var(--tg-primary-color); + margin-top: 22px; +} +.inner-contact-form-wrap span { + background: var(--tg-secondary-color); +} + +/*============================= + 30. Footer +===============================*/ +.footer-area { + background: var(--tg-section-background-two); +} +.logo img { + max-width: 126px; +} +.footer-top { + padding: 120px 0 80px; +} +.footer-widget { + margin-bottom: 40px; +} +.footer-widget .logo { + margin-bottom: 15px; +} +.footer-social .list-wrap { + display: flex; + align-items: center; + gap: 10px; + margin-bottom: 33px; +} +.footer-social .list-wrap li a { + width: 33px; + height: 33px; + display: flex; + align-items: center; + justify-content: center; + border-radius: 10px; + color: var(--tg-silver); + font-size: 14px; + border: 2px solid #272531; +} +.footer-social .list-wrap li a:hover { + color: var(--tg-secondary-color); + border-color: var(--tg-secondary-color); +} +.footer-contact span { + display: block; + color: var(--tg-silver); + margin-bottom: 8px; +} +.footer-contact .title { + font-size: 20px; + margin-bottom: 0; + color: var(--tg-white); +} +.footer-widget .fw-title { + font-size: 20px; + margin-bottom: 30px; + color: var(--tg-white); +} +.fw-link .list-wrap li { + position: relative; + padding-right: 20px; + margin-bottom: 10px; +} +.fw-link .list-wrap li:last-child { + margin-bottom: 0; +} +.fw-link .list-wrap li a { + color: var(--tg-silver); + font-size: 15px; + transition: .3s linear; +} +.fw-link .list-wrap li a::before { + content: ""; + position: absolute; + right: 6px; + top: 50%; + transform: translateY(-50%); + width: 4px; + height: 4px; + border-radius: 50%; + background: var(--tg-silver); + transition: .3s linear; +} +.fw-link .list-wrap li a:hover { + color: var(--tg-primary-color); +} +.fw-link .list-wrap li a:hover::before { + background: var(--tg-primary-color); +} +.footer-about .list-wrap li { + display: flex; + align-items: center; + margin-bottom: 25px; +} +.footer-about .list-wrap li:last-child { + margin-bottom: 0; +} +.footer-about .list-wrap li img { + margin-left: 13px; + min-width: 20px; +} +.footer-about .list-wrap li span, +.footer-about .list-wrap li a { + font-size: 15px; + color: var(--tg-silver); +} +.footer-about .list-wrap li a:hover { + color: var(--tg-primary-color); +} +.footer-bottom { + background: var(--tg-white); +} +.footer-bottom p { + margin-bottom: 0; + color: var(--tg-white); + font-size: 14px; +} +.footer-bottom { + background: #24222e; + padding: 21px 0; +} + +/* footer-two */ +.footer-top-two { + padding: 100px 0 85px; +} +.footer-content-two .logo { + margin-bottom: 18px; +} +.footer-content-two p { + margin-bottom: 0; + text-transform: capitalize; + color: var(--tg-gray-four); + opacity: 0.7; +} +.footer-bottom-two { + border-top: 1px solid #46464F; + padding: 22px 0; +} +.footer-bottom-two .copyright-text p { + margin-bottom: 0; + color: var(--tg-white); + opacity: 0.7; +} +.footer-social-two .list-wrap { + display: flex; + align-items: center; + justify-content: flex-end; +} +.footer-social-two .list-wrap li.title { + color: var(--tg-white); + opacity: 0.7; + margin-left: 20px; +} + +/* footer-three */ +.footer-area-three .footer-content-two p { + color: var(--tg-black-coral); + opacity: 0.7; +} +.footer-area-three .footer-bottom-two { + border-top: 1px solid #CFCFCF; +} +.footer-area-three .footer-bottom-two .copyright-text p { + color: var(--tg-black-coral); + opacity: 0.7; +} +.footer-area-three .footer-social-two .list-wrap li.title { + color: var(--tg-black-coral); + opacity: 0.7; + margin-left: 20px; +} + +/*============================= + 31. Preloader +===============================*/ +#preloader { + background-color: var(--tg-white); + height: 100%; + width: 100%; + position: fixed; + margin-top: 0px; + top: 0px; + z-index: 9999; +} +#preloader .loader .loader-container { + position: absolute; + top: 50%; + right: 50%; + transform: translate(50%, -50%); + width: 100px; + height: 100px; + border: 3px solid var(--tg-border-color); + border-radius: 50%; +} +#preloader .loader .loader-container:before { + position: absolute; + content: ""; + display: block; + top: 50%; + right: 50%; + transform: translate(50%, -50%); + width: 100px; + height: 100px; + border-top: 3px solid var(--tg-primary-color); + border-radius: 50%; + animation: loaderspin 1.8s infinite ease-in-out; + -webkit-animation: loaderspin 1.8s infinite ease-in-out; +} +#preloader .loader .loader-icon { + position: absolute; + top: 50%; + right: 50%; + transform: translate(50%, -50%); + width: 80px; + text-align: center; +} +#preloader .loader .loader-icon img { + animation: loaderpulse alternate 900ms infinite; + width: 40px; +} +@keyframes loaderspin { + 0% { + transform: translate(50%, -50%) rotate(0deg); + } + 100% { + transform: translate(50%, -50%) rotate(-360deg); + } +} +@-webkit-keyframes loaderspin { + 0% { + transform: translate(50%, -50%) rotate(0deg); + } + 100% { + transform: translate(50%, -50%) rotate(-360deg); + } +} +@keyframes loaderpulse { + 0% { + transform: scale(1); + } + 100% { + transform: scale(1.2); + } +} + +/* Custom cursor */ +.cursor-outer { + margin-right: -18px; + margin-top: -18px; + width: 35px; + height: 35px; + background: var(--tg-primary-color); + box-sizing: border-box; + z-index: 10000000; + opacity: .2; + transition: all 0.3s ease-out; +} +.mouseCursor { + position: fixed; + top: 0; + right: 0; + left: 0; + bottom: 0; + pointer-events: none; + border-radius: 50%; + transform: translateZ(0); + visibility: hidden; + text-align: center; +} +[dir=rtl] .mouseCursor { + right: 0; + left: auto; +} +.cursor-inner { + margin-right: -4px; + margin-top: -4px; + width: 8px; + height: 8px; + z-index: 10000001; + background-color: var(--tg-primary-color); + transition: width 0.3s ease-in-out, height 0.3s ease-in-out, margin 0.3s ease-in-out, opacity 0.3s ease-in-out; +} +.cursor-inner span { + color: var(--tg-white); + line-height: 80px; + opacity: 0; + text-transform: uppercase; + letter-spacing: 1px; + font-size: 12px; +} +.cursor-inner.cursor-big span { + opacity: 1; +} +.mouseCursor.cursor-big { + width: 80px; + height: 80px; + margin-inline-start: -40px; + margin-top: -40px; +} +.mouseCursor.cursor-big.cursor-outer { + display: none; +} +.mouseCursor.cursor-big.d-none { + display: none; +} +.slider-drag .swiper-slide { + cursor: none; +} \ No newline at end of file