@charset "UTF-8";

/*
Theme Name: KABI
Theme URI: https://wordpress.org/themes/twentytwentyone/
Author: the WordPress team
Author URI: https://wordpress.org/
Description: Twenty Twenty-One is a blank canvas for your ideas and it makes the block editor your best brush. With new block patterns, which allow you to create a beautiful layout in a matter of seconds, this theme’s soft colors and eye-catching — yet timeless — design will let your work shine. Take it for a spin! See how Twenty Twenty-One elevates your portfolio, business website, or personal blog.
Requires at least: 5.3
Tested up to: 6.8
Requires PHP: 5.6
Version: 2.5
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: twentytwentyone
Tags: one-column, accessibility-ready, custom-colors, custom-menu, custom-logo, editor-style, featured-images, footer-widgets, block-patterns, rtl-language-support, sticky-post, threaded-comments, translation-ready, blog, portfolio

Twenty Twenty-One WordPress Theme, (C) 2020 WordPress.org
Twenty Twenty-One is distributed under the terms of the GNU GPL.
*/

/**
 * SETTINGS
 * File-header..........The file header for the themes style.css file.
 * Fonts................Any font files, if the project needs specific fonts.
 * Global...............Project-specific, globally available variables.
 *
 * TOOLS
 * Functions............Global functions.
 * Mixins...............Global mixins.
 *
 * GENERIC
 * Normalize.css........Normalise browser defaults.
 * Breakpoints..........Mixins and variables for responsive styles
 * Vertical-margins.....Vertical spacing for the main components.
 * Reset................Reset specific elements to make them easier to style in other contexts.
 * Clearings............Clearings for the main components.
 *
 * ELEMENTS
 * Blockquote...........Default blockquote.
 * Forms................Element-level form styling.
 * Headings.............H1–H6
 * Links................Default links.
 * Lists................Default lists.
 * Media................Images, Figure, Figcaption, Embed, iFrame, Objects, Video.
 *
 * BLOCKS
 * Audio................Specific styles for the audio block.
 * Button...............Specific styles for the button block.
 * Code.................Specific styles for the code block.
 * Columns..............Specific styles for the columns block.
 * Cover................Specific styles for the cover block.
 * File.................Specific styles for the file block.
 * Gallery..............Specific styles for the gallery block.
 * Group................Specific styles for the group block.
 * Heading..............Specific styles for the heading block.
 * Image................Specific styles for the image block.
 * Latest comments......Specific styles for the latest comments block.
 * Latest posts.........Specific styles for the latest posts block.
 * Legacy...............Specific styles for the legacy gallery.
 * List.................Specific styles for the list block.
 * Media text...........Specific styles for the media and text block.
 * Navigation...........Specific styles for the navigation block.
 * Paragraph............Specific styles for the paragraph block.
 * Pullquote............Specific styles for the pullquote block.
 * Quote................Specific styles for the quote block.
 * Search...............Specific styles for the search block.
 * Separator............Specific styles for the separator block.
 * Table................Specific styles for the table block.
 * Verse................Specific styles for the verse block.
 * Video................Specific styles for the video block.
 * Utilities............Block alignments.
 *
 * COMPONENTS
 * Header...............Header styles.
 * Footer...............Footer styles.
 * Comments.............Comment styles.
 * Archives.............Archive styles.
 * 404..................404 styles.
 * Search...............Search styles.
 * Navigation...........Navigation styles.
 * Footer Navigation....Footer Navigation styles.
 * Pagination...........Pagination styles.
 * Single...............Single page and post styles.
 * Posts and pages......Misc, sticky post styles.
 * Entry................Entry, author biography.
 * Widget...............Widget styles.
 * Editor...............Editor styles.
 *
 * UTILITIES
 * A11y.................Screen reader text, prefers reduced motion etc.
 * Color Palette........Classes for the color palette colors.
 * Editor Font Sizes....Editor Font Sizes.
 * Measure..............The width of a line of text, in characters.
 */

/* Categories 01 to 03 are the basics. */

body {
  background-color: #0F1117;
  background-image: url(/wp-content/uploads/2025/07/main-bg.png);
  background-position: top center;
  background-size: contain;
  background-repeat: no-repeat;
}

a {
  text-decoration: none !important;
  transition: all 0.5s ease;
}
a:hover {
  text-decoration: none !important;
}

ul,
li {
  list-style: none;
  margin: 0;
  padding: 0;
}

