@media screen and (max-width: 1200px){
    .semicircle img{
        position: relative;
        width: 60px;
        right: -60px;
        top: -95px;
    }}    

/* media query for tablet size */
@media screen and (max-width: 900px){
   
    .hamburger{
        display: block;
        z-index: 98;
    
    }
    .hamburger.active .block:nth-child(2){
        opacity: 0;
    }
    .hamburger.active .block:nth-child(1){
        transform: translateY(8px) rotate(45deg);
        background-color: white;
    
    } .hamburger.active .block:nth-child(3){
        transform: translateY(-8px) rotate(-45deg);
        background-color: white;
    }

   
    .navBar-links{
        transform: translateY(-200);
        display: none;
    }
    .navBar-links.active{  display: flex;
        position: fixed;
        flex-direction: column;
        color: black;
        justify-content: flex-start;
        text-align: start;
        background-color: #F3E3CD;
        width: 96%;
        height: 30vh;
        right: 0;
        top: 55px;
        gap: 40px;
        transform: translateY(0);
        transition: all 3s ease;
        
     
    }
    .navBar-links li a{
        font-size: 17px;
        color: black;
        transition: all 0.3s ease;
        width: 100%;

    }
    .navBar-links li a.active{
        color: white;
        border-bottom: none;
    }
     .navBar-links li a:hover{
        color: white;

     }
     .navBar-links li.active{
        background-color: #FA9117;
        padding: 10px;
        color: white;
     }
     .navBar-links li:hover{
        background-color: #FA9117;
        padding: 10px;
     }
    
    .first-section h2{
        font-size: 40px;
    }
    .first-section p{
        font-size: 20px;
        width: 80%;
    }
    .second-segment .flex{
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        flex-wrap: wrap;
    }
    .second-segment .flex .initial-seg p{
        font-size: 24px;
        font-weight: 600;
    }
    .side-text{
        padding: 20px;
        font-size: 23px;
    }
    .grid-section{
        display: grid;
        grid-template-columns: 1fr;
        margin-top: 30px;

    }
    .grid-section .image{
        width:100%;
        order: 1;
        margin:10px 0;
    
    }
    .grid-section .text-area p{
        font-size: 23px;
        width: 100%;
        margin-top: 20px;
    
    }
    .grid-section.switched .text-area {
        margin-left: 0px;
       
    } 
     
     .eclipse-flex{
     flex-wrap: wrap;
     justify-content: center;
     align-items: center;
     /* margin-left: 100px; */
    }
    .circle{
        align-self: center;
    
       
    }
    
    
    .semicircle-text{
        width: 100%;
        margin: 40px 0;
        line-height: 1.9em;
        text-align: start;
        font-size: 20px;
    }
    .semicircle-text h3{
     text-align: center;
    
    }
    .banner-section{
        display: grid;
        grid-template-columns: 1fr;
        place-items: center;
      
    }
    .banner-section .banner-text p{
        font-size: 20px;
        text-align: start;
        margin: 30px 0;
        width: 70%;
     }
     .questions-accordion{
        display: grid;
        grid-template-columns: 1fr;
        grid-gap:40px;
    }
    .footer-segments{
        display: grid;
        grid-template-columns:1fr;
        padding: 10px;
        gap: 20px;
    }
    .footer-submain{
        display: grid;
        grid-template-columns: 1fr;
        gap: 20px;
    }
    .footer-segments .footer-main{
        color: #FFFFFF;
            width: 100%;}
       
    .copyright{
        flex-wrap: wrap;
    }

    /* ABOUT US PAGE */
    .about-hero-page{
        background-color: var(--about-us);
        height: 50vh;
    }
    .about-hero-page .content{
        width: 80%;
        top: 130px;
        
    }
    .section-contained{
        margin-top: 340px;
    
    }

    .about-hero-page .content h2{
        text-align: center;
        font-size: 40px;
        justify-content: center;
        color: #FFFFFF;
    }
    .flex-about-content{
        display: flex;
        flex-wrap: wrap;
    }
    .text-area-about{
        width: 100%;
        font-size: 16px;
        line-height: 1.5em;
    }
    .text-area-about p{
        font-size: 16px; 
        line-height: 2.4em;
    }
    .about-hero-page .content P {
        font-size: 20px;
    }
    .alpha-section .image{
        width: 300px;
     }
    .cream-background-section .content{
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 10px;
    }
    /* services */
    .hero-services{
        height: 40vh;}

        .hero-services h2{
         display: flex;
         align-items: center;
         justify-content: center;
        }
    .first-segment-services .box-container{
        width: 90%;
        gap: 40px;
        padding: 20px;
        margin: 0 auto;
        justify-content: center;
        align-self: center;
        align-items: center;
    }
    .services-info-each{
       flex-wrap: wrap;
       padding:  30px;
        
    }
    .services-info-each .image{
        width: 100%;
        order: 1;
    }
    .services-grid{
       flex-wrap: wrap;
       padding: 40px 40px;

    }
    /* contact us */
    .contact-us-first .text{
        padding: 10px;
    }
    .contact-us-first,
    .white-container{
        display: grid;
        grid-template-columns: 1fr;
        padding: 10px;
        gap: 40px;
    }
    .white-container{
        margin-top: 100px;
        padding-top: 20px;
    }
    .form-container form input{
        width: 500px;
        height: 40px;
       
    }
    .white-container .each-info{
        display: flex;
        text-align: start;
        align-items: center;
        justify-content: flex-start;
        gap: 20px;
        padding-bottom: 10px;
        top: 0px;
        position: relative;
    }
    .form-container textarea{
      
       width: 500px;
    }
    .center-thanks{
        display: grid;
        grid-template-columns: 1,2fr 0.8fr;
        margin: 20px auto;
        text-align: center;
    }
    .center-thanks img{
        width: 100%;
    }
    .center-thanks h2{
        font-size: 40px;
    }
    .center-thanks p{
       margin-top: 20px;
       font-size: 20px;
      
    }
    .center-thanks button{
     place-self: center;
    }
    /* **************** */
    swiper-slide img {
        display: block;
        width: 80%;
        height: 80%;
        object-fit: cover;
      }
}


