:root {
    --st-color-white: #ffffff;
    --st-color-softgray: #f4f4f4;
    --st-color-gray: #b2b2b2;
    --st-color-darkgray: #909090;
    --st-color-softblack: #444444;
    --st-color-black: #222222;
    --st-color-softblue: #eff6fa;
    --st-color-blue: #1b9cd8;
    --st-color-darkblue: #012345;
    --st-color-orange: #f05500;
    --st-color-green: #4bdb5e;
    --st-font-13pl: 13px 'poppins-light';
    --st-font-14pl: 14px 'poppins-light';
    --st-font-13pr: 13px 'poppins-regular';
    --st-font-14pr: 14px 'poppins-regular';
    --st-font-16pr: 16px 'poppins-regular';
    --st-font-14ps: 14px 'poppins-semibold';
    --st-font-16ps: 16px 'poppins-semibold';
    --st-font-45ps: 45px 'poppins-semibold';
    --st-font-16pb: 16px 'poppins-bold';
    --st-font-18pb: 18px 'poppins-bold';
    --st-font-20pb: 20px 'poppins-bold';
    --st-font-24pb: 24px 'poppins-bold';
    --st-font-28pb: 28px 'poppins-bold';
    --st-font-40pb: 40px 'poppins-bold';
    --st-font-45pb: 45px 'poppins-bold';
    --st-font-100pb: 100px 'poppins-bold';
    --st-font-20reb: 20px 'raleway-extrabold';
    --st-font-22reb: 22px 'raleway-extrabold';
    --st-font-24reb: 24px 'raleway-extrabold';
    --st-font-30reb: 30px 'raleway-extrabold';
    --st-font-36reb: 36px 'raleway-extrabold';
    --st-font-40reb: 40px 'raleway-extrabold';
    --st-font-14ieb: 14px 'inter-extrabold';
    --st-font-20ieb: 20px 'inter-extrabold';
    --st-font-24ieb: 24px 'inter-extrabold';
    --st-font-12ib: 12px 'inter-bold';
    --st-font-14ib: 14px 'inter-bold';
    --st-font-16ib: 16px 'inter-bold';
    --st-font-18ib: 18px 'inter-bold';
    --st-font-20ib: 20px 'inter-bold';
    --st-font-22ib: 22px 'inter-bold';
    --st-font-24ib: 24px 'inter-bold';
    --st-font-26ib: 26px 'inter-bold';
    --st-font-28ib: 28px 'inter-bold';
    --st-font-33ib: 33px 'inter-bold';
    --st-font-35ib: 35px 'inter-bold';
    --st-radius-10: 10px;
    --st-radius-24: 24px;
}

/*RESET TAG*/
html { overflow-x:hidden; }
body { margin:0!important; padding:0!important; }
ul { margin:0; padding:0; list-style:none; }
a { text-decoration:none; }
button { margin:0; padding:0; background-color:transparent; border:none; }
/**/

/*GLOBAL TAG*/
.text-orange { color:var(--st-color-orange)!important; }
.headline { max-width:700px; margin:0 auto; text-align:center;
    & .headline-title { margin-bottom:24px; font:var(--st-font-28ib); color:var(--st-color-darkblue); }
    & .headline-title-emphasis { font:var(--st-font-28pb); color:var(--st-color-orange); }
    & .headline-content { margin-bottom:48px; font:var(--st-font-14pr); color:var(--st-color-black); }
}

.headline-secondary { max-width:700px; margin-bottom:36px;
    & .heading-secondary-title { font:var(--st-font-30reb); color:var(--st-color-orange); text-align:left; }
}
/**/

/*RESPONSIVE TAG*/
@media (max-width:1198.98px) {
    #information .information-form { width:100%!important; margin:0 0 40px!important; }
    #information .information-form .information-form-area { width:100%!important; margin:0 0 0 16px!important; }
    #information .information-about { width:100%!important; margin:0!important; }
}

@media (max-width:991.98px) { 
    header .header-area .row > div:first-child { display:none!important; }
    #slider .slider-area { transform:translate(-25%, 85%)!important; }

    #message-form { margin:0 0 10% 0!important; }
    #contact .contact-form { margin-left:0!important; }
}

