/* Body Start */
:root {
     /* Colors-Default */
     --Color-default-13: #1335f5;
     --Color-default-12: #f5cf13;
     --Color-default-11: #15bfbc;
     --Color-default-10: #d90769;
     --Color-default-9: #15a04a;
     --Color-default-8: #f57813;
     --Color-default-7: #8100fa;
     --Color-default-6: #212529;
     --Color-default-5: #f3f3f3;
     --Color-default-4: #3498db;
     --Color-default-3: #8a2be2;
     --Color-default-2: #6501c3;
     --Color-default-1: #ffffff;
     /* Font-Family Default */
     --Font-default-3: sans-serif;
     --Font-default-2: poppins;
     --Font-default-1: Silkscreen;
}

.body-section {
     height: 335vh;
     padding: 0 0 0 0;
     transition: overflow 0.5s ease;
}

.body-section.loading-overlay-active {
     overflow: hidden;
}

/* Body End */

/* Navbar Start */
.navbar {
     background-color: var(--bs-body-bg);
     transition: transform 0.3s ease-in-out;
}

.navbar .container .offcanvas {
     height: 100vh;
     background-color: var(--Color-default-6);
}

.navbar .container .navbar-brand {
     font-weight: bolder;
     font-family: var(--Font-default-1);
}

.navbar .container .button .navbar-toggler {
     transition: 0.4s;
     padding: 7px 7px;
     color: var(--Color-default-1);
     background-color: var(--Color-default-3);
}

.navbar .container .button .navbar-toggler:hover {
     padding: 7px 7px;
     color: var(--Color-default-1);
     background-color: var(--Color-default-2);
}

.navbar .container .offcanvas-body .navbar-nav .nav-item .nav-link {
     margin: 0 10px;
     font-weight: bolder;
}

.navbar .container .offcanvas-body .navbar-nav .nav-item .nav-link:hover {
     margin: 0 10px;
     transition: 0.5s;
     font-weight: bolder;
     color: var(--Color-default-3);
}

/* Media Query Headphone */
@media (max-width: 575px) {
     .navbar .container .offcanvas-body .navbar-nav .nav-item .nav-link {
          margin: 0 5px;
          font-weight: 500;
          padding-top: 10px;
          color: var(--Color-default-1);
     }
}

/* Media Query Tablet And Headphone */
@media (max-width: 375px),
(max-width: 425px),
(max-width: 863px),
(max-width: 990px) {
     .navbar .container .offcanvas {
          width: 35vh;
          height: 200vh;
          background-color: var(--Color-default-6);
     }

     .navbar .container .offcanvas .navbar-nav .nav-item .nav-link {
          color: var(--Color-default-1);
     }

     .navbar .container .offcanvas .navbar-nav .nav-item .nav-link:hover {
          font-weight: bold;
          padding-left: 20px;
          color: var(--Color-default-7);
          border-left: 3px solid var(--Color-default-1);
     }
}

/* Navbar End */


/* Home Start */
.home {
     padding-top: 5rem;
     padding-bottom: 3rem;
}

.home-brand {
     font-weight: bolder;
     color: var(--Color-default-3);
     font-family: var(--Font-default-1);
}

.home-description {
     font-size: 14px;
     text-align: justify;
     font-family: var(--Font-default-2);
}

.home-button {
     padding: 8px 20px;
     text-align: center;
     border-radius: 5px;
     text-decoration: none;
     color: var(--Color-default-1);
     background-color: var(--Color-default-2);
}

.home-button:hover {
     color: var(--Color-default-1);
     background-color: var(--Color-default-3);
}

.home-content {
     animation: bounce 3s infinite;
}

/* Key Freme Animation-Image Bounce */
@keyframes bounce {
     0% {
          transform: translateY(0);
     }

     50% {
          transform: translateY(-15px);
     }

     100% {
          transform: translateY(0);
     }
}

/* Home End */

/* Box-List Start */
.box-list {
     padding-top: 4rem;
     padding-bottom: 3rem;
}

.box-list .container .box-icons {
     font-size: 32px;
     line-height: 0px;
     margin-right: 20px;
}

