:root {
    --background-color--background-primary: var(--base-color-brand--dark);
    --base-color-brand--off-white: #f7f7f7;
    --base-color-brand--light-gray: silver;
    --link-color--link-alternate: var(--base-color-brand--off-white);
    --radius--radius-main: 1rem;
    --radius--radius-round: 100vw;
    --base-color-brand--dark: #0b0b0b;
    --base-color-neutral--black: black;
    --base-color-neutral--white: white;
    --text-color--text-alternate: var(--base-color-brand--dark);
    --base-color-brand--blue: #3d93ef;
    --text-color--text-error: var(--base-color-system--error-red);
    --base-color-brand--surfly-red\<deleted\|variable-1afb0c92-2bd9-c4f4-1504-2eef5d82bb1d\>: #e54747;
    --base-color-brand--anti-flash-white\<deleted\|variable-e1fd5e82-b7f7-46af-b5ce-491069f79607\>: #ececec;
    --background-color--background-alternate: var(--base-color-brand--off-white);
    --link-color--link-primary: var(--base-color-brand--dark);
    --text-color--text-primary: var(--base-color-brand--off-white);
    --background-color--background-secondary\<deleted\|relume-variable-background-color-2\>: var(--base-color-brand--off-white);
    --background-color--background-tertiary\<deleted\|relume-variable-background-color-3\>: var(--base-color-neutral--white);
    --black-archive\<deleted\|variable-dccb7db6\>: black;
    --border-color--border-primary: var(--base-color-brand--dark);
    --radius--radius-small: .5rem;
    --base-color-neutral--neutral-lighter: #ccc;
    --base-color-neutral--neutral-darker: #222;
    --base-color-neutral--neutral-dark: #444;
    --base-color-brand--cornsilk\<deleted\|variable-87b1e879-d1af-9bfa-2c60-decc82f62e28\>: #fbf3da;
    --base-color-brand--uranian-blue\<deleted\|variable-b9885fcc-8b31-b925-279c-44e9a8c29e09\>: #b4e1ff;
    --base-color-neutral--neutral-light: #aaa;
    --base-color-neutral--neutral: #666;
    --base-color-neutral--neutral-lightest: #eee;
    --base-color-neutral--neutral-darkest: #111;
    --base-color-system--success-green: #027a48;
    --base-color-system--success-green-light: #ecfdf3;
    --base-color-system--error-red: #b42318;
    --base-color-system--error-red-light: #fef3f2;
    --radius--radius-large: 1.5rem;
    --background-color--background-success: var(--base-color-system--success-green-light);
    --background-color--background-error: var(--base-color-system--error-red-light);
    --border-color--border-alternate: var(--base-color-brand--off-white);
    --text-color--text-success: var(--base-color-system--success-green);
}


html {overflow-x: hidden;}
body {min-height: 100vh;
	  overflow-x: hidden;
	  line-height: 2.4em !important;
/* background-image: linear-gradient(to right bottom, #12122f, #190b22, #180616, #11020a, #000000); */
}



* {box-sizing: border-box;}

a {transition: 0.5s;}

.radius {border-radius: 14px;}


h1, h2, h3, h4, h5, h6 {font-weight: 600; line-height: 1.5em;}

img {max-width: 100% !important;}


.small {font-size:85%;}



/* LAYOUT */

.inner {max-width:1120px;width:100%;}

.inner_padding {padding:30px;}


/* margin/ padding */

