/* Contents */


/* ------------------------

1.      General
2.      Custom ScrollBar
3.      Custom Design
4.      Navbar
5.      Banner
6.      Accordion Menu
6.1     About 
6.2     Resume
6.3     Portfolio
6.4     Services
6.5     Testimonial
6.6     Blog
6.7     Contact
7.      Footer

------------------------ */


/* 
==========================================
                1. General
==========================================
*/

@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400;500;600;700;800;900&display=swap");
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: 'Poppins', sans-serif;
    background-color: var(--bg-black);
}

input[type=number]::-webkit-inner-spin-button {
    -webkit-appearance: none;
}

:root {
    /* BackGround Color */
    --primary-color: #ff451b;
    --secondary-color: #ffb324;
    --dark-color: #494b50;
    --bg-dark-gray: #5c5d64;
    --bg-black: #1d1b1b;
    --dark-light-color: #777a7f;
    /* Text Color */
    --primary-text: #ff451b;
    --text-white: #fff;
    --text-gray: #a7afbd;
}


/* 
==========================================
            2. Custom ScrollBar
==========================================
*/

::-webkit-scrollbar {
    width: 0.25rem;
}

::-webkit-scrollbar-track {
    background: var(--bg-dark-gray);
}

::-webkit-scrollbar-thumb {
    background: var(--primary-color);
}


/* 
==========================================
             3. Custom Design
==========================================
*/

.main-btn {
    color: var(--text-white);
    font-size: 1rem;
    text-transform: uppercase;
    font-weight: 600;
    background-color: var(--primary-color);
    padding: .875rem 3.125rem;
    border-radius: .625rem;
    -webkit-transition: all .3s ease;
    -moz-transition: all .3s ease;
    transition: all .3s ease;
}

.main-btn:hover {
    background: var(--secondary-color);
    color: var(--text-white);
}

h1 {
    font-size: 6.25rem;
    font-weight: 700;
    line-height: 1;
    margin-bottom: 1.6875rem;
    color: var(--text-white);
}

h2 {
    font-size: 2.9375rem;
    font-weight: 700;
    color: var(--text-white);
    line-height: 1.3;
}

h3 {
    font-size: 1.875rem;
    font-weight: 700;
    line-height: 1;
    color: var(--primary-text);
}

h5 {
    font-size: 1.375rem;
    color: var(--text-gray);
    line-height: 1.5;
}

h6 {
    font-size: .875rem;
    color: var(--text-white);
    line-height: 1.5;
    font-weight: 400;
    opacity: .85;
}

p {
    color: var(--text-gray);
    font-size: 1.125rem;
    line-height: 1.6;
    font-weight: 400;
    margin: 1.875rem 0;
}

span {
    color: var(--text-white);
    font-size: 1rem;
    font-weight: 600;
}

a {
    font-size: 1.25rem;
    font-weight: 600;
    line-height: 1.3;
    color: var(--text-white);
    text-decoration: none;
    cursor: pointer;
}

a:hover {
    color: var(--primary-text);
}

.icon-design {
    width: 5.625rem;
    height: 5.625rem;
    background-color: var(--secondary-color);
    border-radius: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}


/* 
==========================================
                4. Navbar
==========================================
*/

.header_wrapper .navbar {
    padding: 0.9375rem 0;
    -webkit-transition: all 0.2s linear;
    -moz-transition: all 0.2s linear;
    -ms-transition: all 0.2s linear;
    -o-transition: all 0.2s linear;
    transition: all 0.2s linear;
}

.header_wrapper .navbar-brand img {
    max-width: 14.375rem;
    height: auto;
}

.header-scrolled {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    background-color: var(--dark-color);
    -webkit-box-shadow: 0 0.25rem 0.375rem rgba(12, 0, 46, 0.05);
    box-shadow: 0 0.25rem 0.375rem rgba(12, 0, 46, 0.05);
}


/* 
==========================================
                5. Banner
==========================================
*/

.banner_wrapper .background_shape {
    position: absolute;
    top: 0;
    height: calc(100vh - 4.0625rem);
    left: 0;
    right: 0;
    background-image: url("../images/top-background.png");
    background-position: center center;
    background-size: cover;
    clip-path: polygon(100% 0%, 0% 0%, 0% 100%, 100% 62%);
    z-index: -1;
}

