/* GLOBAL RESET */

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

    li
    {
        text-decoration: none;
        list-style: none;
    }

    /* list style */

    .list{
        margin-left: 2em;
    }

    .list li
    {
        font-family: "Figtree", sans-serif;
        color: #333333;
        font-size: 16px;
        list-style: disc;
        margin-bottom: 10px;
        line-height: 30px;
    }
    .list li::marker{color: #f22424;}
    /* list style ends */

    a
    {
        text-decoration: none;
        font-family: "Figtree", sans-serif;
        color: #353d3f;

    }

    a:hover
    {
        /* color: #0fb2cd; */
    }


    h1
    {
        font-family: "Figtree", sans-serif;
        font-size: 40px;
        color: #000000;
        margin-bottom: 20px;
        font-weight: 700;
    }

    h2
    {
        font-family: "Figtree", sans-serif;
        font-weight: 700;
        font-size: 30px;
        color: #000000;
        margin-bottom: 20px;
    }

    h3
    {
        font-family: "Figtree", sans-serif;
        color: #000000;
        font-size: 19px;
        font-weight: 500;
        text-transform: uppercase;
        margin-bottom: 12px;
    }

    h4
    {
        font-family: "Figtree", sans-serif;
        text-transform: uppercase;
        font-size: 17px;
        color: #000000;
        font-weight: 500;
        margin-bottom: 10px;
    }

    h5
    {
        font-family: "Figtree", sans-serif;
        text-transform: uppercase;
        font-size: 19px;
        color: #000000;
        font-weight: 500;

    }

    p
    {
        font-family: "Figtree", sans-serif;
        color: #000000;
        font-size: 16px;
        /* font-weight: 500; */
        line-height: 30px;
        margin-bottom: 31px;
        letter-spacing: 1px;
    }

    .italic-text{
        font-style: italic;
        font-size: 17px;
    }

    img{max-width: 100%;}

    /* divider  */
    .divider{ height: 4px; width: 55px;background-color: #f7911e;}

    /* buttons  */
    .primary-btn{
        background-color: #a00505;
        color: #fff !important;
        font-size: 15px !important;
        padding: 17px 34px;
        border-radius: 25px;
    }

    .primary-btn:hover{
        background-color: #e12929;
        transition: 300ms ease-in-out;
        color: #fff;
        box-shadow: 5px 11px 23px #d9d9d9cc;
    }
    .secondary-btn{
        font-size: 15px !important;
        padding: 17px 34px;
        border-radius: 25px;
        background-color: #fff;
        color: #a00505;
        box-shadow: 5px 11px 23px #d9d9d9cc;
    }
    .secondary-btn:hover{
        background-color: #a00505 ;
        transition: 300ms ease-in-out;
        color: #fff;
        box-shadow: 5px 11px 23px #d9d9d9cc;
    }


/* GLOBAL RESET ENDS*/



/*MAIN GRID*/

    .main-container
    {
        /* display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: auto auto auto auto auto auto auto auto auto auto; */
        overflow-y: hidden;
        overflow-x: hidden;
        padding-top: 98px;
    }

/*MAIN GRID ENDS*/

/* SUB CONTAINERS */
    .navbar
    {
        grid-column: span 12;
        position: fixed;
        z-index: 9995;
        box-shadow: 17px 14px 20px 3px #9191912b;
        top: 0;
        background-color: #fff;
        width: 100%;
        padding-top: 5px;
        padding-bottom: 9px;
        min-height: 98px;
    }

    .banner
    {
        grid-column: span 12;
        /* overflow: hidden; */
    }

    .home-section1
    {
        grid-column: span 12;

    }

    .home-section2
    {
        grid-column: span 12;
    }



    .parallax{
        grid-column: span 12;
    }

    .home-section3{
        grid-column: span 12;
    }

    .home-section4{
        grid-column: span 12;
    }

    .footer
    {
        grid-column: span 12;
    }

    /* about page  */
    .about-section1{grid-column: span 12;}
    .about-section2{grid-column: span 12;}
    

/* SUB CONTAINERS END*/

/* NAVBAR STYLES */
.navbar-inner
{
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-rows: auto auto;
    width: 76%;
    margin: 0 auto;
    align-items: center;
}

.navbar-logo img{
    position: relative;
    top: 5px;
}


.navbar-menu
{
    display: grid;
    justify-items: end;
    padding: 0px 10px 0px;
    z-index: 9;
}


.navbar-menu ul li
{
    display: inline-block;
    margin-right: 20px;
    padding-bottom: 1px;
}

.navbar-menu ul li a
{
    color: #000000;
    font-size: 18px;
    font-weight: 400;
}

.nav-cta{
    background-color: #a00505;
    color: #fff !important;
    font-size: 14px !important;
    padding: 17px 34px;
    border-radius: 25px;
    font-weight: 500 !important;
    position: relative;
    top: 0px;
}

.nav-cta:hover{
    background-color: #e12929 ;
    transition: 300ms ease-in-out;
}

.lastmenu-item{margin-right: 17em !important;}

/* TOGGLE */
#toggle
{
    position: absolute;
    top: 10px;
    left: 10%;
    z-index: 9986;
    width: 40px;
    height: 40px;
    cursor: grab;
    transition: all 0.3s ease-out;
    opacity: 0;
    margin-right: 3em;
}

#toggle .span
{
  height: 3px;
  background: red;
  transition: all 0.3s ease-out;
  backface-visibility: hidden;
  margin: 5px auto;
  background-color: #60ba48;
}

#toggle.on #one
{
  transform: rotate(45deg) translateX(2px) translateY(4px);
}

#toggle.on #two
{
  opacity: 0;
}

#toggle.on #three
{
    transform: rotate(-45deg) translateX(8px) translateY(-10px);
}

.toggle-new
{
    background-color: #a00505;
    width: 76px;
    padding-left: 12px;
    padding-right: 38px;
    padding-bottom: 8px;
    padding-top: 8px;
}

.toggle-new h4{color: #fff;padding: 4px 1px;margin-bottom: 0 !important;}
.close-btn h4{color: #f6f8f7;padding: 4px 1px;margin-bottom: 0 !important;}
.close-btn
{
    border: 2px solid #fff;
    width: 88px;
    padding-left: 6px;
    padding-right: 8px;
    padding-right: 38px;
    padding-bottom: 3px;
    padding-top: 3px;
    position: relative;
    top: -88px;
    left: 196px;
    cursor: pointer;
}

#toggle-close
{
    backface-visibility: hidden;
}

#toggle-close.active
{
    backface-visibility: visible;
}

/* TOGGLE END */

/* SIDENAV */

/* The side navigation menu */
.sidenav {
height: 100%; /* 100% Full-height */
width: 0; /* 0 width - change this with JavaScript */
position: fixed; /* Stay in place */
z-index: 9987; /* Stay on top */
top: 0; /* Stay at the top */
right: 0;
background-color: #ffffff ;/* Black*/
overflow-x: hidden; /* Disable horizontal scroll */
padding-top: 60px; /* Place content 60px from the top */
transition: 0.5s; /* 0.5 second transition effect to slide in the sidenav */
padding-top: 20px;
}
.sidenav.active
{
    height: 100%; /* 100% Full-height */
    width: 300px; /* 0 width - change this with JavaScript */
    position: fixed; /* Stay in place */
    z-index: 9987; /* Stay on top */
    top: 0; /* Stay at the top */
     right: 0;
        background-color: #1d1e1e;
    overflow-x: hidden; /* Disable horizontal scroll */
    padding-top: 120px; /* Place content 60px from the top */
    transition: 0.5s; /* 0.5 second transition effect to slide in the sidenav */
}



/* The navigation menu links */
.sidenav a, .dropdown-btn
{
    padding-bottom: 20px;
    padding-left: 20px;
    text-decoration: none;
    font-size: 15px;
    color: #fff;
    display: block;
    border: none;
    background: none;
    width: 100%;
    text-align: left;
    cursor: pointer;
    outline: none;
    font-family: 'Montserrat', sans-serif;
}

.sidenav a:hover
{
    transition: 200ms;
    color: #fff;
}

.fa-caret-down{font-size: 20px !important;color: #fff !important;float: right;}

/* When you mouse over the navigation links, change their color */

.active{background-color: none;}



#bg
{
  display:none;
  width: 100vw;
  height: 100vh;
  position: absolute;
      z-index: 9987;
  background-color: rgba(8, 8, 8, 0.54);
}

#bg.active
{
    display: block;
    position: fixed;
}
/* toggle ends */




/*DROP DOWN  */
.drop:hover > .sub {display: block !important;}


.drop { position: relative; }
.sub {
  background-color: #a00505;
display: none;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 99999999999999999;
  position: absolute;
    top: 115%;
  left: 0;
  width: 357px;
  padding-left: 0 !important;
}

.drop a {padding-bottom: 21px;}

/* Links inside the dropdown */
.sub li a {
  color: #fff !important;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  list-style-type: none;
}

.sub li {

  text-decoration: none;
  width: 100% !important;
  list-style-type: none;
  padding-bottom: 0 !important;

}

.sub li:hover
{
    transition: 300ms;
    background: #830404;
}

/* Change color of dropdown links on hover */


/* sidenav dropdown */
.sidenav .dropdown-btn {

  text-decoration: none;
  font-size: 15px;
  color: #fff;
  display: block;
  border: none;
  background: none;
  width:100%;
  text-align: left;
  cursor: pointer;
  outline: none;
  padding-left: 20px;
}

.dropdown-container a
{
    padding-top: 10px !important;
    padding-bottom: 10px !important;
    margin-bottom: 10px !important;
}

/* On mouse-over */
 .dropdown-btn:hover {
     transition: 200ms;
     color: #fff;
}


/* Main content */


/* Add an active class to the active dropdown button */


/* 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: #646464;
  padding-left: 8px;
}

/* Optional: Style the caret down icon */
.fa-caret-down {
  float: right;
  padding-right: 8px;
}


/* navbar media queries */


@media only screen and (max-width: 1382px)
{
    .navbar-inner{width: 98%;}

}


@media only screen and (max-width: 1124px)
{
    .navbar-menu{padding: 27px 10px 18px;}
    .navbar-menu ul
   {
       display: none;
   }

   #toggle
   {
       visibility: visible;
       opacity: 1;
       position: revert;
       top: 0;
       left: 0;
   }


}


/* NAVBAR STYLES ENDS*/

/* BANNER STYLE STARTS HERE */
.banner{}
.banner-wrapper{
        display: grid ;
        grid-template-columns: 45% 55%;
        gap: 1em;
        width: 80%;
        margin: 0 auto;
        position: relative;
}

.banner-col1{ position: relative;padding-left: 3em;padding-top: 8em;}
.bl-layer1{position: absolute;top: 0;z-index: 99;}

.banner-col2{ padding-top: 1em;}
.bl-layer1 {
    position: absolute;
    top: 20px;
}

.banner-wrapper h1{
    font-size: 60px;
    font-weight: 700;
    width: 63%;
    line-height: 65px;
    margin-bottom: 34px;
}
.banner-wrapper p{    
    font-size: 16px;
    width: 88%;
    margin-bottom: 5em;
}

/* BANNER STYLE ENDS HERE  */

/* HOME SECTION1 STARTS HERE  */
.home-section1{padding-top: 5em;padding-bottom: 7em;}
.home-section1-wrapper{
    display: grid;
    grid-template-columns: 1fr 1fr;
    width: 76%;
    margin: 0 auto;
    align-items: center;
}
.home-section1-col1{}
.home-section1-col2{ padding-left: 5em;}
.home-section1-col2 p{margin-bottom: 56px }

.introtxt{color: #7d1515;font-size: 18px;font-weight: 700;margin-bottom: 0 !important;padding: 0 !important;}


/*---- HOME SECTION 2 STARTS HERE   ---- */

.home-section2{
    background-color: #f2f2f2;
    border-radius: 352px 0px 0px 0px;
}

.home-section2-wrapper{
    display: grid;
    grid-template-columns: 1fr;
    width: 75%;
    margin: 0 auto;
}

.hs2-heading{
    display: grid;
    justify-content: center;
    justify-items: center;
    padding-top: 6em;
    padding-bottom: 3em;

}

.services-section{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3em;
    padding-bottom: 4em;
}

/* Service cards  */
.service-card{
    border-radius: 20px;
    background-color: #fff;
}


.sc-image1{
    background-image: url(../images/communication-services-image.png);
    background-size: cover;
    height: 243px;
    border-radius: 20px;
    background-position-y: -60px;
    background-repeat: no-repeat;
}

.sc-image2{
    background-image: url(../images/brand-service-image.jpeg);
    background-size: cover;
    height: 243px;
    border-radius: 20px;
    background-position: center;
    background-repeat: no-repeat;
}

.sc-image3{
    background-image: url(../images/printing-press-image.jpg);
    background-size: cover;
    height: 243px;
    border-radius: 20px;
    background-position: center;
    background-repeat: no-repeat;
}

.sc-image4{
    background-image: url(../images/woman-giving-speech.jpg);
    background-size: cover;
    height: 243px;
    border-radius: 20px;
    background-position: center;
    /* background-position-y: -60px; */
    background-repeat: no-repeat;
}



.sc-content{
    position: relative;
    padding: 5em 2em 3em 2em;
}

.sc-content h2{text-transform: uppercase;}

.sc-content p{
    margin-bottom: 4em;
}

.sc-content img{
    position: absolute;
    top: -3em;
    filter: drop-shadow(5px 7px 11px #6565651f);
}


/*---- HOME SECTION 2 ENDS HERE   ---- */




/*---- HOME SECTION 3 STARTS HERE   ---- */

.home-section3{
    background-color: #f2f2f2;
    border-radius: 0px 0px 0px 100px;
    padding-bottom: 5em;
}

.home-section3-wrapper{
    display: grid;
    grid-template-columns: 1fr 1fr;
    width: 100%;
    margin: 0 auto;
    padding-top: 8em;
}

.hs3-col1{padding-left: 25%;padding-top: 10em;}
.hs3-col1 p{width: 90%;margin-bottom: 4em;}

.hs3-col2{position: relative;}
.hs3-col2 img{position: absolute;}
/*---- HOME SECTION 3 ENDS HERE   ---- */

/*---- HOME SECTION 4 STARTS HERE   ---- */

.home-section4{
    background-color: #ffffff;

}

.home-section4-wrapper{
    display: grid;
    grid-template-columns: 1fr 1fr;
    width: 75%;
    margin: 0 auto;
    padding-top: 23em;
    padding-bottom: 10em;
}

.hs4-col2{
    padding-left: 4em;
}

.hs4-col2 p{width: 90%;padding-bottom: 2em;}

/*---- HOME SECTION 4 ENDS HERE   ---- */

/*---- HOME SECTION 5 STARTS HERE   ---- */

.home-section5{
    background-color: #ffffff;

}

.home-section5-wrapper{
    display: grid;
    grid-template-columns: 1fr 1fr;
    width: 90%;
    margin: 0 auto;
    padding-bottom: 4em;
}

.hs5-col1 img{
    position: relative;
    z-index: 2;
   
}

.hs5-col2{position: relative;}

.hs5-col2 p{width: 85%;padding-bottom: 4em;}

.hs5-block{
    background-color: #fff;
    box-shadow: 10px 10px 20px #0000001f;
    border-radius: 60px;
    padding-bottom: 4em;
    padding-top: 2em;
    padding-left: 21%;
    position: relative;
    left: -10em;
    top: 8em;
    z-index: 1;
}

.s5-block{
    position: relative;
    right: -24em;
    bottom: 3em;
    z-index: 0;
     filter: drop-shadow(5px 7px 11px #6565651f);
}

/*---- HOME SECTION 5 ENDS HERE   ---- */


/*------- PARALLAX  STARTS HERE -----------*/
.parallax{
    background-image: url(../images/parallax.jpg);
    background-repeat: no-repeat;
    background-attachment: fixed;
}
.parallax-overlay{
        background-image: url(../images/parallax-overlay.png);
        background-position: bottom;
        background-size: cover;
        padding-top: 23em;
        padding-bottom: 10em;
}

.parallax-wrapper{
        width: 75%;
    margin: 0 auto;
    position: relative;
}

.parallax h1{
    font-size: 60px;
    color: #fff;;
    margin-bottom: 1em;
}

.parallax .quote{
        margin: 0;
    font-size: 208px;
    position: absolute;
    color: #ffffff73;
    bottom: -17px;
    left: -81px;  
}

/*------- PARALLAX  ENDS HERE -----------*/


/* ABOUT PAGE  */

/*------------- About section1  */
.about-section1{
    padding-top: 5em;
    padding-bottom: 4em;
}
.about-section1-wrapper{
    display: grid;
    grid-template-columns: 1fr 1fr;
    width: 76%;
    margin: 0 auto;
    align-items: center;
}
.about-section1-col1{}
.about-section1-col2{ padding-left: 5em;}

/*------------- About section2  */

.about-section2{     background-color: #f2f2f2;
    border-radius: 310px 0px 284px 0px;
    margin-bottom: 5em;}
.about-section2-wrapper{
    display: grid;
    grid-template-columns: 1fr;
    width: 76%;
    margin: 0 auto;
    align-items: center;
    padding-top: 5em;
    padding-bottom: 5em;
}

.about-s2-row1{    
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1em;}

.as2-col{ display: grid;grid-template-columns: 1fr;    gap: 1em;}
.as2-col .icon-split{    
    display: grid;
    grid-template-columns: 65px 1fr;
    gap: 1em;
    align-items: center;
    align-content: center;
}
.as2-col .icon-split h2{margin: 0 !important;}
.as2-col p{width: 82%;}

.about-s2-row2{
    background-image: url("../images/about-section2-bg.jpg");
    background-position: top left;
    background-size: cover;
    padding: 2em;
    border-radius: 15px;
}

.about-s2-row2 h2{color: #fff;}

.about-s2-row2 p{color: #fff;    width: 61%;}
.about-s2-row2 ul{
    display: grid;
    grid-template-columns: auto auto;
    grid-column-gap: 6em;
    width: 90%;
    margin-top: 3em;
    margin-bottom: 3em;

}
.about-s2-row2 ul li{color: #fff;}

.textbold{font-weight: bold;font-size: 22px;}

/*------------- About section 3  */

.about-section3{}
.about-section3-wrapper{
    display: grid;
    grid-template-columns: 1fr;
    width: 90%;
    margin: 0 auto;
}

.as3-row1{
    display: grid;
    justify-content: center;
    text-align: center;
    margin-bottom: 2em;
}
.as3-row2{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    gap: 1em;
    margin-bottom: 4em;
}

/* service card  */
.service-card-mini{
    display: grid;
    justify-items: start;
    align-content: space-evenly;
    border-radius: 45px;
    padding: 1em;
    padding-top: 13em;
    padding-left: 28px;
    padding-bottom: 3em;
}

.service-card-mini h3{color: #ffff;
    font-size: 20px;
    margin: 0;
    font-weight: 600;}

.service-card-mini p{   
     color: #fff;
    margin: 0;
    font-size: 14px;
    line-height: 23px;
        margin-bottom: 1em;
}

.service-card-mini .primary-btn{font-size: 13px !important;    }

.sc1{
    background-image: url("../images/sc1-image.jpg");
    background-position: left;
    background-size: cover;
}

.sc2{
    background-image: url("../images/sc2-image.jpg");
    background-position: center;
    background-size: cover;
}

.sc3{
    background-image: url("../images/sc3-image.jpg");
    background-position: center;
    background-size: cover;
}

.sc4{
    background-image: url("../images/sc4-image.jpg");
    background-position: center;
    background-size: cover;
}



/* SERVICE PAGE ----------------- */

.service-section1{position: relative;}
.service-section1-wrapper{
    display: grid;
    grid-template-columns: 1fr;
    width: 76%;
    margin: 0 auto;
    padding-top: 3em;
}

/* service banner  */
.service-banner{
    position: relative;
    min-height: 350px;
    border-radius: 22px;
}

.service-banner img{
    left: 2em;
    bottom: -56px;
    position: absolute;
    filter: drop-shadow(5px 7px 11px #6565651f);
}

.sb-1{
    background-image: url("../images/communication-services-image.png");
    background-position: top;
    background-size: cover;
    background-position-y: -11em;
    background-repeat: no-repeat;
}

.sb-2{
    background-image: url("../images/brand-service-image.jpeg");
    background-position: top;
    background-size: cover;
   background-position: center;
    background-repeat: no-repeat;
}

.sb-3{
    background-image: url("../images/printing-press-image.jpg");
    background-position: top;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.sb-4{
    background-image: url("../images/woman-giving-speech.jpg");
    background-position: top;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

/* Service section 2  */
.service-section2{padding-top: 3em;}
.service-section2-wrapper{
    display: grid;
    grid-template-columns: 1fr;
    width: 76%;
    margin: 0 auto;
    padding-top: 3em;
    padding-bottom: 3em;
}

.service-section2-wrapper p{width: 70%;}

/* Service section3  */
.service-section3{
    background-color: #f2f2f2;
    border-radius: 310px 0px 284px 0px;
    margin-bottom: 5em;
}

.service-section3-wrapper{
    width: 76%;
    margin: 0 auto;
    padding-top: 4em;
    padding-bottom: 4em;
}

.service-section3-wrapper ul{margin-bottom: 2em;}
.service-section3-wrapper  p{width: 70%;}



/* FOOTER START HERE  */

footer{
    background-color: #030302;;
    color: #fff;
    padding-top: 2em;
}

footer h4{font-size: 19px;text-transform: uppercase;color: #fff;font-weight: bold;margin-bottom: 1em;}
footer p{font-size: 14px;color: #fff;}
.footer-wrapper{
    display: grid;
    grid-template-columns: 33% auto auto auto auto;
    grid-gap: 1em;
    width: 75%;
    margin: 0 auto;
    margin-bottom: 2em;
}

/* footer col1  */
.footer-col1{
    display: grid;
    align-items: center;
}

.footer-col1 img{margin-bottom: 1em;width: 90%;}

/* footer col2  */
.footer-col2 p{width: 80%;}
.footer-col2{}
.footer-col2 ul li{margin-bottom: 15px;}
.footer-col2 ul li a{font-size: 14px;color: #fff;}
.footer-col2 ul li a:hover{color: #a00505;}

/* footer col3 */
.footer-col3{}
.footer-col3 ul li{margin-bottom: 15px;}
.footer-col3 ul li a{font-size: 14px;color: #fff;}
.footer-col3 ul li a:hover{color: #a00505;}

/* footer col4 */






.footer-cta{
    position: relative;
    top: 1em;
    padding: 10px 25px;
    border-radius: 11px;
    background-color: #f9b15f;
    font-weight: 600;
}

.footer-cta:hover{
    background-color: #1e6e9b ;
    color: #fff;
    transition: 300ms ease-in-out;
}

/* coptright  */
.copyright{background-color: #161414;text-align: center;padding: 10px;}
.copyright p{color: #fff;font-size: 12px;margin-bottom: 0;} 
/* FOOTER SECTION ENDS HERE  */

/* FOOTER ENDS HERE  */



/* Style the buttons that are used to open and close the accordion panel */
.accordion {
    background-color:  #750303;
    color: #ffffff;
    cursor: pointer;
    padding: 9px 22px;
    width: 100%;
    text-align: left;
    border: none;
    outline: none;
    transition: 0.4s;
    border-radius: 12px;
    font-size: 19px;
    font-weight: 300;
    display: flex;
    align-content: center;
    align-items: center;
    justify-content: space-between;
    font-family: "Figtree", sans-serif;
    width: 80%;
  }
  
  /* Add a background color to the button if it is clicked on (add the .active class with JS), and when you move the mouse over it (hover) */
  .active, .accordion:hover {
    background-color: #a00505 ;
  }
  
  .accordion:after {
    content: '+';
    font-size: 33px;
    color: #fff;
    float: right;
    margin-left: 5px;
  }
  
  .active:after {
    content: "-"; /* Unicode character for "minus" sign (-) */
  }
  /* Style the accordion panel. Note: hidden by default */
  .panel {

    background-color: white;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.2s ease-out;


    box-shadow: 1px 30px 67px #0301012b;
    border-radius: 0px 0px 20px 20px;
    margin-bottom: 2em;
    width: 80%;
  }
  .panel p{
    font-size: 16px;
    text-align: left;
    padding-top: 1em;
    padding-bottom: 1em;
    padding-right: 1em;
    padding-left: 1em;
    margin: 0;
  }

  .panel .list{margin-left: 2em;}
  .panel .list li{
    font-size: 16px;

  }


/* Media Queries starts here !!!!!!!!!!!!!!------------------------------------ */


@media only screen and (max-width: 1755px){
/* home section 5  */
.s5-block {
    position: relative;
    right: -18em;
    bottom: 4em;}


}

@media only screen and (max-width: 1700px){

    /* Home section3  */
    .hs3-col2 img {
        position: absolute;
        top: 6em;
    }

}


@media only screen and (max-width: 1624px) {
    /* Home section 5  */
    .hs5-block{    top: 5em;}
}

@media only screen and (max-width: 1583px) {

    /* Navigation  */
    .lastmenu-item {margin-right: 27px !important;}

}

@media only screen and (max-width: 1499px) {
    /* Home section3  */
    .home-section3-wrapper{    padding-top: 0em;}
    .hs3-col2 img {position: absolute;top: 11em;}

}

@media only screen and (max-width: 1440px) {

    /* Banner  */
    .banner-col1 {
        position: relative;
        padding-left: 0em;
        padding-top: 3em;
    }

    /* Home section 5  */
    .home-section5-wrapper{ width: 99%;}

        .s5-block {
        position: relative;
        right: -13em;
        bottom: 7em;
    }

    /* Parallax  */
    .parallax{background-position: bottom;}
    .parallax-overlay{padding-top: 16em;padding-bottom: 10em;}
    .parallax .quote{font-size: 172px;bottom: -17px;left: -72px;}
    .parallax h1 {font-size: 40px;}

    /* Footer  */
    .footer-wrapper{    width: 96%;    grid-template-columns: 30% auto auto auto auto;}
}

@media only screen and (max-width: 1355px){
    /* Home section3  */
        .hs3-col2 img {
        position: absolute;
        top: 15em;
    }
}

@media only screen and (max-width: 1240px) {

/* Banner  */
.banner-wrapper {
    grid-template-columns: 50% 50%;
    width: 92%;
}

.banner-wrapper h1 {font-size: 40px;line-height: 59px;}
.banner-wrapper p {width: 90%;}

/* Home section1  */
.home-section1 { padding-top: 7em;}
.home-section1-wrapper {grid-template-columns: 40% 60%;width: 90%;}

/* Service card  */
.sc-content h2{font-size: 25px;}
.services-section {
    display: grid;
    grid-template-columns: 100%;
    gap: 2em;}

    /* Home section3  */

    .hs3-col2 img {
        position: absolute;
        top: 78px;
    }
    .hs3-col1 {
    padding-left: 9%;
    padding-top: 4em;
}

/* Home section 4  */
.home-section4-wrapper{padding-top: 9em;    grid-template-columns: 40% 60%;width: 95%;}

/* Home section 5  */
.home-section5-wrapper {grid-template-columns: 40% 60%;}
.hs5-block{    width: 115%;padding-left: 26%}

/* About page  */
.about-section2{    border-radius: 178px 0px 178px 0px;}
.about-s2-row2 ul{grid-template-columns: 1fr;}
.as3-row2{    grid-template-columns: 1fr 1fr;}

/* Service pages  */
.service-section3{    border-radius: 178px 0px 178px 0px;}

}


@media only screen and (max-width: 1024px)
{

     /* global  */
        h1{font-size: 35px;}

    /* Banner  */
    .banner-wrapper h1{font-size: 35px; width: 100%;}
    .banner-wrapper p {width: 95%;}

    /* Parallax  */
    .parallax{background-attachment: unset;background-size: cover;        background-position: center;}

    /* About page  */
    .about-s2-row1{    grid-template-columns: 100%;}
    .as2-col p {width: 97%;}
    .about-s2-row2 p {
    color: #fff;
    width: 94%;
    }

    /* Service page  */
.sb-1{ background-position-y: 0;}
.service-section2-wrapper p {
    width: 94%;
}
.service-section3-wrapper p {
    width: 94%;
}

.service-banner {
    position: relative;
    min-height: 230px;}

}

@media only screen and (max-width: 960px)
{

/* Home section3  */
.home-section3{    padding-bottom: 0;}
.home-section3-wrapper {grid-template-columns: 100%;        gap: 5em;}
    .hs3-col1 {
        padding-left: 5%;}
    .hs3-col2 img {
        position: relative;
        top: 0;
    }

    /* Home section 5  */
        .home-section5-wrapper {
        grid-template-columns: 100%;
        padding-bottom: 0em;
    }

    .hs5-block{
                width: 90%;
                        padding-left: 0;
        margin: 0 auto;
                top: 0;
                box-shadow: none;
                left: 0;
    }

    .hs5-col2 p {
    width: 92%;
    padding-bottom: 2em;
}

.s5-block{display: none;}

/* Footer  */
.footer-wrapper{        grid-template-columns: 100%;}
.footer-col4 .primary-btn{display: block;text-align: center;        width: fit-content;        margin-bottom: 3em;}

/* About page  */
.as3-row2{    grid-template-columns: 1fr;}


}


@media only screen and (max-width: 851px)
{

    /* Banner  */
        .banner-wrapper {grid-template-columns: 100%;}
        .banner-col1{grid-row: 2;}
}


@media only screen and (max-width: 768px)
{
/* Global  */
h1{font-size: 31px;}

/* Home section1  */
    .home-section1-wrapper {grid-template-columns: 100%;gap: 2em;}
    .home-section1-col2 {padding-left: 0em;}
    
    .home-section1-col1 img{width: 75%;}

    /* Home section2  */
    .home-section2{    border-radius: 142px 0px 0px 0px;}

    /* Service cards  */
    .sc-image1{background-position: center;}

    /* home section 4  */
        .home-section4-wrapper {
        padding-top: 4em;
        grid-template-columns: 100%;
        gap: 3em;
        width: 90%;
        margin: 0 auto;
        padding-left: 1em;
        padding-right: 1em;
    }

    .hs4-col1 img{width: 75%;}

    .hs4-col2 {
    padding-left: 0em;}

    /* About page  */
    .about-section1-wrapper{    grid-template-columns: 100%;}
    .about-section1-col2{display: none;}

    .about-section2 {border-radius: 120px 0px 120px 0px;}

    /* Service page  */
    .service-section3{border-radius: 120px 0px 120px 0px;}

    /* FAQ  */
    .accordion{width: 98%;}
    .panel{width: 98%;}

    /* Contact page  */
    .about-section2-wrapper form{    width: 98%;}

}

@media only screen and (max-width: 600px)
{

    /* Main container  */
    .main-container{ padding-top: 66px;}

    /* Home section 2  */
    .home-section2-wrapper{ width: 91%;}
}

@media only screen and (max-width: 500px)
{

    /* Global  */
    p{line-height: 26px;letter-spacing: 0px;}
    /* navigation  */
    .navbar-menu {padding: 17px 10px 18px; }
    .navbar-logo img{width: 80%;}

    /* Banner  */
    .banner-wrapper{margin: 0;padding-left: 1em;padding-right: 1em;width: 100%;}
    .banner-wrapper h1{    margin-bottom: 1px;}
    .banner-wrapper p{    margin-bottom: 3em;width: 100%;}
    .banner-col1{padding-top: 0em;}
    .banner-col2 {padding-right: 1em;}

    .banner .primary-btn{display: block;
        width: fit-content;
        margin-bottom: 3em;}
    .banner .secondary-btn{padding: 17px 75px;}

    /* Home section1  */
    .home-section1-wrapper{margin: 0;padding-left: 1em;padding-right: 1em;width: 100%;}

    /* Home section2  */
    .home-section2-wrapper{margin: 0;padding-left: 1em;padding-right: 1em;width: 100%;}

    /* Home section 4  */
    .home-section4-wrapper {padding-left: 1em;padding-right: 1em;width: 100%;gap: 1em;}

    /* Parallax  */
    .parallax .quote{bottom: 29px;left: -37px;}

    /* Service [age ] */
    .service-banner img{    left: 0em;    width: 30%;}

    .service-card-mini .primary-btn{width: 100%;text-align: center;}
}

@media only screen and (max-width: 375px)
{
    /* Banner  */
        .banner-wrapper h1 {
        margin-bottom: 16px;
         line-height: 40px;
    }
}