@media (max-width:767.98px) {
    #category .category-box a::after { background-color:rgba(0, 0, 0, 0.20)!important; }
    #category :not(:first-child) .category-card-name { min-width:100px!important; font:var(--st-font-20reb)!important; line-height:30px!important; }

    #heading .heading-area .heading-title { font:var(--st-font-28ib)!important; }
}

@media (max-width:575.98px) {
    .modal-telephone { width:100%; background-color:var(--st-color-blue); border-radius:var(--st-radius-10);
        & .modal-telephone-tt { margin-bottom:16px; font:var(--st-font-14ib); color:var(--st-color-white); }
        & .modal-telephone-dt a { font:var(--st-font-24pb)!important; color:var(--st-color-white)!important; }
    }

    #slider .slider-area { transform:translate(-25%, 50%)!important; }

    .headline .headline-title { font:var(--st-font-26ib); }
    .headline .headline-title-emphasis { font:var(--st-font-24pb); }
    .headline-secondary .heading-secondary-title { font:var(--st-font-24reb); }

    #message-form .message-form-consultant .message-form-telephone, .message-form-whatsapp1, .message-form-whatsapp2 { margin-bottom:16px; display:flex!important; text-align:center; }

    footer .footer-area .footer-contact .footer-contact-telephone a { font:var(--st-font-30pb)!important; }
    footer .footer-design { margin-bottom:48px!important; }

    #sidebar { width:100%; top:98%!important; flex-direction:row!important; flex-wrap:wrap; justify-content:center; }
    #sidebar .sidebar-button { width:90px!important; border-radius:0!important; }

    #sidebar .sidebar-button::after { content:''!important; transform:translateY(0)!important; }
    #sidebar .sidebar-button i { transform:translateX(0)!important; }
}

@media (max-width:360px) {
    .navbar .navbar-brand { margin-right:0!important; }
    .navbar .navbar-brand img { width:75%!important; }
    #message-form .message-form-consultant .message-form-consultant-title { font:var(--st-font-18ib)!important; }
    footer .footer-area .footer-contact .footer-contact-telephone a { font:var(--st-font-24pb)!important; }
}
/**/

header { margin-bottom:16px;
    & .header-area { min-height:40px; margin-bottom:24px; display:flex; align-items:center; color:var(--st-color-white); background-color:var(--st-color-blue);
        & .header-telephone { font:var(--st-font-18pb);
            & a { margin:0 8px; color:var(--st-color-white); transition:color 0.4s;
                &:hover { color:var(--st-color-darkblue); }
            }
        }
        & .header-content { font:var(--st-font-12ib); }

        & ul { display:inline-flex;
            & li { margin-right:4px;
                &.header-language { margin-left:8px; padding:4px 0 0 16px; font:var(--st-font-16ps); border-left:solid 1px var(--st-color-white);
                    & a { color:var(--st-color-white); transition:color 0.4s;
                        &:hover { color:var(--st-color-darkblue); }
                    }
                }
                & img { transition:background-color 0.4s;
                    &:hover { background-color:var(--st-color-darkblue); }
                }
            }
        }
    }

    & nav { font:var(--st-font-16ps);
        & ul li { margin-left:50px; padding-bottom:10px; position:relative;
            & a { color:var(--st-color-black);
                &::before { content:""; width:calc(100% + 20px); height:calc(100% + 20px); position:absolute; top:-20px; left:-10px; border-bottom:solid 4px var(--st-color-blue); transition:opacity 0.4s; opacity:0; z-index:-999; }
                &:hover::before { opacity:1; }
            }
        }

        & .nav-item.dropdown:hover .dropdown-menu { margin-top:10px; padding:20px; display:flex; flex-wrap:wrap; border:solid 1px var(--st-color-gray); box-shadow:rgba(100, 100, 111, 0.60) 0px 7px 29px 0px; --bs-dropdown-link-hover-bg:none; --bs-dropdown-link-active-bg:none;
            & li { margin:8px 0 8px 16px; }
        }

        & .nav-item.dropdown:hover .dropdown-menu-750 { width:750px; transform:translateX(-40%); }
        & .nav-item.dropdown:hover .dropdown-menu-250 { width:250px; transform:translateX(-22%); }

        & .nav-item.dropdown:hover a.dropdown-item { width:333px; color:var(--st-color-darkgray);
            &::before { border:none; }
            &:hover { color:var(--st-color-blue); }
        }
    }

    & #menuModal a { font:var(--st-font-16ps); color:var(--st-color-darkblue); }
}

