@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');

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

/* ########### html element styling ################## */

body {
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    line-height: 1.7;
}

html {
    font-size: 62.5%;

}

ul li {
    list-style: none;
}

a {
    font-size: 1.6rem;
    text-decoration: none;
}

p,
li {
    font-size: 1.6rem;
    margin-bottom: 0.5em;
    letter-spacing: 0.15em;
}

h1,
h2,
h3 {
    margin-bottom: 0.5em;
    letter-spacing: 0.15em;
    font-weight: 500;
}

/* ################## utility classes ################## */
.container {
    max-width: 1200px;
    width: 90%;
    margin: auto;
}

.lg-heading {
    font-size: 3.5rem;
}

.md-heading {
    font-size: 2.2rem;
}

.text-red {
    color: #e63946;
}

.text-light {
    color: #f4f4f4;
}

.text-black {
    color: #333;
}

.text-grey {
    color: #555;
}

.btn {
    display: inline-block;
    padding: 0.4em 1.3em;
    font-weight: 500;
    text-transform: uppercase;
    margin: 0.5em;

}

.btn-primary {
    background-color: #fff;
    border-radius: 10em;


}

.btn-secondary {
    color: red;
    border: 2px solid #e63914;
    border-radius: 1.5em;
    background: #fff;
}

.btn-primary:hover {
    background-color: #fff;
}

.btn-secondary:hover {
    background-color: #fcf3f2;
}

.bg-dark {
    background-color: #263238;
}

/* ############ header styling ############## */
.header {
    height: 95vh;
    background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url(/img/header-image.jpg);
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    position: relative;

}

.navbar {
    padding: 1rem;
}


.logo {
    float: left;
    font-size: 3.5rem;

}

.navbar .nav-items {
    float: right;
    margin-top: 1rem;
    text-transform: uppercase;
}

.navbar .nav-item {
    display: inline-block;
    padding: 1rem;
}

.navbar::after {
    content: "";
    display: block;
    clear: both;
}
.navbar a {
    position: relative;               /* Required for ::after positioning */
    display: inline-block;
    text-decoration: none;
    color: #f4f4f4;                   /* Unified link color */
    padding: 5px 0 0.3rem 0;          /* Top: 5px, Bottom: 0.3rem */
    transition: color 0.3s ease;
}

.navbar a::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    height: 2.5px;
    width: 0%;
    background: #00ffd5;
    transition: width 0.3s ease;
}

.navbar a:hover {
    color: #ffffff;
}

.navbar a:hover::after {
    width: 100%;
}

/* Optional, but simplified since color is already handled */
.navbar a:link,
.navbar a:visited {
    color: #f4f4f4;
}


/* ############ Header Content################ */
.header-content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    background: linear-gradient(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2));

}

.header-content h1 {
    text-transform: uppercase;
    font-weight: 700;
}

p {
    text-transform: uppercase;
}

/* s############# Showcase Section ############### */

.showcase {
    background: #ddd;
    padding: 10rem 0;
}

.row {
    height: auto;
    border-radius: 10px;
    background: #fff;
    padding:2rem;
    box-shadow: 0px 0px 20px 0px #aaa;
}

.row1 {
    margin-bottom: 5rem;
}

.row1 .img-box,
.row2 .text-box {
    float: left;
    width: 50%;

}

.row1 .text-box,
.row2 .img-box {
    float: right;
    width: 50%;
}

.row .img-box {

    height: 100%;
}

.row .text-box {

    padding: 3rem;
}

.row .img-box img {

    display: inline-block;
    width: 100%;
    height: 100%;
}

.row1 .img-box img {
    border-top-left-radius: 10px;
    border-bottom-left-radius: 10px;

}

.row2 .img-box img {
    border-top-right-radius: 10px;
    border-bottom-right-radius: 10px;

}

.row .new-btn {
    background-color: white;
    color: red;
    border: 2px solid red;
    padding: 0.6rem 1.7rem;
    border-radius: 3rem;
    text-transform: uppercase;
}

.row::after {
    content: "";
    display: block;
    clear: both;
}

.features {
    padding: 3rem 0;
}

.box-wrapper {
    box-shadow: 0px 0px 20px 0px #0000005e;
}

.box {
    width: 33.3333333%;
    float: left;


}