/* media query for phone size */
@media screen and (max-width: 540px){
    .navBar-links.active{  display: flex;
        height: 36vh;
        right: 0;
        top: 55px;
        gap: 25px;
    }
    .first-section{
        height: 65vh;
    }
    .first-section h2{
        font-size: 35px;
    }
    .first-section p{
        font-size: 16px;
        width: 80%;
    }
    .first-section p{
        font-size: 19px;
        width: 80%;
    }
    .second-segment .flex .initial-seg{
       padding: 20px;
    }
    .second-segment .flex .initial-seg h3{
        /* border-left: 6px solid var(--color-primary); */
        padding-left: 5px;
        font-size: 20px;
        font-weight: 800;
        margin-bottom:25px ;
    }
    .second-segment .flex .initial-seg p{
        font-size: 20px;
        font-weight: 600;
    }
    .third-section  h1{
        text-align: center;
        font-size: 25px;
      
    }
    .fourth-segment h2{
        text-align: center;
        font-size: 25px;
     
    }
    .side-text{
        padding: 20px;
        font-size: 20px;
    }
    .grid-section .text-area h3{
        color: var(--color-primary);
        font-size: 20px;
        padding: 20px;
    }
    .grid-section .text-area p{
        font-size: 16px;
        width: 100%;
        margin-top: 20px;
    
    }
    
    .eclipse-flex{
        flex-wrap: wrap;
        /* margin-left: 50px; */
    }
    .banner-section .banner-text p{
    font-size: 18px;
    text-align: start;
    margin: 30px 0;
    width: 100%;
 }
 .banner-section .banner-text h3{
    font-size:30px;
    margin-top: 40px;
 }
    .circle{
        border-radius: 50%;
        border: 3px solid #874900;
        display: flex;
        align-self: center;
        justify-content: center;
        width: 120px;
        height: 120px;
       
    }
    .semicircle-text{
        width: 100%;
        margin: 40px 0;
        line-height: 1.9em;
        text-align: start;
        font-size: 16px;
    }
    .semicircle-text h3{
        font-size: 20px;
    
    }
    .semicircle-text p{
        font-size: 16px;}

    h3.title-question{
        font-size: 18px;
    }  
    .footer-main h3{
        font-size: 16px;
    }        
         
    /* ABOUT US PAGE */
    .about-hero-page{
        background-color: var(--about-us);
        height: 35vh;
    }
    .about-hero-page .content h2{
        text-align: center;
        font-size: 30px;
        justify-content: center;
        color: #FFFFFF;
    }
    .about-hero-page .content P {
        font-size: 17px;
    }
    .section-contained{
        margin-top: 390px;
    }
    .flex-about-content{
        display: flex;
        gap: 30px;
        justify-content: center;
        align-items: center;
        padding: 20px;    
    }
    .info-content{
        width: 60%;
    }
    /* services page */
    .hero-services{
        font-size: 25px;
        /* padding-top: 140px ; */
    }
    .hero-services h2{
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .form-container h2{
        font-size: 18px;
    }
    .white-container .form-container form{
        padding: 10px;}
    .form-container form input{
        width: 280px;
        height: 40px;
       
    }
    .form-container textarea{
      
        width: 280px;
    }
    swiper-slide {
        padding-left: 43px;

    }
   
}