@import "style.css";

@import url('https://fonts.googleapis.com/css2?family=Comfortaa:wght@300;400;500;600;700&display=swap');

/*default class*/
body {
    -webkit-box-sizing: border-box;
    -moz-box-sizing   : border-box;
    -o-box-sizing     : border-box;
    box-sizing        : border-box;
    font-family: Calibri, Verdana, Helvetica, sans-serif;
}

.transition_me {
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition   : all 0.3s ease-in-out;
    -o-transition     : all 0.3s ease-in-out;
    transition        : all 0.3s ease-in-out;
}

.index_over {
    z-index: 1000
}

.form-select:focus {
    border-color: none;
}

button:focus:not(:focus-visible),
button,
select,
input,
textarea {
    outline: none;

}

.rounded {
    border-radius: 5px !important
}

.carousel-control-next:focus,
.carousel-control-next:hover,
.carousel-control-prev:focus,
.carousel-control-prev:hover,
.carousel-control-next,
.carousel-control-prev {
    opacity: 1;
    width  : 10%;
}

.point {
    cursor: pointer;
}

.row {
    margin-right: 0px;
    margin-left : 0px;
}

.tiny_font {
    font-size: 12px
}

.back_me {
    background: transparent
}

fieldset {
    display     : block;
    border-width: 2px !important;
    border-style: groove !important;
    border-color: transparent !important;
    border-image: initial !important;
}

fieldset>legend {
    margin-left: 30px
}

legend {
    float: none;
    width: auto
}

/*main-class*/
:root {
    --main--color  : #0b2872;
    --second--color: #fff;
    --third--color : #000;
    --back--color  : #f7f7f7;
}

.main_color {
    color: var(--main--color);
}

.second_color {
    color: var(--second--color);
}

.third_color {
    color: var(--third--color);
}

.back_color {
    color: var(--back--color);
}

.main_bg {
    background: var(--main--color);
}

.back_bg {
    background-color: var(--back--color);
}

.second_bg {
    background: var(--second--color);
}

.third_bg {
    background: var(--third--color);
}

.main_bt {
    color           : var(--second--color);
    /* background   : linear-gradient(to top right, #66ccff 0%, #2eafc6 100%); */

    background-color: var(--main--color);
}

.main_bt:hover {
    color           : var(--second--color);
    /* background   : linear-gradient(to top right, #66ccff 0%, #2eafc6 100%); */
    background-color: var(--third--color);

}

.second_bt {
    background-color: var(--main--color);
    color           : var(--third--color);
}

.second_bt:hover {
    background-color: var(--second--color);
    color           : var(--third--color);
}


.main_link {
    color: var(--main--color);
}

.main_link:hover {
    color: #000;
}

.second_link {
    color: #22c4ff;
}

.second_link:hover {
    color: #FFF;
}


.light_color {
    color: #AAA;
}

.main_border {
    border: 2px solid var(--main--color)
}

.our_opacity {
    opacity: 0.6;
}

.flex_center {
    display        : flex;
    justify-content: center;
    align-items    : center;
}

.flex_between {
    display        : flex;
    justify-content: space-between;
    align-items    : center;
}

.flex_end {
    display        : flex;
    justify-content: flex-end;
    align-items    : center;
}

.flex_start {
    display        : flex;
    justify-content: flex-start;
    align-items    : center;
}

.flex_top_y {
    display        : flex;
    justify-content: center;
    align-items    : flex-start;
}

.flex_bottom_y {
    display        : flex;
    justify-content: center;
    align-items    : flex-end;
}

.uppercase {
    text-transform: uppercase;
}

/*start main_slider*/
.main_header {
    /* background-image       : url("../img/Mask\ Group\ 1.png"); */
    -webkit-background-size: cover;
    -moz-background-size   : cover;
    -o-background-size     : cover;
    background-size        : cover;
    
    position               : relative;
}


.main_slider {
    height  : calc(100% - 126px);
    position: absolute;
    width   : 100%;
}

.main_slider h1.second_color.fw-bold.display-4 {
    text-transform: uppercase;
}

/* start about us */
.title h2 {
    text-transform: uppercase;
}

