/* ===============================

# Template Name: TIKKA Portfolio
# Author: Devollic
# Description: Personal portfolio HTML Template
# Version: 1.0

=============================== */

/* 
*******************************
Index
*******************************

# 01. Root variables
# 02. Body
# 03. Typography
# 04. Common classes
# 05. Custom class
# 06. Buttons
# 07. Form Elements
# 08. Banner
# 09. Counter section
# 10. About me section
# 11. Educations and skills section
# 12. Services section
# 13. Featured section
# 14. Portfolio section
# 15. Newsletter section
# 16. Company Logos
# 17. Slider navigation
# 18. Blog card
# 19. Footer
# 20. Elements Page
# 21. About page
# 22. Blog page
# 23. Single Blog
# 24. Contact Page
# 25. Home 2 CSS
# 26. Project Page

-------------------
*/

/* 
  *************************
  * 01. root variables
  *************************
*/

:root {
   --primary: #c8f31d;
   --secondary: #131313;
   --sectionBg: #191919;
   --fontColor: #bfbfbf;
   --body-text-color: #bebebe;
}

/* 
  *************************
  * 02. Body
  *************************
*/

body {
   background-color: var(--secondary);
   font-family: "Montserrat", sans-serif;
   font-size: 15px;
   line-height: 30px;
   font-weight: 400;
   font-style: normal;
}
main {
   overflow-x: hidden;
}
/* 
  *************************
  * 03. Typography
  *************************
*/

h1,
h2,
h3,
h4,
h5,
h6 {
   font-family: "Alata", sans-serif;
   font-weight: 400;
   font-style: normal;
   margin: 0;
   color: #ffffff;
}

h1 {
   font-size: 50px;
   line-height: 62px;
}
h2 {
   font-size: 36px;
   line-height: 46px;
}
h3 {
   font-size: 30px;
   line-height: 40px;
}
h4 {
   font-size: 20px;
   line-height: 30px;
}
hr {
   color: #bfbfbf;
}
a {
   text-decoration: none;
   color: #ffffff;
}
p {
   margin: 0;
}
li {
   list-style: none;
}
ul {
   padding: 0;
   margin: 0;
}

/* 
  *************************
  * 04. Common classes
  *************************
*/
.page-main-wrapper {
   overflow-x: hidden;
}
.sub-heading-text {
   font-size: 14px;
   line-height: 32px;
   text-transform: uppercase;
   color: var(--primary);
}
.sub-heading-1 {
   text-decoration: underline;
}
.sub-heading-horizontal-line {
   border: 1px solid var(--primary);
   width: 60px;
   opacity: 1;
}
.gray-paragraph {
   color: #ffffff;
   opacity: 0.72;
   margin: 0;
}
.white-paragraph {
   color: #ffffff;
   margin: 0;
}
.global-page-banner {
   padding: 110px 0;
}
.body-text {
   color: var(--body-text-color);
}
.section-space {
   padding: 60px 0;
   margin: 60px auto;
}
.section-bg {
   background-color: var(--sectionBg);
}
.hr-divider {
   border: 1px solid var(--primary);
}
.horizontal-list-items {
   display: grid;
   grid-template-columns: 1fr 1fr;
   row-gap: 20px;
}
.cursor-pointer{
   cursor: pointer;
}

/* 

  *************************
  * 05. Custom class
  *************************
*/
.text-color {
   color: var(--primary);
}
.my-2 {
   margin: 2px 0;
}
.my-4 {
   margin: 4px 0;
}
.my-6 {
   margin: 6px 0;
}
.my-8 {
   margin: 8px 0;
}
.my-10 {
   margin: 10px 0;
}
.my-30 {
   margin: 30px 0;
}
.mt-20 {
   margin-top: 20px;
}
.my-20 {
   margin: 20px 0;
}
.pt-120 {
   padding-top: 120px;
}
.pb-120 {
   padding-bottom: 120px;
}

/* 
  *************************
  * 06. Buttons
  *************************
*/

.button {
   font-size: 12px;
   font-style: normal;
   font-weight: 700;
   line-height: 24px;
   letter-spacing: 5px;
   outline: none;
   border: none;
   display: inline-flex;
   align-items: flex-start;
   padding: 20px 30px;
   gap: 10px;
   border-radius: 20px;
   transition: 0.3s;
   border: 1px solid var(--primary);
}

/* Fill button */
.fillBtn {
   background-color: var(--primary);
}
.fillBtn > span {
   color: var(--secondary);
   opacity: 1;
   gap: 10px;
}
.fillBtn:hover {
   background-color: #ffffff;
   border: 1px solid var(--secondary);
}
.fillBtn:hover span,
.btnIcon {
   color: var(--secondary);
}
.btn-plus-icon {
   transition: 0.3s;
}
.fillBtn:hover .btn-plus-icon,
.navBtn:hover .btn-plus-icon {
   transform: rotate(-45deg);
}
.fillBtn:hover i {
   color: var(--secondary);
}
.btn-text {
   color: var(--secondary);
}
.btn-inner-wrapper {
   gap: 10px;
}

/* Button outline */
.outlineBtn {
   background-color: transparent;
}
.outlineBtn span,
.outlineBtn > .btnIcon {
   color: #ffffff;
}
.outlineBtn .btnIcon {
   color: #ffffff;
}
.outlineBtn:hover {
   background-color: #ffffff;
   border: 1px solid #ffffff;
   outline: none;
}
.outlineBtn:hover span,
.outlineBtn > .btnIcon {
   color: var(--secondary);
}

.outlineBtn:hover .btnIcon {
   color: var(--secondary);
}
.outlineBtn:hover .btn-plus-icon {
   transform: rotate(-45deg);
}
/* Link button */
.link-btn {
   font-size: 12px;
   font-style: normal;
   font-weight: 700;
   line-height: 24px;
   letter-spacing: 5px;
   outline: none;
   border: none;
   transition: 0.3s all;
   color: var(--primary);
}

/* Button right icon */
.btnIcon {
   font-size: 14px;
   font-weight: 900;
}

/* 
  *************************
  * 07. Form Elements
  *************************
*/

.inputField {
   display: inline-flex;
   justify-content: center;
   align-items: center;
   height: 70px;
   border: 1px solid #ffffff;
   opacity: 0.7;
   border-radius: 20px;
   background-color: var(--sectionBg);
   color: #ffffff;
   padding: 0 15px;
}
.inputField:focus {
   border: 1px solid var(--primary);
   outline: 1px solid var(--primary);
}

/* 
  *************************
  * 08. Navigation
  *************************
*/

