.socialArea{
margin-bottom: 25px;
background-color: transparent;
text-align: center;
}
.socialArea i{
font-size: 30px;
margin: 10px;
cursor: pointer;
background: #180707;
border: 1px solid #441717;
width: 50px;
height: 50px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 100%;
padding: 10px;
}
.avaiSites{
padding:50px 60px;
}
.avaiSites .title h2{
font-size: 20px;
font-weight: 600;
text-transform: capitalize;
letter-spacing: .07em;
text-decoration: underline;
text-decoration-color: red;
text-underline-offset: 10px;
}
.flexRespo{
width: 100%;
overflow: hidden;
overflow-x: auto;
}
.avaiSites .flexDiv{
display: flex;
align-items: center;
box-sizing: border-box;
background: #180707;
border: 1px solid #441717;
margin-top: 25px;
padding: 10px;
border-radius: 10px;
margin-bottom: 5px;
}
.avaiSites .flexDiv .cols1{
width: 20%;
}
.avaiSites .flexDiv .cols2{
width: 40%;
}
.avaiSites .flexDiv .cols1 .imgBox{
width: 150px;
height: auto;
object-fit: cover;
}
.avaiSites .flexDiv .cols1 .imgBox img{
width: 100%;
height: 100%;
}
.avaiSites .flexDiv p{
font-size: 14px;
font-weight: 500;
letter-spacing: .07em;
}
.avaiSites .flexDiv .cols1 button{
float: right;
padding: 12px 24px;
background-color: green;
color: #fff;
border: none;
border-radius: 10px;
font-size: 14px;
font-weight: 500;
letter-spacing: .07em;
text-transform: capitalize;
cursor: pointer;
display: inline-flex;
align-items: center;
}
.avaiSites .flexDiv .cols1 button i{
font-size: 18px !important;
margin-right: 5px;
}
.flexRespo a{
color: #fff;
font-size: 13px;
font-weight: 500;
text-transform: capitalize;
letter-spacing: .07em;
}
a{
color: #fff;
text-decoration: none;
}

*{
margin:0;
padding:0;
box-sizing:border-box;
font-family:Arial,sans-serif;
}

body{
background:#090909;
color:#fff;
}

.app{
background:#090909;
}

.cards{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:20px;
padding:50px 60px;
}

.card{
background:#180707;
border:1px solid #441717;
border-radius:12px;
padding:30px;
}

.card h2{
margin-bottom:25px;
font-size: 18px;
font-weight: 600;
text-transform: capitalize;
letter-spacing: .07em;
}

.card ul{
padding-left:20px;
list-style-type: none;
}

.card li{
margin-bottom:12px;
font-size: 14px;
font-weight: 500;
text-transform: capitalize;
letter-spacing: .07em;
}
.card li i{
background-color: green;
width: 25px;
height: 25px;
border-radius: 100%;
display: inline-flex;
align-items: center;
justify-content: center;
margin-right: 5px;
}

.cta{
display:flex;
justify-content:space-between;
align-items:center;
padding:40px 60px;
background:#2a0505;
}

.cta button{
background:#e60000;
color:white;
padding:18px 40px;
border:none;
border-radius:8px;
font-size:18px;
font-weight: 500;
text-transform: capitalize;
letter-spacing: .07em;
cursor: pointer;
}

.cta p{
margin-top: 8px;
line-height: 1.5em;
font-size: 14px;
font-weight: 500;
text-transform: capitalize;
letter-spacing: .07em;
}
.features{
display:grid;
grid-template-columns:repeat(6,1fr);
gap:15px;
padding:30px 60px;
background:#130000;
}

.feature{
background:#1b0b0b;
padding:20px;
border:1px solid #3d1a1a;
text-align:center;
border-radius:10px;
display: inline-flex;
align-items: center;
}
.feature .flexDiv{
display: flex;
align-items: center;
box-sizing: border-box;
width: 100%;
flex-direction: column;
}
.feature .flexDiv .col{
width: 100%;
text-align: center;
}
.feature .flexDiv .col:first-child img{
width: 36px;
height: 36px;
}
.feature .flexDiv .col:last-child p{
font-size: 14px;
font-weight: 500;
text-transform: capitalize;
letter-spacing: .07em;
margin-top: 10px;
}
.feature .flexDiv .col:last-child span{
font-size: 12px;
font-weight: 500;
text-transform: capitalize;
letter-spacing: .07em;
display: block;
line-height: 1.5em;
margin-top: 5px;
}
.hero{
display:grid;
grid-template-columns:1fr 1fr;
padding:60px;
background:#170000;
align-items:center;
}

