@charset "UTF-8";



/* DARK THEME (default) */

@import url("https://fonts.cdnfonts.com/css/big-shoulders-display");

@import url("https://fonts.googleapis.com/css2?family=Kanit:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap");

.dark-theme {

  --body: #060606;

  --black: #000;

  --white: #fff;

  --theme: #262626;

  --header: #FFF;

  --text: #888;

  --border: #FCFCFC;

  --bg: #1A1A1A;

  --bg2: #030523;

  --bg3: #F7F3EE;

  --box-shadow: 0px 1px 14px 0px rgba(0, 0, 0, 0.13);

}



.white-theme {

  --body: #000;

  --black: #fff;

  --white: #000;

  --theme: #e3ab35;

  --theme2: #071a5a;

  --header: #262626;

  --text: #0a2e68;

  --text: #0a2e68;

  --text2: #888888;

  --border: #5A5A5A;

  --border-2: #5A5A5A;

  --bg: #f5f5f5;

  --bg2: #262628;

  --box-shadow: 0px 4px 25px 0px rgba(0, 0, 0, 0.06);

}

@media (min-width: 1400px) {

    .container, .container-lg, .container-md, .container-sm, .container-xl, .container-xxl {

        max-width: 1350px;

    }

}

@media (min-width: 1700px) {

    .container, .container-lg, .container-md, .container-sm, .container-xl, .container-xxl {

        max-width: 1410px;

    }

}

.white-theme body {

  background-color: #fff !important;

}

.white-theme .hero-content .theme-btn {

  background-color: var(--header);

  color: #fff;

}

.white-theme .hero-content .theme-btn:hover {

  color: var(--header);

}

.white-theme .hero-1 .hero-content .social-link a:hover {

  color: #000;

}

.white-theme .build-impactful-wrapper {

  border-bottom: 1px solid rgba(0, 0, 0, 0.2);

}

.white-theme .testimonial-wrapper-2 .testimonial-box-items-2 {

  border-right: 1px solid rgba(0, 0, 0, 0.2);

}

.white-theme .footer-bottom-4 {

  border-top: 1px solid rgba(0, 0, 0, 0.2);

}

.white-theme .header-main .main-menu ul li .has-homemenu {

  background-color: #fff;

}

.white-theme .testimonial-wrapper-2 .testimonial-content {

  border-right: 1px solid rgba(0, 0, 0, 0.2);

}

.white-theme .award-wrapper-4 .award-content h2 {

  color: #000 !important;

}

.white-theme .section-title .sec-sub {

  color: #000;

}

.white-theme .section-title .sec-sub::before {

  background-color: #000;

}

.white-theme .section-title .sec-sub::after {

  background-color: #000;

}

.white-theme .video-banner-section .video-btn {

  color: #fff;

}

.white-theme .about-wrapper .about-left-items .top-text li {

  color: #fff;

}

.white-theme .about-wrapper .about-left-items .top-text li span {

  color: #fff;

}

.white-theme .about-wrapper .about-left-items .skill-counter .content h2 {

  color: #000;

}

.white-theme .theme-btn {

  background-color: #1c56a5;

  color: var(--black);

}

.white-theme .theme-btn::before {

  background-color: var(--theme);

}

.white-theme .theme-btn:hover {

  color: var(--white);

}

.white-theme .choose-us-section {

  background-color: #f5f5f5;

}

.white-theme .choose-us-section .choose-us-wrapper .choose-us-box-list li:hover .content h2 a {

  color: #000;

}

.white-theme .choose-us-section .choose-us-wrapper .choose-us-box-list li {

  border-top: 1px solid rgba(0, 0, 0, 0.2);

}

.white-theme .choose-us-section .choose-us-wrapper .choose-us-box-list li:hover .arrow-icon {

  background-color: var(--theme);

  color: var(--white);

}

.white-theme .choose-us-section .choose-us-wrapper .choose-us-box-list li .arrow-icon {

  background-color: #fff;

  color: var(--white);

}

.white-theme .feature-work-experience-wrap::before {

  background: #F6F6F6;

}

.white-theme .feature-work-experience-main-slider .client-info-items .info-content span {

  color: #000;

}

.white-theme .project-box-items .thumb .content h3 a {

  color: #fff;

}

.white-theme .project-box-items .thumb .content h3 a:hover {

  color: var(--theme);

}

.white-theme .award-wrapper .award-content .award-list-items span {

  border-top: 1px solid rgba(0, 0, 0, 0.2);

}

.white-theme .pricing-box-items {

  border: 1px solid rgba(255, 255, 255, 0.2);

  background: #f5f5f5;

}

.white-theme .pricing-box-items.style-2 .pricing-header span {

  background: rgba(0, 0, 0, 0.1);

  color: #000;

}

.white-theme .pricing-box-items .circle-icon {

  background: rgba(0, 0, 0, 0.1);

  color: #000;

}

.white-theme .pricing-box-items:hover {

  border: 1px solid #BFF747;

  background: var(--theme);

}

.white-theme .pricing-box-items:hover h2 {

  color: #000 !important;

}

.white-theme .pricing-box-items:hover .circle-icon {

  background: #000 !important;

  color: var(--black) !important;

}

.white-theme .pricing-box-items.active {

  border: 1px solid #BFF747;

  background: var(--theme);

}

.white-theme .pricing-box-items.active h2 {

  color: #000 !important;

}

.white-theme .pricing-box-items.active .circle-icon {

  background: #000 !important;

  color: var(--black) !important;

}

.white-theme .pricing-box-items .pricing-header h2 {

  color: #000;

}

.white-theme .pricing-box-items .pricing-header p {

  color: #000;

}

.white-theme .video-wrapper .video .video-btn {

  background-color: #fff;

  color: #121212;

}

.white-theme .news-main-box-items {

  border-top: 1px solid rgba(0, 0, 0, 0.2);

  background-color: #fff;

}

.white-theme .brand-box {

  border: 1px solid rgba(0, 0, 0, 0.2);

}

.white-theme .brand-box img {

  filter: initial;

}

.white-theme .brand-box:hover {

  background-color: #f5f5f5;

}


.white-theme .footer-wrapper {

  border-top: 1px solid rgba(0, 0, 0, 0.2);

}

.white-theme .footer-bottom {

  border-top: 1px solid rgba(0, 0, 0, 0.2);

}

.white-theme .footer-bottom p span {

  color: #000;

}

.white-theme .skill-box-items-2 {

  border: 1px solid rgba(255, 255, 255, 0.2);

  background: #f5f5f5;

}

.white-theme .build-impactful-section .build-text span {

  color: #000;

}

.white-theme .skill-section-2 p a {

  color: #000;

}

.white-theme .choose-us-box-items-2 {

  border-top: 1px solid rgba(0, 0, 0, 0.2);

  background-color: transparent;

}

.white-theme .award-section-2 .circle-box .icon {

  color: #000;

}

.white-theme .project-area-one .project-wrapper .card-items {

  background: transparent;

}

.white-theme .section-title h2 span {

  color: #fff;

}

.white-theme .faq-content-items form {

  background: #fff;

}

.white-theme .faq-content-items form .form-clt .budget-item .budget-button .budget-btn {

  border: 1px solid rgba(0, 0, 0, 0.2);

  color: #000 !important;

}

.white-theme .faq-items .accordion-box .block {

  border-bottom: 1px solid rgba(0, 0, 0, 0.2);

}

.white-theme .faq-items .accordion-box .block .acc-btn.active {

  color: #000 !important;

}

.white-theme .faq-items .accordion-box .block .acc-btn .icon {

  position: absolute;

  border-radius: 50%;

  color: #000 !important;

  border: 1px solid rgba(0, 0, 0, 0.2);

}

.white-theme .news-box-items-2 .content h3 {

  border-bottom: 1px solid rgba(0, 0, 0, 0.2);

}

.white-theme .news-box-items-2 .content .client-info-area .circle-icon {

  border: 1px solid rgba(0, 0, 0, 0.2);

  color: #000 !important;

}

.white-theme .footer-wrapper-2 .content p {

  color: #fff !important;

}

.white-theme .footer-wrapper-2 .footer-link-area .link-item .widget-title {

  color: #fff !important;

}

.white-theme .footer-bottom-2 .footer-bottom-wrapper-2 p span {

  color: #000;

}

.white-theme .footer-bottom-2 .footer-bottom-wrapper-2 ul li a:hover {

  color: #000;

}

.white-theme .about-wrapper-3 .about-image {

  display: none;

}

.white-theme .border-dashed-item .bt-dashed {

  border-top: 1px dashed rgba(0, 0, 0, 0.2);

  border-bottom: 1px dashed rgba(0, 0, 0, 0.2);

}

.white-theme .section-title-2 .sec-sub {

  background: rgba(191, 247, 71, 0.1);

  color: #000;

}

.white-theme .about-wrapper-3 .about-counter-2 {

  background: #f5f5f5;

}

.white-theme .about-wrapper-3 .about-counter-2 .counter-item .content h3 {

  color: #000;

}

.white-theme .service-list-items-3 li {

  background: #f5f5f5;

}

.white-theme .service-list-items-3 li .arrow-icon {

  border: 1.5px solid rgba(0, 0, 0, 0.2);

  color: #000;

}

.white-theme .service-list-items-3 li .arrow-icon:hover {

  color: #fff;

}

.white-theme .work-experience-section-3 h2 {

  color: #fff;

}

.white-theme .work-achievements-section h2 {

  color: #fff;

}

.white-theme .testimonial-section-3 .array-button .array-next, .white-theme .array-prev {

  border: 1.5px solid rgba(0, 0, 0, 0.2) !important;

  color: #000 !important;

}

.white-theme .contact-section-3 h2 {

  color: #fff;

}

.white-theme .contact-section-3 .form-clt .budget-item h3 {

  color: #fff;

}

.white-theme .news-section-3 h2 {

  color: #000;

}

.white-theme .news-style-item-3 {

  border-bottom: 1px solid rgba(0, 0, 0, 0.2);

}

.white-theme .footer-box-items .content p {

  color: #fff;

}

.white-theme .Protix -image2 {

  display: block !important;

  margin-top: 30px;

}

.white-theme .Protix -image {

  display: none !important;

}

.white-theme .view-portfolio-item {

  background: #f5f5f5;

}

.white-theme .page-wrapper-3 .sidebar-sticky-item .social-icon a {

  border: 1px solid rgba(0, 0, 0, 0.2);

  background-color: transparent;

}

.white-theme .page-wrapper-3 .sidebar-sticky-item .sidebar__toggle {

  border: 1px solid rgba(0, 0, 0, 0.2);

}

.white-theme .page-wrapper-3 .sidebar-sticky-item .sidebar__toggle img {

  filter: grayscale(100%) brightness(30%);

}

.white-theme .page-wrapper-3 .sidebar-sticky-item {

  border-left: 1px solid rgba(0, 0, 0, 0.2);

}

.white-theme .hero-5 {

  background-color: transparent;

}

.white-theme .hero-5 .top-image {

  display: none;

}

.white-theme .hero-5 .hero-content .hero-bottom .theme-btn {

  color: #fff !important;

}

.white-theme .about-section-4 .section-title h2 {

  color: #000 !important;

}

.white-theme .award-section-4 .section-title h2 {

  color: #000;

}

.white-theme .award-wrapper-4 .award-content .award-list-items span {

  border-top: 1px solid rgba(0, 0, 0, 0.2);

}

.white-theme .testimonial-section-4 {

  background: #f5f5f5;

}

.white-theme .testimonial-section-4 h2 {

  color: #000 !important;

}

.white-theme .footer-wrapper-4 {

  background: transparent;

}

.white-theme .footer-bottom-4 .footer-bottom-wrapper-4 p span {

  color: #000 !important;

}

.white-theme .gt-horizontal-portfolio__content-title a {

  color: #fff;

}

.white-theme .gt-horizontal-portfolio .theme-btn {

  color: #fff !important;

  background-color: transparent;

}

.white-theme .gt-horizontal-portfolio .hero-content span {

  color: #fff;

}

.white-theme .gt-horizontal-portfolio .hero-content p {

  color: #fff;

}

.white-theme .gt-horizontal-portfolio .array-button .array-prev, .white-theme .gt-horizontal-portfolio .array-button .array-next {

  color: #fff !important;

}

.white-theme .gt-vertical-portfolio__content-title a {

  color: #fff !important;

}

.white-theme .gt-vertical-portfolio .theme-btn {

  color: #fff;

}

.white-theme .gt-vertical-portfolio .theme-btn:hover {

  color: #000;

}

.white-theme .gt-vertical-portfolio .hero-content h6 {

  color: #fff;

}

.white-theme .gt-vertical-portfolio .hero-content p {

  color: #fff;

}

.white-theme .about-inner-wrapper .about-head h1 {

  color: #000;

}

.white-theme .about-counter-box {

  background-color: #f5f5f5;

}

.white-theme .approach-wrapper .approach-wrap-items {

  background-color: #fff;

}

.white-theme .approach-wrapper .approach-wrap-items {

  border-top: 1px solid rgba(0, 0, 0, 0.2);

}

.white-theme .choose-us-box-items-2 .choose-content .arrow-icon {

  border: 1.5px solid rgba(0, 0, 0, 0.2);

  color: #000 !important;

}

.white-theme .faq-inner-page-wrapper .accordion-box .block .acc-btn.active {

  color: #000 !important;

}

.white-theme .faq-inner-page-wrapper .accordion-box .block .acc-btn .icon {

  color: #000 !important;

  border: 1px solid rgba(0, 0, 0, 0.2);

}

.white-theme .faq-inner-page-wrapper .accordion-box .block {

  border-bottom: 1px solid rgba(0, 0, 0, 0.2);

}

.white-theme .error-wrapper .error-btn .theme-btn.style-2 {

  border: 1px solid rgba(0, 0, 0, 0.2);

  background-color: transparent;

  color: #000;

}

.white-theme .project-inner-page-wrapper .project-inner-page-box {

  border: 1px solid rgba(0, 0, 0, 0.2);

  background: #f5f5f5;

}

.white-theme .project-inner-page-wrapper .project-inner-page-box .content .arrow-icon {

  color: #000;

}

.white-theme .project-inner-page-wrapper .project-inner-page-box .content .arrow-icon:hover {

  color: #fff;

}

.white-theme .page-nav-wrap ul li .page-numbers {

  border: 1px solid rgba(0, 0, 0, 0.2);

}

.white-theme .page-nav-wrap ul li.active .page-numbers {

  color: #000;

}

.white-theme .page-nav-wrap ul li .page-numbers:hover {

  color: #000;

}

.white-theme .section-title-area .array-button .array-next {

  border: 1.5px solid rgba(0, 0, 0, 0.2);

  color: #000;

}

.white-theme .news-standard-box-items {

  border-bottom: 1px solid rgba(0, 0, 0, 0.2);

}

.white-theme .news-details-area .single-news-post .news-content .highlight-text {

  background: #f5f5f5;

}

.white-theme .contact-form-box {

  background: #f5f5f5;

}

.white-theme .contact-form-box .contact-box input, .white-theme .contact-form-box .contact-box textarea {

  background-color: #fff;

}

.white-theme .main-sidebar .single-sidebar-widget {

  background: #f5f5f5;

}

.white-theme .main-sidebar .single-sidebar-widget .search-widget form input {

  background-color: #fff;

}

.white-theme .main-sidebar .single-sidebar-widget .categories-items li {

  background-color: #fff;

}

.white-theme .main-sidebar .single-sidebar-widget .wid-title h3 {

  border-bottom: 1px solid rgba(0, 0, 0, 0.2);

}

.white-theme .main-sidebar .single-sidebar-widget .tagcloud a {

  background-color: #fff;

}

.white-theme .header-1 .offcanvas__logo {

  display: none;

}

.white-theme .header-1 .black-logo {

  display: block !important;

}

.white-theme .header-1 .theme-btn {

  background-color: transparent;

  border: 1px solid rgba(0, 0, 0, 0.2);

}

.white-theme .header-1 .sidebar__toggle {

  border: 1px solid rgba(0, 0, 0, 0.2);

}

.white-theme .header-1 .sidebar__toggle img {

  filter: grayscale(100%) brightness(30%);

}

.white-theme .style-offcanvas-2 .contact-information h3 {

  color: #fff;

}

.white-theme .style-offcanvas-2 .contact-information .contact-list li span {

  color: #fff;

}

.white-theme .style-offcanvas-2 .contact-information .contact-list li a {

  color: #fff;

}

.white-theme .style-offcanvas-2 .contact-information .contact-list li {

  color: #fff;

}

.white-theme .header-main .main-menu ul li .has-homemenu .homemenu-items .homemenu .homemenu-thumb .demo-button .gt-theme-btn {

  color: #000;

}

.white-theme .header-2.header-style-2 .main-menu ul li .submenu li a {

  color: #fff;

}

.white-theme .hero-2 .hero-content h1 {

  color: #fff;

}

@media (max-width: 1199px) {

  .white-theme .hero-2 .hero-content h1 {

    color: #fff;

  }

}

.white-theme .header-2 .header-right .theme-btn:hover {

  color: #fff;

}

.white-theme .header-3 .offcanvas__logo {

  display: block;

}

.white-theme .header-3 .sidebar__toggle {

  border: 1px solid rgba(255, 255, 255, 0.2);

}

.white-theme .header-3 .sidebar__toggle img {

  filter: grayscale(100%) brightness(30%);

}

.white-theme .inner-page-style .header-logo2 {

  display: block !important;

}

.white-theme .inner-page-style .header-logo {

  display: none;

}

.white-theme .inner-page-style .sidebar__toggle img {

  filter: grayscale(100%) brightness(30%);

}

.white-theme .header-4 .header-logo2 {

  display: block !important;

}

.white-theme .header-4 .header-logo {

  display: none;

}

.white-theme .header-4 .main-menu {

  border: 1px solid rgba(0, 0, 0, 0.15) !important;

  background: rgba(0, 0, 0, 0.15) !important;

  backdrop-filter: blur(20px) !important;

}

.white-theme .header-4 .sidebar__toggle {

  border: 1px solid rgba(0, 0, 0, 0.2) !important;

}

.white-theme .header-4 .sidebar__toggle img {

  filter: grayscale(100%) brightness(30%) !important;

}

.white-theme .page-wrapper-3 .view-portfolio-item .top-head .logo {

  display: none;

}

.white-theme .page-wrapper-3 .view-portfolio-item .top-head .black-logo {

  display: block !important;

}

.white-theme .gallery-wrapper .gallery-item-4 .gallery-image .arrow-icon {

  color: #000 !important;

}

.white-theme .header-white-style .main-menu {

  border: 1px solid rgba(255, 255, 255, 0.15) !important;

  background: rgba(255, 255, 255, 0.15) !important;

  backdrop-filter: blur(20px) !important;

}

.white-theme .header-white-style .main-menu ul li a {

  color: #fff !important;

}

.white-theme .header-white-style .sidebar__toggle {

  border: 1px solid rgba(255, 255, 255, 0.2) !important;

}

.white-theme .header-white-style .sidebar__toggle img {

  filter: initial !important;

}

.white-theme .header-two .sidebar__toggle img {

  filter: grayscale(100%) brightness(100%) !important;

}

.white-theme .sticky.header-1 .offcanvas__logo {

  display: block;

}

.white-theme .sticky.header-1 .black-logo {

  display: none !important;

}

.white-theme .sticky.header-1 .theme-btn {

  background-color: transparent;

  border: 1px solid rgba(255, 255, 255, 0.2);

  color: #fff;

}

.white-theme .sticky.header-1 .sidebar__toggle {

  border: 1px solid rgba(255, 255, 255, 0.2);

}

.white-theme .sticky.header-1 .sidebar__toggle img {

  filter: initial;

}

.white-theme .sticky.header-4 .header-logo2 {

  display: none !important;

}

.white-theme .sticky.header-4 .header-logo {

  display: block;

}

.white-theme .sticky.header-4 .sidebar__toggle {

  border: 1px solid rgba(255, 255, 255, 0.2) !important;

}

.white-theme .sticky.header-4 .sidebar__toggle img {

  filter: initial !important;

}

.white-theme .sticky.inner-page-style .header-logo2 {

  display: none !important;

}

.white-theme .sticky.inner-page-style .header-logo {

  display: block;

}

.white-theme .sticky.inner-page-style .sidebar__toggle img {

  filter: initial !important;

}

@media (max-width: 1199px) {

  .white-theme .sticky.header-two .header-logo {

    display: block !important;

  }

  .white-theme .sticky.header-two .header-logo2 {

    display: none !important;

  }

}

.white-theme .sticky.header-two .sidebar__toggle img {

  filter: grayscale(100%) brightness(30%) !important;

}



.mode--toggle img {

  width: 30px;

  height: 30px;

  object-fit: contain;

}



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

02. Base

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

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

    Template Default Fonts & Fonts Styles

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

body {

  font-family: "Poppins", sans-serif;

  font-size: 16px;

  font-weight: 400;

  line-height: 28px;

  color: var(--text);

  background-color: var(--body);

  text-transform: inherit;

  padding: 0;

  margin: 0;

  overflow-x: hidden;

}

@media (max-width: 575px) {

  body {

    font-size: 14px;

  }

}



ul {

  padding: 0;

  margin: 0;

  list-style: none;

}



button {

  border: none;

  background-color: transparent;

  padding: 0;

}



input:focus {

  color: var(--white);

  outline: none;

}



input {

  color: var(--white);

}



h1,

h2,

h3,

h4,

h5,

h6 {

  font-family: "Big Shoulders Display", sans-serif;

  margin: 0px;

  padding: 0;

  color: #071a5a;

  transition: all 0.4s ease-in-out;

  text-transform: inherit;

}

.section-title-area h1,

.section-title-area h2,

.section-title-area h3,

.section-title-area h4,

.section-title-area h5,

.section-title-area h6 {

  font-family: "Poppins", sans-serif;
    text-transform: inherit;
	    color: #071a5a;
}



h1 {

  font-size: 100px;

  font-weight: 500;

  line-height: 120%;

}

@media (max-width: 1600px) {

  h1 {

    font-size: 85px;

  }

}

@media (max-width: 1199px) {

  h1 {

    font-size: 75px;

  }

}

@media (max-width: 991px) {

  h1 {

    font-size: 65px;

  }

}

@media (max-width: 767px) {

  h1 {

    font-size: 55px;

  }

}

@media (max-width: 575px) {

  h1 {

    font-size: 48px;

  }

}

@media (max-width: 470px) {

  h1 {

    font-size: 38px;

  }

}



h2 {

  font-size: 55px;

  font-weight: 500;

  line-height: 120%;

}

@media (max-width: 1399px) {

  h2 {

    font-size: 44px;

  }

}

@media (max-width: 1199px) {

  h2 {

    font-size: 40px;

  }

}

@media (max-width: 991px) {

  h2 {

    font-size: 36px;

  }

}

@media (max-width: 767px) {

  h2 {

    font-size: 42px;

  }

}

@media (max-width: 575px) {

  h2 {

    font-size: 34px;

  }

}



h3 {

  font-size: 24px;

  font-weight: 900;

  line-height: 134%;

}

@media (max-width: 575px) {

  h3 {

    font-size: 22px;

    line-height: 145%;

  }

}



h4 {

  font-size: 18px;

  font-weight: 400;

}



h5 {

  font-size: 18px;

  font-weight: 700;

}



h6 {

  font-size: 16px;

  font-weight: 700;

}



a {

  text-decoration: none;

  outline: none !important;

  cursor: pointer;

  color: var(--header);

  transition: all 0.4s ease-in-out;

}



p {

  margin: 0px;

  transition: all 0.4s ease-in-out;

}



span {

  margin: 0px;

}



.theme-btn {

  font-size: 16px;

  position: relative;

  z-index: 1;

  overflow: hidden;

  font-weight: 500;

  text-transform: inherit;

  height: 58px;

  line-height: 58px;

  background-color: transparent;

  overflow: hidden;

  display: inline-block;

  padding: 0 16px;

  font-family: "Kanit", sans-serif;

  color: var(--text);

  border-radius: 100px;

  border: 1px solid rgba(255, 255, 255, 0.2);

}

@media (max-width: 575px) {

  .theme-btn {

    font-size: 14px;

    padding: 0 25px;

    height: 52px;

    line-height: 52px;

  }

}

.theme-btn::before {

  content: "";

  position: absolute;

  width: 0;

  top: -10px;

  height: 0;

  background-color: var(--theme);

  border-radius: 50%;

  transform: translate(-50%, -50%);

  transition: all 0.8s ease;

  z-index: -1;

}

.theme-btn.bg-white {

  color: var(--header);

  background-color: var(--white);

}

.theme-btn.bg-white::before {

  background-color: var(--theme);

}

.theme-btn i {

  margin-left: 10px;

}

.theme-btn:hover {

  color: var(--black);

}

.theme-btn:hover::before {

  width: 800px;

  height: 800px;

  display: inline-block;

}



@keyframes slideRight {

  49% {

    -webkit-transform: translateX(100%);

    transform: translateX(100%);

  }

  50% {

    opacity: 0;

    -webkit-transform: translateX(-100%);

    transform: translateX(-100%);

  }

  51% {

    opacity: 1;

  }

}

@keyframes slideUp {

  49% {

    -webkit-transform: translateY(-100%);

    transform: translateY(-100%);

  }

  50% {

    opacity: 0;

    -webkit-transform: translateY(100%);

    transform: translateY(100%);

  }

  51% {

    opacity: 1;

  }

}

.link-btn {

  display: inline-block;

  font-size: 16px;

  font-weight: 700;

  text-transform: uppercase;

  color: var(--theme);

  text-decoration: underline;

}

.link-btn i {

  margin-left: 6px;

}



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

03. Components

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

.mean-container a.meanmenu-reveal {

  display: none;

}



.mean-container .mean-nav {

  background: none;

  margin-top: 0;

}



.mean-container .mean-bar {

  padding: 0;

  min-height: auto;

  background: none;

  background: none;

}



.mean-container .mean-nav > ul {

  padding: 0;

  margin: 0;

  width: 100%;

  list-style-type: none;

  display: block !important;

}



.mean-container a.meanmenu-reveal {

  display: none !important;

}

.mean-container .mean-nav ul li a.theme-btn{
	    height: 100%;
    padding: 25px 22px;
    width: 73%;
    margin-top: 25px;
    line-height: 14px;
}

.mean-container .mean-nav ul li a {

  width: 100%;

  padding: 10px 0;

  color: #fff;

  font-size: 15px;

  line-height: 2;

  font-weight: 500;

    letter-spacing: 1px;

  text-transform: inherit;

  border-bottom: 1px solid rgba(255, 255, 255, 0.2) !important;

  border: none;

  font-family: "Poppins", sans-serif;

}

.mean-container .mean-nav ul li a:hover {

  color: var(--theme);

}



.mean-container .mean-nav ul li a:last-child {

  border-bottom: 0;

}



.mean-container .mean-nav ul li a:hover {

  color: var(--theme);

}



.mean-container .mean-nav ul li a.mean-expand {

  margin-top: 5px;

  padding: 0 !important;

}



.mean-container .mean-nav ul li > a > i {

  display: none;

}



.mean-container .mean-nav ul li > a.mean-expand i {

  display: inline-block;

  font-size: 18px;

}



.mean-container .mean-nav > ul > li:first-child > a {

  border-top: 0;

}



.mean-container .mean-nav ul li a.mean-expand.mean-clicked i {

  transition: all 0.4s ease-in-out;

}



.mean-container .mean-nav ul li .mega-menu li a {

  height: 200px;

  width: 100%;

  padding: 0;

  border-top: 0;

  margin-bottom: 20px;

}



.mobile-menus.style-2 .mean-nav ul li a {

  font-size: 18px !important;

  font-weight: 600 !important;

  font-family: "Kanit", sans-serif !important;

}

@media (max-width: 767px) {

  .mobile-menus.style-2 .mean-nav ul li a {

    font-size: 18px !important;

  }

}

.mobile-menus .mean-nav ul li a {

  font-size: 30px !important;

  font-weight: 600 !important;

  font-family: "Kanit", sans-serif !important;

}

@media (max-width: 767px) {

  .mobile-menus .mean-nav ul li a {

    font-size: 18px !important;

  }

}

.mobile-menus .mean-container .mean-nav ul li li a {

  font-size: 16px !important;

}

.mobile-menus .mean-nav {

  max-width: 530px;

}

@media (max-width: 1199px) {

  .mobile-menus .mean-nav {

    max-width: initial;

  }

}



.back-to-top {

  border-radius: 50% !important;

  background-color: var(--theme);

  width: 50px;

  height: 50px;

  line-height: 50px;

  color: var(--black);

  font-size: 18px;

  position: fixed;

  display: inline-block;

  z-index: 999;

  right: 30px;

  bottom: 30px;

  transition: all 0.4s ease-in-out;

  opacity: 0;

  visibility: hidden;

  transform: translateY(20px);

}

.back-to-top:hover {

  background-color: #1c56a5;

  color: var(--black);

}

.back-to-top.show {

  opacity: 1;

  visibility: visible;

  transform: translate(0);

}



.cursor-outer {

  -webkit-margin-start: -12px;

  margin-inline-start: -12px;

  margin-top: -12px;

  width: 30px;

  height: 30px;

  border: 1px solid var(--theme);

  background-color: var(--theme);

  -webkit-box-sizing: border-box;

  box-sizing: border-box;

  z-index: 10000000;

  opacity: 0.34;

  -webkit-transition: all 0.4s ease-out 0s;

  transition: all 0.4s ease-out 0s;

}



.cursor-outer.cursor-hover {

  opacity: 0.14;

}



.cursor-outer.cursor-big {

  opacity: 0;

}



.mouseCursor {

  position: fixed;

  top: 0;

  inset-inline-start: 0;

  inset-inline-end: 0;

  bottom: 0;

  pointer-events: none;

  border-radius: 50%;

  -webkit-transform: translateZ(0);

  transform: translateZ(0);

  visibility: hidden;

  text-align: center;

}



.mouseCursor.cursor-big {

  width: 20px;

  height: 20px;

  -webkit-margin-start: -12px;

  margin-inline-start: -12px;

  margin-top: -12px;

}



.cursor-inner {

  -webkit-margin-start: -3px;

  margin-inline-start: -3px;

  margin-top: -3px;

  width: 10px;

  height: 10px;

  z-index: 10000001;

  background-color: var(--theme);

  opacity: 1;

  -webkit-transition: all 0.24s ease-out 0s;

  transition: all 0.24s ease-out 0s;

}

.cursor-inner span {

  color: var(--text);

  line-height: 60px;

  opacity: 0;

  text-transform: uppercase;

  letter-spacing: 1px;

  font-size: 12px;

}



.cursor-inner.cursor-big span {

  opacity: 1;

}



.cursor-inner.cursor-hover {

  -webkit-margin-start: -10px;

  margin-inline-start: -10px;

  margin-top: -10px;

  width: 30px;

  height: 30px;

  background-color: var(--theme);

  border: 1px solid #686363;

  opacity: 0;

}



.preloader {

  position: fixed;

  z-index: 10;

  height: 100vh;

  width: 100%;

  left: 0;

  top: 0;

  display: -webkit-box;

  display: -ms-flexbox;

  display: flex;

  overflow: hidden;

  -webkit-box-align: center;

  -ms-flex-align: center;

  align-items: center;

  -webkit-box-pack: center;

  -ms-flex-pack: center;

  justify-content: center;

  background: transparent;

  z-index: 99999999999999;

}



.preloader svg {

  position: absolute;

  top: 0;

  width: 100vw;

  height: 110vh;

  fill: #111013;

}



h5.preloader-text {

  position: absolute;

  top: 50%;

  left: 50%;

  transform: translate(-50%, -50%);

  font-size: calc(80px + 5vw);

  color: #333;

}



@media (max-width: 1040px) {

  h5.preloader-text {

    font-size: 60px;

  }

}

h5.preloader-text::after {

  content: "Protix ";

  position: absolute;

  left: 0;

  top: 0;

  color: var(--theme);

  animation: move 2s infinite alternate;

}

.home-2 h5.preloader-text::after {

  color: var(--theme);

}



@keyframes move {

  from {

    clip-path: circle(20% at 0% 50%);

  }

  to {

    clip-path: circle(20% at 100% 50%);

  }

}

@-webkit-keyframes rippleOne {

  70% {

    -webkit-box-shadow: 0 0 0 40px rgba(244, 68, 56, 0);

    box-shadow: 0 0 0 40px rgba(244, 68, 56, 0);

  }

  100% {

    -webkit-box-shadow: 0 0 0 0 rgba(244, 68, 56, 0);

    box-shadow: 0 0 0 0 rgba(244, 68, 56, 0);

  }

}

@keyframes rippleOne {

  70% {

    -webkit-box-shadow: 0 0 0 40px rgba(244, 68, 56, 0);

    box-shadow: 0 0 0 40px rgba(244, 68, 56, 0);

  }

  100% {

    -webkit-box-shadow: 0 0 0 0 rgba(244, 68, 56, 0);

    box-shadow: 0 0 0 0 rgba(244, 68, 56, 0);

  }

}

@keyframes cir36 {

  100% {

    transform: rotate(360deg);

  }

}

@keyframes rounded {

  50% {

    transform: rotate(15deg);

  }

}

@keyframes up-down {

  0% {

    transform: translateY(10px);

  }

  100% {

    transform: translateY(-10px);

  }

}

@-webkit-keyframes spinner {

  to {

    -webkit-transform: rotateZ(360deg);

    transform: rotateZ(360deg);

  }

}

@keyframes spinner {

  to {

    -webkit-transform: rotateZ(360deg);

    transform: rotateZ(360deg);

  }

}

@-webkit-keyframes letters-loading {

  0%, 75%, 100% {

    opacity: 0;

    transform: rotateY(-90deg);

  }

  25%, 50% {

    opacity: 1;

    transform: rotateY(0deg);

  }

}

@keyframes letters-loading {

  0%, 75%, 100% {

    opacity: 0;

    transform: rotateY(-90deg);

  }

  25%, 50% {

    opacity: 1;

    transform: rotateY(0deg);

  }

}

@keyframes loaderspin {

  0% {

    transform: translate(-50%, -50%) rotate(0deg);

  }

  100% {

    transform: translate(-50%, -50%) rotate(360deg);

  }

}

@keyframes tpswing {

  0% {

    -webkit-transform: rotate(20deg);

    -ms-transform: rotate(20deg);

    transform: rotate(20deg);

  }

  100% {

    -webkit-transform: rotate(0deg);

    -ms-transform: rotate(0deg);

    transform: rotate(0deg);

  }

}

@keyframes width {

  0% {

    width: 0%;

  }

  100% {

    width: 100%;

  }

}

@-webkit-keyframes width {

  0% {

    width: 0%;

  }

  100% {

    width: 100%;

  }

}

@-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);

  }

}

@keyframes rounded {

  50% {

    transform: rotate(20deg);

  }

}

@keyframes cir36 {

  100% {

    transform: rotate(360deg);

  }

}

.float-bob-y {

  -webkit-animation-name: float-bob-y;

  animation-name: float-bob-y;

  -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;

}



@-webkit-keyframes float-bob-y {

  0% {

    -webkit-transform: translateY(-30px);

    transform: translateY(-30px);

  }

  50% {

    -webkit-transform: translateY(-10px);

    transform: translateY(-10px);

  }

  100% {

    -webkit-transform: translateY(-30px);

    transform: translateY(-30px);

  }

}

@keyframes float-bob-y {

  0% {

    -webkit-transform: translateY(-30px);

    transform: translateY(-30px);

  }

  50% {

    -webkit-transform: translateY(-10px);

    transform: translateY(-10px);

  }

  100% {

    -webkit-transform: translateY(-30px);

    transform: translateY(-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;

}



@-webkit-keyframes float-bob-x {

  0% {

    -webkit-transform: translateX(0px);

    transform: translateX(30px);

  }

  50% {

    -webkit-transform: translateX(10px);

    transform: translateX(10px);

  }

  100% {

    -webkit-transform: translateX(30px);

    transform: translateX(30px);

  }

}

@keyframes float-bob-x {

  0% {

    -webkit-transform: translateX(30px);

    transform: translateX(30px);

  }

  50% {

    -webkit-transform: translateX(10px);

    transform: translateX(10px);

  }

  100% {

    -webkit-transform: translateX(30px);

    transform: translateX(30px);

  }

}

@keyframes bounce-x {

  0% {

    -webkit-transform: translateX(0);

    transform: translateX(0);

  }

  50% {

    -webkit-transform: translateX(30px);

    transform: translateX(30px);

  }

  100% {

    -webkit-transform: translateX(0);

    transform: translateX(0);

  }

}

.bounce-x {

  -webkit-animation: bounce-x 7s infinite linear;

  animation: bounce-x 7s infinite linear;

}



@keyframes criss-cross-left {

  0% {

    left: -20px;

  }

  50% {

    left: 50%;

    width: 20px;

    height: 20px;

  }

  100% {

    left: 50%;

    width: 375px;

    height: 375px;

  }

}

@keyframes criss-cross-right {

  0% {

    right: -20px;

  }

  50% {

    right: 50%;

    width: 20px;

    height: 20px;

  }

  100% {

    right: 50%;

    width: 375px;

    height: 375px;

  }

}

@keyframes rotated2 {

  0% {

    transform: rotate(0);

  }

  100% {

    transform: rotate(-360deg);

  }

}

@keyframes wave {

  0% {

    transform: translateX(0);

  }

  50% {

    transform: translateX(-25%);

  }

  100% {

    transform: translateX(-50%);

  }

}

@keyframes zoom {

  0% {

    transform: scale(0.5);

  }

  50% {

    transform: scale(1);

  }

  100% {

    transform: scale(0.5);

  }

}

@keyframes translateY2 {

  0% {

    -webkit-transform: translateY(-30px);

    -moz-transform: translateY(-30px);

    -ms-transform: translateY(-30px);

    -o-transform: translateY(-30px);

    transform: translateY(-30px);

  }

  100% {

    -webkit-transform: translateY(20px);

    -moz-transform: translateY(20px);

    -ms-transform: translateY(20px);

    -o-transform: translateY(20px);

    transform: translateY(20px);

  }

}

@keyframes translateX2 {

  0% {

    -webkit-transform: translateX(-30px);

    -moz-transform: translateX(-30px);

    -ms-transform: translateX(-30px);

    -o-transform: translateX(-30px);

    transform: translateX(-30px);

  }

  100% {

    -webkit-transform: translatXY(20px);

    -moz-transform: translateX(20px);

    -ms-transform: translateX(20px);

    -o-transform: translateX(20px);

    transform: translateX(20px);

  }

}

@keyframes moving {

  0% {

    transform: translatey(0px);

  }

  20% {

    transform: translateX(-50px);

  }

  50% {

    transform: translatey(-40px);

  }

  100% {

    transform: translatey(0px);

  }

}

/*img-animation**********************/

.img-custom-anim-right {

  animation: img-anim-right 1.3s forwards cubic-bezier(0.645, 0.045, 0.355, 1) 0.4s;

  opacity: 0;

}



@keyframes img-anim-right {

  0% {

    transform: translateX(5%);

    clip-path: inset(0 0 0 100%);

    opacity: 0;

  }

  100% {

    transform: translateX(0);

    clip-path: inset(0 0 0 0);

    opacity: 1;

  }

}

.img-custom-anim-left {

  animation: img-anim-left 1.3s forwards cubic-bezier(0.645, 0.045, 0.355, 1) 0.4s;

  opacity: 0;

}



@keyframes img-anim-left {

  0% {

    transform: translateX(-5%);

    clip-path: inset(0 100% 0 0);

    opacity: 0;

  }

  100% {

    transform: translateX(0);

    clip-path: inset(0 0 0 0);

    opacity: 1;

  }

}

.img-custom-anim-top {

  animation: img-anim-top 1.3s forwards cubic-bezier(0.645, 0.045, 0.355, 1);

  opacity: 0;

}



@keyframes img-anim-top {

  0% {

    transform: translateY(-5%);

    clip-path: inset(0 0 100% 0);

    opacity: 0;

  }

  100% {

    transform: translateY(0);

    clip-path: inset(0 0 0 0);

    opacity: 1;

  }

}

@keyframes animate-positive {

  0% {

    width: 0;

  }

}

@keyframes scale {

  0% {

    top: -1000px;

    -webkit-transform: scale(1);

    transform: scale(1);

    opacity: 0;

  }

  100% {

    opacity: 1;

    -webkit-transform: scale(1);

    transform: scale(1);

  }

}

.animation-infinite {

  animation: ShapeAnim 50s linear infinite;

  height: 30px;

  width: 100%;

  background-repeat: repeat;

  overflow: hidden;

}



@keyframes ShapeAnim {

  0% {

    background-position: top left;

  }

  100% {

    background-position: top left 3000px;

  }

}

.splt-txt .whitespace {

  width: 8px;

}



.splt-txt.animated .char {

  -webkit-animation: fadeIn 0.4s cubic-bezier(0.3, 0, 0.7, 1) both;

  animation: fadeIn 0.4s cubic-bezier(0.3, 0, 0.7, 1) both;

  -webkit-animation-delay: calc(30ms * var(--char-index));

  animation-delay: calc(30ms * var(--char-index));

}



.splt-txt-bounce .whitespace {

  width: 20px;

}



@media (max-width: 991px) {

  .splt-txt-bounce .whitespace {

    width: 10px;

  }

}

.splt-txt-bounce.animated .char {

  -webkit-animation: bounceIn 0.4s cubic-bezier(0.3, 0, 0.7, 1) both;

  animation: bounceIn 0.4s cubic-bezier(0.3, 0, 0.7, 1) both;

  -webkit-animation-delay: calc(30ms * var(--char-index));

  animation-delay: calc(30ms * var(--char-index));

}



@keyframes rotateBall {

  from {

    transform: rotate(0deg);

  }

  to {

    transform: rotate(360deg);

  }

}

@keyframes typing {

  from {

    width: 0;

  }

  to {

    width: 17ch;

  } /* Number of characters */

}

@keyframes blink {

  0%, 100% {

    border-color: transparent;

  }

  50% {

    border-color: #060606;

  }

}

@-webkit-keyframes slideInUp {

  0% {

    -webkit-transform: translate3d(0, 100%, 0);

    transform: translate3d(0, 100%, 0);

    visibility: visible;

  }

  100% {

    -webkit-transform: translate3d(0, 0, 0);

    transform: translate3d(0, 0, 0);

  }

}

@keyframes slideInUp {

  0% {

    -webkit-transform: translate3d(0, 100%, 0);

    transform: translate3d(0, 100%, 0);

    visibility: visible;

  }

  100% {

    -webkit-transform: translate3d(0, 0, 0);

    transform: translate3d(0, 0, 0);

  }

}

.slideInUp {

  -webkit-animation-name: slideInUp;

  animation-name: slideInUp;

}



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

04. Layouts

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

@media (max-width: 1199px) {

  .menu-thumb {

    display: none !important;

  }

}



.header-main {

  display: flex;

  align-items: center;

  justify-content: space-between;

  padding: 25px 0;

}

.header-main .main-menu ul {

  margin-bottom: 0;

}

.header-main .main-menu ul li {

  list-style: none;

  display: inline-block;

  margin-inline-end: 40px;

}

.header-main .main-menu ul li:last-child {

  margin-inline-end: 0;

}

.header-main .main-menu ul li a {

  display: inline-block;

  font-size: 16px;

  font-weight: 500;

  letter-spacing: 0px;

  color: #fff;

  font-family: "Poppins", sans-serif;

  padding: 20px 0;

  text-align: left;

  position: relative;

  text-transform: capitalize;

  transition: all 0.4s ease-in-out;

}

.header-main .main-menu ul li a i {

  margin-left: 4px;

  font-size: 14px;

}

.header-main .main-menu ul li a:hover {

  color: var(--theme) !important;

}

.header-main .main-menu ul li .submenu {

  position: absolute;

  top: 82%;

  inset-inline-start: 0;

  min-width: 260px;

  padding: 20px 0;

  z-index: 99999;

  visibility: hidden;

  opacity: 0;

  transform-origin: top center;

  color: var(--header);

  transform: translateY(-10px);

  transition: all 0.4s ease-in-out;

  border-top: 2px solid var(--theme);

  background-color: #0B0E13;

  box-shadow: rgba(0, 0, 0, 0.9) 0px 8px 24px;

}

.header-main .main-menu ul li .submenu li {

  display: block;

  width: 100%;

  margin: 0;

}

.header-main .main-menu ul li .submenu li a {

    position: relative;

    z-index: 11;
    height: 100px;
    font-size: 16px;

    font-weight: 500;

    letter-spacing: 0.5px;

    color: var(--header);

    line-height: 38px;

    padding: 0;

    gap: 15px;

    padding-right: 0;

    text-transform: inherit;

    width: 100%;

    display: flex;

    align-items: center;

    justify-content: normal;

}

.header-main .main-menu ul li .submenu li a::before {

  content: "";

  position: absolute;

  width: 0px;

  height: 2px;

  background: var(--theme);

  left: 14px;

  bottom: 18px;

  transition: all 0.4s ease-in-out;

}

.header-main .main-menu ul li .submenu li a:hover {

  color: var(--theme) !important;

}

.header-main .main-menu ul li .submenu li:last-child a {

  border: none;

}

.header-main .main-menu ul li .submenu li .submenu {

  inset-inline-start: 100%;

  top: 0;

  visibility: hidden;

  opacity: 0;

}

.header-main .main-menu ul li .submenu li:hover > a {

  color: var(--theme) !important;

  margin-left: 10px;

}

.header-main .main-menu ul li .submenu li:hover > a::before {

  width: 10px;

}

.header-main .main-menu ul li .submenu li:hover > a::after {

  color: var(--theme);

}

.header-main .main-menu ul li .submenu li:hover > .submenu {

  -webkit-transform: translateY(1);

  -moz-transform: translateY(1);

  -ms-transform: translateY(1);

  -o-transform: translateY(1);

  transform: translateY(1);

  visibility: visible;

  opacity: 1;

}

.header-main .main-menu ul li .submenu li.has-dropdown > a::after {

  position: absolute;

  top: 50%;

  inset-inline-end: 25px;

  -webkit-transform: translateY(-50%);

  -moz-transform: translateY(-50%);

  -ms-transform: translateY(-50%);

  -o-transform: translateY(-50%);

  transform: translateY(-50%);

  color: var(--theme);

}

.header-main .main-menu ul li .has-homemenu {

    width: 880px;

    padding: 20px 20px 20px 20px !important;

    opacity: 0;

    left: 25%;

    visibility: hidden;

    max-height: 80vh;

}

@media (max-width: 1399px) {

  .header-main .main-menu ul li .has-homemenu {

    width: 1000px;

  }

}

.header-main .main-menu ul li .has-homemenu .homemenu-items {

  display: flex;

  align-items: center;

  gap: 16px;

  flex-wrap: wrap;

}

@media (max-width: 991px) {

  .header-main .main-menu ul li .has-homemenu .homemenu-items {

    flex-wrap: wrap;

  }

}

.header-main .main-menu ul li .has-homemenu .homemenu-items .homemenu a{

    padding: 16px 10px;

}

.header-main .main-menu ul li .has-homemenu .homemenu-items .homemenu a:hover{

    background-color: #071a5a;

    border-radius: 15px;

}

.header-main .main-menu ul li .has-homemenu .homemenu-items .homemenu {

    position: relative;

    width: 49%;

    border: 1px solid #f1f1f1;

    border-radius: 15px;

    height: 100px;

    display: flex;

    gap: 15px;

    align-items: center;

}

.header-main .main-menu ul li .has-homemenu .homemenu-items .homemenu .homemenu-thumb {

  position: relative;

        text-align: center;

}

.header-main .main-menu ul li .has-homemenu .homemenu-items .homemenu .homemenu-thumb .demo-button {

  position: absolute;

  top: 50%;

  transform: translateY(-50%);

  text-align: center;

  opacity: 0;

  visibility: hidden;

  transition: all 0.4s ease-in-out;

  margin-top: 20px;

  left: 25px;

  right: 25px;

}

@media (max-width: 1399px) {

  .header-main .main-menu ul li .has-homemenu .homemenu-items .homemenu .homemenu-thumb .demo-button .gt-theme-btn {

    font-size: 14px;

    min-width: 140px;

  }

}

.header-main .main-menu ul li .has-homemenu .homemenu-items .homemenu .homemenu-thumb .demo-button .gt-theme-btn {

  padding: 18px 30px;

  justify-content: center;

  line-height: 1;

  background-color: var(--theme);

  color: var(--black);

  border-radius: 30px;

}

.header-main .main-menu ul li .has-homemenu .homemenu-items .homemenu .homemenu-thumb .demo-button .gt-theme-btn:hover {

  background-color: var(--white);

  color: var(--black) !important;

}

.header-main .main-menu ul li .has-homemenu .homemenu-items .homemenu .homemenu-thumb:hover .demo-button {

  opacity: 1;

  visibility: visible;

  margin-top: 0;

}

.header-main .main-menu ul li .has-homemenu .homemenu-items .homemenu .homemenu-thumb:hover .homemenu-btn {

  opacity: 1;

  visibility: visible;

  bottom: 50%;

  transform: translateY(50%);

}

.header-main .main-menu ul li .has-homemenu .homemenu-items .homemenu .homemenu-thumb img {

  width: 46px;
filter: brightness(0%) invert(1);
}
.header-main .main-menu ul li .has-homemenu .homemenu-items .homemenu a:hover .homemenu-thumb img{
    filter: brightness(100%);
}
.header-main .main-menu ul li .has-homemenu .homemenu-items .homemenu .homemenu-title {

    text-align: center;

    margin: 1px auto;

    display: inline-block;

    font-size: 18px;

    color: #fff;

    font-weight: 500;

    font-family: "Kanit", sans-serif;

}
.header-main .main-menu ul li .has-homemenu .homemenu-items .homemenu a:hover .homemenu-title {
    color: #fff;
}
.header-main .main-menu ul li:hover > a {

  color: var(--theme);

}

.header-main .main-menu ul li:hover > a::after {

  color: var(--theme);

}

.header-main .main-menu ul li:hover > .submenu {

  visibility: visible;

  opacity: 1;

  transform: translateY(0px);

}

.header-main .header-right {

  gap: 30px;

}

@media (max-width: 1399px) {

  .header-main .header-right {

    gap: 20px;

  }

}

.header-main .sidebar__toggle {

  cursor: pointer;

  font-size: 20px;

}



.header-1 {

  position: absolute;

  top: 0;

  left: 0;

  width: 100%;

  z-index: 99999;

}

.header-1 .offcanvas__logo img {

  width: 130px;

}

.header-1 .container {

  max-width: 1800px;

}

.header-1 .header-right {

  display: flex;

  align-items: center;

  gap: 40px;

}

@media (max-width: 575px) {

  .header-1 .header-right {

    grid-gap: 15px;

  }

}

.header-1 .header-right .theme-btn {

  color: var(--white);

}

@media (max-width: 991px) {

  .header-1 .header-right .theme-btn {

    display: none;

  }

}

.header-1 .header-right .theme-btn:hover {

  color: #0B0E13;

}

.header-1 .search-toggler, .header-1 .sidebar__toggle {

  width: 60px;

  height: 60px;

  line-height: 60px;

  display: inline-block;

  border-radius: 50%;

  border: 1px solid rgba(255, 255, 255, 0.2);

  text-align: center;

}

.header-1.header-3 {

  position: static;

}

@media (max-width: 1399px) {

  .header-1.header-3 {

    position: relative;

    z-index: 999;

    background-color: #000;

  }

}



.header-2 {

  position: absolute;

  top: 0;

  left: 0;

  width: 100%;

  z-index: 99;

}

.header-2.header-style-2 .main-menu ul li {

  margin-inline-end: 0px;

}

.header-2.header-style-2 .main-menu ul li a {

  padding: 10px 10px 12px;

  border-radius: 30px;

  line-height: 1;

}

.header-2.header-style-2 .main-menu ul li a:hover {

    color: #ffffff !important;

    background-color: #031246;

    border-radius: 30px;

}

.header-2.header-style-2 .main-menu ul li .submenu {

  background-color: #1c56a5;

  box-shadow: rgba(4, 31, 120, 0.9) 0px 8px 24px;

  min-width: 260px;

  padding: 20px 0;

}

.header-2.header-style-2 .main-menu ul li .submenu li a {

  background-color: transparent;

  color: var(--header);

  line-height: 38px;

}

.header-2.header-style-2 .main-menu ul li .submenu li:hover > a {

  color: var(--theme) !important;

  margin-left: 10px;

}

.header-2.header-style-2 .main-menu ul li:hover > a {

  color: #ffffff;

  background-color: #031246;

}

.header-2.header-style-2 .main-menu ul li:hover > a::after {

  color: var(--theme);

}

.header-2.header-style-2.header-4 .container-fluid {

  padding: 0 40px;

}

@media (max-width: 1399px) {

  .header-2.header-style-2.header-4 .container-fluid {

    padding: 0 30px;

  }

}

@media (max-width: 767px) {

  .header-2.header-style-2.header-4 .container-fluid {

    padding: 0 15px;

  }

}

.header-2.header-style-2.header-4 .main-menu {

  border-radius: 100px;

  border: 1px solid rgba(255, 255, 255, 0.15);

  background: rgba(255, 255, 255, 0.15);

  backdrop-filter: blur(20px);

  padding: 12px 16px;

}

@media (max-width: 1399px) {

  .header-2.header-style-2.header-4 .main-menu {

    padding: 0;

    border: none;

    background: transparent;

    backdrop-filter: initial;

    border-radius: 0;

  }

}

.header-2.header-style-2.header-4 .main-menu ul li a {

  color: var(--white);

}

.header-2.header-style-2.header-4 .header-right .search-toggler, .header-2.header-style-2.header-4 .header-right .sidebar__toggle {

  width: 60px;

  height: 60px;

  line-height: 60px;

  display: inline-block;

  border-radius: 100px;

  border: 1px solid rgba(255, 255, 255, 0.15);

  background: rgba(255, 255, 255, 0.15);

  backdrop-filter: blur(20px);

  text-align: center;

}

.header-2 .header-logo img {

  width: 130px;

}

/*.header-2 .container {

  max-width: 1720px;

}*/

.header-2 .header-right .theme-btn {

  background-color: var(--theme);

  color: #184889;

}

@media (max-width: 991px) {

  .header-2 .header-right .theme-btn {

    display: none;

  }

}

.header-2 .header-right .theme-btn::before {

  background-color: #1c56a5;

}

.header-2.inner-page-style .header-main .main-menu ul li a {

  color: #888888;

}

.header-2.inner-page-style .header-main .main-menu ul li a:hover {

  color: var(--theme) !important;

}

.header-2.inner-page-style .header-main .main-menu ul li:hover > a {

  color: var(--theme);

}

.header-2.inner-page-style .header-main .main-menu ul li:hover > a::after {

  color: var(--theme);

}

.header-2.inner-page-style .header-main .main-menu ul li:hover > .submenu {

  visibility: visible;

  opacity: 1;

  transform: translateY(0px);

}



.sticky {

  top: 0 !important;

  left: 0;

  width: 100%;

  z-index: 9999;

  transition: all 0.9s;

  background-color: #0B0E13;

  -webkit-animation: 500ms ease-in-out 0s normal none 1 running fadeInDown;

  animation: 500ms ease-in-out 0s normal none 1 running fadeInDown;

  box-shadow: rgba(0, 0, 0, 0.9) 0px 8px 24px;

}

.sticky.header-2 .header-main .main-menu ul li a {

  color: #fff;

}

.sticky.header-2 .header-main .main-menu ul li a:hover {

  color: var(--theme) !important;

}

.sticky.header-2 .header-main .main-menu ul li:hover > a {

  color: var(--theme);

}

.sticky.header-2 .header-main .main-menu ul li:hover > a::after {

  color: var(--theme);

}

.sticky.header-2 .header-main .main-menu ul li:hover > .submenu {

  visibility: visible;

  opacity: 1;

  transform: translateY(0px);

}



.mobile-menus .submenu {

  max-height: 340px !important;

  overflow-y: auto !important;

}

.mobile-menus .mean-nav {

  max-height: 700px !important;

  overflow-y: auto !important;

  /* Track */

  /* Handle */

}

.mobile-menus .mean-nav ::-webkit-scrollbar {

  width: 5px;

  height: 5px;

}

.mobile-menus .mean-nav ::-webkit-scrollbar-track {

  box-shadow: inset 0 0 5px var(--bg);

  border-radius: 5px;

}

.mobile-menus .mean-nav ::-webkit-scrollbar-thumb {

  background: var(--theme);

  border-radius: 10px;

}



.style-offcanvas-2 {

  position: relative;

}

.style-offcanvas-2 .offcanvas__logo {

  position: absolute;

  top: 30px;

  left: 30px;

}

@media (max-width: 1199px) {

  .style-offcanvas-2 .offcanvas__logo {

    top: 25px;

    left: 25px;

  }

}

.style-offcanvas-2 .offcanvas__close {

  width: 45px;

  height: 45px;

  line-height: 45px;

  text-align: center;

  border-radius: 50%;

  background-color: transparent !important;

  border: 1px solid rgba(255, 255, 255, 0.15);

  position: absolute;

  top: 30px;

  right: 30px;

  cursor: pointer;

  color: #767676 !important;

}

.style-offcanvas-2 .offcanvas__close i {

  color: #767676 !important;

}

@media (max-width: 1199px) {

  .style-offcanvas-2 .offcanvas__close {

    top: 25px;

    right: 25px;

  }

}

.style-offcanvas-2 .offcanvas-image {

  position: absolute;

  right: 0;

}

@media (max-width: 1899px) {

  .style-offcanvas-2 .offcanvas-image {

    max-width: 600px;

  }

  .style-offcanvas-2 .offcanvas-image img {

    width: 100%;

    height: 100%;

  }

}

@media (max-width: 1199px) {

  .style-offcanvas-2 .offcanvas-image {

    display: none;

  }

}

.style-offcanvas-2 .offcanvas__wrapper {

  padding-top: 0;

  padding-left: 0;

  padding-right: 0;

  position: relative;

}

.style-offcanvas-2 .offcanvas__wrapper .offcanvas__close button {

  font-size: 16px;

  font-weight: 700;

  text-transform: uppercase;

  color: var(--header) !important;

}

.style-offcanvas-2 .offcanvas__wrapper .offcanvas__close:hover {

  background-color: var(--black);

}

.style-offcanvas-2 .offcanvas__info::before {

  position: absolute;

  top: 0;

  bottom: 0;

  width: 1px;

  height: 100%;

  content: "";

  background: rgba(255, 255, 255, 0.2);

  left: 39%;

}

@media (max-width: 1899px) {

  .style-offcanvas-2 .offcanvas__info::before {

    display: none;

  }

}

.style-offcanvas-2 .mean-nav ul li a {

  font-size: 40px !important;

  font-weight: 700 !important;

  color: #ABABAB !important;

}

@media (max-width: 575px) {

  .style-offcanvas-2 .mean-nav ul li a {

    font-size: 20px !important;

  }

}

.style-offcanvas-2 .mean-nav > ul > li > a:hover {

  color: var(--theme) !important;

}

.style-offcanvas-2 .mean-nav {

  height: 100%;

  -webkit-transition: transform 0.45s ease-in-out, opacity 0.45s ease-in-out;

  -moz-transition: transform 0.45s ease-in-out, opacity 0.45s ease-in-out;

  transition: transform 0.45s ease-in-out, opacity 0.45s ease-in-out;

  z-index: 9999999;

  overflow-y: auto;

  overscroll-behavior-y: contain;

  /* For Firefox */

  scrollbar-width: none;

}

.style-offcanvas-2 .mean-container .mean-nav ul li li a {

  padding: 10px 0 !important;

  font-size: 19px !important;

  font-weight: 500 !important;

  color: #ABABAB !important;

}

@media (max-width: 575px) {

  .style-offcanvas-2 .mean-container .mean-nav ul li li a {

    font-size: 17px !important;

  }

}

.style-offcanvas-2 .mean-container .mean-nav ul li li a:hover {

  color: var(--theme) !important;

}

.style-offcanvas-2 .mean-container .mean-nav ul li > a.mean-expand i {

  font-size: 24px I !important;

}

.style-offcanvas-2.style-offcanvas-3 .offcanvas__close {

  width: 45px;

  height: 45px;

  line-height: 45px;

  text-align: center;

  border-radius: 50%;

  background-color: transparent !important;

  border: 1px solid rgba(255, 255, 255, 0.15);

  position: absolute;

  top: 30px;

  left: 20px !important;

  right: initial !important;

  cursor: pointer;

  color: #767676 !important;

}

.style-offcanvas-2.style-offcanvas-3 .offcanvas__close i {

  color: #767676 !important;

}

@media (max-width: 1199px) {

  .style-offcanvas-2.style-offcanvas-3 .offcanvas__close {

    top: 25px;

    right: 25px;

  }

}

.style-offcanvas-2.style-offcanvas-3 .offcanvas__logo {

  position: absolute;

  top: 30px;

  left: 30px;

  display: none;

}

@media (max-width: 1199px) {

  .style-offcanvas-2.style-offcanvas-3 .offcanvas__logo {

    top: 25px;

    left: 25px;

  }

}

.style-offcanvas-2.style-offcanvas-3 .offcanvas__info {

  width: 210px !important;

  padding: 85px 20px;

  background-color: #1A1A1A !important;

  height: 100%;

}

@media (max-width: 1199px) {

  .style-offcanvas-2.style-offcanvas-3 .offcanvas__info {

    width: 100% !important;

  }

}

.style-offcanvas-2.style-offcanvas-3 .offcanvas__info::before {

  display: none;

}

.style-offcanvas-2.style-offcanvas-3 .mean-container .mean-nav ul li a.mean-expand {

  top: 5px !important;

}

.style-offcanvas-2.style-offcanvas-3 .offcanvas__close {

  width: 35px;

  height: 35px;

  line-height: 35px;

  text-align: center;

  border-radius: 50%;

  background-color: var(--theme);

  position: absolute;

  top: 14px;

  right: 15px;

  cursor: pointer;

}

@media (max-width: 1199px) {

  .style-offcanvas-2.style-offcanvas-3 .offcanvas__close {

    top: 25px;

    right: 25px;

  }

}

.style-offcanvas-2.style-offcanvas-3 .offcanvas__logo {

  left: 15px;

  top: 15px;

}

.style-offcanvas-2.style-offcanvas-3 .mean-container .mean-nav ul li > a.mean-expand i {

  font-size: 14px !important;

}

.style-offcanvas-2.style-offcanvas-3 .mobile-menus .submenu a {

  font-size: 14px !important;

}

.offcanvas__logo img{

    width: 170px;

}

.offcanvas__info {

  background: var(--theme2) none repeat scroll 0 0;

  border-left: 2px solid var(--theme);

  position: fixed;

  right: 0;

  top: 0;

  width: 450px;

  height: 100%;

  -webkit-transform: translateX(calc(100% + 80px));

  -moz-transform: translateX(calc(100% + 80px));

  -ms-transform: translateX(calc(100% + 80px));

  -o-transform: translateX(calc(100% + 80px));

  transform: translateX(calc(100% + 80px));

  -webkit-transition: transform 0.45s ease-in-out, opacity 0.45s ease-in-out;

  -moz-transition: transform 0.45s ease-in-out, opacity 0.45s ease-in-out;

  transition: transform 0.45s ease-in-out, opacity 0.45s ease-in-out;

  z-index: 9999999;

  overflow-y: scroll;

  overscroll-behavior-y: contain;

  scrollbar-width: none;

}

.offcanvas__info::-webkit-scrollbar {

  display: none;

}



.offcanvas__info.info-open {

  opacity: 1;

  -webkit-transform: translateX(0);

  -moz-transform: translateX(0);

  -ms-transform: translateX(0);

  -o-transform: translateX(0);

  transform: translateX(0);

}



.offcanvas__wrapper {

  position: relative;

  height: 100%;

  padding: 30px 30px;

}

.offcanvas__wrapper .offcanvas__close {

  width: 45px;

  height: 45px;

  line-height: 45px;

  text-align: center;

  border-radius: 50%;

  background-color: var(--theme);

  position: absolute;

  top: 60px;

  right: 60px;

}

@media (max-width: 1199px) {

  .offcanvas__wrapper .offcanvas__close {

    top: 25px;

    right: 25px;

  }

}

.offcanvas__wrapper .offcanvas__content .text {

  color: var(--black);

}

.offcanvas__wrapper .social-icon {

  margin-top: 40px;

  gap: 16px;

  display: flex;

  align-items: center;

}

.offcanvas__wrapper .social-icon a {

  display: inline-block;

  width: 50px;

  height: 50px;

  line-height: 50px;

  border-radius: 100px;

  border: 1px solid rgba(255, 255, 255, 0.2);

  background: #1C1D20;

  text-align: center;

  font-size: 18px;

}

.offcanvas__wrapper .social-icon a i {

  -webkit-transition: all 900ms ease;

  transition: all 900ms ease;

}

.offcanvas__wrapper .social-icon a:hover {

  color: var(--theme);

  border: 1px solid var(--theme);

}

.offcanvas__wrapper .social-icon a:hover i {

  -webkit-transform: rotateY(360deg);

  transform: rotateY(360deg);

}

.offcanvas__wrapper .offcanvas__contact {

  margin-top: 0;

}

.offcanvas__wrapper .offcanvas__contact ul {

  margin-top: 30px;

}

@media (max-width: 575px) {

  .offcanvas__wrapper .offcanvas__contact ul {

    display: none;

  }

}

.offcanvas__wrapper .offcanvas__contact ul li {

  font-size: 20px;

  font-weight: 400;

  text-transform: capitalize;

}

@media (max-width: 575px) {

  .offcanvas__wrapper .offcanvas__contact ul li {

    font-size: 14px;

  }

}

.offcanvas__wrapper .offcanvas__contact ul li:not(:last-child) {

  margin-bottom: 30px;

}

@media (max-width: 575px) {

  .offcanvas__wrapper .offcanvas__contact ul li:not(:last-child) {

    margin-bottom: 20px;

  }

}

.offcanvas__wrapper .offcanvas__contact ul li a {

  color: var(--white);

}

.offcanvas__wrapper .offcanvas__contact ul li .offcanvas__contact-icon {

  margin-right: 20px;

}

.offcanvas__wrapper .offcanvas__contact ul li .offcanvas__contact-icon i {

  color: var(--theme);

}

.offcanvas__wrapper .offcanvas__contact span {

  text-transform: initial;

}

.offcanvas__wrapper .offcanvas__contact .header-button .theme-btn {

  width: 100%;

  padding: 20px 40px;

  text-transform: capitalize !important;

}



.offcanvas__overlay {

  position: fixed;

  height: 100%;

  width: 100%;

  background: #010f40;

  z-index: 900;

  top: 0;

  opacity: 0;

  visibility: hidden;

  right: 0;

}



.offcanvas__overlay.overlay-open {

  opacity: 0.8;

  visibility: visible;

}



@media (max-width: 450px) {

  .offcanvas__info {

    width: 300px;

  }

}

@media (max-width: 575px) {

  .offcanvas__wrapper {

    padding: 20px;

  }

}

.style-offcanvas-2 .offcanvas__info {

  width: 100%;

  background-color: #0B0E13;

  border-left: none;

  padding: 200px 100px;

  overflow-y: initial;

}

@media (max-width: 1899px) {

  .style-offcanvas-2 .offcanvas__info {

    overflow-y: scroll;

  }

}

@media (max-width: 991px) {

  .style-offcanvas-2 .offcanvas__info {

    padding: 100px 40px;

  }

}

.style-offcanvas-2 .offcanvas__top {

  border-top: none;

}

.style-offcanvas-2 .contact-information {

  position: absolute;

  left: 50%;

  z-index: 9999;

}

@media (max-width: 1399px) {

  .style-offcanvas-2 .contact-information {

    display: none;

  }

}

.style-offcanvas-2 .contact-information h3 {

  font-size: 42px;

}

.style-offcanvas-2 .contact-information .contact-list {

  margin-top: 30px;

}

.style-offcanvas-2 .contact-information .contact-list li {

  color: var(--white);

  font-size: 22px;

}

.style-offcanvas-2 .contact-information .contact-list li:not(:last-child) {

  margin-bottom: 30px;

}

.style-offcanvas-2 .contact-information .contact-list li span {

  display: block;

  color: var(--text);

  font-size: 16px;

  margin-bottom: 10px;

}

.style-offcanvas-2 .contact-information .contact-list li .social-icon {

  gap: 14px;

  display: flex;

  align-items: center;

  margin-top: 10px;

}

.style-offcanvas-2 .contact-information .contact-list li .social-icon a {

  display: inline-block;

  width: 61px;

  height: 61px;

  line-height: 61px;

  border-radius: 100px;

  border: 1px solid rgba(255, 255, 255, 0.2);

  background: #1C1D20;

  text-align: center;

  font-size: 22px;

}

.style-offcanvas-2 .contact-information .contact-list li .social-icon a i {

  -webkit-transition: all 900ms ease;

  transition: all 900ms ease;

}

.style-offcanvas-2 .contact-information .contact-list li .social-icon a:hover {

  color: var(--theme);

  border: 1px solid var(--theme);

}

.style-offcanvas-2 .contact-information .contact-list li .social-icon a:hover i {

  -webkit-transform: rotateY(360deg);

  transform: rotateY(360deg);

}



.footer-wrapper {

  border-top: 1px solid rgba(255, 255, 255, 0.2);

  padding-top: 40px;

  margin-top: 60px;

}

.footer-wrapper .footer-menu-list {

  display: flex;

  align-items: center;

  gap: 40px;

  justify-content: center;

}

@media (max-width: 767px) {

  .footer-wrapper .footer-menu-list {

    flex-wrap: wrap;

    gap: 20px;

  }

}

.footer-wrapper .footer-menu-list li a {

  color: var(--text);

}

.footer-wrapper .footer-menu-list li a:hover {

  color: var(--theme);

}

.footer-wrapper .icon-items-area {

  margin-top: 60px;

  display: flex;

  align-items: center;

  gap: 25px;

  justify-content: center;

}

@media (max-width: 767px) {

  .footer-wrapper .icon-items-area {

    flex-wrap: wrap;

    gap: 20px;

  }

}

.footer-wrapper .icon-items-area .icon-items {

  display: flex;

  align-items: center;

  gap: 10px;

}

.footer-wrapper .icon-items-area .icon-items .icon {

  width: 40px;

  height: 40px;

  line-height: 40px;

  display: inline-block;

  text-align: center;

  border-radius: 50%;

  background-color: #171914;

  transition: all 0.4s ease-in-out;

}

.footer-wrapper .icon-items-area .icon-items .icon:hover {

  background-color: var(--theme);

  color: #060606;

}

.footer-wrapper .icon-items-area .icon-items a {

  text-transform: capitalize;

  font-family: "Kanit", sans-serif;

  color: var(--text);

  transition: all 0.4s ease-in-out;

}

.footer-wrapper .icon-items-area .icon-items a:hover {

  color: var(--white);

}



.footer-bottom {

  display: flex;

  align-items: center;

  justify-content: space-between;

  border-top: 1px solid rgba(255, 255, 255, 0.2);

  padding: 30px 0;

  margin-top: 40px;

}

@media (max-width: 767px) {

  .footer-bottom {

    flex-wrap: wrap;

    gap: 20px;

    justify-content: center;

  }

}

.footer-bottom p span {

  color: var(--theme);

}

.footer-bottom ul {

  display: flex;

  align-items: center;

  gap: 20px;

}

.footer-bottom ul li {

  font-size: 14px;

  font-weight: 400;

}

.footer-bottom ul li a {

  color: var(--text);

}

.footer_about p{
    font-size: 15px;
    line-height: 1.5;
    text-align: left;
    max-width: 88%;
}

.footer-wrapper-2 {

  background: var(--theme2);

  padding: 60px 0 40px;

}

@media (max-width: 1600px) {

  .footer-wrapper-2 {

    margin: 0;

    padding: 60px 0 40px;

  }

}

@media (max-width: 1199px) {

  .footer-wrapper-2 {

    margin: 0;

    padding: 50px 30px 30px;

  }

}

@media (max-width: 991px) {

  .footer-wrapper-2 .footer-logo img {

    width: 280px;

  }

}

@media (max-width: 767px) {

  .footer-wrapper-2 .footer-logo img {

    width: 220px;

  }

}

@media (max-width: 575px) {

  .footer-wrapper-2 .footer-logo img {

    width: 180px;

  }

}

.footer-wrapper-2 .content {

  margin-top: 50px;

}

.footer-wrapper-2 .content p {

  color: var(--white);

  font-size: 24px;

  font-weight: 400;

  letter-spacing: 11.52px;

  text-transform: uppercase;

  margin-bottom: 20px;

}

@media (max-width: 991px) {

  .footer-wrapper-2 .content p {

    font-size: 18px;

  }

}

.footer-wrapper-2 .content h2 {

  color: #888;

  font-size: 150px;

  font-style: normal;

  font-weight: 700;

  line-height: 1;

  letter-spacing: -1.5px;

  text-transform: uppercase;

}

@media (max-width: 1199px) {

  .footer-wrapper-2 .content h2 {

    font-size: 120px;

  }

}

@media (max-width: 991px) {

  .footer-wrapper-2 .content h2 {

    font-size: 90px;

  }

}

@media (max-width: 767px) {

  .footer-wrapper-2 .content h2 {

    font-size: 70px;

  }

}

@media (max-width: 575px) {

  .footer-wrapper-2 .content h2 {

    font-size: 60px;

  }

}

@media (max-width: 470px) {

  .footer-wrapper-2 .content h2 {

    font-size: 45px;

  }

}

.footer-wrapper-2 .content h2 span {

  color: #888;

  text-decoration: underline !important;

}

.footer-wrapper-2 .footer-link-area {

  border-top: 1px solid rgba(255, 255, 255, 0.2);

  margin-top: 60px;

  padding-top: 40px;

}

.footer-wrapper-2 .footer-link-area .link-item .widget-title {

  color: var(--white);

  font-family: "Kanit", sans-serif;

  font-size: 18px;

  font-weight: 500;

  letter-spacing: 1px;

  text-transform: uppercase;

  margin-bottom: 25px;

}

.footer-wrapper-2 .footer-link-area .link-item .menu-item {

  display: flex;

  align-items: center;

  gap: 20px;

}

@media (max-width: 1399px) {

  .footer-wrapper-2 .footer-link-area .link-item .menu-item {

    flex-wrap: wrap;

    gap: 14px;

  }

}

.footer-wrapper-2 .footer-link-area .link-item .menu-item li {

  font-size: 14px;

  font-weight: 500;

  letter-spacing: 1px;

  text-transform: uppercase;

}

.footer-wrapper-2 .footer-link-area .link-item .menu-item li a {

  color: #888;

}

.footer-wrapper-2 .footer-link-area .link-item .menu-item li a:hover {

  color: var(--theme);

}

.footer-wrapper-2 .footer-link-area .location-text {

  margin-left: -30px;

  border-right: none;

}

@media (max-width: 1399px) {

  .footer-wrapper-2 .footer-link-area .location-text {

    margin-left: 0;

  }

}

.footer-wrapper-2 .footer-link-area .location-text p {

  color: #888;

  font-size: 16px;

  font-weight: 500;

  text-transform: uppercase;

}

.footer-wrapper-2 h3{

    color: var(--theme);

    font-family: "Poppins", sans-serif;

    font-weight: 500;

    font-size: 20px;

    margin-bottom: 20px;

    text-transform: capitalize;

}

.footer-bottom-2{

    background-color: #071a5a;

    border-top: 1px solid;

}

.footer-menu-list li a{

    color: #fff;

}

.footer-bottom-2 .footer-bottom-wrapper-2 {

  display: flex;

  align-items: center;

  justify-content: space-between;

  padding: 3px 0;

}

@media (max-width: 1199px) {

  .footer-bottom-2 .footer-bottom-wrapper-2 {

    flex-wrap: wrap;

    gap: 20px;

  }

}

@media (max-width: 767px) {

  .footer-bottom-2 .footer-bottom-wrapper-2 {

    justify-content: center;

  }

}

.footer-bottom-2 .footer-bottom-wrapper-2 p span {

  color: var(--theme);

}

.footer-bottom-2 .footer-bottom-wrapper-2 ul {

  display: flex;

  align-items: center;

  gap: 20px;

}

.footer-bottom-2 .footer-bottom-wrapper-2 ul li {

  font-size: 14px;

  font-weight: 400;

}

.footer-bottom-2 .footer-bottom-wrapper-2 ul li a {

  color: var(--text);

}

.footer-bottom-2 .footer-bottom-wrapper-2 ul li a:hover {

  color: var(--theme);

}

.footer-wrapper-2 .icon-items-area {

    display: flex;

    align-items: center;

    gap: 8px;

    margin-top: 14px;

}

@media (max-width: 575px) {

  .footer-wrapper-2 .icon-items-area {

    flex-wrap: wrap;

    gap: 10px;

  }

}

.footer-wrapper-2 .icon-items-area .icon-items {

  display: flex;

  align-items: center;

  gap: 10px;

}

.footer-wrapper-2 .icon-items-area .icon-items .icon {

  width: 40px;

  height: 40px;

  line-height: 40px;

  display: inline-block;

  text-align: center;

  border-radius: 50%;

  border: 1px solid #fff;

    color: #fff;

  transition: all 0.4s ease-in-out;

}

.footer-wrapper-2 .icon-items-area .icon-items a {

  text-transform: capitalize;

  font-family: "Kanit", sans-serif;

  color: var(--text);

  transition: all 0.4s ease-in-out;

}

.footer-wrapper-2 .icon-items-area .icon-items:hover .icon {

  background-color: var(--theme);

  color: #060606;

}

.footer-wrapper-2 .icon-items-area .icon-items:hover a {

  color: var(--white);

}



.footer-box-items {

  border-radius: 10px;

  background: #1A1A1A;

  padding: 60px 0 0;

}

.footer-box-items .icon {

  width: 138px;

  height: 138px;

  border-radius: 50%;

  background: #060606;

  text-align: center;

  line-height: 138px;

  margin: 0 auto;

}

.footer-box-items .content {

  text-align: center;

  margin-top: 60px;

  margin-bottom: 30px;

  padding: 0 60px;

}

@media (max-width: 991px) {

  .footer-box-items .content {

    padding: 0 35px;

    margin-bottom: 15px;

    margin-top: 20px;

  }

}

@media (max-width: 575px) {

  .footer-box-items .content {

    padding: 0 30px;

  }

}

.footer-box-items .content p {

  color: var(--white);

  font-size: 24px;

  font-weight: 400;

  letter-spacing: 4.8px;

  text-transform: uppercase;

  margin-bottom: 15px;

}

@media (max-width: 575px) {

  .footer-box-items .content p {

    font-size: 18px;

  }

}

.footer-box-items .content h2 {

  color: #888;

  font-size: 80px;

  font-weight: 700;

  letter-spacing: -0.8px;

  text-transform: uppercase;

}

@media (max-width: 767px) {

  .footer-box-items .content h2 {

    font-size: 60px;

  }

}

@media (max-width: 575px) {

  .footer-box-items .content h2 {

    font-size: 50px;

  }

}

.footer-box-items .content .icon-items-area {

  display: flex;

  align-items: center;

  gap: 25px;

  justify-content: center;

  margin-top: 45px;

}

@media (max-width: 1199px) {

  .footer-box-items .content .icon-items-area {

    gap: 15px;

    margin-top: 20px;

    flex-wrap: wrap;

  }

}

.footer-box-items .content .icon-items-area .icon-items {

  display: flex;

  align-items: center;

  gap: 10px;

}

.footer-box-items .content .icon-items-area .icon-items .icon {

  width: 40px;

  height: 40px;

  line-height: 40px;

  display: inline-block;

  text-align: center;

  border-radius: 50%;

  background-color: #171914;

  transition: all 0.4s ease-in-out;

}

.footer-box-items .content .icon-items-area .icon-items a {

  text-transform: capitalize;

  font-family: "Kanit", sans-serif;

  color: var(--text);

  transition: all 0.4s ease-in-out;

}

.footer-box-items .content .icon-items-area .icon-items:hover .icon {

  background-color: var(--theme);

  color: #060606;

}

.footer-box-items .content .icon-items-area .icon-items:hover a {

  color: var(--white);

}

.footer-box-items .f-bottom-text {

  text-align: center;

  border-top: 1px solid rgba(255, 255, 255, 0.2);

  padding: 20px 0;

}



.Protix -image {

  margin-top: 30px;

  display: inline-block;

}

@media (max-width: 1399px) {

  .Protix -image {

    display: block;

  }

  .Protix -image img {

    width: 100%;

    height: 100%;

  }

}

.Protix -image img {

  width: 100%;

  height: 100%;

}



.footer-section {

  position: relative;

}

.footer-section .like-shape {

  position: absolute;

  top: 14%;

  right: 9%;

}

@media (max-width: 1199px) {

  .footer-section .like-shape {

    display: none;

  }

}



.footer-wrapper-4 {

  border-radius: 20px;

  background: #060606;

  padding: 0;

  margin: 0 60px;

}

@media (max-width: 1600px) {

  .footer-wrapper-4 {

    margin: 0 25px;

  }

}

@media (max-width: 1199px) {

  .footer-wrapper-4 {

    margin: 0 15px;

  }

}

.footer-wrapper-4 .footer-logo {

  text-align: center;

  margin: 0 auto;

  display: block;

}

@media (max-width: 991px) {

  .footer-wrapper-4 .footer-logo img {

    width: 280px;

  }

}

@media (max-width: 767px) {

  .footer-wrapper-4 .footer-logo img {

    width: 220px;

  }

}

@media (max-width: 575px) {

  .footer-wrapper-4 .footer-logo img {

    width: 180px;

  }

}

.footer-wrapper-4 .content {

  margin-top: 50px;

  text-align: center;

}

.footer-wrapper-4 .content h2 {

  color: #888;

  font-size: 150px;

  font-style: normal;

  font-weight: 700;

  line-height: 1;

  letter-spacing: -1.5px;

  text-transform: uppercase;

}

@media (max-width: 1199px) {

  .footer-wrapper-4 .content h2 {

    font-size: 120px;

  }

}

@media (max-width: 991px) {

  .footer-wrapper-4 .content h2 {

    font-size: 90px;

  }

}

@media (max-width: 767px) {

  .footer-wrapper-4 .content h2 {

    font-size: 70px;

  }

}

@media (max-width: 575px) {

  .footer-wrapper-4 .content h2 {

    font-size: 60px;

  }

}

@media (max-width: 470px) {

  .footer-wrapper-4 .content h2 {

    font-size: 45px;

  }

}

.footer-wrapper-4 .content h2 span {

  color: #888;

  text-decoration: underline !important;

}

.footer-wrapper-4 .footer-link-area {

  border-top: 1px solid rgba(255, 255, 255, 0.2);

  border-bottom: 1px solid rgba(255, 255, 255, 0.2);

  margin-top: 40px;

  padding-top: 40px;

  padding-bottom: 40px;

}

.footer-wrapper-4 .footer-link-area .link-item .widget-title {

  color: var(--white);

  font-family: "Kanit", sans-serif;

  font-size: 18px;

  font-weight: 500;

  letter-spacing: 1px;

  text-transform: uppercase;

  margin-bottom: 25px;

}

.footer-wrapper-4 .footer-link-area .link-item .menu-item {

  display: flex;

  align-items: center;

  gap: 20px;

}

@media (max-width: 1399px) {

  .footer-wrapper-4 .footer-link-area .link-item .menu-item {

    flex-wrap: wrap;

    gap: 14px;

  }

}

.footer-wrapper-4 .footer-link-area .link-item .menu-item li {

  font-size: 14px;

  font-weight: 500;

  letter-spacing: 1px;

  text-transform: uppercase;

}

.footer-wrapper-4 .footer-link-area .link-item .menu-item li a {

  color: #888;

}

.footer-wrapper-4 .footer-link-area .link-item .menu-item li a:hover {

  color: var(--theme);

}

.footer-wrapper-4 .footer-link-area .location-text {

  margin-left: -30px;

  border-right: none;

}

@media (max-width: 1399px) {

  .footer-wrapper-4 .footer-link-area .location-text {

    margin-left: 0;

  }

}

.footer-wrapper-4 .footer-link-area .location-text p {

  color: #888;

  font-size: 16px;

  font-weight: 500;

  text-transform: uppercase;

}

.footer-wrapper-4 .footer-link-area .icon-items-area {

  display: flex;

  align-items: center;

  gap: 25px;

  justify-content: end;

}

@media (max-width: 1399px) {

  .footer-wrapper-4 .footer-link-area .icon-items-area {

    justify-content: start;

  }

}

@media (max-width: 575px) {

  .footer-wrapper-4 .footer-link-area .icon-items-area {

    flex-wrap: wrap;

    gap: 10px;

  }

}

.footer-wrapper-4 .footer-link-area .icon-items-area .icon-items {

  display: flex;

  align-items: center;

  gap: 10px;

}

.footer-wrapper-4 .footer-link-area .icon-items-area .icon-items .icon {

  width: 40px;

  height: 40px;

  line-height: 40px;

  display: inline-block;

  text-align: center;

  border-radius: 50%;

  background-color: #171914;

  transition: all 0.4s ease-in-out;

}

.footer-wrapper-4 .footer-link-area .icon-items-area .icon-items a {

  text-transform: capitalize;

  font-family: "Kanit", sans-serif;

  color: var(--text);

  transition: all 0.4s ease-in-out;

}

.footer-wrapper-4 .footer-link-area .icon-items-area .icon-items:hover .icon {

  background-color: var(--theme);

  color: #060606;

}

.footer-wrapper-4 .footer-link-area .icon-items-area .icon-items:hover a {

  color: var(--white);

}



.footer-bottom-4 .footer-bottom-wrapper-4 {

  text-align: center;

  padding: 30px 0;

}

@media (max-width: 1199px) {

  .footer-bottom-4 .footer-bottom-wrapper-4 {

    flex-wrap: wrap;

    gap: 20px;

  }

}

@media (max-width: 767px) {

  .footer-bottom-4 .footer-bottom-wrapper-4 {

    justify-content: center;

  }

}

.footer-bottom-4 .footer-bottom-wrapper-4 p span {

  color: var(--theme);

}



.section-title {

  position: relative;

  z-index: 99;

  margin-bottom: 30px;

}

.section-title h3 {

  font-size: 32px;

}

@media (max-width: 767px) {

  .section-title {

    margin-bottom: 0;

  }

  .section-title br {

    display: none;

  }

}

.section-title .sec-sub {

  position: relative;

  font-size: 16px;

  font-weight: 500;

  font-family: "Kanit", sans-serif;

  color: var(--theme);

  padding-left: 50px;

  line-height: 1;

  margin-bottom: 30px;

}

.section-title .sec-sub.before-none::before {

  display: none;

}

.section-title .sec-sub.before-none::after {

  display: none;

}

.section-title .sec-sub::before {

  position: absolute;

  left: 0;

  top: 3px;

  content: "";

  height: 1px;

  width: 30px;

  background-color: var(--theme);

}

.section-title .sec-sub::after {

  position: absolute;

  left: 12px;

  bottom: 0;

  content: "";

  height: 1px;

  width: 17px;

  background-color: var(--theme);

}

.section-title h2 span {

  color: var(--theme);

}

.section-title.style-4 .sec-sub {

  padding-left: 0;

  margin-bottom: 20px;

  font-weight: 400;

}

.section-title.style-4 .sec-sub::before {

  display: none;

}

.section-title.style-4 .sec-sub::after {

  display: none;

}



.choose-us-section-2 .section-title-area {

    display: block;

}

.section-title-area {

  display: flex;

  align-items: center;

  justify-content: space-between;

  position: relative;

  z-index: 9;

  margin-bottom: 30px;

}

@media (max-width: 767px) {

  .section-title-area {

    margin-bottom: 0;

  }

  .section-title-area br {

    display: none;

  }

}

.section-title-area .section-title {

  margin-bottom: 0;

}

@media (max-width: 991px) {

  .section-title-area {

    flex-wrap: wrap;

    gap: 30px;

  }

}



.section-title-2 {

  margin-bottom: 40px;

}

@media (max-width: 767px) {

  .section-title-2 {

    margin-bottom: 0;

  }

  .section-title-2 br {

    display: none;

  }

}

.section-title-2 .sec-sub {

  border-radius: 6px;

  background: rgba(191, 247, 71, 0.1);

  display: inline-block;

  padding: 8px 15px;

  line-height: 1;

  color: var(--theme);

  font-size: 16px;

  font-weight: 400;

  text-transform: uppercase;

  font-family: "Kanit", sans-serif;

  margin-bottom: 24px;

}

.section-title-2 .sec-sub img {

  margin-right: 7px;

}

.section-title-2 h2 {

  font-size: 50px;

  font-weight: 700;

  line-height: 128%;

  text-transform: uppercase;

}

@media (max-width: 1399px) {

  .section-title-2 h2 {

    font-size: 44px;

  }

}

@media (max-width: 1199px) {

  .section-title-2 h2 {

    font-size: 40px;

  }

}

@media (max-width: 991px) {

  .section-title-2 h2 {

    font-size: 36px;

  }

}

@media (max-width: 767px) {

  .section-title-2 h2 {

    font-size: 42px;

  }

}

@media (max-width: 575px) {

  .section-title-2 h2 {

    font-size: 34px;

  }

}

.section-title-2 h2 span {

  color: var(--theme);

}

.section-title-2 .prtoject-title {

  font-size: 200px;

  font-weight: 700;

  text-transform: uppercase;

  line-height: 1;

}

@media (max-width: 1199px) {

  .section-title-2 .prtoject-title {

    font-size: 150px;

  }

}

@media (max-width: 575px) {

  .section-title-2 .prtoject-title {

    font-size: 140px;

  }

}

@media (max-width: 470px) {

  .section-title-2 .prtoject-title {

    font-size: 100px;

  }

}



.center {

  text-align: center;

  margin: 0 auto;

}



.section-white {

  background-color: #fff !important;

}


.section-bg {

  background-color: var(--bg);

}

.section-theme2 {

  background-color: var(--theme2) !important;

}
.section-theme3 {

  background-color: #5ce1e6;

}
.section-theme4 {

  background-color: #1c56a5;

}
.theme-btn2{

    background-color: var(--theme);

    color: var(--black);

    margin-top: 10px;

}

.theme-btn2::before {

    background-color: var(--theme2);

}

.section-padding {

    padding: 60px 0;

}

@media (max-width: 1199px) {

    .section-padding {

        padding: 50px 0;

    }

}

@media (max-width: 991px) {

    .section-padding {

        padding: 40px 0;

    }

}



.section-padding-2 {

  padding: 60px 0;

}



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

05. Sections

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

.hero-1 {

  position: relative;

}

@media (max-width: 1199px) {

  .hero-1 {

    padding-top: 150px;

    text-align: center;

  }

}

.hero-1 .line-shape {

  position: absolute;

  left: 0;

  right: 0;

  top: 130px;

  z-index: -1;

  opacity: 0.5;

}

@media (max-width: 1399px) {

  .hero-1 .line-shape {

    display: none;

  }

}

.hero-1 .hero-info {

  display: flex;

  align-items: center;

  gap: 15px;

  position: absolute;

  right: 150px;

  bottom: 150px;

}

@media (max-width: 1399px) {

  .hero-1 .hero-info {

    right: 80px;

    bottom: 70px;

  }

}

@media (max-width: 1199px) {

  .hero-1 .hero-info {

    display: none;

  }

}

.hero-1 .vec-shape {

  position: absolute;

  right: 16%;

  bottom: 28%;

}

@media (max-width: 1399px) {

  .hero-1 .vec-shape {

    display: none;

  }

}

.hero-1 .container {

  max-width: 1585px;

}

@media (max-width: 1199px) {

  .hero-1 .hero-content {

    text-align: center;

  }

}

.hero-1 .hero-content p {

  font-size: 18px;

  color: #888;

  font-weight: 500;

  letter-spacing: 5.4px;

  text-transform: uppercase;

  margin-bottom: 30px;

}

@media (max-width: 575px) {

  .hero-1 .hero-content p {

    font-size: 15px;

    margin-bottom: 15px;

  }

}

.hero-1 .hero-content h1 {

  line-height: 80%;

  margin-bottom: 40px;

  font-size: 100px;

}

@media (max-width: 1600px) {

  .hero-1 .hero-content h1 {

    font-size: 80px;

    line-height: 95%;

  }

}

@media (max-width: 1399px) {

  .hero-1 .hero-content h1 {

    font-size: 65px;

    line-height: 115%;

    margin-bottom: 30px;

  }

}

@media (max-width: 1199px) {

  .hero-1 .hero-content h1 {

    margin-bottom: 30px;

    font-size: 100px;

    line-height: 80%;

  }

}

@media (max-width: 767px) {

  .hero-1 .hero-content h1 {

    font-size: 70px;

    line-height: 110%;

  }

}

@media (max-width: 575px) {

  .hero-1 .hero-content h1 {

    font-size: 68px;

    line-height: 110%;

    margin-bottom: 25px;

  }

}

@media (max-width: 470px) {

  .hero-1 .hero-content h1 {

    font-size: 48px;

    line-height: 110%;

    margin-bottom: 20px;

  }

}

.hero-1 .hero-content h1 b {

  color: var(--theme);

}

.hero-1 .hero-content h1 strong, .hero-1 .hero-content h1 span {

  font-size: 65px;

  color: var(--theme);

}

@media (max-width: 767px) {

  .hero-1 .hero-content h1 strong, .hero-1 .hero-content h1 span {

    font-size: 55px;

  }

}

@media (max-width: 575px) {

  .hero-1 .hero-content h1 strong, .hero-1 .hero-content h1 span {

    font-size: 48px;

  }

}

@media (max-width: 470px) {

  .hero-1 .hero-content h1 strong, .hero-1 .hero-content h1 span {

    font-size: 40px;

  }

}

.hero-1 .hero-content .social-link {

  display: flex;

  align-items: center;

  gap: 20px;

  margin-top: 100px;

}

@media (max-width: 1399px) {

  .hero-1 .hero-content .social-link {

    margin-bottom: 40px;

  }

}

@media (max-width: 1199px) {

  .hero-1 .hero-content .social-link {

    margin-top: 50px;

    justify-content: center;

    margin-bottom: 40px;

  }

}

@media (max-width: 991px) {

  .hero-1 .hero-content .social-link {

    margin-top: 40px;

    margin-bottom: 30px;

  }

}

@media (max-width: 767px) {

  .hero-1 .hero-content .social-link {

    margin-top: 30px;

  }

}

@media (max-width: 575px) {

  .hero-1 .hero-content .social-link {

    margin-top: 20px;

    margin-bottom: 20px;

  }

}

.hero-1 .hero-content .social-link a {

  font-size: 16px;

  font-weight: 400;

  color: var(--text);

}

.hero-1 .hero-content .social-link a:hover {

  color: var(--theme);

}

.hero-1 .hero-image {

  margin-left: -150px;

}

@media (max-width: 1600px) {

  .hero-1 .hero-image {

    max-width: 550px;

  }

  .hero-1 .hero-image img {

    width: 100%;

    height: 100%;

  }

}

@media (max-width: 1399px) {

  .hero-1 .hero-image {

    max-width: 440px;

  }

  .hero-1 .hero-image img {

    width: 100%;

    height: 100%;

  }

}

@media (max-width: 1199px) {

  .hero-1 .hero-image {

    margin-left: 0;

    max-width: 600px;

    margin: 30px auto 0;

  }

  .hero-1 .hero-image img {

    width: 100%;

    height: 100%;

  }

}

.hero-1 .content .video-btn {

  display: flex;

  align-items: center;

  gap: 9px;

  margin-top: 70px;

}

@media (max-width: 1399px) {

  .hero-1 .content .video-btn {

    margin-top: 50px;

  }

}

@media (max-width: 1199px) {

  .hero-1 .content .video-btn {

    margin-top: 50px;

    justify-content: center;

  }

}

@media (max-width: 991px) {

  .hero-1 .content .video-btn {

    margin-top: 40px;

  }

}

@media (max-width: 767px) {

  .hero-1 .content .video-btn {

    margin-top: 30px;

  }

}

@media (max-width: 575px) {

  .hero-1 .content .video-btn {

    margin-top: 20px;

  }

}

.hero-1 .content .video-btn span {

  margin-bottom: 0;

}

.hero-1 .content .video-btn .icon {

  width: 56px;

  height: 56px;

  border-radius: 100px;

  border: 1px solid rgba(102, 102, 102, 0.16);

  border-radius: 100px;

  border: 1px solid rgba(193, 193, 193, 0.16);

  background: #171914;

  display: flex;

  align-items: center;

  justify-content: center;

}

.hero-1 .content .video-btn .icon i {

  color: var(--theme);

}

.hero-1 .content .video-btn .text {

  font-size: 14px;

  font-weight: 400;

  text-transform: uppercase;

  color: #7E7E7E;

}

.hero-1 .content p {

  max-width: 390px;

}

@media (max-width: 1199px) {

  .hero-1 .content p {

    margin: 0 auto;

  }

}



.marquee-section {

  background-color: var(--theme);

  padding: 40px 0;

}



.hero-2 {

  padding: 100px 0 0;

  position: relative;

  z-index: 9;

}

@media (max-width: 1199px) {

  .hero-2 {


  }

}

.hero-2 .video-btn {

  display: flex;

  align-items: center;

  gap: 9px;

  margin-top: 130px;

}

@media (max-width: 1199px) {

  .hero-2 .video-btn {

    margin-top: 50px;

    justify-content: center;

  }

}

@media (max-width: 991px) {

  .hero-2 .video-btn {

    margin-top: 40px;

  }

}

@media (max-width: 767px) {

  .hero-2 .video-btn {

    margin-top: 35px;

  }

}

@media (max-width: 575px) {

  .hero-2 .video-btn {

    margin-top: 30px;

  }

}

@media (max-width: 470px) {

  .hero-2 .video-btn {

    margin-top: 25px;

  }

}

.hero-2 .video-btn span {

  margin-bottom: 0;

}

.hero-2 .video-btn .icon {

  width: 56px;

  height: 56px;

  border-radius: 100px;

  border: 1px solid rgba(102, 102, 102, 0.16);

  border-radius: 100px;

  border: 1px solid rgba(193, 193, 193, 0.16);

  background: #171914;

  display: flex;

  align-items: center;

  justify-content: center;

}

.hero-2 .video-btn .icon i {

  color: var(--theme);

}

.hero-2 .video-btn .text {

  font-size: 14px;

  font-weight: 400;

  text-transform: uppercase;

  color: #7E7E7E;

}

.hero-2 .shape-1 {

  position: absolute;

  top: 41%;

  left: 17%;

}

@media (max-width: 1899px) {

  .hero-2 .shape-1 {

    top: 45%;

    left: 5%;

  }

}

@media (max-width: 1199px) {

  .hero-2 .shape-1 {

    display: none;

  }

}

.hero-2 .shape-2 {

  position: absolute;

  top: 21%;

  right: 36%;

}

.hero-2 .shape-2 img{

    filter: blur(2px);

    transform: rotate(0deg);

}

@media (max-width: 1399px) {

  .hero-2 .shape-2 {

    display: none;

  }

}

.hero-2 .shape-3 {

  position: absolute;

  top: 48%;

  right: 2%;

}

.hero-2 .shape-3 img{

    filter: blur(3px);

    transform: rotate(0deg);

}

@media (max-width: 1399px) {

  .hero-2 .shape-3 {

    display: none;

  }

}

.hero-2 .shape-4 {

  position: absolute;

  top: 73%;

  right: 53%;

}

.hero-2 .shape-4 img{

    filter: blur(4px);

    transform: rotate(5deg);

}

@media (max-width: 1399px) {

  .hero-2 .shape-4 {

    display: none;

  }

}

.hero-2 .shape-5 {

  position: absolute;

  bottom: 12%;

  right: 40%;

}

.hero-2 .shape-5 img{

    filter: blur(5px);

    transform: rotate(15deg);

}

.hero-2 .name {

  position: absolute;

  bottom: 4%;

  right: 40%;

}

.hero-2 .name h3 {

  font-size: 24px;

  font-weight: 700;

  color: var(--theme);

}

.hero-2 .name h3 .text-1 {

  font-size: 24px;

  font-weight: 700;

  color: var(--text);

}

.hero-2 .name h3 .text-2 {

  font-size: 24px;

  font-weight: 700;

  color: var(--white);

}

.hero-2 .name p {

  font-size: 14px;

  font-weight: 500;

}

.hero-2 .hero-content {

  margin-left: -35px;

  margin-top: 110px;

}

@media (max-width: 1600px) {

  .hero-2 .hero-content {

    margin-left: 0;

  }

}

@media (max-width: 1199px) {

  .hero-2 .hero-content {

    margin-left: 0;

    width: 100% !important;
    margin-top: 30px !important;

    text-align: center;

  }

}

.hero-2 .hero-content h1 {

  font-size: 119px;

  font-weight: 700;

  line-height: 1;

}

@media (max-width: 1600px) {

  .hero-2 .hero-content h1 {

    font-size: 88px;

  }

}

@media (max-width: 1199px) {

  .hero-2 .hero-content h1 {

    font-size: 55px;

    line-height: 130%;

  }

}

@media (max-width: 991px) {

  .hero-2 .hero-content h1 {

    font-size: 75px;

    line-height: 140%;

  }

}

@media (max-width: 767px) {

  .hero-2 .hero-content h1 {

    font-size: 60px;

  }

}

@media (max-width: 575px) {

  .hero-2 .hero-content h1 {

    font-size: 48px;

  }

}

@media (max-width: 470px) {

  .hero-2 .hero-content h1 {

    font-size: 57px;

  }

}

.hero-2 .hero-content h1 .text-1 {

  font-size: 70px;

  font-weight: 700;

  letter-spacing: -0.7px;

}

@media (max-width: 1600px) {

  .hero-2 .hero-content h1 .text-1 {

    font-size: 60px;

  }

}

@media (max-width: 1399px) {

  .hero-2 .hero-content h1 .text-1 {

    font-size: 50px;

  }

}

@media (max-width: 1199px) {

  .hero-2 .hero-content h1 .text-1 {

    font-size: 85px;

  }

}

@media (max-width: 991px) {

  .hero-2 .hero-content h1 .text-1 {

    font-size: 75px;

  }

}

@media (max-width: 767px) {

  .hero-2 .hero-content h1 .text-1 {

    font-size: 60px;

  }

}

@media (max-width: 575px) {

  .hero-2 .hero-content h1 .text-1 {

    font-size: 48px;

  }

}

@media (max-width: 470px) {

  .hero-2 .hero-content h1 .text-1 {

    font-size: 57px;

  }

}

.hero-2 .hero-content h1 .text-2 {

  font-size: 70px;

  font-weight: 700;

  color: var(--theme);

  letter-spacing: -0.7px;

}

@media (max-width: 1600px) {

  .hero-2 .hero-content h1 .text-2 {

    font-size: 60px;

  }

}

@media (max-width: 1399px) {

  .hero-2 .hero-content h1 .text-2 {

    font-size: 50px;

  }

}

@media (max-width: 1199px) {

  .hero-2 .hero-content h1 .text-2 {

    font-size: 85px;

  }

}

@media (max-width: 991px) {

  .hero-2 .hero-content h1 .text-2 {

    font-size: 75px;

  }

}

@media (max-width: 767px) {

  .hero-2 .hero-content h1 .text-2 {

    font-size: 60px;

  }

}

@media (max-width: 575px) {

  .hero-2 .hero-content h1 .text-2 {

    font-size: 48px;

  }

}

@media (max-width: 470px) {

  .hero-2 .hero-content h1 .text-2 {

    font-size: 57px;

  }

}

.hero-2 .hero-content .sub-text {

  font-weight: 700;

  color: var(--theme);

  letter-spacing: -1.48px;

  font-family: "Big Shoulders Display", sans-serif;

  margin-left: 8%;

    font-size: 111px;

  display: inline-block;

}

@media (max-width: 1600px) {

    .hero-2 .hero-content .sub-text {

        font-size: 88px;

    }

}

@media (max-width: 1199px) {

  .hero-2 .hero-content .sub-text {

    margin-left: 0;

    display: inline-block;

  }

}

@media (max-width: 470px) {

  .hero-2 .hero-content .sub-text {

        font-size: 68px;

    }

}

.hero-2 .hero-content p {

    max-width: 570px;
    font-size: 20px;
    color: #fff;

    margin-top: 90px;

}

@media (max-width: 1199px) {

  .hero-2 .hero-content p {

    margin-top: 50px;

    margin: 0 auto;

  }

}

@media (max-width: 991px) {

  .hero-2 .hero-content p {

    margin-top: 40px;

  }

}

@media (max-width: 767px) {

  .hero-2 .hero-content p {

    margin-top: 35px;

  }

}

@media (max-width: 575px) {

  .hero-2 .hero-content p {

    margin-top: 30px;

  }

}

@media (max-width: 470px) {

  .hero-2 .hero-content p {

    margin-top: 25px;

  }

}

.hero-2 .hero-image {

  margin-left: -240px;

}

@media (max-width: 1600px) {

    .hero-2 .hero-image img{

        height: 600px;

    }

  .hero-2 .hero-image {

    margin-left: -305px;

  }

}

@media (max-width: 1399px) {

  .hero-2 .hero-image {

    margin-left: -220px;

  }

}

@media (max-width: 1199px) {

  .hero-2 .hero-image {

    margin-left: 0;

    max-width: 500px;

    margin: 0 auto;

  }

  .hero-2 .hero-image img {

    width: 100%;height: 400px;

        object-fit: cover;

        object-position: bottom;

  }

}

.homemenu-content p, .homemenu-content h4{

    color: #fff;    

}

.homemenu-content p{

    text-transform: inherit;

    line-height: 1.2;

    font-size: 12px;

    font-weight: 300;

    letter-spacing: 0.5px;

}

.page-wrapper-3 {

  padding: 60px;

}

@media (max-width: 1600px) {

  .page-wrapper-3 {

    padding: 35px 30px;

  }

}

@media (max-width: 1399px) {

  .page-wrapper-3 {

    margin-top: 100px;

  }

}

@media (max-width: 1199px) {

  .page-wrapper-3 {

    padding: 35px 22px;

  }

}

@media (max-width: 991px) {

  .page-wrapper-3 {

    padding: 30px 18px;

  }

}

@media (max-width: 767px) {

  .page-wrapper-3 {

    padding: 25px 15px;

  }

}

.page-wrapper-3 .sidebar-sticky-item {

  border-left: 1px solid rgba(255, 255, 255, 0.2);

  padding-left: 60px;

  display: grid;

  align-items: center;

  gap: 200px;

}

@media (max-width: 1600px) {

  .page-wrapper-3 .sidebar-sticky-item {

    padding-left: 30px;

  }

}

.page-wrapper-3 .sidebar-sticky-item .sidebar__toggle {

  width: 60px;

  height: 60px;

  line-height: 60px;

  display: inline-block;

  border-radius: 50%;

  border: 1px solid rgba(255, 255, 255, 0.2);

  text-align: center;

  cursor: pointer;

}

.page-wrapper-3 .sidebar-sticky-item .mail-info {

  color: #888;

  display: flex;

  align-items: center;

  gap: 10px;

  writing-mode: sideways-lr;

}

.page-wrapper-3 .sidebar-sticky-item .mail-info a {

  color: #888;

}

.page-wrapper-3 .sidebar-sticky-item .social-icon {

  gap: 10px;

  display: grid;

  align-items: center;

  margin-top: 10px;

}

.page-wrapper-3 .sidebar-sticky-item .social-icon a {

  display: inline-block;

  width: 50px;

  height: 50px;

  line-height: 50px;

  border-radius: 100px;

  border: 1px solid rgba(255, 255, 255, 0.2);

  background: #1C1D20;

  text-align: center;

  font-size: 16px;

}

.page-wrapper-3 .sidebar-sticky-item .social-icon a i {

  -webkit-transition: all 900ms ease;

  transition: all 900ms ease;

}

.page-wrapper-3 .sidebar-sticky-item .social-icon a:hover {

  color: var(--theme);

  border: 1px solid var(--theme);

}

.page-wrapper-3 .sidebar-sticky-item .social-icon a:hover i {

  -webkit-transform: rotateY(360deg);

  transform: rotateY(360deg);

}



.view-portfolio-item {

  border-radius: 20px;

  background: #1A1A1A;

  padding: 30px;

}

@media (max-width: 1600px) {

  .view-portfolio-item {

    padding: 20px;

  }

}

@media (max-width: 991px) {

  .view-portfolio-item {

    max-width: 500px;

    margin: 0 auto;

  }

}

.view-portfolio-item .top-head {

  display: flex;

  align-items: center;

  justify-content: space-between;

  margin-bottom: 30px;

}

.view-portfolio-item .top-head span {

  color: #888;

  font-size: 16px;

  font-weight: 400;

  text-transform: uppercase;

  display: inline-block;

  border-radius: 100px;

  border: 1px solid rgba(255, 255, 255, 0.2);

  padding: 10px 18px;

  line-height: 1;

  position: relative;

  padding-left: 30px;

}

@media (max-width: 1600px) {

  .view-portfolio-item .top-head span {

    font-size: 14px;

  }

}

.view-portfolio-item .top-head span::before {

  position: absolute;

  top: 13px;

  left: 14px;

  content: "";

  width: 8px;

  height: 8px;

  border-radius: 50%;

  background-color: var(--theme);

  animation: colorChange 4s infinite alternate;

}

@keyframes colorChange {

  0% {

    background-color: var(--theme);

  }

  50% {

    background-color: var(--text);

  }

  100% {

    background-color: var(--theme);

  }

}

.view-portfolio-item .thumb img {

  width: 100%;

  height: 100%;

  border-radius: 10px;

}

.view-portfolio-item .content {

  text-align: center;

  margin-top: 30px;

}

.view-portfolio-item .content .line-ani {

  margin-top: -25px;

}

@media (max-width: 1399px) {

  .view-portfolio-item .content .line-ani {

    display: none;

  }

}

.view-portfolio-item .content h3 {

  color: var(--white);

  font-size: 50px;

  font-weight: 700;

  text-transform: uppercase;

}

@media (max-width: 767px) {

  .view-portfolio-item .content h3 {

    font-size: 44px;

  }

}

@media (max-width: 470px) {

  .view-portfolio-item .content h3 {

    font-size: 38px;

  }

}

.view-portfolio-item .content .text {

  color: #888;

  font-size: 16px;

  font-weight: 500;

  text-transform: uppercase;

  margin-bottom: 25px;

}

.view-portfolio-item .content .theme-btn {

  width: 100%;

  height: 52px;

  line-height: 52px;

  margin-bottom: 10px;

}

.view-portfolio-item .content .counter-box {

  display: flex;

  align-items: center;

  justify-content: space-between;

  border-radius: 100px;

  border: 1px solid rgba(255, 255, 255, 0.2);

  padding: 19px 35px;

  line-height: 1;

}

@media (max-width: 1600px) {

  .view-portfolio-item .content .counter-box {

    padding: 16px 20px;

  }

}

.view-portfolio-item .content .counter-box .border-style {

  width: 1px;

  height: 34px;

  background: rgba(255, 255, 255, 0.2);

}

@media (max-width: 575px) {

  .view-portfolio-item .content .counter-box .border-style {

    display: none;

  }

}

.view-portfolio-item .content .counter-box .counter-text h4 {

  color: #888;

  font-size: 16px;

  font-weight: 500;

  text-transform: uppercase;

  font-family: "Kanit", sans-serif;

  color: #888;

  margin-bottom: 5px;

  text-align: left;

}

.view-portfolio-item .content .counter-box .counter-text p {

  color: #888;

  font-size: 14px;

  font-weight: 400;

  text-transform: capitalize;

}

@media (max-width: 1600px) {

  .view-portfolio-item .content .counter-box .counter-text p {

    font-size: 12px;

  }

}



.page-wrap-item {

  max-width: 700px;

}

@media (max-width: 1399px) {

  .page-wrap-item {

    max-width: initial;

  }

}

.page-wrap-item .hero-3 h5 {

  color: #888;

  font-size: 50px;

  font-weight: 700;

  text-transform: uppercase;

  line-height: 1.2;

}

@media (max-width: 575px) {

  .page-wrap-item .hero-3 h5 {

    font-size: 45px;

  }

}

@media (max-width: 470px) {

  .page-wrap-item .hero-3 h5 {

    font-size: 38px;

  }

}

.page-wrap-item .hero-3 h3 {

  color: #BFF747;

  font-size: 100px;

  font-weight: 700;

  line-height: 1;

  text-transform: uppercase;

}

@media (max-width: 1600px) {

  .page-wrap-item .hero-3 h3 {

    font-size: 80px;

  }

}

@media (max-width: 1199px) {

  .page-wrap-item .hero-3 h3 {

    font-size: 65px;

  }

}

@media (max-width: 991px) {

  .page-wrap-item .hero-3 h3 {

    font-size: 80px;

    margin-top: 5px;

  }

}

@media (max-width: 767px) {

  .page-wrap-item .hero-3 h3 {

    font-size: 65px;

  }

}

@media (max-width: 575px) {

  .page-wrap-item .hero-3 h3 {

    font-size: 55px;

  }

}

@media (max-width: 470px) {

  .page-wrap-item .hero-3 h3 {

    font-size: 44px;

  }

}

.page-wrap-item .hero-3 h1 {

  color: var(--white);

  font-size: 200px;

  font-weight: 700;

  text-transform: uppercase;

  line-height: 1;

}

@media (max-width: 1600px) {

  .page-wrap-item .hero-3 h1 {

    font-size: 160px;

  }

}

@media (max-width: 1199px) {

  .page-wrap-item .hero-3 h1 {

    font-size: 130px;

  }

}

@media (max-width: 991px) {

  .page-wrap-item .hero-3 h1 {

    font-size: 140px;

    margin-top: 5px;

  }

}

@media (max-width: 767px) {

  .page-wrap-item .hero-3 h1 {

    font-size: 120px;

    margin-top: 5px;

  }

}

@media (max-width: 575px) {

  .page-wrap-item .hero-3 h1 {

    font-size: 90px;

    margin-top: 5px;

  }

}

@media (max-width: 470px) {

  .page-wrap-item .hero-3 h1 {

    font-size: 70px;

    margin-top: 5px;

  }

}

.page-wrap-item .hero-3 .hero-text {

  display: flex;

  align-items: center;

  justify-content: space-between;

  margin-top: 30px;

}

@media (max-width: 1600px) {

  .page-wrap-item .hero-3 .hero-text {

    flex-wrap: wrap;

    gap: 20px;

  }

}

@media (max-width: 1399px) {

  .page-wrap-item .hero-3 .hero-text {

    justify-content: start;

  }

}

.page-wrap-item .hero-3 .hero-text p {

  color: #888;

  font-size: 16px;

  font-weight: 400;

  line-height: 150%;

  text-transform: uppercase;

  max-width: 425px;

}

@media (max-width: 1899px) {

  .page-wrap-item .hero-3 .hero-text p {

    font-size: 15px;

    line-height: 164%;

    max-width: 350px;

  }

}

@media (max-width: 1600px) {

  .page-wrap-item .hero-3 .hero-text p {

    font-size: 13px;

    line-height: 164%;

    max-width: 350px;

  }

}



.hero-4 {

  padding: 120px 0 0;

  position: relative;

}

.hero-4 .container-fluid {

  padding: 0 155px;

  padding-right: 90px;

}

@media (max-width: 1199px) {

  .hero-4 .container-fluid {

    padding: 0 30px;

    padding-right: 30px;

  }

}

.hero-4 .hero-content h1 {

  font-size: 100px;

  color: var(--header);

  line-height: 110%;

  font-weight: 700;

  line-height: 150%;

  margin-bottom: 110px;

}

.hero-4 .hero-content h1 span {

  border-radius: 22px;

  border: 3px solid rgba(255, 255, 255, 0.3);

  color: var(--theme);

  line-height: 1;

  padding: 0 10px;

}

@media (max-width: 1399px) {

  .hero-4 .hero-content h1 {

    font-size: 90px;

    margin-bottom: 60px;

  }

  .hero-4 .hero-content h1 br {

    display: none;

  }

}

@media (max-width: 991px) {

  .hero-4 .hero-content h1 {

    font-size: 80px;

    margin-bottom: 50px;

    line-height: 100%;

  }

}

@media (max-width: 767px) {

  .hero-4 .hero-content h1 {

    font-size: 70px;

    margin-bottom: 40px;

  }

}

@media (max-width: 575px) {

  .hero-4 .hero-content h1 {

    font-size: 50px;

    margin-bottom: 30px;

  }

}

.hero-4 .hero-content h6 {

  color: var(--white);

  font-size: 18px;

  font-weight: 500;

  font-family: "Kanit", sans-serif;

  text-transform: uppercase;

  margin-bottom: 30px;

}

.hero-4 .hero-content .hero-brand-slider {

  max-width: 690px;

  margin-left: initial;

}

.hero-4 .hero-image {

  position: absolute;

  top: 40px;

  right: 60px;

  z-index: -1;

}

.hero-4 .hero-bottom-area {

  margin-top: 110px;

  display: flex;

  align-items: end;

  justify-content: space-between;

}

.hero-4 .hero-bottom-area p {

  color: #888;

  font-size: 16px;

  font-weight: 400;

  line-height: 150%;

  text-transform: uppercase;

  max-width: 360px;

}

.hero-4 .hero-bottom-area .social-text {

  display: flex;

  align-items: center;

  gap: 35px;

}

.hero-4 .hero-bottom-area .social-text a {

  color: #888;

  text-align: center;

  font-size: 18px;

  font-weight: 500;

  text-transform: uppercase;

}



.banner-four {

  background-color: var(--black);

  padding: 260px 0px 130px;

  position: relative;

  z-index: 1;

  overflow: hidden;

  border-bottom: 1px solid #414141;

}

.banner-four::before {

  content: "";

  position: absolute;

  inset: 0px;

  width: 100%;

  height: 100%;

  background-size: cover;

  background-position: left top 100px;

  background-image: url("../images/banner/line.html");

}

.banner-four .intro {

  padding-left: 180px;

}

.banner-four .intro p {

  max-width: 400px;

  margin-bottom: 30px;

}

.banner-four .arrow {

  position: relative;

  display: block;

  width: 100%;

  max-width: 740px;

}

.banner-four .arrow::before {

  content: "";

  position: absolute;

  left: 0px;

  right: 0px;

  height: 2px;

  width: calc(100% - 6px);

  background-color: var(--white);

}

.banner-four .arrow::after {

  content: "\f105";

  font-family: "Font Awesome 6 Pro";

  position: absolute;

  right: 4px;

  top: 50%;

  transform: translateY(-48%);

  font-size: 24px;

}

.banner-four .banner-four__content {

  position: relative;

  z-index: 9;

}

.banner-four .banner-four__title {

  max-width: 1100px;

  margin-top: 70px;

}

.banner-four .banner-four__title h1 {

  text-transform: uppercase;

  font-weight: 900;

  text-align: center;

}

.banner-four .banner-four__title .frame {

  display: inline-flex;

  font-size: 46px;

  position: relative;

  color: white;

}

.banner-four .banner-four__title .frame img {

  width: 100%;

  height: 100%;

  position: absolute;

  inset: 0px;

  animation: rotateInfinite 24s linear infinite;

  animation-play-state: running;

}

.banner-four .banner-four__title .frame i {

  background-color: var(--primary-color);

}

.banner-four .banner-four__title .frame:hover img {

  animation-play-state: paused;

}

.banner-four .small {

  position: absolute;

  top: 260px;

  left: 9%;

  z-index: 2;

  max-width: 15vw;

}

.banner-four .large {

  position: absolute;

  top: 100px;

  right: 6%;

  z-index: -1;

  max-width: 30vw;

}



.gt-vertical-portfolio .slider {

  min-height: 50vh;

}

.gt-vertical-portfolio .slider .swiper-slide {

  overflow: hidden;

  position: relative;

  height: 100%;

  display: flex;

  justify-content: center;

}

.gt-vertical-portfolio .slider .swiper-slide .slide-inner {

  position: absolute;

  width: 100%;

  height: 100vh;

  left: 0;

  top: 0;

}

.gt-vertical-portfolio .slider .swiper-slide .slide-inner img {

  position: absolute;

  width: 100vw;

  height: 100vh;

  object-fit: cover;

  left: 0;

  top: 0;

  bottom: 0;

  margin: auto;

}

.gt-vertical-portfolio .swiper-container {

  width: 100%;

  height: 100vh;

  position: relative;

}

.gt-vertical-portfolio .theme-btn {

  border: 1px solid 1px solid rgba(255, 255, 255, 0.16);

  color: var(--white);

  margin-top: 50px;

}

.gt-vertical-portfolio .theme-btn:hover {

  color: var(--black);

}

.gt-vertical-portfolio .hero-content {

  max-width: 400px;

}

.gt-vertical-portfolio .hero-content h6 {

  padding-bottom: 20px;

  border-bottom: 1px solid rgba(255, 255, 255, 0.16);

  margin-bottom: 20px;

  font-size: 28px;

}

.gt-vertical-portfolio .hero-content p {

  color: var(--white);

}

.gt-vertical-portfolio__content {

  z-index: 9;

  left: 50px;

  right: 50px;

  bottom: 100px;

  position: absolute;

  z-index: 99;

  display: flex;

  align-items: end;

  justify-content: space-between;

}

.gt-vertical-portfolio__content-title {

  opacity: 0;

  font-size: 100px;

  line-height: 1.05;

  color: var(--white);

  transform: translateY(-130px);

  position: relative;

  z-index: 999;

  max-width: 800px;

}

.gt-vertical-portfolio__content-title a:hover {

  color: var(--white);

}

.gt-vertical-portfolio .swiper-slide-active .gt-vertical-portfolio__item {

  animation-name: qodef-animate-slide-out;

  animation-duration: 1.3s;

  animation-fill-mode: forwards;

}

.gt-vertical-portfolio .swiper-slide-active .gt-vertical-portfolio__content-title {

  opacity: 1;

  transform: translateY(0px);

  transition: all 2200ms ease;

}

.gt-vertical-portfolio__slider {

  width: 100vw;

  height: 100vh;

}

.gt-vertical-portfolio__slider__arrow {

  gap: 40px;

  right: 50px;

  bottom: 50px;

  z-index: 99;

  display: flex;

  position: absolute;

  align-items: center;

}

.gt-vertical-portfolio__slider__arrow-prev, .gt-vertical-portfolio__slider__arrow-next {

  gap: 8px;

  display: flex;

  font-size: 14px;

  font-weight: 600;

  align-items: center;

  color: var(--white);

}

.gt-vertical-portfolio .array-button {

  display: grid;

  align-items: center;

  gap: 15px;

  position: absolute;

  top: 50%;

  transform: translateY(-50%);

  right: 50px;

  z-index: 999;

}

@media (max-width: 1600px) {

  .gt-vertical-portfolio .array-button {

    display: none;

  }

}

.gt-vertical-portfolio .array-button .array-prev, .gt-vertical-portfolio .array-button .array-next {

  border-radius: 100px;

  border: 1.5px solid rgba(255, 255, 255, 0.2);

  width: 48px;

  height: 48px;

  line-height: 48px;

  text-align: center;

  border-radius: 50%;

  color: var(--theme);

  transition: all 0.4s ease-in-out;

  cursor: pointer;

}

.gt-vertical-portfolio .array-button .array-prev:hover, .gt-vertical-portfolio .array-button .array-next:hover {

  background-color: var(--theme);

  color: #060606;

}



.gt-horizontal-portfolio .slider {

  min-height: 100vh;

}

.gt-horizontal-portfolio .slider .swiper-slide {

  overflow: hidden;

  position: relative;

  height: 100vh;

  display: flex;

  justify-content: center;

}

.gt-horizontal-portfolio .slider .swiper-slide .slide-inner {

  position: absolute;

  width: 100vw;

  height: 100vh;

  left: 0;

  top: 0;

}

.gt-horizontal-portfolio .slider .swiper-slide .slide-inner img {

  position: absolute;

  width: 100vw;

  height: 100vh;

  object-fit: cover;

  left: 0;

  top: 0;

  bottom: 0;

  margin: auto;

}

.gt-horizontal-portfolio .swiper-container {

  width: 100%;

  height: 100vh;

  position: relative;

}

.gt-horizontal-portfolio .theme-btn {

  border: 1px solid rgba(255, 255, 255, 0.16);

  color: var(--white);

  margin-top: 50px;

}

.gt-horizontal-portfolio .theme-btn:hover {

  color: var(--black);

}

.gt-horizontal-portfolio .hero-content {

  max-width: 400px;

}

.gt-horizontal-portfolio .hero-content h6 {

  padding-bottom: 20px;

  border-bottom: 1px solid rgba(255, 255, 255, 0.16);

  margin-bottom: 20px;

  font-size: 28px;

}

.gt-horizontal-portfolio .hero-content p {

  color: var(--white);

}

.gt-horizontal-portfolio__content {

  z-index: 9;

  left: 50px;

  right: 50px;

  bottom: 100px;

  position: absolute;

  display: flex;

  align-items: end;

  justify-content: space-between;

}

.gt-horizontal-portfolio__content-title {

  opacity: 0;

  font-size: 100px;

  line-height: 1.05;

  color: var(--white);

  transform: translateY(-130px);

  position: relative;

  max-width: 800px;

  transition: all 2s ease;

}

.gt-horizontal-portfolio__content-title a:hover {

  color: var(--white);

}

.gt-horizontal-portfolio .swiper-slide-active .gt-horizontal-portfolio__content-title {

  opacity: 1;

  transform: translateY(0px);

}

.gt-horizontal-portfolio .array-button {

  display: flex;

  align-items: center;

  gap: 15px;

  position: absolute;

  bottom: 50px;

  right: 50px;

  z-index: 999;

}

@media (max-width: 1600px) {

  .gt-horizontal-portfolio .array-button {

    display: none;

  }

}

.gt-horizontal-portfolio .array-button .array-prev,

.gt-horizontal-portfolio .array-button .array-next {

  border: 1.5px solid rgba(255, 255, 255, 0.2);

  width: 48px;

  height: 48px;

  line-height: 48px;

  text-align: center;

  border-radius: 50%;

  color: var(--theme);

  cursor: pointer;

  transition: all 0.3s ease;

}

.gt-horizontal-portfolio .array-button .array-prev:hover,

.gt-horizontal-portfolio .array-button .array-next:hover {

  background-color: var(--theme);

  color: #060606;

}



.gt-portfolio-parallax-box-slider {

  width: 100%;

  height: 100vh;

  display: flex;

  overflow: hidden;

  margin-left: 10px;

  position: relative;

  align-items: center;

  justify-content: flex-start;

}

.gt-portfolio-parallax-box-slider .gt-parallax-slider-inner {

  gap: 10px;

  width: 100%;

  height: 100vh;

  display: flex;

  padding-top: 80px;

  align-items: center;

  justify-content: flex-start;

}

.gt-portfolio-parallax-box-slider .gt-parallax-slider-item {

  width: 500px;

  height: 100%;

  overflow: hidden;

  position: relative;

  background-size: cover;

  border-radius: 20px;

}

.gt-portfolio-parallax-box-slider .gt-parallax-slider-item img {

  height: 70%;

  min-width: 750px;

  object-fit: cover;

  margin-left: -50px;

  background-size: cover;

  background-position: center;

  border-radius: 20px;

}

.gt-portfolio-parallax-box-slider .content {

  margin-top: 20px;

}

.gt-portfolio-parallax-box-slider .content h3 {

  font-weight: 700;

  margin-top: 5px;

  font-size: 30px;

}

.gt-portfolio-parallax-box-slider .content h3 a:hover {

  color: var(--theme);

}



.hero-5 {

  background: #060606;

  margin: 0 40px;

  z-index: 9;

  padding: 120px 0 0;

}

@media (max-width: 1399px) {

  .hero-5 {

    margin: 0 30px;

  }

}

@media (max-width: 575px) {

  .hero-5 {

    margin: 0 15px;

  }

}

.hero-5 .container-fluid {

  padding: 0 110px;

}

@media (max-width: 1899px) {

  .hero-5 .container-fluid {

    padding: 0 50px;

  }

}

@media (max-width: 1600px) {

  .hero-5 .container-fluid {

    padding: 0 50px;

  }

}

@media (max-width: 1399px) {

  .hero-5 .container-fluid {

    padding: 0 30px;

  }

}

@media (max-width: 575px) {

  .hero-5 .container-fluid {

    padding: 0 15px;

  }

}

.hero-5 .text-box {

  display: flex;

  align-items: center;

  gap: 12px;

  border-radius: 100px;

  border: 1px solid rgba(255, 255, 255, 0.15);

  background: rgba(255, 255, 255, 0.15);

  backdrop-filter: blur(20px);

  transform: rotate(-45deg);

  position: absolute;

  bottom: 240px;

  left: 530px;

  z-index: 99999;

  padding: 10px 16px;

}

@media (max-width: 1600px) {

  .hero-5 .text-box {

    bottom: 175px;

    left: 324px;

  }

}

@media (max-width: 1399px) {

  .hero-5 .text-box {

    display: none;

  }

}

.hero-5 .text-box.style-2 {

  transform: rotate(-30deg);

}

.hero-5 .text-box p {

  color: var(--body);

  font-size: 18px;

  font-weight: 500;

  text-transform: uppercase;

  font-family: "Kanit", sans-serif;

}

.hero-5 .text-box p b {

  color: #ECB014;

  font-weight: 500;

}

.hero-5 .text-box span {

  border-radius: 100px;

  border: 1px solid rgba(255, 255, 255, 0.3);

  padding: 2px 10px;

  display: inline-block;

  color: var(--body);

  text-transform: uppercase;

}

.hero-5 .bg-shape {

  position: absolute;

  bottom: 0;

  left: 0;

  right: 0;

}

@media (max-width: 1399px) {

  .hero-5 .bg-shape {

    height: 470px;

  }

}

@media (max-width: 767px) {

  .hero-5 .bg-shape {

    height: 270px;

  }

}

.hero-5 .bg-shape img {

  width: 100%;

  height: 100%;

  border-radius: 40px;

}

.hero-5 .top-image {

  position: absolute;

  right: 0;

  top: 0;

  z-index: -1;

}

@media (max-width: 1399px) {

  .hero-5 .top-image {

    display: none;

  }

}

.hero-5 .top-image img {

  width: 100%;

  height: 100%;

}

.hero-5 .hero-image {

  position: relative;

  z-index: 9999;

}

.hero-5 .hero-image img {

  width: 100%;

  height: 100%;

}

.hero-5 .hero-content {

  padding-bottom: 70px;

  margin-left: 40px;

  position: relative;

  z-index: 9999;

}

@media (max-width: 1399px) {

  .hero-5 .hero-content {

    margin-left: 0;

  }

}

@media (max-width: 991px) {

  .hero-5 .hero-content {

    padding-bottom: 0;

  }

}

.hero-5 .hero-content h4 {

  font-size: 100px;

  font-weight: 700;

  letter-spacing: 0.5px;

  text-transform: uppercase;

  color: var(--body);

}

.hero-5 .hero-content h4 span {

  font-weight: 400;

}

@media (max-width: 1600px) {

  .hero-5 .hero-content h4 {

    font-size: 68px;

  }

}

@media (max-width: 1399px) {

  .hero-5 .hero-content h4 {

    font-size: 44px;

  }

}

@media (max-width: 991px) {

  .hero-5 .hero-content h4 {

    font-size: 80px;

    color: var(--white);

  }

}

@media (max-width: 575px) {

  .hero-5 .hero-content h4 {

    font-size: 35px;

    margin-bottom: 5px;

    color: var(--white);

  }

}

.hero-5 .hero-content h1 {

  font-size: 380px;

  font-weight: 700;

  text-transform: uppercase;

  letter-spacing: 0.5px;

  color: var(--body);

  line-height: 90%;

}

@media (max-width: 1899px) {

  .hero-5 .hero-content h1 {

    font-size: 340px;

  }

}

@media (max-width: 1600px) {

  .hero-5 .hero-content h1 {

    font-size: 288px;

  }

}

@media (max-width: 1399px) {

  .hero-5 .hero-content h1 {

    font-size: 215px;

  }

}

@media (max-width: 991px) {

  .hero-5 .hero-content h1 {

    font-size: 275px;

    color: var(--white);

  }

}

@media (max-width: 575px) {

  .hero-5 .hero-content h1 {

    font-size: 80px;

  }

}

.hero-5 .hero-content .hero-bottom {

  display: flex;

  align-items: center;

  justify-content: space-between;

  margin-top: 20px;

}

@media (max-width: 1399px) {

  .hero-5 .hero-content .hero-bottom {

    flex-wrap: wrap;

    gap: 20px;

  }

}

.hero-5 .hero-content .hero-bottom .theme-btn {

  background-color: var(--white);

  color: #060606;

}

.hero-5 .hero-content .hero-bottom .theme-btn::before {

  background-color: var(--body);

}

.hero-5 .hero-content .hero-bottom .theme-btn:hover {

  border: 1px solid var(--body);

  color: var(--white);

}

.hero-5 .hero-content .hero-bottom span {

  font-size: 100px;

  font-weight: 400;

  letter-spacing: 0.5px;

  text-transform: uppercase;

  font-family: "Big Shoulders Display", sans-serif;

  color: var(--body);

}

@media (max-width: 1600px) {

  .hero-5 .hero-content .hero-bottom span {

    font-size: 70px;

  }

}

@media (max-width: 1399px) {

  .hero-5 .hero-content .hero-bottom span {

    font-size: 50px;

  }

}

@media (max-width: 991px) {

  .hero-5 .hero-content .hero-bottom span {

    font-size: 60px;

    color: var(--white);

  }

}

@media (max-width: 575px) {

  .hero-5 .hero-content .hero-bottom span {

    font-size: 40px;

  }

}



.banner-four {

  background-color: var(--black);

  padding: 260px 0px 130px;

  position: relative;

  z-index: 1;

  overflow: hidden;

  border-bottom: 1px solid #414141;

}

.banner-four::before {

  content: "";

  position: absolute;

  inset: 0px;

  width: 100%;

  height: 100%;

  background-size: cover;

  background-position: left top 100px;

  background-image: url("../images/banner/line.html");

}

.banner-four .intro {

  padding-left: 180px;

}

.banner-four .intro p {

  max-width: 400px;

  margin-bottom: 30px;

}

.banner-four .arrow {

  position: relative;

  display: block;

  width: 100%;

  max-width: 740px;

}

.banner-four .arrow::before {

  content: "";

  position: absolute;

  left: 0px;

  right: 0px;

  height: 2px;

  width: calc(100% - 6px);

  background-color: var(--white);

}

.banner-four .arrow::after {

  content: "\f105";

  font-family: "Font Awesome 6 Pro";

  position: absolute;

  right: 4px;

  top: 50%;

  transform: translateY(-48%);

  font-size: 24px;

}

.banner-four .banner-four__content {

  position: relative;

  z-index: 9;

}

.banner-four .banner-four__title {

  max-width: 1100px;

  margin-top: 70px;

}

.banner-four .banner-four__title h1 {

  text-transform: uppercase;

  font-weight: 900;

  text-align: center;

}

.banner-four .banner-four__title .frame {

  display: inline-flex;

  font-size: 46px;

  position: relative;

  color: white;

}

.banner-four .banner-four__title .frame img {

  width: 100%;

  height: 100%;

  position: absolute;

  inset: 0px;

  animation: rotateInfinite 24s linear infinite;

  animation-play-state: running;

}

.banner-four .banner-four__title .frame i {

  background-color: var(--primary-color);

}

.banner-four .banner-four__title .frame:hover img {

  animation-play-state: paused;

}

.banner-four .small {

  position: absolute;

  top: 260px;

  left: 9%;

  z-index: 2;

  max-width: 15vw;

}

.banner-four .large {

  position: absolute;

  top: 100px;

  right: 6%;

  z-index: -1;

  max-width: 30vw;

}



.gt-vertical-portfolio .slider {

  min-height: 50vh;

}

.gt-vertical-portfolio .slider .swiper-slide {

  overflow: hidden;

  position: relative;

  height: 100%;

  display: flex;

  justify-content: center;

}

.gt-vertical-portfolio .slider .swiper-slide .slide-inner {

  position: absolute;

  width: 100%;

  height: 100vh;

  left: 0;

  top: 0;

}

.gt-vertical-portfolio .slider .swiper-slide .slide-inner img {

  position: absolute;

  width: 100vw;

  height: 100vh;

  object-fit: cover;

  left: 0;

  top: 0;

  bottom: 0;

  margin: auto;

}

.gt-vertical-portfolio .swiper-container {

  width: 100%;

  height: 100vh;

  position: relative;

}

.gt-vertical-portfolio .theme-btn {

  border: 1px solid 1px solid rgba(255, 255, 255, 0.16);

  color: var(--white);

  margin-top: 50px;

}

.gt-vertical-portfolio .theme-btn:hover {

  color: var(--black);

}

.gt-vertical-portfolio .hero-content {

  max-width: 400px;

}

.gt-vertical-portfolio .hero-content span {

  padding-bottom: 20px;

  border-bottom: 1px solid rgba(255, 255, 255, 0.16);

  margin-bottom: 20px;

  font-size: 28px;

  display: inline-block;

  color: var(--white);

}

.gt-vertical-portfolio .hero-content p {

  color: var(--white);

}

.gt-vertical-portfolio__content {

  z-index: 9;

  left: 50px;

  right: 50px;

  bottom: 100px;

  position: absolute;

  z-index: 99;

  display: flex;

  align-items: end;

  justify-content: space-between;

}

@media (max-width: 1399px) {

  .gt-vertical-portfolio__content {

    flex-wrap: wrap;

    left: 30px;

    right: 30px;

  }

}

.gt-vertical-portfolio__content-title {

  opacity: 0;

  font-size: 100px;

  line-height: 1.05;

  color: var(--white);

  transform: translateY(-130px);

  position: relative;

  z-index: 999;

  max-width: 800px;

}

@media (max-width: 1399px) {

  .gt-vertical-portfolio__content-title {

    font-size: 80px;

  }

}

@media (max-width: 991px) {

  .gt-vertical-portfolio__content-title {

    font-size: 60px;

  }

}

@media (max-width: 767px) {

  .gt-vertical-portfolio__content-title {

    font-size: 60px;

  }

}

@media (max-width: 575px) {

  .gt-vertical-portfolio__content-title {

    font-size: 40px;

  }

}

.gt-vertical-portfolio__content-title a:hover {

  color: var(--white);

}

.gt-vertical-portfolio .swiper-slide-active .gt-vertical-portfolio__item {

  animation-name: qodef-animate-slide-out;

  animation-duration: 1.3s;

  animation-fill-mode: forwards;

}

.gt-vertical-portfolio .swiper-slide-active .gt-vertical-portfolio__content-title {

  opacity: 1;

  transform: translateY(0px);

  transition: all 2200ms ease;

}

.gt-vertical-portfolio__slider {

  width: 100vw;

  height: 100vh;

}

.gt-vertical-portfolio__slider__arrow {

  gap: 40px;

  right: 50px;

  bottom: 50px;

  z-index: 99;

  display: flex;

  position: absolute;

  align-items: center;

}

.gt-vertical-portfolio__slider__arrow-prev, .gt-vertical-portfolio__slider__arrow-next {

  gap: 8px;

  display: flex;

  font-size: 14px;

  font-weight: 600;

  align-items: center;

  color: var(--white);

}

.gt-vertical-portfolio .array-button {

  display: grid;

  align-items: center;

  gap: 15px;

  position: absolute;

  top: 50%;

  transform: translateY(-50%);

  right: 50px;

  z-index: 999;

}

@media (max-width: 1600px) {

  .gt-vertical-portfolio .array-button {

    display: none;

  }

}

.gt-vertical-portfolio .array-button .array-prev, .gt-vertical-portfolio .array-button .array-next {

  border-radius: 100px;

  border: 1.5px solid rgba(255, 255, 255, 0.2);

  width: 48px;

  height: 48px;

  line-height: 48px;

  text-align: center;

  border-radius: 50%;

  color: var(--theme);

  transition: all 0.4s ease-in-out;

  cursor: pointer;

}

.gt-vertical-portfolio .array-button .array-prev:hover, .gt-vertical-portfolio .array-button .array-next:hover {

  background-color: var(--theme);

  color: #060606;

}



.gt-horizontal-portfolio .slider {

  min-height: 100vh;

}

.gt-horizontal-portfolio .slider .swiper-slide {

  overflow: hidden;

  position: relative;

  height: 100vh;

  display: flex;

  justify-content: center;

}

.gt-horizontal-portfolio .slider .swiper-slide .slide-inner {

  position: absolute;

  width: 100vw;

  height: 100vh;

  left: 0;

  top: 0;

}

.gt-horizontal-portfolio .slider .swiper-slide .slide-inner img {

  position: absolute;

  width: 100vw;

  height: 100vh;

  object-fit: cover;

  left: 0;

  top: 0;

  bottom: 0;

  margin: auto;

}

.gt-horizontal-portfolio .swiper-container {

  width: 100%;

  height: 100vh;

  position: relative;

}

.gt-horizontal-portfolio .theme-btn {

  border: 1px solid rgba(255, 255, 255, 0.16);

  color: var(--white);

  margin-top: 50px;

}

.gt-horizontal-portfolio .theme-btn:hover {

  color: var(--black);

}

.gt-horizontal-portfolio .hero-content {

  max-width: 400px;

}

.gt-horizontal-portfolio .hero-content span {

  padding-bottom: 20px;

  border-bottom: 1px solid rgba(255, 255, 255, 0.16);

  margin-bottom: 20px;

  font-size: 28px;

  display: inline-block;

}

.gt-horizontal-portfolio .hero-content p {

  color: var(--white);

}

.gt-horizontal-portfolio__content {

  z-index: 9;

  left: 50px;

  right: 50px;

  bottom: 100px;

  position: absolute;

  display: flex;

  align-items: end;

  justify-content: space-between;

}

@media (max-width: 1399px) {

  .gt-horizontal-portfolio__content {

    flex-wrap: wrap;

    left: 30px;

    right: 30px;

  }

}

.gt-horizontal-portfolio__content-title {

  opacity: 0;

  font-size: 100px;

  line-height: 1.05;

  color: var(--white);

  transform: translateY(-130px);

  position: relative;

  max-width: 800px;

  transition: all 2s ease;

}

@media (max-width: 1399px) {

  .gt-horizontal-portfolio__content-title {

    font-size: 80px;

  }

}

@media (max-width: 991px) {

  .gt-horizontal-portfolio__content-title {

    font-size: 60px;

  }

}

@media (max-width: 767px) {

  .gt-horizontal-portfolio__content-title {

    font-size: 60px;

  }

}

@media (max-width: 575px) {

  .gt-horizontal-portfolio__content-title {

    font-size: 40px;

  }

}

.gt-horizontal-portfolio__content-title a:hover {

  color: var(--white);

}

.gt-horizontal-portfolio .swiper-slide-active .gt-horizontal-portfolio__content-title {

  opacity: 1;

  transform: translateY(0px);

}

.gt-horizontal-portfolio .array-button {

  display: flex;

  align-items: center;

  gap: 15px;

  position: absolute;

  bottom: 50px;

  right: 50px;

  z-index: 999;

}

@media (max-width: 1600px) {

  .gt-horizontal-portfolio .array-button {

    display: none;

  }

}

.gt-horizontal-portfolio .array-button .array-prev,

.gt-horizontal-portfolio .array-button .array-next {

  border: 1.5px solid rgba(255, 255, 255, 0.2);

  width: 48px;

  height: 48px;

  line-height: 48px;

  text-align: center;

  border-radius: 50%;

  color: var(--theme);

  cursor: pointer;

  transition: all 0.3s ease;

}

.gt-horizontal-portfolio .array-button .array-prev:hover,

.gt-horizontal-portfolio .array-button .array-next:hover {

  background-color: var(--theme);

  color: #060606;

}



.gt-portfolio-parallax-box-slider {

  width: 100%;

  height: 100vh;

  display: flex;

  overflow: hidden;

  margin-left: 10px;

  position: relative;

  align-items: center;

  justify-content: flex-start;

}

.gt-portfolio-parallax-box-slider .gt-parallax-slider-inner {

  gap: 10px;

  width: 100%;

  height: 100vh;

  display: flex;

  padding-top: 200px;

  align-items: center;

  justify-content: flex-start;

}

@media (max-width: 1399px) {

  .gt-portfolio-parallax-box-slider .gt-parallax-slider-inner {

    padding-top: 160px;

  }

}

@media (max-width: 991px) {

  .gt-portfolio-parallax-box-slider .gt-parallax-slider-inner {

    padding-top: 130px;

  }

}

.gt-portfolio-parallax-box-slider .gt-parallax-slider-item {

  width: 500px;

  height: 100%;

  overflow: hidden;

  position: relative;

  background-size: cover;

  border-radius: 20px;

}

.gt-portfolio-parallax-box-slider .gt-parallax-slider-item img {

  height: 70%;

  min-width: 750px;

  object-fit: cover;

  margin-left: -50px;

  background-size: cover;

  background-position: center;

  border-radius: 20px;

}

.gt-portfolio-parallax-box-slider .content {

  margin-top: 20px;

}

.gt-portfolio-parallax-box-slider .content h3 {

  font-weight: 700;

  margin-top: 5px;

  font-size: 30px;

}

.gt-portfolio-parallax-box-slider .content h3 a:hover {

  color: var(--theme);

}



.about-wrapper .about-left-items {

  max-width: 585px;

  position: relative;

}

.about-wrapper .about-left-items .top-text {

  display: flex;

  align-items: center;

  gap: 20px;

  margin-bottom: 40px;

}

@media (max-width: 575px) {

  .about-wrapper .about-left-items .top-text {

    flex-wrap: wrap;

    margin-bottom: 25px;

  }

}

.about-wrapper .about-left-items .top-text li {

  font-weight: 500;

  border-radius: 10px;

  background: #1A1A1A;

  padding: 17px 23px;

}

.about-wrapper .about-left-items .top-text li span {

  color: var(--white);

}

.about-wrapper .about-left-items .skill-counter {

  display: flex;

  align-items: center;

  gap: 20px;

  border-left: 1px solid rgba(255, 255, 255, 0.2);

  padding-left: 20px;

}

@media (max-width: 1399px) {

  .about-wrapper .about-left-items .skill-counter {

    border-left: none;

    padding-left: 0;

  }

}

@media (max-width: 1199px) {

  .about-wrapper .about-left-items .skill-counter {

    flex-wrap: wrap;

  }

}

.about-wrapper .about-left-items .skill-counter.pl-none {

  padding-left: 0;

  border-left: none;

}

.about-wrapper .about-left-items .skill-counter .content h2 {

  font-size: 32px;

  font-weight: 800;

  color: var(--theme);

}

.about-wrapper .about-left-items .middle-line {

  position: relative;

  height: 1px;

  width: 100%;

  background: rgba(255, 255, 255, 0.2);

  margin-top: 30px;

  margin-bottom: 30px;

}

.about-wrapper .about-left-items .title {

  text-align: right;

  color: var(--white);

  font-size: 20px;

  font-weight: 700;

  letter-spacing: 0.5px;

  text-transform: uppercase;

  margin-top: 50px;

}

.about-wrapper .about-left-items .title span {

  color: #888;

}

.about-wrapper .about-left-items .vec-shape {

  position: absolute;

  right: 0;

  bottom: 60px;

}

.about-wrapper .about-btn {

  display: flex;

  align-items: center;

  gap: 20px;

  margin-top: 50px;

}

@media (max-width: 1199px) {

  .about-wrapper .about-btn {

    flex-wrap: wrap;

    margin-top: 30px;

  }

}



.about-section {

  position: relative;

  z-index: 9;    
    margin-bottom: 60px;

}

.about-section .circle-shape {

  position: absolute;

  bottom: -60%;

  right: 0;

  z-index: -1;

}



.about-wrapper-3 {

  position: relative;

  z-index: 9;

}

.about-wrapper-3 .about-image {

  position: absolute;

  top: 28%;

  right: 0;

  z-index: -1;

}

.about-wrapper-3 .about-counter-2 {

  border-radius: 10px;

  background: #1A1A1A;

  padding: 30px;

  display: flex;

  align-items: center;

  justify-content: space-between;

}

@media (max-width: 1199px) {

  .about-wrapper-3 .about-counter-2 {

    flex-wrap: wrap;

    gap: 25px;

    justify-content: start;

  }

}

@media (max-width: 767px) {

  .about-wrapper-3 .about-counter-2 {

    margin-top: 30px;

  }

}

.about-wrapper-3 .about-counter-2 .counter-item {

  display: flex;

  align-items: center;

  gap: 10px;

}

.about-wrapper-3 .about-counter-2 .counter-item .content h3 {

  color: var(--theme);

  font-size: 32px;

  font-weight: 800;

  letter-spacing: 0.5px;

  line-height: 1;

  margin-bottom: 5px;

}

.about-wrapper-3 .about-counter-2 .counter-item .content p {

  text-transform: uppercase;

}

.about-wrapper-3 .about-counter-2 .bb-right {

  background: rgba(255, 255, 255, 0.2);

  width: 1px;

  height: 51px;

}

.about-wrapper-3 .client-info {

  display: flex;

  align-items: center;

  gap: 10px;

  margin-top: 30px;

}

.about-wrapper-3 .client-info p {

  color: #888;

  font-size: 16px;

  font-weight: 500;

  letter-spacing: -0.16px;

  text-transform: uppercase;

}

.about-wrapper-3 .client-info p b {

  font-weight: 500;

  display: block;

}

.about-wrapper-3 .about-btn {

  display: flex;

  align-items: center;

  gap: 40px;

  margin-top: 50px;

}

@media (max-width: 1199px) {

  .about-wrapper-3 .about-btn {

    flex-wrap: wrap;

    gap: 20px;

  }

}

@media (max-width: 767px) {

  .about-wrapper-3 .about-btn {

    margin-top: 30px;

  }

}

.about-wrapper-3 .about-btn .awrd-text {

  display: flex;

  align-items: center;

  gap: 10px;

}

.about-wrapper-3 .about-btn .content h4 {

  color: var(--white);

  font-size: 16px;

  font-weight: 600;

  text-transform: uppercase;

  font-family: "Kanit", sans-serif;

}

.about-wrapper-3 .about-btn .content span {

  color: #888;

  font-size: 16px;

  font-weight: 400;

  text-transform: uppercase;

}



.about-inner-wrapper .about-head {

  display: flex;

  align-items: center;

  gap: 160px;

  justify-content: center;

}

@media (max-width: 1199px) {

  .about-inner-wrapper .about-head {

    flex-wrap: wrap;

    gap: 30px;

  }

}

.about-inner-wrapper .about-head h1 {

  display: flex;

  align-items: center;

  color: #FFF;

  font-size: 100px;

  font-weight: 700;

  text-transform: uppercase;

}

@media (max-width: 767px) {

  .about-inner-wrapper .about-head h1 {

    font-size: 80px;

  }

}

@media (max-width: 575px) {

  .about-inner-wrapper .about-head h1 {

    font-size: 65px;

  }

}

@media (max-width: 1199px) {

  .about-inner-wrapper .about-head h1 img {

    display: none;

  }

}

.about-inner-wrapper .about-head p i {

  color: var(--theme);

  margin-right: 8px;

}



.about-section-inner {

  padding: 150px 0 150px;

}

.about-section-inner .about-head {

  border-bottom: 1px solid rgba(255, 255, 255, 0.2);

  padding-bottom: 40px;

}

.about-section-inner .about-sub {

  color: var(--white);

  font-size: 50px;

  font-weight: 700;

  line-height: 140%;

  text-transform: uppercase;

  text-align: center;

  margin-top: 50px;

}

@media (max-width: 991px) {

  .about-section-inner .about-sub {

    font-size: 39px;

  }

}

@media (max-width: 575px) {

  .about-section-inner .about-sub {

    font-size: 34px;

  }

}

@media (max-width: 470px) {

  .about-section-inner .about-sub {

    font-size: 30px;

  }

}

.about-section-inner .about-sub b {

  color: var(--theme);

  font-weight: 700;

}

.about-section-inner .about-sub span {

  color: #888;

  font-weight: 700;

}

.about-section-inner .about-image {

  margin-top: 70px;

  border-radius: 10px;

}

.about-section-inner .about-image img {

  width: 100%;

  height: 100%;

  border-radius: 10px;

}



.about-counter-box {

  border-radius: 6px;

  border: 1px solid rgba(255, 255, 255, 0.2);

  background: #060606;

  padding: 30px;

  position: relative;

}

.about-counter-box .client-info {

  position: absolute;

  top: 50px;

  right: 30px;

}

.about-counter-box h2 {

  color: #888;

  font-size: 100px;

  font-weight: 800;

  position: relative;

  line-height: 1;

  display: inline-block;

}

.about-counter-box h2 sub {

  font-size: 60px;

  font-weight: 400;

  position: absolute;

  right: -25px;

  bottom: 35px;

}

.about-counter-box p {

  color: #888;

  font-size: 16px;

  font-weight: 400;

  text-transform: uppercase;

  margin-top: 20px;

}

.about-counter-box .icon {

  position: absolute;

  top: 50px;

  right: 30px;

}

.about-counter-box:hover h2 {

  color: var(--white);

}



.about-wrapper-4 .about-thumb {

  margin-left: 20px;

  position: relative;

}

@media (max-width: 1199px) {

  .about-wrapper-4 .about-thumb {

    margin-left: 0;

  }

}

.about-wrapper-4 .about-thumb .thumb-shape1 {

  width: 335px;

  height: 481px;

  border-radius: 100px;

  background-color: var(--header);

  position: absolute;

  left: 0;

  z-index: 1;

}

@media (max-width: 1199px) {

  .about-wrapper-4 .about-thumb .thumb-shape1 {

    display: none;

  }

}

@media (max-width: 767px) {

  .about-wrapper-4 .about-thumb .thumb-shape1 {

    left: 0;

    top: -60px;

  }

}

.about-wrapper-4 .about-thumb .thumb-shape2 {

  width: 335px;

  height: 481px;

  border-radius: 100px;

  background: #F1F1F1;

  position: absolute;

  left: 100px;

  z-index: 2;

}

@media (max-width: 1399px) {

  .about-wrapper-4 .about-thumb .thumb-shape2 {

    left: 50px;

  }

}

@media (max-width: 1199px) {

  .about-wrapper-4 .about-thumb .thumb-shape2 {

    display: none;

  }

}

@media (max-width: 767px) {

  .about-wrapper-4 .about-thumb .thumb-shape2 {

    left: 0;

    top: -30px;

  }

}

.about-wrapper-4 .about-thumb .thumb {

  position: relative;

  display: inline-block;

  margin-left: 200px;

  z-index: 5;

}

@media (max-width: 1399px) {

  .about-wrapper-4 .about-thumb .thumb {

    margin-left: 150px;

  }

}

@media (max-width: 1199px) {

  .about-wrapper-4 .about-thumb .thumb {

    margin-left: 0;

    display: block;

  }

}

@media (max-width: 991px) {

  .about-wrapper-4 .about-thumb .thumb {

    height: 600px;

  }

}

@media (max-width: 575px) {

  .about-wrapper-4 .about-thumb .thumb {

    height: 500px;

  }

}

.about-wrapper-4 .about-thumb .thumb img {

  border-radius: 100px;

}

@media (max-width: 1199px) {

  .about-wrapper-4 .about-thumb .thumb img {

    width: 100%;

    height: 100%;

    object-fit: cover;

  }

}

.about-wrapper-4 .about-content {

  margin-left: 60px;

}

@media (max-width: 991px) {

  .about-wrapper-4 .about-content {

    margin-left: 0;

  }

}

.about-wrapper-4 .about-content h2 {

  font-size: 90px;

  color: var(--header);

}

@media (max-width: 1199px) {

  .about-wrapper-4 .about-content h2 {

    font-size: 80px;

  }

}

@media (max-width: 767px) {

  .about-wrapper-4 .about-content h2 {

    font-size: 70px;

  }

}

@media (max-width: 575px) {

  .about-wrapper-4 .about-content h2 {

    font-size: 50px;

  }

}

.about-wrapper-4 .about-content h3 {

  font-size: 20px;

  font-weight: 400;

  color: var(--header);

  text-transform: lowercase;

  margin-top: 30px;

  font-family: "Kanit", sans-serif;

  line-height: 165%;

  max-width: 640px;

}

.about-wrapper-4 .about-content .about-btn {

  padding-top: 50px;

}

.about-wrapper-4 .about-content .about-btn ul {

  display: flex;

  flex-wrap: wrap;

  gap: 10px;

}

.about-wrapper-4 .about-content .about-btn ul li {

  padding: 9px 20px;

  color: var(--header);

  text-align: center;

  font-family: "Big Shoulders Display", sans-serif;

  font-size: 30px;

  font-style: normal;

  font-weight: 500;

  line-height: normal;

  text-transform: uppercase;

  display: inline-block;

  border-radius: 100px;

  border: 1px solid #1E1E1E;

  transition: all 0.4s ease-in-out;

}

@media (max-width: 1899px) {

  .about-wrapper-4 .about-content .about-btn ul li {

    font-size: 20px;

  }

}

.about-wrapper-4 .about-content .about-btn ul li:hover {

  background-color: var(--theme);

  color: var(--black);

}



.video-banner-4 {

  height: 100vh;

  position: relative;

  display: flex;

  align-items: center;

  justify-content: center;

}

@media (max-width: 1199px) {

  .video-banner-4 {

    height: initial;

    padding: 100px 0;

  }

}

.video-banner-4 .image-wrapper {

  width: 500px;

  height: 650px;

  position: relative;

  display: flex;

  align-items: center;

  justify-content: center;

}

@media (max-width: 1199px) {

  .video-banner-4 .image-wrapper {

    width: 100%;

    height: 700px;

  }

}

@media (max-width: 575px) {

  .video-banner-4 .image-wrapper {

    height: 500px;

  }

}

.video-banner-4 .image-wrapper .video {

  text-align: center;

  position: absolute;

  top: 50%;

  left: 50%;

  transform: translate(-50%, -50%);

}

.video-banner-4 .image-wrapper .video .video-btn {

  width: 78px;

  height: 78px;

  line-height: 78px;

  text-align: center;

  border-radius: 140px;

  background-color: var(--white);

  color: #121212;

  display: inline-block;

  text-align: center;

  font-size: 18px;

}

.video-banner-4 .image-wrapper .video .video-btn:hover {

  background-color: var(--theme);

}

.video-banner-4 .image-wrapper .video .circle-image {

  position: absolute;

  left: 50%;

  transform: translate(-50%, -50%);

  top: 50%;

  display: none;

}

.video-banner-4 .image-wrapper .video .circle-image img {

  animation: cir36 10s linear infinite;

}

.video-banner-4 .image-wrapper img {

  width: 100%;

  height: 100%;

  object-fit: cover;

  min-height: 650px;

  display: block;

}



.about-text-4 {

  font-size: 24px;

  text-transform: uppercase;

  line-height: 200%;

  color: #888;

  font-weight: 500;

  border-top: 1px solid rgba(255, 255, 255, 0.2);

  padding-top: 50px;

  margin-top: 48px;

}

@media (max-width: 1399px) {

  .about-text-4 {

    font-size: 18px;

    margin-top: 30px;

    padding-top: 30px;

  }

}



.marquee-wrapper {

  display: flex;

  width: fit-content;

  animation: scroll-left 25s linear infinite;

}



.marquee-content {

  display: flex;

}



.marquee-text {

  display: flex;

  align-items: center;

  gap: 20px;

  margin: 0 15px;

  white-space: nowrap;

}

.marquee-text h2 {

  color: #060606;

  font-size: 32px;

  font-weight: 500;

}



@keyframes scroll-left {

  0% {

    transform: translateX(0%);

  }

  100% {

    transform: translateX(-50%);

  }

}

.choose-us-section {

  background-color: #1A1A1A;

  margin: 0 60px;

  border-radius: 20px;

  position: relative;

  z-index: 9;

}

@media (max-width: 1600px) {

  .choose-us-section {

    margin: 0 30px;

    padding-left: 15px !important;

    padding-right: 15px !important;

  }

}

@media (max-width: 1199px) {

  .choose-us-section {

    margin: 0 20px;

    padding-left: 15px !important;

    padding-right: 15px !important;

  }

}



.choose-us-wrapper {

  margin-top: 60px;

}

@media (max-width: 767px) {

  .choose-us-wrapper {

    margin-top: 30px;

  }

}

.choose-us-wrapper .choose-us-box-list li {

  display: flex;

  align-items: center;

  justify-content: space-between;

  border-top: 1px solid rgba(255, 255, 255, 0.2);

  padding: 25px 0;

}

@media (max-width: 1199px) {

  .choose-us-wrapper .choose-us-box-list li {

    padding: 25px;

    flex-wrap: wrap;

    gap: 20px;


    border-radius: 25px;

    margin-bottom: 25px;

    text-align: center;

    justify-content: center;

  }

}

.choose-us-wrapper .choose-us-box-list li .content h2 {

    font-size: 40px;

    font-weight: 500;

    text-transform: capitalize;

    letter-spacing: 0;

    margin-bottom: 15px;

}

.choose-us-wrapper .choose-us-box-list li .content h2 a {

  color: var(--theme2);

}

@media (max-width: 1199px) {

  .choose-us-wrapper .choose-us-box-list li .content h2 {

    font-size: 35px;

  }

    .choose-us-wrapper .choose-us-box-list li .content h2 br{

        display: none;

    }

}

@media (max-width: 767px) {

  .choose-us-wrapper .choose-us-box-list li .content h2 {

    font-size: 38px;

  }

}

@media (max-width: 575px) {

  .choose-us-wrapper .choose-us-box-list li .content h2 {

    font-size: 35px;

  }

}

@media (max-width: 470px) {

  .choose-us-wrapper .choose-us-box-list li .content h2 {

    font-size: 30px;

  }

    

}

.choose-us-wrapper .choose-us-box-list li .content p {

  max-width: 475px;

}

.choose-us-wrapper .choose-us-box-list li .arrow-icon {

  display: inline-block;

  border-radius: 100px;

  border: 1.5px solid rgba(255, 255, 255, 0.2);

  width: 48px;

  height: 48px;

  line-height: 48px;

  text-align: center;

  border-radius: 50%;

  color: var(--theme);

}

.choose-us-wrapper .choose-us-box-list li:hover .content h2 a {

  color: var(--white);

}

.choose-us-wrapper .choose-us-box-list li:hover .arrow-icon {

  background-color: var(--theme);

  color: var(--black);

}

.choose-us-wrapper .choose-us-image {

  margin-left: 20px;

}

@media (max-width: 1199px) {

  .choose-us-wrapper .choose-us-image {

    margin-left: 0;

  }

}

.choose-us-wrapper .choose-us-image img {

  width: 100%;

  height: 100%;

}



.video-wrapper {

  text-align: center;

  position: relative;

}

.video-wrapper .video-thumb {

  position: relative;

}

@media (max-width: 767px) {

  .video-wrapper .video-thumb {

    height: 500px;

  }

  .video-wrapper .video-thumb img {

    object-fit: cover;

  }

}

.video-wrapper .video-thumb img {

    width: 100%;
    height: 400px;
    object-fit: cover;
    border-radius: 45px 25px;

}
.about-content p{
    color: #041f78;
}
.video-wrapper .video {

  text-align: center;

  position: absolute;

  top: 50%;

  left: 50%;

  transform: translate(-50%, -50%);

}

.video-wrapper .video .video-btn {

  width: 78px;

  height: 78px;

  line-height: 78px;

  text-align: center;

  border-radius: 140px;

  background-color: var(--white);

  color: #121212;

  display: inline-block;

  text-align: center;

  font-size: 18px;

}

.video-wrapper .video .video-btn:hover {

  background-color: var(--theme);

}

.video-wrapper .video .circle-image {

  position: absolute;

  left: 50%;

  transform: translate(-50%, -50%);

  top: 50%;

  display: none;

}

.video-wrapper .video .circle-image img {

  animation: cir36 10s linear infinite;

}

.video-wrapper .text-tansprot {

  text-align: center;

  -webkit-text-stroke-width: 1px;

  -webkit-text-stroke-color: rgba(191, 247, 71, 0.8);

  font-size: 160px;

  font-weight: 700;

  display: inline-block;

  line-height: 1;

  letter-spacing: -4.8px;

  text-transform: uppercase;

  color: transparent;

  margin-top: 150px;

}



.award-wrapper .award-content {

  margin-top: 60px;

}

@media (max-width: 767px) {

  .award-wrapper .award-content {

    margin-top: 30px;

  }

}

.award-wrapper .award-content ul {

  border-top: 1px solid rgba(255, 255, 255, 0.2);

  padding-top: 30px;

}

.award-wrapper .award-content ul li {

  display: flex;

  align-items: center;

  gap: 80px;

}

.award-wrapper .award-content .award-list-items {

  display: flex;

  align-items: center;

  gap: 85px;

}

@media (max-width: 1199px) {

  .award-wrapper .award-content .award-list-items {

    gap: 40px;

  }

}

.award-wrapper .award-content .award-list-items.bb-bottom span {

  border-bottom: 1px solid rgba(255, 255, 255, 0.2);

}

.award-wrapper .award-content .award-list-items span {

  width: 100%;

  display: inline-block;

  border-top: 1px solid rgba(255, 255, 255, 0.2);

  padding: 30px 0;

}
.award-section-2 h2{
    color: #fff;
}
.award-section-2 .choose-us-wrapper .choose-us-box-list li .content h2 a{
    color: #fff;
}
@media (max-width: 1199px) {

  .award-wrapper .award-image img {

    width: 100%;

    height: 100%;

  }

}



.award-section-2 {

  position: relative;

}

.award-section-2 .award-image {

  position: absolute;

  bottom: 0;

  left: 65%;

  transform: translateX(-50%);

}

@media (max-width: 991px) {

  .award-section-2 .award-image {

    display: none;

  }

}

.award-section-2 .circle-box {

  display: inline-block;

  width: 182px;

  height: 182px;

  line-height: 182px;

  text-align: center;

  border-radius: 50%;

  background-color: #060606;

  position: absolute;

  right: 20%;

  top: 40%;

}

@media (max-width: 991px) {

  .award-section-2 .circle-box {

    display: none;

  }

}

.award-section-2 .circle-box .text-image {

  text-align: center;

}

.award-section-2 .circle-box .text-image img {

  animation: cir36 10s linear infinite;

}

.award-section-2 .circle-box .icon {

  position: absolute;

  top: 50%;

  left: 50%;

  transform: translate(-50%, -50%);

  display: inline-block;

  width: 56px;

  height: 56px;

  line-height: 56px;

  border-radius: 50%;

  background-color: var(--theme);

  color: var(--black);

}



.build-impactful-section .build-text span {

  color: var(--theme);

}



.build-content {

  margin-top: 0px;

  max-width: 1370px;

}

.build-content h2 {

  color: var(--text);

  font-size: 50px;
    font-weight: 700;
  text-align: center;

}

@media (max-width: 1600px) {

  .build-content h2 {

    font-size: 40px;

    line-height: 140%;

  }

}

@media (max-width: 1199px) {

  .build-content h2 {

    font-size: 36px;

  }

}

@media (max-width: 991px) {

  .build-content h2 {

    font-size: 32px;

  }

}

@media (max-width: 767px) {

  .build-content h2 {

    font-size: 26px;

  }

}

@media (max-width: 575px) {

  .build-content h2 {

    font-size: 24px;

  }

}

@media (max-width: 470px) {

  .build-content h2 {

    font-size: 22px;

  }

}

.build-content h2 span {

  color: var(--white);

}

.build-content .build-bottom-items {

  display: flex;

  align-items: center;

  gap: 80px;

  justify-content: center;

  margin-top: 32px;

}

@media (max-width: 1199px) {

  .build-content .build-bottom-items {

    margin-top: 50px;

    flex-wrap: wrap;

    gap: 30px;

  }

}

@media (max-width: 991px) {

  .build-content .build-bottom-items {

    margin-top: 40px;

  }

}

@media (max-width: 767px) {

  .build-content .build-bottom-items {

    margin-top: 30px;

  }

}

@media (max-width: 575px) {

  .build-content .build-bottom-items {

    margin-top: 25px;

  }

}

.build-content .build-bottom-items .client-info {

  display: flex;

  align-items: center;

  gap: 20px;

}

.build-content .build-bottom-items .award-info {

  display: flex;

  align-items: center;

  gap: 20px;

}

.build-content .build-bottom-items .award-info p span {

  color: var(--white);

}

.content h2{

    font-size: 32px;

    text-transform: inherit;

    font-weight: 500;

}

.choose-us-box-items-2 {

  display: flex;

  align-items: center;

  justify-content: space-between;

  margin-top: 30px;

  border-top: 1px solid rgba(255, 255, 255, 0.2);

  padding-top: 20px;

  background-color: #1A1A1A;

}

.choose-us-box-items-3 {

    display: block;

    align-items: center;

    justify-content: space-between;

    margin-top: 30px;

    border-top: 1px solid rgba(255, 255, 255, 0.2);

    padding: 30px 40px;

    text-align: center;

    background-color: #011454;

}

@media (max-width: 1199px) {

  .choose-us-box-items-2 {

    display: block;

  }

}

.choose-us-box-items-2 .choose-content {
    display: flex;
    align-items: center;
    gap: 150px;
    width: 790px;
    justify-content: space-between;
}

@media (max-width: 1399px) {

  .choose-us-box-items-2 .choose-content {

    gap: 30px;

  }

}

@media (max-width: 1199px) {

  .choose-us-box-items-2 .choose-content {

    margin-bottom: 30px;

    flex-wrap: wrap;

    justify-content: center;
width: auto;
    text-align: center;

  }

  .choose-us-box-items-2 .choose-content br {

    display: none;

  }

}

.choose-us-box-items-2 .choose-content .content h2 {

  font-size: 38px;

  transition: all 0.4s ease-in-out;

  margin-bottom: 10px;

}

.choose-us-box-items-3 .choose-content .content h2 {

    transition: all 0.4s ease-in-out;

    margin-bottom: 10px;

}

.choose-us-box-items-2 .choose-content .content h2 a {

  color: var(--text);

}

@media (max-width: 1399px) {

  .choose-us-box-items-2 .choose-content .content h2 {

    font-size: 44px;

  }

}

@media (max-width: 1199px) {

  .choose-us-box-items-2 .choose-content .content h2 {

    font-size: 40px;

  }

}

@media (max-width: 991px) {

  .choose-us-box-items-2 .choose-content .content h2 {

    font-size: 36px;

  }

}

@media (max-width: 767px) {

  .choose-us-box-items-2 .choose-content .content h2 {

    font-size: 42px;

  }

}

@media (max-width: 575px) {

  .choose-us-box-items-2 .choose-content .content h2 {

    font-size: 34px;

  }

}

@media (max-width: 470px) {

  .choose-us-box-items-2 .choose-content .content h2 {

    font-size: 28px;

  }

}

.choose-us-box-items-2 .choose-content .content h2:hover {

  color: var(--white);

}

.choose-us-box-items-2 .choose-content .arrow-icon {

  display: inline-block;

  border-radius: 100px;

  border: 1.5px solid rgba(255, 255, 255, 0.2);

  width: 48px;

  height: 48px;

  line-height: 48px;

  text-align: center;

  border-radius: 50%;

  color: var(--theme);

}

.choose-us-box-items-2 .choose-content .arrow-icon:hover {

  background-color: var(--theme);

  color: var(--black);

}

.choose-us-box-items-2 .choose-image img {

  width: 100%;

  height: 100%;

  border-radius: 6px;

}



.choose-us-section-2 {

  border-radius: 20px;

  margin: 30px;

  margin-top: 0;

  margin-bottom: 0;

}



.choose-us-section-2 .section-title-area .section-title h2  {

  color: var(--theme);

}

.skill-section-2 .section-title-area h2 span {

  color: var(--theme);

}

.skill-section-2 p {

  text-align: center;

  margin-top: 60px;

}

.skill-section-2 p a {

  color: var(--theme);

  text-decoration-line: underline;

}



.skill-box-items-2 {

  text-align: center;

  border-radius: 10px;

  border: 1px solid rgba(255, 255, 255, 0.2);

  background: #060606;

  padding: 40px;

  margin-top: 30px;

  position: relative;

  z-index: 9;

}
.skill-box-items-2 .icon img{
    width: 80px;
}
.skill-box-items-2 h4{
	margin-top: 15px;
	font-size: 28px;
    text-transform: capitalize;
}
.skill-box-items-2::before {

  position: absolute;

  content: "";

  top: 0;

  left: 0;

  width: 0;

  height: 0;

  border-top: 1px solid var(--theme);

  border-left: 1px solid var(--theme);

  transition: 0.5s;

  opacity: 0;

  visibility: hidden;

  border-radius: 10px;

  z-index: -1;

}

.skill-box-items-2::after {

  position: absolute;

  content: "";

  bottom: 0;

  right: 0;

  width: 0;

  height: 0;

  border-bottom: 1px solid var(--theme);

  border-right: 1px solid var(--theme);

  transition: 0.5s;

  opacity: 0;

  visibility: hidden;

  border-radius: 10px;

  z-index: -1;

}

.skill-box-items-2:hover::before {

  width: 100%;

  height: 100%;

  visibility: visible;

  opacity: 1;

}

.skill-box-items-2:hover::after {

  width: 100%;

  height: 100%;

  visibility: visible;

  opacity: 1;

}

.skill-box-items-2 p {

  line-height: 25px;
    font-size: 15px;
    font-weight: 500;
    margin-top: 20px;
    min-height: 125px;
    color: #fff;

}

.skill-box-items-2 h2 {

  font-size: 50px;

  font-weight: 500;

  margin-top: 0px;
text-transform: capitalize;
  color: #071a5a;

}

.skill-box-items-2 .progress {

  position: relative;

  height: 4px;

  background: rgba(136, 136, 136, 0.3);

  border-radius: 0;

  overflow: visible;

  border-radius: 22px;

  margin-top: 20px;

}

.skill-box-items-2 .progress-bar {

  background-color: #888888;

  height: 4px;

  border-radius: 22px;

  margin: 0;

  border-radius: inherit;

  overflow: visible;

  position: relative;

  margin-top: 0;

  transition: all 0.4s ease-in-out;

}

.skill-box-items-2:hover p {

  color: #071a5a;

}

.skill-box-items-2:hover .progress-bar {

  background-color: var(--theme);

}



.brand-section-2 {

  padding: 10px 0;

}



.work-process-section-2 .section-title-area h2 {

  font-size: 50px;

}

@media (max-width: 1399px) {

  .work-process-section-2 .section-title-area h2 {

    font-size: 44px;

  }

}

@media (max-width: 1199px) {

  .work-process-section-2 .section-title-area h2 {

    font-size: 40px;

  }

  .work-process-section-2 .section-title-area h2 br {

    display: none;

  }

}

@media (max-width: 991px) {

  .work-process-section-2 .section-title-area h2 {

    font-size: 36px;

  }

}

@media (max-width: 767px) {

  .work-process-section-2 .section-title-area h2 {

    font-size: 42px;

  }

}

@media (max-width: 575px) {

  .work-process-section-2 .section-title-area h2 {

    font-size: 34px;

  }

}

.work-process-section-2 .section-title-area h2 span {

  color: var(--theme);

}



@media (max-width: 1399px) {

  .about-section-3 {

    overflow: hidden;

  }

}



.service-list-items-3 {

  margin-bottom: 50px;

}

@media (max-width: 767px) {

  .service-list-items-3 {

    margin-bottom: 30px;

    margin-top: 30px;

  }

}

.service-list-items-3 li {

  border-radius: 10px;

  background: #1A1A1A;

  padding: 20px 30px;

  display: flex;

  align-items: center;

  justify-content: space-between;

  position: relative;

  z-index: 9;

}

@media (max-width: 767px) {

  .service-list-items-3 li {

    flex-wrap: wrap;

    gap: 20px;

  }

}

.service-list-items-3 li::before {

  position: absolute;

  top: 0;

  left: 0;

  content: "";

  border-radius: 30px 0 0 30px;

  background: #BFF747;

  width: 7px;

  height: 100%;

  transition: all 0.4s ease-in-out;

  z-index: -1;

}

.service-list-items-3 li:not(:last-child) {

  margin-bottom: 20px;

}

.service-list-items-3 li .icon-items {

  display: flex;

  align-items: center;

  gap: 20px;

  flex-basis: 45%;

}

@media (max-width: 767px) {

  .service-list-items-3 li .icon-items {

    flex-basis: initial;

  }

}

.service-list-items-3 li .icon-items h3 {

  color: var(--white);

  font-size: 24px;

  font-weight: 700;

  text-transform: uppercase;

}

.service-list-items-3 li .icon-items .icon {

  filter: invert(56%) sepia(0%) saturate(0%) hue-rotate(182deg) brightness(94%) contrast(89%);

  transition: all 0.4s ease-in-out;

}

.service-list-items-3 li .service-image img {

  border-radius: 100px;

}

@media (max-width: 1199px) {

  .service-list-items-3 li .service-image img {

    width: 100%;

  }

}

.service-list-items-3 li .arrow-icon {

  display: inline-block;

  width: 40px;

  height: 40px;

  border-radius: 50%;

  line-height: 40px;

  text-align: center;

  border: 1.5px solid rgba(255, 255, 255, 0.2);

  color: var(--theme);

}

.service-list-items-3 li:hover .arrow-icon {

  background: #060606;

}

.service-list-items-3 li:hover::before {

  width: 100%;

  border-radius: 10px;

}

.service-list-items-3 li:hover .icon-items .icon {

  filter: initial;

}

.service-list-items-3 li:hover h3 {

  color: #060606;

}



.work-experience-section-3 {

  padding: 50px 30px 12px;

  position: relative;

  background-repeat: no-repeat;

  background-size: cover;

  border-radius: 10px;

}

@media (max-width: 575px) {

  .work-experience-section-3 {

    background-image: none !important;

    background-color: #1A1A1A;

  }

}

.work-experience-section-3 .sub-title {

  color: var(--theme);

  font-family: "Kanit", sans-serif;

  font-size: 16px;

  font-weight: 400;

  text-transform: uppercase;

  display: flex;

  align-items: center;

  gap: 10px;

  position: absolute;

  top: 0;

  left: 78px;

}

@media (max-width: 575px) {

  .work-experience-section-3 .sub-title {

    position: static;

  }

}

.work-experience-section-3 h2 {

  margin-top: 10px;

}

@media (max-width: 767px) {

  .work-experience-section-3 .work-experience-list-items {

    margin-top: 30px;

  }

}

.work-experience-section-3 .work-experience-list-items li {

  display: flex;

  align-items: center;

  justify-content: space-between;

  padding: 30px 0;

}

@media (max-width: 1199px) {

  .work-experience-section-3 .work-experience-list-items li {

    flex-wrap: wrap;

    gap: 30px;

    justify-content: start;

  }

}

.work-experience-section-3 .work-experience-list-items li .title {

  color: #888;

  font-size: 20px;

  font-weight: 700;

  text-transform: uppercase;

  flex-basis: 28%;

}

@media (max-width: 1199px) {

  .work-experience-section-3 .work-experience-list-items li .title {

    flex-basis: initial;

  }

}

.work-experience-section-3 .work-experience-list-items li .text-1 {

  flex-basis: 23%;

}

@media (max-width: 1199px) {

  .work-experience-section-3 .work-experience-list-items li .text-1 {

    flex-basis: initial;

  }

}

.work-experience-section-3 .work-experience-list-items li .text-2 {

  font-size: 14px;

  font-weight: 500;

  flex-basis: 22%;

}

@media (max-width: 1199px) {

  .work-experience-section-3 .work-experience-list-items li .text-2 {

    flex-basis: initial;

  }

}

.work-experience-section-3 .work-experience-list-items li:not(:last-child) {

  border-bottom: 1px solid rgba(255, 255, 255, 0.2);

}

.work-experience-section-3 .work-experience-list-items li:hover .title, .work-experience-section-3 .work-experience-list-items li:hover .text-1, .work-experience-section-3 .work-experience-list-items li:hover .text-2 {

  color: var(--theme);

}



.video-banner-section {

  position: relative;

  text-align: center;

  margin-top: 60px;

  z-index: 9;

  margin-bottom: 60px;

}

.video-banner-section .video-image1 {

  position: relative;

  overflow: hidden;

  border-radius: 10px;

  z-index: 9;

}

.video-banner-section .video-image1 img {

  width: 100%;

  height: 100%;

  border-radius: 10px;

}

.video-banner-section .video-image1 .ripple::before, .video-banner-section .video-image1 .ripple::after {

  width: 54px;

  height: 54px;

}

.video-banner-section .video-btn {

  display: inline-block;

  width: 54px;

  height: 54px;

  line-height: 54px;

  text-align: center;

  border-radius: 50%;

  background-color: var(--white);

  color: #121212;

  top: 50%;

  left: 50%;

  text-align: center;

  transform: translate(-50%, -50%);

  position: absolute;

}

.video-banner-section .video-btn:hover {

  background-color: var(--theme);

}

.video-banner-section .reels-title {

  position: absolute;

  top: 50%;

  left: 50%;

  text-align: center;

  transform: translate(-50%, -50%);

  -webkit-text-stroke-width: 1px;

  -webkit-text-stroke-color: rgba(255, 255, 255, 0.25);

  font-size: 200px;

  font-weight: 900;

  letter-spacing: 40px;

  text-transform: uppercase;

  color: transparent;

  margin-left: 25px;

}

@media (max-width: 1199px) {

  .video-banner-section .reels-title {

    display: none;

  }

}



.work-achievements-section {

  position: relative;

  padding: 70px 30px 40px;

  background-repeat: no-repeat;

  background-size: cover;

  border-radius: 10px;

}

@media (max-width: 575px) {

  .work-achievements-section {

    background-image: none !important;

    background-color: #1A1A1A;

  }

}

.work-achievements-section .sub-title {

  font-family: "Kanit", sans-serif;

  font-size: 16px;

  font-weight: 400;

  text-transform: uppercase;

  display: flex;

  align-items: center;

  gap: 10px;

  position: absolute;

  top: 0;

  left: 80px;

  color: #888;

}

@media (max-width: 575px) {

  .work-achievements-section .sub-title {

    position: static;

    margin-bottom: 10px;

  }

}

.work-achievements-section .sub-title b {

  color: var(--theme);

}

.work-achievements-section .section-title-2 {

  display: flex;

  align-items: center;

  gap: 20px;

}

@media (max-width: 767px) {

  .work-achievements-section ul {

    margin-top: 30px;

  }

}

.work-achievements-section ul li {

  display: flex;

  gap: 85px;

}

@media (max-width: 767px) {

  .work-achievements-section ul li {

    gap: 50px;

  }

}

.work-achievements-section ul li:not(:last-child) .text {

  padding-bottom: 25px;

  margin-bottom: 25px;

  border-bottom: 1px solid rgba(255, 255, 255, 0.2);

}

.work-achievements-section ul li .year {

  color: #888;

  font-size: 16px;

  font-weight: 400;

  transition: all 0.4s ease-in-out;

}

.work-achievements-section ul li .text {

  color: #888;

  font-size: 16px;

  font-weight: 400;

  text-transform: uppercase;

  width: 100%;

  transition: all 0.4s ease-in-out;

}

.work-achievements-section ul li:hover .year, .work-achievements-section ul li:hover .text {

  color: var(--theme);

}

.work-achievements-section ul li:hover:not(:last-child) .text {

  border-bottom: 1px solid rgb(255, 255, 255);

}



.build-impactful-wrapper {

  border-bottom: 1px solid rgba(255, 255, 255, 0.2);

  padding-bottom: 120px;

}

@media (max-width: 1199px) {

  .build-impactful-wrapper {

    padding-bottom: 100px;

  }

}

@media (max-width: 991px) {

  .build-impactful-wrapper {

    padding-bottom: 80px;

  }

}



.faq-items {

  padding-right: 80px;

}

@media (max-width: 1399px) {

  .faq-items {

    padding-right: 0;

  }

}

.faq-items .accordion-box {

  position: relative;

  margin-top: 40px;

}

.faq-items .accordion-box .block {

  position: relative;

  background-color: transparent;

  border-bottom: 1px solid rgba(255, 255, 255, 0.2);

  line-height: 1;

  padding-bottom: 38px;

  margin-bottom: 38px;

}

.faq-items .accordion-box .block .acc-btn {

  position: relative;

  font-size: 26px;

  color: #888;

  font-weight: 500;

  cursor: pointer;

  -webkit-transition: all 500ms ease;

  transition: all 500ms ease;

  text-transform: uppercase;

  font-family: "Big Shoulders Display", sans-serif;

}

@media (max-width: 575px) {

  .faq-items .accordion-box .block .acc-btn {

    font-size: 22px;

    line-height: 1.6;

    padding-right: 70px;

  }

}

.faq-items .accordion-box .block .acc-btn .icon {

  position: absolute;

  right: 0;

  top: -7px;

  height: 45px;

  width: 45px;

  font-size: 18px;

  line-height: 45px;

  text-align: center;

  border-radius: 50%;

  color: var(--header);

  -webkit-transition: all 500ms ease;

  transition: all 500ms ease;

  border: 1px solid rgba(255, 255, 255, 0.2);

}

.faq-items .accordion-box .block .acc-content {

  position: relative;

  display: none;

  margin-top: 22px;

}

@media (max-width: 470px) {

  .faq-items .accordion-box .block .acc-content {

    margin-top: 10px;

  }

}

.faq-items .accordion-box .block .acc-content .content {

  position: relative;

  max-width: 570px;

}

.faq-items .accordion-box .block .acc-content .content .text {

  line-height: 150%;

  font-size: 16px;

  font-weight: 400;

  color: #888;

}

@media (max-width: 1199px) {

  .faq-items .accordion-box .block .acc-content .content .text {

    font-size: 14px;

  }

}

@media (max-width: 470px) {

  .faq-items .accordion-box .block .acc-content .content .text {

    font-size: 13px;

  }

}

.faq-items .accordion-box .block .acc-content.current {

  display: block;

}

.faq-items .accordion-box .block .acc-btn.active .icon:before {

  content: "\f068";

  color: var(--theme);

}

.faq-items .accordion-box .block .acc-btn.active {

  color: var(--theme);

}

.faq-items .accordion-box .block:last-child {

  margin-bottom: 0;

}



.faq-content-items form {

  border-radius: 10px;

  background: #060606;

  padding: 38px 24px;

  margin-top: 40px;

}

.faq-content-items form .form-clt input, .faq-content-items form .form-clt textarea {

  outline: none;

  width: 100%;

  border-radius: 12px;

  border: 1px solid rgba(193, 193, 193, 0.16);

  background: transparent;

  text-transform: uppercase;

  padding: 18px 25px;

  line-height: 1;

  color: var(--text);

}

.faq-content-items form .form-clt textarea {

  padding-bottom: 100px;

}

.faq-content-items form .form-clt .budget-item {

  display: flex;

  align-items: center;

  gap: 30px;

}

@media (max-width: 1399px) {

  .faq-content-items form .form-clt .budget-item {

    flex-wrap: wrap;

    gap: 15px;

  }

}

.faq-content-items form .form-clt .budget-item h3 {

  color: var(--white);

  font-size: 16px;

  font-weight: 500;

  font-family: "Kanit", sans-serif;

  letter-spacing: 0.5px;

  text-transform: uppercase;

}

.faq-content-items form .form-clt .budget-item .budget-button {

  display: flex;

  align-items: center;

  gap: 8px;

}

@media (max-width: 1399px) {

  .faq-content-items form .form-clt .budget-item .budget-button {

    flex-wrap: wrap;

  }

}

.faq-content-items form .form-clt .budget-item .budget-button .budget-btn {

  display: inline-block;

  border-radius: 100px;

  border: 1px solid rgba(255, 255, 255, 0.2);

  color: #888;

  font-family: "Kanit", sans-serif;

  font-size: 14px;

  font-weight: 500;

  letter-spacing: 0.5px;

  text-transform: uppercase;

  padding: 8px 16px;

  line-height: 1;

  transition: all 0.4s ease-in-out;

}

.faq-content-items form .form-clt .budget-item .budget-button .budget-btn:hover {

  background-color: var(--theme);

  color: var(--black);

}

.faq-content-items form .form-clt .budget-item .budget-button .budget-btn.active {

  background-color: var(--theme);

  color: var(--black);

}



.work-experience-wrap1 .work-experience-feature-box {

  border-radius: 868px;

  background: #1A1A1A;

  max-width: 870px;

  margin: 0 auto;

  padding: 60px 100px;

  border-bottom-left-radius: 0;

  border-bottom-right-radius: 0;

}

.work-experience-wrap1 .work-experience-feature-box .info-img {

  text-align: center;

}

.work-experience-wrap1 .work-experience-feature-box .info-content {

  text-align: center;

  margin-top: 30px;

  border-bottom: 1px solid rgba(255, 255, 255, 0.2);

  padding-bottom: 30px;

  margin-bottom: 30px;

}

.work-experience-wrap1 .work-experience-feature-box .info-content h3 {

  color: var(--white);

  font-size: 36px;

  font-weight: 600;

  letter-spacing: 0.5px;

  text-transform: uppercase;

}

.work-experience-wrap1 .work-experience-feature-box .info-content span {

  color: var(--theme);

  font-size: 14px;

  font-weight: 500;

  text-transform: uppercase;

}



.work-process-section-2 .section-title-area {

  border-bottom: 1px solid rgba(255, 255, 255, 0.2);

  padding-bottom: 0px;

}



.tp-funfact-panel-wrap {

  width: 300%;

  height: 100%;

  display: flex;

}

@media (max-width: 1399px) {

  .tp-funfact-panel-wrap {

    gap: 30px;

  }

}

@media (max-width: 1199px) {

  .tp-funfact-panel-wrap {

    flex-wrap: wrap;

    width: 100%;

    gap: 0;

  }

}



.work-process-box-items-2 {

  margin-top: 30px;

  display: flex;

  align-items: center;

  gap: 30px;

}

@media (max-width: 991px) {

  .work-process-box-items-2 {

    flex-wrap: wrap;

  }

}

.work-process-box-items-2 .work-process-content {

  display: flex;

  gap: 15px;

}

.work-process-box-items-2 .work-process-content .number {

  color: var(--white);

  font-size: 100px;

  font-weight: 700;

  text-transform: uppercase;

  font-family: "Big Shoulders Display", sans-serif;

  line-height: 1;

}

@media (max-width: 1399px) {

  .work-process-box-items-2 .work-process-content .number {

    font-size: 70px;

  }

}

@media (max-width: 1199px) {

  .work-process-box-items-2 .work-process-content .number {

    font-size: 60px;

  }

}

@media (max-width: 767px) {

  .work-process-box-items-2 .work-process-content .number {

    font-size: 45px;

  }

}

@media (max-width: 575px) {

  .work-process-box-items-2 .work-process-content .number {

    font-size: 35px;

  }

}

.work-process-box-items-2 .work-process-content a.theme-btn {

    background-color: var(--theme);

    color: var(--black);

    margin-top: 10px;

}

.work-process-box-items-2 .work-process-content a.theme-btn::before {

    background-color: var(--theme2);

}

.work-process-box-items-2 .work-process-content h3 {

  font-size: 71px;

  font-weight: 700;

  color: #071a5a;

  line-height: 110%;

}

@media (max-width: 1399px) {

  .work-process-box-items-2 .work-process-content h3 {

    font-size: 70px;

  }

}

@media (max-width: 1199px) {

  .work-process-box-items-2 .work-process-content h3 {

    font-size: 60px;

  }

  .work-process-box-items-2 .work-process-content h3 br {

    display: none;

  }

}

@media (max-width: 767px) {

  .work-process-box-items-2 .work-process-content h3 {

    font-size: 45px;

  }

}

@media (max-width: 575px) {

  .work-process-box-items-2 .work-process-content h3 {

    font-size: 35px;

  }

}

.work-process-box-items-2 .work-process-content p {

	max-width: 450px;

	margin-top: 20px;
	font-size: 38px;
	line-height: 1;
	font-family: "Big Shoulders Display", sans-serif;
	color: #041f78;
	font-weight: 600;
    text-transform: inherit;
}

@media (max-width: 1199px) {

  .work-process-box-items-2 .work-process-content p {
font-size: 36px;
    margin-left: 0;

  }

}

.work-process-box-items-2 .work-process-image img {

  border-radius: 10px;

}

@media (max-width: 575px) {

  .work-process-box-items-2 .work-process-image img {

    width: 100%;

  }

}



.tp-funfact-panel {

  width: 100%;

  height: 100%;

  will-change: transform;

  opacity: 1 !important;

}



.work-process-box-area2 {

  padding-top: 50px;

}

@media (max-width: 1199px) {

  .work-process-box-area2 {

    text-align: center;

        padding: 10px 20px 30px;

        background-color: #f1f1f1;

        margin: 10px 0;

  }

}



.project-wrapper {

  padding-bottom: 150px;

}



.work-experience-section-1 {

  position: relative;

}

.work-experience-section-1 .line-shape {

  position: absolute;

  bottom: 0;

  left: 0;

  right: 0;

}

@media (max-width: 1199px) {

  .work-experience-section-1 .line-shape {

    display: none;

  }

}

.work-experience-section-1.style-2 .line-shape {

  bottom: 120px;

}

.work-experience-section-1.style-2 .arrow1 {

  position: absolute;

  top: 0;

  left: 90px;

}

@media (max-width: 1199px) {

  .work-experience-section-1.style-2 .arrow1 {

    display: none;

  }

}

.work-experience-section-1.style-2 .arrow2 {

  position: absolute;

  top: 0;

  right: 90px;

}

@media (max-width: 1199px) {

  .work-experience-section-1.style-2 .arrow2 {

    display: none;

  }

}



.feature-work-experience-wrap {

  height: 585px;

  position: relative;

}

.feature-work-experience-wrap::before {

  position: absolute;

  bottom: -80%;

  left: 49%;

  transform: translateX(-50%);

  height: 990px;

  width: 910px;

  border-radius: 50%;

  content: "";

  background: #1A1A1A;

}

@media (max-width: 991px) {

  .feature-work-experience-wrap::before {

    display: none;

  }

}



.feature-work-experience-preview-slider .swiper-wrapper {

  max-width: 1050px;

  height: 1050px;

  position: relative;

  margin: 0 auto;

}

.feature-work-experience-preview-slider .swiper-wrapper .swiper-slide {

  position: absolute;

  width: 100px;

  height: 100px;

}

.feature-work-experience-preview-slider .feature-work-experience-preview-slider-item {

  width: 60px;

  height: 60px;

  border-radius: 50%;

  transition: all 0.5s var(--cube-1);

  cursor: pointer;

  overflow: hidden;

}

.feature-work-experience-preview-slider .feature-work-experience-preview-slider-item:hover {

  border-color: var(--clr-pr-1);

}

.feature-work-experience-preview-slider .feature-work-experience-preview-slider-item img {

  width: 100%;

  height: 100%;

  object-fit: cover;

  border-radius: 50%;

}



.feature-work-experience-main-slider {

  position: absolute;

  top: 150px;

  left: 49%;

  transform: translateX(-50%);

  z-index: 2;

  max-width: 670px;

  width: 100%;

  /* Animation */

}

.feature-work-experience-main-slider .client-info-items {

  text-align: center;

}

.feature-work-experience-main-slider .client-info-items .info-content {

  margin-top: 30px;

  border-bottom: 1px solid rgba(255, 255, 255, 0.2);

  padding-bottom: 30px;

  margin-bottom: 30px;

}

.feature-work-experience-main-slider .client-info-items .info-content h3 {

  color: var(--white);

  font-size: 36px;

  font-weight: 600;

  letter-spacing: 0.5px;

  text-transform: uppercase;

  line-height: 1;

}

.feature-work-experience-main-slider .client-info-items .info-content span {

  color: #BFF747;

  text-align: center;

  font-size: 14px;

  font-weight: 500;

  text-transform: uppercase;

}

.feature-work-experience-main-slider .info-item {

  display: flex;

  gap: 45px;

}

.feature-work-experience-main-slider .info-item h4 {

  color: var(--white);

  font-size: 20px;

  font-weight: 500;

  letter-spacing: 0.5px;

  text-transform: uppercase;

  max-width: 100px;

  width: 100%;

}

.feature-work-experience-main-slider .info-item p {

  max-width: 460px;

}

@media (max-width: 767px) {

  .feature-work-experience-main-slider {

    max-width: 100%;

  }

}

.feature-work-experience-main-slider .feature-work-experience-main-slider-single .icon {

  font-size: 70px;

  color: var(--clr-pr-1);

}

.feature-work-experience-main-slider .feature-work-experience-main-slider-single .fw-comment {

  color: #fff;

  font-weight: 500;

  line-height: 36px;

  margin-top: 10px;

}

.feature-work-experience-main-slider .feature-work-experience-main-slider-single .line {

  background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgb(255, 255, 255) 15%, rgb(255, 255, 255) 85%, rgba(255, 255, 255, 0) 100%);

  width: 90%;

  height: 1px;

  opacity: 0.2;

  margin: 28px auto 0;

}

.feature-work-experience-main-slider .feature-work-experience-main-slider-single .fw-rating {

  margin-top: 28px;

}

.feature-work-experience-main-slider .feature-work-experience-main-slider-single .fw-rating .rating-icon {

  display: flex;

  justify-content: center;

  gap: 7px;

  font-size: 18px;

}

.feature-work-experience-main-slider .feature-work-experience-main-slider-single .fw-author-name {

  font-size: 15px;

  margin-top: 10px;

}

.feature-work-experience-main-slider .swiper-slide .line {

  transform: scaleX(0);

  transition: 1s;

}

.feature-work-experience-main-slider .swiper-slide .rating-icon i {

  opacity: 0;

  transition: 0.5s;

}

.feature-work-experience-main-slider .swiper-slide.swiper-slide-active .icon,

.feature-work-experience-main-slider .swiper-slide.swiper-slide-active .fw-comment,

.feature-work-experience-main-slider .swiper-slide.swiper-slide-active .fw-author-name {

  animation: fadeInUp 0.5s var(--cube-1) backwards;

}

.feature-work-experience-main-slider .swiper-slide.swiper-slide-active .icon {

  animation-delay: 0.5s;

}

.feature-work-experience-main-slider .swiper-slide.swiper-slide-active .fw-comment {

  animation-delay: 0.7s;

}

.feature-work-experience-main-slider .swiper-slide.swiper-slide-active .line {

  transform: scaleX(1);

  transition-delay: 0.7s;

}

.feature-work-experience-main-slider .swiper-slide.swiper-slide-active .fw-author-name {

  animation-delay: 0.9s;

}

.feature-work-experience-main-slider .swiper-slide.swiper-slide-active .rating-icon i {

  opacity: 1;

}

.feature-work-experience-main-slider .swiper-slide.swiper-slide-active .rating-icon i:nth-child(1) {

  transition-delay: 0.4s;

}

.feature-work-experience-main-slider .swiper-slide.swiper-slide-active .rating-icon i:nth-child(2) {

  transition-delay: 0.5s;

}

.feature-work-experience-main-slider .swiper-slide.swiper-slide-active .rating-icon i:nth-child(3) {

  transition-delay: 0.6s;

}

.feature-work-experience-main-slider .swiper-slide.swiper-slide-active .rating-icon i:nth-child(4) {

  transition-delay: 0.7s;

}

.feature-work-experience-main-slider .swiper-slide.swiper-slide-active .rating-icon i:nth-child(5) {

  transition-delay: 0.8s;

}



@keyframes fadeInUp {

  from {

    opacity: 0;

    transform: translateY(30px);

  }

  to {

    opacity: 1;

    transform: translateY(0);

  }

}

.approach-wrapper .approach-top-items {

  display: flex;

  align-items: center;

  justify-content: space-between;

  margin-bottom: 60px;

}

@media (max-width: 1199px) {

  .approach-wrapper .approach-top-items {

    flex-wrap: wrap;

    gap: 20px;

  }

}

.approach-wrapper .approach-top-items h2 {

  color: var(--white);

  font-size: 50px;

  font-weight: 700;

  text-transform: uppercase;

  line-height: 120%;

  max-width: 490px;

}

@media (max-width: 991px) {

  .approach-wrapper .approach-top-items h2 {

    font-size: 39px;

  }

}

@media (max-width: 575px) {

  .approach-wrapper .approach-top-items h2 {

    font-size: 34px;

  }

}

@media (max-width: 470px) {

  .approach-wrapper .approach-top-items h2 {

    font-size: 30px;

  }

}

.approach-wrapper .approach-top-items ul li {

  color: #888;

  font-size: 16px;

  font-weight: 400;

  text-transform: uppercase;

}

.approach-wrapper .approach-wrap-items {

  display: flex;

  align-items: center;

  justify-content: space-between;

  border-top: 1px solid rgba(255, 255, 255, 0.2);

  padding: 60px 0;

  background: #060606;

  position: relative;

  z-index: 99;

}

@media (max-width: 1199px) {

  .approach-wrapper .approach-wrap-items {

    flex-wrap: wrap;

    gap: 30px;

  }

}

.approach-wrapper .approach-wrap-items h3 {

  font-size: 50px;

  font-weight: 700;

}

@media (max-width: 1199px) {

  .approach-wrapper .approach-wrap-items h3 {

    font-size: 38px;

  }

}

.approach-wrapper .approach-wrap-items p {

  max-width: 530px;

  margin-left: 70px;

}

@media (max-width: 1199px) {

  .approach-wrapper .approach-wrap-items p {

    margin-left: 0;

  }

}

.approach-wrapper .approach-wrap-items .approach-thumb {

  max-width: 450px;

}

.approach-wrapper .approach-wrap-items .approach-thumb img {

  width: 100%;

  height: 100%;

  border-radius: 10px;

}



.favorite-tools-wrapper {

  border-radius: 20px;

  background: #1A1A1A;

  padding: 50px 60px;

  display: flex;

  align-items: center;

  justify-content: space-between;

  position: relative;

  z-index: 9;

}

@media (max-width: 1399px) {

  .favorite-tools-wrapper {

    flex-wrap: wrap;

    gap: 30px;

  }

}

@media (max-width: 991px) {

  .favorite-tools-wrapper {

    padding: 40px 30px;

    justify-content: start;

  }

}

.favorite-tools-wrapper .vec-shape {

  position: absolute;

  bottom: 30px;

  left: 200px;

  z-index: -1;

}

@media (max-width: 1399px) {

  .favorite-tools-wrapper .vec-shape {

    display: none;

  }

}

.favorite-tools-wrapper h3 {

  font-size: 30px;

  font-weight: 700;

}

.favorite-tools-wrapper h3 span {

  color: #888;

}

.favorite-tools-wrapper .favorite-tools-items {

  display: flex;

  align-items: center;

  justify-content: space-between;

  max-width: 990px;

  width: 100%;

}

@media (max-width: 1199px) {

  .favorite-tools-wrapper .favorite-tools-items {

    flex-wrap: wrap;

    gap: 30px;

  }

}

.favorite-tools-wrapper .favorite-tools-items .skill-counter {

  display: flex;

  align-items: center;

  gap: 15px;

}

.favorite-tools-wrapper .favorite-tools-items .skill-counter .content h2 {

  color: var(--theme);

  font-size: 32px;

  font-weight: 700;

  letter-spacing: 0.5px;

}

.favorite-tools-wrapper .favorite-tools-items .skill-counter .content p {

  color: #888;

  font-size: 16px;

  font-weight: 400;

  letter-spacing: 0.5px;

  text-transform: uppercase;

}

.favorite-tools-wrapper .favorite-tools-items .line-shape {

  background: rgba(255, 255, 255, 0.2);

  width: 1px;

  height: 51px;

}

@media (max-width: 1199px) {

  .favorite-tools-wrapper .favorite-tools-items .line-shape {

    display: none;

  }

}



.faq-inner-page-wrapper .faq-image {

  max-width: 600px;

  margin: 30px auto 0;

  border-radius: 10px;

}

.faq-inner-page-wrapper .faq-image img {

  width: 100%;

  border-radius: 10px;

}

.faq-inner-page-wrapper .accordion-box {

  position: relative;

  max-width: 650px;

  margin: 50px auto 0;

}

.faq-inner-page-wrapper .accordion-box .block {

  position: relative;

  background-color: transparent;

  border-bottom: 1px solid rgba(255, 255, 255, 0.2);

  line-height: 1;

  padding-bottom: 38px;

  margin-bottom: 38px;

}

.faq-inner-page-wrapper .accordion-box .block .acc-btn {

  position: relative;

  font-size: 30px;

  color: #888;

  font-weight: 500;

  cursor: pointer;

  -webkit-transition: all 500ms ease;

  transition: all 500ms ease;

  text-transform: uppercase;

  font-family: "Big Shoulders Display", sans-serif;

}

@media (max-width: 575px) {

  .faq-inner-page-wrapper .accordion-box .block .acc-btn {

    font-size: 22px;

    line-height: 1.6;

    padding-right: 70px;

  }

}

.faq-inner-page-wrapper .accordion-box .block .acc-btn .icon {

  position: absolute;

  right: 0;

  top: -7px;

  height: 45px;

  width: 45px;

  font-size: 18px;

  line-height: 45px;

  text-align: center;

  border-radius: 50%;

  color: var(--header);

  -webkit-transition: all 500ms ease;

  transition: all 500ms ease;

  border: 1px solid rgba(255, 255, 255, 0.2);

}

.faq-inner-page-wrapper .accordion-box .block .acc-content {

  position: relative;

  display: none;

  margin-top: 22px;

}

@media (max-width: 470px) {

  .faq-inner-page-wrapper .accordion-box .block .acc-content {

    margin-top: 10px;

  }

}

.faq-inner-page-wrapper .accordion-box .block .acc-content .content {

  position: relative;

  max-width: 570px;

}

.faq-inner-page-wrapper .accordion-box .block .acc-content .content .text {

  line-height: 150%;

  font-size: 16px;

  font-weight: 400;

  color: #888;

}

@media (max-width: 1199px) {

  .faq-inner-page-wrapper .accordion-box .block .acc-content .content .text {

    font-size: 14px;

  }

}

@media (max-width: 470px) {

  .faq-inner-page-wrapper .accordion-box .block .acc-content .content .text {

    font-size: 13px;

  }

}

.faq-inner-page-wrapper .accordion-box .block .acc-content.current {

  display: block;

}

.faq-inner-page-wrapper .accordion-box .block .acc-btn.active .icon:before {

  content: "\f068";

  color: var(--theme);

}

.faq-inner-page-wrapper .accordion-box .block .acc-btn.active {

  color: var(--theme);

}

.faq-inner-page-wrapper .accordion-box .block:last-child {

  margin-bottom: 0;

}



.experiences-wrapper4 .experiences-box-item {

  margin-top: 30px;

  border-radius: 12px;

  border: 1px solid rgba(255, 255, 255, 0.2);

  padding: 30px;

}

.experiences-wrapper4 .experiences-box-item h3 {

  font-size: 24px;

  font-weight: 600;

  color: var(--header);

  padding-bottom: 20px;

  border-bottom: 1px solid rgba(255, 255, 255, 0.2);

}

.experiences-wrapper4 .experiences-box-item .counter-box {

  margin-top: 25px;

  display: flex;

  align-items: center;

  justify-content: space-between;

}

.experiences-wrapper4 .experiences-box-item .counter-box h2 {

  font-size: 60px;

  color: var(--header);

  font-weight: 400;

}

.experiences-wrapper4 .skill-list {

  margin-top: 30px;

  margin-left: 30px;

}

.experiences-wrapper4 .skill-list li {

  padding: 35px 0;

  font-size: 16px;

  font-weight: 500;

  color: var(--header);

  display: flex;

  align-items: center;

  justify-content: space-between;

  border-bottom: 1px solid rgba(255, 255, 255, 0.2);

}

.experiences-wrapper4 .skill-list li:first-child {

  border-top: 1px solid rgba(255, 255, 255, 0.2);

}

.experiences-wrapper4 .skill-list li .content h2 {

  font-size: 36px;

  color: var(--header);

  font-weight: 600;

  margin-bottom: 5px;

}

.experiences-wrapper4 .skill-list li .content span {

  font-size: 16px;

  font-weight: 500;

  color: var(--header);

}



.award-wrapper-5 {

  margin-bottom: 40px;

}

@media (max-width: 1399px) {

  .award-wrapper-5 {

    margin-bottom: 0;

  }

}

.award-wrapper-5 .award-items {

  margin-top: 30px;

}

.award-wrapper-5 .award-items ul li {

  border-bottom: 1px solid rgba(255, 255, 255, 0.2);

  padding: 30px 0;

  display: flex;

  align-items: center;

  justify-content: space-between;

}

@media (max-width: 991px) {

  .award-wrapper-5 .award-items ul li {

    flex-wrap: wrap;

    gap: 20px;

  }

}

.award-wrapper-5 .award-items ul li:first-child {

  border-top: 1px solid rgba(255, 255, 255, 0.2);

}

.award-wrapper-5 .award-items ul li .title-left {

  display: flex;

  align-items: center;

  gap: 20px;

  flex-basis: 45%;

}

@media (max-width: 1199px) {

  .award-wrapper-5 .award-items ul li .title-left {

    flex-basis: initial;

  }

}

.award-wrapper-5 .award-items ul li .title-left .circle-box {

  border-radius: 70px;

  border: 0.5px solid rgba(255, 255, 255, 0.2);

  border-radius: 70px;

  width: 47px;

  height: 47px;

  line-height: 47px;

  text-align: center;

  display: inline-block;

  font-size: 24px;

  font-weight: 400;

  font-family: "Big Shoulders Display", sans-serif;

  color: var(--header);

}

.award-wrapper-5 .award-items ul li .title-left h3 {

  font-size: 28px;

  font-weight: 500;

  color: var(--header);

}

.award-wrapper-5 .award-items ul li h2 {

  font-size: 20px;

  font-weight: 400;

  color: var(--header);

  text-align: right;

  font-family: "Kanit", sans-serif;

  text-align: right;

}

.award-wrapper-5 .award-image {

  margin-top: 30px;

  margin-right: 40px;

  position: relative;

}

@media (max-width: 1199px) {

  .award-wrapper-5 .award-image {

    margin-right: 0;

  }

}

.award-wrapper-5 .award-image img {

  width: 100%;

  height: 100%;

}

.award-wrapper-5 .award-image .award-image-2 {

  position: absolute;

  bottom: -40px;

  right: -40px;

  transform: rotate(21.668deg);

}

@media (max-width: 1199px) {

  .award-wrapper-5 .award-image .award-image-2 {

    bottom: 0;

    right: 0;

    transform: rotate(0);

  }

}



.ani-contact-box-area {

  height: 100vh;

  display: flex;

  align-items: center;

  justify-content: center;

  overflow: hidden;

  position: relative;

}

.ani-contact-box-area .ani-area-inner {

  display: flex;

  align-items: center;

  justify-content: center;

  position: relative;

  z-index: 1;

}

.ani-contact-box-area .ani-bg {

  position: absolute;

  height: 390px;

  width: 390px;

  background-color: var(--theme);

  border-radius: 100%;

  z-index: -1;

}

.ani-contact-box-area .section-title {

  font-family: "Big Shoulders Display", sans-serif;

  font-weight: 700;

  line-height: 20px;

  text-transform: uppercase;

  display: inline-block;

  font-size: 3vw;

}

.ani-contact-box-area .section-title a {

  color: var(--black);

}



.view-reels-section h2 {

  text-align: center;

  font-size: 20px;

  font-weight: 700;

  text-transform: uppercase;

  color: var(--white);

  margin-top: 18px;

}

.view-reels-section h2 span {

  color: var(--theme);

}

.view-reels-section .shape {

  text-align: center;

  margin-left: 100px;

}

@media (max-width: 1399px) {

  .view-reels-section .shape {

    margin-left: 0;

  }

}

.view-reels-section .reels-slider {

  margin-top: 60px;

}

@media (max-width: 1399px) {

  .view-reels-section .reels-slider {

    margin-top: 30px;

  }

}



.reels-video video {

  width: 100%;

  height: 471px;

  border-radius: 20px;

  object-fit: cover;

}

@media (max-width: 575px) {

  .reels-video video {

    height: 400px;

  }

}



.gallery-top {

  margin-bottom: 80px;

}

@media (max-width: 1399px) {

  .gallery-top {

    margin-bottom: 30px;

  }

}

.gallery-top .sec-tit {

  color: var(--theme);

  text-transform: uppercase;

  font-family: "Kanit", sans-serif;

  font-weight: 500;

  text-align: center;

  margin-bottom: 10px;

}

.gallery-top .item {

  display: flex;

  align-items: center;

}

@media (max-width: 991px) {

  .gallery-top .item {

    flex-wrap: wrap;

    gap: 10px;

    margin-top: 20px;

  }

}

.gallery-top .item .hover-img {

  overflow: hidden;

  position: relative;

}

@media (max-width: 767px) {

  .gallery-top .item .hover-img {

    display: none;

  }

}

.gallery-top .item .hover-img a:nth-child(2), .gallery-top .item .hover-img a:nth-child(3), .gallery-top .item .hover-img a:nth-child(4) {

  top: 0;

  left: 0;

  overflow: hidden;

  position: absolute;

  transition: all 0.4s ease-in-out;

  border-radius: 50%;

}

@media (max-width: 767px) {

  .gallery-top .item .hover-img a:nth-child(2), .gallery-top .item .hover-img a:nth-child(3), .gallery-top .item .hover-img a:nth-child(4) {

    width: 100%;

  }

}

.gallery-top .item .hover-img a img {

  height: 100%;

  width: 100%;

  object-fit: cover;

  border-radius: 120px;

}

.gallery-top .item .hover-img:hover a:nth-child(2) {

  transform: scale(0.9);

}

.gallery-top .item .hover-img:hover a:nth-child(3) {

  transform: scale(0.7);

}

.gallery-top .item .hover-img:hover a:nth-child(4) {

  transform: scale(0.5);

}

.gallery-top .item h2 {

  color: var(--white);

  font-size: 290px;

  font-weight: 700;

  text-transform: uppercase;

  line-height: 95%;

}

@media (max-width: 1399px) {

  .gallery-top .item h2 {

    font-size: 140px;

  }

}

@media (max-width: 991px) {

  .gallery-top .item h2 {

    font-size: 90px;

  }

}

@media (max-width: 991px) {

  .gallery-top .item h2 {

    font-size: 70px;

  }

}

.gallery-top .item span {

  font-family: "Big Shoulders Display", sans-serif;

  font-size: 290px;

  font-weight: 700;

  text-transform: uppercase;

  color: var(--theme);

  line-height: 90%;

}

@media (max-width: 1399px) {

  .gallery-top .item span {

    font-size: 140px;

  }

}

@media (max-width: 991px) {

  .gallery-top .item span {

    font-size: 90px;

  }

}

@media (max-width: 991px) {

  .gallery-top .item span {

    font-size: 70px;

  }

}



.gallery-wrapper .gallery-item-4 {

  margin-bottom: 50px;

  position: relative;

  z-index: 999;

}

.gallery-wrapper .gallery-item-4 .gallery-image {

  position: relative;

  overflow: hidden;

}

.gallery-wrapper .gallery-item-4 .gallery-image a:nth-child(2), .gallery-wrapper .gallery-item-4 .gallery-image a:nth-child(3), .gallery-wrapper .gallery-item-4 .gallery-image a:nth-child(4) {

  top: 0;

  left: 0;

  overflow: hidden;

  position: absolute;

  transition: all 0.4s ease-in-out;

  border-radius: 50%;

}

@media (max-width: 767px) {

  .gallery-wrapper .gallery-item-4 .gallery-image a:nth-child(2), .gallery-wrapper .gallery-item-4 .gallery-image a:nth-child(3), .gallery-wrapper .gallery-item-4 .gallery-image a:nth-child(4) {

    width: 100%;

  }

}

.gallery-wrapper .gallery-item-4 .gallery-image a img {

  height: 100%;

  width: 100%;

  object-fit: cover;

  border-radius: 10px;

}

.gallery-wrapper .gallery-item-4 .gallery-image:hover a:nth-child(2) {

  transform: scale(0.9);

}

.gallery-wrapper .gallery-item-4 .gallery-image:hover a:nth-child(3) {

  transform: scale(0.7);

}

.gallery-wrapper .gallery-item-4 .gallery-image:hover a:nth-child(4) {

  transform: scale(0.5);

}

.gallery-wrapper .gallery-item-4 .gallery-image .arrow-icon {

  background-color: var(--theme);

  width: 86px;

  height: 86px;

  line-height: 86px;

  text-align: center;

  border-radius: 100px;

  color: var(--bg);

  position: absolute;

  transform: translate(-50%, -50%);

  left: 50%;

  display: inline-block;

  font-size: 30px;

  top: 20%;

  left: 80%;

  opacity: 0;

  visibility: hidden;

  transform: translate(50%, -50%) scale(0.5);

}

.gallery-wrapper .gallery-item-4 .gallery-content {

  margin-top: 30px;

  position: relative;

  z-index: 999;

}

.gallery-wrapper .gallery-item-4 .gallery-content h3 a {

  position: relative;

  display: inline-block;

  color: inherit;

  background-repeat: no-repeat;

  background-size: 0% 1px;

  background-position: 0 100%;

  transition: background-size 0.4s linear, color 0.4s linear;

  background-image: linear-gradient(var(--theme), var(--theme));

}

.gallery-wrapper .gallery-item-4 .gallery-content h3 a:hover {

  background-size: 100% 1px;

  color: var(--theme);

}

.gallery-wrapper .gallery-item-4:hover .gallery-image .arrow-icon {

  opacity: 1;

  visibility: visible;

  top: 50%;

  left: 50%;

  transform: translate(-50%, -50%) scale(1);

}



.award-wrapper-4 .brand-wrapper-new {

  margin-bottom: 60px;

  margin-top: 48px;

  display: flex;

  align-items: center;

  justify-content: space-between;

}

@media (max-width: 1399px) {

  .award-wrapper-4 .brand-wrapper-new {

    margin-bottom: 30px;

    margin-top: 30px;

    gap: 10px;

  }

}

@media (max-width: 991px) {

  .award-wrapper-4 .brand-wrapper-new {

    flex-wrap: wrap;

    gap: 20px;

  }

}

.award-wrapper-4 .brand-wrapper-new .brand-item {

  border: 1px solid rgba(255, 255, 255, 0.2);

  position: relative;

  overflow: hidden;

  padding: 0px 35px;

  border-radius: 10px;

  height: 80px;

  text-align: center;

  margin: 0 auto;

  display: flex;

  align-items: center;

  justify-content: center;

}

@media (max-width: 991px) {

  .award-wrapper-4 .brand-wrapper-new .brand-item {

    padding: 0px 20px;

    height: 70px;

  }

}

.award-wrapper-4 .brand-wrapper-new .brand-item .brand-three-active-media {

  position: relative;

  z-index: 1;

  transition: all 0.5s ease-in-out;

}

.award-wrapper-4 .brand-wrapper-new .brand-item .brand-three-active-media img {

  max-width: 100%;

  height: auto;

  display: block;

  filter: grayscale(100%) brightness(1.1) sepia(0.1) hue-rotate(0deg) saturate(0%) contrast(50%);

  mix-blend-mode: multiply;

}

.award-wrapper-4 .brand-wrapper-new .brand-item .brand-three-hover-media {

  position: absolute;

  top: 20px;

  left: 20px;

  right: 20px;

  bottom: 20px;

  opacity: 0;

  visibility: hidden;

  transform: translateY(30%);

  transition: all 0.6s ease-in-out;

  z-index: 2;

}

@media (max-width: 1399px) {

  .award-wrapper-4 .brand-wrapper-new .brand-item .brand-three-hover-media img {

    width: 100%;

  }

}

@media (max-width: 991px) {

  .award-wrapper-4 .brand-wrapper-new .brand-item .brand-three-hover-media img {

    width: initial;

  }

}

.award-wrapper-4 .brand-wrapper-new .brand-item:hover .brand-three-active-media {

  opacity: 0;

  visibility: hidden;

}

.award-wrapper-4 .brand-wrapper-new .brand-item:hover .brand-three-hover-media {

  opacity: 1;

  visibility: visible;

  transform: translateY(0);

}

.award-wrapper-4 .brand-wrapper-new .brand-item:hover .brand-three-hover-media img {

  filter: none;

}

.award-wrapper-4 .award-content h2 {

  margin-bottom: 60px;

}

@media (max-width: 1399px) {

  .award-wrapper-4 .award-content h2 {

    margin-bottom: 30px;

  }

}

.award-wrapper-4 .award-content ul {

  border-top: 1px solid rgba(255, 255, 255, 0.2);

  padding-top: 30px;

}

.award-wrapper-4 .award-content ul li {

  display: flex;

  align-items: center;

  gap: 80px;

}

.award-wrapper-4 .award-content .award-list-items {

  display: flex;

  align-items: center;

  gap: 85px;

}

@media (max-width: 1199px) {

  .award-wrapper-4 .award-content .award-list-items {

    gap: 40px;

  }

}

.award-wrapper-4 .award-content .award-list-items.bb-bottom span {

  border-bottom: 1px solid rgba(255, 255, 255, 0.2);

}

.award-wrapper-4 .award-content .award-list-items span {

  width: 100%;

  display: inline-block;

  border-top: 1px solid rgba(255, 255, 255, 0.2);

  padding: 30px 0;

}

@media (max-width: 1199px) {

  .award-wrapper-4 .award-image img {

    width: 100%;

    height: 100%;

  }

}



.Portfolio-box-item {

  background-color: var(--white);

  display: flex;

  align-items: center;

  justify-content: space-between;

  overflow: hidden;

}

.Portfolio-box-item .left-item {

  display: flex;

  align-items: center;

  gap: 60px;

}

.Portfolio-box-item .left-item .left-image {

  height: 448px;

  width: 440px;

}

.Portfolio-box-item .left-item .left-image img {

  width: 100%;

  height: 100%;

  object-fit: cover;

}

.Portfolio-box-item .left-item .content h6 {

  margin-bottom: 30px;

  color: black;

}

.Portfolio-box-item .left-item .content p {

  font-size: 22px;

  color: black;

  max-width: 600px;

}

.Portfolio-box-item .left-item .content .count-item {

  display: flex;

  align-items: center;

  gap: 40px;

}

.Portfolio-box-item .left-item .content .count-item h2 {

  color: black;

}

.Portfolio-box-item .right-image {

  margin-right: -100px;

  overflow: hidden;

}

.Portfolio-box-item .right-image img {

  width: 100%;

  height: 100%;

  position: relative;

  z-index: 0;

  display: block;

  width: 300px;

  height: 300px;

  border-radius: 50%;

}



.gt-portfolio-11-slider-bg {

  height: 100vh;

  width: 100%;

  background-size: cover;

  background-position: center;

}

.gt-portfolio-11-slider-bg.slick-active .gt-portfolio-11-slider-link {

  opacity: 1;

}

.gt-portfolio-11-slider-bg.slick-active .gt-portfolio-11-slider-subtitle {

  opacity: 1;

}

.gt-portfolio-11-slider-bg.slick-active .gt-portfolio-11-slider-title {

  opacity: 1;

}

.gt-portfolio-11-slider-content {

  padding-left: 180px;

  padding-bottom: 150px;

}

@media (max-width: 1399px) {

  .gt-portfolio-11-slider-content {

    padding-left: 80px;

  }

}

@media (max-width: 991px) {

  .gt-portfolio-11-slider-content {

    padding-left: 20px;

  }

}

.gt-portfolio-11-slider-link {

  margin-bottom: 30px;

  opacity: 0;

}

.gt-portfolio-11-slider-subtitle {

  font-size: 16px;

  font-weight: 600;

  line-height: 1.6;

  margin-bottom: 50px;

  display: inline-block;

  text-transform: uppercase;

  color: var(--white);

  opacity: 0;

}

.gt-portfolio-11-slider-title {

  font-size: 100px;

  font-weight: 700;

  line-height: 0.85;

  letter-spacing: 2px;

  margin-bottom: 0;

  color: var(--white);

  opacity: 0;

}

@media (max-width: 1600px) {

  .gt-portfolio-11-slider-title {

    font-size: 90px;

  }

}

@media (max-width: 991px) {

  .gt-portfolio-11-slider-title {

    font-size: 80px;

  }

}

@media (max-width: 767px) {

  .gt-portfolio-11-slider-title {

    font-size: 60px;

  }

  .gt-portfolio-11-slider-title br {

    display: none;

  }

}

@media (max-width: 575px) {

  .gt-portfolio-11-slider-title {

    font-size: 60px;

  }

  .gt-portfolio-11-slider-title br {

    display: none;

  }

}

.gt-portfolio-11-slider-active button {

  left: 40px;

  bottom: 60px;

  width: 55px;

  height: 56px;

  line-height: 53px;

  text-align: center;

  border-radius: 50%;

  position: absolute;

  color: var(--white);

  border: 2px solid rgba(255, 255, 255, 0.2);

  transition: 0.3s;

  z-index: 99;

}

@media only screen and (min-width: 992px) {

  .gt-portfolio-11-slider-active button {

    display: none !important;

  }

}

@media (max-width: 575px) {

  .gt-portfolio-11-slider-active button {

    left: 15px;

  }

}

.gt-portfolio-11-slider-active button.slick-next {

  margin-left: 70px;

}

.gt-portfolio-11-slider-active button i {

  font-weight: 500;

}

.gt-portfolio-11-slider-active button:hover {

  color: var(--black);

  border-color: var(--white);

  background-color: var(--white);

}

.gt-portfolio-11-slider-nav-item {

  cursor: pointer;

}

.gt-portfolio-11-slider-nav-thumb img {

  border-radius: 14px;

  box-shadow: 0px 20px 20px 0px rgba(0, 0, 0, 0.2);

}

.gt-portfolio-11-slider-nav-wrap {

  width: 1260px;

  position: absolute;

  bottom: 110px;

  right: -65px;

  z-index: 99;

}

@media (max-width: 1600px) {

  .gt-portfolio-11-slider-nav-wrap {

    right: -465px;

  }

}

@media (max-width: 1399px) {

  .gt-portfolio-11-slider-nav-wrap {

    right: -80px;

    width: 900px;

  }

}

@media (max-width: 1199px) {

  .gt-portfolio-11-slider-nav-wrap {

    right: -80px;

    width: 600px;

  }

}

.gt-portfolio-11-slider-nav-wrap .slides-number {

  position: absolute;

  right: 12%;

  bottom: -10%;

  z-index: 99;

}

@media (max-width: 1600px) {

  .gt-portfolio-11-slider-nav-wrap .slides-number {

    right: 39%;

  }

}

@media (max-width: 1199px) {

  .gt-portfolio-11-slider-nav-wrap .slides-number {

    right: 16%;

  }

}

@media (max-width: 991px) {

  .gt-portfolio-11-slider-nav-wrap .slides-number {

    right: 19%;

  }

}

.gt-portfolio-11-slider-nav-wrap .slides-number span {

  font-size: 50px;

  font-weight: 500;

  line-height: 1;

  text-align: center;

  text-transform: uppercase;

  color: var(--white);

  min-width: 50px;

}

.gt-portfolio-11-slider-nav-wrap .slides-number .slider-line {

  height: 1px;

  width: 850px;

  margin-right: 45px;

  background-color: rgba(255, 255, 255, 0.2);

}

@media (max-width: 1600px) {

  .gt-portfolio-11-slider-nav-wrap .slides-number .slider-line {

    width: 500px;

  }

}

@media (max-width: 1399px) {

  .gt-portfolio-11-slider-nav-wrap .slides-number .slider-line {

    width: 520px;

  }

}

@media (max-width: 1199px) {

  .gt-portfolio-11-slider-nav-wrap .slides-number .slider-line {

    width: 240px;

  }

}

@media (max-width: 991px) {

  .gt-portfolio-11-slider-nav-wrap .slides-number .slider-line {

    width: 215px;

  }

}

.gt-portfolio-11-slider-nav-active button {

  left: 0;

  width: 55px;

  bottom: -45px;

  height: 56px;

  line-height: 53px;

  text-align: center;

  border-radius: 50%;

  position: absolute;

  color: var(--white);

  border: 2px solid rgba(255, 255, 255, 0.2);

  transition: 0.3s;

}

.gt-portfolio-11-slider-nav-active button.slick-next {

  margin-left: 70px;

}

.gt-portfolio-11-slider-nav-active button i {

  font-weight: 500;

}

.gt-portfolio-11-slider-nav-active button:hover {

  color: var(--black);

  border-color: var(--white);

  background-color: var(--white);

}

.gt-portfolio-11-slider-nav-active .slick-list {

  padding: 50px 0;

}

.gt-portfolio-11-slider-nav-content-wrap {

  position: absolute;

  top: 0;

  left: 0;

  height: 100%;

}

.gt-portfolio-11-slider-nav-content {

  height: 100%;

  padding: 30px;

}

.gt-portfolio-11-slider-nav-year span {

  height: 30px;

  font-size: 16px;

  font-weight: 700;

  border-radius: 4px;

  padding: 0px 12px;

  line-height: 30px;

  display: inline-block;

  backdrop-filter: blur(5px);

  color: var(--white);

  background: rgba(255, 255, 255, 0.2);

}

.gt-portfolio-11-slider-nav-subtittle {

  font-size: 13px;

  font-weight: 600;

  line-height: 10px;

  margin-bottom: 10px;

  display: inline-block;

  text-transform: uppercase;

  color: var(--white);

}

.gt-portfolio-11-slider-nav-tittle {

  font-size: 40px;

  font-weight: 400;

  line-height: 1;

  color: var(--white);

  margin-bottom: 0;

  letter-spacing: 1px;

}



.service-details-wrapper .top-image-items {

  text-align: center;

  margin-bottom: 60px;

}

.service-details-wrapper .top-image-items .service-details-image {

  margin-top: 40px;

  border-radius: 10px;

}

.service-details-wrapper .top-image-items .service-details-image img {

  width: 100%;

  height: 100%;

  border-radius: 10px;

}

.service-details-wrapper .bottom-content-items {

  max-width: 930px;

  margin: 0 auto;

}

.service-details-wrapper .bottom-content-items h2 {

  font-size: 50px;

}

@media (max-width: 767px) {

  .service-details-wrapper .bottom-content-items h2 {

    font-size: 42px;

  }

}

@media (max-width: 575px) {

  .service-details-wrapper .bottom-content-items h2 {

    font-size: 36px;

  }

}

.service-details-wrapper .bottom-content-items p {

  margin-top: 15px;

}

.service-details-wrapper .bottom-content-items h3 {

  font-size: 30px;

  font-weight: 700;

  margin-top: 30px;

}

.service-details-wrapper .bottom-content-items .service-image {

  margin-top: 30px;

  border-radius: 8px;

  overflow: hidden;

}

.service-details-wrapper .bottom-content-items .service-image img {

  width: 100%;

  height: 100%;

  border-radius: 8px;

}

.service-details-wrapper .bottom-content-items .text-list {

  margin-top: 30px;

  display: flex;

  align-items: center;

  gap: 80px;

}

@media (max-width: 1199px) {

  .service-details-wrapper .bottom-content-items .text-list {

    flex-wrap: wrap;

    gap: 30px;

  }

}

.service-details-wrapper .bottom-content-items .text-list ul li {

  margin-top: 40px;

  font-size: 20px;

  font-weight: 700;

  color: var(--white);

  font-family: "Big Shoulders Display", sans-serif;

}

.service-details-wrapper .bottom-content-items .text-list ul li b {

  font-size: 20px;

  font-weight: 700;

  color: var(--text);

  margin-right: 6px;

  font-family: "Big Shoulders Display", sans-serif;

}

.service-details-wrapper .bottom-content-items .text-list ul li p {

  font-size: 16px;

  font-weight: 400;

  color: var(--text);

  font-family: "Kanit", sans-serif;

  max-width: 330px;

}



.service-inner-wrapper {

  padding-top: 150px;

  position: relative;

  z-index: 9;

}

.service-inner-wrapper h1 {

  color: var(--white);

  font-size: 100px;

  font-weight: 700;

  text-transform: uppercase;

  line-height: 110%;

  max-width: 950px;

}

@media (max-width: 1199px) {

  .service-inner-wrapper h1 {

    font-size: 70px;

  }

}

@media (max-width: 991px) {

  .service-inner-wrapper h1 {

    font-size: 55px;

  }

}

@media (max-width: 767px) {

  .service-inner-wrapper h1 {

    font-size: 42px;

  }

}

@media (max-width: 575px) {

  .service-inner-wrapper h1 {

    font-size: 36px;

  }

}

.service-inner-wrapper .hero-items .hero-image {

  width: 367px;

  height: 190px;

  position: relative;

  z-index: 99;

  overflow: hidden;

  border-radius: 8px;

}

@media (max-width: 1899px) {

  .service-inner-wrapper .hero-items .hero-image {

    width: initial;

    height: initial;

  }

}

.service-inner-wrapper .hero-items .hero-image img {

  width: 100%;

  height: 100%;

  max-width: initial;

  display: inline-block;

  object-fit: cover;

}

.service-inner-wrapper .pinned-3 {

  position: relative;

  z-index: 10;

  overflow: hidden;

}

.service-inner-wrapper .pinned-3 .image-outer {

  position: relative;

  overflow: visible;

}

@media (max-width: 1399px) {

  .service-inner-wrapper .pinned-3 #myImage {

    width: 100% !important;

    height: auto !important;

    transform: none !important;

    left: 0;

    right: 0;

    x: 0 !important;

  }

}

.service-inner-wrapper .pin-spacer {

  height: 0px !important;

  transition: height 0.5s ease;

}



.service-wrapper-4 .border-bottom {

  border-bottom: 1px solid rgba(255, 255, 255, 0.2) !important;

}

.service-wrapper-4 .service-tabing-wrap .images-remove-area {

  transition: all 0.6s;

  margin-bottom: -400px;

  opacity: 0;

  transform: rotate(60deg);

  -webkit-transform: rotate(60deg);

  -moz-transform: rotate(60deg);

  -ms-transform: rotate(60deg);

  -o-transform: rotate(60deg);

}

@media (max-width: 767px) {

  .service-wrapper-4 .service-tabing-wrap .images-remove-area {

    margin-bottom: 0px;

    opacity: 1;

    transform: rotate(0deg);

    -webkit-transform: rotate(0deg);

    -moz-transform: rotate(0deg);

    -ms-transform: rotate(0deg);

    -o-transform: rotate(0deg);

  }

}

.service-wrapper-4 .service-tabing-wrap .modern-list li {

  font-size: 20px;

  color: var(--header);

  font-weight: 600;

}

.service-wrapper-4 .service-tabing-wrap .modern-list li i {

  color: var(--theme);

  font-size: 14px;

}

.service-wrapper-4 .service-tabing-wrap .accordion-single {

  border: unset;

  overflow: hidden;

  transition: all 0.8s;

  border-radius: 0;

  border-top: 1px solid rgba(255, 255, 255, 0.2);

}

.service-wrapper-4 .service-tabing-wrap .accordion-single .accordion-btn {

  /* ✅ Smooth fade & slide effect added here */

}

@media (max-width: 767px) {

  .service-wrapper-4 .service-tabing-wrap .accordion-single .accordion-btn {

    flex-wrap: wrap;

    gap: 30px;

  }

}

.service-wrapper-4 .service-tabing-wrap .accordion-single .accordion-btn::after {

  content: "+";

  font-family: "FontAwesome";

  font-size: 20px;

  transform: rotate(0deg);

  transition: all 0.5s;

  font-weight: 700;

  display: flex;

  align-items: center;

  justify-content: center;

  color: var(--white);

  width: 44px;

  min-width: 44px;

  height: 44px;

  background: #1d1d1d;

  border-radius: 50%;

}

.service-wrapper-4 .service-tabing-wrap .accordion-single .accordion-btn::after:hover {

  cursor: pointer;

}

@media (max-width: 767px) {

  .service-wrapper-4 .service-tabing-wrap .accordion-single .accordion-btn::after {

    justify-content: center;

  }

}

@media (max-width: 767px) and (max-width: 767px) {

  .service-wrapper-4 .service-tabing-wrap .accordion-single .accordion-btn::after {

    flex-wrap: wrap;

    gap: 30px;

  }

}

@media (max-width: 767px) {

  .service-wrapper-4 .service-tabing-wrap .accordion-single .accordion-btn::after::after {

    content: "\f068";

    font-family: "FontAwesome";

    color: var(--theme);

  }

  .service-wrapper-4 .service-tabing-wrap .accordion-single .accordion-btn::after::after:hover {

    cursor: pointer;

  }

}

.service-wrapper-4 .service-tabing-wrap .accordion-single .accordion-btn .mtitle-ara .serial-badge {

  padding: 10px 15px;

  transition: all 0.4s;

  border-radius: 100px;

  border: 1px solid #414141;

  background-color: var(--header);

}

.service-wrapper-4 .service-tabing-wrap .accordion-single .accordion-btn .mtitle-ara .serial-badge .rot60 {

  padding-left: 10px;

}

.service-wrapper-4 .service-tabing-wrap .accordion-single .accordion-btn .mtitle-ara .mtitle {

  font-size: 30px;

  font-weight: 500;

}

.service-wrapper-4 .service-tabing-wrap .accordion-single .accordion-btn .mtitle-ara .mtitle a {

  color: var(--theme);

  font-family: "Big Shoulders Display", sans-serif;

  font-size: 30px;

  font-style: normal;

  font-weight: 500;

  line-height: 30px;

  text-transform: capitalize;

}

.service-wrapper-4 .service-tabing-wrap .accordion-single .accordion-btn .mtitle-ara .pras {

  font-size: 16px;

  font-weight: 400;

  display: none !important;

  transform: scale(0);

}

@media (max-width: 767px) {

  .service-wrapper-4 .service-tabing-wrap .accordion-single .accordion-btn .mtitle-ara .serial-badge {

    opacity: 1;

  }

  .service-wrapper-4 .service-tabing-wrap .accordion-single .accordion-btn .mtitle-ara .pras {

    display: block !important;

    transform: scale(1);

    color: #000;

    font-family: "Kanit", sans-serif;

    font-size: 16px;

    font-style: normal;

    font-weight: 400;

    line-height: 30px;

    text-transform: capitalize;

  }

}

.service-wrapper-4 .service-tabing-wrap .accordion-single .accordion-btn .mtitle-ara.style2 .mtitle a {

  color: var(--header);

  font-family: "Big Shoulders Display", sans-serif;

  font-size: 36px;

  font-weight: 600;

  line-height: 40px;

  text-align: left;

}

.service-wrapper-4 .service-tabing-wrap .accordion-single .accordion-btn .text-remove {

  max-width: 490px;

  opacity: 0;

  visibility: hidden;

  transform: translateY(20px);

  transition: all 0.6s ease;

}

@media (max-width: 767px) {

  .service-wrapper-4 .service-tabing-wrap .accordion-single .accordion-btn .text-remove {

    opacity: 1;

    visibility: visible;

    transform: translateY(0);

  }

}

.service-wrapper-4 .service-tabing-wrap .accordion-single .accordion-btn .text-remove p {

  color: var(--header);

  font-family: "Kanit", sans-serif;

  font-size: 16px;

  font-style: italic;

  font-weight: 400;

  line-height: 28px;

  transition: all 0.4s ease;

}

.service-wrapper-4 .service-tabing-wrap .accordion-single.active .text-remove {

  opacity: 1;

  visibility: visible;

  transform: translateY(0);

}

.service-wrapper-4 .service-tabing-wrap .accordion-single.active .images-remove-area {

  margin-bottom: 0px;

  opacity: 1;

  transform: rotate(0deg);

  -webkit-transform: rotate(0deg);

  -moz-transform: rotate(0deg);

  -ms-transform: rotate(0deg);

  -o-transform: rotate(0deg);

}

.service-wrapper-4 .service-tabing-wrap .accordion-single.active .accordion-btn {

  height: initial;

  justify-content: space-between;

}

@media (max-width: 767px) {

  .service-wrapper-4 .service-tabing-wrap .accordion-single.active .accordion-btn {

    flex-wrap: wrap;

    gap: 30px;

  }

}

.service-wrapper-4 .service-tabing-wrap .accordion-single.active .accordion-btn::after {

  content: "\f068";

  font-family: "FontAwesome";

  color: var(--theme);

}

.service-wrapper-4 .service-tabing-wrap .accordion-single.active .accordion-btn::after:hover {

  cursor: pointer;

}

.service-wrapper-4 .service-tabing-wrap .accordion-single.active .mtitle-ara .serial-badge {

  opacity: 1;

}

.service-wrapper-4 .service-tabing-wrap .accordion-single.active .mtitle-ara .pras {

  display: block !important;

  transform: scale(1);

  color: #000;

  font-family: "Kanit", sans-serif;

  font-size: 16px;

  font-style: normal;

  font-weight: 400;

  line-height: 30px;

  text-transform: capitalize;

}

.service-wrapper-4 .service-tabing-wrap .accordion-single.active .content-area {

  display: none !important;

}

@media (max-width: 1399px) {

  .service-wrapper-4 .service-tabing-wrap .mtitle {

    font-size: 20px !important;

  }

  .service-wrapper-4 .service-tabing-wrap .tab-remove-thumb {

    max-width: 200px;

  }

  .service-wrapper-4 .service-tabing-wrap .tab-remove-thumb img {

    width: 100%;

  }

}

.service-wrapper-4 .border-bottom {

  border-bottom: 1px solid rgba(255, 255, 255, 0.2);

}



.project-section .section-title h2 {

  font-size: 400px;

  font-weight: 700;

  text-transform: uppercase;

  line-height: 1;

  margin-left: 50px;

}

@media (max-width: 1199px) {

  .project-section .section-title h2 {

    margin-left: 0;

    font-size: 200px;

  }

}

@media (max-width: 991px) {

  .project-section .section-title h2 {

    font-size: 150px;

  }

}

@media (max-width: 767px) {

  .project-section .section-title h2 {

    font-size: 120px;

  }

}

@media (max-width: 575px) {

  .project-section .section-title h2 {

    font-size: 90px;

  }

}



.project-box-items {

  margin-top: 30px;

  position: relative;

  z-index: 99;

}

.project-box-items .thumb {

  position: relative;

  z-index: 9;

  transition: all 0.4s ease-in-out;

}

@media (max-width: 1199px) {

  .project-box-items .thumb {

    height: 500px;

  }

}

.project-box-items .thumb img {

  width: 100%;

  height: 100%;

  border-radius: 10px;

  transition: all 0.4s ease-in-out;

  border: 2px solid transparent;

  object-fit: cover;

}

.project-box-items .thumb .content {

  position: absolute;

  bottom: 20px;

  left: 40px;

  opacity: 0;

  visibility: hidden;

  transition: all 0.4s ease-in-out;

  z-index: 1;

  right: 40px;

}

.project-box-items .thumb .content p {

  font-size: 18px;

  font-weight: 500;

}

.project-box-items .thumb .content h3 {

  font-size: 32px;

  font-weight: 700;

  margin-top: 8px;

}

.project-box-items .thumb .content h3 a:hover {

  color: var(--theme);

}

.project-box-items .thumb .circle-icon {

  position: absolute;

  top: 50%;

  left: 50%;

  transform: translate(-50%, -50%);

  background-color: var(--theme);

  width: 54px;

  height: 54px;

  line-height: 54px;

  text-align: center;

  border-radius: 50%;

  color: #060606;

  opacity: 0;

  visibility: hidden;

  transition: all 0.4s ease-in-out;

  z-index: 1;

}

.project-box-items .thumb:hover .content {

  opacity: 1;

  visibility: visible;

}

.project-box-items .thumb:hover .circle-icon {

  opacity: 1;

  visibility: visible;

}

.project-box-items:hover .thumb img {

  border: 2px solid var(--theme);

  border-radius: 10px;

}



.project-box-items-2 {

  margin-top: 30px;

  position: relative;

  z-index: 9;

}

.project-box-items-2 .thumb img {

  width: 100%;

  height: 100%;

  border-radius: 10px;

}

.project-box-items-2 .project-content-items {

  display: flex;

  align-items: center;

  justify-content: space-between;

  writing-mode: vertical-rl;

  transform: rotate(180deg);

  position: absolute;

  top: 20%;

  left: -6%;

  gap: 100px;

}

.project-box-items-2 .project-content-items .content p {

  font-size: 18px;

  font-weight: 500;

}

.project-box-items-2 .project-content-items .content h3 {

  font-size: 32px;

  font-weight: 700;

  margin-top: 8px;

}

.project-box-items-2 .project-content-items .content h3 a:hover {

  color: var(--theme);

}

.project-box-items-2 .project-content-items .circle-icon {

  transition: all 0.4s ease-in-out;

  background-color: var(--theme);

  width: 54px;

  height: 54px;

  line-height: 54px;

  text-align: center;

  border-radius: 50%;

  color: #060606;

  display: inline-block;

}

.project-box-items-2 .project-content-items .circle-icon:hover {

  background-color: #060606;

  border: 1px solid var(--theme);

  color: var(--white);

}



.project-area-one {

  position: relative;

  z-index: 1;

}

@media (max-width: 1199px) {

  .project-area-one {

    margin-bottom: -120px;

  }

}

.project-area-one .section-title h2 {

  font-size: 400px;

  font-weight: 700;

  text-transform: uppercase;

  line-height: 1;

  margin-left: 50px;

}

@media (max-width: 1199px) {

  .project-area-one .section-title h2 {

    margin-left: 0;

    font-size: 220px;

  }

}

@media (max-width: 991px) {

  .project-area-one .section-title h2 {

    font-size: 170px;

  }

}

@media (max-width: 767px) {

  .project-area-one .section-title h2 {

    font-size: 140px;

  }

}

@media (max-width: 575px) {

  .project-area-one .section-title h2 {

    font-size: 100px;

  }

}

.project-area-one .project-wrapper .wrapper-rolling-text {

  white-space: nowrap;

  font-family: "Big Shoulders Display", sans-serif;

  margin-bottom: 75px;

}

.project-area-one .project-wrapper .rolling-text {

  display: inline-block;

}

.project-area-one .project-wrapper .rolling-text .marquee-text {

  color: var(--black);

  font-family: "Big Shoulders Display", sans-serif;

  font-size: 120px;

  font-style: normal;

  font-weight: 400;

  line-height: 120px;

  letter-spacing: -1.2px;

  text-transform: uppercase;

}

.project-area-one .project-wrapper .rolling-text .marquee-text span {

  color: var(--theme);

  margin: 0 43px;

}

.project-area-one .project-wrapper .card-items {

  position: relative;

  z-index: 99;

  margin-top: 30px;

  background-color: #060606;

}

.project-area-one .project-wrapper .card-items .card-single-item {

  display: flex;

  gap: 50px;

  margin-top: 30px;

}

@media (max-width: 1199px) {

  .project-area-one .project-wrapper .card-items .card-single-item {

    display: block;

  }

}

.project-area-one .project-wrapper .card-items .card-single-item .card-text-content {

  display: flex;

  justify-content: space-between;

  align-items: center;

  flex-direction: column;

  gap: 20px;

}

@media (max-width: 1199px) {

  .project-area-one .project-wrapper .card-items .card-single-item .card-text-content {

    display: block;

    margin-top: 20px;

  }

}

.project-area-one .project-wrapper .card-items .card-single-item .card-text-content .card-btn {

  width: 44px;

  height: 44px;

  display: flex;

  align-items: center;

  justify-content: center;

  background: var(--theme);

  border-radius: 100%;

  transition: 150ms ease-in-out;

  margin-left: -30px;

}

@media (max-width: 1199px) {

  .project-area-one .project-wrapper .card-items .card-single-item .card-text-content .card-btn {

    margin-left: 0;

    margin-bottom: 15px;

  }

}

.project-area-one .project-wrapper .card-items .card-single-item .card-text-content .card-btn svg path {

  transition: 150ms ease-in-out;

}

.project-area-one .project-wrapper .card-items .card-single-item .card-text-content .card-btn:hover {

  background: var(--theme);

}

.project-area-one .project-wrapper .card-items .card-single-item .card-text-content .card-content {

  writing-mode: vertical-rl;

  transform: rotate(180deg);

}

@media (max-width: 1199px) {

  .project-area-one .project-wrapper .card-items .card-single-item .card-text-content .card-content {

    transform: initial;

    writing-mode: initial;

    margin-bottom: 25px;

  }

}

.project-area-one .project-wrapper .card-items .card-single-item .card-text-content .card-content .title {

  color: var(--white);

  font-family: "Big Shoulders Display", sans-serif;

  font-size: 32px;

  font-weight: 700;

  text-transform: uppercase;

  text-align: start;

}

@media (max-width: 767px) {

  .project-area-one .project-wrapper .card-items .card-single-item .card-text-content .card-content .title {

    font-size: 28px;

  }

}

@media (max-width: 575px) {

  .project-area-one .project-wrapper .card-items .card-single-item .card-text-content .card-content .title {

    font-size: 24px;

  }

}

.project-area-one .project-wrapper .card-items .card-single-item .card-text-content .card-content .title a:hover {

  color: var(--theme);

}

.project-area-one .project-wrapper .card-items .card-single-item .card-text-content .card-content .text {

  color: var(--text);

  font-size: 18px;

  font-weight: 500;

  letter-spacing: -0.1px;

  text-transform: uppercase;

}

.project-area-one .project-wrapper .card-items .card-single-item .project-image.project-image-fast {

  margin-left: 105px;

}

@media (max-width: 1199px) {

  .project-area-one .project-wrapper .card-items .card-single-item .project-image.project-image-fast {

    margin-left: 0;

  }

}

.project-area-one .project-wrapper .card-items .card-single-item .project-image.project-image-last {

  margin-right: 105px;

}

@media (max-width: 1199px) {

  .project-area-one .project-wrapper .card-items .card-single-item .project-image.project-image-last {

    margin-right: 0;

  }

}

.project-area-one .project-wrapper .card-items .card-single-item .project-image img {

  border-radius: 20px;

  width: 100%;

}



.project-item-style-3 {

  margin-top: 30px;

  position: relative;

  z-index: 99;

}

.project-item-style-3.style-margin {

  margin-top: 100px;

}

@media (max-width: 1199px) {

  .project-item-style-3.style-margin {

    margin-top: 30px;

  }

}

.project-item-style-3 .thumb {

  max-width: 300px;

  position: relative;

  overflow: hidden;

}

@media (max-width: 1199px) {

  .project-item-style-3 .thumb {

    max-width: initial;

  }

}

.project-item-style-3 .thumb.style-width {

  max-width: initial;

}

.project-item-style-3 .thumb .arrow-icon {

  display: inline-block;

  position: absolute;

  top: -200px;

  left: 50%;

  transform: translate(-50%, -50%);

  width: 60px;

  height: 60px;

  line-height: 60px;

  text-align: center;

  border-radius: 50%;

  background-color: var(--theme);

  color: #060606;

  opacity: 0;

  visibility: hidden;

}

.project-item-style-3 .thumb .arrow-icon:hover {

  background-color: #060606;

  color: var(--theme);

}

.project-item-style-3 .thumb img {

  width: 100%;

  height: 100%;

  border-radius: 10px;

}

.project-item-style-3 .content {

  margin-top: 20px;

}

.project-item-style-3 .content span {

  display: inline-block;

  font-size: 16px;

  font-weight: 500;

  letter-spacing: -0.1px;

  text-transform: uppercase;

  margin-bottom: 5px;

  line-height: 1;

}

.project-item-style-3 .content h3 {

  font-size: 24px;

  font-weight: 700;

  letter-spacing: 0.5px;

  text-transform: uppercase;

}

.project-item-style-3 .content h3 a {

  color: #888;

}

.project-item-style-3 .content h3 a:hover {

  color: var(--white);

}

.project-item-style-3:hover .thumb .arrow-icon {

  opacity: 1;

  visibility: visible;

  top: 50%;

}



.project-inner-image {

  position: relative;

  z-index: 9;

  transition: all 0.4s ease-in-out;

}

.project-inner-image::before {

  position: absolute;

  top: 0;

  left: 0;

  right: 0;

  bottom: 0;

  width: 100%;

  height: 100%;

  content: "";

  background-color: #060606;

  opacity: 0;

  transition: all 0.4s ease-in-out;

  visibility: hidden;

}

@media (max-width: 1399px) {

  .project-inner-image {

    height: 500px;

  }

}

.project-inner-image img {

  width: 100%;

  height: 100%;

  border-radius: 6px;

  transition: all 0.4s ease-in-out;

  object-fit: cover;

}

.project-inner-image .content {

  position: absolute;

  bottom: 20px;

  left: 40px;

  opacity: 0;

  visibility: hidden;

  transition: all 0.4s ease-in-out;

  z-index: 1;

  right: 40px;

}

.project-inner-image .content p {

  font-size: 18px;

  font-weight: 500;

  color: var(--theme);

}

.project-inner-image .content h3 {

  font-size: 32px;

  font-weight: 700;

  margin-top: 8px;

}

.project-inner-image .content h3 a:hover {

  color: var(--theme);

}

.project-inner-image .circle-icon {

  position: absolute;

  top: 50%;

  left: 50%;

  transform: translate(-50%, -50%);

  background-color: var(--theme);

  width: 54px;

  height: 54px;

  line-height: 54px;

  text-align: center;

  border-radius: 50%;

  color: #060606;

  opacity: 0;

  visibility: hidden;

  transition: all 0.4s ease-in-out;

  z-index: 1;

}

.project-inner-image:hover::before {

  opacity: 1;

  visibility: visible;

  opacity: 0.3;

}

.project-inner-image:hover .content {

  opacity: 1;

  visibility: visible;

}

.project-inner-image:hover .circle-icon {

  opacity: 1;

  visibility: visible;

}



.project-details-wrapper .top-image-items {

  text-align: center;

}

.project-details-wrapper .top-image-items .list-items {

  display: flex;

  align-items: center;

  gap: 20px;

  justify-content: center;

  margin-bottom: 30px;

}

@media (max-width: 1199px) {

  .project-details-wrapper .top-image-items .list-items {

    flex-wrap: wrap;

    margin-top: 15px;

  }

}

.project-details-wrapper .top-image-items .project-details-image {

  margin-top: 30px;

  border-radius: 10px;

}

.project-details-wrapper .top-image-items .project-details-image img {

  width: 100%;

  height: 100%;

  border-radius: 10px;

}

.project-details-wrapper .bottom-content-items {

  max-width: 930px;

  margin: 0 auto;

  margin-top: 40px;

}

.project-details-wrapper .bottom-content-items h2 {

  font-size: 50px;

}

@media (max-width: 575px) {

  .project-details-wrapper .bottom-content-items h2 {

    font-size: 36px;

  }

}

.project-details-wrapper .bottom-content-items p {

  margin-top: 15px;

}

.project-details-wrapper .bottom-content-items h3 {

  font-size: 30px;

  font-weight: 700;

  margin-top: 30px;

}

.project-details-wrapper .bottom-content-items .project-image {

  margin-top: 30px;

  border-radius: 8px;

}

.project-details-wrapper .bottom-content-items .project-image img {

  width: 100%;

  height: 100%;

  border-radius: 8px;

}

.project-details-wrapper .bottom-content-items .text-list {

  margin-top: 20px;

  display: flex;

  align-items: center;

  gap: 80px;

}

@media (max-width: 1199px) {

  .project-details-wrapper .bottom-content-items .text-list {

    flex-wrap: wrap;

    gap: 30px;

  }

}

.project-details-wrapper .bottom-content-items .text-list ul li {

  margin-top: 40px;

  font-size: 20px;

  font-weight: 700;

  color: var(--white);

  font-family: "Big Shoulders Display", sans-serif;

}

.project-details-wrapper .bottom-content-items .text-list ul li b {

  font-size: 20px;

  font-weight: 700;

  color: var(--text);

  margin-right: 6px;

  font-family: "Big Shoulders Display", sans-serif;

}

.project-details-wrapper .bottom-content-items .text-list ul li p {

  font-size: 16px;

  font-weight: 400;

  color: var(--text);

  font-family: "Kanit", sans-serif;

  max-width: 330px;

}



.project-section-555 .section-title-area .section-title h2 {

  font-size: 100px;

  font-weight: 700;

}

@media (max-width: 1199px) {

  .project-section-555 .section-title-area .section-title h2 {

    font-size: 70px;

  }

}

@media (max-width: 991px) {

  .project-section-555 .section-title-area .section-title h2 {

    font-size: 55px;

  }

}

@media (max-width: 767px) {

  .project-section-555 .section-title-area .section-title h2 {

    font-size: 42px;

  }

}

@media (max-width: 575px) {

  .project-section-555 .section-title-area .section-title h2 {

    font-size: 36px;

  }

}

.project-section-555 .section-title-area .array-button {

  display: flex;

  align-items: center;

  gap: 14px;

}

.project-section-555 .section-title-area .array-button .array-prev {

  width: 48px;

  height: 48px;

  line-height: 48px;

  display: inline-block;

  border-radius: 50%;

  border: 1.5px solid rgba(255, 255, 255, 0.2);

  color: var(--theme);

  background-color: transparent;

  transition: all 0.4s ease-in-out;

}

.project-section-555 .section-title-area .array-button .array-prev:hover {

  background-color: var(--theme);

  color: var(--black);

}

.project-section-555 .section-title-area .array-button .array-next {

  width: 48px;

  height: 48px;

  line-height: 48px;

  display: inline-block;

  border-radius: 50%;

  border: 1.5px solid rgba(255, 255, 255, 0.2);

  color: var(--theme);

  background-color: transparent;

  transition: all 0.4s ease-in-out;

}

.project-section-555 .section-title-area .array-button .array-next:hover {

  background-color: var(--theme);

  color: var(--black);

}



.project-box-items-555 {

  margin-top: 30px;

}

.project-box-items-555 .thumb img {

  width: 100%;

  height: 100%;

  border-radius: 10px;

}

.project-box-items-555 .content {

  margin-top: 20px;

}

.project-box-items-555 .content p {

  color: var(--theme);

  font-weight: 500;

}

.project-box-items-555 .content h3 {

  margin-top: 8px;

}

.project-box-items-555 .content h3 a {

  font-weight: 700;

}

.project-box-items-555 .content h3 a:hover {

  color: var(--theme);

}

.project-box-items-555 .content h2 {

  margin-top: 8px;

  font-size: 24px;

}

.project-box-items-555 .content h2 a {

  font-weight: 700;

}

.project-box-items-555 .content h2 a:hover {

  color: var(--theme);

}



.project-inner-page-wrapper h1 {

  color: var(--white);

  text-align: center;

  font-size: 100px;

  font-weight: 700;

  text-transform: uppercase;

}

@media (max-width: 1199px) {

  .project-inner-page-wrapper h1 {

    font-size: 70px;

  }

}

@media (max-width: 991px) {

  .project-inner-page-wrapper h1 {

    font-size: 55px;

  }

}

@media (max-width: 767px) {

  .project-inner-page-wrapper h1 {

    font-size: 42px;

  }

}

@media (max-width: 575px) {

  .project-inner-page-wrapper h1 {

    font-size: 36px;

  }

}

.project-inner-page-wrapper .project-inner-page-box {

  border-radius: 10px;

  border: 1px solid rgba(255, 255, 255, 0.2);

  background: #060606;

  padding: 30px 35px;

  margin-top: 60px;

  display: flex;

  align-items: center;

  gap: 50px;

}

@media (max-width: 1199px) {

  .project-inner-page-wrapper .project-inner-page-box {

    display: block;

    margin-top: 30px;

    padding: 28px;

  }

}

.project-inner-page-wrapper .project-inner-page-box .thumb {

  max-width: 847px;

  width: 100%;

}

@media (max-width: 1199px) {

  .project-inner-page-wrapper .project-inner-page-box .thumb {

    max-width: initial;

    margin-bottom: 25px;

  }

}

@media (max-width: 1199px) {

  .project-inner-page-wrapper .project-inner-page-box .thumb.style-2 {

    margin-top: 25px;

    margin-bottom: 0;

  }

}

.project-inner-page-wrapper .project-inner-page-box .thumb img {

  border-radius: 10px;

  width: 100%;

  height: 100%;

}

.project-inner-page-wrapper .project-inner-page-box .content {

  max-width: 430px;

  width: 100%;

}

@media (max-width: 1199px) {

  .project-inner-page-wrapper .project-inner-page-box .content {

    max-width: 700px;

      text-align: center;

  }

}

.project-inner-page-wrapper .project-inner-page-box .content span {

  color: var(--theme);

  font-size: 16px;

  font-weight: 500;

  letter-spacing: -0.1px;

  text-transform: uppercase;

  display: inline-block;

  margin-bottom: 10px;

}

.project-inner-page-wrapper .project-inner-page-box .content h3 {

  font-size: 24px;

  font-weight: 700;

  margin-bottom: 20px;

}

.project-inner-page-wrapper .project-inner-page-box .content h3 a:hover {

  color: var(--theme);

}

.project-inner-page-wrapper .project-inner-page-box .content h2 {

  font-size: 32px;

  font-weight: 700;

  margin-bottom: 20px;

}

.project-inner-page-wrapper .project-inner-page-box .content h2 a:hover {

  color: var(--theme);

}

.project-inner-page-wrapper .project-inner-page-box .content .arrow-icon {

  display: inline-block;

  width: 60px;

  height: 60px;

  line-height: 60px;

  text-align: center;

  border-radius: 50%;

  color: var(--black);

  background-color: var(--theme);

  margin-top: 40px;

}

.project-inner-page-wrapper .project-inner-page-box .content .arrow-icon:hover {

  background-color: var(--white);

}



.project-grid-section {

  padding: 160px 0 120px;

}

.project-grid-section h1 {

  color: var(--white);

  text-align: center;

  font-size: 100px;

  font-weight: 700;

  text-transform: uppercase;

  line-height: 1;

}

@media (max-width: 1199px) {

  .project-grid-section h1 {

    font-size: 70px;

  }

}

@media (max-width: 991px) {

  .project-grid-section h1 {

    font-size: 55px;

  }

}

@media (max-width: 767px) {

  .project-grid-section h1 {

    font-size: 42px;

  }

}

@media (max-width: 575px) {

  .project-grid-section h1 {

    font-size: 36px;

  }

}

.project-grid-section .nav {

  display: flex;

  align-items: center;

  justify-content: center;

  margin-top: 40px;

}

.project-grid-section .nav .nav-item .nav-link {

  color: #888;

  font-size: 16px;

  font-weight: 500;

  letter-spacing: 0.5px;

  text-transform: uppercase;

}

.project-grid-section .nav .nav-item .nav-link.active {

  color: var(--theme);

}



.project-section .project-btn-all {

  display: flex;

  align-items: center;

  justify-content: center;

  border-radius: 100px;

  background: #1A1A1A;

  max-width: 530px;

  padding: 12px 16px;

  gap: 20px;

  margin: 50px auto 0;

  position: relative;

  z-index: 99;

}

@media (max-width: 1199px) {

  .project-section .project-btn-all {

    flex-wrap: wrap;

  }

}

.project-section .project-btn-all .theme-btn {

  border-radius: 100px;

  border: 1px solid rgba(255, 255, 255, 0.2);

  background: #060606;

}



.project-section-4 .container {

  max-width: 1700px;

}

.project-section-4 h2 {

  font-size: 300px;

  line-height: 1;

  text-transform: uppercase;

  color: var(--white);

  font-family: "Big Shoulders Display", sans-serif;

}

@media (max-width: 1399px) {

  .project-section-4 h2 {

    font-size: 210px;

  }

}

@media (max-width: 1199px) {

  .project-section-4 h2 {

    font-size: 170px;

  }

}

@media (max-width: 767px) {

  .project-section-4 h2 {

    font-size: 140px;

  }

}

@media (max-width: 575px) {

  .project-section-4 h2 {

    font-size: 100px;

  }

}



.project-box-items-4 {

  background-color: var(--white);

  padding: 20px;

  border-radius: 20px;

}

.project-box-items-4.style-2 {

  max-width: initial;

}

.project-box-items-4.style-2 .project-content h3 {

  font-size: 34px;

}

.project-box-items-4.style-2 .project-content .circle-icon {

  width: 48px;

  height: 48px;

  line-height: 48px;

}

.project-box-items-4 .thumb img {

  width: 100%;

  height: 100%;

}

.project-box-items-4 .project-content {

  padding: 30px 0 20px;

  position: relative;

}

.project-box-items-4 .project-content span {

  font-size: 16px;

  font-weight: 500;

  display: inline-block;

  margin-bottom: 5px;

  color: var(--black);

}

.project-box-items-4 .project-content h3 {

  font-size: 42px;

  font-weight: 700;

}

.project-box-items-4 .project-content h3 a {

  color: var(--black);

}

.project-box-items-4 .project-content .circle-icon {

  background-color: var(--black);

  width: 60px;

  height: 60px;

  line-height: 60px;

  text-align: center;

  border-radius: 50%;

  color: var(--theme);

  transition: all 0.4s ease-in-out;

  z-index: 1;

  display: inline-block;

  position: absolute;

  right: 0;

  top: 50px;

}



.project-box-items-wrap4 {

  margin-bottom: 200px;

  position: relative;

  z-index: 99;

}

@media (max-width: 1199px) {

  .project-box-items-wrap4 {

    margin-bottom: 30px;

  }

}



.portfolio {

  width: 100vw;

  height: 100vh;

}

.portfolio__item {

  width: 100vw;

  height: 100vh;

  position: relative;

  background-size: cover;

  background-position: center;

  background-repeat: no-repeat;

  transition: 0.8s cubic-bezier(0.37, 0.23, 0, 0.96);

}

.portfolio__content {

  z-index: 9;

  left: 50px;

  bottom: 200px;

  position: absolute;

}

.portfolio__content-title {

  opacity: 0;

  font-size: 100px;

  line-height: 1.05;

  color: var(--white);

  transform: translateY(-130px);

}

.portfolio__content-title a:hover {

  color: var(--white);

}

.portfolio__list {

  opacity: 0;

  display: flex;

  margin-top: 40px;

  align-items: center;

  transform: translateY(-150px);

}

.portfolio__list li a {

  font-size: 14px;

  border-radius: 20px;

  padding: 10px 17px;

  border-radius: 20px;

  color: var(--white);

  text-transform: uppercase;

  border: 1px solid rgba(255, 255, 255, 0.2);

}

.portfolio .swiper-slide {

  overflow: hidden;

}

.portfolio-activ {

  width: 100%;

  height: 100%;

  position: absolute;

  left: 0;

  top: 0;

}

.portfolio .slide-inner {

  width: 100%;

  height: 100%;

  position: absolute;

  left: 0;

  top: 0;

  z-index: 1;

  background-size: cover;

  background-position: center;

  display: flex;

  justify-content: center;

  align-items: center;

  text-align: left;

}

.portfolio .swiper-slide-active .portfolio__item {

  animation-name: qodef-animate-slide-out;

  animation-duration: 1.3s;

  animation-fill-mode: forwards;

}

.portfolio .swiper-slide-active .portfolio__content-title {

  opacity: 1;

  transform: translatey(0px);

  transition: all 2200ms ease;

}

.portfolio .swiper-slide-active .portfolio__list {

  opacity: 1;

  transform: translatey(0px);

  transition: all 2000ms ease;

}

.portfolio__slider__arrow {

  gap: 40px;

  right: 50px;

  bottom: 50px;

  z-index: 99;

  display: flex;

  position: absolute;

  align-items: center;

}

.portfolio__slider__arrow-prev, .portfolio__slider__arrow-next {

  gap: 8px;

  display: flex;

  font-size: 14px;

  font-weight: 600;

  align-items: center;

  color: var(--white);

}

.portfolio .portfolio-pagination {

  position: absolute;

  bottom: 50px;

  left: 50px;

  z-index: 9;

  display: inline-block;

}

.portfolio .swiper-pagination-bullet {

  width: 150px;

  height: 10px;

  display: inline-block;

  margin: 0 5px;

  overflow: hidden;

  transition: 0.4s;

  position: relative;

  border-radius: 5px;

  background: rgba(255, 255, 255, 0.3);

}

.portfolio .swiper-pagination-bullet::before {

  content: "";

  width: 150px;

  height: 100%;

  position: absolute;

  transition: 0.6s;

  z-index: 9;

  left: 0;

  border-radius: 5px;

  background: rgba(255, 255, 255, 0.3);

}

.portfolio .swiper-pagination-bullet::after {

  content: "";

  width: 0;

  height: 100%;

  position: absolute;

  transition: 0.6s;

  z-index: 8;

  left: 0;

  background-color: white;

}

.portfolio .swiper-pagination-bullet-active::after {

  opacity: 1;

  width: 100%;

}



.testimonial-wrapper {

  margin-right: -71%;

  position: relative;

  /* Number pagination styling */

  /* Optional: center the pagination below slider */

}

.testimonial-wrapper .array-button {

  display: grid;

  align-items: center;

  gap: 15px;

  position: absolute;

  top: 50%;

  transform: translateY(-50%);

  left: -3%;

  z-index: 999;

}

@media (max-width: 1600px) {

  .testimonial-wrapper .array-button {

    display: none;

  }

}

.testimonial-wrapper .array-button .array-prev, .testimonial-wrapper .array-button .array-next {

  border-radius: 100px;

  border: 1.5px solid rgba(255, 255, 255, 0.2);

  width: 48px;

  height: 48px;

  line-height: 48px;

  text-align: center;

  border-radius: 50%;

  color: var(--theme);

  transition: all 0.4s ease-in-out;

  cursor: pointer;

}

.testimonial-wrapper .array-button .array-prev:hover, .testimonial-wrapper .array-button .array-next:hover {

  background-color: var(--theme);

  color: #060606;

}

@media (max-width: 1399px) {

  .testimonial-wrapper {

    margin-right: 0;

  }

}

.testimonial-wrapper .swiper-pagination {

  font-size: 22px;

  font-weight: 400;

  color: #000;

  position: absolute;

  bottom: 60px;

  left: -90px;

}

.testimonial-wrapper .swiper-pagination {

  text-align: center;

  margin-top: 15px; /* adjust as needed */

}

.testimonial-wrapper .testimonial-box-items {

  padding: 36px;

  background-color: var(--theme);

  border-radius: 10px;

  display: flex;

  align-items: center;

  gap: 40px;

}

@media (max-width: 1399px) {

  .testimonial-wrapper .testimonial-box-items {

    display: block;

    padding: 30px;

  }

}

@media (max-width: 470px) {

  .testimonial-wrapper .testimonial-box-items {

    padding: 24px;

  }

}

.testimonial-wrapper .testimonial-box-items .thumb {

  max-width: 335px;

  position: relative;

}

@media (max-width: 1399px) {

  .testimonial-wrapper .testimonial-box-items .thumb {

    max-width: initial;

    height: 500px;

  }

}

.testimonial-wrapper .testimonial-box-items .thumb img {

  width: 100%;

  height: 100%;

  border-radius: 10px;

  object-fit: cover;

}

.testimonial-wrapper .testimonial-box-items .thumb .info-title {

  background-color: var(--white);

  padding: 16px;

  position: absolute;

  bottom: 0;

  left: 0;

  right: 0;

  border-bottom-left-radius: 10px;

  border-bottom-right-radius: 10px;

}

.testimonial-wrapper .testimonial-box-items .thumb .info-title h3 {

  font-size: 20px;

  font-weight: 500;

  font-family: "Kanit", sans-serif;

  color: #060606;

  margin-bottom: 5px;

}

.testimonial-wrapper .testimonial-box-items .content {

  max-width: 740px;

}

@media (max-width: 1399px) {

  .testimonial-wrapper .testimonial-box-items .content {

    margin-top: 20px;

  }

}

@media (max-width: 470px) {

  .testimonial-wrapper .testimonial-box-items .content {

    padding: 0 15px;

  }

}

.testimonial-wrapper .testimonial-box-items .content .quote-icon {

  margin-bottom: 30px;

}

@media (max-width: 1399px) {

  .testimonial-wrapper .testimonial-box-items .content .quote-icon {

    margin-bottom: 10px;

  }

}

.testimonial-wrapper .testimonial-box-items .content p {

  font-size: 24px;

  font-weight: 400;

  color: #060606;

  text-transform: capitalize;

  line-height: 187%;

}

@media (max-width: 1399px) {

  .testimonial-wrapper .testimonial-box-items .content p {

    font-size: 20px;

  }

}

@media (max-width: 991px) {

  .testimonial-wrapper .testimonial-box-items .content p {

    font-size: 18px;

  }

}

@media (max-width: 470px) {

  .testimonial-wrapper .testimonial-box-items .content p {

    font-size: 16px;

  }

}

.testimonial-wrapper .testimonial-box-items .content .clutech-image {

  margin-top: 60px;

}

@media (max-width: 1399px) {

  .testimonial-wrapper .testimonial-box-items .content .clutech-image {

    margin-top: 30px;

  }

}



.testimonial-section-2 .section-title-area h2 span {

  color: var(--theme);

}



.testimonial-wrapper-2 {

  border-top: 1px solid rgba(255, 255, 255, 0.2);

  padding-top: 15px;

  margin-right: -45%;

  margin-top: 30px;

}

@media (max-width: 991px) {

  .testimonial-wrapper-2 {

    margin-right: 0;

  }

}

.testimonial-wrapper-2 .testimonial-content {

  margin-top: 30px;

  border-right: 1px solid rgba(255, 255, 255, 0.2);

}

@media (max-width: 1199px) {

  .testimonial-wrapper-2 .testimonial-content {

    border-right: none;

  }

}

.testimonial-wrapper-2 .testimonial-content h2 {

  margin-top: 100px;

  font-size: 50px;

}

@media (max-width: 991px) {

  .testimonial-wrapper-2 .testimonial-content h2 {

    margin-top: 30px;

  }

}

.testimonial-wrapper-2 .testimonial-content .star {

  color: rgb(236, 176, 20);

  margin-top: 6px;

}

.testimonial-wrapper-2 .testimonial-content p {

  font-weight: 500;

  color: var(--white);

  margin-top: 5px;

}

.testimonial-wrapper-2 .testimonial-content .logo-image-items {

  display: flex;

  align-items: center;

  gap: 30px;

  margin-top: 80px;

}

@media (max-width: 991px) {

  .testimonial-wrapper-2 .testimonial-content .logo-image-items {

    margin-top: 30px;

  }

}

.testimonial-wrapper-2 .testimonial-box-items-2 {

  margin-top: 30px;

  border-right: 1px solid rgba(255, 255, 255, 0.2);

  padding-right: 30px;

}

.testimonial-wrapper-2 .testimonial-box-items-2 .icon-box {

  display: flex;

  align-items: center;

  justify-content: space-between;

}

.testimonial-wrapper-2 .testimonial-box-items-2 .icon-box .star {

  color: #ECB014;

}

.testimonial-wrapper-2 .testimonial-box-items-2 .quote-image {

  margin-top: 40px;

}

.testimonial-wrapper-2 .testimonial-box-items-2 p {

  font-size: 20px;

  font-weight: 400;

  margin-top: 30px;

}

@media (max-width: 575px) {

  .testimonial-wrapper-2 .testimonial-box-items-2 p {

    font-size: 17px;

  }

}

.testimonial-wrapper-2 .testimonial-box-items-2 .client-info {

  display: flex;

  align-items: center;

  gap: 20px;

  margin-top: 40px;

}

@media (max-width: 575px) {

  .testimonial-wrapper-2 .testimonial-box-items-2 .client-info {

    margin-top: 20px;

  }

}

.testimonial-wrapper-2 .testimonial-box-items-2 .client-info .client-content h3 {

  font-size: 24px;

  font-weight: 800;

}



.testimonial-box-items-3 {

  border-radius: 6px;

  border: 1px solid rgba(255, 255, 255, 0.2);

  background: #060606;

  padding: 20px;

}

.testimonial-box-items-3 .quote-icon {

  margin-bottom: 15px;

}

.testimonial-box-items-3 p {

  color: #888;

  font-size: 20px;

  font-weight: 400;

  line-height: 160%;

  letter-spacing: -0.1px;

  text-transform: uppercase;

}

@media (max-width: 1199px) {

  .testimonial-box-items-3 p {

    font-size: 16px;

  }

}

.testimonial-box-items-3 .bottom-item {

  margin-top: 15px;

  display: flex;

  align-items: center;

  justify-content: space-between;

}

.testimonial-box-items-3 .bottom-item .star {

  color: #ECB014;

}



.tetsimonial-image-3 {

  border-radius: 6px;

  height: 292px;

  overflow: hidden;

}

.tetsimonial-image-3 img {

  width: 100%;

  height: 100%;

  border-radius: 6px;

}

@media (max-width: 991px) {

  .tetsimonial-image-3 {

    max-width: 212px;

  }

}



.testimonial-section-3 .array-button {

  display: flex;

  align-items: center;

  gap: 14px;

  margin-top: 30px;

}

.testimonial-section-3 .array-button .array-prev {

  width: 48px;

  height: 48px;

  line-height: 48px;

  display: inline-block;

  border-radius: 50%;

  border: 1.5px solid rgba(255, 255, 255, 0.2);

  color: var(--theme);

  background-color: transparent;

  transition: all 0.4s ease-in-out;

}

.testimonial-section-3 .array-button .array-prev:hover {

  background-color: var(--theme);

  color: var(--black);

}

.testimonial-section-3 .array-button .array-next {

  width: 48px;

  height: 48px;

  line-height: 48px;

  display: inline-block;

  border-radius: 50%;

  border: 1.5px solid rgba(255, 255, 255, 0.2);

  color: var(--theme);

  background-color: transparent;

  transition: all 0.4s ease-in-out;

}

.testimonial-section-3 .array-button .array-next:hover {

  background-color: var(--theme);

  color: var(--black);

}



.testimonial-box-items-4 {

  margin-top: 30px;

  border-radius: 16px;

  border: 1px solid #232323;

  background: #232323;

  padding: 16px 30px;

}

@media (max-width: 1199px) {

  .testimonial-box-items-4 {

    max-width: 660px;

  }

}

.testimonial-box-items-4 .testi-card-items {

  padding: 30px 40px;

  background-repeat: no-repeat;

  background-position: center;

  position: relative;

}

@media (max-width: 1899px) {

  .testimonial-box-items-4 .testi-card-items {

    background-image: none !important;

    padding: 0;

  }

}

.testimonial-box-items-4 .testi-card-items .client-info {

  display: flex;

  align-items: center;

  gap: 40px;

  padding-left: 80px;

  margin-bottom: 30px;

  padding-top: 10px;

}

@media (max-width: 1899px) {

  .testimonial-box-items-4 .testi-card-items .client-info {

    padding-left: 0;

  }

}

.testimonial-box-items-4 .testi-card-items .client-info .thumb {

  position: absolute;

  top: 20px;

  left: 2px;

  width: 75px;

  height: 61px;

}

@media (max-width: 1899px) {

  .testimonial-box-items-4 .testi-card-items .client-info .thumb {

    position: static;

  }

}

.testimonial-box-items-4 .testi-card-items .client-info .thumb img {

  border-radius: 16px;

  width: 100%;

  height: 100%;

}

.testimonial-box-items-4 .testi-card-items .client-info .content h5 {

  font-size: 20px;

  font-weight: 600;

  color: var(--white);

}

.testimonial-box-items-4 .testi-card-items .client-info .content span {

  color: var(--white);

}

.testimonial-box-items-4 .testi-card-items p {

  color: var(--white);

  font-style: italic;

  line-height: 175%;

  padding-bottom: 10px;

}



.testimonial-section-4 {

  margin: 0 40px;

  border-radius: 20px;

  background: #1A1A1A;

  margin-bottom: 120px;

}

@media (max-width: 1399px) {

  .testimonial-section-4 {

    margin: 0 30px;

    margin-bottom: 100px;

  }

}

@media (max-width: 575px) {

  .testimonial-section-4 {

    margin: 0 15px;

    margin-bottom: 80px;

  }

}



.testimonial-wrapper-4 {

  position: relative;

  z-index: 9;

  margin-bottom: 60px;

  margin-top: 80px;

}

@media (max-width: 1399px) {

  .testimonial-wrapper-4 {

    margin-top: 30px;

    margin-bottom: 0px;

  }

}

.testimonial-wrapper-4 .ball-shape {

  position: absolute;

  z-index: -1;

  left: 319px;

  bottom: -100px;

}

@media (max-width: 1399px) {

  .testimonial-wrapper-4 .ball-shape {

    display: none;

  }

}

.testimonial-wrapper-4 .ball-shape img {

  animation: rotateBall 10s linear infinite;

}

.testimonial-wrapper-4 .chaka-shape {

  position: absolute;

  left: 400px;

  top: -50px;

  z-index: -1;

}

@media (max-width: 1399px) {

  .testimonial-wrapper-4 .chaka-shape {

    display: none;

  }

}

.testimonial-wrapper-4 .chaka-shape img {

  animation: rotateBall 10s linear infinite;

}

.testimonial-wrapper-4 .box-shape {

  position: absolute;

  top: 140px;

  right: 215px;

  z-index: -1;

}

@media (max-width: 1399px) {

  .testimonial-wrapper-4 .box-shape {

    display: none;

  }

}

.testimonial-wrapper-4 .box-shape img {

  animation: rotateBall 10s linear infinite;

}

.testimonial-wrapper-4 .testimonial-box-items-5 {

  text-align: center;

  padding: 70px 62px 60px;

  position: relative;

  border-radius: 46.916px;

  border: none;

  background: linear-gradient(142deg, rgba(254, 248, 255, 0.21) 1.8%, rgba(254, 248, 255, 0) 99.75%);

  backdrop-filter: blur(75.6949996948px);

}

@media (max-width: 991px) {

  .testimonial-wrapper-4 .testimonial-box-items-5 {

    padding: 45px 30px 45px;

  }

}

@media (max-width: 575px) {

  .testimonial-wrapper-4 .testimonial-box-items-5 {

    padding: 30px;

  }

}

.testimonial-wrapper-4 .testimonial-box-items-5 .testimonial-content .quate {

  text-align-last: left;

  margin-bottom: 10px;

}

.testimonial-wrapper-4 .testimonial-box-items-5 .testimonial-content p {

  font-size: 18px;

  font-style: italic;

  font-weight: 400;

  color: var(--white);

  letter-spacing: 0.6px;

  line-height: 190%;

  text-transform: capitalize;

}

@media (max-width: 1399px) {

  .testimonial-wrapper-4 .testimonial-box-items-5 .testimonial-content p {

    font-size: 16px;

  }

}

.testimonial-wrapper-4 .testimonial-box-items-5 .testimonial-content .client-image {

  text-align: center;

  margin-top: 20px;

}

.testimonial-wrapper-4 .testimonial-box-items-5 .testimonial-content .text {

  text-align: center;

}

.testimonial-wrapper-4 .testimonial-box-items-5 .testimonial-content .text h4 {

  font-size: 19px;

  color: var(--white);

  letter-spacing: 0.95px;

  text-transform: uppercase;

}

.testimonial-wrapper-4 .testimonial-box-items-5 .testimonial-content .text span {

  font-size: 18px;

  font-weight: 300;

  text-transform: capitalize;

}

.testimonial-wrapper-4 .testimonial-box-items-5 .arrow-button .array-prev {

  color: #80859F;

  position: absolute;

  bottom: 120px;

  left: 62px;

  transition: all 0.4s ease-in-out;

  z-index: 999;

}

.testimonial-wrapper-4 .testimonial-box-items-5 .arrow-button .array-prev:hover {

  color: var(--white);

}

.testimonial-wrapper-4 .testimonial-box-items-5 .arrow-button .array-next {

  color: var(--white);

  position: absolute;

  bottom: 120px;

  right: 62px;

  transition: all 0.4s ease-in-out;

  z-index: 999;

}

.testimonial-wrapper-4 .testimonial-box-items-5 .arrow-button .array-next:hover {

  color: var(--theme);

}



.coverflow-slider-wrap {

  display: flex;

  align-items: center;

  height: 50vh;

  margin-top: 230px;

}

.coverflow-slider-wrap .swiper-container {

  width: 100%;

}

.coverflow-slider-wrap .swiper-container .swiper-slide {

  width: 800px;

  height: 500px;

}

.coverflow-slider-wrap .swiper-container .swiper-slide .slide-image {

  height: 480px;

}

@media (max-width: 1399px) {

  .coverflow-slider-wrap .swiper-container .swiper-slide .slide-image {

    height: 380px;

  }

}

.coverflow-slider-wrap .swiper-container .swiper-slide .slide-image img {

  width: 100%;

  height: 100%;

  object-fit: cover;

}



.coverflow-slider-text-wrap {

  margin-top: 0px;

  text-align: center;

}



.coverflow-slider-text-active {

  width: 100%;

  height: 60px;

  overflow: hidden;

  position: relative;

}



.coverflow-slider-text-active .swiper-wrapper {

  display: flex;

  flex-direction: column;

}



.coverflow-slider-text-active .swiper-slide {

  display: flex;

  align-items: center;

  justify-content: center;

  height: 100%;

}



.coverflow-slider-text-active .coverflow-slider-content h4 {

  color: #fff;

  font-size: 50px;

  font-weight: 700;

  margin: 0;

  opacity: 0.5;

  transform: scale(0.9);

  transition: all 0.6s ease;

}

@media (max-width: 1399px) {

  .coverflow-slider-text-active .coverflow-slider-content h4 {

    font-size: 40px;

  }

}

@media (max-width: 991px) {

  .coverflow-slider-text-active .coverflow-slider-content h4 {

    font-size: 40px;

  }

}

@media (max-width: 767px) {

  .coverflow-slider-text-active .coverflow-slider-content h4 {

    font-size: 20px;

  }

}



.coverflow-slider-text-active .swiper-slide-active h4 {

  transform: scale(1.2);

  opacity: 1;

}



.coverflow-slider-main .pagi-item {

  display: flex;

  align-items: center;

  justify-content: space-between;

  margin-top: 50px;

  margin-left: 20px;

  margin-right: 20px;

}

@media (max-width: 1399px) {

  .coverflow-slider-main .pagi-item {

    display: none;

  }

}

.coverflow-slider-main .pagi-item .dot-number {

  display: flex;

  align-items: center;

  gap: 20px;

}

@media (max-width: 767px) {

  .coverflow-slider-main .pagi-item .dot-number {

    display: none;

  }

}

.coverflow-slider-main .pagi-item .dot-number .swiper-pagination-bullet-active .dot-num span {

  color: var(--theme);

}

.coverflow-slider-main .pagi-item .dot-number .dot-num span {

  font-size: 16px;

  font-weight: 700;

  color: #fff;

  font-family: "Big Shoulders Display", sans-serif;

}

.coverflow-slider-main .pagi-item .arrow-button {

  display: flex;

  align-items: center;

  gap: 24px;

}

.coverflow-slider-main .pagi-item .arrow-button .array-prev {

  width: 60px;

  height: 60px;

  line-height: 60px;

  text-align: center;

  border: 1px solid var(--white);

  color: var(--white);

  border-radius: 100px;

  z-index: 99999;

  transition: all 0.4s ease-in-out;

  cursor: pointer;

}

.coverflow-slider-main .pagi-item .arrow-button .array-prev:hover {

  background-color: var(--theme);

  border: 1px solid var(--theme);

  color: var(--bg);

  z-index: 9999;

}

.coverflow-slider-main .pagi-item .arrow-button .array-next {

  width: 60px;

  height: 60px;

  line-height: 60px;

  text-align: center;

  border: 1px solid var(--white);

  color: var(--white);

  border-radius: 100px;

  z-index: 999;

  transition: all 0.4s ease-in-out;

}

.coverflow-slider-main .pagi-item .arrow-button .array-next:hover {

  background-color: var(--theme);

  border: 1px solid var(--theme);

  color: var(--bg);

}



.pricing-box-items {

  border-radius: 10px;

  border: 1px solid rgba(255, 255, 255, 0.2);

  background: #060606;

  padding: 0px 40px 40px;

  transition: all 0.4s ease-in-out;

}

.pricing-box-items .pricing-header h2 {

  font-size: 40px;

  color: var(--text);

  transition: all 0.4s ease-in-out;

}

.pricing-box-items .pricing-header p {

  margin-top: 5px;

  transition: all 0.4s ease-in-out;

}

.pricing-box-items .circle-icon {

  background-color: transparent;

  width: 60px;

  border: 1px solid rgba(255, 255, 255, 0.2);

  height: 60px;

  line-height: 60px;

  text-align: center;

  border-radius: 50%;

  color: var(--text);

  transition: all 0.4s ease-in-out;

  display: inline-block;

  margin-top: 40px;

}

.pricing-box-items ul {

  margin-top: 40px;

}

.pricing-box-items ul li i {

  margin-right: 18px;

}

.pricing-box-items ul li:not(:last-child) {

  margin-bottom: 15px;

}

.pricing-box-items h2 {

  color: #303030;

  margin-top: 40px;

  transition: all 0.4s ease-in-out;

}

.pricing-box-items.style-2 .pricing-header {

  display: flex;

  align-items: center;

  justify-content: space-between;

}

.pricing-box-items.style-2 .pricing-header span {

  border-radius: 100px;

  background: rgba(191, 247, 71, 0.1);

  color: var(--theme);

  line-height: 1;

  padding: 10px;

}

.pricing-box-items:hover {

  border-radius: 10px;

  border: 1px solid #BFF747;

  background: #1A1A1A;

}

.pricing-box-items:hover .pricing-header h2 {

  color: var(--theme);

}

.pricing-box-items:hover .circle-icon {

  background-color: var(--theme);

  color: #060606;

}

.pricing-box-items:hover h2 {

  color: var(--white);

}

.pricing-box-items.active {

  border-radius: 10px;

  border: 1px solid #BFF747;

  background: #1A1A1A;

}

.pricing-box-items.active .pricing-header h2 {

  color: var(--theme);

}

.pricing-box-items.active .circle-icon {

  background-color: var(--theme);

  color: #060606;

}

.pricing-box-items.active h2 {

  color: var(--white);

}



.pricing-content {

  margin-left: 40px;

  position: relative;

  z-index: 9;

}

@media (max-width: 1199px) {

  .pricing-content {

    margin-left: 0;

  }

}

.pricing-content .section-title h2 {

  font-size: 50px;

}

.pricing-content .shape-1 {

  position: absolute;

  z-index: -1;

  left: 10%;

}

@media (max-width: 1399px) {

  .pricing-content .shape-1 {

    display: none;

  }

}

.pricing-content .client-info {

  display: flex;

  align-items: center;

  gap: 20px;

  margin-top: 150px;

  margin-left: 90px;

}

@media (max-width: 1399px) {

  .pricing-content .client-info {

    margin-left: 0;

    margin-top: 30px;

  }

}



.news-main-box-items {

  margin-top: 30px;

  display: flex;

  align-items: center;

  justify-content: space-between;

  border-top: 1px solid rgba(255, 255, 255, 0.2);

  padding-top: 40px;

  background-color: #060606;

}

@media (max-width: 1199px) {

  .news-main-box-items {

    display: block;

    padding-top: 28px;

  }

}

@media (max-width: 1199px) {

  .news-main-box-items .news-content {

    margin-bottom: 30px;

  }

}

.news-main-box-items .news-content h3 {

  font-size: 30px;

  font-weight: 500;

}

@media (max-width: 1199px) {

  .news-main-box-items .news-content h3 {

    font-size: 26px;

  }

}

@media (max-width: 767px) {

  .news-main-box-items .news-content h3 {

    font-size: 24px;

  }

}

@media (max-width: 575px) {

  .news-main-box-items .news-content h3 {

    font-size: 22px;

  }

}

.news-main-box-items .news-content h3 a:hover {

  color: var(--theme);

}

.news-main-box-items .news-content ul {

  margin-top: 30px;

  display: flex;

  align-items: center;

  gap: 80px;

}

@media (max-width: 1199px) {

  .news-main-box-items .news-content ul {

    flex-wrap: wrap;

    gap: 30px;

  }

}

.news-main-box-items .news-content ul li .client-info {

  display: flex;

  align-items: center;

  gap: 20px;

}

.news-main-box-items .news-content ul li .client-info .client-content .name {

  font-size: 16px;

  font-weight: 500;

}

.news-main-box-items .news-content ul li .client-info .client-content p {

  font-size: 14px;

  font-weight: 400;

}

.news-main-box-items .news-content ul li span {

  border-radius: 4px;

  background: #C9F31D;

  padding: 5px 10px;

  line-height: 1;

  color: rgb(6, 6, 6);

  margin-right: 10px;

  line-height: 1;

}

.news-main-box-items .news-content ul li span.color-2 {

  border-radius: 4px;

  background: rgba(191, 247, 71, 0.1);

  color: var(--theme);

}

.news-main-box-items .news-image img {

  width: 100%;

  height: 100%;

  border-radius: 6px;

}



.news-section-2 .section-title-area h2 span {

  color: var(--theme);

}



.news-box-items-2 {

  margin-top: 30px;

}

.news-box-items-2 .thumb {

  position: relative;

  z-index: 9;

}

.news-box-items-2 .thumb img {

  width: 100%;

  height: 100%;

  border-radius: 6px;

}

.news-box-items-2 .thumb ul {

  position: absolute;

  top: 20px;

  left: 20px;

}

.news-box-items-2 .thumb ul li span {

  border-radius: 4px;

  background: #C9F31D;

  padding: 5px 10px;

  line-height: 1;

  color: rgb(6, 6, 6);

  margin-right: 10px;

  line-height: 1;

}

.news-box-items-2 .thumb ul li span.color-2 {

  border-radius: 4px;

  background: rgba(191, 247, 71, 0.1);

  color: var(--theme);

}

.news-box-items-2 .content {

  margin-top: 20px;

}

.news-box-items-2 .content h3 {

  font-size: 24px;

  font-weight: 500;

  border-bottom: 1px solid rgba(255, 255, 255, 0.2);

  padding-bottom: 20px;

  transition: all 0.4s ease-in-out;

}

.news-box-items-2 .content h3 a:hover {

  color: var(--theme);

}

.news-box-items-2 .content h2 {

  font-size: 24px;

  font-weight: 500;

  border-bottom: 1px solid rgba(255, 255, 255, 0.2);

  padding-bottom: 20px;

  transition: all 0.4s ease-in-out;

}

.news-box-items-2 .content h2 a:hover {

  color: var(--theme);

}

.news-box-items-2 .content .client-info-area {

  margin-top: 20px;

  display: flex;

  align-items: center;

  justify-content: space-between;

}

.news-box-items-2 .content .client-info-area .client-info {

  display: flex;

  align-items: center;

  gap: 20px;

}

.news-box-items-2 .content .client-info-area .client-info .client-content .name {

  font-size: 16px;

  font-weight: 500;

}

.news-box-items-2 .content .client-info-area .client-info .client-content p {

  font-size: 14px;

  font-weight: 400;

}

.news-box-items-2 .content .client-info-area .circle-icon {

  background-color: transparent;

  width: 48px;

  border: 1px solid rgba(255, 255, 255, 0.2);

  height: 48px;

  line-height: 48px;

  text-align: center;

  border-radius: 50%;

  color: var(--theme);

  transition: all 0.4s ease-in-out;

  display: inline-block;

}

.news-box-items-2 .content .client-info-area .circle-icon:hover {

  background-color: var(--theme);

  color: rgb(6, 6, 6);

}



.news-style-item-3 {

  border-bottom: 1px solid rgba(255, 255, 255, 0.2);

  padding-bottom: 30px;

  margin-bottom: 30px;

}

.news-style-item-3.bb-none {

  border-bottom: none;

  padding-bottom: 0;

  margin-bottom: 0;

}

@media (max-width: 767px) {

  .news-style-item-3 .thumb {

    height: 200px;

  }

}

.news-style-item-3 .thumb img {

  width: 100%;

  height: 100%;

  border-radius: 10px;

  object-fit: cover;

}

.news-style-item-3 .content {

  margin-top: 30px;

}

.news-style-item-3 .content ul {

  margin-bottom: 30px;

}

.news-style-item-3 .content ul li span {

  border-radius: 4px;

  background: #C9F31D;

  padding: 6px 10px;

  line-height: 1;

  color: rgb(6, 6, 6);

  margin-right: 10px;

  line-height: 1;

}

.news-style-item-3 .content ul li span.color-2 {

  border-radius: 4px;

  background: rgba(191, 247, 71, 0.1);

  color: var(--theme);

}

.news-style-item-3 .content h3 {

  font-size: 30px;

  font-weight: 500;

  line-height: 150%;

  text-transform: uppercase;

}

@media (max-width: 1199px) {

  .news-style-item-3 .content h3 {

    font-size: 25px;

  }

}

@media (max-width: 991px) {

  .news-style-item-3 .content h3 {

    font-size: 24px;

  }

}

@media (max-width: 767px) {

  .news-style-item-3 .content h3 {

    font-size: 22px;

  }

}

@media (max-width: 575px) {

  .news-style-item-3 .content h3 {

    font-size: 20px;

  }

}

.news-style-item-3 .content h3 a {

  color: var(--white);

}

.news-style-item-3 .content h3 a:hover {

  color: var(--theme);

}

.news-style-item-3 .content .client-info {

  display: flex;

  align-items: center;

  gap: 20px;

  margin-top: 30px;

}

.news-style-item-3 .content .client-info .client-content .name {

  font-size: 16px;

  font-weight: 500;

}

.news-style-item-3 .content .client-info .client-content p {

  font-size: 14px;

  font-weight: 400;

}



.news-grid-section1 {

  padding: 160px 0 120px;

}

.news-grid-section1 h1 {

  color: var(--white);

  font-size: 100px;

  font-weight: 700;

  text-transform: uppercase;

  text-align: center;

  margin-bottom: 30px;

}

@media (max-width: 767px) {

  .news-grid-section1 h1 {

    font-size: 80px;

  }

}

@media (max-width: 575px) {

  .news-grid-section1 h1 {

    font-size: 50px;

  }

}

.news-grid-section1 .bb-bottom {

  border-bottom: 1px solid rgba(255, 255, 255, 0.2);

  padding-bottom: 70px;

}



.news-standard-box-items {

  max-width: 930px;

  margin: 30px auto 0;

  border-bottom: 1px solid rgba(255, 255, 255, 0.2);

  padding-bottom: 40px;

}

.news-standard-box-items .thumb img {

  width: 100%;

  height: 100%;

  border-radius: 6px;

}

.news-standard-box-items .content {

  margin-top: 30px;

}

.news-standard-box-items .content h2 {

  font-size: 30px;

  font-weight: 500;

  line-height: 150%;

  text-transform: uppercase;

}

@media (max-width: 575px) {

  .news-standard-box-items .content h2 {

    font-size: 24px;

  }

}

.news-standard-box-items .content h2 a:hover {

  color: var(--theme);

}

.news-standard-box-items .content h3 {

  font-size: 30px;

  font-weight: 500;

  line-height: 150%;

  text-transform: uppercase;

}

@media (max-width: 575px) {

  .news-standard-box-items .content h3 {

    font-size: 24px;

  }

}

.news-standard-box-items .content h3 a:hover {

  color: var(--theme);

}

.news-standard-box-items .content .client-info-area {

  display: flex;

  align-items: center;

  gap: 40px;

  margin-top: 30px;

}

@media (max-width: 1199px) {

  .news-standard-box-items .content .client-info-area {

    flex-wrap: wrap;

    gap: 20px;

  }

}

.news-standard-box-items .content .client-info-area .line-shape {

  width: 1px;

  height: 60px;

  background: rgba(136, 136, 136, 0.2);

}

.news-standard-box-items .content .client-info-area .client-info {

  display: flex;

  align-items: center;

  gap: 20px;

}

.news-standard-box-items .content .client-info-area .client-info .client-content .name {

  font-size: 16px;

  font-weight: 500;

}

.news-standard-box-items .content .client-info-area .client-info .client-content p {

  font-size: 14px;

  font-weight: 400;

}

.news-standard-box-items .content .client-info-area ul li span {

  border-radius: 4px;

  background: #C9F31D;

  padding: 5px 10px;

  line-height: 1;

  color: rgb(6, 6, 6);

  margin-right: 10px;

  line-height: 1;

}

.news-standard-box-items .content .client-info-area ul li span.color-2 {

  border-radius: 4px;

  background: rgba(191, 247, 71, 0.1);

  color: var(--theme);

}



.news-details-area {

  margin-right: 20px;

}

@media (max-width: 1199px) {

  .news-details-area {

    margin-right: 0;

  }

}

.news-details-area .single-news-post .news-thumb {

  margin-bottom: 20px;

}

.news-details-area .single-news-post .news-thumb img {

  width: 100%;

  height: 100%;

  border-radius: 16px;

}

.news-details-area .single-news-post .news-content .ext {

  font-size: 36px;

  margin-bottom: 10px;

}

@media (max-width: 1199px) {

  .news-details-area .single-news-post .news-content .ext {

    font-size: 30px;

  }

}

.news-details-area .single-news-post .news-content .news-meta {

  display: flex;

  align-items: center;

  gap: 24px;

  margin-bottom: 10px;

}

.news-details-area .single-news-post .news-content .news-meta .green {

  color: var(--theme);

}

.news-details-area .single-news-post .news-content .news-meta .date span {

  width: 5px;

  height: 5px;

  border-radius: 100px;

  background-color: var(--text);

  display: inline-block;

  margin-bottom: 3px;

  margin-right: 3px;

}

.news-details-area .single-news-post .news-content .highlight-text {

  border: 1px solid var(--theme);

  border-radius: 18px;

  background: #1A1A1A;

  padding: 24px 40px;

  margin: 30px 0;

  position: relative;

  z-index: 9;

}

@media (max-width: 1199px) {

  .news-details-area .single-news-post .news-content .highlight-text {

    padding: 20px;

  }

}

.news-details-area .single-news-post .news-content .highlight-text .qoute-shape {

  position: absolute;

  top: 15px;

  left: 43px;

}

.news-details-area .single-news-post .news-content .highlight-text .content {

  text-align: center;

}

.news-details-area .single-news-post .news-content .highlight-text .content h3 {

  font-size: 24px;

  font-weight: 700;

  line-height: 140%;

}

@media (max-width: 1199px) {

  .news-details-area .single-news-post .news-content .highlight-text .content h3 {

    font-size: 16px;

  }

}

.news-details-area .single-news-post .news-content .highlight-text .content .info {

  margin-top: 10px;

  display: flex;

  align-items: center;

  justify-content: center;

  gap: 10px;

}

.news-details-area .single-news-post .post-thumb {

  margin-top: 20px;

}

.news-details-area .single-news-post .post-thumb img {

  width: 100%;

  height: 100%;

  border-radius: 20px;

}

.news-details-area .single-news-post .post-list {

  margin-top: 20px;

}

.news-details-area .single-news-post .post-list li {

  display: flex;

  align-items: center;

  flex-wrap: wrap;

  gap: 10px;

  margin-bottom: 20px;

}

.news-details-area .single-news-post .post-list li img {

  margin-right: 12px;

}

.news-details-area .single-news-post h4 {

  font-size: 24px;

  font-weight: 700;

}

.news-details-area .single-news-post .news-list .news-item {

  margin-top: 20px;

  display: flex;

  gap: 12px;

}

.news-details-area .single-news-post .news-list .news-item .content {

  display: flex;

  align-items: center;

  flex-wrap: wrap;

  gap: 10px;

}

.news-details-area .single-news-post .news-list .news-item .content h6 {

  font-size: 18px;

}

.news-details-area .single-news-post .comments-area {

  margin-top: 40px;

}

.news-details-area .single-news-post .comments-area .comments-heading {

  margin-bottom: 10px;

}

@media (max-width: 575px) {

  .news-details-area .single-news-post .comments-area .comments-heading {

    margin-bottom: 20px;

  }

}

.news-details-area .single-news-post .comments-area .blog-single-comment {

  border-bottom: 1.2px solid rgba(102, 102, 102, 0.16);

}

@media (max-width: 575px) {

  .news-details-area .single-news-post .comments-area .blog-single-comment {

    flex-wrap: wrap;

    gap: 20px;

  }

}

.news-details-area .single-news-post .comments-area .blog-single-comment .content h5 {

  font-size: 24px;

}

.news-details-area .single-news-post .comments-area .blog-single-comment .content .head {

  margin-bottom: 10px;

}

.news-details-area .single-news-post .comments-area .blog-single-comment .content .reply {

  border-radius: 50px;

  padding: 5px 18px;

  background-color: var(--theme);

  color: var(--bg2);

  font-family: Manrope;

  font-size: 16px;

  font-weight: 600;

}

.news-details-area .single-news-post .comments-area .blog-single-comment.style-2 {

  padding: 0 40px 24px;

}

@media (max-width: 1199px) {

  .news-details-area .single-news-post .comments-area .blog-single-comment.style-2 {

    padding: 0;

  }

}



.main-sidebar .single-sidebar-widget {

  background: #1A1A1A;

  padding: 32px;

  border-radius: 16px;

  margin-bottom: 30px;

}

.main-sidebar .single-sidebar-widget .wid-title h3 {

  border-bottom: 1px solid rgba(255, 255, 255, 0.2);

  padding-bottom: 16px;

}

.main-sidebar .single-sidebar-widget .wid-title:not(.main-sidebar .single-sidebar-widget .wid-title:last-child) {

  margin-bottom: 24px;

}

.main-sidebar .single-sidebar-widget .search-widget form {

  width: 100%;

  position: relative;

}

.main-sidebar .single-sidebar-widget .search-widget form input {

  background-color: #060606;

  padding: 16px 20px;

  width: 100%;

  border: none;

  color: var(--header);

  border-radius: 8px;

}

.main-sidebar .single-sidebar-widget .search-widget form button {

  position: absolute;

  top: 8px;

  right: 8px;

  font-size: 18px;

  width: 44px;

  height: 44px;

  color: var(--bg2);

  background-color: var(--theme);

  border-radius: 100px;

  text-align: center;

  transition: all 0.4s ease-in-out;

}

.main-sidebar .single-sidebar-widget .search-widget form button:hover {

  color: var(--white);

  background-color: var(--header);

}

.main-sidebar .single-sidebar-widget .categories-items li {

  display: flex;

  align-items: center;

  justify-content: space-between;

  background-color: #060606;

  font-size: 16px;

  font-weight: 400;

  line-height: 24px;

  transition: all 0.4s ease-in-out;

  border-radius: 8px;

  padding: 16px;

  border: 1.2px solid transparent;

}

.main-sidebar .single-sidebar-widget .categories-items li a {

  color: var(--header);

}

.main-sidebar .single-sidebar-widget .categories-items li:not(:last-child) {

  margin-bottom: 20px;

}

.main-sidebar .single-sidebar-widget .categories-items li:hover {

  background-color: var(--theme);

  border-color: var(--theme);

  color: var(--bg2);

}

.main-sidebar .single-sidebar-widget .categories-items li:hover a {

  color: var(--bg2);

}

.main-sidebar .single-sidebar-widget .recent-post-area .recent-item {

  display: flex;

  align-items: center;

  gap: 16px;

}

@media (max-width: 1199px) {

  .main-sidebar .single-sidebar-widget .recent-post-area .recent-item {

    flex-wrap: wrap;

  }

}

.main-sidebar .single-sidebar-widget .recent-post-area .recent-item:not(:last-child) {

  margin-bottom: 22px;

}

.main-sidebar .single-sidebar-widget .recent-post-area .recent-item .thumb img {

  border-radius: 8px;

}

.main-sidebar .single-sidebar-widget .recent-post-area .recent-item .content span {

  font-size: 14px;

}

.main-sidebar .single-sidebar-widget .recent-post-area .recent-item .content h6 {

  font-size: 20px;

  line-height: 135%;

  max-width: 200px;

}

.main-sidebar .single-sidebar-widget .recent-post-area .recent-item .content h6 a:hover {

  color: var(--theme);

}

.main-sidebar .single-sidebar-widget .tagcloud a {

  display: inline-block;

  padding: 8px 16px;

  line-height: 1;

  color: var(--text);

  background-color: #060606;

  margin-right: 5px;

  text-transform: capitalize;

  margin-bottom: 10px;

  border-radius: 100px;

  border: 1.2px solid transparent;

  transition: all 0.4s ease-in-out;

}

.main-sidebar .single-sidebar-widget .tagcloud a:last-child {

  margin-right: 0;

}

.main-sidebar .single-sidebar-widget .tagcloud a:hover {

  color: var(--bg2);

  background: var(--theme);

  border-color: var(--theme);

}

.main-sidebar .info-sidebar-widget {

  padding: 56px 32px;

  border-radius: 16px;

}

.main-sidebar .info-sidebar-widget .info-widget {

  text-align: center;

}

.main-sidebar .info-sidebar-widget .info-widget .logo {

  margin-bottom: 30px;

}

.main-sidebar .info-sidebar-widget .info-widget .content h3 {

  font-size: 28px;

  margin-bottom: 10px;

}

.main-sidebar .info-sidebar-widget .info-widget .content h5 {

  color: var(--text);

  font-weight: 700;

}

.main-sidebar .info-sidebar-widget .info-widget .theme-btn {

  margin-top: 80px;

}

@media (max-width: 1199px) {

  .main-sidebar .info-sidebar-widget .info-widget .theme-btn {

    margin-top: 30px;

  }

}



.brand-box {

  border-radius: 6px;

  border: 1px solid rgba(255, 255, 255, 0.2);

  text-align: center;

  height: 100px;

  line-height: 100px;

  transition: all 0.4s ease-in-out;

}

.brand-box img {

  filter: grayscale(1) brightness(0) saturate(1000%) invert(53%);

  transition: all 0.4s ease-in-out;

}

.brand-box:hover {

  background-color: var(--white);

}

.brand-box:hover img {

  filter: none;

}



.brand-text {

  text-align: center;

  margin-bottom: 30px;

  font-weight: 400;

}

.brand-text b {

  color: var(--theme);

  font-weight: 500;

}



.brand-wrapper-3 span {

  color: var(--white);

  font-family: "Kanit", sans-serif;

  font-size: 16px;

  font-weight: 400;

  text-transform: uppercase;

  border-radius: 6px;

  background: rgba(255, 255, 255, 0.1);

  padding: 8px 15px;

  display: inline-block;

  text-align: center;

  margin-bottom: 50px;

}

.brand-wrapper-3 .brand-image-3 {

  text-align: center;

  filter: invert(87%) sepia(0%) saturate(0%) hue-rotate(180deg) brightness(95%) contrast(90%);

  transition: all 0.4s ease-in-out;

}

.brand-wrapper-3 .brand-image-3:hover {

  filter: initial;

}



.brand-wrapper-4 {

  padding: 100px 0;

  border-top: 1px solid rgba(0, 0, 0, 0.2);

  border-bottom: 1px solid rgba(0, 0, 0, 0.2);

}

@media (max-width: 991px) {

  .brand-wrapper-4 {

    padding: 70px 0;

  }

}

.brand-wrapper-4 .brand-text-4 {

  font-size: 200px;

  font-weight: 700;

  text-transform: uppercase;

  color: var(--header);

  font-family: "Big Shoulders Display", sans-serif;

  line-height: 1;

}

@media (max-width: 767px) {

  .brand-wrapper-4 .brand-text-4 {

    font-size: 100px;

  }

}

@media (max-width: 575px) {

  .brand-wrapper-4 .brand-text-4 {

    font-size: 70px;

  }

}

.brand-wrapper-4 .swiper-wrapper {

  display: flex;

  align-items: center;

}

.brand-wrapper-4.style-2 {

  padding: 0;

  border: none;

}

.brand-wrapper-4.text-white-style .brand-text-4 {

  color: var(--white);

}



.cta-text-items {

  padding: 0 20px;

}

.cta-text-items .icon {

  width: 132px;

  height: 132px;

  line-height: 132px;

  border-radius: 50%;

  text-align: center;

  background-color: #1A1A1A;

  margin: 0 auto;

  margin-bottom: 30px;

}

.cta-text-items h2 {

  font-size: 171px;

  font-weight: 700;

  color: var(--text);

  letter-spacing: -1.71px;

}

@media (max-width: 1600px) {

  .cta-text-items h2 {

    font-size: 130px;

  }

}

@media (max-width: 991px) {

  .cta-text-items h2 {

    font-size: 100px;

  }

}

@media (max-width: 767px) {

  .cta-text-items h2 {

    font-size: 70px;

  }

}

@media (max-width: 575px) {

  .cta-text-items h2 {

    font-size: 50px;

  }

}

.cta-text-items h3 {

  font-size: 171px;

  font-weight: 700;

  letter-spacing: -1.71px;

  border-bottom: 3px solid var(--theme);

  display: inline-block;

  line-height: 1;

  margin-bottom: 50px;

}

.cta-text-items h3 a {

  color: var(--theme);

}

@media (max-width: 1399px) {

  .cta-text-items h3 {

    font-size: 130px;

    margin-bottom: 30px;

  }

}

@media (max-width: 991px) {

  .cta-text-items h3 {

    font-size: 100px;

  }

}

@media (max-width: 767px) {

  .cta-text-items h3 {

    font-size: 70px;

  }

}

@media (max-width: 575px) {

  .cta-text-items h3 {

    font-size: 50px;

  }

}

.cta-text-items .cta-btn {

  display: flex;

  align-items: center;

  gap: 20px;

  margin-top: 50px;

  justify-content: center;

}

@media (max-width: 1199px) {

  .cta-text-items .cta-btn {

    margin-top: 30px;

    flex-wrap: wrap;

  }

}



.cta-section {

  position: relative;

  z-index: 9;

}

@media (max-width: 1199px) {

  .cta-section br {

    display: none;

  }

}

.cta-section .shape-1 {

  position: absolute;

  z-index: -1;

  top: 23%;

  left: -3%;

}

@media (max-width: 1199px) {

  .cta-section .shape-1 {

    display: none;

  }

}

.cta-section .shape-2 {

  position: absolute;

  z-index: -1;

  top: 18%;

  left: 8%;

}

.cta-section .shape-3 {

  position: absolute;

  z-index: -1;

  bottom: 33%;

  left: 20%;

}

@media (max-width: 1199px) {

  .cta-section .shape-3 {

    display: none;

  }

}

.cta-section .shape-4 {

  position: absolute;

  z-index: -1;

  bottom: 0%;

  left: 45%;

}

.cta-section .shape-5 {

  position: absolute;

  z-index: -1;

  bottom: 25%;

  right: 20%;

}

.cta-section .shape-6 {

  position: absolute;

  z-index: -1;

  top: 13%;

  right: 8%;

}



.contact-section-3 {

  position: relative;

  padding: 70px 30px 40px;

  background-repeat: no-repeat;

  background-size: cover;

  border-radius: 10px;

}

@media (max-width: 575px) {

  .contact-section-3 {

    background-image: none !important;

    background-color: #1A1A1A;

  }

}

@media (max-width: 575px) and (max-width: 767px) {

  .contact-section-3 .section-title-2 {

    margin-bottom: 30px;

  }

}

.contact-section-3 .sub-title {

  color: var(--theme);

  font-family: "Kanit", sans-serif;

  font-size: 16px;

  font-weight: 400;

  text-transform: uppercase;

  display: flex;

  align-items: center;

  gap: 10px;

  position: absolute;

  top: 0;

  left: 78px;

}

@media (max-width: 575px) {

  .contact-section-3 .sub-title {

    position: static;

    margin-bottom: 6px;

  }

}

.contact-section-3 .form-clt input, .contact-section-3 .form-clt textarea {

  outline: none;

  width: 100%;

  border-radius: 12px;

  border: 1px solid rgba(193, 193, 193, 0.16);

  background: transparent;

  text-transform: uppercase;

  padding: 18px 25px;

  line-height: 1;

  color: var(--text);

}

.contact-section-3 .form-clt textarea {

  padding-bottom: 100px;

}

.contact-section-3 .form-clt .budget-item {

  display: flex;

  align-items: center;

  gap: 30px;

}

@media (max-width: 1199px) {

  .contact-section-3 .form-clt .budget-item {

    flex-wrap: wrap;

    gap: 15px;

  }

}

.contact-section-3 .form-clt .budget-item h3 {

  color: var(--white);

  font-size: 16px;

  font-weight: 500;

  font-family: "Kanit", sans-serif;

  letter-spacing: 0.5px;

  text-transform: uppercase;

}

.contact-section-3 .form-clt .budget-item .budget-button {

  display: flex;

  align-items: center;

  gap: 8px;

}

@media (max-width: 1199px) {

  .contact-section-3 .form-clt .budget-item .budget-button {

    flex-wrap: wrap;

  }

}

.contact-section-3 .form-clt .budget-item .budget-button .budget-btn {

  display: inline-block;

  border-radius: 100px;

  border: 1px solid rgba(255, 255, 255, 0.2);

  color: #888;

  font-family: "Kanit", sans-serif;

  font-size: 14px;

  font-weight: 500;

  letter-spacing: 0.5px;

  text-transform: uppercase;

  padding: 8px 16px;

  line-height: 1;

  transition: all 0.4s ease-in-out;

}

.contact-section-3 .form-clt .budget-item .budget-button .budget-btn:hover {

  background-color: var(--theme);

  color: var(--black);

}

.contact-section-3 .form-clt .budget-item .budget-button .budget-btn.active {

  background-color: var(--theme);

  color: var(--black);

  border-color: var(--theme);

}



.contact-form-box {

  border-radius: 24px;

  background: #1A1A1A;

  backdrop-filter: blur(24px);

  padding: 48px;

}

.contact-form-box.style-2 {

  margin-top: 60px;

}

@media (max-width: 1199px) {

  .contact-form-box.style-2 {

    margin-top: 30px;

  }

}

@media (max-width: 1199px) {

  .contact-form-box {

    padding: 30px;

  }

}

.contact-form-box h3 {

  margin-bottom: 30px;

  font-size: 30px;

}

.contact-form-box .contact-box input, .contact-form-box .contact-box textarea {

  width: 100%;

  background-color: #060606;

  border: 0;

  border-radius: 12px;

  padding: 20px 30px;

  line-height: 1;

}

.contact-form-box .contact-box textarea {

  padding-bottom: 160px;

  resize: none;

  outline: none;

}



.contact-inner-page-wrapper {

  background-color: #1A1A1A;

  padding: 80px 0 0;

  margin-top: 50px;

}

.contact-inner-page-wrapper .contact-image {

  margin-left: -120px;

  position: relative;

}

.contact-inner-page-wrapper .contact-image ul {

  display: grid;

  align-items: center;

  gap: 16px;

  position: absolute;

  bottom: 170px;

  right: 0;

}

.contact-inner-page-wrapper .contact-image ul li {

  border-radius: 10px;

  border: 1px solid rgba(255, 255, 255, 0.2);

  background: #1A1A1A;

  color: #FFF;

  font-size: 16px;

  font-weight: 500;

  letter-spacing: 0.5px;

  text-transform: uppercase;

  display: inline-flex;

  padding: 18px 28px;

}

.contact-inner-page-wrapper .contact-image ul li b {

  font-weight: 500;

  color: #888;

  margin-left: 5px;

}

@media (max-width: 1199px) {

  .contact-inner-page-wrapper .contact-image {

    margin-left: 0;

  }

  .contact-inner-page-wrapper .contact-image img {

    width: 100%;

    height: 100%;

  }

}

.contact-inner-page-wrapper form {

  border-radius: 10px;

  background: #060606;

  padding: 38px 24px;

  margin-left: 50px;

}

@media (max-width: 1199px) {

  .contact-inner-page-wrapper form {

    margin-left: 0;

  }

}

.contact-inner-page-wrapper form .form-clt input, .contact-inner-page-wrapper form .form-clt textarea {

  outline: none;

  width: 100%;

  border-radius: 12px;

  border: 1px solid rgba(193, 193, 193, 0.16);

  background: transparent;

  text-transform: uppercase;

  padding: 18px 25px;

  line-height: 1;

  color: var(--text);

}

.contact-inner-page-wrapper form .form-clt textarea {

  padding-bottom: 100px;

}

.contact-inner-page-wrapper form .form-clt .budget-item {

  display: flex;

  align-items: center;

  gap: 30px;

}

@media (max-width: 1399px) {

  .contact-inner-page-wrapper form .form-clt .budget-item {

    flex-wrap: wrap;

    gap: 15px;

  }

}

.contact-inner-page-wrapper form .form-clt .budget-item h2 {

  color: var(--white);

  font-size: 16px;

  font-weight: 500;

  font-family: "Kanit", sans-serif;

  letter-spacing: 0.5px;

  text-transform: uppercase;

}

.contact-inner-page-wrapper form .form-clt .budget-item h4 {

  color: var(--white);

  font-size: 16px;

  font-weight: 500;

  font-family: "Kanit", sans-serif;

  letter-spacing: 0.5px;

  text-transform: uppercase;

}

.contact-inner-page-wrapper form .form-clt .budget-item .budget-button {

  display: flex;

  align-items: center;

  gap: 8px;

}

@media (max-width: 1399px) {

  .contact-inner-page-wrapper form .form-clt .budget-item .budget-button {

    flex-wrap: wrap;

  }

}

.contact-inner-page-wrapper form .form-clt .budget-item .budget-button .budget-btn {

  display: inline-block;

  border-radius: 100px;

  border: 1px solid rgba(255, 255, 255, 0.2);

  color: #888;

  font-family: "Kanit", sans-serif;

  font-size: 14px;

  font-weight: 500;

  letter-spacing: 0.5px;

  text-transform: uppercase;

  padding: 8px 16px;

  line-height: 1;

  transition: all 0.4s ease-in-out;

}

.contact-inner-page-wrapper form .form-clt .budget-item .budget-button .budget-btn:hover {

  background-color: var(--theme);

  color: var(--black);

}



.googpemap-2 {

  position: relative;

  margin: 80px 0;

}

.googpemap-2 iframe {

  width: 100%;

  height: 550px;

  border-radius: 10px;

  filter: grayscale(100%) invert(90%);

}



.error-wrapper {

  text-align: center;

  border-top: 1px solid rgba(255, 255, 255, 0.2);

  padding-top: 140px;

}

@media (max-width: 1399px) {

  .error-wrapper {

    padding-top: 130px;

  }

}

@media (max-width: 991px) {

  .error-wrapper {

    padding-top: 110px;

  }

}

.error-wrapper .error h2 {

  color: var(--theme);

  font-size: 350px;

  line-height: 1;

}

@media (max-width: 1199px) {

  .error-wrapper .error h2 {

    font-size: 140px;

  }

}

@media (max-width: 991px) {

  .error-wrapper .error h2 {

    font-size: 130px;

  }

}

@media (max-width: 575px) {

  .error-wrapper .error h2 {

    font-size: 100px;

  }

}

.error-wrapper .error-content h2 {

  font-size: 72px;

}

@media (max-width: 1199px) {

  .error-wrapper .error-content h2 {

    font-size: 60px;

  }

}

@media (max-width: 991px) {

  .error-wrapper .error-content h2 {

    font-size: 50px;

  }

}

@media (max-width: 575px) {

  .error-wrapper .error-content h2 {

    font-size: 30px;

  }

}

.error-wrapper .error-content h2 span {

  color: var(--theme);

}

.error-wrapper .error-content p {

  margin-top: 22px;

}

.error-wrapper .error-btn {

  margin-top: 45px;

  display: flex;

  align-items: center;

  justify-content: center;

  gap: 32px;

}

@media (max-width: 1199px) {

  .error-wrapper .error-btn {

    gap: 15px;

    flex-wrap: wrap;

  }

}

.error-wrapper .error-btn .theme-btn.style-2 {

  border: 1px solid rgba(255, 255, 255, 0.2);

  background-color: transparent;

}

.error-wrapper .error-btn .theme-btn.style-2::before {

  background-color: var(--theme);

}

.error-wrapper .error-btn .theme-btn.style-2:hover {

  color: var(--bg2);

  border: 1px solid var(--theme);

}



.array-button-2 {

  gap: 16px;

  position: relative;

  z-index: 9;

  margin-top: 37px;

}

.array-button-2.style-3 .array-prev2 {

  transform: rotate(0deg);

}

.array-button-2.style-3 .array-prev2 i {

  transform: rotate(0deg);

}

.array-button-2.style-3 .array-prev2:hover i {

  color: var(--white);

}

.array-button-2.style-3 .array-next2 {

  transform: rotate(0deg);

}

.array-button-2.style-3 .array-next2 i {

  transform: rotate(0deg);

}

.array-button-2.style-3 .array-next2:hover i {

  color: var(--white);

}

@media (max-width: 1199px) {

  .array-button-2 {

    flex-wrap: wrap;

  }

}

.array-button-2 .array-prev2 {

  width: 55px;

  height: 55px;

  line-height: 50px;

  text-align: center;

  background-color: transparent;

  color: var(--header);

  transition: all 0.4s ease-in-out;

  overflow: hidden;

  border: 1px solid rgba(199, 201, 206, 0.32);

}

@media (max-width: 575px) {

  .array-button-2 .array-prev2 {

    width: 50px;

    height: 50px;

    line-height: 50px;

  }

}

.array-button-2 .array-prev2 i {

  transform: rotate(45deg);

  transition: all 0.4s ease-in-out;

}

.array-button-2 .array-prev2:hover {

  background-color: var(--theme);

  color: var(--header);

  border: 1px solid var(--theme);

}

.array-button-2 .array-prev2:hover svg path {

  fill: var(--white);

}

.array-button-2 .array-next2 {

  width: 55px;

  height: 55px;

  line-height: 55px;

  text-align: center;

  background-color: transparent;

  color: var(--header);

  transition: all 0.4s ease-in-out;

  border: 1px solid rgba(199, 201, 206, 0.32);

}

@media (max-width: 575px) {

  .array-button-2 .array-next2 {

    width: 50px;

    height: 50px;

    line-height: 50px;

  }

}

.array-button-2 .array-next2 i {

  transform: rotate(45deg);

  transition: all 0.4s ease-in-out;

}

.array-button-2 .array-next2:hover {

  background-color: var(--theme);

  color: var(--header);

  border: 1px solid var(--theme);

}

.array-button-2 .array-next2:hover svg path {

  fill: var(--white);

}



.bg-cover {

  background-repeat: no-repeat;

  background-size: cover;

  position: relative;

  background-position: center;

}



.fix {

  overflow: hidden;

}



.ralt {

  position: relative;

}



.sticky-style {

  position: sticky !important;

  top: 100px;

}



.gt-slide-transtion {

  -webkit-transition-timing-function: linear;

  transition-timing-function: linear;

}



.gt-brand-slide-element {

  width: auto;

  display: inline-block;

}



.p-relative {

  position: relative;

}



.ripple {

  position: relative;

}

.ripple::before, .ripple::after {

  position: absolute;

  left: 50%;

  top: 50%;

  width: 70px;

  height: 70px;

  -webkit-transform: translateX(-50%) translateY(-50%);

  transform: translateX(-50%) translateY(-50%);

  border-radius: 50%;

  box-shadow: 0 0 0 0 rgba(197, 247, 71, 0.5);

  -webkit-animation: rippleOne 3s infinite;

  animation: rippleOne 3s infinite;

}

.ripple::before {

  -webkit-animation-delay: 0.9s;

  animation-delay: 0.9s;

  content: "";

  position: absolute;

  right: 0;

  bottom: 0;

}

.ripple::after {

  -webkit-animation-delay: 0.6s;

  animation-delay: 0.6s;

  content: "";

  position: absolute;

  right: 0;

  bottom: 0;

}



.page-nav-wrap {

  margin-top: 60px;

}

.page-nav-wrap ul li {

  display: inline-block;

}

.page-nav-wrap ul li.active .page-numbers {

  background-color: var(--theme);

  color: var(--black);

}

.page-nav-wrap ul li .page-numbers {

  display: inline-block;

  width: 48px;

  height: 48px;

  text-align: center;

  border: 1px solid rgba(255, 255, 255, 0.2);

  line-height: 48px;

  border-radius: 0;

  background: transparent;

  color: var(--white);

  font-weight: 900;

  transition: all 0.3s ease-in-out;

  margin: 0 2px;

  border-radius: 50%;

  font-family: "Big Shoulders Display", sans-serif;

}

.page-nav-wrap ul li .page-numbers.current {

  background-color: var(--theme);

  color: var(--black);

}

@media (max-width: 767px) {

  .page-nav-wrap ul li .page-numbers {

    margin-top: 10px;

    width: 40px;

    height: 40px;

    line-height: 40px;

    font-size: 14px;

  }

}

.page-nav-wrap ul li .page-numbers i {

  margin-top: 2px;

  color: var(--header);

  transition: all 0.4s ease-in-out;

}

.page-nav-wrap ul li .page-numbers:hover {

  background-color: var(--theme);

  color: var(--black);

}

.page-nav-wrap ul li .page-numbers:hover i {

  color: var(--black);

}



.border-dashed-item {

  padding: 60px 0;

  position: relative;

  z-index: 9;

}

.border-dashed-item .bt-dashed {

  border-top: 1px dashed rgba(255, 255, 255, 0.2);

  border-bottom: 1px dashed rgba(255, 255, 255, 0.2);

  padding: 9px 0;

}



.box-user {

  position: sticky;

  top: 0px;

  padding-top: 60px;

}



.text_invert > div {

  background-image: linear-gradient(to right, rgb(46, 46, 46) 50%, rgb(77, 77, 77) 50%);

  background-size: 200% 100%;

  background-position-x: 100%;

  color: transparent;

  background-clip: text;

  -webkit-background-clip: text;

}



.text_invert-2 > div {

  background-size: 200% 100%;

  background-position-x: 100%;

  color: #0a2e68;

  background-clip: text;

  -webkit-background-clip: text;

}



.tilt_scale {

  transition: transform 0.2s ease;

  display: inline-block;

}



.no-break {

  white-space: nowrap; /* Keeps "My Background and Expertise" together */

}



/* Optional: styling for words split animation */

.split-word {

  display: inline-block; /* Required for animation */

  opacity: 0;

}



.reveal-img {

  opacity: 0; /* start invisible */

  transform: translateX(-600px); /* start left */

}



.arrow-path {

  width: 220px;

  height: 130px;

  color: black;

  stroke-dasharray: 1000;

  animation: draw 10s linear infinite;

}



@keyframes draw {

  0% {

    stroke-dashoffset: 1000;

  }

  100% {

    stroke-dashoffset: 0;

  }

}

.image-wrapper {

  position: relative;

  transition: all 0.8s cubic-bezier(0.55, 0.085, 0, 0.99);

}



.animated-image {

  display: block;

}



.image-wrapper.active .animated-image {

  transform: translateY(0);

  opacity: 1;

}



/* Ensure the link inherits styles from its parent */

.wt-about-title2 a {

  display: inline-block; /* Needed for transform animations */

  color: inherit;

  text-decoration: inherit;

}



.project-section-3 .line-ani {

  margin-top: -25px;

}

@media (max-width: 1399px) {

  .project-section-3 .line-ani {

    display: none;

  }

}



.brand-container {

  max-width: 1660px;

  margin: 0 auto;

}



.gt-text-scale-anim {

  white-space: pre-wrap;

  transform-origin: top left;

}



.gt-letter-span {

  display: inline-block;

}



.gt-word-span {

  display: inline-block;

}



.p-relative {

  position: relative;

}



.quick-switch {

  display: flex;

  width: 93px;

  background: #262628;

  border-radius: 50px;

  justify-content: space-between;

  align-items: center;

  padding: 0 14px;

  cursor: pointer;

  position: fixed;

  transform: translateY(-50%) rotate(-90deg);

  z-index: 999999;

  top: 50%;

  left: 0;

}

.quick-switch-2 {

  background-color: #ededed;

}

.quick-switch-3 {

  background-color: #EF2E4E;

}



.quick-option {

  display: flex;

  align-items: center;

  justify-content: center;

  padding: 6px 0;

  transition: 0.3s;

  cursor: pointer;

  opacity: 0;

  width: 50%;

}

.quick-option span {

  color: #fff;

  font-weight: 600;

}

.quick-option.selected {

  opacity: 1;

}

.quick-option .icon {

  background-color: #fff;

  width: 30px;

  height: 30px;

  border-radius: 50%;

  display: flex;

  align-items: center;

  justify-content: center;

  position: absolute;

  top: 50%;

  transform: translateY(-50%);

  z-index: 1;

}

.quick-option.light .icon {

  right: 5px;

}

.quick-option.dark .icon {

  left: 5px;

}

.quick-option-2 span {

  color: #0E0E10 !important;

}

.footer-bottom-wrapper-2 p{
    font-size: 12px;
}
.inner-pages-breadcrumb.hero-2 .hero-content {
    margin-top: 70px;
    margin-bottom: 70px;
}
.white-theme .white-bg .section-title h2 span{
    color: var(--theme);
}
.choose-us-section-2.section-theme2 .choose-us-box-items-2{
    border: none;
}
.choose-us-section-2.section-theme2 .choose-us-box-items-2 .choose-content .content h2 .text_invert-2 > div{
    color: var(--theme);
}
.choose-us-section-2.section-theme2 .choose-us-box-items-2 .choose-image img{
    height: 315px;
}
.choose-us-section-2.section-theme2 .choose-us-box-items-2 .choose-content .content p{
    color: #fff;
}
.skill-box-items-2 h3, .skill-box-items-2 h3 a{
    font-weight: 800;
    color: var(--theme);
}
.skill-box-items-2.section-theme2:hover{
    background-color: #f1f1f1 !important;
}
.build-content h3{
	text-align: center;
    font-weight: 500;
	font-size: 28px;
}
.impactful-sectionimg{
	text-align: center;
}
.impactful-sectionimg img{
	width: 800px;
	border-radius: 15px;
}
.language-switcher select {
        padding: 6px 5px;
    border-radius: 6px;
    border: none;
    font-size: 14px;
    color: #fff;
    cursor: pointer;
    background-color: #184889;
}
@media (max-width: 1199px) {

    .project-inner-page-wrapper .project-inner-page-box .content .arrow-icon{

        margin-top: 8px

    }

    .choose-us-wrapper .choose-us-box-list li .arrow-icon{

        background-color: #000;

    }

    .footer_about{

        text-align: center;

    }

    .footer-wrapper-2 h3{

        margin-top: 20px;

        margin-bottom: 10px;

    }
    .footer_about p{
        text-align: center;
        max-width: 100%;
    }

}