/* =========================================
   SICON GREEN CONTACT PAGE
========================================= */


/* =========================================
   IMPORTANT FIX
========================================= */

*{
    box-sizing:border-box;
}


html,
body{

    width:100%;

    margin:0;

    padding:0;

    overflow-x:hidden;

}


/* =========================================
   HERO
========================================= */

.contact-hero{

    position:relative;

    width:100%;

    overflow:hidden;

    background:

    linear-gradient(
        135deg,
        #052b1c,
        #073c28,
        #0b5938
    );

    color:#ffffff;

}


.contact-hero::before{

    content:"";

    position:absolute;

    width:500px;

    height:500px;

    left:-250px;

    top:-250px;

    border-radius:50%;

    background:

    radial-gradient(
        circle,
        rgba(43,190,105,.18),
        transparent 70%
    );

}


.contact-hero::after{

    content:"";

    position:absolute;

    width:500px;

    height:2px;

    right:-150px;

    top:50%;

    background:

    rgba(70,220,130,.18);

}


.hero-container{

    position:relative;

    z-index:2;

    width:90%;

    max-width:1250px;

    min-height:360px;

    margin:auto;

    display:grid;

    grid-template-columns:
    1fr 420px;

    gap:40px;

    align-items:center;

    padding:45px 0;

}


/* =========================================
   HERO CONTENT
========================================= */

.hero-content{

    max-width:680px;

}


.hero-tag{

    display:inline-block;

    margin-bottom:12px;

    color:#70e592;

    font-size:13px;

    font-weight:800;

    letter-spacing:1.4px;

}


.hero-content h1{

    margin:0;

    font-size:48px;

    line-height:1.15;

    letter-spacing:-1px;

}


.hero-content h1 span{

    display:block;

    color:#74df91;

}


.hero-content p{

    max-width:600px;

    margin:15px 0 0;

    color:

    rgba(255,255,255,.82);

    font-size:16px;

    line-height:1.7;

}


/* =========================================
   HERO FEATURES
========================================= */

.hero-features{

    display:flex;

    flex-wrap:wrap;

    gap:28px;

    margin-top:28px;

}


.hero-feature{

    display:flex;

    align-items:center;

    gap:10px;

}


.feature-icon{

    width:48px;

    height:48px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:50%;

    color:#ffffff;

    background:

    rgba(52,188,103,.20);

    border:

    1px solid
    rgba(125,230,155,.18);

}


.hero-feature div:last-child{

    display:flex;

    flex-direction:column;

}


.hero-feature strong{

    font-size:13px;

}


.hero-feature span{

    margin-top:2px;

    color:

    rgba(255,255,255,.60);

    font-size:11px;

}


/* =========================================
   HERO VISUAL
========================================= */

.hero-visual{

    position:relative;

    width:100%;

    height:270px;

}


.paper-plane{

    position:absolute;

    top:15px;

    left:15px;

    color:#55db78;

    font-size:55px;

    transform:

    rotate(-20deg);

}


.envelope{

    position:absolute;

    width:250px;

    height:180px;

    right:45px;

    bottom:15px;

    overflow:hidden;

    border-radius:12px;

    background:

    #f4f5f3;

    box-shadow:

    0 20px 35px
    rgba(0,0,0,.28);

}


.envelope-card{

    position:absolute;

    width:190px;

    height:145px;

    left:30px;

    top:10px;

    z-index:1;

    display:flex;

    flex-direction:column;

    align-items:center;

    justify-content:center;

    gap:12px;

    border-radius:10px;

    color:#ffffff;

    background:

    linear-gradient(
        135deg,
        #0c5135,
        #23724b
    );

}


.leaf-icon{

    font-size:38px;

    color:#9be7aa;

}


.envelope-card strong{

    font-size:13px;

    letter-spacing:1px;

}


.envelope-flap{

    position:absolute;

    z-index:3;

    width:0;

    height:0;

    left:0;

    bottom:0;

    border-left:125px solid
    #e4e5e3;

    border-right:125px solid
    #e4e5e3;

    border-top:100px solid
    transparent;

}


.chat-bubble{

    position:absolute;

    right:-15px;

    top:45px;

    width:62px;

    height:45px;

    display:flex;

    align-items:center;

    justify-content:center;

    gap:6px;

    border-radius:15px;

    background:#ffffff;

}


.chat-bubble::after{

    content:"";

    position:absolute;

    bottom:-8px;

    left:12px;

    width:15px;

    height:15px;

    transform:rotate(45deg);

    background:#ffffff;

}


.chat-bubble span{

    position:relative;

    z-index:2;

    width:6px;

    height:6px;

    border-radius:50%;

    background:#28734d;

}