.arabic {
  direction: rtl;
}

@media (min-width: 992px) {
  .w-lg-70 {
    width: 70% !important;
  }
}
.gap-50 {
  gap: 50px;
}

.tag-button {
  position: relative;
  display: flex;
  align-items: center;
  font-family: "Arial", sans-serif;
  font-size: 14px;
  letter-spacing: 4px;
  font-weight: 500;
  color: white;
  padding: 12px 24px;
  background: transparent;
  border: none;
  cursor: pointer;
  z-index: 1;
  transition: color 0.3s ease;
}

.tag-button::before {
  content: "";
  position: absolute;
  inset: 0;
  padding: 2px;
  background: linear-gradient(90deg, #55d0ff, #3366ff, #33cc99);
  border-radius: 10px 27px 10px 10px;
  -webkit-clip-path: path("M0,0 H calc(100% - 28px) L100,28 V100 H0 Z");
          clip-path: path("M0,0 H calc(100% - 28px) L100,28 V100 H0 Z");
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  transition: all 0.3s ease;
  z-index: -1;
}

.tag-button:hover::before {
  background: linear-gradient(90deg, #33cc99, #3366ff, #55d0ff);
}

.tag-button:hover {
  color: #33cc99;
}

.arabic .tag-button::before {
  border-radius: 27px 10px 10px 10px;
}

.btn-small {
  padding: 10px 22px !important;
  font-size: 12px !important;
}

header .menu-container {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 32px;
  padding: 0px 48px;
  display: flex;
  align-items: center;
  color: var(--white);
  position: relative;
  height: 54px;
  width: 55%;
  justify-content: center;
}
header .menu-container .m-menu {
  font-size: 18px;
  font-weight: 600;
  color: var(--white);
  transition: all 0.5s ease;
}
header .menu-container .m-menu:hover {
  background-color: #171719;
  padding: 4px 16px;
  border-radius: 35px;
}
header .logo-main {
  height: 30px;
}

/* --- drawer --- */
.drawer {
  display: none;
  /* hidden by default */
  position: absolute;
  top: 100%;
  /* right under the menu */
  left: 0;
  /* will be shifted in JS version */
  border-radius: 32px;
  min-width: 100%;
  margin-top: 16px;
  background: rgba(23, 23, 25, 0.8);
  border-radius: 32px;
}

.drawer2 {
  display: none;
  /* hidden by default */
  position: absolute;
  top: 100%;
  /* right under the menu */
  left: 0;
  /* will be shifted in JS version */
  border-radius: 32px;
  min-width: 100%;
  margin-top: 16px;
  background: rgba(23, 23, 25, 0.8);
  border-radius: 32px;
}

.drawer3 {
  display: none;
  /* hidden by default */
  position: absolute;
  top: 100%;
  /* right under the menu */
  left: 0;
  /* will be shifted in JS version */
  border-radius: 32px;
  min-width: 100%;
  margin-top: 16px;
  background: rgba(23, 23, 25, 0.8);
  border-radius: 32px;
}

.mobile-menu {
  display: flex;
  width: 44px;
  height: 44px;
  background: rgba(255, 255, 255, 0.13);
  color: #fff;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  border-radius: 4px;
  border: 1px solid rgba(255, 255, 255, 0.09);
}

.offcanvas {
  width: 90vw !important;
  background-color: #1a1919;
}

.offcanvas-body {
  padding: 48px;
}
.offcanvas-body a {
  color: var(--white) !important;
  opacity: 0.6;
}

.solution-menu {
  background: rgba(172, 172, 172, 0.2);
  box-shadow: 0px 4px 20px rgba(23, 15, 73, 0.08);
  border-radius: 15px;
  padding: 16px !important;
}

.head-menu {
  font-weight: 600;
  color: var(--white);
  opacity: 1 !important;
}

.menu-group {
  background-color: #171719;
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.menu-group a:hover {
  opacity: 0.4 !important;
}

.world-img {
  height: 250px;
}
@media (min-width: 992px) {
  .world-img {
    height: auto;
  }
}

.c-logo {
  width: 186px;
}
.c-logo img {
  width: 90%;
  -o-object-fit: contain;
     object-fit: contain;
  height: 50px;
}

.padding-top {
  padding-top: 24px;
}

.padding-bottom {
  padding-bottom: 24px;
}

@media (min-width: 767px) {
  .padding-top {
    padding-top: 50px;
  }
  .padding-bottom {
    padding-bottom: 50px;
  }
}
@media (min-width: 992px) {
  .padding-top {
    padding-top: 120px;
  }
  .padding-bottom {
    padding-bottom: 120px;
  }
}
:root {
  --white: #fff;
  --primary: #1B82FF;
  --black: #0f172a;
  --text: #AAAAAA;
  --bg: #f8f7f5;
  --navy: #071C32;
}

.text-white {
  color: var(--white);
}

.text-black {
  color: var(--navy);
}

.text-para {
  color: #666;
}

body {
  font-family: "Quicksand", sans-serif;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: "Quicksand", sans-serif;
}

h1,
h2,
h3,
h4,
h5,
p,
a,
div {
  line-height: 1.5em;
}

.h1 {
  font-size: 52px;
  color: var(--white);
}

.paragraph {
  font-size: 18px;
}

.padding-top {
  padding-top: 120px;
}

.padding-bottom {
  padding-bottom: 120px;
}

.bg-abt {
  background-image: url(/wp-content/uploads/2025/07/bg-abt.svg);
  height: 300px;
  background-size: contain;
  background-position: center center;
  background-repeat: no-repeat;
  display: flex;
  justify-content: center;
  align-items: center;
}

.bg-journy {
  background-image: url(/wp-content/uploads/2025/07/bg-journy.svg);
  background-repeat: no-repeat;
  background-size: contain;
  background-position: top center;
}

.bg-all {
  width: 100%;
  height: auto;
}

.bg-all::after {
  content: "";
  position: fixed;
  inset: 0;
  background: url("/wp-content/uploads/2025/07/bg.svg") center/contain no-repeat;
  filter: blur(100px);
  z-index: -1;
  background-size: 70%;
}

footer {
  background-color: #10121A;
}
footer .ft-container {
  background: rgba(90, 112, 172, 0.07);
  border-radius: 20px;
  padding: 24px;
}
@media (min-width: 992px) {
  footer .ft-container {
    padding: 44px;
  }
}
footer .ft-container .col-address {
  width: 100%;
}
@media (min-width: 992px) {
  footer .ft-container .col-address {
    width: 320px;
  }
}
footer span {
  color: #999;
}
footer .ft-menu-box {
  width: 100%;
  min-height: -moz-fit-content;
  min-height: fit-content;
  background: linear-gradient(180deg, #14161E 0%, rgba(20, 22, 30, 0) 100%);
  border-radius: 11px;
  padding: 24px;
}
@media (min-width: 992px) {
  footer .ft-menu-box {
    padding: 24px 40px;
    min-height: 311px;
  }
}
footer .ft-menu-box a {
  color: #999;
}
footer .news-letter-container {
  width: 100%;
}
@media (min-width: 992px) {
  footer .news-letter-container {
    width: 500px;
  }
}
footer .news-letter-container .social-media a {
  display: flex;
  width: 40px;
  height: 40px;
  border-radius: 160px;
  text-align: center;
  justify-content: center;
  align-items: center;
  background-color: #15131D;
  color: #999;
}
footer .news-letter-container .social-media a:hover {
  opacity: 0.5;
}

.form-control {
  height: 44px;
  background: none;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 10px;
}

.form-select {
  height: 44px;
  background: none;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 10px;
}

textarea {
  height: 150px !important;
}

.form-control::-moz-placeholder {
  color: rgba(255, 255, 255, 0.5); /* Your custom color */
  opacity: 1;
}

.form-control::placeholder {
  color: rgba(255, 255, 255, 0.5); /* Your custom color */
  opacity: 1;
}

.menu-box {
  padding: 8px;
  border-radius: 16px;
}
.menu-box .icon-div {
  width: 55px;
  height: 55px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.menu-box .icon-div i {
  font-size: 32px;
  color: var(--white);
}
.menu-box h3 {
  font-size: 18px;
  margin: 0;
  color: var(--white);
}
.menu-box p {
  font-size: 16px;
  margin: 0;
  color: var(--text);
}
.menu-box:hover {
  background-color: #171719 !important;
  cursor: pointer;
}

.border-b-light {
  border-bottom: 1px solid rgba(255, 255, 255, 0.15);
}

.border-t-light {
  border-top: 1px solid rgba(255, 255, 255, 0.15);
}/*# sourceMappingURL=main.css.map */