@media (max-width: 576px) { 
    /* Modal */
    .carousel-controls{
        display: flex;
    }
    .carousel-wrapper {
        width: 180px;
        height: 240px;
    }

    .carousel-images {
        height: 180px;
    }

    .carousel-btn {
        display: none;
        font-size: 14px;
        padding: 5px;
    }

    .nav-links ul li {
        display: block;
    }

    .xmark-div {
        margin: 7px;
    }

    .modal-con {
        padding: 7px;
    }

    .nav-links {
        position: absolute;
        background: rgba(247, 230, 230, 0.808);
        height: 100vh;
        width: 300px;
        top: 0;
        right: -600px;
        text-align: center;
        z-index: 3;
    }

    .nav-links ul li a {
        width: fit-content;
    }

    .nav-links ul {
        padding: 30px;
        font-size: 25px;
        display: flex;
        flex-direction: column;
    }

    .content button {
        background-color: rgb(247, 119, 0);
        color: #fff;
        font-size: 20px;
        padding: 15px 30px;
        cursor: pointer;
        border: none;
    }

    .content h1 {
        font-size: 55px;
        line-height: 45px;
    }

    .content h2 {
        font-size: 25px;
    }

    .content span {
        font-size: 35px;
    }

    .content button a{
        font-size: 20px;
    }

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

    .about-con {
        padding: 40px 50px 0 50px;
        text-align: center;
    }

    .con-1 .our-com {
        width: 350px;
    }

    .con-1 {
        display: flex;
        flex-wrap: wrap;
        margin: 20px;
    }

    .con-1 .our-com img{
        height: 150px;
        width: 150px;
        border-radius: 5px;
        margin-bottom: 20px;
    }

    .bg h2 {
        text-align: center;
        width: 100%;
        padding-bottom: 30px;
    }

    .our-com {
        width: 400px;
    }

    .our-all .o-mission, .our-all .o-vission, .our-all .o-value {
        width: 270px;
        padding: 10px 15px;
    }




    .col-2_con {
        margin: 0;
    }

    .about-con {
        padding: 50px 40px 0 40px;
    }

    .col-2 h2{
        font-size: 30px;
        text-align: start;
        margin-bottom: 10px;
        margin: 0;
    }

    .col-2_con li{
        padding: 5px 0px 0 0px;
    }

    .col-2_con h3{
        margin-top: 20px;
    }

    #services {
        padding: 50px 40px;
    }

    .gallery-con p{
        text-align: center;
    }
    
    .gallery-con h1{
        text-align: center;
    }

    
    /* ==== Gallery ===== */

    .modal-con {
        display: flex;
        flex-direction: column;
    }

    .close-btn {
        padding: 10px 10px;
    }

    .col-1 button {
        display: block;
        margin: 20px auto 0;
    }

    /* ==== Contact ===== */

    .about-con {
        padding: 40px 40px 0 40px;
        text-align: center;
    }

    .contact-con {
        display: block;
        align-items: center;
        justify-content: center;
    }

    .map {
    width: 300px;
    }
  
    .map iframe {
        width: 300px;
        height: 370px;
    }


    /* ==== Footer ===== */
    .footer {
        margin-top: 200px;
    }
    .con-footer {
      display: flex;
      flex-direction: column;
      gap: 20px;
    }
  
    .con-footer2 {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
    }
    .con-footer2 span {
      display: none;
    }
  
    .support1{
      text-align: center;
    }

    .certifications {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: center;
        margin: 100px 20px;
    }
 }