.icons-one {
     color: var(--Color-default-8);
}

.icons-two {
     color: var(--Color-default-9);
}

.icons-tree {
     color: var(--Color-default-10);
}

.icons-for {
     color: var(--Color-default-11)
}

.icons-five {
     color: var(--Color-default-12);
}

.icons-six {
     color: var(--Color-default-13);
}

.box-list .container .text-item .title {
     font-size: 20px;
     font-weight: 700;
     color: var(--Color-default-7);
     font-family: var(--Font-default-1);
}

.box-list .text-item .title {
     text-decoration: none;
     color: var(--Color-default-3);
}

.box-list .container .text-item .description {
     font-size: 14px;
     line-height: 24px;
     font-family: var(--Font-default-2);
}

/* Media query Headphone */
@media (max-width: 575px) {
     .box-list {
          padding-top: 3rem;
          padding-bottom: 2rem;
     }
}

/* Media Query Tablet And Headphone */
@media (max-width: 375px),
(max-width: 425px),
(max-width: 863px),
(max-width: 990px) {
     .box-list {
          padding-top: 3rem;
          padding-bottom: 2rem;
     }
}

/* Box-List End */

/* About Start */
.about {
     padding-top: 3rem;
     padding-bottom: 3rem;
}

.about .about-brand {
     color: var(--Color-default-3);
     font-family: var(--Font-default-1);
}

.about .container .list {
     margin-left: -32px;
     list-style: none;
}

.about .container .list .icons-text {
     color: var(--Color-default-3);
}

.about .container .check {
     color: var(--Color-default-3);
}

.about .container .about-description {
     font-size: 15px;
     text-align: justify;
     font-family: var(--Font-default-2);
}

/* Media query Headphone */
@media (max-width: 575px) {
     .about {
          padding-top: 3rem;
          padding-bottom: 2rem;
     }
}

@media (max-width: 1200px) {
     .about .container .about-content .img-fluid {
          height: 75vh;
     }
}

/* Media Query Tablet And Headphone */
@media (max-width: 375px),
(max-width: 425px),
(max-width: 863px),
(max-width: 990px),
(max-width: 1024px) {
     .about {
          padding-top: 3rem;
          padding-bottom: 2rem;
     }

     .about .container .about-content .img-fluid {
          width: 100%;
          height: 100%;
     }
}

/* About End */

/* Service Start */
.service {
     padding-top: 3rem;
}

.service .container .service-brand {
     font-weight: bolder;
     color: var(--Color-default-3);
     font-family: var(--Font-default-1);
}

/* Media query Headphone */
@media (max-width: 575px) {
     .service {
          padding-top: 2rem;
     }
}

/* Media Query Tablet And Headphone */
@media (max-width: 375px),
(max-width: 425px),
(max-width: 863px),
(max-width: 990px),
(max-width: 1024px) {
     .service {
          padding-top: 2rem;
     }
}

/* Service End */

/* Theme Mode/Loading Screen Start */
.btn-mode {
     z-index: 9999;
     padding: 7px 5px;
     border-radius: 10%;
     background-color: var(--Color-default-3);
}

.btn-mode:hover {
     background-color: var(--Color-default-2);
}

.loading-overlay {
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     z-index: 9999;
     display: flex;
     position: fixed;
     align-items: center;
     justify-content: center;
     background-color: var(--Color-default-6);
}

.loading-spinner {
     width: 50px;
     height: 50px;
     border-radius: 50%;
     animation: spin 2s linear infinite;
     border: 4px solid var(--Color-default-5);
     border-top: 4px solid var(--Color-default-7);
}

.loading-overlay {
     animation: fadeOut 0.5s ease 0.5s forwards;
}

/* Key Freme Animation-Image Spinner-Loading */
@keyframes spin {
     0% {
          transform: rotate(0deg);
     }

     100% {
          transform: rotate(360deg);
     }
}

/* Effect Transition-Blur Spinner-Loading */
@keyframes fadeOut {
     0% {
          opacity: 1;
     }

     100% {
          opacity: 0;
          visibility: hidden;
     }
}

/* Theme Mode/Loading Screen End */