#slider { margin-bottom:60px;
    & .slider-image { width:100%; height:auto; position:relative; overflow:hidden; }
    & .slider-area { max-width:715px; position:absolute; top:0; left:25%; color:var(--st-color-black); transform:translate(-22%, 100%); z-index:99;
        & .slider-title { font:var(--st-font-40reb);
            & .slider-title-emphasis { color:var(--st-color-green); }
        }
        & .slider-content { margin-bottom:48px; font:var(--st-font-14pr); }
        & .slider-button { padding:16px 24px; font:var(--st-font-16ps); color:var(--st-color-black); background-color:var(--st-color-white); border:solid 3px var(--st-color-blue); border-radius:var(--st-radius-10); transition:color 0.15s ease, background-color 0.6s ease;
            &:hover { color:var(--st-color-white); background-color:var(--st-color-blue); }
        }
    }
}

#heading { min-height:200px; margin-bottom:30px; position:relative; display:flex; flex-direction:column; align-items:center; text-align:center;
    & .heading-image { width:100%; height:100%; position:absolute; top:0; bottom:0; left:0; right:0; overflow:hidden; z-index:-1; }
    & .heading-area { min-height:200px; margin-bottom:40px; display:flex; flex-direction:column; justify-content:center; align-items:center; color:var(--st-color-white);
        & .heading-title { font:var(--st-font-35ib); }
    }
    & .heading-map { font:var(--st-font-13pr); color:var(--st-color-gray); display:flex; justify-content:start;
        & i { margin-right:10px; }
        & span { margin:0 5px; }
        & a { color:var(--st-color-gray);
            &:hover { text-decoration:underline; }
        }
    }
}

#category { margin-bottom:60px;
    & .category-card { margin-bottom:24px; position:relative; overflow:hidden;
        & .category-card-name { min-width:200px; position:absolute; left:60%; bottom:20px; font:var(--st-font-22reb); color:var(--st-color-white); line-height:33px; text-align:end; transform:translateX(-60%); text-shadow:1px 1px 0px var(--st-color-black), -1px -1px 0px var(--st-color-black), 1px -1px 0px var(--st-color-black), -1px 1px 0px var(--st-color-black); opacity:1; z-index:999; }
        &::after { content:""; position:absolute; inset:0; background-color:rgba(2, 2, 2, 0.25); transition:opacity 0.4s ease; z-index:99; }
        &:hover::after { opacity:0; }
    }
}

#product { margin-bottom:60px;
    & .product-display { padding:48px 0 24px; background-color:var(--st-color-softgray); }
    & .product-card { max-width:100%; max-height:450px; margin-bottom:24px; padding:24px; text-align:center; background-color:var(--st-color-white); border:solid 1px var(--st-color-gray); border-radius:var(--st-radius-10);
        & .product-card-name { font:var(--st-font-16pb); color:var(--st-color-black); text-decoration:underline; }
        & .product-card-spot { margin:16px 0; font:var(--st-font-13pl); color:var(--st-color-black); }
        & .product-card-button { font:var(--st-font-12ib);
            & .product-card-button-primary { margin:0 8px 4px 0; padding:10px 16px; display:inline-flex; color:var(--st-color-white); background-color:var(--st-color-blue); border-radius:var(--st-radius-10); transition:background-color 0.4s ease;
                &:hover { background-color:var(--st-color-orange); }
            }
            & .product-card-button-secondary { padding:10px 24px; display:inline-flex; color:var(--st-color-black); background-color:var(--st-color-white); border:solid 2px var(--st-color-blue); border-radius:var(--st-radius-10); transition:background-color 0.4s ease;
                &:hover { border-color:var(--st-color-orange); }
            }
        }
    }
}

