@font-face {
    font-family: myFirstFont;
    src: url(./itc-avant-garde-gothic-lt-demi.ttf);
  }

  @font-face {
    font-family: myPfont;
    src: url(./Salesforce\ Sans.ttf);
  }

*{
    margin:0;
    padding:0;
    box-sizing: border-box;
    font-family: myFirstFont!important;
}
p{
        font-family: myPfont!important;
        font-size: 18px;
}

:root {
    --blue: #052f62;
    --bg: #b7dbff;

  }


button{
    cursor:pointer;
}
a{
    text-decoration: none;
    cursor:pointer;
}
/* 
.navbar-brand {
    max-width: 250px;
}
.navbar-brand img{
    width: 100%;
}
header{
    padding: 5px 10px;
}
header .nav-link{
    font-size: 13px;
    color: rgb(0, 0, 0) !important;
    text-transform: uppercase;
    margin: 0 6px;
} */
.hero{
    padding: 70px 0;
    background-color: #f7fbfe;
}
.fisthero h1{
    font-size: 110px;
    font-weight: bold;
    color: var(--blue);
    background-color: var(--bg);
    width: fit-content;
    border-radius: 5px;
    padding: 0 10px;
    margin-top: 60px;
}

.shads{
    background-color: var(--bg);
    border-radius: 5px;
    padding: 0 10px;
}
.fisthero h2{
    font-size: 65px;
    font-weight: bold;
    color: var(--blue);
    font-family: myPfont!important;

}
.hero2 img{
    width: 90%;
    margin-left: auto;
    display: block;
}
.section2{
    text-align: center;
    padding: 70px 0;
}

.herobtns{
    margin-top: 20px;
}
.section2 h3{
    font-size: 57px;
    color: var(--blue);
    margin-bottom: 20px;
    font-weight: bold;
    text-align: center;
}

.section3 h3{
    font-size: 57px;
    color: var(--blue);
    margin-bottom: 20px;
    font-weight: bold;
    text-align: center;
}

.section4 h3{
    font-size: 57px;
    color: var(--blue);
    margin-bottom: 20px;
    font-weight: bold;
    text-align: center;

}
.section3{
    background-color: #f7fbfe;
    padding: 70px 0;
}

.section5 h3{
    font-size: 57px;
    color: var(--blue);
    margin-bottom: 20px;
    font-weight: bold;
    text-align: center;
}


