.elementor-20994 .elementor-element.elementor-element-6c4be20{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-20994 .elementor-element.elementor-element-a915b2d{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}/* Start custom CSS for html, class: .elementor-element-ed51540 *//*====================================================

TOMFORD SIGNATURE CTA™

Version : 1.0

Part 2

Foundation + Layout + Typography

=====================================================*/


/*=========================================
ROOT VARIABLES
=========================================*/

.tf-signature-cta{

    --tf-bg:#F7F5F1;

    --tf-card:#FFFFFF;

    --tf-heading:#171717;

    --tf-text:#666666;

    --tf-gold:#B08D57;

    --tf-border:#E9E3D7;

    --tf-shadow:0 18px 45px rgba(0,0,0,.05);

    --tf-radius:18px;

    --tf-transition:.35s ease;

}


/*=========================================
SECTION
=========================================*/

.tf-signature-cta{

    background:var(--tf-bg);

    padding:90px 40px;

    border-radius:28px;

    margin:80px auto;

    border:1px solid var(--tf-border);

    overflow:hidden;

    position:relative;

}


/* Gold Accent */

.tf-signature-cta::before{

    content:"";

    position:absolute;

    top:0;

    left:50%;

    transform:translateX(-50%);

    width:90px;

    height:3px;

    background:var(--tf-gold);

}


/*=========================================
CONTAINER
=========================================*/

.tf-container{

    max-width:1200px;

    margin:auto;

}


/*=========================================
HEADER
=========================================*/

.tf-cta-heading{

    text-align:center;

    max-width:760px;

    margin:auto auto 70px;

}


/*=========================================
SMALL LABEL
=========================================*/

.tf-label{

    display:inline-block;

    color:var(--tf-gold);

    text-transform:uppercase;

    letter-spacing:3px;

    font-size:12px;

    font-weight:700;

    margin-bottom:22px;

}


/*=========================================
MAIN HEADING
=========================================*/

.tf-cta-heading h2{

    font-size:48px;

    font-weight:700;

    line-height:1.15;

    color:var(--tf-heading);

    margin:0 0 24px;

}


/*=========================================
DESCRIPTION
=========================================*/

.tf-cta-heading p{

    font-size:19px;

    line-height:1.9;

    color:var(--tf-text);

    margin:0;

}


/*=========================================
GRID
=========================================*/

.tf-cta-grid{

    display:grid;

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

    gap:34px;

}


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

.tf-card{

    background:var(--tf-card);

    border:1px solid var(--tf-border);

    border-radius:var(--tf-radius);

    padding:40px;

    transition:var(--tf-transition);

}


/*=========================================
ICON
=========================================*/

.tf-icon{

    width:68px;

    height:68px;

    border-radius:50%;

    border:1px solid var(--tf-border);

    display:flex;

    align-items:center;

    justify-content:center;

    margin-bottom:28px;

}


/*=========================================
SVG
=========================================*/

.tf-icon svg{

    width:28px;

    height:28px;

    stroke:var(--tf-gold);

    stroke-width:1.8;

    stroke-linecap:round;

    stroke-linejoin:round;

}


/*=========================================
CARD TITLE
=========================================*/

.tf-card h3{

    font-size:25px;

    color:var(--tf-heading);

    margin-bottom:18px;

    line-height:1.3;

}


/*=========================================
CARD TEXT
=========================================*/

.tf-card p{

    color:var(--tf-text);

    font-size:17px;

    line-height:1.9;

    margin-bottom:28px;

}


/*=========================================
BOTTOM TEXT
=========================================*/

.tf-footer-text{

    margin-top:70px;

    text-align:center;

}


.tf-footer-text p{

    font-size:18px;

    line-height:1.9;

    color:#444;

    max-width:700px;

    margin:auto;

}

/*====================================================

TOMFORD SIGNATURE CTA™

Version : 1.0

Part 3

Luxury Effects

=====================================================*/


/*=========================================
CARD HOVER
=========================================*/

.tf-card{

    position:relative;

    overflow:hidden;

}

.tf-card::before{

    content:"";

    position:absolute;

    top:0;

    left:0;

    width:4px;

    height:0;

    background:var(--tf-gold);

    transition:.45s ease;

}

.tf-card:hover{

    transform:translateY(-8px);

    border-color:#D6C39A;

    box-shadow:

    0 30px 60px rgba(0,0,0,.08);

}

.tf-card:hover::before{

    height:100%;

}


/*=========================================
ICON
=========================================*/

.tf-icon{

    transition:.35s ease;

    background:#fff;

}

.tf-card:hover .tf-icon{

    background:#FCFAF6;

    transform:rotate(-8deg) scale(1.05);

    border-color:#D6C39A;

}


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

.tf-btn{

    display:inline-flex;

    align-items:center;

    gap:12px;

    padding:15px 28px;

    border:1px solid #222;

    border-radius:50px;

    text-decoration:none;

    color:#222;

    font-weight:600;

    font-size:15px;

    transition:.35s ease;

    background:#fff;

}


/*=========================================
BUTTON ARROW
=========================================*/

.tf-btn span{

    transition:.35s ease;

}


/*=========================================
BUTTON HOVER
=========================================*/

.tf-btn:hover{

    background:#171717;

    color:#fff;

    border-color:#171717;

}

.tf-btn:hover span{

    transform:translateX(6px);

}


/*=========================================
HEADING HOVER
=========================================*/

.tf-card h3{

    transition:.3s ease;

}

.tf-card:hover h3{

    color:var(--tf-gold);

}


/*=========================================
BOTTOM TEXT
=========================================*/

.tf-footer-text{

    position:relative;

}

.tf-footer-text::before{

    content:"";

    width:70px;

    height:2px;

    background:var(--tf-gold);

    display:block;

    margin:0 auto 30px;

}


/*=========================================
SMOOTH FADE
=========================================*/

.tf-card{

    animation:fadeUp .7s ease both;

}

@keyframes fadeUp{

from{

opacity:0;

transform:translateY(25px);

}

to{

opacity:1;

transform:translateY(0);

}

}


/*=========================================
CARD DELAY
=========================================*/

.tf-card:nth-child(2){

animation-delay:.1s;

}

.tf-card:nth-child(3){

animation-delay:.2s;

}

.tf-card:nth-child(4){

animation-delay:.3s;

}


/*=========================================
TEXT SELECTION
=========================================*/

.tf-signature-cta ::selection{

background:#B08D57;

color:#fff;

}


/*=========================================
FOCUS
=========================================*/

.tf-btn:focus{

outline:none;

box-shadow:

0 0 0 4px rgba(176,141,87,.18);

}


/*=========================================
SMOOTH SCROLL FEEL
=========================================*/

.tf-signature-cta{

transform:translateZ(0);

backface-visibility:hidden;

}

/*====================================================

TOMFORD SIGNATURE CTA™

Version : 1.0

Part 4

Responsive + Final Polish

=====================================================*/


/*=========================================
SOFT LUXURY BACKGROUND
=========================================*/

.tf-signature-cta{

background:

radial-gradient(circle at top right,
rgba(176,141,87,.06),
transparent 32%),

radial-gradient(circle at bottom left,
rgba(176,141,87,.05),
transparent 35%),

var(--tf-bg);

}


/*=========================================
CARD TRANSITION
=========================================*/

.tf-card,
.tf-btn,
.tf-icon,
.tf-card h3{

will-change:transform;

}


/*=========================================
DESKTOP
=========================================*/

@media (min-width:1200px){

.tf-container{

padding:0 20px;

}

}



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

@media (max-width:991px){

.tf-signature-cta{

padding:70px 35px;

border-radius:22px;

}

.tf-cta-heading{

margin-bottom:55px;

}

.tf-cta-heading h2{

font-size:38px;

}

.tf-cta-heading p{

font-size:17px;

}

.tf-cta-grid{

grid-template-columns:1fr;

gap:24px;

}

.tf-card{

padding:32px;

}

}



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

@media (max-width:767px){

.tf-signature-cta{

padding:45px 22px;

margin:50px auto;

border-radius:18px;

}

.tf-label{

font-size:11px;

letter-spacing:2px;

}

.tf-cta-heading{

margin-bottom:40px;

}

.tf-cta-heading h2{

font-size:30px;

line-height:1.25;

}

.tf-cta-heading p{

font-size:16px;

line-height:1.8;

}

.tf-card{

padding:26px;

border-radius:16px;

}

.tf-icon{

width:58px;

height:58px;

margin-bottom:22px;

}

.tf-icon svg{

width:24px;

height:24px;

}

.tf-card h3{

font-size:22px;

margin-bottom:14px;

}

.tf-card p{

font-size:15px;

margin-bottom:24px;

line-height:1.8;

}

.tf-btn{

width:100%;

justify-content:center;

padding:16px;

font-size:15px;

}

.tf-footer-text{

margin-top:50px;

}

.tf-footer-text p{

font-size:15px;

line-height:1.8;

}

}



/*=========================================
SMALL DEVICES
=========================================*/

@media (max-width:420px){

.tf-signature-cta{

padding:36px 18px;

}

.tf-cta-heading h2{

font-size:27px;

}

.tf-card{

padding:22px;

}

}



/*=========================================
REDUCED MOTION
=========================================*/

@media (prefers-reduced-motion:reduce){

.tf-card,

.tf-btn,

.tf-icon,

.tf-card h3{

transition:none;

animation:none;

}

}



/*=========================================
PRINT
=========================================*/

@media print{

.tf-signature-cta{

display:none;

}

}/* End custom CSS */