#product-image { margin-bottom:40px;
    & .product-image-big { margin-bottom:30px; border:solid 1px var(--st-color-gray); border-radius:var(--st-radius-10);
        & img { max-width:1440px; height:auto; border-radius:var(--st-radius-10); }
    }

    & .product-image-small { display:inline-flex; justify-content:center;
        & ul li { max-width:130px; max-height:200px; padding:5px; margin:10px 9px; box-sizing:border-box; border:solid 1px var(--st-color-gray); border-radius:var(--st-radius-10);
            &:hover { outline:solid 3px var(--st-color-blue); }
            &:target { outline:solid 3px var(--st-color-blue); }
        }
        & img { max-width:100px; }
    }
}

#product-image-big-preview {
    transition: opacity 0.45s ease;
    opacity: 1;
}

#product-features { margin-bottom:80px;
    & ul li { padding:18px 0; border-bottom:solid 1px var(--st-color-softgray);
        & span:first-child { width:200px; display:inline-flex; font:var(--st-font-13pr); color:var(--st-color-softblack); }
        & span:last-child { height:30px; font:var(--st-font-14ps); color:var(--st-color-black); }
    }
}

#counter { min-height:150px; margin-bottom:70px;
    & .row > div { margin-bottom:3px; padding:24px 0 36px; position:relative; border-right:solid 3px var(--st-color-white);

        &:first-child { padding:0; background-color:var(--st-color-blue);
            & div:first-child { padding-left:80px; font:var(--st-font-100pb); color:var(--st-color-white); opacity:0.5; }
            & div:last-child { position:absolute; top:70px; left:170px; font:var(--st-font-45ps); color:var(--st-color-white); }
        }

        &:not(:first-child) { background-color:var(--st-color-softblue);
            & div:first-child { padding-left:80px; font:var(--st-font-45pb); color:var(--st-color-blue); }
            & div:last-child { padding-left:80px; font:var(--st-font-18ib); color:var(--st-color-black); }
        }

        & picture { position:absolute; top:40px; left:20px; }
    }
}

#information { margin-bottom:70px;
    & .information-form { width:500px; max-height:600px; margin-left:5%; padding:30px 60px 30px 30px; color:var(--st-color-black); background-color:var(--st-color-softblue); border-radius:var(--st-radius-10);
        & .information-form-area { width:80%; margin-left:48px;
            & .information-form-title { margin-bottom:24px; font:var(--st-font-24ieb); }
            & .form-group label { margin-bottom:8px; font:var(--st-font-14ps); }
            & .form-group input, .form-group textarea { margin-bottom:16px; padding:8px; font:var(--st-font-13pr); color:var(--st-color-softblack); border-radius:var(--st-radius-10);
                &::placeholder { color:var(--st-color-gray); }
            }
            & .information-form-button { text-align:center;
                & .information-form-button-primary { padding:10px 16px; font:var(--st-font-14ps); color:var(--st-color-white); background-color:var(--st-color-orange); border-radius:var(--st-radius-10); transition:background-color 0.6s ease;
                    &:hover { background-color:var(--st-color-darkblue); }
                }
            }
        }
    }

    & .information-about{ width:700px; min-height:500px; max-height:750px; margin:-400px 0 0 42%; padding:40px; color:var(--st-color-white); background-color:var(--st-color-blue); border-radius:var(--st-radius-10);
        & .information-about-title { margin-bottom:40px; font:var(--st-font-36reb); text-shadow:1px 1px 0px var(--st-color-black), -1px -1px 0px var(--st-color-black), 1px -1px 0px var(--st-color-black), -1px 1px 0px var(--st-color-black); }
        & p { font:var(--st-font-14pr); }
    }
}

#blog { margin-bottom:66px;
    & .blog-card { max-width:100%; margin-bottom:24px; padding:16px 16px 8px; display:flex; flex-direction:column; border:solid 1px var(--st-color-gray); border-radius:var(--st-radius-10);
        & img { width:100%; margin-bottom:24px; }
        & time { margin-bottom:24px; display:block;
            & span { padding:8px; font:var(--st-font-12ib); color:var(--st-color-white); background-color:var(--st-color-blue); }
        }
        & .blog-card-name { margin-bottom:8px; font:var(--st-font-14ps); color:var(--st-color-black); }
        & .blog-card-spot { margin-bottom:16px; font:var(--st-font-13pl); color:var(--st-color-black); }
        & .blog-card-read { font:var(--st-font-14pr); color:var(--st-color-gray); text-decoration:underline; }
        & a { time > span { transition:color 0.1s ease, background-color 0.25s ease; }
            &:hover { time > span { color:var(--st-color-white); background-color:var(--st-color-darkblue); } text-decoration:underline; text-decoration-color:var(--st-color-darkblue); }
        }
    }

    & .blog-paging { margin-bottom:24px; text-align:center;
        & ul li { min-width:35px; min-height:45px; margin-right:10px; font:var(--st-font-14pr); display:inline-flex; justify-content:center; align-items:center; border:solid 1px var(--st-color-gray); transition:background-color 0.4s ease;
            & a { padding:12px 12px 10px; color:var(--st-color-black);
                &:hover { color:var(--st-color-white); }
            }
            &:hover { background-color:var(--st-color-orange); border-color:var(--st-color-orange); }
        }
    }
}

