/*
************************
*  GENERAL
************************
*/
:root {
    /* Height of the cut*/
    --cut: 10vw;
    --accent-1: #726136;
    --accent-2: #ddc981;
    --bg-1: #cccccc;
    --bg-2: #fffbec;
    --bg-linear-gradient: linear-gradient(to right, var(--bg-1), var(--bg-2)) !important;
    --bg-linear-gradient-accent: linear-gradient(to right, var(--accent-1), var(--accent-2)) !important;
}

body {
    background: var(--bg-linear-gradient);
}

.accent-text {
    color: var(--accent-2);
    font-style: italic;
}

section.tilt {
        /* Clip top and bottom part of this section */
        clip-path: polygon(0 0, 100% var(--cut), 100% 100%, 0 calc(100% - var(--cut)));
       /* Higher z-index value than next section */
       z-index: 3;
       position: relative;
       padding: var(--cut) 0 !important;
}

section.tilt.tilt-top {
       /* Clip the top part of this section*/
       clip-path: polygon(0 0, 100% var(--cut), 100% 100%, 0 100%);
       padding: var(--cut) 0 0 0 !important;
}

section.tilt.tilt-bottom {
       /* Clip the bottom part of this section*/
       clip-path: polygon(0 0, 100% 0, 100% 100%, 0 calc(100% - var(--cut)));
       padding: 0 0 var(--cut) 0 !important;
}

.bg-linear-gradient {
    background: var(--bg-linear-gradient);
}

.bg-linear-gradient-accent {
    background: var(--bg-linear-gradient-accent);
}

/*
************************
*  HERO SECTION
************************
*/
#logo {
    width: 150px;
    height: 150px;
}

#logo img {
    width: 100%;
    height: auto;
    border-radius: 50%;
}

#hero-section {
    height: auto;
}

@media only screen and (max-width: 768px) {
    /* For mobile phones: */
    #logo {
        width: 100px;
        height: 100px;
    }
}

/*
************************
*  FEATURE SECTION
************************   
*/
#feature-section .card .icon {
    color: var(--accent-1);
    font-size: 5rem;
}

/*
************************
*  TAB-FEATURE SECTION
************************   
*/
#tab-feature-section .nav-item {
    padding: 0 1px;
}

#tab-feature-section .nav-link {
    background-color: #dbd8cd;
    border-top-left-radius: .25rem;
    border-top-right-radius: .25rem;
    padding: 1rem;
    border: 1px solid transparent;
    border-color: var(--bg-2);
    display: block;
    font-size: 1.3rem;
    color: #8a8a8a;
    margin-bottom: 3px;
}

#tab-feature-section .nav-link.active {
    background-color: var(--bg-2);
    border-top-color: var(--accent-2);
    border-top-width: 5px;
    color: #000000;
    margin-bottom: 0;
    border-bottom: 0;
}

@media only screen and (max-width: 768px) {
    /* For mobile phones: */
    #tab-feature-section .nav-link.active {
        margin-bottom: 3px;
    }
}

#tab-feature-section .nav-link.active:hover {
    cursor: default;
}

#tab-feature-section .nav-link:not(.active):hover {
    background-color: #e7e7e7;
    border-top-color: #d1b962;
    border-top-width: 1px;
}

#tab-feature-section .tab-content {
    background-color: var(--bg-2);
    border-bottom-left-radius: 3px;
    border-bottom-right-radius: 3px;
    margin: 0 1px;
}

#tab-feature-section .tab-feature-container {
    box-shadow: 0px 5px 7px 0px rgba(0, 0, 0, 0.1);
    padding: 0;
}

#tab-feature-section .tab-pane img {
    width: 80%;
    max-width: 300px;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    border-radius: 50%;
}

/*
************************
*  CONTACT SECTION
************************   
*/
#contact-section .contact-image-container {
    border-right: 1px solid var(--accent-1);
}

#contact-section .contact-image {
    width: 100%;
    max-width: 300px;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    border-radius: 50%;
    background-color: white;
    float: right;
}

@media only screen and (max-width: 768px) {
    /* For mobile phones: */
    #contact-section .contact-image {
        width: 120%;
    }

    #contact-section .contact-image-container {
        border-right: none;
    }
    
}

#contact-section .contact-company-name {
    color: var(--accent-1);
    font-style: italic;
}

#contact-section .icon {
    color: var(--accent-1);
}

#contact-section .btn {
    background-color: var(--accent-1);
}

#contact-section .btn:hover {
    background-color: var(--accent-2);
}

/*
************************
*  SOME SECTION
************************   
*/
#some-section img {
    height: 80px;
    margin: 1rem;
}

/*
************************
*  COPYRIGHT SECTION
************************   
*/
#copyright-section a {
    color: unset;
    text-decoration: none;
}