html, body {
  overflow-x: hidden;
}

.nav-item{
    color:rgb(126, 124, 97);
  }


  .light-theme{
    background-color:#F3F8FF;
  }

  .blue-theme{
    background-color:#1A4870;
  }

  .footer-theme{
    background-color: #478CCF;
  }

  .navbar-color{
    color:#181C14;
  }
  

  .banner{
    background-image:linear-gradient(rgba(0,0,0,0.5),rgba(0,0,0,0.5)),url('banner1.jpg');
    background-size:cover;
    background-position:center;
    height: 70vh;
  } 

  .content-banner{
    height:100%;
    display:flex;
    justify-content:center;
    align-items:center;
  }

  .josefin-sans {
font-family: "Josefin Sans", sans-serif;
font-optical-sizing: auto;
font-weight: 700;
font-style: normal;
font-size:70px;
background:linear-gradient(-45deg, #ee7752, #e73c73, #23a6d5, #23d5ab);
color:transparent;
background-size: 400% 400%;
background-clip:text;
animation: gradient 5s ease infinite;
}

  .switch {
display: block;
--width-of-switch: 3.5em;
--height-of-switch: 2em;
--size-of-icon: 1.4em;
--slider-offset: 0.3em;
position: relative;
width: var(--width-of-switch);
height: var(--height-of-switch);
}

.switch input {
opacity: 0;
width: 0;
height: 0;
}

.slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #f4f4f5;
transition: .4s;
border-radius: 30px;
}

