/* TFA Hero Banner */
.tfa-hero-banner {background: url(/customer/images/authentication.jpg) no-repeat; color: #ffffff; text-align: center; padding: 145px 20px; margin-bottom: 50px; position: relative; overflow: hidden; height: 400px; background-size: 100% 100%; background-position: center bottom; box-sizing: border-box;}
.tfa-hero-banner h1 {font-size: 42px; margin: 0; position: relative; font-weight: bold;}
.tfa-hero-banner p {font-size: 20px; position: relative; margin: 0; font-weight: bold;}

/* .tfa-section-title {font-size: 24px; color: #000000; margin: 0 0 30px; text-align: left; font-weight: bold;} */

/* TFA Left Image Right Text Section */
.tfa-image-text-layout {display: flex; flex-wrap: wrap; align-items: center; gap: 20px;}
.tfa-image-container {flex: 1; min-width: 300px;}
.tfa-image-container img {width: 100%; height: auto; }
.tfa-text-content {flex: 1; min-width: 300px;}
.tfa-text-content p {font-size: 16px; margin:  0 0 20px; color: #000;}
.tfa-text-content p:last-child {margin: 0;}

/* TFA Section Styles */
.tfa-intro-section, .tfa-definition-section, .tfa-google-auth-section, .tfa-setup-section, .tfa-domain-benefits-section {margin-bottom: 0;}

/* TFA Steps Section */
.tfa-setup-steps {background-color: #fff; padding: 20px;}
.tfa-step-item {margin-bottom: 20px;}
.tfa-step-item:last-child { margin-bottom: 0; padding-bottom: 0;}
.tfa-step-number {display: inline-block; width: 30px; height: 30px; background-color: #FF3500; color: white; border-radius: 50%; text-align: center; line-height: 30px; font-size: 16px; margin-right: 10px; vertical-align: middle;}
.tfa-step-item h3 {display: inline-block; font-size: 16px; vertical-align: middle; margin: 0 0 10px; font-weight: bold; color: #000000;}
.tfa-step-item p {font-size: 14px; color: #666666; margin: 0 0 0 40px;}
.tfa-step-item a {color: #0066CC; text-decoration: none; font-weight: 500;}
.tfa-step-item a:hover {color: #FF3500; text-decoration: underline;}

/* TFA Benefits Section */
.tfa-google-auth-section h3{font-size: 18px;font-weight: bold;text-align: center;margin:  0 0 20px;}
.tfa-benefits-grid {display: grid; grid-template-columns: repeat(4,1fr); gap: 20px;}
.tfa-benefit-item { padding: 20px; transition: transform 0.3s ease;box-shadow: 0 0 10px rgba(0,0,0,0.1);}
.tfa-benefit-item:hover {transform: translateY(-5px);}
.tfa-benefit-item i {color: #FF3500; font-size: 24px; margin-bottom: 10px;text-align: center;display: block ;}
.tfa-benefit-item h3 {font-size: 16px; margin: 0 0 10px; font-weight: bold; color: #000000;line-height: 20px;}
.tfa-benefit-item p {font-size: 14px; color: #666666;margin: 0;text-align: center;line-height: 20px;}

/* TFA CTA Section */
.tfa-cta-section {background-color: #f1f1f1; color: #333; padding: 40px 20px; text-align: center; border-radius: 8px;}
.tfa-cta-section h2 {font-size: 24px; margin: 0 0 20px; color: #000000;}
.tfa-cta-section p {font-size: 14px; max-width: 700px; margin: 0 auto 20px; color: #666666;}
.tfa-cta-button {display: inline-block; background-color: #fff; color: #000000; font-size: 14px; font-weight: bold; padding: 0 20px; height: 45px; line-height: 45px; border-radius: 100px; text-decoration: none; transition: all 0.3s ease;}
.tfa-cta-button:hover {background-color: #FF3500; color: #FFFFFF;}

.tfa-explanation-content p, .tfa-domain-benefits-section p, .tfa-setup-section>p, .tfa-google-auth-section>p {font-size: 14px; color: #000; margin: 0 0 10px;}
.tfa-explanation-content p:last-child {margin: 0;}
.tfa-explanation-content ul { margin-bottom: 20px;}
.tfa-explanation-content ul li {font-size: 14px; color: #666666; margin-bottom: 10px; list-style: inside;}
.tfa-explanation-content ul li:last-child {margin: 0;}
.tfa-definition-section h2{margin-bottom: 20px;text-align: left;}
.tfa-explanation-content h3 {font-size: 16px; margin: 20px 0 10px; color: #000000; font-weight: bold;}
.tfa-google-auth-section>h3 {font-size: 16px; margin: 0 0 20px; color: #000000; font-weight: bold;}

.tfa-domain-benefits-section ul{display: grid; grid-template-columns: repeat(3,1fr); gap: 20px;}
.tfa-domain-benefits-section ul li {font-size: 16px;padding: 20px;box-sizing: border-box;box-shadow: 0 0 10px rgba(0,0,0,0.1);}

@media (max-width: 768px) {
    .tfa-intro-section, .tfa-definition-section, .tfa-google-auth-section, .tfa-setup-section, .tfa-domain-benefits-section{margin-bottom: 0;}

    .tfa-hero-banner{height: auto;padding: 20px 10px;margin-bottom: 20px;}
    .tfa-hero-banner h1{font-size: 20px;}
    .tfa-hero-banner p{font-size: 14px;}

    .tfa-image-text-layout{display: block;}
    .tfa-text-content p{font-size: 14px;margin: 10px 0;}

    .tfa-section-title{font-size: 18px;margin-bottom: 10px;}

    .tfa-explanation-content p, .tfa-domain-benefits-section p, .tfa-setup-section>p, .tfa-google-auth-section>p{font-size: 14px;margin: 0 0 10px;}
    .tfa-explanation-content ul{margin-bottom: 10px;}
    .tfa-explanation-content ul li{font-size: 14px;margin: 0;}
    .tfa-definition-section h2{margin-bottom: 10px;}
    .tfa-explanation-content h3{font-size: 14px;margin: 10px 0 5px;}

    .tfa-google-auth-section>h3{font-size: 14px;margin: 0 0 10px;}

    .tfa-google-auth-section h3{font-size: 16px;margin-bottom: 10px;}
    .tfa-benefits-grid{grid-template-columns: repeat(2,1fr); gap: 10px;}
    .tfa-benefit-item{padding: 15px;}
    .tfa-benefit-item i{margin-bottom: 10px;}
    .tfa-benefit-item h3{font-size: 14px;}
    .tfa-benefit-item p{font-size: 12px;margin: 0;}

    .tfa-setup-steps{padding: 20px;}
    .tfa-step-number{width: 20px;height: 20px;line-height: 20px;font-size: 14px;}
    .tfa-step-item h3{font-size: 14px;margin: 0 0 5px;}
    .tfa-step-item p{font-size: 12px;margin-left: 35px;}

    .tfa-domain-benefits-section ul{grid-template-columns: repeat(1,1fr); gap: 10px;}
    .tfa-domain-benefits-section ul li{font-size: 12px;padding: 15px;}

    .tfa-cta-section{padding: 20px 10px;}
    .tfa-cta-section h2{font-size: 18px;margin: 0 0 10px;}
    .tfa-cta-section p{font-size: 14px;max-width: none;margin: 0 0 10px;}
    .tfa-cta-button{font-size: 12px;padding: 0 15px;height: 35px;line-height: 35px;}

}