@import url('https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&family=Libre+Baskerville:ital,wght@0,400;0,700;1,400&display=swap');

:root{
--primary_color: #1E3A8A;
--secondary_color:#4B5563;
--accent_color:#fccb4b;
--text_coloe:#1F2937;
--bannercolor:#1b1725;
--font_thin:100;
--font_light:300;
--font_regular:400;
--font_bold:700;
--font_black:900;
--navtext_font_size:14px;
--linkbutton_fontsize:15px;
--bannertitle_fontsize:50px;
--bannertext_fontsize:22px;
    --bannertitle_mobile_fontsize:38px;
    --bannertext_mobile_fontsize:17px;
--pagesectionwidth:97%;
    --pagesectionwidthmobile:100%;
    --section_title_fontsize:26px;
    --section_title_mobile_fontsize:23px;

}
html,body{
    padding: 0;
    margin: 0;
    height: 100%;
    scroll-behavior: smooth;

    font-family: "Lato", sans-serif;
    overflow-y: scroll;
}



.libre-baskerville-regular {
    font-family: "Libre Baskerville", serif;
    font-weight: 400;
    font-style: normal;
}

.libre-baskerville-bold {
    font-family: "Libre Baskerville", serif;
    font-weight: 700;
    font-style: normal;
}

.libre-baskerville-regular-italic {
    font-family: "Libre Baskerville", serif;
    font-weight: 400;
    font-style: italic;
}
.logolayout{
 display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    flex-wrap: nowrap;
}
#mainlogo{
    width: 150px ;
    height: 75px;
    margin-right: 10px;
}

#logotext{
    display: block;
}

.pageheader{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    flex-wrap: nowrap;
    margin-left: 5%;
    margin-right: 5%;

}

#navlist li{
 display: inline;
 margin-left: 8px;
 margin-right: 8px;


}
#navlist li a{
    text-decoration: none;
    font-size: var(--navtext_font_size);
    font-weight: var(--font_regular);
    color: black;

}
#navlist li a:hover{
    cursor: pointer;
    color: var(--secondary_color);
    text-decoration: underline;
}


#save_blog_btn{
    margin-top: 15px;
}
.linkbutton{
    text-decoration: none;
    font-weight: var(--font_regular);
    background-color: var(--accent_color);
    color: black;
    font-size: var(--linkbutton_fontsize);
    padding: 10px 35px;
    border: 1px solid var(--accent_color);




}
.linkbutton:hover{
cursor: pointer;
    background-color: #fcc436;


}

#bannersection h2{
    color: white;
    font-size: var(--bannertitle_fontsize);
}
#bannersection{
    background-image: url("/images/bannerbackground.jpg") ;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    width: 100% !important;
    height: 50%;
    padding-top: 5%;
    padding-bottom: 10%;
    background-color: black;
}

#bannercontent{
    width: 100%;
    margin-left: 5%;
    margin-top: 2%;
    margin-bottom: 2%;
}
#bannersection p{
    color: white;
    font-size: var(--bannertext_fontsize);
    width: 50%;
    margin-bottom: 3%;
    text-align: justify-all;
}



#aboutussection {
    width: var(--pagesectionwidth);
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    flex-wrap: nowrap;
    padding-top: 5%;
    padding-bottom: 5%;
    margin-left: auto;
    margin-right: auto;
}

.pagesectinleft{
width: 30%;
}

.pagesectinleft p{
    font-size: var(--section_title_fontsize);
    font-weight: var(--font_bold);
    text-align: center;
}
.pagesectionright{
  width: 70%;

}
.pagesectionright p{
    width:85%;
    text-align: justify;
    font-size: 20px;
    line-height:1.8 ;
}

#practiceareassection{
    width: var(--pagesectionwidth);
    margin-top: 3%;
    margin-bottom: 5%;
    margin-left: auto;
    margin-right: auto;
}
.practiceareaslayout{
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    width: 100%;

}
.practiceareaslayout div{

    width: 30%;
    margin: 5px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    flex-wrap: nowrap;
}
.practiceareaslayout div img{


    max-width: 100%;
    height: auto;
}

.practiceareaslayout div h3{

  text-align: center;
}

#blogsection{
 width: var(--pagesectionwidth);
 margin-left: auto;
 margin-right: auto;
}

#blogsectiondiv{
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
    align-items: center;
    flex-wrap: wrap;
}
#blogsectiondiv div{
    width: 45%;
}
.pagessectiontitle{
    text-align: center;
    font-size: var(--section_title_fontsize);
}

.pagefooter{
    background-color: #fff9eb;
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
    align-items: flex-start;
    flex-wrap: wrap;
    margin-top: 25%;
    padding-bottom: 15%;
}
.footerlinks, .footerlinkssocial{
 margin-left: 0;
 padding-left: 0;
}
.footerlinks li{
    list-style: none;
    margin-top: 5px;
    margin-bottom: 5px;

}

.footerlinks li a{
    text-decoration: none;
    color: black;
    font-size: 13px;
}
.footerlinks li a:hover{
    cursor: pointer;
    text-decoration: underline;
}

.footerlinkssocial li{
    display: inline;
    margin-left: 6px;
    margin-right: 6px;
}
.footerlinkssocial li a img{
    width: 30px;
    height: 30px;
}

.locationfooter p{
    font-size: 13px;
}

.contactlabel{
    display: block;
}

.contactuslayout{

    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: flex-start;
    flex-wrap: wrap;
    margin-top: 5%;
}
.contactusleft{
    width: 50%;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    flex-wrap: nowrap;

}

