﻿h1 {
    font-family: var(--font-h);
    font-size: 28px;
    font-weight: 400;
    text-align:center;
    color:var(--white);
}

.main-cont img {
    width:90%;
    margin:20px auto 60px;
}

.btn-gold {
    background:linear-gradient(90deg,#cfb46e,#000000);
    color:var(--white);
}

.grey-text {
    background: linear-gradient(41.3366deg, rgb(255, 255, 255) 0%, rgb(180, 180, 180) 100%);
    text-shadow: 0px 2px 4px rgba(0, 0, 0, 0.4);
}

.gold-text {
    background: linear-gradient(141.183deg, rgb(255, 255, 255) 0%, rgb(218, 186, 102) 68.1691%);
}

.sky-comm-img {
    width:50%;
    min-width: 300px;
}

.comm-feat h3 {
    font-family: var(--font-body);
    font-size: 22px;
    font-weight:500;
    color:var(--white);
    padding-bottom: 20px;
    margin-bottom: 20px;
    border-bottom:solid 2px var(--white);
    text-align:center;
}

.comm-feat p {
    font-family: var(--font-body);
    font-size: 15px;
    font-weight:200;
    line-height:1.4em;
    color: var(--white);
    text-align:justify;
    margin-bottom:0;
}

.comm-car {
    width:100%;
    border-radius:35px;
    background-color:var(--white);
    display:flex;
    gap:0px;
    overflow:hidden;
    padding:80px 0px 0px;
}

.comm-car-img, .comm-car-text {
    flex: 0 0 50%;
}

.comm-car img {
    width: 100%;
}

.comm-car-text {
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
}

.comm-car div h3 {
    background: linear-gradient(94.3916deg, rgb(0, 0, 0) 24.1611%, rgb(166, 166, 166) 95.9732%);
    background-size: 200% 100%;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    font-family:var(--font-body);
    font-size:26px;
    font-weight:600;
    text-align:center;
    animation: text-colors 3s linear infinite;
}

.comm-car div p {
    font-family: var(--font-h);
    font-size: 14px;
    font-weight: 300;
    text-align: center;
    color:var(--black);
}

.comm-boxes .col-12 {
    height:730px;
}

.comm-boxes .col-12 > div {
    overflow:hidden;
    position:relative;
}

.comm-boxes .col-12:nth-child(1) > div, .comm-boxes .col-12:nth-child(2) > div {
    border:solid 1px #737373;
}

.comm-boxes .col-12:nth-child(3) > div, .comm-boxes .col-12:nth-child(4) > div {
    border:solid 1px #a6a6a6;
}

.comm-boxes .col-12:nth-child(1) > div img, .comm-boxes .col-12:nth-child(2) > div img {
    width:100%;
    height:100%;
    position:absolute;
    top:0px;
    left:0px;
}

.comm-boxes .col-12:nth-child(3) > div img {
    width:100%;
    height:70%;
    position:absolute;
    bottom:20px;
    left:0px;
}

.comm-box-text {
    position: absolute;
    top: 60px;
    left: 10%;
    width:80%;
    text-align:center;
}

.comm-box-text h4 {
    font-family:var(--font-h);
    font-size:32px;
    font-weight:300;
}

.comm-box-text p {
    font-family:var(--font-h);
    font-size:20px;
    font-weight:300;
    line-height:1.1em;
}

.comm-boxes .col-12:nth-child(4) > div img {
    width: 50%;
    height: auto;
    padding:60px 0px 10px;
}

.comm-boxes .col-12:nth-child(4) .comm-box-text {
    position: unset;
    top: unset;
    align-self:center;
}

.prd-box-sec h2 {
    /*background: linear-gradient(90deg, rgb(0, 0, 0) 0%, rgb(102, 73, 26) 38.819%, rgb(231, 197, 139) 100%);*/
    background: linear-gradient(90deg, rgb(0, 0, 0) 0%, rgb(102, 73, 26) 33%, rgb(231, 197, 139) 66%, rgb(255, 255, 255) 100%);
}

@media (min-width: 1600px) {
    .comm-boxes .col-12 {
        height: 930px;
    }

    .comm-box-text {
        top: 80px;
    }

    .comm-boxes .col-12:nth-child(4) > div img {
        padding-top: 80px;
    }
}

@media (max-width: 1199.98px) {
    .comm-car div h3 {
        font-size: 22px;
    }

    .comm-car div p br, .comm-box-text p br {
        display:none;
    }

    .comm-boxes .col-12 {
        height: 630px;
    }
}

@media (max-width: 991.98px) {
    .comm-car {
        flex-direction:column;
    }

    .comm-car-img, .comm-car-text {
        flex: 0 0 100%;
    }

    .comm-car img {
        width: 80%;
    }

    .comm-car-text {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        margin:2.5rem 0;
    }

    .comm-boxes .col-12 {
        height: 730px;
    }
}

@media (max-width: 575.98px) {
    h1 {
        font-size:24px;
    }
    .comm-car div h3 {
        font-size: 20px;
    }

    .comm-boxes .col-12 {
        height: 530px;
    }

    .comm-box-text h4 {
        font-size: 26px;
    }

    .comm-box-text p {
        font-size: 15px;
    }
}