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

 

}   


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

    header .navbar .navbar-nav .nav-item { margin-top: 15px; }
    header .navbar .navbar-nav .nav-item .nav-link{ padding: 0 !important; }
    .SmootherArea .SmootherBox .SmootherHead{ top: 0; }
    .SmootherArea .SmootherBox .SmootherHead h2 { font-size: 40px; line-height: 65px;}
    .DirectorArea:before{ content: none; }
    .DirectorArea .col-sm-7,
    .DirectorArea .col-sm-5{flex: 0 0 100%; max-width: 100%;}
    .DirectorRight{ margin: 0; background: #A61B36; padding: 20px; border-radius: 10px; }

}

@media screen and (max-width: 992px) and (min-width: 768px) {

    .container{ max-width: 95%; }
    .ServicesArea .ServicesRight figure { width: 40%; left: 30%;}
    .ServicesArea .ServicesRight figcaption { width: 50%;}
    .Footer .FooterLink .Foot p{ margin: 0; }
    .AccoladesBox{ padding: 15px; }

}
 
@media screen and (max-width: 768px){ 

    header{ position: relative; top: auto; }
    header .navbar{ padding: 10px 0; }
    .StoryArea .col-sm-6 { -ms-flex: 0 0 50%; flex: 0 0 100%; max-width: 100%;}
    .StoryArea .StoryLeft{ margin-bottom: 20px; }
    .CounterArea .row .col{width: 33.33%; flex-basis: auto;}
    .ServicesArea .col-sm-6{ max-width: 100%;  flex: 0 0 100% }
    .ServicesArea .ServicesLeft .ServiceTabImages{ display: block; }
    .ServicesArea .ServicesRight{ display: none; }
    .ServicesArea .owl-carousel .owl-nav{ margin: 0; }

    .FamilyRight{ position: relative; width: 100%; background-color: #A61B36; padding: 15px; border-radius: 10px; margin-top: 20px; }
    .FamilyRight:after{ content: none; }
    .FamilyRight:before{height: 250px; width: 100%; top: -150px; left: 0;}
    .FamilyArea .FamilyRight .owl-dots{ bottom: 0; }
    .FamilyRight .item{ display: block; } 
    .FamilyBox{ display: block; }
    .FamilyBox figure{ margin: auto; }
    .FamilyBox figcaption{ width: 100%; padding: 10px; }

    .Footer .FooterLink .Foot{ margin-bottom: 20px; }
    .Footer .FooterLink .Foot p{margin: 0 0 10px 0;font-size: 14px;line-height: 26px;}
    .Footer .Copyright p{ text-align: center; margin-bottom: 10px; }
    .Footer .Copyright ul { text-align: center;}

    .SmootherArea .SmootherBox .SmootherHead h2 { font-size: 32px; line-height: 50px;}

    .ServiceArea .col-sm-4{flex: 0 0 50%; max-width: 50%;}
    .ClientArea .col-sm-3{flex: 0 0 33.33%; max-width: 33.33%;}
    .AccoladesArea .col-sm-4{flex: 0 0 50%; max-width: 50%;}

    #serviceSlider2{ display: block; }
    #serviceSlider{ display: none; }

    #serviceSlider2 .serviceBox figure{ display: none;  }

    .DirectorArea.DesktopDirector{ display:none;  }
    .DirectorArea.MobileDirector{ display:block; padding:30px 0  }

    .DirectorArea.MobileDirector h2{ margin-bottom:40px }

} 

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

    .ServicesArea .ServicesLeft .ServiceTabImages figure{ width: 50%; left: 10%; top: 6%; }
    .ServicesArea .ServicesLeft .ServiceTabImages figcaption{ width: 50%; }
    .FootprintsArea .FootprintsLeft ul li .ToolTipBox .ToolTip{ left: -70px; }
    .Footer .FooterLink .row .col:first-child,
    .Footer .FooterLink .row .col:last-child{width: 100%; flex-basis: auto; max-width: 100%;}
    .Footer .FooterLink .row .col{flex: 0 0 33.33%; max-width: 33.33%;}
    .TendersBreadArea aside{ top: 30%; }
}

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

    .SliderArea .carousel-item .Caption {  top: 85px; left: 0;  width: 100%; padding: 0 15px;}
    .SliderArea .carousel-item .Caption h3 { font-size: 22px; margin: 0 0 15px 0; line-height: 40px;  }
    .SliderArea .carousel-item .Caption a {  padding: 10px 30px;  font-size: 14px; display: inline-block;}
    .SliderArea .Controls button img{ width: 35px; }
    .SliderArea .carousel-indicators { bottom: 20px;}
    
    .CounterArea .row .col{width: 50%; flex-basis: auto;}
    /*.CounterArea .CounterBox:after{ right: auto; bottom: 0; height: 1px; width: 100%; left: 0; top: auto;}*/
    
    .FootprintsArea .FootprintsLeft{ margin-top: 30px; }
    .FootprintsArea .FootprintsLeft ul li .ToolTipBox .ToolTip{ left: -70px; }
    
    .GlimpsesArea .GlimpsesBox{ margin-bottom: 20px; }
    .Footer .FooterLink .row .col{width: 100%; flex-basis: auto;}
    
    .SmootherArea .SmootherBox .SmootherHead{ position: relative; } 
    .SmootherArea .SmootherBox .SmootherHead h2 br{ display: none; }
    /*.SmootherArea .SmootherBox ul{ display: block; }*/
    .SmootherArea .SmootherBox ul li{ margin:0 0 15px 0 ; }

    .ServiceArea .col-sm-4{flex: 0 0 100%; max-width: 100%;}
    .ClientArea .col-sm-3{flex: 0 0 50%; max-width: 50%;} 
    .AccoladesArea .col-sm-4{flex: 0 0 50%; max-width: 50%;}

    .TendersArea .TendersHead{ display: block; margin:0 0 20px 0; }
    .TendersArea .TendersHead .form-group{ width: 100% !important; margin: 0 0 15px 0; }

    .TendersBreadArea aside{width: 100%; transform: translate(-50%, -50%); top: 50%; left: 50%; }
    .TendersBreadArea aside h4{ font-size: 24px; line-height: 35px; margin: 0; } 

    .StoryArea{ padding: 40px 0; }
    .FamilyArea{ padding: 0; }
    .GlimpsesArea{ padding: 50px 0 0; }

    .GlimpsesArea h2,
    .StoryArea .StoryLeft h2,
    .ServicesArea h2,
    .FootprintsArea .FootprintsRight h2,
    .FamilyArea .FamilyLeft h2,
    .ClientArea h2,
    .AboutArea h2,
    .VentureArea h2,
    .StandArea h2,
    .DirectorArea h2,
    .AccoladesArea h2{ font-size: 20px; margin: 0 0 20px 0; text-align: center; }

    .GlimpsesArea h2 span,
    .StoryArea .StoryLeft h2 span,
    .ServicesArea h2 span,
    .FootprintsArea .FootprintsRight h2 span,
    .FamilyArea .FamilyLeft h2 span,
    .ClientArea h2 span,
    .AboutArea h2 span,
    .VentureArea h2 span,
    .StandArea h2 span,
    .DirectorArea h2 span,
    .AccoladesArea h2 span{ width: 35px; margin: 0 10px 0 0;}

    .StandArea h2,
    .VentureArea h2,
    .DirectorArea h2{ margin: 0 0 20px 0; } 

    .CounterArea{ padding: 25px 0; margin: 0; }
    .CounterArea .CounterBox h3{font-size: 20px; font-weight: 700;}
    .CounterArea .CounterBox p{ font-size: 13px; }

    .SliderArea .Controls{ display: none; }

    .ClientArea { padding: 20px 0 10px 0;}
    .ClientArea .ClientHead{ margin: 0; }

    .VentureArea h2:before,
    .VentureArea h2:after,
    .StandArea h2:before,
    .StandArea h2:after,
    .DirectorArea h2:before,
    .DirectorArea h2:after{ content: none; }

    .SliderArea .carousel-fade .carousel-item{height: 350px; min-height: inherit; }
    .SliderArea .carousel-fade .carousel-item img{ display: none; }

    .AccoladesBox{ padding: 15px; }
    .AccoladesBox figure{ margin: 0 0 15px 0; }
    .AccoladesBox figcaption h5 { font-size: 15px; line-height: 24px;}


    .OpeningArea .OpeningBody .card .OpeningBox .Apply{ padding: 10px 40px; }
    .SmootherArea { padding: 0px 0 10px;}
    .AboutArea { padding: 30px 0;}

    .Footer .FooterLink .row .col:first-child{width: 100%; flex-basis: auto; max-width: 100%;}
    /*.Footer .FooterLink .row .col:last-child{width: 100%; flex-basis: auto; max-width: 100%;}*/
    .Footer .FooterLink .row .col{flex: 0 0 50%; max-width: 50%;}

    .DirectorArea .DirectorLeft .nav-tabs .nav-item{ padding: 0 15px 0; width: 50%; }
    .DirectorArea .DirectorLeft .nav-tabs .nav-item .nav-link:after,
    .DirectorArea .DirectorLeft .nav-tabs .nav-item .nav-link:before{ width: 50px; height: 50px;  }

    .ServiceArea .ServiceHead aside{ width: 100%; padding: 0 10px; }
    .ServiceArea .ServiceHead aside h4{font-size: 22px; margin: 0; }
    .ServiceArea .ServiceHead aside p { font-size: 14px; line-height: 23px;}

    .FootprintsArea .FootprintsRight ul li figure span{ padding: 10px; font-size: 14px; word-break: break-all; }

    .OpeningArea .OpeningBody .card .card-header{ padding: 10px; }
    .OpeningArea .OpeningBody .card .card-header h5{ font-size: 18px; }
    .OpeningArea .OpeningBody .card .card-header:after{ width: 25px; height: 25px; font-size: 16px; line-height: 25px; top: 8px;}

}


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

    .TendersBreadArea aside h4{ margin: 0; font-size: 20px;line-height: 30px; }
    .OpeningArea .OpeningBody .card .card-header h5 span{ margin: 0; }
    .OpeningArea .OpeningHead form{ max-width: 100%; }
    .ContactArea .ContactBody .ContactRight { padding: 30px 30px;}
    .TendersBreadArea aside p { font-size: 13px; line-height: 22px;}
    .SmootherArea .SmootherBox .SmootherHead h2 { font-size: 22px; line-height: 40px;}
    .ServiceArea .ServiceHead aside h4{font-size: 20px; margin: 0; }
    .ServiceArea .ServiceHead aside p { font-size: 13px; line-height: 20px;}
    .TendorBox h4{ display: block; }
    .TendorBox h4 a.Download{ position: relative; margin-top: 15px; text-align: center; right: auto; display: inline-block;}
  

}