 :root {
     --primary-color: #FF6B38;
     --dark-blue: #112144;
}
 body {
     background-color: var(--dark-blue);
     color: white;
     font-family: 'Poppins', sans-serif;
}
 @media (min-width: 992px) {
    /* Styles for large screens and greater */
     .border_10{
         border: solid 1px #EEEEEE;
         border-radius: 20px;
    }
     .div_odd{
         margin-right:10px;
         margin-bottom:20px;
    }
     .div_even{
         margin-left:10px;
         margin-bottom:20px;
    }
     .contact_us{
         background-color: #fff;
         color: black;
         height: 140px;
         width: 140px;
         align-content: center;
         border-radius: 50%;
         text-align: center !important;
         cursor: pointer;
    }
     .arrow45{
         background-color: var(--primary-color);
         width: 50px;
         height: 50px;
         position: absolute;
         margin-right: 0px;
         margin-left: 65px;
         margin-top: -4px;
         border-radius: 50%;
    }
     .arrow45_icon{
         color: #fff;
         font-size: x-large;
         padding: 13px;
         rotate: -45deg;
    }
     .main_title{
         font-size:120px;
    }
     .cycle_1{
         position: absolute;
         background-color: var(--primary-color);
         border-radius: 50%;
         width: 100px;
         height: 100px;
         margin-left: 243px;
         margin-top: 82px;
         z-index: -1;
    }
     .cycle_2{
         position: absolute;
         background-color: var(--primary-color);
         border-radius: 50%;
         width: 100px;
         height: 100px;
         margin-left: 500px;
         margin-top: 34px;
         z-index: -1;
    }
     .small_cycle {
         display: flex;
        /* Enable flexbox for the small_cycle */
         justify-content: center;
        /* Horizontally center the icon */
         align-items: center;
        /* Vertically center the icon */
         margin-top: 10px;
        /* Adjust the spacing between the text and the icon */
         background-color: var(--primary-color);
         border-radius: 50%;
         width: 80px;
         height: 80px;
    }
     .box-text{
         font-size: x-large;
    }
     .sub_title{
         font-size:50px;
         text-align: center;
         align-content: space-around;
    }
     .cycle_contact_us{
         margin-left: 150px;
         margin-top: 160px;
    }
}
 @media (min-width: 767px) and (max-width: 992px) {
    /* Styles for medium screens */
     .border_10{
         border: solid 1px #EEEEEE;
         border-radius: 20px;
    }
     .div_odd{
         margin-bottom:20px;
    }
     .div_even{
         margin-bottom:20px;
    }
     .hero_image{
         display:none;
    }
     .contact_us{
         background-color: #fff;
         color: black;
         height: 140px;
         width: 140px;
         align-content: center;
         border-radius: 50%;
         text-align: center !important;
    }
     .arrow45{
         background-color: var(--primary-color);
         width: 50px;
         height: 50px;
         position: absolute;
         margin-right: 0px;
         margin-left: 65px;
         margin-top: -4px;
         border-radius: 50%;
    }
     .arrow45_icon{
         color: #fff;
         font-size: x-large;
         padding: 13px;
         rotate: -45deg;
    }
     .main_title{
         font-size:100px;
    }
     .cycle_1{
         position: absolute;
         background-color: var(--primary-color);
         border-radius: 50%;
         width: 100px;
         height: 100px;
         margin-left: 210px;
         margin-top: 52px;
         z-index: -1;
    }
     .cycle_2{
         position: absolute;
         background-color: var(--primary-color);
         border-radius: 50%;
         width: 100px;
         height: 100px;
         margin-left: 413px;
         margin-top: 21px;
         z-index: -1;
    }
     .small_cycle {
         display: flex;
        /* Enable flexbox for the small_cycle */
         justify-content: center;
        /* Horizontally center the icon */
         align-items: center;
        /* Vertically center the icon */
         margin-top: 5px;
        /* Adjust the spacing between the text and the icon */
         background-color: var(--primary-color);
         border-radius: 50%;
         width: 60px;
         height: 60px;
    }
     .box-text{
         font-size: large;
    }
     .sub_title{
         font-size: 30px;
         margin-right: 10px;
         margin-left: 10px;
         margin-bottom: 10px;
         border-radius: 8px !important;
         text-align: center;
         align-content: space-around;
         max-width: 96%;
        /* margin-right: 10px !important;
         */
         margin-left: 10px !important;
         padding: 30px;
    }
     .cycle_contact_us{
         margin-left: 125px;
         margin-top: 130px;
    }
}
 @media (max-width: 767px) {
    /* Styles for small screens and less */
     .border_10{
         border: solid 1px #EEEEEE;
         border-radius: 10px;
    }
     .div_odd{
         margin-bottom:20px;
    }
     .div_even{
         margin-bottom:20px;
    }
     .hero_image{
         display:none;
    }
     .Contactimg{
        display:none;
    }
     .pb_on_small{
         margin-bottom:10px;
    }
     .contact_us{
         background-color: #fff;
         color: black;
         height: 140px;
         width: 140px;
         align-content: center;
         border-radius: 50%;
         text-align: center !important;
    }
     .arrow45{
         background-color: var(--primary-color);
         width: 50px;
         height: 50px;
         position: absolute;
         margin-right: 0px;
         margin-left: 65px;
         margin-top: -4px;
         border-radius: 50%;
    }
     .arrow45_icon{
         color: #fff;
         font-size: x-large;
         padding: 13px;
         rotate: -45deg;
    }
     .main_title{
         font-size:70px;
    }
     .cycle_1{
         position: absolute;
         background-color: var(--primary-color);
         border-radius: 50%;
         width: 100px;
         height: 100px;
         margin-left: 146px;
         margin-top: 9px;
         z-index: -1;
    }
     .cycle_2{
         position: absolute;
         background-color: var(--primary-color);
         border-radius: 50%;
         width: 100px;
         height: 100px;
         margin-left: 283px;
         margin-top: 0px;
         z-index: -1;
    }
     .small_cycle {
         display: flex;
        /* Enable flexbox for the small_cycle */
         justify-content: center;
        /* Horizontally center the icon */
         align-items: center;
        /* Vertically center the icon */
         margin-top: 0px;
        /* Adjust the spacing between the text and the icon */
         background-color: var(--primary-color);
         border-radius: 50%;
         width: 40px;
         height: 40px;
    }
     .box-text{
         font-size: large;
    }
     .sub_title{
         font-size: 30px;
         margin-right: 10px;
         margin-left: 10px;
         margin-bottom: 10px;
         border-radius: 8px !important;
         text-align: center;
         align-content: space-around;
         max-width: 96%;
        /* margin-right: 10px !important;
         */
         margin-left: 10px !important;
         padding: 30px;
    }
     .cycle_contact_us{
         margin-left: 91px;
         margin-top: 71px;
    }
}
 .flinks{
     font-size: 24px;
     text-decoration: none;
}
 .grid-background::before {
     content: '';
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 90%;
     background-image: linear-gradient(0deg, rgb(255 255 255 / 10%) 1px, #ff030300 1px), linear-gradient(90deg, rgb(255 255 255 / 10%) 1px, #ff030300 1px);
     pointer-events: none;
    /* Prevents clicks from being blocked */
     background-size: 150px 150px;
}
 .grid-background50::before {
     content: '';
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 70%;
     background-image: linear-gradient(0deg, rgb(255 255 255 / 10%) 1px, #ff030300 1px), linear-gradient(90deg, rgb(255 255 255 / 10%) 1px, #ff030300 1px);
     pointer-events: none;
    /* Prevents clicks from being blocked */
     background-size: 150px 150px;
}
 .navbar {
     background-color: transparent !important;
     padding: 1.5rem 0;
}
 .navbar-nav .nav-link {
     color: #fff;
    /* Your desired color */
     font-size: 20px;
}
 .navbar-nav .nav-link:hover {
     color: #ccc;
    /* Change color on hover */
}
 .service-card {
     background: rgba(255, 255, 255, 0.05);
     border-radius: 15px;
     padding: 2rem;
     height: 100%;
     transition: transform 0.3s;
}
 .service-card:hover {
     transform: translateY(-5px);
}
 .contact-form {
     background: white;
     padding: 2rem;
     border-radius: 15px;
}
 .btn-primary {
     background-color: var(--primary-color);
     border-color: var(--primary-color);
     padding: 0.75rem 2rem;
     border-radius: 25px;
}
 .client-grid {
     display: grid;
     grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
     gap: 1rem;
}
 .client-logo {
     background: white;
     border-radius: 10px;
     padding: 1rem;
     aspect-ratio: 1;
     display: flex;
     align-items: center;
     justify-content: center;
}
 footer {
     background-color: #112144;
     padding: 3rem 0;
}
 .cycle_div{
     display: inline;
     background-color: var(--primary-color);
     border-radius: 50%;
     padding: 14px;
     padding-left: 20px;
     margin-left: -18px;
     margin-top: -14px;
     position: absolute;
     z-index: -1;
     color: black;
     width: 60px;
     height: 60px;
}
 .arrow_45_icon{
     color: #fff;
     font-size: xxx-large;
     padding: 27px;
     rotate: 45deg;
}
 .arrow_icon{
     color: #fff;
     font-size: xxx-large;
     padding: 27px;
}
 .wgt_border{
     border: solid 1px;
     border-radius: 15px;
     background-color: var(--dark-blue);
     z-index:1;
}
 .wgt_border2{
     border: solid 1px;
     border-radius: 15px;
     background-color: var(--dark-blue);
     z-index:1;
     display: flex;
    /* Enable flexbox for the small_cycle */
     justify-content: center;
    /* Horizontally center the icon */
     align-items: center;
    /* Vertically center the icon */
     margin-top: 10px;
    /* Adjust the spacing between the text and the icon */
}
 .orange_border{
     background-color: var(--primary-color);
     border-radius: 10px;
     padding: 10px;
}
 .white_border{
     background-color: #fff;
     color:var(--dark-blue);
     border-radius: 10px;
     padding: 10px;
}
 .box-image{
     height: 215px;
     border-radius: 20px;
     background-repeat: no-repeat;
}
 .form_color::placeholder {
    /* Chrome, Firefox, Opera, Safari 10.1+ */
     color: #fff;
     opacity: 0.9;
    /* Firefox */
}
 .form_color:-ms-input-placeholder {
    /* Internet Explorer 10-11 */
     color: #fff;
}
 .form_color::-ms-input-placeholder {
    /* Microsoft Edge */
     color: #fff;
}
 .form_color{
     background-color: var(--dark-blue) !important;
    color:#fff !important;
}
 .font40{
     font-size:40px;
}