#location { margin-bottom:66px;
    & .location-card { max-width:100%; margin-bottom:24px; padding:16px 16px 8px; display:flex; flex-direction:column; border:solid 1px var(--st-color-gray); border-radius:var(--st-radius-10);
        & img { width:100%; margin-bottom:24px; }
        & time { margin-bottom:24px; display:block;
            & span { padding:8px; font:var(--st-font-12ib); color:var(--st-color-white); background-color:var(--st-color-blue); }
        }
        & .location-card-name { margin-bottom:8px; font:var(--st-font-14ps); color:var(--st-color-black); }
        & .location-card-spot { margin-bottom:16px; font:var(--st-font-13pl); color:var(--st-color-black); }
        & .location-card-read { font:var(--st-font-14pr); color:var(--st-color-gray); text-decoration:underline; }
        & a { time > span { transition:color 0.1s ease, background-color 0.25s ease; }
            &:hover { time > span { color:var(--st-color-white); background-color:var(--st-color-darkblue); } text-decoration:underline; text-decoration-color:var(--st-color-darkblue); }
        }
    }

    & .location-paging { margin-bottom:24px; text-align:center;
        & ul li { min-width:35px; min-height:45px; margin-right:10px; font:var(--st-font-14pr); display:inline-flex; justify-content:center; align-items:center; border:solid 1px var(--st-color-gray); transition:background-color 0.4s ease;
            & a { padding:12px 12px 10px; color:var(--st-color-black);
                &:hover { color:var(--st-color-white); }
            }
            &:hover { background-color:var(--st-color-orange); border-color:var(--st-color-orange); }
        }
    }
}

#reference { margin-bottom:70px; padding:36px 0; background-color:var(--st-color-softgray);
    & ul { text-align:center;
        & li { margin-bottom:16px; }
    }
    & img { max-width:161px; max-height:81px; transition:transform 0.4s ease;
        &:hover { transform:scale(1.15); cursor:pointer; }
    }
}

#project { margin-bottom:60px;
    & .project-card { max-width:100%; margin-bottom:24px; padding:16px; display:flex; flex-direction:column; border:solid 1px var(--st-color-gray); border-radius:var(--st-radius-10);
        & img { margin-bottom:16px; border-radius:var(--st-radius-10) var(--st-radius-10) 0 0;}
        & ul { margin-bottom:25px;
            & li { padding:8px 0 8px 16px;
                & span:first-child { width:140px; display:inline-flex; font:var(--st-font-14ps); color:var(--st-color-black); }
                & span:last-child { width:140px; height:30px; font:var(--st-font-14pr); color:var(--st-color-black); }
                &:first-child, &:nth-of-type(3n), &:nth-of-type(5n) { background-color:var(--st-color-softgray); }
                &:first-child span:last-child { font:var(--st-font-14ib); color:var(--st-color-darkblue); }
            }
        }

        & .project-card-spot { margin-bottom:25px; font:var(--st-font-13pr); color:var(--st-color-softblack); }
        & .project-card-read { font:var(--st-font-14ib); color:var(--st-color-white); text-decoration:underline;
            & span { padding:10px 14px; background-color:var(--st-color-darkblue);
                &:hover { background-color:var(--st-color-orange); }
            }
        }
    }

    & .project-paging { margin-bottom:24px; text-align:center;
        & ul li { min-width:35px; min-height:45px; margin-right:10px; font:var(--st-font-14pr); display:inline-flex; justify-content:center; align-items:center; border:solid 1px var(--st-color-gray); transition:background-color 0.4s ease;
            & a { padding:12px 12px 10px; color:var(--st-color-black);
                &:hover { color:var(--st-color-white); }
            }
            &:hover { background-color:var(--st-color-orange); border-color:var(--st-color-orange); }
        }
    }
}