/* =========================================
   CONTACT PAGE
========================================= */

.contact-page{

    width:100%;

    padding:55px 20px 80px;

    background:

    linear-gradient(
        180deg,
        #f5f8f6,
        #ffffff
    );

}


.contact-container{

    width:100%;

    max-width:1250px;

    margin:auto;

    display:grid;

    grid-template-columns:
    .95fr 1.1fr .75fr;

    gap:20px;

    align-items:stretch;

}


/* =========================================
   COMMON CARDS
========================================= */

.contact-info-card,
.message-card,
.support-card{

    background:#ffffff;

    border:

    1px solid
    #e1e7e3;

    border-radius:14px;

    box-shadow:

    0 8px 25px
    rgba(20,55,35,.05);

}


/* =========================================
   CARD HEADING
========================================= */

.card-heading{

    margin-bottom:15px;

}


.card-heading span,
.message-heading span,
.support-heading span{

    display:inline-block;

    color:#087044;

    font-size:11px;

    font-weight:800;

    letter-spacing:1px;

}


.card-heading h2,
.message-heading h2,
.support-heading h2{

    margin:7px 0 0;

    color:#263849;

    font-size:21px;

}


/* =========================================
   CONTACT INFO CARD
========================================= */

.contact-info-card{

    padding:25px;

}


.info-item{

    display:flex;

    gap:13px;

    padding:14px 0;

    border-bottom:

    1px solid
    #edf1ee;

}


.info-icon{

    width:42px;

    min-width:42px;

    height:42px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:50%;

    color:#087044;

    background:#eaf6ee;

}


.info-item small{

    display:block;

    margin-bottom:3px;

    color:#5f6f79;

    font-size:11px;

    font-weight:700;

}


.info-item h4{

    margin:0;

    color:#263849;

    font-size:14px;

}


.info-item p{

    margin:3px 0;

    color:#52636e;

    font-size:12px;

    line-height:1.5;

}


.info-item a{

    display:inline-block;

    margin-top:5px;

    color:#087044;

    text-decoration:none;

    font-size:12px;

    font-weight:700;

}


.info-item a i{

    font-size:10px;

}


.contact-link{

    color:#263849 !important;

    font-size:13px !important;

}


/* =========================================
   BUTTONS
========================================= */

.contact-buttons{

    display:grid;

    grid-template-columns:
    1fr 1fr;

    gap:10px;

    margin-top:15px;

}


.call-btn,
.sms-btn{

    height:42px;

    display:flex;

    align-items:center;

    justify-content:center;

    gap:8px;

    border-radius:6px;

    text-decoration:none;

    font-size:13px;

    font-weight:700;

    transition:.25s;

}


.call-btn{

    color:#ffffff;

    background:#075d3a;

}


.call-btn:hover{

    background:#034a2d;

}


.sms-btn{

    color:#075d3a;

    border:

    1px solid
    #0b7045;

}


.sms-btn:hover{

    background:#edf8f1;

}


/* =========================================
   DETAILS TOGGLE
========================================= */

.details-toggle{

    width:100%;

    display:flex;

    align-items:center;

    justify-content:space-between;

    margin-top:12px;

    padding:13px;

    cursor:pointer;

    border:

    1px solid
    #e1e7e3;

    border-radius:7px;

    color:#263849;

    background:#fafcfb;

    font-size:12px;

    font-weight:700;

}


.details-toggle span{

    display:flex;

    align-items:center;

    gap:8px;

}


.details-toggle span i{

    color:#087044;

}


#toggleArrow{

    transition:.25s;

}


.additional-details{

    max-height:0;

    overflow:hidden;

    transition:.35s;

}


.additional-details.show{

    max-height:150px;

}


.additional-details p{

    margin:12px 0 0;

    padding:12px;

    border-radius:7px;

    color:#52636e;

    background:#f3f8f4;

    font-size:12px;

    line-height:1.6;

}


/* =========================================
   MESSAGE CARD
========================================= */

.message-card{

    padding:25px;

}


.message-heading{

    margin-bottom:22px;

}


.message-heading p{

    margin:8px 0 0;

    color:#667781;

    font-size:13px;

    line-height:1.6;

}


/* =========================================
   FORM
========================================= */

.form-group{

    margin-bottom:16px;

}


.form-group label{

    display:block;

    margin-bottom:7px;

    color:#263849;

    font-size:12px;

    font-weight:700;

}


.form-group input,
.form-group textarea{

    width:100%;

    border:

    1px solid
    #d7e0da;

    outline:none;

    border-radius:6px;

    color:#263849;

    background:#fbfcfb;

    font-family:inherit;

    font-size:13px;

}


.form-group input{

    height:42px;

    padding:0 13px;

}