@media (max-width: 768px) { 
    /* Modal */
    .carousel-controls{
        display: flex;
    }
    .carousel-wrapper {
        width: 220px;
        height: 280px;
    }

    .carousel-images {
        height: 220px;
    }

    .carousel-btn {
        display: none;
        font-size: 16px;
        padding: 6px;
    }

    .nav-links ul li {
        display: block;
    }

    .nav-links {
        position: absolute;
        background: #CC0101;
        height: 100vh;
        width: 300px;
        top: 0;
        right: -600px;
        text-align: center;
        z-index: 3;
    }

    nav .fa-solid {
        display: block;
        color: #CC0101;
        margin: 10px;
        font-size: 25px;
        cursor: pointer;
    }

    nav .fa-solid.xmark {
        display: block;
        color: #fff;
        margin: 10px;
        font-size: 25px;
        padding-left: 20px;
        padding-top: 20px;
        text-align: start;
        cursor: pointer;
    }

    .nav-links ul {
        padding: 30px;
        font-size: 25px;
        display: flex;
        flex-direction: column;
    }

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

     .con-1 {
        display: flex;
        flex-wrap: wrap;
    }

    .bg h2 {
        text-align: center;
        width: 100%;
        padding-bottom: 30px;
    }

    .our-com {
        width: 400px;
    }

    .o-mission, .o-vission, .o-value {
        width: 300px;
    }

    /* ==== Gallery ===== */

    .modal-con {
        display: flex;
        flex-direction: column;
    }

    .close-btn {
        padding: 10px 10px;
    }

    .col-1 button {
        display: block;
        margin: 20px auto 0;
    }


    /* ==== About ===== */

    .about-con {
        padding: 40px 40px 0 40px;
        text-align: center;
    }

    .con-1 {
        display: flex;
        flex-wrap: wrap;
    }

    .our-com {
        width: 400px;
    }

    .our-com img{
        height: 200px;
        width: 200px;
        border-radius: 5px;
        margin-bottom: 20px;
    }

    .o-mission, .o-vission, .o-value {
        width: 400px;
    }


    /* ==== Contact ===== */

    .contact-con {
        display: block;
        align-items: center;
        justify-content: center;
    }

    .map {
        width: 300px;
        display: flex;
        justify-content: center;
        margin-top: 50px;
    }

    #contact {
        align-items: center;
    }
  
    .map iframe {
        width: 300px;
        height: 370px;
    }


 }


@media (max-width: 992px) { 
    /* Modal */
    .carousel-controls{
        display: flex;
    }

    .carousel-wrapper {
        width: 250px;
        height: 300px;
    }

    .carousel-images {
        height: 250px;
    }

    .carousel-btn {
        display: none;
        font-size: 18px;
        padding: 8px;
    }

    .nav-links ul li {
        display: block;
    }

    .nav-links {
        position: absolute;
        background: #CC0101;
        height: 100vh;
        width: 300px;
        top: 0;
        right: -600px;
        text-align: center;
        z-index: 3;
    }

    nav .fa-solid {
        display: block;
        color: #CC0101;
        margin: 10px;
        font-size: 25px;
        cursor: pointer;
    }

    nav .fa-solid.xmark {
        display: block;
        color: #fff;
        margin: 10px;
        font-size: 25px;
        padding-left: 20px;
        padding-top: 20px;
        text-align: start;
        cursor: pointer;
    }

    .nav-links ul {
        padding: 30px;
        font-size: 25px;
        display: flex;
        flex-direction: column;
    }

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

     .con-1 {
        display: flex;
        flex-wrap: wrap;
    }

    .bg h2 {
        text-align: center;
        width: 100%;
        padding-bottom: 30px;
    }

    .our-com {
        width: 550px;
    }

    .o-mission, .o-vission, .o-value {
        width: 400px;
    }

    /* ==== Gallery ===== */

    .modal-con {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .close-btn {
        padding: 10px 10px;
    }

    

    .col-1 button {
        display: block;
        margin: 20px auto 0;
    }


    /* ==== Contact ===== */

    .contact-con {
        display: block;
        align-items: center;
        justify-content: center;
    }

    .map {
        width: 300px;
        display: flex;
        justify-content: center;
        margin-top: 50px;
    }

    #contact {
        align-items: center;
    }
  
    .map iframe {
        width: 300px;
        height: 370px;
    }
 }


@media (max-width: 1200px) {  }

@media (max-width: 1400px) {  }