.m-0 {margin: 0 !important;}
.mt-0, .my-0 {margin-top: 0 !important;}
.mr-0, .mx-0 {margin-right: 0 !important;}
.mb-0, .my-0 {margin-bottom: 0 !important;}
.ml-0, .mx-0 {margin-left: 0 !important;}
.m-1 {margin: 1em !important;}
.mt-1, .my-1 {margin-top: 1em !important;}
.mr-1, .mx-1 {margin-right: 1em !important;}
.mb-1, .my-1 {margin-bottom: 1em !important;}
.ml-1, .mx-1 {margin-left: 1em !important;}
.m-2 {margin:2em !important;}
.mt-2, .my-2 {margin-top:2em !important;}
.mr-2, .mx-2 {margin-right:2em !important;}
.mb-2, .my-2 {margin-bottom:2em !important;}
.ml-2, .mx-2 {margin-left:2em !important;}
.m-3 {margin: 3em !important;}
.mt-3, .my-3 {margin-top: 3em !important;}
.mr-3, .mx-3 {margin-right: 3em !important;}
.mb-3, .my-3 {margin-bottom: 3em !important;}
.ml-3, .mx-3 {margin-left: 3em !important;}
.m-4 {margin:4em !important;}
.mt-4, .my-4 {margin-top:4em !important;}
.mr-4, .mx-4 {margin-right:4em !important;}
.mb-4, .my-4 {margin-bottom:4em !important;}
.ml-4, .mx-4 {margin-left:4em !important;}
.m-5 {margin: 5em !important;}
.mt-5, .my-5 {margin-top: 5em !important;}
.mr-5, .mx-5 {margin-right: 5em !important;}
.mb-5, .my-5 {margin-bottom: 5em !important;}
.ml-5, .mx-5 {margin-left: 5em !important;}
.p-0 {padding: 0 !important;}
.pt-0, .py-0 {padding-top: 0 !important;}
.pr-0, .px-0 {padding-right: 0 !important;}
.pb-0, .py-0 {padding-bottom: 0 !important;}
.pl-0, .px-0 {padding-left: 0 !important;}
.p-1 {padding: 1em !important;}
.pt-1, .py-1 {padding-top: 1em !important;}
.pr-1, .px-1 {padding-right: 1em !important;}
.pb-1, .py-1 {padding-bottom: 1em !important;}
.pl-1, .px-1 {padding-left: 1em !important;}
.p-2 {padding:2em !important;}
.pt-2, .py-2 {padding-top:2em !important;}
.pr-2, .px-2 {padding-right:2em !important;}
.pb-2, .py-2 {padding-bottom:2em !important;}
.pl-2, .px-2 {padding-left:2em !important;}
.p-3 {padding: 3em !important;}
.pt-3, .py-3 {padding-top: 3em !important;}
.pr-3, .px-3 {padding-right: 3em !important;}
.pb-3, .py-3 {padding-bottom: 3em !important;}
.pl-3, .px-3 {padding-left: 3em !important;}
.p-4 {padding:4em !important;}
.pt-4, .py-4 {padding-top:4em !important;}
.pr-4, .px-4 {padding-right:4em !important;}
.pb-4, .py-4 {padding-bottom:4em !important;}
.pl-4, .px-4 {padding-left:4em !important;}
.p-5 {padding: 5em !important;}
.pt-5, .py-5 {padding-top: 5em !important;}
.pr-5, .px-5 {padding-right: 5em !important;}
.pb-5, .py-5 {padding-bottom: 5em !important;}
.pl-5, .px-5 {padding-left: 5em !important;}
.m-n1 {margin: -1em !important;}
.mt-n1, .my-n1 {margin-top: -1em !important;}
.mr-n1, .mx-n1 {margin-right: -1em !important;}
.mb-n1, .my-n1 {margin-bottom: -1em !important;}
.ml-n1, .mx-n1 {margin-left: -1em !important;}
.m-n2 {margin: -0.5rem !important;}
.mt-n2, .my-n2 {margin-top: -0.5rem !important;}
.mr-n2, .mx-n2 {margin-right: -0.5rem !important;}
.mb-n2, .my-n2 {margin-bottom: -0.5rem !important;}
.ml-n2, .mx-n2 {margin-left: -0.5rem !important;}
.m-n3 {margin: -3em !important;}
.mt-n3, .my-n3 {margin-top: -3em !important;}
.mr-n3, .mx-n3 {margin-right: -3em !important;}
.mb-n3, .my-n3 {margin-bottom: -3em !important;}
.ml-n3, .mx-n3 {margin-left: -3em !important;}
.m-n4 {margin: -1.5rem !important;}
.mt-n4, .my-n4 {margin-top: -1.5rem !important;}
.mr-n4, .mx-n4 {margin-right: -1.5rem !important;}
.mb-n4, .my-n4 {margin-bottom: -1.5rem !important;}
.ml-n4, .mx-n4 {margin-left: -1.5rem !important;}
.m-n5 {margin: -5em !important;}
.mt-n5, .my-n5 {margin-top: -5em !important;}
.mr-n5, .mx-n5 {margin-right: -5em !important;}
.mb-n5, .my-n5 {margin-bottom: -5em !important;}
.ml-n5, .mx-n5 {margin-left: -5em !important;}
.m-auto {margin: auto !important;}
.mt-auto, .my-auto {margin-top: auto !important;}
.mr-auto, .mx-auto {margin-right: auto !important;}
.mb-auto, .my-auto {margin-bottom: auto !important;}
.ml-auto, .mx-auto {margin-left: auto !important;}