.box1 {
    background-color: #344;
    padding: 2rem;
    text-align: center;
    color: white;

}

.box2 {
    background: linear-gradient(rgb(184, 137, 137), rgb(138, 4, 4));
    color: #fff;
    padding: 2rem;
    text-align: center;


}

.box3 {
    background-color: #344;
    padding: 2rem;
    text-align: center;
    color: white;

}

.box-wrapper::after {
    content: "";
    display: block;
    clear: both;
}

.footer {
    background-color: #263238;
    color: #f4f4f4;
    padding: 1.7rem;
    text-align: center;
}

.social-links i {
    margin: 1.5rem;
    color: white;

}

/* ##################### About Page Styling ###################### */
.about {
    padding: 5rem 0;
   

}

.about-heading {
    border-bottom: 6px solid #e63914;
}

.about p {
    margin-top: 30px;
}

/* ######### About Wrapper ############ */
.about-wrapper {
    text-align: center;
    margin: 2rem;
}

.list-items {
    float: left;
    width: 50%;
}

.list-items1 {
    float: right;
    width: 50%;
}

.about-wrapper::after {
    content: "";
    display: block;
    clear: both;
}

.about-wrapper li::before {
    content: "\2713";
    color: #e63946;
    font-weight: bold;
    padding-right: 1rem;
}

/* ######## Counts ########### */

.count-items {
    margin-top: 3rem;
    margin-bottom: 3rem;
    width: 25%;
    float: left;
    text-align: center;
}

.count-items::after {
    content: "";
    display: block;
    clear: both;
}

.count-items span {
    color: #e63946;
    font-weight: 700;

}

.count-items p {
    color: #263238;
    margin: 0;
    font-weight: 700;
    font-size: 1.8rem;
}