.navMainWrapper {
   height: 62px;
   border-radius: 0px 20px 20px 0px;
   background: linear-gradient(
      90deg,
      rgba(200, 243, 29, 0) 0.01%,
      rgba(200, 243, 29, 0.2)
   );
}

.navbarLinksWrapper {
   gap: 25px;
}
.navbarLinksWrapper a i {
   font-size: 10px;
   font-weight: 900;
}
.navBtn {
   background-color: var(--primary);
   border-top-left-radius: 0;
   border-bottom-left-radius: 0;
   padding: 18px 30px;
   color: var(--secondary);
}
.navBtn:hover {
   background-color: #ffffff;
   border: 1px solid #ffffff;
}
.fa-solid.fa-angle-down {
   margin-left: 5px;
}
.mobile-menu {
   background-color: var(--secondary);
}
.navbar-toggler-icon {
   color: #ffffff;
}

.dropdown-toggle::after {
   display: none;
}
#mobile-expand-dropdown {
   color: #fff;
}

/* 
  *************************
  * 08. Banner
  *************************
*/
.hero-main-section {
   background: url("../images/home/main-hero-bg.svg");
   background-color: var(--sectionBg);
   background-repeat: no-repeat;
   background-size: cover;
   padding-top: 30px;
}
.home-banner {
   padding: 175px 0;
}

.home-banner-check-icon {
   font-size: 18px;
}
.home-banner-checked-item {
   gap: 10px !important;
}
.home-banner-list-wrapper {
   padding-top: 26px;
   display: flex;
   flex-direction: column;
   gap: 22px;
}
@keyframes moveLeftright {
   0% {
      opacity: 1;
      transform: translateX(0px);
   }
   100% {
      opacity: 1;
      transform: translateX(-30px);
   }
}
.subtitle {
   font-size: 20px;
   font-family: "Alata", sans-serif;
   padding-bottom: 11px;
   margin: 0;
   color: #ffffff;
   opacity: 0.5;
}
/* Banner title */
.bannerTitle {
   font-size: 60px;
}
.highlightedWord {
   color: var(--primary);
   opacity: 1;
   position: relative;
   font-size: 68px;
}
.highlightedWord::after {
   content: "";
   background: url("../images/home/highlighted-word.svg");
   width: 90%;
   height: 20px;
   display: block;
   position: absolute;
   left: 50%;
   transform: translate(-50%, 0);
   background-repeat: no-repeat;
}
.highlightedWord::before {
   content: url(../images/home/home-banner-star-1.svg);
   position: absolute;
   right: 45px;
   top: -37px;
   animation: moveLeftright 2s linear alternate infinite;
}
.designation {
   font-size: 28px;
   margin: 20px 0;
}

.banner-achievement-wrapper {
   gap: 10px;
   padding-top: 10px;
}
.banner-achievement-wrapper p {
   opacity: 1;
}
/* Banner buttons */
.banner-buttons {
   padding-top: 36px;
   gap: 30px;
}
.banner-buttons::after {
   content: url(../images/home/banner-star-2.svg);
   top: -10px;
   position: absolute;
   right: 0;
   animation: moveLeftright 2s linear alternate infinite;
}
.banner-play-button {
   display: flex;
   align-items: center;
   gap: 15px;
}
.banner-play-button p {
   font-size: 20px;
}
.banner-right-image-wrapper {
   position: relative;
   background-image: url(../images/home/hero-bg-vector.svg);
   background-position: center center;
   background-repeat: no-repeat;
   background-size: cover;
   text-align: center;
   width: 591px;
   height: 642px;
}
.banner-right-image-wrapper img {
   margin: 0 auto;
}

/* 
  *************************
  * 09. Counter section
  *************************
*/
.counter-main-wrapper {
   padding: 120px 0;
}
.counter-section {
   background-color: var(--sectionBg);
   border-radius: 20px;
   border: 1px solid rgba(200, 243, 29, 0.4);
   padding: 40px 0;
   margin: 120px auto;
}
.counter-item {
   border-bottom: none;
   background-color: inherit;
   border-right: 1px solid var(--primary);
}
.counter-item-right {
   border-bottom: none;
   background-color: inherit;
   padding: 30px;
}
.counter-section-divider {
   width: 1px;
   height: 100%;
   background: var(--primary);
   display: block;
}

.job-duration {
   display: inline-flex;
   color: #ffffff;
   border: 1px solid var(--primary);
   padding: 11px 30px;
   height: 52px;
   border-radius: 20px;
   margin-bottom: 25px;
}
.counter-title {
   margin-top: 8px;
}

/* 
  *************************
  * 10. About section
  *************************
*/
.about-description-main-home {
   color: #e3e3e3;
}
.abt-need-help-wrapper {
   gap: 15px;
}
.about-testimonial-wrapper {
   margin-top: 60px;
}
.global-banner__bredcamb-wrapper {
   display: flex;
   align-items: center;
   gap: 19px;
}
/* 
  *************************
  * 11. Educations and skills section
  *************************
*/
.education-skills-header-description {
   padding-left: 90px;
}
.education-section-subtitle,
.service-section-subtitle {
   color: #fbd679;
   margin-bottom: 6px;
}
.skills-area {
   display: grid;
   grid-template-columns: 1fr 1fr;
   grid-column-gap: 30px;
   grid-row-gap: 87px;
}
.education-and-skills-header {
   padding-bottom: 70px;
}
.edu-and-skills-title {
   padding-bottom: 15px;
}
.index-skill-bar {
   margin-top: 30px;
}
.wordpress-dev-progress {
   width: 75%;
}
.wordpress-dev-progress-wrapper::after {
   width: 75%;
}
.python-dev-progress {
   width: 90%;
}
.python-dev-progress-wrapper::after {
   width: 90%;
}
.ken-university-progress {
   width: 80%;
}
.ken-university-progress-wrapper::after {
   width: 80%;
}
.ui-design-progress {
   width: 90%;
}
.ui-design-progress-wrapper::after {
   width: 90%;
}
.service-cards-row {
   padding-top: 60px;
}

/* 
  *************************
  * 12. Services section
  *************************
*/
.service-cards-wrapper {
   padding: 60px 0 0 0;
}
.main-home-service-title {
   padding-bottom: 10px;
}
.my-service-section {
   padding-bottom: 30rem;
}
.service-card {
   text-align: center;
   border: 1px solid rgba(200, 243, 29, 0.4);

   border-radius: 20px;
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   padding: 40px;
}
.link-btn .btn-right-icon {
   transition: 0.3s all;
}
.link-btn:hover .btn-right-icon {
   transform: translateX(10px);
}
/* 
  *************************
  * 13. Featured section
  *************************
*/