/* -- */




#main section {margin-top:3em; margin-bottom:3em;
  margin: 0 calc(50% - 50vw);
  width: 100vw;}

#main section h2 {margin:3em auto; text-align: center;}

/* HEADER */


#logo img {width:136px; height: auto;}

#header {    -webkit-backdrop-filter: blur(30px);
    backdrop-filter: blur(30px);
    background-color: #0000001a;
    background-image: linear-gradient(#ffffff0f, #ffffff05);
    border-bottom: 1px solid #f7f7f714;
    align-items: center;
    width: 100%;
    min-height: 4.5rem;
    padding-left: 5%;
    padding-right: 5%;
    display: flex;
    position: sticky;
    inset: 0% 0% auto;
}

/* Webfuse BASED CUSTON CSS */

.button {
    grid-column-gap: .5rem;
    grid-row-gap: .5rem;
    border-radius: var(--radius--radius-round) !important;
    color: var(--base-color-brand--off-white) !important;
    text-align: center;
    background-color: #0000;
    background-image: linear-gradient(144deg, #2e5bd5 10%, #64b8c1);
    border: 1.5px #8dbac8;
    justify-content: center;
    align-items: center;
    padding: .75rem 1.25rem;
    text-decoration: none;
    display: flex;
    position: relative;
    overflow: hidden;
}
.w-button {
    color: #fff;
    line-height: inherit;
    cursor: pointer;
    background-color: #3898ec;
    border: 0;
    border-radius: 0;
    padding: 9px 15px;
    text-decoration: none;
    display: inline-block;
}


/* TOP PAGE */

.home #feature {padding:20px 0 40px;
border-bottom: 1px solid rgba(90, 163, 189, 0.46);
/*
    margin: 0 calc(50% - 50vw + 30px);
    width: calc(100vw - 60px);
*/
}
.home #feature h1 {margin:40px auto;}
.home #feature p {font-weight: bold; font-size:18px; line-height: 2em;}
.home #feature .eyebrow_wrap {font-weight: bold; font-size:110%;}
.home #feature_logo {max-width: 90%;}


#feature {

  background: radial-gradient(
    50% 80% at 20% 50%,
	rgba(56, 189, 248, 0.20) 0%,
    rgba(56, 189, 248, 0) 100%
  );

}

#top_feature_box {
width:780px;
margin: auto;
}
#top_feature_box p {font-weight:normal; margin:2em 0 !important;}





