@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,200..800&display=swap');

:root {
   --accent-color: #ff6e42;
}

section {
   padding-block: 6rem 5rem;
}

:is(h1, h2, h3) {
   font-family: 'Bricolage Grotesque', sans-serif;
}

h2 > span {
   color: var(--accent-color);
}

.brand_hero {
   position: relative;
   padding: 0;
   background: linear-gradient(145deg, #415c5c, #728b8c, #405a5b);
   min-height: 96vh;
   align-content: center;
   -webkit-box-reflect: below 0 linear-gradient(to bottom, transparent 85%, #fff 125%);
}

.brand_hero .float_elem {
   position: absolute;
   display: inline-block;
   z-index: 0;
}

.brand_hero .float_elem.shape1 {
   top: 15%;
   width: 10rem;
   height: 10rem;
   background: linear-gradient(#fff3 50%, transparent);
   border-radius: 50%;
   filter: blur(15px);
   -webkit-filter: blur(15px);

   animation: rotation 8s infinite linear;
}

@keyframes rotation {
   to {
      rotate: 360deg;
   }
}

.brand_hero .float_elem.shape2 {
   top: 60%;
   left: 50%;
   width: 75%;
   height: 75%;
   background: radial-gradient(circle at center, #405a5b, #728b8c, transparent);
   transform: translateX(-50%);
   border-radius: 50%;
   filter: blur(15px);
   /* z-index: 9; */
}

.brand_hero .float_elem.shape3 {
   left: auto;
   right: 5%;
   width: 3rem;
}

.brand_hero h1 {
   font-size: 3rem;
   line-height: 3.5rem;
   color: #fff;
   text-shadow: 0 2px 10px #888;
}

.brand_hero .brand_hero_btn {
   display: inline-block;
   font-size: 1rem;
   font-weight: 500;
   color: #fff;
   background-color: #000;
   padding: 0.9rem 2rem;
   margin-top: 2rem;
   border-radius: 30px;
   letter-spacing: 0.8px;
   outline: 5px solid #fff2 !important;
   transition: 0.4s;
}

.brand_hero .brand_hero_btn:hover {
   transform: translateY(4px);
   outline: 4px solid #fff4 !important;
}

.brand_about {
   margin-top: -30px;
   background: #fff;
   border-radius: 35px 35px 0 0;
}

/* .brand_about::after {
   content: "";
   position: absolute;
   left: 0;
   top: auto;
   bottom: 100%;
   width: 100%;
   height: 50px;
   background: #fff;
   border-radius: 40px 40px 0 0;
} */

.brand_info {
   text-align: center;
   padding-block: 3rem;
}

.brand_info .greet {
   position: relative;
   margin-bottom: 2.5rem;
}

.brand_info .greet::before,
.brand_info .greet::after {
   content: "";
   position: relative;
   display: inline-block;
   width: 100px;
   height: 2px;
   margin-inline: 0.5rem;
   transform: translateY(-5px);
}

.brand_info .greet::before {
   background: linear-gradient(to right, transparent, #666);
}

.brand_info .greet::after {
   background: linear-gradient(to left, transparent, #666);
}

.brand_info .info_elem {
   position: absolute;
   white-space: nowrap;
   display: inline-block;
   top: var(--elem_position, 0%);
   font-size: 0.95rem;
   font-weight: 500;
   background: #dddd;
   padding: 0.5rem 1.25rem;
   border-radius: 50px;
   outline: 5px solid #fff8;
   transform: rotate(var(--elem_rotate, 10deg));
   user-select: none;
}

.brand_info:not(:hover) .info_elem img {
   filter: grayscale(1);
}

.brand_info .info_elem.left {
   right: 100%;
}

.brand_info .info_elem.right {
   left: 100%;
}

.brand_info h2 {
   position: relative;
   font-size: 2rem;
   padding-block: 0.5rem 0rem;
}

.brand_logos .brandlogo_wrap {
   border: 1px solid #999;
   border-bottom: none;
   line-height: 0;
   padding: 5px;

   columns: 5 150px;
   column-rule: 1px solid #999;
   border-radius: 15px;
   overflow: hidden;
}

.brand_logos .brandlogo_wrap span {
   display: inline-block;
   width: 100%;
   height: 6rem;
   border-bottom: 1px solid #999;
   /* height: 100%; */
}

.brand_service .brandservice_wrap {
   position: relative;
   border: 1px solid;
   border-bottom-width: 2px;
   padding: 1rem;
   height: 100%;
   background: #fcfcfc;
   border-radius: 12px;
   overflow: hidden;
   transition: 0.4s;
}

.brand_service .brandservice_wrap:hover {
   box-shadow: 2px 4px 18px #ddd;
}

.brand_service .brandservice_wrap span {
   display: inline-block;
   width: 4rem;
   aspect-ratio: 1/1;
   border-radius: 10px;
   border: 1px solid #999;
   padding: 5px;
}

.brand_service .brandservice_wrap h5 {
   font-family: var(--popp);
   font-size: 1.3rem;
   margin-block: 0.75rem;
   font-weight: 500;
}

.brand_service .brandservice_wrap p {
   font-size: 0.95rem;
   line-height: 22px;
}

.brand_whychoose :is(h2, h5, p, span) {
   color: #fff;
}

.brand_whychoose {
   position: relative;
   background: #1a212d;
   z-index: 1;
}

.brand_whychoose::before {
   content: "";
   position: absolute;
   width: 9rem;
   aspect-ratio: 1/1;
   background: linear-gradient(#fff3 40%, transparent);
   border-radius: 50%;
   filter: blur(15px);
   animation: rotation 10s infinite linear;
   z-index: -1;
}

.brand_whychoose h2 span {
   color: var(--accent-color);
}

.brand_whychoose .whychoose_boxes {
   background: #ffffff11;
   padding: 1rem;
   border-radius: 10px;
   height: 100%;
   outline: 3px solid #ffffff18;
}

.brand_whychoose .whychoose_boxes span {
   display: inline-block;
   align-content: center;
   text-align: center;
   width: 3rem;
   aspect-ratio: 1/1;
   font-size: 1.5rem;
   margin-bottom: 0.75rem;
   background-color: var(--accent-color);
   border-radius: 50%;
}

.brand_whychoose .whychoose_boxes p {
   font-size: 0.94rem;
   color: #ddd;
}

.brand_business .business_heading {
   position: sticky;
   top: 1rem;
}

.brand_business .business_wrap .business_list {
   position: relative;
   padding: 1rem 1rem 0.75rem;
   border: 1px solid #000;
   border-bottom-width: 2px;
   margin-bottom: 1rem;
   border-radius: 10px;
}

.brand_business .business_wrap .business_list input {
   position: absolute;
   display: none;
}

.brand_business .business_wrap .business_list label {
   display: block;
   font-weight: 500;
   font-size: 1.25rem;
   user-select: none;
   cursor: pointer;
}

.business_wrap .business_list .list_content {
   width: 100%;
   max-height: 0;
   padding: 0 1rem;
   background-color: #f0f4f8;
   border-radius: 0 0 6px 6px;
   transition: max-height 0.35s ease, padding 0.35s ease;
   overflow: hidden;
}

.business_wrap .business_list .list_content p {
   font-size: 0.96rem;
}

.business_wrap .business_list input:checked ~ .list_content {
   max-height: 500px;
   padding: 0.5rem 0.75rem;
}

.business_wrap .business_list label::after {
   content: '+';
   float: right;
   font-size: 1.35rem;
   font-weight: 500;
   line-height: 1;
   transition: transform 0.3s ease;
}

.business_wrap .business_list input:checked + label::after {
   content: '-';
}

.cta_box {
   position: relative;
   max-width: 94%;
   padding: 1rem;
   background: #f6f6f6;
   border-radius: 12px;
   outline: 6px solid #eeee;
   /* outline-offset: 6px; */
   transform: rotate(-1deg);
}

.cta_box .cta_btn {
   display: inline-block;
   color: #fff;
   font-weight: 500;
   padding: 0.8rem 1.5rem;
   background: #000;
   border-radius: 40px;
   margin-block: 0.75rem;
   outline: 4px solid #fff !important;
   transition: 0.4s;
}

.cta_box .cta_btn:hover {
   background: var(--accent-color);
   color: #000;
}

.cta_box p a {
   color: #000;
   text-decoration: underline;
   text-underline-offset: 4px;
   transition: 0.4s;
}

.cta_box p a:hover {
   color: var(--accent-color);
}

@media (max-width: 1400px) {
   section .custom-container {
      max-width: 1240px;
   }
}

@media (max-width: 991px) {
   section {
      padding-block: 5rem 4rem;
   }

   .brand_info .info_elem {
      position: relative;
      left: auto !important;
      right: auto !important;
   }
}

@media (max-width: 764px) {
   h2 {
      font-size: 1.85rem;
   }

   .brand_hero h1 {
      font-size: 2.15rem;
      line-height: 2.5rem;
   }

   .brand_info h2 {
      font-size: 1.65rem;
   }

   .brand_logos .brandlogo_wrap span {
      height: 5rem;
   }

   .brand_business .business_wrap .business_list label {
      font-size: 1.1rem;
   }
}