/*font-family: 'Macondo', cursive;
font-family: 'Roboto Flex', sans-serif;
font-family: 'Gudea', sans-serif;
*/

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Roboto Flex', sans-serif;
}
:root{
    --rob: 'Roboto Flex', sans-serif;
    --brand-red:#e80f0e ;
    --dark-blue-gray: #2F4858;
    --light-blue-gray: #334E7C;
    --bg-read: #B9CFFF;
    --white: #ffffff;
    --black: #000000;
    --brand-font: 'Gudea', sans-serif;
}


body{
    height: 100vh;
    width: 100%;
    font-family: var(--rob);
    background-color: #334E7C;
    background-image: linear-gradient(180deg, rgb(47, 42, 88), rgb(232, 15, 14)), url(../imgs/bg_law.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    background-blend-mode: soft-light;
}

.font-brand{
    font-family: var(--brand-font);
}


.text-brand-red{
    color:var(--brand-red) ;
}

.bg-brand-red{
    background: var(--brand-red) ;
}

.bg-brand-dark{
    background: var(--dark-blue-gray);
}
.bg-brand-light{
    background-color: var(--light-blue-gray);
}

.bg-brand-read{
    background-color: var(--bg-read) !important;
}

/*Hover effect for the navebar*/


.hover-class{
    background-color: var(--brand-red) !important;
    border-radius: 10%;
    -webkit-border-radius: 10%;
    -moz-border-radius: 10%;
    -ms-border-radius: 10%;
    -o-border-radius: 10%;
}

/* the footer here */

#footer{
    background-color: #336A29;
    background-image: linear-gradient(180deg, rgba(47, 42, 88, 0.885), rgba(232, 15, 14, 0.89)), url(../imgs/bg_header.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}
#why-choose-us{
    background-color: var(--brand-red);
    background-image: linear-gradient(180deg, rgba(232, 15, 14, 0.89), rgba(47, 42, 88, 0.885)), url(../imgs/bg_header.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;

}
#why-choose-us-two{
    padding: 6vmin;
    background:  rgba(255, 255, 255, 0.249);
}
/* Ref Section 2 design here */

.cover{
    width: 100%;
    height: 55vmin;
    position: relative;
}
/*background: linear-gradient(180deg, rgba(232, 15, 14, 0.89) , rgba(47, 42, 88, 0.885)),url(../imgs/bg_header.jpg) no-repeat;
background: rgba(0, 0, 0, 0.234);
*/
.cover .content{
    width: 100%;
    height: 100%;
    padding-top: 19vmin;
}

.cover .content >h1{
        font-family: var(--brand-font);
        font-size: 6vmin;
        color: var(--white);
}

.cover .content>p{
    font-family: var(--rob);
    font-size: 2vmin;
    color: var(--white);
}
.brand-padding{
    padding: 10vmin;
}

/* boxes */
.brand-services .brand-box {
    position: relative;
    z-index: 1;
    background: var(--light-blue-gray); /* Maintain the light blue-gray background */
    width: 18rem; /* Increased width for better balance */
    height: rem; /* Increased height for better proportion */
    padding-top: 3.5vmin;
    margin: 1.5rem; /* Increased margin for better spacing */
    border-radius: 1rem; /* Soft rounded corners */
    
    box-shadow: 1px 2px 30px rgba(232, 15, 88, 0.6), 0px 0px 25px rgba(232, 15, 88, 0.3); /* Softer shadow for elegance */
    
    transition: transform 0.3s ease, box-shadow 0.3s ease; /* Smooth hover effect for interactivity */
}

.brand-services .brand-box:hover {
    transform: translateY(-10px); /* Hover effect for better engagement */
    box-shadow: 1px 2px 40px rgba(232, 15, 88, 0.8), 0px 0px 30px rgba(232, 15, 88, 0.4); /* Intense shadow on hover */
}

.brand-services{
    margin-top: -15vmin;
}


#about_read{
    padding: 6vmin;
    background-color: var(--brand-red);
    background-image: linear-gradient(180deg, rgb(232, 14, 14), rgba(47, 42, 88, 0.838)), url(../imgs/bg_header.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}

#linebottom1{
    display: flex;
    width: 35%;
    border-bottom: var(--brand-red) solid;
    border-width: 0.9rem;
    margin-left: 5rem;
    padding-bottom: 0;
}
/*#########REVISED CSS ENDS HERE FOR THE NEW DESIGN####### */


#copy{
    height: 17vh;
    background: #2D3637;
}


hr{
    border-width: 15px;
    color: white;
}

.other-font{
    font-family: var(--rob);
}

/* the about Page here */
#header
{   
    height: 55vh;
    padding-top: 5rem;
    padding-left: 5rem;
    background-color: #336A29;
    background-image: linear-gradient(180deg, rgba(188, 33, 49, 0.7), rgba(45, 54, 55, 0.9)), url(../imgs/bg_header.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}
#header_l{
    height: 95vh;
    padding-top: 10rem;
    padding-left: 5rem;
    background-color: #336A29;
    background-image: linear-gradient(180deg, rgba(188, 33, 49, 0.7), rgba(45, 54, 55, 0.9)), url(../imgs/bg_header.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}


#about-read{
    padding: 10vh;
    background: #fff;
}
#contrl{
    border-color: #BC2130;
    width: 25%;
}
#line{
    display: flex;
    position: absolute;
    width: 12%;
    border-bottom: #BC2130 solid;
    border-width: 5px;
    padding-bottom: 0;
}
#linetop{
    display: flex;
    position: absolute;
    width: 6%;
    border-bottom: #2D3637 solid;
    border-width: 2px;
    margin-left: 3rem;
    padding-bottom: 0;
}
#linebottom{
    display: flex;
    position: absolute;
    width: 8%;
    border-bottom: #BC2130 solid;
    border-width: 5px;
    margin-left: 3rem;
    padding-bottom: 0;
}
#linetop0{
    display: flex;
    position: absolute;
    width: 6%;
    border-bottom: #2D3637 solid;
    border-width: 3px;
    padding-bottom: 0;
}
#linebottom0{
    display: flex;
    width: 15%;
    border-bottom: #BC2130 solid;
    border-width: 5px;
    margin-left: 3rem;
    padding-bottom: 0;
}
#linetop1{
    display: flex;
    position: absolute;
    width: 6%;
    border-bottom: #2D3637 solid;
    border-width: 3px;
    padding-bottom: 0;
}

#cline{
    display: flex;
    width: 40%;
    border-bottom: #BC2130 solid;
    border-width: 4px;
    margin-left: 3rem;
    border-radius: 15px;
}
#serv{
    display: flex;
    width: 40%;
    border-bottom: #BC2130 solid;
    border-width: 4px;
    margin-left: 3rem;
    border-radius: 15px;
}
#abou{
    display: flex;
    width: 40%;
    border-bottom: #BC2130 solid;
    border-width: 4px;
    margin-left: 3rem;
    border-radius: 15px;
}
#sum{
    display: flex;
    width: 15%;
    border-bottom: #BC2130 solid;
    border-width: 4px;
    margin-left: 3rem;
    border-radius: 15px;
}
#sumt{
    width: 15%;
    border-bottom: #2D3637 solid;
    border-width: 2px;
    border-radius: 15px;

}
#bordr{
    width: 12%;
    margin-left:20px ;
    border-bottom: #BC2130 solid;
    border-width: 5px;
}
#btop{
    width: 10%;
    padding-left: 10%;
    border-top: #2D3637 solid;
    border-width: 5px;
}


.box{
    width: 70px;
    height: 70px;
    background: #2D3637;
    border-radius: 50%;
    position: relative;
}