.features-list {
   display: grid;
   grid-row-gap: 22px;
}

.featured-section {
   display: flex;
   justify-content: space-between;
   /* gap: 116px; */
   border: 1px solid rgba(200, 243, 29, 0.4);
   border-radius: 20px;
   align-items: center;
   background: var(--sectionBg);
   margin-top: -27rem;
   margin-bottom: 180px;
   width: 90%;
}
.featured-image {
   margin: 70px 0 -100px -136px;
}
.single-feature-image::after {
   content: url("../images/home/featured-image-icon.svg");
   position: absolute;
   width: 20px;
   height: 20px;
   top: 0;
   left: -8rem;
   z-index: -1;
}

/* 
  *************************
  * 14. Portfolio section
  *************************
*/
.portfolio-cards-wrappers {
   display: flex;
   flex-direction: column;
   gap: 100px;
   margin-top: 53px;
}
.portfolio-card-content {
   background-color: #222222;
   border-right: 1px solid var(--primary);
   border-top-right-radius: 20px;
   border-bottom-right-radius: 20px;
   padding: 40px 30px;
}
.portfolio-image {
   margin-bottom: -85px;
}
.portfolio-card {
   padding: 50px 0;
}

.logo_carousel .owl-item img {
   width: auto !important;
}

/* 
  *************************
  * 15. Newsletter section
  *************************
*/
.newsletter-section-wrapper {
   border: 2px solid rgba(255, 255, 255, 0.13);
   border-radius: 20px;
   margin: 120px auto;
   overflow: hidden;
   background: linear-gradient(
      90deg,
      rgba(25, 25, 25, 0) 0.33%,
      #191919 37.33%
   );
}
.newsletter-form {
   padding: 150px 60px;
   gap: 8.3px;
}
.newsletter-content {
   padding: 0px 60px;
}
.newsletter-form-wrapper {
   background: linear-gradient(90deg, #191919 0%, rgba(25, 25, 25, 0.51)),
      url("../images/home/newletter-bg.png");
}
.subscription-form-title::after {
   content: "";
   height: 1px;
   width: 40%;
   background: var(--primary);
   display: block;
   position: absolute;
   top: 82%;
   right: 0;
}
.subscription-form-title::before {
   content: "";
   width: 10px;
   height: 10px;
   background: var(--primary);
   position: absolute;
   bottom: 17px;
   right: 0;
   transform: rotate(45deg);
}

/* 
  *************************
  * 16. Company Logos
  *************************
*/
.company-logos {
   display: grid;
   grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
}

/* 
  *************************
  * 17. Slider navigation
  *************************
*/
.slider-nav {
   width: 60px;
   height: 60px;
   border-radius: 20px;
   border: 2px solid #c8f31d36;
   background: transparent;
   color: #ffffff;
   transition: 0.3s all;
}
.slider-nav:hover {
   border: 2px solid var(--primary);
}
.testimonial-quote-icon-wrapper i {
   font-size: 64px;
   color: var(--primary);
   font-weight: 900;
   opacity: 0.1;
}
.testimonial-wrapper {
   margin-top: 60px;
   background-image: url(../images/home/feedback-vector.svg);
   background-repeat: no-repeat;
   background-position: left bottom;
}
.testimonial-card {
   border-radius: 20px;
   background: linear-gradient(
      rgba(255, 255, 255, 0.04),
      rgba(255, 255, 255, 0.04)
   );
   padding: 40px;
}
.home-feedback-client-name {
   padding-bottom: 10px;
}
/* 
  *************************
  * 18. Blog card
  *************************
*/
.blog-card-2 {
   margin-top: 60px;
}
.blog-card-3 {
   margin-top: 120px;
}

.blog-main-wrapper {
   padding-bottom: 120px;
}
.blog-card-wrapper {
   border-radius: 20px;
   background: linear-gradient(
      rgba(255, 255, 255, 0.04),
      rgba(255, 255, 255, 0.04)
   );
}
.blog-content {
   padding: 30px;
}

/* 
  *************************
  * 19. Footer
  *************************
*/
.footer-main-wrapper {
   background: url("../images/home/footer-bg.svg");
   background-position: center center;
   background-repeat: no-repeat;
   background-size: cover;
   background-color: var(--sectionBg);
   margin-top: 120px;
   padding-top: 120px;
}
.footer-social-icons-wrapper {
   margin: 35px 0;
}
.footer-social-icons-wrapper li a {
   border-radius: 5px;
   border: 1px solid rgba(255, 255, 255, 0.2);
   background: transparent;
   transition: 0.3s;
   height: 35px;
   width: 35px;
   display: flex;
   align-items: center;
   justify-content: center;
}
.footer-social-icons-wrapper li a:hover {
   border-color: var(--primary);
}
.footer-content-wrapper {
   padding-top: 115px;
}
.footer-divider {
   opacity: 0.1;
   height: 1px;
   background: #fff;
   margin-top: 60px;
}
.footer-email {
   margin-left: 100px;
}
.footer-email::before {
   content: "";
   width: 80px;
   height: 2px;
   background: #ffffff;
   position: absolute;
   bottom: 14px;
   left: -8%;
}
.footer-email::after {
   content: "";
   width: 10px;
   height: 10px;
   position: absolute;
   background: #ffffff;
   left: -16px;
   top: 20px;
   border-radius: 50%;
}
.footer-useful-links {
   gap: 10px;
}
.d-flex.main-foo-ci {
   gap: 10px;
}
.footer-ci-wrapper {
   gap: 18px;
}
.footer-lst-news-list {
   gap: 20px;
}
.footer-title-gap-wrapper {
   margin-top: 16px;
}

.footer-title-latest-news-gap-wrapper {
   margin-top: 26px;
}

/* 
  *************************
  * 20. Elements Page
  *************************
*/
.banner_area {
   position: relative;
   z-index: 1;
   min-height: 485px;
}

.banner_area .banner_inner {
   position: relative;
   overflow: hidden;
   width: 100%;
   min-height: 485px;
   background: url(../images/banner/common-banner.png) no-repeat right bottom;
   background-size: 90% 85%;
   width: 98%;
   z-index: 1;
}
.elements-titlebar {
   background: var(--primary);
   color: var(--secondary);
   margin-bottom: 20px;
   padding: 5px;
   border-radius: 6px;
   text-align: center;
}
.column {
   border: 1px solid var(--primary);
   border-radius: 6px;
   padding: 10px;
}
.element-list-item {
   color: #ffffff;
   display: flex;
   align-items: center;
   gap: 15px;
}
.progress-wrapper-1 {
   background-color: var(--sectionBg);
   height: 57px;
   display: flex;
   position: relative;
   align-items: end;
   padding: 0 20px;
   border-top-left-radius: 20px;
   border-top-right-radius: 20px;
   border-bottom-right-radius: 20px;
   overflow: hidden;
}
.progress-1 {
   padding-bottom: 10px;
}
.progress-1 p {
   color: #ffffff;
}
.progress-wrapper-1::after {
   content: "";
   display: block;
   background-color: var(--primary);
   height: 6px;
   position: absolute;
   bottom: 0;
   left: 0;
   border-top-right-radius: 20px;
}

/* Progress bar 2 */
.progress-wrapper-2 {
   background-color: var(--sectionBg);
   height: 3px;
   display: flex;
   position: relative;
   padding: 0 20px;
   border-radius: 20px;
}
.progress-2 {
   width: 75%;
}
.progress-2 p {
   color: #ffffff;
}
.progress-wrapper-2::after {
   content: "";
   display: block;
   background-color: #ffffff;
   opacity: 0.5;
   height: 100%;
   width: 75%;
   position: absolute;
   bottom: 0;
   left: 0;
   border-radius: 20px;
}

/* 
  *************************
  * 21. About page
  *************************
*/

.global-page-banner-wrapper {
   background: url(../images/about/about-banner.png);
   background-position: bottom center;
   background-repeat: no-repeat;
   background-size: cover;
   padding-top: 30px;
}
.about-feature-section {
   margin-top: 0;
}
.about-btn-wrapper {
   padding-top: 40px;
   gap: 40px;
}
.about-badge {
   position: absolute;
   top: 20px;
   background: var(--primary);
   padding: 13px;
   border-radius: 20px;
   left: 44px;
}
.badge-inner {
   padding: 10px;
   border: 1px dashed #000;
   border-radius: 20px;
}
.badge-inner {
   padding: 10px;
   border: 1px dashed #000;
   border-radius: 20px;
   display: flex;
   align-items: center;
   justify-content: center;
   gap: 28px;
}
.badge-title {
   color: var(--secondary);
}
.abt-title {
   margin-top: 10px;
}
/* 
  *************************
  * 22. Blog page
  *************************
*/
.blog-meta-wrapper {
   width: 50%;
   background: var(--sectionBg);
   border-bottom-left-radius: 20px;
   border-bottom-right-radius: 20px;
   position: absolute;

   bottom: -30px;
}
.blog-archive-meta {
   border-right: 2px solid var(--primary);
   right: 0;
}
.blog-archive-wrapper {
   display: flex;
   flex-direction: column;
   gap: 80px;
}

/* Sidebar widgets */
.sidebar-widgets-wrapper {
   display: flex;
   flex-direction: column;
   gap: 50px;
}
.sidebar-widget {
   padding: 30px;
   background: var(--sectionBg);
   border-radius: 20px;
   border: 1px solid rgba(200, 243, 29, 0.4);
}

/* Search box */
.bas-search-input {
   padding: 15px 20px;
   border-top-left-radius: 20px;
   border-bottom-left-radius: 20px;
   border: none;
   background-color: var(--secondary);
   outline: 1px solid var(--sectionBg);
   color: #ffffff;
}
.bas-search-input::placeholder {
   color: #ffffff;
}
.bas-search-input:focus {
   outline: 1px solid var(--primary);
}
.bas-search-widget-button {
   padding: 15px 20px;
   border: none;
   border-top-right-radius: 20px;
   border-bottom-right-radius: 20px;
   background: var(--primary);
   font-size: 23px;
   display: flex;
   align-items: center;
   justify-content: center;
   outline: 1px solid var(--primary);
}

/* Author box */
.bas-author-profile-image {
   top: -65px;
}
.author-box-widget {
   margin-top: 50px;
}
.author-box-widget .author-name {
   padding-top: 50px;
   padding-bottom: 16px;
}

/* Category box */
.bas-category-list {
   display: flex;
   flex-direction: column;
   gap: 20px;
}
.title-divider::after {
   content: "";
   position: absolute;
   bottom: -10px;
   left: 0;
   width: 100%;
   height: 1px;
   background: var(--primary);
}
.blog-page-category-names {
   transition: 0.3s all;
}
.blog-page-category-names:hover {
   transform: translateX(5px);
}

/* Recent news box */
.bas-recent-news-date {
   font-size: 10px;
}

/* Tags */
.bas-tags-wrapper {
   display: flex;
   flex-wrap: wrap;
   gap: 20px;
}
button.tags-pill {
   background: rgba(255, 255, 255, 0.05);
   border: none;
   border-radius: 5px;
   color: #ffffff;
   padding: 7px;
}

/* Pagination */
.pagination-number {
   background: rgba(255, 255, 255, 0.05);
   width: 67px;
   height: 67px;
   font-size: 20px;
   border-radius: 50%;
   color: #ffffff;
   border: 1px solid rgba(255, 255, 255, 0.05);
   transition: 0.3s all;
}
.pagination-number:hover {
   border: 1px solid var(--primary);
}

/* 
  *************************
  * 23. Single blog page
  *************************
*/

.single-blog-meta {
   border-left: 2px solid var(--primary);
   left: 0;
}
.quote-wrapper {
   background: var(--sectionBg);
   padding: 50px;
   border-radius: 20px;
   margin-top: 30px;
}
.quote-icon {
   background: rgba(255, 255, 255, 0.05);
   width: 67px;
   height: 67px;
   font-size: 20px;
   border-radius: 50%;
   color: #ffffff;
   border: 1px solid var(--primary);
   transition: 0.3s all;
}
.quote-author-name {
   font-size: 24px;
   color: var(--primary);
}

/* Post sharing */
.tag-writing-box {
   border: 1px solid var(--primary);
   border-radius: 20px;
   padding: 0 30px;
   height: 75px;
   margin-top: 60px;
}
.tag-writing-box input {
   padding: 15px 0;
   width: 100%;
   background: transparent;
   border: none;
   color: #ffffff;
}
.tag-writing-box input:focus {
   border: none;
   outline: none;
}
.tag-writing-box input::placeholder {
   color: #bebebe;
}
.sharing-tag-and-icon-wrapper {
   display: flex;
   align-items: center;
   gap: 10px;
}
.comment-text.white-paragraph {
   padding-top: 2px;
}
.comment-reply-button {
   padding: 20px 30px;
   border-radius: 45px;
   font-size: 12px;
   font-weight: 700;
   height: 40px;
   line-height: 24px;
   letter-spacing: 5px;
   background: transparent;
   border: 1px solid var(--primary);
   color: white;
   display: inline-flex;
   justify-content: center;
   gap: 0;
   align-items: center;
   margin-top: 15px;
}
.single-comment {
   gap: 30px;
}
.comment-box-wrapper {
   padding-top: 40px;
   display: flex;
   flex-direction: column;
   gap: 60px;
}
.v2-input-field {
   display: inline-flex;
   justify-content: center;
   align-items: center;
   height: 70px;
   border: 1px solid rgba(200, 243, 29, 0.3);
   opacity: 0.7;
   border-radius: 20px;
   background-color: var(--sectionBg);
   color: #bebebe;
   padding: 0 22px;
}
.v2-input-field::placeholder {
   color: #bebebe;
}
.v2-input-field:focus {
   outline: 1px solid rgba(200, 243, 29, 0.3);
}
.comment-write-form {
   display: flex;
   flex-direction: column;
   gap: 30px;
   padding-top: 30px;
}
.comment-writing-input-box {
   height: 220px;
   padding: 22px;
}
.write-comment-paragraph {
   padding-top: 8px;
}

/* 
  *************************
  * 24. Contact page
  *************************
*/
.contact-page__form--field-wrapper {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 30px;
}
.page-banner-breadcrumb {
   display: flex;
   gap: 19px;
}
.cf-title::after {
   width: 116%;
}
.cf-input-field {
   border: 1px solid rgba(255, 255, 255, 0.2);
}
.cf-input-field:focus {
   border: 1px solid rgba(200, 243, 29, 0.3);
   outline: none;
}
.cf-description {
   margin-top: 30px;
}
.contact-info {
   gap: 30px;
}
.cf-icon {
   font-size: 20px;
   font-weight: 900;
   width: 50px;
   height: 50px;
   border-radius: 10px;
   border: 1px solid var(--primary);
   display: flex;
   align-items: center;
   justify-content: center;
}
.cf-info-box {
   display: flex;
   flex-direction: column;
   gap: 5px;
   margin-top: -px;
}
.contact-info-wrapper {
   margin-top: 40px;
   display: flex;
   flex-direction: column;
   gap: 38px;
}
.contact-page__map{
   width: 100%;
   height: 450px;
   border: none;
}
/* 
  *************************
  * 25. Home 2 CSS
  *************************
*/
.home2-navigation-bar {
   padding: 20px 0;
   height: inherit;
}
.home2-nav-right {
   gap: 40px;
}
.home2-banner-right-man {
   width: auto;
}
.home2-banner-wrapper {
   background: url(../images/home2/banner-bg-right.svg);
   background-repeat: no-repeat;
   background-position: bottom right;
}
.home2-bg-top-left {
   background: url(../images/home2/banner-bg-top-left.svg);
   background-repeat: no-repeat;
   background-position: top left;
}
.home2-banner {
   padding-top: 60px;
}
.home2-banner-icon {
   padding-bottom: 10px;
   gap: 20px;
}
.home2-banner-title {
   font-size: 80px;
   line-height: 85px;
   letter-spacing: -2.5px;
   padding-bottom: 10px;
}
.home2-subtitle {
   font-size: 30px;
   font-weight: 300;
   line-height: 62px;
}
.home2-banner-description {
   margin-top: 17px;
   padding-bottom: 40px;
}

/* Work process */
.work-process-wrapper {
   background: var(--sectionBg);
   padding: 47px 30px;
   border-radius: 20px;
   border: 1px solid rgba(200, 243, 29, 0.4);
}
.work-process-inner-wrapper {
   gap: 20px;
}
.work-process-info {
   gap: 18px;
   margin-top: -10px;
}

/* Services section */
.service-title-wrapper {
   gap: 30px;
}
.service-title {
   font-size: 26px;
   font-weight: 400;
   line-height: 40px;
}
.service-left-image {
   width: auto;
}
.all-services-wrapper {
   gap: 30px;
}
.service-left-image {
   margin-bottom: -50px;
}
.home2-gallery-section {
   background: url(../images/home2/service-vector.svg);
   background-repeat: no-repeat;
   background-position: bottom left;
   padding-top: 100px;
   background-color: var(--sectionBg);
}

/* Education section */
.home2-education-title {
   padding-top: 5px;
   padding-bottom: 10px;
}
.home2-education-text {
   padding-right: 45px;
}
.home2-education-divider {
   margin-top: 60px;
   margin-bottom: 40px;
}
.home2-education-degree-wrapper {
   padding-top: 56px;
}
.section-header-right-text {
   width: 66%;
}

/* Skills section */
.best-skills-main-wrapper {
   background: url(../images/home2/skills-bar-bg-vector.svg);
   background-repeat: no-repeat;
   background-position: bottom right;
}
.home2-testimonial-quote-wrapper img {
   width: auto !important;
}
.home2-skills-progress-title {
   width: 15%;
}
.home2-skills-progress {
   background-color: rgba(255, 255, 255, 0.2);
}
.home2-skills-bar-wrapper {
   padding-top: 100px;
   display: flex;
   flex-direction: column;
   gap: 87px;
}
.home2-portfolio-slider-arrow {
   border: 2px solid rgba(200, 243, 29, 0.2);
}
.home2-portfolio-slider-title {
   padding-top: 15px;
   padding-bottom: 8px;
}
.home2-portfolio-arrow-wrapper {
   padding-top: 40px;
}

.home2-skills-photoshop::after {
   width: 80%;
}
.home2-skills-uiux::after {
   width: 90%;
}
.home2-skills-figma::after {
   width: 50%;
}
.home2-skills-adobe::after {
   width: 85%;
}
.home2-skills-illustration::after {
   width: 50%;
}
.home2-skills-sketch::after {
   width: 90%;
}
.home2-skills-photoshop-count {
   width: 80%;
}
.home2-skills-uiux-count {
   width: 90%;
}
.home2-skills-figma-count {
   width: 50%;
}
.home2-skills-adobe-count {
   width: 85%;
}
.home2-skills-illustration-count {
   width: 50%;
}
.home2-skills-sketch-count {
   width: 90%;
}
.home2-logo-carousel {
   margin-top: 60px;
}
.home2-blog-content {
   padding: 30px 0;
}
.home2-testimonial-left-wrapper {
   background: linear-gradient(
         90deg,
         #131313 0%,
         rgba(19, 19, 19, 0.99) 6.67%,
         rgba(19, 19, 19, 0.79) 100%,
         rgba(19, 19, 19, 0) 100%
      ),
      url(../images/home2/testimonial-left-bg.png);
   background-position: center center;
   background-size: cover;
   border-radius: 20px;
   height: 560px;
   display: flex;
   align-items: center;
   padding: 0 60px;
}
.home23-quote-text {
   padding-top: 20px;
   padding-bottom: 32px;
}
.client-photo-wrapper::after {
   content: url("../images/home2/testimonial-client-pic-bg.svg");
}
.home2-testimonial-quote-wrapper {
   margin-left: -10rem;
   border-right: 1px solid var(--primary);
}
.client-info-wrapper {
   gap: 20px;
}

/* Best experience section */
.home2-exp-company-name {
   padding-bottom: 5px;
   font-size: 20px;
   font-weight: 700;
   color: #fff;
   line-height: 30px;
}
.text-color.home2-exp-title {
   padding-top: 21px;
   padding-bottom: 12px;
}
.home2-exp-card-inner-wrapper {
   padding: 8px 45px;
}
.experience-card-wrapper::before {
   content: "";
   position: absolute;
   width: 1px;
   height: 100%;
   background: var(--primary);
}
.experience-card-wrapper::after {
   content: "";
   width: 7px;
   height: 7px;
   background: var(--primary);
   position: absolute;
   top: 0;
   border-radius: 50%;
   left: -3px;
}
.row.home2-exp-wrapper-row {
   padding-top: 56px;
}
.circle-bottom::after {
   top: 100%;
}
.home2-section-title {
   padding-top: 10px;
   padding-bottom: 8px;
}

/* Pricing list */
.pricing-description {
   padding-top: 10px;
   padding-bottom: 20px;
}
.pricing-list-service-list {
   row-gap: 10px;
   padding-bottom: 30px;
}
.pricing-list-inner-wrapper {
   background: #1c1c1c;
   border-radius: 20px;
   padding: 34px;
   border: 1px solid rgba(255, 255, 255, 0.2);
   gap: 80px;
}
.pricing-list-main-wrapper {
   display: flex;
   flex-direction: column;
   gap: 30px;
}
.home2-pricing-section-header {
   width: 50%;
   margin: auto;
   padding-bottom: 56px;
   text-align: center;
}

/* Achievement section */
.home2-achievement-main-wrapper {
   background: var(--sectionBg);
   padding: 80px;
}
.home2-achievement-title {
   padding-top: 10px;
   padding-bottom: 24px;
}
.achievement-count-main-wrapper {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 30px;
}
.achievement-count-item {
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   padding: 37px 80px;
   border-radius: 20px;
   background: linear-gradient(
      89deg,
      rgba(255, 255, 255, 0.1) 0.67%,
      rgba(255, 255, 255, 0) 99.25%
   );
}

/* Blog section */
.home2-blog-title {
   padding-bottom: 60px;
}
.home2-blog-card-date {
   display: flex;
   align-items: center;
   gap: 10px;
}
.main-home-blog-header {
   max-width: 724px;
}

/* Footer */
.home2-footer-ci-title {
   padding-top: 10px;
   padding-bottom: 25px;
}
.home2-footer-ci-main-wrapper {
   padding-top: 40px;
   display: flex;
   flex-direction: column;
   gap: 46px;
}
.home2-footer-ci-icon {
   font-size: 20px;
   font-weight: 900;
}
.home2-footer-contact-info-inner-wrapper {
   gap: 16px;
}
.home2-footer-ci-icon {
   color: #fff;
   opacity: 0.3;
}
.home2-footer__ci-info {
   font-size: 20px;
   font-weight: 400;
   font-family: "Alata";
   line-height: 30px;
}
.home2-footer__ci-wrapper {
   margin-top: -7px;
}
.home2-footer-description {
   padding-top: 25px;
   padding-bottom: 40px;
   color: #ffff;
}
.home2-footer__ci-main-wrapper {
   display: flex;
   flex-direction: column;
   gap: 40px;
}
.home2-footer-cf input,
.home2-footer-cf textarea {
   width: 100%;
   background: transparent;
   padding: 19px 0;
   border-bottom: 1px solid rgba(255, 255, 255, 0.5);
   border-right: none;
   border-left: none;
   border-top: 0;
   color: #ffffff;
}
.home2-footer-cf input::placeholder,
.home2-footer-cf textarea::placeholder {
   color: #ffffff;
}
.home2-footer-cf-btn {
   border-radius: 20px;
   background: transparent;
   margin-top: 40px;
   color: #fff;
   font-size: 12px;
}
.home2-footer-cf-btn:hover .home2-footer-form-submit-btn-icon-wrapper {
   transform: rotate(0deg);
}
.home2-footer-form-submit-btn-icon-wrapper {
   transform: rotate(-45deg);
   transition: 0.3s all;
   font-size: 20px;
}
.home2-footer-cf-btn:hover {
   color: var(--secondary);
}
.home2-footer-cf input:focus,
.home2-footer-cf textarea:focus {
   outline: none;
}

.home2-footer-form-submit-btn {
   margin-top: 40px;
}
.home2-footer {
   background: url("../images/home2/home2-footer-bg.png");
}

.mask1 {
   -webkit-mask-image: url("../images/home/hero-bg-vector.svg");
   mask-image: url("../images/home/hero-bg-vector.svg");
}

/* 
  *************************
  * 26. Project page
  *************************
*/
.project-page-main-wrapper {
   padding-top: 90px;
   padding-bottom: 110px;
}
.project-view-more-btn {
   margin-top: 120px;
}
.single-project__project-info--title {
   font-size: 20px;
   color: #fff;
   font-weight: 400;
   line-height: 30px;
   font-family: "Alata", sans-serif;
   padding-right: 10px;
}
.single-project__project-info--list {
   display: flex;
   flex-direction: column;
   gap: 20px;
}
.single-project__project-info--main-wrapper {
   padding: 40px;
   background: var(--sectionBg);
   border-radius: 20px;
}
.single-project__project-info--inner-wrapper {
   padding: 30px;
   border: 1px solid var(--primary);
   border-radius: 20px;
   margin-top: 30px;
}
.project-details__project-inf__social-icon-wrapper {
   display: flex;
   align-items: center;
   justify-content: center;
   gap: 10px;
   margin-top: 30px;
}
.project-details__project-inf__social-icon-wrapper--icon {
   border-radius: 50%;
   width: 33px;
   height: 33px;
   padding: 10px;
   background: #000;
   transition: 0.3s all;
   display: flex;
   border: 1px solid var(--primary);
   align-items: center;
   justify-content: center;
}
.project-details__project-inf__social-icon-wrapper--icon:hover {
   transform: translateY(-6px);
}
.project-details__project-inf__social-icon-wrapper--icon i {
   color: #ffffff;
}
.project-page-view-more-btn--wrapper {
   margin-top: 90px;
   display: flex;
   align-items: center;
   justify-content: center;
}
.project-page-view-more-btn {
   color: var(--secondary);
}
.project-page-view-more-btn:hover {
   color: var(--secondary);
}
.project-page__copywriting-card {
   padding-top: 80px;
}
.project-page__web-card {
   margin-top: 80px;
}

/* Support widget */
.single-project__support-widget-wrapper {
   background: linear-gradient(rgba(19, 19, 19, 0.8), rgba(19, 19, 19, 0.8)),
      url(../images/project-details/support-widget-bg.png);
   background-repeat: no-repeat;
   border-radius: 20px;
   background-position: center center;
   padding: 40px;
   text-align: center;
   background-size: cover;
}
.single-project__support-widget-wrapper--description {
   color: #fff;
   padding-top: 20px;
}
.single-project__support-widget-wrapper--phone-icon {
   width: 88px;
   height: 88px;
   background: var(--primary);
   border-radius: 50%;
   display: flex;
   align-items: center;
   justify-content: center;
   margin: 30px auto;
}
.single-project__support-widget-wrapper--phone-icon .fa-phone {
   font-size: 36px;
   font-weight: 900;
}

/* File widget */
.single-project__files-widget-wrapper {
   border-radius: 20px;
   display: flex;
   padding: 30px 40px;
   border: 1px solid var(--primary);
   flex-direction: column;
   gap: 20px;
}
.single-project__files-widget-wrapper--file-item {
   border-radius: 5px;
   display: flex;
   align-items: center;
   justify-content: space-between;
   padding: 20px 30px;
   border: 2px solid var(--Gray-700, #191919);
}

/* Share Chips */
.chip {
   display: inline-flex;
   flex-direction: row;
   background-color: #191919;
   cursor: pointer;
   border: 1px solid #c8f31d34;
   outline: none;
   padding: 0;
   font-size: 14px;
   font-family: "Open Sans", sans-serif;
   white-space: nowrap;
   align-items: center;
   border-radius: 16px;
   vertical-align: middle;
   text-decoration: none;
   justify-content: center;
   color: #ffff;
}

.chip-content {
   cursor: inherit;
   display: flex;
   align-items: center;
   user-select: none;
   white-space: nowrap;
   padding-left: 12px;
   padding-right: 12px;
}
.chip-svg {
   color: #999999;
   cursor: pointer;
   height: auto;
   margin: 4px 4px 0 -8px;
   fill: currentColor;
   width: 1em;
   height: 1em;
   display: inline-block;
   font-size: 24px;
   transition: fill 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
   user-select: none;
   flex-shrink: 0;
}
.chip-svg:hover {
   color: #666666;
}
.single-project__support-widget-wrapper--phone {
   font-size: 30px;
   font-weight: 400;
   font-family: "Alata";
   line-height: 40px;
}
.single-project__files-widget-wrapper--file-item--download-icon {
   color: #fff;
}
.home2-dowload-btn-cv:hover .home-2__download-icon {
   color: #131313;
}
.home-2__download-icon {
   color: #ffffff;
}
.abt-testimonial-wrapper {
   margin-top: 60px;
}
.footer-email {
   font-size: 30px;
   font-weight: 400;
   line-height: 40px;
   font-family: "Alata", sans-serif;
   display: block;
}
.mobile-hamburgar-icon{
   color: #fff;
}
.mobile-hamburgar-icon:focus{
   box-shadow: none;
}
.drop-item{
   color: #fff;
}
.drop-item:focus{
   color: #fff;
}
.drop-item:hover{
   color: #fff;
}
.dropdown-item {
   color: #fff;
}
.dropdown-item:hover{
   background-color: #c8f31d1c;
   color: #ffff;
}
.navbar-nav .dropdown-menu{
   position: absolute;
}
i.fa-solid.fa-plus.mobile-drop-icon {
   margin-left: 2px;
   font-size: 13px;
}


/* Mobile Menu 2********/
*{
   margin: 0;
   padding: 0;
   box-sizing: border-box;
 }
 .mobile-nav{
   width: 100%;
   height: 100%;
   background: var(--secondary);
   border-bottom:1px solid #ffffff2d;
   height: 70px;
   box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
   z-index: 99;
 }
 .mobile-nav .navbar{
   height: 100%;
   max-width: 1250px;
   width: 100%;
   display: flex;
   align-items: center;
   justify-content: space-between;
   margin: auto;
 }
 .navbar .logo a{
   font-size: 30px;
   color: #fff;
   text-decoration: none;
   font-weight: 600;
 }
 .mobile-nav .navbar .nav-links{
   line-height: 70px;
   height: 100%;
 }
.mobile-nav .navbar .links{
   display: flex;
 }
.tkk-bar {
   color: #fff;
   font-size: 25px;
}
.tkk-chevron-down {
   color: #fff;
}
.mobile-nav .navbar .links li{
   position: relative;
   display: flex;
   align-items: center;
   justify-content: space-between;
   list-style: none;
   padding: 0 14px;
 }
.mobile-nav .navbar .links li a{
   height: 100%;
   text-decoration: none;
   white-space: nowrap;
   color: #fff;
   font-size: 15px;
   font-weight: 500;
 }
 .links li:hover .tkk-chevron-down,
 .links li:hover .js-arrow{
   transform: rotate(180deg);
   }
 
.mobile-nav .navbar .links li .arrow{
   /* background: red; */
   height: 100%;
   width: 22px;
   line-height: 70px;
   text-align: center;
   display: inline-block;
   color: #fff;
   transition: all 0.3s ease;
 }
.mobile-nav .navbar .links li .sub-menu{
   position: absolute;
   top: 70px;
   left: 0;
   line-height: 40px;
   background: #ffffff14;
   box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
   border-radius: 0 0 4px 4px;
   display: none;
   z-index: 2;
 }

.navbarLinksWrapper .dropdown-menu {
   width: 200px;
   background: var(--sectionBg);
   border: 1px solid #c8f31d41;
   top: 118% !important;
}
 .navbar .links li .sub-menu li{
   padding: 0 22px;
   border-bottom: 1px solid rgba(255,255,255,0.1);
 }
 .navbar .links li .sub-menu a{
   color: #fff;
   font-size: 15px;
   font-weight: 500;
 }
 .navbar .links li .sub-menu .more-arrow{
   line-height: 40px;
 }
.tkk-chevron-page-down {
   color: #fff;
}
 .navbar .tkk-x-bar{
   display: none;
 }
 @media (max-width:920px) {
   nav .navbar{
     max-width: 100%;
     padding: 0 25px;
   }
 
   .mobile-nav .navbar .logo a{
     font-size: 27px;
   }
   .mobile-nav .navbar .links li{
     padding: 0 10px;
     white-space: nowrap;
   }
   .mobile-nav .navbar .links li a{
     font-size: 15px;
   }
 }
 @media (max-width:991px){
   .navbar .tkk-x-bar{
     display: block;
   }
   .mobile-nav .navbar .nav-links{
     position: fixed;
     top: 0;
     right: -100%;
     display: block;
     max-width: 270px;
     width: 100%;
     background:  var(--secondary);
     line-height: 40px;
     padding: 20px;
     box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
     transition: all 0.5s ease;
     z-index: 1000;
     border-left: 1px solid #ffffff21;
   }
   .navbar .nav-links .sidebar-logo{
     display: flex;
     align-items: center;
     justify-content: end;
   }
   .sidebar-logo .logo-name{
     font-size: 25px;
     color: #fff;
   }
     .sidebar-logo  i,
     .navbar .tkk-x-bar{
       font-size: 25px;
       color: #fff;
     }
   .mobile-nav .navbar .links{
     display: block;
     margin-top: 20px;
   }
   .mobile-nav .navbar .links li .arrow{
     line-height: 40px;
   }
 .mobile-nav .navbar .links li{
     display: block;
   }
 .mobile-nav .navbar .links li .sub-menu{
   position: relative;
   top: 0;
   box-shadow: none;
   display: none;
 }
 .mobile-nav .navbar .links li .sub-menu li{
   border-bottom: none;
 
 }
 .navbar .links li .sub-menu .more-sub-menu{
   display: none;
   position: relative;
   left: 0;
 }
 .navbar .links li .sub-menu .more-sub-menu li{
   display: flex;
   align-items: center;
   justify-content: space-between;
 }
 .links li:hover .tkk-chevron-down,
 .links li:hover .tkk-chevron-page-down{
   transform: rotate(0deg);
   }
   .navbar .links li .sub-menu .more-sub-menu{
     display: none;
   }
   .navbar .links li .sub-menu .more span{
     /* background: red; */
     display: flex;
     align-items: center;
     /* justify-content: space-between; */
   }
 
   .links li .sub-menu .more:hover .more-sub-menu{
     display: none;
   }
   nav .navbar .links li:hover .htmlCss-sub-menu,
   nav .navbar .links li:hover .js-sub-menu{
     display: none;
   }
 .navbar .nav-links.show1 .links .htmlCss-sub-menu,
   .navbar .nav-links.show3 .links .js-sub-menu,
   .navbar .nav-links.show2 .links .more .more-sub-menu{
       display: block;
     }
     .navbar .nav-links.show1 .links .tkk-chevron-down,
     .navbar .nav-links.show3 .links .tkk-chevron-page-down{
         transform: rotate(180deg);
 }
     .navbar .nav-links.show2 .links .more-arrow{
       transform: rotate(90deg);
     }
 }
 @media (max-width:370px){
   .mobile-nav .navbar .nav-links{
   max-width: 100%;
 } 
 }
 

 /* Dropdown animation */
 @media (min-width: 768px) {
   .animate {
     animation-duration: 0.4s;
     -webkit-animation-duration: 0.3s;
     animation-fill-mode: both;
     -webkit-animation-fill-mode: both;
   }
 }
 
 @keyframes slideIn {
   0% {
     transform: translateY(1rem);
     opacity: 0;
   }
 
   100% {
     transform: translateY(0rem);
     opacity: 1;
   }
 
   0% {
     transform: translateY(1rem);
     opacity: 0;
   }
 }
 
 @-webkit-keyframes slideIn {
   0% {
     -webkit-transform: transform;
     -webkit-opacity: 0;
   }
 
   100% {
     -webkit-transform: translateY(0);
     -webkit-opacity: 1;
   }
 
   0% {
     -webkit-transform: translateY(1rem);
     -webkit-opacity: 0;
   }
 }
 
 .slideIn {
   -webkit-animation-name: slideIn;
   animation-name: slideIn;
 }
 .slideOut {
   -webkit-animation-name: slideOut;
   animation-name: slideIn;
 }
 .dropdown:hover .dropdown-menu {
   display: block;
}
.dropdown-toggle {
   white-space: nowrap;
   padding: 16px 0;
}
.navbarLinksWrapper .dropdown-menu::before {
   content: "";
   background: var(--sectionBg);
   width: 10px;
   height: 10px;
   border-left: 1px solid #c8f31d41;
   position: absolute;
   top: -6px;
   transform: rotate(45deg);
   left: 20px;
   border-top:1px solid #c8f31d41;
}
.home2-blog-card-title {
   font-family: Alata;
   font-size: 30px;
   font-style: normal;
   font-weight: 400;
   line-height: 40px;
   padding-top: 15px;
   display: inline-block;
}
.home1-blog-card-title {
   font-family: Alata;
   font-size: 30px;
   font-style: normal;
   font-weight: 400;
   line-height: 40px;
   margin: 10px 0;
   display: inline-block;
}

 /* Video popup */
/* This adds padding from top and bottom */
.custom-popup-class .mfp-container {
   padding-top: 40px;
   padding-bottom: 40px;
 }
 /* This adds max-width to popup content */
 .custom-popup-class .mfp-content {
   width: 100%;
   max-width: 700px;
 }
 
 /* This makes "#popup-with-something" scale down proportionally */
 #popup-with-something {
   width: 100%;
   height: 0;
   overflow: hidden;
   /* This is scale ratio */
   padding-top: 56.25%;
 }
 /* This shifts close button outside of the container */
 #popup-with-something .mfp-close {
   top: -44px;
   color: #FFF;
   text-align: right;
   right: 1px;
 }
 /* This is an element itself */
 .some-element {
   background: #EBE8E8;
   position: absolute;
   top: -3px;
   left: 0;
   width: 100%;
   height: 100%;
   box-shadow: 0 0 8px rgba(0, 0, 0, .6);
 }
 
.video-popup-element iframe{
   width: 100%;
   height: 100%;
}

.scroll-top {
   position: fixed;
   display: none;
   z-index: 999;
   bottom: 20px;
   right: 20px;
 }
 .scroll-top a {
   display: flex;
   font-size: 22px;
   text-align: center;
   background-color: #c8f31d;
   color: #000;
   border-radius: 50%;
   padding: 1px 8px;
   width: 50px;
   height: 50px;
   align-items: center;
   justify-content: center;
}