.contactusright{
    width: 50%;
}
.contactusleftimg{
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    flex-wrap: nowrap;
    padding-top: 10px;
    padding-bottom: 10px;
}
.contactusleftimg img{

    width: 25px;
    height: 25px;
    margin-right: 4px;

}

.contactusleftimg a{
    text-decoration: none;
    color: black;
    margin-right: 3px;
    margin-left: 3px;
}
.contactusleftimg a:hover{
    text-decoration: underline;
    color: var(--accent_color);
}
.contactlabel{
    margin-top: 5px;
    margin-bottom: 5px;


}
.contacttextbox{
    width: 50%;
    border: 1px solid black;
}
.contacttextboxblog{
    width: 100%;
}
.contacttextbox, .contacttextboxblog {


    margin-top: 12px;
    margin-bottom: 12px;
    padding-top: 15px;
    padding-bottom: 15px;
    padding-left: 7px;
    font-size: 15px;
    display: block;
    border: 1px solid black;

}

.pagetitlelayout, .bloglayout, #editor, .blogpagelayout{
    width: 80%;
    margin-left: 5%;
    margin-right: 5%;
}
.blogpagelayout p{
    text-align: justify-all;
    font-size: 16px;
    line-height: 1.5;
}
.blogpagelayout img{
 max-width: 100%;
    height: auto;

}
.blogtextinputs{
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
    align-items: center;
    flex-wrap: wrap;
    max-width: 100%;

}
.blogtextinputs div{
    width: 45%;
    margin-left: 10px;
    margin-right: 10px;
}

.blogarticle{
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: flex-start;
    flex-wrap: nowrap;
    padding-bottom: 12px;
}

.blogarticletext{
    text-align: justify-all;
    font-size: 16px;
}
.blogarticle h3{
  text-align: justify-all;

}

.blogarticle a{
    margin-right: 12px;
    width: 30%;
}
.blogarticle a img{
    width: 100%;
    max-width: 300px;
    height: auto;

}
.blogarticle div{
    width: 70%;
}

.readmore{
    text-decoration: none;
    color: #1E3A8A;
}

.readmore:hover{
    cursor: pointer;
    text-decoration: underline;
}
#menuicon{
    display: none;
}
#navlayoutmobile{
    display: none;
}

/**

responsive design for mobile phones
 */
@media only screen and (max-width: 600px) {

    #bannersection{

        width: 100% !important;
        height: auto;
        padding-top: 5%;
        padding-bottom: 10%;

    }

    #bannersection h2{

        font-size: var(--bannertitle_mobile_fontsize);
    }

    #bannersection p{

        font-size: var(--bannertext_mobile_fontsize);
        width: 95%;
        margin-bottom: 8%;

    }

    #bannercontent{
        width: 95%;
        margin-left: 5%;
        margin-top: 2%;
        margin-bottom: 2%;
    }

    .pagessectiontitle{

        font-size: var(--section_title_mobile_fontsize);
    }
    #aboutussection {
        width: var(--pagesectionwidthmobile);
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        flex-wrap: nowrap;
        padding-top: 5%;
        padding-bottom: 5%;

    }

    .pagesectinleft{
        width: 100%;
    }
    .pagesectionright{
        width: 90%;


    }
    .pagesectinleft p{
        font-size: var(--section_title_mobile_fontsize);

    }

    .pagesectionright p{
        width: 100%;

        font-size: 16px;

    }

    #practiceareassection{
        width: var(--pagesectionwidth);
        margin: 3% auto 5%;
    }

    .practiceareaslayout div{

        width: 50%;
        margin: 5px;

    }

    #blogsectiondiv{
        display: flex;
        flex-direction: row;
        justify-content: space-evenly;
        align-items: center;
        flex-wrap: wrap;
    }
    #blogsectiondiv div{
        width: 90%;
    }

    .contactuslayout{

        width: 100%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: flex-start;
        flex-wrap: wrap;
        margin-top: 5%;
    }
    .contactusleft{
        width: 90%;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: flex-start;
        flex-wrap: nowrap;
        margin-left: 10%;

    }

    .contactusright{
        width: 90%;
        margin-left: 10%;
    }

    .contacttextbox{
        width: 80%;
    }
    .contacttextboxblog{
        width: 100%;
    }

    .pagetitlelayout, .bloglayout, #editor, .blogpagelayout{
        width: 90%;

    }

    .blogpagelayout img{
        max-width: 100%;
        height: auto;

    }

    .blogtextinputs div{
        width: 85%;

    }

    #navbardesktop{
        display: none;
    }

    #menuicon{
        display: block;
        width: 27px;
        height: 27px;
    }
    #menuicon:hover{
        cursor: pointer;
    }

    #navlayoutmobile{
        display: block;
        position: fixed;
        top: 0;
        left: 0;
        width: 60%;
        height: 100%;
        border: 1px solid #1E3A8A;
        background-color: #1E3A8A;
        margin-left: -65%;
        transition-property: margin-left;
        transition-delay: 0s;
        transition-duration: 0.3s;
        transition-timing-function: linear;
    }

    #navlistmobile{
        list-style: none;
    }
    #navlistmobile li{

        margin-top: 10px;
        margin-bottom: 10px;
    }

    #navlistmobile li a{
        color: white;
        text-decoration: none;
    }

    #navlistmobile li a:hover{
        cursor: pointer;
        text-decoration: underline;
    }
    #closeicon{
        position: absolute;
        top: 10px;
        right: 10px;
        width: 18px;
        height: 18px;
    }

    #closeicon:hover{
        cursor: pointer;
    }
    #mainlogo{
        width: 100px;
        height: 50px;
        margin-top: 10px;
        margin-bottom: 10px;
        margin-left: 10px;
    }
    #logotext{
        display: none;
    }


}