#content { margin-bottom:80px;
    & h1, h2, h3, h4, h5, h6 { margin-bottom:30px; text-align:center; color:var(--st-color-black); }
    & h1 { font:var(--st-font-24ib); }
    & h2 { font:var(--st-font-22ib); }
    & h3 { font:var(--st-font-20ib); }
    & h4 { font:var(--st-font-18ib); }
    & h5 { font:var(--st-font-16ib); }
    & h6 { font:var(--st-font-14ib); }
    & p { margin-bottom:30px; font:var(--st-font-14pr); color:var(--st-color-softblack); }
    & a { font:var(--st-font-14ps); color:var(--st-color-blue);
        &:hover { text-decoration:underline; }
    }
    & .content-popup { max-height:333px; margin-bottom:20px; transition:max-height 0.4s ease; overflow:hidden; }
    & .content-button { text-align:center;
        & .content-button-primary { padding:10px 16px; font:var(--st-font-14ps); color:var(--st-color-white); background-color:var(--st-color-blue); border-radius:var(--st-radius-10); transition:background-color 0.4s ease; cursor:pointer;
            &:hover { background-color:var(--st-color-orange); }
        }
    }

    & .content-project-features { margin:16px 0 30px;
        & ul li { padding:8px 0 8px 16px;
            & span:first-child { width:140px; display:inline-flex; font:var(--st-font-14ps); color:var(--st-color-black); }
            & span:last-child { width:140px; height:30px; font:var(--st-font-14pr); color:var(--st-color-black); }
            &:first-child, &:nth-of-type(3n), &:nth-of-type(5n) { background-color:var(--st-color-softgray); }
            &:first-child span:last-child { font:var(--st-font-14ib); color:var(--st-color-darkblue); }
        }
    }

    & .content-end { padding:30px 0 5px; display:flex; justify-content:space-between; align-items:center;
        & .content-end-left { font:var(--st-font-20ieb); color:var(--st-color-softblack);
            & span:first-child { margin-right:20px; }
            & span img { padding:8px; margin-right:5px; background-color:var(--st-color-blue); border-radius:var(--st-radius-24); transition:background-color 0.6s ease, opacity 0.6s ease; opacity:0.3;
                &:hover { background-color:var(--st-color-darkblue); opacity:1; }
            }
        }
        
        & .content-end-right { margin-right:30px; font:var(--st-font-16ps);
            & a { color:var(--st-color-softblack);
                &:hover { padding:20px; margin:-20px; color:var(--st-color-white); background-color:var(--st-color-darkblue); border-radius:var(--st-radius-10); }
            }
        }
    }
}

#gallery { margin-bottom:60px;
    & img { width:100%; margin-bottom:24px; padding:10px; outline:solid 1px var(--st-color-gray);
        &:hover { outline:solid 2px var(--st-color-blue); }
    }
}

#faq { margin-bottom:60px; display:flex; flex-direction:column; align-items:center;
    & .faq-area { width:100%; max-width:1440px; margin-bottom:20px; padding:25px 0; background-color:var(--st-color-softgray); border-radius:var(--st-radius-10); }
        & .row { padding:10px 0; background-color:var(--st-color-white); border-radius:var(--st-radius-10);
            & img { border-radius:var(--st-radius-10); }
        }
    & dl { margin-top:15px; 
        & dt { padding:34px 74px; font:var(--st-font-16ib); color:var(--st-color-black); background:url('../resimler/genel/sss.webp') no-repeat 20px center; border-top:solid 1px var(--st-color-softgray); transition:color 0.1s ease, background-color 0.4s ease;
            &:first-child { border:none; }
            &:hover { color:var(--st-color-white); background-color:var(--st-color-blue); border-radius:var(--st-radius-10); cursor:pointer; }
        }
        & .active { color:var(--st-color-white); background-color:var(--st-color-darkblue); border-radius:var(--st-radius-10); cursor:pointer;
            &:hover { color:var(--st-color-white); background-color:var(--st-color-darkblue); }
        }
        & dd { max-height:0; padding:0 20px; font:var(--st-font-14pr); line-height:26px; transition:max-height 0.4s ease, padding 0.4s ease; overflow:hidden; }
        & .show { max-height:500px; padding:20px; }
    }
}

