/*=====================
    SITE WHIDE CSS 
=======================*/
*, :root{ 
    padding:0;
    margin:0;
    font-family: Tahoma, Verdana, sans-serif;
    --primary: #93A5F5;
    --secondary: #100680;
}


/*----------------------
HEADER CSS
-----------------------*/
header{
    position:sticky;
    display: flex;
    background: var(--primary);
    justify-content: flex-end;
    padding:1rem 2rem;
    top: 0;
}

header div{
    width: calc(100%/1);
    display: flex;
    text-align:right;
    justify-content: flex-end;
}
header ul{
    display: flex;

}
header ul li {
    list-style: none;
    padding: 0 1rem;
    font-weight: bold; 
}

header ul li a {
    text-decoration: none;
}

/* Group CSS */

.areas h3, section.corporate h2 {
    color: var(--secondary)
}

section.ron-about {
display: flex;
background: var(--secondary);
justify-content: center;
align-items: center; 
color: #FFF; 
}

section.ron-about div {
    width: calc(100%/2);
    display: flex;
    flex-direction: column;
    padding-left: 1rem;
}

.ron-info{
   align-items: center;
   padding: 5rem;
   gap: 1rem;
}

.ron-info_inner{
    width: 75% !important;
}

.ron-info ul li{
    list-style-type: none;
    padding-top: .5rem;
    padding-bottom: 0.5rem;
}
.ron-pic { 
 justify-content: center; 
 align-items: center;
}

.ron-pic img{
    width: auto;
    height: 400px;
    max-width: 100%;
    flex-grow: 0; 
}
/*------------------------------
AREAS OF PRACTICE
--------------------------------*/
section.areas {
    display:flex;
    padding: 50px 75px 75px 50px;
    align-items:center;
    justify-content: center;
    gap: 1rem;
}

section.areas div{
    width: calc(90%/3);
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items: center;

}

section.areas div img { 
  width: 150px;
  height: 200px;

}

section.areas div:hover { 
    color: red;
}
section.family {
    display: flex;
    background: var(--secondary);
    justify-content: center;
    align-items: center; 
    color: #FFF; 
    }
    
section.family div {
    width: calc(100%/2);    
    display: flex;
    flex-direction: column;
    color: #fff;
    }
      
    .family {
       padding: 5rem;
       gap: 1rem;
    }
    
    .family-description ul li{
        list-style-type: none;
        padding-left: 10rem;
        padding-bottom: 0.5rem;
    }

    .family-pic { 
        justify-content: center; 
        align-items: center;
    }
    
    .family-pic img{
        width: auto;
        height: 298px;
        width:  449px;
        flex-grow: 0; 
    }

section.corporate {
            display: flex;
            background: #fff;
            justify-content: center;
            align-items: center;
            padding: 5rem;
            gap: 1rem; 
            color: #000; 
             }
 section.corporate div {
            width: calc(100%/2);    
            display: flex;
            flex-direction: column;
            color: #000;
            }
              
            .corporate-pic { 
                justify-content: center; 
                align-items: center;
            }
            
            .corporate-pic img{
                width: auto;
                height: 300px;
                width:  auto;
                flex-grow: 0; 
            }   
   
    section.injury {
                display: flex;
                background: var(--secondary);
                justify-content: center;
                align-items: center;
                color: #FFF; 
         }
    section.injury div {
                width: calc(100%/2);    
                display: flex;
                flex-direction: column;
                padding-left: 1rem;

                }
     
    .injury-list{
        padding: 5rem;
        gap: 1rem;
    }
    .injury-list ul li{
        list-style-type: none;
        padding-bottom: .5rem;
    }

    .injury-pic { 
        justify-content: center; 
        align-items: center;
    }
    
    .injury-pic img{
        width: auto;
        flex-grow: 0; 
    }

    section.contact {
        display: flex;
        background: #fff;
        justify-content: center;
        align-items: center;
        padding: 5rem;
        gap: 1rem; 
        color: #000; 
         }

    section.contact div {
        width: calc(100%/2);    
        display: flex;
        flex-direction: column;
        color: #000;
        }
        .underline{
            text-decoration: underline;
        }     
        .contact-pic { 
            justify-content: center; 
            align-items: center;
        }
        
        .contact-pic img{
            width: auto;
            height: 300px;
            width:  auto;
            flex-grow: 0; 
        }  



/**************************************
            Media queries 
***************************************/
@media screen and (max-width: 864px) {
/*query begins*/
section.areas { 
    flex-direction: column;
 }

 section.areas div { 
    width: auto;
 }


 section.ron-about { 
    flex-direction: column-reverse;
 }

 section.ron-about div { 
    width: auto;
 }

section.family{
    flex-direction: column-reverse;
}
section.family div{
    width: auto;
}
section.corporate{
    flex-direction: column;
    padding: 2rem;
}
 section.corporate div{
    width: auto;

 }
 section.injury{
    flex-direction: column-reverse;
 }
 section.injury div {
    width: auto;
 }
 section.contact{
    flex-direction: column;
    padding: 2rem;
}
 section.contact div{
    width: auto;

 }
/*query ends*/
        }