.banner_wrapper .main-content {
    position: relative;
    z-index: 1;
    width: 100%;
    padding-top: 6.25rem;
}

.banner_wrapper .social-icon a img {
    width: 3.125rem;
    height: 3.125rem;
    transition: 0.3s ease-in;
}

.banner_wrapper .social-icon a:hover img {
    transform: translateY(-0.3125rem);
}


/* 
==========================================
              6. Accordion
==========================================
*/

.main_menu_wrapper .accordion-item {
    background-color: transparent;
    margin: 0 0 1.5625rem;
}

.main_menu_wrapper .accordion-header .accordion-button {
    margin: 0 0.3125rem;
    background-color: var(--dark-color);
    box-shadow: 1.125rem 1.125rem 3rem rgb(108 99 255 / 10%);
    border-radius: 0.9375rem;
    line-height: 8.875rem;
    padding: 0;
    padding-right: 3.125rem;
    transition: all 0.3s ease;
}

.main_menu_wrapper .accordion-header .icon-box {
    width: 8.875rem;
    height: 100%;
    border-radius: 0.9375rem 0 0 0.9375rem;
    background-color: var(--secondary-color);
    text-align: center;
}

.main_menu_wrapper .accordion-header .accordion-button:after {
    position: absolute;
    right: 0;
    width: 8.875rem;
    height: 100%;
    border-radius: 0 0.9375rem 0.9375rem 0;
    background-image: url(../images/up-arrow.svg);
    background-color: var(--secondary-color);
    background-size: 2.7rem;
    background-position: center center;
    transition: all 0.3s ease;
}

.main_menu_wrapper .accordion-header .accordion-button:not(.collapsed)::after {
    border-radius: 0.9375rem 0 0 0.9375rem;
    background-image: url(../images/down-arrow.svg);
}

.main_menu_wrapper .accordion-header:hover button,
.main_menu_wrapper .accordion-header .accordion-button:not(.collapsed) {
    background-color: var(--primary-color);
}

.main_menu_wrapper .accordion-body {
    background-color: var(--dark-color);
    margin-top: 1.5625rem;
    padding: 4.375rem;
    border-radius: 0.9375rem;
}


/* 
==========================================
                 6.1 About
==========================================
*/

.about_wrapper .accordion-body .card_img {
    width: 60%;
    border: 0;
    border-radius: 0.9375rem;
}

.about_wrapper .accordion-body .card_img img {
    border-radius: 0.9375rem;
}

.about_wrapper .accordion-body .card_detail {
    position: absolute;
    top: 3.75rem;
    right: 1.25rem;
    z-index: 1;
    width: 47%;
    background-color: var(--primary-color);
    padding: 1.5625rem 1.8rem;
    border-radius: 0.9375rem;
}

.about_wrapper .card_detail ul li {
    border-bottom: 0.0625rem dashed rgba(255, 255, 255, 0.3);
    padding: 0.625rem 0;
}


/* 
==========================================
                6.2 Resume
==========================================
*/

.resume_wrapper .title h2 {
    padding-left: 2.5rem;
    font-size: 2.1875rem;
}

.resume_wrapper .shape {
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 100%;
    border: 0.1875rem solid var(--primary-color);
}