.toggle_title {font-size:24px; text-align: center; border:1px solid #eee; padding:1em;border-radius: 14px;background: linear-gradient(165deg, rgba(2, 0, 36, 1) 0%, rgba(23, 23, 61, 1) 0%, rgba(0, 0, 0, 0) 100%)}
.toggle_title:hover {background-image: linear-gradient(to right bottom, #141f46, #101b42, #0c173e, #08143a, #050f36);}
.toggle_icon:before {margin-right: 1em;}


.usecase_box {
/*
background: #020024;
background: linear-gradient(165deg, rgba(2, 0, 36, 1) 0%, rgba(23, 23, 61, 1) 0%, rgba(0, 0, 0, 0) 100%);

*/
    border-radius: 14px;
    padding: 20px;
	border:1px solid #707070;
	
background: radial-gradient(
    60% 80% at 10% 30%,
    rgba(139, 92, 246, 0.15) 0%,
    rgba(139, 92, 246, 0) 100%
  );

}


.category_box {border:1px solid #666; border-radius: 14px;padding:20px;}


.center_box {max-width:730px; margin: auto; text-align: left;}


.video {text-align: center;}

/* YouTube */

/* 1. ラッパー要素の設定 */
.video-container {
    /* 相対的な位置決め基準点 */
    position: relative; 
    /* 幅を親要素の100%にする */
    width: 100%; 
    /* 高さは0にする */
    height: 0; 
    /* パディングを使って高さを設定し、アスペクト比を維持
       16:9 の場合: 9 ÷ 16 × 100 = 56.25% 
       (4:3 の場合は 75%)
    */
    padding-bottom: 56.25%; 
}

/* 2. <iframe>要素の設定 */
.video-container iframe {
    /* ラッパー要素に対して絶対配置 */
    position: absolute; 
    /* 左右上下いっぱいに広げる */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}


.item_box {border:0.5px solid #7D7D7D; text-align: center; padding:14px 12px; border-radius: 14px; margin-bottom:2em; 


/* background: rgba(255,255,255,0.05) */
  background: radial-gradient(
    100% 80% at 0% 0%,
    rgba(56, 189, 248, 0.12) 0%,
    rgba(56, 189, 248, 0) 100%
  );

}


.item_title {font-weight: 600; margin-bottom:1.5em; line-height: 1.5em;}
.item_text {font-size: 90%; line-height: 1.6em; text-align: left;}

.desc_box  {border:1px solid #7D7D7D;  padding:3em 1.4em; border-radius: 14px; margin-bottom:2em; 

/* background: rgba(255,255,255,0.05) */
  background: radial-gradient(
    100% 80% at 0% 0%,
    rgba(56, 189, 248, 0.12) 0%,
    rgba(56, 189, 248, 0) 100%
  );
  z-index: 1;


}
.desc_box h3 {text-align: center; margin-bottom:3em; color:#0e9af7 !important;}


.blue_list {color:#8BE5F4;}



.flexbox {
  display: flex;
}

.flexbox > div {
  /* 自動的に高さが揃います */
}




@media screen and (min-width: 768px) {

/* STRIKING RE-ALIGNMENT */
.one_fourth {width:23%; margin-right:2%;}
.three_fourth {width:73%; margin-right:2%;}
}


.part_line {
  border-top: 1px solid rgba(90,163,189,0.46);
  margin: 0 calc(50% - 50vw + 30px);
  width: calc(100vw - 60px);
  }


/* Webfuse Original CSS */



.gradient_text1 {
  background: linear-gradient(120deg, #ffffff, #0080ff);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

.gradient_text2 {
  background: linear-gradient(90deg, #00d9ff, #0080ff);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}


.gradient_text3 {
  background: linear-gradient(90deg, #56a4b5, #57ff53);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;

}



.gradient_border1 {
  position: relative;
  padding: 20px;
  background: transparent;
  isolation: isolate;
}

.gradient_border1::before {
  content: '';
  position: absolute;
  inset: 0;
  padding: 1px; /* 罫線の太さ */
  background: linear-gradient(135deg, #0066ff, #00ff66);
  border-radius: 10px;
  -webkit-mask: linear-gradient(#fff 0 0) content-box, 
                linear-gradient(#fff 0 0);
  mask: linear-gradient(#fff 0 0) content-box, 
        linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  z-index: -1;
}

.margin-xlarge {
    margin: 4rem;
}



.use-case-content_sidebar {
    border-radius: var(--radius--radius-main);
    background-image: linear-gradient(161deg, #3f3f44, #232323 74%);
    flex-direction: column;
    width: 100%;
    padding: 1px;
    display: flex;
    position: sticky;
    top: 6rem;
}

.use-case_aside {
    grid-column-gap: 2rem;
    grid-row-gap: 2rem;
    border-radius: var(--radius--radius-main);
    background-color: #0f0f0f;
    flex-flow: column;
    padding: 2rem;
    display: flex;
}


.blog-post-summary-wrapper {
    border-radius: var(--radius--radius-main);
    background-image: linear-gradient(161deg, #3f3f44, #232323 74%);
    width: 100%;
    padding: 1px;
}
.blog-post-summary, .blog-content_aside {
    border-radius: var(--radius--radius-main);
    background-color: #0f0f0f;
    padding: 2rem;
}

.eyebrow_wrap {
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    background-image: linear-gradient(160deg, #3e3d3e 50%, #212121);
    border-radius: 50vh;
    justify-content: center;
    align-items: center;
    padding: 1px;
    display: inline-flex;
    box-shadow: 0 1px 1px #0000000a;
}

.eyebrow_text
 {
    background-image: linear-gradient(#272727, #0f0f0f);
    border-radius: 50vh;
    padding: .5rem 1.5rem;
    font-weight: 500;
}


.gradient_tag_text {
    -webkit-text-fill-color: transparent;
    background-image: linear-gradient(131deg, #56ca80, #5578c5);
    -webkit-background-clip: text;
    background-clip: text;
}


/* ICON BUTTON */

.button.is-secondary {
  background-color: #0000;
  background-image: none;
  border-style: solid
}
.button.is-secondary.is-alternate {
  border-color: var(--base-color-brand--light-gray);
  color: var(--base-color-brand--light-gray);
  background-color: #07255f1a
}
.button.is-secondary.is-alternate.is-small {
  transition: background-color .4s, border-color .4s
}
.button.is-secondary.is-alternate.is-small:hover {
  border-color: var(--base-color-brand--dark);
  background-color: var(--base-color-brand--dark)
}
.button.is-small {
  padding: .5rem 1.25rem
}
.button.is-small.is-icon-only {
  padding-left: .5rem;
  padding-right: .5rem
}
.button.is-tertiary {
  border-color: var(--base-color-brand--off-white);
  background-color: var(--base-color-brand--off-white);
  color: var(--base-color-neutral--black)
}
.button.is-link {
  background-color: #0000;
  background-image: none;
  border-style: none;
  padding: .25rem 0;
  line-height: 1;
  text-decoration: none;
  overflow: visible
}
.button.is-link.is-alternate {
  color: var(--base-color-brand--light-gray);
  background-color: #0000
}
.button.is-link.is-alternate:hover {
  color: var(--base-color-brand--off-white)
}
.button.is-link.is-icon {
  grid-column-gap: .5rem;
  grid-row-gap: .5rem
}
.button.is-alternate {
  border-color: var(--base-color-neutral--white);
  background-color: var(--base-color-neutral--white);
  color: var(--base-color-neutral--black)
}
.button.is-icon {
  padding-right: .5rem
}
.button.is-icon-only {
  padding-left: .75rem;
  padding-right: .75rem
}

.icon-embed-xxsmall {
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 1rem;
    height: 1rem;
    display: flex;
}


/* USE CASE */

.use-cases_component {
  flex-direction: column;
  align-items: center
}
.use-cases_list {
  grid-column-gap: 2rem;
  grid-row-gap: 4rem;
  grid-template-rows: auto;
  grid-template-columns: 1fr 1fr 1fr;
  display: grid
}
.use-cases_image-wrapper {
  border-radius: var(--radius--radius-small);
  width: 100%;
  overflow: hidden
}
.use-cases_image {
  aspect-ratio: 3/2;
  object-fit: cover;
  width: 100%;
  height: 100%
}
.use-cases_item-wrap {
  border-radius: var(--radius--radius-main);
  background-image: linear-gradient(161deg, #3f3f44, #232323 74%);
  padding: 1px;
  overflow: hidden
}
.use-cases_item-content {
  grid-column-gap: 1rem;
  grid-row-gap: 1rem;
  border: 1px solid var(--border-color--border-primary);
  border-radius: var(--radius--radius-main);
  background-color: #0f0f0f;
  flex-direction: column;
  grid-template-rows: auto;
  grid-template-columns: 1fr 1fr;
  grid-auto-columns: 1fr;
  justify-content: space-between;
  align-items: flex-start;
  height: 100%;
  padding: 1rem 1rem 2rem;
  text-decoration: none;
  display: flex;
  position: relative
}
.use-case-header_component {
  grid-column-gap: 4rem;
  grid-row-gap: 4rem;
  grid-template-rows: auto;
  grid-template-columns: 1fr 20rem;
  grid-auto-columns: 1fr;
  display: grid
}
.section_use-case-content {
  color: var(--text-color--text-primary)
}
.use-case-content_component {
  grid-column-gap: 4rem;
  grid-row-gap: 2rem;
  grid-template-rows: auto;
  grid-template-columns: 1fr 20rem;
  grid-auto-columns: 1fr;
  align-items: flex-start;
  display: grid
}
.use-case-content_sidebar {
  border-radius: var(--radius--radius-main);
  background-image: linear-gradient(161deg, #3f3f44, #232323 74%);
  flex-direction: column;
  width: 100%;
  padding: 1px;
  display: flex;
  position: sticky;
  top: 6rem
}




h1, h2, h3, h4, h5, h6, .heading-style-h1, .heading-style-h2, .heading-style-h3, .heading-style-h4, .heading-style-h5, .heading-style-h6 {
  -moz-font-feature-settings: "salt", "ss03";
  -webkit-font-feature-settings: "salt", "ss03";
  font-feature-settings: "salt", "ss03";
}

.page-wrapper {
	overflow: clip;
}

.link-txt,
.navbar_link,
.footer_link,
.footer_legal-link {
    position: relative;
}

.link-txt::before,
.navbar_link::before,
.footer_link::before,
.footer_legal-link::before {
    content: '';
    position: absolute;
    width: 100%;
    height: 1px;
    background: currentColor;
    top: 100%;
    left: 0;
    pointer-events: none;
    transform-origin: 100% 50%;
    transform: scale3d(0, 1, 1);
    transition: transform 0.3s;
}

.link-txt:hover::before,
.navbar_link:hover::before,
.footer_link:hover::before,
.footer_legal-link:hover::before {
    transform-origin: 0% 50%;
    transform: scale3d(1, 1, 1);
}
/* Set color style to inherit */
.inherit-color * {
    color: inherit;
}

/* Ensuring correct margin and padding for blockquote inside .text-rich-text */
.text-rich-text blockquote {
    margin: 2rem;
    padding: 2rem;
}


/* Focus state style for keyboard navigation for the focusable elements */
*[tabindex]:focus-visible,
  input[type="file"]:focus-visible {
   outline: 0.125rem solid #4d65ff;
   outline-offset: 0.125rem;
}

/* Get rid of top margin on first element in any rich text element */
.w-richtext > :not(div):first-child, .w-richtext > div:first-child > :first-child {
  margin-top: 0 !important;
}

/* Get rid of bottom margin on last element in any rich text element */
.w-richtext>:last-child, .w-richtext ol li:last-child, .w-richtext ul li:last-child {
	margin-bottom: 0 !important;
}

/* Prevent all click and hover interaction with an element */
.pointer-events-off {
	pointer-events: none;
}

/* Enables all click and hover interaction with an element */
.pointer-events-on {
  pointer-events: auto;
}

/* Create a class of .div-square which maintains a 1:1 dimension of a div */
.div-square::after {
	content: "";
	display: block;
	padding-bottom: 100%;
}

/* Make sure containers never lose their center alignment */
.container-medium,.container-small, .container-large {
	margin-right: auto !important;
  margin-left: auto !important;
}

/* 
Make the following elements inherit typography styles from the parent and not have hardcoded values. 
Important: You will not be able to style for example "All Links" in Designer with this CSS applied.
Uncomment this CSS to use it in the project. Leave this message for future hand-off.
*/
/*
a,
.w-input,
.w-select,
.w-tab-link,
.w-nav-link,
.w-dropdown-btn,
.w-dropdown-toggle,
.w-dropdown-link {
  color: inherit;
  text-decoration: inherit;
  font-size: inherit;
}
*/

/* Apply "..." after 3 lines of text */
.text-style-3lines {
	display: -webkit-box;
	overflow: hidden;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
}

/* Apply "..." after 2 lines of text */
.text-style-2lines {
	display: -webkit-box;
	overflow: hidden;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
}

/* Adds inline flex display */
.display-inlineflex {
  display: inline-flex;
}

/* These classes are never overwritten */
.hide {
  display: none !important;
}

@media screen and (max-width: 991px) {
    .hide, .hide-tablet {
        display: none !important;
    }
}
  @media screen and (max-width: 767px) {
    .hide-mobile-landscape{
      display: none !important;
    }
}
  @media screen and (max-width: 479px) {
    .hide-mobile{
      display: none !important;
    }
}
 
.margin-0 {
  margin: 0rem !important;
}
  
.padding-0 {
  padding: 0rem !important;
}

.spacing-clean {
padding: 0rem !important;
margin: 0rem !important;
}

.margin-top {
  margin-right: 0rem !important;
  margin-bottom: 0rem !important;
  margin-left: 0rem !important;
}

.padding-top {
  padding-right: 0rem !important;
  padding-bottom: 0rem !important;
  padding-left: 0rem !important;
}
  
.margin-right {
  margin-top: 0rem !important;
  margin-bottom: 0rem !important;
  margin-left: 0rem !important;
}

.padding-right {
  padding-top: 0rem !important;
  padding-bottom: 0rem !important;
  padding-left: 0rem !important;
}

.margin-bottom {
  margin-top: 0rem !important;
  margin-right: 0rem !important;
  margin-left: 0rem !important;
}

.padding-bottom {
  padding-top: 0rem !important;
  padding-right: 0rem !important;
  padding-left: 0rem !important;
}

.margin-left {
  margin-top: 0rem !important;
  margin-right: 0rem !important;
  margin-bottom: 0rem !important;
}
  
.padding-left {
  padding-top: 0rem !important;
  padding-right: 0rem !important;
  padding-bottom: 0rem !important;
}
  
.margin-horizontal {
  margin-top: 0rem !important;
  margin-bottom: 0rem !important;
}

.padding-horizontal {
  padding-top: 0rem !important;
  padding-bottom: 0rem !important;
}

.margin-vertical {
  margin-right: 0rem !important;
  margin-left: 0rem !important;
}
  
.padding-vertical {
  padding-right: 0rem !important;
  padding-left: 0rem !important;
}

/* Apply "..." at 100% width */
.truncate-width { 
		width: 100%; 
    white-space: nowrap; 
    overflow: hidden; 
    text-overflow: ellipsis; 
}
/* Removes native scrollbar */
.no-scrollbar {
    -ms-overflow-style: none;
    overflow: -moz-scrollbars-none; 
}

.no-scrollbar::-webkit-scrollbar {
    display: none;
}

/* Change the color of bullet markers */
ul li::marker {
  color: #3d93ef;
}

.nav_custom_dropdown {
  display: none; /* Initially hidden */
  opacity: 0;
  transform: translateY(-10px); /* Start a bit higher */
  transition: opacity 0.3s ease, transform 0.3s ease; /* Smooth transition */
}

.nav_custom_dropdown.show {
  display: block;
  opacity: 1;
  transform: translateY(0); /* Move to normal position */
}


#footer_bottom .inner {text-align: center;}
#copyright {width: 100%;}

/* FOR SMARTPHONE ONLY */
@media screen and (max-width: 767px) {


#main section h2 {margin: 1em auto; font-size:28px; line-height: 1.2em;}

.desc_box h3 {margin-bottom:1em;}

.flexbox {display: block;}

.item_box,
.flexbox .one_half,
.flexbox .one_third,
.flexbox .one_fourth {margin-bottom: 1em !important;}


..center_box p {text-align: left !important;}

#footer_logo {text-align: center; margin: 1em auto;}
#footer_logo img {max-width:200px !important}

#footer .inner {padding:1em;}

}


  /* Base font size for large screens */
  html { font-size: calc(0.625rem + 0.35vw); }

  /* Adjust font size for screens up to 1920px */
  @media screen and (max-width: 1920px) { 
    html { font-size: calc(0.625rem + 0.35vw); } 
  }

  /* Adjust font size for screens up to 1440px */
  @media screen and (max-width: 1440px) { 
    html { font-size: calc(0.78rem + 0.18vw); } 
  }

  /* Adjust font size for small screens up to 479px */
  @media screen and (max-width: 479px) { 
    html { font-size: calc(0.725rem + 0.75vw); } 
  }