@import url('https://fonts.googleapis.com/css2?family=Poppins&family=Roboto&display=swap');

*{
margin: 0;
padding: 0;
box-sizing: border-box;


}


:root{

    --primary-text-color: #183b56;
    --secondry-text-color: #577592;
    --accent-color: #2294ed;
    --accent-color-dark:#1d69a3;
    --padding-inline-section:20px


}

body{

font-family: 'Poppins', sans-serif;
color: var(--primary-text-color);

}


h1{

   font-size: 3rem; 
}

h2{

    font-size: 2rem; 
 }

 h3{

    font-size: 1.5rem; 
 }

 p{
font-family: 'Roboto' sans-serif ;
font-size: 1.25rem;
color: var(--secondry-text-color);  
line-height: 1.8rem;



 }

 a{

   text-decoration: none;
   display: inline-block;


 }

 ul{

list-style: none;

 }

 /* Utility Classes*/


 .small-bold-text{

 font-size: .865rem;
 font-weight: 500;

 }

 .container{

   max-width: 1180px;
   margin-inline: auto;
   padding-inline: var(--padding-inline-section);


 }

 .flex{

   display: flex;
   align-items: center;
 }

 .hover-links{

  color: var(--primary-text-color);
  transition: 0.5s ease-out;

 }

 .hover-links:hover{

  color: var(--accent-color);


 }

.primary-button{

   background-color: var(--accent-color);
   border-radius: 6px ;
   font-weight: 700;
   color: white !important;
   padding: 12px 24px;
   box-shadow: 0 0 22px var(--secondry-text-color);
   transition: 0.2s ease-out;


}

.primary-button:hover{


background-color: var(--accent-color-dark);

}

.secondry-button{

   border:0.5px solid var(--secondry-text-color);
   border-radius: 6px ;
   font-weight: 700;
   color: var(--primary-text-color) !important;
   padding: 12px 24px;
   transition: 0.2s ease-out;

}

.secondry-button:hover{

border-color: var(--accent-color);
color: var(--accent-color) !important;

}

/*Top Banner*/

 .top-banner{

background-color: #e74694;
background-image: url(/assets/asset\ 32.png);
background-size:300px ;


 }


 .banner-text{

 color: white;
padding: 15px 30px;
text-align: center;



 }

 /*nav*/

 .main-nav{
   margin-top: 20px;
   justify-content: space-between;


 }

 .company-logo img{
width: 200px;


 }

 .nav-links{

flex-basis: 730px;

 }



 .nav-links ul{

   justify-content: end;
   gap: 40px;


 }


 /* Header Section*/

 header{

   padding: 80px var(--padding-inline-section) 0;
 }

 .header-section{

   justify-content: center;
   gap: 50px;
 }


 .header-left{

width: 40vw;

 }

 .header-left h1{

   margin-top: 20px;


 }

 .get-start-button{

   margin-top: 20px;
 }

 .header-right img{
 width: 600px;


 }
/* compines  Section*/

.companies-header{

text-align: center;
margin-block: 30px;
color: var(--primary-text-color);

}

.logos{

justify-content: space-between;
flex-wrap: wrap;

}

.logo{

height: 46px;

}

/* Features sectiuon */

.arrow{

   color: var(--accent-color);


}

.feature-section{

   padding: 80px var(--padding-inline-section) 0;
   background-image: url(/assets/back.svg);
   background-repeat: no-repeat;
   background-position: center;


}

.feature-header{

text-align: center;

}

.features-heading-text{

margin-bottom: 20px;

}

.features-area {

   flex-wrap: wrap;
   justify-content: space-between;
   gap: 40px;
   margin-top: 40px;
}

.features-card {

flex-direction: column;
gap: 20px;
max-width: 30%;
text-align: center;

}

/* Big Features sectiuon */

.big-feature-section{

   padding: 30px var(--padding-inline-section) 0;



}

.big-feature-container{

   gap: 30px;
}

.features-img img{
   width: 100%;
}

.features-desc{

   flex-direction: column;
   align-items: flex-start;
   
}


/* Example sectiuon */

.example-header{


  flex-direction: column;
  gap: 20px;


}


.example-area{

justify-content: space-between;
margin-block :30px;

}

.example-card{

width: 24%;
position: relative;
min-height: 300px;
background: black;
background: linear-gradient(rgb(0,0,0,0.1),rgb(0,0,0,0.8)),url(./assets/asset\ 36.jpeg);
background-size: cover;
transition: 0.2s ease-out;

}


.example-card:hover {

box-shadow:0 0 10px #888 ;

}

.example-card:nth-child(2) {
   background: linear-gradient(rgb(0,0,0,0.1),rgb(0,0,0,0.8)),url(./assets/asset\ 37.jpeg);
   background-size: cover;
 }

 .example-card:nth-child(3) {
   background: linear-gradient(rgb(0,0,0,0.1),rgb(0,0,0,0.8)),url(./assets/asset\ 38.jpeg);
   background-size: cover;
 }

 .example-card:nth-child(4) {
   background: linear-gradient(rgb(0,0,0,0.1),rgb(0,0,0,0.8)),url(./assets/asset\ 39.jpeg);
   background-size: cover;
 }


.card-text{
position: absolute;
bottom: 20px;
left: 20px;
right: 20px;
color: white;
}


/* cta section */
.cta-section-container{

flex-direction: column;
gap: 30px;
color: white;

}


.cta-section{
 padding: 120px var(--padding-inline-section) 80px;
  background-color: #183b54;
}

.cta-section-container p{
 margin-top: 20px;

color: white;

}


/*-Footer-*/

footer{


   padding-block: 80px;
   background-color:#ebf2fa;
}

.link-coloum{


   flex-direction: column;
   align-items: flex-start;
   gap: 20px;
}

.footer-container{
 
align-items: flex-start;
justify-content: space-between;

}


/*-subFooter-*/


.subfooter{
padding: var(--padding-inline-section);

background-color: #b9cde4;;


}
.subfooter-container{

justify-content: center;
gap: 30px;

}