footer { padding:48px 16px 8px; display:flex; flex-direction:column; align-items:center; background-color:var(--st-color-softgray);
    & .footer-area { width:100%; max-width:1440px; padding-top:24px; background-color:var(--st-color-white);
        & .footer-title { font:var(--st-font-16pb); color:var(--st-color-black); }

        & .line-area { width:79%; display:inline-flex; align-items:center;
            .line-rectangle { width:60px; height:7px; margin:8px 0; background-color:var(--st-color-blue); }
            .line { height:1px; flex-grow:1; background-color:var(--st-color-blue); }
        }

        & ul { list-style:none;
            & li { margin-bottom:6px;
                &:last-child { margin-bottom:36px; }
                & a { font:var(--st-font-14pr); color:var(--st-color-softblack);
                    &:hover { text-decoration:underline; }
                }
            }
        }

        & .footer-contact { padding:24px 8px; color:var(--st-color-black); border:solid 1px var(--st-color-blue); border-bottom:none;
            & .footer-contact-telephone { padding:24px 0px; font:var(--st-font-20pb);
                & a { font:var(--st-font-40pb); color:var(--st-color-black); }
            }
            & .footer-contact-content { font:var(--st-font-14pl);
                & img { margin:0px 48px 24px 0; }
            }
        }
    }

    & .footer-design { margin:16px 0 8px; font:var(--st-font-13pr); }
}

#message-form { max-width:1320px; margin:0 0 20% 8%; position:sticky; top:16px; z-index:999;
    & .message-form-heading { margin-bottom:16px; font:var(--st-font-24ieb); }
    & .message-form-star { margin-bottom:24px;
        & .message-form-star-content { margin-left:15px; font:var(--st-font-14pr); }
    }
    & .message-form-area { margin-bottom:30px; padding:40px; color:var(--st-color-black); background-color:var(--st-color-softblue); border-radius:var(--st-radius-10);
        & .message-form-title { margin-bottom:24px; font:var(--st-font-24ieb); }
        & .message-form-content { margin-bottom:24px; font:var(--st-font-13pl); }
        & .form-group label { margin-bottom:8px; font:var(--st-font-14ps); }
        & .form-group input, .form-group textarea { margin-bottom:16px; padding:8px; font:var(--st-font-13pr); color:var(--st-color-softblack); border-radius:var(--st-radius-10);
            &::placeholder { color:var(--st-color-gray); }
        }
        & .message-form-button { text-align:center;
            & .message-form-button-primary { padding:10px 16px; font:var(--st-font-14ps); color:var(--st-color-white); background-color:var(--st-color-orange); border-radius:var(--st-radius-10); transition:background-color 0.6s ease;
                &:hover { background-color:var(--st-color-darkblue); }
            }
        }
    }

    & .message-form-consultant { 
        & .message-form-consultant-title { margin-bottom:20px; font:var(--st-font-20ieb); }
        
        & .message-form-consultant-telephone,
          .message-form-consultant-whatsapp1,
          .message-form-consultant-whatsapp2 { margin-right:8px; padding:14px 22px; display:inline-flex; border:solid 1px var(--st-color-gray); border-radius:var(--st-radius-10); transition:color 0.1s ease, background-color 0.4s; cursor:pointer; }
        
        & .message-form-consultant-telephone:hover { background-color:var(--st-color-blue); border-color:var(--st-color-blue); }

        & .message-form-consultant-whatsapp1:hover,
          .message-form-consultant-whatsapp2:hover { background-color:var(--st-color-green); border-color:var(--st-color-green); }
        
        & .message-form-consultant-telephone a,
          .message-form-consultant-whatsapp1 a,
          .message-form-consultant-whatsapp2 a { width:100%; height:100%; display:block; font:var(--st-font-14ps); color:var(--st-color-black); }

        & .message-form-consultant-telephone:hover a,
          .message-form-consultant-whatsapp1:hover a,
          .message-form-consultant-whatsapp2:hover a { color:var(--st-color-white); }
    }
}

