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

header{width: 100%;
display: flex;
background-color: rgba(0, 0, 0, 0.849);
padding:15px;
position: absolute;
top: 0px; 
}
 
.first-header{width: 25%;
display: flex;}

.first-header img{width: 80%;}

.sec-first-header{display: flex;
align-items: center;
}

.sec-first-header a{        font-size: 23px;
    border-left: 1px solid #dddddd63;
    padding-left: 31px;
    color: white;
    height: 70%;
    display: flex;
    align-items: center;
    text-decoration: none;
}



.second-header{width: 55%;
display: flex;
align-items: center;
padding-left:6%;}

.ul-first{margin: 0px;
padding: 0px;
width: 100%;}

.ul-first .li-first{    list-style: none;
    float: left;
    color: white;
    font-family: 'Rubik';
    margin: 2% 3%;
position: relative;}

.ul-first .li-first a{text-decoration: none;
color: white;
display: block;}

.ul{margin: 0px;
padding: 0px;
position: absolute;
display: flex;
flex-direction: column;
width:250px;
margin-top: 33px;
border-top: 2px solid orangered;
background-color: #fff;
visibility: hidden;
z-index: 1;
opacity: 0;
transition: visibility 2s, opacity 0.5s linear;
}

.ul .li{margin: 0px;
    width: 100%;
     /* position: relative;  */
}

.ul .li a{color: #555;
padding: 10px 16px;
position: relative;}

