/* CSS Reset */
*{
    margin: 0;
    padding: 0;
}
html{
    scroll-behavior: smooth;
}
/*CSS Variables*/
:root{
    --navbar-height:59px;
}

#navbar{
    position: sticky;
    display: flex;
    align-items: center;
    top: 0px;
}

/* NavagationBar:Logo and images*/
#logo{


}

#logo img{
    height: 50px;
    margin: 2px 2px;
}

/* Navigation BAr: List STyling*/
#navbar ul{
    display:flex;
    font-family: 'Bree Serif', serif;
} 
#navbar::before{
    content: "";
    background-color: hsl(0, 76%, 28%);
    position: absolute;
    top:0px;
    left:0px;
    height: 100%;
    width: 100%; 
    z-index: -1;
    opacity: 0.8;
}

#navbar ul li{
    list-style: none;
    font-size: 1.6rem;
}
#navbar ul li a{
color:rgb(255, 255, 255);
display:block;
padding: 12px 22px;
border-radius: 10px;
text-decoration: none;
}
#navbar ul li a:hover{
    color:blue;
    background-color: white;

}

/*Home Section*/
#home{
    display:flex;
    
    flex-direction: column;
    padding:3px 2px;
    height: 400px;
    justify-content:center;
    align-items:center ;
}
#home::before{
    content: "";
    background:url("../img/pp.jpg"); no-repeat center center/cover;
    position: absolute;
    height:450px;
    width: 100%; 
    z-index: -1;
    opacity: 0.89;
}
#home p{
    color:rgb(66, 6, 6);
    text-align: center;
    font-size: 1.9rem;
    font-family: 'Grape Nuts', cursive;
}
#home h1{
    font: rem;
    color:rgb(19, 18, 18);
    text-align: center;
    font-family: 'Grape Nuts', cursive;
}
/*Utility class*/
.h-primary{
    font-family: 'Bree Serif', serif;
    font-size: 3.8rem;
    padding: 20px;
}
.btn{
    padding: 6px 20px;
    border: 2px solid rgb(137, 67, 216);
    background-color: #e7e07b;
    color:rgb(12, 12, 12);
    margin:10px;
    border-radius: 10px;
    font-size: 1.5rem;
    cursor: pointer;
    }

    /* Services Section*/
    .center{
        text-align: center;
    }
    .h-secondary{
        font-family: 'Bree Serif', serif;
        font-size: 2.8rem;
        padding:12px;
    }
    #services{
        margin:5px;
        display:flex;
        height: 10%;
    }
     .box{
    border: 2px solid brown;
    padding: 10px;
    margin: 3px 2px;
    border-radius: 10px;
    background: #f2f2f2;
    margin-bottom: 20px;
    position:center;;

    }
 .box img{
    height:70%;
    width:95%;
     border: 2px solid brown;
     align-items: center;
     border-radius: 10px;
    }
 .box p{
        font-family: 'Bree Serif', serif;
        font-size: 1.5rem;
    } 

/* Clients Section */
#client-section{ 
    position: relative;
    padding: 5px;
}

#client-section::before{
 content: "";
 position: absolute;
 background: url('../bg.jpg');
 width: 100%;
 height: 100%;
 z-index: -1;
 opacity: 0.3;
}

#clients{
    display: flex;
    justify-content: center;
    align-items: center;
}

.client-item{
    padding: 30px;
}

#clients img{
    height: 120px;
}


/* Contact Section */
#contact{
    padding:5px,10px;;
    position: relative;
}
#contact::before{
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: -1;
    opacity: 1;
    background: url('../contact.jpg') no-repeat center center/cover;

}
#contact-box{
    display: flex;
    justify-content: center;
    align-items: center;
    padding-bottom: 20px;
}
#contact-box input, 
#contact-box textarea{
    width: 100%;
    padding: 0.5rem;
    border-radius: 9px;
    font-size: 1.1rem;
} 

#contact-box form{
    width: 50%;
}

#contact-box label{
   font-size: 1.3rem;
   font-family: 'Bree Serif', serif;

}


footer{
    background: black;
    color: white;
    padding: 9px 2px;
}
@import url('https://fonts.googleapis.com/css2?family=Open+Sans&display=swap');




body{
	background: var(--primary);
	font-size: 14px;
	color: var(--text-clr);
    --white: #fff;
	--text-clr: #000024;
	--primary: #3e2093;
	--secondary: #c0c1d2;
	--input-bg: #f1f1ff;
	--btn-hvr: #1a0065;
}

.wrapper{
	width: 100%;
	padding: 0 10px;
	margin-top: 20px;
	display: flex;
	justify-content: center;
}

.r_form_wrap{
	width: 500px;
	max-width: 100%;
}

.r_form_wrap .title{
	padding: 25px;
	background: var(--white);
	border-radius: 3px;
	margin-bottom: 20px;
}

.r_form_wrap .title p{
	font-size: 25px;
	text-align: center;
}

.r_form{
	padding: 40px;
	border-radius: 3px;
	background: var(--white);
}

.r_form .input_wrap{
	width: 100%;
	margin-bottom: 25px;
}

.r_form .input_wrap label{
	display: block;
	margin-bottom: 5px;
}

.r_form .input_wrap .input_item{
	position: relative;
	width: 100%;
}

.r_form .input_wrap .input_item .input{
	width: 100%;
	border-radius: 3px;
	height: 40px;
	border: 2px solid var(--input-bg);
	background: var(--input-bg);
	padding: 10px 20px;
	padding-left: 50px;
	transition: 0.5s ease;
	color: var(--secondary);
}

.r_form .input_wrap .input_item .input:focus{
	border-color: var(--primary);
}

.r_form .input_wrap .input_item .icon{
	position: absolute;
	top: 12px;
	left: 20px;
	color: var(--secondary);
	font-size: 16px;
}

.r_form .input_wrap .input_radio{
	display: flex;
}

.r_form .input_wrap .input_radio .input_radio_item{
	background: var(--input-bg);
	margin-right: 25px;
	padding: 20px;
	border-radius: 3px;
	position: relative;
	width: 100px;
}

.r_form .input_wrap .input_radio .input_radio_item .radio_mark{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--secondary);
	border: 2px solid transparent;
	border-radius: 3px;
	margin: 0;
	cursor: pointer;
	transition: 0.5s ease;
}

.r_form .input_wrap .input_radio .input_radio_item .radio_mark .i{
	margin-right: 5px;
	display: inline-block;
}

.r_form .input_wrap .input_radio .input_radio_item .radio{
	position: absolute;
	top: 0;
	left: 0;
	opacity: 0;
}

.r_form .input_wrap .input_radio .input_radio_item .radio:checked ~ .radio_mark{
	color: var(--primary);
	border-color: var(--primary);
}

button{
	width: 100%;
	border: 0;
	background: var(--primary);
	padding: 10px;
	border-radius: 3px;
	height: 40px;
	color: var(--white);
	cursor: pointer;
	transition: 0.5s ease;
}

button:hover{
	background: var(--btn-hvr);
}
.card {
    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
    transition: 0.3s;
    border-radius: 5px; /* 5px rounded corners */
  }
  
  /* Add rounded corners to the top left and the top right corner of the image */
  img {
    border-radius: 5px 5px 0 0;
  }