.slider:before {
position: absolute;
content: "";
height: var(--size-of-icon,1.4em);
width: var(--size-of-icon,1.4em);
border-radius: 20px;
left: var(--slider-offset,0.3em);
top: 50%;
transform: translateY(-50%);
background: linear-gradient(40deg,#ff0080,#181C14 70%);
;
transition: .4s;
}

input:checked + .slider {
background-color: #303136;
}

input:checked + .slider:before {
left: calc(100% - (var(--size-of-icon,1.4em) + var(--slider-offset,0.3em)));
background: #303136;
box-shadow: inset -3px -2px 5px -2px #8983f7, inset -10px -4px 0 0 #a3dafb;
}

.matemasie-regular {
font-family: "Matemasie", sans-serif;
font-weight: 400;
font-style: normal;
font-size:70px;
background:linear-gradient(-45deg, #ee7752, #e73c73, #23a6d5, #23d5ab);
color:transparent;
background-size: 400% 400%;
background-clip:text;
animation: gradient 5s ease infinite;
}

@keyframes gradient {
  0%{
    background-position: 0% 50%;
  }
  50%{
    background-position:100% 50%;
  }
  100%{
    background-position:0% 50%;
  }
}

.button1 {
padding: 1.3em 3em;
font-size: 12px;
text-transform: uppercase;
letter-spacing: 2.5px;
font-weight: 500;
color: #000;
background-color: #D2E0FB;
border: none;
border-radius: 45px;
box-shadow: 0px 8px 15px rgba(0, 0, 0, 0.1);
transition: all 0.3s ease 0s;
cursor: pointer;
outline: none;
}

.button1:hover {
background-color: #1c65aa;
box-shadow: 0px 15px 20px rgba(45, 90, 128, 0.4);
color: #fff;
transform: translateY(-7px);
}

.button1:active {
transform: translateY(-1px);
}

@media (max-width: 412px) {
.button1 {
  display:none;
}
}

.sub-text{
  color:#295F98;
}


.banner2 {
height:auto;
}

.banner3{
height:100%;
display:flex;
align-items:center;
justify-content:center;
flex-wrap:wrap;
}

.custom-card {
  background-color: transparent;
  border:none;
}

.kanit-bold {
font-family: "Kanit", sans-serif;
font-weight: 700;
font-style: normal;
}

.image-custom{
width:100px;
height:100px;
background-image:url('ikon1.png');
background-size:cover;
background-position:fill;
margin-left:15px;
}

.image-custom2{
width:100px;
height:100px;
background-image:url('ikon2.png');
background-size:cover;
background-position:fill;
margin-left:10px;
}

.image-custom3{
width:100px;
height:100px;
background-image:url('ikon3.png');
background-size:cover;
background-position:fill;
margin-left:4px;
}

.image-custom4{
width:100px;
height:100px;
background-image:url('ikon4.png');
background-size:cover;
background-position:fill;
margin-left:5px;
}

.sub-content{
display:flex;
justify-content:center;
gap:5rem;
}


.content-services{
padding-bottom:6em;
}

.text-space{
word-spacing:5px;
}

.secular-one-regular {
font-family: "Secular One", sans-serif;
font-weight: 700;
font-style: normal;
}

.card1 {
  box-shadow: 0 0 5px 3px rgba(187, 181, 181, 0.5);
}

.content-1{
height:auto;
display:flex;
align-items:center;
flex-wrap:wrap;
}

.content-2{
height:auto;
display:flex;
align-items:center;
flex-wrap:wrap;
}


.frame1 {
background-image:url('frame2.jpg');
background-size:cover;
background-position:center;
height:50vh;
}

.frame3 {
background-image:url('frame1.jpg');
background-size:cover;
background-position:center;
height:50vh;
}

.frame2{
height:50vh;
}

.frame4 {
background-image:url('frame3.jpg');
background-size:cover;
background-position:center;
height:50vh;
}

@media (min-width: 0px) and (max-width:768px){
.frame2 {
  text-align:center;
}

.content-1{
  padding-top:5em;
}

}

@media (min-width: 768px) and (max-width:992px){
.frame1 {
  height:60vh;
}
}

@media (min-width: 768px) {
.frame2 {
  padding-left: 6em; 
}
}


.button2 {
padding: 1em 2em;
font-size: 10px;
text-transform: uppercase;
letter-spacing: 2.5px;
font-weight: 500;
color: #000;
background-color: #D2E0FB;
border: none;
border-radius: 45px;
box-shadow: 0px 8px 15px rgba(0, 0, 0, 0.1);
transition: all 0.3s ease 0s;
cursor: pointer;
outline: none;
}

.button2:hover {
background-color: #1c65aa;
box-shadow: 0px 15px 20px rgba(45, 90, 128, 0.4);
color: #fff;
transform: translateY(-7px);
}

.button2:active {
transform: translateY(-1px);
}

.engine {
margin-right: 10px; 
vertical-align: middle; 
}

.content-4{
display:flex;
justify-content:space-around;
}


.carousel-content{
padding-top:7em;
padding-bottom:7em;
}

.hide{
visibility:hidden;
}


.dark-theme {
background-color: #222222;
color: #faf3e1;
}

.dark-theme .navbar{
background-color: #222222;
}

.dark-theme .navbar-color{
color: #faf3e1 !important;
}

.dark-theme .navbar-toggler {
  color: #faf3e1 !important;
  background-color: #faf3e1 !important;
}


.dark-theme .banner,
.dark-theme .banner2 {
background-color: #ff6e1f;
}

.dark-theme .card1 {
background-color: #3C3C3C;
color: #fff;
}

.dark-theme .light-theme{
background-color: #222222;
}

.dark-theme .footer-theme {
background-color: #F4A261;
}

.dark-theme .button1{
  background-color:#FF9100;
  color:#F5E8E4;
}

.dark-theme .button1:hover{
  box-shadow: 0px 15px 20px rgba(128, 91, 43, 0.4);
  background-color:#FF7F3E;
}

.dark-theme .button2{
  background-color:#FF9100;
  color:#F5E8E4;
}

.dark-theme .button2:hover{
  box-shadow: 0px 15px 20px rgba(128, 91, 43, 0.4);
  background-color:#FF7F3E;
}

.dark-theme .sub-text {
  color:#F3B13A;
}