.ul .li a:hover{border-left: 2px solid orangered;
background-color: #ddd;
color: #363535;}

ul li:hover .ul{visibility: visible;
opacity: 1;}

.greater-than{position: absolute;
right: 20px;}

.ul-one{
    margin: 0px;
    padding: 0px;
    margin-left: 250px;
top: 0px;
position: absolute;
display: flex;
flex-direction: column;
width:250px;
opacity: 0;
visibility: hidden;
background-color: #fff;
z-index: 1;
transition: visibility 2s, opacity 0.5s linear;
}

.ul-one .li-one{
    list-style: none;
    float: left;
    color: white;
    font-family: 'Rubik';
    margin: 2% 3%;
position: relative;
}

.ul .li:hover .ul-one{
    visibility: visible;
    opacity: 1;
}

.third-header{width: 20%;
display: flex;
align-items: center;}

.phone-icon{width: 50px;
height: 50px;
background-color: orangered;
border-radius: 100%;
display: flex;
justify-content: center;
align-items: center;
}

.phone-span-icon{color: white;
    transition: transform .1s ease-in-out;
font-size: 18px;}

.phone-span-icon a{color: white;
display: block;}

.phone-span-icon:hover{
    transform: rotate(270deg);

}

.third-header p{    font-family: 'montserrat';
    color: white;
    letter-spacing: 1px;
    font-size: 19px;
    margin-left: 12px;}

 




    /* @@@@@@@@@@@@@@@@@@@@@@@@ */

    *{box-sizing: border-box;
    }
    
    body{   overflow-x: hidden;     margin: 0px;    padding: 0px;    height: 100%;    width: 100%;         }

    .sidenav{display: none;}
    
    .text-copy{width:100%;
        text-align:left;
    }
    
    .social-header1{position: absolute;
      right: 3%;
      line-height: 48px;
      display: none;
      font-family: 'roboto'; 
      font-weight: 700;} 
    
      .sign-in1 a{text-decoration: none;
      color: white;}
    
    .header{border:none; 
    width: 100%;
    box-sizing: border-box;
    background-color:#ffffd8;} 
    
    
    .logo{border:none;
    display: flex;
    justify-content: center;
    box-sizing: border-box;
    padding: 10px;}
    
    .logo-image{border:none;
        width: 40%;
        text-align: center;
    }
    
    .logo-img{display: flex;
        justify-content: center;}
    
        .logo-src-img{max-width: 150px;
        width: 150px;
        filter:drop-shadow(2px 2px 2px gray);
    height: auto;}
    
    .header-texts{border:none;
    width: 40%;}
    
    .logo-heading-red{font-family: 'Roboto', sans-serif;
        font-weight: 900;
        font-size: 24px;
        color: #f44a56;
    }
    
    .logo-heading-blue{    font-family: 'roboto', sans-serif;
        color:#1019ad;
        font-size: 19px;
        font-weight: 700;
    }
    
    .header-text-red{font-family: 'roboto',sans-serif;
    color: #f44a56;
    font-size: 22px;
    line-height:31px;
    font-weight: 500;}
    
    .header-text-blue{    color: #1019ad;
        font-family: "Roboto",Sans-serif;
        font-size: 20px;
        line-height:10px;
    }
    
    nav{width:100%;
    height: 44px;
    box-sizing: border-box;
    background-color: #fb4482;
    margin-top: 15px;}
    
    
    .nav-ul{margin: 0px;
    padding: 0px;
    }
    
    #home-li{margin-left: 1%;}
    
    .nav-ul .nav-li{list-style:none;
        float: left;
        padding-left:20px;
        line-height: 44px;
        color: #fff;
        text-align:left;
        font-family: 'Roboto';
        font-size: 16px;
        font-weight: 500;
        position: relative;
    
    }
    
    .dropdown-ul{margin: 0px;
    padding: 0px;
    position: absolute;
    
    }
    
    .dropdown-li{list-style:none;
        line-height: 44px;
        position:relative;
        background-color: #fb4482;
        padding-left:3%;
        padding-right:2%;
        min-width:500px;
        text-align:left;
        max-width:max-content;
        box-shadow: 0px 8px 16px 0px rgb(0 0 0 / 10%);
        text-transform: capitalize;
        white-space: normal;
        border-bottom: 1px solid #fff;
        display: inline-block;
    
    }
    
    
    .dropdown-litwo{list-style:none;
        line-height: 44px;
        position:relative;
        background-color: #fb4482;
        padding-left:3%;
        padding-right:2%;
        min-width:362px;
        max-width:max-content;
        box-shadow: 0px 8px 16px 0px rgb(0 0 0 / 10%);
        text-transform: capitalize;
        white-space: normal;
        border-bottom: 1px solid #fff;
        display:inline-block;
    
    
    }
    
    .dropdown-litwo a{color: #fff;
        display: block;
        text-decoration: none;}
    
    .dropdown-li a{color: #fff;
    display: block;
    text-decoration: none;}
    
    .nav-ul .nav-li a{text-decoration:none;
    color: #fff;
    display: block;}
    
    .down-arrow{margin-left:3px;}
    
    ul ul{display: none;}
    
    ul li:hover ul{display: block;}
    
    .down-social-div{width: 100%;
    display: flex;
    padding: 5px 0px 5px 0px;
    box-sizing: border-box;
    justify-content: center;
    border:none;}
    
    .social-header{width:100%;
    height:auto;
    box-sizing: border-box;
    border:none;
    display: flex;
    justify-content: center;
    align-items: center;}
    
    .span-board-text{font-family: 'roboto',sans-serif;
      margin-top: 10px;;
    font-weight: 500;}
    
    .span-board-text-a{text-decoration: none;
    color: #1019ad;
    }
    
    .header-social-icon{padding: 10px;}
    
    .sign-in a{font-family: 'roboto',sans-serif;
    color: #1019ad;
    text-decoration: none;
    font-weight: 500;}
    
    #sidenav{display: none;}
    
    #sidebaricon{display: none;}
    
        #crossside{display: none;}
    
    
        .contact-span{display: flex;
         flex-direction: column;
        align-items: baseline;}
      
        .contact-span-m{display: flex;
         flex-direction: column;
        align-items: baseline;}
    
        .mobile-contact-none{
          display: none;
        }
    
    
    
    @media (max-width:1250px){
    
        .header-text-blue{line-height: 35px;
        margin: 0px;
    padding: 0px;}
    
    nav{display: flex;
    height: 100%;}
    #sidenav{display: none;}
    
    #home-li{margin-left: 0%;}
    
    .nav-ul .nav-li{font-size: 14px;}
    
    .contact-span{text-align: left;}
    .contact-span-m{text-align: left;}
    
    }
    
    
    @media(max-width:1024px){
      .header{background-image:none;
        animation: none;
        height:116px;
        background-color: black;}
      #social-display-none{display: none;}
    
      .contact-span{display: none;}
    
      
      .mobile-contact-none{
        display:block;
      }
    
      .down-social-div{justify-content:left;
      }
    
      .logo{justify-content: left;}
    
      .logo-image{width: 40%;
      margin-left: 2%;
    border:none;}
    
    .header-texts{width:48%;
    margin-left: 5%;
    border:none;}
    
    
    .header-text-red{  margin: 0px;
    margin-top: 12px;
    line-height: 34px;
    }
    
      .social-header{justify-content: left;
      margin-left: 4%;}
    
        .nav-ul{display: none;}
    
        nav{background-color:black;}
    
        .social-header1{display: block;}
    
        #sidebaricon{padding: 10px;
            font-size: 24px;
    color:white;
 
            font-weight: bold;
            display: block;
        cursor: pointer;}
    
            #crossside{position: absolute;
                top: 5%;
                right: 5%;
                display: block;
                color:black;
                font-size: 35px;
                cursor: pointer;
                
            }
    
        /* side navbar here start */
    
        
    /* Fixed sidenav, full height */
    #sidenav {
        height:auto;
        width:100%;
        position:absolute;
        display: none;
        z-index: 1;
        top: 0;
        left: 0;
        background-color:white;
        overflow-x: hidden;
        padding-top: 20px;
        box-sizing: border-box;
        padding-top: 8%;
      }
      
      /* Style the sidenav links and the dropdown button */
      #sidenav a, .dropdown-btn {
        padding: 14px 9px 14px 21px;
                text-decoration: none;
        font-size: 20px;
        color:black;
        display: block;
        border: none;
        background: none;
        
        border-bottom: 1px solid black;
        width: 100%;
        text-align: left;
        cursor: pointer;
        font-family: "Trebuchet MS";
        font-weight: 700;
    
        outline: none;
      }
      
      /* On mouse-over */
      #sidenav a:hover, .dropdown-btn:hover {
        color:orangered;
      }
      
      /* Main content */
      .main {
        margin-left: 200px; /* Same as the width of the sidenav */
        font-size: 20px; /* Increased text to enable scrolling */
        padding: 0px 10px;
      }
      
      /* Add an active class to the active dropdown button */
      .active {
        background-color:darkblue;
        color: white;
      }
      
      /* Dropdown container (hidden by default). Optional: add a lighter background color and some left padding to change the design of the dropdown content */
      .dropdown-container {
        display: none;
        background-color:white;
        padding-left: 8px;
      }
      
      /* Optional: Style the caret down icon */
      .fa-caret-down {
        float: right;
        padding-right: 8px;
      }
    
      }
    
      
    
    
    
    
    @media(max-width:767px){
    
      .logo{flex-direction: column;
        justify-content: center;
        align-content: center;}
    
        .logo-image{width: 100%;
        margin-left: 2%;
        border: none;}
    
        .header-texts {
          width: 100%;
          margin-left: 0px;
          border:none;
          text-align: center;}
    
          #sidenav a, .dropdown-btn{font-size: 18px;}
    
            .text-copy{text-align: center;}
    
    
          #sidenav{padding-top: 15%;
            box-sizing: border-box;
          border-bottom: 1px solid orangered;}
    
    
    }
    
    @media(max-width:620px){
    
    .social-header{width: 50%;
      font-size: 15px;}
    
      #crossside{top: 2%;}
    }
    
    @media(max-width:460px){
    
      .social-header{width: 39%;
      }
    
      #mobile-social-header{width: auto;
      text-align: center;}
    
      .social-header{text-align: center;
      font-size: 13px;}
    
      .header-social-icon{padding-left: 0px;}
    
    }
    
    
      /* Some media queries for responsiveness */
      @media screen and (max-height: 450px) {
        #sidenav {padding-top: 15px;}
        #sidenav a {font-size: 18px;}
      }
/* @@@@@@@@@@@@@@@@@@@@@@@@@@@ */

    

    @media (max-width:900px){

      .first-header{width: 100%;}

      .first-header img{width: 80%;}

        .sec-first-header{display: none;}
        .second-header{display: none;}
        .third-header{display: none;}


    } 

    @media(max-width:600px){
      header{padding: 15px 10px 5px 10px;}
      .first-header{align-items: center;}
      .first-header img{width: 60%;}
    }