.form-group textarea{

    height:105px;

    padding:12px;

    resize:vertical;

}


.form-group input:focus,
.form-group textarea:focus{

    border-color:#087044;

    box-shadow:

    0 0 0 3px
    rgba(8,112,68,.08);

}


/* =========================================
   MOBILE INPUT
========================================= */

.mobile-input{

    display:flex;

}


.country-code{

    width:90px;

    min-width:90px;

    height:42px;

    display:flex;

    align-items:center;

    justify-content:center;

    gap:8px;

    border:

    1px solid
    #d7e0da;

    border-right:none;

    border-radius:

    6px 0 0 6px;

    background:#f2f6f3;

    font-size:13px;

}


.mobile-input input{

    border-radius:

    0 6px 6px 0;

}


/* =========================================
   SEND BUTTON
========================================= */

.send-btn{

    width:100%;

    height:46px;

    display:flex;

    align-items:center;

    justify-content:center;

    gap:9px;

    cursor:pointer;

    border:none;

    border-radius:6px;

    color:#ffffff;

    background:

    linear-gradient(
        90deg,
        #075b39,
        #14814f
    );

    font-size:14px;

    font-weight:700;

    transition:.25s;

}


.send-btn:hover{

    transform:translateY(-2px);

    box-shadow:

    0 8px 18px
    rgba(8,112,68,.22);

}


.secure-note{

    margin-top:14px;

    color:#7b8991;

    font-size:11px;

}


.secure-note i{

    margin-right:5px;

    color:#087044;

}


/* =========================================
   SUPPORT CARD
========================================= */

.support-card{

    padding:25px;

}


.support-heading{

    padding-bottom:14px;

    margin-bottom:5px;

}


.support-item{

    display:flex;

    gap:12px;

    padding:15px 0;

    border-bottom:

    1px solid
    #edf1ee;

}


.support-item:last-child{

    border-bottom:none;

}


.support-icon{

    width:38px;

    min-width:38px;

    height:38px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:50%;

    color:#087044;

    background:#eaf6ee;

    font-size:15px;

}


.support-item h4{

    margin:0 0 4px;

    color:#263849;

    font-size:13px;

}


.support-item p{

    margin:0;

    color:#65757e;

    font-size:11px;

    line-height:1.6;

}


/* =========================================
   POPUP
========================================= */

.success-popup{

    position:fixed;

    inset:0;

    z-index:9999;

    display:flex;

    align-items:center;

    justify-content:center;

    padding:20px;

    visibility:hidden;

    opacity:0;

    background:

    rgba(0,0,0,.55);

    transition:.25s;

}


.success-popup.show{

    visibility:visible;

    opacity:1;

}


.popup-box{

    width:100%;

    max-width:380px;

    padding:35px;

    text-align:center;

    border-radius:15px;

    background:#ffffff;

}


.popup-icon{

    width:65px;

    height:65px;

    margin:auto;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:50%;

    color:#ffffff;

    background:#087044;

    font-size:25px;

}


.popup-box h2{

    margin:18px 0 8px;

}


.popup-box p{

    color:#687780;

    font-size:13px;

    line-height:1.6;

}


.popup-box button{

    margin-top:15px;

    padding:10px 25px;

    cursor:pointer;

    border:none;

    border-radius:5px;

    color:#ffffff;

    background:#087044;

}


/* =========================================
   TABLET
========================================= */

@media(max-width:1100px){

    .contact-container{

        grid-template-columns:
        1fr 1fr;

    }


    .support-card{

        grid-column:
        1 / -1;

    }


    .support-card{

        display:grid;

        grid-template-columns:
        repeat(2,1fr);

        gap:10px 30px;

    }


    .support-heading{

        grid-column:
        1 / -1;

    }


}


/* =========================================
   MOBILE
========================================= */

@media(max-width:800px){

    .hero-container{

        grid-template-columns:1fr;

        text-align:center;

        padding:60px 0;

    }


    .hero-content{

        margin:auto;

    }


    .hero-content h1{

        font-size:38px;

    }


    .hero-features{

        justify-content:center;

    }


    .hero-visual{

        display:none;

    }


    .contact-container{

        grid-template-columns:1fr;

    }


    .support-card{

        display:block;

        grid-column:auto;

    }


}


@media(max-width:500px){

    .contact-page{

        padding:

        40px 12px
        60px;

    }


    .hero-container{

        width:92%;

    }


    .hero-content h1{

        font-size:32px;

    }


    .hero-features{

        flex-direction:column;

        align-items:flex-start;

    }


    .contact-info-card,
    .message-card,
    .support-card{

        padding:20px;

    }


    .contact-buttons{

        grid-template-columns:1fr;

    }


}