/* ############# CENTER CONTENT ################ */
.cta-banner {
    background: linear-gradient(rgba(199, 111, 111, 1), rgba(215, 23, 23, 1));
    margin-bottom: 12rem;
  
}
/* === CTA ONLY STYLING === */
.cta-banner {
  background: linear-gradient(25degree, #8a4449, #e63946 50%);
  color: #f4f4f4;
  display: flex;

text-align: center;
  text-align: center;
 padding: 1px;
 box-shadow: 5px 5px 10px #0000005e;
  border-radius: 10px;
  margin-top: 4rem;
  gap: 2rem;
}

.cta-left{
    float: left;
    width: 60%;
}
.cta-right{
    float: right;
    width: 40%;
    text-align: right;
}
.cta-banner::after{
    content: "";
    display: block;
    clear: both;
}
.cta-line{
    font-weight: 700;
    font-size: 2rem;
    margin-top: 1.3rem;
}
.btn-cta{
    text-align: center;
    display: inline-block;
    font-weight: 700;
    font-size: 3rem;
    text-transform: uppercase;
    border: 4px solid white;
    padding: 0.3rem 2.4rem;
    letter-spacing: 0.5rem;
    color: #f4f4f4;
  margin: 1.5rem;
}

/* ################# Contact page styling ############ */

.class-form{
    padding: 5rem 0;
}
.class-form i{
    display: inline-block;
    color: #e63946;
}
.form-wrapper::after{
    content: "";
    display: block;
    clear: both;
}

.form-wrapper .address{
    height: 760px;
    float: left;
 width: 49%;
 padding: 3rem;
 background-color: #f4f4f4;
}

.address .c-img{
     margin-top: 30px;
    max-width: 90%;
    min-height: 30rem;
    object-fit: cover;
    box-shadow: 5px 5px 20px #00000044;
    object-position: right;
}
.form{
width: 49%;
float: right;
padding: 4rem;
 background-color: #f4f4f4;
 height: 760px;
 line-height: 1.8;


}
.form h2{
    border-radius: 1px;
}
.form h2::after{
    content: "";
    display: block;
    border-bottom: 7px solid red;
    margin-bottom: 25px;
}

.form label{
    font-size: 2rem;
    color: #263238;

   
}
.form input{
 width: 100%;
 padding: 0.4rem;
 margin-bottom: 10px;
}
.form input:hover{
    color: rgb(167, 12, 206);

}

.form textarea{
    width: 100%;
   
}
.form .btn-sub{
padding: 0.5rem 3rem;
font-size: 2rem;
position: relative;
left: 50%;
transform: translate(-50%);
margin-top: 5px;
background-color: rgba(197, 54, 54, 0.87);
color: #f4f4f4;
border: none;
border-radius: 5px;

}

@media (max-width: 580px){
    html{
        font-size: 50%;
    }
     .navbar .nav-items, .navbar .logo{
      
     
        width: 100%;
        text-align: center;
     }
       .navbar .nav-items a{
        font-size: 12px;
       }
    .lg-heading{
        font-size: 24px;
    }
    .md-heading{
        font-size: 13px;
        padding: 12px;
    }
    p{
        font-size: 13px;
    }
    .row{
        height: auto;
        width: 100%;
        padding: 1rem;
    }
    .row .img-box, .row .text-box{
        float: none;
        width: 100%;
        text-align: center;
    }
    .features .box{
        float: none;
        width: 100%;
        text-align: center;
        margin-top: 7px;
       border-radius: 13px;
    }
    .box-wrapper{
        box-shadow:none
    }

    /* ######### About ######### */
    .list-items, .list-items1{
       align-items: center;
        width: 100%;
    }
    .count-items p{
        font-size: 11px;
    }
    .cta-left{
        float: none;
        width: 100%;
        align-items: center;
    }
    .cta-right{
        float: none; 

        align-items: center;
        text-align: center;
        margin-left: auto;
        margin-right: auto;
    }
 .cta-banner{
    float: none;
   
    margin: 0;
   
    display: grid;

 }
 cta-banner p{
    width: 100%;
    float: none;
    display: block;
 }
 .cta-line{
    font-weight: 700;
    font-size: 1.4rem;
    width: 100%;
  
}
 .btn-cta{
   width: 90%;
   border-radius: 5px;
  float: none;
    font-weight: 700;
    font-size: 1.4rem;
    text-transform: uppercase;
    border: 3px solid white;
    padding: 0;
    color: #f4f4f4;
   letter-spacing: 2px;
}
/* ####### contact page ################ */
.form-wrapper .address{
        float: none;
        width: 100%;
        display: block;
        height: auto;
        margin-bottom: 5rem;
        padding: 4rem;
    }
    .form-wrapper .form{
        float: none;
        width: 100%;
        height: auto;
        padding: 6rem;

    }

}
@media (min-width:501px) and (max-width:1100px){

 html{
        font-size: 60%;
    }

    .lg-heading{
        font-size: 34px;
    }
    .md-heading{
        font-size: 18px;
        padding: 12px;
    }
    p{
        font-size: 16px;
    }
    .row{
        height: auto;
        padding: 2rem;
        width: 100%;
    }
        .row .img-box, .row .text-box{
        float: none;
        width: 100%;
        text-align: center;
    }
    .features .box{
  
        text-align: center;
        margin-top: 7px;
     
      align-items: center;
      
    }
    .box-wrapper{
        box-shadow:none
    }

    .count-items p{
        font-size: 11px;
    }
    .cta-left{
        float: none;
        width: 100%;
        align-items: center;
    }
    .cta-right{
        float: none; 

        align-items: center;
        text-align: center;
        margin-left: auto;
        margin-right: auto;
    }
 .cta-banner{
    float: none;
    padding: 1px;
    margin: 0;
   
    display: grid;

 }
 cta-banner p{
    width: 100%;
    float: none;
    display: block;
 }
 .cta-line{
    font-weight: 700;
    font-size: 1.4rem;
    width: 100%;
  
}
 .btn-cta{
   width: 90%;
   border-radius: 5px;
  float: none;
    font-weight: 700;
    font-size: 1.4rem;
    text-transform: uppercase;
    border: 3px solid white;
    padding: 0;
    color: #f4f4f4;
   letter-spacing: 2px;
}
/* ####### contact page ################ */
.form-wrapper .address{
            
        height: auto;
        margin-bottom: 5rem;
        padding: 4rem 2rem;
        line-height: 1.2;
    }
    .form-wrapper .form{
       
       line-height: 1.6;
        height: auto;
        padding: 4rem 4rem;

    }
    .form label{
        font-size: medium;
    }

    .form input{
        padding: 2px;
    }
}



@media(orientation: landscape) and (max-height:500px){
    .header{
        height: 90vmax;
    }
}