.in_about {
    background-image       : url("../img/Group\ 3158.png");
    -webkit-background-size: cover;
    -moz-background-size   : cover;
    -o-background-size     : cover;
    background-size        : cover;
    position               : relative;
}

.to_top_border {
    position        : absolute;
    top             : 0px;
    left            : 44%;
    width           : 12%;
    height          : 5px;
    background-color: var(--main--color);
    transition      : 0.5s;
}

.testimonial:hover .to_top_border,
.services:hover .to_top_border,
.about:hover .to_top_border {
    left      : 0;
    width     : 100%;
    transition: 0.7s;
}

/* start services */
.services {
    background-image: linear-gradient(rgb(255, 255, 255), rgb(226, 226, 226));
}

.in_services {
    position: relative;
}

.in_services .my_services {
    background-color: var(--second--color);
    padding         : 20px;
    min-height          : 200px;
    border-radius   : 35px;
    cursor          : pointer;
    z-index         : 1;
    position        : relative;
}

.in_services .my_services::after {
    content         : "";
    left            : 50%;
    top             : 50%;
    position        : absolute;
    width           : 0px;
    height          : 0px;
    transform       : translate(-50%, -50%);
    background-color: #EEE;
    z-index         : -1;
    transition      : 0.5s;
    border-radius   : 35px;
}

.in_services .my_services:hover::after {
    width     : 100%;
    height    : 100%;
    transition: 0.5s;
}

.in_services .my_services .header_cart {
    height: 60px;
}

.in_services .my_services .header_cart span {
    font-weight: bold;
    font-size  : 14px;

}

.in_services .my_services .in_img {
    width : 110px;
    height: 110px;
}

/* start testimonial */
.in_testimonial {
    position: relative;
}

.in_customer {
    text-align   : center;
    border       : 2px solid var(--main--color);
    border-radius: 35px;
    padding      : 20px;
    position     : relative;
    cursor       : pointer;
    z-index      : 1;
}

.in_customer img {
    border-radius: 50%;
    height       : 130px;
    width        : 130px;
}

.in_customer::after {
    content         : "";
    left            : 50%;
    top             : 50%;
    position        : absolute;
    width           : 0px;
    height          : 0px;
    transform       : translate(-50%, -50%);
    background-color: #EEE;
    z-index         : -1;
    transition      : 0.5s;
    border-radius   : 35px;
}

.in_customer:hover::after {
    width     : 100%;
    height    : 100%;
    transition: 0.5s;
}

.in_testimonial .my_arrow {
    width           : 60px;
    height          : 60px;
    background-color: var(--second--color);
    border          : 1px solid var(--main--color);
    color           : var(--main--color);
    transition      : 0.5s;
    display         : flex;
    align-items     : center;
    justify-content : center;
}

.in_testimonial .my_arrow:hover {
    background-color: var(--main--color);
    color           : var(--second--color);
    transition      : 0.5s;
}

.in_testimonial .my_arrow i {
    font-size  : 30px;
    font-weight: bolder;
}

/* start about page */
.breadcrumb_bread {
    background             : url('../img/panoramic-shot-oil-rigs-sea-with-beautiful-sunset.png') center;
    -webkit-background-size: cover;
    -moz-background-size   : cover;
    -o-background-size     : cover;
    background-size        : cover;
}

.breadcrumb_bread .breadcrumb {
    background-color: #0d308e70;
    padding         : 15px 30px;
    border-radius   : 35px;
}

.a:hover {
    color:yellow;
}

.breadcrumb-item+.breadcrumb-item::before,
.breadcrumb_bread li.breadcrumb-item.active,
.breadcrumb_bread li.breadcrumb-item a {
    color          : var(--second--color);
    font-size      : 22px;
    font-weight    : bold;
    text-decoration: none;
    text-transform: uppercase;
}

/* start services_details */
.sour .services_arrow{
    width: 50px;
    height: 50px;
    background-color: var(--second--color);
    color: var(--main--color);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 30px;
    font-weight: bold;
    transition: 0.5s;
}
.sour .services_arrow:hover{
    background-color: var(--main--color);
    color: var(--second--color);
    transition: 0.5s;
}