#contact { margin-bottom:60px;
    & img { margin-bottom:48px; }
    
    & .contact-info { margin-bottom:60px; padding-right:48px; color:var(--st-color-black); border-right:solid 1px var(--st-color-softgray);
        & .contact-info-title { margin-bottom:24px; font:var(--st-font-24ib); }
        & .contact-info-row { margin-bottom:24px;
            & .contact-info-row-title { margin-bottom:4px; display:flex; align-items:center; font:var(--st-font-14ps);
                & i { margin-right:8px; }
            }
            & .contact-info-row-description { margin-left:22px; font:var(--st-font-13pl);
                & a { color:var(--st-color-black);
                    &:hover { color:var(--st-color-orange); }
                }
            }
        }
    }

    & .contact-form { margin-left:24px;
        & .contact-form-title { margin-bottom:25px; font:var(--st-font-24ib); color:var(--st-color-black); }
        & .contact-form-content { margin-bottom:24px; font:var(--st-font-13pr); color:var(--st-color-softblack); }
        & .form-group label { margin-bottom:8px; font:var(--st-font-14ps); }
        & .form-group input, .form-group textarea { margin-bottom:24px; padding:12px; font:var(--st-font-13pr); color:var(--st-color-black); background-color:var(--st-color-softgray);
            &::placeholder { color:var(--st-color-gray); }
            &.form-control { border-radius:0; }
        }
        & .contact-form-button { text-align:left;
            & .contact-form-button-primary { padding:8px 16px; color:var(--st-color-white); background-color:var(--st-color-orange); transition:background-color 0.4s ease;
                &.btn { border-radius:0; }
                &:hover { background-color:var(--st-color-darkblue); }
            }
        }
    }
}

#sidebar { position:fixed; top:50%; right:0; display:flex; flex-direction:column; align-items:flex-end; transform:translateY(-50%); z-index:0;
    & .sidebar-button { width:50px; height:45px; margin-bottom:5px; padding-left:5px; position:relative; display:flex; justify-content:center; align-items:center; color:var(--st-color-white); border-radius:20px 0 0 20px; transition:width 0.4s ease, background-color 0.4s ease; cursor:pointer;
        &.orange { background-color:var(--st-color-orange);  }
        &.green { background-color:var(--st-color-green); }
        &.blue { background-color:var(--st-color-blue); }
        &.black { background-color:var(--st-color-black); }
        & i { font-size:20px; transition:transform 0.4s ease; }
    }

    & .sidebar-button:hover{ width:170px;
        & i { transform:translateX(-60px); }
        &::after { content:attr(data-tooltip); padding:5px 10px; position:absolute; top:50%; right:0; color:var(--st-color-white); white-space:nowrap; transform:translateY(-50%); z-index:999; }
    }
}

#popup-form { width:100%; height:100%; display:flex; position:fixed; top:0; left:0; background:rgba(0, 0, 0, 0.5); justify-content:center; align-items:center; z-index:999;
    & .popup-form-area { min-width:350px; max-width:550px; padding:40px; position:relative; color:var(--st-color-black); background-color:var(--st-color-white); border:solid 5px var(--st-color-blue); border-radius:var(--st-radius-10); transform:translateX(0);
        & .popup-form-close { padding:0 5px; position:absolute; top:30px; right:10px; font:var(--font-36pb); color:var(--color-222); background:none; cursor:pointer; border:none; border-radius:10px; }

        & .popup-form-title { margin-bottom:24px; font:var(--st-font-24ieb); }
        & .popup-form-content { margin-bottom:24px; font:var(--st-font-13pl); }
        & .form-group label { margin-bottom:8px; font:var(--st-font-14ps); }
        & .form-group input, .form-group textarea { margin-bottom:16px; padding:8px; font:var(--st-font-13pr); color:var(--st-color-softblack); border-radius:var(--st-radius-10);
            &::placeholder { color:var(--st-color-gray); }
        }
        & .popup-form-button { text-align:center;
            & .popup-form-button-primary { padding:10px 16px; font:var(--st-font-14ps); color:var(--st-color-white); background-color:var(--st-color-orange); border-radius:var(--st-radius-10); transition:background-color 0.6s ease;
                &:hover { background-color:var(--st-color-darkblue); }
            }
        }
    }
}