.resume_wrapper .shape:before {
    position: absolute;
    content: '';
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 100%;
    background-color: var(--primary-color);
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.resume_wrapper .year span {
    font-size: 1.25rem;
    color: var(--primary-color);
    border: 0.0625rem solid var(--primary-color);
    border-radius: 3.125rem;
    padding: 0.5rem 2.1875rem 0.4375rem;
}

.resume_wrapper .progress {
    height: 0.4375rem;
    border-radius: 3.125rem;
    background-color: var(--dark-light-color);
    opacity: 0.8;
    margin-top: 1.5625rem;
}

.resume_wrapper .progress-bar {
    position: absolute;
    background-color: var(--primary-color);
    height: 0.3125rem;
    top: 3.125rem;
    border-radius: 3.125rem;
}

.resume_wrapper .progress span {
    position: absolute;
    right: 0;
    top: 1.25rem;
    color: var(--primary-color);
}


/* 
==========================================
              6.3 Portfolio
==========================================
*/

.portfolio_wrapper .nav-link {
    color: var(--text-white);
    font-weight: 600;
    font-size: 1.125rem;
    letter-spacing: 0.0625rem;
    text-align: center;
}

.portfolio_wrapper .nav-link.active,
.portfolio_wrapper .show>.nav-link {
    background-color: transparent;
    color: var(--primary-color);
}

.portfolio_wrapper .portfolio-img {
    width: 100%;
    min-height: 23.75rem;
    height: 100%;
    position: relative;
    border-radius: 0.9375rem;
    cursor: pointer;
}

.portfolio_wrapper .portfolio-img>img {
    border-radius: 0.9375rem;
    object-fit: cover;
    object-position: center;
}

.portfolio_wrapper .portfolio-img .hidden-text {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    height: 0;
    z-index: 1;
    background-color: rgba(255, 69, 27, 0.72);
    border-radius: 0.625rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    transition: all 0.6s linear;
    overflow: hidden;
}

.portfolio_wrapper .portfolio-img:hover .hidden-text {
    height: 100%;
}


/* 
==========================================
              6.4 Services
==========================================
*/

.service_wrapper .card {
    border-radius: 0.9375rem;
    background-color: var(--bg-dark-gray);
    padding: 3.75rem 2.5rem 3.625rem;
    text-align: center;
    align-items: center;
    cursor: pointer;
    transition: all 0.3s ease;
}

.service_wrapper .card:hover {
    background-color: var(--primary-color);
}


/* 
==========================================
              6.5 Testimonial
==========================================
*/

.testimonial_wrapper .carousel-indicators {
    bottom: -2.8125rem;
}

.testimonial_wrapper .carousel-indicators[data-bs-target] {
    background-color: var(--secondary-color);
}

.testimonial_wrapper .card {
    padding: 3.125rem 3.125rem 3.125rem 0;
    background-color: var(--bg-dark-gray);
    border-radius: 0 0.5rem 0.5rem 0;
}

.testimonial_wrapper .profile-box {
    padding: 1.875rem;
    background-color: var(--primary-color);
    border-radius: 0.5rem 0 0 0.5rem;
}

.testimonial_wrapper .profile-box img {
    border-radius: 0.625rem 3.125rem;
}

.testimonial_wrapper .desc-box {
    padding-left: 2.5rem;
}


/* 
==========================================
                 6.6 Blog
==========================================
*/

.blog_wrapper .card {
    background-color: var(--bg-dark-gray);
    border-radius: 0.9375rem;
    overflow: hidden;
}

.blog_wrapper .card img {
    border-radius: 0.9375rem 0.9375rem 0 0;
    transition: all 0.3s ease;
    cursor: pointer;
}

.blog_wrapper .card img:hover {
    transform: scale(1.1);
}

.blog_wrapper .card h5 {
    font-weight: 700;
    color: var(--primary-text);
}


/* 
==========================================
               6.7 Contact
==========================================
*/

.contact_wrapper form .form-control:focus {
    box-shadow: none;
}

.contact_wrapper form .form-control {
    width: 100%;
    height: 3.75rem;
    border: 0.0625rem solid rgba(255, 255, 255, 0.15);
    border-radius: 0.625rem;
    background-color: transparent;
    color: var(--text-gray);
}

.contact_wrapper form input::placeholder,
.contact_wrapper form textarea::placeholder {
    color: var(--text-gray);
}

.contact_wrapper form textarea.form-control {
    height: 14.375rem;
}


/* 
==========================================
               Hover Design
==========================================
*/

.cursor {
    width: 1.875rem;
    height: 1.875rem;
    border-radius: 100%;
    border: 0.0625rem solid var(--primary-color);
    transition: all 200ms ease-out;
    position: fixed;
    pointer-events: none;
    top: 0;
    left: 0;
    transform: translate(calc(-50% + .9375rem), -50%);
    z-index: 15;
}

.cursor2 {
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 100%;
    background-color: var(--primary-color);
    position: fixed;
    pointer-events: none;
    top: 0;
    left: 0;
    transform: translate(-50%, -50%);
    transition: width 0.3s, height 0.3s, opacity 0.3s;
    z-index: 15;
}