.section2 p{
    color: var(--blue);
    font-size: 20px;
}
.comonbtn{
    display: flex;
    gap:20px;
}
.comonbtn button{
    outline: none;
    border: none;
    padding: 7px 25px;font-size: 18px;
    border-radius: 5px;
}
.comonbtn button:nth-child(1){
    background-color: #0077d6;
    color: white;
}
.comonbtn button:nth-child(2){
    border: 1px solid #0077d6;
    background-color: white;
    color: #0077d6;
}
.btnsection2{
    
    margin: 30px  auto 50px;
    width: fit-content;
 
}
.mreslider1{
   
    width: calc(100% - 30px);
    max-width: 1200px;
    margin: 0 auto;
    margin-top: 80px;
}
.item{
    padding: 0 20px;
}
.section4 p{
    color: var(--blue);
    font-size: 20px;
    text-align: center;
    margin-top: 10px;
}
.section4{
    padding: 70px 0;
    background-image: linear-gradient(to bottom, white , #f7fbfe);
}
.cardsection{
    margin-top: 80px;
    width: 100%;
}
.cardsection h4{
    font-size: 32px;
    margin-top: 25px;
    font-weight: bold;
    color: var(--blue);
}
.maincard{
    display: flex;
    gap: 50px;
    padding: 40px;
    box-shadow: 0 0 20px rgb(192, 192, 192);
    justify-content: space-between;
    border-radius: 20px;
    max-width: 1000px;
    margin: 0 auto;
    margin-bottom: 30px;
}
.maincard img{
    width: 28%;
}
.cardcontent p{
    text-align: left!important;
    font-size: 17px;
}
.cardcontent{
    width: 65%;
}
.imgrow4{
    display: flex;
    padding: 20px;;
   justify-content: space-between;
   width: 100%;
}
.imgrow4 img{
    padding: 20px;
    width: 100%;
}
.section4card{
    box-shadow: 0 0 20px rgb(192, 192, 192);
    border-radius: 20px;
    max-width: 1200px;
    width: calc(100% - 30px);
    margin: 0 auto;
    text-align: center;
    padding: 40px 0;
    margin-top: 20px;
}
.section4card h4{
    font-size: 70px;
    margin-bottom: 25px;
    font-weight: bold;
    color: var(--blue);
}
.btnsection4{
   
    width: fit-content  ;
    margin: 0 auto;
    margin-top: 20px;
}
.buildersection{
    padding: 70px 0;
}
.buildersection h3{
    text-align: center;
    margin-bottom: 30px;
    font-size: 37px;
   
    font-weight: bold;
    color: var(--blue);
}
.builderlogorow{
    padding: 0 20px;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 40px 0;
    max-width: 1000px;
    margin: 0 auto;
}
.builderlogorow img{
    width: 150px;
    height: 75px;
    aspect-ratio: 1/0.5;
    object-fit: contain;
    box-shadow: 0 0 10px #80808052;
    border-radius: 5px;
}
.striplast{
    background-color: var(--blue);
    padding: 50px 0;
    margin-top: 70px;
    position: relative;
}
.striplast h3{
    color: white;
    font-size: 55px;
    margin-bottom: 25px;
    font-weight: bold;
}
.striplast .container{
    position: relative;
}
.dog{
    position: absolute;
    width: 439px;
    top: -269px;
    right: 0;
}
.blogobox{

   
    width: 23%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.striplast .comonbtn button:nth-child(1){
    background-color: white;
    color: var(--blue);
}
.striplast .comonbtn button:nth-child(2){
    border: 1px solid white;
    background-color: transparent;
    color: white;
}
.owl-theme .owl-dots .owl-dot.active span  {
    background: #80aedb!important;
}







@media screen and (max-width:740px) {
      
        .hero2{
            margin-top: 40px;
        }

        .fisthero h1 {
            font-size: 69px;
        }
        /* .fisthero h2 {
            font-size: 55px;
          
        } */

        .comonbtn button {
            outline: none;
            border: none;
            padding: 7px 14px;
            font-size: 13px;
            border-radius: 5px;
        }
        .section2 h3 {
            font-size: 29px;
           
        }
        .section3 h3 {
            font-size: 29px;
            line-height: 1.4;
        }
        .hero2 img {
            width: 100%;
            display: block;
        }

        .section4 h3 {
            font-size: 29px;
            line-height: 1.4;
        }
        .maincard {
            display: flex;
            gap: 15px;
            padding: 17px;
            box-shadow: 0 0 20px rgb(192, 192, 192);
            justify-content: space-between;
            border-radius: 20px;
            max-width: 1000px;
            width: calc(100% - 30px);
            margin: 0 auto;
            margin-bottom: 30px;
            flex-direction: column;
        }
        .cardcontent {
            width: 100%;
        }
        .maincard img {
            width: 50%;
        }
        .section4card h4 {
            font-size: 29px;
            padding: 0 10px;
           
        }
        .btnsection4 {
            width: fit-content;
            margin: 0 auto;
            margin-top: 20px;
            padding: 0 9px;
        }
        .buildersection h3 {
            text-align: center;
            margin-bottom: 50px;
            font-size: 29px;
            font-weight: bold;
            color: var(--blue);
        }
        .striplast h3 {
            color: white;
            font-size: 29px;
            margin-bottom: 25px;
            font-weight: bold;
            padding-right: 90px;
        }
        .dog {

            position: absolute;
            width: 282px;
            top: -62px;
            right: -34px;
            transform: translateX(25px);
            overflow: hidden;
            object-fit: contain;
        }

        .blogobox {
            width: 48%;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .builderlogorow {
            padding: 0 4px;
            display: flex;
            justify-content: center;
            flex-wrap: wrap;
            gap: 10px;
            max-width: 1150px;
            margin: 0 auto;
        }

        .striplast .comonbtn button:nth-child(1) {
            background-color: white;
            color: var(--blue);
            padding: 0px 7px;
            font-size: 10px;
        }
        .striplast .comonbtn button:nth-child(2) {
   
            font-size: 10px;
        }
        .com-btn{
            gap: 7px !important;
            margin-top: 40px !important;
        }
        .striplast {
            padding: 80px 0px;
            overflow: hidden;
        }

}