.badge{
display:inline-block;
border:1px solid #ff3333;
padding:8px 18px;
border-radius:30px;
margin-bottom:20px;
}

.hero h1{
font-size:80px;
font-weight:900;
letter-spacing: .07em;
}

.hero h1 span{
color:#ff1b1b;
}

.hero h2{
font-size:40px;
letter-spacing:10px;
margin-bottom:20px;
}

.hero h3{
font-size:38px;
margin-bottom:15px;
}

.featureRow{
display:flex;
gap:15px;
margin-top:25px;
margin-bottom:25px;
}

.box{
padding:15px;
border:1px solid #3d3d3d;
border-radius:10px;
background:#111;
}

.box .flexDiv{
display: flex;
width: 100%;
box-sizing: border-box;
align-items: center;
}
.box .flexDiv .col:first-child{
width: 30%;
}
.box .flexDiv .col:last-child{
width: -webkit-fill-available;
}
.box .flexDiv .col img{
width: 36px;
height: 36px;
}
.box .flexDiv .col p{
margin: 0;
padding: 0;
color:#ddd;
font-size:14px;
line-height:1.5;
margin-left: 8px;
letter-spacing: .07em;
}

.tx1{
font-size:14px;
line-height:1.5;
margin-left: 8px;
letter-spacing: .07em;  
margin: 0;
padding: 0;  
}

.box .flexDiv .col span{
color:#ddd;
font-size:12px;
line-height:1.7;
display: block;
margin-left: 8px;
letter-spacing: .07em;
}

.heroButtons{
display:flex;
gap:15px;
}

.redBtn{
background:#e60000;
border:none;
padding:16px 35px;
color:white;
font-size:18px;
border-radius:8px;
cursor: pointer;
letter-spacing: .07em;
}

.darkBtn{
background:#111;
border:1px solid #444;
padding:16px 35px;
color:white;
font-size:18px;
border-radius:8px;
}

.right{
width: 100%;
height: 100%;
object-fit: cover;
}

.right img{
width:100%;
}
.navbar{
display:flex;
justify-content:space-between;
align-items:center;
padding:18px 60px;
background:#000;
}

.logo{
font-size:34px;
font-weight:bold;
}

.logo p{
font-size:14px;
letter-spacing:8px;
}

.white{
color:#fff;
}

.red{
color:#ff1d1d;
}

.navbar ul{
display:flex;
list-style:none;
gap:35px;
}

.navbar li{
cursor:pointer;
}

.buttons{
display:flex;
gap:15px;
}

.login{
background:transparent;
color:white;
border:1px solid #555;
padding:10px 22px;
border-radius:6px;
}

.signup{
background:#e60000;
color:white;
border:none;
padding:14px 24px;
border-radius:6px;
font-size: 16px;
letter-spacing: .07em;
cursor: pointer;
display: flex;
align-items: center;
}
.signup i{
font-size: 25px;
margin-right: 10px;
}

.imgBox{
display: flex;
align-items: center;
}
.imgBox span{
width: 65px;
height: 2px;
display: block;
background-color: #bd0000;
}
.imgBox span:first-child{
margin-right: 8px;
}

@media only screen and (max-width: 768px) {
.navbar {
padding: 18px 20px;
}
.logo{
font-size: 24px;
}
.imgBox span {
width: 32px;
}
.signup {
padding: 12px 12px;
font-size: 14px;
}
.hero{
padding: 10px;
display: flex;
flex-direction: column;
}
.badge {
font-size: 10px;
letter-spacing: .07em;
}
.hero h1 {
font-size: 30px;
}
.hero h2 {
font-size: 24px;
}
.hero h3 {
font-size: 26px;
}
.featureRow {
display: flex;
gap: 0;
flex-direction: column;
}
.box {
margin-top: 15px;
}
.avaiSites {
padding: 0 20px;
}
.avaiSites .flexDiv {
width: max-content;
}
.avaiSites .flexDiv div{
width: 80% !important;
}
.features {
display: flex;
flex-direction: column;
padding: 20px 20px;
}
.cards {
display: flex;
padding: 0 20px;
flex-direction: column;
}
.cta {
display: flex;
padding: 40px 20px;
flex-direction: column;
}
.cta button {
padding: 18px 40px;
font-size: 15px;
margin-top: 15px;
}
.socialArea{
margin-top: 25px;
}

}